npm - @pega/cosmos-react-rte - Versions diffs - 2.1.1 → 3.0.0-dev.1.0 - Mend

@pega/cosmos-react-rte 2.1.1 → 3.0.0-dev.1.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 (12) hide show

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":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EACL,EAAE,EASH,MAAM,OAAO,CAAC;~~AAEf~~,OAAO,EAIL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAWjC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;~~AAE1D~~,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,~~CAiP1C~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EACL,EAAE,EASH,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAWjC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAiB1D,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAuQ1C,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -5,22 +5,37 @@ import 'tinymce/themes/silver';
 import 'tinymce/plugins/advlist';
 import 'tinymce/plugins/lists';
 import { forwardRef, useEffect, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
-import { createUID, FormControl, FormField, useAfterInitialEffect, useFocusWithin, useTheme, useUID, useI18n, useConsolidatedRef } from '@pega/cosmos-react-core';
+import styled, { css } from 'styled-components';
+import { createUID, FormControl, FormField, useAfterInitialEffect, useTheme, useUID, useI18n, useConsolidatedRef, defaultThemeProp } from '@pega/cosmos-react-core';
 import StyledRichTextEditor, { StyledEditorContainer, StyledRichTextFormField, StyledHtml } from '../RichTextEditor/RichTextEditor.styles';
 import Toolbar from './Toolbar/Toolbar';
 import EditorContext from './Editor.context';
 import { getTextFormats } from './Toolbar/TextSelect';
+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;
 const Editor = forwardRef((props, ref) => {
     const { components: { 'text-area': { 'min-height': minHeight } } } = useTheme();
     const [editor, setEditor] = useState();
     const t = useI18n();
     const uid = useUID();
+    const labelId = useUID();
     const editorRef = useConsolidatedRef(ref);
     const initialized = useRef(false);
-    const { id = uid, toolbar = [], label, labelHidden, info, status, required, disabled, readOnly, onChange, onFocus, onBlur, onImageAdded, onInit, defaultValue, customComponents = [], height = { min: minHeight }, customActions, ...restProps } = props;
+    const { id = uid, toolbar = [], label, labelHidden, info, status, required, disabled, readOnly, onChange, onFocus, onBlur, onImageAdded, onInit, defaultValue, customComponents = [], height = { min: minHeight }, customActions, placeholder, ...restProps } = props;
+    const [showPlaceholder, setShowPlaceholder] = useState(() => !defaultValue);
     const formFieldRef = useRef(null);
     const value = useRef(defaultValue);
-    const editorHasFocus = useFocusWithin([formFieldRef.current]);
     useImperativeHandle(editorRef, () => ({
         focus: () => {
             editor?.focus();
@@ -72,6 +87,7 @@ const Editor = forwardRef((props, ref) => {
             plugins: 'lists advlist',
             lists_indent_on_tab: true,
             icons: '',
+            placeholder,
             init_instance_callback: () => {
                 customComponents.forEach(comp => {
                     if (!customElements.get(comp.name)) {
@@ -106,9 +122,30 @@ const Editor = forwardRef((props, ref) => {
     useEffect(() => {
         if (!editor || initialized.current)
             return;
-        onInit?.(editor);
         initialized.current = true;
+        onInit?.(editor);
     }, [editor, onInit]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const onEditorChange = () => {
+            setShowPlaceholder(!editor?.getContent({ format: 'text' }));
+        };
+        const onEditorFocus = () => {
+            onFocus?.();
+        };
+        const onEditorBlur = () => {
+            onBlur?.();
+        };
+        editor.on('input', onEditorChange);
+        editor.on('focus', onEditorFocus);
+        editor.on('blur', onEditorBlur);
+        return () => {
+            editor.off('input', onEditorChange);
+            editor.off('focus', onEditorFocus);
+            editor.off('blur', onEditorBlur);
+        };
+    }, [editor, onFocus, onBlur]);
     useAfterInitialEffect(() => {
         editor?.mode.set(readOnly || disabled ? 'readonly' : 'design');
     }, [readOnly, disabled]);
@@ -135,20 +172,12 @@ const Editor = forwardRef((props, ref) => {
             editor?.off('drop', onEditorDrop);
         };
     }, [editor]);
-    useAfterInitialEffect(() => {
-        if (editorHasFocus) {
-            onFocus?.();
-        }
-        else {
-            onBlur?.();
-        }
-    }, [editorHasFocus, onFocus, onBlur]);
     const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;
     return (_jsx(EditorContext.Provider, { value: { addImage, editor: editor || {} }, children: _jsx(FormField, { as: StyledRichTextFormField, toolbar: renderToolbar, label:
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
             _jsx("span", { onClick: () => {
                     editor?.focus();
-                }, children: label }, void 0), labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onFocus: (e) => {
+                }, children: label }, void 0), labelFor: '', labelId: labelId, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onFocus: (e) => {
                 if (e.target === formFieldRef.current && !disabled) {
                     editor?.focus();
                 }
@@ -156,7 +185,7 @@ const Editor = forwardRef((props, ref) => {
                             if (!disabled) {
                                 editor?.focus();
                             }
-                        }, toolbar: renderToolbar, containerHeight: height, children: _jsx(StyledHtml, { id: id, style: { outline: 'none', border: 'none' }, dangerouslySetInnerHTML: { __html: value.current || '' }, "aria-label": `${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}` }, void 0) }, void 0), renderToolbar && (_jsx(Toolbar, { features: toolbar, editor: editor, customActions: customActions }, void 0))] }, void 0) }, void 0) }, void 0));
+                        }, toolbar: renderToolbar, containerHeight: height, children: _jsx(StyledHtml, { id: id, style: { outline: 'none', border: 'none' }, dangerouslySetInnerHTML: { __html: value.current || '' }, "aria-label": `${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`, as: StyledInnerEditor, showPlaceholder: showPlaceholder, "aria-labelledby": labelId, role: 'textbox' }, void 0) }, void 0), renderToolbar && (_jsx(Toolbar, { features: toolbar, editor: editor, customActions: customActions }, void 0))] }, void 0) }, void 0) }, void 0));
 });
 export default Editor;
 //# sourceMappingURL=Editor.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import tinymce, { Editor as TinymceEditor } from 'tinymce/tinymce';\nimport 'tinymce/icons/default';\nimport 'tinymce/themes/silver';\nimport 'tinymce/plugins/advlist';\nimport 'tinymce/plugins/lists';\nimport {\n FC,\n forwardRef,\n PropsWithoutRef,\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n useImperativeHandle,\n FocusEvent\n} from 'react';\n\nimport {\n createUID,\n FormControl,\n FormField,\n ForwardProps,\n useAfterInitialEffect,\n useFocusWithin,\n useTheme,\n useUID,\n useI18n,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n StyledEditorContainer,\n StyledRichTextFormField,\n StyledHtml\n} from '../RichTextEditor/RichTextEditor.styles';\n\nimport Toolbar from './Toolbar/Toolbar';\nimport EditorContext from './Editor.context';\nimport { getTextFormats } from './Toolbar/TextSelect';\nimport { EditorProps, EditorState } from './Editor.types';\n\nconst Editor: FC<EditorProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<EditorProps>, ref: EditorProps['ref']) => {\n const {\n components: {\n 'text-area': { 'min-height': minHeight }\n }\n } = useTheme();\n const [editor, setEditor] = useState<TinymceEditor>();\n const t = useI18n();\n const uid = useUID();\n const editorRef = useConsolidatedRef(ref);\n const initialized = useRef(false);\n\n const {\n id = uid,\n toolbar = [],\n label,\n labelHidden,\n info,\n status,\n required,\n disabled,\n readOnly,\n onChange,\n onFocus,\n onBlur,\n onImageAdded,\n onInit,\n defaultValue,\n customComponents = [],\n height = { min: minHeight },\n customActions,\n ...restProps\n } = props;\n\n const formFieldRef = useRef<HTMLElement>(null);\n const value = useRef(defaultValue);\n const editorHasFocus = useFocusWithin([formFieldRef.current]);\n\n useImperativeHandle<any, EditorState>(\n editorRef,\n () => ({\n focus: () => {\n editor?.focus();\n },\n getPlainText: () => {\n return editor ? editor?.getContent({ format: 'text' }) : '';\n },\n getRichText: () => {\n return editor ? JSON.stringify(editor?.getContent({ format: 'raw' })) : '';\n },\n getHtml: () => {\n return editor ? editor?.getContent({ format: 'html' }) : '';\n },\n clear: () => {\n editor?.setContent('');\n },\n appendImage: ({ src, alt }, imageId) => {\n if (editor) {\n const editorEl = editor.getElement();\n const imageEl = editorEl.querySelector(`#${imageId}`);\n if (imageEl) {\n imageEl.setAttribute('src', src);\n imageEl.setAttribute('alt', alt);\n }\n }\n },\n insertText: (text: string) => {\n editor?.insertContent(text);\n },\n insertHtml: (html: string, overwrite: boolean = false) => {\n if (overwrite) {\n editor?.setContent('');\n }\n editor?.insertContent(html);\n },\n getEditor: () => {\n return editor;\n }\n }),\n [editor]\n );\n\n useLayoutEffect(() => {\n tinymce\n .init({\n readonly: readOnly \|\| disabled,\n skin: false,\n selector: `#${id}`,\n toolbar: false,\n menubar: false,\n inline: true,\n plugins: 'lists advlist',\n lists_indent_on_tab: true,\n icons: '',\n init_instance_callback: () => {\n customComponents.forEach(comp => {\n if (!customElements.get(comp.name)) {\n customElements.define(comp.name, comp.customElement);\n }\n });\n },\n custom_elements: customComponents.reduce((prev, { name }, i) => {\n return i === 0 ? name : `${prev},${name}`;\n }, ''),\n setup: editorSettings => {\n getTextFormats().forEach((format, i) => {\n editorSettings.addShortcut(\n `meta+alt+${i}`,\n `${t('rte_change_text_format')} ${format.text}`,\n () => {\n editorSettings.execCommand('FormatBlock', false, format.type);\n }\n );\n });\n editorSettings.addShortcut('meta+shift+l', t('rte_toggle_unordered_list'), () => {\n editorSettings.execCommand('InsertUnorderedList');\n });\n editorSettings.addShortcut('alt+m', t('rte_indent_selection'), () => {\n editorSettings.execCommand('Indent');\n });\n editorSettings.addShortcut('alt+shift+m', t('rte_unindent_selection'), () => {\n editorSettings.execCommand('Outdent');\n });\n }\n })\n .then(tinymceEditors => {\n setEditor(tinymceEditors[0]);\n });\n }, []);\n\n useEffect(() => {\n if (!editor \|\| initialized.current) return;\n onInit?.(editor);\n initialized.current = true;\n }, [editor, onInit]);\n\n useAfterInitialEffect(() => {\n editor?.mode.set(readOnly \|\| disabled ? 'readonly' : 'design');\n }, [readOnly, disabled]);\n\n const addImage = (image: File) => {\n if (editor) {\n const imageId = createUID();\n editor.insertContent(`<img src='' id='${imageId}' style=\"max-width: 100%;\"/>`);\n onImageAdded?.(image, imageId);\n }\n };\n\n useEffect(() => {\n const onEditorDrop = (e: DragEvent) => {\n e.preventDefault();\n if (e.dataTransfer) {\n Array.from(e.dataTransfer.files).forEach(file => {\n if (file.type.includes('image')) {\n addImage(file);\n }\n });\n }\n };\n editor?.on('drop', onEditorDrop);\n return () => {\n editor?.off('drop', onEditorDrop);\n };\n }, [editor]);\n\n useAfterInitialEffect(() => {\n if (editorHasFocus) {\n onFocus?.();\n } else {\n onBlur?.();\n }\n }, [editorHasFocus, onFocus, onBlur]);\n\n const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;\n\n return (\n <EditorContext.Provider value={{ addImage, editor: editor \|\| ({} as TinymceEditor) }}>\n <FormField\n as={StyledRichTextFormField}\n toolbar={renderToolbar}\n label={\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <span\n onClick={() => {\n editor?.focus();\n }}\n >\n {label}\n </span>\n }\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={(e: FocusEvent) => {\n if (e.target === formFieldRef.current && !disabled) {\n editor?.focus();\n }\n }}\n ref={formFieldRef}\n tabIndex={disabled ? -1 : undefined}\n >\n <FormControl\n {...restProps}\n ref={editorRef}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n as={StyledRichTextEditor}\n toolbar={renderToolbar}\n >\n <StyledEditorContainer\n readOnly={readOnly}\n onClick={() => {\n if (!disabled) {\n editor?.focus();\n }\n }}\n toolbar={renderToolbar}\n containerHeight={height}\n >\n <StyledHtml\n id={id}\n style={{ outline: 'none', border: 'none' }}\n dangerouslySetInnerHTML={{ __html: value.current \|\| '' }}\n aria-label={`${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`}\n />\n </StyledEditorContainer>\n {renderToolbar && (\n <Toolbar features={toolbar} editor={editor} customActions={customActions} />\n )}\n </FormControl>\n </FormField>\n </EditorContext.Provider>\n );\n }\n);\n\nexport default Editor;\n"]}
1	+ {"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import tinymce, { Editor as TinymceEditor } from 'tinymce/tinymce';\nimport 'tinymce/icons/default';\nimport 'tinymce/themes/silver';\nimport 'tinymce/plugins/advlist';\nimport 'tinymce/plugins/lists';\nimport {\n FC,\n forwardRef,\n PropsWithoutRef,\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n useImperativeHandle,\n FocusEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n createUID,\n FormControl,\n FormField,\n ForwardProps,\n useAfterInitialEffect,\n useTheme,\n useUID,\n useI18n,\n useConsolidatedRef,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n StyledEditorContainer,\n StyledRichTextFormField,\n StyledHtml\n} from '../RichTextEditor/RichTextEditor.styles';\n\nimport Toolbar from './Toolbar/Toolbar';\nimport EditorContext from './Editor.context';\nimport { getTextFormats } from './Toolbar/TextSelect';\nimport { EditorProps, EditorState } from './Editor.types';\n\nconst StyledInnerEditor = styled.div<{ showPlaceholder: boolean }>(({ theme, showPlaceholder }) => {\n return css`\n ${showPlaceholder &&\n css`\n ::before {\n color: ${theme.base.colors.slate.medium};\n position: absolute;\n content: attr(data-mce-placeholder);\n }\n `}\n `;\n});\n\nStyledInnerEditor.defaultProps = defaultThemeProp;\n\nconst Editor: FC<EditorProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<EditorProps>, ref: EditorProps['ref']) => {\n const {\n components: {\n 'text-area': { 'min-height': minHeight }\n }\n } = useTheme();\n const [editor, setEditor] = useState<TinymceEditor>();\n const t = useI18n();\n const uid = useUID();\n const labelId = useUID();\n const editorRef = useConsolidatedRef(ref);\n const initialized = useRef(false);\n\n const {\n id = uid,\n toolbar = [],\n label,\n labelHidden,\n info,\n status,\n required,\n disabled,\n readOnly,\n onChange,\n onFocus,\n onBlur,\n onImageAdded,\n onInit,\n defaultValue,\n customComponents = [],\n height = { min: minHeight },\n customActions,\n placeholder,\n ...restProps\n } = props;\n\n const [showPlaceholder, setShowPlaceholder] = useState(() => !defaultValue);\n const formFieldRef = useRef<HTMLElement>(null);\n const value = useRef(defaultValue);\n\n useImperativeHandle<any, EditorState>(\n editorRef,\n () => ({\n focus: () => {\n editor?.focus();\n },\n getPlainText: () => {\n return editor ? editor?.getContent({ format: 'text' }) : '';\n },\n getRichText: () => {\n return editor ? JSON.stringify(editor?.getContent({ format: 'raw' })) : '';\n },\n getHtml: () => {\n return editor ? editor?.getContent({ format: 'html' }) : '';\n },\n clear: () => {\n editor?.setContent('');\n },\n appendImage: ({ src, alt }, imageId) => {\n if (editor) {\n const editorEl = editor.getElement();\n const imageEl = editorEl.querySelector(`#${imageId}`);\n if (imageEl) {\n imageEl.setAttribute('src', src);\n imageEl.setAttribute('alt', alt);\n }\n }\n },\n insertText: (text: string) => {\n editor?.insertContent(text);\n },\n insertHtml: (html: string, overwrite: boolean = false) => {\n if (overwrite) {\n editor?.setContent('');\n }\n editor?.insertContent(html);\n },\n getEditor: () => {\n return editor;\n }\n }),\n [editor]\n );\n\n useLayoutEffect(() => {\n tinymce\n .init({\n readonly: readOnly \|\| disabled,\n skin: false,\n selector: `#${id}`,\n toolbar: false,\n menubar: false,\n inline: true,\n plugins: 'lists advlist',\n lists_indent_on_tab: true,\n icons: '',\n placeholder,\n init_instance_callback: () => {\n customComponents.forEach(comp => {\n if (!customElements.get(comp.name)) {\n customElements.define(comp.name, comp.customElement);\n }\n });\n },\n custom_elements: customComponents.reduce((prev, { name }, i) => {\n return i === 0 ? name : `${prev},${name}`;\n }, ''),\n setup: editorSettings => {\n getTextFormats().forEach((format, i) => {\n editorSettings.addShortcut(\n `meta+alt+${i}`,\n `${t('rte_change_text_format')} ${format.text}`,\n () => {\n editorSettings.execCommand('FormatBlock', false, format.type);\n }\n );\n });\n editorSettings.addShortcut('meta+shift+l', t('rte_toggle_unordered_list'), () => {\n editorSettings.execCommand('InsertUnorderedList');\n });\n editorSettings.addShortcut('alt+m', t('rte_indent_selection'), () => {\n editorSettings.execCommand('Indent');\n });\n editorSettings.addShortcut('alt+shift+m', t('rte_unindent_selection'), () => {\n editorSettings.execCommand('Outdent');\n });\n }\n })\n .then(tinymceEditors => {\n setEditor(tinymceEditors[0]);\n });\n }, []);\n\n useEffect(() => {\n if (!editor \|\| initialized.current) return;\n initialized.current = true;\n onInit?.(editor);\n }, [editor, onInit]);\n\n useEffect(() => {\n if (!editor) return;\n const onEditorChange = () => {\n setShowPlaceholder(!editor?.getContent({ format: 'text' }));\n };\n const onEditorFocus = () => {\n onFocus?.();\n };\n const onEditorBlur = () => {\n onBlur?.();\n };\n editor.on('input', onEditorChange);\n editor.on('focus', onEditorFocus);\n editor.on('blur', onEditorBlur);\n return () => {\n editor.off('input', onEditorChange);\n editor.off('focus', onEditorFocus);\n editor.off('blur', onEditorBlur);\n };\n }, [editor, onFocus, onBlur]);\n\n useAfterInitialEffect(() => {\n editor?.mode.set(readOnly \|\| disabled ? 'readonly' : 'design');\n }, [readOnly, disabled]);\n\n const addImage = (image: File) => {\n if (editor) {\n const imageId = createUID();\n editor.insertContent(`<img src='' id='${imageId}' style=\"max-width: 100%;\"/>`);\n onImageAdded?.(image, imageId);\n }\n };\n\n useEffect(() => {\n const onEditorDrop = (e: DragEvent) => {\n e.preventDefault();\n if (e.dataTransfer) {\n Array.from(e.dataTransfer.files).forEach(file => {\n if (file.type.includes('image')) {\n addImage(file);\n }\n });\n }\n };\n editor?.on('drop', onEditorDrop);\n return () => {\n editor?.off('drop', onEditorDrop);\n };\n }, [editor]);\n\n const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;\n\n return (\n <EditorContext.Provider value={{ addImage, editor: editor \|\| ({} as TinymceEditor) }}>\n <FormField\n as={StyledRichTextFormField}\n toolbar={renderToolbar}\n label={\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <span\n onClick={() => {\n editor?.focus();\n }}\n >\n {label}\n </span>\n }\n labelFor=''\n labelId={labelId}\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onFocus={(e: FocusEvent) => {\n if (e.target === formFieldRef.current && !disabled) {\n editor?.focus();\n }\n }}\n ref={formFieldRef}\n tabIndex={disabled ? -1 : undefined}\n >\n <FormControl\n {...restProps}\n ref={editorRef}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n as={StyledRichTextEditor}\n toolbar={renderToolbar}\n >\n <StyledEditorContainer\n readOnly={readOnly}\n onClick={() => {\n if (!disabled) {\n editor?.focus();\n }\n }}\n toolbar={renderToolbar}\n containerHeight={height}\n >\n <StyledHtml\n id={id}\n style={{ outline: 'none', border: 'none' }}\n dangerouslySetInnerHTML={{ __html: value.current \|\| '' }}\n aria-label={`${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`}\n as={StyledInnerEditor}\n showPlaceholder={showPlaceholder}\n aria-labelledby={labelId}\n role='textbox'\n />\n </StyledEditorContainer>\n {renderToolbar && (\n <Toolbar features={toolbar} editor={editor} customActions={customActions} />\n )}\n </FormControl>\n </FormField>\n </EditorContext.Provider>\n );\n }\n);\n\nexport default Editor;\n"]}

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

@@ -76,7 +76,7 @@ const Toolbar = ({ features, sticky, editor, customActions }) => {
     const [osx, setOsx] = useState(false);
     const toolbarRef = useRef(null);
     useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });
-    const [activeFeatures, setActiveFeatures] = useState(createActiveFeaturesMap(features));
+    const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));
     const [activeStyles, setActiveStyles] = useState(() => ({
         bold: false,
         italic: false,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState, useEffect, useRef, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { Editor } from 'tinymce';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n TranslationPack,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { CustomAction } from '../Editor.types';\n\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\n\nregisterIcon(indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(\n ({ sticky, theme }) => `\n background-color: ${theme.base.palette['primary-background']};\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n overflow: auto;\n padding: 0.125rem;\n ${\n sticky &&\n css`\n position: sticky;\n bottom: 0;\n `\n }\n`\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps {\n features: Features[];\n sticky?: boolean;\n editor: Editor;\n customActions?: CustomAction[];\n}\n\ntype StyleButtonType = {\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: string;\n element?: string;\n tooltip: string;\n};\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: Editor,\n t: TranslationFunction<TranslationPack>,\n activeStyles: { [key: string]: boolean },\n osx: boolean\n) {\n const inlineStyleButtons: StyleButtonType[] = [\n {\n style: 'BOLD',\n text: 'B',\n format: 'Bold',\n label: t('rte_bold'),\n element: 'strong',\n tooltip: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`\n )\n },\n {\n style: 'ITALIC',\n text: 'I',\n format: 'Italic',\n label: t('rte_italic'),\n element: 'i',\n tooltip: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`\n )\n },\n {\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'Strikethrough',\n element: 's',\n label: t('rte_strike_through'),\n tooltip: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`\n )\n }\n ];\n\n return inlineStyleButtons.map(({ format, style, text, label, tooltip }) => {\n return (\n <ToolbarButton\n key={style}\n onMouseDown={e => {\n e.preventDefault();\n if (editor.hasFocus()) {\n editor.execCommand(format);\n } else {\n editor.focus();\n setTimeout(() => {\n editor.execCommand(format);\n }, 0);\n }\n }}\n styleType={style}\n active={activeStyles[format.toLowerCase()]}\n tooltip={tooltip}\n label={label}\n >\n {text}\n </ToolbarButton>\n );\n });\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n return features.reduce((acc, feature) => {\n return { ...acc, [feature]: true };\n }, {} as { [F in Features]: boolean });\n}\n\nconst Toolbar: FC<ToolbarProps> = ({ features, sticky, editor, customActions }: ToolbarProps) => {\n const t = useI18n();\n const [osx, setOsx] = useState(false);\n const toolbarRef = useRef<HTMLElement>(null);\n\n useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });\n\n const [activeFeatures, setActiveFeatures] = useState(createActiveFeaturesMap(features));\n const [activeStyles, setActiveStyles] = useState(() => ({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n }));\n\n const getIndentationToolTip = (type: 'indent' \| 'unindent') =>\n getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n useEffect(() => {\n if (navigator.appVersion.includes('Mac')) setOsx(true);\n }, []);\n\n const getActiveStyles = useCallback(() => {\n if (editor.hasFocus()) {\n setActiveStyles({\n bold: editor.queryCommandState('Bold'),\n italic: editor.queryCommandState('Italic'),\n strikethrough: editor.queryCommandState('Strikethrough'),\n unorderedList: editor.queryCommandState('InsertUnorderedList'),\n orderedList: editor.queryCommandState('InsertOrderedList')\n });\n } else {\n setActiveStyles({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n });\n }\n }, [editor, setActiveStyles]);\n\n useEffect(() => {\n getActiveStyles();\n editor.on('SelectionChange', getActiveStyles);\n return () => {\n editor.off('SelectionChange', getActiveStyles);\n };\n }, [editor, getActiveStyles]);\n\n return (\n <Flex as={StyledToolbar} sticky={sticky} container={{ justify: 'between' }} ref={toolbarRef}>\n <Flex container={{ alignItems: 'end' }}>\n <TextSelect osx={osx} editor={editor} />\n {activeFeatures['inline-styling'] && renderStyleButtons(editor, t, activeStyles, osx)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertUnorderedList');\n }}\n active={activeStyles.unorderedList}\n tooltip={getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n )}\n label={t('rte_bulleted_list')}\n >\n <Icon name='list' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertOrderedList');\n }}\n active={activeStyles.orderedList}\n tooltip={t('rte_numbered_list')}\n label={t('rte_numbered_list')}\n >\n <Icon name='list-number' />\n </ToolbarButton>\n </>\n )}\n {activeFeatures.indentation && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Indent');\n }}\n label={t('rte_indent')}\n tooltip={getIndentationToolTip('indent')}\n >\n <Icon name='indent' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Outdent');\n }}\n label={t('rte_unindent')}\n tooltip={getIndentationToolTip('unindent')}\n >\n <Icon name='unindent' />\n </ToolbarButton>\n </>\n )}\n </Flex>\n <Flex container={{ alignItems: 'end' }}>\n {customActions?.map(action => {\n return (\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n action.onMouseDown();\n }}\n tooltip={action.text}\n key={action.icon}\n >\n <Icon name={action.icon} />\n </ToolbarButton>\n );\n })}\n {activeFeatures.links && <AnchorButton editor={editor} osx={osx} />}\n {activeFeatures.images && <ImageButton editor={editor} />}\n </Flex>\n </Flex>\n );\n};\n\nexport default Toolbar;\n"]}
1	+ {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState, useEffect, useRef, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { Editor } from 'tinymce';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n TranslationPack,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { CustomAction } from '../Editor.types';\n\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\n\nregisterIcon(indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(\n ({ sticky, theme }) => `\n background-color: ${theme.base.palette['primary-background']};\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n overflow: auto;\n padding: 0.125rem;\n ${\n sticky &&\n css`\n position: sticky;\n bottom: 0;\n `\n }\n`\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps {\n features: Features[];\n sticky?: boolean;\n editor: Editor;\n customActions?: CustomAction[];\n}\n\ntype StyleButtonType = {\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: string;\n element?: string;\n tooltip: string;\n};\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: Editor,\n t: TranslationFunction<TranslationPack>,\n activeStyles: { [key: string]: boolean },\n osx: boolean\n) {\n const inlineStyleButtons: StyleButtonType[] = [\n {\n style: 'BOLD',\n text: 'B',\n format: 'Bold',\n label: t('rte_bold'),\n element: 'strong',\n tooltip: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`\n )\n },\n {\n style: 'ITALIC',\n text: 'I',\n format: 'Italic',\n label: t('rte_italic'),\n element: 'i',\n tooltip: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`\n )\n },\n {\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'Strikethrough',\n element: 's',\n label: t('rte_strike_through'),\n tooltip: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`\n )\n }\n ];\n\n return inlineStyleButtons.map(({ format, style, text, label, tooltip }) => {\n return (\n <ToolbarButton\n key={style}\n onMouseDown={e => {\n e.preventDefault();\n if (editor.hasFocus()) {\n editor.execCommand(format);\n } else {\n editor.focus();\n setTimeout(() => {\n editor.execCommand(format);\n }, 0);\n }\n }}\n styleType={style}\n active={activeStyles[format.toLowerCase()]}\n tooltip={tooltip}\n label={label}\n >\n {text}\n </ToolbarButton>\n );\n });\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n return features.reduce((acc, feature) => {\n return { ...acc, [feature]: true };\n }, {} as { [F in Features]: boolean });\n}\n\nconst Toolbar: FC<ToolbarProps> = ({ features, sticky, editor, customActions }: ToolbarProps) => {\n const t = useI18n();\n const [osx, setOsx] = useState(false);\n const toolbarRef = useRef<HTMLElement>(null);\n\n useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });\n\n const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));\n const [activeStyles, setActiveStyles] = useState(() => ({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n }));\n\n const getIndentationToolTip = (type: 'indent' \| 'unindent') =>\n getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n useEffect(() => {\n if (navigator.appVersion.includes('Mac')) setOsx(true);\n }, []);\n\n const getActiveStyles = useCallback(() => {\n if (editor.hasFocus()) {\n setActiveStyles({\n bold: editor.queryCommandState('Bold'),\n italic: editor.queryCommandState('Italic'),\n strikethrough: editor.queryCommandState('Strikethrough'),\n unorderedList: editor.queryCommandState('InsertUnorderedList'),\n orderedList: editor.queryCommandState('InsertOrderedList')\n });\n } else {\n setActiveStyles({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n });\n }\n }, [editor, setActiveStyles]);\n\n useEffect(() => {\n getActiveStyles();\n editor.on('SelectionChange', getActiveStyles);\n return () => {\n editor.off('SelectionChange', getActiveStyles);\n };\n }, [editor, getActiveStyles]);\n\n return (\n <Flex as={StyledToolbar} sticky={sticky} container={{ justify: 'between' }} ref={toolbarRef}>\n <Flex container={{ alignItems: 'end' }}>\n <TextSelect osx={osx} editor={editor} />\n {activeFeatures['inline-styling'] && renderStyleButtons(editor, t, activeStyles, osx)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertUnorderedList');\n }}\n active={activeStyles.unorderedList}\n tooltip={getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n )}\n label={t('rte_bulleted_list')}\n >\n <Icon name='list' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertOrderedList');\n }}\n active={activeStyles.orderedList}\n tooltip={t('rte_numbered_list')}\n label={t('rte_numbered_list')}\n >\n <Icon name='list-number' />\n </ToolbarButton>\n </>\n )}\n {activeFeatures.indentation && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Indent');\n }}\n label={t('rte_indent')}\n tooltip={getIndentationToolTip('indent')}\n >\n <Icon name='indent' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Outdent');\n }}\n label={t('rte_unindent')}\n tooltip={getIndentationToolTip('unindent')}\n >\n <Icon name='unindent' />\n </ToolbarButton>\n </>\n )}\n </Flex>\n <Flex container={{ alignItems: 'end' }}>\n {customActions?.map(action => {\n return (\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n action.onMouseDown();\n }}\n tooltip={action.text}\n key={action.icon}\n >\n <Icon name={action.icon} />\n </ToolbarButton>\n );\n })}\n {activeFeatures.links && <AnchorButton editor={editor} osx={osx} />}\n {activeFeatures.images && <ImageButton editor={editor} />}\n </Flex>\n </Flex>\n );\n};\n\nexport default Toolbar;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,EAAE,EAQH,MAAM,OAAO,CAAC;AASf,OAAO,EAQL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAajC,OAAO,EAAuB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAmBlF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,~~CA2Z1D~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,EAAE,EAQH,MAAM,OAAO,CAAC;AASf,OAAO,EAQL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAajC,OAAO,EAAuB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAmBlF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAga1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -32,6 +32,7 @@ const StyledSearchPopover = styled(StyledPopover) `
 const RichTextEditor = forwardRef((props, ref) => {
     const { components: { 'text-area': { 'min-height': minHeight } } } = useTheme();
     const uid = useUID();
+    const labelId = useUID();
     const { id = uid, label, labelHidden, info, status, required, disabled, readOnly, onChange, onFocus, onBlur, placeholder, toolbar, onImageAdded, markdownOnly, searchTriggers, onSearch, getSearchItemReplacement, searchRenderers, menu, height = { min: minHeight }, defaultValue, autoFocus, ...restProps } = props;
     const formFieldRef = useRef(null);
     const editor = useMemo(() => withVoids(withReact(withHistory(createEditor()))), []);
@@ -104,12 +105,13 @@ const RichTextEditor = forwardRef((props, ref) => {
         clear: () => {
             const point = { path: [0, 0], offset: 0 };
             editor.selection = { anchor: point, focus: point };
-            setValue([
+            editor.children = [
                 {
                     type: 'paragraph',
                     children: [{ text: '' }]
                 }
-            ]);
+            ];
+            setValue(editor.children);
         },
         appendImage: ({ src, alt }, imageId) => {
             const path = EditorCommands.appendImage(editor, { src, alt }, imageId);
@@ -122,16 +124,17 @@ const RichTextEditor = forwardRef((props, ref) => {
             editor.insertText(text);
         },
         insertHtml: (html, overwrite = false) => {
-            setValue(prevValue => {
-                if (overwrite) {
-                    const point = { path: [0, 0], offset: 0 };
-                    editor.selection = { anchor: point, focus: point };
-                    return convertHtml(html !== '' ? html : '<p></p>');
-                }
-                return [...prevValue, ...convertHtml(html)];
-            });
+            if (overwrite) {
+                const point = { path: [0, 0], offset: 0 };
+                editor.selection = { anchor: point, focus: point };
+                editor.children = convertHtml(html !== '' ? html : '<p></p>');
+            }
+            else {
+                editor.children = [...value, ...convertHtml(html)];
+            }
+            setValue(editor.children);
         }
-    }), [value, setValue]);
+    }), [editor, value]);
     const onMenuItemClick = (itemId, e) => {
         // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.
         menu?.onItemClick?.(itemId, e);
@@ -229,7 +232,7 @@ const RichTextEditor = forwardRef((props, ref) => {
             disabled: disabled || false
         }, children: _jsx(FormField, { as: StyledRichTextFormField, toolbar: !!(!markdownOnly && toolbar?.length), label:
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-            _jsx("span", { onClick: () => onEditorFocus({ focusEditor: true }), children: label }, void 0), labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onDrop: onDrop, onFocus: (e) => {
+            _jsx("span", { onClick: () => onEditorFocus({ focusEditor: true }), children: label }, void 0), labelHidden: labelHidden, labelFor: '', labelId: labelId, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onDrop: onDrop, onFocus: (e) => {
                 if (e.target === formFieldRef.current && !disabled) {
                     onEditorFocus({ focusEditor: true });
                 }
@@ -281,7 +284,7 @@ const RichTextEditor = forwardRef((props, ref) => {
                                     }
                                 }, children: _jsx(Editable, { id: id, renderElement: nodeRenderer, renderLeaf: leafRenderer, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: placeholder, onFocus: (event) => {
                                         onEditorFocus({ focusEditor: true, event });
-                                    }, onBlur: () => blurEditor(), disabled: disabled, readOnly: readOnly, onPaste: onPaste, tabIndex: disabled ? -1 : undefined }, void 0) }, void 0), !markdownOnly && !readOnly && toolbar?.length ? (_jsx(Toolbar, { features: toolbar, sticky: toolbarSticky, setFocusableBtn: el => {
+                                    }, onBlur: () => blurEditor(), disabled: disabled, readOnly: readOnly, onPaste: onPaste, tabIndex: disabled ? -1 : undefined, "aria-labelledby": labelId }, void 0) }, void 0), !markdownOnly && !readOnly && toolbar?.length ? (_jsx(Toolbar, { features: toolbar, sticky: toolbarSticky, setFocusableBtn: el => {
                                     setFocusableToolbarBtn(el);
                                 } }, void 0)) : null] }, void 0), _jsx(Popover, { show: !!popoverTarget && !!menu, strategy: 'fixed', target: searchEl, placement: 'bottom-start', children: menu && (_jsx(Menu, { ...menu, as: StyledSearchPopover, focusControlEl: formFieldRef.current?.querySelector('[role="textbox"]') || undefined, mode: 'action', onItemClick: onMenuItemClick }, void 0)) }, void 0)] }, void 0) }, void 0) }, void 0));
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n useState,\n useRef,\n useMemo,\n FC,\n useEffect,\n useCallback,\n MouseEvent,\n KeyboardEvent,\n useImperativeHandle,\n ClipboardEvent,\n FocusEvent\n} from 'react';\n// Import the Slate editor factory.\nimport { createEditor, Editor, Node, Element, Text, Range, Transforms } from 'slate';\n// Import the Slate components and React plugin.\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react';\nimport { withHistory } from 'slate-history';\nimport styled from 'styled-components';\nimport { VirtualElement } from '@popperjs/core';\n\nimport {\n FormField,\n FormControl,\n StyledPopover,\n useTheme,\n useUID,\n createUID,\n debounce,\n ForwardProps,\n Popover,\n Menu\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n StyledEditorContainer,\n StyledRichTextFormField\n} from './RichTextEditor.styles';\nimport Toolbar from './Toolbar/Toolbar';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { onSearchChange } from './utils/search';\nimport EditorCommands from './utils/EditorCommands';\nimport ListCommands from './utils/ListCommands';\nimport { convertHtml } from './utils/htmlConverter';\nimport { convertSlateToHtml } from './utils/slateConverter';\nimport { RichTextEditorState, RichTextEditorProps } from './RichTextEditor.types';\nimport { RichTextEditorContext, RichTextEditorContextValue } from './RichTextEditor.context';\nimport { convertMarkdownForEditor } from './utils/markdownConverter';\n\nconst withVoids = (editor: Editor): ReactEditor => {\n editor.isVoid = element => {\n if (element.type === 'image' \|\| element.type === 'image-placeholder') {\n return true;\n }\n return false;\n };\n\n return editor as ReactEditor;\n};\n\nconst StyledSearchPopover = styled(StyledPopover)`\n min-width: 20rem;\n`;\n\nconst RichTextEditor: FC<RichTextEditorProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<RichTextEditorProps>, ref: RichTextEditorProps['ref']) => {\n const {\n components: {\n 'text-area': { 'min-height': minHeight }\n }\n } = useTheme();\n const uid = useUID();\n const {\n id = uid,\n label,\n labelHidden,\n info,\n status,\n required,\n disabled,\n readOnly,\n onChange,\n onFocus,\n onBlur,\n placeholder,\n toolbar,\n onImageAdded,\n markdownOnly,\n searchTriggers,\n onSearch,\n getSearchItemReplacement,\n searchRenderers,\n menu,\n height = { min: minHeight },\n defaultValue,\n autoFocus,\n ...restProps\n } = props;\n\n const formFieldRef = useRef<HTMLElement>(null);\n const editor = useMemo(() => withVoids(withReact(withHistory(createEditor()))), []);\n const [value, setValue] = useState<(Element \| Text)[]>(() =>\n defaultValue && !markdownOnly\n ? convertHtml(defaultValue)\n : convertMarkdownForEditor(defaultValue, searchRenderers)\n );\n const [toolbarPopover, setToolbarPopover] = useState(false);\n const [toolbarSticky, setToolbarSticky] = useState(false);\n const [focusableToolbarBtn, setFocusableToolbarBtn] = useState<HTMLElement \| null>(null);\n\n const [popoverTarget, setPopoverTarget] = useState<Range \| null>(null);\n const [searchEl, setSearchEl] = useState<VirtualElement \| null>(null);\n\n const updateToolbarStyle = () => {\n if ((formFieldRef.current?.offsetHeight \|\| 0) > window.innerHeight) {\n setToolbarSticky(true);\n } else {\n setToolbarSticky(false);\n }\n };\n\n const debouncedUpdateToolbarStyle = debounce(updateToolbarStyle, 200);\n\n const getPlainText = () => {\n return value\n .map(node => {\n if (markdownOnly && (node as Element).children) {\n return (node as Element).children\n .map(textNode => (textNode as Text).searchResult?.markdown \|\| (textNode as Text).text)\n .join('');\n }\n return Node.string(node);\n })\n .join('\\n');\n };\n\n const onEditorFocus: RichTextEditorContextValue['onEditorFocus'] = ({\n event,\n force,\n focusEditor,\n runAfterFocus\n }) => {\n if (focusEditor) {\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor)) {\n ReactEditor.focus(editor);\n onFocus?.();\n }\n }, 0);\n }\n\n if (runAfterFocus && (force \|\| (!disabled && !toolbarPopover))) {\n setTimeout(runAfterFocus, 0);\n } else {\n event?.stopPropagation();\n }\n };\n\n const blurEditor = (force?: boolean) => {\n if (force) ReactEditor.blur(editor);\n if (ReactEditor.isFocused(editor)) {\n onBlur?.();\n }\n setPopoverTarget(null);\n };\n\n useImperativeHandle<any, RichTextEditorState>(\n ref,\n () => ({\n focus: () => {\n onEditorFocus({ focusEditor: true });\n },\n getPlainText: () => {\n return getPlainText();\n },\n getRichText: () => {\n return JSON.stringify(value);\n },\n getHtml: () => {\n return convertSlateToHtml(value);\n },\n clear: () => {\n const point = { path: [0, 0], offset: 0 };\n editor.selection = { anchor: point, focus: point };\n setValue([\n {\n type: 'paragraph',\n children: [{ text: '' }]\n }\n ]);\n },\n appendImage: ({ src, alt }, imageId) => {\n const path = EditorCommands.appendImage(editor, { src, alt }, imageId);\n if (path) {\n Transforms.select(editor, { anchor: path, focus: path });\n ReactEditor.focus(editor);\n }\n },\n insertText: (text: string) => {\n editor.insertText(text);\n },\n insertHtml: (html: string, overwrite: boolean = false) => {\n setValue(prevValue => {\n if (overwrite) {\n const point = { path: [0, 0], offset: 0 };\n editor.selection = { anchor: point, focus: point };\n return convertHtml(html !== '' ? html : '<p></p>');\n }\n return [...prevValue, ...convertHtml(html)];\n });\n }\n }),\n [value, setValue]\n );\n\n const onMenuItemClick = (itemId: string, e: MouseEvent<any> \| KeyboardEvent<any>) => {\n // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.\n menu?.onItemClick?.(itemId, e as MouseEvent<any>);\n const replacement = getSearchItemReplacement?.(itemId);\n if (replacement) {\n let node: Node;\n\n if (replacement.markdown && replacement.component && replacement.props) {\n node = {\n text: replacement.text,\n searchResult: {\n markdown: replacement.markdown,\n component: replacement.component,\n props: replacement.props,\n // Prevents copying searchResult attribute onPaste\n toJSON: () => undefined\n }\n };\n } else {\n node = { text: replacement.text };\n }\n\n EditorCommands.replaceWithNodes(editor, popoverTarget, node);\n }\n };\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<any>) => {\n if (popoverTarget && menu && event.key === 'Escape') {\n event.preventDefault();\n setPopoverTarget(null);\n } else if (event.key === 'Tab' && !event.shiftKey) {\n if (focusableToolbarBtn) {\n focusableToolbarBtn.focus();\n event.preventDefault();\n }\n } else {\n ListCommands.checkListEnter(editor, event);\n EditorCommands.checkLinkBreak(editor, event);\n EditorCommands.checkSearchDownKeys(editor, event);\n EditorCommands.checkImageEnter(editor, event);\n EditorCommands.checkKeyCommands(editor, event);\n }\n },\n [menu, popoverTarget, focusableToolbarBtn]\n );\n\n const onKeyUp = (event: KeyboardEvent<any>) => {\n EditorCommands.checkSearchUpKeys(editor, event);\n };\n\n // Adds an image placeholder to be replaced later in time by an image\n const addImage = (file: File) => {\n const placeholderId = EditorCommands.appendImagePlaceholder(editor);\n if (placeholderId) onImageAdded?.(file, placeholderId);\n };\n\n const onPaste = (e: ClipboardEvent) => {\n let image;\n for (let i = 0; i < e.clipboardData.items.length; i += 1) {\n const item = e.clipboardData.items[i];\n\n if (item.type.startsWith('image')) {\n image = item.getAsFile();\n }\n }\n\n if (image) {\n e.preventDefault();\n addImage(image);\n }\n };\n\n const onDrop = (e: DragEvent) => {\n e.preventDefault();\n if (e.dataTransfer) {\n Array.from(e.dataTransfer.files).forEach(file => {\n if (file.type.includes('image')) {\n addImage(file);\n }\n });\n }\n };\n\n useEffect(() => {\n if (popoverTarget) {\n setSearchEl(ReactEditor.toDOMRange(editor, popoverTarget) as VirtualElement);\n }\n }, [popoverTarget]);\n\n useEffect(() => {\n onChange?.();\n }, [value]);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n ReactEditor.focus(editor);\n }, 0);\n }\n }, []);\n\n return (\n <RichTextEditorContext.Provider\n value={{\n addImage,\n setPopoverOpen: setToolbarPopover,\n onEditorFocus,\n disabled: disabled \|\| false\n }}\n >\n <FormField\n as={StyledRichTextFormField}\n toolbar={!!(!markdownOnly && toolbar?.length)}\n label={\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <span onClick={() => onEditorFocus({ focusEditor: true })}>{label}</span>\n }\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onDrop={onDrop}\n onFocus={(e: FocusEvent) => {\n if (e.target === formFieldRef.current && !disabled) {\n onEditorFocus({ focusEditor: true });\n }\n }}\n ref={formFieldRef}\n aria-label={`${label} ${\n !markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''\n }`}\n tabIndex={disabled ? -1 : undefined}\n >\n <Slate\n editor={editor}\n value={value}\n onChange={newValue => {\n if (!disabled) {\n setValue(newValue);\n debouncedUpdateToolbarStyle();\n\n if (searchTriggers && onSearch && markdownOnly) {\n const res = searchTriggers.flatMap(({ trigger, regex }) => {\n for (let i = 0; i < 10; i += 1) {\n try {\n const groupId = createUID();\n return [\n {\n trigger,\n groupId: `g${groupId}`,\n regex: new RegExp(\n String.raw`(?:^\|\\s)(?<match>${trigger}(?<g${groupId}>${\n regex \|\| String.raw`\\w*`\n }))$`\n )\n }\n ];\n } catch (e: unknown) {\n if (!(e instanceof SyntaxError)) throw e;\n }\n }\n\n // Failsafe\n return [];\n });\n\n let search;\n for (let i = 0; i < res.length; i += 1) {\n search = onSearchChange(editor, res[i]);\n if (search) break;\n }\n\n if (search) {\n setPopoverTarget(search.target);\n onSearch({ search: search.search, trigger: search.trigger });\n } else {\n setPopoverTarget(null);\n }\n }\n }\n }}\n >\n <FormControl\n {...restProps}\n ref={ref}\n ariaLabel={label}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n as={StyledRichTextEditor}\n toolbar={!!(!markdownOnly && toolbar?.length)}\n onClick={() => {\n onEditorFocus({ focusEditor: true });\n }}\n focused={ReactEditor.isFocused(editor)}\n >\n <StyledEditorContainer\n toolbar={!!(!markdownOnly && toolbar?.length)}\n containerHeight={height}\n onClick={() => {\n if (!disabled) {\n onEditorFocus({ focusEditor: true });\n }\n }}\n >\n <Editable\n id={id}\n renderElement={nodeRenderer}\n renderLeaf={leafRenderer}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n placeholder={placeholder}\n onFocus={(event: FocusEvent) => {\n onEditorFocus({ focusEditor: true, event });\n }}\n onBlur={() => blurEditor()}\n disabled={disabled}\n readOnly={readOnly}\n onPaste={onPaste}\n tabIndex={disabled ? -1 : undefined}\n />\n </StyledEditorContainer>\n {!markdownOnly && !readOnly && toolbar?.length ? (\n <Toolbar\n features={toolbar}\n sticky={toolbarSticky}\n setFocusableBtn={el => {\n setFocusableToolbarBtn(el);\n }}\n />\n ) : null}\n </FormControl>\n <Popover\n show={!!popoverTarget && !!menu}\n strategy='fixed'\n target={searchEl}\n placement='bottom-start'\n >\n {menu && (\n <Menu\n {...menu}\n as={StyledSearchPopover}\n focusControlEl={\n formFieldRef.current?.querySelector('[role=\"textbox\"]') \|\| undefined\n }\n mode='action'\n onItemClick={onMenuItemClick}\n />\n )}\n </Popover>\n </Slate>\n </FormField>\n </RichTextEditorContext.Provider>\n );\n }\n);\n\nexport default RichTextEditor;\n"]}
1	+ {"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n useState,\n useRef,\n useMemo,\n FC,\n useEffect,\n useCallback,\n MouseEvent,\n KeyboardEvent,\n useImperativeHandle,\n ClipboardEvent,\n FocusEvent\n} from 'react';\n// Import the Slate editor factory.\nimport { createEditor, Editor, Node, Element, Text, Range, Transforms } from 'slate';\n// Import the Slate components and React plugin.\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react';\nimport { withHistory } from 'slate-history';\nimport styled from 'styled-components';\nimport { VirtualElement } from '@popperjs/core';\n\nimport {\n FormField,\n FormControl,\n StyledPopover,\n useTheme,\n useUID,\n createUID,\n debounce,\n ForwardProps,\n Popover,\n Menu\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n StyledEditorContainer,\n StyledRichTextFormField\n} from './RichTextEditor.styles';\nimport Toolbar from './Toolbar/Toolbar';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { onSearchChange } from './utils/search';\nimport EditorCommands from './utils/EditorCommands';\nimport ListCommands from './utils/ListCommands';\nimport { convertHtml } from './utils/htmlConverter';\nimport { convertSlateToHtml } from './utils/slateConverter';\nimport { RichTextEditorState, RichTextEditorProps } from './RichTextEditor.types';\nimport { RichTextEditorContext, RichTextEditorContextValue } from './RichTextEditor.context';\nimport { convertMarkdownForEditor } from './utils/markdownConverter';\n\nconst withVoids = (editor: Editor): ReactEditor => {\n editor.isVoid = element => {\n if (element.type === 'image' \|\| element.type === 'image-placeholder') {\n return true;\n }\n return false;\n };\n\n return editor as ReactEditor;\n};\n\nconst StyledSearchPopover = styled(StyledPopover)`\n min-width: 20rem;\n`;\n\nconst RichTextEditor: FC<RichTextEditorProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<RichTextEditorProps>, ref: RichTextEditorProps['ref']) => {\n const {\n components: {\n 'text-area': { 'min-height': minHeight }\n }\n } = useTheme();\n const uid = useUID();\n const labelId = useUID();\n const {\n id = uid,\n label,\n labelHidden,\n info,\n status,\n required,\n disabled,\n readOnly,\n onChange,\n onFocus,\n onBlur,\n placeholder,\n toolbar,\n onImageAdded,\n markdownOnly,\n searchTriggers,\n onSearch,\n getSearchItemReplacement,\n searchRenderers,\n menu,\n height = { min: minHeight },\n defaultValue,\n autoFocus,\n ...restProps\n } = props;\n\n const formFieldRef = useRef<HTMLElement>(null);\n const editor = useMemo(() => withVoids(withReact(withHistory(createEditor()))), []);\n const [value, setValue] = useState<(Element \| Text)[]>(() =>\n defaultValue && !markdownOnly\n ? convertHtml(defaultValue)\n : convertMarkdownForEditor(defaultValue, searchRenderers)\n );\n const [toolbarPopover, setToolbarPopover] = useState(false);\n const [toolbarSticky, setToolbarSticky] = useState(false);\n const [focusableToolbarBtn, setFocusableToolbarBtn] = useState<HTMLElement \| null>(null);\n\n const [popoverTarget, setPopoverTarget] = useState<Range \| null>(null);\n const [searchEl, setSearchEl] = useState<VirtualElement \| null>(null);\n\n const updateToolbarStyle = () => {\n if ((formFieldRef.current?.offsetHeight \|\| 0) > window.innerHeight) {\n setToolbarSticky(true);\n } else {\n setToolbarSticky(false);\n }\n };\n\n const debouncedUpdateToolbarStyle = debounce(updateToolbarStyle, 200);\n\n const getPlainText = () => {\n return value\n .map(node => {\n if (markdownOnly && (node as Element).children) {\n return (node as Element).children\n .map(textNode => (textNode as Text).searchResult?.markdown \|\| (textNode as Text).text)\n .join('');\n }\n return Node.string(node);\n })\n .join('\\n');\n };\n\n const onEditorFocus: RichTextEditorContextValue['onEditorFocus'] = ({\n event,\n force,\n focusEditor,\n runAfterFocus\n }) => {\n if (focusEditor) {\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor)) {\n ReactEditor.focus(editor);\n onFocus?.();\n }\n }, 0);\n }\n\n if (runAfterFocus && (force \|\| (!disabled && !toolbarPopover))) {\n setTimeout(runAfterFocus, 0);\n } else {\n event?.stopPropagation();\n }\n };\n\n const blurEditor = (force?: boolean) => {\n if (force) ReactEditor.blur(editor);\n if (ReactEditor.isFocused(editor)) {\n onBlur?.();\n }\n setPopoverTarget(null);\n };\n\n useImperativeHandle<any, RichTextEditorState>(\n ref,\n () => ({\n focus: () => {\n onEditorFocus({ focusEditor: true });\n },\n getPlainText: () => {\n return getPlainText();\n },\n getRichText: () => {\n return JSON.stringify(value);\n },\n getHtml: () => {\n return convertSlateToHtml(value);\n },\n clear: () => {\n const point = { path: [0, 0], offset: 0 };\n editor.selection = { anchor: point, focus: point };\n editor.children = [\n {\n type: 'paragraph',\n children: [{ text: '' }]\n }\n ];\n setValue(editor.children);\n },\n appendImage: ({ src, alt }, imageId) => {\n const path = EditorCommands.appendImage(editor, { src, alt }, imageId);\n if (path) {\n Transforms.select(editor, { anchor: path, focus: path });\n ReactEditor.focus(editor);\n }\n },\n insertText: (text: string) => {\n editor.insertText(text);\n },\n insertHtml: (html: string, overwrite: boolean = false) => {\n if (overwrite) {\n const point = { path: [0, 0], offset: 0 };\n editor.selection = { anchor: point, focus: point };\n editor.children = convertHtml(html !== '' ? html : '<p></p>');\n } else {\n editor.children = [...value, ...convertHtml(html)];\n }\n setValue(editor.children);\n }\n }),\n [editor, value]\n );\n\n const onMenuItemClick = (itemId: string, e: MouseEvent<any> \| KeyboardEvent<any>) => {\n // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.\n menu?.onItemClick?.(itemId, e as MouseEvent<any>);\n const replacement = getSearchItemReplacement?.(itemId);\n if (replacement) {\n let node: Node;\n\n if (replacement.markdown && replacement.component && replacement.props) {\n node = {\n text: replacement.text,\n searchResult: {\n markdown: replacement.markdown,\n component: replacement.component,\n props: replacement.props,\n // Prevents copying searchResult attribute onPaste\n toJSON: () => undefined\n }\n };\n } else {\n node = { text: replacement.text };\n }\n\n EditorCommands.replaceWithNodes(editor, popoverTarget, node);\n }\n };\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<any>) => {\n if (popoverTarget && menu && event.key === 'Escape') {\n event.preventDefault();\n setPopoverTarget(null);\n } else if (event.key === 'Tab' && !event.shiftKey) {\n if (focusableToolbarBtn) {\n focusableToolbarBtn.focus();\n event.preventDefault();\n }\n } else {\n ListCommands.checkListEnter(editor, event);\n EditorCommands.checkLinkBreak(editor, event);\n EditorCommands.checkSearchDownKeys(editor, event);\n EditorCommands.checkImageEnter(editor, event);\n EditorCommands.checkKeyCommands(editor, event);\n }\n },\n [menu, popoverTarget, focusableToolbarBtn]\n );\n\n const onKeyUp = (event: KeyboardEvent<any>) => {\n EditorCommands.checkSearchUpKeys(editor, event);\n };\n\n // Adds an image placeholder to be replaced later in time by an image\n const addImage = (file: File) => {\n const placeholderId = EditorCommands.appendImagePlaceholder(editor);\n if (placeholderId) onImageAdded?.(file, placeholderId);\n };\n\n const onPaste = (e: ClipboardEvent) => {\n let image;\n for (let i = 0; i < e.clipboardData.items.length; i += 1) {\n const item = e.clipboardData.items[i];\n\n if (item.type.startsWith('image')) {\n image = item.getAsFile();\n }\n }\n\n if (image) {\n e.preventDefault();\n addImage(image);\n }\n };\n\n const onDrop = (e: DragEvent) => {\n e.preventDefault();\n if (e.dataTransfer) {\n Array.from(e.dataTransfer.files).forEach(file => {\n if (file.type.includes('image')) {\n addImage(file);\n }\n });\n }\n };\n\n useEffect(() => {\n if (popoverTarget) {\n setSearchEl(ReactEditor.toDOMRange(editor, popoverTarget) as VirtualElement);\n }\n }, [popoverTarget]);\n\n useEffect(() => {\n onChange?.();\n }, [value]);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n ReactEditor.focus(editor);\n }, 0);\n }\n }, []);\n\n return (\n <RichTextEditorContext.Provider\n value={{\n addImage,\n setPopoverOpen: setToolbarPopover,\n onEditorFocus,\n disabled: disabled \|\| false\n }}\n >\n <FormField\n as={StyledRichTextFormField}\n toolbar={!!(!markdownOnly && toolbar?.length)}\n label={\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <span onClick={() => onEditorFocus({ focusEditor: true })}>{label}</span>\n }\n labelHidden={labelHidden}\n labelFor=''\n labelId={labelId}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onDrop={onDrop}\n onFocus={(e: FocusEvent) => {\n if (e.target === formFieldRef.current && !disabled) {\n onEditorFocus({ focusEditor: true });\n }\n }}\n ref={formFieldRef}\n aria-label={`${label} ${\n !markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''\n }`}\n tabIndex={disabled ? -1 : undefined}\n >\n <Slate\n editor={editor}\n value={value}\n onChange={newValue => {\n if (!disabled) {\n setValue(newValue);\n debouncedUpdateToolbarStyle();\n\n if (searchTriggers && onSearch && markdownOnly) {\n const res = searchTriggers.flatMap(({ trigger, regex }) => {\n for (let i = 0; i < 10; i += 1) {\n try {\n const groupId = createUID();\n return [\n {\n trigger,\n groupId: `g${groupId}`,\n regex: new RegExp(\n String.raw`(?:^\|\\s)(?<match>${trigger}(?<g${groupId}>${\n regex \|\| String.raw`\\w*`\n }))$`\n )\n }\n ];\n } catch (e: unknown) {\n if (!(e instanceof SyntaxError)) throw e;\n }\n }\n\n // Failsafe\n return [];\n });\n\n let search;\n for (let i = 0; i < res.length; i += 1) {\n search = onSearchChange(editor, res[i]);\n if (search) break;\n }\n\n if (search) {\n setPopoverTarget(search.target);\n onSearch({ search: search.search, trigger: search.trigger });\n } else {\n setPopoverTarget(null);\n }\n }\n }\n }}\n >\n <FormControl\n {...restProps}\n ref={ref}\n ariaLabel={label}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n as={StyledRichTextEditor}\n toolbar={!!(!markdownOnly && toolbar?.length)}\n onClick={() => {\n onEditorFocus({ focusEditor: true });\n }}\n focused={ReactEditor.isFocused(editor)}\n >\n <StyledEditorContainer\n toolbar={!!(!markdownOnly && toolbar?.length)}\n containerHeight={height}\n onClick={() => {\n if (!disabled) {\n onEditorFocus({ focusEditor: true });\n }\n }}\n >\n <Editable\n id={id}\n renderElement={nodeRenderer}\n renderLeaf={leafRenderer}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n placeholder={placeholder}\n onFocus={(event: FocusEvent) => {\n onEditorFocus({ focusEditor: true, event });\n }}\n onBlur={() => blurEditor()}\n disabled={disabled}\n readOnly={readOnly}\n onPaste={onPaste}\n tabIndex={disabled ? -1 : undefined}\n aria-labelledby={labelId}\n />\n </StyledEditorContainer>\n {!markdownOnly && !readOnly && toolbar?.length ? (\n <Toolbar\n features={toolbar}\n sticky={toolbarSticky}\n setFocusableBtn={el => {\n setFocusableToolbarBtn(el);\n }}\n />\n ) : null}\n </FormControl>\n <Popover\n show={!!popoverTarget && !!menu}\n strategy='fixed'\n target={searchEl}\n placement='bottom-start'\n >\n {menu && (\n <Menu\n {...menu}\n as={StyledSearchPopover}\n focusControlEl={\n formFieldRef.current?.querySelector('[role=\"textbox\"]') \|\| undefined\n }\n mode='action'\n onItemClick={onMenuItemClick}\n />\n )}\n </Popover>\n </Slate>\n </FormField>\n </RichTextEditorContext.Provider>\n );\n }\n);\n\nexport default RichTextEditor;\n"]}

package/lib/components/RichTextEditor/RichTextViewer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAK1E,OAAO,EAAE,YAAY,EAAuB,MAAM,yBAAyB,CAAC;AAI5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAQ7D,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,~~CA8D1D~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAK1E,OAAO,EAAE,YAAY,EAAuB,MAAM,yBAAyB,CAAC;AAI5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAQ7D,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAiE1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/RichTextEditor/RichTextViewer.js CHANGED Viewed

@@ -13,35 +13,40 @@ const URL_REGEX = /(?<leadingChar>^|[^(:/a-z0-9@])(?<url>(?<protocol>https?:\/\/
 const RichTextViewer = forwardRef(({ content, type, interactionRenderers, markdownMap, onRetry, ...restProps }, ref) => {
     const t = useI18n();
     const editor = useMemo(() => withReact(createEditor()), []);
-    const [nodes, setNodes] = useState([]);
+    // State is unused, but still set to force a re-render when updating editor.children.
+    const [, setNodes] = useState([]);
     const [error, setError] = useState(false);
     useEffect(() => {
         if (type === 'markdown') {
-            setNodes(convertMarkdown(content, [...(interactionRenderers || []), { regexPattern: URL_REGEX, type: 'builtin-url' }], markdownMap));
+            editor.children = convertMarkdown(content, [...(interactionRenderers || []), { regexPattern: URL_REGEX, type: 'builtin-url' }], markdownMap);
+            setNodes(editor.children);
         }
         if (type === 'richtext') {
-            setNodes(JSON.parse(content));
+            editor.children = JSON.parse(content);
+            setNodes(editor.children);
         }
-        if (type === 'html' && interactionRenderers) {
+        if (type === 'html' && interactionRenderers && interactionRenderers.length > 0) {
             try {
-                const convertedHtmlNodes = convertHtml(content, interactionRenderers);
-                setNodes(convertedHtmlNodes);
+                editor.children = convertHtml(content, interactionRenderers);
+                setNodes(editor.children);
                 setError(false);
             }
-            catch (e) {
+            catch {
+                editor.children = [];
+                setNodes(editor.children);
                 setError(true);
             }
         }
-    }, [content]);
+    }, [editor, content, type, interactionRenderers]);
     const sanitizedHtml = useMemo(() => {
-        return type === 'html' && interactionRenderers && interactionRenderers.length > 0
-            ? ''
-            : dompurify.sanitize(content);
+        return type === 'html' && (!interactionRenderers || interactionRenderers.length === 0)
+            ? dompurify.sanitize(content)
+            : '';
     }, [content, type, interactionRenderers]);
-    if (type === 'html' && sanitizedHtml) {
-        return _jsx(StyledHtml, { dangerouslySetInnerHTML: { __html: sanitizedHtml } }, void 0);
+    if (sanitizedHtml) {
+        return _jsx(StyledHtml, { ref: ref, dangerouslySetInnerHTML: { __html: sanitizedHtml } }, void 0);
     }
-    return error ? (_jsx(ErrorState, { message: t('rte_invalid_html'), onRetry: onRetry }, void 0)) : (_jsx(StyledRichTextViewer, { ref: ref, ...restProps, children: _jsx(Slate, { editor: editor, value: nodes, onChange: () => { }, children: _jsx(StyledEditorContainer, { children: _jsx(Editable, { readOnly: true, renderElement: nodeRenderer, renderLeaf: leafRenderer }, void 0) }, void 0) }, void 0) }, void 0));
+    return error ? (_jsx(ErrorState, { message: t('rte_invalid_html'), onRetry: onRetry }, void 0)) : (_jsx(StyledRichTextViewer, { ref: ref, ...restProps, children: _jsx(Slate, { editor: editor, value: [], onChange: () => { }, children: _jsx(StyledEditorContainer, { children: _jsx(Editable, { readOnly: true, renderElement: nodeRenderer, renderLeaf: leafRenderer }, void 0) }, void 0) }, void 0) }, void 0));
 });
 export default RichTextViewer;
 //# sourceMappingURL=RichTextViewer.js.map

package/lib/components/RichTextEditor/RichTextViewer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextViewer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,~~EAAiB~~,YAAY,EAAE,MAAM,OAAO,CAAC;~~AACpD~~,OAAO,SAAS,MAAM,WAAW,CAAC;AAElC,OAAO,EAAgB,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,4BAA4B;AAC5B,MAAM,SAAS,GACb,+LAA+L,CAAC;AAElM,MAAM,cAAc,GAA2C,UAAU,CACvE,CACE,EACE,OAAO,EACP,IAAI,EACJ,oBAAoB,EACpB,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACQ,EACtB,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,~~KAAK,~~EAAE,QAAQ,CAAC,GAAG,QAAQ,~~CAAqB~~,EAAE,CAAC,CAAC;~~IAC3D~~,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,QAAQ,~~CACN~~,eAAe,~~CACb~~,OAAO,EACP,CAAC,GAAG,CAAC,oBAAoB,IAAI,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,EACnF,WAAW,CACZ,~~CACF~~,CAAC;~~SACH~~;QACD,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,~~QAAQ~~,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;~~SAC/B~~;QACD,IAAI,IAAI,KAAK,MAAM,IAAI,oBAAoB,EAAE;~~YAC3C~~,IAAI;gBACF,MAAM,~~kBAAkB~~,GAAG,WAAW,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;~~gBACtE~~,QAAQ,CAAC,~~kBAAkB~~,CAAC,CAAC;~~gBAC7B~~,QAAQ,CAAC,KAAK,CAAC,CAAC;aACjB;YAAC,~~OAAO~~,CAAC,EAAE;~~gBACV~~,QAAQ,CAAC,IAAI,CAAC,CAAC;aAChB;SACF;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;~~IAEd~~,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,IAAI,KAAK,MAAM,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,~~GAAG~~,CAAC~~;YAC/E~~,CAAC~~,CAAC,EAAE~~;~~YACJ~~,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;~~IAClC~~,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1C,IAAI,~~IAAI,KAAK,MAAM,IAAI,~~aAAa,EAAE;~~QACpC~~,OAAO,KAAC,UAAU,IAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,WAAI,CAAC;~~KAC3E~~;~~IACD~~,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,WAAI,CACjE,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC3C,KAAC,KAAK,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,~~KAAK~~,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,~~YACrD~~,KAAC,qBAAqB,cACpB,KAAC,QAAQ,IAAC,QAAQ,QAAC,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,WAAI,WACtD,WAClB,WACa,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, Ref, forwardRef, useMemo, useState, useEffect } from 'react';\nimport { Slate, Editable, withReact } from 'slate-react';\nimport { ~~Element~~, ~~Text,~~ createEditor } from 'slate';\nimport dompurify from 'dompurify';\n\nimport { ForwardProps, ErrorState, useI18n } from '@pega/cosmos-react-core';\n\nimport convertMarkdown from './utils/markdownConverter';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { RichTextViewerProps } from './RichTextViewer.types';\nimport { StyledEditorContainer, StyledHtml, StyledRichTextViewer } from './RichTextEditor.styles';\nimport { convertHtml } from './utils/htmlConverter';\n\n// Regex to match valid URLs\nconst URL_REGEX =\n /(?<leadingChar>^\|[^(:/a-z0-9@])(?<url>(?<protocol>https?:\\/\\/)?(?<host>[a-z0-9]+(?:[-.][a-z0-9]+)\\.[a-z]{2,5}(?<port>:[0-9]{1,5})?)(?<pathQueryHash>\\/\\S)?)(?<trailingChar>$\|[^):/a-z0-9])/g;\n\nconst RichTextViewer: FC<RichTextViewerProps & ForwardProps> = forwardRef(\n (\n {\n content,\n type,\n interactionRenderers,\n markdownMap,\n onRetry,\n ...restProps\n }: RichTextViewerProps,\n ref: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n const editor = useMemo(() => withReact(createEditor()), []);\n const [~~nodes~~, setNodes] = useState<~~(Element \| Text)~~[]>([]);\n const [error, setError] = useState(false);\n\n useEffect(() => {\n if (type === 'markdown') {\n ~~setNodes~~(\n ~~convertMarkdown(\n~~ content,\n [...(interactionRenderers \|\| []), { regexPattern: URL_REGEX, type: 'builtin-url' }],\n markdownMap\n )\n );\n }\n if (type === 'richtext') {\n ~~setNodes(~~JSON.parse(content));\n }\n if (type === 'html' && interactionRenderers) {\n try {\n ~~const~~ ~~convertedHtmlNodes~~ = convertHtml(content, interactionRenderers);\n setNodes(~~convertedHtmlNodes~~);\n setError(false);\n } catch ~~(e)~~ {\n setError(true);\n }\n }\n }, [content]);\n\n const sanitizedHtml = useMemo(() => {\n return type === 'html' && interactionRenderers && interactionRenderers.length > 0\n ? ~~''\n :~~ dompurify.sanitize(content);\n }, [content, type, interactionRenderers]);\n\n if (~~type === 'html' &&~~ sanitizedHtml) {\n return <StyledHtml dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;\n }\n return error ? (\n <ErrorState message={t('rte_invalid_html')} onRetry={onRetry} />\n ) : (\n <StyledRichTextViewer ref={ref} {...restProps}>\n <Slate editor={editor} value={~~nodes~~} onChange={() => {}}>\n <StyledEditorContainer>\n <Editable readOnly renderElement={nodeRenderer} renderLeaf={leafRenderer} />\n </StyledEditorContainer>\n </Slate>\n </StyledRichTextViewer>\n );\n }\n);\n\nexport default RichTextViewer;\n"]}
1	+ {"version":3,"file":"RichTextViewer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,SAAS,MAAM,WAAW,CAAC;AAElC,OAAO,EAAgB,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,4BAA4B;AAC5B,MAAM,SAAS,GACb,+LAA+L,CAAC;AAElM,MAAM,cAAc,GAA2C,UAAU,CACvE,CACE,EACE,OAAO,EACP,IAAI,EACJ,oBAAoB,EACpB,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACQ,EACtB,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5D,qFAAqF;IACrF,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,MAAM,CAAC,QAAQ,GAAG,eAAe,CAC/B,OAAO,EACP,CAAC,GAAG,CAAC,oBAAoB,IAAI,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,EACnF,WAAW,CACZ,CAAC;YACF,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;SAC3B;QACD,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACtC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;SAC3B;QACD,IAAI,IAAI,KAAK,MAAM,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9E,IAAI;gBACF,MAAM,CAAC,QAAQ,GAAG,WAAW,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;gBAC7D,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;gBAC1B,QAAQ,CAAC,KAAK,CAAC,CAAC;aACjB;YAAC,MAAM;gBACN,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;gBACrB,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;gBAC1B,QAAQ,CAAC,IAAI,CAAC,CAAC;aAChB;SACF;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,CAAC;YACpF,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC;YAC7B,CAAC,CAAC,EAAE,CAAC;IACT,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1C,IAAI,aAAa,EAAE;QACjB,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,WAAI,CAAC;KACrF;IAED,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,WAAI,CACjE,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC3C,KAAC,KAAK,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,YAClD,KAAC,qBAAqB,cACpB,KAAC,QAAQ,IAAC,QAAQ,QAAC,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,WAAI,WACtD,WAClB,WACa,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, Ref, forwardRef, useMemo, useState, useEffect } from 'react';\nimport { Slate, Editable, withReact } from 'slate-react';\nimport { Descendant, createEditor } from 'slate';\nimport dompurify from 'dompurify';\n\nimport { ForwardProps, ErrorState, useI18n } from '@pega/cosmos-react-core';\n\nimport convertMarkdown from './utils/markdownConverter';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { RichTextViewerProps } from './RichTextViewer.types';\nimport { StyledEditorContainer, StyledHtml, StyledRichTextViewer } from './RichTextEditor.styles';\nimport { convertHtml } from './utils/htmlConverter';\n\n// Regex to match valid URLs\nconst URL_REGEX =\n /(?<leadingChar>^\|[^(:/a-z0-9@])(?<url>(?<protocol>https?:\\/\\/)?(?<host>[a-z0-9]+(?:[-.][a-z0-9]+)\\.[a-z]{2,5}(?<port>:[0-9]{1,5})?)(?<pathQueryHash>\\/\\S)?)(?<trailingChar>$\|[^):/a-z0-9])/g;\n\nconst RichTextViewer: FC<RichTextViewerProps & ForwardProps> = forwardRef(\n (\n {\n content,\n type,\n interactionRenderers,\n markdownMap,\n onRetry,\n ...restProps\n }: RichTextViewerProps,\n ref: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n const editor = useMemo(() => withReact(createEditor()), []);\n // State is unused, but still set to force a re-render when updating editor.children.\n const [, setNodes] = useState<Descendant[]>([]);\n const [error, setError] = useState(false);\n\n useEffect(() => {\n if (type === 'markdown') {\n editor.children = convertMarkdown(\n content,\n [...(interactionRenderers \|\| []), { regexPattern: URL_REGEX, type: 'builtin-url' }],\n markdownMap\n );\n setNodes(editor.children);\n }\n if (type === 'richtext') {\n editor.children = JSON.parse(content);\n setNodes(editor.children);\n }\n if (type === 'html' && interactionRenderers && interactionRenderers.length > 0) {\n try {\n editor.children = convertHtml(content, interactionRenderers);\n setNodes(editor.children);\n setError(false);\n } catch {\n editor.children = [];\n setNodes(editor.children);\n setError(true);\n }\n }\n }, [editor, content, type, interactionRenderers]);\n const sanitizedHtml = useMemo(() => {\n return type === 'html' && (!interactionRenderers \|\| interactionRenderers.length === 0)\n ? dompurify.sanitize(content)\n : '';\n }, [content, type, interactionRenderers]);\n\n if (sanitizedHtml) {\n return <StyledHtml ref={ref} dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;\n }\n\n return error ? (\n <ErrorState message={t('rte_invalid_html')} onRetry={onRetry} />\n ) : (\n <StyledRichTextViewer ref={ref} {...restProps}>\n <Slate editor={editor} value={[]} onChange={() => {}}>\n <StyledEditorContainer>\n <Editable readOnly renderElement={nodeRenderer} renderLeaf={leafRenderer} />\n </StyledEditorContainer>\n </Slate>\n </StyledRichTextViewer>\n );\n }\n);\n\nexport default RichTextViewer;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-rte",
-  "version": "2.1.1",
+  "version": "3.0.0-dev.1.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,7 +20,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.1.1",
+    "@pega/cosmos-react-core": "3.0.0-dev.1.0",
     "@popperjs/core": "^2.11.0",
     "dompurify": "^2.3.1",
     "marked": "^2.0.3",
@@ -28,21 +28,20 @@
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
-    "slate": "^0.65.3",
-    "slate-history": "^0.65.3",
-    "slate-react": "^0.65.3",
+    "slate": "^0.72.3",
+    "slate-history": "^0.66.0",
+    "slate-react": "^0.72.1",
     "styled-components": "^5.2.0",
     "tinymce": "^5.10.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.4.8",
-    "@storybook/addon-actions": "^6.4.8",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-storysource": "^6.4.8",
-    "@storybook/addon-toolbars": "^6.4.8",
-    "@storybook/addons": "^6.4.8",
-    "@storybook/react": "^6.4.8",
-    "@storybook/theming": "^6.4.8",
+    "@storybook/addon-a11y": "^6.4.12",
+    "@storybook/addon-actions": "^6.4.12",
+    "@storybook/addon-storysource": "^6.4.12",
+    "@storybook/addon-toolbars": "^6.4.12",
+    "@storybook/addons": "^6.4.12",
+    "@storybook/react": "^6.4.12",
+    "@storybook/theming": "^6.4.12",
     "@types/dompurify": "^2.2.3",
     "@types/marked": "2.0.2",
     "@types/parse5": "^6.0.0",