npm - @pega/cosmos-react-rte - Versions diffs - 2.1.0 → 2.1.1 - Mend

@pega/cosmos-react-rte 2.1.0 → 2.1.1

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 (13) 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,~~EAMb~~,MAAM,yBAAyB,CAAC;AAWjC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE1D,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,~~CAyO1C~~,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;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"}

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

@@ -5,8 +5,8 @@ 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 } from '@pega/cosmos-react-core';
-import StyledRichTextEditor, { EditorContainer, StyledFormField, StyledHtml } from '../RichTextEditor/RichTextEditor.styles';
+import { createUID, FormControl, FormField, useAfterInitialEffect, useFocusWithin, useTheme, useUID, useI18n, useConsolidatedRef } 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';
@@ -15,11 +15,13 @@ const Editor = forwardRef((props, ref) => {
     const [editor, setEditor] = useState();
     const t = useI18n();
     const uid = useUID();
-    const { id = uid, toolbar = [], label, labelHidden, info, status, required, disabled, readOnly, onChange, onFocus, onBlur, placeholder, onImageAdded, onInit, defaultValue, autoFocus, customComponents = [], height = { min: minHeight }, customActions, ...restProps } = props;
+    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 formFieldRef = useRef(null);
     const value = useRef(defaultValue);
     const editorHasFocus = useFocusWithin([formFieldRef.current]);
-    useImperativeHandle(ref, () => ({
+    useImperativeHandle(editorRef, () => ({
         focus: () => {
             editor?.focus();
         },
@@ -61,6 +63,7 @@ const Editor = forwardRef((props, ref) => {
     useLayoutEffect(() => {
         tinymce
             .init({
+            readonly: readOnly || disabled,
             skin: false,
             selector: `#${id}`,
             toolbar: false,
@@ -98,11 +101,17 @@ const Editor = forwardRef((props, ref) => {
         })
             .then(tinymceEditors => {
             setEditor(tinymceEditors[0]);
-            setTimeout(() => {
-                onInit?.(tinymceEditors[0]);
-            }, 0);
         });
     }, []);
+    useEffect(() => {
+        if (!editor || initialized.current)
+            return;
+        onInit?.(editor);
+        initialized.current = true;
+    }, [editor, onInit]);
+    useAfterInitialEffect(() => {
+        editor?.mode.set(readOnly || disabled ? 'readonly' : 'design');
+    }, [readOnly, disabled]);
     const addImage = (image) => {
         if (editor) {
             const imageId = createUID();
@@ -134,7 +143,8 @@ const Editor = forwardRef((props, ref) => {
             onBlur?.();
         }
     }, [editorHasFocus, onFocus, onBlur]);
-    return (_jsx(EditorContext.Provider, { value: { addImage, editor: editor || {} }, children: _jsx(FormField, { as: StyledFormField, toolbar: !!toolbar?.length, label:
+    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();
@@ -142,11 +152,11 @@ const Editor = forwardRef((props, ref) => {
                 if (e.target === formFieldRef.current && !disabled) {
                     editor?.focus();
                 }
-            }, ref: formFieldRef, "aria-label": `${label} ${!readOnly && toolbar?.length ? t('rte_toolbar_instructions') : ''}`, tabIndex: disabled ? -1 : undefined, children: _jsxs(FormControl, { ...restProps, ref: ref, ariaLabel: label, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, toolbar: !!toolbar?.length, children: [_jsx(EditorContainer, { onClick: () => {
+            }, ref: formFieldRef, tabIndex: disabled ? -1 : undefined, children: _jsxs(FormControl, { ...restProps, ref: editorRef, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, toolbar: renderToolbar, children: [_jsx(StyledEditorContainer, { readOnly: readOnly, onClick: () => {
                             if (!disabled) {
                                 editor?.focus();
                             }
-                        }, toolbar: !!(editor && toolbar.length), containerHeight: height, children: _jsx(StyledHtml, { id: id, style: { outline: 'none', border: 'none' }, dangerouslySetInnerHTML: { __html: value.current || '' } }, void 0) }, void 0), editor && toolbar.length && (_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')}.` : ''}` }, 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":";AAAA,OAAO,OAAoC,MAAM,iBAAiB,CAAC;AACnE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAEL,UAAU,EAEV,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,EACf,mBAAmB,EAEpB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EACT,WAAW,EACX,SAAS,EAET,qBAAqB,EACrB,cAAc,EACd,QAAQ,EACR,MAAM,EACN,OAAO,EACR,MAAM,yBAAyB,CAAC;AAEjC,OAAO,oBAAoB,EAAE,EAC3B,eAAe,EACf,eAAe,EACf,UAAU,EACX,MAAM,yCAAyC,CAAC;AAEjD,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,MAAM,MAAM,GAAmC,UAAU,CACvD,CAAC,KAAmC,EAAE,GAAuB,EAAE,EAAE;IAC/D,MAAM,EACJ,UAAU,EAAE,EACV,WAAW,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EACzC,EACF,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAC;IACtD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,OAAO,GAAG,EAAE,EACZ,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,WAAW,EACX,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,SAAS,EACT,gBAAgB,GAAG,EAAE,EACrB,MAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAC3B,aAAa,EACb,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IACnC,MAAM,cAAc,GAAG,cAAc,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;IAE9D,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE;YACV,MAAM,EAAE,KAAK,EAAE,CAAC;QAClB,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACjB,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,CAAC;QACD,WAAW,EAAE,GAAG,EAAE;YAChB,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7E,CAAC;QACD,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,CAAC;QACD,KAAK,EAAE,GAAG,EAAE;YACV,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC;QACD,WAAW,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE;YACrC,IAAI,MAAM,EAAE;gBACV,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;gBACrC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC;gBACtD,IAAI,OAAO,EAAE;oBACX,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;oBACjC,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;iBAClC;aACF;QACH,CAAC;QACD,UAAU,EAAE,CAAC,IAAY,EAAE,EAAE;YAC3B,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;QACD,UAAU,EAAE,CAAC,IAAY,EAAE,YAAqB,KAAK,EAAE,EAAE;YACvD,IAAI,SAAS,EAAE;gBACb,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC;aACxB;YACD,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;QACD,SAAS,EAAE,GAAG,EAAE;YACd,OAAO,MAAM,CAAC;QAChB,CAAC;KACF,CAAC,EACF,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,OAAO;aACJ,IAAI,CAAC;YACJ,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,IAAI,EAAE,EAAE;YAClB,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,eAAe;YACxB,mBAAmB,EAAE,IAAI;YACzB,KAAK,EAAE,EAAE;YACT,sBAAsB,EAAE,GAAG,EAAE;gBAC3B,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;wBAClC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;qBACtD;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YACD,eAAe,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;gBAC7D,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,IAAI,EAAE,CAAC;YAC5C,CAAC,EAAE,EAAE,CAAC;YACN,KAAK,EAAE,cAAc,CAAC,EAAE;gBACtB,cAAc,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACrC,cAAc,CAAC,WAAW,CACxB,YAAY,CAAC,EAAE,EACf,GAAG,CAAC,CAAC,wBAAwB,CAAC,IAAI,MAAM,CAAC,IAAI,EAAE,EAC/C,GAAG,EAAE;wBACH,cAAc,CAAC,WAAW,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;oBAChE,CAAC,CACF,CAAC;gBACJ,CAAC,CAAC,CAAC;gBACH,cAAc,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC,2BAA2B,CAAC,EAAE,GAAG,EAAE;oBAC9E,cAAc,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC;gBACpD,CAAC,CAAC,CAAC;gBACH,cAAc,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAAE,GAAG,EAAE;oBAClE,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;gBACvC,CAAC,CAAC,CAAC;gBACH,cAAc,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC,CAAC,wBAAwB,CAAC,EAAE,GAAG,EAAE;oBAC1E,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;gBACxC,CAAC,CAAC,CAAC;YACL,CAAC;SACF,CAAC;aACD,IAAI,CAAC,cAAc,CAAC,EAAE;YACrB,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;YAC7B,UAAU,CAAC,GAAG,EAAE;gBACd,MAAM,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9B,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,CAAC,KAAW,EAAE,EAAE;QAC/B,IAAI,MAAM,EAAE;YACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;YAC5B,MAAM,CAAC,aAAa,CAAC,mBAAmB,OAAO,8BAA8B,CAAC,CAAC;YAC/E,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SAChC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,CAAY,EAAE,EAAE;YACpC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,CAAC,YAAY,EAAE;gBAClB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBAC9C,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;wBAC/B,QAAQ,CAAC,IAAI,CAAC,CAAC;qBAChB;gBACH,CAAC,CAAC,CAAC;aACJ;QACH,CAAC,CAAC;QACF,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;QACjC,OAAO,GAAG,EAAE;YACV,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;QACpC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,cAAc,EAAE;YAClB,OAAO,EAAE,EAAE,CAAC;SACb;aAAM;YACL,MAAM,EAAE,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,IAAK,EAAoB,EAAE,YAClF,KAAC,SAAS,IACR,EAAE,EAAE,eAAe,EACnB,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,EAC1B,KAAK;YACH,0GAA0G;YAC1G,eACE,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,EAAE,KAAK,EAAE,CAAC;gBAClB,CAAC,YAEA,KAAK,WACD,EAET,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;gBACzB,IAAI,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;oBAClD,MAAM,EAAE,KAAK,EAAE,CAAC;iBACjB;YACH,CAAC,EACD,GAAG,EAAE,YAAY,gBACL,GAAG,KAAK,IAClB,CAAC,QAAQ,IAAI,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,EACjE,EAAE,EACF,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,YAEnC,MAAC,WAAW,OACN,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,KAAK,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,oBAAoB,EACxB,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,aAE1B,KAAC,eAAe,IACd,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,QAAQ,EAAE;gCACb,MAAM,EAAE,KAAK,EAAE,CAAC;6BACjB;wBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,EACrC,eAAe,EAAE,MAAM,YAEvB,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAC1C,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,WACxD,WACc,EACjB,MAAM,IAAI,OAAO,CAAC,MAAM,IAAI,CAC3B,KAAC,OAAO,IAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,WAAI,CAC7E,YACW,WACJ,WACW,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","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} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n EditorContainer,\n StyledFormField,\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\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 placeholder,\n onImageAdded,\n onInit,\n defaultValue,\n autoFocus,\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 ref,\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 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 setTimeout(() => {\n onInit?.(tinymceEditors[0]);\n }, 0);\n });\n }, []);\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 return (\n <EditorContext.Provider value={{ addImage, editor: editor \|\| ({} as TinymceEditor) }}>\n <FormField\n as={StyledFormField}\n toolbar={!!toolbar?.length}\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 aria-label={`${label} ${\n !readOnly && toolbar?.length ? t('rte_toolbar_instructions') : ''\n }`}\n tabIndex={disabled ? -1 : undefined}\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={!!toolbar?.length}\n >\n <EditorContainer\n onClick={() => {\n if (!disabled) {\n editor?.focus();\n }\n }}\n toolbar={!!(editor && toolbar.length)}\n containerHeight={height}\n >\n <StyledHtml\n id={id}\n style={{ outline: 'none', border: 'none' }}\n dangerouslySetInnerHTML={{ __html: value.current \|\| '' }}\n />\n </EditorContainer>\n {editor && toolbar.length && (\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';\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"]}

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,~~EASH~~,MAAM,OAAO,CAAC;AASf,OAAO,EAQL,YAAY,~~EAMb~~,MAAM,yBAAyB,CAAC;~~AAUjC~~,OAAO,EAAuB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;~~AA2DlF~~,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,~~CAwb1D~~,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,CA2Z1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useMemo, useEffect, useCallback, useImperativeHandle, useReducer } from 'react';
+import { forwardRef, useState, useRef, useMemo, useEffect, useCallback, useImperativeHandle } from 'react';
 // Import the Slate editor factory.
 import { createEditor, Node, Transforms } from 'slate';
 // Import the Slate components and React plugin.
 import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
 import { withHistory } from 'slate-history';
 import styled from 'styled-components';
-import { FormField, FormControl, StyledPopover, useTheme, useUID, createUID, debounce, Popover, Menu, menuHelpers } from '@pega/cosmos-react-core';
-import StyledRichTextEditor, { EditorContainer, StyledFormField } from './RichTextEditor.styles';
+import { FormField, FormControl, StyledPopover, useTheme, useUID, createUID, debounce, Popover, Menu } from '@pega/cosmos-react-core';
+import StyledRichTextEditor, { StyledEditorContainer, StyledRichTextFormField } from './RichTextEditor.styles';
 import Toolbar from './Toolbar/Toolbar';
 import { nodeRenderer, leafRenderer } from './utils/renderers';
 import { onSearchChange } from './utils/search';
@@ -26,38 +26,6 @@ const withVoids = (editor) => {
     };
     return editor;
 };
-const syntheticFocusReducer = (currentId, action) => {
-    const { type, menuItems, selectedItemId } = action;
-    switch (type) {
-        case 'child':
-            // return first item id if top-level
-            if (!currentId)
-                return menuItems[0].id;
-            // if currently highlighted item has children, select first of them
-            return menuHelpers.getItem(menuItems, currentId)?.items?.[0].id;
-        case 'parent':
-            // find and return parent of currently selected item
-            return menuHelpers.getParentItem(menuItems, currentId)?.id;
-        case 'next':
-            // return next sibling of currently selected item
-            return menuHelpers.getNextItem(menuItems, currentId)?.id ?? currentId;
-        case 'prev':
-            // return prev sibling of currently selected item
-            return menuHelpers.getPrevItem(menuItems, currentId)?.id ?? currentId;
-        case 'list_change':
-            // if currently selected item does not exist in new list, select first one
-            if (currentId && menuHelpers.getItem(menuItems, currentId))
-                return currentId;
-            return menuItems[0]?.id;
-        case 'set':
-            // return arbitrary selected item id if it is in the tree; undefined otherwise
-            return selectedItemId ? menuHelpers.getItem(menuItems, selectedItemId)?.id : undefined;
-        case 'clear':
-            return undefined;
-        default:
-            return currentId;
-    }
-};
 const StyledSearchPopover = styled(StyledPopover) `
   min-width: 20rem;
 `;
@@ -73,7 +41,6 @@ const RichTextEditor = forwardRef((props, ref) => {
     const [toolbarPopover, setToolbarPopover] = useState(false);
     const [toolbarSticky, setToolbarSticky] = useState(false);
     const [focusableToolbarBtn, setFocusableToolbarBtn] = useState(null);
-    const [focusedId, dispatchFocus] = useReducer(syntheticFocusReducer, undefined);
     const [popoverTarget, setPopoverTarget] = useState(null);
     const [searchEl, setSearchEl] = useState(null);
     const updateToolbarStyle = () => {
@@ -119,6 +86,7 @@ const RichTextEditor = forwardRef((props, ref) => {
         if (ReactEditor.isFocused(editor)) {
             onBlur?.();
         }
+        setPopoverTarget(null);
     };
     useImperativeHandle(ref, () => ({
         focus: () => {
@@ -189,30 +157,9 @@ const RichTextEditor = forwardRef((props, ref) => {
         }
     };
     const onKeyDown = useCallback((event) => {
-        if (popoverTarget && menu) {
-            switch (event.key) {
-                case 'ArrowDown':
-                    event.preventDefault();
-                    dispatchFocus({ type: 'next', menuItems: menu.items, selectedItemId: focusedId });
-                    break;
-                case 'ArrowUp':
-                    event.preventDefault();
-                    dispatchFocus({ type: 'prev', menuItems: menu.items, selectedItemId: focusedId });
-                    break;
-                case 'Enter':
-                    event.preventDefault();
-                    if (focusedId) {
-                        onMenuItemClick(focusedId, event);
-                        dispatchFocus({ type: 'clear', menuItems: menu.items });
-                    }
-                    break;
-                case 'Escape':
-                    event.preventDefault();
-                    setPopoverTarget(null);
-                    break;
-                default:
-                    break;
-            }
+        if (popoverTarget && menu && event.key === 'Escape') {
+            event.preventDefault();
+            setPopoverTarget(null);
         }
         else if (event.key === 'Tab' && !event.shiftKey) {
             if (focusableToolbarBtn) {
@@ -227,7 +174,7 @@ const RichTextEditor = forwardRef((props, ref) => {
             EditorCommands.checkImageEnter(editor, event);
             EditorCommands.checkKeyCommands(editor, event);
         }
-    }, [menu, focusedId, popoverTarget, focusableToolbarBtn]);
+    }, [menu, popoverTarget, focusableToolbarBtn]);
     const onKeyUp = (event) => {
         EditorCommands.checkSearchUpKeys(editor, event);
     };
@@ -268,15 +215,6 @@ const RichTextEditor = forwardRef((props, ref) => {
     useEffect(() => {
         onChange?.();
     }, [value]);
-    useEffect(() => {
-        if (menu && popoverTarget) {
-            dispatchFocus({
-                type: 'set',
-                menuItems: menu.items,
-                selectedItemId: menu.items[0]?.id
-            });
-        }
-    }, [menu, popoverTarget]);
     useEffect(() => {
         if (autoFocus) {
             setTimeout(() => {
@@ -289,7 +227,7 @@ const RichTextEditor = forwardRef((props, ref) => {
             setPopoverOpen: setToolbarPopover,
             onEditorFocus,
             disabled: disabled || false
-        }, children: _jsx(FormField, { as: StyledFormField, toolbar: !!(!markdownOnly && toolbar?.length), label:
+        }, 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) => {
                 if (e.target === formFieldRef.current && !disabled) {
@@ -337,7 +275,7 @@ const RichTextEditor = forwardRef((props, ref) => {
                     }
                 }, children: [_jsxs(FormControl, { ...restProps, ref: ref, ariaLabel: label, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, toolbar: !!(!markdownOnly && toolbar?.length), onClick: () => {
                             onEditorFocus({ focusEditor: true });
-                        }, focused: ReactEditor.isFocused(editor), children: [_jsx(EditorContainer, { toolbar: !!(!markdownOnly && toolbar?.length), containerHeight: height, onClick: () => {
+                        }, focused: ReactEditor.isFocused(editor), children: [_jsx(StyledEditorContainer, { toolbar: !!(!markdownOnly && toolbar?.length), containerHeight: height, onClick: () => {
                                     if (!disabled) {
                                         onEditorFocus({ focusEditor: true });
                                     }
@@ -345,7 +283,7 @@ const RichTextEditor = forwardRef((props, ref) => {
                                         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 => {
                                     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, currentItemId: focusedId, mode: 'action', onItemClick: onMenuItemClick }, void 0)) }, void 0)] }, void 0) }, void 0) }, void 0));
+                                } }, 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));
 });
 export default RichTextEditor;
 //# sourceMappingURL=RichTextEditor.js.map

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 useReducer\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 menuHelpers,\n MenuItemProps,\n MenuProps\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, { EditorContainer, StyledFormField } 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\ntype SyntheticActionType = 'prev' \| 'next' \| 'child' \| 'parent' \| 'list_change' \| 'set' \| 'clear';\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 syntheticFocusReducer = (\n currentId: string \| undefined,\n action: {\n type: SyntheticActionType;\n menuItems: MenuProps['items'];\n selectedItemId?: MenuItemProps['id'];\n }\n): string \| undefined => {\n const { type, menuItems, selectedItemId } = action;\n switch (type) {\n case 'child':\n // return first item id if top-level\n if (!currentId) return menuItems[0].id;\n // if currently highlighted item has children, select first of them\n return menuHelpers.getItem(menuItems, currentId)?.items?.[0].id;\n case 'parent':\n // find and return parent of currently selected item\n return menuHelpers.getParentItem(menuItems, currentId)?.id;\n case 'next':\n // return next sibling of currently selected item\n return menuHelpers.getNextItem(menuItems, currentId)?.id ?? currentId;\n case 'prev':\n // return prev sibling of currently selected item\n return menuHelpers.getPrevItem(menuItems, currentId)?.id ?? currentId;\n case 'list_change':\n // if currently selected item does not exist in new list, select first one\n if (currentId && menuHelpers.getItem(menuItems, currentId)) return currentId;\n return menuItems[0]?.id;\n case 'set':\n // return arbitrary selected item id if it is in the tree; undefined otherwise\n return selectedItemId ? menuHelpers.getItem(menuItems, selectedItemId)?.id : undefined;\n case 'clear':\n return undefined;\n default:\n return currentId;\n }\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 const [focusedId, dispatchFocus] = useReducer(syntheticFocusReducer, undefined);\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 };\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) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n dispatchFocus({ type: 'next', menuItems: menu.items, selectedItemId: focusedId });\n break;\n case 'ArrowUp':\n event.preventDefault();\n dispatchFocus({ type: 'prev', menuItems: menu.items, selectedItemId: focusedId });\n break;\n case 'Enter':\n event.preventDefault();\n if (focusedId) {\n onMenuItemClick(focusedId, event);\n dispatchFocus({ type: 'clear', menuItems: menu.items });\n }\n break;\n case 'Escape':\n event.preventDefault();\n setPopoverTarget(null);\n break;\n default:\n break;\n }\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, focusedId, 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 (menu && popoverTarget) {\n dispatchFocus({\n type: 'set',\n menuItems: menu.items,\n selectedItemId: menu.items[0]?.id\n });\n }\n }, [menu, popoverTarget]);\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={StyledFormField}\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 <EditorContainer\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 </EditorContainer>\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 currentItemId={focusedId}\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 {\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"]}

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

@@ -6,9 +6,9 @@ interface StyledRichTextEditorProps {
     containerHeight?: RichTextEditorProps['height'];
 }
 export declare const listStyles: import("styled-components").FlattenSimpleInterpolation;
-export declare const EditorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
+export declare const StyledEditorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
 declare const StyledRichTextEditor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
-export declare const StyledFormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
+export declare const StyledRichTextFormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
 export declare const StyledRichTextViewer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledHtml: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export default StyledRichTextEditor;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,UAAU,yBAAyB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,wDAmDtB,CAAC;AAEF,eAAO,MAAM,~~eAAe~~,~~gIAgB3B~~,CAAC;AAIF,QAAA,MAAM,oBAAoB,gIAgBxB,CAAC;AAIH,eAAO,MAAM,~~eAAe~~,~~gIAU1B~~,CAAC;AAEH,eAAO,MAAM,oBAAoB,yGAWhC,CAAC;AAEF,eAAO,MAAM,UAAU,yGAsDrB,CAAC;AAIH,eAAe,oBAAoB,CAAC"}
1	+ {"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,UAAU,yBAAyB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,wDAmDtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,gIAsCjC,CAAC;AAIF,QAAA,MAAM,oBAAoB,gIAgBxB,CAAC;AAIH,eAAO,MAAM,uBAAuB,gIAUlC,CAAC;AAEH,eAAO,MAAM,oBAAoB,yGAWhC,CAAC;AAEF,eAAO,MAAM,UAAU,yGAsDrB,CAAC;AAIH,eAAe,oBAAoB,CAAC"}

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

@@ -53,13 +53,35 @@ export const listStyles = css `
     margin: 0;
   }
 `;
-export const EditorContainer = styled.div(({ containerHeight, toolbar, theme }) => {
+export const StyledEditorContainer = styled.div(({ containerHeight, readOnly, toolbar, theme }) => {
     return css `
-      padding: ${toolbar ? theme.base.spacing : '0'};
-      height: ${typeof containerHeight === 'string' ? containerHeight : 'auto'};
-      min-height: ${typeof containerHeight === 'string' ? 'auto' : containerHeight?.min || 'auto'};
-      max-height: ${typeof containerHeight === 'string' ? 'auto' : containerHeight?.max || 'auto'};
-      overflow: auto;
+      ${typeof containerHeight === 'string' &&
+        css `
+        height: ${containerHeight};
+      `}
+      ${typeof containerHeight === 'object' &&
+        css `
+        ${containerHeight.min &&
+            css `
+          min-height: ${containerHeight.min};
+        `}
+        ${containerHeight.max &&
+            css `
+          max-height: ${containerHeight.max};
+        `}
+      `}
+      ${(readOnly || toolbar) &&
+        css `
+        padding: ${theme.base.spacing};
+      `}
+      ${containerHeight &&
+        css `
+        overflow: auto;
+      `}
       &:hover {
         cursor: text;
@@ -68,7 +90,7 @@ export const EditorContainer = styled.div(({ containerHeight, toolbar, theme })
       ${listStyles}
     `;
 });
-EditorContainer.defaultProps = defaultThemeProp;
+StyledEditorContainer.defaultProps = defaultThemeProp;
 const StyledRichTextEditor = styled.div(({ toolbar, theme }) => {
     return css `
     background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};
@@ -87,7 +109,7 @@ const StyledRichTextEditor = styled.div(({ toolbar, theme }) => {
   `;
 });
 StyledRichTextEditor.defaultProps = defaultThemeProp;
-export const StyledFormField = styled.div(({ toolbar }) => {
+export const StyledRichTextFormField = styled.div(({ toolbar }) => {
     return css `
     ${StyledRichTextEditor} {
       ${!toolbar &&

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAEhB,UAAU,EACV,aAAa,EACd,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAS7D,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4CzB,aAAa,QAAQ,aAAa;;;;IAIlC,aAAa;;;CAGhB,CAAC;AAEF,MAAM,CAAC,MAAM,~~eAAe~~,GAAG,MAAM,CAAC,GAAG,~~CACvC~~,CAAC,EAAE,eAAe,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;~~IACtC~~,OAAO,GAAG,CAAA;~~iBACG~~,OAAO,~~CAAC~~,~~CAAC,CAAC,~~KAAK,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~OAAO,CAAC,CAAC,CAAC,GAAG~~;~~gBACnC~~,OAAO,eAAe,KAAK,QAAQ,~~CAAC~~,~~CAAC~~,~~CAAC,~~eAAe,CAAC,~~CAAC~~,~~CAAC~~,~~MAAM~~;~~oBAC1D~~,~~OAAO,~~eAAe,~~KAAK~~,~~QAAQ~~,~~CAAC~~,CAAC,~~CAAC~~,~~MAAM~~,~~CAAC~~,~~CAAC~~,CAAC,~~eAAe~~,~~EAAE~~,~~GAAG~~,IAAI,~~MAAM~~;~~oBAC7E~~,~~OAAO~~,~~eAAe~~,KAAK,~~QAAQ,~~CAAC,~~CAAC~~,CAAC,~~MAAM~~,~~CAAC,CAAC,CAAC,~~eAAe,~~EAAE,~~GAAG,~~IAAI~~,~~MAAM;;;;;;;QAOzF,~~UAAU;KACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,~~eAAe~~,CAAC,YAAY,GAAG,gBAAgB,CAAC;~~AAEhD~~,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IACxF,OAAO,GAAG,CAAA;wBACY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,aAAa;;;;;sBAKpE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBAC5D,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;iBAK3D,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;GAEtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,~~eAAe~~,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;~~IACnF~~,OAAO,GAAG,CAAA;MACN,oBAAoB;QAClB,CAAC,OAAO;QACV,GAAG,CAAA;;;OAGF;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;IAI1C,UAAU;;;;;;;CAOb,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjD,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,EACzE,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,OAAO,GAAG,CAAA;MACN,UAAU;;QAER,cAAc,CAAC,KAAK,CAAC;;;;;;eAMd,OAAO,CAAC,WAAW;;;;;;oBAMd,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAa,CAAC;;;mBAGhD,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;;mBAG3C,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;;mBAG3C,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;;mBAG3C,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;;mBAG3C,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;;mBAG3C,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;GAE3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n FontSize,\n StyledLink,\n StyledPopover\n} from '@pega/cosmos-react-core';\n\nimport { RichTextEditorProps } from './RichTextEditor.types';\nimport { getTableStyles } from './DecoratorComponents/Table';\n\ninterface StyledRichTextEditorProps {\n toolbar?: boolean;\n focused?: boolean;\n readOnly?: boolean;\n containerHeight?: RichTextEditorProps['height'];\n}\n\nexport const listStyles = css`\n ul,\n ol {\n padding-inline-start: 2.5rem;\n }\n\n li {\n margin: 0.5rem 0;\n }\n\n ul li {\n ul {\n margin-inline-start: 1rem;\n list-style-type: circle;\n }\n\n ul ul {\n margin-inline-start: 2rem;\n list-style-type: square;\n }\n\n ul ul ul {\n margin-inline-start: 3rem;\n list-style-type: disc;\n }\n }\n\n ol li {\n ol {\n margin-inline-start: 1rem;\n list-style-type: lower-alpha;\n }\n\n ol ol {\n margin-inline-start: 2rem;\n list-style-type: lower-roman;\n }\n\n ol ol ol {\n margin-inline-start: 3rem;\n list-style-type: decimal;\n }\n }\n\n ${StyledPopover} ul, ${StyledPopover} ol {\n padding-inline-start: 0;\n }\n\n ${StyledPopover} li {\n margin: 0;\n }\n`;\n\nexport const ~~EditorContainer~~ = styled.div<StyledRichTextEditorProps>(\n ({ containerHeight, toolbar, theme }) => {\n return css`\n ~~padding:~~ ${~~toolbar~~ ? ~~theme.base.spacing~~ : '0'~~};\~~n height: ${typeof containerHeight === '~~string~~' ? containerHeight ~~: 'auto'};\~~n min-height: ${~~typeof~~ containerHeight ~~=== 'string' ? 'auto' : containerHeight?.~~min ~~\|\| 'auto'~~};\n max-height: ${~~typeof~~ containerHeight ~~===~~ ~~'string'~~ ~~? 'auto'~~ : ~~containerHeight?.max \|\| 'auto'~~};\n overflow: auto;\n\n &:hover {\n cursor: text;\n }\n\n ${listStyles}\n `;\n }\n);\n\~~nEditorContainer~~.defaultProps = defaultThemeProp;\n\nconst StyledRichTextEditor = styled.div<StyledRichTextEditorProps>(({ toolbar, theme }) => {\n return css`\n background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};\n width: 100%;\n position: relative;\n\n &:focus-within:not([disabled]) {\n border-color: ${theme.components['form-control'][':focus']['border-color']};\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n }\n\n /* Override default styling of slate placeholder. */\n span[contenteditable='false'] {\n opacity: ${theme.base.transparency['transparent-3']} !important;\n }\n `;\n});\n\nStyledRichTextEditor.defaultProps = defaultThemeProp;\n\nexport const ~~StyledFormField~~ = styled.div<StyledRichTextEditorProps>(({ toolbar }) => {\n return css`\n ${StyledRichTextEditor} {\n ${!toolbar &&\n css`\n border: none;\n box-shadow: none;\n `}\n }\n `;\n});\n\nexport const StyledRichTextViewer = styled.div`\n width: 100%;\n position: relative;\n\n ${StyledLink} {\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: none;\n text-decoration: underline;\n }\n }\n`;\n\nexport const StyledHtml = styled.div(({ theme }) => {\n const {\n base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n components: { text }\n } = theme;\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n return css`\n ${listStyles}\n table {\n ${getTableStyles(theme)}\n }\n img {\n max-width: 100%;\n }\n a {\n color: ${palette.interactive};\n }\n pre {\n white-space: break-spaces;\n }\n p {\n min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n }\n h1 {\n font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n font-weight: ${text.h1['font-weight']};\n min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n }\n h2 {\n font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n }\n h3 {\n font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n }\n h4 {\n font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n }\n h5 {\n font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n }\n h6 {\n font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n }\n `;\n});\n\nStyledHtml.defaultProps = defaultThemeProp;\n\nexport default StyledRichTextEditor;\n"]}
1	+ {"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n FontSize,\n StyledLink,\n StyledPopover\n} from '@pega/cosmos-react-core';\n\nimport { RichTextEditorProps } from './RichTextEditor.types';\nimport { getTableStyles } from './DecoratorComponents/Table';\n\ninterface StyledRichTextEditorProps {\n toolbar?: boolean;\n focused?: boolean;\n readOnly?: boolean;\n containerHeight?: RichTextEditorProps['height'];\n}\n\nexport const listStyles = css`\n ul,\n ol {\n padding-inline-start: 2.5rem;\n }\n\n li {\n margin: 0.5rem 0;\n }\n\n ul li {\n ul {\n margin-inline-start: 1rem;\n list-style-type: circle;\n }\n\n ul ul {\n margin-inline-start: 2rem;\n list-style-type: square;\n }\n\n ul ul ul {\n margin-inline-start: 3rem;\n list-style-type: disc;\n }\n }\n\n ol li {\n ol {\n margin-inline-start: 1rem;\n list-style-type: lower-alpha;\n }\n\n ol ol {\n margin-inline-start: 2rem;\n list-style-type: lower-roman;\n }\n\n ol ol ol {\n margin-inline-start: 3rem;\n list-style-type: decimal;\n }\n }\n\n ${StyledPopover} ul, ${StyledPopover} ol {\n padding-inline-start: 0;\n }\n\n ${StyledPopover} li {\n margin: 0;\n }\n`;\n\nexport const StyledEditorContainer = styled.div<StyledRichTextEditorProps>(\n ({ containerHeight, readOnly, toolbar, theme }) => {\n return css`\n ${typeof containerHeight === 'string' &&\n css`\n height: ${containerHeight};\n `}\n\n ${typeof containerHeight === 'object' &&\n css`\n ${containerHeight.min &&\n css`\n min-height: ${containerHeight.min};\n `}\n\n ${containerHeight.max &&\n css`\n max-height: ${containerHeight.max};\n `}\n `}\n\n ${(readOnly \|\| toolbar) &&\n css`\n padding: ${theme.base.spacing};\n `}\n\n ${containerHeight &&\n css`\n overflow: auto;\n `}\n\n &:hover {\n cursor: text;\n }\n\n ${listStyles}\n `;\n }\n);\n\nStyledEditorContainer.defaultProps = defaultThemeProp;\n\nconst StyledRichTextEditor = styled.div<StyledRichTextEditorProps>(({ toolbar, theme }) => {\n return css`\n background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};\n width: 100%;\n position: relative;\n\n &:focus-within:not([disabled]) {\n border-color: ${theme.components['form-control'][':focus']['border-color']};\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n }\n\n /* Override default styling of slate placeholder. */\n span[contenteditable='false'] {\n opacity: ${theme.base.transparency['transparent-3']} !important;\n }\n `;\n});\n\nStyledRichTextEditor.defaultProps = defaultThemeProp;\n\nexport const StyledRichTextFormField = styled.div<StyledRichTextEditorProps>(({ toolbar }) => {\n return css`\n ${StyledRichTextEditor} {\n ${!toolbar &&\n css`\n border: none;\n box-shadow: none;\n `}\n }\n `;\n});\n\nexport const StyledRichTextViewer = styled.div`\n width: 100%;\n position: relative;\n\n ${StyledLink} {\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: none;\n text-decoration: underline;\n }\n }\n`;\n\nexport const StyledHtml = styled.div(({ theme }) => {\n const {\n base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n components: { text }\n } = theme;\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n return css`\n ${listStyles}\n table {\n ${getTableStyles(theme)}\n }\n img {\n max-width: 100%;\n }\n a {\n color: ${palette.interactive};\n }\n pre {\n white-space: break-spaces;\n }\n p {\n min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n }\n h1 {\n font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n font-weight: ${text.h1['font-weight']};\n min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n }\n h2 {\n font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n }\n h3 {\n font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n }\n h4 {\n font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n }\n h5 {\n font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n }\n h6 {\n font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n }\n `;\n});\n\nStyledHtml.defaultProps = defaultThemeProp;\n\nexport default StyledRichTextEditor;\n"]}

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

@@ -6,7 +6,7 @@ import dompurify from 'dompurify';
 import { ErrorState, useI18n } from '@pega/cosmos-react-core';
 import convertMarkdown from './utils/markdownConverter';
 import { nodeRenderer, leafRenderer } from './utils/renderers';
-import { EditorContainer, StyledHtml, StyledRichTextViewer } from './RichTextEditor.styles';
+import { StyledEditorContainer, StyledHtml, StyledRichTextViewer } from './RichTextEditor.styles';
 import { convertHtml } from './utils/htmlConverter';
 // Regex to match valid URLs
 const URL_REGEX = /(?<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;
@@ -41,7 +41,7 @@ const RichTextViewer = forwardRef(({ content, type, interactionRenderers, markdo
     if (type === 'html' && sanitizedHtml) {
         return _jsx(StyledHtml, { 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(EditorContainer, { 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: nodes, 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,~~eAAe~~,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;~~AAC5F~~,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,~~eAAe~~,~~cACd~~,KAAC,QAAQ,IAAC,QAAQ,QAAC,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,WAAI,~~WAC5D~~,~~WACZ~~,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 { ~~EditorContainer~~, 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 <~~EditorContainer~~>\n <Editable readOnly renderElement={nodeRenderer} renderLeaf={leafRenderer} />\n </~~EditorContainer~~>\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":"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","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"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-rte",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,7 +20,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.1.0",
+    "@pega/cosmos-react-core": "2.1.1",
     "@popperjs/core": "^2.11.0",
     "dompurify": "^2.3.1",
     "marked": "^2.0.3",