@lowdefy/blocks-tiptap 5.5.0 → 5.6.0

package/dist/blocks/TiptapMentionInput/TiptapMentionInput.js

@@ -27,9 +27,70 @@ import suggestion from './suggestion.js';
 import useGroupMembersPopover from './useGroupMembersPopover.js';
 import useTiptapMentionState from './useTiptapMentionState.js';
 import './style.module.css';
+// A mention node's `id` attribute holds whatever option the user picked — a
+// plain string, or the option object ({ label, value, tag }) — so the label
+// and the DOM identifier are both derived from it. Content loaded back from
+// saved html arrives with a STRING id (tiptap's parseHTML reads data-id) and
+// the label in `data-label`, which is why both render paths take the node's
+// attributes rather than the id alone.
 function mentionLabel(id) {
     return id?.tag?.title ?? id?.label ?? id;
 }
+// The string that goes into the DOM as data-id. Option objects are commonly
+// { label, value } with the identity inside `value` (a string, or an object
+// with _id / id); fall back to the object's own _id / id. Anything without a
+// scalar identity yields undefined and data-id is omitted — never the
+// "[object Object]" tiptap's stock attribute renderer produces when it
+// stringifies the whole option.
+function scalarId(candidate) {
+    if (type.isString(candidate) || type.isNumber(candidate)) return String(candidate);
+    return undefined;
+}
+function mentionId(id) {
+    if (type.isNone(id)) return undefined;
+    if (type.isString(id) || type.isNumber(id)) return String(id);
+    if (!type.isObject(id)) return undefined;
+    const value = id.value;
+    if (type.isObject(value)) {
+        return scalarId(value._id) ?? scalarId(value.id) ?? scalarId(value.value);
+    }
+    return scalarId(value) ?? scalarId(id._id) ?? scalarId(id.id);
+}
+function nodeLabel(attrs) {
+    const label = type.isString(attrs.label) && attrs.label !== '' ? attrs.label : undefined;
+    const derived = mentionLabel(attrs.id);
+    return label ?? (type.isString(derived) || type.isNumber(derived) ? derived : undefined);
+}
+// Mention with its `id` and `label` attributes rendered through the helpers
+// above: data-id is always a scalar identifier (or absent), and data-label
+// always carries the display label so saved html round-trips with a readable
+// mention even though the id comes back as a string.
+const LowdefyMention = Mention.extend({
+    addAttributes () {
+        const parent = this.parent?.() ?? {};
+        return {
+            ...parent,
+            id: {
+                ...parent.id,
+                renderHTML: (attributes)=>{
+                    const id = mentionId(attributes.id);
+                    return type.isNone(id) ? {} : {
+                        'data-id': id
+                    };
+                }
+            },
+            label: {
+                ...parent.label,
+                renderHTML: (attributes)=>{
+                    const label = nodeLabel(attributes);
+                    return type.isNone(label) ? {} : {
+                        'data-label': label
+                    };
+                }
+            }
+        };
+    }
+});
 const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loading, methods, properties, required, validation, value })=>{
     const { emit, insertImage } = useTiptapMentionState({
         value,
@@ -40,13 +101,13 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
     const char = properties.mentions?.char ?? '@';
     const allowSpaces = properties.mentions?.allowSpaces !== false;
     const limit = properties.mentions?.limit ?? 5;
-    const mentionExtension = Mention.configure({
+    const mentionExtension = LowdefyMention.configure({
         HTMLAttributes: {
             class: 'tiptap-mention'
         },
         renderHTML ({ options, node }) {
             const id = node.attrs.id;
-            const label = mentionLabel(id);
+            const label = nodeLabel(node.attrs) ?? '';
             const group = id?.tag?.group;
             const modifier = {};
             if (!type.isNone(group)) {
@@ -62,8 +123,7 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
                 return [
                     'a',
                     mergeAttributes({
-                        href,
-                        'data-id': id?._id
+                        href
                     }, options.HTMLAttributes, modifier),
                     `${char}${label}`
                 ];
@@ -75,7 +135,7 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
             ];
         },
         renderText ({ node }) {
-            return `${char}${mentionLabel(node.attrs.id)}`;
+            return `${char}${nodeLabel(node.attrs) ?? ''}`;
         },
         suggestion: suggestion({
             methods,

package/dist/blocks/TiptapMentionInput/useTiptapMentionState.js

@@ -43,7 +43,9 @@ function useTiptapMentionState({ value, methods }) {
         const mentionsMap = new Map();
         (json.content ?? []).filter((c)=>c.type === 'paragraph').forEach((c)=>{
             c.content?.forEach((cc)=>{
-                if (cc.type === 'mention') {
+                // Only freshly picked mentions carry the option object; a node parsed
+                // back from saved html has a string id and no `value` to report.
+                if (cc.type === 'mention' && cc.attrs.id?.value !== undefined) {
                     mentionsMap.set(JSON.stringify(cc.attrs.id.value), cc.attrs.id.value);
                 }
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-tiptap",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "license": "Apache-2.0",
   "description": "Lowdefy TipTap rich-text editor blocks.",
   "homepage": "https://lowdefy.com",
@@ -46,9 +46,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "5.5.0",
-    "@lowdefy/blocks-antd": "5.5.0",
-    "@lowdefy/helpers": "5.5.0",
+    "@lowdefy/block-utils": "5.6.0",
+    "@lowdefy/blocks-antd": "5.6.0",
+    "@lowdefy/helpers": "5.6.0",
     "@tiptap/core": "2.27.2",
     "@tiptap/extension-bubble-menu": "2.27.2",
     "@tiptap/extension-file-handler": "2.27.2",
@@ -73,8 +73,8 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.5.0",
-    "@lowdefy/e2e-utils": "5.5.0",
+    "@lowdefy/block-dev-e2e": "5.6.0",
+    "@lowdefy/e2e-utils": "5.6.0",
     "@playwright/test": "1.50.1",
     "@swc/cli": "0.8.0",
     "@swc/core": "1.15.18",