@pega/cosmos-react-rte 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,EAAE,EAQH,MAAM,OAAO,CAAC;AASf,OAAO,EAQL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAUjC,OAAO,EAAuB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAgBlF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CA0dzD,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/lib/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,346 @@
+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, Editor, 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, useOuterEvent } from '@pega/cosmos-react-core';
+import StyledRichTextEditor, { StyledEditorContainer } from './RichTextEditor.styles';
+import Toolbar from './Toolbar/Toolbar';
+import { slateNodeRenderer, slateLeafRenderer } 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 => {
+        return element.type === 'image' || element.type === 'image-placeholder';
+    };
+    return editor;
+};
+const StyledSearchPopover = styled(StyledPopover) `
+  min-width: 20rem;
+`;
+const RichTextEditor = forwardRef(function RichTextEditor(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, additionalInfo, 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 [focus, setFocus] = useState(autoFocus);
+    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(child => {
+                    let textNode = child;
+                    if (child.type === 'text') {
+                        const children = child.children;
+                        // When input is copied and pasted text nodes can be split into multiple texts, this handles that case
+                        if (children.length === 1) {
+                            textNode = children[0];
+                        }
+                        else {
+                            return children
+                                .map(subChild => {
+                                const childText = subChild;
+                                if (childText.searchResult) {
+                                    return childText.searchResult.markdown;
+                                }
+                                return childText.text;
+                            })
+                                .join('');
+                        }
+                    }
+                    return 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);
+                    setFocus(true);
+                    if (!editor.selection) {
+                        Transforms.select(editor, {
+                            anchor: Editor.end(editor, [0]),
+                            focus: Editor.end(editor, [0])
+                        });
+                    }
+                    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?.();
+        }
+        setFocus(false);
+        setPopoverTarget(null);
+    };
+    useOuterEvent('click', [formFieldRef.current], () => blurEditor());
+    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);
+                setFocus(true);
+            }
+        },
+        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);
+            Transforms.insertNodes(editor, { text: ' ' });
+        }
+    };
+    const onKeyDown = useCallback((event) => {
+        if (popoverTarget && menu) {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                setPopoverTarget(null);
+            }
+            if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
+                event.preventDefault();
+            }
+        }
+        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, markdownOnly);
+        }
+    }, [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);
+                }
+            });
+        }
+    };
+    const selectAll = () => {
+        const elements = Array.from(Node.elements(editor));
+        const firstPath = elements[0][1];
+        const lastPath = elements[elements.length - 1][1];
+        Transforms.select(editor, {
+            anchor: Editor.start(editor, firstPath),
+            focus: Editor.end(editor, lastPath)
+        });
+    };
+    useEffect(() => {
+        if (popoverTarget) {
+            setSearchEl(ReactEditor.toDOMRange(editor, popoverTarget));
+        }
+    }, [popoverTarget]);
+    useEffect(() => {
+        onChange?.();
+    }, [value]);
+    useEffect(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                ReactEditor.focus(editor);
+                setFocus(true);
+            }, 0);
+        }
+    }, []);
+    return (_jsx(RichTextEditorContext.Provider
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    , { 
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        value: {
+            addImage,
+            setPopoverOpen: setToolbarPopover,
+            onEditorFocus,
+            disabled: disabled || false
+        }, children: _jsx(FormField, { 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 }), labelHidden: labelHidden, labelFor: '', labelId: labelId, id: id, info: info, status: status, required: required, disabled: disabled, additionalInfo: additionalInfo, 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, onClick: () => {
+                            onEditorFocus({ focusEditor: true });
+                        }, focused: focus, tabIndex: readOnly ? 0 : undefined, children: [_jsx(StyledEditorContainer, { containerHeight: height, onClick: () => {
+                                    if (!disabled) {
+                                        onEditorFocus({ focusEditor: true });
+                                    }
+                                }, children: _jsx(Editable, { id: id, renderElement: slateNodeRenderer, renderLeaf: slateLeafRenderer, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: placeholder, onFocus: (event) => {
+                                        onEditorFocus({ focusEditor: true, event });
+                                    }, onBlur: () => blurEditor(), disabled: disabled, readOnly: readOnly, onPaste: onPaste, tabIndex: disabled ? -1 : undefined, onClick: e => {
+                                        if (e.detail === 3) {
+                                            e.preventDefault();
+                                            selectAll();
+                                        }
+                                    }, "aria-labelledby": labelId }) }), !markdownOnly && !readOnly && toolbar?.length ? (_jsx(Toolbar, { features: toolbar, sticky: toolbarSticky, setFocusableBtn: el => {
+                                    setFocusableToolbarBtn(el);
+                                } })) : null] }), _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 })) })] }) }) }));
+});
+export default RichTextEditor;
+//# sourceMappingURL=RichTextEditor.js.map

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

@@ -0,0 +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} 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  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, { StyledEditorContainer } from './RichTextEditor.styles';\nimport Toolbar from './Toolbar/Toolbar';\nimport { slateNodeRenderer, slateLeafRenderer } 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    return element.type === 'image' || element.type === 'image-placeholder';\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(function RichTextEditor(\n  props: PropsWithoutRef<RichTextEditorProps>,\n  ref: RichTextEditorProps['ref']\n) {\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    additionalInfo,\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 [focus, setFocus] = useState(autoFocus);\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(child => {\n              let textNode = child;\n              if ((child as Element).type === 'text') {\n                const children = (child as Element).children;\n                // When input is copied and pasted text nodes can be split into multiple texts, this handles that case\n                if (children.length === 1) {\n                  textNode = children[0];\n                } else {\n                  return children\n                    .map(subChild => {\n                      const childText = subChild as Text;\n                      if (childText.searchResult) {\n                        return childText.searchResult.markdown;\n                      }\n                      return childText.text;\n                    })\n                    .join('');\n                }\n              }\n              return (textNode as Text).searchResult?.markdown || (textNode as Text).text;\n            })\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          setFocus(true);\n\n          if (!editor.selection) {\n            Transforms.select(editor, {\n              anchor: Editor.end(editor, [0]),\n              focus: Editor.end(editor, [0])\n            });\n          }\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    setFocus(false);\n    setPopoverTarget(null);\n  };\n\n  useOuterEvent('click', [formFieldRef.current], () => blurEditor());\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          setFocus(true);\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      Transforms.insertNodes(editor, { text: ' ' });\n    }\n  };\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent<any>) => {\n      if (popoverTarget && menu) {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          setPopoverTarget(null);\n        }\n        if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {\n          event.preventDefault();\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, markdownOnly);\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  const selectAll = () => {\n    const elements = Array.from(Node.elements(editor));\n    const firstPath = elements[0][1];\n    const lastPath = elements[elements.length - 1][1];\n    Transforms.select(editor, {\n      anchor: Editor.start(editor, firstPath),\n      focus: Editor.end(editor, lastPath)\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        setFocus(true);\n      }, 0);\n    }\n  }, []);\n\n  return (\n    <RichTextEditorContext.Provider\n      // eslint-disable-next-line react/jsx-no-constructed-context-values\n      value={{\n        addImage,\n        setPopoverOpen: setToolbarPopover,\n        onEditorFocus,\n        disabled: disabled || false\n      }}\n    >\n      <FormField\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        additionalInfo={additionalInfo}\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            onClick={() => {\n              onEditorFocus({ focusEditor: true });\n            }}\n            focused={focus}\n            tabIndex={readOnly ? 0 : undefined}\n          >\n            <StyledEditorContainer\n              containerHeight={height}\n              onClick={() => {\n                if (!disabled) {\n                  onEditorFocus({ focusEditor: true });\n                }\n              }}\n            >\n              <Editable\n                id={id}\n                renderElement={slateNodeRenderer}\n                renderLeaf={slateLeafRenderer}\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                onClick={e => {\n                  if (e.detail === 3) {\n                    e.preventDefault();\n                    selectAll();\n                  }\n                }}\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\nexport default RichTextEditor;\n"]}

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

@@ -0,0 +1,10 @@
+import { RichTextEditorProps } from './RichTextEditor.types';
+export declare const StyledEditorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    containerHeight?: RichTextEditorProps['height'];
+}, never>;
+declare const StyledRichTextEditor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    focused?: boolean | undefined;
+}, never>;
+export declare const StyledRichTextViewer: 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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAO,MAAM,qBAAqB;sBACd,mBAAmB,CAAC,QAAQ,CAAC;SA6B/C,CAAC;AAIH,QAAA,MAAM,oBAAoB;;SAuBxB,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAYhC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,73 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';
+import { listStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';
+export const StyledEditorContainer = styled.div(({ containerHeight, theme }) => {
+    return css `
+    padding: ${theme.base.spacing};
+
+    ${typeof containerHeight === 'string' &&
+        css `
+      height: ${containerHeight};
+    `}
+
+    ${typeof containerHeight === 'object' &&
+        css `
+      ${containerHeight.min &&
+            css `
+        min-height: ${containerHeight.min};
+      `}
+
+      ${containerHeight.max &&
+            css `
+        max-height: ${containerHeight.max};
+      `}
+    `}
+
+      &:hover {
+      cursor: text;
+    }
+
+    ${listStyles}
+  `;
+});
+StyledEditorContainer.defaultProps = defaultThemeProp;
+const StyledRichTextEditor = styled.div(({ theme, focused }) => {
+    return css `
+    background-color: ${theme.base.palette['primary-background']};
+    width: 100%;
+    position: relative;
+    border-color: ${theme.components['form-control']['border-color']};
+    box-shadow: none;
+
+    /* Override default styling of slate placeholder. */
+    span[data-slate-placeholder='true'] {
+      position: absolute;
+      inset-block-start: 0;
+      opacity: ${theme.base.transparency['transparent-3']} !important;
+    }
+
+    ${focused &&
+        css `
+      &:not([disabled]) {
+        border-color: ${theme.components['form-control'][':focus']['border-color']};
+        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
+      }
+    `}
+  `;
+});
+StyledRichTextEditor.defaultProps = defaultThemeProp;
+export const StyledRichTextViewer = styled.div `
+  width: 100%;
+  position: relative;
+  overflow-wrap: break-word;
+
+  ${StyledLink} {
+    &:enabled:focus,
+    &:not([disabled]):focus {
+      box-shadow: none;
+      text-decoration: underline;
+    }
+  }
+`;
+export default StyledRichTextEditor;
+//# sourceMappingURL=RichTextEditor.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAI9E,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAE5C,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAChC,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO;;MAE3B,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;gBACS,eAAe;KAC1B;;MAEC,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;QACC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;sBACa,eAAe,CAAC,GAAG;OAClC;;QAEC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;sBACa,eAAe,CAAC,GAAG;OAClC;KACF;;;;;;MAMC,UAAU;GACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAwB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;oBAG5C,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;;;;iBAOnD,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;;MAGnD,OAAO;QACT,GAAG,CAAA;;wBAEiB,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;sBAC5D,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;KAEzE;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;IAK1C,UAAU;;;;;;;CAOb,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';\nimport { listStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';\n\nimport { RichTextEditorProps } from './RichTextEditor.types';\n\nexport const StyledEditorContainer = styled.div<{\n  containerHeight?: RichTextEditorProps['height'];\n}>(({ containerHeight, theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n\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      &:hover {\n      cursor: text;\n    }\n\n    ${listStyles}\n  `;\n});\n\nStyledEditorContainer.defaultProps = defaultThemeProp;\n\nconst StyledRichTextEditor = styled.div<{ focused?: boolean }>(({ theme, focused }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    width: 100%;\n    position: relative;\n    border-color: ${theme.components['form-control']['border-color']};\n    box-shadow: none;\n\n    /* Override default styling of slate placeholder. */\n    span[data-slate-placeholder='true'] {\n      position: absolute;\n      inset-block-start: 0;\n      opacity: ${theme.base.transparency['transparent-3']} !important;\n    }\n\n    ${focused &&\n    css`\n      &:not([disabled]) {\n        border-color: ${theme.components['form-control'][':focus']['border-color']};\n        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n      }\n    `}\n  `;\n});\n\nStyledRichTextEditor.defaultProps = defaultThemeProp;\n\nexport const StyledRichTextViewer = styled.div`\n  width: 100%;\n  position: relative;\n  overflow-wrap: break-word;\n\n  ${StyledLink} {\n    &:enabled:focus,\n    &:not([disabled]):focus {\n      box-shadow: none;\n      text-decoration: underline;\n    }\n  }\n`;\n\nexport default StyledRichTextEditor;\n"]}

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

@@ -0,0 +1,72 @@
+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';
+import { InteractionRenderers } from './RichTextViewer.types';
+export 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 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?: InteractionRenderers[];
+    /** 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,EAAE,CAAC,SAAS,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,oEAAoE;IACpE,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACxD,CAAC;AACF,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB,EAAE,SAAS;IACtE,gEAAgE;IAChE,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,iGAAiG;IACjG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,EAAE,CAAC;IACJ,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,kIAAkI;IAClI,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAClC;QACE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;QAC/B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC5B,IAAI,EAAE,MAAM,CAAC;KACd,GACD,SAAS,CAAC;IACd;;;OAGG;IACH,eAAe,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACzC,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uHAAuH;IACvH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kIAAkI;IAClI,MAAM,CAAC,EACH,MAAM,GACN;QACE,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACN,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC"}

package/lib/components/RichTextEditor/RichTextEditor.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.types.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref, ComponentType } from 'react';\n\nimport { FormControlProps, MenuProps } from '@pega/cosmos-react-core';\nimport { BaseProps } from '@pega/cosmos-react-core/lib/types';\n\nimport { Features } from './Toolbar/Toolbar.types';\nimport { InteractionRenderers } from './RichTextViewer.types';\n\nexport type RichTextEditorState = {\n  focus: () => void;\n  getPlainText: () => string;\n  getRichText: () => string;\n  getHtml: () => string;\n  clear: () => void;\n  appendImage: (imageData: { src: string; alt: string }, id: string) => void;\n  /** This functionality will only work when the editor is focused. */\n  insertText: (text: string) => void;\n  insertHtml: (html: string, overwrite: boolean) => void;\n};\nexport interface RichTextEditorProps extends FormControlProps, BaseProps {\n  /** An array of strings that activate features on the toolbar */\n  toolbar?: Features[];\n  /** Turning on markdown only turns off the tool bar, any rich text features, and input styling */\n  markdownOnly?: boolean;\n  /** A set of characters that designate special search capabilities. */\n  searchTriggers?: {\n    trigger: string;\n    regex?: string;\n  }[];\n  /** Callback triggered on text change following a valid search trigger. */\n  onSearch?: (event: { search: string; trigger: string }) => void;\n  /** Callback triggered on selection of a search result that returns an object representing the node to replace the search with. */\n  getSearchItemReplacement?: (id: string) =>\n    | {\n        markdown?: string;\n        component?: ComponentType<any>;\n        props?: Record<string, any>;\n        text: string;\n      }\n    | undefined;\n  /**\n   * A set of custom renderer configurations to convert markdown for search results.\n   * @internal\n   */\n  searchRenderers?: InteractionRenderers[];\n  /** The menu that will render as a response to a search query. */\n  menu?: MenuProps;\n  /** A callback that supplies an object with functions that can manipulate the editor and retrieve it's content/state */\n  onChange?: () => void;\n  /** A callback that runs if the editor is focused */\n  onFocus?: () => void;\n  /** A callback that runs if the editor loses focus */\n  onBlur?: () => void;\n  /** A callback when an image is added through the toolbar image feature */\n  onImageAdded?: (image: File, id: string) => void;\n  /** Standard placeholder for an input */\n  placeholder?: string;\n  /** Default value for the RTE - HTML String */\n  defaultValue?: string;\n  /** Will automatically focus the RTE on render if true */\n  autoFocus?: boolean;\n  /** Sets the height for the RTE. If no max height is set the RTE will continue to expand, otherwise an overflow will be applied */\n  height?:\n    | string\n    | {\n        min?: string;\n        max?: string;\n      };\n  type?: 'html' | 'markdown';\n  /** Handle to the state. */\n  ref?: Ref<RichTextEditorState>;\n}\n"]}

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { CosmosCustom } from 'slate';
+type CosmosNode = CosmosCustom.Element | CosmosCustom.Text;
+export interface RichTextTreeRendererProps {
+    nodes: CosmosNode[];
+}
+export declare const RichTextTreeRenderer: FC<RichTextTreeRendererProps>;
+export {};
+//# sourceMappingURL=RichTextTreeRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextTreeRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextTreeRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAMrC,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC;AAU3D,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAE9D,CAAC"}

package/lib/components/RichTextEditor/RichTextTreeRenderer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { hasProp } from '@pega/cosmos-react-core';
+import { nodeRenderer, leafRenderer } from './utils/renderers';
+const getNode = (node, index) => {
+    if (hasProp(node, 'children')) {
+        const children = node.children.map((childNode, i) => getNode(childNode, i));
+        return _jsx(Fragment, { children: nodeRenderer({ ...node, children }) }, index);
+    }
+    return _jsx(Fragment, { children: leafRenderer(node) }, index);
+};
+export const RichTextTreeRenderer = ({ nodes }) => {
+    return _jsx(_Fragment, { children: nodes.map((node, i) => getNode(node, i)) });
+};
+//# sourceMappingURL=RichTextTreeRenderer.js.map