npm - @pega/cosmos-react-rte - Versions diffs - 9.0.0-build.9.9 → 9.0.0 - Mend

@pega/cosmos-react-rte 9.0.0-build.9.9 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (191) hide show

package/lib/components/Editor/Toolbar/TableButton.js ADDED Viewed

@@ -0,0 +1,291 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { mix } from 'polished';
+import { Popover, Icon, registerIcon, useOuterEvent, Button, Menu, defaultThemeProp, useI18n, Tooltip, Flex, Text, isInstance, tryCatch } from '@pega/cosmos-react-core';
+import * as tableIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/table.icon';
+import useEscapeKey from '../hooks/useEscapeKey';
+import useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';
+registerIcon(tableIcon);
+const StyledTableButton = styled(Button)(({ theme, $active }) => {
+    const activeColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(3.5 * ${theme.base.spacing});
+    min-width: calc(3.5 * ${theme.base.spacing});
+    padding: 0;
+    ${$active &&
+        css `
+      background-color: ${activeColor};
+      color: ${theme.base.palette.interactive};
+    `}
+  `;
+});
+StyledTableButton.defaultProps = defaultThemeProp;
+const StyledGridContainer = styled.div(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing};
+  `;
+});
+StyledGridContainer.defaultProps = defaultThemeProp;
+const StyledGrid = styled.div(({ theme }) => {
+    return css `
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    gap: calc(0.25 * ${theme.base.spacing});
+    margin-bottom: calc(0.5 * ${theme.base.spacing});
+  `;
+});
+StyledGrid.defaultProps = defaultThemeProp;
+const StyledCell = styled.button.attrs({ type: 'button' })(({ theme, $isSelected }) => {
+    return css `
+      width: calc(2 * ${theme.base.spacing});
+      height: calc(2 * ${theme.base.spacing});
+      border: calc(0.125 * ${theme.base.spacing}) solid
+        ${theme.components['form-control']['border-color']};
+      background-color: ${$isSelected
+        ? theme.base.palette.interactive
+        : theme.components['form-control']['background-color']};
+      cursor: pointer;
+      padding: 0;
+      &:hover {
+        background-color: ${mix(0.7, theme.base.palette.interactive, theme.base.palette['primary-background'])};
+      }
+      &:focus {
+        outline: none;
+        box-shadow: inset 0 0 0 calc(0.25 * ${theme.base.spacing}) ${theme.base.palette.interactive};
+      }
+    `;
+});
+StyledCell.defaultProps = defaultThemeProp;
+const StyledMenuContainer = styled.div(() => {
+    return css `
+    min-width: 12ch;
+  `;
+});
+StyledMenuContainer.defaultProps = defaultThemeProp;
+const StyledButtonGroup = styled.div(({ theme }) => {
+    return css `
+    display: flex;
+    gap: calc(0.5 * ${theme.base.spacing});
+    justify-content: flex-start;
+    margin: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing} 0;
+  `;
+});
+StyledButtonGroup.defaultProps = defaultThemeProp;
+const TableButton = ({ editor, ...restProps }) => {
+    const t = useI18n();
+    const [open, setOpen] = useState(false);
+    const [hoveredCell, setHoveredCell] = useState(null);
+    const [isInTable, setIsInTable] = useState(false);
+    const [selectedSize, setSelectedSize] = useState({
+        row: 1,
+        col: 1
+    });
+    const isInTableRef = useRef(false);
+    const justOpenedRef = useRef(false);
+    const buttonRef = useRef(null);
+    const popoverRef = useRef(null);
+    const gridContainerRef = useRef(null);
+    const menuRef = useRef(null);
+    const firstCellCallbackRef = useCallback((node) => {
+        if (node && open && !isInTable) {
+            node.focus();
+        }
+    }, [open, isInTable]);
+    // Check if cursor is inside a table (check for tableCell since that's where cursor sits)
+    const checkIsInTable = useCallback(() => {
+        return (editor.isActive('table') || editor.isActive('tableCell') || editor.isActive('tableHeader'));
+    }, [editor]);
+    // Update state on editor changes - store in ref so it's never lost
+    useEffect(() => {
+        const updateState = () => {
+            const inTable = checkIsInTable();
+            isInTableRef.current = inTable;
+            setIsInTable(inTable);
+        };
+        updateState();
+        editor.on('selectionUpdate', updateState);
+        editor.on('transaction', updateState);
+        return () => {
+            editor.off('selectionUpdate', updateState);
+            editor.off('transaction', updateState);
+        };
+    }, [editor, checkIsInTable]);
+    useOuterEvent('mousedown', [buttonRef, popoverRef], () => {
+        if (open) {
+            setOpen(false);
+        }
+    });
+    const handleEscapeClose = useCallback(() => {
+        setOpen(false);
+        buttonRef.current?.focus();
+    }, []);
+    useEscapeKey(open, handleEscapeClose, editor);
+    useCloseOnEditorClick(open, handleEscapeClose);
+    const insertTable = useCallback((rows, cols) => {
+        editor.chain().focus().insertTable({ rows, cols, withHeaderRow: false }).run();
+        setOpen(false);
+    }, [editor]);
+    const addRow = () => {
+        editor.chain().focus().addRowAfter().run();
+        setOpen(false);
+    };
+    const addColumn = () => {
+        editor.chain().focus().addColumnAfter().run();
+        setOpen(false);
+    };
+    const deleteRow = () => {
+        editor.chain().focus().deleteRow().run();
+        setOpen(false);
+    };
+    const deleteColumn = () => {
+        editor.chain().focus().deleteColumn().run();
+        setOpen(false);
+    };
+    const deleteTable = () => {
+        editor.chain().focus().deleteTable().run();
+        setOpen(false);
+    };
+    const getTableSizeLabel = (rows, cols) => `${rows} x ${cols}`;
+    const handleCellKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'ArrowRight':
+                e.preventDefault();
+                setSelectedSize(prev => ({ ...prev, col: Math.min(prev.col + 1, 9) }));
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                setSelectedSize(prev => ({ ...prev, col: Math.max(prev.col - 1, 0) }));
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                setSelectedSize(prev => ({ ...prev, row: Math.min(prev.row + 1, 9) }));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setSelectedSize(prev => ({ ...prev, row: Math.max(prev.row - 1, 0) }));
+                break;
+            case 'Enter':
+                e.preventDefault();
+                setSelectedSize(prev => {
+                    insertTable(prev.row + 1, prev.col + 1);
+                    return prev;
+                });
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setOpen(false);
+                buttonRef.current?.focus();
+                break;
+            default:
+                break;
+        }
+    }, [insertTable]);
+    // Memoize cells to avoid re-rendering all 100 cells on every state change
+    const cells = useMemo(() => {
+        const result = [];
+        for (let row = 0; row < 10; row += 1) {
+            for (let col = 0; col < 10; col += 1) {
+                const isHovered = hoveredCell && row <= hoveredCell.row && col <= hoveredCell.col;
+                const isKeyboardSelected = !hoveredCell && row <= selectedSize.row && col <= selectedSize.col;
+                const isFirstCell = row === 0 && col === 0;
+                result.push(_jsx(StyledCell, { ref: isFirstCell ? firstCellCallbackRef : undefined, tabIndex: isFirstCell ? 0 : -1, "$isSelected": isHovered || isKeyboardSelected, onMouseEnter: () => setHoveredCell({ row, col }), onClick: () => {
+                        setSelectedSize({ row, col });
+                        insertTable(row + 1, col + 1);
+                    }, onKeyDown: handleCellKeyDown, "aria-label": t('rte_table_size', [row + 1, col + 1]) }, `${row}-${col}`));
+            }
+        }
+        return result;
+    }, [hoveredCell, selectedSize, firstCellCallbackRef, handleCellKeyDown, insertTable, t]);
+    // Reset selected size to 2x2 default when opening
+    useEffect(() => {
+        if (open && !isInTable) {
+            setSelectedSize({ row: 1, col: 1 });
+        }
+    }, [open, isInTable]);
+    const getGridLabel = () => {
+        if (hoveredCell) {
+            return getTableSizeLabel(hoveredCell.row + 1, hoveredCell.col + 1);
+        }
+        if (selectedSize) {
+            return getTableSizeLabel(selectedSize.row + 1, selectedSize.col + 1);
+        }
+        return '1 x 1';
+    };
+    const gridLabel = getGridLabel();
+    const handleCancel = () => {
+        setOpen(false);
+        buttonRef.current?.focus();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StyledTableButton, { ...restProps, variant: 'simple', type: 'button', icon: false, ref: buttonRef, "data-toolbar-item": 'true', "$active": isInTable, onMouseDown: (e) => {
+                    e.preventDefault();
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Escape' && open) {
+                        e.preventDefault();
+                        setOpen(false);
+                    }
+                }, onFocus: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, onBlur: (e) => {
+                    // Skip blur handling if we just opened the popover
+                    if (justOpenedRef.current)
+                        return;
+                    const { relatedTarget } = e;
+                    // Close if focus moves outside button/popover, or if relatedTarget is null (e.g., clicking into iframe)
+                    // Check gridContainerRef separately since Popover uses a portal
+                    if (!isInstance(relatedTarget, Node) ||
+                        (!buttonRef.current?.contains(relatedTarget) &&
+                            !popoverRef.current?.contains(relatedTarget) &&
+                            !gridContainerRef.current?.contains(relatedTarget) &&
+                            !menuRef.current?.contains(relatedTarget))) {
+                        setOpen(false);
+                    }
+                }, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setIsInTable(isInTableRef.current);
+                    if (!open) {
+                        justOpenedRef.current = true;
+                        setTimeout(() => {
+                            justOpenedRef.current = false;
+                        }, 100);
+                    }
+                    setOpen(!open);
+                }, "aria-expanded": open, "aria-label": t('rte_table'), "aria-haspopup": true, children: _jsx(Icon, { name: 'table' }) }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_table') })), _jsx(Popover, { show: open, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: isInTable ? (_jsx(StyledMenuContainer, { children: _jsx(Menu, { ref: menuRef, focusControlEl: buttonRef.current ?? undefined, items: [
+                            { id: 'add-row', primary: t('rte_add_row') },
+                            { id: 'add-column', primary: t('rte_add_column') },
+                            { id: 'delete-row', primary: t('rte_delete_row') },
+                            { id: 'delete-column', primary: t('rte_delete_column') },
+                            { id: 'delete-table', primary: t('rte_delete_table') }
+                        ], onItemClick: (id) => {
+                            switch (id) {
+                                case 'add-row':
+                                    addRow();
+                                    break;
+                                case 'add-column':
+                                    addColumn();
+                                    break;
+                                case 'delete-row':
+                                    deleteRow();
+                                    break;
+                                case 'delete-column':
+                                    deleteColumn();
+                                    break;
+                                case 'delete-table':
+                                    deleteTable();
+                                    break;
+                                default:
+                                    break;
+                            }
+                        } }) })) : (_jsx(StyledGridContainer, { children: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h2', children: t('rte_insert_table') }), _jsx(StyledGrid, { ref: gridContainerRef, onMouseLeave: () => setHoveredCell(null), children: cells }), _jsx(Text, { variant: 'secondary', children: gridLabel }), _jsxs(StyledButtonGroup, { children: [_jsx(Button, { variant: 'secondary', onClick: handleCancel, children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => insertTable(selectedSize.row + 1, selectedSize.col + 1), children: t('submit') })] })] }) })) })] }));
+};
+export default TableButton;
+//# sourceMappingURL=TableButton.js.map

package/lib/components/Editor/Toolbar/TableButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TableButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TableButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useCallback, useMemo } from 'react';\nimport type { MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n Button,\n Menu,\n defaultThemeProp,\n useI18n,\n Tooltip,\n Flex,\n Text,\n isInstance,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport * as tableIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/table.icon';\n\nimport useEscapeKey from '../hooks/useEscapeKey';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nregisterIcon(tableIcon);\n\nconst StyledTableButton = styled(Button)<{ $active?: boolean }>(({ theme, $active }) => {\n const activeColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: calc(3.5 * ${theme.base.spacing});\n min-width: calc(3.5 * ${theme.base.spacing});\n padding: 0;\n\n ${$active &&\n css`\n background-color: ${activeColor};\n color: ${theme.base.palette.interactive};\n `}\n `;\n});\n\nStyledTableButton.defaultProps = defaultThemeProp;\n\nconst StyledGridContainer = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing};\n `;\n});\n\nStyledGridContainer.defaultProps = defaultThemeProp;\n\nconst StyledGrid = styled.div(({ theme }) => {\n return css`\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n gap: calc(0.25 * ${theme.base.spacing});\n margin-bottom: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledGrid.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.button.attrs({ type: 'button' })<{ $isSelected?: boolean }>(\n ({ theme, $isSelected }) => {\n return css`\n width: calc(2 * ${theme.base.spacing});\n height: calc(2 * ${theme.base.spacing});\n border: calc(0.125 * ${theme.base.spacing}) solid\n ${theme.components['form-control']['border-color']};\n background-color: ${$isSelected\n ? theme.base.palette.interactive\n : theme.components['form-control']['background-color']};\n cursor: pointer;\n padding: 0;\n\n &:hover {\n background-color: ${mix(\n 0.7,\n theme.base.palette.interactive,\n theme.base.palette['primary-background']\n )};\n }\n\n &:focus {\n outline: none;\n box-shadow: inset 0 0 0 calc(0.25 * ${theme.base.spacing}) ${theme.base.palette.interactive};\n }\n `;\n }\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledMenuContainer = styled.div(() => {\n return css`\n min-width: 12ch;\n `;\n});\n\nStyledMenuContainer.defaultProps = defaultThemeProp;\n\nconst StyledButtonGroup = styled.div(({ theme }) => {\n return css`\n display: flex;\n gap: calc(0.5 * ${theme.base.spacing});\n justify-content: flex-start;\n margin: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing} 0;\n `;\n});\n\nStyledButtonGroup.defaultProps = defaultThemeProp;\n\ninterface TableButtonProps {\n editor: TiptapEditor;\n 'data-testid'?: string;\n}\n\nconst TableButton = ({ editor, ...restProps }: TableButtonProps) => {\n const t = useI18n();\n const [open, setOpen] = useState(false);\n const [hoveredCell, setHoveredCell] = useState<{ row: number; col: number } | null>(null);\n const [isInTable, setIsInTable] = useState(false);\n const [selectedSize, setSelectedSize] = useState<{ row: number; col: number }>({\n row: 1,\n col: 1\n });\n const isInTableRef = useRef(false);\n const justOpenedRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const gridContainerRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n\n const firstCellCallbackRef = useCallback(\n (node: HTMLButtonElement | null) => {\n if (node && open && !isInTable) {\n node.focus();\n }\n },\n [open, isInTable]\n );\n\n // Check if cursor is inside a table (check for tableCell since that's where cursor sits)\n const checkIsInTable = useCallback(() => {\n return (\n editor.isActive('table') || editor.isActive('tableCell') || editor.isActive('tableHeader')\n );\n }, [editor]);\n\n // Update state on editor changes - store in ref so it's never lost\n useEffect(() => {\n const updateState = () => {\n const inTable = checkIsInTable();\n isInTableRef.current = inTable;\n setIsInTable(inTable);\n };\n updateState();\n editor.on('selectionUpdate', updateState);\n editor.on('transaction', updateState);\n return () => {\n editor.off('selectionUpdate', updateState);\n editor.off('transaction', updateState);\n };\n }, [editor, checkIsInTable]);\n\n useOuterEvent('mousedown', [buttonRef, popoverRef], () => {\n if (open) {\n setOpen(false);\n }\n });\n\n const handleEscapeClose = useCallback(() => {\n setOpen(false);\n buttonRef.current?.focus();\n }, []);\n\n useEscapeKey(open, handleEscapeClose, editor);\n useCloseOnEditorClick(open, handleEscapeClose);\n\n const insertTable = useCallback(\n (rows: number, cols: number) => {\n editor.chain().focus().insertTable({ rows, cols, withHeaderRow: false }).run();\n setOpen(false);\n },\n [editor]\n );\n\n const addRow = () => {\n editor.chain().focus().addRowAfter().run();\n setOpen(false);\n };\n\n const addColumn = () => {\n editor.chain().focus().addColumnAfter().run();\n setOpen(false);\n };\n\n const deleteRow = () => {\n editor.chain().focus().deleteRow().run();\n setOpen(false);\n };\n\n const deleteColumn = () => {\n editor.chain().focus().deleteColumn().run();\n setOpen(false);\n };\n\n const deleteTable = () => {\n editor.chain().focus().deleteTable().run();\n setOpen(false);\n };\n\n const getTableSizeLabel = (rows: number, cols: number) => `${rows} x ${cols}`;\n\n const handleCellKeyDown = useCallback(\n (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowRight':\n e.preventDefault();\n setSelectedSize(prev => ({ ...prev, col: Math.min(prev.col + 1, 9) }));\n break;\n case 'ArrowLeft':\n e.preventDefault();\n setSelectedSize(prev => ({ ...prev, col: Math.max(prev.col - 1, 0) }));\n break;\n case 'ArrowDown':\n e.preventDefault();\n setSelectedSize(prev => ({ ...prev, row: Math.min(prev.row + 1, 9) }));\n break;\n case 'ArrowUp':\n e.preventDefault();\n setSelectedSize(prev => ({ ...prev, row: Math.max(prev.row - 1, 0) }));\n break;\n case 'Enter':\n e.preventDefault();\n setSelectedSize(prev => {\n insertTable(prev.row + 1, prev.col + 1);\n return prev;\n });\n break;\n case 'Escape':\n e.preventDefault();\n setOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n [insertTable]\n );\n\n // Memoize cells to avoid re-rendering all 100 cells on every state change\n const cells = useMemo(() => {\n const result: JSX.Element[] = [];\n for (let row = 0; row < 10; row += 1) {\n for (let col = 0; col < 10; col += 1) {\n const isHovered = hoveredCell && row <= hoveredCell.row && col <= hoveredCell.col;\n const isKeyboardSelected =\n !hoveredCell && row <= selectedSize.row && col <= selectedSize.col;\n const isFirstCell = row === 0 && col === 0;\n result.push(\n <StyledCell\n key={`${row}-${col}`}\n ref={isFirstCell ? firstCellCallbackRef : undefined}\n tabIndex={isFirstCell ? 0 : -1}\n $isSelected={isHovered || isKeyboardSelected}\n onMouseEnter={() => setHoveredCell({ row, col })}\n onClick={() => {\n setSelectedSize({ row, col });\n insertTable(row + 1, col + 1);\n }}\n onKeyDown={handleCellKeyDown}\n aria-label={t('rte_table_size', [row + 1, col + 1])}\n />\n );\n }\n }\n return result;\n }, [hoveredCell, selectedSize, firstCellCallbackRef, handleCellKeyDown, insertTable, t]);\n\n // Reset selected size to 2x2 default when opening\n useEffect(() => {\n if (open && !isInTable) {\n setSelectedSize({ row: 1, col: 1 });\n }\n }, [open, isInTable]);\n\n const getGridLabel = () => {\n if (hoveredCell) {\n return getTableSizeLabel(hoveredCell.row + 1, hoveredCell.col + 1);\n }\n if (selectedSize) {\n return getTableSizeLabel(selectedSize.row + 1, selectedSize.col + 1);\n }\n return '1 x 1';\n };\n const gridLabel = getGridLabel();\n\n const handleCancel = () => {\n setOpen(false);\n buttonRef.current?.focus();\n };\n\n return (\n <>\n <StyledTableButton\n {...restProps}\n variant='simple'\n type='button'\n icon={false}\n ref={buttonRef}\n data-toolbar-item='true'\n $active={isInTable}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Escape' && open) {\n e.preventDefault();\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onBlur={(e: FocusEvent) => {\n // Skip blur handling if we just opened the popover\n if (justOpenedRef.current) return;\n\n const { relatedTarget } = e;\n // Close if focus moves outside button/popover, or if relatedTarget is null (e.g., clicking into iframe)\n // Check gridContainerRef separately since Popover uses a portal\n if (\n !isInstance(relatedTarget, Node) ||\n (!buttonRef.current?.contains(relatedTarget) &&\n !popoverRef.current?.contains(relatedTarget) &&\n !gridContainerRef.current?.contains(relatedTarget) &&\n !menuRef.current?.contains(relatedTarget))\n ) {\n setOpen(false);\n }\n }}\n onClick={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setIsInTable(isInTableRef.current);\n if (!open) {\n justOpenedRef.current = true;\n setTimeout(() => {\n justOpenedRef.current = false;\n }, 100);\n }\n setOpen(!open);\n }}\n aria-expanded={open}\n aria-label={t('rte_table')}\n aria-haspopup\n >\n <Icon name='table' />\n </StyledTableButton>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_table')}\n </Tooltip>\n )}\n <Popover show={open} target={buttonRef.current} placement='bottom-start' ref={popoverRef}>\n {isInTable ? (\n <StyledMenuContainer>\n <Menu\n ref={menuRef}\n focusControlEl={buttonRef.current ?? undefined}\n items={[\n { id: 'add-row', primary: t('rte_add_row') },\n { id: 'add-column', primary: t('rte_add_column') },\n { id: 'delete-row', primary: t('rte_delete_row') },\n { id: 'delete-column', primary: t('rte_delete_column') },\n { id: 'delete-table', primary: t('rte_delete_table') }\n ]}\n onItemClick={(id: string) => {\n switch (id) {\n case 'add-row':\n addRow();\n break;\n case 'add-column':\n addColumn();\n break;\n case 'delete-row':\n deleteRow();\n break;\n case 'delete-column':\n deleteColumn();\n break;\n case 'delete-table':\n deleteTable();\n break;\n default:\n break;\n }\n }}\n />\n </StyledMenuContainer>\n ) : (\n <StyledGridContainer>\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h2'>{t('rte_insert_table')}</Text>\n <StyledGrid ref={gridContainerRef} onMouseLeave={() => setHoveredCell(null)}>\n {cells}\n </StyledGrid>\n <Text variant='secondary'>{gridLabel}</Text>\n <StyledButtonGroup>\n <Button variant='secondary' onClick={handleCancel}>\n {t('cancel')}\n </Button>\n <Button\n variant='primary'\n onClick={() => insertTable(selectedSize.row + 1, selectedSize.col + 1)}\n >\n {t('submit')}\n </Button>\n </StyledButtonGroup>\n </Flex>\n </StyledGridContainer>\n )}\n </Popover>\n </>\n );\n};\n\nexport default TableButton;\n"]}

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

@@ -1,5 +1,4 @@
-import type { FC } from 'react';
-import type { Editor } from 'tinymce';
+import type { Editor as TiptapEditor } from '@tiptap/core';
 import type { TranslationFunction, TranslationPack } from '@pega/cosmos-react-core';
 declare const formatMapping: {
     readonly p: "normal";
@@ -21,9 +20,9 @@ export declare const getTextFormats: (t: TranslationFunction<TranslationPack>, o
     subText: string;
     type: FormatType;
 }[];
-declare const TextSelect: FC<{
+declare const TextSelect: ({ osx, editor, ...restProps }: {
     osx: boolean;
-    editor: Editor;
-}>;
+    editor: TiptapEditor;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TextSelect;
 //# sourceMappingURL=TextSelect.d.ts.map

package/lib/components/Editor/Toolbar/TextSelect.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,~~EAAE,EAAyC,~~MAAM,~~OAAO~~,~~CAAC;AACvE~~,~~OAAO,KAAK,~~EAAE,MAAM,~~EAAE~~,~~MAAM,SAAS,~~CAAC;~~AAetC~~,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;~~AAkCpF~~,QAAA,MAAM,aAAa;;;;;;;;;;;CAWT,CAAC;~~AAQX~~,KAAK,UAAU,GAAG,MAAM,OAAO,aAAa,CAAC;AAC7C,KAAK,MAAM,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;AAMjD,eAAO,MAAM,cAAc,GACzB,GAAG,mBAAmB,CAAC,eAAe,CAAC,EACvC,MAAK,OAAe,KACnB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,EAiCjE,CAAC;AAEF,QAAA,MAAM,UAAU,~~EAAE,EAAE,CAAC~~;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,~~MAAM~~,CAAA;CAAE,~~CA2IpD~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAgB3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAsCpF,QAAA,MAAM,aAAa;;;;;;;;;;;CAWT,CAAC;AAEX,KAAK,UAAU,GAAG,MAAM,OAAO,aAAa,CAAC;AAC7C,KAAK,MAAM,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;AAMjD,eAAO,MAAM,cAAc,GACzB,GAAG,mBAAmB,CAAC,eAAe,CAAC,EACvC,MAAK,OAAe,KACnB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,EAiCjE,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,+BAA+B;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,YAAY,CAAA;CAAE,4CAiKxF,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState, useMemo } from 'react';
+import { useRef, useState, useMemo, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { Popover, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize } from '@pega/cosmos-react-core';
+import { Popover, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize, isInstance } from '@pega/cosmos-react-core';
 import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
 import { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';
+import useEscapeKey from '../hooks/useEscapeKey';
+import useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';
 registerIcon(arrowMicroDownIcon);
 const StyledTextSelect = styled(Button)(({ theme }) => {
     const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
@@ -29,6 +31,7 @@ StyledTextSelect.defaultProps = defaultThemeProp;
 const StyledSelectMenu = styled.div `
   min-width: 20ch;
 `;
+StyledSelectMenu.defaultProps = defaultThemeProp;
 const formatMapping = {
     p: 'normal',
     li: 'normal',
@@ -41,9 +44,6 @@ const formatMapping = {
     h4: 'heading-4',
     '': 'normal'
 };
-const normalTags = new Set(Object.entries(formatMapping)
-    .filter(([, value]) => value === 'normal')
-    .map(([key]) => key));
 const getTextCommand = (num, osx) => {
     return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);
 };
@@ -92,42 +92,60 @@ const TextSelect = ({ osx, editor, ...restProps }) => {
     const textFormats = useMemo(() => {
         return getTextFormats(t, osx);
     }, [t, osx]);
-    useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {
+    useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef], () => {
         setOpen(false);
     });
-    const onTextSelect = (type, e) => {
+    const handleEscapeClose = useCallback(() => {
+        setOpen(false);
+        buttonRef.current?.focus();
+    }, []);
+    useEscapeKey(open, handleEscapeClose, editor);
+    useCloseOnEditorClick(open, handleEscapeClose);
+    const onTextSelect = (id, e) => {
         e.stopPropagation();
         e.preventDefault();
-        editor.execCommand('FormatBlock', false, type);
+        // Tiptap API
+        const chain = editor.chain().focus();
+        if (id === 'p') {
+            chain.setParagraph().run();
+        }
+        else if (id === 'h1') {
+            chain.setHeading({ level: 1 }).run();
+        }
+        else if (id === 'h2') {
+            chain.setHeading({ level: 2 }).run();
+        }
+        else if (id === 'h3') {
+            chain.setHeading({ level: 3 }).run();
+        }
+        else if (id === 'h4') {
+            chain.setHeading({ level: 4 }).run();
+        }
         if (!openedByClick.current) {
             buttonRef.current?.focus();
         }
         setOpen(false);
         selecting.current = true;
         setTimeout(() => {
-            if (!editor.hasFocus() && openedByClick.current) {
-                editor.focus();
+            selecting.current = false;
+            if (!editor.isFocused && openedByClick.current) {
+                editor.commands.focus();
             }
         }, 0);
     };
-    const getParentTextFormat = (el) => {
-        const elTagName = el.nodeName.toLowerCase();
-        if (formatMapping[elTagName]) {
-            return elTagName;
-        }
-        if (el.parentNode) {
-            return getParentTextFormat(el.parentNode);
-        }
-        return undefined;
-    };
     const activeFormat = () => {
-        const tag = editor.hasFocus()
-            ? getParentTextFormat(editor.selection.getNode())
-            : editor.contentDocument?.body?.firstChild?.nodeName.toLowerCase();
-        if (tag && normalTags.has(tag)) {
+        // Tiptap API
+        if (editor.isActive('heading', { level: 1 }))
+            return 'h1';
+        if (editor.isActive('heading', { level: 2 }))
+            return 'h2';
+        if (editor.isActive('heading', { level: 3 }))
+            return 'h3';
+        if (editor.isActive('heading', { level: 4 }))
+            return 'h4';
+        if (editor.isActive('paragraph'))
             return 'p';
-        }
-        return tag;
+        return 'p';
     };
     const formatText = (() => {
         const activeFormatType = activeFormat();
@@ -139,11 +157,12 @@ const TextSelect = ({ osx, editor, ...restProps }) => {
             return unknown;
         return textFormats.find(({ id }) => id === format)?.text ?? unknown;
     })();
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledTextSelect, { ...restProps, variant: 'simple', type: 'button', icon: false, ref: buttonRef, onMouseDown: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledTextSelect, { ...restProps, variant: 'simple', type: 'button', icon: false, ref: buttonRef, "data-toolbar-item": 'true', onMouseDown: (e) => {
                     e.preventDefault();
-                    e.stopPropagation();
-                    setOpen(true);
-                    openedByClick.current = true;
+                    if (!open) {
+                        openedByClick.current = true;
+                    }
+                    setOpen(!open);
                 }, onKeyDown: (e) => {
                     if (e.key === 'Enter' && !selecting.current) {
                         e.preventDefault();
@@ -157,9 +176,21 @@ const TextSelect = ({ osx, editor, ...restProps }) => {
                     else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
                         setOpen(false);
                     }
+                    else if (e.key === 'Escape' && open) {
+                        e.preventDefault();
+                        setOpen(false);
+                    }
                 }, onFocus: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
+                }, onBlur: (e) => {
+                    const { relatedTarget } = e;
+                    if (isInstance(relatedTarget, Node) &&
+                        !buttonRef.current?.contains(relatedTarget) &&
+                        !popoverRef.current?.contains(relatedTarget) &&
+                        !menuRef.current?.contains(relatedTarget)) {
+                        setOpen(false);
+                    }
                 }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `${t('rte_text_formatting_toolbar')}. ${t('rte_heading_style')}. ${formatText} ${t('selected').toLocaleLowerCase()}`, "aria-haspopup": true, children: [_jsx("span", { children: formatText }), _jsx(Icon, { name: 'arrow-micro-down' })] }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_heading_style') })), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: textFormats.map(({ text, type, subText }) => ({
                         id: type,
                         primary: text,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useMemo } from 'react';\nimport type { FC, MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport type { Editor } from 'tinymce';\nimport styled, { css } from 'styled-components';\n\nimport {\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport type { TranslationFunction, TranslationPack } from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n height: calc(4 * ${theme.base.spacing});\n padding: calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n\n span {\n white-space: nowrap;\n }\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n min-width: 20ch;\n`;\n\nconst formatMapping = {\n p: 'normal',\n li: 'normal',\n ul: 'normal',\n ol: 'normal',\n div: 'normal',\n h1: 'heading-1',\n h2: 'heading-2',\n h3: 'heading-3',\n h4: 'heading-4',\n '': 'normal'\n} as const;\n\nconst normalTags = new Set(\n Object.entries(formatMapping)\n .filter(([, value]) => value === 'normal')\n .map(([key]) => key)\n);\n\ntype FormatType = keyof typeof formatMapping;\ntype Format = (typeof formatMapping)[FormatType];\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nexport const getTextFormats = (\n t: TranslationFunction<TranslationPack>,\n osx: boolean = false\n): { id: Format; text: string; subText: string; type: FormatType }[] => {\n return [\n {\n id: 'normal',\n text: t('rte_heading_style_normal'),\n subText: getTextCommand(0, osx),\n type: 'p'\n },\n {\n id: 'heading-1',\n text: t('rte_heading_style_heading_1'),\n subText: getTextCommand(1, osx),\n type: 'h1'\n },\n {\n id: 'heading-2',\n text: t('rte_heading_style_heading_2'),\n subText: getTextCommand(2, osx),\n type: 'h2'\n },\n {\n id: 'heading-3',\n text: t('rte_heading_style_heading_3'),\n subText: getTextCommand(3, osx),\n type: 'h3'\n },\n {\n id: 'heading-4',\n text: t('rte_heading_style_heading_4'),\n subText: getTextCommand(4, osx),\n type: 'h4'\n }\n ];\n};\n\nconst TextSelect: FC<{ osx: boolean; editor: Editor }> = ({ osx, editor, ...restProps }) => {\n const t = useI18n();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n\n const textFormats = useMemo(() => {\n return getTextFormats(t, osx);\n }, [t, osx]);\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: FormatType, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n editor.execCommand('FormatBlock', false, type);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!editor.hasFocus() && openedByClick.current) {\n editor.focus();\n }\n }, 0);\n };\n\n const getParentTextFormat = (el: Element \| Node): FormatType \| undefined => {\n const elTagName = el.nodeName.toLowerCase() as FormatType;\n if (formatMapping[elTagName]) {\n return elTagName;\n }\n if (el.parentNode) {\n return getParentTextFormat(el.parentNode);\n }\n return undefined;\n };\n\n const activeFormat = (): FormatType \| undefined => {\n const tag = editor.hasFocus()\n ? getParentTextFormat(editor.selection.getNode())\n : (editor.contentDocument?.body?.firstChild?.nodeName.toLowerCase() as\n \| FormatType\n \| undefined);\n\n if (tag && normalTags.has(tag)) {\n return 'p';\n }\n\n return tag;\n };\n\n const formatText = (() => {\n const activeFormatType = activeFormat();\n\n const unknown = t('rte_heading_style_unknown');\n\n if (!activeFormatType) return unknown;\n\n const format = formatMapping[activeFormatType];\n\n if (!format) return unknown;\n\n return textFormats.find(({ id }) => id === format)?.text ?? unknown;\n })();\n\n return (\n <>\n <StyledTextSelect\n {...restProps}\n variant='simple'\n type='button'\n icon={false}\n ref={buttonRef}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n openedByClick.current = true;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' && !selecting.current) {\n e.preventDefault();\n setOpen(true);\n openedByClick.current = false;\n } else if (e.key === 'Enter') {\n e.preventDefault();\n selecting.current = false;\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`${t('rte_text_formatting_toolbar')}. ${t(\n 'rte_heading_style'\n )}. ${formatText} ${t('selected').toLocaleLowerCase()}`}\n aria-haspopup\n >\n <span>{formatText}</span>\n <Icon name='arrow-micro-down' />\n </StyledTextSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_heading_style')}\n </Tooltip>\n )}\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n <Menu\n items={textFormats.map(({ text, type, subText }) => ({\n id: type,\n primary: text,\n secondary: [subText],\n selected: type === activeFormat()\n }))}\n focusControlEl={buttonRef.current ?? undefined}\n mode='single-select'\n ref={menuRef}\n onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n />\n </Popover>\n </>\n );\n};\n\nexport default TextSelect;\n"]}
1	+ {"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useMemo, useCallback } from 'react';\nimport type { MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\nimport styled, { css } from 'styled-components';\n\nimport {\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize,\n isInstance\n} from '@pega/cosmos-react-core';\nimport type { TranslationFunction, TranslationPack } from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport useEscapeKey from '../hooks/useEscapeKey';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n height: calc(4 * ${theme.base.spacing});\n padding: calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n\n span {\n white-space: nowrap;\n }\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n min-width: 20ch;\n`;\n\nStyledSelectMenu.defaultProps = defaultThemeProp;\n\nconst formatMapping = {\n p: 'normal',\n li: 'normal',\n ul: 'normal',\n ol: 'normal',\n div: 'normal',\n h1: 'heading-1',\n h2: 'heading-2',\n h3: 'heading-3',\n h4: 'heading-4',\n '': 'normal'\n} as const;\n\ntype FormatType = keyof typeof formatMapping;\ntype Format = (typeof formatMapping)[FormatType];\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nexport const getTextFormats = (\n t: TranslationFunction<TranslationPack>,\n osx: boolean = false\n): { id: Format; text: string; subText: string; type: FormatType }[] => {\n return [\n {\n id: 'normal',\n text: t('rte_heading_style_normal'),\n subText: getTextCommand(0, osx),\n type: 'p'\n },\n {\n id: 'heading-1',\n text: t('rte_heading_style_heading_1'),\n subText: getTextCommand(1, osx),\n type: 'h1'\n },\n {\n id: 'heading-2',\n text: t('rte_heading_style_heading_2'),\n subText: getTextCommand(2, osx),\n type: 'h2'\n },\n {\n id: 'heading-3',\n text: t('rte_heading_style_heading_3'),\n subText: getTextCommand(3, osx),\n type: 'h3'\n },\n {\n id: 'heading-4',\n text: t('rte_heading_style_heading_4'),\n subText: getTextCommand(4, osx),\n type: 'h4'\n }\n ];\n};\n\nconst TextSelect = ({ osx, editor, ...restProps }: { osx: boolean; editor: TiptapEditor }) => {\n const t = useI18n();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n\n const textFormats = useMemo(() => {\n return getTextFormats(t, osx);\n }, [t, osx]);\n\n useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const handleEscapeClose = useCallback(() => {\n setOpen(false);\n buttonRef.current?.focus();\n }, []);\n\n useEscapeKey(open, handleEscapeClose, editor);\n useCloseOnEditorClick(open, handleEscapeClose);\n\n const onTextSelect = (id: string, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n // Tiptap API\n const chain = editor.chain().focus();\n if (id === 'p') {\n chain.setParagraph().run();\n } else if (id === 'h1') {\n chain.setHeading({ level: 1 }).run();\n } else if (id === 'h2') {\n chain.setHeading({ level: 2 }).run();\n } else if (id === 'h3') {\n chain.setHeading({ level: 3 }).run();\n } else if (id === 'h4') {\n chain.setHeading({ level: 4 }).run();\n }\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n selecting.current = false;\n if (!editor.isFocused && openedByClick.current) {\n editor.commands.focus();\n }\n }, 0);\n };\n\n const activeFormat = (): FormatType \| undefined => {\n // Tiptap API\n if (editor.isActive('heading', { level: 1 })) return 'h1';\n if (editor.isActive('heading', { level: 2 })) return 'h2';\n if (editor.isActive('heading', { level: 3 })) return 'h3';\n if (editor.isActive('heading', { level: 4 })) return 'h4';\n if (editor.isActive('paragraph')) return 'p';\n return 'p';\n };\n\n const formatText = (() => {\n const activeFormatType = activeFormat();\n\n const unknown = t('rte_heading_style_unknown');\n\n if (!activeFormatType) return unknown;\n\n const format = formatMapping[activeFormatType];\n\n if (!format) return unknown;\n\n return textFormats.find(({ id }) => id === format)?.text ?? unknown;\n })();\n\n return (\n <>\n <StyledTextSelect\n {...restProps}\n variant='simple'\n type='button'\n icon={false}\n ref={buttonRef}\n data-toolbar-item='true'\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n if (!open) {\n openedByClick.current = true;\n }\n setOpen(!open);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' && !selecting.current) {\n e.preventDefault();\n setOpen(true);\n openedByClick.current = false;\n } else if (e.key === 'Enter') {\n e.preventDefault();\n selecting.current = false;\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n setOpen(false);\n } else if (e.key === 'Escape' && open) {\n e.preventDefault();\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onBlur={(e: FocusEvent) => {\n const { relatedTarget } = e;\n if (\n isInstance(relatedTarget, Node) &&\n !buttonRef.current?.contains(relatedTarget) &&\n !popoverRef.current?.contains(relatedTarget) &&\n !menuRef.current?.contains(relatedTarget)\n ) {\n setOpen(false);\n }\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`${t('rte_text_formatting_toolbar')}. ${t(\n 'rte_heading_style'\n )}. ${formatText} ${t('selected').toLocaleLowerCase()}`}\n aria-haspopup\n >\n <span>{formatText}</span>\n <Icon name='arrow-micro-down' />\n </StyledTextSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_heading_style')}\n </Tooltip>\n )}\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n <Menu\n items={textFormats.map(({ text, type, subText }) => ({\n id: type,\n primary: text,\n secondary: [subText],\n selected: type === activeFormat()\n }))}\n focusControlEl={buttonRef.current ?? undefined}\n mode='single-select'\n ref={menuRef}\n onItemClick={onTextSelect}\n />\n </Popover>\n </>\n );\n};\n\nexport default TextSelect;\n"]}

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

@@ -1,17 +1,28 @@
-import type { FC } from 'react';
-import type { Editor } from 'tinymce';
-import type { TestIdProp } from '@pega/cosmos-react-core';
+import type { ReactNode } from 'react';
+import type { Editor as TiptapEditor } from '@tiptap/core';
+import type { AIAction, TestIdProp } from '@pega/cosmos-react-core';
 import type { Features } from '../../RichTextEditor/Toolbar/Toolbar.types';
 import type { CustomAction } from '../Editor.types';
 import type { elements } from './Toolbar.test-ids';
 export interface ToolbarProps extends TestIdProp<typeof elements> {
     features: Features[];
     sticky?: boolean;
-    editor: Editor;
+    editor: TiptapEditor;
     customActions?: CustomAction[];
+    imageInsertionMode: 'file' | 'url' | 'all';
+    onRewriteClick?: (originalText: string, rewriteAction: AIAction, additionalInstructions: string, onSuccess: (rewrittenText: string) => void) => void;
+    renderSuggestionEditor?: (props: {
+        defaultValue?: string;
+        disabled: boolean;
+        readOnly: boolean;
+        onGetContent: (getContent: () => string) => void;
+        onContentChange: (hasContent: boolean) => void;
+    }) => ReactNode;
+    sourceMode?: boolean;
+    onSourceModeToggle?: (isSourceMode: boolean) => void;
 }
-declare const _default: FC<ToolbarProps> & {
-    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["toolbar", "text-styles", "bold", "italic", "strike-through", "bulleted-list", "numbered-list", "indent", "unindent", "link", "image"]>;
+declare const _default: (({ testId, features, sticky, editor, customActions, imageInsertionMode, onRewriteClick, renderSuggestionEditor, sourceMode, onSourceModeToggle, ...restProps }: ToolbarProps) => import("react/jsx-runtime").JSX.Element) & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["toolbar", "text-styles", "bold", "italic", "strike-through", "underline", "subscript", "superscript", "font-family", "font-size", "text-color", "background-color", "alignment", "align-left", "align-center", "align-right", "bulleted-list", "numbered-list", "indent", "unindent", "table", "link", "image", "source-code", "ai-rewrite", "overflow", "word-count"]>;
 };
 export default _default;
 //# sourceMappingURL=Toolbar.d.ts.map