@lowdefy/blocks-tiptap 5.3.0 → 5.5.0

package/dist/blocks/TiptapInput/useTiptapState.js

@@ -58,6 +58,10 @@ function useTiptapState({ value, methods }) {
             file,
             methods
         });
+        // The upload is async: bail if the editor was torn down meanwhile (e.g. the
+        // surrounding page navigated away before the upload resolved), otherwise the
+        // chained commands run against a destroyed editor and throw.
+        if (editor.isDestroyed) return;
         editor.chain().insertContentAt(pos, [
             {
                 type: 'image',

package/dist/blocks/TiptapMentionInput/MentionList.js

@@ -14,10 +14,36 @@
   limitations under the License.
 */ import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { renderHtml } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import itemSection from './itemSection.js';
+function groupItems(items) {
+    const groups = [];
+    const bySection = new Map();
+    items.forEach((item)=>{
+        const section = itemSection(item);
+        if (!bySection.has(section)) {
+            const group = {
+                section,
+                items: []
+            };
+            bySection.set(section, group);
+            groups.push(group);
+        }
+        bySection.get(section).items.push(item);
+    });
+    let startIndex = 0;
+    groups.forEach((group)=>{
+        group.startIndex = startIndex;
+        startIndex += group.items.length;
+    });
+    return groups;
+}
 const MentionList = /*#__PURE__*/ forwardRef((props, ref)=>{
     const [selectedIndex, setSelectedIndex] = useState(0);
+    const groups = groupItems(props.items);
+    const flatItems = groups.flatMap((group)=>group.items);
     const selectItem = (index)=>{
-        const item = props.items[index];
+        const item = flatItems[index];
         if (item) {
             props.command({
                 id: item
@@ -25,10 +51,10 @@ const MentionList = /*#__PURE__*/ forwardRef((props, ref)=>{
         }
     };
     const upHandler = ()=>{
-        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+        setSelectedIndex((selectedIndex + flatItems.length - 1) % flatItems.length);
     };
     const downHandler = ()=>{
-        setSelectedIndex((selectedIndex + 1) % props.items.length);
+        setSelectedIndex((selectedIndex + 1) % flatItems.length);
     };
     const enterHandler = ()=>{
         selectItem(selectedIndex);
@@ -55,13 +81,20 @@ const MentionList = /*#__PURE__*/ forwardRef((props, ref)=>{
         }));
     return /*#__PURE__*/ React.createElement("div", {
         className: "tiptap-mention-items"
-    }, props.items.length ? props.items.map((item, index)=>/*#__PURE__*/ React.createElement("button", {
-            className: `tiptap-mention-item ${index === selectedIndex ? 'is-selected' : ''}`,
-            key: index,
-            onClick: ()=>selectItem(index)
-        }, renderHtml({
-            html: item?.label ?? item,
-            methods: props.methods
+    }, flatItems.length ? groups.map((group)=>/*#__PURE__*/ React.createElement(React.Fragment, {
+            key: group.startIndex
+        }, !type.isNone(group.section) && /*#__PURE__*/ React.createElement("div", {
+            className: "tiptap-mention-section"
+        }, group.section), group.items.map((item, itemIndex)=>{
+            const index = group.startIndex + itemIndex;
+            return /*#__PURE__*/ React.createElement("button", {
+                className: `tiptap-mention-item ${index === selectedIndex ? 'is-selected' : ''}`,
+                key: index,
+                onClick: ()=>selectItem(index)
+            }, renderHtml({
+                html: item?.label ?? item,
+                methods: props.methods
+            }));
         }))) : /*#__PURE__*/ React.createElement("div", {
         className: "tiptap-mention-item secondary"
     }, "No matching results"));

package/dist/blocks/TiptapMentionInput/TiptapMentionInput.js

@@ -24,6 +24,7 @@ import buildExtensions from '../utils/buildExtensions.js';
 import computeHeightStyle from '../utils/computeHeightStyle.js';
 import statusClass from '../utils/statusClass.js';
 import suggestion from './suggestion.js';
+import useGroupMembersPopover from './useGroupMembersPopover.js';
 import useTiptapMentionState from './useTiptapMentionState.js';
 import './style.module.css';
 function mentionLabel(id) {
@@ -38,25 +39,38 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
     const uploadEnabled = !type.isNone(properties.s3PostPolicyRequestId);
     const char = properties.mentions?.char ?? '@';
     const allowSpaces = properties.mentions?.allowSpaces !== false;
+    const limit = properties.mentions?.limit ?? 5;
     const mentionExtension = Mention.configure({
         HTMLAttributes: {
             class: 'tiptap-mention'
         },
         renderHTML ({ options, node }) {
-            const label = mentionLabel(node.attrs.id);
-            if (type.isFunction(properties.mentions?.getHref)) {
+            const id = node.attrs.id;
+            const label = mentionLabel(id);
+            const group = id?.tag?.group;
+            const modifier = {};
+            if (!type.isNone(group)) {
+                modifier.class = 'tiptap-mention-group';
+                modifier['data-mention-group'] = group;
+            }
+            const color = id?.tag?.color;
+            if (!type.isNone(color)) {
+                modifier.style = `color: ${color}`;
+            }
+            const href = type.isFunction(properties.mentions?.getHref) ? properties.mentions.getHref(id) : undefined;
+            if (!type.isNone(href)) {
                 return [
                     'a',
                     mergeAttributes({
-                        href: properties.mentions.getHref(node.attrs.id),
-                        'data-id': node.attrs.id?._id
-                    }, options.HTMLAttributes),
+                        href,
+                        'data-id': id?._id
+                    }, options.HTMLAttributes, modifier),
                     `${char}${label}`
                 ];
             }
             return [
                 'span',
-                mergeAttributes(options.HTMLAttributes),
+                mergeAttributes(options.HTMLAttributes, modifier),
                 `${char}${label}`
             ];
         },
@@ -66,7 +80,8 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
         suggestion: suggestion({
             methods,
             char,
-            allowSpaces
+            allowSpaces,
+            limit
         })
     });
     const extensions = buildExtensions({
@@ -93,6 +108,10 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
             });
         }
     });
+    useGroupMembersPopover({
+        editor,
+        properties
+    });
     useEffect(()=>{
         if (editor) {
             editor.setOptions({

package/dist/blocks/TiptapMentionInput/itemSection.js

@@ -0,0 +1,18 @@
+/*
+  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.
+*/ function itemSection(item) {
+    return item?.tag?.section;
+}
+export default itemSection;

package/dist/blocks/TiptapMentionInput/meta.js

@@ -167,10 +167,34 @@
                     },
                     getHref: {
                         type: 'object',
-                        description: 'Optional function (_function operator) that receives a selected mention id and returns an href. When provided, mentions render as <a> tags.',
+                        description: 'Optional _function that receives the selected mention option and returns an href. A non-nullish return renders the mention as an <a>; a nullish return renders a plain <span> (use this for options with no link, e.g. group mentions).',
                         docs: {
                             displayType: 'yaml'
                         }
+                    },
+                    limit: {
+                        type: 'integer',
+                        minimum: 1,
+                        default: 5,
+                        description: 'Maximum suggestions shown — per section when options declare sections, otherwise across the flat list.'
+                    },
+                    groupMembers: {
+                        type: 'object',
+                        additionalProperties: {
+                            type: 'array',
+                            items: {
+                                type: 'object',
+                                properties: {
+                                    name: {
+                                        type: 'string'
+                                    },
+                                    email: {
+                                        type: 'string'
+                                    }
+                                }
+                            }
+                        },
+                        description: "Map of group key → array of { name, email } shown in a hover popover on that group's chips (live editor only)."
                     }
                 }
             },

package/dist/blocks/TiptapMentionInput/style.module.css

@@ -6,6 +6,11 @@
   color: var(--ant-color-link);
 }
 
+:global(.tiptap-mention-group) {
+  box-decoration-break: clone;
+  font-weight: 600;
+}
+
 :global(.tiptap-mention-items) {
   background: var(--ant-color-bg-container);
   border-radius: var(--ant-border-radius, 8px);
@@ -36,6 +41,15 @@
   background: var(--ant-control-item-bg-hover);
 }
 
+:global(.tiptap-mention-section) {
+  color: var(--ant-color-text-secondary);
+  font-size: var(--ant-font-size-sm, 12px);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  padding: 0.3rem 0.4rem 0.1rem;
+}
+
 :global(.tableWrapper),
 :global(.tiptap-table) {
   display: block;
@@ -94,3 +108,41 @@
 :global(.tiptap-table) :global(th) :global(p) {
   margin: 0;
 }
+
+:global(.tiptap-mention-group-popover) {
+  background: var(--ant-color-bg-container);
+  border-radius: var(--ant-border-radius, 8px);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0px 10px 20px rgba(0, 0, 0, 0.1);
+  color: var(--ant-color-text);
+  font-size: var(--ant-font-size-sm, 12px);
+  max-width: 240px;
+  padding: 0.3rem 0.6rem;
+}
+
+:global(.tiptap-mention-group-popover-header) {
+  font-weight: 600;
+  padding: 0.1rem 0;
+}
+
+:global(.tiptap-mention-group-popover-item) {
+  padding: 0.1rem 0;
+}
+
+:global(.tiptap-mention-group-popover-item) > div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:global(.tiptap-mention-group-popover-email) {
+  color: var(--ant-color-text-secondary);
+  font-size: var(--ant-font-size-sm, 12px);
+  line-height: 1.3;
+}
+
+:global(.tiptap-mention-group-popover-empty) {
+  color: var(--ant-color-text-secondary);
+  padding: 0.1rem 0;
+}

package/dist/blocks/TiptapMentionInput/suggestion.js

@@ -16,7 +16,8 @@
 import { type } from '@lowdefy/helpers';
 import tippy from 'tippy.js';
 import MentionList from './MentionList.js';
-function suggestion({ methods, char = '@', allowSpaces = true }) {
+import itemSection from './itemSection.js';
+function suggestion({ methods, char = '@', allowSpaces = true, limit = 5 }) {
     return {
         // `char` must be set explicitly: Mention.configure does a shallow merge
         // on its options.suggestion, replacing the extension's default `@`.
@@ -24,7 +25,7 @@ function suggestion({ methods, char = '@', allowSpaces = true }) {
         allowSpaces,
         items: ({ query, editor })=>{
             const itemsList = editor.options.editorProps.items ?? [];
-            return itemsList.filter((item)=>{
+            const filtered = itemsList.filter((item)=>{
                 if (type.isString(item)) {
                     return item.toLowerCase().includes(query.toLowerCase());
                 }
@@ -32,7 +33,19 @@ function suggestion({ methods, char = '@', allowSpaces = true }) {
                     return item.label.toLowerCase().includes(query.toLowerCase());
                 }
                 return false;
-            }).slice(0, 5);
+            });
+            // no option declares a section → flat list capped at limit (today's behaviour)
+            if (!filtered.some((item)=>!type.isNone(itemSection(item)))) {
+                return filtered.slice(0, limit);
+            }
+            const counts = new Map();
+            return filtered.filter((item)=>{
+                const section = itemSection(item);
+                const n = counts.get(section) ?? 0;
+                if (n >= limit) return false;
+                counts.set(section, n + 1);
+                return true;
+            });
         },
         render: ()=>{
             let component;
@@ -58,22 +71,39 @@ function suggestion({ methods, char = '@', allowSpaces = true }) {
                     });
                 },
                 onUpdate (props) {
-                    component.updateProps(props);
+                    component?.updateProps(props);
                     if (!props.clientRect) return;
-                    popup[0].setProps({
+                    popup?.[0]?.setProps({
                         getReferenceClientRect: props.clientRect
                     });
                 },
                 onKeyDown (props) {
                     if (props.event.key === 'Escape') {
-                        popup[0].hide();
+                        popup?.[0]?.hide();
                         return true;
                     }
-                    return component.ref?.onKeyDown(props);
+                    return component?.ref?.onKeyDown(props) ?? false;
                 },
                 onExit () {
-                    popup[0].destroy();
-                    component.destroy();
+                    // 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();
+                        });
+                    }
                 }
             };
         }

package/dist/blocks/TiptapMentionInput/useGroupMembersPopover.js

@@ -0,0 +1,116 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+import tippy from 'tippy.js';
+function buildPopoverContent({ chip, group, groupMembers, char }) {
+    const members = groupMembers[group] ?? [];
+    const root = document.createElement('div');
+    root.className = 'tiptap-mention-group-popover';
+    let title = chip.textContent ?? '';
+    if (title.startsWith(char)) {
+        title = title.slice(char.length);
+    }
+    const header = document.createElement('div');
+    header.className = 'tiptap-mention-group-popover-header';
+    header.textContent = `${title} — ${members.length}`;
+    root.appendChild(header);
+    if (members.length === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'tiptap-mention-group-popover-empty';
+        empty.textContent = 'No members';
+        root.appendChild(empty);
+        return root;
+    }
+    members.forEach((member)=>{
+        const item = document.createElement('div');
+        item.className = 'tiptap-mention-group-popover-item';
+        const name = document.createElement('div');
+        name.textContent = member?.name ?? '';
+        item.appendChild(name);
+        if (!type.isNone(member?.email)) {
+            const email = document.createElement('div');
+            email.className = 'tiptap-mention-group-popover-email';
+            email.textContent = member.email;
+            item.appendChild(email);
+        }
+        root.appendChild(item);
+    });
+    return root;
+}
+function useGroupMembersPopover({ editor, properties }) {
+    // Updated every render so late-arriving groupMembers (typically from a
+    // request) is read at hover time, not captured at mount.
+    const mentionsRef = useRef(properties.mentions);
+    mentionsRef.current = properties.mentions;
+    const popoverRef = useRef(null);
+    const activeChipRef = useRef(null);
+    useEffect(()=>{
+        if (!editor || editor.isDestroyed) return undefined;
+        const dom = editor.view.dom;
+        const hide = ()=>{
+            if (popoverRef.current) {
+                popoverRef.current.destroy();
+                popoverRef.current = null;
+            }
+            activeChipRef.current = null;
+        };
+        const handleMouseOver = (event)=>{
+            const chip = event.target?.closest?.('.tiptap-mention-group[data-mention-group]');
+            if (!chip) return;
+            if (!dom.contains(chip)) return;
+            if (chip === activeChipRef.current) return;
+            const groupMembers = mentionsRef.current?.groupMembers;
+            if (type.isNone(groupMembers)) return;
+            const group = chip.getAttribute('data-mention-group');
+            if (!Object.prototype.hasOwnProperty.call(groupMembers, group)) return;
+            hide();
+            const char = mentionsRef.current?.char ?? '@';
+            const content = buildPopoverContent({
+                chip,
+                group,
+                groupMembers,
+                char
+            });
+            const instance = tippy(chip, {
+                content,
+                trigger: 'manual',
+                appendTo: ()=>document.body,
+                placement: 'top-start',
+                interactive: false
+            });
+            instance.show();
+            popoverRef.current = instance;
+            activeChipRef.current = chip;
+        };
+        const handleMouseOut = (event)=>{
+            if (activeChipRef.current && !activeChipRef.current.contains(event.relatedTarget)) {
+                hide();
+            }
+        };
+        dom.addEventListener('mouseover', handleMouseOver);
+        dom.addEventListener('mouseout', handleMouseOut);
+        editor.on('update', hide);
+        return ()=>{
+            dom.removeEventListener('mouseover', handleMouseOver);
+            dom.removeEventListener('mouseout', handleMouseOut);
+            editor.off('update', hide);
+            hide();
+        };
+    }, [
+        editor
+    ]);
+}
+export default useGroupMembersPopover;

package/dist/blocks/TiptapMentionInput/useTiptapMentionState.js

@@ -62,6 +62,10 @@ function useTiptapMentionState({ value, methods }) {
             file,
             methods
         });
+        // The upload is async: bail if the editor was torn down meanwhile (e.g. the
+        // surrounding page navigated away before the upload resolved), otherwise the
+        // chained commands run against a destroyed editor and throw.
+        if (editor.isDestroyed) return;
         editor.chain().insertContentAt(pos, [
             {
                 type: 'image',

package/dist/blocks/utils/PopoverMenu.js

@@ -12,8 +12,9 @@
   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 React from 'react';
-import { BubbleMenu } from '@tiptap/react';
+*/ import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
 import { AiOutlineBold, AiOutlineItalic, AiOutlineStrikethrough, AiOutlineHighlight } from 'react-icons/ai';
 import { isTextSelection } from '@tiptap/core';
 const HIGHLIGHT_SWATCHES = [
@@ -37,29 +38,61 @@ const HIGHLIGHT_SWATCHES = [
 function hasExt(editor, name) {
     return editor.extensionManager.extensions.some((ext)=>ext.name === name);
 }
+// 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'".
+//
+// 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.
 const PopoverMenu = ({ editor })=>{
+    const [container] = useState(()=>typeof document === 'undefined' ? null : document.createElement('div'));
     const showBold = hasExt(editor, 'bold');
     const showItalic = hasExt(editor, 'italic');
     const showStrike = hasExt(editor, 'strike');
     const showHighlight = hasExt(editor, 'highlight');
-    if (!showBold && !showItalic && !showStrike && !showHighlight) {
-        return null;
-    }
-    return /*#__PURE__*/ React.createElement(BubbleMenu, {
-        className: "tiptap-popover",
-        editor: editor,
-        shouldShow: ({ editor, view, state, from, to })=>{
-            if (editor.isActive('image')) return false;
-            const { doc, selection } = state;
-            const { empty } = selection;
-            const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
-            const hasEditorFocus = view.hasFocus();
-            if (!hasEditorFocus || empty || isEmptyTextBlock || !editor.isEditable) {
-                return false;
+    const hasTools = showBold || showItalic || showStrike || showHighlight;
+    useEffect(()=>{
+        if (!container || !editor || editor.isDestroyed || !hasTools) return undefined;
+        container.className = 'tiptap-popover';
+        const plugin = BubbleMenuPlugin({
+            pluginKey: 'bubbleMenu',
+            editor,
+            element: container,
+            shouldShow: ({ editor: menuEditor, view, state, from, to })=>{
+                if (menuEditor.isActive('image')) return false;
+                const { selection } = state;
+                const { empty } = selection;
+                const isEmptyTextBlock = !state.doc.textBetween(from, to).length && isTextSelection(state.selection);
+                const hasEditorFocus = view.hasFocus();
+                if (!hasEditorFocus || empty || isEmptyTextBlock || !menuEditor.isEditable) {
+                    return false;
+                }
+                return true;
+            }
+        });
+        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.
+            if (!editor.isDestroyed) {
+                editor.unregisterPlugin('bubbleMenu');
             }
-            return true;
-        }
-    }, showBold && /*#__PURE__*/ React.createElement(AiOutlineBold, {
+        };
+    }, [
+        editor,
+        container,
+        hasTools
+    ]);
+    if (!container || !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()
     }), showItalic && /*#__PURE__*/ React.createElement(AiOutlineItalic, {
@@ -77,6 +110,6 @@ const PopoverMenu = ({ editor })=>{
             onClick: ()=>editor.chain().focus().toggleHighlight({
                     color: fill
                 }).run()
-        })));
+        }))), container);
 };
 export default PopoverMenu;

package/dist/blocks/utils/s3FileUpload.js

@@ -45,7 +45,9 @@
         method: 'POST',
         body: formData
     });
-    file.url = `${url}/${key}`;
+    // createPresignedPost returns the bucket endpoint with a trailing slash, so only
+    // add a separator when it is missing to avoid a double slash before the key.
+    file.url = url.endsWith('/') ? `${url}${key}` : `${url}/${key}`;
     return file.url;
 }
 export default s3FileUpload;

package/dist/blocks/utils/style.module.css

@@ -82,8 +82,140 @@
   outline: none;
 }
 
+/* Editor content styling.
+
+   The antd v6 reset.css is loaded globally by every Lowdefy app and strips or
+   flattens the user-agent styles for the block-level and inline elements that
+   TipTap (StarterKit + configured extensions) produces: lists lose their
+   markers and indent, headings collapse to a single weight/size, blockquotes
+   lose their indent, <hr> renders at zero height, and inline/block code loses
+   its background. The tags are still in getHTML() — they just render unstyled,
+   which reads as "formatting stripped". We restore each one here, scoped to
+   .tiptap so it only affects editor content, using antd theme variables so it
+   tracks the active theme.
+
+   Nodes covered: paragraph, bulletList, orderedList, listItem, blockquote,
+   heading (h1-h6), horizontalRule, code (inline), codeBlock. Marks bold,
+   italic, strike and link survive the reset unchanged. */
+
+/* Paragraphs: a small gap so successive lines (each a new <p> from pressing
+   Enter) read as separate lines instead of merging. */
 :global(.tiptap) :global(p) {
-  margin: 0;
+  margin: 0 0 0.5em;
+}
+
+:global(.tiptap) > :global(p):last-child {
+  margin-bottom: 0;
+}
+
+/* Lists: restore the markers and indent the antd reset removes. */
+:global(.tiptap) :global(ul),
+:global(.tiptap) :global(ol) {
+  margin: 0 0 0.5em;
+  padding-left: 1.5em;
+}
+
+:global(.tiptap) :global(ul) {
+  list-style: disc;
+}
+
+:global(.tiptap) :global(ol) {
+  list-style: decimal;
+}
+
+/* Keep paragraphs inside list items and nested lists tight. */
+:global(.tiptap) :global(li) :global(p),
+:global(.tiptap) :global(li) :global(ul),
+:global(.tiptap) :global(li) :global(ol) {
+  margin-bottom: 0;
+}
+
+/* Blockquote: restore the indent and add a quote bar. */
+:global(.tiptap) :global(blockquote) {
+  margin: 0 0 0.5em;
+  padding-left: 1em;
+  border-left: 3px solid var(--ant-color-border, #d9d9d9);
+  color: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.65));
+}
+
+/* Headings: the reset flattens all six to weight 500 with no size scale.
+   Restore a distinct, descending scale so heading levels are visible. */
+:global(.tiptap) :global(h1),
+:global(.tiptap) :global(h2),
+:global(.tiptap) :global(h3),
+:global(.tiptap) :global(h4),
+:global(.tiptap) :global(h5),
+:global(.tiptap) :global(h6) {
+  margin: 0 0 0.5em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+:global(.tiptap) :global(h1) {
+  font-size: 2em;
+}
+
+:global(.tiptap) :global(h2) {
+  font-size: 1.5em;
+}
+
+:global(.tiptap) :global(h3) {
+  font-size: 1.25em;
+}
+
+:global(.tiptap) :global(h4) {
+  font-size: 1.1em;
+}
+
+:global(.tiptap) :global(h5) {
+  font-size: 1em;
+}
+
+:global(.tiptap) :global(h6) {
+  font-size: 0.9em;
+}
+
+/* Horizontal rule: the reset sets height 0 with no border, making it invisible.
+   Render it as a themed divider. */
+:global(.tiptap) :global(hr) {
+  height: 0;
+  margin: 0.5em 0;
+  border: none;
+  border-top: 1px solid var(--ant-color-border, #d9d9d9);
+}
+
+/* Inline code: monospace from the reset, but no background — give it the
+   code chip look. */
+:global(.tiptap) :global(code) {
+  padding: 0.1em 0.3em;
+  border-radius: var(--ant-border-radius-sm, 4px);
+  background: var(--ant-color-fill-tertiary, rgba(0, 0, 0, 0.04));
+  font-size: 0.9em;
+}
+
+/* Code block: a padded, scrollable monospace box. The nested <code> resets to
+   plain so it doesn't inherit the inline-code chip styling above. */
+:global(.tiptap) :global(pre) {
+  margin: 0 0 0.5em;
+  padding: 8px 12px;
+  border-radius: var(--ant-border-radius, 6px);
+  background: var(--ant-color-fill-tertiary, rgba(0, 0, 0, 0.04));
+  overflow-x: auto;
+}
+
+:global(.tiptap) :global(pre) :global(code) {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
+}
+
+/* Highlight marks normally carry an inline background-color from the extension;
+   this is a fallback so a color-less <mark> (e.g. pasted or seeded HTML) stays
+   visible instead of blending into the text. */
+:global(.tiptap) :global(mark) {
+  background-color: var(--ant-color-warning-bg, rgba(255, 229, 143, 0.5));
+  color: inherit;
 }
 
 :global(.tiptap) :global(p.is-editor-empty):first-child::before {

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@lowdefy/blocks-tiptap",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "license": "Apache-2.0",
   "description": "Lowdefy TipTap rich-text editor blocks.",
   "homepage": "https://lowdefy.com",
+  "lowdefy": {
+    "serverExternalPackages": [
+      "turndown"
+    ]
+  },
   "keywords": [
     "lowdefy",
     "lowdefy blocks",
@@ -41,10 +46,11 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "5.3.0",
-    "@lowdefy/blocks-antd": "5.3.0",
-    "@lowdefy/helpers": "5.3.0",
+    "@lowdefy/block-utils": "5.5.0",
+    "@lowdefy/blocks-antd": "5.5.0",
+    "@lowdefy/helpers": "5.5.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",
@@ -67,8 +73,8 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.3.0",
-    "@lowdefy/e2e-utils": "5.3.0",
+    "@lowdefy/block-dev-e2e": "5.5.0",
+    "@lowdefy/e2e-utils": "5.5.0",
     "@playwright/test": "1.50.1",
     "@swc/cli": "0.8.0",
     "@swc/core": "1.15.18",