@pega/cosmos-react-rte 2.1.3 → 2.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-rte",
-  "version": "2.1.3",
+  "version": "2.1.6",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,10 +20,10 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.1.3",
+    "@pega/cosmos-react-core": "2.1.6",
     "@popperjs/core": "^2.11.0",
     "dompurify": "^2.3.1",
-    "marked": "^2.0.3",
+    "marked": "^4.0.12",
     "parse5": "^6.0.1",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
@@ -44,7 +44,7 @@
     "@storybook/react": "^6.4.8",
     "@storybook/theming": "^6.4.8",
     "@types/dompurify": "^2.2.3",
-    "@types/marked": "2.0.2",
+    "@types/marked": "^4.0.2",
     "@types/parse5": "^6.0.0",
     "@types/tinymce": "^4.6.4",
     "enzyme": "^3.11.0",

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

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { Editor } from 'tinymce';
-interface EditorContextType {
-    addImage: (image: File) => void;
-    editor: Editor;
-}
-declare const EditorContext: import("react").Context<EditorContextType>;
-export declare const useEditorContext: () => EditorContextType;
-export default EditorContext;
-//# sourceMappingURL=Editor.context.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.context.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,aAAa,4CAGjB,CAAC;AAEH,eAAO,MAAM,gBAAgB,yBAE5B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Editor/Editor.context.js

@@ -1,10 +0,0 @@
-import { createContext, useContext } from 'react';
-const EditorContext = createContext({
-    addImage: () => { },
-    editor: {}
-});
-export const useEditorContext = () => {
-    return useContext(EditorContext);
-};
-export default EditorContext;
-//# sourceMappingURL=Editor.context.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.context.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAQlD,MAAM,aAAa,GAAG,aAAa,CAAoB;IACrD,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,MAAM,EAAE,EAAY;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { createContext, useContext } from 'react';\nimport { Editor } from 'tinymce';\n\ninterface EditorContextType {\n  addImage: (image: File) => void;\n  editor: Editor;\n}\n\nconst EditorContext = createContext<EditorContextType>({\n  addImage: () => {},\n  editor: {} as Editor\n});\n\nexport const useEditorContext = () => {\n  return useContext(EditorContext);\n};\n\nexport default EditorContext;\n"]}

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

@@ -1,10 +0,0 @@
-import 'tinymce/icons/default';
-import 'tinymce/themes/silver';
-import 'tinymce/plugins/advlist';
-import 'tinymce/plugins/lists';
-import { FC } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { EditorProps } from './Editor.types';
-declare const Editor: FC<EditorProps & ForwardProps>;
-export default Editor;
-//# sourceMappingURL=Editor.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EACL,EAAE,EASH,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAWjC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAiB1D,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAmQ1C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Editor/Editor.js

@@ -1,187 +0,0 @@
-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 { forwardRef, useEffect, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
-import styled, { css } from 'styled-components';
-import { createUID, FormControl, FormField, useAfterInitialEffect, useTheme, useUID, useI18n, useConsolidatedRef, defaultThemeProp } from '@pega/cosmos-react-core';
-import StyledRichTextEditor, { StyledEditorContainer, StyledRichTextFormField, StyledHtml } from '../RichTextEditor/RichTextEditor.styles';
-import Toolbar from './Toolbar/Toolbar';
-import EditorContext from './Editor.context';
-import { getTextFormats } from './Toolbar/TextSelect';
-const StyledInnerEditor = styled.div(({ theme, showPlaceholder }) => {
-    return css `
-    ${showPlaceholder &&
-        css `
-      ::before {
-        color: ${theme.base.colors.slate.medium};
-        position: absolute;
-        content: attr(data-mce-placeholder);
-      }
-    `}
-  `;
-});
-StyledInnerEditor.defaultProps = defaultThemeProp;
-const Editor = forwardRef((props, ref) => {
-    const { components: { 'text-area': { 'min-height': minHeight } } } = useTheme();
-    const [editor, setEditor] = useState();
-    const t = useI18n();
-    const uid = useUID();
-    const labelId = useUID();
-    const editorRef = useConsolidatedRef(ref);
-    const initialized = useRef(false);
-    const { id = uid, toolbar = [], label, labelHidden, info, status, required, disabled, readOnly, onChange, onFocus, onBlur, onImageAdded, onInit, defaultValue, customComponents = [], height = { min: minHeight }, customActions, placeholder, ...restProps } = props;
-    const [showPlaceholder, setShowPlaceholder] = useState(() => !defaultValue);
-    const formFieldRef = useRef(null);
-    const value = useRef(defaultValue);
-    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.getElement();
-                const imageEl = editorEl.querySelector(`#${imageId}`);
-                if (imageEl) {
-                    imageEl.setAttribute('src', src);
-                    imageEl.setAttribute('alt', alt);
-                }
-            }
-        },
-        insertText: (text) => {
-            editor?.insertContent(text);
-        },
-        insertHtml: (html, overwrite = false) => {
-            if (overwrite) {
-                editor?.setContent('');
-            }
-            editor?.insertContent(html);
-        },
-        getEditor: () => {
-            return editor;
-        }
-    }), [editor]);
-    useLayoutEffect(() => {
-        tinymce
-            .init({
-            readonly: readOnly || disabled,
-            skin: false,
-            selector: `#${id}`,
-            toolbar: false,
-            menubar: false,
-            inline: true,
-            plugins: 'lists advlist',
-            lists_indent_on_tab: true,
-            icons: '',
-            placeholder,
-            init_instance_callback: () => {
-                customComponents.forEach(comp => {
-                    if (!customElements.get(comp.name)) {
-                        customElements.define(comp.name, comp.customElement);
-                    }
-                });
-            },
-            custom_elements: customComponents.reduce((prev, { name }, i) => {
-                return i === 0 ? name : `${prev},${name}`;
-            }, ''),
-            setup: editorSettings => {
-                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+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');
-                });
-            }
-        })
-            .then(tinymceEditors => {
-            setEditor(tinymceEditors[0]);
-        });
-    }, []);
-    useEffect(() => {
-        if (!editor || initialized.current)
-            return;
-        onInit?.(editor);
-        initialized.current = true;
-        const onEditorChange = () => {
-            setShowPlaceholder(!editor?.getContent({ format: 'text' }));
-        };
-        const onEditorFocus = () => {
-            onFocus?.();
-        };
-        const onEditorBlur = () => {
-            onBlur?.();
-        };
-        editor.on('input', onEditorChange);
-        editor.on('focus', onEditorFocus);
-        editor.on('blur', onEditorBlur);
-        return () => {
-            editor.off('input', onEditorChange);
-            editor.off('focus', onEditorFocus);
-            editor.off('blur', onEditorBlur);
-        };
-    }, [editor, onInit, onFocus, onBlur]);
-    useAfterInitialEffect(() => {
-        editor?.mode.set(readOnly || disabled ? 'readonly' : 'design');
-    }, [readOnly, disabled]);
-    const addImage = (image) => {
-        if (editor) {
-            const imageId = createUID();
-            editor.insertContent(`<img src='' id='${imageId}' style="max-width: 100%;"/>`);
-            onImageAdded?.(image, imageId);
-        }
-    };
-    useEffect(() => {
-        const onEditorDrop = (e) => {
-            e.preventDefault();
-            if (e.dataTransfer) {
-                Array.from(e.dataTransfer.files).forEach(file => {
-                    if (file.type.includes('image')) {
-                        addImage(file);
-                    }
-                });
-            }
-        };
-        editor?.on('drop', onEditorDrop);
-        return () => {
-            editor?.off('drop', onEditorDrop);
-        };
-    }, [editor]);
-    const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;
-    return (_jsx(EditorContext.Provider, { value: { addImage, editor: editor || {} }, children: _jsx(FormField, { as: StyledRichTextFormField, toolbar: renderToolbar, label: 
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-            _jsx("span", { onClick: () => {
-                    editor?.focus();
-                }, children: label }, void 0), labelFor: '', labelId: labelId, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onFocus: (e) => {
-                if (e.target === formFieldRef.current && !disabled) {
-                    editor?.focus();
-                }
-            }, ref: formFieldRef, tabIndex: disabled ? -1 : undefined, children: _jsxs(FormControl, { ...restProps, ref: editorRef, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, toolbar: renderToolbar, children: [_jsx(StyledEditorContainer, { readOnly: readOnly, onClick: () => {
-                            if (!disabled) {
-                                editor?.focus();
-                            }
-                        }, toolbar: renderToolbar, containerHeight: height, children: _jsx(StyledHtml, { id: id, style: { outline: 'none', border: 'none' }, dangerouslySetInnerHTML: { __html: value.current || '' }, "aria-label": `${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`, as: StyledInnerEditor, showPlaceholder: showPlaceholder, "aria-labelledby": labelId, role: 'textbox' }, void 0) }, void 0), renderToolbar && (_jsx(Toolbar, { features: toolbar, editor: editor, customActions: customActions }, void 0))] }, void 0) }, void 0) }, void 0));
-});
-export default Editor;
-//# sourceMappingURL=Editor.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":";AAAA,OAAO,OAAoC,MAAM,iBAAiB,CAAC;AACnE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAEL,UAAU,EAEV,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,EACf,mBAAmB,EAEpB,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,SAAS,EACT,WAAW,EACX,SAAS,EAET,qBAAqB,EACrB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,oBAAoB,EAAE,EAC3B,qBAAqB,EACrB,uBAAuB,EACvB,UAAU,EACX,MAAM,yCAAyC,CAAC;AAEjD,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA+B,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE;IAChG,OAAO,GAAG,CAAA;MACN,eAAe;QACjB,GAAG,CAAA;;iBAEU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;;;;KAI1C;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,MAAM,GAAmC,UAAU,CACvD,CAAC,KAAmC,EAAE,GAAuB,EAAE,EAAE;IAC/D,MAAM,EACJ,UAAU,EAAE,EACV,WAAW,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EACzC,EACF,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiB,CAAC;IACtD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,OAAO,GAAG,MAAM,EAAE,CAAC;IACzB,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAElC,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,OAAO,GAAG,EAAE,EACZ,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,gBAAgB,GAAG,EAAE,EACrB,MAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAC3B,aAAa,EACb,WAAW,EACX,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC;IAC5E,MAAM,YAAY,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAEnC,mBAAmB,CACjB,SAAS,EACT,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE;YACV,MAAM,EAAE,KAAK,EAAE,CAAC;QAClB,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACjB,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,CAAC;QACD,WAAW,EAAE,GAAG,EAAE;YAChB,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7E,CAAC;QACD,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,CAAC;QACD,KAAK,EAAE,GAAG,EAAE;YACV,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC;QACD,WAAW,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE;YACrC,IAAI,MAAM,EAAE;gBACV,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;gBACrC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC;gBACtD,IAAI,OAAO,EAAE;oBACX,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;oBACjC,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;iBAClC;aACF;QACH,CAAC;QACD,UAAU,EAAE,CAAC,IAAY,EAAE,EAAE;YAC3B,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;QACD,UAAU,EAAE,CAAC,IAAY,EAAE,YAAqB,KAAK,EAAE,EAAE;YACvD,IAAI,SAAS,EAAE;gBACb,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC;aACxB;YACD,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;QACD,SAAS,EAAE,GAAG,EAAE;YACd,OAAO,MAAM,CAAC;QAChB,CAAC;KACF,CAAC,EACF,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,OAAO;aACJ,IAAI,CAAC;YACJ,QAAQ,EAAE,QAAQ,IAAI,QAAQ;YAC9B,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,IAAI,EAAE,EAAE;YAClB,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,eAAe;YACxB,mBAAmB,EAAE,IAAI;YACzB,KAAK,EAAE,EAAE;YACT,WAAW;YACX,sBAAsB,EAAE,GAAG,EAAE;gBAC3B,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;wBAClC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;qBACtD;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YACD,eAAe,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;gBAC7D,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,IAAI,EAAE,CAAC;YAC5C,CAAC,EAAE,EAAE,CAAC;YACN,KAAK,EAAE,cAAc,CAAC,EAAE;gBACtB,cAAc,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACrC,cAAc,CAAC,WAAW,CACxB,YAAY,CAAC,EAAE,EACf,GAAG,CAAC,CAAC,wBAAwB,CAAC,IAAI,MAAM,CAAC,IAAI,EAAE,EAC/C,GAAG,EAAE;wBACH,cAAc,CAAC,WAAW,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;oBAChE,CAAC,CACF,CAAC;gBACJ,CAAC,CAAC,CAAC;gBACH,cAAc,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC,2BAA2B,CAAC,EAAE,GAAG,EAAE;oBAC9E,cAAc,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC;gBACpD,CAAC,CAAC,CAAC;gBACH,cAAc,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAAE,GAAG,EAAE;oBAClE,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;gBACvC,CAAC,CAAC,CAAC;gBACH,cAAc,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC,CAAC,wBAAwB,CAAC,EAAE,GAAG,EAAE;oBAC1E,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;gBACxC,CAAC,CAAC,CAAC;YACL,CAAC;SACF,CAAC;aACD,IAAI,CAAC,cAAc,CAAC,EAAE;YACrB,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,OAAO;YAAE,OAAO;QAC3C,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC;QACjB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,MAAM,cAAc,GAAG,GAAG,EAAE;YAC1B,kBAAkB,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QAC9D,CAAC,CAAC;QACF,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,OAAO,EAAE,EAAE,CAAC;QACd,CAAC,CAAC;QACF,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,MAAM,EAAE,EAAE,CAAC;QACb,CAAC,CAAC;QACF,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QACnC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QAClC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;QAChC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;YACpC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;YACnC,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;QACnC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtC,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,MAAM,QAAQ,GAAG,CAAC,KAAW,EAAE,EAAE;QAC/B,IAAI,MAAM,EAAE;YACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;YAC5B,MAAM,CAAC,aAAa,CAAC,mBAAmB,OAAO,8BAA8B,CAAC,CAAC;YAC/E,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SAChC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,CAAY,EAAE,EAAE;YACpC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,CAAC,YAAY,EAAE;gBAClB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBAC9C,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;wBAC/B,QAAQ,CAAC,IAAI,CAAC,CAAC;qBAChB;gBACH,CAAC,CAAC,CAAC;aACJ;QACH,CAAC,CAAC;QACF,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;QACjC,OAAO,GAAG,EAAE;YACV,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;QACpC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,aAAa,GAAG,MAAM,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC;IAE7E,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,IAAK,EAAoB,EAAE,YAClF,KAAC,SAAS,IACR,EAAE,EAAE,uBAAuB,EAC3B,OAAO,EAAE,aAAa,EACtB,KAAK;YACH,0GAA0G;YAC1G,eACE,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,EAAE,KAAK,EAAE,CAAC;gBAClB,CAAC,YAEA,KAAK,WACD,EAET,QAAQ,EAAC,EAAE,EACX,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;gBACzB,IAAI,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;oBAClD,MAAM,EAAE,KAAK,EAAE,CAAC;iBACjB;YACH,CAAC,EACD,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,YAEnC,MAAC,WAAW,OACN,SAAS,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,oBAAoB,EACxB,OAAO,EAAE,aAAa,aAEtB,KAAC,qBAAqB,IACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,QAAQ,EAAE;gCACb,MAAM,EAAE,KAAK,EAAE,CAAC;6BACjB;wBACH,CAAC,EACD,OAAO,EAAE,aAAa,EACtB,eAAe,EAAE,MAAM,YAEvB,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAC1C,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,gBAC5C,GAAG,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,0BAA0B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EACnF,EAAE,EAAE,iBAAiB,EACrB,eAAe,EAAE,eAAe,qBACf,OAAO,EACxB,IAAI,EAAC,SAAS,WACd,WACoB,EACvB,aAAa,IAAI,CAChB,KAAC,OAAO,IAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,WAAI,CAC7E,YACW,WACJ,WACW,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import tinymce, { Editor as TinymceEditor } from 'tinymce/tinymce';\nimport 'tinymce/icons/default';\nimport 'tinymce/themes/silver';\nimport 'tinymce/plugins/advlist';\nimport 'tinymce/plugins/lists';\nimport {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  useEffect,\n  useRef,\n  useState,\n  useLayoutEffect,\n  useImperativeHandle,\n  FocusEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  createUID,\n  FormControl,\n  FormField,\n  ForwardProps,\n  useAfterInitialEffect,\n  useTheme,\n  useUID,\n  useI18n,\n  useConsolidatedRef,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n  StyledEditorContainer,\n  StyledRichTextFormField,\n  StyledHtml\n} from '../RichTextEditor/RichTextEditor.styles';\n\nimport Toolbar from './Toolbar/Toolbar';\nimport EditorContext from './Editor.context';\nimport { getTextFormats } from './Toolbar/TextSelect';\nimport { EditorProps, EditorState } from './Editor.types';\n\nconst StyledInnerEditor = styled.div<{ showPlaceholder: boolean }>(({ theme, showPlaceholder }) => {\n  return css`\n    ${showPlaceholder &&\n    css`\n      ::before {\n        color: ${theme.base.colors.slate.medium};\n        position: absolute;\n        content: attr(data-mce-placeholder);\n      }\n    `}\n  `;\n});\n\nStyledInnerEditor.defaultProps = defaultThemeProp;\n\nconst Editor: FC<EditorProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EditorProps>, ref: EditorProps['ref']) => {\n    const {\n      components: {\n        'text-area': { 'min-height': minHeight }\n      }\n    } = useTheme();\n    const [editor, setEditor] = useState<TinymceEditor>();\n    const t = useI18n();\n    const uid = useUID();\n    const labelId = useUID();\n    const editorRef = useConsolidatedRef(ref);\n    const initialized = useRef(false);\n\n    const {\n      id = uid,\n      toolbar = [],\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      disabled,\n      readOnly,\n      onChange,\n      onFocus,\n      onBlur,\n      onImageAdded,\n      onInit,\n      defaultValue,\n      customComponents = [],\n      height = { min: minHeight },\n      customActions,\n      placeholder,\n      ...restProps\n    } = props;\n\n    const [showPlaceholder, setShowPlaceholder] = useState(() => !defaultValue);\n    const formFieldRef = useRef<HTMLElement>(null);\n    const value = useRef(defaultValue);\n\n    useImperativeHandle<any, EditorState>(\n      editorRef,\n      () => ({\n        focus: () => {\n          editor?.focus();\n        },\n        getPlainText: () => {\n          return editor ? editor?.getContent({ format: 'text' }) : '';\n        },\n        getRichText: () => {\n          return editor ? JSON.stringify(editor?.getContent({ format: 'raw' })) : '';\n        },\n        getHtml: () => {\n          return editor ? editor?.getContent({ format: 'html' }) : '';\n        },\n        clear: () => {\n          editor?.setContent('');\n        },\n        appendImage: ({ src, alt }, imageId) => {\n          if (editor) {\n            const editorEl = editor.getElement();\n            const imageEl = editorEl.querySelector(`#${imageId}`);\n            if (imageEl) {\n              imageEl.setAttribute('src', src);\n              imageEl.setAttribute('alt', alt);\n            }\n          }\n        },\n        insertText: (text: string) => {\n          editor?.insertContent(text);\n        },\n        insertHtml: (html: string, overwrite: boolean = false) => {\n          if (overwrite) {\n            editor?.setContent('');\n          }\n          editor?.insertContent(html);\n        },\n        getEditor: () => {\n          return editor;\n        }\n      }),\n      [editor]\n    );\n\n    useLayoutEffect(() => {\n      tinymce\n        .init({\n          readonly: readOnly || disabled,\n          skin: false,\n          selector: `#${id}`,\n          toolbar: false,\n          menubar: false,\n          inline: true,\n          plugins: 'lists advlist',\n          lists_indent_on_tab: true,\n          icons: '',\n          placeholder,\n          init_instance_callback: () => {\n            customComponents.forEach(comp => {\n              if (!customElements.get(comp.name)) {\n                customElements.define(comp.name, comp.customElement);\n              }\n            });\n          },\n          custom_elements: customComponents.reduce((prev, { name }, i) => {\n            return i === 0 ? name : `${prev},${name}`;\n          }, ''),\n          setup: editorSettings => {\n            getTextFormats().forEach((format, i) => {\n              editorSettings.addShortcut(\n                `meta+alt+${i}`,\n                `${t('rte_change_text_format')} ${format.text}`,\n                () => {\n                  editorSettings.execCommand('FormatBlock', false, format.type);\n                }\n              );\n            });\n            editorSettings.addShortcut('meta+shift+l', t('rte_toggle_unordered_list'), () => {\n              editorSettings.execCommand('InsertUnorderedList');\n            });\n            editorSettings.addShortcut('alt+m', t('rte_indent_selection'), () => {\n              editorSettings.execCommand('Indent');\n            });\n            editorSettings.addShortcut('alt+shift+m', t('rte_unindent_selection'), () => {\n              editorSettings.execCommand('Outdent');\n            });\n          }\n        })\n        .then(tinymceEditors => {\n          setEditor(tinymceEditors[0]);\n        });\n    }, []);\n\n    useEffect(() => {\n      if (!editor || initialized.current) return;\n      onInit?.(editor);\n      initialized.current = true;\n      const onEditorChange = () => {\n        setShowPlaceholder(!editor?.getContent({ format: 'text' }));\n      };\n      const onEditorFocus = () => {\n        onFocus?.();\n      };\n      const onEditorBlur = () => {\n        onBlur?.();\n      };\n      editor.on('input', onEditorChange);\n      editor.on('focus', onEditorFocus);\n      editor.on('blur', onEditorBlur);\n      return () => {\n        editor.off('input', onEditorChange);\n        editor.off('focus', onEditorFocus);\n        editor.off('blur', onEditorBlur);\n      };\n    }, [editor, onInit, onFocus, onBlur]);\n\n    useAfterInitialEffect(() => {\n      editor?.mode.set(readOnly || disabled ? 'readonly' : 'design');\n    }, [readOnly, disabled]);\n\n    const addImage = (image: File) => {\n      if (editor) {\n        const imageId = createUID();\n        editor.insertContent(`<img src='' id='${imageId}' style=\"max-width: 100%;\"/>`);\n        onImageAdded?.(image, imageId);\n      }\n    };\n\n    useEffect(() => {\n      const onEditorDrop = (e: DragEvent) => {\n        e.preventDefault();\n        if (e.dataTransfer) {\n          Array.from(e.dataTransfer.files).forEach(file => {\n            if (file.type.includes('image')) {\n              addImage(file);\n            }\n          });\n        }\n      };\n      editor?.on('drop', onEditorDrop);\n      return () => {\n        editor?.off('drop', onEditorDrop);\n      };\n    }, [editor]);\n\n    const renderToolbar = editor && toolbar.length > 0 && !readOnly && !disabled;\n\n    return (\n      <EditorContext.Provider value={{ addImage, editor: editor || ({} as TinymceEditor) }}>\n        <FormField\n          as={StyledRichTextFormField}\n          toolbar={renderToolbar}\n          label={\n            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n            <span\n              onClick={() => {\n                editor?.focus();\n              }}\n            >\n              {label}\n            </span>\n          }\n          labelFor=''\n          labelId={labelId}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={(e: FocusEvent) => {\n            if (e.target === formFieldRef.current && !disabled) {\n              editor?.focus();\n            }\n          }}\n          ref={formFieldRef}\n          tabIndex={disabled ? -1 : undefined}\n        >\n          <FormControl\n            {...restProps}\n            ref={editorRef}\n            required={required}\n            disabled={disabled}\n            readOnly={readOnly}\n            status={status}\n            as={StyledRichTextEditor}\n            toolbar={renderToolbar}\n          >\n            <StyledEditorContainer\n              readOnly={readOnly}\n              onClick={() => {\n                if (!disabled) {\n                  editor?.focus();\n                }\n              }}\n              toolbar={renderToolbar}\n              containerHeight={height}\n            >\n              <StyledHtml\n                id={id}\n                style={{ outline: 'none', border: 'none' }}\n                dangerouslySetInnerHTML={{ __html: value.current || '' }}\n                aria-label={`${label}${renderToolbar ? `. ${t('rte_toolbar_instructions')}.` : ''}`}\n                as={StyledInnerEditor}\n                showPlaceholder={showPlaceholder}\n                aria-labelledby={labelId}\n                role='textbox'\n              />\n            </StyledEditorContainer>\n            {renderToolbar && (\n              <Toolbar features={toolbar} editor={editor} customActions={customActions} />\n            )}\n          </FormControl>\n        </FormField>\n      </EditorContext.Provider>\n    );\n  }\n);\n\nexport default Editor;\n"]}

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

@@ -1,48 +0,0 @@
-import { Ref } from 'react';
-import { Editor as TinymceEditor } from 'tinymce/tinymce';
-import { Action, BaseProps, FormControlProps } from '@pega/cosmos-react-core';
-import { Features } from '../RichTextEditor/Toolbar/Toolbar.types';
-import { RichTextEditorState } from '../RichTextEditor';
-export declare type EditorState = RichTextEditorState & {
-    getEditor: () => TinymceEditor | undefined;
-};
-export declare type CustomAction = {
-    text: Action['text'];
-    icon: NonNullable<Action['icon']>;
-    onMouseDown: () => void;
-};
-export interface EditorProps extends FormControlProps, BaseProps {
-    /** An array of strings that activate features on the toolbar */
-    toolbar?: Features[];
-    /** A callback that supplies an object with functions that can manipulate the editor and retrieve it's content/state */
-    onChange?: () => 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?: string | {
-        min?: string;
-        max?: string;
-    };
-    /** An array of custom components, custom components must use web component API */
-    customComponents?: {
-        customElement: CustomElementConstructor;
-        name: string;
-    }[];
-    /** An array of custom buttons to be inserted into the toolbar */
-    customActions?: CustomAction[];
-    /** Handle to the state. */
-    ref?: Ref<EditorState>;
-}
-//# sourceMappingURL=Editor.types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.types.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,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;IAAE,SAAS,EAAE,MAAM,aAAa,GAAG,SAAS,CAAA;CAAE,CAAC;AAE/F,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,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,gBAAgB,EAAE,SAAS;IAC9D,gEAAgE;IAChE,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,uHAAuH;IACvH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,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;QAAE,aAAa,EAAE,wBAAwB,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/E,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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.types.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } 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 & { getEditor: () => TinymceEditor | undefined };\n\nexport type CustomAction = {\n  text: Action['text'];\n  icon: NonNullable<Action['icon']>;\n  onMouseDown: () => void;\n};\n\nexport interface EditorProps extends FormControlProps, BaseProps {\n  /** An array of strings that activate features on the toolbar */\n  toolbar?: Features[];\n  /** A callback that supplies an object with functions that can manipulate the editor and retrieve it's content/state */\n  onChange?: () => 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?: { customElement: CustomElementConstructor; name: string }[];\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/Toolbar/AnchorButton.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-import { Editor } from 'tinymce';
-import { ForwardProps } from '@pega/cosmos-react-core';
-interface AnchorButtonProps {
-    osx: boolean;
-    editor: Editor;
-}
-declare const AnchorButton: FC<AnchorButtonProps & ForwardProps>;
-export default AnchorButton;
-//# sourceMappingURL=AnchorButton.d.ts.map

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

@@ -1 +0,0 @@
-{"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,CA2MtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,141 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState, useEffect } 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';
-import { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';
-registerIcon(chainIcon);
-const AnchorButton = ({ osx, editor, ...restProps }) => {
-    const t = useI18n();
-    const buttonRef = useRef(null);
-    const textInputRef = useRef(null);
-    const urlInputRef = useRef(null);
-    const [popoverEl, setPopoverEl] = useElement();
-    const [selectedText, setSelectedText] = useState('');
-    const [selection, setSelection] = useState();
-    const [url, setUrl] = useState('');
-    const [urlMatch, setUrlMatch] = useState(false);
-    const [anchorMenu, setAnchorMenu] = useState(false);
-    const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_anchor')} (${ctrl}K)`);
-    const openMenu = (opts = {}) => {
-        setAnchorMenu(true);
-        if (opts.focusInput) {
-            setTimeout(() => {
-                textInputRef.current?.focus();
-            }, 0);
-        }
-    };
-    const resetMenu = () => {
-        setSelection(undefined);
-        setSelectedText('');
-        setUrl('');
-        setUrlMatch(true);
-        setAnchorMenu(false);
-    };
-    useOuterEvent('mousedown', [popoverEl], () => {
-        if (anchorMenu) {
-            resetMenu();
-        }
-    });
-    const createLink = () => {
-        if (url && selection) {
-            editor.focus();
-            editor.selection = selection;
-            if (selection.getNode().tagName === 'A') {
-                const anchorEl = editor.selection.getNode();
-                anchorEl.setAttribute('href', url);
-                anchorEl.textContent = selectedText;
-            }
-            else {
-                editor.insertContent(`<a href='${new URL(/^[a-z][a-z0-9.+-]*:/i.test(url) ? url : `https:${url}`).href}'>${selectedText}</a>`);
-            }
-            resetMenu();
-        }
-    };
-    useEffect(() => {
-        if (anchorMenu) {
-            if (editor.selection) {
-                const selectedEl = editor.selection.getNode();
-                if (selectedEl?.tagName === 'A') {
-                    setSelectedText(selectedEl.textContent || '');
-                    setUrl(selectedEl.getAttribute('href') || '');
-                }
-                else {
-                    setSelectedText(editor.selection.getContent({ format: 'text' }));
-                }
-                setSelection({ ...editor.selection });
-            }
-        }
-        else {
-            resetMenu();
-        }
-    }, [anchorMenu]);
-    const preventDef = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    const isLinkActive = () => {
-        return editor.selection.getNode().tagName === 'A' && editor.hasFocus();
-    };
-    const cancelAnchorCreation = (event) => {
-        event?.preventDefault();
-        if ((event?.type === 'keydown' && event?.key === 'Enter') ||
-            event?.type === 'mousedown' ||
-            !event) {
-            resetMenu();
-            buttonRef.current?.focus();
-        }
-    };
-    useEffect(() => {
-        const keyCommandListener = (e) => {
-            if (e.key === 'k' && (e.metaKey || e.ctrlKey) && editor.hasFocus()) {
-                e.preventDefault();
-                openMenu({ focusInput: true });
-            }
-            if (e.key === 'Escape') {
-                cancelAnchorCreation();
-            }
-        };
-        document.addEventListener('keydown', keyCommandListener);
-        return () => {
-            document.removeEventListener('keydown', keyCommandListener);
-        };
-    }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { ref: buttonRef, onMouseDown: () => {
-                    openMenu();
-                }, onKeyDown: (e) => {
-                    if (e.key === 'Enter') {
-                        e.preventDefault();
-                        openMenu({ focusInput: true });
-                    }
-                }, active: isLinkActive(), tooltip: tooltip, label: t('rte_anchor'), ...restProps, children: _jsx(Icon, { name: 'chain' }, void 0) }, void 0), _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" }, void 0), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', type: 'submit', variant: 'primary', children: "Apply" }, void 0)] }, void 0), onSubmit: (e) => {
-                            e.preventDefault();
-                            createLink();
-                        }, children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: 'Text', value: selectedText, onClick: preventDef, onChange: (e) => {
-                                        setSelectedText(e.target.value);
-                                    }, ref: textInputRef }, void 0), _jsx(Input, { label: 'URL', value: url, onClick: preventDef, onChange: (e) => {
-                                        const urlInput = e.target.value;
-                                        setUrl(urlInput);
-                                        if (!urlMatch) {
-                                            try {
-                                                // eslint-disable-next-line no-new
-                                                new URL(/^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `https:${urlInput}`);
-                                                setUrlMatch(true);
-                                            }
-                                            catch {
-                                                setUrlMatch(false);
-                                            }
-                                        }
-                                    }, onBlur: () => {
-                                        try {
-                                            // eslint-disable-next-line no-new
-                                            new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `https:${url}`);
-                                            setUrlMatch(true);
-                                        }
-                                        catch {
-                                            setUrlMatch(false);
-                                        }
-                                    }, info: !urlMatch ? t('rte_invalid_url') : '', status: !urlMatch ? 'error' : undefined, ref: urlInputRef }, void 0)] }, void 0) }, void 0) }, void 0) }, void 0)] }, void 0));
-};
-export default AnchorButton;
-//# sourceMappingURL=AnchorButton.js.map

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

@@ -1 +0,0 @@
-{"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_anchor')} (${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    ) {\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_anchor')}\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"]}

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

@@ -1,8 +0,0 @@
-import { FC } from 'react';
-import { Editor } from 'tinymce';
-import { ForwardProps } from '@pega/cosmos-react-core';
-declare const ImageButton: FC<{
-    editor: Editor;
-} & ForwardProps>;
-export default ImageButton;
-//# sourceMappingURL=ImageButton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ImageButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/ImageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAsB,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAGjC,OAAO,EAAsB,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAYpF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAmCtD,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,30 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useContext } from 'react';
-import styled from 'styled-components';
-import { hideVisually } from 'polished';
-import { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';
-import * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';
-import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
-import EditorContext from '../Editor.context';
-registerIcon(pictureIcon);
-const StyledImageInput = styled.input `
-  ${hideVisually()}
-`;
-const ImageButton = ({ editor, ...restProps }) => {
-    const t = useI18n();
-    const fileInputRef = useRef(null);
-    const { addImage } = useContext(EditorContext);
-    const onImageInputChange = (e) => {
-        if (e.target.files) {
-            addImage(e.target.files[0]);
-            if (fileInputRef.current) {
-                fileInputRef.current.value = '';
-            }
-        }
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(StyledImageInput, { type: 'file', accept: 'image/*', ref: fileInputRef, onChange: onImageInputChange }, void 0), _jsx(ToolbarButton, { onClick: () => {
-                    fileInputRef?.current?.click();
-                }, tooltip: t('rte_image'), label: t('rte_image'), ...restProps, children: _jsx(Icon, { name: 'picture' }, void 0) }, void 0)] }, void 0));
-};
-export default ImageButton;
-//# sourceMappingURL=ImageButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ImageButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/ImageButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAE9F,OAAO,aAAa,MAAM,4CAA4C,CAAC;AACvE,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAE9C,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAA;IACjC,YAAY,EAAE;CACjB,CAAC;AAEF,MAAM,WAAW,GAA0C,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IACtF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAE/C,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC9D,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAE5B,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxB,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;aACjC;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,gBAAgB,IACf,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,kBAAkB,WAC5B,EACF,KAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBACjC,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KACjB,SAAS,YAEb,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,WAAG,WACT,YACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { ChangeEvent, FC, useRef, useContext } from 'react';\nimport styled from 'styled-components';\nimport { Editor } from 'tinymce';\nimport { hideVisually } from 'polished';\n\nimport { Icon, registerIcon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport EditorContext from '../Editor.context';\n\nregisterIcon(pictureIcon);\n\nconst StyledImageInput = styled.input`\n  ${hideVisually()}\n`;\n\nconst ImageButton: FC<{ editor: Editor } & ForwardProps> = ({ editor, ...restProps }) => {\n  const t = useI18n();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const { addImage } = useContext(EditorContext);\n\n  const onImageInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (e.target.files) {\n      addImage(e.target.files[0]);\n\n      if (fileInputRef.current) {\n        fileInputRef.current.value = '';\n      }\n    }\n  };\n\n  return (\n    <>\n      <StyledImageInput\n        type='file'\n        accept='image/*'\n        ref={fileInputRef}\n        onChange={onImageInputChange}\n      />\n      <ToolbarButton\n        onClick={() => {\n          fileInputRef?.current?.click();\n        }}\n        tooltip={t('rte_image')}\n        label={t('rte_image')}\n        {...restProps}\n      >\n        <Icon name='picture' />\n      </ToolbarButton>\n    </>\n  );\n};\n\nexport default ImageButton;\n"]}

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

@@ -1,14 +0,0 @@
-import { FC } from 'react';
-import { Editor } from 'tinymce';
-declare type FormatTypes = 'p' | 'h1' | 'h2' | 'h3' | 'h4';
-export declare const getTextFormats: (osx?: boolean) => {
-    text: string;
-    subText: string;
-    type: FormatTypes;
-}[];
-declare const TextSelect: FC<{
-    osx: boolean;
-    editor: Editor;
-}>;
-export default TextSelect;
-//# sourceMappingURL=TextSelect.d.ts.map