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

package/lib/components/Editor/Editor.js

@@ -1,246 +1,81 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import tinymce from 'tinymce/tinymce';
-import 'tinymce/icons/default';
-import 'tinymce/themes/silver';
-import 'tinymce/plugins/advlist';
-import 'tinymce/plugins/lists';
-import 'tinymce/plugins/autolink';
-import 'tinymce/models/dom';
-import { forwardRef, useEffect, useRef, useState, useLayoutEffect, useImperativeHandle, useCallback, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState, useImperativeHandle, useMemo, useCallback } from 'react';
 import { css } from 'styled-components';
-import { compile, serialize, stringify } from 'stylis';
-import { mix, stripUnit } from 'polished';
-import { createUID, FormControl, useAfterInitialEffect, useTheme, useUID, useI18n, useConsolidatedRef, useAutoResize, useConfiguration, useTestIds, withTestIds, documentIsAvailable, getActiveElement } from '@pega/cosmos-react-core';
-import { getHtmlStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';
-import { createGlobalBodyStyles, createGlobalRootStyles, globalSpacingStyles } from '@pega/cosmos-react-core/lib/styles/GlobalStyle';
+import { FormControl, Progress, HiddenText, useAfterInitialEffect, useTheme, useUID, useConsolidatedRef, useTestIds, withTestIds, useConfiguration, useI18n } from '@pega/cosmos-react-core';
 import StyledRichTextEditor from '../RichTextEditor/RichTextEditor.styles';
-import Toolbar from './Toolbar/Toolbar';
 import EditorContext from './Editor.context';
-import { getTextFormats } from './Toolbar/TextSelect';
-import ImageEditor, { imgHoverClass } from './ImageEditor';
-import { offscreenSelectionStyles, mceContentBodyStyles, StyledEditorContainer, StyledEditorRoot } from './Editor.styles';
+import { StyledEditorContainer, StyledEditorIframe, StyledEditorRoot, StyledSourceTextarea } from './Editor.styles';
 import { getEditorTestIds } from './Editor.test-ids';
+import Toolbar from './Toolbar/Toolbar';
+import WordCount from './Toolbar/WordCount';
+import { ImageEditDialog } from './ImageEditDialog';
+import ImageActionButtons from './ImageActionButtons';
+import TableCellMenu from './TableCellMenu';
 import createFileItemElement from './FileItemElement';
-const getFileFromUrl = async (url, name) => {
-    const response = await fetch(url);
-    const data = await response.blob();
-    return new File([data], name, {
-        type: data.type
+import useIframeSetup from './hooks/useIframeSetup';
+import useImageActions from './hooks/useImageActions';
+import useTableCellMenu from './hooks/useTableCellMenu';
+import { dispatchEditorClickEvent } from './hooks/useCloseOnEditorClick';
+import sanitizeHtml from './sanitize';
+// Suggestion editor has no toolbar — formatting controls are intentionally omitted
+const SUGGESTION_TOOLBAR = [];
+const SuggestionEditor = ({ defaultValue, onGetContent, onContentChange, renderEditor }) => {
+    const editorRef = useRef(null);
+    useEffect(() => {
+        onGetContent(() => editorRef.current?.getEditor()?.getHTML() ?? '');
+    }, [onGetContent]);
+    useAfterInitialEffect(() => {
+        editorRef.current?.getEditor()?.commands.setContent(defaultValue ?? '');
+    }, [defaultValue]);
+    return renderEditor({
+        ref: editorRef,
+        onInit: tiptapEditor => {
+            // Signal initial content state so submit button enables correctly
+            onContentChange(tiptapEditor.getText().trim() !== '');
+        },
+        onChange: editor => {
+            onContentChange((editor?.getText() ?? '').trim() !== '');
+        }
     });
 };
-export const getImageStyles = (theme) => {
-    return `
-    img:hover,
-    img.${imgHoverClass} {
-      box-shadow: 0 0 0 0.06125rem ${theme.base.palette['primary-background']},
-        0 0 0 0.125rem ${theme.base.palette.interactive}, 0 0 0 0.25rem rgba(0, 118, 209, 0.3);
-    }
-  `;
-};
-export const getPlaceholderStyles = (theme) => {
-    return `
-    .mce-content-body[data-mce-placeholder] {
-      position: relative;
-    }
-
-    .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
-      cursor: text;
-      color: ${mix(theme.base.transparency['transparent-3'], theme.base.palette['foreground-color'], theme.components['form-control']['background-color'])};
-      content: attr(data-mce-placeholder);
-      position: absolute;
-    }
-  `;
-};
-const Editor = forwardRef(function Editor(props, ref) {
+const Editor = forwardRef(function ForwardedEditor(props, ref) {
+    const { testId, id, label, labelHidden, info, status, required, disabled, readOnly, onChange, onKeyDown, onFocus, onBlur, onImageAdded, onResolveSuggestion, onInit, onUnload, defaultValue, placeholder, children, additionalInfo, toolbar, customActions, customComponents = [], spellcheck = true, imageInsertionMode = 'all', initOptions, onRewriteClick, progress, autoFocus, height, autoResize = true, secure = false, ...restProps } = props;
     const theme = useTheme();
-    const { components: { 'text-area': { 'min-height': textAreaMinHeight } } } = theme;
     const { styleSheetTarget } = useConfiguration();
-    const [editor, setEditor] = useState();
-    const [focused, setFocused] = useState(false);
     const t = useI18n();
-    const uid = useUID();
+    const [focused, setFocused] = useState(false);
+    const [tiptapEditor, setTiptapEditor] = useState(null);
+    const [imageEditDialog, setImageEditDialog] = useState({ isOpen: false, attributes: null });
+    const [sourceMode, setSourceMode] = useState(false);
+    const [sourceCode, setSourceCode] = useState('');
+    const editButtonRef = useRef(null);
+    const tableCellMenuButtonRef = useRef(null);
+    const editorContainerRef = useRef(null);
+    const generatedId = useUID();
+    const editorId = id ?? generatedId;
     const labelId = useUID();
+    const requiredDescriptionId = `${editorId}-required`;
     const editorRef = useConsolidatedRef(ref);
-    const tinyMceRef = useRef(null);
-    const tinyMceContainerRef = useRef(null);
-    const initialized = useRef(false);
+    const formFieldRef = useRef(null);
     const pastedImages = useRef([]);
-    const { testId, id = uid, toolbar = [], label, labelHidden, info, status, required, disabled, readOnly, onChange, onKeyDown, onFocus, onBlur, onImageAdded, onResolveSuggestion, onInit, onUnload, defaultValue, customComponents = [], height, autoResize = true, customActions, placeholder, children, spellcheck = true, additionalInfo, initOptions, ...restProps } = props;
+    const iframeRef = useRef(null);
     const testIds = useTestIds(testId, getEditorTestIds);
-    const baseHeight = {
-        min: height?.min ?? stripUnit(textAreaMinHeight) * 16,
-        max: height?.max ?? undefined
-    };
-    const getHeight = (type) => {
-        if (typeof baseHeight === 'number') {
-            return stripUnit(baseHeight);
-        }
-        if (baseHeight[type]) {
-            return stripUnit(baseHeight[type]);
-        }
-        return undefined;
-    };
-    const imagesEnabled = toolbar.includes('images');
-    const maxHeight = autoResize ? getHeight('max') : undefined;
-    const minHeight = autoResize ? getHeight('min') : undefined;
-    const [autoResizeRef, resizeEditor] = useAutoResize(maxHeight, minHeight);
-    const formFieldRef = useRef(null);
-    const value = useRef(defaultValue);
-    const customActionsLength = customActions?.length ?? 0;
-    const renderToolbar = editor && (toolbar.length > 0 || customActionsLength > 0) && !readOnly && !disabled;
-    const processPastedImgUrls = async (infoArr) => {
-        const files = await Promise.all(infoArr.map(({ id: imgId, url }) => getFileFromUrl(url, imgId)));
-        files.forEach((file, i) => {
-            onImageAdded?.(file, infoArr[i].id);
-        });
-    };
-    const pastePreprocess = (plugin, args) => {
-        const isImg = args.content.includes('<img');
-        if (!imagesEnabled && isImg) {
-            args.content = args.content.replace(/<img(.*)\/>/g, '');
-        }
-        if (imagesEnabled && isImg) {
-            const pastedHtml = new DOMParser().parseFromString(args.content, 'text/html').body;
-            const imgInfo = [];
-            pastedHtml.querySelectorAll('img').forEach(imgEl => {
-                const imgId = createUID();
-                const url = imgEl.src;
-                const name = pastedImages.current.shift()?.name || id;
-                imgInfo.push({ id: imgId, url, name });
-                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);
-            });
-            args.content = pastedHtml.innerHTML;
-            processPastedImgUrls(imgInfo);
-        }
-    };
-    useImperativeHandle(editorRef, () => ({
-        focus: () => {
-            editor?.focus();
-        },
-        getPlainText: () => {
-            return editor ? editor.getContent({ format: 'text' }) : '';
-        },
-        getRichText: () => {
-            return editor ? JSON.stringify(editor.getContent({ format: 'raw' })) : '';
-        },
-        getHtml: () => {
-            return editor ? editor.getContent({ format: 'html' }) : '';
-        },
-        clear: () => {
-            editor?.setContent('');
-        },
-        updateAttachmentAttributes: (imageId, progress, error) => {
-            if (editor) {
-                const editorEl = editor.getDoc();
-                const imageCustomEl = editorEl.querySelector(`pega-file[data-id="${imageId}"]`);
-                if (imageCustomEl) {
-                    if (error)
-                        imageCustomEl.setAttribute('data-error', error);
-                    else if (progress)
-                        imageCustomEl.setAttribute('data-progress', `${progress}`);
-                }
-            }
-        },
-        appendImage: ({ src, alt, attachmentId }, imageId) => {
-            if (editor) {
-                const editorEl = editor.getDoc();
-                const imageUploadEl = editorEl.querySelector(`pega-file[data-id="${imageId}"]`);
-                if (imageUploadEl) {
-                    const imgEl = editorEl.createElement('img');
-                    imgEl.setAttribute('src', src);
-                    imgEl.setAttribute('alt', alt);
-                    if (attachmentId) {
-                        imgEl.setAttribute('data-attachment-id', attachmentId);
-                    }
-                    imageUploadEl.replaceWith(imgEl);
-                    imageUploadEl?.remove();
-                    if (autoResize)
-                        resizeEditor();
-                }
-            }
-        },
-        insertText: (text) => {
-            let activeElement = null;
-            if (documentIsAvailable) {
-                activeElement = getActiveElement();
-            }
-            editor?.insertContent(text);
-            if (activeElement)
-                activeElement.focus();
-        },
-        setCursorLocationToStart: () => {
-            editor?.selection.setCursorLocation();
-            editor?.selection.getNode().scrollIntoView();
-        },
-        insertHtml: (html, overwrite = false) => {
-            if (overwrite && html === editor?.getContent({ format: 'html' }))
-                return;
-            let activeElement = null;
-            if (documentIsAvailable) {
-                activeElement = getActiveElement();
-            }
-            if (overwrite) {
-                editor?.setContent('');
-            }
-            if (readOnly || disabled) {
-                editor?.setContent(html);
-            }
-            else {
-                editor?.insertContent(html);
-            }
-            if (activeElement)
-                activeElement.focus();
-        },
-        getEditor: () => {
-            return editor;
-        },
-        element: formFieldRef.current || undefined
-    }), [editor]);
-    useLayoutEffect(() => {
-        if (!tinyMceRef.current || !tinyMceContainerRef.current)
-            return;
-        const styles = serialize(compile(getHtmlStyles(theme)), stringify);
-        const imageStyles = serialize(compile(getImageStyles(theme)), stringify);
-        const placeholderStyles = serialize(compile(getPlaceholderStyles(theme)), stringify);
+    // Check if images feature is enabled
+    const imagesEnabled = toolbar?.includes('images') ?? false;
+    // Check if tables feature is enabled
+    const tablesEnabled = toolbar?.includes('tables') ?? false;
+    // Check if links feature is enabled (controls autolink behavior)
+    const linksEnabled = toolbar?.includes('links') ?? false;
+    // Define built-in custom components and merge with user-provided ones
+    const customElements = useMemo(() => {
         const FileItemStyle = css `
-        /* stylelint-disable-next-line selector-type-no-unknown */
-        pega-file {
-          display: inline-block;
-          width: ${theme.base['content-width'].md};
-        }
-      `;
-        const contentStyle = `
-      ${createGlobalRootStyles(theme)}
-      ${globalSpacingStyles}
-      ${createGlobalBodyStyles(theme)}
-
-      html {
-        overflow: hidden;
-      }
-
-      body {
-        min-height: 3rem;
-        padding: ${theme.base.spacing};
-        background: unset;
+      /* stylelint-disable-next-line selector-type-no-unknown */
+      pega-file {
+        display: inline-block;
+        width: ${theme.base['content-width'].md};
       }
-
-      ${offscreenSelectionStyles}
-      ${mceContentBodyStyles}
-      ${placeholderStyles}
-      ${imageStyles}
-      ${styles}
-      ${initOptions?.contentStyle}
     `;
-        const customElements = [
+        return [
             {
                 createCustomElement: createFileItemElement,
                 name: 'pega-file',
@@ -249,285 +84,261 @@ const Editor = forwardRef(function Editor(props, ref) {
             },
             ...customComponents
         ];
-        tinymce
-            .init({
-            readonly: readOnly || disabled,
-            skin: false,
-            target: tinyMceRef.current,
-            toolbar: false,
-            min_height: 60,
-            height: 60,
-            menubar: false,
-            plugins: 'lists advlist autolink',
-            paste_block_drop: true,
-            paste_data_images: initOptions?.pasteDataImages ?? true,
-            lists_indent_on_tab: true,
-            text_patterns: initOptions?.textPatterns,
-            icons: '',
-            branding: false,
-            elementpath: false,
-            placeholder,
-            content_css: false,
-            browser_spellcheck: spellcheck,
-            relative_urls: false,
-            remove_script_host: false,
-            paste_preprocess: pastePreprocess,
-            convert_unsafe_embeds: true,
-            sandbox_iframes: true,
-            paste_as_text: initOptions?.pasteAsText,
-            init_instance_callback: initializedEditor => {
-                if (initOptions?.initInstanceCallback) {
-                    initOptions.initInstanceCallback(initializedEditor);
-                }
-                if (typeof label === 'string') {
-                    initializedEditor.getBody().setAttribute('aria-label', label);
-                }
-                const iframeWindow = (tinyMceContainerRef.current?.querySelector('iframe')).contentWindow;
-                const editorCustomElements = iframeWindow?.customElements;
-                // Manually add content style to allow setting nonce attribute
-                const contentStyleEl = document.createElement('style');
-                contentStyleEl.innerText = contentStyle;
-                contentStyleEl.nonce = window.__webpack_nonce__;
-                initializedEditor.getDoc().head.appendChild(contentStyleEl);
-                if (editorCustomElements) {
-                    customElements.forEach(({ name, createCustomElement: customElementCreator, style }) => {
-                        if (!editorCustomElements.get(name)) {
-                            editorCustomElements.define(name, customElementCreator(iframeWindow));
-                        }
-                        if (style) {
-                            const customElementStyleEl = document.createElement('style');
-                            customElementStyleEl.innerText = style;
-                            customElementStyleEl.nonce = window.__webpack_nonce__;
-                            initializedEditor.getDoc().head.appendChild(customElementStyleEl);
-                        }
-                    });
-                }
-            },
-            extended_valid_elements: `${customElements
-                .map(comp => `${comp.name}${comp.extensionAttributes ? `[${comp.extensionAttributes.join('|')}]` : ''}`)
-                .join(',')}`,
-            custom_elements: customElements.map(comp => `~${comp.name}`).join('~,'),
-            invalid_elements: 'iframe',
-            setup: editorSettings => {
-                editorSettings.on('keydown', e => {
-                    const activeElement = editorSettings?.getDoc().activeElement;
-                    if (e.key === 'Enter' && activeElement?.nodeName === 'PEGA-FILE') {
-                        e.preventDefault();
-                        const bookmark = editorSettings.selection.getBookmark();
-                        activeElement.shadowRoot?.querySelector('button')?.click();
-                        editorSettings?.selection.moveToBookmark(bookmark);
-                    }
-                    else
-                        onKeyDown?.(e);
-                });
-                getTextFormats(t).forEach((format, i) => {
-                    editorSettings.addShortcut(`meta+alt+${i}`, `${t('rte_change_text_format')} ${format.text}`, () => {
-                        editorSettings.execCommand('FormatBlock', false, format.type);
-                    });
-                });
-                editorSettings.addShortcut('meta+shift+b', t('rte_bold'), () => {
-                    editorSettings.execCommand('Bold');
-                });
-                editorSettings.addShortcut('meta+shift+i', t('rte_italic'), () => {
-                    editorSettings.execCommand('Italic');
-                });
-                editorSettings.addShortcut('meta+shift+x', t('rte_strike_through'), () => {
-                    editorSettings.execCommand('Strikethrough');
-                });
-                editorSettings.addShortcut('meta+shift+l', t('rte_toggle_unordered_list'), () => {
-                    editorSettings.execCommand('InsertUnorderedList');
-                });
-                editorSettings.addShortcut('alt+m', t('rte_indent_selection'), () => {
-                    editorSettings.execCommand('Indent');
-                });
-                editorSettings.addShortcut('alt+shift+m', t('rte_unindent_selection'), () => {
-                    editorSettings.execCommand('Outdent');
-                });
-                customActions?.forEach(action => {
-                    if (action.shortcut) {
-                        editorSettings.addShortcut(action.shortcut.pattern, action.shortcut.description, () => {
-                            action.shortcut?.command(editorSettings);
-                        });
-                    }
-                });
-            }
-        })
-            .then(tinymceEditors => {
-            setEditor(tinymceEditors[0]);
-            tinymceEditors[0]?.editorContainer?.removeAttribute('style');
-            const iframe = tinyMceContainerRef.current?.querySelector('iframe');
-            if (iframe) {
-                const globalStyles = styleSheetTarget?.querySelectorAll('[data-cosmos-global-style]') ??
-                    [];
-                const extraStyles = document.querySelectorAll('[data-cosmos-global-style]') ?? [];
-                const iframeContentHead = iframe?.contentDocument?.querySelector('head');
-                [...globalStyles, ...extraStyles].forEach(sheet => {
-                    iframeContentHead?.appendChild(sheet.cloneNode(true));
-                });
-                autoResizeRef.current = iframe;
-                if (autoResize)
-                    resizeEditor();
+    }, [customComponents, theme]);
+    // Register custom elements in the main window (needed for Tiptap to recognize them)
+    useEffect(() => {
+        customElements.forEach((component) => {
+            if (component.name &&
+                component.createCustomElement &&
+                !window.customElements.get(component.name)) {
+                const CustomElement = component.createCustomElement(window);
+                window.customElements.define(component.name, CustomElement);
             }
         });
-    }, []);
-    useEffect(() => {
-        if (editor) {
-            editor.options.set('paste_preprocess', pastePreprocess);
+    }, [customElements]);
+    // Sanitize defaultValue if secure mode is enabled
+    const sanitizedDefaultValue = useMemo(() => (secure && defaultValue ? sanitizeHtml(defaultValue) : defaultValue), [secure, defaultValue]);
+    // Mount Tiptap inside iframe using custom hook
+    const { iframeEditorRef } = useIframeSetup({
+        iframeRef,
+        theme,
+        styleSheetTarget,
+        customElements,
+        placeholder,
+        defaultValue: sanitizedDefaultValue,
+        disabled,
+        readOnly,
+        onChange,
+        onKeyDown,
+        onFocus,
+        onBlur,
+        onInit,
+        spellcheck,
+        initOptions,
+        onImageAdded,
+        imagesEnabled,
+        linksEnabled,
+        imageInsertionMode,
+        pastedImages,
+        editorId,
+        required,
+        setTiptapEditor,
+        setFocused,
+        autoResize,
+        secure,
+        onTabOut: () => {
+            // Focus first toolbar button when Tab is pressed in editor
+            const toolbarEl = editorContainerRef.current?.querySelector('[data-testid$="toolbar"]');
+            const firstButton = toolbarEl?.querySelector('button:not([disabled])');
+            if (firstButton) {
+                firstButton.focus();
+            }
+        },
+        onFocusTableMenu: () => {
+            tableCellMenuButtonRef.current?.focus();
+        },
+        onFocusPreviousCellMenu: () => {
+            // Go to previous cell and then focus its menu
+            if (tiptapEditor) {
+                tiptapEditor.commands.goToPreviousCell();
+                setTimeout(() => {
+                    tableCellMenuButtonRef.current?.focus();
+                }, 0);
+            }
         }
-    }, [imagesEnabled]);
+    });
+    // Set up unload event listener to save content before iframe is destroyed
     useEffect(() => {
-        if (!editor)
+        if (!iframeRef.current?.contentWindow || !onUnload)
             return;
-        const onChangeEvents = ['input', 'paste', 'FormatApply', 'FormatRemove', 'ExecCommand'];
-        const onEditorKeyDown = () => {
-            const activeElement = editor.selection.getNode();
-            if (activeElement.nodeName === 'PEGA-FILE') {
-                activeElement.shadowRoot?.querySelector('button[aria-label*="Cancel"]')?.focus();
-            }
-            if (autoResize)
-                resizeEditor();
-        };
-        const onEditorChange = (event) => {
-            if (event.type === 'paste' && event.clipboardData?.files) {
-                pastedImages.current = Array.from(event.clipboardData?.files);
-            }
-            if (event.type !== 'execcommand' || event.command !== 'mceFocus') {
-                onChange?.(editor);
-            }
-        };
-        const onEditorFocus = () => {
-            setFocused(true);
-            onFocus?.();
-        };
-        const onEditorBlur = () => {
-            setFocused(false);
-            onBlur?.();
-        };
-        onChangeEvents.forEach(event => {
-            editor.on(event, onEditorChange);
-        });
-        editor.on('keydown', onEditorKeyDown);
-        if (autoResize)
-            editor.on('paste', resizeEditor);
-        editor.on('focus', onEditorFocus);
-        editor.on('blur', onEditorBlur);
+        const iframeWindow = iframeRef.current.contentWindow;
+        const abortController = new AbortController();
+        iframeWindow.addEventListener('unload', () => {
+            const html = iframeEditorRef.current?.getHtml() ?? '';
+            onUnload(html);
+        }, { signal: abortController.signal });
         return () => {
-            onChangeEvents.forEach(event => {
-                editor.off(event, onEditorChange);
-            });
-            editor.off('keydown', onEditorKeyDown);
-            if (autoResize)
-                editor.off('paste', resizeEditor);
-            editor.off('focus', onEditorFocus);
-            editor.off('blur', onEditorBlur);
+            abortController.abort();
         };
-    }, [editor, onFocus, onBlur]);
+    }, [onUnload]);
+    // Dispatch event on iframe mousedown to close all open popovers/menus
     useEffect(() => {
-        if (!editor || initialized.current)
+        const iframeDoc = iframeRef.current?.contentDocument;
+        if (!iframeDoc)
             return;
-        initialized.current = true;
-        onInit?.(editor);
-    }, [editor, onInit]);
-    useAfterInitialEffect(() => {
-        editor?.mode.set(readOnly || disabled ? 'readonly' : 'design');
-    }, [readOnly, disabled]);
-    const addImage = useCallback((image, imageId) => {
-        if (editor) {
-            const imageUid = imageId ?? createUID();
-            editor.insertContent(`<br/><pega-file data-id='${imageUid}' data-progress='0' data-name='${image.name}' > </pega-file><br/>`);
-            onImageAdded?.(image, imageUid);
-        }
-    }, [editor]);
-    const ctx = useMemo(() => ({ addImage, editor: editor || {} }), [editor, addImage]);
-    useEffect(() => {
-        const onEditorDrop = (e) => {
-            e.preventDefault();
-            if (e.dataTransfer) {
-                Array.from(e.dataTransfer.files).forEach(file => {
-                    if (file.type.includes('image') && imagesEnabled) {
-                        addImage(file);
-                    }
-                });
-            }
+        const handleMouseDown = () => {
+            dispatchEditorClickEvent();
         };
-        editor?.on('drop', onEditorDrop);
-        const body = editor?.getDoc().body;
-        let resizeObserver;
-        if (autoResize) {
-            resizeObserver = new ResizeObserver(() => {
-                resizeEditor();
+        iframeDoc.addEventListener('mousedown', handleMouseDown);
+        return () => iframeDoc.removeEventListener('mousedown', handleMouseDown);
+    }, [tiptapEditor]);
+    // Set up image action buttons (edit and delete) using custom hook
+    const { hoveredImagePosition, currentImageAttrs, currentImageElement, handleDelete: handleImageDelete, setIsOverButtons } = useImageActions({
+        tiptapEditor,
+        iframeRef,
+        isDialogOpen: imageEditDialog.isOpen
+    });
+    // Set up table cell menu using custom hook (only when tables are active)
+    const tableMenuEnabled = tablesEnabled && !readOnly && !disabled;
+    const { cellPosition, setIsOverMenu: setIsOverTableMenu, addRowBelow, addRowAbove, addColumnAfter, addColumnBefore, deleteRow, deleteColumn, deleteTable } = useTableCellMenu({
+        tiptapEditor: tableMenuEnabled ? tiptapEditor : null,
+        iframeRef
+    });
+    // Handle keyboard navigation from table menu to next cell (start of content)
+    const goToNextCell = useCallback(() => {
+        if (tiptapEditor) {
+            tiptapEditor.commands.focus();
+            tiptapEditor.commands.goToNextCell();
+        }
+    }, [tiptapEditor]);
+    // Handle keyboard navigation from table menu back to current cell
+    const returnToCell = useCallback(() => {
+        tiptapEditor?.commands.focus();
+    }, [tiptapEditor]);
+    // Store the image element when opening the dialog to target the correct node on save
+    const editingImageElementRef = useRef(null);
+    // Handle edit button click from ImageActionButtons
+    const onEditButtonClick = () => {
+        if (currentImageAttrs && currentImageElement) {
+            // Store the element reference to target the correct node on save
+            editingImageElementRef.current = currentImageElement;
+            setImageEditDialog({
+                isOpen: true,
+                attributes: currentImageAttrs
             });
-            if (body) {
-                resizeObserver.observe(body);
-            }
+            // Don't call handleImageEdit() here - keep buttons visible while dialog is open
         }
-        return () => {
-            editor?.off('drop', onEditorDrop);
-            resizeObserver?.disconnect();
-        };
-    }, [editor, resizeEditor]);
-    useEffect(() => {
-        if (!editor || !autoResize)
+    };
+    // Handle image edit save
+    const handleImageEditSave = (attrs) => {
+        if (!tiptapEditor || !editingImageElementRef.current)
             return;
-        const imgEls = editor.getDoc().querySelectorAll('img');
-        imgEls.forEach(imgEl => {
-            imgEl.addEventListener('load', resizeEditor);
-            imgEl.addEventListener('error', resizeEditor);
-        });
-        return () => {
-            imgEls.forEach(imgEl => {
-                imgEl.removeEventListener('load', resizeEditor);
-                imgEl.removeEventListener('error', resizeEditor);
+        // Get exact position from DOM element to handle duplicate images correctly
+        const pos = tiptapEditor.view.posAtDOM(editingImageElementRef.current, 0);
+        if (pos >= 0) {
+            const { state } = tiptapEditor;
+            const node = state.doc.nodeAt(pos);
+            if (!node || node.type.name !== 'image')
+                return;
+            const nodeEnd = pos + node.nodeSize;
+            const tr = state.tr;
+            // Update image attributes
+            tr.setNodeMarkup(pos, undefined, {
+                src: attrs.src,
+                alt: attrs.alt,
+                ...(attrs.width && { width: attrs.width }),
+                ...(attrs.height && { height: attrs.height })
             });
-        };
-    });
-    useEffect(() => {
-        if (!editor)
-            return;
-        const body = editor.getBody();
-        const mutationObserver = new MutationObserver(() => {
-            if (body.hasAttribute('aria-placeholder')) {
-                body.removeAttribute('aria-placeholder');
+            // Handle action URL (links are marks in ProseMirror, not nodes)
+            // Always remove existing link mark first, then add new one if needed
+            tr.removeMark(pos, nodeEnd, state.schema.marks.link);
+            if (attrs.actionUrl) {
+                const linkMark = state.schema.marks.link.create({
+                    href: attrs.actionUrl,
+                    target: '_blank'
+                });
+                tr.addMark(pos, nodeEnd, linkMark);
             }
-        });
-        mutationObserver.observe(body, { attributes: true, attributeFilter: ['aria-placeholder'] });
-        return () => {
-            mutationObserver.disconnect();
-        };
-    }, [editor]);
+            tiptapEditor.view.dispatch(tr);
+        }
+        // Clear the ref after save
+        editingImageElementRef.current = null;
+    };
+    // Update editor when props change
+    useAfterInitialEffect(() => {
+        iframeEditorRef.current?.setEditable(!readOnly && !disabled);
+    }, [readOnly, disabled]);
+    // Handle autoFocus
     useEffect(() => {
-        if (!editor)
-            return;
-        const win = editor.getWin();
-        const ac = new AbortController();
-        win.addEventListener('unload', () => {
-            onUnload(editor.getContent({ format: 'html' }));
-        }, { signal: ac.signal });
-        return () => {
-            ac.abort();
-        };
-    }, [editor]);
-    return (_jsxs(EditorContext.Provider, { value: ctx, children: [_jsx(StyledEditorRoot, { testId: testIds, toolbar: renderToolbar, label: 
-                // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-                _jsx("span", { onClick: () => {
-                        editor?.focus();
-                    }, children: label }), labelFor: '', labelId: labelId, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onResolveSuggestion: onResolveSuggestion, onFocus: (e) => {
-                    if (e.target === formFieldRef.current && !disabled) {
-                        editor?.focus();
-                    }
-                }, ref: formFieldRef, tabIndex: disabled ? -1 : undefined, additionalInfo: additionalInfo, children: _jsxs(FormControl, { ...restProps, ref: editorRef, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, focused: focused, hasSuggestion: status === 'pending', tabIndex: readOnly ? 0 : undefined, children: [_jsxs(StyledEditorContainer, { onClick: () => {
-                                if (!disabled) {
-                                    editor?.focus();
-                                }
-                            }, ref: tinyMceContainerRef, children: [_jsx("textarea", { id: id, value: value.current || '', onChange: () => { }, "aria-label": `${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`, "aria-labelledby": labelId, ref: tinyMceRef }), tinyMceContainerRef.current && editor && imagesEnabled && !readOnly && !disabled && (_jsx(ImageEditor, { editor: editor, editorEl: tinyMceContainerRef.current, onChange: () => onChange?.(editor) }))] }), renderToolbar && (_jsx(Toolbar, { testId: testIds, features: toolbar, editor: editor, customActions: customActions }))] }) }), children] }));
-});
-const EditorWrapper = forwardRef(function EditorWrapper(props, ref) {
-    const [defaultValue, setDefaultValue] = useState(props.defaultValue ?? '');
-    const [key, setKey] = useState(createUID);
-    return (_createElement(Editor, { ...props, defaultValue: defaultValue, onUnload: value => {
-            setDefaultValue(value);
-            setKey(createUID());
-        }, ref: ref, key: key }));
+        if (autoFocus && tiptapEditor) {
+            tiptapEditor.commands.focus();
+        }
+    }, [autoFocus, tiptapEditor]);
+    // Expose methods via ref
+    useImperativeHandle(editorRef, () => ({
+        focus: () => iframeEditorRef.current?.focus(),
+        getPlainText: () => iframeEditorRef.current?.getPlainText() ?? '',
+        getRichText: () => iframeEditorRef.current?.getRichText() ?? '',
+        getHtml: () => iframeEditorRef.current?.getHtml() ?? '',
+        clear: () => iframeEditorRef.current?.clear(),
+        updateAttachmentAttributes: (imageId, uploadProgress, error) => {
+            if (!iframeRef.current?.contentDocument)
+                return;
+            const iframeDoc = iframeRef.current.contentDocument;
+            const imageCustomEl = iframeDoc.querySelector(`pega-file[data-id="${imageId}"]`);
+            if (imageCustomEl) {
+                if (error) {
+                    imageCustomEl.setAttribute('data-error', error);
+                }
+                else if (uploadProgress !== undefined) {
+                    imageCustomEl.setAttribute('data-progress', `${uploadProgress}`);
+                }
+            }
+        },
+        appendImage: (imageData, imageId) => {
+            if (!iframeRef.current?.contentDocument || !tiptapEditor)
+                return;
+            const iframeDoc = iframeRef.current.contentDocument;
+            const imageUploadEl = iframeDoc.querySelector(`pega-file[data-id="${imageId}"]`);
+            if (imageUploadEl) {
+                // Create img element
+                const imgEl = iframeDoc.createElement('img');
+                imgEl.setAttribute('src', imageData.src);
+                imgEl.setAttribute('alt', imageData.alt);
+                if (imageData.attachmentId) {
+                    imgEl.setAttribute('data-attachment-id', imageData.attachmentId);
+                }
+                // Replace pega-file with img in the DOM
+                imageUploadEl.replaceWith(imgEl);
+                // Also update the Tiptap document
+                const html = tiptapEditor.getHTML();
+                const updatedHtml = html.replace(new RegExp(`<pega-file[^>]*data-id=["']${imageId}["'][^>]*>.*?</pega-file>`, 'g'), imgEl.outerHTML);
+                if (updatedHtml !== html) {
+                    tiptapEditor.commands.setContent(updatedHtml, { emitUpdate: false });
+                }
+            }
+        },
+        insertText: (text) => iframeEditorRef.current?.insertText(text),
+        setCursorLocationToStart: () => iframeEditorRef.current?.setCursorLocationToStart(),
+        insertHtml: (html, overwrite) => iframeEditorRef.current?.insertHtml(html, overwrite),
+        getEditor: () => iframeEditorRef.current?.getEditor() ?? null,
+        element: formFieldRef.current || undefined
+    }), [tiptapEditor]);
+    const ctx = useMemo(() => ({
+        editor: tiptapEditor,
+        addImage: (image, imageId, alt) => {
+            if (!tiptapEditor || !image)
+                return;
+            const imgId = imageId || `img-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+            // Create pega-file element to show upload progress
+            const pegaFileHtml = `<br/><pega-file data-id='${imgId}' data-progress='0' data-name='${image.name}' data-alt='${alt || image.name}' contenteditable='false'></pega-file><br/>`;
+            // Insert the pega-file element
+            tiptapEditor.chain().focus().insertContent(pegaFileHtml).run();
+            // Trigger the onImageAdded callback so consumer can upload and call appendImage
+            onImageAdded?.(image, imgId, alt);
+        }
+    }), [tiptapEditor, onImageAdded]);
+    const renderSuggestionEditor = useCallback((suggestionProps) => (_jsx(SuggestionEditor, { defaultValue: suggestionProps.defaultValue, disabled: suggestionProps.disabled, readOnly: suggestionProps.readOnly, onGetContent: suggestionProps.onGetContent, onContentChange: suggestionProps.onContentChange, renderEditor: ({ ref: suggestionEditorRef, onInit: suggestionOnInit, onChange: suggestionOnChange }) => (_jsx(Editor, { ref: suggestionEditorRef, label: t('ai_rewrite_result_label'), labelHidden: true, toolbar: SUGGESTION_TOOLBAR, defaultValue: suggestionProps.defaultValue, disabled: suggestionProps.disabled, readOnly: suggestionProps.readOnly, height: height, onInit: suggestionOnInit, onChange: suggestionOnChange })) })), [height, t]);
+    return (_jsxs(EditorContext.Provider, { value: ctx, children: [_jsx(StyledEditorRoot, { testId: testIds, label: label, labelFor: '', labelId: labelId, labelHidden: labelHidden, id: editorId, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onResolveSuggestion: onResolveSuggestion, ref: formFieldRef, additionalInfo: additionalInfo, children: _jsxs(_Fragment, { children: [_jsx(FormControl, { ...restProps, ref: editorRef, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, focused: focused, hasSuggestion: status === 'pending', children: _jsxs(StyledEditorContainer, { ref: editorContainerRef, children: [progress ? (_jsx(Progress, { placement: 'local', message: typeof progress === 'string' ? progress : undefined })) : null, _jsx(StyledEditorIframe, { "data-testid": testIds.iframe, title: typeof label === 'string' ? label : t('rte_text_formatting_toolbar'), role: 'application', "aria-label": typeof label === 'string' ? label : t('rte_text_formatting_toolbar'), "aria-describedby": required ? requiredDescriptionId : undefined, ref: iframeRef, tabIndex: sourceMode ? -1 : 0, "$minHeight": height?.min, "$maxHeight": height?.max, "$hidden": sourceMode }), required ? (_jsx(HiddenText, { id: requiredDescriptionId, children: t('required') })) : null, sourceMode ? (_jsx(StyledSourceTextarea, { value: sourceCode, onChange: e => setSourceCode(e.target.value), spellCheck: false, "aria-label": t('rte_source_code'), "$minHeight": height?.min, "$maxHeight": height?.max })) : null, (toolbar?.length || customActions?.length) && tiptapEditor ? (_jsx(Toolbar, { testId: testIds, features: toolbar || [], editor: tiptapEditor, customActions: customActions, imageInsertionMode: imageInsertionMode, onRewriteClick: onRewriteClick, renderSuggestionEditor: renderSuggestionEditor, sourceMode: sourceMode, onSourceModeToggle: (isSourceMode) => {
+                                            if (isSourceMode) {
+                                                setSourceCode(tiptapEditor.getHTML());
+                                            }
+                                            else {
+                                                tiptapEditor.commands.setContent(sourceCode);
+                                            }
+                                            setSourceMode(isSourceMode);
+                                        } })) : null, imagesEnabled && !readOnly && !disabled ? (_jsx(ImageActionButtons, { ref: editButtonRef, position: hoveredImagePosition, containerRef: editorContainerRef, onEdit: onEditButtonClick, onDelete: handleImageDelete, onMouseEnter: () => setIsOverButtons(true), onMouseLeave: () => setIsOverButtons(false), editLabel: t('rte_edit_image', [currentImageAttrs?.alt || '']), deleteLabel: t('rte_delete_image', [currentImageAttrs?.alt || '']) })) : null, tablesEnabled && !readOnly && !disabled && !sourceMode ? (_jsx(TableCellMenu, { ref: tableCellMenuButtonRef, position: cellPosition, containerRef: editorContainerRef, onAddRowBelow: addRowBelow, onAddRowAbove: addRowAbove, onAddColumnAfter: addColumnAfter, onAddColumnBefore: addColumnBefore, onDeleteRow: deleteRow, onDeleteColumn: deleteColumn, onDeleteTable: deleteTable, onGoToNextCell: goToNextCell, onReturnToCell: returnToCell, onMouseEnter: () => setIsOverTableMenu(true), onMouseLeave: () => setIsOverTableMenu(false), labels: {
+                                            tableOptions: t('rte_table_options'),
+                                            addRowBelow: t('rte_add_row_below'),
+                                            addRowAbove: t('rte_add_row_above'),
+                                            addColumnAfter: t('rte_add_column_after'),
+                                            addColumnBefore: t('rte_add_column_before'),
+                                            deleteRow: t('rte_delete_row'),
+                                            deleteColumn: t('rte_delete_column'),
+                                            deleteTable: t('rte_delete_table')
+                                        } })) : null] }) }), toolbar?.includes('word-count') && tiptapEditor ? (_jsx(WordCount, { "data-testid": testIds.wordCount, editor: tiptapEditor })) : null] }) }), children, imageEditDialog.attributes && (_jsx(ImageEditDialog, { isOpen: imageEditDialog.isOpen, onClose: () => {
+                    setImageEditDialog({ isOpen: false, attributes: null });
+                }, onSave: handleImageEditSave, initialAttributes: imageEditDialog.attributes, target: editButtonRef.current }))] }));
 });
-export default withTestIds(EditorWrapper, getEditorTestIds);
+export default withTestIds(Editor, getEditorTestIds);
 //# sourceMappingURL=Editor.js.map