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

package/lib/components/Editor/hooks/useIframeSetup.js

@@ -0,0 +1,284 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { compile, serialize, stringify } from 'stylis';
+import { useTheme } 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 { IframeTiptapEditor } from '../IframeTiptapEditor';
+import { getIframeContentStyles } from '../iframeContentStyles';
+export default function useIframeSetup({ iframeRef, theme, styleSheetTarget, customElements, placeholder, defaultValue, disabled, readOnly, onChange, onKeyDown, onFocus, onBlur, onInit, spellcheck, initOptions, onImageAdded, imagesEnabled, linksEnabled, imageInsertionMode, pastedImages, editorId, required, setTiptapEditor, setFocused, autoResize = true, onTabOut, onFocusTableMenu, onFocusPreviousCellMenu, secure = false }) {
+    const { components: { 'text-area': { 'min-height': textAreaMinHeight } } } = theme;
+    const iframeRootRef = useRef(null);
+    const iframeEditorRef = useRef(null);
+    const resizeObserverRef = useRef(null);
+    const isInitializedRef = useRef(false);
+    const savedContentRef = useRef(null);
+    const [reinitializeCounter, setReinitializeCounter] = useState(0);
+    // Refs to keep callbacks fresh without re-initializing the iframe
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onImageAddedRef = useRef(onImageAdded);
+    onImageAddedRef.current = onImageAdded;
+    const onTabOutRef = useRef(onTabOut);
+    onTabOutRef.current = onTabOut;
+    const requiredRef = useRef(required);
+    requiredRef.current = required;
+    const onFocusTableMenuRef = useRef(onFocusTableMenu);
+    onFocusTableMenuRef.current = onFocusTableMenu;
+    const onFocusPreviousCellMenuRef = useRef(onFocusPreviousCellMenu);
+    onFocusPreviousCellMenuRef.current = onFocusPreviousCellMenu;
+    // Listen for iframe load events (fires when iframe reloads due to DOM move)
+    useEffect(() => {
+        if (!iframeRef.current)
+            return;
+        const iframe = iframeRef.current;
+        const handleLoad = () => {
+            // Check if content was lost
+            const proseMirror = iframe.contentDocument?.querySelector('.ProseMirror');
+            if (!proseMirror && isInitializedRef.current) {
+                // savedContentRef is updated on every change, so it has the latest content
+                isInitializedRef.current = false;
+                setReinitializeCounter(c => c + 1);
+            }
+        };
+        iframe.addEventListener('load', handleLoad);
+        return () => {
+            iframe.removeEventListener('load', handleLoad);
+        };
+    }, [iframeRef]);
+    // Mount Tiptap inside iframe
+    useLayoutEffect(() => {
+        if (!iframeRef.current)
+            return;
+        // Check if already initialized and content is still valid
+        if (isInitializedRef.current) {
+            const proseMirror = iframeRef.current.contentDocument?.querySelector('.ProseMirror');
+            if (proseMirror) {
+                // Already initialized and content is valid, skip
+                return;
+            }
+            // Content was lost (iframe reloaded), need to reinitialize
+            if (iframeRootRef.current) {
+                try {
+                    iframeRootRef.current.unmount();
+                }
+                catch (e) {
+                    // Ignore unmount errors
+                }
+                iframeRootRef.current = null;
+            }
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+                resizeObserverRef.current = null;
+            }
+        }
+        const iframe = iframeRef.current;
+        const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+        if (!iframeDoc)
+            return;
+        // Generate styles
+        const htmlStyles = serialize(compile(getHtmlStyles(theme)), stringify);
+        const contentStyle = `
+      ${createGlobalRootStyles(theme)}
+      ${globalSpacingStyles}
+      ${createGlobalBodyStyles(theme)}
+      ${htmlStyles}
+      ${getIframeContentStyles(theme)}
+      ${initOptions?.contentStyle ?? ''}
+    `;
+        // Create basic HTML structure in iframe
+        iframeDoc.open();
+        iframeDoc.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <style${window.__webpack_nonce__ ? ` nonce="${window.__webpack_nonce__}"` : ''}>
+            ${contentStyle}
+          </style>
+        </head>
+        <body>
+          <div id="tiptap-root"></div>
+        </body>
+      </html>
+    `);
+        iframeDoc.close();
+        // Copy global styles into the iframe
+        const globalStyles = styleSheetTarget?.querySelectorAll('[data-cosmos-global-style]') ?? [];
+        const extraStyles = document.querySelectorAll('[data-cosmos-global-style]') ?? [];
+        const iframeHead = iframeDoc.querySelector('head');
+        [...globalStyles, ...extraStyles].forEach(sheet => {
+            iframeHead?.appendChild(sheet.cloneNode(true));
+        });
+        // Register custom components in iframe
+        if (customElements && customElements.length > 0 && iframe.contentWindow) {
+            const iframeWindow = iframe.contentWindow;
+            customElements.forEach((component) => {
+                if (component.name &&
+                    component.createCustomElement &&
+                    !iframeWindow.customElements.get(component.name)) {
+                    const CustomElement = component.createCustomElement(iframeWindow);
+                    iframeWindow.customElements.define(component.name, CustomElement);
+                }
+                // Inject custom component styles into iframe if provided
+                if (component.style && iframeHead && component.name) {
+                    const styleId = `custom-component-${component.name}`;
+                    if (!iframeDoc.getElementById(styleId)) {
+                        const styleElement = iframeDoc.createElement('style');
+                        styleElement.id = styleId;
+                        styleElement.textContent = component.style;
+                        if (window.__webpack_nonce__) {
+                            styleElement.nonce = window.__webpack_nonce__;
+                        }
+                        iframeHead.appendChild(styleElement);
+                    }
+                }
+            });
+        }
+        // Mount React component inside iframe
+        const rootElement = iframeDoc.getElementById('tiptap-root');
+        if (rootElement && !iframeRootRef.current) {
+            // Use saved content if available (from DOM move), otherwise use defaultValue
+            const initialContent = savedContentRef.current ?? defaultValue;
+            iframeRootRef.current = createRoot(rootElement);
+            iframeRootRef.current.render(_jsx(IframeTiptapEditor, { placeholder: placeholder, defaultValue: initialContent, disabled: disabled, readOnly: readOnly, onChange: editor => {
+                    // Save content on every change so it can be restored if iframe reloads
+                    savedContentRef.current = editor.getHTML();
+                    onChangeRef.current?.(editor);
+                }, onKeyDown: onKeyDown, onFocus: () => {
+                    setFocused(true);
+                    onFocus?.();
+                }, onBlur: () => {
+                    setFocused(false);
+                    onBlur?.();
+                }, onInit: (editor) => {
+                    // Save initial content so it can be restored if iframe reloads before any changes
+                    savedContentRef.current = editor.getHTML();
+                    // Set aria-required on the contenteditable element
+                    if (requiredRef.current) {
+                        editor.view.dom.setAttribute('aria-required', 'true');
+                    }
+                    setTiptapEditor(editor);
+                    onInit?.(editor);
+                }, editorRef: iframeEditorRef, spellcheck: spellcheck, customElements: customElements, initOptions: initOptions, onImageAdded: (image, id, altText) => onImageAddedRef.current?.(image, id, altText), imagesEnabled: imagesEnabled, linksEnabled: linksEnabled, imageInsertionMode: imageInsertionMode, pastedImagesRef: pastedImages, editorId: editorId, secure: secure, onFocusTableMenu: () => onFocusTableMenuRef.current?.(), onFocusPreviousCellMenu: () => {
+                    onFocusPreviousCellMenuRef.current?.();
+                } }));
+        }
+        // Handle mousedown on empty space to enable drag-to-select from anywhere
+        const handleIframeMouseDown = (e) => {
+            const target = e.target;
+            // Only handle mousedown on empty space (not on actual content like paragraphs, text nodes)
+            if (target === iframeDoc.documentElement ||
+                target === iframeDoc.body ||
+                target.id === 'tiptap-root') {
+                const editor = iframeEditorRef.current?.getEditor();
+                if (editor) {
+                    // Find nearest document position and place cursor there
+                    // This allows ProseMirror to handle the subsequent drag selection
+                    const pos = editor.view.posAtCoords({ left: e.clientX, top: e.clientY });
+                    if (pos) {
+                        editor.commands.setTextSelection(pos.pos);
+                        editor.commands.focus();
+                    }
+                    else {
+                        editor.commands.focus('end');
+                    }
+                }
+            }
+        };
+        // Handle mouseup on empty space to place cursor/deselect on simple clicks
+        const handleIframeMouseUp = (e) => {
+            const target = e.target;
+            // Only handle clicks on empty space (html, body, tiptap-root, or ProseMirror container)
+            if (target === iframeDoc.documentElement ||
+                target === iframeDoc.body ||
+                target.id === 'tiptap-root' ||
+                target.classList.contains('ProseMirror')) {
+                const editor = iframeEditorRef.current?.getEditor();
+                if (editor) {
+                    // Check if user has a text selection (from drag) - if so, don't interfere
+                    const { from, to } = editor.state.selection;
+                    if (from === to) {
+                        // Selection is collapsed (no text selected), treat as click
+                        const pos = editor.view.posAtCoords({ left: e.clientX, top: e.clientY });
+                        if (pos) {
+                            // Place cursor at the nearest position
+                            editor.commands.setTextSelection(pos.pos);
+                            editor.commands.focus();
+                        }
+                        else {
+                            // Fallback to end of document if no position found
+                            editor.commands.focus('end');
+                        }
+                    }
+                }
+            }
+        };
+        // Handle Tab key to exit editor and focus toolbar
+        const handleIframeKeyDown = (e) => {
+            if (e.key === 'Tab' && !e.shiftKey) {
+                e.preventDefault();
+                onTabOutRef.current?.();
+            }
+        };
+        iframeDoc.addEventListener('mousedown', handleIframeMouseDown);
+        iframeDoc.addEventListener('mouseup', handleIframeMouseUp);
+        iframeDoc.addEventListener('keydown', handleIframeKeyDown);
+        // Auto-resize iframe based on content height (only if autoResize is enabled)
+        if (autoResize) {
+            const updateIframeHeight = () => {
+                if (iframe.contentDocument?.body) {
+                    const contentHeight = iframe.contentDocument.body.scrollHeight;
+                    // Set min height from theme, grow with content
+                    // Convert rem to pixels using root font size
+                    const remValue = parseFloat(textAreaMinHeight) || 3;
+                    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+                    const minHeight = remValue * rootFontSize;
+                    iframe.style.height = `${Math.max(contentHeight + 16, minHeight)}px`;
+                }
+            };
+            // Observe changes to iframe content
+            if (iframeDoc.body && !resizeObserverRef.current) {
+                resizeObserverRef.current = new ResizeObserver(updateIframeHeight);
+                resizeObserverRef.current.observe(iframeDoc.body);
+            }
+            // Initial height update
+            updateIframeHeight();
+        }
+        // Mark as initialized
+        isInitializedRef.current = true;
+        return () => {
+            isInitializedRef.current = false;
+            iframeDoc.removeEventListener('mousedown', handleIframeMouseDown);
+            iframeDoc.removeEventListener('mouseup', handleIframeMouseUp);
+            iframeDoc.removeEventListener('keydown', handleIframeKeyDown);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+                resizeObserverRef.current = null;
+            }
+            // Defer unmounting to avoid race condition during React's render phase
+            if (iframeRootRef.current) {
+                const rootToUnmount = iframeRootRef.current;
+                iframeRootRef.current = null;
+                // Use setTimeout to defer unmount until after React finishes rendering
+                setTimeout(() => {
+                    rootToUnmount.unmount();
+                }, 0);
+            }
+        };
+    }, [reinitializeCounter]);
+    // Keep aria-required in sync when `required` prop changes
+    useEffect(() => {
+        const editorEl = iframeEditorRef.current?.getEditor()?.view.dom;
+        if (!editorEl)
+            return;
+        if (required) {
+            editorEl.setAttribute('aria-required', 'true');
+        }
+        else {
+            editorEl.removeAttribute('aria-required');
+        }
+    }, [required]);
+    return { iframeEditorRef };
+}
+//# sourceMappingURL=useIframeSetup.js.map

package/lib/components/Editor/hooks/useIframeSetup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIframeSetup.js","sourceRoot":"","sources":["../../../../src/components/Editor/hooks/useIframeSetup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState, useEffect } from 'react';\nimport type { RefObject, MutableRefObject } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport type { Root } from 'react-dom/client';\nimport { compile, serialize, stringify } from 'stylis';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport { useTheme } from '@pega/cosmos-react-core';\nimport { getHtmlStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';\nimport {\n  createGlobalBodyStyles,\n  createGlobalRootStyles,\n  globalSpacingStyles\n} from '@pega/cosmos-react-core/lib/styles/GlobalStyle';\n\nimport type { CustomComponent, EditorProps } from '../Editor.types';\nimport { IframeTiptapEditor } from '../IframeTiptapEditor';\nimport { getIframeContentStyles } from '../iframeContentStyles';\n\ninterface UseIframeSetupParams {\n  iframeRef: RefObject<HTMLIFrameElement>;\n  theme: ReturnType<typeof useTheme>;\n  styleSheetTarget?: HTMLElement | ShadowRoot;\n  customElements: CustomComponent[];\n  placeholder?: string;\n  defaultValue?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (editor: TiptapEditor) => void;\n  onKeyDown?: (event?: KeyboardEvent) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onInit?: (editor: TiptapEditor) => void;\n  spellcheck?: boolean;\n  initOptions?: EditorProps['initOptions'];\n  onImageAdded?: (image: File, id: string, altText?: string) => void;\n  imagesEnabled: boolean;\n  linksEnabled: boolean;\n  imageInsertionMode: 'file' | 'url' | 'all';\n  pastedImages: MutableRefObject<File[]>;\n  editorId: string;\n  required?: boolean;\n  setTiptapEditor: (editor: TiptapEditor) => void;\n  setFocused: (focused: boolean) => void;\n  autoResize?: boolean;\n  onTabOut?: () => void;\n  onFocusTableMenu?: () => void;\n  onFocusPreviousCellMenu?: () => void;\n  secure?: boolean;\n}\n\nexport interface IframeEditorHandle {\n  focus: () => void;\n  getPlainText: () => string;\n  getRichText: () => string;\n  getHtml: () => string;\n  clear: () => void;\n  insertText: (text: string) => void;\n  setCursorLocationToStart: () => void;\n  insertHtml: (html: string, overwrite?: boolean) => void;\n  getEditor: () => TiptapEditor | null;\n  setEditable: (editable: boolean) => void;\n}\n\nexport type IframeEditorRef = MutableRefObject<IframeEditorHandle | null>;\n\ninterface UseIframeSetupReturn {\n  iframeEditorRef: IframeEditorRef;\n}\n\nexport default function useIframeSetup({\n  iframeRef,\n  theme,\n  styleSheetTarget,\n  customElements,\n  placeholder,\n  defaultValue,\n  disabled,\n  readOnly,\n  onChange,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onInit,\n  spellcheck,\n  initOptions,\n  onImageAdded,\n  imagesEnabled,\n  linksEnabled,\n  imageInsertionMode,\n  pastedImages,\n  editorId,\n  required,\n  setTiptapEditor,\n  setFocused,\n  autoResize = true,\n  onTabOut,\n  onFocusTableMenu,\n  onFocusPreviousCellMenu,\n  secure = false\n}: UseIframeSetupParams): UseIframeSetupReturn {\n  const {\n    components: {\n      'text-area': { 'min-height': textAreaMinHeight }\n    }\n  } = theme;\n  const iframeRootRef = useRef<Root | null>(null);\n  const iframeEditorRef = useRef<IframeEditorHandle | null>(null);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n  const isInitializedRef = useRef(false);\n  const savedContentRef = useRef<string | null>(null);\n  const [reinitializeCounter, setReinitializeCounter] = useState(0);\n\n  // Refs to keep callbacks fresh without re-initializing the iframe\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  const onImageAddedRef = useRef(onImageAdded);\n  onImageAddedRef.current = onImageAdded;\n\n  const onTabOutRef = useRef(onTabOut);\n  onTabOutRef.current = onTabOut;\n\n  const requiredRef = useRef(required);\n  requiredRef.current = required;\n\n  const onFocusTableMenuRef = useRef(onFocusTableMenu);\n  onFocusTableMenuRef.current = onFocusTableMenu;\n\n  const onFocusPreviousCellMenuRef = useRef(onFocusPreviousCellMenu);\n  onFocusPreviousCellMenuRef.current = onFocusPreviousCellMenu;\n\n  // Listen for iframe load events (fires when iframe reloads due to DOM move)\n  useEffect(() => {\n    if (!iframeRef.current) return;\n\n    const iframe = iframeRef.current;\n\n    const handleLoad = () => {\n      // Check if content was lost\n      const proseMirror = iframe.contentDocument?.querySelector('.ProseMirror');\n      if (!proseMirror && isInitializedRef.current) {\n        // savedContentRef is updated on every change, so it has the latest content\n        isInitializedRef.current = false;\n        setReinitializeCounter(c => c + 1);\n      }\n    };\n\n    iframe.addEventListener('load', handleLoad);\n\n    return () => {\n      iframe.removeEventListener('load', handleLoad);\n    };\n  }, [iframeRef]);\n\n  // Mount Tiptap inside iframe\n  useLayoutEffect(() => {\n    if (!iframeRef.current) return;\n\n    // Check if already initialized and content is still valid\n    if (isInitializedRef.current) {\n      const proseMirror = iframeRef.current.contentDocument?.querySelector('.ProseMirror');\n      if (proseMirror) {\n        // Already initialized and content is valid, skip\n        return;\n      }\n      // Content was lost (iframe reloaded), need to reinitialize\n      if (iframeRootRef.current) {\n        try {\n          iframeRootRef.current.unmount();\n        } catch (e) {\n          // Ignore unmount errors\n        }\n        iframeRootRef.current = null;\n      }\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n    }\n\n    const iframe = iframeRef.current;\n    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;\n\n    if (!iframeDoc) return;\n\n    // Generate styles\n    const htmlStyles = serialize(compile(getHtmlStyles(theme)), stringify);\n\n    const contentStyle = `\n      ${createGlobalRootStyles(theme)}\n      ${globalSpacingStyles}\n      ${createGlobalBodyStyles(theme)}\n      ${htmlStyles}\n      ${getIframeContentStyles(theme)}\n      ${initOptions?.contentStyle ?? ''}\n    `;\n\n    // Create basic HTML structure in iframe\n    iframeDoc.open();\n    iframeDoc.write(`\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <style${window.__webpack_nonce__ ? ` nonce=\"${window.__webpack_nonce__}\"` : ''}>\n            ${contentStyle}\n          </style>\n        </head>\n        <body>\n          <div id=\"tiptap-root\"></div>\n        </body>\n      </html>\n    `);\n    iframeDoc.close();\n\n    // Copy global styles into the iframe\n    const globalStyles =\n      styleSheetTarget?.querySelectorAll('[data-cosmos-global-style]') ?? ([] as HTMLElement[]);\n    const extraStyles =\n      document.querySelectorAll('[data-cosmos-global-style]') ?? ([] as HTMLElement[]);\n    const iframeHead = iframeDoc.querySelector('head');\n    [...globalStyles, ...extraStyles].forEach(sheet => {\n      iframeHead?.appendChild(sheet.cloneNode(true));\n    });\n\n    // Register custom components in iframe\n    if (customElements && customElements.length > 0 && iframe.contentWindow) {\n      const iframeWindow = iframe.contentWindow as unknown as typeof globalThis;\n      customElements.forEach((component: CustomComponent) => {\n        if (\n          component.name &&\n          component.createCustomElement &&\n          !iframeWindow.customElements.get(component.name)\n        ) {\n          const CustomElement = component.createCustomElement(iframeWindow);\n          iframeWindow.customElements.define(component.name, CustomElement);\n        }\n\n        // Inject custom component styles into iframe if provided\n        if (component.style && iframeHead && component.name) {\n          const styleId = `custom-component-${component.name}`;\n          if (!iframeDoc.getElementById(styleId)) {\n            const styleElement = iframeDoc.createElement('style');\n            styleElement.id = styleId;\n            styleElement.textContent = component.style;\n            if (window.__webpack_nonce__) {\n              styleElement.nonce = window.__webpack_nonce__;\n            }\n            iframeHead.appendChild(styleElement);\n          }\n        }\n      });\n    }\n\n    // Mount React component inside iframe\n    const rootElement = iframeDoc.getElementById('tiptap-root');\n    if (rootElement && !iframeRootRef.current) {\n      // Use saved content if available (from DOM move), otherwise use defaultValue\n      const initialContent = savedContentRef.current ?? defaultValue;\n\n      iframeRootRef.current = createRoot(rootElement);\n      iframeRootRef.current.render(\n        <IframeTiptapEditor\n          placeholder={placeholder}\n          defaultValue={initialContent}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={editor => {\n            // Save content on every change so it can be restored if iframe reloads\n            savedContentRef.current = editor.getHTML();\n            onChangeRef.current?.(editor);\n          }}\n          onKeyDown={onKeyDown}\n          onFocus={() => {\n            setFocused(true);\n            onFocus?.();\n          }}\n          onBlur={() => {\n            setFocused(false);\n            onBlur?.();\n          }}\n          onInit={(editor: TiptapEditor) => {\n            // Save initial content so it can be restored if iframe reloads before any changes\n            savedContentRef.current = editor.getHTML();\n            // Set aria-required on the contenteditable element\n            if (requiredRef.current) {\n              editor.view.dom.setAttribute('aria-required', 'true');\n            }\n            setTiptapEditor(editor);\n            onInit?.(editor);\n          }}\n          editorRef={iframeEditorRef}\n          spellcheck={spellcheck}\n          customElements={customElements}\n          initOptions={initOptions}\n          onImageAdded={(image, id, altText) => onImageAddedRef.current?.(image, id, altText)}\n          imagesEnabled={imagesEnabled}\n          linksEnabled={linksEnabled}\n          imageInsertionMode={imageInsertionMode}\n          pastedImagesRef={pastedImages}\n          editorId={editorId}\n          secure={secure}\n          onFocusTableMenu={() => onFocusTableMenuRef.current?.()}\n          onFocusPreviousCellMenu={() => {\n            onFocusPreviousCellMenuRef.current?.();\n          }}\n        />\n      );\n    }\n\n    // Handle mousedown on empty space to enable drag-to-select from anywhere\n    const handleIframeMouseDown = (e: MouseEvent) => {\n      const target = e.target as HTMLElement;\n      // Only handle mousedown on empty space (not on actual content like paragraphs, text nodes)\n      if (\n        target === iframeDoc.documentElement ||\n        target === iframeDoc.body ||\n        target.id === 'tiptap-root'\n      ) {\n        const editor = iframeEditorRef.current?.getEditor();\n        if (editor) {\n          // Find nearest document position and place cursor there\n          // This allows ProseMirror to handle the subsequent drag selection\n          const pos = editor.view.posAtCoords({ left: e.clientX, top: e.clientY });\n          if (pos) {\n            editor.commands.setTextSelection(pos.pos);\n            editor.commands.focus();\n          } else {\n            editor.commands.focus('end');\n          }\n        }\n      }\n    };\n\n    // Handle mouseup on empty space to place cursor/deselect on simple clicks\n    const handleIframeMouseUp = (e: MouseEvent) => {\n      const target = e.target as HTMLElement;\n      // Only handle clicks on empty space (html, body, tiptap-root, or ProseMirror container)\n      if (\n        target === iframeDoc.documentElement ||\n        target === iframeDoc.body ||\n        target.id === 'tiptap-root' ||\n        target.classList.contains('ProseMirror')\n      ) {\n        const editor = iframeEditorRef.current?.getEditor();\n        if (editor) {\n          // Check if user has a text selection (from drag) - if so, don't interfere\n          const { from, to } = editor.state.selection;\n          if (from === to) {\n            // Selection is collapsed (no text selected), treat as click\n            const pos = editor.view.posAtCoords({ left: e.clientX, top: e.clientY });\n            if (pos) {\n              // Place cursor at the nearest position\n              editor.commands.setTextSelection(pos.pos);\n              editor.commands.focus();\n            } else {\n              // Fallback to end of document if no position found\n              editor.commands.focus('end');\n            }\n          }\n        }\n      }\n    };\n\n    // Handle Tab key to exit editor and focus toolbar\n    const handleIframeKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey) {\n        e.preventDefault();\n        onTabOutRef.current?.();\n      }\n    };\n\n    iframeDoc.addEventListener('mousedown', handleIframeMouseDown);\n    iframeDoc.addEventListener('mouseup', handleIframeMouseUp);\n    iframeDoc.addEventListener('keydown', handleIframeKeyDown);\n\n    // Auto-resize iframe based on content height (only if autoResize is enabled)\n    if (autoResize) {\n      const updateIframeHeight = () => {\n        if (iframe.contentDocument?.body) {\n          const contentHeight = iframe.contentDocument.body.scrollHeight;\n          // Set min height from theme, grow with content\n          // Convert rem to pixels using root font size\n          const remValue = parseFloat(textAreaMinHeight) || 3;\n          const rootFontSize =\n            parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n          const minHeight = remValue * rootFontSize;\n          iframe.style.height = `${Math.max(contentHeight + 16, minHeight)}px`;\n        }\n      };\n\n      // Observe changes to iframe content\n      if (iframeDoc.body && !resizeObserverRef.current) {\n        resizeObserverRef.current = new ResizeObserver(updateIframeHeight);\n        resizeObserverRef.current.observe(iframeDoc.body);\n      }\n\n      // Initial height update\n      updateIframeHeight();\n    }\n\n    // Mark as initialized\n    isInitializedRef.current = true;\n\n    return () => {\n      isInitializedRef.current = false;\n      iframeDoc.removeEventListener('mousedown', handleIframeMouseDown);\n      iframeDoc.removeEventListener('mouseup', handleIframeMouseUp);\n      iframeDoc.removeEventListener('keydown', handleIframeKeyDown);\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n      // Defer unmounting to avoid race condition during React's render phase\n      if (iframeRootRef.current) {\n        const rootToUnmount = iframeRootRef.current;\n        iframeRootRef.current = null;\n        // Use setTimeout to defer unmount until after React finishes rendering\n        setTimeout(() => {\n          rootToUnmount.unmount();\n        }, 0);\n      }\n    };\n  }, [reinitializeCounter]);\n\n  // Keep aria-required in sync when `required` prop changes\n  useEffect(() => {\n    const editorEl = iframeEditorRef.current?.getEditor()?.view.dom;\n    if (!editorEl) return;\n\n    if (required) {\n      editorEl.setAttribute('aria-required', 'true');\n    } else {\n      editorEl.removeAttribute('aria-required');\n    }\n  }, [required]);\n\n  return { iframeEditorRef };\n}\n"]}

package/lib/components/Editor/hooks/useImageActions.d.ts

@@ -0,0 +1,19 @@
+import type { RefObject } from 'react';
+import type { Editor as TiptapEditor } from '@tiptap/core';
+import type { ImageAttributes } from '../ImageEditDialog';
+import type { ImagePosition } from '../ImageActionButtons';
+interface UseImageActionsParams {
+    tiptapEditor: TiptapEditor | null;
+    iframeRef: RefObject<HTMLIFrameElement>;
+    isDialogOpen?: boolean;
+}
+interface UseImageActionsReturn {
+    hoveredImagePosition: ImagePosition | null;
+    currentImageAttrs: ImageAttributes | null;
+    currentImageElement: HTMLImageElement | null;
+    handleDelete: () => void;
+    setIsOverButtons: (value: boolean) => void;
+}
+export default function useImageActions({ tiptapEditor, iframeRef, isDialogOpen }: UseImageActionsParams): UseImageActionsReturn;
+export {};
+//# sourceMappingURL=useImageActions.d.ts.map

package/lib/components/Editor/hooks/useImageActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageActions.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/hooks/useImageActions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAI3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,UAAU,qBAAqB;IAC7B,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,qBAAqB;IAC7B,oBAAoB,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3C,iBAAiB,EAAE,eAAe,GAAG,IAAI,CAAC;IAC1C,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,YAAY,EACZ,SAAS,EACT,YAAoB,EACrB,EAAE,qBAAqB,GAAG,qBAAqB,CA4O/C"}

package/lib/components/Editor/hooks/useImageActions.js

@@ -0,0 +1,198 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { isInstance } from '@pega/cosmos-react-core';
+export default function useImageActions({ tiptapEditor, iframeRef, isDialogOpen = false }) {
+    const [hoveredImagePosition, setHoveredImagePosition] = useState(null);
+    const [currentImageAttrs, setCurrentImageAttrs] = useState(null);
+    const currentImgRef = useRef(null);
+    const hideTimeoutRef = useRef(null);
+    const isOverImageRef = useRef(false);
+    const isOverButtonsRef = useRef(false);
+    const isDialogOpenRef = useRef(isDialogOpen);
+    // Keep ref in sync with prop
+    isDialogOpenRef.current = isDialogOpen;
+    const cancelHide = useCallback(() => {
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+            hideTimeoutRef.current = null;
+        }
+    }, []);
+    const hideButtons = useCallback(() => {
+        setHoveredImagePosition(null);
+        setCurrentImageAttrs(null);
+        currentImgRef.current = null;
+        isOverImageRef.current = false;
+        isOverButtonsRef.current = false;
+    }, []);
+    const scheduleHide = useCallback(() => {
+        // Don't hide while dialog is open
+        if (isDialogOpenRef.current)
+            return;
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+        }
+        hideTimeoutRef.current = setTimeout(() => {
+            // Check ref for latest dialog state inside timeout
+            if (!isOverImageRef.current && !isOverButtonsRef.current && !isDialogOpenRef.current) {
+                hideButtons();
+            }
+        }, 100);
+    }, [hideButtons]);
+    // Expose a way to track if mouse is over the buttons (called from parent)
+    const setIsOverButtons = useCallback((value) => {
+        isOverButtonsRef.current = value;
+        if (!value) {
+            scheduleHide();
+        }
+        else {
+            cancelHide();
+        }
+    }, [scheduleHide, cancelHide]);
+    const positionButtons = useCallback((img) => {
+        if (!iframeRef.current)
+            return;
+        const imgRect = img.getBoundingClientRect();
+        const iframeRect = iframeRef.current.getBoundingClientRect();
+        // Calculate position relative to viewport (accounting for iframe position)
+        const position = {
+            top: iframeRect.top + imgRect.top,
+            left: iframeRect.left + imgRect.left,
+            width: imgRect.width,
+            height: imgRect.height
+        };
+        setHoveredImagePosition(position);
+        currentImgRef.current = img;
+        // Get the link parent if the image is wrapped
+        const linkParent = img.closest('a');
+        setCurrentImageAttrs({
+            src: img.src,
+            alt: img.alt,
+            width: img.width || undefined,
+            height: img.height || undefined,
+            actionUrl: linkParent?.href || undefined
+        });
+    }, [iframeRef]);
+    const handleDelete = useCallback(() => {
+        if (!currentImgRef.current || !tiptapEditor)
+            return;
+        // Get exact position from DOM element to handle duplicate images correctly
+        const pos = tiptapEditor.view.posAtDOM(currentImgRef.current, 0);
+        if (pos >= 0) {
+            tiptapEditor
+                .chain()
+                .focus()
+                .deleteRange({ from: pos, to: pos + 1 })
+                .run();
+        }
+        hideButtons();
+    }, [tiptapEditor, hideButtons]);
+    // Set up image hover listeners inside the iframe
+    useEffect(() => {
+        if (!tiptapEditor || !iframeRef.current?.contentDocument)
+            return;
+        const iframeDoc = iframeRef.current.contentDocument;
+        // Verify the editor is properly initialized in the iframe
+        const proseMirrorEl = iframeDoc.querySelector('.ProseMirror');
+        if (!proseMirrorEl)
+            return;
+        const imageListeners = new Map();
+        const attachImageListeners = (img) => {
+            if (imageListeners.has(img))
+                return;
+            const handleEnter = () => {
+                cancelHide();
+                isOverImageRef.current = true;
+                positionButtons(img);
+            };
+            const handleLeave = () => {
+                isOverImageRef.current = false;
+                scheduleHide();
+            };
+            img.addEventListener('mouseenter', handleEnter);
+            img.addEventListener('mouseleave', handleLeave);
+            imageListeners.set(img, {
+                enter: handleEnter,
+                leave: handleLeave
+            });
+        };
+        const detachImageListeners = (img) => {
+            const listeners = imageListeners.get(img);
+            if (listeners) {
+                img.removeEventListener('mouseenter', listeners.enter);
+                img.removeEventListener('mouseleave', listeners.leave);
+                imageListeners.delete(img);
+            }
+        };
+        // Observe DOM changes to attach listeners to new images
+        const setupImages = () => {
+            const images = iframeDoc.querySelectorAll('.ProseMirror img');
+            images.forEach(img => {
+                attachImageListeners(img);
+            });
+        };
+        // Initial setup
+        setupImages();
+        // Watch for new images and detect when current image is removed
+        const observer = new MutationObserver(() => {
+            setupImages();
+            // Clean up listeners for images that are no longer in the document
+            imageListeners.forEach((_listeners, img) => {
+                if (!iframeDoc.body.contains(img)) {
+                    detachImageListeners(img);
+                }
+            });
+            // If the current image was removed (e.g., via backspace), hide buttons
+            if (currentImgRef.current && !iframeDoc.body.contains(currentImgRef.current)) {
+                hideButtons();
+            }
+        });
+        const proseMirror = iframeDoc.querySelector('.ProseMirror');
+        if (proseMirror) {
+            observer.observe(proseMirror, {
+                childList: true,
+                subtree: true
+            });
+        }
+        // Hide buttons when clicking elsewhere in the iframe
+        const handleDocClick = (e) => {
+            if (isInstance(e.target, HTMLElement) && e.target.tagName !== 'IMG') {
+                hideButtons();
+            }
+        };
+        iframeDoc.addEventListener('click', handleDocClick);
+        // Reposition buttons on scroll inside iframe
+        const handleScroll = () => {
+            if (currentImgRef.current) {
+                positionButtons(currentImgRef.current);
+            }
+        };
+        const iframeBody = iframeDoc.body;
+        iframeBody.addEventListener('scroll', handleScroll);
+        // Reposition buttons on window resize
+        const handleResize = () => {
+            if (currentImgRef.current) {
+                positionButtons(currentImgRef.current);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+            }
+            observer.disconnect();
+            imageListeners.forEach((_listeners, img) => {
+                detachImageListeners(img);
+            });
+            iframeDoc.removeEventListener('click', handleDocClick);
+            iframeBody.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [tiptapEditor, iframeRef, positionButtons, scheduleHide, cancelHide, hideButtons]);
+    return {
+        hoveredImagePosition,
+        currentImageAttrs,
+        currentImageElement: currentImgRef.current,
+        handleDelete,
+        setIsOverButtons
+    };
+}
+//# sourceMappingURL=useImageActions.js.map

package/lib/components/Editor/hooks/useImageActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageActions.js","sourceRoot":"","sources":["../../../../src/components/Editor/hooks/useImageActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIjE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAmBrD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,YAAY,EACZ,SAAS,EACT,YAAY,GAAG,KAAK,EACE;IACtB,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAuB,IAAI,CAAC,CAAC;IAC7F,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAyB,IAAI,CAAC,CAAC;IACzF,MAAM,aAAa,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC5D,MAAM,cAAc,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAC1E,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAE7C,6BAA6B;IAC7B,eAAe,CAAC,OAAO,GAAG,YAAY,CAAC;IAEvC,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YAC3B,YAAY,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YACrC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAC9B,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC3B,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;QAC/B,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,kCAAkC;QAClC,IAAI,eAAe,CAAC,OAAO;YAAE,OAAO;QAEpC,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YAC3B,YAAY,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC;QACD,cAAc,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACvC,mDAAmD;YACnD,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,gBAAgB,CAAC,OAAO,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;gBACrF,WAAW,EAAE,CAAC;YAChB,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,0EAA0E;IAC1E,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,KAAc,EAAE,EAAE;QACjB,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAC;QACjC,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,YAAY,EAAE,CAAC;QACjB,CAAC;aAAM,CAAC;YACN,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,UAAU,CAAC,CAC3B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,GAAqB,EAAE,EAAE;QACxB,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAO;QAE/B,MAAM,OAAO,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAE7D,2EAA2E;QAC3E,MAAM,QAAQ,GAAkB;YAC9B,GAAG,EAAE,UAAU,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG;YACjC,IAAI,EAAE,UAAU,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI;YACpC,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,MAAM,EAAE,OAAO,CAAC,MAAM;SACvB,CAAC;QAEF,uBAAuB,CAAC,QAAQ,CAAC,CAAC;QAClC,aAAa,CAAC,OAAO,GAAG,GAAG,CAAC;QAE5B,8CAA8C;QAC9C,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAEpC,oBAAoB,CAAC;YACnB,GAAG,EAAE,GAAG,CAAC,GAAG;YACZ,GAAG,EAAE,GAAG,CAAC,GAAG;YACZ,KAAK,EAAE,GAAG,CAAC,KAAK,IAAI,SAAS;YAC7B,MAAM,EAAE,GAAG,CAAC,MAAM,IAAI,SAAS;YAC/B,SAAS,EAAE,UAAU,EAAE,IAAI,IAAI,SAAS;SACzC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,aAAa,CAAC,OAAO,IAAI,CAAC,YAAY;YAAE,OAAO;QAEpD,2EAA2E;QAC3E,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAEjE,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;YACb,YAAY;iBACT,KAAK,EAAE;iBACP,KAAK,EAAE;iBACP,WAAW,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC;iBACvC,GAAG,EAAE,CAAC;QACX,CAAC;QAED,WAAW,EAAE,CAAC;IAChB,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;IAEhC,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,eAAe;YAAE,OAAO;QAEjE,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,eAAe,CAAC;QAEpD,0DAA0D;QAC1D,MAAM,aAAa,GAAG,SAAS,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC9D,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,MAAM,cAAc,GAAG,IAAI,GAAG,EAA8D,CAAC;QAE7F,MAAM,oBAAoB,GAAG,CAAC,GAAqB,EAAE,EAAE;YACrD,IAAI,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,OAAO;YAEpC,MAAM,WAAW,GAAG,GAAG,EAAE;gBACvB,UAAU,EAAE,CAAC;gBACb,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC9B,eAAe,CAAC,GAAG,CAAC,CAAC;YACvB,CAAC,CAAC;YAEF,MAAM,WAAW,GAAG,GAAG,EAAE;gBACvB,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;gBAC/B,YAAY,EAAE,CAAC;YACjB,CAAC,CAAC;YAEF,GAAG,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;YAChD,GAAG,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;YAEhD,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE;gBACtB,KAAK,EAAE,WAAW;gBAClB,KAAK,EAAE,WAAW;aACnB,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,oBAAoB,GAAG,CAAC,GAAqB,EAAE,EAAE;YACrD,MAAM,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,SAAS,EAAE,CAAC;gBACd,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;gBACvD,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;gBACvD,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;QAEF,wDAAwD;QACxD,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,MAAM,MAAM,GAAG,SAAS,CAAC,gBAAgB,CAAmB,kBAAkB,CAAC,CAAC;YAChF,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gBACnB,oBAAoB,CAAC,GAAG,CAAC,CAAC;YAC5B,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,gBAAgB;QAChB,WAAW,EAAE,CAAC;QAEd,gEAAgE;QAChE,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACzC,WAAW,EAAE,CAAC;YAEd,mEAAmE;YACnE,cAAc,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE;gBACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;oBAClC,oBAAoB,CAAC,GAAG,CAAC,CAAC;gBAC5B,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,uEAAuE;YACvE,IAAI,aAAa,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC7E,WAAW,EAAE,CAAC;YAChB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC5D,IAAI,WAAW,EAAE,CAAC;YAChB,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE;gBAC5B,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC;QAED,qDAAqD;QACrD,MAAM,cAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;YAClC,IAAI,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;gBACpE,WAAW,EAAE,CAAC;YAChB,CAAC;QACH,CAAC,CAAC;QAEF,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAEpD,6CAA6C;QAC7C,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC1B,eAAe,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACzC,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,CAAC;QAClC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAEpD,sCAAsC;QACtC,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC1B,eAAe,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACzC,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAEhD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;gBAC3B,YAAY,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YACvC,CAAC;YAED,QAAQ,CAAC,UAAU,EAAE,CAAC;YAEtB,cAAc,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE;gBACzC,oBAAoB,CAAC,GAAG,CAAC,CAAC;YAC5B,CAAC,CAAC,CAAC;YAEH,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;YACvD,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACvD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAEtF,OAAO;QACL,oBAAoB;QACpB,iBAAiB;QACjB,mBAAmB,EAAE,aAAa,CAAC,OAAO;QAC1C,YAAY;QACZ,gBAAgB;KACjB,CAAC;AACJ,CAAC","sourcesContent":["import { useEffect, useState, useCallback, useRef } from 'react';\nimport type { RefObject } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport { isInstance } from '@pega/cosmos-react-core';\n\nimport type { ImageAttributes } from '../ImageEditDialog';\nimport type { ImagePosition } from '../ImageActionButtons';\n\ninterface UseImageActionsParams {\n  tiptapEditor: TiptapEditor | null;\n  iframeRef: RefObject<HTMLIFrameElement>;\n  isDialogOpen?: boolean;\n}\n\ninterface UseImageActionsReturn {\n  hoveredImagePosition: ImagePosition | null;\n  currentImageAttrs: ImageAttributes | null;\n  currentImageElement: HTMLImageElement | null;\n  handleDelete: () => void;\n  setIsOverButtons: (value: boolean) => void;\n}\n\nexport default function useImageActions({\n  tiptapEditor,\n  iframeRef,\n  isDialogOpen = false\n}: UseImageActionsParams): UseImageActionsReturn {\n  const [hoveredImagePosition, setHoveredImagePosition] = useState<ImagePosition | null>(null);\n  const [currentImageAttrs, setCurrentImageAttrs] = useState<ImageAttributes | null>(null);\n  const currentImgRef = useRef<HTMLImageElement | null>(null);\n  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isOverImageRef = useRef(false);\n  const isOverButtonsRef = useRef(false);\n  const isDialogOpenRef = useRef(isDialogOpen);\n\n  // Keep ref in sync with prop\n  isDialogOpenRef.current = isDialogOpen;\n\n  const cancelHide = useCallback(() => {\n    if (hideTimeoutRef.current) {\n      clearTimeout(hideTimeoutRef.current);\n      hideTimeoutRef.current = null;\n    }\n  }, []);\n\n  const hideButtons = useCallback(() => {\n    setHoveredImagePosition(null);\n    setCurrentImageAttrs(null);\n    currentImgRef.current = null;\n    isOverImageRef.current = false;\n    isOverButtonsRef.current = false;\n  }, []);\n\n  const scheduleHide = useCallback(() => {\n    // Don't hide while dialog is open\n    if (isDialogOpenRef.current) return;\n\n    if (hideTimeoutRef.current) {\n      clearTimeout(hideTimeoutRef.current);\n    }\n    hideTimeoutRef.current = setTimeout(() => {\n      // Check ref for latest dialog state inside timeout\n      if (!isOverImageRef.current && !isOverButtonsRef.current && !isDialogOpenRef.current) {\n        hideButtons();\n      }\n    }, 100);\n  }, [hideButtons]);\n\n  // Expose a way to track if mouse is over the buttons (called from parent)\n  const setIsOverButtons = useCallback(\n    (value: boolean) => {\n      isOverButtonsRef.current = value;\n      if (!value) {\n        scheduleHide();\n      } else {\n        cancelHide();\n      }\n    },\n    [scheduleHide, cancelHide]\n  );\n\n  const positionButtons = useCallback(\n    (img: HTMLImageElement) => {\n      if (!iframeRef.current) return;\n\n      const imgRect = img.getBoundingClientRect();\n      const iframeRect = iframeRef.current.getBoundingClientRect();\n\n      // Calculate position relative to viewport (accounting for iframe position)\n      const position: ImagePosition = {\n        top: iframeRect.top + imgRect.top,\n        left: iframeRect.left + imgRect.left,\n        width: imgRect.width,\n        height: imgRect.height\n      };\n\n      setHoveredImagePosition(position);\n      currentImgRef.current = img;\n\n      // Get the link parent if the image is wrapped\n      const linkParent = img.closest('a');\n\n      setCurrentImageAttrs({\n        src: img.src,\n        alt: img.alt,\n        width: img.width || undefined,\n        height: img.height || undefined,\n        actionUrl: linkParent?.href || undefined\n      });\n    },\n    [iframeRef]\n  );\n\n  const handleDelete = useCallback(() => {\n    if (!currentImgRef.current || !tiptapEditor) return;\n\n    // Get exact position from DOM element to handle duplicate images correctly\n    const pos = tiptapEditor.view.posAtDOM(currentImgRef.current, 0);\n\n    if (pos >= 0) {\n      tiptapEditor\n        .chain()\n        .focus()\n        .deleteRange({ from: pos, to: pos + 1 })\n        .run();\n    }\n\n    hideButtons();\n  }, [tiptapEditor, hideButtons]);\n\n  // Set up image hover listeners inside the iframe\n  useEffect(() => {\n    if (!tiptapEditor || !iframeRef.current?.contentDocument) return;\n\n    const iframeDoc = iframeRef.current.contentDocument;\n\n    // Verify the editor is properly initialized in the iframe\n    const proseMirrorEl = iframeDoc.querySelector('.ProseMirror');\n    if (!proseMirrorEl) return;\n\n    const imageListeners = new Map<HTMLImageElement, { enter: () => void; leave: () => void }>();\n\n    const attachImageListeners = (img: HTMLImageElement) => {\n      if (imageListeners.has(img)) return;\n\n      const handleEnter = () => {\n        cancelHide();\n        isOverImageRef.current = true;\n        positionButtons(img);\n      };\n\n      const handleLeave = () => {\n        isOverImageRef.current = false;\n        scheduleHide();\n      };\n\n      img.addEventListener('mouseenter', handleEnter);\n      img.addEventListener('mouseleave', handleLeave);\n\n      imageListeners.set(img, {\n        enter: handleEnter,\n        leave: handleLeave\n      });\n    };\n\n    const detachImageListeners = (img: HTMLImageElement) => {\n      const listeners = imageListeners.get(img);\n      if (listeners) {\n        img.removeEventListener('mouseenter', listeners.enter);\n        img.removeEventListener('mouseleave', listeners.leave);\n        imageListeners.delete(img);\n      }\n    };\n\n    // Observe DOM changes to attach listeners to new images\n    const setupImages = () => {\n      const images = iframeDoc.querySelectorAll<HTMLImageElement>('.ProseMirror img');\n      images.forEach(img => {\n        attachImageListeners(img);\n      });\n    };\n\n    // Initial setup\n    setupImages();\n\n    // Watch for new images and detect when current image is removed\n    const observer = new MutationObserver(() => {\n      setupImages();\n\n      // Clean up listeners for images that are no longer in the document\n      imageListeners.forEach((_listeners, img) => {\n        if (!iframeDoc.body.contains(img)) {\n          detachImageListeners(img);\n        }\n      });\n\n      // If the current image was removed (e.g., via backspace), hide buttons\n      if (currentImgRef.current && !iframeDoc.body.contains(currentImgRef.current)) {\n        hideButtons();\n      }\n    });\n\n    const proseMirror = iframeDoc.querySelector('.ProseMirror');\n    if (proseMirror) {\n      observer.observe(proseMirror, {\n        childList: true,\n        subtree: true\n      });\n    }\n\n    // Hide buttons when clicking elsewhere in the iframe\n    const handleDocClick = (e: Event) => {\n      if (isInstance(e.target, HTMLElement) && e.target.tagName !== 'IMG') {\n        hideButtons();\n      }\n    };\n\n    iframeDoc.addEventListener('click', handleDocClick);\n\n    // Reposition buttons on scroll inside iframe\n    const handleScroll = () => {\n      if (currentImgRef.current) {\n        positionButtons(currentImgRef.current);\n      }\n    };\n\n    const iframeBody = iframeDoc.body;\n    iframeBody.addEventListener('scroll', handleScroll);\n\n    // Reposition buttons on window resize\n    const handleResize = () => {\n      if (currentImgRef.current) {\n        positionButtons(currentImgRef.current);\n      }\n    };\n\n    window.addEventListener('resize', handleResize);\n\n    return () => {\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      observer.disconnect();\n\n      imageListeners.forEach((_listeners, img) => {\n        detachImageListeners(img);\n      });\n\n      iframeDoc.removeEventListener('click', handleDocClick);\n      iframeBody.removeEventListener('scroll', handleScroll);\n      window.removeEventListener('resize', handleResize);\n    };\n  }, [tiptapEditor, iframeRef, positionButtons, scheduleHide, cancelHide, hideButtons]);\n\n  return {\n    hoveredImagePosition,\n    currentImageAttrs,\n    currentImageElement: currentImgRef.current,\n    handleDelete,\n    setIsOverButtons\n  };\n}\n"]}

package/lib/components/Editor/hooks/useTableCellMenu.d.ts

@@ -0,0 +1,22 @@
+import type { RefObject } from 'react';
+import type { Editor as TiptapEditor } from '@tiptap/core';
+import type { CellPosition } from '../TableCellMenu';
+interface UseTableCellMenuParams {
+    tiptapEditor: TiptapEditor | null;
+    iframeRef: RefObject<HTMLIFrameElement>;
+}
+interface UseTableCellMenuReturn {
+    cellPosition: CellPosition | null;
+    isOverMenu: boolean;
+    setIsOverMenu: (value: boolean) => void;
+    addRowBelow: () => void;
+    addRowAbove: () => void;
+    addColumnAfter: () => void;
+    addColumnBefore: () => void;
+    deleteRow: () => void;
+    deleteColumn: () => void;
+    deleteTable: () => void;
+}
+export default function useTableCellMenu({ tiptapEditor, iframeRef }: UseTableCellMenuParams): UseTableCellMenuReturn;
+export {};
+//# sourceMappingURL=useTableCellMenu.d.ts.map

package/lib/components/Editor/hooks/useTableCellMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableCellMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/hooks/useTableCellMenu.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAE3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,UAAU,sBAAsB;IAC9B,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CACzC;AAED,UAAU,sBAAsB;IAC9B,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,YAAY,EACZ,SAAS,EACV,EAAE,sBAAsB,GAAG,sBAAsB,CAuIjD"}