@lowdefy/blocks-tiptap 6.0.0 → 6.1.0

package/dist/blocks/TiptapInput/TiptapInput.js

@@ -15,12 +15,12 @@
 */ import React, { useEffect } from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
-import { useEditor, EditorContent } from '@tiptap/react';
+import { EditorContent } from '@tiptap/react';
 import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
 import PopoverMenu from '../utils/PopoverMenu.js';
-import buildExtensions from '../utils/buildExtensions.js';
 import computeHeightStyle from '../utils/computeHeightStyle.js';
 import statusClass from '../utils/statusClass.js';
+import useTiptapEditor from '../utils/useTiptapEditor.js';
 import useTiptapState from './useTiptapState.js';
 import './style.css';
 const TiptapInput = ({ blockId, components: { Icon, Link }, events, loading, methods, properties, required, validation, value })=>{
@@ -33,26 +33,18 @@ const TiptapInput = ({ blockId, components: { Icon, Link }, events, loading, met
     });
     const disabled = properties.disabled === true || loading;
     const uploadEnabled = !type.isNone(uploadPolicyRequestId);
-    const extensions = buildExtensions({
-        properties,
-        insertImage,
-        uploadEnabled
-    });
     const heightStyle = computeHeightStyle({
         rows: properties.rows,
         autoSize: properties.autoSize
     });
-    const editor = useEditor({
-        extensions,
-        content: value?.html || '',
-        editable: ()=>!disabled,
-        onUpdate ({ editor }) {
-            // User-driven change. Emit the full derived value to Lowdefy.
-            emit(editor);
-            methods.triggerEvent({
-                name: 'onChange'
-            });
-        }
+    const editor = useTiptapEditor({
+        disabled,
+        emit,
+        insertImage,
+        methods,
+        properties,
+        uploadEnabled,
+        value
     });
     // Register upload-policy and download-policy events once (if configured).
     useEffect(()=>{
@@ -87,62 +79,6 @@ const TiptapInput = ({ blockId, components: { Icon, Link }, events, loading, met
             });
         }
     }, []);
-    // Register methods as soon as the editor is available.
-    useEffect(()=>{
-        if (!editor) return;
-        methods.registerMethod('clear', ()=>{
-            editor.commands.clearContent();
-            emit(editor);
-        });
-        methods.registerMethod('setContent', (args)=>{
-            editor.commands.setContent(args?.html ?? '');
-            emit(editor);
-        });
-        methods.registerMethod('focus', ()=>{
-            editor.commands.focus();
-        });
-    }, [
-        editor
-    ]);
-    // External value.html → editor sync. One-way only: we read value.html and
-    // push it into the editor with setContent(..., false) so tiptap's onUpdate
-    // does not fire. No write-back via emit() — that would race with concurrent
-    // SetState calls (child effects fire before parent effects, so a sibling's
-    // onMount SetState could be overwritten by our derived emit). Derived
-    // fields (text/markdown/fileList) are populated on user interaction via
-    // onUpdate; downstream consumers of seeded content should read value.html
-    // directly, or include the fields they need in their SetState payload.
-    useEffect(()=>{
-        if (!editor) return;
-        const next = value?.html ?? '';
-        const current = editor.getHTML();
-        if (next !== current) {
-            editor.commands.setContent(next, false);
-        }
-    }, [
-        value?.html,
-        editor
-    ]);
-    useEffect(()=>{
-        if (!editor) return;
-        editor.setOptions({
-            editable: !disabled
-        });
-    }, [
-        editor,
-        disabled
-    ]);
-    useEffect(()=>{
-        if (!editor) return;
-        const placeholderExt = editor.extensionManager.extensions.find((extension)=>extension.name === 'placeholder');
-        if (placeholderExt) {
-            placeholderExt.options.placeholder = properties.placeholder ?? '';
-            editor.view.dispatch(editor.state.tr);
-        }
-    }, [
-        editor,
-        properties.placeholder
-    ]);
     const wrapperClass = [
         'tiptap-wrapper',
         properties.bordered === false ? 'tiptap-wrapper-borderless' : '',

package/dist/blocks/TiptapMentionInput/TiptapMentionInput.js

@@ -15,14 +15,14 @@
 */ import React, { useEffect } from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
-import { useEditor, EditorContent } from '@tiptap/react';
+import { EditorContent } from '@tiptap/react';
 import { mergeAttributes } from '@tiptap/core';
 import Mention from '@tiptap/extension-mention';
 import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
 import PopoverMenu from '../utils/PopoverMenu.js';
-import buildExtensions from '../utils/buildExtensions.js';
 import computeHeightStyle from '../utils/computeHeightStyle.js';
 import statusClass from '../utils/statusClass.js';
+import useTiptapEditor from '../utils/useTiptapEditor.js';
 import suggestion from './suggestion.js';
 import useGroupMembersPopover from './useGroupMembersPopover.js';
 import useTiptapMentionState from './useTiptapMentionState.js';
@@ -147,29 +147,22 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
             limit
         })
     });
-    const extensions = buildExtensions({
-        properties,
-        insertImage,
-        mentionExtension,
-        uploadEnabled
-    });
     const heightStyle = computeHeightStyle({
         rows: properties.rows,
         autoSize: properties.autoSize
     });
-    const editor = useEditor({
+    const editor = useTiptapEditor({
+        disabled,
         editorProps: {
             items: type.isArray(properties.mentions?.options) ? properties.mentions.options : []
         },
-        extensions,
-        content: value?.html || '',
-        editable: ()=>!disabled,
-        onUpdate: ({ editor })=>{
-            emit(editor);
-            methods.triggerEvent({
-                name: 'onChange'
-            });
-        }
+        emit,
+        insertImage,
+        mentionExtension,
+        methods,
+        properties,
+        uploadEnabled,
+        value
     });
     useGroupMembersPopover({
         editor,
@@ -234,62 +227,6 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
             });
         }
     }, []);
-    useEffect(()=>{
-        if (!editor) return;
-        methods.registerMethod('clear', ()=>{
-            editor.commands.clearContent();
-            emit(editor);
-        });
-        methods.registerMethod('setContent', (args)=>{
-            editor.commands.setContent(args?.html ?? '');
-            emit(editor);
-        });
-        methods.registerMethod('focus', ()=>{
-            editor.commands.focus();
-        });
-    }, [
-        editor
-    ]);
-    // External value.html → editor sync. One-way only: we read value.html and
-    // push it into the editor with setContent(..., false) so tiptap's onUpdate
-    // does not fire. No write-back via emit() — that would race with concurrent
-    // SetState calls (child effects fire before parent effects, so a sibling's
-    // onMount SetState could be overwritten by our derived emit). Derived
-    // fields (text/markdown/fileList/mentions) are populated on user interaction
-    // via onUpdate; downstream consumers of seeded content should read
-    // value.html directly, or include the fields they need in their SetState
-    // payload.
-    useEffect(()=>{
-        if (!editor) return;
-        const next = value?.html ?? '';
-        const current = editor.getHTML();
-        if (next !== current) {
-            editor.commands.setContent(next, false);
-        }
-    }, [
-        value?.html,
-        editor
-    ]);
-    useEffect(()=>{
-        if (!editor) return;
-        editor.setOptions({
-            editable: !disabled
-        });
-    }, [
-        editor,
-        disabled
-    ]);
-    useEffect(()=>{
-        if (!editor) return;
-        const placeholderExt = editor.extensionManager.extensions.find((extension)=>extension.name === 'placeholder');
-        if (placeholderExt) {
-            placeholderExt.options.placeholder = properties.placeholder ?? '';
-            editor.view.dispatch(editor.state.tr);
-        }
-    }, [
-        editor,
-        properties.placeholder
-    ]);
     const wrapperClass = [
         'tiptap-wrapper',
         properties.bordered === false ? 'tiptap-wrapper-borderless' : '',

package/dist/blocks/TiptapMentionInput/suggestion.js

@@ -50,27 +50,67 @@ function suggestion({ methods, char = '@', allowSpaces = true, limit = 5 }) {
         render: ()=>{
             let component;
             let popup;
-            return {
-                onStart: (props)=>{
-                    component = new ReactRenderer(MentionList, {
-                        props: {
-                            ...props,
-                            methods
-                        },
-                        editor: props.editor
-                    });
-                    if (!props.clientRect) return;
-                    popup = tippy('body', {
-                        getReferenceClientRect: props.clientRect,
-                        appendTo: ()=>document.body,
-                        content: component.element,
-                        showOnCreate: true,
-                        interactive: true,
-                        trigger: 'manual',
-                        placement: 'bottom-start'
+            let current;
+            const start = (props)=>{
+                current = {
+                    from: props.range.from,
+                    query: props.query
+                };
+                component = new ReactRenderer(MentionList, {
+                    props: {
+                        ...props,
+                        methods
+                    },
+                    editor: props.editor
+                });
+                if (!props.clientRect) return;
+                popup = tippy('body', {
+                    getReferenceClientRect: props.clientRect,
+                    appendTo: ()=>document.body,
+                    content: component.element,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: 'manual',
+                    placement: 'bottom-start'
+                });
+            };
+            const exit = ()=>{
+                // Tear down in this order — React portal first, tippy popup after —
+                // to avoid "NotFoundError: Failed to execute 'removeChild'" when the
+                // user navigates away (e.g. clicks another item) while the mention
+                // popup is open. MentionList is rendered as a React portal into
+                // component.element, which tippy relocates into document.body.
+                // Destroying tippy first detaches that container out from under
+                // React's portal teardown; destroying the component first lets React
+                // remove the MentionList DOM cleanly while the container is still
+                // attached. The tippy teardown is then deferred to a microtask so it
+                // never runs synchronously inside React's own unmount commit.
+                component?.destroy();
+                component = undefined;
+                const instance = popup?.[0];
+                popup = undefined;
+                if (instance && !instance.state.isDestroyed) {
+                    queueMicrotask(()=>{
+                        if (!instance.state.isDestroyed) instance.destroy();
                     });
-                },
+                }
+            };
+            return {
+                onStart: start,
                 onUpdate (props) {
+                    // A suggestion that moves to a new trigger with a new query (e.g. a
+                    // second "@" typed while the first was open) restarted in TipTap v2,
+                    // which also showed a popup that an outside click had hidden. v3
+                    // reports it as an update, so restart it here.
+                    if (props.range.from !== current?.from && props.query !== current?.query) {
+                        exit();
+                        start(props);
+                        return;
+                    }
+                    current = {
+                        from: props.range.from,
+                        query: props.query
+                    };
                     component?.updateProps(props);
                     if (!props.clientRect) return;
                     popup?.[0]?.setProps({
@@ -84,27 +124,7 @@ function suggestion({ methods, char = '@', allowSpaces = true, limit = 5 }) {
                     }
                     return component?.ref?.onKeyDown(props) ?? false;
                 },
-                onExit () {
-                    // Tear down in this order — React portal first, tippy popup after —
-                    // to avoid "NotFoundError: Failed to execute 'removeChild'" when the
-                    // user navigates away (e.g. clicks another item) while the mention
-                    // popup is open. MentionList is rendered as a React portal into
-                    // component.element, which tippy relocates into document.body.
-                    // Destroying tippy first detaches that container out from under
-                    // React's portal teardown; destroying the component first lets React
-                    // remove the MentionList DOM cleanly while the container is still
-                    // attached. The tippy teardown is then deferred to a microtask so it
-                    // never runs synchronously inside React's own unmount commit.
-                    component?.destroy();
-                    component = undefined;
-                    const instance = popup?.[0];
-                    popup = undefined;
-                    if (instance && !instance.state.isDestroyed) {
-                        queueMicrotask(()=>{
-                            if (!instance.state.isDestroyed) instance.destroy();
-                        });
-                    }
-                }
+                onExit: exit
             };
         }
     };

package/dist/blocks/utils/PopoverMenu.js

@@ -35,36 +35,69 @@ const HIGHLIGHT_SWATCHES = [
         fill: 'rgba(170, 0, 255, 0.5)'
     }
 ];
+// Placement of the TipTap v2 (tippy.js) bubble menu: 10px above the selection,
+// flipping below when that would leave less than 5px to the viewport edge, and
+// kept 5px from the sides. v3 positions the menu with Floating UI and applies
+// the offset after flip, so flip's padding includes the offset.
+const FLOATING_OPTIONS = {
+    placement: 'top',
+    offset: 10,
+    flip: {
+        padding: 15
+    },
+    shift: {
+        padding: 5
+    }
+};
 function hasExt(editor, name) {
     return editor.extensionManager.extensions.some((ext)=>ext.name === name);
 }
+function createMenuElements() {
+    if (typeof document === 'undefined') return null;
+    // `root` is the element the plugin positions and mounts, like tippy's root
+    // in v2 (same z-index). `content` is the styled menu the buttons render into.
+    // The root is absolute from the start so the plugin measures its final size
+    // the first time it positions it.
+    const root = document.createElement('div');
+    root.style.position = 'absolute';
+    root.style.visibility = 'hidden';
+    root.style.zIndex = '9999';
+    const content = document.createElement('div');
+    content.className = 'tiptap-popover';
+    root.appendChild(content);
+    return {
+        root,
+        content
+    };
+}
 // Custom bubble menu built on tiptap's BubbleMenuPlugin instead of the
-// `<BubbleMenu>` React wrapper. The wrapper renders its menu element with
-// React and then the plugin calls `element.remove()` on it (bubble-menu-plugin
-// detaches the menu from the DOM on construction). When the editor block later
-// unmounts — e.g. the surrounding page navigates away, or `disabled` flips and
-// unmounts this menu — React tries to removeChild an element that is no longer
-// where it rendered it, throwing "NotFoundError: Failed to execute
-// 'removeChild' on 'Node'".
+// `<BubbleMenu>` React wrapper. The plugin moves its menu element in and out of
+// the DOM itself. When the editor block later unmounts — e.g. the surrounding
+// page navigates away, or `disabled` flips and unmounts this menu — React
+// would try to removeChild an element that is no longer where it rendered it,
+// throwing "NotFoundError: Failed to execute 'removeChild' on 'Node'".
 //
-// Here we own the container element ourselves and render the buttons into it
-// with a portal. React only ever removes the buttons from our container (always
-// their parent), never the plugin-detached element, so the teardown race is
-// gone.
+// Here we own the menu elements ourselves and render the buttons into them
+// with a portal. React only ever removes the buttons from our content element
+// (always their parent), never the plugin-managed root, so the teardown race
+// is gone.
 const PopoverMenu = ({ editor })=>{
-    const [container] = useState(()=>typeof document === 'undefined' ? null : document.createElement('div'));
+    const [menu] = useState(createMenuElements);
     const showBold = hasExt(editor, 'bold');
     const showItalic = hasExt(editor, 'italic');
     const showStrike = hasExt(editor, 'strike');
     const showHighlight = hasExt(editor, 'highlight');
     const hasTools = showBold || showItalic || showStrike || showHighlight;
     useEffect(()=>{
-        if (!container || !editor || editor.isDestroyed || !hasTools) return undefined;
-        container.className = 'tiptap-popover';
+        if (!menu || !editor || editor.isDestroyed || !hasTools) return undefined;
         const plugin = BubbleMenuPlugin({
             pluginKey: 'bubbleMenu',
             editor,
-            element: container,
+            element: menu.root,
+            // v2 mounted the menu beside the editor wrapper; v3 defaults to inside it.
+            // `options.element` is the EditorContent wrapper once it has mounted.
+            appendTo: ()=>editor.options.element?.parentElement,
+            options: FLOATING_OPTIONS,
             shouldShow: ({ editor: menuEditor, view, state, from, to })=>{
                 if (menuEditor.isActive('image')) return false;
                 const { selection } = state;
@@ -79,19 +112,19 @@ const PopoverMenu = ({ editor })=>{
         });
         editor.registerPlugin(plugin);
         return ()=>{
-            // Tear the plugin (and its tippy instance) down first. React then
-            // unmounts the portal, removing the buttons from our still-intact
-            // container.
+            // Tear the plugin down first (it removes the root from the DOM). React
+            // then unmounts the portal, removing the buttons from our still-intact
+            // content element.
             if (!editor.isDestroyed) {
                 editor.unregisterPlugin('bubbleMenu');
             }
         };
     }, [
         editor,
-        container,
+        menu,
         hasTools
     ]);
-    if (!container || !hasTools) return null;
+    if (!menu || !hasTools) return null;
     return /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(React.Fragment, null, showBold && /*#__PURE__*/ React.createElement(AiOutlineBold, {
         className: "tiptap-icon",
         onClick: ()=>editor.chain().focus().toggleBold().run()
@@ -110,6 +143,6 @@ const PopoverMenu = ({ editor })=>{
             onClick: ()=>editor.chain().focus().toggleHighlight({
                     color: fill
                 }).run()
-        }))), container);
+        }))), menu.content);
 };
 export default PopoverMenu;

package/dist/blocks/utils/buildExtensions.js

@@ -15,14 +15,11 @@
 */ import FileHandler from '@tiptap/extension-file-handler';
 import Highlight from '@tiptap/extension-highlight';
 import Image from '@tiptap/extension-image';
-import Placeholder from '@tiptap/extension-placeholder';
-import StarterKit from '@tiptap/starter-kit';
+import { Placeholder } from '@tiptap/extensions';
 import LinkExtension from '@tiptap/extension-link';
-import Table from '@tiptap/extension-table';
-import TableCell from '@tiptap/extension-table-cell';
-import TableHeader from '@tiptap/extension-table-header';
-import TableRow from '@tiptap/extension-table-row';
+import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table';
 import { type } from '@lowdefy/helpers';
+import buildStarterKit from './buildStarterKit.js';
 const DEFAULT_IMAGE_MIME_TYPES = [
     'image/jpeg',
     'image/png',
@@ -58,15 +55,14 @@ function merge(defaults, overrides) {
         ...overrides
     };
 }
-function buildExtensions({ properties, insertImage, mentionExtension, uploadEnabled }) {
+function buildExtensions({ properties, getPlaceholder, insertImage, mentionExtension, uploadEnabled }) {
     const image = merge(DEFAULTS.image, properties.image);
     const table = merge(DEFAULTS.table, properties.table);
     const link = merge(DEFAULTS.link, properties.link);
     const highlight = merge(DEFAULTS.highlight, properties.highlight);
-    const starterKitOptions = type.isObject(properties.starterKit) ? properties.starterKit : {};
     const allowedMimeTypes = type.isArray(properties.allowedMimeTypes) ? properties.allowedMimeTypes : DEFAULT_IMAGE_MIME_TYPES;
     const extensions = [
-        StarterKit.configure(starterKitOptions)
+        buildStarterKit(properties.starterKit)
     ];
     if (!table.disabled) {
         extensions.push(Table.configure({
@@ -84,9 +80,8 @@ function buildExtensions({ properties, insertImage, mentionExtension, uploadEnab
         }));
     }
     extensions.push(Placeholder.configure({
-        placeholder: ()=>properties.placeholder ?? '',
-        showOnlyWhenEditable: false,
-        considerAnyAsEmpty: true
+        placeholder: getPlaceholder,
+        showOnlyWhenEditable: false
     }));
     if (!highlight.disabled) {
         extensions.push(Highlight.configure({
@@ -101,7 +96,10 @@ function buildExtensions({ properties, insertImage, mentionExtension, uploadEnab
             autolink: link.autolink,
             linkOnPaste: link.linkOnPaste,
             openOnClick: link.openOnClick,
-            defaultProtocol: link.defaultProtocol
+            defaultProtocol: link.defaultProtocol,
+            // TipTap v2's default. v3's default also skips bare IP addresses and hosts without a TLD
+            // (e.g. localhost:3000), and applies to pasted URLs too.
+            shouldAutoLink: (url)=>!!url
         }));
     }
     if (mentionExtension) {

package/dist/blocks/utils/buildStarterKit.js

@@ -0,0 +1,48 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import StarterKit from '@tiptap/starter-kit';
+import { type } from '@lowdefy/helpers';
+// TipTap v3's StarterKit bundles extensions the v2 kit did not. They default to off so the
+// editor keeps its v2 extension set: Underline would keep <u> in the saved html, TrailingNode
+// appends an empty paragraph after a final table or image, and ListKeymap changes Backspace and
+// Delete in lists.
+const V3_KIT_DEFAULTS = {
+    listKeymap: false,
+    trailingNode: false,
+    underline: false
+};
+// Builds the StarterKit from the block's `starterKit` property, which is written against the v2
+// kit, so that it enables the same extensions as v2 did.
+function buildStarterKit(starterKit) {
+    const { history, ...options } = type.isObject(starterKit) ? starterKit : {};
+    // v3 renamed the History extension to UndoRedo.
+    if (!type.isUndefined(history) && type.isUndefined(options.undoRedo)) {
+        options.undoRedo = history;
+    }
+    // v3 CodeBlock inserts a paragraph above a code block at the top of the document on ArrowUp.
+    if (options.codeBlock !== false) {
+        options.codeBlock = {
+            exitOnArrowUp: false,
+            ...type.isObject(options.codeBlock) ? options.codeBlock : {}
+        };
+    }
+    return StarterKit.configure({
+        ...V3_KIT_DEFAULTS,
+        ...options,
+        // The Link extension is added by buildExtensions from the block's `link` property.
+        link: false
+    });
+}
+export default buildStarterKit;

package/dist/blocks/utils/style.css

@@ -264,3 +264,11 @@
 .tiptap-icon + .tiptap-icon {
   margin-left: 4px;
 }
+
+/* TipTap v2 injected this rule into every page with an editor; v3 does not.
+   The mention suggestion and group-members popovers are tippy.js popups, which
+   fade in with it and only unmount a hidden popup once that fade-out ends, so
+   without it a popup hidden by an outside click would stay on screen. */
+.tippy-box[data-animation='fade'][data-state='hidden'] {
+  opacity: 0;
+}

package/dist/blocks/utils/useTiptapEditor.js

@@ -0,0 +1,106 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { useEffect, useRef } from 'react';
+import { useEditor } from '@tiptap/react';
+import buildExtensions from './buildExtensions.js';
+// The TipTap editor of the TiptapInput and TiptapMentionInput blocks: creates it, registers the
+// block's clear, setContent and focus methods, and keeps it in sync with the block's value,
+// disabled state and placeholder.
+function useTiptapEditor({ disabled, editorProps = {}, emit, insertImage, mentionExtension, methods, properties, uploadEnabled, value }) {
+    // The Placeholder extension is created once, so it reads the current text from a ref.
+    const placeholderRef = useRef();
+    placeholderRef.current = properties.placeholder ?? '';
+    const extensions = buildExtensions({
+        properties,
+        getPlaceholder: ()=>placeholderRef.current,
+        insertImage,
+        mentionExtension,
+        uploadEnabled
+    });
+    const editor = useEditor({
+        editorProps,
+        extensions,
+        content: value?.html || '',
+        editable: ()=>!disabled,
+        onUpdate ({ editor }) {
+            // User-driven change. Emit the full derived value to Lowdefy.
+            emit(editor);
+            methods.triggerEvent({
+                name: 'onChange'
+            });
+        }
+    });
+    // Register methods as soon as the editor is available.
+    useEffect(()=>{
+        if (!editor) return;
+        // emitUpdate false: the methods emit the value themselves and must not trigger onChange.
+        methods.registerMethod('clear', ()=>{
+            editor.commands.clearContent(false);
+            emit(editor);
+        });
+        methods.registerMethod('setContent', (args)=>{
+            editor.commands.setContent(args?.html ?? '', {
+                emitUpdate: false
+            });
+            emit(editor);
+        });
+        methods.registerMethod('focus', ()=>{
+            editor.commands.focus();
+        });
+    }, [
+        editor
+    ]);
+    // External value.html → editor sync. One-way only: we read value.html and
+    // push it into the editor with emitUpdate false so tiptap's onUpdate
+    // does not fire. No write-back via emit() — that would race with concurrent
+    // SetState calls (child effects fire before parent effects, so a sibling's
+    // onMount SetState could be overwritten by our derived emit). Derived
+    // fields (text/markdown/fileList, and mentions for TiptapMentionInput) are
+    // populated on user interaction via onUpdate; downstream consumers of seeded
+    // content should read value.html directly, or include the fields they need
+    // in their SetState payload.
+    useEffect(()=>{
+        if (!editor) return;
+        const next = value?.html ?? '';
+        const current = editor.getHTML();
+        if (next !== current) {
+            editor.commands.setContent(next, {
+                emitUpdate: false
+            });
+        }
+    }, [
+        value?.html,
+        editor
+    ]);
+    useEffect(()=>{
+        if (!editor) return;
+        editor.setOptions({
+            editable: !disabled
+        });
+    }, [
+        editor,
+        disabled
+    ]);
+    // Redraw the placeholder when its text changes.
+    useEffect(()=>{
+        if (!editor) return;
+        editor.view.dispatch(editor.state.tr);
+    }, [
+        editor,
+        properties.placeholder
+    ]);
+    return editor;
+}
+export default useTiptapEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-tiptap",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "license": "Apache-2.0",
   "description": "Lowdefy TipTap rich-text editor blocks.",
   "homepage": "https://lowdefy.com",
@@ -46,25 +46,23 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "6.0.0",
-    "@lowdefy/blocks-antd": "6.0.0",
-    "@lowdefy/blocks-files": "6.0.0",
-    "@lowdefy/helpers": "6.0.0",
-    "@tiptap/core": "2.27.2",
-    "@tiptap/extension-bubble-menu": "2.27.2",
-    "@tiptap/extension-file-handler": "2.27.2",
-    "@tiptap/extension-highlight": "2.27.2",
-    "@tiptap/extension-image": "2.27.2",
-    "@tiptap/extension-link": "2.27.2",
-    "@tiptap/extension-mention": "2.27.2",
-    "@tiptap/extension-placeholder": "2.27.2",
-    "@tiptap/extension-table": "2.27.2",
-    "@tiptap/extension-table-cell": "2.27.2",
-    "@tiptap/extension-table-header": "2.27.2",
-    "@tiptap/extension-table-row": "2.27.2",
-    "@tiptap/pm": "2.27.2",
-    "@tiptap/react": "2.27.2",
-    "@tiptap/starter-kit": "2.27.2",
+    "@lowdefy/block-utils": "6.1.0",
+    "@lowdefy/blocks-antd": "6.1.0",
+    "@lowdefy/blocks-files": "6.1.0",
+    "@lowdefy/helpers": "6.1.0",
+    "@tiptap/core": "3.31.3",
+    "@tiptap/extension-bubble-menu": "3.31.3",
+    "@tiptap/extension-file-handler": "3.31.3",
+    "@tiptap/extension-highlight": "3.31.3",
+    "@tiptap/extension-image": "3.31.3",
+    "@tiptap/extension-link": "3.31.3",
+    "@tiptap/extension-mention": "3.31.3",
+    "@tiptap/extension-table": "3.31.3",
+    "@tiptap/extensions": "3.31.3",
+    "@tiptap/pm": "3.31.3",
+    "@tiptap/react": "3.31.3",
+    "@tiptap/starter-kit": "3.31.3",
+    "@tiptap/suggestion": "3.31.3",
     "react-icons": "5.6.0",
     "tippy.js": "6.3.7",
     "turndown": "7.2.0"
@@ -74,8 +72,8 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "6.0.0",
-    "@lowdefy/e2e-utils": "6.0.0",
+    "@lowdefy/block-dev-e2e": "6.1.0",
+    "@lowdefy/e2e-utils": "6.1.0",
     "@playwright/test": "1.59.1",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.32",