@lowdefy/blocks-tiptap 5.5.1 → 6.0.0

package/dist/blocks/TiptapMentionInput/tests.yaml

@@ -0,0 +1,90 @@
+# 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.
+
+- id: default
+  type: TiptapMentionInput
+- id: properties.placeholder
+  type: TiptapMentionInput
+  properties:
+    placeholder: 'Type @ to mention...'
+- id: properties.disabled
+  type: TiptapMentionInput
+  properties:
+    disabled: true
+- id: properties.mentions.options
+  type: TiptapMentionInput
+  properties:
+    mentions:
+      options:
+        - label: Alice
+          value:
+            _id: user_1
+        - label: Bob
+          value:
+            _id: user_2
+- id: properties.mentions.char = '#'
+  type: TiptapMentionInput
+  properties:
+    placeholder: 'Type # to tag'
+    mentions:
+      char: '#'
+      options:
+        - label: bug
+          value:
+            _id: tag_bug
+- id: properties.mentions.limit with sections
+  type: TiptapMentionInput
+  properties:
+    mentions:
+      limit: 2
+      options:
+        - label: Alice
+          value:
+            _id: user_1
+          tag:
+            section: People
+        - label: Bob
+          value:
+            _id: user_2
+          tag:
+            section: People
+        - label: Finance
+          value:
+            _id: role_finance
+          tag:
+            section: Roles
+- id: properties.mentions group chips with tag.color
+  type: TiptapMentionInput
+  properties:
+    mentions:
+      options:
+        - label: Alice
+          value:
+            _id: user_1
+          tag:
+            section: People
+        - label: Finance
+          value:
+            role: finance-admin
+          tag:
+            section: Roles
+            group: finance
+            color: '#722ed1'
+        - label: Developers
+          value:
+            role: developer
+          tag:
+            section: Roles
+            group: devs
+            color: '#13c2c2'

package/dist/blocks/TiptapMentionInput/useTiptapMentionState.js

@@ -14,10 +14,10 @@
   limitations under the License.
 */ import { useRef } from 'react';
 import TurndownService from 'turndown';
-import s3FileUpload from '../utils/s3FileUpload.js';
+import fileUpload from '../utils/fileUpload.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 }) {
+function useTiptapMentionState({ value, methods, hasDownloadRequest }) {
     const valueRef = useRef(value);
     valueRef.current = value;
     const turndownService = new TurndownService();
@@ -43,7 +43,9 @@ function useTiptapMentionState({ value, methods }) {
         const mentionsMap = new Map();
         (json.content ?? []).filter((c)=>c.type === 'paragraph').forEach((c)=>{
             c.content?.forEach((cc)=>{
-                if (cc.type === 'mention') {
+                // Only freshly picked mentions carry the option object; a node parsed
+                // back from saved html has a string id and no `value` to report.
+                if (cc.type === 'mention' && cc.attrs.id?.value !== undefined) {
                     mentionsMap.set(JSON.stringify(cc.attrs.id.value), cc.attrs.id.value);
                 }
             });
@@ -58,9 +60,10 @@ function useTiptapMentionState({ value, methods }) {
         });
     };
     const insertImage = async (editor, file, pos)=>{
-        const url = await s3FileUpload({
+        const url = await fileUpload({
             file,
-            methods
+            methods,
+            hasDownloadRequest
         });
         // 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

package/dist/blocks/utils/fileUpload.js

@@ -0,0 +1,63 @@
+/*
+  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';
+import getLegacyObjectUrl from '@lowdefy/blocks-files/utils/getLegacyObjectUrl.js';
+import getUploadPolicy from '@lowdefy/blocks-files/utils/getUploadPolicy.js';
+import uploadFile from '@lowdefy/blocks-files/utils/uploadFile.js';
+// Uploads a file through the app's upload-policy request (any storage
+// provider) and resolves a display URL for the inline image. Inline images
+// persist in saved markdown, so they must be public assets: the upload
+// request should set the provider's public-read acl, and the download request
+// should set public: true to return a stable, non-expiring URL. Without a
+// download request the legacy unsigned object URL is used (S3-shaped,
+// deprecated).
+async function fileUpload({ file, methods, hasDownloadRequest }) {
+    if (type.isNone(file)) {
+        return;
+    }
+    const descriptor = await getUploadPolicy({
+        methods,
+        file
+    });
+    file.bucket = descriptor.bucket;
+    file.key = descriptor.key;
+    await uploadFile({
+        descriptor,
+        file
+    });
+    if (hasDownloadRequest) {
+        const response = await methods.triggerEvent({
+            name: '__getDownloadPolicy',
+            event: {
+                file: {
+                    bucket: descriptor.bucket,
+                    key: descriptor.key,
+                    name: file.name,
+                    type: file.type
+                }
+            }
+        });
+        if (response.success !== true) {
+            throw new Error('Download policy request error.');
+        }
+        file.url = response.responses.__getDownloadPolicy.response[0];
+        return file.url;
+    }
+    file.url = getLegacyObjectUrl({
+        descriptor
+    });
+    return file.url;
+}
+export default fileUpload;

package/dist/blocks/utils/statusClass.js

@@ -14,7 +14,7 @@
   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
+// with our own CSS (see utils/style.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';

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,16 @@
   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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-tiptap",
-  "version": "5.5.1",
+  "version": "6.0.0",
   "license": "Apache-2.0",
   "description": "Lowdefy TipTap rich-text editor blocks.",
   "homepage": "https://lowdefy.com",
@@ -46,9 +46,10 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "5.5.1",
-    "@lowdefy/blocks-antd": "5.5.1",
-    "@lowdefy/helpers": "5.5.1",
+    "@lowdefy/block-utils": "6.0.0",
+    "@lowdefy/blocks-antd": "6.0.0",
+    "@lowdefy/blocks-files": "6.0.0",
+    "@lowdefy/helpers": "6.0.0",
     "@tiptap/core": "2.27.2",
     "@tiptap/extension-bubble-menu": "2.27.2",
     "@tiptap/extension-file-handler": "2.27.2",
@@ -73,11 +74,11 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.5.1",
-    "@lowdefy/e2e-utils": "5.5.1",
-    "@playwright/test": "1.50.1",
-    "@swc/cli": "0.8.0",
-    "@swc/core": "1.15.18",
+    "@lowdefy/block-dev-e2e": "6.0.0",
+    "@lowdefy/e2e-utils": "6.0.0",
+    "@playwright/test": "1.59.1",
+    "@swc/cli": "0.8.1",
+    "@swc/core": "1.15.32",
     "copyfiles": "2.4.1"
   },
   "publishConfig": {
@@ -86,7 +87,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;