@pega/cosmos-react-rte 3.0.0-dev.7.0 → 3.0.0-dev.9.1

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

@@ -3,9 +3,11 @@ import 'tinymce/themes/silver';
 import 'tinymce/plugins/advlist';
 import 'tinymce/plugins/lists';
 import { FC } from 'react';
+import { DefaultTheme } from 'styled-components';
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { EditorProps } from './Editor.types';
-export declare const StyledInnerEditor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+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>;

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

@@ -1 +1 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"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,EAQb,MAAM,yBAAyB,CAAC;AAUjC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAG1D,eAAO,MAAM,iBAAiB;qBAAiC,OAAO;SAkBrE,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAkS1C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"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;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAgBjC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAI1D,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,CAqV1C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Editor/Editor.js

@@ -6,12 +6,25 @@ import 'tinymce/plugins/advlist';
 import 'tinymce/plugins/lists';
 import { forwardRef, useEffect, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import styled, { css } from 'styled-components';
-import { createUID, FormControl, FormField, HTML, useAfterInitialEffect, useTheme, useUID, useI18n, useConsolidatedRef, defaultThemeProp } from '@pega/cosmos-react-core';
+import { compile, serialize, stringify } from 'stylis';
+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, { StyledEditorContainer, StyledRichTextFormField } from '../RichTextEditor/RichTextEditor.styles';
 import Toolbar from './Toolbar/Toolbar';
 import EditorContext from './Editor.context';
 import { getTextFormats } from './Toolbar/TextSelect';
 import ImageEditor, { imgHoverClass } from './ImageEditor';
+import { offscreenSelectionStyles, StyledTinyMCEContainer } from './Editor.styles';
+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 &&
@@ -22,27 +35,26 @@ export const StyledInnerEditor = styled.div(({ theme, showPlaceholder }) => {
           content: attr(data-mce-placeholder);
         }
       `}
-      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);
-      }
     `;
 });
 StyledInnerEditor.defaultProps = defaultThemeProp;
 const Editor = forwardRef((props, ref) => {
     const { components: { 'text-area': { 'min-height': minHeight } } } = 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, onKeyDown, onFocus, onBlur, onImageAdded, onInit, defaultValue, customComponents = [], height = { min: minHeight }, customActions, placeholder, children, ...restProps } = props;
-    const [showPlaceholder, setShowPlaceholder] = useState(() => !defaultValue);
+    const [autoResizeRef, resizeEditor] = useAutoResize();
     const formFieldRef = useRef(null);
     const value = useRef(defaultValue);
+    const theme = useTheme();
     useImperativeHandle(editorRef, () => ({
         focus: () => {
             editor?.focus();
@@ -61,7 +73,7 @@ const Editor = forwardRef((props, ref) => {
         },
         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);
@@ -84,8 +96,10 @@ const Editor = forwardRef((props, ref) => {
         element: formFieldRef.current || undefined
     }), [editor]);
     useLayoutEffect(() => {
-        if (!tinyMceRef.current)
+        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,
@@ -93,21 +107,32 @@ const Editor = forwardRef((props, ref) => {
             target: tinyMceRef.current,
             toolbar: false,
             menubar: false,
-            inline: true,
             plugins: 'lists advlist',
             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,
+            content_style: `${createGlobalRootStyles(theme)} ${globalSpacingStyles} ${createGlobalBodyStyles(theme)} body { min-height: 3rem; } html { overflow: hidden; padding: 4px; } ${offscreenSelectionStyles} ${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).join(',')}`,
+            custom_elements: `~${customComponents.map(comp => comp.name).join('~,')}`,
             setup: editorSettings => {
                 editorSettings.on('keydown', e => {
                     onKeyDown?.(e);
@@ -137,6 +162,18 @@ 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;
+            }
         });
     }, []);
     useEffect(() => {
@@ -150,12 +187,13 @@ const Editor = forwardRef((props, ref) => {
             return;
         const onEditorChange = () => {
             onChange?.(editor);
-            setShowPlaceholder(!editor.getContent({ format: 'text' }));
         };
         const onEditorFocus = () => {
+            setFocused(true);
             onFocus?.();
         };
         const onEditorBlur = () => {
+            setFocused(false);
             onBlur?.();
         };
         editor.on('input', onEditorChange);
@@ -189,10 +227,18 @@ const Editor = forwardRef((props, ref) => {
             }
         };
         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]);
+    }, [editor, resizeEditor]);
     const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;
     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
@@ -202,11 +248,11 @@ const Editor = forwardRef((props, ref) => {
                     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: [_jsxs(StyledEditorContainer, { readOnly: readOnly, 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, focused: focused, children: [_jsxs(StyledEditorContainer, { readOnly: readOnly, onClick: () => {
                                 if (!disabled) {
                                     editor?.focus();
                                 }
-                            }, toolbar: renderToolbar, containerHeight: height, children: [_jsx(HTML, { as: StyledInnerEditor, id: id, style: { outline: 'none', border: 'none' }, content: value.current || '', "aria-label": `${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`, showPlaceholder: showPlaceholder, "aria-labelledby": labelId, role: 'textbox', ref: tinyMceRef }), tinyMceRef.current && editor && (_jsx(ImageEditor, { editor: editor, editorEl: tinyMceRef.current }))] }), renderToolbar && (_jsx(Toolbar, { features: toolbar, editor: editor, customActions: customActions }))] }) }), children] }));
+                            }, toolbar: renderToolbar, containerHeight: height, children: [_jsx(StyledTinyMCEContainer, { 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 && (_jsx(ImageEditor, { editor: editor, editorEl: tinyMceContainerRef.current }))] }), renderToolbar && (_jsx(Toolbar, { features: toolbar, editor: editor, customActions: customActions }))] }) }), children] }));
 });
 export default Editor;
 //# sourceMappingURL=Editor.js.map

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

@@ -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  HTML,\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} 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';\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      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);\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 tinyMceRef = useRef(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 = { min: minHeight },\n      customActions,\n      placeholder,\n      children,\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      if (!tinyMceRef.current) return;\n\n      tinymce\n        .init({\n          readonly: readOnly || disabled,\n          skin: false,\n          target: tinyMceRef.current,\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            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+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        onChange?.(editor);\n        setShowPlaceholder(!editor.getContent({ format: 'text' }));\n      };\n      const onEditorFocus = () => {\n        onFocus?.();\n      };\n      const onEditorBlur = () => {\n        onBlur?.();\n      };\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              <HTML\n                as={StyledInnerEditor}\n                id={id}\n                style={{ outline: 'none', border: 'none' }}\n                content={value.current || ''}\n                aria-label={`${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`}\n                showPlaceholder={showPlaceholder}\n                aria-labelledby={labelId}\n                role='textbox'\n                ref={tinyMceRef}\n              />\n              {tinyMceRef.current && editor && (\n                <ImageEditor editor={editor} editorEl={tinyMceRef.current} />\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"]}
+{"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, DefaultTheme } from 'styled-components';\nimport { compile, serialize, stringify } from 'stylis';\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  StyledEditorContainer,\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 { offscreenSelectionStyles, StyledTinyMCEContainer } from './Editor.styles';\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': minHeight }\n      }\n    } = 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 = { min: minHeight },\n      customActions,\n      placeholder,\n      children,\n      ...restProps\n    } = props;\n\n    const [autoResizeRef, resizeEditor] = useAutoResize<HTMLIFrameElement>();\n    const formFieldRef = useRef<HTMLElement>(null);\n    const value = useRef(defaultValue);\n    const theme = useTheme();\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            }\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',\n          lists_indent_on_tab: true,\n          icons: '',\n          branding: false,\n          elementpath: false,\n          placeholder,\n          content_css: false,\n          content_style: `${createGlobalRootStyles(\n            theme\n          )} ${globalSpacingStyles} ${createGlobalBodyStyles(\n            theme\n          )} body { min-height: 3rem; } html { overflow: hidden; padding: 4px; } ${offscreenSelectionStyles} ${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.map(comp => comp.name).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+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          }\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        onChange?.(editor);\n      };\n      const onEditorFocus = () => {\n        setFocused(true);\n        onFocus?.();\n      };\n      const onEditorBlur = () => {\n        setFocused(false);\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      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    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            focused={focused}\n          >\n            <StyledEditorContainer\n              readOnly={readOnly}\n              onClick={() => {\n                if (!disabled) {\n                  editor?.focus();\n                }\n              }}\n              toolbar={renderToolbar}\n              containerHeight={height}\n            >\n              <StyledTinyMCEContainer ref={tinyMceContainerRef}>\n                <textarea\n                  id={id}\n                  value={value.current || ''}\n                  onChange={() => {}}\n                  aria-label={`${label}${\n                    renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''\n                  }`}\n                  aria-labelledby={labelId}\n                  ref={tinyMceRef}\n                />\n              </StyledTinyMCEContainer>\n              {tinyMceContainerRef.current && editor && (\n                <ImageEditor editor={editor} editorEl={tinyMceContainerRef.current} />\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

@@ -0,0 +1,3 @@
+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 StyledTinyMCEContainer: 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

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB,oOAYpC,CAAC;AAGF,eAAO,MAAM,sBAAsB,yGAQlC,CAAC"}

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { StyledHTML } from '@pega/cosmos-react-core';
+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;
+  }
+`;
+// eslint-disable-next-line import/prefer-default-export
+export const StyledTinyMCEContainer = styled(StyledHTML) `
+  iframe {
+    width: 100%;
+  }
+
+  .tox-statusbar {
+    display: none !important;
+  }
+`;
+//# sourceMappingURL=Editor.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.styles.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;CAYvC,CAAC;AAEF,wDAAwD;AACxD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;;;;;;CAQvD,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { StyledHTML } from '@pega/cosmos-react-core';\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\n// eslint-disable-next-line import/prefer-default-export\nexport const StyledTinyMCEContainer = styled(StyledHTML)`\n  iframe {\n    width: 100%;\n  }\n\n  .tox-statusbar {\n    display: none !important;\n  }\n`;\n"]}

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

@@ -19,8 +19,9 @@ export declare type CustomAction = {
     };
 };
 export declare type CustomComponent = {
-    customElement: CustomElementConstructor;
+    createCustomElement: (window: typeof globalThis) => CustomElementConstructor;
     name: string;
+    style?: string;
 };
 export interface EditorProps extends FormControlProps, BaseProps {
     /** An array of strings that activate features on the toolbar */

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

@@ -1 +1 @@
-{"version":3,"file":"Editor.types.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,GAAG,EACH,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,oBAAY,WAAW,GAAG,mBAAmB,GAAG;IAC9C,SAAS,EAAE,MAAM,aAAa,GAAG,SAAS,CAAC;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAClC,WAAW,EAAE,CAAC,CAAC,EAAE,eAAe,GAAG,kBAAkB,KAAK,IAAI,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;KAAE,CAAC;CAC/F,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,aAAa,EAAE,wBAAwB,CAAC;IACxC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,gBAAgB,EAAE,SAAS;IAC9D,gEAAgE;IAChE,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uHAAuH;IACvH,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,mDAAmD;IACnD,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,2DAA2D;IAC3D,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kIAAkI;IAClI,MAAM,CAAC,EACH,MAAM,GACN;QACE,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACN,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,iEAAiE;IACjE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}
+{"version":3,"file":"Editor.types.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,GAAG,EACH,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,oBAAY,WAAW,GAAG,mBAAmB,GAAG;IAC9C,SAAS,EAAE,MAAM,aAAa,GAAG,SAAS,CAAC;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAClC,WAAW,EAAE,CAAC,CAAC,EAAE,eAAe,GAAG,kBAAkB,KAAK,IAAI,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;KAAE,CAAC;CAC/F,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,mBAAmB,EAAE,CAAC,MAAM,EAAE,OAAO,UAAU,KAAK,wBAAwB,CAAC;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,gBAAgB,EAAE,SAAS;IAC9D,gEAAgE;IAChE,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uHAAuH;IACvH,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,mDAAmD;IACnD,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,2DAA2D;IAC3D,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kIAAkI;IAClI,MAAM,CAAC,EACH,MAAM,GACN;QACE,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACN,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,iEAAiE;IACjE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Editor.types.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.types.ts"],"names":[],"mappings":"","sourcesContent":["import {\n  ReactNode,\n  Ref,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport { Editor as TinymceEditor } from 'tinymce/tinymce';\n\nimport { Action, BaseProps, FormControlProps } from '@pega/cosmos-react-core';\n\nimport { Features } from '../RichTextEditor/Toolbar/Toolbar.types';\nimport { RichTextEditorState } from '../RichTextEditor';\n\nexport type EditorState = RichTextEditorState & {\n  getEditor: () => TinymceEditor | undefined;\n  element?: HTMLElement;\n};\n\nexport type CustomAction = {\n  text: Action['text'];\n  icon: NonNullable<Action['icon']>;\n  onMouseDown: (e: ReactMouseEvent | ReactKeyboardEvent) => void;\n  active?: (editor: TinymceEditor) => void;\n  shortcut?: { pattern: string; description: string; command: (editor: TinymceEditor) => void };\n};\n\nexport type CustomComponent = {\n  customElement: CustomElementConstructor;\n  name: string;\n};\n\nexport interface EditorProps extends FormControlProps, BaseProps {\n  /** An array of strings that activate features on the toolbar */\n  toolbar?: Features[];\n  /** Children content */\n  children?: ReactNode;\n  /** A callback that supplies an object with functions that can manipulate the editor and retrieve it's content/state */\n  onChange?: (editor?: TinymceEditor) => void;\n  /** KeyDown event custom handlers for the editor */\n  onKeyDown?: (event?: KeyboardEvent) => void;\n  /** A callback that runs if the editor is focused */\n  onFocus?: () => void;\n  /** A callback that runs if the editor loses focus */\n  onBlur?: () => void;\n  /** A callback when an image is added through the toolbar image feature */\n  onImageAdded?: (image: File, id: string) => void;\n  /** A callback for when tinymce is finished initializing */\n  onInit?: (editor: TinymceEditor) => void;\n  /** Standard placeholder for an input */\n  placeholder?: string;\n  /** Default value for the RTE - HTML String */\n  defaultValue?: string;\n  /** Will automatically focus the RTE on render if true */\n  autoFocus?: boolean;\n  /** Sets the height for the RTE. If no max height is set the RTE will continue to expand, otherwise an overflow will be applied */\n  height?:\n    | string\n    | {\n        min?: string;\n        max?: string;\n      };\n  /** An array of custom components, custom components must use web component API */\n  customComponents?: CustomComponent[];\n  /** An array of custom buttons to be inserted into the toolbar */\n  customActions?: CustomAction[];\n  /** Handle to the state. */\n  ref?: Ref<EditorState>;\n}\n"]}
+{"version":3,"file":"Editor.types.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.types.ts"],"names":[],"mappings":"","sourcesContent":["import {\n  ReactNode,\n  Ref,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport { Editor as TinymceEditor } from 'tinymce/tinymce';\n\nimport { Action, BaseProps, FormControlProps } from '@pega/cosmos-react-core';\n\nimport { Features } from '../RichTextEditor/Toolbar/Toolbar.types';\nimport { RichTextEditorState } from '../RichTextEditor';\n\nexport type EditorState = RichTextEditorState & {\n  getEditor: () => TinymceEditor | undefined;\n  element?: HTMLElement;\n};\n\nexport type CustomAction = {\n  text: Action['text'];\n  icon: NonNullable<Action['icon']>;\n  onMouseDown: (e: ReactMouseEvent | ReactKeyboardEvent) => void;\n  active?: (editor: TinymceEditor) => void;\n  shortcut?: { pattern: string; description: string; command: (editor: TinymceEditor) => void };\n};\n\nexport type CustomComponent = {\n  createCustomElement: (window: typeof globalThis) => CustomElementConstructor;\n  name: string;\n  style?: string;\n};\n\nexport interface EditorProps extends FormControlProps, BaseProps {\n  /** An array of strings that activate features on the toolbar */\n  toolbar?: Features[];\n  /** Children content */\n  children?: ReactNode;\n  /** A callback that supplies an object with functions that can manipulate the editor and retrieve it's content/state */\n  onChange?: (editor?: TinymceEditor) => void;\n  /** KeyDown event custom handlers for the editor */\n  onKeyDown?: (event?: KeyboardEvent) => void;\n  /** A callback that runs if the editor is focused */\n  onFocus?: () => void;\n  /** A callback that runs if the editor loses focus */\n  onBlur?: () => void;\n  /** A callback when an image is added through the toolbar image feature */\n  onImageAdded?: (image: File, id: string) => void;\n  /** A callback for when tinymce is finished initializing */\n  onInit?: (editor: TinymceEditor) => void;\n  /** Standard placeholder for an input */\n  placeholder?: string;\n  /** Default value for the RTE - HTML String */\n  defaultValue?: string;\n  /** Will automatically focus the RTE on render if true */\n  autoFocus?: boolean;\n  /** Sets the height for the RTE. If no max height is set the RTE will continue to expand, otherwise an overflow will be applied */\n  height?:\n    | string\n    | {\n        min?: string;\n        max?: string;\n      };\n  /** An array of custom components, custom components must use web component API */\n  customComponents?: CustomComponent[];\n  /** An array of custom buttons to be inserted into the toolbar */\n  customActions?: CustomAction[];\n  /** Handle to the state. */\n  ref?: Ref<EditorState>;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAQH,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AA4BjC,eAAO,MAAM,aAAa,QAAc,CAAC;AAEzC,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAwX9D,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAOH,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AA4BjC,eAAO,MAAM,aAAa,QAAc,CAAC;AAEzC,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAmY9D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Editor/ImageEditor.js

@@ -30,7 +30,11 @@ const ImageEditor = ({ editorEl, editor }) => {
             name: 'offset',
             options: {
                 offset: ({ reference, popper }) => {
-                    return [0, -(reference.height / 2 + popper.height / 2)];
+                    const iframe = editorEl.querySelector('iframe');
+                    const iframeRect = iframe?.getBoundingClientRect();
+                    const x = iframeRect?.x ?? 0;
+                    const y = iframeRect?.y ?? 0;
+                    return [x, -(reference.height / 2 + popper.height / 2) - y];
                 }
             }
         }
@@ -54,7 +58,7 @@ const ImageEditor = ({ editorEl, editor }) => {
         setImageEl(el);
     };
     const onImageMouseLeave = (e) => {
-        if (e.relatedTarget.id !== id && !showImagePopover) {
+        if (e.relatedTarget && e.relatedTarget.id !== id && !showImagePopover) {
             setImageEl(null);
             setShowEditButton(false);
         }
@@ -152,8 +156,10 @@ const ImageEditor = ({ editorEl, editor }) => {
     };
     // Keeps the imageElements state up to date with existing and newly added img tags inside of TinyMCE
     useEffect(() => {
+        const iframeDoc = editor.getDoc();
+        const imageElements = iframeDoc?.querySelectorAll('img') ?? [];
         setImageElements(() => {
-            return [...editorEl.querySelectorAll('img')];
+            return [...imageElements];
         });
         const observer = new MutationObserver(mutations => {
             mutations.forEach(mutation => {
@@ -161,16 +167,19 @@ const ImageEditor = ({ editorEl, editor }) => {
                     const addedNodes = [...mutation.addedNodes].filter(node => node.nodeName === 'IMG');
                     const removedNodes = [...mutation.removedNodes].filter(node => node.nodeName === 'IMG');
                     if (addedNodes.length || removedNodes.length) {
-                        setImageElements(() => [...editorEl.querySelectorAll('img')]);
+                        const newImageElements = iframeDoc?.querySelectorAll('img') ?? [];
+                        setImageElements(() => [...newImageElements]);
                     }
                 }
             });
         });
-        observer.observe(editorEl, { childList: true, subtree: true });
+        if (iframeDoc) {
+            observer.observe(iframeDoc.body, { childList: true, subtree: true });
+        }
         return () => {
             observer.disconnect();
         };
-    }, [editorEl, setImageElements]);
+    }, [editorEl, editor, setImageElements]);
     // Adds event listeners to HTML img elements inside of TinyMCE
     // This has to be done because there are no react components for these images
     useEffect(() => {
@@ -255,7 +264,7 @@ const ImageEditor = ({ editorEl, editor }) => {
             }
         }
     }, [showImagePopover]);
-    return (_jsxs(_Fragment, { children: [showEditButton && imgEl && canShowEditButton && (_jsx(Button, { id: id, icon: true, variant: 'primary', ref: setButtonEl, onClick: () => setShowImagePopover(true), style: { ...styles.popper }, ...attributes.popper, children: _jsx(Icon, { name: 'pencil-solid', as: IgnoreMouseEventsIcon }) })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: keyCommandText }), showImagePopover && (buttonEl || !canShowEditButton) && imgEl && (_jsxs(Popover, { target: canShowEditButton ? buttonEl : imgEl, strategy: 'fixed', arrow: true, ref: imagePopoverRef, onClick: (e) => e.stopPropagation(), children: [_jsx(CardHeader, { actions: _jsx(Button, { variant: 'simple', icon: true, onClick: onImageChangeCancel, label: t('close'), children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: t('rte_image_settings') }) }), _jsx(CardContent, { children: _jsx(Form, { actions: _jsxs(Flex, { container: { justify: 'between' }, item: { grow: 1 }, children: [_jsxs(Flex, { item: { grow: 1 }, children: [_jsx(Button, { onClick: onImageChangeCancel, children: t('cancel') }), _jsx(Button, { onClick: onImageDelete, children: t('delete') })] }), _jsx(Button, { variant: 'primary', type: 'submit', children: t('submit') })] }), onSubmit: onImageChangeSubmit, children: _jsxs(Grid, { container: {
+    return (_jsxs(_Fragment, { children: [showEditButton && imgEl && canShowEditButton && (_jsx(Button, { id: id, icon: true, variant: 'primary', ref: setButtonEl, onClick: () => setShowImagePopover(true), style: { ...styles.popper }, ...attributes.popper, children: _jsx(Icon, { name: 'pencil-solid', as: IgnoreMouseEventsIcon }) })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: keyCommandText }), showImagePopover && (buttonEl || !canShowEditButton) && imgEl && (_jsxs(Popover, { target: canShowEditButton ? buttonEl : imgEl, strategy: 'fixed', arrow: true, ref: imagePopoverRef, onClick: (e) => e.stopPropagation(), children: [_jsx(CardHeader, { actions: _jsx(Button, { variant: 'simple', icon: true, onClick: onImageChangeCancel, label: t('close'), children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: t('rte_image_settings') }) }), _jsx(CardContent, { children: _jsx(Form, { as: 'div', actions: _jsxs(Flex, { container: { justify: 'between' }, item: { grow: 1 }, children: [_jsxs(Flex, { item: { grow: 1 }, children: [_jsx(Button, { onClick: onImageChangeCancel, children: t('cancel') }), _jsx(Button, { onClick: onImageDelete, children: t('delete') })] }), _jsx(Button, { variant: 'primary', onClick: onImageChangeSubmit, children: t('submit') })] }), children: _jsxs(Grid, { container: {
                                     gap: 2,
                                     areas: customSize
                                         ? '"desc desc" "radio radio" "width height"'

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

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.js","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  MouseEvent as ReactMouseEvent,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  FormEvent,\n  ChangeEvent\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { Rect } from '@popperjs/core';\nimport { Editor } from 'tinymce';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  CardContent,\n  CardHeader,\n  Checkbox,\n  createUID,\n  Flex,\n  Form,\n  Grid,\n  Icon,\n  Input,\n  NumberInput,\n  Popover,\n  Text,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  useUID,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nconst IgnoreMouseEventsIcon = styled.svg`\n  pointer-events: none;\n`;\n\nexport const imgHoverClass = createUID();\n\nconst ImageEditor: FC<{ editorEl: HTMLElement; editor: Editor }> = ({ editorEl, editor }) => {\n  const t = useI18n();\n  const id = useUID();\n  const [showImagePopover, setShowImagePopover] = useState(false);\n  const [showEditButton, setShowEditButton] = useState(false);\n  const [canShowEditButton, setCanShowEditButton] = useState(false);\n  const [imgEl, setImageEl] = useState<HTMLImageElement | null>(null);\n  const [imgElements, setImageElements] = useState<HTMLImageElement[]>([]);\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const [aspectRatio, setAspectRatio] = useState(0);\n  const [altText, setAltText] = useState('');\n  const [customSize, setCustomSize] = useState(false);\n  const [keyCommandText, setKeyCommandText] = useState('');\n  const imagePopoverRef = useRef<HTMLDivElement>(null);\n  const altTextInputRef = useRef<HTMLInputElement>(null);\n  const editorOpenedWithEnter = useRef(false);\n\n  const modifiers = useMemo(\n    () => [\n      {\n        name: 'offset',\n        options: {\n          offset: ({ reference, popper }: { reference: Rect; popper: Rect }) => {\n            return [0, -(reference.height / 2 + popper.height / 2)];\n          }\n        }\n      }\n    ],\n    []\n  );\n\n  const { styles, attributes } = usePopper(imgEl, buttonEl, {\n    placement: 'top',\n    strategy: 'absolute',\n    modifiers\n  });\n\n  const onImageClick = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setShowImagePopover(true);\n  };\n\n  const onImageMouseEnter = (e: MouseEvent) => {\n    const el = e.target as HTMLElement;\n    if (showImagePopover && el !== imgEl) {\n      setShowImagePopover(false);\n    }\n    setShowEditButton(true);\n    setImageEl(el as HTMLImageElement);\n  };\n\n  const onImageMouseLeave = (e: MouseEvent) => {\n    if ((e.relatedTarget as HTMLButtonElement).id !== id && !showImagePopover) {\n      setImageEl(null);\n      setShowEditButton(false);\n    }\n  };\n\n  const setImageState = () => {\n    if (imgEl) {\n      let imgHeight;\n      let imgWidth;\n      let hasHeightOrWidthAttribute = false;\n      if (imgEl.getAttribute('height')) {\n        imgHeight = parseInt(imgEl.getAttribute('height') as string, 10);\n        hasHeightOrWidthAttribute = true;\n      } else {\n        imgHeight = imgEl.naturalHeight;\n      }\n      if (imgEl.getAttribute('width')) {\n        imgWidth = parseInt(imgEl.getAttribute('width') as string, 10);\n        hasHeightOrWidthAttribute = true;\n      } else {\n        imgWidth = imgEl.naturalWidth;\n      }\n      setAltText(imgEl.getAttribute('alt') || '');\n      setHeight(imgHeight);\n      setWidth(imgWidth);\n      setAspectRatio(imgWidth / imgHeight);\n      setCustomSize(hasHeightOrWidthAttribute);\n    }\n  };\n\n  useOuterEvent('mousedown', [imagePopoverRef], () => {\n    setImageState();\n    setShowImagePopover(false);\n  });\n\n  const onCheckBoxClick = (e: ReactMouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const onInputClick = (e: ReactMouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n  };\n\n  const onInputFocus = (e: FocusEvent) => {\n    e.stopPropagation();\n  };\n\n  const onAltTextChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setAltText(e.target.value);\n  };\n\n  /* The next two functions handle changing the height and width of the selected image element.\n  If the value entered is too small, the value will be defaulted.\n  When the height is input, a new width will be calculated and vice versa. */\n  const onHeightChange = (incomingValue: string) => {\n    const inputHeight = parseInt(incomingValue, 10);\n\n    setHeight(inputHeight);\n    setWidth(inputHeight * aspectRatio);\n  };\n\n  const onWidthChange = (incomingValue: string) => {\n    const inputWidth = parseInt(incomingValue, 10);\n\n    setWidth(inputWidth);\n    setHeight(inputWidth / aspectRatio);\n  };\n\n  const onImageChangeSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    if (imgEl) {\n      if (customSize) {\n        if (Number.isNaN(height) || Number.isNaN(width)) {\n          imgEl.removeAttribute('height');\n          imgEl.removeAttribute('width');\n          setHeight(imgEl.naturalHeight);\n          setWidth(imgEl.naturalWidth);\n        } else {\n          imgEl.setAttribute('height', height.toString());\n          imgEl.setAttribute('width', width.toString());\n        }\n      } else {\n        imgEl.removeAttribute('height');\n        imgEl.removeAttribute('width');\n      }\n      imgEl.setAttribute('alt', altText);\n    }\n\n    setImageEl(null);\n    setShowImagePopover(false);\n  };\n\n  const onImageChangeCancel = () => {\n    setImageEl(null);\n    setShowImagePopover(false);\n  };\n\n  const onImageDelete = () => {\n    if (imgEl) {\n      imgEl.remove();\n    }\n    setImageEl(null);\n    setShowImagePopover(false);\n  };\n\n  // Keeps the imageElements state up to date with existing and newly added img tags inside of TinyMCE\n  useEffect(() => {\n    setImageElements(() => {\n      return [...editorEl.querySelectorAll('img')];\n    });\n    const observer = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'childList') {\n          const addedNodes = [...mutation.addedNodes].filter(node => node.nodeName === 'IMG');\n          const removedNodes = [...mutation.removedNodes].filter(node => node.nodeName === 'IMG');\n          if (addedNodes.length || removedNodes.length) {\n            setImageElements(() => [...editorEl.querySelectorAll('img')]);\n          }\n        }\n      });\n    });\n    observer.observe(editorEl, { childList: true, subtree: true });\n    return () => {\n      observer.disconnect();\n    };\n  }, [editorEl, setImageElements]);\n\n  // Adds event listeners to HTML img elements inside of TinyMCE\n  // This has to be done because there are no react components for these images\n  useEffect(() => {\n    imgElements.forEach(imgElement => {\n      imgElement.addEventListener('mouseenter', onImageMouseEnter);\n      imgElement.addEventListener('mouseout', onImageMouseLeave);\n      imgElement.addEventListener('click', onImageClick);\n    });\n    return () => {\n      imgElements.forEach(imgElement => {\n        imgElement.removeEventListener('mouseenter', onImageMouseEnter);\n        imgElement.removeEventListener('mouseout', onImageMouseLeave);\n        imgElement.removeEventListener('click', onImageClick);\n      });\n    };\n  }, [imgElements, onImageMouseEnter, onImageMouseLeave, onImageClick]);\n\n  useEffect(() => {\n    setImageState();\n    imgEl?.setAttribute('class', imgHoverClass);\n    if (imgEl && imgEl.clientHeight > 36 && imgEl.clientWidth > 36) {\n      setCanShowEditButton(true);\n    } else {\n      setCanShowEditButton(false);\n    }\n    return () => {\n      imgEl?.removeAttribute('class');\n    };\n  }, [imgEl]);\n\n  useEffect(() => {\n    const onKeyUp = () => {\n      const selection = editor.selection.getSel();\n      let nextToImg = false;\n      // If your selection is next to an image on it's own line (not breaking text)\n      if (\n        selection &&\n        selection.anchorNode?.childNodes.length === 1 &&\n        selection.anchorNode?.firstChild?.nodeName === 'IMG' &&\n        selection.anchorOffset === 0\n      ) {\n        setImageEl(selection.anchorNode.firstChild as HTMLImageElement);\n        setShowEditButton(true);\n        nextToImg = true;\n        // If your selection is next to an image that breaks text up inside of a paragraph\n      } else if (selection && selection.anchorNode?.nextSibling?.nodeName === 'IMG') {\n        setImageEl(selection.anchorNode.nextSibling as HTMLImageElement);\n        setShowEditButton(true);\n        nextToImg = true;\n      } else if (selection && imgEl && showEditButton) {\n        setImageEl(null);\n        setShowEditButton(false);\n        setKeyCommandText('');\n      }\n\n      if (nextToImg) {\n        setKeyCommandText(t('rte_image_key_command'));\n      }\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Enter' && showEditButton) {\n        e.stopPropagation();\n        e.preventDefault();\n        editorOpenedWithEnter.current = true;\n        setShowImagePopover(true);\n      } else if (e.key === 'Del' && showEditButton) {\n        onImageDelete();\n      }\n    };\n    editor.on('keyup', onKeyUp);\n    editor.on('keydown', onKeyDown, true);\n    return () => {\n      editor.off('keyup', onKeyUp);\n      editor.off('keydown', onKeyDown);\n    };\n  }, [editor, imgEl, showEditButton]);\n\n  useEffect(() => {\n    if (showImagePopover) {\n      editor.selection.getSel()?.collapseToEnd();\n\n      if (editorOpenedWithEnter.current) {\n        altTextInputRef.current?.focus();\n        editorOpenedWithEnter.current = false;\n      }\n    }\n  }, [showImagePopover]);\n\n  return (\n    <>\n      {showEditButton && imgEl && canShowEditButton && (\n        <Button\n          id={id}\n          icon\n          variant='primary'\n          ref={setButtonEl}\n          onClick={() => setShowImagePopover(true)}\n          style={{ ...styles.popper }}\n          {...attributes.popper}\n        >\n          <Icon name='pencil-solid' as={IgnoreMouseEventsIcon} />\n        </Button>\n      )}\n      <VisuallyHiddenText aria-live='polite'>{keyCommandText}</VisuallyHiddenText>\n      {showImagePopover && (buttonEl || !canShowEditButton) && imgEl && (\n        <Popover\n          target={canShowEditButton ? buttonEl : imgEl}\n          strategy='fixed'\n          arrow\n          ref={imagePopoverRef}\n          onClick={(e: MouseEvent) => e.stopPropagation()}\n        >\n          <CardHeader\n            actions={\n              <Button variant='simple' icon onClick={onImageChangeCancel} label={t('close')}>\n                <Icon name='times' />\n              </Button>\n            }\n          >\n            <Text variant='h3'>{t('rte_image_settings')}</Text>\n          </CardHeader>\n          <CardContent>\n            <Form\n              actions={\n                <Flex container={{ justify: 'between' }} item={{ grow: 1 }}>\n                  <Flex item={{ grow: 1 }}>\n                    <Button onClick={onImageChangeCancel}>{t('cancel')}</Button>\n                    <Button onClick={onImageDelete}>{t('delete')}</Button>\n                  </Flex>\n                  <Button variant='primary' type='submit'>\n                    {t('submit')}\n                  </Button>\n                </Flex>\n              }\n              onSubmit={onImageChangeSubmit}\n            >\n              <Grid\n                container={{\n                  gap: 2,\n                  areas: customSize\n                    ? '\"desc desc\" \"radio radio\" \"width height\"'\n                    : '\"desc desc\" \"radio radio\"'\n                }}\n              >\n                <Grid item={{ area: 'desc' }}>\n                  <Input\n                    label={t('description')}\n                    value={altText}\n                    onClick={onInputClick}\n                    onChange={onAltTextChange}\n                    onFocus={onInputFocus}\n                    info={t('rte_image_description_info')}\n                    ref={altTextInputRef}\n                  />\n                </Grid>\n                <Grid item={{ area: 'radio' }}>\n                  <Checkbox\n                    checked={customSize}\n                    label={t('rte_image_custom_size')}\n                    onClick={onCheckBoxClick}\n                    onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                      setCustomSize(e.target.checked);\n                    }}\n                  />\n                </Grid>\n                {customSize && (\n                  <>\n                    <Grid item={{ area: 'width' }}>\n                      <NumberInput\n                        label={t('rte_width_in_pixels')}\n                        value={Math.floor(Math.max(width, 1)).toString()}\n                        onClick={onInputClick}\n                        onChange={onWidthChange}\n                      />\n                    </Grid>\n                    <Grid item={{ area: 'height' }}>\n                      <NumberInput\n                        label={t('rte_height_in_pixels')}\n                        value={Math.floor(Math.max(height, 1)).toString()}\n                        onClick={onInputClick}\n                        onChange={onHeightChange}\n                      />\n                    </Grid>\n                  </>\n                )}\n              </Grid>\n            </Form>\n          </CardContent>\n        </Popover>\n      )}\n    </>\n  );\n};\n\nexport default ImageEditor;\n"]}
+{"version":3,"file":"ImageEditor.js","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  MouseEvent as ReactMouseEvent,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  ChangeEvent\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { Rect } from '@popperjs/core';\nimport { Editor } from 'tinymce';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  CardContent,\n  CardHeader,\n  Checkbox,\n  createUID,\n  Flex,\n  Form,\n  Grid,\n  Icon,\n  Input,\n  NumberInput,\n  Popover,\n  Text,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  useUID,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nconst IgnoreMouseEventsIcon = styled.svg`\n  pointer-events: none;\n`;\n\nexport const imgHoverClass = createUID();\n\nconst ImageEditor: FC<{ editorEl: HTMLElement; editor: Editor }> = ({ editorEl, editor }) => {\n  const t = useI18n();\n  const id = useUID();\n  const [showImagePopover, setShowImagePopover] = useState(false);\n  const [showEditButton, setShowEditButton] = useState(false);\n  const [canShowEditButton, setCanShowEditButton] = useState(false);\n  const [imgEl, setImageEl] = useState<HTMLImageElement | null>(null);\n  const [imgElements, setImageElements] = useState<HTMLImageElement[]>([]);\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const [aspectRatio, setAspectRatio] = useState(0);\n  const [altText, setAltText] = useState('');\n  const [customSize, setCustomSize] = useState(false);\n  const [keyCommandText, setKeyCommandText] = useState('');\n  const imagePopoverRef = useRef<HTMLDivElement>(null);\n  const altTextInputRef = useRef<HTMLInputElement>(null);\n  const editorOpenedWithEnter = useRef(false);\n\n  const modifiers = useMemo(\n    () => [\n      {\n        name: 'offset',\n        options: {\n          offset: ({ reference, popper }: { reference: Rect; popper: Rect }) => {\n            const iframe = editorEl.querySelector('iframe');\n            const iframeRect = iframe?.getBoundingClientRect();\n            const x = iframeRect?.x ?? 0;\n            const y = iframeRect?.y ?? 0;\n            return [x, -(reference.height / 2 + popper.height / 2) - y];\n          }\n        }\n      }\n    ],\n    []\n  );\n\n  const { styles, attributes } = usePopper(imgEl, buttonEl, {\n    placement: 'top',\n    strategy: 'absolute',\n    modifiers\n  });\n\n  const onImageClick = (e: MouseEvent | ReactMouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setShowImagePopover(true);\n  };\n\n  const onImageMouseEnter = (e: MouseEvent) => {\n    const el = e.target as HTMLElement;\n    if (showImagePopover && el !== imgEl) {\n      setShowImagePopover(false);\n    }\n    setShowEditButton(true);\n    setImageEl(el as HTMLImageElement);\n  };\n\n  const onImageMouseLeave = (e: MouseEvent) => {\n    if (e.relatedTarget && (e.relatedTarget as HTMLButtonElement).id !== id && !showImagePopover) {\n      setImageEl(null);\n      setShowEditButton(false);\n    }\n  };\n\n  const setImageState = () => {\n    if (imgEl) {\n      let imgHeight;\n      let imgWidth;\n      let hasHeightOrWidthAttribute = false;\n      if (imgEl.getAttribute('height')) {\n        imgHeight = parseInt(imgEl.getAttribute('height') as string, 10);\n        hasHeightOrWidthAttribute = true;\n      } else {\n        imgHeight = imgEl.naturalHeight;\n      }\n      if (imgEl.getAttribute('width')) {\n        imgWidth = parseInt(imgEl.getAttribute('width') as string, 10);\n        hasHeightOrWidthAttribute = true;\n      } else {\n        imgWidth = imgEl.naturalWidth;\n      }\n      setAltText(imgEl.getAttribute('alt') || '');\n      setHeight(imgHeight);\n      setWidth(imgWidth);\n      setAspectRatio(imgWidth / imgHeight);\n      setCustomSize(hasHeightOrWidthAttribute);\n    }\n  };\n\n  useOuterEvent('mousedown', [imagePopoverRef], () => {\n    setImageState();\n    setShowImagePopover(false);\n  });\n\n  const onCheckBoxClick = (e: ReactMouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const onInputClick = (e: ReactMouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n  };\n\n  const onInputFocus = (e: FocusEvent) => {\n    e.stopPropagation();\n  };\n\n  const onAltTextChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setAltText(e.target.value);\n  };\n\n  /* The next two functions handle changing the height and width of the selected image element.\n  If the value entered is too small, the value will be defaulted.\n  When the height is input, a new width will be calculated and vice versa. */\n  const onHeightChange = (incomingValue: string) => {\n    const inputHeight = parseInt(incomingValue, 10);\n\n    setHeight(inputHeight);\n    setWidth(inputHeight * aspectRatio);\n  };\n\n  const onWidthChange = (incomingValue: string) => {\n    const inputWidth = parseInt(incomingValue, 10);\n\n    setWidth(inputWidth);\n    setHeight(inputWidth / aspectRatio);\n  };\n\n  const onImageChangeSubmit = (e: MouseEvent) => {\n    e.preventDefault();\n    if (imgEl) {\n      if (customSize) {\n        if (Number.isNaN(height) || Number.isNaN(width)) {\n          imgEl.removeAttribute('height');\n          imgEl.removeAttribute('width');\n          setHeight(imgEl.naturalHeight);\n          setWidth(imgEl.naturalWidth);\n        } else {\n          imgEl.setAttribute('height', height.toString());\n          imgEl.setAttribute('width', width.toString());\n        }\n      } else {\n        imgEl.removeAttribute('height');\n        imgEl.removeAttribute('width');\n      }\n      imgEl.setAttribute('alt', altText);\n    }\n\n    setImageEl(null);\n    setShowImagePopover(false);\n  };\n\n  const onImageChangeCancel = () => {\n    setImageEl(null);\n    setShowImagePopover(false);\n  };\n\n  const onImageDelete = () => {\n    if (imgEl) {\n      imgEl.remove();\n    }\n    setImageEl(null);\n    setShowImagePopover(false);\n  };\n\n  // Keeps the imageElements state up to date with existing and newly added img tags inside of TinyMCE\n  useEffect(() => {\n    const iframeDoc = editor.getDoc();\n    const imageElements = iframeDoc?.querySelectorAll('img') ?? ([] as HTMLImageElement[]);\n    setImageElements(() => {\n      return [...imageElements];\n    });\n    const observer = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'childList') {\n          const addedNodes = [...mutation.addedNodes].filter(node => node.nodeName === 'IMG');\n          const removedNodes = [...mutation.removedNodes].filter(node => node.nodeName === 'IMG');\n\n          if (addedNodes.length || removedNodes.length) {\n            const newImageElements =\n              iframeDoc?.querySelectorAll('img') ?? ([] as HTMLImageElement[]);\n            setImageElements(() => [...newImageElements]);\n          }\n        }\n      });\n    });\n    if (iframeDoc) {\n      observer.observe(iframeDoc.body, { childList: true, subtree: true });\n    }\n    return () => {\n      observer.disconnect();\n    };\n  }, [editorEl, editor, setImageElements]);\n\n  // Adds event listeners to HTML img elements inside of TinyMCE\n  // This has to be done because there are no react components for these images\n  useEffect(() => {\n    imgElements.forEach(imgElement => {\n      imgElement.addEventListener('mouseenter', onImageMouseEnter);\n      imgElement.addEventListener('mouseout', onImageMouseLeave);\n      imgElement.addEventListener('click', onImageClick);\n    });\n    return () => {\n      imgElements.forEach(imgElement => {\n        imgElement.removeEventListener('mouseenter', onImageMouseEnter);\n        imgElement.removeEventListener('mouseout', onImageMouseLeave);\n        imgElement.removeEventListener('click', onImageClick);\n      });\n    };\n  }, [imgElements, onImageMouseEnter, onImageMouseLeave, onImageClick]);\n\n  useEffect(() => {\n    setImageState();\n    imgEl?.setAttribute('class', imgHoverClass);\n    if (imgEl && imgEl.clientHeight > 36 && imgEl.clientWidth > 36) {\n      setCanShowEditButton(true);\n    } else {\n      setCanShowEditButton(false);\n    }\n    return () => {\n      imgEl?.removeAttribute('class');\n    };\n  }, [imgEl]);\n\n  useEffect(() => {\n    const onKeyUp = () => {\n      const selection = editor.selection.getSel();\n      let nextToImg = false;\n      // If your selection is next to an image on it's own line (not breaking text)\n      if (\n        selection &&\n        selection.anchorNode?.childNodes.length === 1 &&\n        selection.anchorNode?.firstChild?.nodeName === 'IMG' &&\n        selection.anchorOffset === 0\n      ) {\n        setImageEl(selection.anchorNode.firstChild as HTMLImageElement);\n        setShowEditButton(true);\n        nextToImg = true;\n        // If your selection is next to an image that breaks text up inside of a paragraph\n      } else if (selection && selection.anchorNode?.nextSibling?.nodeName === 'IMG') {\n        setImageEl(selection.anchorNode.nextSibling as HTMLImageElement);\n        setShowEditButton(true);\n        nextToImg = true;\n      } else if (selection && imgEl && showEditButton) {\n        setImageEl(null);\n        setShowEditButton(false);\n        setKeyCommandText('');\n      }\n\n      if (nextToImg) {\n        setKeyCommandText(t('rte_image_key_command'));\n      }\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Enter' && showEditButton) {\n        e.stopPropagation();\n        e.preventDefault();\n        editorOpenedWithEnter.current = true;\n        setShowImagePopover(true);\n      } else if (e.key === 'Del' && showEditButton) {\n        onImageDelete();\n      }\n    };\n    editor.on('keyup', onKeyUp);\n    editor.on('keydown', onKeyDown, true);\n    return () => {\n      editor.off('keyup', onKeyUp);\n      editor.off('keydown', onKeyDown);\n    };\n  }, [editor, imgEl, showEditButton]);\n\n  useEffect(() => {\n    if (showImagePopover) {\n      editor.selection.getSel()?.collapseToEnd();\n\n      if (editorOpenedWithEnter.current) {\n        altTextInputRef.current?.focus();\n        editorOpenedWithEnter.current = false;\n      }\n    }\n  }, [showImagePopover]);\n\n  return (\n    <>\n      {showEditButton && imgEl && canShowEditButton && (\n        <Button\n          id={id}\n          icon\n          variant='primary'\n          ref={setButtonEl}\n          onClick={() => setShowImagePopover(true)}\n          style={{ ...styles.popper }}\n          {...attributes.popper}\n        >\n          <Icon name='pencil-solid' as={IgnoreMouseEventsIcon} />\n        </Button>\n      )}\n      <VisuallyHiddenText aria-live='polite'>{keyCommandText}</VisuallyHiddenText>\n      {showImagePopover && (buttonEl || !canShowEditButton) && imgEl && (\n        <Popover\n          target={canShowEditButton ? buttonEl : imgEl}\n          strategy='fixed'\n          arrow\n          ref={imagePopoverRef}\n          onClick={(e: MouseEvent) => e.stopPropagation()}\n        >\n          <CardHeader\n            actions={\n              <Button variant='simple' icon onClick={onImageChangeCancel} label={t('close')}>\n                <Icon name='times' />\n              </Button>\n            }\n          >\n            <Text variant='h3'>{t('rte_image_settings')}</Text>\n          </CardHeader>\n          <CardContent>\n            <Form\n              as='div'\n              actions={\n                <Flex container={{ justify: 'between' }} item={{ grow: 1 }}>\n                  <Flex item={{ grow: 1 }}>\n                    <Button onClick={onImageChangeCancel}>{t('cancel')}</Button>\n                    <Button onClick={onImageDelete}>{t('delete')}</Button>\n                  </Flex>\n                  <Button variant='primary' onClick={onImageChangeSubmit}>\n                    {t('submit')}\n                  </Button>\n                </Flex>\n              }\n            >\n              <Grid\n                container={{\n                  gap: 2,\n                  areas: customSize\n                    ? '\"desc desc\" \"radio radio\" \"width height\"'\n                    : '\"desc desc\" \"radio radio\"'\n                }}\n              >\n                <Grid item={{ area: 'desc' }}>\n                  <Input\n                    label={t('description')}\n                    value={altText}\n                    onClick={onInputClick}\n                    onChange={onAltTextChange}\n                    onFocus={onInputFocus}\n                    info={t('rte_image_description_info')}\n                    ref={altTextInputRef}\n                  />\n                </Grid>\n                <Grid item={{ area: 'radio' }}>\n                  <Checkbox\n                    checked={customSize}\n                    label={t('rte_image_custom_size')}\n                    onClick={onCheckBoxClick}\n                    onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                      setCustomSize(e.target.checked);\n                    }}\n                  />\n                </Grid>\n                {customSize && (\n                  <>\n                    <Grid item={{ area: 'width' }}>\n                      <NumberInput\n                        label={t('rte_width_in_pixels')}\n                        value={Math.floor(Math.max(width, 1)).toString()}\n                        onClick={onInputClick}\n                        onChange={onWidthChange}\n                      />\n                    </Grid>\n                    <Grid item={{ area: 'height' }}>\n                      <NumberInput\n                        label={t('rte_height_in_pixels')}\n                        value={Math.floor(Math.max(height, 1)).toString()}\n                        onClick={onInputClick}\n                        onChange={onHeightChange}\n                      />\n                    </Grid>\n                  </>\n                )}\n              </Grid>\n            </Form>\n          </CardContent>\n        </Popover>\n      )}\n    </>\n  );\n};\n\nexport default ImageEditor;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAQH,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAmB,MAAM,SAAS,CAAC;AAElD,OAAO,EAUL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAQjC,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CA4MtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAQH,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAmB,MAAM,SAAS,CAAC;AAElD,OAAO,EAUL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAQjC,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAuNtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Editor/Toolbar/AnchorButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import { Button, CardContent, Grid, Icon, registerIcon, Input, Popover, useOuterEvent, useElement, Form, useI18n } from '@pega/cosmos-react-core';
 import * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';
 import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
@@ -16,13 +16,12 @@ const AnchorButton = ({ osx, editor, ...restProps }) => {
     const [url, setUrl] = useState('');
     const [urlMatch, setUrlMatch] = useState(false);
     const [anchorMenu, setAnchorMenu] = useState(false);
+    const [shouldFocusInput, setShouldFocusInput] = useState(false);
     const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);
     const openMenu = (opts = {}) => {
         setAnchorMenu(true);
         if (opts.focusInput) {
-            setTimeout(() => {
-                textInputRef.current?.focus();
-            }, 0);
+            setShouldFocusInput(true);
         }
     };
     const resetMenu = () => {
@@ -97,11 +96,17 @@ const AnchorButton = ({ osx, editor, ...restProps }) => {
                 cancelAnchorCreation();
             }
         };
-        document.addEventListener('keydown', keyCommandListener);
+        editor.getDoc().addEventListener('keydown', keyCommandListener);
         return () => {
-            document.removeEventListener('keydown', keyCommandListener);
+            editor.getDoc().removeEventListener('keydown', keyCommandListener);
         };
     }, []);
+    useLayoutEffect(() => {
+        if (anchorMenu && shouldFocusInput) {
+            textInputRef.current?.focus();
+            setShouldFocusInput(false);
+        }
+    }, [textInputRef.current]);
     return (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { ref: buttonRef, onMouseDown: () => {
                     openMenu();
                 }, onKeyDown: (e) => {
@@ -109,10 +114,10 @@ const AnchorButton = ({ osx, editor, ...restProps }) => {
                         e.preventDefault();
                         openMenu({ focusInput: true });
                     }
-                }, active: isLinkActive(), tooltip: tooltip, label: t('rte_link'), ...restProps, children: _jsx(Icon, { name: 'chain' }) }), _jsx(Popover, { show: anchorMenu, target: buttonRef.current, ref: setPopoverEl, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: cancelAnchorCreation, onMouseDown: cancelAnchorCreation, type: 'button', children: "Cancel" }), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', type: 'submit', variant: 'primary', children: "Apply" })] }), onSubmit: (e) => {
-                            e.preventDefault();
-                            createLink();
-                        }, children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: 'Text', value: selectedText, onClick: preventDef, onChange: (e) => {
+                }, active: isLinkActive(), tooltip: tooltip, label: t('rte_link'), ...restProps, children: _jsx(Icon, { name: 'chain' }) }), _jsx(Popover, { show: anchorMenu, target: buttonRef.current, ref: setPopoverEl, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(Form, { as: 'div', actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: cancelAnchorCreation, onMouseDown: cancelAnchorCreation, type: 'button', children: "Cancel" }), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', variant: 'primary', onClick: (e) => {
+                                        e.preventDefault();
+                                        createLink();
+                                    }, children: "Apply" })] }), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: 'Text', value: selectedText, onClick: preventDef, onChange: (e) => {
                                         setSelectedText(e.target.value);
                                     }, ref: textInputRef }), _jsx(Input, { label: 'URL', value: url, onClick: preventDef, onChange: (e) => {
                                         const urlInput = e.target.value;

package/lib/components/Editor/Toolbar/AnchorButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  useRef,\n  useState,\n  ChangeEvent,\n  useEffect,\n  MouseEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  FormEvent\n} from 'react';\nimport { Editor, EditorSelection } from 'tinymce';\n\nimport {\n  Button,\n  CardContent,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Popover,\n  useOuterEvent,\n  useElement,\n  ForwardProps,\n  Form,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n  osx: boolean;\n  editor: Editor;\n}\n\nconst AnchorButton: FC<AnchorButtonProps & ForwardProps> = ({ osx, editor, ...restProps }) => {\n  const t = useI18n();\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const textInputRef = useRef<HTMLInputElement>(null);\n  const urlInputRef = useRef<HTMLInputElement>(null);\n  const [popoverEl, setPopoverEl] = useElement();\n  const [selectedText, setSelectedText] = useState('');\n  const [selection, setSelection] = useState<EditorSelection | undefined>();\n  const [url, setUrl] = useState('');\n  const [urlMatch, setUrlMatch] = useState(false);\n  const [anchorMenu, setAnchorMenu] = useState(false);\n  const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n  const openMenu = (opts: { focusInput?: boolean } = {}) => {\n    setAnchorMenu(true);\n    if (opts.focusInput) {\n      setTimeout(() => {\n        textInputRef.current?.focus();\n      }, 0);\n    }\n  };\n\n  const resetMenu = () => {\n    setSelection(undefined);\n    setSelectedText('');\n    setUrl('');\n    setUrlMatch(true);\n    setAnchorMenu(false);\n  };\n\n  useOuterEvent('mousedown', [popoverEl], () => {\n    if (anchorMenu) {\n      resetMenu();\n    }\n  });\n\n  const createLink = () => {\n    if (url && selection) {\n      editor.focus();\n      editor.selection = selection;\n      if (selection.getNode().tagName === 'A') {\n        const anchorEl = editor.selection.getNode();\n        anchorEl.setAttribute('href', url);\n        anchorEl.textContent = selectedText;\n      } else {\n        editor.insertContent(\n          `<a href='${\n            new URL(/^[a-z][a-z0-9.+-]*:/i.test(url) ? url : `https:${url}`).href\n          }'>${selectedText}</a>`\n        );\n      }\n      resetMenu();\n    }\n  };\n\n  useEffect(() => {\n    if (anchorMenu) {\n      if (editor.selection) {\n        const selectedEl = editor.selection.getNode();\n        if (selectedEl?.tagName === 'A') {\n          setSelectedText(selectedEl.textContent || '');\n          setUrl(selectedEl.getAttribute('href') || '');\n        } else {\n          setSelectedText(editor.selection.getContent({ format: 'text' }));\n        }\n        setSelection({ ...editor.selection });\n      }\n    } else {\n      resetMenu();\n    }\n  }, [anchorMenu]);\n\n  const preventDef = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const isLinkActive = () => {\n    return editor.selection.getNode().tagName === 'A' && editor.hasFocus();\n  };\n\n  const cancelAnchorCreation = (event?: KeyboardEvent | MouseEvent) => {\n    event?.preventDefault();\n    if (\n      ((event?.type === 'keydown' && (event as KeyboardEvent)?.key === 'Enter') ||\n        event?.type === 'mousedown' ||\n        !event) &&\n      popoverEl\n    ) {\n      resetMenu();\n      buttonRef.current?.focus();\n    }\n  };\n\n  useEffect(() => {\n    const keyCommandListener = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey) && editor.hasFocus()) {\n        e.preventDefault();\n        openMenu({ focusInput: true });\n      }\n      if (e.key === 'Escape') {\n        cancelAnchorCreation();\n      }\n    };\n\n    document.addEventListener('keydown', keyCommandListener);\n\n    return () => {\n      document.removeEventListener('keydown', keyCommandListener);\n    };\n  }, []);\n\n  return (\n    <>\n      <ToolbarButton\n        ref={buttonRef}\n        onMouseDown={() => {\n          openMenu();\n        }}\n        onKeyDown={(e: ReactKeyboardEvent) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            openMenu({ focusInput: true });\n          }\n        }}\n        active={isLinkActive()}\n        tooltip={tooltip}\n        label={t('rte_link')}\n        {...restProps}\n      >\n        <Icon name='chain' />\n      </ToolbarButton>\n      <Popover show={anchorMenu} target={buttonRef.current} ref={setPopoverEl} placement='bottom'>\n        <CardContent>\n          <Form\n            actions={\n              <>\n                <Button\n                  variant='secondary'\n                  onKeyDown={cancelAnchorCreation}\n                  onMouseDown={cancelAnchorCreation}\n                  type='button'\n                >\n                  Cancel\n                </Button>\n                <Button disabled={!url || !urlMatch} name='apply' type='submit' variant='primary'>\n                  Apply\n                </Button>\n              </>\n            }\n            onSubmit={(e: FormEvent) => {\n              e.preventDefault();\n              createLink();\n            }}\n          >\n            <Grid container={{ rowGap: 2 }}>\n              <Input\n                label='Text'\n                value={selectedText}\n                onClick={preventDef}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                  setSelectedText(e.target.value);\n                }}\n                ref={textInputRef}\n              />\n              <Input\n                label='URL'\n                value={url}\n                onClick={preventDef}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                  const urlInput = e.target.value;\n                  setUrl(urlInput);\n\n                  if (!urlMatch) {\n                    try {\n                      // eslint-disable-next-line no-new\n                      new URL(\n                        /^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `https:${urlInput}`\n                      );\n                      setUrlMatch(true);\n                    } catch {\n                      setUrlMatch(false);\n                    }\n                  }\n                }}\n                onBlur={() => {\n                  try {\n                    // eslint-disable-next-line no-new\n                    new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `https:${url}`);\n                    setUrlMatch(true);\n                  } catch {\n                    setUrlMatch(false);\n                  }\n                }}\n                info={!urlMatch ? t('rte_invalid_url') : ''}\n                status={!urlMatch ? 'error' : undefined}\n                ref={urlInputRef}\n              />\n            </Grid>\n          </Form>\n        </CardContent>\n      </Popover>\n    </>\n  );\n};\n\nexport default AnchorButton;\n"]}
+{"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  useRef,\n  useState,\n  ChangeEvent,\n  useEffect,\n  MouseEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  useLayoutEffect\n} from 'react';\nimport { Editor, EditorSelection } from 'tinymce';\n\nimport {\n  Button,\n  CardContent,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Popover,\n  useOuterEvent,\n  useElement,\n  ForwardProps,\n  Form,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n  osx: boolean;\n  editor: Editor;\n}\n\nconst AnchorButton: FC<AnchorButtonProps & ForwardProps> = ({ osx, editor, ...restProps }) => {\n  const t = useI18n();\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const textInputRef = useRef<HTMLInputElement>(null);\n  const urlInputRef = useRef<HTMLInputElement>(null);\n  const [popoverEl, setPopoverEl] = useElement();\n  const [selectedText, setSelectedText] = useState('');\n  const [selection, setSelection] = useState<EditorSelection | undefined>();\n  const [url, setUrl] = useState('');\n  const [urlMatch, setUrlMatch] = useState(false);\n  const [anchorMenu, setAnchorMenu] = useState(false);\n  const [shouldFocusInput, setShouldFocusInput] = useState(false);\n  const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n  const openMenu = (opts: { focusInput?: boolean } = {}) => {\n    setAnchorMenu(true);\n    if (opts.focusInput) {\n      setShouldFocusInput(true);\n    }\n  };\n\n  const resetMenu = () => {\n    setSelection(undefined);\n    setSelectedText('');\n    setUrl('');\n    setUrlMatch(true);\n    setAnchorMenu(false);\n  };\n\n  useOuterEvent('mousedown', [popoverEl], () => {\n    if (anchorMenu) {\n      resetMenu();\n    }\n  });\n\n  const createLink = () => {\n    if (url && selection) {\n      editor.focus();\n      editor.selection = selection;\n      if (selection.getNode().tagName === 'A') {\n        const anchorEl = editor.selection.getNode();\n        anchorEl.setAttribute('href', url);\n        anchorEl.textContent = selectedText;\n      } else {\n        editor.insertContent(\n          `<a href='${\n            new URL(/^[a-z][a-z0-9.+-]*:/i.test(url) ? url : `https:${url}`).href\n          }'>${selectedText}</a>`\n        );\n      }\n      resetMenu();\n    }\n  };\n\n  useEffect(() => {\n    if (anchorMenu) {\n      if (editor.selection) {\n        const selectedEl = editor.selection.getNode();\n        if (selectedEl?.tagName === 'A') {\n          setSelectedText(selectedEl.textContent || '');\n          setUrl(selectedEl.getAttribute('href') || '');\n        } else {\n          setSelectedText(editor.selection.getContent({ format: 'text' }));\n        }\n        setSelection({ ...editor.selection });\n      }\n    } else {\n      resetMenu();\n    }\n  }, [anchorMenu]);\n\n  const preventDef = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const isLinkActive = () => {\n    return editor.selection.getNode().tagName === 'A' && editor.hasFocus();\n  };\n\n  const cancelAnchorCreation = (event?: KeyboardEvent | MouseEvent) => {\n    event?.preventDefault();\n    if (\n      ((event?.type === 'keydown' && (event as KeyboardEvent)?.key === 'Enter') ||\n        event?.type === 'mousedown' ||\n        !event) &&\n      popoverEl\n    ) {\n      resetMenu();\n      buttonRef.current?.focus();\n    }\n  };\n\n  useEffect(() => {\n    const keyCommandListener = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey) && editor.hasFocus()) {\n        e.preventDefault();\n        openMenu({ focusInput: true });\n      }\n      if (e.key === 'Escape') {\n        cancelAnchorCreation();\n      }\n    };\n\n    editor.getDoc().addEventListener('keydown', keyCommandListener);\n\n    return () => {\n      editor.getDoc().removeEventListener('keydown', keyCommandListener);\n    };\n  }, []);\n\n  useLayoutEffect(() => {\n    if (anchorMenu && shouldFocusInput) {\n      textInputRef.current?.focus();\n      setShouldFocusInput(false);\n    }\n  }, [textInputRef.current]);\n\n  return (\n    <>\n      <ToolbarButton\n        ref={buttonRef}\n        onMouseDown={() => {\n          openMenu();\n        }}\n        onKeyDown={(e: ReactKeyboardEvent) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            openMenu({ focusInput: true });\n          }\n        }}\n        active={isLinkActive()}\n        tooltip={tooltip}\n        label={t('rte_link')}\n        {...restProps}\n      >\n        <Icon name='chain' />\n      </ToolbarButton>\n      <Popover show={anchorMenu} target={buttonRef.current} ref={setPopoverEl} placement='bottom'>\n        <CardContent>\n          <Form\n            as='div'\n            actions={\n              <>\n                <Button\n                  variant='secondary'\n                  onKeyDown={cancelAnchorCreation}\n                  onMouseDown={cancelAnchorCreation}\n                  type='button'\n                >\n                  Cancel\n                </Button>\n                <Button\n                  disabled={!url || !urlMatch}\n                  name='apply'\n                  variant='primary'\n                  onClick={(e: MouseEvent) => {\n                    e.preventDefault();\n                    createLink();\n                  }}\n                >\n                  Apply\n                </Button>\n              </>\n            }\n          >\n            <Grid container={{ rowGap: 2 }}>\n              <Input\n                label='Text'\n                value={selectedText}\n                onClick={preventDef}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                  setSelectedText(e.target.value);\n                }}\n                ref={textInputRef}\n              />\n              <Input\n                label='URL'\n                value={url}\n                onClick={preventDef}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                  const urlInput = e.target.value;\n                  setUrl(urlInput);\n\n                  if (!urlMatch) {\n                    try {\n                      // eslint-disable-next-line no-new\n                      new URL(\n                        /^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `https:${urlInput}`\n                      );\n                      setUrlMatch(true);\n                    } catch {\n                      setUrlMatch(false);\n                    }\n                  }\n                }}\n                onBlur={() => {\n                  try {\n                    // eslint-disable-next-line no-new\n                    new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `https:${url}`);\n                    setUrlMatch(true);\n                  } catch {\n                    setUrlMatch(false);\n                  }\n                }}\n                info={!urlMatch ? t('rte_invalid_url') : ''}\n                status={!urlMatch ? 'error' : undefined}\n                ref={urlInputRef}\n              />\n            </Grid>\n          </Form>\n        </CardContent>\n      </Popover>\n    </>\n  );\n};\n\nexport default AnchorButton;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAgBjC,OAAO,EAAa,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEjF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA0B/C,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;AAwFD,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAyI7B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAiBjC,OAAO,EAAa,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEjF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA0B/C,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;AAwFD,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAqI7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Icon, useArrows, useI18n, defaultThemeProp, registerIcon } from '@pega/cosmos-react-core';
+import { Flex, Icon, useArrows, useI18n, defaultThemeProp, registerIcon, useOS } from '@pega/cosmos-react-core';
 import * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';
 import * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';
 import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
@@ -73,7 +73,7 @@ function createActiveFeaturesMap(features) {
 }
 const Toolbar = ({ features, sticky, editor, customActions }) => {
     const t = useI18n();
-    const [osx, setOsx] = useState(false);
+    const { macintosh: osx } = useOS();
     const toolbarRef = useRef(null);
     useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });
     const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));
@@ -88,10 +88,6 @@ const Toolbar = ({ features, sticky, editor, customActions }) => {
     useEffect(() => {
         setActiveFeatures(createActiveFeaturesMap(features));
     }, [features]);
-    useEffect(() => {
-        if (navigator.appVersion.includes('Mac'))
-            setOsx(true);
-    }, []);
     const getActiveStyles = useCallback(() => {
         if (editor.hasFocus()) {
             setActiveStyles({

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,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,qBAAqB,gIA6CjC,CAAC;AAIF,QAAA,MAAM,oBAAoB,gIAgBxB,CAAC;AAIH,eAAO,MAAM,uBAAuB,gIAUlC,CAAC;AAEH,eAAO,MAAM,oBAAoB,yGAWhC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,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,qBAAqB,gIAsCjC,CAAC;AAIF,QAAA,MAAM,oBAAoB,gIAqBzB,CAAC;AAIF,eAAO,MAAM,uBAAuB,gIAUlC,CAAC;AAEH,eAAO,MAAM,oBAAoB,yGAWhC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -34,34 +34,30 @@ export const StyledEditorContainer = styled.div(({ containerHeight, readOnly, to
       &:hover {
         cursor: text;
       }
-      .mce-offscreen-selection {
-        border: 0;
-        clip: rect(0 0 0 0);
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-      }
 
       ${listStyles}
     `;
 });
 StyledEditorContainer.defaultProps = defaultThemeProp;
-const StyledRichTextEditor = styled.div(({ toolbar, theme }) => {
+const StyledRichTextEditor = styled.div(({ toolbar, theme, focused }) => {
     return css `
-    background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};
-    width: 100%;
-    position: relative;
+      background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};
+      width: 100%;
+      position: relative;
 
-    &:focus-within:not([disabled]) {
-      border-color: ${theme.components['form-control'][':focus']['border-color']};
-      box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
-    }
+      ${focused &&
+        css `
+        &:not([disabled]) {
+          border-color: ${theme.components['form-control'][':focus']['border-color']};
+          box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
+        }
+      `}
 
-    /* Override default styling of slate placeholder. */
+      /* Override default styling of slate placeholder. */
     span[contenteditable='false'] {
-      opacity: ${theme.base.transparency['transparent-3']} !important;
-    }
-  `;
+        opacity: ${theme.base.transparency['transparent-3']} !important;
+      }
+    `;
 });
 StyledRichTextEditor.defaultProps = defaultThemeProp;
 export const StyledRichTextFormField = styled.div(({ toolbar }) => {

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

@@ -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,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAW9E,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;QACN,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;kBACS,eAAe;OAC1B;;QAEC,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;UACC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;wBACa,eAAe,CAAC,GAAG;SAClC;;UAEC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;wBACa,eAAe,CAAC,GAAG;SAClC;OACF;;QAEC,CAAC,QAAQ,IAAI,OAAO,CAAC;QACvB,GAAG,CAAA;mBACU,KAAK,CAAC,IAAI,CAAC,OAAO;OAC9B;;QAEC,eAAe;QACjB,GAAG,CAAA;;OAEF;;;;;;;;;;;;;QAaC,UAAU;KACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,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,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3F,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,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';\nimport { listStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';\n\nimport { RichTextEditorProps } from './RichTextEditor.types';\n\ninterface StyledRichTextEditorProps {\n  toolbar?: boolean;\n  focused?: boolean;\n  readOnly?: boolean;\n  containerHeight?: RichTextEditorProps['height'];\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      .mce-offscreen-selection {\n        border: 0;\n        clip: rect(0 0 0 0);\n        overflow: hidden;\n        padding: 0;\n        position: absolute;\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 default StyledRichTextEditor;\n"]}
+{"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,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAW9E,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;QACN,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;kBACS,eAAe;OAC1B;;QAEC,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;UACC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;wBACa,eAAe,CAAC,GAAG;SAClC;;UAEC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;wBACa,eAAe,CAAC,GAAG;SAClC;OACF;;QAEC,CAAC,QAAQ,IAAI,OAAO,CAAC;QACvB,GAAG,CAAA;mBACU,KAAK,CAAC,IAAI,CAAC,OAAO;OAC9B;;QAEC,eAAe;QACjB,GAAG,CAAA;;OAEF;;;;;;QAMC,UAAU;KACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAA;0BACY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,aAAa;;;;QAIpF,OAAO;QACT,GAAG,CAAA;;0BAEiB,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;wBAC5D,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;OAEzE;;;;mBAIY,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;KAEtD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3F,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,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';\nimport { listStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';\n\nimport { RichTextEditorProps } from './RichTextEditor.types';\n\ninterface StyledRichTextEditorProps {\n  toolbar?: boolean;\n  focused?: boolean;\n  readOnly?: boolean;\n  containerHeight?: RichTextEditorProps['height'];\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>(\n  ({ toolbar, theme, focused }) => {\n    return css`\n      background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};\n      width: 100%;\n      position: relative;\n\n      ${focused &&\n      css`\n        &: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\n      /* Override default styling of slate placeholder. */\n    span[contenteditable='false'] {\n        opacity: ${theme.base.transparency['transparent-3']} !important;\n      }\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 default StyledRichTextEditor;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-rte",
-  "version": "3.0.0-dev.7.0",
+  "version": "3.0.0-dev.9.1",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,15 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.7.0",
+    "@pega/cosmos-react-core": "3.0.0-dev.9.1",
     "@popperjs/core": "^2.11.0",
+    "@types/marked": "^4.0.2",
+    "@types/parse5": "^6.0.0",
+    "@types/react": "^16.14.24 || ^17.0.38",
+    "@types/react-dom": "^16.9.14 || ^17.0.11",
+    "@types/styled-components": "^5.1.7",
+    "@types/stylis": "^4.0.2",
+    "@types/tinymce": "^4.6.4",
     "marked": "^4.0.12",
     "parse5": "^6.0.1",
     "polished": "^4.1.0",
@@ -32,6 +39,7 @@
     "slate-history": "^0.66.0",
     "slate-react": "^0.72.1",
     "styled-components": "^5.2.0",
+    "stylis": "^4.0.13",
     "tinymce": "^5.10.2"
   },
   "devDependencies": {
@@ -42,9 +50,6 @@
     "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@storybook/theming": "^6.4.19",
-    "@types/marked": "^4.0.2",
-    "@types/parse5": "^6.0.0",
-    "@types/tinymce": "^4.6.4",
     "enzyme": "^3.11.0",
     "typescript": "~4.6.2"
   }