npm - @pega/cosmos-react-rte - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.30.0 - Mend

@pega/cosmos-react-rte 3.0.0-dev.3.0 → 3.0.0-dev.30.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 (86) hide show

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

@@ -2,9 +2,16 @@ import 'tinymce/icons/default';
 import 'tinymce/themes/silver';
 import 'tinymce/plugins/advlist';
 import 'tinymce/plugins/lists';
+import 'tinymce/plugins/autolink';
+import 'tinymce/models/dom';
 import { FC } from 'react';
+import { DefaultTheme } from 'styled-components';
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { EditorProps } from './Editor.types';
+export declare const getImageStyles: (theme: DefaultTheme) => string;
+export declare const StyledInnerEditor: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    showPlaceholder: boolean;
+}, never>;
 declare const Editor: FC<EditorProps & ForwardProps>;
 export default Editor;
 //# sourceMappingURL=Editor.d.ts.map

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;~~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,~~CAmR1C~~,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,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EACL,EAAE,EASH,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI9D,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAejC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAkB1D,eAAO,MAAM,cAAc,UAAW,YAAY,WAQjD,CAAC;AAEF,eAAO,MAAM,iBAAiB;qBAAiC,OAAO;SAarE,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CA+a1C,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -4,61 +4,133 @@ import 'tinymce/icons/default';
 import 'tinymce/themes/silver';
 import 'tinymce/plugins/advlist';
 import 'tinymce/plugins/lists';
+import 'tinymce/plugins/autolink';
+import 'tinymce/models/dom';
 import { forwardRef, useEffect, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
 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 { compile, serialize, stringify } from 'stylis';
+import { stripUnit } from 'polished';
+import { createUID, FormControl, FormField, useAfterInitialEffect, useTheme, useUID, useI18n, useConsolidatedRef, defaultThemeProp, useAutoResize, useConfiguration } from '@pega/cosmos-react-core';
+import { getHtmlStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';
+import { createGlobalBodyStyles, createGlobalRootStyles, globalSpacingStyles } from '@pega/cosmos-react-core/lib/styles/GlobalStyle';
+import StyledRichTextEditor, { StyledRichTextFormField } 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 }) => {
+import ImageEditor, { imgHoverClass } from './ImageEditor';
+import { offscreenSelectionStyles, placeholderStyles, StyledEditorContainer } from './Editor.styles';
+const getFileFromUrl = async (url, name) => {
+    const response = await fetch(url);
+    const data = await response.blob();
+    return new File([data], name, {
+        type: data.type
+    });
+};
+export const getImageStyles = (theme) => {
+    return `
+    img:hover,
+    img.${imgHoverClass} {
+      box-shadow: 0 0 0 0.06125rem ${theme.base.palette['primary-background']},
+        0 0 0 0.125rem ${theme.base.palette.interactive}, 0 0 0 0.25rem rgba(0, 118, 209, 0.3);
+    }
+  `;
+};
+export const StyledInnerEditor = styled.div(({ theme, showPlaceholder }) => {
     return css `
-    ${showPlaceholder &&
+      ${showPlaceholder &&
         css `
-      ::before {
-        color: ${theme.base.colors.slate.medium};
-        position: absolute;
-        content: attr(data-mce-placeholder);
-      }
-    `}
-  `;
+        ::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 { components: { 'text-area': { 'min-height': textAreaMinHeight } } } = useTheme();
+    const theme = useTheme();
+    const { styleSheetTarget } = useConfiguration();
     const [editor, setEditor] = useState();
+    const [focused, setFocused] = useState(false);
     const t = useI18n();
     const uid = useUID();
     const labelId = useUID();
     const editorRef = useConsolidatedRef(ref);
+    const tinyMceRef = useRef(null);
+    const tinyMceContainerRef = useRef(null);
     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, placeholder, ...restProps } = props;
-    const [showPlaceholder, setShowPlaceholder] = useState(() => !defaultValue);
+    const { id = uid, toolbar = [], label, labelHidden, info, status, required, disabled, readOnly, onChange, onKeyDown, onFocus, onBlur, onImageAdded, onInit, defaultValue, customComponents = [], height, customActions, placeholder, children, spellcheck = true, ...restProps } = props;
+    const baseHeight = {
+        min: height?.min ?? stripUnit(textAreaMinHeight) * 16,
+        max: height?.max ?? undefined
+    };
+    const getHeight = (type) => {
+        if (typeof baseHeight === 'number') {
+            return stripUnit(baseHeight);
+        }
+        if (baseHeight[type]) {
+            return stripUnit(baseHeight[type]);
+        }
+        return undefined;
+    };
+    const imagesEnabled = toolbar.includes('images');
+    const maxHeight = getHeight('max');
+    const minHeight = getHeight('min');
+    const [autoResizeRef, resizeEditor] = useAutoResize(maxHeight, minHeight);
     const formFieldRef = useRef(null);
     const value = useRef(defaultValue);
+    const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;
+    const processPastedImgUrls = async (infoArr) => {
+        const files = await Promise.all(infoArr.map(({ id: imgId, url }) => getFileFromUrl(url, imgId)));
+        files.forEach((file, i) => {
+            onImageAdded?.(file, infoArr[i].id);
+        });
+    };
+    const pastePreprocess = (plugin, args) => {
+        const isImg = args.content.includes('<img');
+        if (!imagesEnabled && isImg) {
+            args.content = args.content.replace(/<img(.*)\/>/g, '');
+        }
+        if (imagesEnabled && isImg) {
+            const pastedHtml = new DOMParser().parseFromString(args.content, 'text/html').body;
+            const imgInfo = [];
+            pastedHtml.querySelectorAll('img').forEach(imgEl => {
+                const imgId = createUID();
+                const url = imgEl.src;
+                imgInfo.push({ id: imgId, url });
+                imgEl.setAttribute('id', imgId);
+                imgEl.setAttribute('src', '');
+            });
+            args.content = pastedHtml.innerHTML;
+            processPastedImgUrls(imgInfo);
+        }
+    };
     useImperativeHandle(editorRef, () => ({
         focus: () => {
             editor?.focus();
         },
         getPlainText: () => {
-            return editor ? editor?.getContent({ format: 'text' }) : '';
+            return editor ? editor.getContent({ format: 'text' }) : '';
         },
         getRichText: () => {
-            return editor ? JSON.stringify(editor?.getContent({ format: 'raw' })) : '';
+            return editor ? JSON.stringify(editor.getContent({ format: 'raw' })) : '';
         },
         getHtml: () => {
-            return editor ? editor?.getContent({ format: 'html' }) : '';
+            return editor ? editor.getContent({ format: 'html' }) : '';
         },
         clear: () => {
             editor?.setContent('');
         },
         appendImage: ({ src, alt }, imageId) => {
             if (editor) {
-                const editorEl = editor.getElement();
+                const editorEl = editor.getDoc();
                 const imageEl = editorEl.querySelector(`#${imageId}`);
                 if (imageEl) {
                     imageEl.setAttribute('src', src);
                     imageEl.setAttribute('alt', alt);
+                    resizeEditor();
                 }
             }
         },
@@ -77,34 +149,66 @@ const Editor = forwardRef((props, ref) => {
         element: formFieldRef.current || undefined
     }), [editor]);
     useLayoutEffect(() => {
+        if (!tinyMceRef.current || !tinyMceContainerRef.current)
+            return;
+        const styles = serialize(compile(getHtmlStyles(theme)), stringify);
+        const imageStyles = serialize(compile(getImageStyles(theme)), stringify);
         tinymce
             .init({
             readonly: readOnly || disabled,
             skin: false,
-            selector: `#${id}`,
+            target: tinyMceRef.current,
             toolbar: false,
             menubar: false,
-            inline: true,
-            plugins: 'lists advlist',
+            plugins: 'lists advlist autolink',
+            paste_data_images: true,
             lists_indent_on_tab: true,
             icons: '',
+            branding: false,
+            elementpath: false,
             placeholder,
-            init_instance_callback: () => {
-                customComponents.forEach(comp => {
-                    if (!customElements.get(comp.name)) {
-                        customElements.define(comp.name, comp.customElement);
-                    }
-                });
+            content_css: false,
+            browser_spellcheck: spellcheck,
+            paste_preprocess: pastePreprocess,
+            content_style: `${createGlobalRootStyles(theme)} ${globalSpacingStyles} ${createGlobalBodyStyles(theme)} body { min-height: 3rem; padding: ${toolbar.length > 0 && !readOnly ? theme.base.spacing : 0}; } html { overflow: hidden; } ${offscreenSelectionStyles} ${placeholderStyles} ${imageStyles} ${styles}`,
+            init_instance_callback: initializedEditor => {
+                const iframeWindow = tinyMceContainerRef.current?.querySelector('iframe').contentWindow;
+                const editorCustomElements = iframeWindow?.customElements;
+                if (editorCustomElements) {
+                    customComponents.forEach(({ name, createCustomElement: customElementCreator, style }) => {
+                        if (!editorCustomElements.get(name)) {
+                            editorCustomElements.define(name, customElementCreator(iframeWindow));
+                        }
+                        if (style) {
+                            const styleEl = document.createElement('style');
+                            styleEl.innerText = style;
+                            initializedEditor.getDoc().head.appendChild(styleEl);
+                        }
+                    });
+                }
             },
-            custom_elements: `~${customComponents.reduce((prev, { name }, i) => {
-                return i === 0 ? name : `${prev},${name}`;
-            }, '')}`,
+            extended_valid_elements: `${customComponents
+                .map(comp => `${comp.name}${comp.extensionAttributes ? `[${comp.extensionAttributes.join('|')}]` : ''}`)
+                .join(',')}`,
+            custom_elements: `~${customComponents.map(comp => comp.name).join('~,')}`,
             setup: editorSettings => {
+                editorSettings.on('keydown', e => {
+                    onKeyDown?.(e);
+                });
                 getTextFormats().forEach((format, i) => {
                     editorSettings.addShortcut(`meta+alt+${i}`, `${t('rte_change_text_format')} ${format.text}`, () => {
                         editorSettings.execCommand('FormatBlock', false, format.type);
                     });
                 });
+                editorSettings.addShortcut('meta+shift+b', t('rte_bold'), () => {
+                    editorSettings.execCommand('Bold');
+                });
+                editorSettings.addShortcut('meta+shift+i', t('rte_italic'), () => {
+                    editorSettings.execCommand('Italic');
+                });
+                editorSettings.addShortcut('meta+shift+x', t('rte_strike_through'), () => {
+                    editorSettings.execCommand('Strikethrough');
+                });
                 editorSettings.addShortcut('meta+shift+l', t('rte_toggle_unordered_list'), () => {
                     editorSettings.execCommand('InsertUnorderedList');
                 });
@@ -125,8 +229,26 @@ const Editor = forwardRef((props, ref) => {
         })
             .then(tinymceEditors => {
             setEditor(tinymceEditors[0]);
+            tinymceEditors[0].editorContainer?.setAttribute('style', '');
+            const iframe = tinyMceContainerRef.current?.querySelector('iframe');
+            if (iframe) {
+                const globalStyles = styleSheetTarget?.querySelectorAll('[data-cosmos-global-style]') ??
+                    [];
+                const extraStyles = document.querySelectorAll('[data-cosmos-global-style]') ?? [];
+                const iframeContentHead = iframe?.contentDocument?.querySelector('head');
+                [...globalStyles, ...extraStyles].forEach(sheet => {
+                    iframeContentHead?.appendChild(sheet.cloneNode(true));
+                });
+                autoResizeRef.current = iframe;
+                resizeEditor();
+            }
         });
     }, []);
+    useEffect(() => {
+        if (editor) {
+            editor.options.set('paste_preprocess', pastePreprocess);
+        }
+    }, [imagesEnabled]);
     useEffect(() => {
         if (!editor || initialized.current)
             return;
@@ -136,20 +258,37 @@ const Editor = forwardRef((props, ref) => {
     useEffect(() => {
         if (!editor)
             return;
+        const onChangeEvents = ['keyup', 'FormatApply', 'FormatRemove', 'ExecCommand'];
+        const onEditorKeyDown = (event) => {
+            resizeEditor();
+            if (event.key === 'Enter') {
+                editor.selection.getNode().scrollIntoView(false);
+            }
+        };
         const onEditorChange = () => {
-            setShowPlaceholder(!editor?.getContent({ format: 'text' }));
+            onChange?.(editor);
         };
         const onEditorFocus = () => {
+            setFocused(true);
             onFocus?.();
         };
         const onEditorBlur = () => {
+            setFocused(false);
             onBlur?.();
         };
-        editor.on('input', onEditorChange);
+        onChangeEvents.forEach(event => {
+            editor.on(event, onEditorChange);
+        });
+        editor.on('keydown', onEditorKeyDown);
+        editor.on('paste', resizeEditor);
         editor.on('focus', onEditorFocus);
         editor.on('blur', onEditorBlur);
         return () => {
-            editor.off('input', onEditorChange);
+            onChangeEvents.forEach(event => {
+                editor.off(event, onEditorChange);
+            });
+            editor.off('keydown', onEditorKeyDown);
+            editor.off('paste', resizeEditor);
             editor.off('focus', onEditorFocus);
             editor.off('blur', onEditorBlur);
         };
@@ -169,31 +308,38 @@ const Editor = forwardRef((props, ref) => {
             e.preventDefault();
             if (e.dataTransfer) {
                 Array.from(e.dataTransfer.files).forEach(file => {
-                    if (file.type.includes('image')) {
+                    if (file.type.includes('image') && imagesEnabled) {
                         addImage(file);
                     }
                 });
             }
         };
         editor?.on('drop', onEditorDrop);
+        const body = editor?.getDoc().body;
+        const resizeObserver = new ResizeObserver(() => {
+            resizeEditor();
+        });
+        if (body) {
+            resizeObserver.observe(body);
+        }
         return () => {
             editor?.off('drop', onEditorDrop);
+            resizeObserver.disconnect();
         };
-    }, [editor]);
-    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), 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();
-                }
-            }, 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: 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));
+    }, [editor, resizeEditor]);
+    return (_jsxs(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 }), 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();
+                    }
+                }, ref: formFieldRef, tabIndex: disabled ? -1 : undefined, children: _jsxs(FormControl, { ...restProps, ref: editorRef, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, toolbar: renderToolbar, focused: focused, children: [_jsxs(StyledEditorContainer, { onClick: () => {
+                                if (!disabled) {
+                                    editor?.focus();
+                                }
+                            }, ref: tinyMceContainerRef, children: [_jsx("textarea", { id: id, value: value.current || '', onChange: () => { }, "aria-label": `${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`, "aria-labelledby": labelId, ref: tinyMceRef }), tinyMceContainerRef.current && editor && !readOnly && (_jsx(ImageEditor, { editor: editor, editorEl: tinyMceContainerRef.current, onChange: () => onChange?.(editor) }))] }), renderToolbar && (_jsx(Toolbar, { features: toolbar, editor: editor, customActions: customActions }))] }) }), children] }));
 });
 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';\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 element: formFieldRef.current \|\| undefined\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 customActions?.forEach(action => {\n if (action.shortcut) {\n editorSettings.addShortcut(\n action.shortcut.pattern,\n action.shortcut.description,\n () => {\n action.shortcut?.command(editorSettings);\n }\n );\n }\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"]}
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, EditorEvent } from 'tinymce/tinymce';\nimport 'tinymce/icons/default';\nimport 'tinymce/themes/silver';\nimport 'tinymce/plugins/advlist';\nimport 'tinymce/plugins/lists';\nimport 'tinymce/plugins/autolink';\nimport 'tinymce/models/dom';\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, DefaultTheme } from 'styled-components';\nimport { compile, serialize, stringify } from 'stylis';\nimport { stripUnit } from 'polished';\n\nimport {\n createUID,\n FormControl,\n FormField,\n ForwardProps,\n useAfterInitialEffect,\n useTheme,\n useUID,\n useI18n,\n useConsolidatedRef,\n defaultThemeProp,\n useAutoResize,\n useConfiguration\n} from '@pega/cosmos-react-core';\nimport { getHtmlStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';\nimport {\n createGlobalBodyStyles,\n createGlobalRootStyles,\n globalSpacingStyles\n} from '@pega/cosmos-react-core/lib/styles/GlobalStyle';\n\nimport StyledRichTextEditor, {\n StyledRichTextFormField\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';\nimport ImageEditor, { imgHoverClass } from './ImageEditor';\nimport {\n offscreenSelectionStyles,\n placeholderStyles,\n StyledEditorContainer\n} from './Editor.styles';\n\ntype ImageInfoArray = { id: string; url: string }[];\n\nconst getFileFromUrl = async (url: string, name: string) => {\n const response = await fetch(url);\n const data = await response.blob();\n return new File([data], name, {\n type: data.type\n });\n};\n\nexport const getImageStyles = (theme: DefaultTheme) => {\n return `\n img:hover,\n img.${imgHoverClass} {\n box-shadow: 0 0 0 0.06125rem ${theme.base.palette['primary-background']},\n 0 0 0 0.125rem ${theme.base.palette.interactive}, 0 0 0 0.25rem rgba(0, 118, 209, 0.3);\n }\n `;\n};\n\nexport const StyledInnerEditor = styled.div<{ showPlaceholder: boolean }>(\n ({ 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);\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': textAreaMinHeight }\n }\n } = useTheme();\n const theme = useTheme();\n const { styleSheetTarget } = useConfiguration();\n const [editor, setEditor] = useState<TinymceEditor>();\n const [focused, setFocused] = useState(false);\n const t = useI18n();\n const uid = useUID();\n const labelId = useUID();\n const editorRef = useConsolidatedRef(ref);\n const tinyMceRef = useRef<HTMLTextAreaElement>(null);\n const tinyMceContainerRef = useRef<HTMLDivElement>(null);\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 onKeyDown,\n onFocus,\n onBlur,\n onImageAdded,\n onInit,\n defaultValue,\n customComponents = [],\n height,\n customActions,\n placeholder,\n children,\n spellcheck = true,\n ...restProps\n } = props;\n const baseHeight: EditorProps['height'] = {\n min: height?.min ?? (stripUnit(textAreaMinHeight) as number) * 16,\n max: height?.max ?? undefined\n };\n const getHeight = (type: 'max' \| 'min') => {\n if (typeof baseHeight === 'number') {\n return stripUnit(baseHeight) as number;\n }\n if (baseHeight[type]) {\n return stripUnit(baseHeight[type] as number) as number;\n }\n return undefined;\n };\n\n const imagesEnabled = toolbar.includes('images');\n const maxHeight = getHeight('max');\n const minHeight = getHeight('min');\n const [autoResizeRef, resizeEditor] = useAutoResize<HTMLIFrameElement>(maxHeight, minHeight);\n const formFieldRef = useRef<HTMLElement>(null);\n const value = useRef(defaultValue);\n const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;\n\n const processPastedImgUrls = async (infoArr: ImageInfoArray) => {\n const files = await Promise.all(\n infoArr.map(({ id: imgId, url }) => getFileFromUrl(url, imgId))\n );\n files.forEach((file, i) => {\n onImageAdded?.(file, infoArr[i].id);\n });\n };\n\n const pastePreprocess = (plugin: unknown, args: { content: string }) => {\n const isImg = args.content.includes('<img');\n if (!imagesEnabled && isImg) {\n args.content = args.content.replace(/<img(.*)\\/>/g, '');\n }\n if (imagesEnabled && isImg) {\n const pastedHtml: HTMLElement = new DOMParser().parseFromString(\n args.content,\n 'text/html'\n ).body;\n const imgInfo: ImageInfoArray = [];\n pastedHtml.querySelectorAll('img').forEach(imgEl => {\n const imgId = createUID();\n const url = imgEl.src;\n imgInfo.push({ id: imgId, url });\n imgEl.setAttribute('id', imgId);\n imgEl.setAttribute('src', '');\n });\n args.content = pastedHtml.innerHTML;\n processPastedImgUrls(imgInfo);\n }\n };\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.getDoc();\n const imageEl = editorEl.querySelector(`#${imageId}`);\n if (imageEl) {\n imageEl.setAttribute('src', src);\n imageEl.setAttribute('alt', alt);\n resizeEditor();\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 element: formFieldRef.current \|\| undefined\n }),\n [editor]\n );\n\n useLayoutEffect(() => {\n if (!tinyMceRef.current \|\| !tinyMceContainerRef.current) return;\n const styles = serialize(compile(getHtmlStyles(theme)), stringify);\n const imageStyles = serialize(compile(getImageStyles(theme)), stringify);\n tinymce\n .init({\n readonly: readOnly \|\| disabled,\n skin: false,\n target: tinyMceRef.current,\n toolbar: false,\n menubar: false,\n plugins: 'lists advlist autolink',\n paste_data_images: true,\n lists_indent_on_tab: true,\n icons: '',\n branding: false,\n elementpath: false,\n placeholder,\n content_css: false,\n browser_spellcheck: spellcheck,\n paste_preprocess: pastePreprocess,\n content_style: `${createGlobalRootStyles(\n theme\n )} ${globalSpacingStyles} ${createGlobalBodyStyles(\n theme\n )} body { min-height: 3rem; padding: ${\n toolbar.length > 0 && !readOnly ? theme.base.spacing : 0\n }; } html { overflow: hidden; } ${offscreenSelectionStyles} ${placeholderStyles} ${imageStyles} ${styles}`,\n init_instance_callback: initializedEditor => {\n const iframeWindow = (\n tinyMceContainerRef.current?.querySelector('iframe') as HTMLIFrameElement\n ).contentWindow;\n const editorCustomElements = iframeWindow?.customElements;\n if (editorCustomElements) {\n customComponents.forEach(\n ({ name, createCustomElement: customElementCreator, style }) => {\n if (!editorCustomElements.get(name)) {\n editorCustomElements.define(\n name,\n customElementCreator(iframeWindow as unknown as typeof globalThis)\n );\n }\n if (style) {\n const styleEl = document.createElement('style');\n styleEl.innerText = style;\n initializedEditor.getDoc().head.appendChild(styleEl);\n }\n }\n );\n }\n },\n extended_valid_elements: `${customComponents\n .map(\n comp =>\n `${comp.name}${\n comp.extensionAttributes ? `[${comp.extensionAttributes.join('\|')}]` : ''\n }`\n )\n .join(',')}`,\n custom_elements: `~${customComponents.map(comp => comp.name).join('~,')}`,\n setup: editorSettings => {\n editorSettings.on('keydown', e => {\n onKeyDown?.(e);\n });\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+b', t('rte_bold'), () => {\n editorSettings.execCommand('Bold');\n });\n editorSettings.addShortcut('meta+shift+i', t('rte_italic'), () => {\n editorSettings.execCommand('Italic');\n });\n editorSettings.addShortcut('meta+shift+x', t('rte_strike_through'), () => {\n editorSettings.execCommand('Strikethrough');\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 customActions?.forEach(action => {\n if (action.shortcut) {\n editorSettings.addShortcut(\n action.shortcut.pattern,\n action.shortcut.description,\n () => {\n action.shortcut?.command(editorSettings);\n }\n );\n }\n });\n }\n })\n .then(tinymceEditors => {\n setEditor(tinymceEditors[0]);\n tinymceEditors[0].editorContainer?.setAttribute('style', '');\n const iframe = tinyMceContainerRef.current?.querySelector('iframe');\n if (iframe) {\n const globalStyles =\n styleSheetTarget?.querySelectorAll('[data-cosmos-global-style]') ??\n ([] as HTMLElement[]);\n const extraStyles =\n document.querySelectorAll('[data-cosmos-global-style]') ?? ([] as HTMLElement[]);\n const iframeContentHead = iframe?.contentDocument?.querySelector('head');\n [...globalStyles, ...extraStyles].forEach(sheet => {\n iframeContentHead?.appendChild(sheet.cloneNode(true));\n });\n autoResizeRef.current = iframe;\n resizeEditor();\n }\n });\n }, []);\n\n useEffect(() => {\n if (editor) {\n editor.options.set('paste_preprocess', pastePreprocess);\n }\n }, [imagesEnabled]);\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 onChangeEvents = ['keyup', 'FormatApply', 'FormatRemove', 'ExecCommand'];\n const onEditorKeyDown = (event: EditorEvent<KeyboardEvent>) => {\n resizeEditor();\n if (event.key === 'Enter') {\n editor.selection.getNode().scrollIntoView(false);\n }\n };\n const onEditorChange = () => {\n onChange?.(editor);\n };\n const onEditorFocus = () => {\n setFocused(true);\n onFocus?.();\n };\n const onEditorBlur = () => {\n setFocused(false);\n onBlur?.();\n };\n onChangeEvents.forEach(event => {\n editor.on(event, onEditorChange);\n });\n editor.on('keydown', onEditorKeyDown);\n editor.on('paste', resizeEditor);\n editor.on('focus', onEditorFocus);\n editor.on('blur', onEditorBlur);\n return () => {\n onChangeEvents.forEach(event => {\n editor.off(event, onEditorChange);\n });\n editor.off('keydown', onEditorKeyDown);\n editor.off('paste', resizeEditor);\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') && imagesEnabled) {\n addImage(file);\n }\n });\n }\n };\n editor?.on('drop', onEditorDrop);\n const body = editor?.getDoc().body;\n const resizeObserver = new ResizeObserver(() => {\n resizeEditor();\n });\n if (body) {\n resizeObserver.observe(body);\n }\n return () => {\n editor?.off('drop', onEditorDrop);\n resizeObserver.disconnect();\n };\n }, [editor, resizeEditor]);\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 focused={focused}\n >\n <StyledEditorContainer\n onClick={() => {\n if (!disabled) {\n editor?.focus();\n }\n }}\n ref={tinyMceContainerRef}\n >\n <textarea\n id={id}\n value={value.current \|\| ''}\n onChange={() => {}}\n aria-label={`${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`}\n aria-labelledby={labelId}\n ref={tinyMceRef}\n />\n {tinyMceContainerRef.current && editor && !readOnly && (\n <ImageEditor\n editor={editor}\n editorEl={tinyMceContainerRef.current}\n onChange={() => onChange?.(editor)}\n />\n )}\n </StyledEditorContainer>\n {renderToolbar && (\n <Toolbar features={toolbar} editor={editor} customActions={customActions} />\n )}\n </FormControl>\n </FormField>\n {children}\n </EditorContext.Provider>\n );\n }\n);\n\nexport default Editor;\n"]}

package/lib/components/Editor/Editor.styles.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare const offscreenSelectionStyles = "\n  .mce-offscreen-selection {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    whiteSpace: nowrap;\n    width: 1px;\n  }\n";
+export declare const placeholderStyles = "\n  .mce-content-body[data-mce-placeholder] {\n    position: relative;\n  }\n  .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {\n    cursor: text;\n    color: rgb(117, 117, 117);\n    content: attr(data-mce-placeholder);\n    position: absolute;\n  }\n";
+export declare const StyledEditorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Editor.styles.d.ts.map

package/lib/components/Editor/Editor.styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Editor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,oOAYpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yRAU7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAchC,CAAC"}

package/lib/components/Editor/Editor.styles.js ADDED Viewed

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+export const offscreenSelectionStyles = `
+  .mce-offscreen-selection {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    whiteSpace: nowrap;
+    width: 1px;
+  }
+`;
+export const placeholderStyles = `
+  .mce-content-body[data-mce-placeholder] {
+    position: relative;
+  }
+  .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+    cursor: text;
+    color: rgb(117, 117, 117);
+    content: attr(data-mce-placeholder);
+    position: absolute;
+  }
+`;
+export const StyledEditorContainer = styled.div(() => {
+    return css `
+    &:hover {
+      cursor: text;
+    }
+    iframe {
+      width: 100%;
+    }
+    .tox-statusbar {
+      display: none !important;
+    }
+  `;
+});
+//# sourceMappingURL=Editor.styles.js.map

package/lib/components/Editor/Editor.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Editor.styles.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;CAYvC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;CAUhC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;;;;;;;;GAYT,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const offscreenSelectionStyles = `\n .mce-offscreen-selection {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n whiteSpace: nowrap;\n width: 1px;\n }\n`;\n\nexport const placeholderStyles = `\n .mce-content-body[data-mce-placeholder] {\n position: relative;\n }\n .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {\n cursor: text;\n color: rgb(117, 117, 117);\n content: attr(data-mce-placeholder);\n position: absolute;\n }\n`;\n\nexport const StyledEditorContainer = styled.div(() => {\n return css`\n &:hover {\n cursor: text;\n }\n\n iframe {\n width: 100%;\n }\n\n .tox-statusbar {\n display: none !important;\n }\n `;\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { Ref } from 'react';
+import { ReactNode, Ref, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { Editor as TinymceEditor } from 'tinymce/tinymce';
 import { Action, BaseProps, FormControlProps } from '@pega/cosmos-react-core';
 import { Features } from '../RichTextEditor/Toolbar/Toolbar.types';
@@ -10,7 +10,7 @@ export declare type EditorState = RichTextEditorState & {
 export declare type CustomAction = {
     text: Action['text'];
     icon: NonNullable<Action['icon']>;
-    onMouseDown: () => void;
+    onMouseDown: (e: ReactMouseEvent | ReactKeyboardEvent) => void;
     active?: (editor: TinymceEditor) => void;
     shortcut?: {
         pattern: string;
@@ -19,14 +19,20 @@ export declare type CustomAction = {
     };
 };
 export declare type CustomComponent = {
-    customElement: CustomElementConstructor;
+    createCustomElement: (window: typeof globalThis) => CustomElementConstructor;
     name: string;
+    extensionAttributes?: string[];
+    style?: string;
 };
 export interface EditorProps extends FormControlProps, BaseProps {
     /** An array of strings that activate features on the toolbar */
     toolbar?: Features[];
+    /** Children content */
+    children?: ReactNode;
     /** A callback that supplies an object with functions that can manipulate the editor and retrieve it's content/state */
-    onChange?: () => void;
+    onChange?: (editor?: TinymceEditor) => void;
+    /** KeyDown event custom handlers for the editor */
+    onKeyDown?: (event?: KeyboardEvent) => void;
     /** A callback that runs if the editor is focused */
     onFocus?: () => void;
     /** A callback that runs if the editor loses focus */
@@ -42,14 +48,19 @@ export interface EditorProps extends FormControlProps, BaseProps {
     /** Will automatically focus the RTE on render if true */
     autoFocus?: boolean;
     /** Sets the height for the RTE. If no max height is set the RTE will continue to expand, otherwise an overflow will be applied */
-    height?: string | {
-        min?: string;
-        max?: string;
+    height?: {
+        min?: number;
+        max?: number;
     };
     /** An array of custom components, custom components must use web component API */
     customComponents?: CustomComponent[];
     /** An array of custom buttons to be inserted into the toolbar */
     customActions?: CustomAction[];
+    /**
+     * Enables browser spellcheck.
+     * @default true
+     */
+    spellcheck?: boolean;
     /** Handle to the state. */
     ref?: Ref<EditorState>;
 }