@lowdefy/blocks-tiptap 5.6.0 → 6.0.0

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;
 }

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

@@ -0,0 +1,140 @@
+# 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-mention-input
+type: Box
+
+events:
+  onMount:
+    - id: seed_content
+      type: SetState
+      params:
+        tiptap_mention_with_value:
+          html: '<p>Hi <span class="tiptap-mention">@Alice</span>.</p>'
+        tiptap_mention_disabled:
+          html: '<p>Disabled mention editor.</p>'
+        # Saved html round-trip: a mention node comes back with a STRING id
+        # (data-id) and its label in data-label.
+        tiptap_mention_saved:
+          html: '<p>Ping <span data-type="mention" class="tiptap-mention" data-id="user_9" data-label="Zed" data-mention-suggestion-char="@">@Zed</span> please.</p>'
+
+blocks:
+  - id: tiptap_mention_empty
+    type: TiptapMentionInput
+
+  - id: tiptap_mention_placeholder
+    type: TiptapMentionInput
+    properties:
+      placeholder: 'Type @ to mention...'
+
+  - id: tiptap_mention_with_value
+    type: TiptapMentionInput
+
+  - id: tiptap_mention_disabled
+    type: TiptapMentionInput
+    properties:
+      disabled: true
+
+  - id: tiptap_mention_options
+    type: TiptapMentionInput
+    properties:
+      placeholder: 'Try @A'
+      mentions:
+        options:
+          - label: Alice
+            value:
+              _id: user_1
+          - label: Bob
+            value:
+              _id: user_2
+
+  - id: tiptap_mention_saved
+    type: TiptapMentionInput
+
+  # Options whose value has no scalar identity (the shape an app passes when
+  # the whole contact record is the value) — data-id must be omitted, never
+  # "[object Object]".
+  - id: tiptap_mention_object_values
+    type: TiptapMentionInput
+    properties:
+      placeholder: 'Try @C'
+      mentions:
+        options:
+          - label: Carol
+            value:
+              contact_id: c_1
+              name: Carol
+              email: carol@example.com
+
+  - id: tiptap_mention_groups
+    type: TiptapMentionInput
+    properties:
+      title: Group mentions playground
+      placeholder: 'Type @ — People + Roles sections, group chips, hover members'
+      mentions:
+        limit: 3
+        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: Amir
+            value:
+              name: Amir
+              href: '/contacts?_id=user_2'
+            tag:
+              section: People
+          - label: Anna
+            value:
+              name: Anna
+              href: '/contacts?_id=user_3'
+            tag:
+              section: People
+          - label: Aaron
+            value:
+              name: Aaron
+              href: '/contacts?_id=user_4'
+            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'