@lowdefy/blocks-tiptap 5.6.0 → 6.1.0

package/dist/blocks/TiptapInput/TiptapInput.js

@@ -15,114 +15,70 @@
 */ 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 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 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 extensions = buildExtensions({
-        properties,
-        insertImage,
-        uploadEnabled
-    });
+    const uploadEnabled = !type.isNone(uploadPolicyRequestId);
     const heightStyle = computeHeightStyle({
         rows: properties.rows,
         autoSize: properties.autoSize
     });
-    const editor = useEditor({
-        extensions,
-        content: value?.html || '',
-        editable: ()=>!disabled,
-        onUpdate ({ editor }) {
-            // User-driven change. Emit the full derived value to Lowdefy.
-            emit(editor);
-            methods.triggerEvent({
-                name: 'onChange'
-            });
-        }
+    const editor = useTiptapEditor({
+        disabled,
+        emit,
+        insertImage,
+        methods,
+        properties,
+        uploadEnabled,
+        value
     });
-    // 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
                     ]
                 }
             ]
         });
-    }, []);
-    // Register methods as soon as the editor is available.
-    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) 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);
+        if (!type.isNone(downloadPolicyRequestId)) {
+            methods.registerEvent({
+                name: '__getDownloadPolicy',
+                actions: [
+                    {
+                        id: '__getDownloadPolicy',
+                        type: 'Request',
+                        params: [
+                            downloadPolicyRequestId
+                        ]
+                    }
+                ]
+            });
         }
-    }, [
-        editor,
-        properties.placeholder
-    ]);
+    }, []);
     const wrapperClass = [
         'tiptap-wrapper',
         properties.bordered === false ? 'tiptap-wrapper-borderless' : '',

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