Remove debug output

menu-positioner.js

@@ -90,7 +90,6 @@ export class MenuPositioner {
 
     // Final validation
     if (isNaN(left) || isNaN(top)) {
-      console.warn('NaN detected in basic positioning, using fallback values:', { left, top });
       left = isNaN(left) ? 10 : left;
       top = isNaN(top) ? 10 : top;
     }
@@ -102,8 +101,6 @@ export class MenuPositioner {
     // Add a data attribute to indicate placement for potential styling
     menuElement.setAttribute('data-placement', placement);
     
-    console.log(`Menu positioned ${placement} selection at: left=${left}px, top=${top}px`);
-    
     return { left, top, placement };
   }
 
@@ -118,11 +115,8 @@ export class MenuPositioner {
     const { view } = editorInstance;
     const { selection } = editorInstance.state;
 
-    console.log('positionMenuAdvanced called with:', { clientRect, selection: selection.from + '-' + selection.to });
-
     let start, end;
     if (clientRect) {
-      console.log('Using clientRect:', clientRect);
       // Ensure clientRect has all required properties
       start = {
         left: clientRect.left || 0,
@@ -135,9 +129,7 @@ export class MenuPositioner {
       try {
         start = view.coordsAtPos(selection.from);
         end = view.coordsAtPos(selection.to);
-        console.log('Using editor coordinates:', { start, end });
       } catch (error) {
-        console.warn('Failed to get coordinates from editor selection, falling back to basic positioning:', error);
         return MenuPositioner.positionMenu(menuElement, editorInstance, clientRect);
       }
     }
@@ -146,15 +138,12 @@ export class MenuPositioner {
     if (!start || typeof start.left !== 'number' || isNaN(start.left) || 
         typeof start.top !== 'number' || isNaN(start.top) ||
         start.left === 0 && start.top === 0) {
-      console.warn('Invalid or zero coordinates detected, using editor selection instead:', { start, end });
       
       // Try to get coordinates from current editor selection
       try {
         start = view.coordsAtPos(selection.from);
         end = view.coordsAtPos(selection.to);
-        console.log('Fallback to editor coordinates worked:', { start, end });
       } catch (error) {
-        console.warn('Editor coordinates also failed, using basic positioning');
         return MenuPositioner.positionMenu(menuElement, editorInstance, null);
       }
     }
@@ -219,7 +208,6 @@ export class MenuPositioner {
 
     // Final validation
     if (isNaN(left) || isNaN(top)) {
-      console.warn('NaN detected in positioning calculation, using fallback values:', { left, top, start, end });
       left = isNaN(left) ? 10 : left;
       top = isNaN(top) ? 10 : top;
     }
@@ -229,8 +217,6 @@ export class MenuPositioner {
     menuElement.style.top = `${top}px`;
     menuElement.setAttribute('data-placement', placement);
     
-    console.log(`Menu positioned ${placement} at: left=${left}px, top=${top}px (viewport: ${viewportWidth}x${viewportHeight}, scroll: ${scrollY})`);
-    
     return { left, top, placement };
   }
 }

tp-rich-text-box.js

@@ -4,6 +4,7 @@ Copyright (c) 2025 trading_peter
 This program is available under Apache License Version 2.0
 */
 
+import './tp-rtb-emoji-suggestion.js';
 import { LitElement, html, css } from 'lit';
 import { Editor } from '@tiptap/core';
 import Document from '@tiptap/extension-document';
@@ -13,9 +14,6 @@ import HardBreak from '@tiptap/extension-hard-break';
 import { UndoRedo } from '@tiptap/extensions';
 import Mention from '@tiptap/extension-mention';
 import { MenuPositioner } from './menu-positioner.js';
-import './tp-rtb-emoji-suggestion.js';
-
-
 import { FormElement } from '@tp/helpers/form-element.js';
 
 class TpRichTextBox extends FormElement(LitElement) {
@@ -324,20 +322,63 @@ class TpRichTextBox extends FormElement(LitElement) {
     // If we have suggestions, add a single Mention extension with all suggestions
     if (suggestions.length > 0) {
       this.extensions.push(
-        Mention.configure({
+        Mention.extend({
+          addAttributes() {
+            return {
+              ...this.parent?.(),
+              subtype: {
+                default: null,
+                parseHTML: element => {
+                  const subtype = element.getAttribute('data-subtype');
+                  if (subtype) return subtype;
+                  
+                  // Infer from class or other attributes for backward compatibility
+                  if (element.classList.contains('command-mention')) return 'command';
+                  if (element.classList.contains('user-mention')) return 'user';
+                  if (element.getAttribute('data-mention-suggestion-char') === '/') return 'command';
+                  if (element.getAttribute('data-mention-suggestion-char') === '@') return 'user';
+                  
+                  return null;
+                },
+                renderHTML: attributes => {
+                  if (!attributes.subtype) {
+                    return {}
+                  }
+                  return {
+                    'data-subtype': attributes.subtype,
+                  }
+                },
+              },
+              date: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-date'),
+                renderHTML: attributes => {
+                  if (!attributes.date) {
+                    return {}
+                  }
+                  return {
+                    'data-date': attributes.date,
+                  }
+                },
+              },
+            }
+          }
+        }).configure({
           suggestions: suggestions,
-          renderHTML({ options, node, suggestion }) {
+          renderHTML({ options, node }) {
+            const subtype = node.attrs.subtype;
+            const suggestion = suggestions.find(s => s.suggestionType === subtype);
+
             if (suggestion && suggestion.renderHTML) {
               return suggestion.renderHTML({ options, node, suggestion });
             }
 
-            console.warn('No renderHTML defined for mention suggestion. Using default rendering.');
-
             return [
               'span',
               {
                 'data-type': 'mention',
-                contenteditable: 'false'
+                contenteditable: 'false',
+                'data-subtype': subtype
               },
               node.attrs.label || node.attrs.id
             ];

tp-rtb-user-mention.js

@@ -138,6 +138,7 @@ export class TpRtbUserMention extends TpRtbBaseExtension {
   
   getSuggestionConfig() {
     return {
+      suggestionType: 'user',
       char: '@',
       allowSpaces: false,
       startOfLine: false,
@@ -152,6 +153,7 @@ export class TpRtbUserMention extends TpRtbBaseExtension {
             'data-type': 'mention',
             'data-id': node.attrs.id,
             'data-label': node.attrs.label,
+            'data-subtype': 'user',
             'data-mention-suggestion-char': '@',
             contenteditable: 'false'
           },
@@ -203,7 +205,8 @@ export class TpRtbUserMention extends TpRtbBaseExtension {
               if (component._command) {
                 component._command({ 
                   id: user.id,
-                  label: user.username
+                  label: user.username,
+                  subtype: 'user'
                 });
               }
             };