@pega/cosmos-react-rte 2.0.0 → 2.1.0

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

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { Popover, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize } from '@pega/cosmos-react-core';
+import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
+import { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';
+registerIcon(arrowMicroDownIcon);
+const StyledTextSelect = styled(Button)(({ theme }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    display: inline-flex;
+    align-items: center;
+    border-radius: calc(0.25 * ${theme.base['border-radius']});
+    height: calc(4 * ${theme.base.spacing});
+    padding: calc(0.5 * ${theme.base.spacing});
+    font-size: ${fontSizes.xxs};
+
+    span {
+      white-space: nowrap;
+    }
+
+    :focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `;
+});
+StyledTextSelect.defaultProps = defaultThemeProp;
+const StyledSelectMenu = styled.div `
+  min-width: 20ch;
+`;
+const textMapping = {
+    p: 'Normal',
+    h1: 'Heading 1',
+    h2: 'Heading 2',
+    h3: 'Heading 3',
+    h4: 'Heading 4',
+    '': 'Normal'
+};
+const getTextCommand = (num, osx) => {
+    return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);
+};
+export const getTextFormats = (osx = false) => {
+    return [
+        { text: 'Normal', subText: getTextCommand(0, osx), type: 'p' },
+        { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'h1' },
+        { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'h2' },
+        { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'h3' },
+        { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'h4' }
+    ];
+};
+const TextSelect = ({ osx, editor }) => {
+    const t = useI18n();
+    const [open, setOpen] = useState(false);
+    const selecting = useRef(false);
+    const openedByClick = useRef(false);
+    const buttonRef = useRef(null);
+    const popoverRef = useRef(null);
+    const menuRef = useRef(null);
+    const textFormats = useMemo(() => {
+        return getTextFormats(osx);
+    }, [osx]);
+    useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {
+        setOpen(false);
+    });
+    const onTextSelect = (type, e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        editor.execCommand('FormatBlock', false, type);
+        if (!openedByClick.current) {
+            buttonRef.current?.focus();
+        }
+        setOpen(false);
+        selecting.current = true;
+        setTimeout(() => {
+            if (!editor.hasFocus() && openedByClick.current) {
+                editor.focus();
+            }
+        }, 0);
+    };
+    const activeFormat = () => {
+        return editor.queryCommandValue('FormatBlock');
+    };
+    const getFormatText = () => {
+        const format = textMapping[activeFormat()];
+        return format || 'Unknown';
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledTextSelect, { variant: 'simple', type: 'button', icon: false, ref: buttonRef, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setOpen(true);
+                    openedByClick.current = true;
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Enter' && !selecting.current) {
+                        e.preventDefault();
+                        setOpen(true);
+                        openedByClick.current = false;
+                    }
+                    else if (e.key === 'Enter') {
+                        e.preventDefault();
+                        selecting.current = false;
+                    }
+                    else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                        setOpen(false);
+                    }
+                }, onFocus: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `${t('rte_text_formatting_toolbar')}. ${t('rte_heading_style')}. ${getFormatText()} ${t('selected').toLocaleLowerCase()}`, "aria-haspopup": true, children: [_jsx("span", { children: getFormatText() }, void 0), _jsx(Icon, { name: 'arrow-micro-down' }, void 0)] }, void 0), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_heading_style') }, void 0)), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: textFormats.map(({ text, type, subText }) => ({
+                        id: type,
+                        primary: text,
+                        secondary: [subText],
+                        selected: type === activeFormat()
+                    })), focusControlEl: buttonRef.current ?? undefined, focusElOnClose: false, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }, void 0) }, void 0)] }, void 0));
+};
+export default TextSelect;
+//# sourceMappingURL=TextSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, MouseEvent, KeyboardEvent, FocusEvent, useMemo } from 'react';\nimport { Editor } from 'tinymce';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Popover,\n  Icon,\n  registerIcon,\n  useOuterEvent,\n  Menu,\n  Button,\n  defaultThemeProp,\n  useI18n,\n  Tooltip,\n  calculateFontSize\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    display: inline-flex;\n    align-items: center;\n    border-radius: calc(0.25 * ${theme.base['border-radius']});\n    height: calc(4 * ${theme.base.spacing});\n    padding: calc(0.5 * ${theme.base.spacing});\n    font-size: ${fontSizes.xxs};\n\n    span {\n      white-space: nowrap;\n    }\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n  min-width: 20ch;\n`;\n\ntype FormatTypes = 'p' | 'h1' | 'h2' | 'h3' | 'h4';\n\nconst textMapping = {\n  p: 'Normal',\n  h1: 'Heading 1',\n  h2: 'Heading 2',\n  h3: 'Heading 3',\n  h4: 'Heading 4',\n  '': 'Normal'\n} as const;\n\nconst getTextCommand = (num: number, osx: boolean) => {\n  return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nexport const getTextFormats = (\n  osx: boolean = false\n): { text: string; subText: string; type: FormatTypes }[] => {\n  return [\n    { text: 'Normal', subText: getTextCommand(0, osx), type: 'p' },\n    { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'h1' },\n    { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'h2' },\n    { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'h3' },\n    { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'h4' }\n  ];\n};\n\nconst TextSelect: FC<{ osx: boolean; editor: Editor }> = ({ osx, editor }) => {\n  const t = useI18n();\n  const [open, setOpen] = useState(false);\n  const selecting = useRef(false);\n  const openedByClick = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef(null);\n  const menuRef = useRef(null);\n\n  const textFormats = useMemo(() => {\n    return getTextFormats(osx);\n  }, [osx]);\n\n  useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n    setOpen(false);\n  });\n\n  const onTextSelect = (type: FormatTypes, e: MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    editor.execCommand('FormatBlock', false, type);\n    if (!openedByClick.current) {\n      buttonRef.current?.focus();\n    }\n    setOpen(false);\n    selecting.current = true;\n    setTimeout(() => {\n      if (!editor.hasFocus() && openedByClick.current) {\n        editor.focus();\n      }\n    }, 0);\n  };\n\n  const activeFormat = (): FormatTypes => {\n    return editor.queryCommandValue('FormatBlock') as FormatTypes;\n  };\n\n  const getFormatText = (): string => {\n    const format = textMapping[activeFormat()];\n    return format || 'Unknown';\n  };\n\n  return (\n    <>\n      <StyledTextSelect\n        variant='simple'\n        type='button'\n        icon={false}\n        ref={buttonRef}\n        onMouseDown={(e: MouseEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n          setOpen(true);\n          openedByClick.current = true;\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Enter' && !selecting.current) {\n            e.preventDefault();\n            setOpen(true);\n            openedByClick.current = false;\n          } else if (e.key === 'Enter') {\n            e.preventDefault();\n            selecting.current = false;\n          } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n            setOpen(false);\n          }\n        }}\n        onFocus={(e: FocusEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onClick={(e: MouseEvent) => e.stopPropagation()}\n        aria-expanded={open}\n        aria-label={`${t('rte_text_formatting_toolbar')}. ${t(\n          'rte_heading_style'\n        )}. ${getFormatText()} ${t('selected').toLocaleLowerCase()}`}\n        aria-haspopup\n      >\n        <span>{getFormatText()}</span>\n        <Icon name='arrow-micro-down' />\n      </StyledTextSelect>\n      {buttonRef.current && (\n        <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n          {t('rte_heading_style')}\n        </Tooltip>\n      )}\n      <Popover\n        show={open}\n        as={StyledSelectMenu}\n        target={buttonRef.current}\n        placement='bottom-start'\n        ref={popoverRef}\n      >\n        <Menu\n          items={textFormats.map(({ text, type, subText }) => ({\n            id: type,\n            primary: text,\n            secondary: [subText],\n            selected: type === activeFormat()\n          }))}\n          focusControlEl={buttonRef.current ?? undefined}\n          focusElOnClose={false}\n          mode='single-select'\n          ref={menuRef}\n          onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n        />\n      </Popover>\n    </>\n  );\n};\n\nexport default TextSelect;\n"]}

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Editor } from 'tinymce';
+import { Features } from '../../RichTextEditor/Toolbar/Toolbar.types';
+import { CustomAction } from '../Editor.types';
+export interface ToolbarProps {
+    features: Features[];
+    sticky?: boolean;
+    editor: Editor;
+    customActions?: CustomAction[];
+}
+declare const Toolbar: FC<ToolbarProps>;
+export default Toolbar;
+//# sourceMappingURL=Toolbar.d.ts.map

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

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

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

@@ -0,0 +1,142 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, Icon, useArrows, useI18n, defaultThemeProp, registerIcon } from '@pega/cosmos-react-core';
+import * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';
+import * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';
+import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
+import { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';
+import ImageButton from './ImageButton';
+import TextSelect from './TextSelect';
+import AnchorButton from './AnchorButton';
+registerIcon(indentIcon, unindentIcon);
+const StyledToolbar = styled.div(({ sticky, theme }) => `
+  background-color: ${theme.base.palette['primary-background']};
+  border-radius: calc(0.25 * ${theme.base['border-radius']});
+  overflow: auto;
+  padding: 0.125rem;
+  ${sticky &&
+    css `
+      position: sticky;
+      bottom: 0;
+    `}
+`);
+StyledToolbar.defaultProps = defaultThemeProp;
+// Function that returns the text styling buttons
+function renderStyleButtons(editor, t, activeStyles, osx) {
+    const inlineStyleButtons = [
+        {
+            style: 'BOLD',
+            text: 'B',
+            format: 'Bold',
+            label: t('rte_bold'),
+            element: 'strong',
+            tooltip: getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`)
+        },
+        {
+            style: 'ITALIC',
+            text: 'I',
+            format: 'Italic',
+            label: t('rte_italic'),
+            element: 'i',
+            tooltip: getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`)
+        },
+        {
+            style: 'STRIKE-THROUGH',
+            text: 'S',
+            format: 'Strikethrough',
+            element: 's',
+            label: t('rte_strike_through'),
+            tooltip: getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`)
+        }
+    ];
+    return inlineStyleButtons.map(({ format, style, text, label, tooltip }) => {
+        return (_jsx(ToolbarButton, { onMouseDown: e => {
+                e.preventDefault();
+                if (editor.hasFocus()) {
+                    editor.execCommand(format);
+                }
+                else {
+                    editor.focus();
+                    setTimeout(() => {
+                        editor.execCommand(format);
+                    }, 0);
+                }
+            }, styleType: style, active: activeStyles[format.toLowerCase()], tooltip: tooltip, label: label, children: text }, style));
+    });
+}
+// Takes the features array and transforms it into a map for faster lookup
+function createActiveFeaturesMap(features) {
+    return features.reduce((acc, feature) => {
+        return { ...acc, [feature]: true };
+    }, {});
+}
+const Toolbar = ({ features, sticky, editor, customActions }) => {
+    const t = useI18n();
+    const [osx, setOsx] = useState(false);
+    const toolbarRef = useRef(null);
+    useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });
+    const [activeFeatures, setActiveFeatures] = useState(createActiveFeaturesMap(features));
+    const [activeStyles, setActiveStyles] = useState(() => ({
+        bold: false,
+        italic: false,
+        strikethrough: false,
+        unorderedList: false,
+        orderedList: false
+    }));
+    const getIndentationToolTip = (type) => getKeyCommand(osx, ({ shift, alt }) => type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`);
+    useEffect(() => {
+        setActiveFeatures(createActiveFeaturesMap(features));
+    }, [features]);
+    useEffect(() => {
+        if (navigator.appVersion.includes('Mac'))
+            setOsx(true);
+    }, []);
+    const getActiveStyles = useCallback(() => {
+        if (editor.hasFocus()) {
+            setActiveStyles({
+                bold: editor.queryCommandState('Bold'),
+                italic: editor.queryCommandState('Italic'),
+                strikethrough: editor.queryCommandState('Strikethrough'),
+                unorderedList: editor.queryCommandState('InsertUnorderedList'),
+                orderedList: editor.queryCommandState('InsertOrderedList')
+            });
+        }
+        else {
+            setActiveStyles({
+                bold: false,
+                italic: false,
+                strikethrough: false,
+                unorderedList: false,
+                orderedList: false
+            });
+        }
+    }, [editor, setActiveStyles]);
+    useEffect(() => {
+        getActiveStyles();
+        editor.on('SelectionChange', getActiveStyles);
+        return () => {
+            editor.off('SelectionChange', getActiveStyles);
+        };
+    }, [editor, getActiveStyles]);
+    return (_jsxs(Flex, { as: StyledToolbar, sticky: sticky, container: { justify: 'between' }, ref: toolbarRef, children: [_jsxs(Flex, { container: { alignItems: 'end' }, children: [_jsx(TextSelect, { osx: osx, editor: editor }, void 0), activeFeatures['inline-styling'] && renderStyleButtons(editor, t, activeStyles, osx), activeFeatures.lists && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onMouseDown: e => {
+                                    e.preventDefault();
+                                    editor.execCommand('InsertUnorderedList');
+                                }, active: activeStyles.unorderedList, tooltip: getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`), label: t('rte_bulleted_list'), children: _jsx(Icon, { name: 'list' }, void 0) }, void 0), _jsx(ToolbarButton, { onMouseDown: e => {
+                                    e.preventDefault();
+                                    editor.execCommand('InsertOrderedList');
+                                }, active: activeStyles.orderedList, tooltip: t('rte_numbered_list'), label: t('rte_numbered_list'), children: _jsx(Icon, { name: 'list-number' }, void 0) }, void 0)] }, void 0)), activeFeatures.indentation && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onMouseDown: e => {
+                                    e.preventDefault();
+                                    editor.execCommand('Indent');
+                                }, label: t('rte_indent'), tooltip: getIndentationToolTip('indent'), children: _jsx(Icon, { name: 'indent' }, void 0) }, void 0), _jsx(ToolbarButton, { onMouseDown: e => {
+                                    e.preventDefault();
+                                    editor.execCommand('Outdent');
+                                }, label: t('rte_unindent'), tooltip: getIndentationToolTip('unindent'), children: _jsx(Icon, { name: 'unindent' }, void 0) }, void 0)] }, void 0))] }, void 0), _jsxs(Flex, { container: { alignItems: 'end' }, children: [customActions?.map(action => {
+                        return (_jsx(ToolbarButton, { onMouseDown: e => {
+                                e.preventDefault();
+                                action.onMouseDown();
+                            }, tooltip: action.text, children: _jsx(Icon, { name: action.icon }, void 0) }, action.icon));
+                    }), activeFeatures.links && _jsx(AnchorButton, { editor: editor, osx: osx }, void 0), activeFeatures.images && _jsx(ImageButton, { editor: editor }, void 0)] }, void 0)] }, void 0));
+};
+export default Toolbar;
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,OAAO,EACP,gBAAgB,EAEhB,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAC5F,OAAO,KAAK,YAAY,MAAM,iEAAiE,CAAC;AAEhG,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAEvC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;sBACH,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;+BAC/B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;IAItD,MAAM;IACN,GAAG,CAAA;;;KAIL;CACD,CACA,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAmB9C,iDAAiD;AACjD,SAAS,kBAAkB,CACzB,MAAc,EACd,CAAuC,EACvC,YAAwC,EACxC,GAAY;IAEZ,MAAM,kBAAkB,GAAsB;QAC5C;YACE,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,GAAG;YACT,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC;YACpB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,aAAa,CACpB,GAAG,EACH,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,KAAK,IAAI,MAAM,IAAI,GAAG,KAAK,IAAI,CACrE;SACF;QACD;YACE,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,GAAG;YACT,MAAM,EAAE,QAAQ;YAChB,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC;YACtB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,aAAa,CACpB,GAAG,EACH,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,IAAI,MAAM,IAAI,GAAG,KAAK,IAAI,CACvE;SACF;QACD;YACE,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,GAAG;YACT,MAAM,EAAE,eAAe;YACvB,OAAO,EAAE,GAAG;YACZ,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;YAC9B,OAAO,EAAE,aAAa,CACpB,GAAG,EACH,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,oBAAoB,CAAC,KAAK,IAAI,GAAG,KAAK,IAAI,CACrE;SACF;KACF,CAAC;IAEF,OAAO,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;QACxE,OAAO,CACL,KAAC,aAAa,IAEZ,WAAW,EAAE,CAAC,CAAC,EAAE;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE;oBACrB,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;iBAC5B;qBAAM;oBACL,MAAM,CAAC,KAAK,EAAE,CAAC;oBACf,UAAU,CAAC,GAAG,EAAE;wBACd,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;oBAC7B,CAAC,EAAE,CAAC,CAAC,CAAC;iBACP;YACH,CAAC,EACD,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAC1C,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,YAEX,IAAI,IAjBA,KAAK,CAkBI,CACjB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED,0EAA0E;AAC1E,SAAS,uBAAuB,CAAC,QAAoB;IACnD,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE;QACtC,OAAO,EAAE,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;IACrC,CAAC,EAAE,EAAkC,CAAC,CAAC;AACzC,CAAC;AAED,MAAM,OAAO,GAAqB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAgB,EAAE,EAAE;IAC9F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC;IAEjE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC,CAAC;IACxF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QACtD,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,aAAa,EAAE,KAAK;QACpB,aAAa,EAAE,KAAK;QACpB,WAAW,EAAE,KAAK;KACnB,CAAC,CAAC,CAAC;IAEJ,MAAM,qBAAqB,GAAG,CAAC,IAA2B,EAAE,EAAE,CAC5D,aAAa,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CACpC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAC9F,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC;YAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,MAAM,CAAC,QAAQ,EAAE,EAAE;YACrB,eAAe,CAAC;gBACd,IAAI,EAAE,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC;gBACtC,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC,QAAQ,CAAC;gBAC1C,aAAa,EAAE,MAAM,CAAC,iBAAiB,CAAC,eAAe,CAAC;gBACxD,aAAa,EAAE,MAAM,CAAC,iBAAiB,CAAC,qBAAqB,CAAC;gBAC9D,WAAW,EAAE,MAAM,CAAC,iBAAiB,CAAC,mBAAmB,CAAC;aAC3D,CAAC,CAAC;SACJ;aAAM;YACL,eAAe,CAAC;gBACd,IAAI,EAAE,KAAK;gBACX,MAAM,EAAE,KAAK;gBACb,aAAa,EAAE,KAAK;gBACpB,aAAa,EAAE,KAAK;gBACpB,WAAW,EAAE,KAAK;aACnB,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,UAAU,aACzF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,aACpC,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,WAAI,EACvC,cAAc,CAAC,gBAAgB,CAAC,IAAI,kBAAkB,CAAC,MAAM,EAAE,CAAC,EAAE,YAAY,EAAE,GAAG,CAAC,EACpF,cAAc,CAAC,KAAK,IAAI,CACvB,8BACE,KAAC,aAAa,IACZ,WAAW,EAAE,CAAC,CAAC,EAAE;oCACf,CAAC,CAAC,cAAc,EAAE,CAAC;oCACnB,MAAM,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC;gCAC5C,CAAC,EACD,MAAM,EAAE,YAAY,CAAC,aAAa,EAClC,OAAO,EAAE,aAAa,CACpB,GAAG,EACH,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,mBAAmB,CAAC,KAAK,IAAI,GAAG,KAAK,IAAI,CACpE,EACD,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,YAE7B,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,WACN,EAChB,KAAC,aAAa,IACZ,WAAW,EAAE,CAAC,CAAC,EAAE;oCACf,CAAC,CAAC,cAAc,EAAE,CAAC;oCACnB,MAAM,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;gCAC1C,CAAC,EACD,MAAM,EAAE,YAAY,CAAC,WAAW,EAChC,OAAO,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAC/B,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,YAE7B,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,WAAG,WACb,YACf,CACJ,EACA,cAAc,CAAC,WAAW,IAAI,CAC7B,8BACE,KAAC,aAAa,IACZ,WAAW,EAAE,CAAC,CAAC,EAAE;oCACf,CAAC,CAAC,cAAc,EAAE,CAAC;oCACnB,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;gCAC/B,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EACtB,OAAO,EAAE,qBAAqB,CAAC,QAAQ,CAAC,YAExC,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,WAAG,WACR,EAChB,KAAC,aAAa,IACZ,WAAW,EAAE,CAAC,CAAC,EAAE;oCACf,CAAC,CAAC,cAAc,EAAE,CAAC;oCACnB,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;gCAChC,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,EACxB,OAAO,EAAE,qBAAqB,CAAC,UAAU,CAAC,YAE1C,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,WAAG,WACV,YACf,CACJ,YACI,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,aACnC,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE;wBAC3B,OAAO,CACL,KAAC,aAAa,IACZ,WAAW,EAAE,CAAC,CAAC,EAAE;gCACf,CAAC,CAAC,cAAc,EAAE,CAAC;gCACnB,MAAM,CAAC,WAAW,EAAE,CAAC;4BACvB,CAAC,EACD,OAAO,EAAE,MAAM,CAAC,IAAI,YAGpB,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,WAAI,IAFtB,MAAM,CAAC,IAAI,CAGF,CACjB,CAAC;oBACJ,CAAC,CAAC,EACD,cAAc,CAAC,KAAK,IAAI,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,WAAI,EAClE,cAAc,CAAC,MAAM,IAAI,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,WAAI,YACpD,YACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FC, useState, useEffect, useRef, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { Editor } from 'tinymce';\n\nimport {\n  Flex,\n  Icon,\n  useArrows,\n  useI18n,\n  defaultThemeProp,\n  TranslationPack,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { CustomAction } from '../Editor.types';\n\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\n\nregisterIcon(indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(\n  ({ sticky, theme }) => `\n  background-color: ${theme.base.palette['primary-background']};\n  border-radius: calc(0.25 * ${theme.base['border-radius']});\n  overflow: auto;\n  padding: 0.125rem;\n  ${\n    sticky &&\n    css`\n      position: sticky;\n      bottom: 0;\n    `\n  }\n`\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps {\n  features: Features[];\n  sticky?: boolean;\n  editor: Editor;\n  customActions?: CustomAction[];\n}\n\ntype StyleButtonType = {\n  style: StyleType;\n  text: string;\n  icon?: string;\n  label?: string;\n  format: string;\n  element?: string;\n  tooltip: string;\n};\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n  editor: Editor,\n  t: TranslationFunction<TranslationPack>,\n  activeStyles: { [key: string]: boolean },\n  osx: boolean\n) {\n  const inlineStyleButtons: StyleButtonType[] = [\n    {\n      style: 'BOLD',\n      text: 'B',\n      format: 'Bold',\n      label: t('rte_bold'),\n      element: 'strong',\n      tooltip: getKeyCommand(\n        osx,\n        ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`\n      )\n    },\n    {\n      style: 'ITALIC',\n      text: 'I',\n      format: 'Italic',\n      label: t('rte_italic'),\n      element: 'i',\n      tooltip: getKeyCommand(\n        osx,\n        ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`\n      )\n    },\n    {\n      style: 'STRIKE-THROUGH',\n      text: 'S',\n      format: 'Strikethrough',\n      element: 's',\n      label: t('rte_strike_through'),\n      tooltip: getKeyCommand(\n        osx,\n        ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`\n      )\n    }\n  ];\n\n  return inlineStyleButtons.map(({ format, style, text, label, tooltip }) => {\n    return (\n      <ToolbarButton\n        key={style}\n        onMouseDown={e => {\n          e.preventDefault();\n          if (editor.hasFocus()) {\n            editor.execCommand(format);\n          } else {\n            editor.focus();\n            setTimeout(() => {\n              editor.execCommand(format);\n            }, 0);\n          }\n        }}\n        styleType={style}\n        active={activeStyles[format.toLowerCase()]}\n        tooltip={tooltip}\n        label={label}\n      >\n        {text}\n      </ToolbarButton>\n    );\n  });\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n  return features.reduce((acc, feature) => {\n    return { ...acc, [feature]: true };\n  }, {} as { [F in Features]: boolean });\n}\n\nconst Toolbar: FC<ToolbarProps> = ({ features, sticky, editor, customActions }: ToolbarProps) => {\n  const t = useI18n();\n  const [osx, setOsx] = useState(false);\n  const toolbarRef = useRef<HTMLElement>(null);\n\n  useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });\n\n  const [activeFeatures, setActiveFeatures] = useState(createActiveFeaturesMap(features));\n  const [activeStyles, setActiveStyles] = useState(() => ({\n    bold: false,\n    italic: false,\n    strikethrough: false,\n    unorderedList: false,\n    orderedList: false\n  }));\n\n  const getIndentationToolTip = (type: 'indent' | 'unindent') =>\n    getKeyCommand(osx, ({ shift, alt }) =>\n      type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n    );\n\n  useEffect(() => {\n    setActiveFeatures(createActiveFeaturesMap(features));\n  }, [features]);\n\n  useEffect(() => {\n    if (navigator.appVersion.includes('Mac')) setOsx(true);\n  }, []);\n\n  const getActiveStyles = useCallback(() => {\n    if (editor.hasFocus()) {\n      setActiveStyles({\n        bold: editor.queryCommandState('Bold'),\n        italic: editor.queryCommandState('Italic'),\n        strikethrough: editor.queryCommandState('Strikethrough'),\n        unorderedList: editor.queryCommandState('InsertUnorderedList'),\n        orderedList: editor.queryCommandState('InsertOrderedList')\n      });\n    } else {\n      setActiveStyles({\n        bold: false,\n        italic: false,\n        strikethrough: false,\n        unorderedList: false,\n        orderedList: false\n      });\n    }\n  }, [editor, setActiveStyles]);\n\n  useEffect(() => {\n    getActiveStyles();\n    editor.on('SelectionChange', getActiveStyles);\n    return () => {\n      editor.off('SelectionChange', getActiveStyles);\n    };\n  }, [editor, getActiveStyles]);\n\n  return (\n    <Flex as={StyledToolbar} sticky={sticky} container={{ justify: 'between' }} ref={toolbarRef}>\n      <Flex container={{ alignItems: 'end' }}>\n        <TextSelect osx={osx} editor={editor} />\n        {activeFeatures['inline-styling'] && renderStyleButtons(editor, t, activeStyles, osx)}\n        {activeFeatures.lists && (\n          <>\n            <ToolbarButton\n              onMouseDown={e => {\n                e.preventDefault();\n                editor.execCommand('InsertUnorderedList');\n              }}\n              active={activeStyles.unorderedList}\n              tooltip={getKeyCommand(\n                osx,\n                ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n              )}\n              label={t('rte_bulleted_list')}\n            >\n              <Icon name='list' />\n            </ToolbarButton>\n            <ToolbarButton\n              onMouseDown={e => {\n                e.preventDefault();\n                editor.execCommand('InsertOrderedList');\n              }}\n              active={activeStyles.orderedList}\n              tooltip={t('rte_numbered_list')}\n              label={t('rte_numbered_list')}\n            >\n              <Icon name='list-number' />\n            </ToolbarButton>\n          </>\n        )}\n        {activeFeatures.indentation && (\n          <>\n            <ToolbarButton\n              onMouseDown={e => {\n                e.preventDefault();\n                editor.execCommand('Indent');\n              }}\n              label={t('rte_indent')}\n              tooltip={getIndentationToolTip('indent')}\n            >\n              <Icon name='indent' />\n            </ToolbarButton>\n            <ToolbarButton\n              onMouseDown={e => {\n                e.preventDefault();\n                editor.execCommand('Outdent');\n              }}\n              label={t('rte_unindent')}\n              tooltip={getIndentationToolTip('unindent')}\n            >\n              <Icon name='unindent' />\n            </ToolbarButton>\n          </>\n        )}\n      </Flex>\n      <Flex container={{ alignItems: 'end' }}>\n        {customActions?.map(action => {\n          return (\n            <ToolbarButton\n              onMouseDown={e => {\n                e.preventDefault();\n                action.onMouseDown();\n              }}\n              tooltip={action.text}\n              key={action.icon}\n            >\n              <Icon name={action.icon} />\n            </ToolbarButton>\n          );\n        })}\n        {activeFeatures.links && <AnchorButton editor={editor} osx={osx} />}\n        {activeFeatures.images && <ImageButton editor={editor} />}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Toolbar;\n"]}

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

@@ -0,0 +1,4 @@
+export { default as Editor } from './Editor';
+export { EditorProps, EditorState } from './Editor.types';
+export { useEditorContext } from './Editor.context';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/Editor/index.js

@@ -0,0 +1,3 @@
+export { default as Editor } from './Editor';
+export { useEditorContext } from './Editor.context';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default as Editor } from './Editor';\nexport { EditorProps, EditorState } from './Editor.types';\nexport { useEditorContext } from './Editor.context';\n"]}

package/lib/components/RichTextEditor/RichTextEditor.js

@@ -341,7 +341,7 @@ const RichTextEditor = forwardRef((props, ref) => {
                                     if (!disabled) {
                                         onEditorFocus({ focusEditor: true });
                                     }
-                                }, children: _jsx(Editable, { id: id, renderElement: nodeRenderer, renderLeaf: leafRenderer, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: placeholder, onFocus: event => {
+                                }, children: _jsx(Editable, { id: id, renderElement: nodeRenderer, renderLeaf: leafRenderer, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: placeholder, onFocus: (event) => {
                                         onEditorFocus({ focusEditor: true, event });
                                     }, onBlur: () => blurEditor(), disabled: disabled, readOnly: readOnly, onPaste: onPaste, tabIndex: disabled ? -1 : undefined }, void 0) }, void 0), !markdownOnly && !readOnly && toolbar?.length ? (_jsx(Toolbar, { features: toolbar, sticky: toolbarSticky, setFocusableBtn: el => {
                                     setFocusableToolbarBtn(el);

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  PropsWithoutRef,\n  useState,\n  useRef,\n  useMemo,\n  FC,\n  useEffect,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  useImperativeHandle,\n  ClipboardEvent,\n  FocusEvent,\n  useReducer\n} from 'react';\n// Import the Slate editor factory.\nimport { createEditor, Editor, Node, Element, Text, Range, Transforms } from 'slate';\n// Import the Slate components and React plugin.\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react';\nimport { withHistory } from 'slate-history';\nimport styled from 'styled-components';\nimport { VirtualElement } from '@popperjs/core';\n\nimport {\n  FormField,\n  FormControl,\n  StyledPopover,\n  useTheme,\n  useUID,\n  createUID,\n  debounce,\n  ForwardProps,\n  Popover,\n  Menu,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, { EditorContainer, StyledFormField } from './RichTextEditor.styles';\nimport Toolbar from './Toolbar/Toolbar';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { onSearchChange } from './utils/search';\nimport EditorCommands from './utils/EditorCommands';\nimport ListCommands from './utils/ListCommands';\nimport { convertHtml } from './utils/htmlConverter';\nimport { convertSlateToHtml } from './utils/slateConverter';\nimport { RichTextEditorState, RichTextEditorProps } from './RichTextEditor.types';\nimport { RichTextEditorContext, RichTextEditorContextValue } from './RichTextEditor.context';\nimport { convertMarkdownForEditor } from './utils/markdownConverter';\n\ntype SyntheticActionType = 'prev' | 'next' | 'child' | 'parent' | 'list_change' | 'set' | 'clear';\n\nconst withVoids = (editor: Editor): ReactEditor => {\n  editor.isVoid = element => {\n    if (element.type === 'image' || element.type === 'image-placeholder') {\n      return true;\n    }\n    return false;\n  };\n\n  return editor as ReactEditor;\n};\n\nconst syntheticFocusReducer = (\n  currentId: string | undefined,\n  action: {\n    type: SyntheticActionType;\n    menuItems: MenuProps['items'];\n    selectedItemId?: MenuItemProps['id'];\n  }\n): string | undefined => {\n  const { type, menuItems, selectedItemId } = action;\n  switch (type) {\n    case 'child':\n      // return first item id if top-level\n      if (!currentId) return menuItems[0].id;\n      // if currently highlighted item has children, select first of them\n      return menuHelpers.getItem(menuItems, currentId)?.items?.[0].id;\n    case 'parent':\n      // find and return parent of currently selected item\n      return menuHelpers.getParentItem(menuItems, currentId)?.id;\n    case 'next':\n      // return next sibling of currently selected item\n      return menuHelpers.getNextItem(menuItems, currentId)?.id ?? currentId;\n    case 'prev':\n      // return prev sibling of currently selected item\n      return menuHelpers.getPrevItem(menuItems, currentId)?.id ?? currentId;\n    case 'list_change':\n      // if currently selected item does not exist in new list, select first one\n      if (currentId && menuHelpers.getItem(menuItems, currentId)) return currentId;\n      return menuItems[0]?.id;\n    case 'set':\n      // return arbitrary selected item id if it is in the tree; undefined otherwise\n      return selectedItemId ? menuHelpers.getItem(menuItems, selectedItemId)?.id : undefined;\n    case 'clear':\n      return undefined;\n    default:\n      return currentId;\n  }\n};\n\nconst StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nconst RichTextEditor: FC<RichTextEditorProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RichTextEditorProps>, ref: RichTextEditorProps['ref']) => {\n    const {\n      components: {\n        'text-area': { 'min-height': minHeight }\n      }\n    } = useTheme();\n    const uid = useUID();\n    const {\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      disabled,\n      readOnly,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      toolbar,\n      onImageAdded,\n      markdownOnly,\n      searchTriggers,\n      onSearch,\n      getSearchItemReplacement,\n      searchRenderers,\n      menu,\n      height = { min: minHeight },\n      defaultValue,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const formFieldRef = useRef<HTMLElement>(null);\n    const editor = useMemo(() => withVoids(withReact(withHistory(createEditor()))), []);\n    const [value, setValue] = useState<(Element | Text)[]>(() =>\n      defaultValue && !markdownOnly\n        ? convertHtml(defaultValue)\n        : convertMarkdownForEditor(defaultValue, searchRenderers)\n    );\n    const [toolbarPopover, setToolbarPopover] = useState(false);\n    const [toolbarSticky, setToolbarSticky] = useState(false);\n    const [focusableToolbarBtn, setFocusableToolbarBtn] = useState<HTMLElement | null>(null);\n    const [focusedId, dispatchFocus] = useReducer(syntheticFocusReducer, undefined);\n\n    const [popoverTarget, setPopoverTarget] = useState<Range | null>(null);\n    const [searchEl, setSearchEl] = useState<VirtualElement | null>(null);\n\n    const updateToolbarStyle = () => {\n      if ((formFieldRef.current?.offsetHeight || 0) > window.innerHeight) {\n        setToolbarSticky(true);\n      } else {\n        setToolbarSticky(false);\n      }\n    };\n\n    const debouncedUpdateToolbarStyle = debounce(updateToolbarStyle, 200);\n\n    const getPlainText = () => {\n      return value\n        .map(node => {\n          if (markdownOnly && (node as Element).children) {\n            return (node as Element).children\n              .map(textNode => (textNode as Text).searchResult?.markdown || (textNode as Text).text)\n              .join('');\n          }\n          return Node.string(node);\n        })\n        .join('\\n');\n    };\n\n    const onEditorFocus: RichTextEditorContextValue['onEditorFocus'] = ({\n      event,\n      force,\n      focusEditor,\n      runAfterFocus\n    }) => {\n      if (focusEditor) {\n        setTimeout(() => {\n          if (!ReactEditor.isFocused(editor)) {\n            ReactEditor.focus(editor);\n            onFocus?.();\n          }\n        }, 0);\n      }\n\n      if (runAfterFocus && (force || (!disabled && !toolbarPopover))) {\n        setTimeout(runAfterFocus, 0);\n      } else {\n        event?.stopPropagation();\n      }\n    };\n\n    const blurEditor = (force?: boolean) => {\n      if (force) ReactEditor.blur(editor);\n      if (ReactEditor.isFocused(editor)) {\n        onBlur?.();\n      }\n    };\n\n    useImperativeHandle<any, RichTextEditorState>(\n      ref,\n      () => ({\n        focus: () => {\n          onEditorFocus({ focusEditor: true });\n        },\n        getPlainText: () => {\n          return getPlainText();\n        },\n        getRichText: () => {\n          return JSON.stringify(value);\n        },\n        getHtml: () => {\n          return convertSlateToHtml(value);\n        },\n        clear: () => {\n          const point = { path: [0, 0], offset: 0 };\n          editor.selection = { anchor: point, focus: point };\n          setValue([\n            {\n              type: 'paragraph',\n              children: [{ text: '' }]\n            }\n          ]);\n        },\n        appendImage: ({ src, alt }, imageId) => {\n          const path = EditorCommands.appendImage(editor, { src, alt }, imageId);\n          if (path) {\n            Transforms.select(editor, { anchor: path, focus: path });\n            ReactEditor.focus(editor);\n          }\n        },\n        insertText: (text: string) => {\n          editor.insertText(text);\n        },\n        insertHtml: (html: string, overwrite: boolean = false) => {\n          setValue(prevValue => {\n            if (overwrite) {\n              const point = { path: [0, 0], offset: 0 };\n              editor.selection = { anchor: point, focus: point };\n              return convertHtml(html !== '' ? html : '<p></p>');\n            }\n            return [...prevValue, ...convertHtml(html)];\n          });\n        }\n      }),\n      [value, setValue]\n    );\n\n    const onMenuItemClick = (itemId: string, e: MouseEvent<any> | KeyboardEvent<any>) => {\n      // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.\n      menu?.onItemClick?.(itemId, e as MouseEvent<any>);\n      const replacement = getSearchItemReplacement?.(itemId);\n      if (replacement) {\n        let node: Node;\n\n        if (replacement.markdown && replacement.component && replacement.props) {\n          node = {\n            text: replacement.text,\n            searchResult: {\n              markdown: replacement.markdown,\n              component: replacement.component,\n              props: replacement.props,\n              // Prevents copying searchResult attribute onPaste\n              toJSON: () => undefined\n            }\n          };\n        } else {\n          node = { text: replacement.text };\n        }\n\n        EditorCommands.replaceWithNodes(editor, popoverTarget, node);\n      }\n    };\n\n    const onKeyDown = useCallback(\n      (event: KeyboardEvent<any>) => {\n        if (popoverTarget && menu) {\n          switch (event.key) {\n            case 'ArrowDown':\n              event.preventDefault();\n              dispatchFocus({ type: 'next', menuItems: menu.items, selectedItemId: focusedId });\n              break;\n            case 'ArrowUp':\n              event.preventDefault();\n              dispatchFocus({ type: 'prev', menuItems: menu.items, selectedItemId: focusedId });\n              break;\n            case 'Enter':\n              event.preventDefault();\n              if (focusedId) {\n                onMenuItemClick(focusedId, event);\n                dispatchFocus({ type: 'clear', menuItems: menu.items });\n              }\n              break;\n            case 'Escape':\n              event.preventDefault();\n              setPopoverTarget(null);\n              break;\n            default:\n              break;\n          }\n        } else if (event.key === 'Tab' && !event.shiftKey) {\n          if (focusableToolbarBtn) {\n            focusableToolbarBtn.focus();\n            event.preventDefault();\n          }\n        } else {\n          ListCommands.checkListEnter(editor, event);\n          EditorCommands.checkLinkBreak(editor, event);\n          EditorCommands.checkSearchDownKeys(editor, event);\n          EditorCommands.checkImageEnter(editor, event);\n          EditorCommands.checkKeyCommands(editor, event);\n        }\n      },\n      [menu, focusedId, popoverTarget, focusableToolbarBtn]\n    );\n\n    const onKeyUp = (event: KeyboardEvent<any>) => {\n      EditorCommands.checkSearchUpKeys(editor, event);\n    };\n\n    // Adds an image placeholder to be replaced later in time by an image\n    const addImage = (file: File) => {\n      const placeholderId = EditorCommands.appendImagePlaceholder(editor);\n      if (placeholderId) onImageAdded?.(file, placeholderId);\n    };\n\n    const onPaste = (e: ClipboardEvent) => {\n      let image;\n      for (let i = 0; i < e.clipboardData.items.length; i += 1) {\n        const item = e.clipboardData.items[i];\n\n        if (item.type.startsWith('image')) {\n          image = item.getAsFile();\n        }\n      }\n\n      if (image) {\n        e.preventDefault();\n        addImage(image);\n      }\n    };\n\n    const onDrop = (e: DragEvent) => {\n      e.preventDefault();\n      if (e.dataTransfer) {\n        Array.from(e.dataTransfer.files).forEach(file => {\n          if (file.type.includes('image')) {\n            addImage(file);\n          }\n        });\n      }\n    };\n\n    useEffect(() => {\n      if (popoverTarget) {\n        setSearchEl(ReactEditor.toDOMRange(editor, popoverTarget) as VirtualElement);\n      }\n    }, [popoverTarget]);\n\n    useEffect(() => {\n      onChange?.();\n    }, [value]);\n\n    useEffect(() => {\n      if (menu && popoverTarget) {\n        dispatchFocus({\n          type: 'set',\n          menuItems: menu.items,\n          selectedItemId: menu.items[0]?.id\n        });\n      }\n    }, [menu, popoverTarget]);\n\n    useEffect(() => {\n      if (autoFocus) {\n        setTimeout(() => {\n          ReactEditor.focus(editor);\n        }, 0);\n      }\n    }, []);\n\n    return (\n      <RichTextEditorContext.Provider\n        value={{\n          addImage,\n          setPopoverOpen: setToolbarPopover,\n          onEditorFocus,\n          disabled: disabled || false\n        }}\n      >\n        <FormField\n          as={StyledFormField}\n          toolbar={!!(!markdownOnly && toolbar?.length)}\n          label={\n            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n            <span onClick={() => onEditorFocus({ focusEditor: true })}>{label}</span>\n          }\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          onDrop={onDrop}\n          onFocus={(e: FocusEvent) => {\n            if (e.target === formFieldRef.current && !disabled) {\n              onEditorFocus({ focusEditor: true });\n            }\n          }}\n          ref={formFieldRef}\n          aria-label={`${label} ${\n            !markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''\n          }`}\n          tabIndex={disabled ? -1 : undefined}\n        >\n          <Slate\n            editor={editor}\n            value={value}\n            onChange={newValue => {\n              if (!disabled) {\n                setValue(newValue);\n                debouncedUpdateToolbarStyle();\n\n                if (searchTriggers && onSearch && markdownOnly) {\n                  const res = searchTriggers.flatMap(({ trigger, regex }) => {\n                    for (let i = 0; i < 10; i += 1) {\n                      try {\n                        const groupId = createUID();\n                        return [\n                          {\n                            trigger,\n                            groupId: `g${groupId}`,\n                            regex: new RegExp(\n                              String.raw`(?:^|\\s)(?<match>${trigger}(?<g${groupId}>${\n                                regex || String.raw`\\w*`\n                              }))$`\n                            )\n                          }\n                        ];\n                      } catch (e: unknown) {\n                        if (!(e instanceof SyntaxError)) throw e;\n                      }\n                    }\n\n                    // Failsafe\n                    return [];\n                  });\n\n                  let search;\n                  for (let i = 0; i < res.length; i += 1) {\n                    search = onSearchChange(editor, res[i]);\n                    if (search) break;\n                  }\n\n                  if (search) {\n                    setPopoverTarget(search.target);\n                    onSearch({ search: search.search, trigger: search.trigger });\n                  } else {\n                    setPopoverTarget(null);\n                  }\n                }\n              }\n            }}\n          >\n            <FormControl\n              {...restProps}\n              ref={ref}\n              ariaLabel={label}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n              status={status}\n              as={StyledRichTextEditor}\n              toolbar={!!(!markdownOnly && toolbar?.length)}\n              onClick={() => {\n                onEditorFocus({ focusEditor: true });\n              }}\n              focused={ReactEditor.isFocused(editor)}\n            >\n              <EditorContainer\n                toolbar={!!(!markdownOnly && toolbar?.length)}\n                containerHeight={height}\n                onClick={() => {\n                  if (!disabled) {\n                    onEditorFocus({ focusEditor: true });\n                  }\n                }}\n              >\n                <Editable\n                  id={id}\n                  renderElement={nodeRenderer}\n                  renderLeaf={leafRenderer}\n                  onKeyDown={onKeyDown}\n                  onKeyUp={onKeyUp}\n                  placeholder={placeholder}\n                  onFocus={event => {\n                    onEditorFocus({ focusEditor: true, event });\n                  }}\n                  onBlur={() => blurEditor()}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  onPaste={onPaste}\n                  tabIndex={disabled ? -1 : undefined}\n                />\n              </EditorContainer>\n              {!markdownOnly && !readOnly && toolbar?.length ? (\n                <Toolbar\n                  features={toolbar}\n                  sticky={toolbarSticky}\n                  setFocusableBtn={el => {\n                    setFocusableToolbarBtn(el);\n                  }}\n                />\n              ) : null}\n            </FormControl>\n            <Popover\n              show={!!popoverTarget && !!menu}\n              strategy='fixed'\n              target={searchEl}\n              placement='bottom-start'\n            >\n              {menu && (\n                <Menu\n                  {...menu}\n                  as={StyledSearchPopover}\n                  currentItemId={focusedId}\n                  mode='action'\n                  onItemClick={onMenuItemClick}\n                />\n              )}\n            </Popover>\n          </Slate>\n        </FormField>\n      </RichTextEditorContext.Provider>\n    );\n  }\n);\n\nexport default RichTextEditor;\n"]}
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  PropsWithoutRef,\n  useState,\n  useRef,\n  useMemo,\n  FC,\n  useEffect,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  useImperativeHandle,\n  ClipboardEvent,\n  FocusEvent,\n  useReducer\n} from 'react';\n// Import the Slate editor factory.\nimport { createEditor, Editor, Node, Element, Text, Range, Transforms } from 'slate';\n// Import the Slate components and React plugin.\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react';\nimport { withHistory } from 'slate-history';\nimport styled from 'styled-components';\nimport { VirtualElement } from '@popperjs/core';\n\nimport {\n  FormField,\n  FormControl,\n  StyledPopover,\n  useTheme,\n  useUID,\n  createUID,\n  debounce,\n  ForwardProps,\n  Popover,\n  Menu,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, { EditorContainer, StyledFormField } from './RichTextEditor.styles';\nimport Toolbar from './Toolbar/Toolbar';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { onSearchChange } from './utils/search';\nimport EditorCommands from './utils/EditorCommands';\nimport ListCommands from './utils/ListCommands';\nimport { convertHtml } from './utils/htmlConverter';\nimport { convertSlateToHtml } from './utils/slateConverter';\nimport { RichTextEditorState, RichTextEditorProps } from './RichTextEditor.types';\nimport { RichTextEditorContext, RichTextEditorContextValue } from './RichTextEditor.context';\nimport { convertMarkdownForEditor } from './utils/markdownConverter';\n\ntype SyntheticActionType = 'prev' | 'next' | 'child' | 'parent' | 'list_change' | 'set' | 'clear';\n\nconst withVoids = (editor: Editor): ReactEditor => {\n  editor.isVoid = element => {\n    if (element.type === 'image' || element.type === 'image-placeholder') {\n      return true;\n    }\n    return false;\n  };\n\n  return editor as ReactEditor;\n};\n\nconst syntheticFocusReducer = (\n  currentId: string | undefined,\n  action: {\n    type: SyntheticActionType;\n    menuItems: MenuProps['items'];\n    selectedItemId?: MenuItemProps['id'];\n  }\n): string | undefined => {\n  const { type, menuItems, selectedItemId } = action;\n  switch (type) {\n    case 'child':\n      // return first item id if top-level\n      if (!currentId) return menuItems[0].id;\n      // if currently highlighted item has children, select first of them\n      return menuHelpers.getItem(menuItems, currentId)?.items?.[0].id;\n    case 'parent':\n      // find and return parent of currently selected item\n      return menuHelpers.getParentItem(menuItems, currentId)?.id;\n    case 'next':\n      // return next sibling of currently selected item\n      return menuHelpers.getNextItem(menuItems, currentId)?.id ?? currentId;\n    case 'prev':\n      // return prev sibling of currently selected item\n      return menuHelpers.getPrevItem(menuItems, currentId)?.id ?? currentId;\n    case 'list_change':\n      // if currently selected item does not exist in new list, select first one\n      if (currentId && menuHelpers.getItem(menuItems, currentId)) return currentId;\n      return menuItems[0]?.id;\n    case 'set':\n      // return arbitrary selected item id if it is in the tree; undefined otherwise\n      return selectedItemId ? menuHelpers.getItem(menuItems, selectedItemId)?.id : undefined;\n    case 'clear':\n      return undefined;\n    default:\n      return currentId;\n  }\n};\n\nconst StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nconst RichTextEditor: FC<RichTextEditorProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RichTextEditorProps>, ref: RichTextEditorProps['ref']) => {\n    const {\n      components: {\n        'text-area': { 'min-height': minHeight }\n      }\n    } = useTheme();\n    const uid = useUID();\n    const {\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      disabled,\n      readOnly,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      toolbar,\n      onImageAdded,\n      markdownOnly,\n      searchTriggers,\n      onSearch,\n      getSearchItemReplacement,\n      searchRenderers,\n      menu,\n      height = { min: minHeight },\n      defaultValue,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const formFieldRef = useRef<HTMLElement>(null);\n    const editor = useMemo(() => withVoids(withReact(withHistory(createEditor()))), []);\n    const [value, setValue] = useState<(Element | Text)[]>(() =>\n      defaultValue && !markdownOnly\n        ? convertHtml(defaultValue)\n        : convertMarkdownForEditor(defaultValue, searchRenderers)\n    );\n    const [toolbarPopover, setToolbarPopover] = useState(false);\n    const [toolbarSticky, setToolbarSticky] = useState(false);\n    const [focusableToolbarBtn, setFocusableToolbarBtn] = useState<HTMLElement | null>(null);\n    const [focusedId, dispatchFocus] = useReducer(syntheticFocusReducer, undefined);\n\n    const [popoverTarget, setPopoverTarget] = useState<Range | null>(null);\n    const [searchEl, setSearchEl] = useState<VirtualElement | null>(null);\n\n    const updateToolbarStyle = () => {\n      if ((formFieldRef.current?.offsetHeight || 0) > window.innerHeight) {\n        setToolbarSticky(true);\n      } else {\n        setToolbarSticky(false);\n      }\n    };\n\n    const debouncedUpdateToolbarStyle = debounce(updateToolbarStyle, 200);\n\n    const getPlainText = () => {\n      return value\n        .map(node => {\n          if (markdownOnly && (node as Element).children) {\n            return (node as Element).children\n              .map(textNode => (textNode as Text).searchResult?.markdown || (textNode as Text).text)\n              .join('');\n          }\n          return Node.string(node);\n        })\n        .join('\\n');\n    };\n\n    const onEditorFocus: RichTextEditorContextValue['onEditorFocus'] = ({\n      event,\n      force,\n      focusEditor,\n      runAfterFocus\n    }) => {\n      if (focusEditor) {\n        setTimeout(() => {\n          if (!ReactEditor.isFocused(editor)) {\n            ReactEditor.focus(editor);\n            onFocus?.();\n          }\n        }, 0);\n      }\n\n      if (runAfterFocus && (force || (!disabled && !toolbarPopover))) {\n        setTimeout(runAfterFocus, 0);\n      } else {\n        event?.stopPropagation();\n      }\n    };\n\n    const blurEditor = (force?: boolean) => {\n      if (force) ReactEditor.blur(editor);\n      if (ReactEditor.isFocused(editor)) {\n        onBlur?.();\n      }\n    };\n\n    useImperativeHandle<any, RichTextEditorState>(\n      ref,\n      () => ({\n        focus: () => {\n          onEditorFocus({ focusEditor: true });\n        },\n        getPlainText: () => {\n          return getPlainText();\n        },\n        getRichText: () => {\n          return JSON.stringify(value);\n        },\n        getHtml: () => {\n          return convertSlateToHtml(value);\n        },\n        clear: () => {\n          const point = { path: [0, 0], offset: 0 };\n          editor.selection = { anchor: point, focus: point };\n          setValue([\n            {\n              type: 'paragraph',\n              children: [{ text: '' }]\n            }\n          ]);\n        },\n        appendImage: ({ src, alt }, imageId) => {\n          const path = EditorCommands.appendImage(editor, { src, alt }, imageId);\n          if (path) {\n            Transforms.select(editor, { anchor: path, focus: path });\n            ReactEditor.focus(editor);\n          }\n        },\n        insertText: (text: string) => {\n          editor.insertText(text);\n        },\n        insertHtml: (html: string, overwrite: boolean = false) => {\n          setValue(prevValue => {\n            if (overwrite) {\n              const point = { path: [0, 0], offset: 0 };\n              editor.selection = { anchor: point, focus: point };\n              return convertHtml(html !== '' ? html : '<p></p>');\n            }\n            return [...prevValue, ...convertHtml(html)];\n          });\n        }\n      }),\n      [value, setValue]\n    );\n\n    const onMenuItemClick = (itemId: string, e: MouseEvent<any> | KeyboardEvent<any>) => {\n      // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.\n      menu?.onItemClick?.(itemId, e as MouseEvent<any>);\n      const replacement = getSearchItemReplacement?.(itemId);\n      if (replacement) {\n        let node: Node;\n\n        if (replacement.markdown && replacement.component && replacement.props) {\n          node = {\n            text: replacement.text,\n            searchResult: {\n              markdown: replacement.markdown,\n              component: replacement.component,\n              props: replacement.props,\n              // Prevents copying searchResult attribute onPaste\n              toJSON: () => undefined\n            }\n          };\n        } else {\n          node = { text: replacement.text };\n        }\n\n        EditorCommands.replaceWithNodes(editor, popoverTarget, node);\n      }\n    };\n\n    const onKeyDown = useCallback(\n      (event: KeyboardEvent<any>) => {\n        if (popoverTarget && menu) {\n          switch (event.key) {\n            case 'ArrowDown':\n              event.preventDefault();\n              dispatchFocus({ type: 'next', menuItems: menu.items, selectedItemId: focusedId });\n              break;\n            case 'ArrowUp':\n              event.preventDefault();\n              dispatchFocus({ type: 'prev', menuItems: menu.items, selectedItemId: focusedId });\n              break;\n            case 'Enter':\n              event.preventDefault();\n              if (focusedId) {\n                onMenuItemClick(focusedId, event);\n                dispatchFocus({ type: 'clear', menuItems: menu.items });\n              }\n              break;\n            case 'Escape':\n              event.preventDefault();\n              setPopoverTarget(null);\n              break;\n            default:\n              break;\n          }\n        } else if (event.key === 'Tab' && !event.shiftKey) {\n          if (focusableToolbarBtn) {\n            focusableToolbarBtn.focus();\n            event.preventDefault();\n          }\n        } else {\n          ListCommands.checkListEnter(editor, event);\n          EditorCommands.checkLinkBreak(editor, event);\n          EditorCommands.checkSearchDownKeys(editor, event);\n          EditorCommands.checkImageEnter(editor, event);\n          EditorCommands.checkKeyCommands(editor, event);\n        }\n      },\n      [menu, focusedId, popoverTarget, focusableToolbarBtn]\n    );\n\n    const onKeyUp = (event: KeyboardEvent<any>) => {\n      EditorCommands.checkSearchUpKeys(editor, event);\n    };\n\n    // Adds an image placeholder to be replaced later in time by an image\n    const addImage = (file: File) => {\n      const placeholderId = EditorCommands.appendImagePlaceholder(editor);\n      if (placeholderId) onImageAdded?.(file, placeholderId);\n    };\n\n    const onPaste = (e: ClipboardEvent) => {\n      let image;\n      for (let i = 0; i < e.clipboardData.items.length; i += 1) {\n        const item = e.clipboardData.items[i];\n\n        if (item.type.startsWith('image')) {\n          image = item.getAsFile();\n        }\n      }\n\n      if (image) {\n        e.preventDefault();\n        addImage(image);\n      }\n    };\n\n    const onDrop = (e: DragEvent) => {\n      e.preventDefault();\n      if (e.dataTransfer) {\n        Array.from(e.dataTransfer.files).forEach(file => {\n          if (file.type.includes('image')) {\n            addImage(file);\n          }\n        });\n      }\n    };\n\n    useEffect(() => {\n      if (popoverTarget) {\n        setSearchEl(ReactEditor.toDOMRange(editor, popoverTarget) as VirtualElement);\n      }\n    }, [popoverTarget]);\n\n    useEffect(() => {\n      onChange?.();\n    }, [value]);\n\n    useEffect(() => {\n      if (menu && popoverTarget) {\n        dispatchFocus({\n          type: 'set',\n          menuItems: menu.items,\n          selectedItemId: menu.items[0]?.id\n        });\n      }\n    }, [menu, popoverTarget]);\n\n    useEffect(() => {\n      if (autoFocus) {\n        setTimeout(() => {\n          ReactEditor.focus(editor);\n        }, 0);\n      }\n    }, []);\n\n    return (\n      <RichTextEditorContext.Provider\n        value={{\n          addImage,\n          setPopoverOpen: setToolbarPopover,\n          onEditorFocus,\n          disabled: disabled || false\n        }}\n      >\n        <FormField\n          as={StyledFormField}\n          toolbar={!!(!markdownOnly && toolbar?.length)}\n          label={\n            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n            <span onClick={() => onEditorFocus({ focusEditor: true })}>{label}</span>\n          }\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          status={status}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          onDrop={onDrop}\n          onFocus={(e: FocusEvent) => {\n            if (e.target === formFieldRef.current && !disabled) {\n              onEditorFocus({ focusEditor: true });\n            }\n          }}\n          ref={formFieldRef}\n          aria-label={`${label} ${\n            !markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''\n          }`}\n          tabIndex={disabled ? -1 : undefined}\n        >\n          <Slate\n            editor={editor}\n            value={value}\n            onChange={newValue => {\n              if (!disabled) {\n                setValue(newValue);\n                debouncedUpdateToolbarStyle();\n\n                if (searchTriggers && onSearch && markdownOnly) {\n                  const res = searchTriggers.flatMap(({ trigger, regex }) => {\n                    for (let i = 0; i < 10; i += 1) {\n                      try {\n                        const groupId = createUID();\n                        return [\n                          {\n                            trigger,\n                            groupId: `g${groupId}`,\n                            regex: new RegExp(\n                              String.raw`(?:^|\\s)(?<match>${trigger}(?<g${groupId}>${\n                                regex || String.raw`\\w*`\n                              }))$`\n                            )\n                          }\n                        ];\n                      } catch (e: unknown) {\n                        if (!(e instanceof SyntaxError)) throw e;\n                      }\n                    }\n\n                    // Failsafe\n                    return [];\n                  });\n\n                  let search;\n                  for (let i = 0; i < res.length; i += 1) {\n                    search = onSearchChange(editor, res[i]);\n                    if (search) break;\n                  }\n\n                  if (search) {\n                    setPopoverTarget(search.target);\n                    onSearch({ search: search.search, trigger: search.trigger });\n                  } else {\n                    setPopoverTarget(null);\n                  }\n                }\n              }\n            }}\n          >\n            <FormControl\n              {...restProps}\n              ref={ref}\n              ariaLabel={label}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n              status={status}\n              as={StyledRichTextEditor}\n              toolbar={!!(!markdownOnly && toolbar?.length)}\n              onClick={() => {\n                onEditorFocus({ focusEditor: true });\n              }}\n              focused={ReactEditor.isFocused(editor)}\n            >\n              <EditorContainer\n                toolbar={!!(!markdownOnly && toolbar?.length)}\n                containerHeight={height}\n                onClick={() => {\n                  if (!disabled) {\n                    onEditorFocus({ focusEditor: true });\n                  }\n                }}\n              >\n                <Editable\n                  id={id}\n                  renderElement={nodeRenderer}\n                  renderLeaf={leafRenderer}\n                  onKeyDown={onKeyDown}\n                  onKeyUp={onKeyUp}\n                  placeholder={placeholder}\n                  onFocus={(event: FocusEvent) => {\n                    onEditorFocus({ focusEditor: true, event });\n                  }}\n                  onBlur={() => blurEditor()}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  onPaste={onPaste}\n                  tabIndex={disabled ? -1 : undefined}\n                />\n              </EditorContainer>\n              {!markdownOnly && !readOnly && toolbar?.length ? (\n                <Toolbar\n                  features={toolbar}\n                  sticky={toolbarSticky}\n                  setFocusableBtn={el => {\n                    setFocusableToolbarBtn(el);\n                  }}\n                />\n              ) : null}\n            </FormControl>\n            <Popover\n              show={!!popoverTarget && !!menu}\n              strategy='fixed'\n              target={searchEl}\n              placement='bottom-start'\n            >\n              {menu && (\n                <Menu\n                  {...menu}\n                  as={StyledSearchPopover}\n                  currentItemId={focusedId}\n                  mode='action'\n                  onItemClick={onMenuItemClick}\n                />\n              )}\n            </Popover>\n          </Slate>\n        </FormField>\n      </RichTextEditorContext.Provider>\n    );\n  }\n);\n\nexport default RichTextEditor;\n"]}

package/lib/components/RichTextEditor/Toolbar/ToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ToolbarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, KeyboardEvent, MouseEvent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n  defaultThemeProp,\n  ForwardProps,\n  Tooltip,\n  tryCatch,\n  useConsolidatedRef,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { StyleType } from './Toolbar.types';\n\nexport interface ToolBarButtonProps {\n  tooltip?: string;\n  active?: boolean;\n  styleType?: StyleType;\n  disabled?: boolean;\n  label?: string;\n  onMouseDown?: (e: MouseEvent | KeyboardEvent) => void;\n}\n\nconst StyledToolbarButton = styled.button<ToolBarButtonProps>(props => {\n  const { active, theme, styleType } = props;\n  const size = `calc(4 * ${props.theme.base.spacing})`;\n  const activeColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  return css`\n    background-color: ${active ? activeColor : 'transparent'};\n    border: none;\n    color: ${active ? theme.base.palette.interactive : theme.base.palette['foreground-color']};\n    outline: none;\n    display: inline-flex;\n    line-height: 1;\n    align-items: center;\n    justify-content: center;\n    height: ${size};\n    min-width: ${size};\n    opacity: ${active ? 'inherit' : '0.7'};\n    cursor: pointer;\n\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      box-shadow: none;\n    }\n\n    ${styleType === 'BOLD' &&\n    css`\n      font-weight: bold;\n    `}\n\n    ${styleType === 'ITALIC' &&\n    css`\n      font-style: italic;\n    `}\n\n    ${styleType === 'STRIKE-THROUGH' &&\n    css`\n      text-decoration: line-through;\n    `}\n  `;\n});\n\nStyledToolbarButton.defaultProps = defaultThemeProp;\n\nconst ToolbarButton: FC<ToolBarButtonProps & ForwardProps> = forwardRef(\n  (\n    { tooltip, active, styleType, disabled, label, onMouseDown, ...restProps },\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { disabled: contextDisabled } = useRTEContext();\n    const [el, setEl] = useElement();\n    const toolBarRef = useConsolidatedRef<HTMLButtonElement>(setEl, ref);\n    return (\n      <>\n        <StyledToolbarButton\n          active={active}\n          styleType={styleType}\n          ref={toolBarRef}\n          disabled={contextDisabled || disabled}\n          tabIndex={-1}\n          onKeyPress={(e: KeyboardEvent) => {\n            if (e.key === 'Enter') {\n              onMouseDown?.(e);\n            }\n          }}\n          onMouseDown={onMouseDown}\n          type='button'\n          aria-label={`${label} ${active ? 'active' : ''}`}\n          aria-pressed={active}\n          {...restProps}\n        />\n        {el && tooltip && (\n          <Tooltip target={el} showDelay='none' hideDelay='none'>\n            {tooltip}\n          </Tooltip>\n        )}\n      </>\n    );\n  }\n);\n\nexport default ToolbarButton;\n"]}
+{"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ToolbarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, KeyboardEvent, MouseEvent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n  defaultThemeProp,\n  ForwardProps,\n  Tooltip,\n  tryCatch,\n  useConsolidatedRef,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { StyleType } from './Toolbar.types';\n\nexport interface ToolBarButtonProps {\n  tooltip?: string;\n  active?: boolean;\n  styleType?: StyleType;\n  disabled?: boolean;\n  label?: string;\n  onMouseDown?: (e: MouseEvent | KeyboardEvent) => void;\n}\n\nconst StyledToolbarButton = styled.button<ToolBarButtonProps>(props => {\n  const { active, theme, styleType } = props;\n  const size = `calc(4 * ${props.theme.base.spacing})`;\n  const activeColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  return css`\n    background-color: ${active ? activeColor : 'transparent'};\n    border: none;\n    color: ${active ? theme.base.palette.interactive : theme.base.palette['foreground-color']};\n    outline: none;\n    display: inline-flex;\n    line-height: 1;\n    align-items: center;\n    justify-content: center;\n    height: ${size};\n    min-width: ${size};\n    opacity: ${active ? 'inherit' : '0.7'};\n    cursor: pointer;\n\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      box-shadow: none;\n    }\n\n    ${styleType === 'BOLD' &&\n    css`\n      font-weight: bold;\n    `}\n\n    ${styleType === 'ITALIC' &&\n    css`\n      font-style: italic;\n    `}\n\n    ${styleType === 'STRIKE-THROUGH' &&\n    css`\n      text-decoration: line-through;\n    `}\n  `;\n});\n\nStyledToolbarButton.defaultProps = defaultThemeProp;\n\nconst ToolbarButton: FC<ToolBarButtonProps & ForwardProps> = forwardRef(\n  (\n    { tooltip, active, styleType, disabled, label, onMouseDown, ...restProps },\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const { disabled: contextDisabled } = useRTEContext();\n    const [el, setEl] = useElement();\n    const toolBarRef = useConsolidatedRef<HTMLButtonElement>(setEl, ref);\n    return (\n      <>\n        <StyledToolbarButton\n          active={active}\n          styleType={styleType}\n          ref={toolBarRef}\n          disabled={contextDisabled || disabled}\n          tabIndex={-1}\n          onKeyPress={(e: KeyboardEvent<HTMLButtonElement>) => {\n            if (e.key === 'Enter') {\n              onMouseDown?.(e);\n            }\n          }}\n          onMouseDown={onMouseDown}\n          type='button'\n          aria-label={`${label} ${active ? 'active' : ''}`}\n          aria-pressed={active}\n          {...restProps}\n        />\n        {el && tooltip && (\n          <Tooltip target={el} showDelay='none' hideDelay='none'>\n            {tooltip}\n          </Tooltip>\n        )}\n      </>\n    );\n  }\n);\n\nexport default ToolbarButton;\n"]}

package/lib/components/RichTextEditor/index.d.ts

@@ -4,4 +4,5 @@ export { RichTextEditorProps } from './RichTextEditor.types';
 export { RichTextEditorState } from './RichTextEditor.types';
 export { InteractionRenderers, MDMap, RichTextViewerProps, TokenMap } from './RichTextViewer.types';
 export { default as StyledRichTextEditor } from './RichTextEditor.styles';
+export { default as ToolbarButton } from './Toolbar/ToolbarButton';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/RichTextEditor/index.js

@@ -1,4 +1,5 @@
 export { default as RichTextEditor } from './RichTextEditor';
 export { default as RichTextViewer } from './RichTextViewer';
 export { default as StyledRichTextEditor } from './RichTextEditor.styles';
+export { default as ToolbarButton } from './Toolbar/ToolbarButton';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAI7D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default as RichTextEditor } from './RichTextEditor';\nexport { default as RichTextViewer } from './RichTextViewer';\nexport { RichTextEditorProps } from './RichTextEditor.types';\nexport { RichTextEditorState } from './RichTextEditor.types';\nexport { InteractionRenderers, MDMap, RichTextViewerProps, TokenMap } from './RichTextViewer.types';\nexport { default as StyledRichTextEditor } from './RichTextEditor.styles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAI7D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default as RichTextEditor } from './RichTextEditor';\nexport { default as RichTextViewer } from './RichTextViewer';\nexport { RichTextEditorProps } from './RichTextEditor.types';\nexport { RichTextEditorState } from './RichTextEditor.types';\nexport { InteractionRenderers, MDMap, RichTextViewerProps, TokenMap } from './RichTextViewer.types';\nexport { default as StyledRichTextEditor } from './RichTextEditor.styles';\nexport { default as ToolbarButton } from './Toolbar/ToolbarButton';\n"]}

package/lib/index.d.ts

@@ -1,2 +1,3 @@
+export * from './components/Editor';
 export * from './components/RichTextEditor';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC"}

package/lib/index.js

@@ -1,3 +1,4 @@
 // This file is autogenerated. Any changes will be overwritten.
+export * from './components/Editor';
 export * from './components/RichTextEditor';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,cAAc,6BAA6B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport * from './components/RichTextEditor';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport * from './components/Editor';\nexport * from './components/RichTextEditor';\n"]}