@lowdefy/blocks-tiptap 5.5.1 → 6.0.0

package/dist/blocks/TiptapInput/TiptapInput.js

@@ -22,14 +22,17 @@ import buildExtensions from '../utils/buildExtensions.js';
 import computeHeightStyle from '../utils/computeHeightStyle.js';
 import statusClass from '../utils/statusClass.js';
 import useTiptapState from './useTiptapState.js';
-import './style.module.css';
+import './style.css';
 const TiptapInput = ({ blockId, components: { Icon, Link }, events, loading, methods, properties, required, validation, value })=>{
+    const uploadPolicyRequestId = properties.uploadPolicyRequestId ?? properties.s3PostPolicyRequestId;
+    const downloadPolicyRequestId = properties.downloadPolicyRequestId;
     const { emit, insertImage } = useTiptapState({
         value,
-        methods
+        methods,
+        hasDownloadRequest: !type.isNone(downloadPolicyRequestId)
     });
     const disabled = properties.disabled === true || loading;
-    const uploadEnabled = !type.isNone(properties.s3PostPolicyRequestId);
+    const uploadEnabled = !type.isNone(uploadPolicyRequestId);
     const extensions = buildExtensions({
         properties,
         insertImage,
@@ -51,21 +54,38 @@ const TiptapInput = ({ blockId, components: { Icon, Link }, events, loading, met
             });
         }
     });
-    // Register upload-policy event once (if configured).
+    // Register upload-policy and download-policy events once (if configured).
     useEffect(()=>{
         if (!uploadEnabled) return;
+        if (!type.isNone(properties.s3PostPolicyRequestId)) {
+            console.warn('TiptapInput property "s3PostPolicyRequestId" is deprecated. Use "uploadPolicyRequestId" instead.');
+        }
         methods.registerEvent({
-            name: '__getS3PostPolicy',
+            name: '__getUploadPolicy',
             actions: [
                 {
-                    id: '__getS3PostPolicy',
+                    id: '__getUploadPolicy',
                     type: 'Request',
                     params: [
-                        properties.s3PostPolicyRequestId
+                        uploadPolicyRequestId
                     ]
                 }
             ]
         });
+        if (!type.isNone(downloadPolicyRequestId)) {
+            methods.registerEvent({
+                name: '__getDownloadPolicy',
+                actions: [
+                    {
+                        id: '__getDownloadPolicy',
+                        type: 'Request',
+                        params: [
+                            downloadPolicyRequestId
+                        ]
+                    }
+                ]
+            });
+        }
     }, []);
     // Register methods as soon as the editor is available.
     useEffect(()=>{

package/dist/blocks/TiptapInput/gallery.yaml

@@ -0,0 +1,210 @@
+# 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.
+
+- title: Default
+  fullWidth: true
+  blocks:
+    - id: tiptap_default
+      type: TiptapInput
+      properties:
+        title: Notes
+        placeholder: 'Start typing here. Try **bold**, *italic*, or headings.'
+
+- title: Pre-populated content
+  fullWidth: true
+  blocks:
+    - id: tiptap_prepopulated
+      type: TiptapInput
+      events:
+        onMount:
+          - id: tiptap_prepopulated_set
+            type: SetState
+            params:
+              tiptap_prepopulated:
+                html: >
+                  <h2>What's new</h2>
+                  <p>Highlights from this release:</p>
+                  <ul>
+                    <li>Rich-text editor built on <a href="https://tiptap.dev">TipTap</a></li>
+                    <li>Drag-and-drop image uploads</li>
+                    <li>Inline <strong>bold</strong>, <em>italic</em>, and <mark>highlights</mark></li>
+                  </ul>
+                  <blockquote><p>Pair it with a TextArea when you need a simple fallback.</p></blockquote>
+      properties:
+        title: Release notes
+
+- title: Disabled (read-only)
+  fullWidth: true
+  blocks:
+    - id: tiptap_disabled
+      type: TiptapInput
+      events:
+        onMount:
+          - id: tiptap_disabled_set
+            type: SetState
+            params:
+              tiptap_disabled:
+                html: '<p>This editor is disabled and cannot be edited.</p>'
+      properties:
+        title: Read only
+        disabled: true
+
+- title: Borderless
+  fullWidth: true
+  blocks:
+    - id: tiptap_borderless
+      type: TiptapInput
+      properties:
+        title: Borderless editor
+        bordered: false
+        placeholder: 'No border, just content.'
+
+- title: Fixed rows — rows = 2
+  fullWidth: true
+  blocks:
+    - id: tiptap_rows_2
+      type: TiptapInput
+      properties:
+        title: Short note
+        placeholder: 'Exactly 2 rows tall.'
+        rows: 2
+
+- title: autoSize — minRows 2, maxRows 5
+  fullWidth: true
+  blocks:
+    - id: tiptap_autosize_range
+      type: TiptapInput
+      properties:
+        title: Grows between 2 and 5 rows
+        placeholder: 'Keep typing — scrolls past 5 rows.'
+        autoSize:
+          minRows: 2
+          maxRows: 5
+
+- title: Validation — required, with error state
+  fullWidth: true
+  blocks:
+    - id: tiptap_validation
+      type: TiptapInput
+      required: true
+      properties:
+        title: Release notes (required)
+        placeholder: 'Type at least 10 characters, then click Validate.'
+        rows: 3
+      validate:
+        - status: error
+          message: 'Release notes must be at least 10 characters.'
+          pass:
+            _gte:
+              - _string.length:
+                  _state: tiptap_validation.text
+              - 10
+    - id: tiptap_validation_button
+      type: Button
+      properties:
+        title: Validate
+      events:
+        onClick:
+          - id: tiptap_validation_run
+            type: Validate
+            params:
+              - tiptap_validation
+
+- title: autoSize = true — grows with content
+  fullWidth: true
+  blocks:
+    - id: tiptap_autosize_true
+      type: TiptapInput
+      properties:
+        title: Unconstrained
+        placeholder: 'No height cap.'
+        autoSize: true
+
+- title: Minimal — tables, images and highlights disabled
+  fullWidth: true
+  blocks:
+    - id: tiptap_minimal
+      type: TiptapInput
+      properties:
+        title: Plain note
+        placeholder: 'Bold/italic/lists only.'
+        image:
+          disabled: true
+        table:
+          disabled: true
+        highlight:
+          disabled: true
+
+- title: StarterKit overrides — disable code block and blockquote
+  fullWidth: true
+  blocks:
+    - id: tiptap_starterkit
+      type: TiptapInput
+      properties:
+        title: Short-form
+        placeholder: 'No code block or blockquote.'
+        starterKit:
+          codeBlock: false
+          blockquote: false
+          horizontalRule: false
+
+- title: With table (tables enabled by default)
+  fullWidth: true
+  blocks:
+    - id: tiptap_with_table
+      type: TiptapInput
+      events:
+        onMount:
+          - id: tiptap_with_table_set
+            type: SetState
+            params:
+              tiptap_with_table:
+                html: >
+                  <h3>Weekly sync</h3>
+                  <p>Schedule for today's meeting:</p>
+                  <table>
+                    <thead>
+                      <tr><th>Time</th><th>Topic</th><th>Owner</th></tr>
+                    </thead>
+                    <tbody>
+                      <tr><td>09:00</td><td>Kickoff</td><td>Alice</td></tr>
+                      <tr><td>09:15</td><td>Review last week</td><td>Bob</td></tr>
+                      <tr><td>09:45</td><td>This week's plan</td><td>Carol</td></tr>
+                      <tr><td>10:00</td><td>Wrap-up</td><td>Alice</td></tr>
+                    </tbody>
+                  </table>
+                  <p>Notes:</p>
+                  <ul>
+                    <li>Bring the latest metrics</li>
+                    <li>Send follow-ups within 24h</li>
+                  </ul>
+      properties:
+        title: Agenda
+
+- title: Link configuration — open in place (not new tab)
+  fullWidth: true
+  blocks:
+    - id: tiptap_links
+      type: TiptapInput
+      events:
+        onMount:
+          - id: tiptap_links_set
+            type: SetState
+            params:
+              tiptap_links:
+                html: '<p>Visit <a href="https://lowdefy.com">lowdefy.com</a> or type a URL and press space.</p>'
+      properties:
+        title: Open links in place
+        link:
+          openOnClick: false

package/dist/blocks/TiptapInput/meta.js

@@ -34,7 +34,7 @@
                 items: {
                     type: 'string'
                 },
-                description: 'Mime-types accepted by the drag/drop and paste file handler. Defaults to common image types (jpeg, png, gif, webp). Only used when s3PostPolicyRequestId is set.'
+                description: 'Mime-types accepted by the drag/drop and paste file handler. Defaults to common image types (jpeg, png, gif, webp). Only used when uploadPolicyRequestId is set.'
             },
             autoSize: {
                 oneOf: [
@@ -166,9 +166,17 @@
                 minimum: 1,
                 description: 'Fix the editor height to exactly this many rows. Takes precedence over autoSize.'
             },
+            downloadPolicyRequestId: {
+                type: 'string',
+                description: 'Id of a download request (e.g. AwsS3PresignedGetObject) used to resolve the inserted image URL after upload. Inline images persist in saved content, so the request should set public: true (and the upload request the provider public-read acl) to return a stable, non-expiring URL. When unset, a legacy unsigned object URL is constructed from the upload response (S3-shaped, deprecated).'
+            },
             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 and inserted as <img> nodes. Leave unset to disable image uploads.'
+                description: 'Deprecated — use uploadPolicyRequestId instead.'
+            },
+            uploadPolicyRequestId: {
+                type: 'string',
+                description: 'Id of an upload-policy request (e.g. AwsS3PresignedPostPolicy, GcsSignedPostPolicy, AzureBlobUploadSas). When set, images dragged or pasted into the editor are uploaded via that request and inserted as <img> nodes. Leave unset to disable image uploads.'
             },
             size: {
                 type: 'string',

package/dist/blocks/TiptapInput/style.css

@@ -0,0 +1,60 @@
+@import '../utils/style.css';
+
+.tableWrapper,
+.tiptap-table {
+  display: block;
+  overflow-x: auto;
+  max-width: 80%;
+}
+
+.tableWrapper table,
+.tiptap-table table {
+  border-collapse: collapse;
+  width: 100%;
+  min-width: 75px;
+}
+
+.tableWrapper colgroup col,
+.tiptap-table colgroup col {
+  width: auto;
+}
+
+.tableWrapper table,
+.tableWrapper th,
+.tableWrapper td,
+.tiptap-table table,
+.tiptap-table th,
+.tiptap-table td {
+  border: 1px solid var(--ant-color-border);
+}
+
+.tableWrapper th,
+.tableWrapper td,
+.tiptap-table th,
+.tiptap-table td {
+  padding: 2px;
+  text-align: left;
+}
+
+.tableWrapper th,
+.tiptap-table th {
+  background-color: var(--ant-color-fill-tertiary);
+  font-weight: bold;
+}
+
+.tableWrapper tr:nth-child(even),
+.tiptap-table tr:nth-child(even) {
+  background-color: var(--ant-color-fill-quaternary);
+}
+
+.tableWrapper tr:hover,
+.tiptap-table tr:hover {
+  background-color: var(--ant-color-primary-bg);
+}
+
+.tableWrapper td p,
+.tableWrapper th p,
+.tiptap-table td p,
+.tiptap-table th p {
+  margin: 0;
+}

package/dist/blocks/TiptapInput/tests/TiptapInput.e2e.yaml

@@ -0,0 +1,53 @@
+# 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: tiptap-input
+type: Box
+
+events:
+  onMount:
+    - id: seed_content
+      type: SetState
+      params:
+        tiptap_with_value:
+          html: '<p>Hello <strong>world</strong>.</p>'
+        tiptap_disabled:
+          html: '<p>Disabled content.</p>'
+        tiptap_borderless:
+          html: '<p>Borderless.</p>'
+
+blocks:
+  - id: tiptap_empty
+    type: TiptapInput
+
+  - id: tiptap_placeholder
+    type: TiptapInput
+    properties:
+      placeholder: 'Start typing...'
+
+  - id: tiptap_with_value
+    type: TiptapInput
+
+  - id: tiptap_disabled
+    type: TiptapInput
+    properties:
+      disabled: true
+
+  - id: tiptap_borderless
+    type: TiptapInput
+    properties:
+      bordered: false
+
+  - id: tiptap_typing
+    type: TiptapInput

package/dist/blocks/TiptapInput/tests.yaml

@@ -0,0 +1,65 @@
+# 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: TiptapInput
+- id: properties.placeholder
+  type: TiptapInput
+  properties:
+    placeholder: 'Start typing...'
+- id: properties.title
+  type: TiptapInput
+  properties:
+    title: 'Note'
+- id: properties.disabled
+  type: TiptapInput
+  properties:
+    disabled: true
+- id: properties.bordered = false
+  type: TiptapInput
+  properties:
+    bordered: false
+    placeholder: 'No border.'
+- id: properties.image and table disabled
+  type: TiptapInput
+  properties:
+    image:
+      disabled: true
+    table:
+      disabled: true
+- id: properties.starterKit overrides
+  type: TiptapInput
+  properties:
+    starterKit:
+      codeBlock: false
+      blockquote: false
+- id: properties.rows = 2
+  type: TiptapInput
+  properties:
+    rows: 2
+- id: properties.autoSize = {minRows 2, maxRows 5}
+  type: TiptapInput
+  properties:
+    autoSize:
+      minRows: 2
+      maxRows: 5
+- id: properties.autoSize = true
+  type: TiptapInput
+  properties:
+    autoSize: true
+- id: properties.link.openOnClick = false
+  type: TiptapInput
+  properties:
+    link:
+      openOnClick: false

package/dist/blocks/TiptapInput/useTiptapState.js

@@ -14,12 +14,12 @@
   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 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 }) {
+function useTiptapState({ value, methods, hasDownloadRequest }) {
     const valueRef = useRef(value);
     valueRef.current = value;
     const turndownService = new TurndownService();
@@ -31,7 +31,7 @@ function useTiptapState({ value, methods }) {
         }
     });
     // Emit a full `{fileList, html, text, markdown}` value to Lowdefy based on
-    // the editor's current document. When appendFile is supplied (an S3 upload
+    // the editor's current document. When appendFile is supplied (an upload
     // result), it is added to the current fileList before filtering by
     // in-document image urls.
     const emit = (editor, appendFile)=>{
@@ -54,9 +54,10 @@ function useTiptapState({ 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/TiptapMentionInput/TiptapMentionInput.js

@@ -26,27 +26,91 @@ 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';
+import './style.css';
+// A mention node's `id` attribute holds whatever option the user picked — a
+// plain string, or the option object ({ label, value, tag }) — so the label
+// and the DOM identifier are both derived from it. Content loaded back from
+// saved html arrives with a STRING id (tiptap's parseHTML reads data-id) and
+// the label in `data-label`, which is why both render paths take the node's
+// attributes rather than the id alone.
 function mentionLabel(id) {
     return id?.tag?.title ?? id?.label ?? id;
 }
+// The string that goes into the DOM as data-id. Option objects are commonly
+// { label, value } with the identity inside `value` (a string, or an object
+// with _id / id); fall back to the object's own _id / id. Anything without a
+// scalar identity yields undefined and data-id is omitted — never the
+// "[object Object]" tiptap's stock attribute renderer produces when it
+// stringifies the whole option.
+function scalarId(candidate) {
+    if (type.isString(candidate) || type.isNumber(candidate)) return String(candidate);
+    return undefined;
+}
+function mentionId(id) {
+    if (type.isNone(id)) return undefined;
+    if (type.isString(id) || type.isNumber(id)) return String(id);
+    if (!type.isObject(id)) return undefined;
+    const value = id.value;
+    if (type.isObject(value)) {
+        return scalarId(value._id) ?? scalarId(value.id) ?? scalarId(value.value);
+    }
+    return scalarId(value) ?? scalarId(id._id) ?? scalarId(id.id);
+}
+function nodeLabel(attrs) {
+    const label = type.isString(attrs.label) && attrs.label !== '' ? attrs.label : undefined;
+    const derived = mentionLabel(attrs.id);
+    return label ?? (type.isString(derived) || type.isNumber(derived) ? derived : undefined);
+}
+// Mention with its `id` and `label` attributes rendered through the helpers
+// above: data-id is always a scalar identifier (or absent), and data-label
+// always carries the display label so saved html round-trips with a readable
+// mention even though the id comes back as a string.
+const LowdefyMention = Mention.extend({
+    addAttributes () {
+        const parent = this.parent?.() ?? {};
+        return {
+            ...parent,
+            id: {
+                ...parent.id,
+                renderHTML: (attributes)=>{
+                    const id = mentionId(attributes.id);
+                    return type.isNone(id) ? {} : {
+                        'data-id': id
+                    };
+                }
+            },
+            label: {
+                ...parent.label,
+                renderHTML: (attributes)=>{
+                    const label = nodeLabel(attributes);
+                    return type.isNone(label) ? {} : {
+                        'data-label': label
+                    };
+                }
+            }
+        };
+    }
+});
 const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loading, methods, properties, required, validation, value })=>{
+    const uploadPolicyRequestId = properties.uploadPolicyRequestId ?? properties.s3PostPolicyRequestId;
+    const downloadPolicyRequestId = properties.downloadPolicyRequestId;
     const { emit, insertImage } = useTiptapMentionState({
         value,
-        methods
+        methods,
+        hasDownloadRequest: !type.isNone(downloadPolicyRequestId)
     });
     const disabled = properties.disabled === true || loading;
-    const uploadEnabled = !type.isNone(properties.s3PostPolicyRequestId);
+    const uploadEnabled = !type.isNone(uploadPolicyRequestId);
     const char = properties.mentions?.char ?? '@';
     const allowSpaces = properties.mentions?.allowSpaces !== false;
     const limit = properties.mentions?.limit ?? 5;
-    const mentionExtension = Mention.configure({
+    const mentionExtension = LowdefyMention.configure({
         HTMLAttributes: {
             class: 'tiptap-mention'
         },
         renderHTML ({ options, node }) {
             const id = node.attrs.id;
-            const label = mentionLabel(id);
+            const label = nodeLabel(node.attrs) ?? '';
             const group = id?.tag?.group;
             const modifier = {};
             if (!type.isNone(group)) {
@@ -62,8 +126,7 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
                 return [
                     'a',
                     mergeAttributes({
-                        href,
-                        'data-id': id?._id
+                        href
                     }, options.HTMLAttributes, modifier),
                     `${char}${label}`
                 ];
@@ -75,7 +138,7 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
             ];
         },
         renderText ({ node }) {
-            return `${char}${mentionLabel(node.attrs.id)}`;
+            return `${char}${nodeLabel(node.attrs) ?? ''}`;
         },
         suggestion: suggestion({
             methods,
@@ -126,18 +189,35 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
     ]);
     useEffect(()=>{
         if (uploadEnabled) {
+            if (!type.isNone(properties.s3PostPolicyRequestId)) {
+                console.warn('TiptapMentionInput property "s3PostPolicyRequestId" is deprecated. Use "uploadPolicyRequestId" instead.');
+            }
             methods.registerEvent({
-                name: '__getS3PostPolicy',
+                name: '__getUploadPolicy',
                 actions: [
                     {
-                        id: '__getS3PostPolicy',
+                        id: '__getUploadPolicy',
                         type: 'Request',
                         params: [
-                            properties.s3PostPolicyRequestId
+                            uploadPolicyRequestId
                         ]
                     }
                 ]
             });
+            if (!type.isNone(downloadPolicyRequestId)) {
+                methods.registerEvent({
+                    name: '__getDownloadPolicy',
+                    actions: [
+                        {
+                            id: '__getDownloadPolicy',
+                            type: 'Request',
+                            params: [
+                                downloadPolicyRequestId
+                            ]
+                        }
+                    ]
+                });
+            }
         }
         if (!type.isNone(properties.mentionsRequestId)) {
             methods.registerEvent({