@lowdefy/blocks-tiptap 0.0.0-experimental-20260428103147

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

@@ -0,0 +1,96 @@
+@import '../utils/style.module.css';
+
+:global(.tiptap-mention) {
+  box-decoration-break: clone;
+  font-weight: 600;
+  color: var(--ant-color-link);
+}
+
+:global(.tiptap-mention-items) {
+  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);
+  overflow: hidden;
+  padding: 0.2rem;
+  position: relative;
+}
+
+:global(.tiptap-mention-item) {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--ant-border-radius, 8px);
+  display: block;
+  margin: 0;
+  padding: 0.2rem 0.4rem;
+  text-align: left;
+  line-height: normal;
+  width: 100%;
+}
+
+:global(.tiptap-mention-item.is-selected) {
+  border-color: var(--ant-color-primary);
+  background: var(--ant-control-item-bg-hover);
+}
+
+:global(.tableWrapper),
+:global(.tiptap-table) {
+  display: block;
+  overflow-x: auto;
+  max-width: 80%;
+}
+
+:global(.tableWrapper) :global(table),
+:global(.tiptap-table) :global(table) {
+  border-collapse: collapse;
+  width: 100%;
+  min-width: 75px;
+}
+
+:global(.tableWrapper) :global(colgroup) :global(col),
+:global(.tiptap-table) :global(colgroup) :global(col) {
+  width: auto;
+}
+
+:global(.tableWrapper) :global(table),
+:global(.tableWrapper) :global(th),
+:global(.tableWrapper) :global(td),
+:global(.tiptap-table) :global(table),
+:global(.tiptap-table) :global(th),
+:global(.tiptap-table) :global(td) {
+  border: 1px solid var(--ant-color-border);
+}
+
+:global(.tableWrapper) :global(th),
+:global(.tableWrapper) :global(td),
+:global(.tiptap-table) :global(th),
+:global(.tiptap-table) :global(td) {
+  padding: 2px;
+  text-align: left;
+}
+
+:global(.tableWrapper) :global(th),
+:global(.tiptap-table) :global(th) {
+  background-color: var(--ant-color-fill-tertiary);
+  font-weight: bold;
+}
+
+:global(.tableWrapper) :global(tr):nth-child(even),
+:global(.tiptap-table) :global(tr):nth-child(even) {
+  background-color: var(--ant-color-fill-quaternary);
+}
+
+:global(.tableWrapper) :global(tr):hover,
+:global(.tiptap-table) :global(tr):hover {
+  background-color: var(--ant-color-primary-bg);
+}
+
+:global(.tableWrapper) :global(td) :global(p),
+:global(.tableWrapper) :global(th) :global(p),
+:global(.tiptap-table) :global(td) :global(p),
+:global(.tiptap-table) :global(th) :global(p) {
+  margin: 0;
+}

package/dist/blocks/TiptapMentionInput/suggestion.js

@@ -0,0 +1,82 @@
+/*
+  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 { ReactRenderer } from '@tiptap/react';
+import { type } from '@lowdefy/helpers';
+import tippy from 'tippy.js';
+import MentionList from './MentionList.js';
+function suggestion({ methods, char = '@', allowSpaces = true }) {
+    return {
+        // `char` must be set explicitly: Mention.configure does a shallow merge
+        // on its options.suggestion, replacing the extension's default `@`.
+        char,
+        allowSpaces,
+        items: ({ query, editor })=>{
+            const itemsList = editor.options.editorProps.items ?? [];
+            return itemsList.filter((item)=>{
+                if (type.isString(item)) {
+                    return item.toLowerCase().includes(query.toLowerCase());
+                }
+                if (type.isString(item?.label)) {
+                    return item.label.toLowerCase().includes(query.toLowerCase());
+                }
+                return false;
+            }).slice(0, 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'
+                    });
+                },
+                onUpdate (props) {
+                    component.updateProps(props);
+                    if (!props.clientRect) return;
+                    popup[0].setProps({
+                        getReferenceClientRect: props.clientRect
+                    });
+                },
+                onKeyDown (props) {
+                    if (props.event.key === 'Escape') {
+                        popup[0].hide();
+                        return true;
+                    }
+                    return component.ref?.onKeyDown(props);
+                },
+                onExit () {
+                    popup[0].destroy();
+                    component.destroy();
+                }
+            };
+        }
+    };
+}
+export default suggestion;

package/dist/blocks/TiptapMentionInput/useTiptapMentionState.js

@@ -0,0 +1,108 @@
+/*
+  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 mention editor's value. Mirrors TiptapInput's
+// useTiptapState but also extracts mentions from the document.
+function useTiptapMentionState({ 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)})`;
+        }
+    });
+    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));
+        const mentionsMap = new Map();
+        (json.content ?? []).filter((c)=>c.type === 'paragraph').forEach((c)=>{
+            c.content?.forEach((cc)=>{
+                if (cc.type === 'mention') {
+                    mentionsMap.set(JSON.stringify(cc.attrs.id.value), cc.attrs.id.value);
+                }
+            });
+        });
+        const mentions = Array.from(mentionsMap.values());
+        methods.setValue({
+            fileList,
+            html,
+            mentions,
+            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 useTiptapMentionState;

package/dist/blocks/utils/PopoverMenu.js

@@ -0,0 +1,82 @@
+/*
+  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 from 'react';
+import { BubbleMenu } from '@tiptap/react';
+import { AiOutlineBold, AiOutlineItalic, AiOutlineStrikethrough, AiOutlineHighlight } from 'react-icons/ai';
+import { isTextSelection } from '@tiptap/core';
+const HIGHLIGHT_SWATCHES = [
+    {
+        color: 'rgba(170, 255, 0, 1)',
+        fill: 'rgba(170, 255, 0, 0.5)'
+    },
+    {
+        color: 'rgba(255, 170, 0, 1)',
+        fill: 'rgba(255, 170, 0, 0.5)'
+    },
+    {
+        color: 'rgba(255, 0, 170, 1)',
+        fill: 'rgba(255, 0, 170, 0.5)'
+    },
+    {
+        color: 'rgba(170, 0, 255, 1)',
+        fill: 'rgba(170, 0, 255, 0.5)'
+    }
+];
+function hasExt(editor, name) {
+    return editor.extensionManager.extensions.some((ext)=>ext.name === name);
+}
+const PopoverMenu = ({ editor })=>{
+    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;
+            }
+            return true;
+        }
+    }, showBold && /*#__PURE__*/ React.createElement(AiOutlineBold, {
+        className: "tiptap-icon",
+        onClick: ()=>editor.chain().focus().toggleBold().run()
+    }), showItalic && /*#__PURE__*/ React.createElement(AiOutlineItalic, {
+        className: "tiptap-icon",
+        onClick: ()=>editor.chain().focus().toggleItalic().run()
+    }), showStrike && /*#__PURE__*/ React.createElement(AiOutlineStrikethrough, {
+        className: "tiptap-icon",
+        onClick: ()=>editor.chain().focus().toggleStrike().run()
+    }), showHighlight && HIGHLIGHT_SWATCHES.map(({ color, fill })=>/*#__PURE__*/ React.createElement(AiOutlineHighlight, {
+            key: color,
+            className: "tiptap-icon",
+            style: {
+                color
+            },
+            onClick: ()=>editor.chain().focus().toggleHighlight({
+                    color: fill
+                }).run()
+        })));
+};
+export default PopoverMenu;

package/dist/blocks/utils/buildExtensions.js

@@ -0,0 +1,127 @@
+/*
+  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 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 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 { type } from '@lowdefy/helpers';
+const DEFAULT_IMAGE_MIME_TYPES = [
+    'image/jpeg',
+    'image/png',
+    'image/gif',
+    'image/webp'
+];
+const DEFAULTS = {
+    image: {
+        disabled: false,
+        maxWidth: '80%',
+        zoom: 0.5
+    },
+    table: {
+        disabled: false,
+        resizable: true
+    },
+    link: {
+        disabled: false,
+        openOnClick: true,
+        autolink: true,
+        linkOnPaste: true,
+        defaultProtocol: 'https'
+    },
+    highlight: {
+        disabled: false,
+        multicolor: true
+    }
+};
+function merge(defaults, overrides) {
+    if (!type.isObject(overrides)) return defaults;
+    return {
+        ...defaults,
+        ...overrides
+    };
+}
+function buildExtensions({ properties, 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)
+    ];
+    if (!table.disabled) {
+        extensions.push(Table.configure({
+            HTMLAttributes: {
+                class: 'tiptap-table'
+            },
+            resizable: table.resizable
+        }), TableRow, TableHeader, TableCell);
+    }
+    if (!image.disabled) {
+        extensions.push(Image.configure({
+            HTMLAttributes: {
+                style: `max-width: ${image.maxWidth}; display: block; zoom: ${image.zoom};`
+            }
+        }));
+    }
+    extensions.push(Placeholder.configure({
+        placeholder: ()=>properties.placeholder ?? '',
+        showOnlyWhenEditable: false,
+        considerAnyAsEmpty: true
+    }));
+    if (!highlight.disabled) {
+        extensions.push(Highlight.configure({
+            multicolor: highlight.multicolor,
+            HTMLAttributes: {
+                style: 'padding: 0;'
+            }
+        }));
+    }
+    if (!link.disabled) {
+        extensions.push(LinkExtension.configure({
+            autolink: link.autolink,
+            linkOnPaste: link.linkOnPaste,
+            openOnClick: link.openOnClick,
+            defaultProtocol: link.defaultProtocol
+        }));
+    }
+    if (mentionExtension) {
+        extensions.push(mentionExtension);
+    }
+    if (uploadEnabled) {
+        extensions.push(FileHandler.configure({
+            onDrop: (editor, files, pos)=>{
+                files.forEach((file)=>insertImage(editor, file, pos));
+            },
+            onPaste: (editor, files, htmlContent)=>{
+                if (htmlContent) return false;
+                files.forEach((file)=>{
+                    const pos = editor.state.selection.anchor;
+                    insertImage(editor, file, pos);
+                });
+            },
+            allowedMimeTypes
+        }));
+    }
+    return extensions;
+}
+export default buildExtensions;

package/dist/blocks/utils/computeHeightStyle.js

@@ -0,0 +1,57 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+// Matches ant-design Input's line-height ratio at the default font size,
+// plus the 8px top/bottom padding on the ProseMirror editable area.
+const LINE_HEIGHT = '1.5714em';
+const VERTICAL_PADDING = 16;
+function calcRows(n) {
+    return `calc(${n} * ${LINE_HEIGHT} + ${VERTICAL_PADDING}px)`;
+}
+const DEFAULT_MIN_ROWS = 5;
+// Translate TextArea-style rows/autoSize props into React inline CSS applied
+// to the EditorContent wrapper. The wrapper becomes the scroll container;
+// ProseMirror's editable inside grows naturally.
+function computeHeightStyle({ rows, autoSize }) {
+    if (type.isInt(rows) && rows >= 1) {
+        const h = calcRows(rows);
+        return {
+            minHeight: h,
+            maxHeight: h,
+            overflowY: 'auto'
+        };
+    }
+    if (autoSize === true) {
+        return {
+            minHeight: calcRows(1),
+            maxHeight: 'none'
+        };
+    }
+    if (type.isObject(autoSize)) {
+        const style = {};
+        if (type.isInt(autoSize.minRows) && autoSize.minRows >= 1) {
+            style.minHeight = calcRows(autoSize.minRows);
+        }
+        if (type.isInt(autoSize.maxRows) && autoSize.maxRows >= 1) {
+            style.maxHeight = calcRows(autoSize.maxRows);
+            style.overflowY = 'auto';
+        }
+        if (Object.keys(style).length > 0) return style;
+    }
+    return {
+        minHeight: calcRows(DEFAULT_MIN_ROWS)
+    };
+}
+export default computeHeightStyle;

package/dist/blocks/utils/s3FileUpload.js

@@ -0,0 +1,51 @@
+/*
+  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.
+*/ async function s3FileUpload({ file, methods }) {
+    if (!file) {
+        return;
+    }
+    const { lastModified, name, size, type, uid } = file;
+    const s3PostPolicyResponse = await methods.triggerEvent({
+        name: '__getS3PostPolicy',
+        event: {
+            file: {
+                name,
+                lastModified,
+                size,
+                type,
+                uid
+            }
+        }
+    });
+    if (s3PostPolicyResponse.success !== true) {
+        throw new Error('S3 post policy request error.');
+    }
+    const { url, fields } = s3PostPolicyResponse.responses.__getS3PostPolicy.response[0];
+    const { bucket, key } = fields;
+    file.bucket = bucket;
+    file.key = key;
+    const formData = new FormData();
+    Object.keys(fields).forEach((field)=>{
+        formData.append(field, fields[field]);
+    });
+    formData.append('file', file);
+    await fetch(url, {
+        method: 'POST',
+        body: formData
+    });
+    file.url = `${url}/${key}`;
+    return file.url;
+}
+export default s3FileUpload;

package/dist/blocks/utils/statusClass.js

@@ -0,0 +1,24 @@
+/*
+  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.
+*/ // Map validation.status → wrapper class. Matches the visual behavior of
+// passing status="error" | "warning" to an antd <Input />, but rendered
+// with our own CSS (see utils/style.module.css) because antd v6 uses
+// CSS-in-JS, so the .ant-input-status-* classes are not global.
+function statusClass(status) {
+    if (status === 'error') return 'tiptap-wrapper-error';
+    if (status === 'warning') return 'tiptap-wrapper-warning';
+    return '';
+}
+export default statusClass;