@pega/cosmos-react-rte 9.0.0-build.9.9 → 9.0.0

package/lib/components/Editor/IframeTiptapEditor.js

@@ -0,0 +1,695 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEditor, EditorContent } from '@tiptap/react';
+import { Extension, Node } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import Blockquote from '@tiptap/extension-blockquote';
+import Paragraph from '@tiptap/extension-paragraph';
+import Underline from '@tiptap/extension-underline';
+import Subscript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import { TextStyle } from '@tiptap/extension-text-style';
+import { Color } from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import FontFamily from '@tiptap/extension-font-family';
+import TextAlign from '@tiptap/extension-text-align';
+import { Table } from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import OfficePaste from '@intevation/tiptap-extension-office-paste';
+import { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { createUID } from '@pega/cosmos-react-core';
+import { TextIndent } from './extensions/TextIndent';
+import { PreserveDiv } from './extensions/PreserveDiv';
+import { FontSize } from './extensions/FontSize';
+import TableCellSelection from './extensions/TableCellSelection';
+import sanitizeHtml from './sanitize';
+// Extend Blockquote to preserve inline styles (e.g., border-left from email chains)
+const BlockquoteWithStyle = Blockquote.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            style: {
+                default: null,
+                parseHTML: element => element.getAttribute('style'),
+                renderHTML: attributes => {
+                    if (!attributes.style)
+                        return {};
+                    return { style: attributes.style };
+                }
+            }
+        };
+    }
+});
+// Extend Image to preserve custom attribute data-attachment-id in img tag
+const ImageWithDataAttachmentId = Image.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            'data-attachment-id': {
+                default: null,
+                parseHTML: element => element.getAttribute('data-attachment-id'),
+                renderHTML: attributes => {
+                    if (!attributes['data-attachment-id'])
+                        return {};
+                    return { 'data-attachment-id': attributes['data-attachment-id'] };
+                }
+            }
+        };
+    }
+});
+// Extend Paragraph to preserve class and style attributes (e.g., pega-email-reply-header)
+const ParagraphWithStyle = Paragraph.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null,
+                parseHTML: element => element.getAttribute('class'),
+                renderHTML: attributes => {
+                    if (!attributes.class)
+                        return {};
+                    return { class: attributes.class };
+                }
+            },
+            style: {
+                default: null,
+                parseHTML: element => element.getAttribute('style'),
+                renderHTML: attributes => {
+                    if (!attributes.style)
+                        return {};
+                    return { style: attributes.style };
+                }
+            }
+        };
+    }
+});
+// Helper to check if cursor is at end of table cell content
+const isAtEndOfCell = (editor) => {
+    const { state } = editor;
+    const { selection } = state;
+    if (!selection.empty)
+        return false;
+    const isInTable = editor.isActive('tableCell') || editor.isActive('tableHeader');
+    if (!isInTable)
+        return false;
+    const $pos = selection.$from;
+    // Check if there's any content after the cursor within the cell
+    // by checking if we're at the end of the parent (paragraph) and it's the last child of the cell
+    const parentEnd = $pos.end($pos.depth);
+    const atEndOfParagraph = $pos.pos === parentEnd;
+    if (!atEndOfParagraph)
+        return false;
+    // Check if this paragraph is the last block in the cell
+    let cellDepth = $pos.depth;
+    while (cellDepth > 0) {
+        const node = $pos.node(cellDepth);
+        if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
+            break;
+        }
+        cellDepth -= 1;
+    }
+    if (cellDepth === 0)
+        return false;
+    const cellNode = $pos.node(cellDepth);
+    const indexInCell = $pos.index(cellDepth);
+    const isLastBlock = indexInCell === cellNode.childCount - 1;
+    return atEndOfParagraph && isLastBlock;
+};
+// Helper to check if cursor is at start of table cell content
+const isAtStartOfCell = (editor) => {
+    const { state } = editor;
+    const { selection } = state;
+    if (!selection.empty)
+        return false;
+    const isInTable = editor.isActive('tableCell') || editor.isActive('tableHeader');
+    if (!isInTable)
+        return false;
+    const $pos = selection.$from;
+    // Check if we're at the start of the parent (paragraph)
+    const parentStart = $pos.start($pos.depth);
+    const atStartOfParagraph = $pos.pos === parentStart;
+    if (!atStartOfParagraph)
+        return false;
+    // Check if this paragraph is the first block in the cell
+    let cellDepth = $pos.depth;
+    while (cellDepth > 0) {
+        const node = $pos.node(cellDepth);
+        if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
+            break;
+        }
+        cellDepth -= 1;
+    }
+    if (cellDepth === 0)
+        return false;
+    const indexInCell = $pos.index(cellDepth);
+    const isFirstBlock = indexInCell === 0;
+    return atStartOfParagraph && isFirstBlock;
+};
+// Custom keyboard shortcuts that match the toolbar tooltips
+const CustomKeyboardShortcuts = Extension.create({
+    name: 'customKeyboardShortcuts',
+    addOptions() {
+        return {
+            onFocusTableMenu: undefined,
+            onFocusPreviousCellMenu: undefined
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            'Mod-Shift-x': () => this.editor.commands.toggleStrike(),
+            'Mod-Shift-l': () => this.editor.commands.toggleBulletList(),
+            // Override Tab in tables to prevent auto-adding rows
+            Tab: () => {
+                if (this.editor.isActive('table')) {
+                    // Just navigate, don't add rows - goToNextCell returns false at last cell
+                    this.editor.commands.goToNextCell();
+                    return true; // Consume the event either way
+                }
+                return false;
+            },
+            'Shift-Tab': () => {
+                if (this.editor.isActive('table')) {
+                    this.editor.commands.goToPreviousCell();
+                    return true;
+                }
+                return false;
+            },
+            ArrowRight: () => {
+                if (isAtEndOfCell(this.editor) && this.options.onFocusTableMenu) {
+                    this.options.onFocusTableMenu();
+                    return true;
+                }
+                return false;
+            },
+            ArrowLeft: () => {
+                if (isAtStartOfCell(this.editor) && this.options.onFocusPreviousCellMenu) {
+                    this.options.onFocusPreviousCellMenu();
+                    return true;
+                }
+                return false;
+            }
+        };
+    }
+});
+// Extension to delete empty table on repeated delete/backspace in empty cell
+const TableDeleteOnEmpty = Extension.create({
+    name: 'tableDeleteOnEmpty',
+    addStorage() {
+        return {
+            deleteCount: 0,
+            lastDeleteTime: 0
+        };
+    },
+    addKeyboardShortcuts() {
+        const handleDelete = () => {
+            const { editor } = this;
+            const { state } = editor;
+            const { selection } = state;
+            // Check if we're in a table cell
+            const isInTable = editor.isActive('tableCell') || editor.isActive('tableHeader');
+            if (!isInTable) {
+                this.storage.deleteCount = 0;
+                return false;
+            }
+            // Find the current cell node
+            const $pos = selection.$from;
+            let cellDepth = $pos.depth;
+            while (cellDepth > 0) {
+                const node = $pos.node(cellDepth);
+                if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
+                    break;
+                }
+                cellDepth -= 1;
+            }
+            if (cellDepth === 0) {
+                this.storage.deleteCount = 0;
+                return false;
+            }
+            const cellNode = $pos.node(cellDepth);
+            const cellContent = cellNode.textContent.trim();
+            // If cell has content, reset counter and let default behavior handle it
+            if (cellContent.length > 0) {
+                this.storage.deleteCount = 0;
+                return false;
+            }
+            // Find the table node and check if entire table is empty
+            let tableDepth = cellDepth;
+            while (tableDepth > 0) {
+                const node = $pos.node(tableDepth);
+                if (node.type.name === 'table') {
+                    break;
+                }
+                tableDepth -= 1;
+            }
+            if (tableDepth === 0) {
+                this.storage.deleteCount = 0;
+                return false;
+            }
+            const tableNode = $pos.node(tableDepth);
+            const tableContent = tableNode.textContent.trim();
+            // Only allow table deletion if entire table is empty
+            if (tableContent.length > 0) {
+                this.storage.deleteCount = 0;
+                return false;
+            }
+            // Table is empty - increment delete counter
+            const now = Date.now();
+            // Reset counter if more than 1 second since last delete
+            if (now - this.storage.lastDeleteTime > 1000) {
+                this.storage.deleteCount = 0;
+            }
+            this.storage.deleteCount += 1;
+            this.storage.lastDeleteTime = now;
+            // After 3 deletes in empty table, delete the table
+            if (this.storage.deleteCount >= 3) {
+                this.storage.deleteCount = 0;
+                editor.chain().focus().deleteTable().run();
+                return true;
+            }
+            return false;
+        };
+        return {
+            Backspace: handleDelete,
+            Delete: handleDelete
+        };
+    }
+});
+const getFileFromUrl = async (url, name) => {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            return null;
+        }
+        const data = await response.blob();
+        return new File([data], name, {
+            type: data.type
+        });
+    }
+    catch {
+        return null;
+    }
+};
+// Component that renders inside the iframe
+export const IframeTiptapEditor = ({ placeholder, defaultValue, disabled, readOnly, onChange, onKeyDown, onFocus, onBlur, onInit, editorRef, spellcheck = true, customElements = [], initOptions, onImageAdded, imagesEnabled = false, linksEnabled = true, imageInsertionMode = 'all', pastedImagesRef, editorId = '', secure = false, onFocusTableMenu, onFocusPreviousCellMenu }) => {
+    // Keep callbacks in refs so the extension always has access to the latest callback
+    const onFocusTableMenuRef = useRef(onFocusTableMenu);
+    onFocusTableMenuRef.current = onFocusTableMenu;
+    const onFocusPreviousCellMenuRef = useRef(onFocusPreviousCellMenu);
+    onFocusPreviousCellMenuRef.current = onFocusPreviousCellMenu;
+    // Process pasted image URLs and convert to File objects
+    const processPastedImgUrls = async (infoArr) => {
+        const files = await Promise.all(infoArr.map(({ id: imgId, url }) => getFileFromUrl(url, imgId)));
+        files.forEach((file, i) => {
+            if (file) {
+                onImageAdded?.(file, infoArr[i].id);
+            }
+        });
+    };
+    // Generate Tiptap extensions for custom components
+    const customComponentExtensions = useMemo(() => {
+        return customElements.map((component) => {
+            return Node.create({
+                name: component.name,
+                group: 'inline',
+                inline: true,
+                atom: true,
+                content: 'text*', // Allow text content inside
+                addAttributes() {
+                    const attrs = {};
+                    if (component.extensionAttributes) {
+                        component.extensionAttributes.forEach((attr) => {
+                            attrs[attr] = { default: null };
+                        });
+                    }
+                    // Add common attributes for pega-file
+                    attrs['data-id'] = { default: null };
+                    attrs['data-name'] = { default: null };
+                    attrs['data-url'] = { default: null };
+                    attrs['data-progress'] = { default: null };
+                    attrs['data-error'] = { default: null };
+                    attrs['data-alt'] = { default: null };
+                    // Add attributes for pega-reference
+                    attrs['data-rule-id'] = { default: null };
+                    attrs['data-rule-type'] = { default: null };
+                    attrs['data-rule-namespace'] = { default: null };
+                    attrs.role = { default: null };
+                    return attrs;
+                },
+                parseHTML() {
+                    return [
+                        {
+                            tag: component.name,
+                            getAttrs: (node) => {
+                                if (typeof node === 'string')
+                                    return null;
+                                const attrs = {};
+                                // Get all data attributes and role
+                                Array.from(node.attributes).forEach(attr => {
+                                    if (attr.name.startsWith('data-') ||
+                                        attr.name === 'role' ||
+                                        component.extensionAttributes?.includes(attr.name)) {
+                                        attrs[attr.name] = attr.value;
+                                    }
+                                });
+                                return attrs;
+                            }
+                        }
+                    ];
+                },
+                renderHTML({ HTMLAttributes, node }) {
+                    // Get text content from the node
+                    const textContent = node.textContent || '';
+                    return [component.name, HTMLAttributes, textContent];
+                }
+            });
+        });
+    }, [customElements]);
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                // Exclude link from StarterKit since we're configuring it separately
+                link: false,
+                // Exclude blockquote so we can use our extended version with style preservation
+                blockquote: false,
+                // Exclude paragraph so we can use our extended version with class/style preservation
+                paragraph: false,
+                // Disable text patterns if specified in initOptions
+                ...(initOptions?.textPatterns === false && {
+                    typography: false
+                })
+            }),
+            BlockquoteWithStyle,
+            ParagraphWithStyle,
+            Placeholder.configure({
+                placeholder: placeholder ?? ''
+            }),
+            TextIndent.configure({
+                types: ['paragraph', 'heading']
+            }),
+            // Link extension is always loaded to preserve existing links in content
+            // When linksEnabled is false, autolink is disabled to prevent auto-converting URLs
+            Link.configure({
+                openOnClick: false,
+                autolink: linksEnabled,
+                linkOnPaste: linksEnabled,
+                HTMLAttributes: {
+                    target: '_blank',
+                    rel: 'noopener noreferrer'
+                }
+            }),
+            // Image extension is always loaded to render existing images in content
+            // The imagesEnabled flag controls whether NEW images can be inserted (via paste/drop handlers)
+            ImageWithDataAttachmentId.configure({
+                inline: true,
+                allowBase64: true
+            }),
+            // Text formatting extensions
+            Underline,
+            Subscript,
+            Superscript,
+            TextStyle,
+            Color,
+            Highlight.configure({
+                multicolor: true
+            }),
+            FontFamily,
+            FontSize,
+            // Alignment
+            TextAlign.configure({
+                types: ['heading', 'paragraph']
+            }),
+            // Table extensions
+            Table.configure({
+                resizable: true
+            }),
+            TableRow,
+            TableHeader,
+            TableCell,
+            TableDeleteOnEmpty,
+            TableCellSelection,
+            CustomKeyboardShortcuts.configure({
+                onFocusTableMenu: () => onFocusTableMenuRef.current?.(),
+                onFocusPreviousCellMenu: () => onFocusPreviousCellMenuRef.current?.()
+            }),
+            PreserveDiv,
+            OfficePaste,
+            ...customComponentExtensions
+        ],
+        content: defaultValue,
+        editable: !disabled && !readOnly,
+        editorProps: {
+            attributes: {
+                class: 'ProseMirror',
+                spellcheck: spellcheck ? 'true' : 'false'
+            },
+            handleDOMEvents: {
+                keydown: (_view, event) => {
+                    onKeyDown?.(event);
+                    return false; // Allow other handlers to process
+                },
+                paste: (_view, event) => {
+                    // Block pasted image files when images are disabled
+                    if (!imagesEnabled && event.clipboardData?.files) {
+                        const hasImageFile = Array.from(event.clipboardData.files).some(file => file.type.startsWith('image/'));
+                        if (hasImageFile) {
+                            event.preventDefault();
+                            return true;
+                        }
+                    }
+                    // Track pasted files for later processing
+                    if (event.clipboardData?.files &&
+                        event.clipboardData.files.length > 0 &&
+                        pastedImagesRef) {
+                        pastedImagesRef.current = Array.from(event.clipboardData.files);
+                    }
+                    return false; // Let handlePaste process
+                },
+                drop: (_view, event) => {
+                    // Block dropped image files when images are disabled
+                    if (!imagesEnabled && event.dataTransfer?.files) {
+                        const hasImageFile = Array.from(event.dataTransfer.files).some(file => file.type.startsWith('image/'));
+                        if (hasImageFile) {
+                            event.preventDefault();
+                            return true;
+                        }
+                    }
+                    return false;
+                }
+            },
+            // Handle paste behavior based on initOptions
+            handlePaste: (view, event) => {
+                // If pasteAsText is enabled, convert to plain text
+                if (initOptions?.pasteAsText) {
+                    event.preventDefault();
+                    const text = event.clipboardData?.getData('text/plain');
+                    if (text) {
+                        view.dispatch(view.state.tr.insertText(text));
+                    }
+                    return true;
+                }
+                let html = event.clipboardData?.getData('text/html');
+                const text = event.clipboardData?.getData('text/plain');
+                const shouldPreferTextPaste = Boolean(text?.trim()) || Boolean(html?.trim());
+                // If secure mode is enabled, sanitize pasted HTML content first
+                if (secure && html) {
+                    html = sanitizeHtml(html);
+                }
+                const isImg = html && html.includes('<img');
+                const hasLinks = html && /<a\s/i.test(html);
+                // If links are disabled, handle paste to prevent link creation
+                if (!linksEnabled) {
+                    // Check if pasting HTML with <a> tags - strip them
+                    if (hasLinks && html) {
+                        event.preventDefault();
+                        // Replace <a> tags with their text content
+                        const strippedHtml = html.replace(/<a\s[^>]*>([\s\S]*?)<\/a>/gi, '$1');
+                        const currentEditor = editorRef.current?.getEditor();
+                        if (currentEditor) {
+                            currentEditor.chain().focus().insertContent(strippedHtml).run();
+                        }
+                        return true;
+                    }
+                    // Check if pasting plain text that looks like a URL - insert as plain text
+                    const urlPattern = /^(https?:\/\/|www\.)\S+$/i;
+                    if (text && urlPattern.test(text.trim())) {
+                        event.preventDefault();
+                        view.dispatch(view.state.tr.insertText(text));
+                        return true;
+                    }
+                }
+                // If images are disabled or mode is url-only, strip images from pasted content
+                if ((!imagesEnabled || imageInsertionMode === 'url') && isImg && html) {
+                    event.preventDefault();
+                    const cleanedHtml = html.replace(/<img[^>]*\/?>/g, '');
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = cleanedHtml;
+                    view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.paragraph.create(null, view.state.schema.text(tempDiv.textContent || ''))));
+                    return true;
+                }
+                // If pasteDataImages is disabled, strip images from pasted content
+                if (initOptions?.pasteDataImages === false && isImg && html) {
+                    event.preventDefault();
+                    const cleanedHtml = html.replace(/<img[^>]*>/g, '');
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = cleanedHtml;
+                    view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.paragraph.create(null, view.state.schema.text(tempDiv.textContent || ''))));
+                    return true;
+                }
+                // Handle raw image file pasting (e.g., screenshot, file from disk)
+                // Prioritize raw files over HTML with blob URLs since blob URLs may fail to fetch
+                const files = event.clipboardData?.files;
+                if (imagesEnabled &&
+                    imageInsertionMode !== 'url' &&
+                    !shouldPreferTextPaste &&
+                    files &&
+                    files.length > 0) {
+                    const imageFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
+                    if (imageFiles.length > 0) {
+                        event.preventDefault();
+                        imageFiles.forEach(file => {
+                            const imgId = createUID();
+                            // Create pega-file element to show upload progress
+                            const pegaFileHtml = `<br/><pega-file data-id='${imgId}' data-progress='0' data-name='${file.name}' data-alt='${file.name}' contenteditable='false'></pega-file><br/>`;
+                            // Insert the pega-file element
+                            const currentEditor = editorRef.current?.getEditor();
+                            if (currentEditor) {
+                                currentEditor.chain().focus().insertContent(pegaFileHtml).run();
+                            }
+                            // Trigger the onImageAdded callback so consumer can upload and call appendImage
+                            onImageAdded?.(file, imgId, file.name);
+                        });
+                        return true;
+                    }
+                }
+                // Process pasted images from HTML (fallback when no raw files available)
+                if (imagesEnabled && isImg && html) {
+                    event.preventDefault();
+                    const pastedHtml = new DOMParser().parseFromString(html, 'text/html').body;
+                    const imgInfo = [];
+                    pastedHtml.querySelectorAll('img').forEach(imgEl => {
+                        const imgId = createUID();
+                        const url = imgEl.src;
+                        const name = pastedImagesRef?.current.shift()?.name || editorId || 'pasted-image';
+                        imgInfo.push({ id: imgId, url, name });
+                        // Create pega-file element to show upload progress
+                        const uploadEl = document.createElement('pega-file');
+                        uploadEl.setAttribute('data-id', imgId);
+                        uploadEl.setAttribute('data-name', name);
+                        uploadEl.setAttribute('data-url', url);
+                        uploadEl.setAttribute('data-progress', '0');
+                        uploadEl.setAttribute('contenteditable', 'false');
+                        const uploadElString = `<br/>${uploadEl.outerHTML}<br/>`;
+                        const uploadElHtml = new DOMParser().parseFromString(uploadElString, 'text/html').body;
+                        imgEl.replaceWith(uploadElHtml);
+                    });
+                    // Insert the modified HTML
+                    const modifiedHtml = pastedHtml.innerHTML;
+                    view.dispatch(view.state.tr.insertText(''));
+                    // Use setTimeout to ensure the DOM is ready
+                    setTimeout(() => {
+                        const currentEditor = editorRef.current?.getEditor();
+                        if (currentEditor) {
+                            currentEditor.chain().focus().insertContent(modifiedHtml).run();
+                        }
+                    }, 0);
+                    // Process the pasted image URLs
+                    processPastedImgUrls(imgInfo).catch(() => {
+                        // Errors are handled inside processPastedImgUrls
+                    });
+                    return true;
+                }
+                return false;
+            },
+            // Handle drag-and-drop of image files from the system
+            handleDrop: (view, event, _slice, moved) => {
+                // Only handle drops from outside the editor (not internal moves)
+                if (moved) {
+                    return false;
+                }
+                const files = event.dataTransfer?.files;
+                if (!imagesEnabled || imageInsertionMode === 'url' || !files || files.length === 0) {
+                    return false;
+                }
+                const imageFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
+                if (imageFiles.length === 0) {
+                    return false;
+                }
+                event.preventDefault();
+                const dropEditor = editorRef.current?.getEditor();
+                if (!dropEditor) {
+                    return false;
+                }
+                // Set cursor position to where the drop occurred
+                const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY });
+                if (coordinates) {
+                    dropEditor.commands.setTextSelection(coordinates.pos);
+                }
+                imageFiles.forEach(file => {
+                    const imgId = createUID();
+                    // Create pega-file element to show upload progress
+                    const pegaFileHtml = `<br/><pega-file data-id='${imgId}' data-progress='0' data-name='${file.name}' data-alt='${file.name}' contenteditable='false'></pega-file><br/>`;
+                    // Insert the pega-file element
+                    dropEditor.chain().focus().insertContent(pegaFileHtml).run();
+                    // Trigger the onImageAdded callback so consumer can upload and call appendImage
+                    onImageAdded?.(file, imgId, file.name);
+                });
+                return true;
+            }
+        },
+        onUpdate: ({ editor: currentEditor }) => {
+            // Clear stored link mark if cursor is not inside actual linked text
+            // This prevents link styling from persisting after deleting linked text
+            const { selection, storedMarks } = currentEditor.state;
+            const linkMark = currentEditor.schema.marks.link;
+            if (selection.empty && storedMarks?.some(mark => mark.type === linkMark)) {
+                const hasLinkInDoc = selection.$from.marks().some(mark => mark.type === linkMark);
+                if (!hasLinkInDoc) {
+                    currentEditor.commands.unsetMark('link');
+                    // Return early - onChange will fire on the subsequent update with cleaned state
+                    return;
+                }
+            }
+            onChange?.(currentEditor);
+        },
+        onFocus: () => {
+            onFocus?.();
+        },
+        onBlur: () => {
+            onBlur?.();
+        }
+    });
+    useEffect(() => {
+        if (editor && onInit) {
+            // Call initInstanceCallback if provided
+            if (initOptions?.initInstanceCallback) {
+                initOptions.initInstanceCallback(editor);
+            }
+            onInit(editor);
+        }
+    }, [editor, onInit, initOptions]);
+    useImperativeHandle(editorRef, () => ({
+        focus: () => editor?.chain().focus().run(),
+        getPlainText: () => editor?.getText() ?? '',
+        getRichText: () => (editor ? JSON.stringify(editor.getJSON()) : ''),
+        getHtml: () => editor?.getHTML() ?? '',
+        clear: () => editor?.chain().clearContent().run(),
+        insertText: (text) => editor?.chain().insertContent(text).run(),
+        setCursorLocationToStart: () => editor?.chain().focus('start').run(),
+        insertHtml: (html, overwrite = false) => {
+            if (overwrite) {
+                editor?.chain().setContent(html).run();
+            }
+            else {
+                editor?.chain().insertContent(html).run();
+            }
+        },
+        getEditor: () => editor,
+        setEditable: (editable) => editor?.setEditable(editable)
+    }), [editor]);
+    return _jsx(EditorContent, { editor: editor });
+};
+//# sourceMappingURL=IframeTiptapEditor.js.map