npm - @pega/cosmos-react-rte - Versions diffs - 8.0.0-build.9.0 → 8.0.0 - Mend

@pega/cosmos-react-rte 8.0.0-build.9.0 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

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

@@ -1,11 +1,10 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+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, {
     offset?: number;
     portal?: boolean;
 }, never>;
-declare const _default: FunctionComponent<DynamicContentEditorProps & ForwardProps> & {
+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"]>;
 };
 export default _default;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,~~EAAE~~,~~iBAAiB~~,~~EAAmB,~~MAAM,~~OAAO,CAAC;AAmBhE,OAAO,KAAK,EAAE,YAAY,EAAmC,MAAM,~~yBAAyB,CAAC;~~AAO7F~~,OAAO,KAAK,EAAE,yBAAyB,EAAwB,MAAM,8BAA8B,CAAC;~~AAQpG~~,eAAO,MAAM,mBAAmB;;;SAE/B,CAAC;;;;~~AAiWF~~,wBAAiF"}
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"}

package/lib/components/DynamicContentEditor/DynamicContentEditor.js CHANGED Viewed

@@ -1,18 +1,20 @@
 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 } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, 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 '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';
 import { Editor } from '../Editor';
 import { isFieldMenuItem } from './DynamicContentEditor.types';
 import { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';
 import { getDynamicContentEditorTestIds } from './DynamicContentEditor.test-ids';
+registerIcon(codeIcon);
 const StyledDynamicContentEditor = styled.div ``;
 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, ...restProps }, ref) {
+const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId, form: { dynamicContentPicker, onSubmit }, onActiveFieldChange, label, toolbar, fieldItems, defaultValue, onBlur, onKeyDown: onKeyDownProp, customActions = [], customComponents = [], ...restProps }, ref) {
     const testIds = useTestIds(testId, getDynamicContentEditorTestIds);
     const menuID = useUID();
     const { create } = useModalManager();
@@ -230,7 +232,8 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId,
                 name: 'pega-reference',
                 extensionAttributes: ['contenteditable'],
                 style: pegaReferenceElementStyle
-            }
+            },
+            ...customComponents
         ], customActions: [
             {
                 'data-testid': testIds.insertField,
@@ -245,7 +248,8 @@ const DynamicContentEditor = forwardRef(function DynamicContentEditor({ testId,
                     description: tooltip,
                     command: onInsertField
                 }
-            }
+            },
+            ...customActions
         ], onInit: setEditor, onChange: onEditorChange, onBlur: () => {
             onBlur?.();
             hidePopover();

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

	@@ -1 +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 { FunctionComponent, 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} from '@pega/cosmos-react-core';\nimport type { ForwardProps, ModalMethods, PropsWithDefaults } from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\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\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: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n forwardRef(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 ...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 ]}\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 ]}\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\nexport default withTestIds(DynamicContentEditor, getDynamicContentEditorTestIds);\n"]}
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';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\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"]}

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

@@ -4,15 +4,12 @@ import 'tinymce/plugins/advlist';
 import 'tinymce/plugins/lists';
 import 'tinymce/plugins/autolink';
 import 'tinymce/models/dom';
-import type { FC } from 'react';
 import type { DefaultTheme } from 'styled-components';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { EditorProps } from './Editor.types';
 export declare const getImageStyles: (theme: DefaultTheme) => string;
-export declare const StyledInnerEditor: import("styled-components").StyledComponent<"div", DefaultTheme, {
-    showPlaceholder: boolean;
-}, never>;
-declare const _default: FC<EditorProps & ForwardProps> & {
+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"]>;
 };
 export default _default;

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

	@@ -1 +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;~~AAW5B~~,OAAO,KAAK,EAAE,~~EAAE,EAA+B,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,~~YAAY,EAAE,MAAM,mBAAmB,CAAC;~~AAoBtD~~,OAAO,KAAK,EAAE,~~YAAY,~~EAAE,MAAM,yBAAyB,CAAC;~~AAa5D~~,OAAO,KAAK,EAAmB,WAAW,~~EAAe~~,MAAM,gBAAgB,CAAC;~~AAsBhF~~,eAAO,MAAM,cAAc,UAAW,YAAY,WAQjD,CAAC;AAEF,eAAO,MAAM,~~iBAAiB;qBAAiC~~,~~OAAO;SAarE~~,CAAC;;;;~~AAkkBF~~,~~wBAAqD~~"}
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,UAAW,YAAY,WAQjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAAW,YAAY,WAiBvD,CAAC;;;;AA8pBF,wBAA4D"}

package/lib/components/Editor/Editor.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import tinymce from 'tinymce/tinymce';
 import 'tinymce/icons/default';
@@ -7,10 +8,10 @@ import 'tinymce/plugins/lists';
 import 'tinymce/plugins/autolink';
 import 'tinymce/models/dom';
 import { forwardRef, useEffect, useRef, useState, useLayoutEffect, useImperativeHandle, useCallback, useMemo } from 'react';
-import styled, { css } from 'styled-components';
+import { css } from 'styled-components';
 import { compile, serialize, stringify } from 'stylis';
-import { stripUnit } from 'polished';
-import { createUID, FormControl, useAfterInitialEffect, useTheme, useUID, useI18n, useConsolidatedRef, defaultThemeProp, useAutoResize, useConfiguration, useTestIds, withTestIds, documentIsAvailable, getActiveElement } from '@pega/cosmos-react-core';
+import { mix, stripUnit } from 'polished';
+import { createUID, FormControl, useAfterInitialEffect, useTheme, useUID, useI18n, useConsolidatedRef, useAutoResize, useConfiguration, useTestIds, withTestIds, documentIsAvailable, getActiveElement } from '@pega/cosmos-react-core';
 import { getHtmlStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';
 import { createGlobalBodyStyles, createGlobalRootStyles, globalSpacingStyles } from '@pega/cosmos-react-core/lib/styles/GlobalStyle';
 import StyledRichTextEditor from '../RichTextEditor/RichTextEditor.styles';
@@ -18,7 +19,7 @@ import Toolbar from './Toolbar/Toolbar';
 import EditorContext from './Editor.context';
 import { getTextFormats } from './Toolbar/TextSelect';
 import ImageEditor, { imgHoverClass } from './ImageEditor';
-import { offscreenSelectionStyles, placeholderStyles, mceContentBodyStyles, StyledEditorContainer, StyledEditorRoot } from './Editor.styles';
+import { offscreenSelectionStyles, mceContentBodyStyles, StyledEditorContainer, StyledEditorRoot } from './Editor.styles';
 import { getEditorTestIds } from './Editor.test-ids';
 import createFileItemElement from './FileItemElement';
 const getFileFromUrl = async (url, name) => {
@@ -37,19 +38,20 @@ export const getImageStyles = (theme) => {
     }
   `;
 };
-export const StyledInnerEditor = styled.div(({ theme, showPlaceholder }) => {
-    return css `
-      ${showPlaceholder &&
-        css `
-        ::before {
-          color: ${theme.base.colors.slate.medium};
-          position: absolute;
-          content: attr(data-mce-placeholder);
-        }
-      `}
-    `;
-});
-StyledInnerEditor.defaultProps = defaultThemeProp;
+export const getPlaceholderStyles = (theme) => {
+    return `
+    .mce-content-body[data-mce-placeholder] {
+      position: relative;
+    }
+    .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+      cursor: text;
+      color: ${mix(theme.base.transparency['transparent-3'], theme.base.palette['foreground-color'], theme.components['form-control']['background-color'])};
+      content: attr(data-mce-placeholder);
+      position: absolute;
+    }
+  `;
+};
 const Editor = forwardRef(function Editor(props, ref) {
     const theme = useTheme();
     const { components: { 'text-area': { 'min-height': textAreaMinHeight } } } = theme;
@@ -64,7 +66,7 @@ const Editor = forwardRef(function Editor(props, ref) {
     const tinyMceContainerRef = useRef(null);
     const initialized = useRef(false);
     const pastedImages = useRef([]);
-    const { testId, id = uid, toolbar = [], label, labelHidden, info, status, required, disabled, readOnly, onChange, onKeyDown, onFocus, onBlur, onImageAdded, onInit, defaultValue, customComponents = [], height, autoResize = true, customActions, placeholder, children, spellcheck = true, additionalInfo, initOptions, ...restProps } = props;
+    const { testId, id = uid, toolbar = [], label, labelHidden, info, status, required, disabled, readOnly, onChange, onKeyDown, onFocus, onBlur, onImageAdded, onInit, onUnload, defaultValue, customComponents = [], height, autoResize = true, customActions, placeholder, children, spellcheck = true, additionalInfo, initOptions, ...restProps } = props;
     const testIds = useTestIds(testId, getEditorTestIds);
     const baseHeight = {
         min: height?.min ?? stripUnit(textAreaMinHeight) * 16,
@@ -161,7 +163,8 @@ const Editor = forwardRef(function Editor(props, ref) {
                     }
                     imageUploadEl.replaceWith(imgEl);
                     imageUploadEl?.remove();
-                    resizeEditor();
+                    if (autoResize)
+                        resizeEditor();
                 }
             }
         },
@@ -186,9 +189,11 @@ const Editor = forwardRef(function Editor(props, ref) {
                 activeElement = getActiveElement();
             }
             if (overwrite) {
-                editor?.setContent('');
+                editor?.setContent(html);
+            }
+            else {
+                editor?.insertContent(html);
             }
-            editor?.insertContent(html);
             if (activeElement)
                 activeElement.focus();
         },
@@ -202,12 +207,35 @@ const Editor = forwardRef(function Editor(props, ref) {
             return;
         const styles = serialize(compile(getHtmlStyles(theme)), stringify);
         const imageStyles = serialize(compile(getImageStyles(theme)), stringify);
+        const placeholderStyles = serialize(compile(getPlaceholderStyles(theme)), stringify);
         const FileItemStyle = css `
-      /* stylelint-disable-next-line selector-type-no-unknown */
-      pega-file {
-        display: inline-block;
-        width: ${theme.base['content-width'].md};
+        /* stylelint-disable-next-line selector-type-no-unknown */
+        pega-file {
+          display: inline-block;
+          width: ${theme.base['content-width'].md};
+        }
+      `;
+        const contentStyle = `
+      ${createGlobalRootStyles(theme)}
+      ${globalSpacingStyles}
+      ${createGlobalBodyStyles(theme)}
+      html {
+        overflow: hidden;
       }
+      body {
+        min-height: 3rem;
+        padding: ${theme.base.spacing};
+        background: unset;
+      }
+      ${offscreenSelectionStyles}
+      ${mceContentBodyStyles}
+      ${placeholderStyles}
+      ${imageStyles}
+      ${styles}
+      ${initOptions?.contentStyle}
     `;
         const customElements = [
             {
@@ -242,44 +270,32 @@ const Editor = forwardRef(function Editor(props, ref) {
             remove_script_host: false,
             paste_preprocess: pastePreprocess,
             convert_unsafe_embeds: true,
-            content_style: `
-          ${createGlobalRootStyles(theme)}
-          ${globalSpacingStyles}
-          ${createGlobalBodyStyles(theme)}
-          html {
-            overflow: hidden;
-          }
-          body {
-            min-height: 3rem;
-            padding: ${theme.base.spacing};
-          }
-          ${offscreenSelectionStyles}
-          ${mceContentBodyStyles}
-          ${placeholderStyles}
-          ${imageStyles}
-          ${styles}
-          ${initOptions?.contentStyle}
-        `,
+            sandbox_iframes: true,
+            paste_as_text: initOptions?.pasteAsText,
             init_instance_callback: initializedEditor => {
                 if (initOptions?.initInstanceCallback) {
                     initOptions.initInstanceCallback(initializedEditor);
                 }
-                initializedEditor.dom.setAttrib('tinymce', 'aria-label', null);
+                if (typeof label === 'string') {
+                    initializedEditor.getBody().setAttribute('aria-label', label);
+                }
                 const iframeWindow = (tinyMceContainerRef.current?.querySelector('iframe')).contentWindow;
                 const editorCustomElements = iframeWindow?.customElements;
+                // Manually add content style to allow setting nonce attribute
+                const contentStyleEl = document.createElement('style');
+                contentStyleEl.innerText = contentStyle;
+                contentStyleEl.nonce = window.__webpack_nonce__;
+                initializedEditor.getDoc().head.appendChild(contentStyleEl);
                 if (editorCustomElements) {
                     customElements.forEach(({ name, createCustomElement: customElementCreator, style }) => {
                         if (!editorCustomElements.get(name)) {
                             editorCustomElements.define(name, customElementCreator(iframeWindow));
                         }
                         if (style) {
-                            const styleEl = document.createElement('style');
-                            styleEl.innerText = style;
-                            styleEl.nonce = window.__webpack_nonce__;
-                            initializedEditor.getDoc().head.appendChild(styleEl);
+                            const customElementStyleEl = document.createElement('style');
+                            customElementStyleEl.innerText = style;
+                            customElementStyleEl.nonce = window.__webpack_nonce__;
+                            initializedEditor.getDoc().head.appendChild(customElementStyleEl);
                         }
                     });
                 }
@@ -301,7 +317,7 @@ const Editor = forwardRef(function Editor(props, ref) {
                     else
                         onKeyDown?.(e);
                 });
-                getTextFormats().forEach((format, i) => {
+                getTextFormats(t).forEach((format, i) => {
                     editorSettings.addShortcut(`meta+alt+${i}`, `${t('rte_change_text_format')} ${format.text}`, () => {
                         editorSettings.execCommand('FormatBlock', false, format.type);
                     });
@@ -335,7 +351,7 @@ const Editor = forwardRef(function Editor(props, ref) {
         })
             .then(tinymceEditors => {
             setEditor(tinymceEditors[0]);
-            tinymceEditors[0]?.editorContainer?.setAttribute('style', '');
+            tinymceEditors[0]?.editorContainer?.removeAttribute('style');
             const iframe = tinyMceContainerRef.current?.querySelector('iframe');
             if (iframe) {
                 const globalStyles = styleSheetTarget?.querySelectorAll('[data-cosmos-global-style]') ??
@@ -447,6 +463,47 @@ const Editor = forwardRef(function Editor(props, ref) {
             resizeObserver?.disconnect();
         };
     }, [editor, resizeEditor]);
+    useEffect(() => {
+        if (!editor || !autoResize)
+            return;
+        const imgEls = editor.getDoc().querySelectorAll('img');
+        imgEls.forEach(imgEl => {
+            imgEl.addEventListener('load', resizeEditor);
+            imgEl.addEventListener('error', resizeEditor);
+        });
+        return () => {
+            imgEls.forEach(imgEl => {
+                imgEl.removeEventListener('load', resizeEditor);
+                imgEl.removeEventListener('error', resizeEditor);
+            });
+        };
+    });
+    useEffect(() => {
+        if (!editor)
+            return;
+        const body = editor.getBody();
+        const mutationObserver = new MutationObserver(() => {
+            if (body.hasAttribute('aria-placeholder')) {
+                body.removeAttribute('aria-placeholder');
+            }
+        });
+        mutationObserver.observe(body, { attributes: true, attributeFilter: ['aria-placeholder'] });
+        return () => {
+            mutationObserver.disconnect();
+        };
+    }, [editor]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const win = editor.getWin();
+        const ac = new AbortController();
+        win.addEventListener('unload', () => {
+            onUnload(editor.getContent({ format: 'html' }));
+        }, { signal: ac.signal });
+        return () => {
+            ac.abort();
+        };
+    }, [editor]);
     return (_jsxs(EditorContext.Provider, { value: ctx, children: [_jsx(StyledEditorRoot, { testId: testIds, toolbar: renderToolbar, label:
                 // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
                 _jsx("span", { onClick: () => {
@@ -459,7 +516,15 @@ const Editor = forwardRef(function Editor(props, ref) {
                                 if (!disabled) {
                                     editor?.focus();
                                 }
-                            }, ref: tinyMceContainerRef, children: [_jsx("textarea", { id: id, value: value.current || '', onChange: () => { }, "aria-label": `${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`, "aria-labelledby": labelId, ref: tinyMceRef }), tinyMceContainerRef.current && editor && !readOnly && (_jsx(ImageEditor, { editor: editor, editorEl: tinyMceContainerRef.current, onChange: () => onChange?.(editor) }))] }), renderToolbar && (_jsx(Toolbar, { testId: testIds, features: toolbar, editor: editor, customActions: customActions }))] }) }), children] }));
+                            }, ref: tinyMceContainerRef, children: [_jsx("textarea", { id: id, value: value.current || '', onChange: () => { }, "aria-label": `${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`, "aria-labelledby": labelId, ref: tinyMceRef }), tinyMceContainerRef.current && editor && imagesEnabled && !readOnly && !disabled && (_jsx(ImageEditor, { editor: editor, editorEl: tinyMceContainerRef.current, onChange: () => onChange?.(editor) }))] }), renderToolbar && (_jsx(Toolbar, { testId: testIds, features: toolbar, editor: editor, customActions: customActions }))] }) }), children] }));
+});
+const EditorWrapper = forwardRef(function EditorWrapper(props, ref) {
+    const [defaultValue, setDefaultValue] = useState(props.defaultValue ?? '');
+    const [key, setKey] = useState(createUID);
+    return (_createElement(Editor, { ...props, defaultValue: defaultValue, onUnload: value => {
+            setDefaultValue(value);
+            setKey(createUID());
+        }, ref: ref, key: key }));
 });
-export default withTestIds(Editor, getEditorTestIds);
+export default withTestIds(EditorWrapper, getEditorTestIds);
 //# sourceMappingURL=Editor.js.map