@lowdefy/blocks-tiptap 5.6.0 → 6.1.0

package/dist/blocks/utils/{style.module.css → style.css}

@@ -3,7 +3,7 @@
    stylesheet class — we replicate the input look using antd's theme
    CSS variables (--ant-color-*, --ant-border-radius) so the block
    tracks the active theme without depending on cssinjs. */
-:global(.tiptap-wrapper) {
+.tiptap-wrapper {
   border: 1px solid var(--ant-color-border, #d9d9d9);
   border-radius: var(--ant-border-radius, 6px);
   background: var(--ant-color-bg-container, #fff);
@@ -13,73 +13,79 @@
     box-shadow 0.2s,
     background 0.2s;
   padding: 0;
+  /* Column flex so the editable fills the wrapper's min-height (see ProseMirror rule), making the
+     whole multi-line box a click/focus target — not just the first line of content. */
+  display: flex;
+  flex-direction: column;
 }
 
-:global(.tiptap-wrapper):hover {
+.tiptap-wrapper:hover {
   border-color: var(--ant-color-primary-hover, #4096ff);
 }
 
-:global(.tiptap-wrapper):focus-within {
+.tiptap-wrapper:focus-within {
   border-color: var(--ant-color-primary, #1677ff);
   box-shadow: 0 0 0 2px var(--ant-color-primary-bg, rgba(22, 119, 255, 0.1));
   outline: none;
 }
 
-:global(.tiptap-wrapper-borderless) {
+.tiptap-wrapper-borderless {
   border-color: transparent;
   background: transparent;
 }
 
-:global(.tiptap-wrapper-borderless):hover,
-:global(.tiptap-wrapper-borderless):focus-within {
+.tiptap-wrapper-borderless:hover,
+.tiptap-wrapper-borderless:focus-within {
   border-color: transparent;
   box-shadow: none;
 }
 
-:global(.tiptap-wrapper-error) {
+.tiptap-wrapper-error {
   border-color: var(--ant-color-error, #ff4d4f);
 }
 
-:global(.tiptap-wrapper-error):hover {
+.tiptap-wrapper-error:hover {
   border-color: var(--ant-color-error-hover, var(--ant-color-error, #ff4d4f));
 }
 
-:global(.tiptap-wrapper-error):focus-within {
+.tiptap-wrapper-error:focus-within {
   border-color: var(--ant-color-error, #ff4d4f);
   box-shadow: 0 0 0 2px var(--ant-color-error-bg, rgba(255, 77, 79, 0.1));
 }
 
-:global(.tiptap-wrapper-warning) {
+.tiptap-wrapper-warning {
   border-color: var(--ant-color-warning, #faad14);
 }
 
-:global(.tiptap-wrapper-warning):hover {
+.tiptap-wrapper-warning:hover {
   border-color: var(--ant-color-warning-hover, var(--ant-color-warning, #faad14));
 }
 
-:global(.tiptap-wrapper-warning):focus-within {
+.tiptap-wrapper-warning:focus-within {
   border-color: var(--ant-color-warning, #faad14);
   box-shadow: 0 0 0 2px var(--ant-color-warning-bg, rgba(250, 173, 20, 0.1));
 }
 
-:global(.tiptap-wrapper-disabled) {
+.tiptap-wrapper-disabled {
   background: var(--ant-color-bg-container-disabled, rgba(0, 0, 0, 0.04));
   color: var(--ant-color-text-disabled, rgba(0, 0, 0, 0.25));
   cursor: not-allowed;
 }
 
-:global(.tiptap-wrapper-disabled):hover {
+.tiptap-wrapper-disabled:hover {
   border-color: var(--ant-color-border, #d9d9d9);
 }
 
-:global(.tiptap-wrapper-disabled) :global(.tiptap.ProseMirror) {
+.tiptap-wrapper-disabled .tiptap.ProseMirror {
   cursor: not-allowed;
 }
 
-/* ProseMirror editable — sits inside the wrapper. */
-:global(.tiptap.ProseMirror) {
+/* ProseMirror editable — sits inside the wrapper. Grow to fill the wrapper's min-height so a click
+   anywhere in the box (not only the first content line) lands in the editor and places the cursor. */
+.tiptap.ProseMirror {
   padding: 8px;
   outline: none;
+  flex: 1 1 auto;
 }
 
 /* Editor content styling.
@@ -100,38 +106,38 @@
 
 /* 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) {
+.tiptap p {
   margin: 0 0 0.5em;
 }
 
-:global(.tiptap) > :global(p):last-child {
+.tiptap > p:last-child {
   margin-bottom: 0;
 }
 
 /* Lists: restore the markers and indent the antd reset removes. */
-:global(.tiptap) :global(ul),
-:global(.tiptap) :global(ol) {
+.tiptap ul,
+.tiptap ol {
   margin: 0 0 0.5em;
   padding-left: 1.5em;
 }
 
-:global(.tiptap) :global(ul) {
+.tiptap ul {
   list-style: disc;
 }
 
-:global(.tiptap) :global(ol) {
+.tiptap 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) {
+.tiptap li p,
+.tiptap li ul,
+.tiptap li ol {
   margin-bottom: 0;
 }
 
 /* Blockquote: restore the indent and add a quote bar. */
-:global(.tiptap) :global(blockquote) {
+.tiptap blockquote {
   margin: 0 0 0.5em;
   padding-left: 1em;
   border-left: 3px solid var(--ant-color-border, #d9d9d9);
@@ -140,44 +146,44 @@
 
 /* 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) {
+.tiptap h1,
+.tiptap h2,
+.tiptap h3,
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
   margin: 0 0 0.5em;
   font-weight: 600;
   line-height: 1.3;
 }
 
-:global(.tiptap) :global(h1) {
+.tiptap h1 {
   font-size: 2em;
 }
 
-:global(.tiptap) :global(h2) {
+.tiptap h2 {
   font-size: 1.5em;
 }
 
-:global(.tiptap) :global(h3) {
+.tiptap h3 {
   font-size: 1.25em;
 }
 
-:global(.tiptap) :global(h4) {
+.tiptap h4 {
   font-size: 1.1em;
 }
 
-:global(.tiptap) :global(h5) {
+.tiptap h5 {
   font-size: 1em;
 }
 
-:global(.tiptap) :global(h6) {
+.tiptap 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) {
+.tiptap hr {
   height: 0;
   margin: 0.5em 0;
   border: none;
@@ -186,7 +192,7 @@
 
 /* Inline code: monospace from the reset, but no background — give it the
    code chip look. */
-:global(.tiptap) :global(code) {
+.tiptap 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));
@@ -195,7 +201,7 @@
 
 /* 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) {
+.tiptap pre {
   margin: 0 0 0.5em;
   padding: 8px 12px;
   border-radius: var(--ant-border-radius, 6px);
@@ -203,7 +209,7 @@
   overflow-x: auto;
 }
 
-:global(.tiptap) :global(pre) :global(code) {
+.tiptap pre code {
   padding: 0;
   border-radius: 0;
   background: none;
@@ -213,12 +219,12 @@
 /* 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) {
+.tiptap 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 {
+.tiptap p.is-editor-empty:first-child::before {
   color: var(--ant-color-text-placeholder, rgba(0, 0, 0, 0.25));
   content: attr(data-placeholder);
   float: left;
@@ -226,7 +232,7 @@
   pointer-events: none;
 }
 
-:global(.tiptap-popover) {
+.tiptap-popover {
   background: rgba(0, 0, 0, 0.85);
   color: var(--ant-color-text-light-solid, #fff);
   border-radius: var(--ant-border-radius, 8px);
@@ -235,7 +241,7 @@
   display: flex;
 }
 
-:global(.tiptap-icon) {
+.tiptap-icon {
   border-radius: var(--ant-border-radius-sm, 4px);
   display: flex;
   width: 16px;
@@ -245,16 +251,24 @@
   color: var(--ant-color-text-light-solid, #fff);
 }
 
-:global(.tiptap-icon.disabled) {
+.tiptap-icon.disabled {
   pointer-events: none;
 }
 
-:global(.tiptap-icon):hover {
+.tiptap-icon:hover {
   background: var(--ant-color-icon-hover, rgba(0, 0, 0, 0.75));
   color: var(--ant-color-text-light-solid, #fff);
   cursor: pointer;
 }
 
-:global(.tiptap-icon) + :global(.tiptap-icon) {
+.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": "5.6.0",
+  "version": "6.1.0",
   "license": "Apache-2.0",
   "description": "Lowdefy TipTap rich-text editor blocks.",
   "homepage": "https://lowdefy.com",
@@ -46,24 +46,23 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "5.6.0",
-    "@lowdefy/blocks-antd": "5.6.0",
-    "@lowdefy/helpers": "5.6.0",
-    "@tiptap/core": "2.27.2",
-    "@tiptap/extension-bubble-menu": "2.27.2",
-    "@tiptap/extension-file-handler": "2.27.2",
-    "@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"
@@ -73,11 +72,11 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.6.0",
-    "@lowdefy/e2e-utils": "5.6.0",
-    "@playwright/test": "1.50.1",
-    "@swc/cli": "0.8.0",
-    "@swc/core": "1.15.18",
+    "@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",
     "copyfiles": "2.4.1"
   },
   "publishConfig": {
@@ -86,7 +85,7 @@
   "scripts": {
     "build": "swc src --out-dir dist --config-file ../../../../.swcrc --cli-config-file ../../../../.swc-cli.json && pnpm copyfiles",
     "clean": "rm -rf dist",
-    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
+    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.snap\"",
     "e2e": "playwright test --config e2e/playwright.config.js",
     "e2e:ui": "playwright test --config e2e/playwright.config.js --ui"
   }

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

@@ -1,60 +0,0 @@
-@import '../utils/style.module.css';
-
-: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/utils/s3FileUpload.js

@@ -1,53 +0,0 @@
-/*
-  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
-    });
-    // 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;