@lowdefy/blocks-tiptap 5.6.0 → 6.1.0

package/dist/blocks/TiptapMentionInput/TiptapMentionInput.js

@@ -15,18 +15,18 @@
 */ import React, { useEffect } from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
-import { useEditor, EditorContent } from '@tiptap/react';
+import { 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 useTiptapEditor from '../utils/useTiptapEditor.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
@@ -92,12 +92,15 @@ const LowdefyMention = Mention.extend({
     }
 });
 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;
@@ -144,29 +147,22 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
             limit
         })
     });
-    const extensions = buildExtensions({
-        properties,
-        insertImage,
-        mentionExtension,
-        uploadEnabled
-    });
     const heightStyle = computeHeightStyle({
         rows: properties.rows,
         autoSize: properties.autoSize
     });
-    const editor = useEditor({
+    const editor = useTiptapEditor({
+        disabled,
         editorProps: {
             items: type.isArray(properties.mentions?.options) ? properties.mentions.options : []
         },
-        extensions,
-        content: value?.html || '',
-        editable: ()=>!disabled,
-        onUpdate: ({ editor })=>{
-            emit(editor);
-            methods.triggerEvent({
-                name: 'onChange'
-            });
-        }
+        emit,
+        insertImage,
+        mentionExtension,
+        methods,
+        properties,
+        uploadEnabled,
+        value
     });
     useGroupMembersPopover({
         editor,
@@ -186,18 +182,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({
@@ -214,62 +227,6 @@ const TiptapMentionInput = ({ blockId, components: { Icon, Link }, events, loadi
             });
         }
     }, []);
-    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' : '',

package/dist/blocks/TiptapMentionInput/gallery.yaml

@@ -0,0 +1,296 @@
+# 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 with static mentions
+  fullWidth: true
+  blocks:
+    - id: tiptap_mention_default
+      type: TiptapMentionInput
+      properties:
+        title: Ticket note
+        placeholder: 'Type @ to mention someone.'
+        mentions:
+          options:
+            - label: Alice
+              value:
+                _id: user_1
+                name: Alice
+            - label: Bob
+              value:
+                _id: user_2
+                name: Bob
+            - label: Carol
+              value:
+                _id: user_3
+                name: Carol
+
+- title: Pre-populated content via SetState on onMount
+  fullWidth: true
+  blocks:
+    - id: tiptap_mention_prepopulated
+      type: TiptapMentionInput
+      events:
+        onMount:
+          - id: tiptap_mention_prepopulated_set
+            type: SetState
+            params:
+              tiptap_mention_prepopulated:
+                html: >
+                  <p>Thanks <span class="tiptap-mention">@Alice</span> for the review.
+                  Assigning follow-up to <span class="tiptap-mention">@Bob</span>.</p>
+      properties:
+        title: Ticket summary
+        mentions:
+          options:
+            - label: Alice
+              value:
+                _id: user_1
+            - label: Bob
+              value:
+                _id: user_2
+
+- title: Custom trigger character (hashtags)
+  fullWidth: true
+  blocks:
+    - id: tiptap_mention_hashtags
+      type: TiptapMentionInput
+      properties:
+        title: Tag the ticket
+        placeholder: 'Type # to add a tag.'
+        mentions:
+          char: '#'
+          allowSpaces: false
+          options:
+            - label: bug
+              value:
+                _id: tag_bug
+            - label: feature
+              value:
+                _id: tag_feature
+            - label: needs-triage
+              value:
+                _id: tag_triage
+
+- title: Mentions rendered as links
+  fullWidth: true
+  blocks:
+    - id: tiptap_mention_links
+      type: TiptapMentionInput
+      properties:
+        title: Link mentions to profile pages
+        placeholder: 'Type @ — selections render as <a>.'
+        mentions:
+          options:
+            - label: Alice
+              value:
+                _id: user_1
+            - label: Bob
+              value:
+                _id: user_2
+          getHref:
+            _function:
+              __string.concat:
+                - '/users/'
+                - __args: 0.value._id
+
+- title: autoSize — minRows 2, maxRows 5
+  fullWidth: true
+  blocks:
+    - id: tiptap_mention_autosize
+      type: TiptapMentionInput
+      properties:
+        title: Grows between 2 and 5 rows
+        placeholder: 'Type @ to mention. Scrolls past 5 rows.'
+        autoSize:
+          minRows: 2
+          maxRows: 5
+        mentions:
+          options:
+            - label: Alice
+              value:
+                _id: user_1
+            - label: Bob
+              value:
+                _id: user_2
+
+- title: Validation — required, with error state
+  fullWidth: true
+  blocks:
+    - id: tiptap_mention_validation
+      type: TiptapMentionInput
+      required: true
+      properties:
+        title: Mention a teammate (required)
+        placeholder: 'Type @ and pick someone, then click Validate.'
+        rows: 3
+        mentions:
+          options:
+            - label: Alice
+              value:
+                _id: user_1
+            - label: Bob
+              value:
+                _id: user_2
+      validate:
+        - status: error
+          message: 'Please mention at least one teammate.'
+          pass:
+            _gt:
+              - _string.length:
+                  _state: tiptap_mention_validation.text
+              - 0
+    - id: tiptap_mention_validation_button
+      type: Button
+      properties:
+        title: Validate
+      events:
+        onClick:
+          - id: tiptap_mention_validation_run
+            type: Validate
+            params:
+              - tiptap_mention_validation
+
+- title: Disabled (read-only)
+  fullWidth: true
+  blocks:
+    - id: tiptap_mention_disabled
+      type: TiptapMentionInput
+      events:
+        onMount:
+          - id: tiptap_mention_disabled_set
+            type: SetState
+            params:
+              tiptap_mention_disabled:
+                html: '<p>Mentions render inline: <span class="tiptap-mention">@Alice</span>.</p>'
+      properties:
+        title: Read only
+        disabled: true
+
+- title: Sectioned menu
+  fullWidth: true
+  blocks:
+    - id: tiptap_mention_sectioned
+      type: TiptapMentionInput
+      properties:
+        title: Mention people or roles
+        placeholder: 'Type @ — options are grouped, each section capped at 3.'
+        mentions:
+          limit: 3
+          options:
+            - label: Alice
+              value:
+                _id: user_1
+              tag:
+                section: People
+            - label: Bob
+              value:
+                _id: user_2
+              tag:
+                section: People
+            - label: Carol
+              value:
+                _id: user_3
+              tag:
+                section: People
+            - label: Dave
+              value:
+                _id: user_4
+              tag:
+                section: People
+            - label: Finance
+              value:
+                _id: role_finance
+              tag:
+                section: Roles
+            - label: Developers
+              value:
+                _id: role_devs
+              tag:
+                section: Roles
+
+- title: Group mentions
+  fullWidth: true
+  blocks:
+    - id: tiptap_mention_groups
+      type: TiptapMentionInput
+      properties:
+        title: Mention people or groups
+        placeholder: 'Type @ — groups render as coloured chips, people as links.'
+        mentions:
+          # shown on hover of a group chip, keyed by tag.group; may load from a request
+          groupMembers:
+            finance:
+              - name: Jane Doe
+                email: jane@example.com
+              - name: John Smith
+                email: john@example.com
+            devs:
+              - name: Ada Lovelace
+                email: ada@example.com
+              - name: Alan Turing
+                email: alan@example.com
+          # people carry value.href → <a>; groups omit it → nullish → <span>
+          getHref:
+            _function:
+              __args: 0.value.href
+          options:
+            - label: Alice
+              value:
+                name: Alice
+                href: '/contacts?_id=user_1'
+              tag:
+                section: People
+            - label: Bob
+              value:
+                name: Bob
+                href: '/contacts?_id=user_2'
+              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'
+
+- title: Minimal — tables and images disabled
+  fullWidth: true
+  blocks:
+    - id: tiptap_mention_minimal
+      type: TiptapMentionInput
+      properties:
+        title: Chat-style
+        placeholder: 'Type @ to mention.'
+        image:
+          disabled: true
+        table:
+          disabled: true
+        highlight:
+          disabled: true
+        mentions:
+          options:
+            - label: Alice
+              value:
+                _id: user_1
+            - label: Bob
+              value:
+                _id: user_2

package/dist/blocks/TiptapMentionInput/meta.js

@@ -35,7 +35,7 @@
                 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.'
+                description: 'Mime-types accepted by the drag/drop and paste file handler. Defaults to common image types. Only used when uploadPolicyRequestId is set.'
             },
             autoSize: {
                 oneOf: [
@@ -211,9 +211,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.'
+                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.'
             },
             size: {
                 type: 'string',

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

@@ -1,17 +1,17 @@
-@import '../utils/style.module.css';
+@import '../utils/style.css';
 
-:global(.tiptap-mention) {
+.tiptap-mention {
   box-decoration-break: clone;
   font-weight: 600;
   color: var(--ant-color-link);
 }
 
-:global(.tiptap-mention-group) {
+.tiptap-mention-group {
   box-decoration-break: clone;
   font-weight: 600;
 }
 
-:global(.tiptap-mention-items) {
+.tiptap-mention-items {
   background: var(--ant-color-bg-container);
   border-radius: var(--ant-border-radius, 8px);
   box-shadow:
@@ -24,7 +24,7 @@
   position: relative;
 }
 
-:global(.tiptap-mention-item) {
+.tiptap-mention-item {
   background: transparent;
   border: 1px solid transparent;
   border-radius: var(--ant-border-radius, 8px);
@@ -36,12 +36,12 @@
   width: 100%;
 }
 
-:global(.tiptap-mention-item.is-selected) {
+.tiptap-mention-item.is-selected {
   border-color: var(--ant-color-primary);
   background: var(--ant-control-item-bg-hover);
 }
 
-:global(.tiptap-mention-section) {
+.tiptap-mention-section {
   color: var(--ant-color-text-secondary);
   font-size: var(--ant-font-size-sm, 12px);
   font-weight: 600;
@@ -50,66 +50,66 @@
   padding: 0.3rem 0.4rem 0.1rem;
 }
 
-:global(.tableWrapper),
-:global(.tiptap-table) {
+.tableWrapper,
+.tiptap-table {
   display: block;
   overflow-x: auto;
   max-width: 80%;
 }
 
-:global(.tableWrapper) :global(table),
-:global(.tiptap-table) :global(table) {
+.tableWrapper table,
+.tiptap-table table {
   border-collapse: collapse;
   width: 100%;
   min-width: 75px;
 }
 
-:global(.tableWrapper) :global(colgroup) :global(col),
-:global(.tiptap-table) :global(colgroup) :global(col) {
+.tableWrapper colgroup col,
+.tiptap-table colgroup 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) {
+.tableWrapper table,
+.tableWrapper th,
+.tableWrapper td,
+.tiptap-table table,
+.tiptap-table th,
+.tiptap-table 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) {
+.tableWrapper th,
+.tableWrapper td,
+.tiptap-table th,
+.tiptap-table td {
   padding: 2px;
   text-align: left;
 }
 
-:global(.tableWrapper) :global(th),
-:global(.tiptap-table) :global(th) {
+.tableWrapper th,
+.tiptap-table 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) {
+.tableWrapper tr:nth-child(even),
+.tiptap-table tr:nth-child(even) {
   background-color: var(--ant-color-fill-quaternary);
 }
 
-:global(.tableWrapper) :global(tr):hover,
-:global(.tiptap-table) :global(tr):hover {
+.tableWrapper tr:hover,
+.tiptap-table 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) {
+.tableWrapper td p,
+.tableWrapper th p,
+.tiptap-table td p,
+.tiptap-table th p {
   margin: 0;
 }
 
-:global(.tiptap-mention-group-popover) {
+.tiptap-mention-group-popover {
   background: var(--ant-color-bg-container);
   border-radius: var(--ant-border-radius, 8px);
   box-shadow:
@@ -121,28 +121,28 @@
   padding: 0.3rem 0.6rem;
 }
 
-:global(.tiptap-mention-group-popover-header) {
+.tiptap-mention-group-popover-header {
   font-weight: 600;
   padding: 0.1rem 0;
 }
 
-:global(.tiptap-mention-group-popover-item) {
+.tiptap-mention-group-popover-item {
   padding: 0.1rem 0;
 }
 
-:global(.tiptap-mention-group-popover-item) > div {
+.tiptap-mention-group-popover-item > div {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-:global(.tiptap-mention-group-popover-email) {
+.tiptap-mention-group-popover-email {
   color: var(--ant-color-text-secondary);
   font-size: var(--ant-font-size-sm, 12px);
   line-height: 1.3;
 }
 
-:global(.tiptap-mention-group-popover-empty) {
+.tiptap-mention-group-popover-empty {
   color: var(--ant-color-text-secondary);
   padding: 0.1rem 0;
 }