@lowdefy/blocks-tiptap 0.0.0-experimental-20260428103147

package/dist/blocks/TiptapInput/useTiptapState.js

@@ -0,0 +1,104 @@
+/*
+  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 { useRef } from 'react';
+import TurndownService from 'turndown';
+import s3FileUpload from '../utils/s3FileUpload.js';
+// Ref-tracked controller for the editor's value. No useState — the only
+// source of truth for `fileList` is the `value` prop from Lowdefy. We mirror
+// it into a ref each render so callbacks (onUpdate, insertImage) captured in
+// closures always read the current value instead of a stale render snapshot.
+function useTiptapState({ value, methods }) {
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    const turndownService = new TurndownService();
+    turndownService.addRule('encodeImgUrl', {
+        filter: 'img',
+        replacement: (content, node)=>{
+            const src = node.getAttribute('src');
+            return `![${content}](${encodeURI(src)})`;
+        }
+    });
+    // Emit a full `{fileList, html, text, markdown}` value to Lowdefy based on
+    // the editor's current document. When appendFile is supplied (an S3 upload
+    // result), it is added to the current fileList before filtering by
+    // in-document image urls.
+    const emit = (editor, appendFile)=>{
+        const html = editor.getHTML();
+        const markdown = turndownService.turndown(html);
+        const json = editor.getJSON();
+        const text = editor.getText().trim() === '' ? null : editor.getText();
+        const urls = (json.content ?? []).filter((c)=>c.type === 'image').map((c)=>c.attrs.src);
+        const base = valueRef.current?.fileList ?? [];
+        const next = appendFile ? [
+            ...base,
+            appendFile
+        ] : base;
+        const fileList = next.filter((f)=>urls.includes(f.url));
+        methods.setValue({
+            fileList,
+            html,
+            text,
+            markdown
+        });
+    };
+    const insertImage = async (editor, file, pos)=>{
+        const url = await s3FileUpload({
+            file,
+            methods
+        });
+        editor.chain().insertContentAt(pos, [
+            {
+                type: 'image',
+                attrs: {
+                    src: url
+                }
+            },
+            {
+                type: 'paragraph',
+                content: [
+                    {
+                        type: 'text',
+                        marks: [
+                            {
+                                type: 'link',
+                                attrs: {
+                                    href: url,
+                                    target: '_blank'
+                                }
+                            }
+                        ],
+                        text: 'Enlarge Image'
+                    }
+                ]
+            }
+        ]).focus().run();
+        const fileObj = {
+            bucket: file.bucket,
+            key: file.key,
+            lastModified: file.lastModified,
+            name: file.name,
+            size: file.size,
+            status: file.status,
+            type: file.type,
+            url
+        };
+        emit(editor, fileObj);
+    };
+    return {
+        emit,
+        insertImage
+    };
+}
+export default useTiptapState;

package/dist/blocks/TiptapMentionInput/MentionList.js

@@ -0,0 +1,69 @@
+/*
+  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 React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { renderHtml } from '@lowdefy/block-utils';
+const MentionList = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectItem = (index)=>{
+        const item = props.items[index];
+        if (item) {
+            props.command({
+                id: item
+            });
+        }
+    };
+    const upHandler = ()=>{
+        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+    const downHandler = ()=>{
+        setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+    const enterHandler = ()=>{
+        selectItem(selectedIndex);
+    };
+    useEffect(()=>setSelectedIndex(0), [
+        props.items
+    ]);
+    useImperativeHandle(ref, ()=>({
+            onKeyDown: ({ event })=>{
+                if (event.key === 'ArrowUp') {
+                    upHandler();
+                    return true;
+                }
+                if (event.key === 'ArrowDown') {
+                    downHandler();
+                    return true;
+                }
+                if (event.key === 'Enter') {
+                    enterHandler();
+                    return true;
+                }
+                return false;
+            }
+        }));
+    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
+        }))) : /*#__PURE__*/ React.createElement("div", {
+        className: "tiptap-mention-item secondary"
+    }, "No matching results"));
+});
+export default MentionList;

package/dist/blocks/TiptapMentionInput/TiptapMentionInput.js

@@ -0,0 +1,238 @@
+/*
+  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 React, { useEffect } from 'react';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import { useEditor, 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 suggestion from './suggestion.js';
+import useTiptapMentionState from './useTiptapMentionState.js';
+import './style.module.css';
+function mentionLabel(id) {
+    return id?.tag?.title ?? id?.label ?? id;
+}
+const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loading, methods, properties, required, validation, value })=>{
+    const { emit, insertImage } = useTiptapMentionState({
+        value,
+        methods
+    });
+    const disabled = properties.disabled === true || loading;
+    const uploadEnabled = !type.isNone(properties.s3PostPolicyRequestId);
+    const char = properties.mentions?.char ?? '@';
+    const allowSpaces = properties.mentions?.allowSpaces !== false;
+    const mentionExtension = Mention.configure({
+        HTMLAttributes: {
+            class: 'tiptap-mention'
+        },
+        renderHTML ({ options, node }) {
+            const label = mentionLabel(node.attrs.id);
+            if (type.isFunction(properties.mentions?.getHref)) {
+                return [
+                    'a',
+                    mergeAttributes({
+                        href: properties.mentions.getHref(node.attrs.id),
+                        'data-id': node.attrs.id?._id
+                    }, options.HTMLAttributes),
+                    `${char}${label}`
+                ];
+            }
+            return [
+                'span',
+                mergeAttributes(options.HTMLAttributes),
+                `${char}${label}`
+            ];
+        },
+        renderText ({ node }) {
+            return `${char}${mentionLabel(node.attrs.id)}`;
+        },
+        suggestion: suggestion({
+            methods,
+            char,
+            allowSpaces
+        })
+    });
+    const extensions = buildExtensions({
+        properties,
+        insertImage,
+        mentionExtension,
+        uploadEnabled
+    });
+    const heightStyle = computeHeightStyle({
+        rows: properties.rows,
+        autoSize: properties.autoSize
+    });
+    const editor = useEditor({
+        editorProps: {
+            items: type.isArray(properties.mentions?.options) ? properties.mentions.options : []
+        },
+        extensions,
+        content: value?.html || '',
+        editable: ()=>!disabled,
+        onUpdate: ({ editor })=>{
+            emit(editor);
+            methods.triggerEvent({
+                name: 'onChange'
+            });
+        }
+    });
+    useEffect(()=>{
+        if (editor) {
+            editor.setOptions({
+                editorProps: {
+                    items: type.isArray(properties.mentions?.options) ? properties.mentions.options : []
+                }
+            });
+        }
+    }, [
+        properties.mentions?.options,
+        editor
+    ]);
+    useEffect(()=>{
+        if (uploadEnabled) {
+            methods.registerEvent({
+                name: '__getS3PostPolicy',
+                actions: [
+                    {
+                        id: '__getS3PostPolicy',
+                        type: 'Request',
+                        params: [
+                            properties.s3PostPolicyRequestId
+                        ]
+                    }
+                ]
+            });
+        }
+        if (!type.isNone(properties.mentionsRequestId)) {
+            methods.registerEvent({
+                name: '__getTipTapMentions',
+                actions: [
+                    {
+                        id: '__getTipTapMentions',
+                        type: 'Request',
+                        params: [
+                            properties.mentionsRequestId
+                        ]
+                    }
+                ]
+            });
+        }
+    }, []);
+    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' : '',
+        disabled ? 'tiptap-wrapper-disabled' : '',
+        statusClass(validation?.status)
+    ].filter(Boolean).join(' ');
+    const wrapperStyle = {
+        padding: 0,
+        ...heightStyle,
+        ...properties.inputStyle,
+        ...properties.style
+    };
+    return /*#__PURE__*/ React.createElement(Label, {
+        blockId: blockId,
+        components: {
+            Icon,
+            Link
+        },
+        events: events,
+        properties: {
+            title: properties.title,
+            size: properties.size,
+            ...properties.label
+        },
+        required: required,
+        validation: validation,
+        content: {
+            content: ()=>{
+                if (!editor) {
+                    return /*#__PURE__*/ React.createElement("div", null);
+                }
+                return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(EditorContent, {
+                    id: `${blockId}_input`,
+                    editor: editor,
+                    className: wrapperClass,
+                    style: wrapperStyle
+                }), !disabled && /*#__PURE__*/ React.createElement(PopoverMenu, {
+                    editor: editor,
+                    Icon: Icon
+                }));
+            }
+        }
+    });
+};
+export default withBlockDefaults(TiptapMentionInput);

package/dist/blocks/TiptapMentionInput/e2e.js

@@ -0,0 +1,25 @@
+/*
+  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 { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)}_input .ProseMirror`).first();
+export default createBlockHelper({
+    locator,
+    expect: {
+        containsText: (page, blockId, text)=>expect(locator(page, blockId)).toContainText(text),
+        containsHtml: (page, blockId, selector)=>expect(locator(page, blockId).locator(selector)).toBeVisible(),
+        isEmpty: (page, blockId)=>expect(locator(page, blockId)).toHaveText('')
+    }
+});

package/dist/blocks/TiptapMentionInput/meta.js

@@ -0,0 +1,231 @@
+/*
+  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.
+*/ export default {
+    category: 'input',
+    icons: [],
+    valueType: 'object',
+    initValue: {
+        html: null,
+        text: null,
+        markdown: null,
+        fileList: [],
+        mentions: []
+    },
+    events: {
+        onChange: 'Trigger action when the editor content is changed.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            allowedMimeTypes: {
+                type: 'array',
+                items: {
+                    type: 'string'
+                },
+                description: 'Mime-types accepted by the drag/drop and paste file handler. Defaults to common image types. Only used when s3PostPolicyRequestId is set.'
+            },
+            autoSize: {
+                oneOf: [
+                    {
+                        type: 'boolean',
+                        default: false,
+                        description: 'When true the editor grows with its content and has no max height.'
+                    },
+                    {
+                        type: 'object',
+                        description: 'Constrain the editor height with a minimum and/or maximum row count.',
+                        properties: {
+                            minRows: {
+                                type: 'integer',
+                                minimum: 1
+                            },
+                            maxRows: {
+                                type: 'integer',
+                                minimum: 1
+                            }
+                        }
+                    }
+                ],
+                description: 'Either a boolean (true to auto-grow without a cap) or an object with minRows/maxRows. Ignored when `rows` is set.'
+            },
+            bordered: {
+                type: 'boolean',
+                default: true,
+                description: 'Whether the editor renders with a border.'
+            },
+            disabled: {
+                type: 'boolean',
+                default: false,
+                description: 'Render the editor as read-only.'
+            },
+            highlight: {
+                type: 'object',
+                description: 'Text highlight extension settings.',
+                additionalProperties: false,
+                properties: {
+                    disabled: {
+                        type: 'boolean',
+                        default: false
+                    },
+                    multicolor: {
+                        type: 'boolean',
+                        default: true
+                    }
+                }
+            },
+            image: {
+                type: 'object',
+                description: 'Image extension settings.',
+                additionalProperties: false,
+                properties: {
+                    disabled: {
+                        type: 'boolean',
+                        default: false
+                    },
+                    maxWidth: {
+                        type: 'string',
+                        default: '80%'
+                    },
+                    zoom: {
+                        type: 'number',
+                        default: 0.6
+                    }
+                }
+            },
+            inputStyle: {
+                type: 'object',
+                description: 'Inline style applied to the editable area of the editor.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            label: {
+                type: 'object',
+                description: 'Label configuration forwarded to the Lowdefy Label block.',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            link: {
+                type: 'object',
+                description: 'Link extension settings.',
+                additionalProperties: false,
+                properties: {
+                    disabled: {
+                        type: 'boolean',
+                        default: false
+                    },
+                    autolink: {
+                        type: 'boolean',
+                        default: true
+                    },
+                    linkOnPaste: {
+                        type: 'boolean',
+                        default: true
+                    },
+                    openOnClick: {
+                        type: 'boolean',
+                        default: true
+                    },
+                    defaultProtocol: {
+                        type: 'string',
+                        default: 'https'
+                    }
+                }
+            },
+            mentions: {
+                type: 'object',
+                description: 'Configure the set of mention targets and how they render.',
+                additionalProperties: false,
+                properties: {
+                    char: {
+                        type: 'string',
+                        default: '@',
+                        description: 'Trigger character that opens the mention dropdown. Change to "#" for hashtags, etc.'
+                    },
+                    allowSpaces: {
+                        type: 'boolean',
+                        default: true,
+                        description: 'Allow spaces inside a mention query before it is committed.'
+                    },
+                    options: {
+                        type: 'array',
+                        description: 'Array of mention items. Each item may be a string, or an object with a "label" (matched against user input) and a "value" (stored on the node).'
+                    },
+                    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.',
+                        docs: {
+                            displayType: 'yaml'
+                        }
+                    }
+                }
+            },
+            mentionsRequestId: {
+                type: 'string',
+                description: 'Id of a request used to populate mention options. When set, the block registers a __getTipTapMentions event that calls that request.'
+            },
+            placeholder: {
+                type: 'string',
+                description: 'Placeholder shown when the editor is empty.'
+            },
+            rows: {
+                type: 'integer',
+                minimum: 1,
+                description: 'Fix the editor height to exactly this many rows. Takes precedence over autoSize.'
+            },
+            s3PostPolicyRequestId: {
+                type: 'string',
+                description: 'Id of a request that returns an S3 presigned POST policy. When set, images dragged or pasted into the editor are uploaded via that policy.'
+            },
+            size: {
+                type: 'string',
+                enum: [
+                    'small',
+                    'middle',
+                    'large'
+                ],
+                description: 'Label size forwarded to the Label block.'
+            },
+            starterKit: {
+                type: 'object',
+                description: 'Options forwarded to TipTap StarterKit. Use to disable bundled extensions (e.g. {heading: false}).',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            table: {
+                type: 'object',
+                description: 'Table extension settings.',
+                additionalProperties: false,
+                properties: {
+                    disabled: {
+                        type: 'boolean',
+                        default: false
+                    },
+                    resizable: {
+                        type: 'boolean',
+                        default: true
+                    }
+                }
+            },
+            title: {
+                type: 'string',
+                description: 'Label title shown above the editor.'
+            }
+        }
+    }
+};