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

@pega/cosmos-react-rte 9.0.0-build.9.8 → 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/Toolbar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,~~EAAE~~,EAAE,MAAM,OAAO,CAAC;~~AAEhC~~,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,~~SAAS~~,CAAC;~~AActC~~,OAAO,KAAK,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;~~AAQ3E~~,OAAO,KAAK,EAAa,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;~~AAMpD~~,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;~~AAwBnD~~,MAAM,WAAW,YAAa,SAAQ,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC/D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;~~IACf~~,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;~~CAChC;;;;AAwRD~~,wBAAuD"}
1	+ {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAc3D,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAQrF,OAAO,KAAK,EAAa,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAapD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AA+DnD,MAAM,WAAW,YAAa,SAAQ,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC/D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,kBAAkB,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;IAC3C,cAAc,CAAC,EAAE,CACf,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,QAAQ,EACvB,sBAAsB,EAAE,MAAM,EAC9B,SAAS,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,KACvC,IAAI,CAAC;IACV,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,QAAQ,EAAE,OAAO,CAAC;QAClB,QAAQ,EAAE,OAAO,CAAC;QAClB,YAAY,EAAE,CAAC,UAAU,EAAE,MAAM,MAAM,KAAK,IAAI,CAAC;QACjD,eAAe,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;KAChD,KAAK,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CACtD;yLAgHE,YAAY;;;AAiWf,wBAAuD"}

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

@@ -9,15 +9,23 @@ import * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/i
 import * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';
 import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
 import { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';
+import AIRewriteButton from './AIRewriteButton';
 import ImageButton from './ImageButton';
 import TextSelect from './TextSelect';
 import AnchorButton from './AnchorButton';
+import FontFamilySelect from './FontFamilySelect';
+import FontSizeSelect from './FontSizeSelect';
+import ColorPickerButton from './ColorPickerButton';
+import TableButton from './TableButton';
+import SourceCodeButton from './SourceCodeButton';
+import AlignmentSelect from './AlignmentSelect';
 import { getToolbarTestIds } from './Toolbar.test-ids';
 registerIcon(listIcon, listNumberIcon, indentIcon, unindentIcon);
 const StyledToolbar = styled.div(({ sticky, theme }) => {
     return css `
-    background-color: ${theme.base.palette['primary-background']};
-    border-radius: calc(0.25 * ${theme.base['border-radius']});
+    background-color: ${theme.components['form-control']['background-color']};
+    border-end-start-radius: inherit;
+    border-end-end-radius: inherit;
     overflow: auto;
     padding: calc(0.5 * ${theme.base.spacing});
     ${sticky &&
@@ -31,12 +39,44 @@ const StyledToolbar = styled.div(({ sticky, theme }) => {
     }
   `;
 });
+const ToolbarSeparator = styled.div(({ theme }) => {
+    return css `
+    width: calc(0.125 * ${theme.base.spacing});
+    height: calc(3 * ${theme.base.spacing});
+    background-color: ${theme.base.palette['border-line']};
+    margin-block: calc(0.5 * ${theme.base.spacing});
+    margin-inline: calc(0.25 * ${theme.base.spacing});
+  `;
+});
+ToolbarSeparator.defaultProps = defaultThemeProp;
 StyledToolbar.defaultProps = defaultThemeProp;
+const SubscriptText = styled.span(({ theme }) => {
+    return css `
+    display: inline-flex;
+    align-items: flex-end;
+    span {
+      font-size: calc(0.65 * ${theme.base['font-size']});
+      margin-bottom: calc(-0.25 * ${theme.base.spacing});
+    }
+  `;
+});
+SubscriptText.defaultProps = defaultThemeProp;
+const SuperscriptText = styled.span(({ theme }) => {
+    return css `
+    display: inline-flex;
+    align-items: flex-start;
+    span {
+      font-size: calc(0.65 * ${theme.base['font-size']});
+      margin-top: calc(-0.25 * ${theme.base.spacing});
+    }
+  `;
+});
+SuperscriptText.defaultProps = defaultThemeProp;
 const isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');
-// Function that returns the text styling buttons
-function renderStyleButtons(editor, t, activeStyles, osx, testIds) {
-    const inlineStyleButtons = [
-        {
+// Individual inline style button definitions - keyed by format for safe lookup
+function getInlineStyleButtons(t, osx, testIds) {
+    return {
+        bold: {
             'data-testid': testIds.bold,
             style: 'BOLD',
             text: 'B',
@@ -47,7 +87,7 @@ function renderStyleButtons(editor, t, activeStyles, osx, testIds) {
                 ? `${t('rte_bold')}`
                 : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`)
         },
-        {
+        italic: {
             'data-testid': testIds.italic,
             style: 'ITALIC',
             text: 'I',
@@ -58,7 +98,7 @@ function renderStyleButtons(editor, t, activeStyles, osx, testIds) {
                 ? `${t('rte_italic')}`
                 : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`)
         },
-        {
+        strikethrough: {
             'data-testid': testIds.strikeThrough,
             style: 'STRIKE-THROUGH',
             text: 'S',
@@ -69,21 +109,24 @@ function renderStyleButtons(editor, t, activeStyles, osx, testIds) {
                 ? `${t('rte_strike_through')}`
                 : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`)
         }
-    ];
-    return (_jsxs(_Fragment, { children: [_jsx(TextSelect, { "data-testid": testIds.textStyles, osx: osx, editor: editor }), inlineStyleButtons.map(({ format, style, text, label, tooltip, 'data-testid': dataTestId }) => {
-                return (_jsx(ToolbarButton, { "data-testid": dataTestId, onMouseDown: e => {
-                        e.preventDefault();
-                        if (editor.hasFocus()) {
-                            editor.execCommand(format);
-                        }
-                        else {
-                            editor.focus();
-                            setTimeout(() => {
-                                editor.execCommand(format);
-                            }, 0);
-                        }
-                    }, styleType: style, active: activeStyles[format.toLowerCase()], tooltip: tooltip, label: label, children: text }, style));
-            })] }));
+    };
+}
+// Render a single inline style button
+function renderInlineStyleButton(editor, button, activeStyles) {
+    const { format, style, text, label, tooltip, 'data-testid': dataTestId } = button;
+    return (_jsx(ToolbarButton, { "data-testid": dataTestId, onMouseDown: e => {
+            e.preventDefault();
+            const chain = editor.chain().focus();
+            if (format === 'Bold') {
+                chain.toggleBold().run();
+            }
+            else if (format === 'Italic') {
+                chain.toggleItalic().run();
+            }
+            else if (format === 'Strikethrough') {
+                chain.toggleStrike().run();
+            }
+        }, styleType: style, active: activeStyles[format.toLowerCase()], tooltip: tooltip, label: label, children: text }, style));
 }
 // Takes the features array and transforms it into a map for faster lookup
 function createActiveFeaturesMap(features) {
@@ -91,19 +134,28 @@ function createActiveFeaturesMap(features) {
         return { ...acc, [feature]: true };
     }, {});
 }
-const Toolbar = ({ testId, features, sticky, editor, customActions, ...restProps }) => {
+const Toolbar = ({ testId, features, sticky, editor, customActions, imageInsertionMode, onRewriteClick, renderSuggestionEditor, sourceMode, onSourceModeToggle, ...restProps }) => {
     const t = useI18n();
     const { macintosh: osx } = useOS();
     const toolbarRef = useRef(null);
     const testIds = useTestIds(testId, getToolbarTestIds);
-    useArrows(toolbarRef, { selector: 'button', dir: 'left-right', updateTabIndex: false });
+    useArrows(toolbarRef, {
+        selector: '[data-toolbar-item="true"]',
+        dir: 'left-right'
+    });
     const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));
     const [activeStyles, setActiveStyles] = useState(() => ({
         bold: false,
         italic: false,
         strikethrough: false,
+        underline: false,
+        subscript: false,
+        superscript: false,
         unorderedList: false,
-        orderedList: false
+        orderedList: false,
+        alignLeft: false,
+        alignCenter: false,
+        alignRight: false
     }));
     const getIndentationToolTip = (type) => getKeyCommand(osx, ({ shift, alt }) => type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`);
     const tooltipMobile = (type) => type === 'indent' ? `${t('rte_indent')}` : `${t('rte_unindent')}`;
@@ -111,48 +163,116 @@ const Toolbar = ({ testId, features, sticky, editor, customActions, ...restProps
         setActiveFeatures(createActiveFeaturesMap(features));
     }, [features]);
     const getActiveStyles = useCallback(() => {
-        if (editor.hasFocus()) {
-            setActiveStyles({
-                bold: editor.queryCommandState('Bold'),
-                italic: editor.queryCommandState('Italic'),
-                strikethrough: editor.queryCommandState('Strikethrough'),
-                unorderedList: editor.queryCommandState('InsertUnorderedList'),
-                orderedList: editor.queryCommandState('InsertOrderedList')
-            });
-        }
-        else {
+        if (!editor) {
             setActiveStyles({
                 bold: false,
                 italic: false,
                 strikethrough: false,
+                underline: false,
+                subscript: false,
+                superscript: false,
                 unorderedList: false,
-                orderedList: false
+                orderedList: false,
+                alignLeft: false,
+                alignCenter: false,
+                alignRight: false
             });
+            return;
         }
+        // Tiptap API only
+        setActiveStyles({
+            bold: editor.isActive('bold'),
+            italic: editor.isActive('italic'),
+            strikethrough: editor.isActive('strike'),
+            underline: editor.isActive('underline'),
+            subscript: editor.isActive('subscript'),
+            superscript: editor.isActive('superscript'),
+            unorderedList: editor.isActive('bulletList'),
+            orderedList: editor.isActive('orderedList'),
+            alignLeft: editor.isActive({ textAlign: 'left' }),
+            alignCenter: editor.isActive({ textAlign: 'center' }),
+            alignRight: editor.isActive({ textAlign: 'right' })
+        });
     }, [editor, setActiveStyles]);
     useEffect(() => {
         getActiveStyles();
-        editor.on('SelectionChange', getActiveStyles);
+        editor.on('selectionUpdate', getActiveStyles);
+        editor.on('transaction', getActiveStyles);
         return () => {
-            editor.off('SelectionChange', getActiveStyles);
+            editor.off('selectionUpdate', getActiveStyles);
+            editor.off('transaction', getActiveStyles);
         };
     }, [editor, getActiveStyles]);
-    return (_jsxs(Flex, { "data-testid": testIds.toolbar, ...restProps, as: StyledToolbar, sticky: sticky, container: { justify: 'between' }, ref: toolbarRef, children: [_jsxs(Flex, { container: { alignItems: 'end' }, children: [activeFeatures['inline-styling'] &&
-                        renderStyleButtons(editor, t, activeStyles, osx, testIds), activeFeatures.lists && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { "data-testid": testIds.bulletedList, onMouseDown: e => {
+    return (_jsxs(Flex, { "data-testid": testIds.toolbar, ...restProps, as: StyledToolbar, sticky: sticky, container: { justify: 'between' }, ref: toolbarRef, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0 }, children: [activeFeatures.headers && (_jsx(TextSelect, { "data-testid": testIds.textStyles, osx: osx, editor: editor })), (() => {
+                        const buttons = getInlineStyleButtons(t, osx, testIds);
+                        // 'inline-styling' enables all three; individual features enable specific ones
+                        if (activeFeatures['inline-styling']) {
+                            return Object.values(buttons).map(btn => renderInlineStyleButton(editor, btn, activeStyles));
+                        }
+                        return (_jsxs(_Fragment, { children: [activeFeatures.bold && renderInlineStyleButton(editor, buttons.bold, activeStyles), activeFeatures.italic &&
+                                    renderInlineStyleButton(editor, buttons.italic, activeStyles), activeFeatures.strikethrough &&
+                                    renderInlineStyleButton(editor, buttons.strikethrough, activeStyles)] }));
+                    })(), activeFeatures.underline && (_jsx(ToolbarButton, { "data-testid": testIds.underline, styleType: 'UNDERLINE', onMouseDown: e => {
+                            e.preventDefault();
+                            editor.chain().focus().toggleUnderline().run();
+                        }, active: activeStyles.underline, tooltip: isMobile
+                            ? t('rte_underline')
+                            : getKeyCommand(osx, ({ ctrl }) => `${t('rte_underline')} (${ctrl}U)`), label: t('rte_underline'), children: "U" })), activeFeatures.subscript && (_jsx(ToolbarButton, { "data-testid": testIds.subscript, styleType: 'SUBSCRIPT', onMouseDown: e => {
+                            e.preventDefault();
+                            // Turn off superscript first if it's active, then toggle subscript
+                            if (editor.isActive('superscript')) {
+                                editor.chain().focus().unsetSuperscript().toggleSubscript().run();
+                            }
+                            else {
+                                editor.chain().focus().toggleSubscript().run();
+                            }
+                        }, active: activeStyles.subscript, tooltip: t('rte_subscript'), label: t('rte_subscript'), children: _jsxs(SubscriptText, { children: ["X", _jsx("span", { children: "2" })] }) })), activeFeatures.superscript && (_jsx(ToolbarButton, { "data-testid": testIds.superscript, styleType: 'SUPERSCRIPT', onMouseDown: e => {
+                            e.preventDefault();
+                            // Turn off subscript first if it's active, then toggle superscript
+                            if (editor.isActive('subscript')) {
+                                editor.chain().focus().unsetSubscript().toggleSuperscript().run();
+                            }
+                            else {
+                                editor.chain().focus().toggleSuperscript().run();
+                            }
+                        }, active: activeStyles.superscript, tooltip: t('rte_superscript'), label: t('rte_superscript'), children: _jsxs(SuperscriptText, { children: ["X", _jsx("span", { children: "2" })] }) })), (activeFeatures['inline-styling'] ||
+                        activeFeatures.bold ||
+                        activeFeatures.italic ||
+                        activeFeatures.strikethrough ||
+                        activeFeatures.underline ||
+                        activeFeatures.subscript ||
+                        activeFeatures.superscript) &&
+                        (activeFeatures.alignment || activeFeatures.lists || activeFeatures.indentation) && (_jsx(ToolbarSeparator, {})), activeFeatures.alignment && (_jsx(AlignmentSelect, { "data-testid": testIds.alignment, editor: editor })), activeFeatures.lists && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { "data-testid": testIds.bulletedList, onMouseDown: e => {
                                     e.preventDefault();
-                                    editor.execCommand('InsertUnorderedList');
+                                    editor.chain().focus().toggleBulletList().run();
                                 }, active: activeStyles.unorderedList, tooltip: isMobile
                                     ? `${t('rte_bulleted_list')}`
                                     : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`), label: t('rte_bulleted_list'), children: _jsx(Icon, { name: 'list' }) }), _jsx(ToolbarButton, { "data-testid": testIds.numberedList, onMouseDown: e => {
                                     e.preventDefault();
-                                    editor.execCommand('InsertOrderedList');
+                                    editor.chain().focus().toggleOrderedList().run();
                                 }, active: activeStyles.orderedList, tooltip: t('rte_numbered_list'), label: t('rte_numbered_list'), children: _jsx(Icon, { name: 'list-number' }) })] })), activeFeatures.indentation && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { "data-testid": testIds.indent, onMouseDown: e => {
                                     e.preventDefault();
-                                    editor.execCommand('Indent');
+                                    // Try text indent first, fallback to list indent
+                                    const textIndented = editor.chain().focus().indent().run();
+                                    if (!textIndented) {
+                                        editor.chain().focus().sinkListItem('listItem').run();
+                                    }
                                 }, label: t('rte_indent'), tooltip: isMobile ? tooltipMobile('indent') : getIndentationToolTip('indent'), children: _jsx(Icon, { name: 'indent' }) }), _jsx(ToolbarButton, { "data-testid": testIds.unindent, onMouseDown: e => {
                                     e.preventDefault();
-                                    editor.execCommand('Outdent');
-                                }, label: t('rte_unindent'), tooltip: isMobile ? tooltipMobile('unindent') : getIndentationToolTip('unindent'), children: _jsx(Icon, { name: 'unindent' }) })] }))] }), _jsxs(Flex, { container: { alignItems: 'end' }, children: [customActions?.map(({ text, icon, active, onMouseDown,
+                                    // Try text outdent first, fallback to list outdent
+                                    const textOutdented = editor.chain().focus().outdent().run();
+                                    if (!textOutdented) {
+                                        editor.chain().focus().liftListItem('listItem').run();
+                                    }
+                                }, label: t('rte_unindent'), tooltip: isMobile ? tooltipMobile('unindent') : getIndentationToolTip('unindent'), children: _jsx(Icon, { name: 'unindent' }) })] })), (activeFeatures.alignment || activeFeatures.lists || activeFeatures.indentation) &&
+                        (activeFeatures['font-size'] ||
+                            activeFeatures['font-family'] ||
+                            activeFeatures['text-color'] ||
+                            activeFeatures['background-color']) && _jsx(ToolbarSeparator, {}), activeFeatures['font-size'] && (_jsx(FontSizeSelect, { "data-testid": testIds.fontSize, editor: editor })), activeFeatures['font-family'] && (_jsx(FontFamilySelect, { "data-testid": testIds.fontFamily, editor: editor })), activeFeatures['text-color'] && (_jsx(ColorPickerButton, { "data-testid": testIds.textColor, editor: editor, type: 'text' })), activeFeatures['background-color'] && (_jsx(ColorPickerButton, { "data-testid": testIds.backgroundColor, editor: editor, type: 'highlight' })), (activeFeatures['font-size'] ||
+                        activeFeatures['font-family'] ||
+                        activeFeatures['text-color'] ||
+                        activeFeatures['background-color']) &&
+                        activeFeatures['source-code'] && _jsx(ToolbarSeparator, {}), activeFeatures['source-code'] && (_jsx(SourceCodeButton, { "data-testid": testIds.sourceCode, active: sourceMode, onToggle: onSourceModeToggle }))] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 0 }, children: [customActions?.map(({ text, icon, active, onMouseDown,
                     // Avoid spreading shortcut to DOM attribute
                     shortcut, ...rest }) => {
                         return (_createElement(ToolbarButton, { ...rest, onMouseDown: e => {
@@ -160,7 +280,9 @@ const Toolbar = ({ testId, features, sticky, editor, customActions, ...restProps
                                 onMouseDown(e);
                             }, tooltip: text, label: text, key: icon, active: active?.(editor) || false },
                             _jsx(Icon, { name: icon })));
-                    }), activeFeatures.links && (_jsx(AnchorButton, { "data-testid": testIds.link, editor: editor, osx: osx })), activeFeatures.images && _jsx(ImageButton, { "data-testid": testIds.image, editor: editor })] })] }));
+                    }), activeFeatures.links && (_jsx(AnchorButton, { "data-testid": testIds.link, editor: editor, osx: osx })), activeFeatures.images && (_jsx(ImageButton, { "data-testid": testIds.image, editor: editor, imageInsertionMode: imageInsertionMode })), activeFeatures.tables && _jsx(TableButton, { "data-testid": testIds.table, editor: editor }), (activeFeatures.links || activeFeatures.images || activeFeatures.tables) &&
+                        activeFeatures['ai-rewrite'] &&
+                        onRewriteClick && _jsx(ToolbarSeparator, {}), activeFeatures['ai-rewrite'] && onRewriteClick && (_jsx(AIRewriteButton, { "data-testid": testIds.aiRewrite, editor: editor, onRewriteClick: onRewriteClick, renderSuggestionEditor: renderSuggestionEditor }))] })] }));
 };
 export default withTestIds(Toolbar, getToolbarTestIds);
 //# sourceMappingURL=Toolbar.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef, useCallback } from 'react';\nimport type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Editor } from 'tinymce';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n registerIcon,\n useOS,\n navigatorIsAvailable,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { TestIdProp, TranslationPack } from '@pega/cosmos-react-core';\nimport type { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport * as listIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/list.icon';\nimport * as listNumberIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport type { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport type { CustomAction } from '../Editor.types';\n\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\nimport { getToolbarTestIds } from './Toolbar.test-ids';\nimport type { elements } from './Toolbar.test-ids';\n\nregisterIcon(listIcon, listNumberIcon, indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(({ sticky, theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n overflow: auto;\n padding: calc(0.5 * ${theme.base.spacing});\n ${sticky &&\n css`\n position: sticky;\n bottom: 0;\n `}\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps extends TestIdProp<typeof elements> {\n features: Features[];\n sticky?: boolean;\n editor: Editor;\n customActions?: CustomAction[];\n}\n\ntype StyleButtonType = {\n 'data-testid'?: string;\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: string;\n element?: string;\n tooltip: string;\n};\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: Editor,\n t: TranslationFunction<TranslationPack>,\n activeStyles: { [key: string]: boolean },\n osx: boolean,\n testIds: Pick<\n Partial<ReturnType<typeof getToolbarTestIds>>,\n 'bold' \| 'italic' \| 'strikeThrough' \| 'textStyles'\n >\n) {\n const inlineStyleButtons: StyleButtonType[] = [\n {\n 'data-testid': testIds.bold,\n style: 'BOLD',\n text: 'B',\n format: 'Bold',\n label: t('rte_bold'),\n element: 'strong',\n tooltip: isMobile\n ? `${t('rte_bold')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`)\n },\n {\n 'data-testid': testIds.italic,\n style: 'ITALIC',\n text: 'I',\n format: 'Italic',\n label: t('rte_italic'),\n element: 'i',\n tooltip: isMobile\n ? `${t('rte_italic')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`)\n },\n {\n 'data-testid': testIds.strikeThrough,\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'Strikethrough',\n element: 's',\n label: t('rte_strike_through'),\n tooltip: isMobile\n ? `${t('rte_strike_through')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`)\n }\n ];\n\n return (\n <>\n <TextSelect data-testid={testIds.textStyles} osx={osx} editor={editor} />\n {inlineStyleButtons.map(\n ({ format, style, text, label, tooltip, 'data-testid': dataTestId }) => {\n return (\n <ToolbarButton\n data-testid={dataTestId}\n key={style}\n onMouseDown={e => {\n e.preventDefault();\n if (editor.hasFocus()) {\n editor.execCommand(format);\n } else {\n editor.focus();\n setTimeout(() => {\n editor.execCommand(format);\n }, 0);\n }\n }}\n styleType={style}\n active={activeStyles[format.toLowerCase()]}\n tooltip={tooltip}\n label={label}\n >\n {text}\n </ToolbarButton>\n );\n }\n )}\n </>\n );\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n return features.reduce(\n (acc, feature) => {\n return { ...acc, [feature]: true };\n },\n {} as { [F in Features]: boolean }\n );\n}\n\nconst Toolbar: FC<ToolbarProps> = ({\n testId,\n features,\n sticky,\n editor,\n customActions,\n ...restProps\n}: ToolbarProps) => {\n const t = useI18n();\n const { macintosh: osx } = useOS();\n const toolbarRef = useRef<HTMLElement>(null);\n const testIds = useTestIds(testId, getToolbarTestIds);\n\n useArrows(toolbarRef, { selector: 'button', dir: 'left-right', updateTabIndex: false });\n\n const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));\n const [activeStyles, setActiveStyles] = useState(() => ({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n }));\n\n const getIndentationToolTip = (type: 'indent' \| 'unindent') =>\n getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n const tooltipMobile = (type: 'indent' \| 'unindent') =>\n type === 'indent' ? `${t('rte_indent')}` : `${t('rte_unindent')}`;\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n const getActiveStyles = useCallback(() => {\n if (editor.hasFocus()) {\n setActiveStyles({\n bold: editor.queryCommandState('Bold'),\n italic: editor.queryCommandState('Italic'),\n strikethrough: editor.queryCommandState('Strikethrough'),\n unorderedList: editor.queryCommandState('InsertUnorderedList'),\n orderedList: editor.queryCommandState('InsertOrderedList')\n });\n } else {\n setActiveStyles({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n });\n }\n }, [editor, setActiveStyles]);\n\n useEffect(() => {\n getActiveStyles();\n editor.on('SelectionChange', getActiveStyles);\n return () => {\n editor.off('SelectionChange', getActiveStyles);\n };\n }, [editor, getActiveStyles]);\n\n return (\n <Flex\n data-testid={testIds.toolbar}\n {...restProps}\n as={StyledToolbar}\n sticky={sticky}\n container={{ justify: 'between' }}\n ref={toolbarRef}\n >\n <Flex container={{ alignItems: 'end' }}>\n {activeFeatures['inline-styling'] &&\n renderStyleButtons(editor, t, activeStyles, osx, testIds)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n data-testid={testIds.bulletedList}\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertUnorderedList');\n }}\n active={activeStyles.unorderedList}\n tooltip={\n isMobile\n ? `${t('rte_bulleted_list')}`\n : getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n )\n }\n label={t('rte_bulleted_list')}\n >\n <Icon name='list' />\n </ToolbarButton>\n <ToolbarButton\n data-testid={testIds.numberedList}\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertOrderedList');\n }}\n active={activeStyles.orderedList}\n tooltip={t('rte_numbered_list')}\n label={t('rte_numbered_list')}\n >\n <Icon name='list-number' />\n </ToolbarButton>\n </>\n )}\n {activeFeatures.indentation && (\n <>\n <ToolbarButton\n data-testid={testIds.indent}\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Indent');\n }}\n label={t('rte_indent')}\n tooltip={isMobile ? tooltipMobile('indent') : getIndentationToolTip('indent')}\n >\n <Icon name='indent' />\n </ToolbarButton>\n <ToolbarButton\n data-testid={testIds.unindent}\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Outdent');\n }}\n label={t('rte_unindent')}\n tooltip={isMobile ? tooltipMobile('unindent') : getIndentationToolTip('unindent')}\n >\n <Icon name='unindent' />\n </ToolbarButton>\n </>\n )}\n </Flex>\n <Flex container={{ alignItems: 'end' }}>\n {customActions?.map(\n ({\n text,\n icon,\n active,\n onMouseDown,\n // Avoid spreading shortcut to DOM attribute\n shortcut,\n ...rest\n }) => {\n return (\n <ToolbarButton\n {...rest}\n onMouseDown={e => {\n e.preventDefault();\n onMouseDown(e);\n }}\n tooltip={text}\n label={text}\n key={icon}\n active={active?.(editor) \|\| false}\n >\n <Icon name={icon} />\n </ToolbarButton>\n );\n }\n )}\n {activeFeatures.links && (\n <AnchorButton data-testid={testIds.link} editor={editor} osx={osx} />\n )}\n {activeFeatures.images && <ImageButton data-testid={testIds.image} editor={editor} />}\n </Flex>\n </Flex>\n );\n};\n\nexport default withTestIds(Toolbar, getToolbarTestIds);\n"]}
1	+ {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef, useCallback } from 'react';\nimport type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n registerIcon,\n useOS,\n navigatorIsAvailable,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { AIAction, TestIdProp, TranslationPack } from '@pega/cosmos-react-core';\nimport type { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport * as listIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/list.icon';\nimport * as listNumberIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport type { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport type { CustomAction } from '../Editor.types';\n\nimport AIRewriteButton from './AIRewriteButton';\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\nimport FontFamilySelect from './FontFamilySelect';\nimport FontSizeSelect from './FontSizeSelect';\nimport ColorPickerButton from './ColorPickerButton';\nimport TableButton from './TableButton';\nimport SourceCodeButton from './SourceCodeButton';\nimport AlignmentSelect from './AlignmentSelect';\nimport { getToolbarTestIds } from './Toolbar.test-ids';\nimport type { elements } from './Toolbar.test-ids';\n\nregisterIcon(listIcon, listNumberIcon, indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(({ sticky, theme }) => {\n return css`\n background-color: ${theme.components['form-control']['background-color']};\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n overflow: auto;\n padding: calc(0.5 * ${theme.base.spacing});\n ${sticky &&\n css`\n position: sticky;\n bottom: 0;\n `}\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nconst ToolbarSeparator = styled.div(({ theme }) => {\n return css`\n width: calc(0.125 * ${theme.base.spacing});\n height: calc(3 * ${theme.base.spacing});\n background-color: ${theme.base.palette['border-line']};\n margin-block: calc(0.5 * ${theme.base.spacing});\n margin-inline: calc(0.25 * ${theme.base.spacing});\n `;\n});\n\nToolbarSeparator.defaultProps = defaultThemeProp;\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nconst SubscriptText = styled.span(({ theme }) => {\n return css`\n display: inline-flex;\n align-items: flex-end;\n span {\n font-size: calc(0.65 * ${theme.base['font-size']});\n margin-bottom: calc(-0.25 * ${theme.base.spacing});\n }\n `;\n});\n\nSubscriptText.defaultProps = defaultThemeProp;\n\nconst SuperscriptText = styled.span(({ theme }) => {\n return css`\n display: inline-flex;\n align-items: flex-start;\n span {\n font-size: calc(0.65 * ${theme.base['font-size']});\n margin-top: calc(-0.25 * ${theme.base.spacing});\n }\n `;\n});\n\nSuperscriptText.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps extends TestIdProp<typeof elements> {\n features: Features[];\n sticky?: boolean;\n editor: TiptapEditor;\n customActions?: CustomAction[];\n imageInsertionMode: 'file' \| 'url' \| 'all';\n onRewriteClick?: (\n originalText: string,\n rewriteAction: AIAction,\n additionalInstructions: string,\n onSuccess: (rewrittenText: string) => void\n ) => void;\n renderSuggestionEditor?: (props: {\n defaultValue?: string;\n disabled: boolean;\n readOnly: boolean;\n onGetContent: (getContent: () => string) => void;\n onContentChange: (hasContent: boolean) => void;\n }) => ReactNode;\n sourceMode?: boolean;\n onSourceModeToggle?: (isSourceMode: boolean) => void;\n}\n\ntype StyleButtonType = {\n 'data-testid'?: string;\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: string;\n element?: string;\n tooltip: string;\n};\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\n// Individual inline style button definitions - keyed by format for safe lookup\nfunction getInlineStyleButtons(\n t: TranslationFunction<TranslationPack>,\n osx: boolean,\n testIds: Pick<Partial<ReturnType<typeof getToolbarTestIds>>, 'bold' \| 'italic' \| 'strikeThrough'>\n): { bold: StyleButtonType; italic: StyleButtonType; strikethrough: StyleButtonType } {\n return {\n bold: {\n 'data-testid': testIds.bold,\n style: 'BOLD',\n text: 'B',\n format: 'Bold',\n label: t('rte_bold'),\n element: 'strong',\n tooltip: isMobile\n ? `${t('rte_bold')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`)\n },\n italic: {\n 'data-testid': testIds.italic,\n style: 'ITALIC',\n text: 'I',\n format: 'Italic',\n label: t('rte_italic'),\n element: 'i',\n tooltip: isMobile\n ? `${t('rte_italic')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`)\n },\n strikethrough: {\n 'data-testid': testIds.strikeThrough,\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'Strikethrough',\n element: 's',\n label: t('rte_strike_through'),\n tooltip: isMobile\n ? `${t('rte_strike_through')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`)\n }\n };\n}\n\n// Render a single inline style button\nfunction renderInlineStyleButton(\n editor: TiptapEditor,\n button: StyleButtonType,\n activeStyles: { [key: string]: boolean }\n) {\n const { format, style, text, label, tooltip, 'data-testid': dataTestId } = button;\n return (\n <ToolbarButton\n data-testid={dataTestId}\n key={style}\n onMouseDown={e => {\n e.preventDefault();\n const chain = editor.chain().focus();\n if (format === 'Bold') {\n chain.toggleBold().run();\n } else if (format === 'Italic') {\n chain.toggleItalic().run();\n } else if (format === 'Strikethrough') {\n chain.toggleStrike().run();\n }\n }}\n styleType={style}\n active={activeStyles[format.toLowerCase()]}\n tooltip={tooltip}\n label={label}\n >\n {text}\n </ToolbarButton>\n );\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n return features.reduce(\n (acc, feature) => {\n return { ...acc, [feature]: true };\n },\n {} as { [F in Features]: boolean }\n );\n}\n\nconst Toolbar = ({\n testId,\n features,\n sticky,\n editor,\n customActions,\n imageInsertionMode,\n onRewriteClick,\n renderSuggestionEditor,\n sourceMode,\n onSourceModeToggle,\n ...restProps\n}: ToolbarProps) => {\n const t = useI18n();\n const { macintosh: osx } = useOS();\n const toolbarRef = useRef<HTMLElement>(null);\n const testIds = useTestIds(testId, getToolbarTestIds);\n\n useArrows(toolbarRef, {\n selector: '[data-toolbar-item=\"true\"]',\n dir: 'left-right'\n });\n\n const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));\n const [activeStyles, setActiveStyles] = useState(() => ({\n bold: false,\n italic: false,\n strikethrough: false,\n underline: false,\n subscript: false,\n superscript: false,\n unorderedList: false,\n orderedList: false,\n alignLeft: false,\n alignCenter: false,\n alignRight: false\n }));\n\n const getIndentationToolTip = (type: 'indent' \| 'unindent') =>\n getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n const tooltipMobile = (type: 'indent' \| 'unindent') =>\n type === 'indent' ? `${t('rte_indent')}` : `${t('rte_unindent')}`;\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n const getActiveStyles = useCallback(() => {\n if (!editor) {\n setActiveStyles({\n bold: false,\n italic: false,\n strikethrough: false,\n underline: false,\n subscript: false,\n superscript: false,\n unorderedList: false,\n orderedList: false,\n alignLeft: false,\n alignCenter: false,\n alignRight: false\n });\n return;\n }\n // Tiptap API only\n setActiveStyles({\n bold: editor.isActive('bold'),\n italic: editor.isActive('italic'),\n strikethrough: editor.isActive('strike'),\n underline: editor.isActive('underline'),\n subscript: editor.isActive('subscript'),\n superscript: editor.isActive('superscript'),\n unorderedList: editor.isActive('bulletList'),\n orderedList: editor.isActive('orderedList'),\n alignLeft: editor.isActive({ textAlign: 'left' }),\n alignCenter: editor.isActive({ textAlign: 'center' }),\n alignRight: editor.isActive({ textAlign: 'right' })\n });\n }, [editor, setActiveStyles]);\n\n useEffect(() => {\n getActiveStyles();\n editor.on('selectionUpdate', getActiveStyles);\n editor.on('transaction', getActiveStyles);\n return () => {\n editor.off('selectionUpdate', getActiveStyles);\n editor.off('transaction', getActiveStyles);\n };\n }, [editor, getActiveStyles]);\n\n return (\n <Flex\n data-testid={testIds.toolbar}\n {...restProps}\n as={StyledToolbar}\n sticky={sticky}\n container={{ justify: 'between' }}\n ref={toolbarRef}\n >\n <Flex container={{ alignItems: 'center', gap: 0 }}>\n {/* Text styling group - TextSelect only when headers feature is enabled /}\n {activeFeatures.headers && (\n <TextSelect data-testid={testIds.textStyles} osx={osx} editor={editor} />\n )}\n {(() => {\n const buttons = getInlineStyleButtons(t, osx, testIds);\n // 'inline-styling' enables all three; individual features enable specific ones\n if (activeFeatures['inline-styling']) {\n return Object.values(buttons).map(btn =>\n renderInlineStyleButton(editor, btn, activeStyles)\n );\n }\n return (\n <>\n {activeFeatures.bold && renderInlineStyleButton(editor, buttons.bold, activeStyles)}\n {activeFeatures.italic &&\n renderInlineStyleButton(editor, buttons.italic, activeStyles)}\n {activeFeatures.strikethrough &&\n renderInlineStyleButton(editor, buttons.strikethrough, activeStyles)}\n </>\n );\n })()}\n {activeFeatures.underline && (\n <ToolbarButton\n data-testid={testIds.underline}\n styleType='UNDERLINE'\n onMouseDown={e => {\n e.preventDefault();\n editor.chain().focus().toggleUnderline().run();\n }}\n active={activeStyles.underline}\n tooltip={\n isMobile\n ? t('rte_underline')\n : getKeyCommand(osx, ({ ctrl }) => `${t('rte_underline')} (${ctrl}U)`)\n }\n label={t('rte_underline')}\n >\n U\n </ToolbarButton>\n )}\n {activeFeatures.subscript && (\n <ToolbarButton\n data-testid={testIds.subscript}\n styleType='SUBSCRIPT'\n onMouseDown={e => {\n e.preventDefault();\n // Turn off superscript first if it's active, then toggle subscript\n if (editor.isActive('superscript')) {\n editor.chain().focus().unsetSuperscript().toggleSubscript().run();\n } else {\n editor.chain().focus().toggleSubscript().run();\n }\n }}\n active={activeStyles.subscript}\n tooltip={t('rte_subscript')}\n label={t('rte_subscript')}\n >\n <SubscriptText>\n X<span>2</span>\n </SubscriptText>\n </ToolbarButton>\n )}\n {activeFeatures.superscript && (\n <ToolbarButton\n data-testid={testIds.superscript}\n styleType='SUPERSCRIPT'\n onMouseDown={e => {\n e.preventDefault();\n // Turn off subscript first if it's active, then toggle superscript\n if (editor.isActive('subscript')) {\n editor.chain().focus().unsetSubscript().toggleSuperscript().run();\n } else {\n editor.chain().focus().toggleSuperscript().run();\n }\n }}\n active={activeStyles.superscript}\n tooltip={t('rte_superscript')}\n label={t('rte_superscript')}\n >\n <SuperscriptText>\n X<span>2</span>\n </SuperscriptText>\n </ToolbarButton>\n )}\n {/ Separator after text styling /}\n {(activeFeatures['inline-styling'] \|\|\n activeFeatures.bold \|\|\n activeFeatures.italic \|\|\n activeFeatures.strikethrough \|\|\n activeFeatures.underline \|\|\n activeFeatures.subscript \|\|\n activeFeatures.superscript) &&\n (activeFeatures.alignment \|\| activeFeatures.lists \|\| activeFeatures.indentation) && (\n <ToolbarSeparator />\n )}\n {/ Layout group: alignment, lists, indentation /}\n {activeFeatures.alignment && (\n <AlignmentSelect data-testid={testIds.alignment} editor={editor} />\n )}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n data-testid={testIds.bulletedList}\n onMouseDown={e => {\n e.preventDefault();\n editor.chain().focus().toggleBulletList().run();\n }}\n active={activeStyles.unorderedList}\n tooltip={\n isMobile\n ? `${t('rte_bulleted_list')}`\n : getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n )\n }\n label={t('rte_bulleted_list')}\n >\n <Icon name='list' />\n </ToolbarButton>\n <ToolbarButton\n data-testid={testIds.numberedList}\n onMouseDown={e => {\n e.preventDefault();\n editor.chain().focus().toggleOrderedList().run();\n }}\n active={activeStyles.orderedList}\n tooltip={t('rte_numbered_list')}\n label={t('rte_numbered_list')}\n >\n <Icon name='list-number' />\n </ToolbarButton>\n </>\n )}\n {activeFeatures.indentation && (\n <>\n <ToolbarButton\n data-testid={testIds.indent}\n onMouseDown={e => {\n e.preventDefault();\n // Try text indent first, fallback to list indent\n const textIndented = editor.chain().focus().indent().run();\n if (!textIndented) {\n editor.chain().focus().sinkListItem('listItem').run();\n }\n }}\n label={t('rte_indent')}\n tooltip={isMobile ? tooltipMobile('indent') : getIndentationToolTip('indent')}\n >\n <Icon name='indent' />\n </ToolbarButton>\n <ToolbarButton\n data-testid={testIds.unindent}\n onMouseDown={e => {\n e.preventDefault();\n // Try text outdent first, fallback to list outdent\n const textOutdented = editor.chain().focus().outdent().run();\n if (!textOutdented) {\n editor.chain().focus().liftListItem('listItem').run();\n }\n }}\n label={t('rte_unindent')}\n tooltip={isMobile ? tooltipMobile('unindent') : getIndentationToolTip('unindent')}\n >\n <Icon name='unindent' />\n </ToolbarButton>\n </>\n )}\n {/ Separator after layout group /}\n {(activeFeatures.alignment \|\| activeFeatures.lists \|\| activeFeatures.indentation) &&\n (activeFeatures['font-size'] \|\|\n activeFeatures['font-family'] \|\|\n activeFeatures['text-color'] \|\|\n activeFeatures['background-color']) && <ToolbarSeparator />}\n {/ Design group: font size, font family, text color, background color /}\n {activeFeatures['font-size'] && (\n <FontSizeSelect data-testid={testIds.fontSize} editor={editor} />\n )}\n {activeFeatures['font-family'] && (\n <FontFamilySelect data-testid={testIds.fontFamily} editor={editor} />\n )}\n {activeFeatures['text-color'] && (\n <ColorPickerButton data-testid={testIds.textColor} editor={editor} type='text' />\n )}\n {activeFeatures['background-color'] && (\n <ColorPickerButton\n data-testid={testIds.backgroundColor}\n editor={editor}\n type='highlight'\n />\n )}\n {/ Separator before source-code /}\n {(activeFeatures['font-size'] \|\|\n activeFeatures['font-family'] \|\|\n activeFeatures['text-color'] \|\|\n activeFeatures['background-color']) &&\n activeFeatures['source-code'] && <ToolbarSeparator />}\n {activeFeatures['source-code'] && (\n <SourceCodeButton\n data-testid={testIds.sourceCode}\n active={sourceMode}\n onToggle={onSourceModeToggle}\n />\n )}\n </Flex>\n <Flex container={{ alignItems: 'center', gap: 0 }}>\n {customActions?.map(\n ({\n text,\n icon,\n active,\n onMouseDown,\n // Avoid spreading shortcut to DOM attribute\n shortcut,\n ...rest\n }) => {\n return (\n <ToolbarButton\n {...rest}\n onMouseDown={e => {\n e.preventDefault();\n onMouseDown(e);\n }}\n tooltip={text}\n label={text}\n key={icon}\n active={active?.(editor) \|\| false}\n >\n <Icon name={icon} />\n </ToolbarButton>\n );\n }\n )}\n {/ Insert group: links, images, source-code, tables /}\n {activeFeatures.links && (\n <AnchorButton data-testid={testIds.link} editor={editor} osx={osx} />\n )}\n {activeFeatures.images && (\n <ImageButton\n data-testid={testIds.image}\n editor={editor}\n imageInsertionMode={imageInsertionMode}\n />\n )}\n {activeFeatures.tables && <TableButton data-testid={testIds.table} editor={editor} />}\n {/ Separator before AI */}\n {(activeFeatures.links \|\| activeFeatures.images \|\| activeFeatures.tables) &&\n activeFeatures['ai-rewrite'] &&\n onRewriteClick && <ToolbarSeparator />}\n {activeFeatures['ai-rewrite'] && onRewriteClick && (\n <AIRewriteButton\n data-testid={testIds.aiRewrite}\n editor={editor}\n onRewriteClick={onRewriteClick}\n renderSuggestionEditor={renderSuggestionEditor}\n />\n )}\n </Flex>\n </Flex>\n );\n};\n\nexport default withTestIds(Toolbar, getToolbarTestIds);\n"]}

package/lib/components/Editor/Toolbar/Toolbar.test-ids.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export declare const elements: readonly ["toolbar", "text-styles", "bold", "italic", "strike-through", "bulleted-list", "numbered-list", "indent", "unindent", "link", "image"];
-export declare const getToolbarTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["toolbar", "text-styles", "bold", "italic", "strike-through", "bulleted-list", "numbered-list", "indent", "unindent", "link", "image"]>;
+export declare const elements: 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 declare const getToolbarTestIds: (testIdProp?: import("@pega/cosmos-react-core").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"]>;
 //# sourceMappingURL=Toolbar.test-ids.d.ts.map

package/lib/components/Editor/Toolbar/Toolbar.test-ids.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.test-ids.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,~~kJAYX~~,CAAC;AAEX,eAAO,MAAM,iBAAiB,~~4QAAqC~~,CAAC"}
1	+ {"version":3,"file":"Toolbar.test-ids.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,mXA4BX,CAAC;AAEX,eAAO,MAAM,iBAAiB,6eAAqC,CAAC"}

package/lib/components/Editor/Toolbar/Toolbar.test-ids.js CHANGED Viewed

@@ -5,12 +5,28 @@ export const elements = [
     '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'
+    'image',
+    'source-code',
+    'ai-rewrite',
+    'overflow',
+    'word-count'
 ];
 export const getToolbarTestIds = createTestIds('toolbar', elements);
 //# sourceMappingURL=Toolbar.test-ids.js.map

package/lib/components/Editor/Toolbar/Toolbar.test-ids.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.test-ids.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,SAAS;IACT,aAAa;IACb,MAAM;IACN,QAAQ;IACR,gBAAgB;IAChB,eAAe;IACf,eAAe;IACf,QAAQ;IACR,UAAU;IACV,MAAM;IACN,OAAO;~~CACC~~,CAAC;AAEX,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const elements = [\n 'toolbar',\n 'text-styles',\n 'bold',\n 'italic',\n 'strike-through',\n 'bulleted-list',\n 'numbered-list',\n 'indent',\n 'unindent',\n 'link',\n 'image'\n] as const;\n\nexport const getToolbarTestIds = createTestIds('toolbar', elements);\n"]}
1	+ {"version":3,"file":"Toolbar.test-ids.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,SAAS;IACT,aAAa;IACb,MAAM;IACN,QAAQ;IACR,gBAAgB;IAChB,WAAW;IACX,WAAW;IACX,aAAa;IACb,aAAa;IACb,WAAW;IACX,YAAY;IACZ,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,cAAc;IACd,aAAa;IACb,eAAe;IACf,eAAe;IACf,QAAQ;IACR,UAAU;IACV,OAAO;IACP,MAAM;IACN,OAAO;IACP,aAAa;IACb,YAAY;IACZ,UAAU;IACV,YAAY;CACJ,CAAC;AAEX,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const elements = [\n 'toolbar',\n 'text-styles',\n 'bold',\n 'italic',\n 'strike-through',\n 'underline',\n 'subscript',\n 'superscript',\n 'font-family',\n 'font-size',\n 'text-color',\n 'background-color',\n 'alignment',\n 'align-left',\n 'align-center',\n 'align-right',\n 'bulleted-list',\n 'numbered-list',\n 'indent',\n 'unindent',\n 'table',\n 'link',\n 'image',\n 'source-code',\n 'ai-rewrite',\n 'overflow',\n 'word-count'\n] as const;\n\nexport const getToolbarTestIds = createTestIds('toolbar', elements);\n"]}

package/lib/components/Editor/Toolbar/WordCount.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { Editor as TiptapEditor } from '@tiptap/core';
+interface WordCountProps {
+    editor: TiptapEditor;
+    'data-testid'?: string;
+}
+declare const WordCount: ({ editor, "data-testid": dataTestId }: WordCountProps) => import("react/jsx-runtime").JSX.Element;
+export default WordCount;
+//# sourceMappingURL=WordCount.d.ts.map

package/lib/components/Editor/Toolbar/WordCount.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"WordCount.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/WordCount.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAW3D,UAAU,cAAc;IACtB,MAAM,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,SAAS,GAAI,uCAAuC,cAAc,4CA6BvE,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,31 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { Text, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
+const StyledText = styled(Text) `
+  text-align: right;
+`;
+StyledText.defaultProps = defaultThemeProp;
+const WordCount = ({ editor, 'data-testid': dataTestId }) => {
+    const t = useI18n();
+    const [wordCount, setWordCount] = useState(0);
+    const [charCount, setCharCount] = useState(0);
+    useEffect(() => {
+        const updateCounts = () => {
+            const text = editor.getText();
+            const trimmedText = text.trim();
+            const words = trimmedText ? trimmedText.split(/\s+/).length : 0;
+            const chars = text.length;
+            setWordCount(words);
+            setCharCount(chars);
+        };
+        updateCounts();
+        editor.on('update', updateCounts);
+        return () => {
+            editor.off('update', updateCounts);
+        };
+    }, [editor]);
+    return (_jsxs(StyledText, { variant: 'secondary', "data-testid": dataTestId, children: [t('rte_word_count', [wordCount], { count: wordCount }), ",", ' ', t('rte_character_count', [charCount], { count: charCount })] }));
+};
+export default WordCount;
+//# sourceMappingURL=WordCount.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"WordCount.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/WordCount.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE1E,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE9B,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAO3C,MAAM,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAkB,EAAE,EAAE;IAC1E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC;YAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YAChC,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAChE,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;YAC1B,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC;QAEF,YAAY,EAAE,CAAC;QACf,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAElC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,MAAC,UAAU,IAAC,OAAO,EAAC,WAAW,iBAAc,UAAU,aACpD,CAAC,CAAC,gBAAgB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,OAAG,GAAG,EAC5D,CAAC,CAAC,qBAAqB,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,IACjD,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useState, useEffect } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\nimport styled from 'styled-components';\n\nimport { Text, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';\n\nconst StyledText = styled(Text)`\n text-align: right;\n`;\n\nStyledText.defaultProps = defaultThemeProp;\n\ninterface WordCountProps {\n editor: TiptapEditor;\n 'data-testid'?: string;\n}\n\nconst WordCount = ({ editor, 'data-testid': dataTestId }: WordCountProps) => {\n const t = useI18n();\n const [wordCount, setWordCount] = useState(0);\n const [charCount, setCharCount] = useState(0);\n\n useEffect(() => {\n const updateCounts = () => {\n const text = editor.getText();\n const trimmedText = text.trim();\n const words = trimmedText ? trimmedText.split(/\\s+/).length : 0;\n const chars = text.length;\n setWordCount(words);\n setCharCount(chars);\n };\n\n updateCounts();\n editor.on('update', updateCounts);\n\n return () => {\n editor.off('update', updateCounts);\n };\n }, [editor]);\n\n return (\n <StyledText variant='secondary' data-testid={dataTestId}>\n {t('rte_word_count', [wordCount], { count: wordCount })},{' '}\n {t('rte_character_count', [charCount], { count: charCount })}\n </StyledText>\n );\n};\n\nexport default WordCount;\n"]}

package/lib/components/Editor/extensions/FontSize.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+export interface FontSizeOptions {
+    types: string[];
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the font size
+             */
+            setFontSize: (size: string) => ReturnType;
+            /**
+             * Unset the font size
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+export declare const FontSize: Extension<FontSizeOptions, any>;
+//# sourceMappingURL=FontSize.d.ts.map

package/lib/components/Editor/extensions/FontSize.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FontSize.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/extensions/FontSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,8BAA8B,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,QAAQ,EAAE;YACR;;eAEG;YACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,UAAU,CAAC;YAC1C;;eAEG;YACH,aAAa,EAAE,MAAM,UAAU,CAAC;SACjC,CAAC;KACH;CACF;AAED,eAAO,MAAM,QAAQ,iCA8CnB,CAAC"}