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

package/lib/components/DynamicContentEditor/DynamicContentEditor.d.ts

@@ -1,9 +1,11 @@
 import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { DynamicContentEditorProps } from './DynamicContentEditor.types';
-export declare const StyledSearchPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledSearchPopover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "offset" | "portal"> & {
     offset?: number;
     portal?: boolean;
-}, never>;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
 declare const _default: ForwardRefForwardPropsComponent<DynamicContentEditorProps> & {
     getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["insert-field", "insert-field-modal", "insert-field-modal-cancel", "insert-field-modal-submit"]>;
 };

package/lib/components/DynamicContentEditor/DynamicContentEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACV,+BAA+B,EAGhC,MAAM,yBAAyB,CAAC;AAQjC,OAAO,KAAK,EAAE,yBAAyB,EAAwB,MAAM,8BAA8B,CAAC;AAUpG,eAAO,MAAM,mBAAmB;;;SAE/B,CAAC;;;;AAsWF,wBAAiF"}
+{"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EACV,+BAA+B,EAGhC,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,yBAAyB,EAAwB,MAAM,8BAA8B,CAAC;AAUpG,eAAO,MAAM,mBAAmB;;;;;mBAE/B,CAAC;;;;AAocF,wBAAiF"}

package/lib/components/DynamicContentEditor/DynamicContentEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Button, defaultThemeProp, Menu, menuHelpers, Modal, Popover, StyledPopover, useModalManager, useConsolidatedRef, useI18n, useUID, useTestIds, withTestIds, registerIcon } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, isInstance, Menu, menuHelpers, Modal, Popover, StyledPopover, useModalManager, useConsolidatedRef, useI18n, useUID, useTestIds, withTestIds, registerIcon } from '@pega/cosmos-react-core';
 import * as codeIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/code.icon';
 import { getKeyCommand } from '../RichTextEditor/Toolbar/utils';
 import { Editor } from '../Editor';
@@ -14,14 +14,13 @@ export const StyledSearchPopover = styled(StyledPopover) `
   min-width: 20rem;
 `;
 StyledDynamicContentEditor.defaultProps = defaultThemeProp;
-const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId, form: { dynamicContentPicker, onSubmit }, onActiveFieldChange, label, toolbar, fieldItems, defaultValue, onBlur, onKeyDown: onKeyDownProp, customActions = [], customComponents = [], ...restProps }, ref) {
+const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId, form: { dynamicContentPicker, onSubmit }, onActiveFieldChange, label, toolbar, fieldItems, defaultValue, onBlur, onKeyDown: onKeyDownProp, customActions = [], customComponents = [], linkCustomSource: linkCustomSourceProp, ...restProps }, ref) {
     const testIds = useTestIds(testId, getDynamicContentEditorTestIds);
     const menuID = useUID();
     const { create } = useModalManager();
     const t = useI18n();
     const modalMethods = useRef();
-    const [editor, setEditor] = useState();
-    const [bookmark, setBookmark] = useState();
+    const [editor, setEditor] = useState(null);
     const [fieldMenuItems, setFieldMenuItems] = useState(fieldItems || []);
     const [currentElementId, setCurrentElementId] = useState('');
     const [currentElementContent, setCurrentElementContent] = useState('');
@@ -38,6 +37,7 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId,
         toJSON: () => { }
     });
     const [showFieldsPopover, setShowFieldsPopover] = useState(false);
+    const [editLinkCustomSource, setEditLinkCustomSource] = useState(null);
     const fieldPopoverRef = useRef(null);
     const editorRef = useConsolidatedRef(ref);
     const tooltip = getKeyCommand(navigator.appVersion.includes('Mac'), ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`);
@@ -45,13 +45,7 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId,
         if (!editor)
             return;
         const fieldContent = `<pega-reference role="button" contenteditable="false" data-rule-type='field' data-rule-id=${field.id} ${field.namespace && `data-rule-namespace=${field.namespace}`}>${field.text}</pega-reference>`;
-        if (bookmark) {
-            editor.selection.moveToBookmark(bookmark);
-            editor.selection.setContent(fieldContent);
-        }
-        else {
-            editor.insertContent(fieldContent);
-        }
+        editor.chain().focus().insertContent(fieldContent).run();
         modalMethods.current?.dismiss();
     };
     const modalProps = {
@@ -61,7 +55,6 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId,
         actions: (_jsxs(_Fragment, { children: [_jsx(Button, { "data-testid": testIds.insertFieldModalCancel, variant: 'secondary', onClick: () => modalMethods.current?.dismiss(), children: t('cancel') }), _jsx(Button, { "data-testid": testIds.insertFieldModalSubmit, variant: 'primary', onClick: () => onSubmit(insertField), children: t('submit') })] })),
         center: true,
         onAfterClose: () => {
-            setBookmark(undefined);
             setCurrentElementId('');
             setCurrentElementContent('');
             setCurrentElementNamespace('');
@@ -74,29 +67,21 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId,
                     text: currentElementContent,
                     namespace: currentElementNamespace
                 });
+                return;
             }
+            onActiveFieldChange({ id: '', text: '', namespace: '' });
         }
     };
     const findAndRenameField = (fieldId) => {
         if (!editor || !fieldMenuItems)
             return;
-        const selectedRange = editor.selection.getRng();
-        const endOffset = selectedRange.endOffset;
-        const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);
-        if (stringToSearch === undefined)
-            return;
-        const splitSearch = stringToSearch.split(' ');
-        const fieldString = splitSearch[splitSearch.length - 1];
-        const range = editor.getDoc().createRange();
-        const startPos = stringToSearch.lastIndexOf(fieldString);
-        const endPos = startPos + fieldString.length;
-        range.setStart(selectedRange.commonAncestorContainer, startPos);
-        range.setEnd(selectedRange.commonAncestorContainer, endPos);
-        editor.getDoc().getSelection()?.removeAllRanges();
-        editor.getDoc().getSelection()?.addRange(range);
         const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);
         if (selectedField && isFieldMenuItem(selectedField)) {
-            editor.selection.setContent(`<pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="${selectedField.id}" ${selectedField.namespace && `data-rule-namespace=${selectedField.namespace}`}>${selectedField.primary}</pega-reference>`);
+            editor
+                .chain()
+                .focus()
+                .insertContent(`<pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="${selectedField.id}" ${selectedField.namespace && `data-rule-namespace=${selectedField.namespace}`}>${selectedField.primary}</pega-reference>`)
+                .run();
             setShowFieldsPopover(false);
         }
     };
@@ -123,36 +108,103 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId,
                 setShowFieldsPopover(false);
         }
     };
-    const updateBookmarkAndCurrentElement = (editorSelection) => {
-        const targetEl = editorSelection.getNode();
+    const updateCurrentElement = (targetEl) => {
         const fieldId = targetEl.getAttribute('data-rule-id');
         const fieldNamespace = targetEl.getAttribute('data-rule-namespace');
         const fieldValue = targetEl.innerText;
-        setBookmark(editorSelection.getBookmark());
         setCurrentElementId(fieldId || '');
         setCurrentElementContent(fieldValue);
         setCurrentElementNamespace(fieldNamespace || '');
     };
-    const handleElementClick = ({ target }) => {
-        if (editor && target && target.tagName === 'PEGA-REFERENCE') {
-            updateBookmarkAndCurrentElement(editor.selection);
+    const parsePegaReferenceFromHref = (href) => {
+        const decodedHref = href
+            .replaceAll('&quot;', '"')
+            .replaceAll('&lt;', '<')
+            .replaceAll('&gt;', '>')
+            .replaceAll('&amp;', '&');
+        if (!decodedHref.includes('<pega-reference')) {
+            return null;
+        }
+        const idMatch = /data-rule-id=["']([^"']+)["']/i.exec(decodedHref);
+        if (!idMatch) {
+            return null;
+        }
+        const namespaceMatch = /data-rule-namespace=["']([^"']+)["']/i.exec(decodedHref);
+        return {
+            id: idMatch[1],
+            namespace: namespaceMatch?.[1]
+        };
+    };
+    const getClickableElement = (target) => {
+        if (isInstance(target, HTMLElement)) {
+            return target;
+        }
+        return null;
+    };
+    const handleElementClick = (event) => {
+        const { target } = event;
+        const clickedElement = getClickableElement(target);
+        if (!clickedElement) {
+            return;
+        }
+        if (editor && target && clickedElement.tagName === 'A') {
+            event.preventDefault();
+            const href = clickedElement.getAttribute('href') ?? '';
+            const parsedReference = parsePegaReferenceFromHref(href);
+            const propertyFromHref = parsedReference?.id;
+            const namespaceFromHref = parsedReference?.namespace;
+            const propertyFromMalformedHref = clickedElement.getAttribute('data-rule-id');
+            const namespaceFromMalformedHref = clickedElement.getAttribute('data-rule-namespace') || undefined;
+            const property = propertyFromHref || propertyFromMalformedHref;
+            const namespace = namespaceFromHref || namespaceFromMalformedHref;
+            if (property) {
+                const field = {
+                    id: property,
+                    text: clickedElement.innerText,
+                    namespace
+                };
+                setEditLinkCustomSource(field);
+                onActiveFieldChange(field);
+            }
+        }
+        else if (clickedElement.tagName === 'PEGA-REFERENCE') {
+            if (clickedElement.getAttribute('data-link-source') === 'link') {
+                const field = {
+                    id: clickedElement.getAttribute('data-rule-id') ?? '',
+                    text: clickedElement.innerText,
+                    namespace: clickedElement.getAttribute('data-rule-namespace') || undefined
+                };
+                setEditLinkCustomSource(field);
+                onActiveFieldChange(field);
+            }
+            else {
+                updateCurrentElement(clickedElement);
+            }
         }
         hidePopover();
     };
-    const onInsertField = (incEditor) => {
-        const targetEl = incEditor.selection.getNode();
-        if (targetEl.tagName === 'PEGA-REFERENCE') {
-            updateBookmarkAndCurrentElement(incEditor.selection);
+    const onInsertField = () => {
+        if (!editor)
+            return;
+        // Get the DOM element at the current selection
+        const { from } = editor.state.selection;
+        const domAtPos = editor.view.domAtPos(from);
+        const targetEl = domAtPos.node.parentElement;
+        if (targetEl?.tagName === 'PEGA-REFERENCE') {
+            updateCurrentElement(targetEl);
         }
         else {
             modalMethods.current = create(Modal, modalProps);
         }
     };
-    const isPegaRefActive = (incEditor) => {
-        const targetEl = incEditor.selection.getNode();
-        return targetEl.tagName === 'PEGA-REFERENCE';
+    const isPegaRefActive = () => {
+        if (!editor)
+            return false;
+        // Check if the selected node is a pega-reference element
+        const { $from } = editor.state.selection;
+        return $from.parent.type.name === 'pega-reference';
     };
-    const fieldSelectionPopover = (_jsx(Popover, { show: showFieldsPopover, strategy: 'fixed', ref: fieldPopoverRef, target: {
+    const fieldSelectionPopover = (_jsx(Popover, { show: showFieldsPopover, strategy: 'fixed', ref: fieldPopoverRef, "aria-label": t('rte_insert_field'), target: {
             getBoundingClientRect() {
                 return currentCursorPosition;
             }
@@ -169,44 +221,61 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId,
                     }
                 }
             }
-        ], placement: 'bottom-start', children: fieldMenuItems && (_jsx(Menu, { id: menuID, items: fieldMenuItems, as: StyledSearchPopover, focusControlEl: editor?.getBody() || undefined, mode: 'action', onItemClick: findAndRenameField, variant: 'drill-down' })) }));
+        ], placement: 'bottom-start', children: fieldMenuItems && (_jsx(Menu, { id: menuID, items: fieldMenuItems, as: StyledSearchPopover, focusControlEl: editor?.view.dom || undefined, mode: 'action', onItemClick: findAndRenameField, variant: 'drill-down' })) }));
     useEffect(() => {
         if (currentElementId && currentElementContent)
             modalMethods.current = create(Modal, modalProps);
     }, [currentElementId, currentElementContent]);
-    useEffect(() => {
-        editor?.getDoc().addEventListener('click', handleElementClick);
-        return () => {
-            editor?.getDoc().removeEventListener('click', handleElementClick);
-        };
-    }, [editor, editorRef.current]);
     useEffect(() => {
         if (modalMethods.current) {
             modalMethods.current.update(modalProps);
         }
     }, [modalProps]);
+    // Set up click listener on iframe document for pega-reference interactions
+    useEffect(() => {
+        const iframe = editorRef.current?.element?.querySelector('iframe');
+        const iframeDoc = iframe?.contentDocument;
+        if (!iframeDoc)
+            return;
+        const clickListener = (e) => {
+            handleElementClick(e);
+        };
+        iframeDoc.addEventListener('click', clickListener);
+        return () => {
+            iframeDoc.removeEventListener('click', clickListener);
+        };
+    }, [editor]);
     const onEditorChange = (formEditor) => {
         if (formEditor) {
-            const targetEl = formEditor.selection.getBoundingClientRect();
-            const { left = 0, top = 0 } = targetEl ?? {};
+            // Get cursor position from Tiptap editor
+            const { selection } = formEditor.state;
+            const { from } = selection;
+            // Get the coordinates of the cursor position
+            const coords = formEditor.view.coordsAtPos(from);
             setCurrentCursorPosition({
-                ...formEditor.selection.getBoundingClientRect(),
-                x: left,
-                y: top,
+                bottom: coords.bottom,
+                height: coords.bottom - coords.top,
+                left: coords.left,
+                right: coords.right,
+                top: coords.top,
+                width: coords.right - coords.left,
+                x: coords.left,
+                y: coords.top,
                 toJSON: () => { }
             });
-            if (formEditor.selection.isCollapsed()) {
-                // get the full line string
-                const selectedRange = formEditor.selection.getRng();
-                const endOffset = selectedRange.endOffset;
-                const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);
-                const fieldString = stringToSearch?.split(' ')[stringToSearch.split(' ').length - 1];
-                if (fieldString?.startsWith('@') &&
-                    fieldString.indexOf('@') === fieldString.lastIndexOf('@')) {
-                    filterFieldMenu(fieldString.slice(1));
+            if (selection.empty) {
+                // Get text before cursor to check for @ mentions
+                const textBefore = formEditor.state.doc.textBetween(Math.max(0, from - 50), // Look back up to 50 characters
+                from, ' ');
+                // Get the last word (after last space)
+                const words = textBefore.split(' ');
+                const lastWord = words[words.length - 1];
+                if (lastWord?.startsWith('@') && lastWord.indexOf('@') === lastWord.lastIndexOf('@')) {
+                    filterFieldMenu(lastWord.slice(1));
                 }
-                else
+                else {
                     setShowFieldsPopover(false);
+                }
             }
         }
     };
@@ -230,7 +299,7 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId,
             {
                 createCustomElement: createPegaReferenceElement,
                 name: 'pega-reference',
-                extensionAttributes: ['contenteditable'],
+                extensionAttributes: ['contenteditable', 'data-link-source'],
                 style: pegaReferenceElementStyle
             },
             ...customComponents
@@ -253,7 +322,17 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId,
         ], onInit: setEditor, onChange: onEditorChange, onBlur: () => {
             onBlur?.();
             hidePopover();
-        }, onKeyDown: onKeyDown, defaultValue: defaultValue, children: fieldSelectionPopover }));
+        }, onKeyDown: onKeyDown, defaultValue: defaultValue, linkCustomSource: {
+            ...linkCustomSourceProp,
+            edit: editLinkCustomSource ?? linkCustomSourceProp?.edit,
+            onDismissEdit: reason => {
+                if (reason !== 'apply' && editLinkCustomSource) {
+                    onActiveFieldChange(editLinkCustomSource);
+                }
+                setEditLinkCustomSource(null);
+                linkCustomSourceProp?.onDismissEdit?.(reason);
+            }
+        }, children: fieldSelectionPopover }));
 });
 export default withTestIds(DynamicContentEditor, getDynamicContentEditorTestIds);
 //# sourceMappingURL=DynamicContentEditor.js.map

package/lib/components/DynamicContentEditor/DynamicContentEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\nimport type { Bookmark, Editor as TinyMCEEditor, EditorSelection } from 'tinymce';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Menu,\n  menuHelpers,\n  Modal,\n  Popover,\n  StyledPopover,\n  useModalManager,\n  useConsolidatedRef,\n  useI18n,\n  useUID,\n  useTestIds,\n  withTestIds,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport type {\n  ForwardRefForwardPropsComponent,\n  ModalMethods,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\nimport * as codeIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/code.icon';\n\nimport { getKeyCommand } from '../RichTextEditor/Toolbar/utils';\nimport { Editor } from '../Editor';\nimport type { EditorProps } from '../Editor';\n\nimport { isFieldMenuItem } from './DynamicContentEditor.types';\nimport type { DynamicContentEditorProps, FieldItems, ItemType } from './DynamicContentEditor.types';\nimport { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';\nimport { getDynamicContentEditorTestIds } from './DynamicContentEditor.test-ids';\n\nregisterIcon(codeIcon);\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: ForwardRefForwardPropsComponent<DynamicContentEditorProps> = forwardRef(\n  function DynamicContentEditor(\n    {\n      testId,\n      form: { dynamicContentPicker, onSubmit },\n      onActiveFieldChange,\n      label,\n      toolbar,\n      fieldItems,\n      defaultValue,\n      onBlur,\n      onKeyDown: onKeyDownProp,\n      customActions = [],\n      customComponents = [],\n      ...restProps\n    }: PropsWithoutRef<DynamicContentEditorProps>,\n    ref: DynamicContentEditorProps['ref']\n  ) {\n    const testIds = useTestIds(testId, getDynamicContentEditorTestIds);\n    const menuID = useUID();\n    const { create } = useModalManager();\n    const t = useI18n();\n\n    const modalMethods = useRef<ModalMethods>();\n    const [editor, setEditor] = useState<TinyMCEEditor | undefined>();\n    const [bookmark, setBookmark] = useState<Bookmark | undefined>();\n    const [fieldMenuItems, setFieldMenuItems] = useState<FieldItems[]>(fieldItems || []);\n    const [currentElementId, setCurrentElementId] = useState('');\n    const [currentElementContent, setCurrentElementContent] = useState('');\n    const [currentElementNamespace, setCurrentElementNamespace] = useState('');\n    const [currentCursorPosition, setCurrentCursorPosition] = useState({\n      bottom: 0,\n      height: 0,\n      left: 0,\n      right: 0,\n      top: 0,\n      width: 0,\n      x: 0,\n      y: 0,\n      toJSON: () => {}\n    });\n    const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n    const fieldPopoverRef = useRef<HTMLDivElement>(null);\n    const editorRef = useConsolidatedRef(ref);\n\n    const tooltip = getKeyCommand(\n      navigator.appVersion.includes('Mac'),\n      ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n    );\n\n    const insertField = (field: ItemType) => {\n      if (!editor) return;\n\n      const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${\n        field.id\n      } ${field.namespace && `data-rule-namespace=${field.namespace}`}>${\n        field.text\n      }</pega-reference>`;\n      if (bookmark) {\n        editor.selection.moveToBookmark(bookmark);\n        editor.selection.setContent(fieldContent);\n      } else {\n        editor.insertContent(fieldContent);\n      }\n\n      modalMethods.current?.dismiss();\n    };\n\n    const modalProps = {\n      'data-testid': testIds.insertFieldModal,\n      children: dynamicContentPicker,\n      heading: t('rte_insert_field'),\n      actions: (\n        <>\n          <Button\n            data-testid={testIds.insertFieldModalCancel}\n            variant='secondary'\n            onClick={() => modalMethods.current?.dismiss()}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            data-testid={testIds.insertFieldModalSubmit}\n            variant='primary'\n            onClick={() => onSubmit(insertField)}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      ),\n      center: true,\n      onAfterClose: () => {\n        setBookmark(undefined);\n        setCurrentElementId('');\n        setCurrentElementContent('');\n        setCurrentElementNamespace('');\n        onActiveFieldChange({ id: '', text: '', namespace: '' });\n      },\n      onBeforeOpen: () => {\n        if (currentElementId) {\n          onActiveFieldChange({\n            id: currentElementId,\n            text: currentElementContent,\n            namespace: currentElementNamespace\n          });\n        }\n      }\n    };\n\n    const findAndRenameField = (fieldId: string) => {\n      if (!editor || !fieldMenuItems) return;\n\n      const selectedRange = editor.selection.getRng();\n      const endOffset = selectedRange.endOffset;\n      const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n      if (stringToSearch === undefined) return;\n\n      const splitSearch = stringToSearch.split(' ');\n      const fieldString = splitSearch[splitSearch.length - 1];\n      const range = editor.getDoc().createRange();\n\n      const startPos = stringToSearch.lastIndexOf(fieldString);\n      const endPos = startPos + fieldString.length;\n      range.setStart(selectedRange.commonAncestorContainer, startPos);\n      range.setEnd(selectedRange.commonAncestorContainer, endPos);\n      editor.getDoc().getSelection()?.removeAllRanges();\n      editor.getDoc().getSelection()?.addRange(range);\n\n      const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n      if (selectedField && isFieldMenuItem(selectedField)) {\n        editor.selection.setContent(\n          `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"${\n            selectedField.id\n          }\" ${selectedField.namespace && `data-rule-namespace=${selectedField.namespace}`}>${\n            selectedField.primary\n          }</pega-reference>`\n        );\n        setShowFieldsPopover(false);\n      }\n    };\n\n    const hidePopover = () => {\n      if (fieldPopoverRef) setShowFieldsPopover(false);\n    };\n\n    const filterFieldMenu = (searchString: string) => {\n      setShowFieldsPopover(true);\n      setFieldMenuItems(fieldItems || []);\n      if (/\\s/.test(searchString)) {\n        setShowFieldsPopover(false);\n        return;\n      }\n      if (searchString && fieldMenuItems) {\n        const newFieldMenuItems: FieldItems[] = menuHelpers\n          .flatten(fieldMenuItems)\n          .filter(({ primary }) =>\n            primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n          );\n        if (newFieldMenuItems) {\n          setShowFieldsPopover(true);\n          setFieldMenuItems(newFieldMenuItems);\n        } else setShowFieldsPopover(false);\n      }\n    };\n\n    const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n      const targetEl = editorSelection.getNode() as HTMLElement;\n      const fieldId = targetEl.getAttribute('data-rule-id');\n      const fieldNamespace = targetEl.getAttribute('data-rule-namespace');\n      const fieldValue = targetEl.innerText;\n      setBookmark(editorSelection.getBookmark());\n      setCurrentElementId(fieldId || '');\n      setCurrentElementContent(fieldValue);\n      setCurrentElementNamespace(fieldNamespace || '');\n    };\n\n    const handleElementClick = ({ target }: MouseEvent) => {\n      if (editor && target && (target as HTMLElement).tagName === 'PEGA-REFERENCE') {\n        updateBookmarkAndCurrentElement(editor.selection);\n      }\n      hidePopover();\n    };\n\n    const onInsertField = (incEditor: TinyMCEEditor) => {\n      const targetEl = incEditor.selection.getNode();\n      if (targetEl.tagName === 'PEGA-REFERENCE') {\n        updateBookmarkAndCurrentElement(incEditor.selection);\n      } else {\n        modalMethods.current = create(Modal, modalProps);\n      }\n    };\n\n    const isPegaRefActive = (incEditor: TinyMCEEditor) => {\n      const targetEl = incEditor.selection.getNode();\n      return targetEl.tagName === 'PEGA-REFERENCE';\n    };\n\n    const fieldSelectionPopover = (\n      <Popover\n        show={showFieldsPopover}\n        strategy='fixed'\n        ref={fieldPopoverRef}\n        target={{\n          getBoundingClientRect() {\n            return currentCursorPosition;\n          }\n        }}\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: () => {\n                const iframe = editorRef.current?.element?.querySelector('iframe');\n                const iframeRect = iframe?.getBoundingClientRect();\n                const x = iframeRect?.x ?? 0;\n                const y = iframeRect?.y ?? 0;\n                return [x, y] satisfies [number, number];\n              }\n            }\n          }\n        ]}\n        placement='bottom-start'\n      >\n        {fieldMenuItems && (\n          <Menu\n            id={menuID}\n            items={fieldMenuItems}\n            as={StyledSearchPopover}\n            focusControlEl={editor?.getBody() || undefined}\n            mode='action'\n            onItemClick={findAndRenameField}\n            variant='drill-down'\n          />\n        )}\n      </Popover>\n    );\n\n    useEffect(() => {\n      if (currentElementId && currentElementContent)\n        modalMethods.current = create(Modal, modalProps);\n    }, [currentElementId, currentElementContent]);\n\n    useEffect(() => {\n      editor?.getDoc().addEventListener('click', handleElementClick);\n      return () => {\n        editor?.getDoc().removeEventListener('click', handleElementClick);\n      };\n    }, [editor, editorRef.current]);\n\n    useEffect(() => {\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      }\n    }, [modalProps]);\n\n    const onEditorChange: EditorProps['onChange'] = (formEditor?: TinyMCEEditor) => {\n      if (formEditor) {\n        const targetEl = formEditor.selection.getBoundingClientRect();\n        const { left = 0, top = 0 } = targetEl ?? {};\n        setCurrentCursorPosition({\n          ...formEditor.selection.getBoundingClientRect(),\n          x: left,\n          y: top,\n          toJSON: () => {}\n        });\n\n        if (formEditor.selection.isCollapsed()) {\n          // get the full line string\n          const selectedRange = formEditor.selection.getRng();\n          const endOffset = selectedRange.endOffset;\n          const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n            0,\n            endOffset\n          );\n          const fieldString = stringToSearch?.split(' ')[stringToSearch.split(' ').length - 1];\n          if (\n            fieldString?.startsWith('@') &&\n            fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n          ) {\n            filterFieldMenu(fieldString.slice(1));\n          } else setShowFieldsPopover(false);\n        }\n      }\n    };\n\n    const onKeyDown: EditorProps['onKeyDown'] = event => {\n      if (onKeyDownProp) {\n        onKeyDownProp(event);\n      }\n\n      if (\n        (event?.key === 'Enter' ||\n          event?.key === 'ArrowLeft' ||\n          event?.key === 'ArrowRight' ||\n          event?.key === 'ArrowDown' ||\n          event?.key === 'ArrowUp') &&\n        !!fieldPopoverRef.current\n      ) {\n        event?.preventDefault();\n      }\n      if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n        hidePopover();\n      }\n    };\n\n    return (\n      <Editor\n        data-testid={testIds.root}\n        ref={editorRef}\n        {...restProps}\n        label={label}\n        toolbar={toolbar}\n        customComponents={[\n          {\n            createCustomElement: createPegaReferenceElement,\n            name: 'pega-reference',\n            extensionAttributes: ['contenteditable'],\n            style: pegaReferenceElementStyle\n          },\n          ...customComponents\n        ]}\n        customActions={[\n          {\n            'data-testid': testIds.insertField,\n            icon: 'code',\n            text: tooltip,\n            onMouseDown: () => {\n              modalMethods.current = create(Modal, modalProps);\n            },\n            active: isPegaRefActive,\n            shortcut: {\n              pattern: 'meta+191',\n              description: tooltip,\n              command: onInsertField\n            }\n          },\n          ...customActions\n        ]}\n        onInit={setEditor}\n        onChange={onEditorChange}\n        onBlur={() => {\n          onBlur?.();\n          hidePopover();\n        }}\n        onKeyDown={onKeyDown}\n        defaultValue={defaultValue}\n      >\n        {fieldSelectionPopover}\n      </Editor>\n    );\n  }\n);\n\nexport default withTestIds(DynamicContentEditor, getDynamicContentEditorTestIds);\n"]}
+{"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useState } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport {\n  Button,\n  defaultThemeProp,\n  isInstance,\n  Menu,\n  menuHelpers,\n  Modal,\n  Popover,\n  StyledPopover,\n  useModalManager,\n  useConsolidatedRef,\n  useI18n,\n  useUID,\n  useTestIds,\n  withTestIds,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport type {\n  ForwardRefForwardPropsComponent,\n  ModalMethods,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\nimport * as codeIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/code.icon';\n\nimport { getKeyCommand } from '../RichTextEditor/Toolbar/utils';\nimport { Editor } from '../Editor';\nimport type { EditorProps } from '../Editor';\nimport type { LinkCustomSourceEditValue } from '../Editor/Editor.types';\n\nimport { isFieldMenuItem } from './DynamicContentEditor.types';\nimport type { DynamicContentEditorProps, FieldItems, ItemType } from './DynamicContentEditor.types';\nimport { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';\nimport { getDynamicContentEditorTestIds } from './DynamicContentEditor.test-ids';\n\nregisterIcon(codeIcon);\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: ForwardRefForwardPropsComponent<DynamicContentEditorProps> = forwardRef(\n  function DynamicContentEditor(\n    {\n      testId,\n      form: { dynamicContentPicker, onSubmit },\n      onActiveFieldChange,\n      label,\n      toolbar,\n      fieldItems,\n      defaultValue,\n      onBlur,\n      onKeyDown: onKeyDownProp,\n      customActions = [],\n      customComponents = [],\n      linkCustomSource: linkCustomSourceProp,\n      ...restProps\n    }: PropsWithoutRef<DynamicContentEditorProps>,\n    ref: DynamicContentEditorProps['ref']\n  ) {\n    const testIds = useTestIds(testId, getDynamicContentEditorTestIds);\n    const menuID = useUID();\n    const { create } = useModalManager();\n    const t = useI18n();\n\n    const modalMethods = useRef<ModalMethods>();\n    const [editor, setEditor] = useState<TiptapEditor | null>(null);\n    const [fieldMenuItems, setFieldMenuItems] = useState<FieldItems[]>(fieldItems || []);\n    const [currentElementId, setCurrentElementId] = useState('');\n    const [currentElementContent, setCurrentElementContent] = useState('');\n    const [currentElementNamespace, setCurrentElementNamespace] = useState('');\n    const [currentCursorPosition, setCurrentCursorPosition] = useState({\n      bottom: 0,\n      height: 0,\n      left: 0,\n      right: 0,\n      top: 0,\n      width: 0,\n      x: 0,\n      y: 0,\n      toJSON: () => {}\n    });\n    const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n    const [editLinkCustomSource, setEditLinkCustomSource] =\n      useState<LinkCustomSourceEditValue | null>(null);\n\n    const fieldPopoverRef = useRef<HTMLDivElement>(null);\n    const editorRef = useConsolidatedRef(ref);\n\n    const tooltip = getKeyCommand(\n      navigator.appVersion.includes('Mac'),\n      ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n    );\n\n    const insertField = (field: ItemType) => {\n      if (!editor) return;\n\n      const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${\n        field.id\n      } ${field.namespace && `data-rule-namespace=${field.namespace}`}>${\n        field.text\n      }</pega-reference>`;\n\n      editor.chain().focus().insertContent(fieldContent).run();\n      modalMethods.current?.dismiss();\n    };\n\n    const modalProps = {\n      'data-testid': testIds.insertFieldModal,\n      children: dynamicContentPicker,\n      heading: t('rte_insert_field'),\n      actions: (\n        <>\n          <Button\n            data-testid={testIds.insertFieldModalCancel}\n            variant='secondary'\n            onClick={() => modalMethods.current?.dismiss()}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            data-testid={testIds.insertFieldModalSubmit}\n            variant='primary'\n            onClick={() => onSubmit(insertField)}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      ),\n      center: true,\n      onAfterClose: () => {\n        setCurrentElementId('');\n        setCurrentElementContent('');\n        setCurrentElementNamespace('');\n        onActiveFieldChange({ id: '', text: '', namespace: '' });\n      },\n      onBeforeOpen: () => {\n        if (currentElementId) {\n          onActiveFieldChange({\n            id: currentElementId,\n            text: currentElementContent,\n            namespace: currentElementNamespace\n          });\n          return;\n        }\n        onActiveFieldChange({ id: '', text: '', namespace: '' });\n      }\n    };\n\n    const findAndRenameField = (fieldId: string) => {\n      if (!editor || !fieldMenuItems) return;\n\n      const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n      if (selectedField && isFieldMenuItem(selectedField)) {\n        editor\n          .chain()\n          .focus()\n          .insertContent(\n            `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"${\n              selectedField.id\n            }\" ${selectedField.namespace && `data-rule-namespace=${selectedField.namespace}`}>${\n              selectedField.primary\n            }</pega-reference>`\n          )\n          .run();\n        setShowFieldsPopover(false);\n      }\n    };\n\n    const hidePopover = () => {\n      if (fieldPopoverRef) setShowFieldsPopover(false);\n    };\n\n    const filterFieldMenu = (searchString: string) => {\n      setShowFieldsPopover(true);\n      setFieldMenuItems(fieldItems || []);\n      if (/\\s/.test(searchString)) {\n        setShowFieldsPopover(false);\n        return;\n      }\n      if (searchString && fieldMenuItems) {\n        const newFieldMenuItems: FieldItems[] = menuHelpers\n          .flatten(fieldMenuItems)\n          .filter(({ primary }) =>\n            primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n          );\n        if (newFieldMenuItems) {\n          setShowFieldsPopover(true);\n          setFieldMenuItems(newFieldMenuItems);\n        } else setShowFieldsPopover(false);\n      }\n    };\n\n    const updateCurrentElement = (targetEl: HTMLElement) => {\n      const fieldId = targetEl.getAttribute('data-rule-id');\n      const fieldNamespace = targetEl.getAttribute('data-rule-namespace');\n      const fieldValue = targetEl.innerText;\n      setCurrentElementId(fieldId || '');\n      setCurrentElementContent(fieldValue);\n      setCurrentElementNamespace(fieldNamespace || '');\n    };\n\n    const parsePegaReferenceFromHref = (href: string) => {\n      const decodedHref = href\n        .replaceAll('&quot;', '\"')\n        .replaceAll('&lt;', '<')\n        .replaceAll('&gt;', '>')\n        .replaceAll('&amp;', '&');\n      if (!decodedHref.includes('<pega-reference')) {\n        return null;\n      }\n\n      const idMatch = /data-rule-id=[\"']([^\"']+)[\"']/i.exec(decodedHref);\n      if (!idMatch) {\n        return null;\n      }\n\n      const namespaceMatch = /data-rule-namespace=[\"']([^\"']+)[\"']/i.exec(decodedHref);\n      return {\n        id: idMatch[1],\n        namespace: namespaceMatch?.[1]\n      };\n    };\n\n    const getClickableElement = (target: EventTarget | null) => {\n      if (isInstance(target, HTMLElement)) {\n        return target;\n      }\n      return null;\n    };\n\n    const handleElementClick = (event: MouseEvent) => {\n      const { target } = event;\n\n      const clickedElement = getClickableElement(target);\n      if (!clickedElement) {\n        return;\n      }\n\n      if (editor && target && clickedElement.tagName === 'A') {\n        event.preventDefault();\n        const href = clickedElement.getAttribute('href') ?? '';\n        const parsedReference = parsePegaReferenceFromHref(href);\n        const propertyFromHref = parsedReference?.id;\n        const namespaceFromHref = parsedReference?.namespace;\n        const propertyFromMalformedHref = clickedElement.getAttribute('data-rule-id');\n        const namespaceFromMalformedHref =\n          clickedElement.getAttribute('data-rule-namespace') || undefined;\n        const property = propertyFromHref || propertyFromMalformedHref;\n        const namespace = namespaceFromHref || namespaceFromMalformedHref;\n\n        if (property) {\n          const field = {\n            id: property,\n            text: clickedElement.innerText,\n            namespace\n          };\n          setEditLinkCustomSource(field);\n          onActiveFieldChange(field);\n        }\n      } else if (clickedElement.tagName === 'PEGA-REFERENCE') {\n        if (clickedElement.getAttribute('data-link-source') === 'link') {\n          const field = {\n            id: clickedElement.getAttribute('data-rule-id') ?? '',\n            text: clickedElement.innerText,\n            namespace: clickedElement.getAttribute('data-rule-namespace') || undefined\n          };\n          setEditLinkCustomSource(field);\n          onActiveFieldChange(field);\n        } else {\n          updateCurrentElement(clickedElement);\n        }\n      }\n      hidePopover();\n    };\n\n    const onInsertField = () => {\n      if (!editor) return;\n\n      // Get the DOM element at the current selection\n      const { from } = editor.state.selection;\n      const domAtPos = editor.view.domAtPos(from);\n      const targetEl = domAtPos.node.parentElement;\n\n      if (targetEl?.tagName === 'PEGA-REFERENCE') {\n        updateCurrentElement(targetEl);\n      } else {\n        modalMethods.current = create(Modal, modalProps);\n      }\n    };\n\n    const isPegaRefActive = () => {\n      if (!editor) return false;\n\n      // Check if the selected node is a pega-reference element\n      const { $from } = editor.state.selection;\n      return $from.parent.type.name === 'pega-reference';\n    };\n\n    const fieldSelectionPopover = (\n      <Popover\n        show={showFieldsPopover}\n        strategy='fixed'\n        ref={fieldPopoverRef}\n        aria-label={t('rte_insert_field')}\n        target={{\n          getBoundingClientRect() {\n            return currentCursorPosition;\n          }\n        }}\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: () => {\n                const iframe = editorRef.current?.element?.querySelector('iframe');\n                const iframeRect = iframe?.getBoundingClientRect();\n                const x = iframeRect?.x ?? 0;\n                const y = iframeRect?.y ?? 0;\n                return [x, y] satisfies [number, number];\n              }\n            }\n          }\n        ]}\n        placement='bottom-start'\n      >\n        {fieldMenuItems && (\n          <Menu\n            id={menuID}\n            items={fieldMenuItems}\n            as={StyledSearchPopover}\n            focusControlEl={editor?.view.dom || undefined}\n            mode='action'\n            onItemClick={findAndRenameField}\n            variant='drill-down'\n          />\n        )}\n      </Popover>\n    );\n\n    useEffect(() => {\n      if (currentElementId && currentElementContent)\n        modalMethods.current = create(Modal, modalProps);\n    }, [currentElementId, currentElementContent]);\n\n    useEffect(() => {\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      }\n    }, [modalProps]);\n\n    // Set up click listener on iframe document for pega-reference interactions\n    useEffect(() => {\n      const iframe = editorRef.current?.element?.querySelector('iframe');\n      const iframeDoc = iframe?.contentDocument;\n      if (!iframeDoc) return;\n\n      const clickListener = (e: MouseEvent) => {\n        handleElementClick(e);\n      };\n\n      iframeDoc.addEventListener('click', clickListener);\n\n      return () => {\n        iframeDoc.removeEventListener('click', clickListener);\n      };\n    }, [editor]);\n\n    const onEditorChange: EditorProps['onChange'] = (formEditor?: TiptapEditor) => {\n      if (formEditor) {\n        // Get cursor position from Tiptap editor\n        const { selection } = formEditor.state;\n        const { from } = selection;\n\n        // Get the coordinates of the cursor position\n        const coords = formEditor.view.coordsAtPos(from);\n\n        setCurrentCursorPosition({\n          bottom: coords.bottom,\n          height: coords.bottom - coords.top,\n          left: coords.left,\n          right: coords.right,\n          top: coords.top,\n          width: coords.right - coords.left,\n          x: coords.left,\n          y: coords.top,\n          toJSON: () => {}\n        });\n\n        if (selection.empty) {\n          // Get text before cursor to check for @ mentions\n          const textBefore = formEditor.state.doc.textBetween(\n            Math.max(0, from - 50), // Look back up to 50 characters\n            from,\n            ' '\n          );\n\n          // Get the last word (after last space)\n          const words = textBefore.split(' ');\n          const lastWord = words[words.length - 1];\n\n          if (lastWord?.startsWith('@') && lastWord.indexOf('@') === lastWord.lastIndexOf('@')) {\n            filterFieldMenu(lastWord.slice(1));\n          } else {\n            setShowFieldsPopover(false);\n          }\n        }\n      }\n    };\n\n    const onKeyDown: EditorProps['onKeyDown'] = event => {\n      if (onKeyDownProp) {\n        onKeyDownProp(event);\n      }\n\n      if (\n        (event?.key === 'Enter' ||\n          event?.key === 'ArrowLeft' ||\n          event?.key === 'ArrowRight' ||\n          event?.key === 'ArrowDown' ||\n          event?.key === 'ArrowUp') &&\n        !!fieldPopoverRef.current\n      ) {\n        event?.preventDefault();\n      }\n      if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n        hidePopover();\n      }\n    };\n\n    return (\n      <Editor\n        data-testid={testIds.root}\n        ref={editorRef}\n        {...restProps}\n        label={label}\n        toolbar={toolbar}\n        customComponents={[\n          {\n            createCustomElement: createPegaReferenceElement,\n            name: 'pega-reference',\n            extensionAttributes: ['contenteditable', 'data-link-source'],\n            style: pegaReferenceElementStyle\n          },\n          ...customComponents\n        ]}\n        customActions={[\n          {\n            'data-testid': testIds.insertField,\n            icon: 'code',\n            text: tooltip,\n            onMouseDown: () => {\n              modalMethods.current = create(Modal, modalProps);\n            },\n            active: isPegaRefActive,\n            shortcut: {\n              pattern: 'meta+191',\n              description: tooltip,\n              command: onInsertField\n            }\n          },\n          ...customActions\n        ]}\n        onInit={setEditor}\n        onChange={onEditorChange}\n        onBlur={() => {\n          onBlur?.();\n          hidePopover();\n        }}\n        onKeyDown={onKeyDown}\n        defaultValue={defaultValue}\n        linkCustomSource={{\n          ...linkCustomSourceProp,\n          edit: editLinkCustomSource ?? linkCustomSourceProp?.edit,\n          onDismissEdit: reason => {\n            if (reason !== 'apply' && editLinkCustomSource) {\n              onActiveFieldChange(editLinkCustomSource);\n            }\n            setEditLinkCustomSource(null);\n            linkCustomSourceProp?.onDismissEdit?.(reason);\n          }\n        }}\n      >\n        {fieldSelectionPopover}\n      </Editor>\n    );\n  }\n);\n\nexport default withTestIds(DynamicContentEditor, getDynamicContentEditorTestIds);\n"]}

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import type { TestIdProp } from '@pega/cosmos-react-core';
 import type { MenuGroupProps, MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
 import type { EditorProps } from '../Editor';
+import type { LinkCustomSourceConfig } from '../Editor/Editor.types';
 export type ItemType = {
     id: string;
     text: string;
@@ -28,6 +29,7 @@ export interface DynamicContentEditorProps extends EditorProps, TestIdProp {
     fieldItems?: FieldItems[];
     defaultValue?: string;
     onBlur?: () => void;
+    linkCustomSource?: LinkCustomSourceConfig;
 }
 export interface DynamicContentEditorContextProps extends DynamicContentEditorProps {
     updateProperties?: (selectedfield: ItemType) => void;

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACd,MAAM,wDAAwD,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,aAAa,GAAG;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC;AAExD,eAAO,MAAM,eAAe,GAAI,MAAM,UAAU,KAAG,IAAI,IAAI,aACjC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,WAAW,EAAE,UAAU;IACxE,wBAAwB;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;QACnE,oBAAoB,EAAE,SAAS,CAAC;KACjC,CAAC;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC/C,+BAA+B;IAC/B,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gCAAiC,SAAQ,yBAAyB;IACjF,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD"}
+{"version":3,"file":"DynamicContentEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACd,MAAM,wDAAwD,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAErE,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,aAAa,GAAG;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC;AAExD,eAAO,MAAM,eAAe,GAAI,MAAM,UAAU,KAAG,IAAI,IAAI,aACjC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,WAAW,EAAE,UAAU;IACxE,wBAAwB;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;QACnE,oBAAoB,EAAE,SAAS,CAAC;KACjC,CAAC;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC/C,+BAA+B;IAC/B,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;CAC3C;AAED,MAAM,WAAW,gCAAiC,SAAQ,yBAAyB;IACjF,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD"}

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.types.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AA2BlD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAgB,EAAyB,EAAE,CACzE,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import type { ReactNode } from 'react';\n\nimport { hasProp } from '@pega/cosmos-react-core';\nimport type { TestIdProp } from '@pega/cosmos-react-core';\nimport type {\n  MenuGroupProps,\n  MenuItemProps\n} from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nimport type { EditorProps } from '../Editor';\n\nexport type ItemType = {\n  id: string;\n  text: string;\n  namespace?: string;\n};\n\nexport type FieldMenuItem = MenuItemProps & {\n  namespace?: string;\n  items?: FieldItems[];\n};\n\nexport type FieldMenuGroup = MenuGroupProps & {\n  namespace?: string;\n  items?: FieldItems[];\n};\n\nexport type FieldItems = FieldMenuItem | FieldMenuGroup;\n\nexport const isFieldMenuItem = (item: FieldItems): item is FieldMenuItem =>\n  hasProp(item, 'primary');\n\nexport interface DynamicContentEditorProps extends EditorProps, TestIdProp {\n  /** Insert field form */\n  form: {\n    onSubmit: (insertField: (selectedField: ItemType) => void) => void;\n    dynamicContentPicker: ReactNode;\n  };\n  onActiveFieldChange: (field: ItemType) => void;\n  /** Property selection array */\n  fieldItems?: FieldItems[];\n  defaultValue?: string;\n  onBlur?: () => void;\n}\n\nexport interface DynamicContentEditorContextProps extends DynamicContentEditorProps {\n  updateProperties?: (selectedfield: ItemType) => void;\n}\n"]}
+{"version":3,"file":"DynamicContentEditor.types.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AA4BlD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAgB,EAAyB,EAAE,CACzE,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import type { ReactNode } from 'react';\n\nimport { hasProp } from '@pega/cosmos-react-core';\nimport type { TestIdProp } from '@pega/cosmos-react-core';\nimport type {\n  MenuGroupProps,\n  MenuItemProps\n} from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nimport type { EditorProps } from '../Editor';\nimport type { LinkCustomSourceConfig } from '../Editor/Editor.types';\n\nexport type ItemType = {\n  id: string;\n  text: string;\n  namespace?: string;\n};\n\nexport type FieldMenuItem = MenuItemProps & {\n  namespace?: string;\n  items?: FieldItems[];\n};\n\nexport type FieldMenuGroup = MenuGroupProps & {\n  namespace?: string;\n  items?: FieldItems[];\n};\n\nexport type FieldItems = FieldMenuItem | FieldMenuGroup;\n\nexport const isFieldMenuItem = (item: FieldItems): item is FieldMenuItem =>\n  hasProp(item, 'primary');\n\nexport interface DynamicContentEditorProps extends EditorProps, TestIdProp {\n  /** Insert field form */\n  form: {\n    onSubmit: (insertField: (selectedField: ItemType) => void) => void;\n    dynamicContentPicker: ReactNode;\n  };\n  onActiveFieldChange: (field: ItemType) => void;\n  /** Property selection array */\n  fieldItems?: FieldItems[];\n  defaultValue?: string;\n  onBlur?: () => void;\n  linkCustomSource?: LinkCustomSourceConfig;\n}\n\nexport interface DynamicContentEditorContextProps extends DynamicContentEditorProps {\n  updateProperties?: (selectedfield: ItemType) => void;\n}\n"]}

package/lib/components/Editor/Editor.context.d.ts

@@ -1,9 +1,9 @@
-import type { Editor } from 'tinymce';
-interface EditorContextType {
-    addImage: (image: File) => void;
-    editor: Editor;
+import type { Editor } from '@tiptap/core';
+interface EditorContextValue {
+    addImage: (image: File, imageId?: string, alt?: string) => void;
+    editor: Editor | null;
 }
-declare const EditorContext: import("react").Context<EditorContextType>;
-export declare const useEditorContext: () => EditorContextType;
+declare const EditorContext: import("react").Context<EditorContextValue>;
+export declare const useEditorContext: () => EditorContextValue;
 export default EditorContext;
 //# sourceMappingURL=Editor.context.d.ts.map

package/lib/components/Editor/Editor.context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.context.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,aAAa,4CAGjB,CAAC;AAEH,eAAO,MAAM,gBAAgB,yBAE5B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"Editor.context.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE3C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,aAAa,6CAGjB,CAAC;AAEH,eAAO,MAAM,gBAAgB,0BAE5B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Editor/Editor.context.js

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 const EditorContext = createContext({
     addImage: () => { },
-    editor: {}
+    editor: null
 });
 export const useEditorContext = () => {
     return useContext(EditorContext);

package/lib/components/Editor/Editor.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.context.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAQlD,MAAM,aAAa,GAAG,aAAa,CAAoB;IACrD,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,MAAM,EAAE,EAAY;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { createContext, useContext } from 'react';\nimport type { Editor } from 'tinymce';\n\ninterface EditorContextType {\n  addImage: (image: File) => void;\n  editor: Editor;\n}\n\nconst EditorContext = createContext<EditorContextType>({\n  addImage: () => {},\n  editor: {} as Editor\n});\n\nexport const useEditorContext = () => {\n  return useContext(EditorContext);\n};\n\nexport default EditorContext;\n"]}
+{"version":3,"file":"Editor.context.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAQlD,MAAM,aAAa,GAAG,aAAa,CAAqB;IACtD,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { createContext, useContext } from 'react';\nimport type { Editor } from '@tiptap/core';\n\ninterface EditorContextValue {\n  addImage: (image: File, imageId?: string, alt?: string) => void;\n  editor: Editor | null;\n}\n\nconst EditorContext = createContext<EditorContextValue>({\n  addImage: () => {},\n  editor: null\n});\n\nexport const useEditorContext = () => {\n  return useContext(EditorContext);\n};\n\nexport default EditorContext;\n"]}

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

@@ -1,16 +1,7 @@
-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 type { DefaultTheme } from 'styled-components';
 import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { EditorProps } from './Editor.types';
-export declare const getImageStyles: (theme: DefaultTheme) => string;
-export declare const getPlaceholderStyles: (theme: DefaultTheme) => string;
 declare const _default: ForwardRefForwardPropsComponent<EditorProps> & {
-    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["toolbar", "text-styles", "bold", "italic", "strike-through", "bulleted-list", "numbered-list", "indent", "unindent", "link", "image", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["iframe", "toolbar", "text-styles", "bold", "italic", "strike-through", "underline", "subscript", "superscript", "font-family", "font-size", "text-color", "background-color", "alignment", "align-left", "align-center", "align-right", "bulleted-list", "numbered-list", "indent", "unindent", "table", "link", "image", "source-code", "ai-rewrite", "overflow", "word-count", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=Editor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"AAEA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAa5B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAmBtD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAa/E,OAAO,KAAK,EAAmB,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAqBnE,eAAO,MAAM,cAAc,GAAI,OAAO,YAAY,WAQjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,YAAY,WAiBvD,CAAC;;;;AAmqBF,wBAA4D"}
+{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAM/E,OAAO,KAAK,EAAE,WAAW,EAAgC,MAAM,gBAAgB,CAAC;;;;AA6oBhF,wBAAqD"}