@pega/cosmos-react-rte 2.1.3 → 2.1.6

package/lib/components/RichTextEditor/RichTextEditor.js

@@ -1,292 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useMemo, useEffect, useCallback, useImperativeHandle } from 'react';
-// Import the Slate editor factory.
-import { createEditor, Node, Transforms } from 'slate';
-// Import the Slate components and React plugin.
-import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
-import { withHistory } from 'slate-history';
-import styled from 'styled-components';
-import { FormField, FormControl, StyledPopover, useTheme, useUID, createUID, debounce, Popover, Menu } from '@pega/cosmos-react-core';
-import StyledRichTextEditor, { StyledEditorContainer, StyledRichTextFormField } from './RichTextEditor.styles';
-import Toolbar from './Toolbar/Toolbar';
-import { nodeRenderer, leafRenderer } from './utils/renderers';
-import { onSearchChange } from './utils/search';
-import EditorCommands from './utils/EditorCommands';
-import ListCommands from './utils/ListCommands';
-import { convertHtml } from './utils/htmlConverter';
-import { convertSlateToHtml } from './utils/slateConverter';
-import { RichTextEditorContext } from './RichTextEditor.context';
-import { convertMarkdownForEditor } from './utils/markdownConverter';
-const withVoids = (editor) => {
-    editor.isVoid = element => {
-        if (element.type === 'image' || element.type === 'image-placeholder') {
-            return true;
-        }
-        return false;
-    };
-    return editor;
-};
-const StyledSearchPopover = styled(StyledPopover) `
-  min-width: 20rem;
-`;
-const RichTextEditor = forwardRef((props, ref) => {
-    const { components: { 'text-area': { 'min-height': minHeight } } } = useTheme();
-    const uid = useUID();
-    const labelId = useUID();
-    const { id = uid, label, labelHidden, info, status, required, disabled, readOnly, onChange, onFocus, onBlur, placeholder, toolbar, onImageAdded, markdownOnly, searchTriggers, onSearch, getSearchItemReplacement, searchRenderers, menu, height = { min: minHeight }, defaultValue, autoFocus, ...restProps } = props;
-    const formFieldRef = useRef(null);
-    const editor = useMemo(() => withVoids(withReact(withHistory(createEditor()))), []);
-    const [value, setValue] = useState(() => defaultValue && !markdownOnly
-        ? convertHtml(defaultValue)
-        : convertMarkdownForEditor(defaultValue, searchRenderers));
-    const [toolbarPopover, setToolbarPopover] = useState(false);
-    const [toolbarSticky, setToolbarSticky] = useState(false);
-    const [focusableToolbarBtn, setFocusableToolbarBtn] = useState(null);
-    const [popoverTarget, setPopoverTarget] = useState(null);
-    const [searchEl, setSearchEl] = useState(null);
-    const updateToolbarStyle = () => {
-        if ((formFieldRef.current?.offsetHeight || 0) > window.innerHeight) {
-            setToolbarSticky(true);
-        }
-        else {
-            setToolbarSticky(false);
-        }
-    };
-    const debouncedUpdateToolbarStyle = debounce(updateToolbarStyle, 200);
-    const getPlainText = () => {
-        return value
-            .map(node => {
-            if (markdownOnly && node.children) {
-                return node.children
-                    .map(textNode => textNode.searchResult?.markdown || textNode.text)
-                    .join('');
-            }
-            return Node.string(node);
-        })
-            .join('\n');
-    };
-    const onEditorFocus = ({ event, force, focusEditor, runAfterFocus }) => {
-        if (focusEditor) {
-            setTimeout(() => {
-                if (!ReactEditor.isFocused(editor)) {
-                    ReactEditor.focus(editor);
-                    onFocus?.();
-                }
-            }, 0);
-        }
-        if (runAfterFocus && (force || (!disabled && !toolbarPopover))) {
-            setTimeout(runAfterFocus, 0);
-        }
-        else {
-            event?.stopPropagation();
-        }
-    };
-    const blurEditor = (force) => {
-        if (force)
-            ReactEditor.blur(editor);
-        if (ReactEditor.isFocused(editor)) {
-            onBlur?.();
-        }
-        setPopoverTarget(null);
-    };
-    useImperativeHandle(ref, () => ({
-        focus: () => {
-            onEditorFocus({ focusEditor: true });
-        },
-        getPlainText: () => {
-            return getPlainText();
-        },
-        getRichText: () => {
-            return JSON.stringify(value);
-        },
-        getHtml: () => {
-            return convertSlateToHtml(value);
-        },
-        clear: () => {
-            const point = { path: [0, 0], offset: 0 };
-            editor.selection = { anchor: point, focus: point };
-            editor.children = [
-                {
-                    type: 'paragraph',
-                    children: [{ text: '' }]
-                }
-            ];
-            setValue(editor.children);
-        },
-        appendImage: ({ src, alt }, imageId) => {
-            const path = EditorCommands.appendImage(editor, { src, alt }, imageId);
-            if (path) {
-                Transforms.select(editor, { anchor: path, focus: path });
-                ReactEditor.focus(editor);
-            }
-        },
-        insertText: (text) => {
-            editor.insertText(text);
-        },
-        insertHtml: (html, overwrite = false) => {
-            if (overwrite) {
-                const point = { path: [0, 0], offset: 0 };
-                editor.selection = { anchor: point, focus: point };
-                editor.children = convertHtml(html !== '' ? html : '<p></p>');
-            }
-            else {
-                editor.children = [...value, ...convertHtml(html)];
-            }
-            setValue(editor.children);
-        }
-    }), [editor, value]);
-    const onMenuItemClick = (itemId, e) => {
-        // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.
-        menu?.onItemClick?.(itemId, e);
-        const replacement = getSearchItemReplacement?.(itemId);
-        if (replacement) {
-            let node;
-            if (replacement.markdown && replacement.component && replacement.props) {
-                node = {
-                    text: replacement.text,
-                    searchResult: {
-                        markdown: replacement.markdown,
-                        component: replacement.component,
-                        props: replacement.props,
-                        // Prevents copying searchResult attribute onPaste
-                        toJSON: () => undefined
-                    }
-                };
-            }
-            else {
-                node = { text: replacement.text };
-            }
-            EditorCommands.replaceWithNodes(editor, popoverTarget, node);
-        }
-    };
-    const onKeyDown = useCallback((event) => {
-        if (popoverTarget && menu && event.key === 'Escape') {
-            event.preventDefault();
-            setPopoverTarget(null);
-        }
-        else if (event.key === 'Tab' && !event.shiftKey) {
-            if (focusableToolbarBtn) {
-                focusableToolbarBtn.focus();
-                event.preventDefault();
-            }
-        }
-        else {
-            ListCommands.checkListEnter(editor, event);
-            EditorCommands.checkLinkBreak(editor, event);
-            EditorCommands.checkSearchDownKeys(editor, event);
-            EditorCommands.checkImageEnter(editor, event);
-            EditorCommands.checkKeyCommands(editor, event);
-        }
-    }, [menu, popoverTarget, focusableToolbarBtn]);
-    const onKeyUp = (event) => {
-        EditorCommands.checkSearchUpKeys(editor, event);
-    };
-    // Adds an image placeholder to be replaced later in time by an image
-    const addImage = (file) => {
-        const placeholderId = EditorCommands.appendImagePlaceholder(editor);
-        if (placeholderId)
-            onImageAdded?.(file, placeholderId);
-    };
-    const onPaste = (e) => {
-        let image;
-        for (let i = 0; i < e.clipboardData.items.length; i += 1) {
-            const item = e.clipboardData.items[i];
-            if (item.type.startsWith('image')) {
-                image = item.getAsFile();
-            }
-        }
-        if (image) {
-            e.preventDefault();
-            addImage(image);
-        }
-    };
-    const onDrop = (e) => {
-        e.preventDefault();
-        if (e.dataTransfer) {
-            Array.from(e.dataTransfer.files).forEach(file => {
-                if (file.type.includes('image')) {
-                    addImage(file);
-                }
-            });
-        }
-    };
-    useEffect(() => {
-        if (popoverTarget) {
-            setSearchEl(ReactEditor.toDOMRange(editor, popoverTarget));
-        }
-    }, [popoverTarget]);
-    useEffect(() => {
-        onChange?.();
-    }, [value]);
-    useEffect(() => {
-        if (autoFocus) {
-            setTimeout(() => {
-                ReactEditor.focus(editor);
-            }, 0);
-        }
-    }, []);
-    return (_jsx(RichTextEditorContext.Provider, { value: {
-            addImage,
-            setPopoverOpen: setToolbarPopover,
-            onEditorFocus,
-            disabled: disabled || false
-        }, children: _jsx(FormField, { as: StyledRichTextFormField, toolbar: !!(!markdownOnly && toolbar?.length), label: 
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-            _jsx("span", { onClick: () => onEditorFocus({ focusEditor: true }), children: label }, void 0), labelHidden: labelHidden, labelFor: '', labelId: labelId, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onDrop: onDrop, onFocus: (e) => {
-                if (e.target === formFieldRef.current && !disabled) {
-                    onEditorFocus({ focusEditor: true });
-                }
-            }, ref: formFieldRef, "aria-label": `${label} ${!markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''}`, tabIndex: disabled ? -1 : undefined, children: _jsxs(Slate, { editor: editor, value: value, onChange: newValue => {
-                    if (!disabled) {
-                        setValue(newValue);
-                        debouncedUpdateToolbarStyle();
-                        if (searchTriggers && onSearch && markdownOnly) {
-                            const res = searchTriggers.flatMap(({ trigger, regex }) => {
-                                for (let i = 0; i < 10; i += 1) {
-                                    try {
-                                        const groupId = createUID();
-                                        return [
-                                            {
-                                                trigger,
-                                                groupId: `g${groupId}`,
-                                                regex: new RegExp(String.raw `(?:^|\s)(?<match>${trigger}(?<g${groupId}>${regex || String.raw `\w*`}))$`)
-                                            }
-                                        ];
-                                    }
-                                    catch (e) {
-                                        if (!(e instanceof SyntaxError))
-                                            throw e;
-                                    }
-                                }
-                                // Failsafe
-                                return [];
-                            });
-                            let search;
-                            for (let i = 0; i < res.length; i += 1) {
-                                search = onSearchChange(editor, res[i]);
-                                if (search)
-                                    break;
-                            }
-                            if (search) {
-                                setPopoverTarget(search.target);
-                                onSearch({ search: search.search, trigger: search.trigger });
-                            }
-                            else {
-                                setPopoverTarget(null);
-                            }
-                        }
-                    }
-                }, children: [_jsxs(FormControl, { ...restProps, ref: ref, ariaLabel: label, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, toolbar: !!(!markdownOnly && toolbar?.length), onClick: () => {
-                            onEditorFocus({ focusEditor: true });
-                        }, focused: ReactEditor.isFocused(editor), children: [_jsx(StyledEditorContainer, { toolbar: !!(!markdownOnly && toolbar?.length), containerHeight: height, onClick: () => {
-                                    if (!disabled) {
-                                        onEditorFocus({ focusEditor: true });
-                                    }
-                                }, 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, "aria-labelledby": labelId }, void 0) }, void 0), !markdownOnly && !readOnly && toolbar?.length ? (_jsx(Toolbar, { features: toolbar, sticky: toolbarSticky, setFocusableBtn: el => {
-                                    setFocusableToolbarBtn(el);
-                                } }, void 0)) : null] }, void 0), _jsx(Popover, { show: !!popoverTarget && !!menu, strategy: 'fixed', target: searchEl, placement: 'bottom-start', children: menu && (_jsx(Menu, { ...menu, as: StyledSearchPopover, focusControlEl: formFieldRef.current?.querySelector('[role="textbox"]') || undefined, mode: 'action', onItemClick: onMenuItemClick }, void 0)) }, void 0)] }, void 0) }, void 0) }, void 0));
-});
-export default RichTextEditor;
-//# sourceMappingURL=RichTextEditor.js.map

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

@@ -1 +0,0 @@
-{"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} 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} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n  StyledEditorContainer,\n  StyledRichTextFormField\n} 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\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 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 labelId = 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\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      setPopoverTarget(null);\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          editor.children = [\n            {\n              type: 'paragraph',\n              children: [{ text: '' }]\n            }\n          ];\n          setValue(editor.children);\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          if (overwrite) {\n            const point = { path: [0, 0], offset: 0 };\n            editor.selection = { anchor: point, focus: point };\n            editor.children = convertHtml(html !== '' ? html : '<p></p>');\n          } else {\n            editor.children = [...value, ...convertHtml(html)];\n          }\n          setValue(editor.children);\n        }\n      }),\n      [editor, value]\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 && event.key === 'Escape') {\n          event.preventDefault();\n          setPopoverTarget(null);\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, 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 (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={StyledRichTextFormField}\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          labelFor=''\n          labelId={labelId}\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              <StyledEditorContainer\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                  aria-labelledby={labelId}\n                />\n              </StyledEditorContainer>\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                  focusControlEl={\n                    formFieldRef.current?.querySelector('[role=\"textbox\"]') || undefined\n                  }\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/RichTextEditor.styles.d.ts

@@ -1,15 +0,0 @@
-import { RichTextEditorProps } from './RichTextEditor.types';
-interface StyledRichTextEditorProps {
-    toolbar?: boolean;
-    focused?: boolean;
-    readOnly?: boolean;
-    containerHeight?: RichTextEditorProps['height'];
-}
-export declare const listStyles: import("styled-components").FlattenSimpleInterpolation;
-export declare const StyledEditorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
-declare const StyledRichTextEditor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
-export declare const StyledRichTextFormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
-export declare const StyledRichTextViewer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledHtml: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export default StyledRichTextEditor;
-//# sourceMappingURL=RichTextEditor.styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,UAAU,yBAAyB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,wDAmDtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,gIAsCjC,CAAC;AAIF,QAAA,MAAM,oBAAoB,gIAgBxB,CAAC;AAIH,eAAO,MAAM,uBAAuB,gIAUlC,CAAC;AAEH,eAAO,MAAM,oBAAoB,yGAWhC,CAAC;AAEF,eAAO,MAAM,UAAU,yGAsDrB,CAAC;AAIH,eAAe,oBAAoB,CAAC"}

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

@@ -1,189 +0,0 @@
-import styled, { css } from 'styled-components';
-import { calculateFontSize, defaultThemeProp, StyledLink, StyledPopover } from '@pega/cosmos-react-core';
-import { getTableStyles } from './DecoratorComponents/Table';
-export const listStyles = css `
-  ul,
-  ol {
-    padding-inline-start: 2.5rem;
-  }
-
-  li {
-    margin: 0.5rem 0;
-  }
-
-  ul li {
-    ul {
-      margin-inline-start: 1rem;
-      list-style-type: circle;
-    }
-
-    ul ul {
-      margin-inline-start: 2rem;
-      list-style-type: square;
-    }
-
-    ul ul ul {
-      margin-inline-start: 3rem;
-      list-style-type: disc;
-    }
-  }
-
-  ol li {
-    ol {
-      margin-inline-start: 1rem;
-      list-style-type: lower-alpha;
-    }
-
-    ol ol {
-      margin-inline-start: 2rem;
-      list-style-type: lower-roman;
-    }
-
-    ol ol ol {
-      margin-inline-start: 3rem;
-      list-style-type: decimal;
-    }
-  }
-
-  ${StyledPopover} ul, ${StyledPopover} ol {
-    padding-inline-start: 0;
-  }
-
-  ${StyledPopover} li {
-    margin: 0;
-  }
-`;
-export const StyledEditorContainer = styled.div(({ containerHeight, readOnly, toolbar, theme }) => {
-    return css `
-      ${typeof containerHeight === 'string' &&
-        css `
-        height: ${containerHeight};
-      `}
-
-      ${typeof containerHeight === 'object' &&
-        css `
-        ${containerHeight.min &&
-            css `
-          min-height: ${containerHeight.min};
-        `}
-
-        ${containerHeight.max &&
-            css `
-          max-height: ${containerHeight.max};
-        `}
-      `}
-
-      ${(readOnly || toolbar) &&
-        css `
-        padding: ${theme.base.spacing};
-      `}
-
-      ${containerHeight &&
-        css `
-        overflow: auto;
-      `}
-
-      &:hover {
-        cursor: text;
-      }
-
-      ${listStyles}
-    `;
-});
-StyledEditorContainer.defaultProps = defaultThemeProp;
-const StyledRichTextEditor = styled.div(({ toolbar, theme }) => {
-    return css `
-    background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};
-    width: 100%;
-    position: relative;
-
-    &:focus-within:not([disabled]) {
-      border-color: ${theme.components['form-control'][':focus']['border-color']};
-      box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
-    }
-
-    /* Override default styling of slate placeholder. */
-    span[contenteditable='false'] {
-      opacity: ${theme.base.transparency['transparent-3']} !important;
-    }
-  `;
-});
-StyledRichTextEditor.defaultProps = defaultThemeProp;
-export const StyledRichTextFormField = styled.div(({ toolbar }) => {
-    return css `
-    ${StyledRichTextEditor} {
-      ${!toolbar &&
-        css `
-        border: none;
-        box-shadow: none;
-      `}
-    }
-  `;
-});
-export const StyledRichTextViewer = styled.div `
-  width: 100%;
-  position: relative;
-
-  ${StyledLink} {
-    &:enabled:focus,
-    &:not([disabled]):focus {
-      box-shadow: none;
-      text-decoration: underline;
-    }
-  }
-`;
-export const StyledHtml = styled.div(({ theme }) => {
-    const { base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette }, components: { text } } = theme;
-    const fontSize = calculateFontSize(baseFontSize, baseFontScale);
-    return css `
-    ${listStyles}
-    table {
-      ${getTableStyles(theme)}
-    }
-    img {
-      max-width: 100%;
-    }
-    a {
-      color: ${palette.interactive};
-    }
-    pre {
-      white-space: break-spaces;
-    }
-    p {
-      min-height: ${fontSize[text.primary['font-size']]};
-    }
-    h1 {
-      font-size: ${fontSize[text.h1['font-size']]};
-      font-weight: ${text.h1['font-weight']};
-      min-height: ${fontSize[text.h1['font-size']]};
-    }
-    h2 {
-      font-size: ${fontSize[text.h2['font-size']]};
-      font-weight: ${text.h2['font-weight']};
-      min-height: ${fontSize[text.h2['font-size']]};
-    }
-    h3 {
-      font-size: ${fontSize[text.h3['font-size']]};
-      font-weight: ${text.h3['font-weight']};
-      min-height: ${fontSize[text.h3['font-size']]};
-    }
-    h4 {
-      font-size: ${fontSize[text.h4['font-size']]};
-      font-weight: ${text.h4['font-weight']};
-      min-height: ${fontSize[text.h4['font-size']]};
-    }
-    h5 {
-      font-size: ${fontSize[text.h5['font-size']]};
-      font-weight: ${text.h5['font-weight']};
-      min-height: ${fontSize[text.h5['font-size']]};
-    }
-    h6 {
-      font-size: ${fontSize[text.h6['font-size']]};
-      font-weight: ${text.h6['font-weight']};
-      min-height: ${fontSize[text.h6['font-size']]};
-    }
-  `;
-});
-StyledHtml.defaultProps = defaultThemeProp;
-export default StyledRichTextEditor;
-//# sourceMappingURL=RichTextEditor.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  FontSize,\n  StyledLink,\n  StyledPopover\n} from '@pega/cosmos-react-core';\n\nimport { RichTextEditorProps } from './RichTextEditor.types';\nimport { getTableStyles } from './DecoratorComponents/Table';\n\ninterface StyledRichTextEditorProps {\n  toolbar?: boolean;\n  focused?: boolean;\n  readOnly?: boolean;\n  containerHeight?: RichTextEditorProps['height'];\n}\n\nexport const listStyles = css`\n  ul,\n  ol {\n    padding-inline-start: 2.5rem;\n  }\n\n  li {\n    margin: 0.5rem 0;\n  }\n\n  ul li {\n    ul {\n      margin-inline-start: 1rem;\n      list-style-type: circle;\n    }\n\n    ul ul {\n      margin-inline-start: 2rem;\n      list-style-type: square;\n    }\n\n    ul ul ul {\n      margin-inline-start: 3rem;\n      list-style-type: disc;\n    }\n  }\n\n  ol li {\n    ol {\n      margin-inline-start: 1rem;\n      list-style-type: lower-alpha;\n    }\n\n    ol ol {\n      margin-inline-start: 2rem;\n      list-style-type: lower-roman;\n    }\n\n    ol ol ol {\n      margin-inline-start: 3rem;\n      list-style-type: decimal;\n    }\n  }\n\n  ${StyledPopover} ul, ${StyledPopover} ol {\n    padding-inline-start: 0;\n  }\n\n  ${StyledPopover} li {\n    margin: 0;\n  }\n`;\n\nexport const StyledEditorContainer = styled.div<StyledRichTextEditorProps>(\n  ({ containerHeight, readOnly, toolbar, theme }) => {\n    return css`\n      ${typeof containerHeight === 'string' &&\n      css`\n        height: ${containerHeight};\n      `}\n\n      ${typeof containerHeight === 'object' &&\n      css`\n        ${containerHeight.min &&\n        css`\n          min-height: ${containerHeight.min};\n        `}\n\n        ${containerHeight.max &&\n        css`\n          max-height: ${containerHeight.max};\n        `}\n      `}\n\n      ${(readOnly || toolbar) &&\n      css`\n        padding: ${theme.base.spacing};\n      `}\n\n      ${containerHeight &&\n      css`\n        overflow: auto;\n      `}\n\n      &:hover {\n        cursor: text;\n      }\n\n      ${listStyles}\n    `;\n  }\n);\n\nStyledEditorContainer.defaultProps = defaultThemeProp;\n\nconst StyledRichTextEditor = styled.div<StyledRichTextEditorProps>(({ toolbar, theme }) => {\n  return css`\n    background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};\n    width: 100%;\n    position: relative;\n\n    &:focus-within:not([disabled]) {\n      border-color: ${theme.components['form-control'][':focus']['border-color']};\n      box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n    }\n\n    /* Override default styling of slate placeholder. */\n    span[contenteditable='false'] {\n      opacity: ${theme.base.transparency['transparent-3']} !important;\n    }\n  `;\n});\n\nStyledRichTextEditor.defaultProps = defaultThemeProp;\n\nexport const StyledRichTextFormField = styled.div<StyledRichTextEditorProps>(({ toolbar }) => {\n  return css`\n    ${StyledRichTextEditor} {\n      ${!toolbar &&\n      css`\n        border: none;\n        box-shadow: none;\n      `}\n    }\n  `;\n});\n\nexport const StyledRichTextViewer = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${StyledLink} {\n    &:enabled:focus,\n    &:not([disabled]):focus {\n      box-shadow: none;\n      text-decoration: underline;\n    }\n  }\n`;\n\nexport const StyledHtml = styled.div(({ theme }) => {\n  const {\n    base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n    components: { text }\n  } = theme;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n  return css`\n    ${listStyles}\n    table {\n      ${getTableStyles(theme)}\n    }\n    img {\n      max-width: 100%;\n    }\n    a {\n      color: ${palette.interactive};\n    }\n    pre {\n      white-space: break-spaces;\n    }\n    p {\n      min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n    }\n    h1 {\n      font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n      font-weight: ${text.h1['font-weight']};\n      min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n    }\n    h2 {\n      font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n      min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n    }\n    h3 {\n      font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n      font-weight: ${text.h3['font-weight']};\n      min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n    }\n    h4 {\n      font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n      font-weight: ${text.h4['font-weight']};\n      min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n    }\n    h5 {\n      font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n      font-weight: ${text.h5['font-weight']};\n      min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n    }\n    h6 {\n      font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n      font-weight: ${text.h6['font-weight']};\n      min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n    }\n  `;\n});\n\nStyledHtml.defaultProps = defaultThemeProp;\n\nexport default StyledRichTextEditor;\n"]}

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

@@ -1,80 +0,0 @@
-import { Ref, ComponentType } from 'react';
-import { FormControlProps, MenuProps } from '@pega/cosmos-react-core';
-import { BaseProps } from '@pega/cosmos-react-core/lib/types';
-import { Features } from './Toolbar/Toolbar.types';
-export declare type RichTextEditorState = {
-    focus: () => void;
-    getPlainText: () => string;
-    getRichText: () => string;
-    getHtml: () => string;
-    clear: () => void;
-    appendImage: (imageData: {
-        src: string;
-        alt: string;
-    }, id: string) => void;
-    /** This functionality will only work when the editor is focused. */
-    insertText: (text: string) => void;
-    insertHtml: (html: string, overwrite: boolean) => void;
-};
-export interface SearchRenderers {
-    regexPattern: RegExp;
-    getSearchAttributes: (searchResult: RegExpExecArray) => {
-        markdown: string;
-        component: ComponentType<any>;
-        props: Record<string, any>;
-        text: string;
-    } | undefined;
-}
-export interface RichTextEditorProps extends FormControlProps, BaseProps {
-    /** An array of strings that activate features on the toolbar */
-    toolbar?: Features[];
-    /** Turning on markdown only turns off the tool bar, any rich text features, and input styling */
-    markdownOnly?: boolean;
-    /** A set of characters that designate special search capabilities. */
-    searchTriggers?: {
-        trigger: string;
-        regex?: string;
-    }[];
-    /** Callback triggered on text change following a valid search trigger. */
-    onSearch?: (event: {
-        search: string;
-        trigger: string;
-    }) => void;
-    /** Callback triggered on selection of a search result that returns an object representing the node to replace the search with. */
-    getSearchItemReplacement?: (id: string) => {
-        markdown?: string;
-        component?: ComponentType<any>;
-        props?: Record<string, any>;
-        text: string;
-    } | undefined;
-    /**
-     * A set of custom renderer configurations to convert markdown for search results.
-     * @internal
-     * */
-    searchRenderers?: SearchRenderers[];
-    /** The menu that will render as a response to a search query. */
-    menu?: MenuProps;
-    /** 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;
-    /** 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;
-    };
-    type?: 'html' | 'markdown';
-    /** Handle to the state. */
-    ref?: Ref<RichTextEditorState>;
-}
-//# sourceMappingURL=RichTextEditor.types.d.ts.map