@pega/cosmos-react-rte 5.0.0-dev.4.9 → 5.0.0-dev.6.0

package/lib/components/Editor/Editor.js

@@ -0,0 +1,366 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import tinymce from 'tinymce/tinymce';
+import 'tinymce/icons/default';
+import 'tinymce/themes/silver';
+import 'tinymce/plugins/advlist';
+import 'tinymce/plugins/lists';
+import 'tinymce/plugins/autolink';
+import 'tinymce/models/dom';
+import { forwardRef, useEffect, useRef, useState, useLayoutEffect, useImperativeHandle, useCallback, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { compile, serialize, stringify } from 'stylis';
+import { stripUnit } from 'polished';
+import { createUID, FormControl, FormField, useAfterInitialEffect, useTheme, useUID, useI18n, useConsolidatedRef, defaultThemeProp, useAutoResize, useConfiguration, useTestIds, withTestIds, documentIsAvailable, getActiveElement } from '@pega/cosmos-react-core';
+import { getHtmlStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';
+import { createGlobalBodyStyles, createGlobalRootStyles, globalSpacingStyles } from '@pega/cosmos-react-core/lib/styles/GlobalStyle';
+import StyledRichTextEditor from '../RichTextEditor/RichTextEditor.styles';
+import Toolbar from './Toolbar/Toolbar';
+import EditorContext from './Editor.context';
+import { getTextFormats } from './Toolbar/TextSelect';
+import ImageEditor, { imgHoverClass } from './ImageEditor';
+import { offscreenSelectionStyles, placeholderStyles, mceContentBodyStyles, StyledEditorContainer } from './Editor.styles';
+import { getEditorTestIds } from './Editor.test-ids';
+const getFileFromUrl = async (url, name) => {
+    const response = await fetch(url);
+    const data = await response.blob();
+    return new File([data], name, {
+        type: data.type
+    });
+};
+export const getImageStyles = (theme) => {
+    return `
+    img:hover,
+    img.${imgHoverClass} {
+      box-shadow: 0 0 0 0.06125rem ${theme.base.palette['primary-background']},
+        0 0 0 0.125rem ${theme.base.palette.interactive}, 0 0 0 0.25rem rgba(0, 118, 209, 0.3);
+    }
+  `;
+};
+export const StyledInnerEditor = styled.div(({ theme, showPlaceholder }) => {
+    return css `
+      ${showPlaceholder &&
+        css `
+        ::before {
+          color: ${theme.base.colors.slate.medium};
+          position: absolute;
+          content: attr(data-mce-placeholder);
+        }
+      `}
+    `;
+});
+StyledInnerEditor.defaultProps = defaultThemeProp;
+const Editor = forwardRef(function Editor(props, ref) {
+    const { components: { 'text-area': { 'min-height': textAreaMinHeight } } } = useTheme();
+    const theme = useTheme();
+    const { styleSheetTarget } = useConfiguration();
+    const [editor, setEditor] = useState();
+    const [focused, setFocused] = useState(false);
+    const t = useI18n();
+    const uid = useUID();
+    const labelId = useUID();
+    const editorRef = useConsolidatedRef(ref);
+    const tinyMceRef = useRef(null);
+    const tinyMceContainerRef = useRef(null);
+    const initialized = useRef(false);
+    const { testId, id = uid, toolbar = [], label, labelHidden, info, status, required, disabled, readOnly, onChange, onKeyDown, onFocus, onBlur, onImageAdded, onInit, defaultValue, customComponents = [], height, customActions, placeholder, children, spellcheck = true, additionalInfo, ...restProps } = props;
+    const testIds = useTestIds(testId, getEditorTestIds);
+    const baseHeight = {
+        min: height?.min ?? stripUnit(textAreaMinHeight) * 16,
+        max: height?.max ?? undefined
+    };
+    const getHeight = (type) => {
+        if (typeof baseHeight === 'number') {
+            return stripUnit(baseHeight);
+        }
+        if (baseHeight[type]) {
+            return stripUnit(baseHeight[type]);
+        }
+        return undefined;
+    };
+    const imagesEnabled = toolbar.includes('images');
+    const maxHeight = getHeight('max');
+    const minHeight = getHeight('min');
+    const [autoResizeRef, resizeEditor] = useAutoResize(maxHeight, minHeight);
+    const formFieldRef = useRef(null);
+    const value = useRef(defaultValue);
+    const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;
+    const processPastedImgUrls = async (infoArr) => {
+        const files = await Promise.all(infoArr.map(({ id: imgId, url }) => getFileFromUrl(url, imgId)));
+        files.forEach((file, i) => {
+            onImageAdded?.(file, infoArr[i].id);
+        });
+    };
+    const pastePreprocess = (plugin, args) => {
+        const isImg = args.content.includes('<img');
+        if (!imagesEnabled && isImg) {
+            args.content = args.content.replace(/<img(.*)\/>/g, '');
+        }
+        if (imagesEnabled && isImg) {
+            const pastedHtml = new DOMParser().parseFromString(args.content, 'text/html').body;
+            const imgInfo = [];
+            pastedHtml.querySelectorAll('img').forEach(imgEl => {
+                const imgId = createUID();
+                const url = imgEl.src;
+                imgInfo.push({ id: imgId, url });
+                imgEl.setAttribute('id', imgId);
+                imgEl.setAttribute('src', '');
+            });
+            args.content = pastedHtml.innerHTML;
+            processPastedImgUrls(imgInfo);
+        }
+    };
+    useImperativeHandle(editorRef, () => ({
+        focus: () => {
+            editor?.focus();
+        },
+        getPlainText: () => {
+            return editor ? editor.getContent({ format: 'text' }) : '';
+        },
+        getRichText: () => {
+            return editor ? JSON.stringify(editor.getContent({ format: 'raw' })) : '';
+        },
+        getHtml: () => {
+            return editor ? editor.getContent({ format: 'html' }) : '';
+        },
+        clear: () => {
+            editor?.setContent('');
+        },
+        appendImage: ({ src, alt }, imageId) => {
+            if (editor) {
+                const editorEl = editor.getDoc();
+                const imageEl = editorEl.querySelector(`#${imageId}`);
+                if (imageEl) {
+                    imageEl.setAttribute('src', src);
+                    imageEl.setAttribute('alt', alt);
+                    resizeEditor();
+                }
+            }
+        },
+        insertText: (text) => {
+            let activeElement = null;
+            if (documentIsAvailable) {
+                activeElement = getActiveElement();
+            }
+            editor?.insertContent(text);
+            if (activeElement)
+                activeElement.focus();
+        },
+        setCursorLocationToStart: () => {
+            editor?.selection.setCursorLocation();
+            editor?.selection.getNode().scrollIntoView();
+        },
+        insertHtml: (html, overwrite = false) => {
+            let activeElement = null;
+            if (documentIsAvailable) {
+                activeElement = getActiveElement();
+            }
+            if (overwrite) {
+                editor?.setContent('');
+            }
+            editor?.insertContent(html);
+            if (activeElement)
+                activeElement.focus();
+        },
+        getEditor: () => {
+            return editor;
+        },
+        element: formFieldRef.current || undefined
+    }), [editor]);
+    useLayoutEffect(() => {
+        if (!tinyMceRef.current || !tinyMceContainerRef.current)
+            return;
+        const styles = serialize(compile(getHtmlStyles(theme)), stringify);
+        const imageStyles = serialize(compile(getImageStyles(theme)), stringify);
+        tinymce
+            .init({
+            readonly: readOnly || disabled,
+            skin: false,
+            target: tinyMceRef.current,
+            toolbar: false,
+            min_height: 60,
+            height: 60,
+            menubar: false,
+            plugins: 'lists advlist autolink',
+            paste_block_drop: true,
+            paste_data_images: true,
+            lists_indent_on_tab: true,
+            icons: '',
+            branding: false,
+            elementpath: false,
+            placeholder,
+            content_css: false,
+            browser_spellcheck: spellcheck,
+            paste_preprocess: pastePreprocess,
+            content_style: `${createGlobalRootStyles(theme)} ${globalSpacingStyles} ${createGlobalBodyStyles(theme)} body { min-height: 3rem; padding: ${theme.base.spacing}; } html { overflow: hidden; } ${offscreenSelectionStyles} ${mceContentBodyStyles} ${placeholderStyles} ${imageStyles} ${styles}`,
+            init_instance_callback: initializedEditor => {
+                const iframeWindow = (tinyMceContainerRef.current?.querySelector('iframe')).contentWindow;
+                const editorCustomElements = iframeWindow?.customElements;
+                if (editorCustomElements) {
+                    customComponents.forEach(({ name, createCustomElement: customElementCreator, style }) => {
+                        if (!editorCustomElements.get(name)) {
+                            editorCustomElements.define(name, customElementCreator(iframeWindow));
+                        }
+                        if (style) {
+                            const styleEl = document.createElement('style');
+                            styleEl.innerText = style;
+                            initializedEditor.getDoc().head.appendChild(styleEl);
+                        }
+                    });
+                }
+            },
+            extended_valid_elements: `${customComponents
+                .map(comp => `${comp.name}${comp.extensionAttributes ? `[${comp.extensionAttributes.join('|')}]` : ''}`)
+                .join(',')}`,
+            custom_elements: customComponents.map(comp => `~${comp.name}`).join('~,'),
+            setup: editorSettings => {
+                editorSettings.on('keydown', e => {
+                    onKeyDown?.(e);
+                });
+                getTextFormats().forEach((format, i) => {
+                    editorSettings.addShortcut(`meta+alt+${i}`, `${t('rte_change_text_format')} ${format.text}`, () => {
+                        editorSettings.execCommand('FormatBlock', false, format.type);
+                    });
+                });
+                editorSettings.addShortcut('meta+shift+b', t('rte_bold'), () => {
+                    editorSettings.execCommand('Bold');
+                });
+                editorSettings.addShortcut('meta+shift+i', t('rte_italic'), () => {
+                    editorSettings.execCommand('Italic');
+                });
+                editorSettings.addShortcut('meta+shift+x', t('rte_strike_through'), () => {
+                    editorSettings.execCommand('Strikethrough');
+                });
+                editorSettings.addShortcut('meta+shift+l', t('rte_toggle_unordered_list'), () => {
+                    editorSettings.execCommand('InsertUnorderedList');
+                });
+                editorSettings.addShortcut('alt+m', t('rte_indent_selection'), () => {
+                    editorSettings.execCommand('Indent');
+                });
+                editorSettings.addShortcut('alt+shift+m', t('rte_unindent_selection'), () => {
+                    editorSettings.execCommand('Outdent');
+                });
+                customActions?.forEach(action => {
+                    if (action.shortcut) {
+                        editorSettings.addShortcut(action.shortcut.pattern, action.shortcut.description, () => {
+                            action.shortcut?.command(editorSettings);
+                        });
+                    }
+                });
+            }
+        })
+            .then(tinymceEditors => {
+            setEditor(tinymceEditors[0]);
+            tinymceEditors[0].editorContainer?.setAttribute('style', '');
+            const iframe = tinyMceContainerRef.current?.querySelector('iframe');
+            if (iframe) {
+                const globalStyles = styleSheetTarget?.querySelectorAll('[data-cosmos-global-style]') ??
+                    [];
+                const extraStyles = document.querySelectorAll('[data-cosmos-global-style]') ?? [];
+                const iframeContentHead = iframe?.contentDocument?.querySelector('head');
+                [...globalStyles, ...extraStyles].forEach(sheet => {
+                    iframeContentHead?.appendChild(sheet.cloneNode(true));
+                });
+                autoResizeRef.current = iframe;
+                resizeEditor();
+            }
+        });
+    }, []);
+    useEffect(() => {
+        if (editor) {
+            editor.options.set('paste_preprocess', pastePreprocess);
+        }
+    }, [imagesEnabled]);
+    useEffect(() => {
+        if (!editor || initialized.current)
+            return;
+        initialized.current = true;
+        onInit?.(editor);
+    }, [editor, onInit]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const onChangeEvents = ['input', 'paste', 'FormatApply', 'FormatRemove', 'ExecCommand'];
+        const onEditorKeyDown = () => {
+            resizeEditor();
+        };
+        const onEditorChange = (event) => {
+            if (event.type !== 'execcommand' || event.command !== 'mceFocus') {
+                onChange?.(editor);
+            }
+        };
+        const onEditorFocus = () => {
+            setFocused(true);
+            onFocus?.();
+        };
+        const onEditorBlur = () => {
+            setFocused(false);
+            onBlur?.();
+        };
+        onChangeEvents.forEach(event => {
+            editor.on(event, onEditorChange);
+        });
+        editor.on('keydown', onEditorKeyDown);
+        editor.on('paste', resizeEditor);
+        editor.on('focus', onEditorFocus);
+        editor.on('blur', onEditorBlur);
+        return () => {
+            onChangeEvents.forEach(event => {
+                editor.off(event, onEditorChange);
+            });
+            editor.off('keydown', onEditorKeyDown);
+            editor.off('paste', resizeEditor);
+            editor.off('focus', onEditorFocus);
+            editor.off('blur', onEditorBlur);
+        };
+    }, [editor, onFocus, onBlur]);
+    useAfterInitialEffect(() => {
+        editor?.mode.set(readOnly || disabled ? 'readonly' : 'design');
+    }, [readOnly, disabled]);
+    const addImage = useCallback((image) => {
+        if (editor) {
+            const imageId = createUID();
+            editor.insertContent(`<br/><img src='' id='${imageId}' style="max-width: 100%;"/><br/>`);
+            onImageAdded?.(image, imageId);
+        }
+    }, [editor]);
+    const ctx = useMemo(() => ({ addImage, editor: editor || {} }), [editor, addImage]);
+    useEffect(() => {
+        const onEditorDrop = (e) => {
+            e.preventDefault();
+            if (e.dataTransfer) {
+                Array.from(e.dataTransfer.files).forEach(file => {
+                    if (file.type.includes('image') && imagesEnabled) {
+                        addImage(file);
+                    }
+                });
+            }
+        };
+        editor?.on('drop', onEditorDrop);
+        const body = editor?.getDoc().body;
+        const resizeObserver = new ResizeObserver(() => {
+            resizeEditor();
+        });
+        if (body) {
+            resizeObserver.observe(body);
+        }
+        return () => {
+            editor?.off('drop', onEditorDrop);
+            resizeObserver.disconnect();
+        };
+    }, [editor, resizeEditor]);
+    return (_jsxs(EditorContext.Provider, { value: ctx, children: [_jsx(FormField, { testId: testIds, toolbar: renderToolbar, label: 
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+                _jsx("span", { onClick: () => {
+                        editor?.focus();
+                    }, children: label }), labelFor: '', labelId: labelId, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onFocus: (e) => {
+                    if (e.target === formFieldRef.current && !disabled) {
+                        editor?.focus();
+                    }
+                }, ref: formFieldRef, tabIndex: disabled ? -1 : undefined, additionalInfo: additionalInfo, children: _jsxs(FormControl, { ...restProps, ref: editorRef, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, focused: focused, tabIndex: readOnly ? 0 : undefined, children: [_jsxs(StyledEditorContainer, { onClick: () => {
+                                if (!disabled) {
+                                    editor?.focus();
+                                }
+                            }, ref: tinyMceContainerRef, children: [_jsx("textarea", { id: id, value: value.current || '', onChange: () => { }, "aria-label": `${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`, "aria-labelledby": labelId, ref: tinyMceRef }), tinyMceContainerRef.current && editor && !readOnly && (_jsx(ImageEditor, { editor: editor, editorEl: tinyMceContainerRef.current, onChange: () => onChange?.(editor) }))] }), renderToolbar && (_jsx(Toolbar, { testId: testIds, features: toolbar, editor: editor, customActions: customActions }))] }) }), children] }));
+});
+export default withTestIds(Editor, getEditorTestIds);
+//# sourceMappingURL=Editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import tinymce from 'tinymce/tinymce';\nimport type { Editor as TinymceEditor, EditorEvent } from 'tinymce/tinymce';\nimport 'tinymce/icons/default';\nimport 'tinymce/themes/silver';\nimport 'tinymce/plugins/advlist';\nimport 'tinymce/plugins/lists';\nimport 'tinymce/plugins/autolink';\nimport 'tinymce/models/dom';\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useLayoutEffect,\n  useImperativeHandle,\n  useCallback,\n  useMemo\n} from 'react';\nimport type { FC, PropsWithoutRef, FocusEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { compile, serialize, stringify } from 'stylis';\nimport { stripUnit } from 'polished';\n\nimport {\n  createUID,\n  FormControl,\n  FormField,\n  useAfterInitialEffect,\n  useTheme,\n  useUID,\n  useI18n,\n  useConsolidatedRef,\n  defaultThemeProp,\n  useAutoResize,\n  useConfiguration,\n  useTestIds,\n  withTestIds,\n  documentIsAvailable,\n  getActiveElement\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } 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 from '../RichTextEditor/RichTextEditor.styles';\n\nimport Toolbar from './Toolbar/Toolbar';\nimport EditorContext from './Editor.context';\nimport { getTextFormats } from './Toolbar/TextSelect';\nimport type { EditorProps, EditorState } from './Editor.types';\nimport ImageEditor, { imgHoverClass } from './ImageEditor';\nimport {\n  offscreenSelectionStyles,\n  placeholderStyles,\n  mceContentBodyStyles,\n  StyledEditorContainer\n} from './Editor.styles';\nimport { getEditorTestIds } from './Editor.test-ids';\n\ntype ImageInfoArray = { id: string; url: string }[];\n\nconst getFileFromUrl = async (url: string, name: string) => {\n  const response = await fetch(url);\n  const data = await response.blob();\n  return new File([data], name, {\n    type: data.type\n  });\n};\n\nexport const getImageStyles = (theme: DefaultTheme) => {\n  return `\n    img:hover,\n    img.${imgHoverClass} {\n      box-shadow: 0 0 0 0.06125rem ${theme.base.palette['primary-background']},\n        0 0 0 0.125rem ${theme.base.palette.interactive}, 0 0 0 0.25rem rgba(0, 118, 209, 0.3);\n    }\n  `;\n};\n\nexport const StyledInnerEditor = styled.div<{ showPlaceholder: boolean }>(\n  ({ theme, showPlaceholder }) => {\n    return css`\n      ${showPlaceholder &&\n      css`\n        ::before {\n          color: ${theme.base.colors.slate.medium};\n          position: absolute;\n          content: attr(data-mce-placeholder);\n        }\n      `}\n    `;\n  }\n);\n\nStyledInnerEditor.defaultProps = defaultThemeProp;\n\nconst Editor: FC<EditorProps & ForwardProps> = forwardRef(function Editor(\n  props: PropsWithoutRef<EditorProps> & ForwardProps,\n  ref: EditorProps['ref']\n) {\n  const {\n    components: {\n      'text-area': { 'min-height': textAreaMinHeight }\n    }\n  } = useTheme();\n  const theme = useTheme();\n  const { styleSheetTarget } = useConfiguration();\n  const [editor, setEditor] = useState<TinymceEditor>();\n  const [focused, setFocused] = useState(false);\n  const t = useI18n();\n  const uid = useUID();\n  const labelId = useUID();\n  const editorRef = useConsolidatedRef(ref);\n  const tinyMceRef = useRef<HTMLTextAreaElement>(null);\n  const tinyMceContainerRef = useRef<HTMLDivElement>(null);\n  const initialized = useRef(false);\n\n  const {\n    testId,\n    id = uid,\n    toolbar = [],\n    label,\n    labelHidden,\n    info,\n    status,\n    required,\n    disabled,\n    readOnly,\n    onChange,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    onImageAdded,\n    onInit,\n    defaultValue,\n    customComponents = [],\n    height,\n    customActions,\n    placeholder,\n    children,\n    spellcheck = true,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getEditorTestIds);\n\n  const baseHeight: EditorProps['height'] = {\n    min: height?.min ?? (stripUnit(textAreaMinHeight) as number) * 16,\n    max: height?.max ?? undefined\n  };\n  const getHeight = (type: 'max' | 'min') => {\n    if (typeof baseHeight === 'number') {\n      return stripUnit(baseHeight) as number;\n    }\n    if (baseHeight[type]) {\n      return stripUnit(baseHeight[type] as number) as number;\n    }\n    return undefined;\n  };\n\n  const imagesEnabled = toolbar.includes('images');\n  const maxHeight = getHeight('max');\n  const minHeight = getHeight('min');\n  const [autoResizeRef, resizeEditor] = useAutoResize<HTMLIFrameElement>(maxHeight, minHeight);\n  const formFieldRef = useRef<HTMLElement>(null);\n  const value = useRef(defaultValue);\n  const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;\n\n  const processPastedImgUrls = async (infoArr: ImageInfoArray) => {\n    const files = await Promise.all(\n      infoArr.map(({ id: imgId, url }) => getFileFromUrl(url, imgId))\n    );\n    files.forEach((file, i) => {\n      onImageAdded?.(file, infoArr[i].id);\n    });\n  };\n\n  const pastePreprocess = (plugin: unknown, args: { content: string }) => {\n    const isImg = args.content.includes('<img');\n    if (!imagesEnabled && isImg) {\n      args.content = args.content.replace(/<img(.*)\\/>/g, '');\n    }\n    if (imagesEnabled && isImg) {\n      const pastedHtml: HTMLElement = new DOMParser().parseFromString(\n        args.content,\n        'text/html'\n      ).body;\n      const imgInfo: ImageInfoArray = [];\n      pastedHtml.querySelectorAll('img').forEach(imgEl => {\n        const imgId = createUID();\n        const url = imgEl.src;\n        imgInfo.push({ id: imgId, url });\n        imgEl.setAttribute('id', imgId);\n        imgEl.setAttribute('src', '');\n      });\n      args.content = pastedHtml.innerHTML;\n      processPastedImgUrls(imgInfo);\n    }\n  };\n\n  useImperativeHandle<any, EditorState>(\n    editorRef,\n    () => ({\n      focus: () => {\n        editor?.focus();\n      },\n      getPlainText: () => {\n        return editor ? editor.getContent({ format: 'text' }) : '';\n      },\n      getRichText: () => {\n        return editor ? JSON.stringify(editor.getContent({ format: 'raw' })) : '';\n      },\n      getHtml: () => {\n        return editor ? editor.getContent({ format: 'html' }) : '';\n      },\n      clear: () => {\n        editor?.setContent('');\n      },\n      appendImage: ({ src, alt }, imageId) => {\n        if (editor) {\n          const editorEl = editor.getDoc();\n          const imageEl = editorEl.querySelector(`#${imageId}`);\n          if (imageEl) {\n            imageEl.setAttribute('src', src);\n            imageEl.setAttribute('alt', alt);\n            resizeEditor();\n          }\n        }\n      },\n      insertText: (text: string) => {\n        let activeElement: Element | null = null;\n        if (documentIsAvailable) {\n          activeElement = getActiveElement();\n        }\n        editor?.insertContent(text);\n\n        if (activeElement) (activeElement as HTMLElement).focus();\n      },\n      setCursorLocationToStart: () => {\n        editor?.selection.setCursorLocation();\n        editor?.selection.getNode().scrollIntoView();\n      },\n      insertHtml: (html: string, overwrite: boolean = false) => {\n        let activeElement: Element | null = null;\n        if (documentIsAvailable) {\n          activeElement = getActiveElement();\n        }\n        if (overwrite) {\n          editor?.setContent('');\n        }\n        editor?.insertContent(html);\n\n        if (activeElement) (activeElement as HTMLElement).focus();\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        min_height: 60,\n        height: 60,\n        menubar: false,\n        plugins: 'lists advlist autolink',\n        paste_block_drop: true,\n        paste_data_images: true,\n        lists_indent_on_tab: true,\n        icons: '',\n        branding: false,\n        elementpath: false,\n        placeholder,\n        content_css: false,\n        browser_spellcheck: spellcheck,\n        paste_preprocess: pastePreprocess,\n        content_style: `${createGlobalRootStyles(\n          theme\n        )} ${globalSpacingStyles} ${createGlobalBodyStyles(\n          theme\n        )} body { min-height: 3rem; padding: ${\n          theme.base.spacing\n        }; } html { overflow: hidden; } ${offscreenSelectionStyles} ${mceContentBodyStyles} ${placeholderStyles} ${imageStyles} ${styles}`,\n        init_instance_callback: initializedEditor => {\n          const iframeWindow = (\n            tinyMceContainerRef.current?.querySelector('iframe') as HTMLIFrameElement\n          ).contentWindow;\n          const editorCustomElements = iframeWindow?.customElements;\n          if (editorCustomElements) {\n            customComponents.forEach(\n              ({ name, createCustomElement: customElementCreator, style }) => {\n                if (!editorCustomElements.get(name)) {\n                  editorCustomElements.define(\n                    name,\n                    customElementCreator(iframeWindow as unknown as typeof globalThis)\n                  );\n                }\n                if (style) {\n                  const styleEl = document.createElement('style');\n                  styleEl.innerText = style;\n                  initializedEditor.getDoc().head.appendChild(styleEl);\n                }\n              }\n            );\n          }\n        },\n        extended_valid_elements: `${customComponents\n          .map(\n            comp =>\n              `${comp.name}${\n                comp.extensionAttributes ? `[${comp.extensionAttributes.join('|')}]` : ''\n              }`\n          )\n          .join(',')}`,\n        custom_elements: customComponents.map(comp => `~${comp.name}`).join('~,'),\n        setup: editorSettings => {\n          editorSettings.on('keydown', e => {\n            onKeyDown?.(e);\n          });\n          getTextFormats().forEach((format, i) => {\n            editorSettings.addShortcut(\n              `meta+alt+${i}`,\n              `${t('rte_change_text_format')} ${format.text}`,\n              () => {\n                editorSettings.execCommand('FormatBlock', false, format.type);\n              }\n            );\n          });\n          editorSettings.addShortcut('meta+shift+b', t('rte_bold'), () => {\n            editorSettings.execCommand('Bold');\n          });\n          editorSettings.addShortcut('meta+shift+i', t('rte_italic'), () => {\n            editorSettings.execCommand('Italic');\n          });\n          editorSettings.addShortcut('meta+shift+x', t('rte_strike_through'), () => {\n            editorSettings.execCommand('Strikethrough');\n          });\n          editorSettings.addShortcut('meta+shift+l', t('rte_toggle_unordered_list'), () => {\n            editorSettings.execCommand('InsertUnorderedList');\n          });\n          editorSettings.addShortcut('alt+m', t('rte_indent_selection'), () => {\n            editorSettings.execCommand('Indent');\n          });\n          editorSettings.addShortcut('alt+shift+m', t('rte_unindent_selection'), () => {\n            editorSettings.execCommand('Outdent');\n          });\n          customActions?.forEach(action => {\n            if (action.shortcut) {\n              editorSettings.addShortcut(\n                action.shortcut.pattern,\n                action.shortcut.description,\n                () => {\n                  action.shortcut?.command(editorSettings);\n                }\n              );\n            }\n          });\n        }\n      })\n      .then(tinymceEditors => {\n        setEditor(tinymceEditors[0]);\n        tinymceEditors[0].editorContainer?.setAttribute('style', '');\n        const iframe = tinyMceContainerRef.current?.querySelector('iframe');\n        if (iframe) {\n          const globalStyles =\n            styleSheetTarget?.querySelectorAll('[data-cosmos-global-style]') ??\n            ([] as HTMLElement[]);\n          const extraStyles =\n            document.querySelectorAll('[data-cosmos-global-style]') ?? ([] as HTMLElement[]);\n          const iframeContentHead = iframe?.contentDocument?.querySelector('head');\n          [...globalStyles, ...extraStyles].forEach(sheet => {\n            iframeContentHead?.appendChild(sheet.cloneNode(true));\n          });\n          autoResizeRef.current = iframe;\n          resizeEditor();\n        }\n      });\n  }, []);\n\n  useEffect(() => {\n    if (editor) {\n      editor.options.set('paste_preprocess', pastePreprocess);\n    }\n  }, [imagesEnabled]);\n\n  useEffect(() => {\n    if (!editor || initialized.current) return;\n    initialized.current = true;\n    onInit?.(editor);\n  }, [editor, onInit]);\n\n  useEffect(() => {\n    if (!editor) return;\n    const onChangeEvents = ['input', 'paste', 'FormatApply', 'FormatRemove', 'ExecCommand'];\n    const onEditorKeyDown = () => {\n      resizeEditor();\n    };\n    const onEditorChange = (event: EditorEvent<Event & { command?: string }>) => {\n      if (event.type !== 'execcommand' || event.command !== 'mceFocus') {\n        onChange?.(editor);\n      }\n    };\n    const onEditorFocus = () => {\n      setFocused(true);\n      onFocus?.();\n    };\n    const onEditorBlur = () => {\n      setFocused(false);\n      onBlur?.();\n    };\n    onChangeEvents.forEach(event => {\n      editor.on(event, onEditorChange);\n    });\n    editor.on('keydown', onEditorKeyDown);\n    editor.on('paste', resizeEditor);\n    editor.on('focus', onEditorFocus);\n    editor.on('blur', onEditorBlur);\n    return () => {\n      onChangeEvents.forEach(event => {\n        editor.off(event, onEditorChange);\n      });\n      editor.off('keydown', onEditorKeyDown);\n      editor.off('paste', resizeEditor);\n      editor.off('focus', onEditorFocus);\n      editor.off('blur', onEditorBlur);\n    };\n  }, [editor, onFocus, onBlur]);\n\n  useAfterInitialEffect(() => {\n    editor?.mode.set(readOnly || disabled ? 'readonly' : 'design');\n  }, [readOnly, disabled]);\n\n  const addImage = useCallback(\n    (image: File) => {\n      if (editor) {\n        const imageId = createUID();\n        editor.insertContent(`<br/><img src='' id='${imageId}' style=\"max-width: 100%;\"/><br/>`);\n        onImageAdded?.(image, imageId);\n      }\n    },\n    [editor]\n  );\n\n  const ctx = useMemo(\n    () => ({ addImage, editor: editor || ({} as TinymceEditor) }),\n    [editor, addImage]\n  );\n\n  useEffect(() => {\n    const onEditorDrop = (e: DragEvent) => {\n      e.preventDefault();\n      if (e.dataTransfer) {\n        Array.from(e.dataTransfer.files).forEach(file => {\n          if (file.type.includes('image') && imagesEnabled) {\n            addImage(file);\n          }\n        });\n      }\n    };\n    editor?.on('drop', onEditorDrop);\n    const body = editor?.getDoc().body;\n    const resizeObserver = new ResizeObserver(() => {\n      resizeEditor();\n    });\n    if (body) {\n      resizeObserver.observe(body);\n    }\n    return () => {\n      editor?.off('drop', onEditorDrop);\n      resizeObserver.disconnect();\n    };\n  }, [editor, resizeEditor]);\n\n  return (\n    <EditorContext.Provider value={ctx}>\n      <FormField\n        testId={testIds}\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        additionalInfo={additionalInfo}\n      >\n        <FormControl\n          {...restProps}\n          ref={editorRef}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          status={status}\n          as={StyledRichTextEditor}\n          focused={focused}\n          tabIndex={readOnly ? 0 : undefined}\n        >\n          <StyledEditorContainer\n            onClick={() => {\n              if (!disabled) {\n                editor?.focus();\n              }\n            }}\n            ref={tinyMceContainerRef}\n          >\n            <textarea\n              id={id}\n              value={value.current || ''}\n              onChange={() => {}}\n              aria-label={`${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`}\n              aria-labelledby={labelId}\n              ref={tinyMceRef}\n            />\n            {tinyMceContainerRef.current && editor && !readOnly && (\n              <ImageEditor\n                editor={editor}\n                editorEl={tinyMceContainerRef.current}\n                onChange={() => onChange?.(editor)}\n              />\n            )}\n          </StyledEditorContainer>\n          {renderToolbar && (\n            <Toolbar\n              testId={testIds}\n              features={toolbar}\n              editor={editor}\n              customActions={customActions}\n            />\n          )}\n        </FormControl>\n      </FormField>\n      {children}\n    </EditorContext.Provider>\n  );\n});\n\nexport default withTestIds(Editor, getEditorTestIds);\n"]}

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

@@ -0,0 +1,5 @@
+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 mceContentBodyStyles = "\n  .mce-content-body {\n    overflow-wrap: break-word;\n  }\n";
+export declare const placeholderStyles = "\n  .mce-content-body[data-mce-placeholder] {\n    position: relative;\n  }\n  .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {\n    cursor: text;\n    color: rgb(117, 117, 117);\n    content: attr(data-mce-placeholder);\n    position: absolute;\n  }\n";
+export declare const StyledEditorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Editor.styles.d.ts.map

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

@@ -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;AAEF,eAAO,MAAM,oBAAoB,mEAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yRAU7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAgBhC,CAAC"}

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

@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } 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;
+  }
+`;
+export const mceContentBodyStyles = `
+  .mce-content-body {
+    overflow-wrap: break-word;
+  }
+`;
+export const placeholderStyles = `
+  .mce-content-body[data-mce-placeholder] {
+    position: relative;
+  }
+  .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+    cursor: text;
+    color: rgb(117, 117, 117);
+    content: attr(data-mce-placeholder);
+    position: absolute;
+  }
+`;
+export const StyledEditorContainer = styled.div(({ theme }) => {
+    return css `
+    &:hover {
+      cursor: text;
+    }
+
+    iframe {
+      display: block;
+      width: 100%;
+      height: ${theme.components['text-area']['min-height']};
+    }
+
+    .tox-statusbar {
+      display: none !important;
+    }
+  `;
+});
+StyledEditorContainer.defaultProps = defaultThemeProp;
+//# 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,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;CAYvC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;CAInC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;CAUhC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;;;;;;;;gBAQI,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;;;;;;GAMxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } 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\nexport const mceContentBodyStyles = `\n  .mce-content-body {\n    overflow-wrap: break-word;\n  }\n`;\n\nexport const placeholderStyles = `\n  .mce-content-body[data-mce-placeholder] {\n    position: relative;\n  }\n  .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {\n    cursor: text;\n    color: rgb(117, 117, 117);\n    content: attr(data-mce-placeholder);\n    position: absolute;\n  }\n`;\n\nexport const StyledEditorContainer = styled.div(({ theme }) => {\n  return css`\n    &:hover {\n      cursor: text;\n    }\n\n    iframe {\n      display: block;\n      width: 100%;\n      height: ${theme.components['text-area']['min-height']};\n    }\n\n    .tox-statusbar {\n      display: none !important;\n    }\n  `;\n});\n\nStyledEditorContainer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Editor/Editor.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getEditorTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["toolbar", "text-styles", "bold", "italic", "strike-through", "bulleted-list", "numbered-list", "indent", "unindent", "link", "image", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+//# sourceMappingURL=Editor.test-ids.d.ts.map

package/lib/components/Editor/Editor.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.test-ids.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,sTAGlB,CAAC"}

package/lib/components/Editor/Editor.test-ids.js

@@ -0,0 +1,8 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+import { elements as formFieldTestIdElements } from '@pega/cosmos-react-core/lib/components/FormField/FormField.test-ids';
+import { elements as toolbarTestIdElements } from './Toolbar/Toolbar.test-ids';
+export const getEditorTestIds = createTestIds('editor', [
+    ...toolbarTestIdElements,
+    ...formFieldTestIdElements
+]);
+//# sourceMappingURL=Editor.test-ids.js.map

package/lib/components/Editor/Editor.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.test-ids.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,uBAAuB,EAAE,MAAM,qEAAqE,CAAC;AAE1H,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAE/E,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,QAAQ,EAAE;IACtD,GAAG,qBAAqB;IACxB,GAAG,uBAAuB;CAClB,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\nimport { elements as formFieldTestIdElements } from '@pega/cosmos-react-core/lib/components/FormField/FormField.test-ids';\n\nimport { elements as toolbarTestIdElements } from './Toolbar/Toolbar.test-ids';\n\nexport const getEditorTestIds = createTestIds('editor', [\n  ...toolbarTestIdElements,\n  ...formFieldTestIdElements\n] as const);\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.types.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,GAAG,EACH,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE/D,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE/F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG,mBAAmB,GAAG;IAC9C,SAAS,EAAE,MAAM,aAAa,GAAG,SAAS,CAAC;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,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;IAC9F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,mBAAmB,EAAE,CAAC,MAAM,EAAE,OAAO,UAAU,KAAK,wBAAwB,CAAC;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,gBAAgB,EAAE,SAAS,EAAE,UAAU;IAC1E,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,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,iEAAiE;IACjE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Editor.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.types.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ReactNode,\n  Ref,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport type { Editor as TinymceEditor } from 'tinymce/tinymce';\n\nimport type { Action, BaseProps, FormControlProps, TestIdProp } from '@pega/cosmos-react-core';\n\nimport type { Features } from '../RichTextEditor/Toolbar/Toolbar.types';\nimport type { RichTextEditorState } from '../RichTextEditor';\n\nexport type EditorState = RichTextEditorState & {\n  getEditor: () => TinymceEditor | undefined;\n  element?: HTMLElement;\n  setCursorLocationToStart?: () => void;\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  'data-testid'?: string;\n};\n\nexport type CustomComponent = {\n  createCustomElement: (window: typeof globalThis) => CustomElementConstructor;\n  name: string;\n  extensionAttributes?: string[];\n  style?: string;\n};\n\nexport interface EditorProps extends FormControlProps, BaseProps, TestIdProp {\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    min?: number;\n    max?: number;\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  /**\n   * Enables browser spellcheck.\n   * @default true\n   */\n  spellcheck?: boolean;\n  /** Handle to the state. */\n  ref?: Ref<EditorState>;\n}\n"]}

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

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import type { Editor } from 'tinymce';
+export declare const imgHoverClass: string;
+declare const ImageEditor: FC<{
+    editorEl: HTMLElement;
+    editor: Editor;
+    onChange: () => void;
+}>;
+export default ImageEditor;
+//# sourceMappingURL=ImageEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAA6D,MAAM,OAAO,CAAC;AAC3F,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AA6BtC,eAAO,MAAM,aAAa,QAAc,CAAC;AAEzC,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAAE,CA2YpF,CAAC;AAEF,eAAe,WAAW,CAAC"}