npm - @pega/cosmos-react-rte - Versions diffs - 9.33.2 → 9.34.0 - Mend

@pega/cosmos-react-rte 9.33.2 → 9.34.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 (28) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FontFamilySelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/FontFamilySelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, 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 { TranslationPack } from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport useEscapeKey from '../hooks/useEscapeKey';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledFontSelect = 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 height: calc(3.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n min-width: 12ch;\n\n span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n `;\n});\n\nStyledFontSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div(({ theme }) => {\n return css`\n min-width: 16ch;\n max-height: calc(30 * ${theme.base.spacing});\n `;\n});\n\nStyledSelectMenu.defaultProps = defaultThemeProp;\n\ntype FontFamilyItem =\n \| { id: string; labelKey: keyof TranslationPack; value: string; label?: never }\n \| { id: string; label: string; value: string; labelKey?: never };\n\nconst FONT_FAMILIES: FontFamilyItem[] = [\n { id: 'default', labelKey: 'rte_default_font', value: '' },\n { id: 'arial', label: 'Arial', value: 'Arial, Helvetica, sans-serif' },\n { id: 'courier', label: 'Courier New', value: '\"Courier New\", Courier, monospace' },\n { id: 'georgia', label: 'Georgia', value: 'Georgia, serif' },\n { id: 'times', label: 'Times New Roman', value: '\"Times New Roman\", Times, serif' },\n { id: 'trebuchet', label: 'Trebuchet MS', value: '\"Trebuchet MS\", sans-serif' },\n { id: 'verdana', label: 'Verdana', value: 'Verdana, Geneva, sans-serif' }\n];\n\ninterface FontFamilySelectProps {\n editor: TiptapEditor;\n 'data-testid'?: string;\n}\n\nconst FontFamilySelect = ({ editor, ...restProps }: FontFamilySelectProps) => {\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 useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef], () => {\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 onFontSelect = (fontId: string, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n\n const font = FONT_FAMILIES.find(f => f.id === fontId);\n if (font) {\n if (font.value) {\n editor.chain().focus().setFontFamily(font.value).run();\n } else {\n editor.chain().focus().unsetFontFamily().run();\n }\n }\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 getFontLabel = (font: FontFamilyItem): string => {\n if (font.labelKey) {\n return t(font.labelKey);\n }\n return font.label;\n };\n\n const getActiveFont = (): string => {\n const attrs = editor.getAttributes('textStyle');\n const { fontFamily } = attrs;\n if (typeof fontFamily !== 'string' \|\| !fontFamily) return t('rte_default_font');\n const match = FONT_FAMILIES.find(f => f.value === fontFamily);\n return match ? getFontLabel(match) : fontFamily;\n };\n\n const getActiveFontId = (): string => {\n const attrs = editor.getAttributes('textStyle');\n const { fontFamily } = attrs;\n if (typeof fontFamily !== 'string' \|\| !fontFamily) return 'default';\n const match = FONT_FAMILIES.find(f => f.value === fontFamily);\n return match?.id ?? 'default';\n };\n\n return (\n <>\n <StyledFontSelect\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_font_family')}. ${getActiveFont()} ${t('selected').toLocaleLowerCase()}`}\n aria-haspopup\n >\n <span>{getActiveFont()}</span>\n <Icon name='arrow-micro-down' />\n </StyledFontSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_font_family')}\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={FONT_FAMILIES.map(font => ({\n id: font.id,\n primary: getFontLabel(font),\n selected: font.id === getActiveFontId()\n }))}\n focusControlEl={buttonRef.current ?? undefined}\n mode='single-select'\n ref={menuRef}\n onItemClick={onFontSelect}\n />\n </Popover>\n </>\n );\n};\n\nexport default FontFamilySelect;\n"]}
1	+ {"version":3,"file":"FontFamilySelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/FontFamilySelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, 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 TouchDialog,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize,\n isInstance,\n isTouchDevice\n} from '@pega/cosmos-react-core';\nimport type { TranslationPack } from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport useEscapeKey from '../hooks/useEscapeKey';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledFontSelect = 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 height: calc(3.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n min-width: 12ch;\n\n span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n `;\n});\n\nStyledFontSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div(({ theme }) => {\n return css`\n min-width: 16ch;\n max-height: calc(30 * ${theme.base.spacing});\n `;\n});\n\nStyledSelectMenu.defaultProps = defaultThemeProp;\ntype FontFamilyItem =\n \| { id: string; labelKey: keyof TranslationPack; value: string; label?: never }\n \| { id: string; label: string; value: string; labelKey?: never };\n\nconst FONT_FAMILIES: FontFamilyItem[] = [\n { id: 'default', labelKey: 'rte_default_font', value: '' },\n { id: 'arial', label: 'Arial', value: 'Arial, Helvetica, sans-serif' },\n { id: 'courier', label: 'Courier New', value: '\"Courier New\", Courier, monospace' },\n { id: 'georgia', label: 'Georgia', value: 'Georgia, serif' },\n { id: 'times', label: 'Times New Roman', value: '\"Times New Roman\", Times, serif' },\n { id: 'trebuchet', label: 'Trebuchet MS', value: '\"Trebuchet MS\", sans-serif' },\n { id: 'verdana', label: 'Verdana', value: 'Verdana, Geneva, sans-serif' }\n];\n\ninterface FontFamilySelectProps {\n editor: TiptapEditor;\n 'data-testid'?: string;\n}\n\nconst FontFamilySelect = ({ editor, ...restProps }: FontFamilySelectProps) => {\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 const touchDialogRef = useRef<HTMLDivElement>(null);\n\n useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef, touchDialogRef], () => {\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 onFontSelect = (fontId: string, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n\n const font = FONT_FAMILIES.find(f => f.id === fontId);\n if (font) {\n if (font.value) {\n editor.chain().focus().setFontFamily(font.value).run();\n } else {\n editor.chain().focus().unsetFontFamily().run();\n }\n }\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 getFontLabel = (font: FontFamilyItem): string => {\n if (font.labelKey) {\n return t(font.labelKey);\n }\n return font.label;\n };\n\n const getActiveFont = (): string => {\n const attrs = editor.getAttributes('textStyle');\n const { fontFamily } = attrs;\n if (typeof fontFamily !== 'string' \|\| !fontFamily) return t('rte_default_font');\n const match = FONT_FAMILIES.find(f => f.value === fontFamily);\n return match ? getFontLabel(match) : fontFamily;\n };\n\n const getActiveFontId = (): string => {\n const attrs = editor.getAttributes('textStyle');\n const { fontFamily } = attrs;\n if (typeof fontFamily !== 'string' \|\| !fontFamily) return 'default';\n const match = FONT_FAMILIES.find(f => f.value === fontFamily);\n return match?.id ?? 'default';\n };\n\n const menuContent = (\n <Menu\n items={FONT_FAMILIES.map(font => ({\n id: font.id,\n primary: getFontLabel(font),\n selected: font.id === getActiveFontId()\n }))}\n focusControlEl={isTouchDevice ? undefined : buttonRef.current ?? undefined}\n mode='single-select'\n ref={menuRef}\n onItemClick={onFontSelect}\n />\n );\n\n return (\n <>\n <StyledFontSelect\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 !touchDialogRef.current?.contains(relatedTarget)\n ) {\n setOpen(false);\n }\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`${t('rte_font_family')}. ${getActiveFont()} ${t('selected').toLocaleLowerCase()}`}\n aria-haspopup\n >\n <span>{getActiveFont()}</span>\n <Icon name='arrow-micro-down' />\n </StyledFontSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_font_family')}\n </Tooltip>\n )}\n {isTouchDevice ? (\n <TouchDialog\n ref={touchDialogRef}\n open={open}\n heading={t('rte_font_family')}\n onDismiss={() => setOpen(false)}\n >\n {menuContent}\n </TouchDialog>\n ) : (\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n {menuContent}\n </Popover>\n )}\n </>\n );\n};\n\nexport default FontFamilySelect;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FontSizeSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/FontSizeSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;~~AAqE3D~~,UAAU,mBAAmB;IAC3B,MAAM,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,GAAI,0BAA0B,mBAAmB,~~4CA6IpE~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"FontSizeSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/FontSizeSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAuE3D,UAAU,mBAAmB;IAC3B,MAAM,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,GAAI,0BAA0B,mBAAmB,4CA+JpE,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { Popover, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize, isInstance } from '@pega/cosmos-react-core';
+import { Popover, TouchDialog, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize, isInstance, isTouchDevice } from '@pega/cosmos-react-core';
 import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
 import useEscapeKey from '../hooks/useEscapeKey';
 import useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';
@@ -55,7 +55,8 @@ const FontSizeSelect = ({ editor, ...restProps }) => {
     const buttonRef = useRef(null);
     const popoverRef = useRef(null);
     const menuRef = useRef(null);
-    useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef], () => {
+    const touchDialogRef = useRef(null);
+    useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef, touchDialogRef], () => {
         if (open) {
             setOpen(false);
         }
@@ -101,6 +102,11 @@ const FontSizeSelect = ({ editor, ...restProps }) => {
         const match = FONT_SIZES.find(s => s.value === fontSize);
         return match ? match.id : '12';
     };
+    const menuContent = (_jsx(Menu, { items: FONT_SIZES.map(({ id, label }) => ({
+            id,
+            primary: label,
+            selected: id === getActiveSizeId()
+        })), scrollAt: isTouchDevice ? FONT_SIZES.length : undefined, focusControlEl: isTouchDevice ? undefined : buttonRef.current ?? undefined, mode: 'single-select', ref: menuRef, onItemClick: onSizeSelect }));
     return (_jsxs(_Fragment, { children: [_jsxs(StyledFontSizeSelect, { ...restProps, variant: 'simple', type: 'button', icon: false, ref: buttonRef, "data-toolbar-item": 'true', onMouseDown: (e) => {
                     e.preventDefault();
                     if (!open) {
@@ -132,14 +138,11 @@ const FontSizeSelect = ({ editor, ...restProps }) => {
                     if (isInstance(relatedTarget, Node) &&
                         !buttonRef.current?.contains(relatedTarget) &&
                         !popoverRef.current?.contains(relatedTarget) &&
-                        !menuRef.current?.contains(relatedTarget)) {
+                        !menuRef.current?.contains(relatedTarget) &&
+                        !touchDialogRef.current?.contains(relatedTarget)) {
                         setOpen(false);
                     }
-                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `${t('rte_font_size')}. ${getActiveSize()} ${t('selected').toLocaleLowerCase()}`, "aria-haspopup": true, children: [_jsx("span", { children: getActiveSize() }), _jsx(Icon, { name: 'arrow-micro-down' })] }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_font_size') })), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: FONT_SIZES.map(({ id, label }) => ({
-                        id,
-                        primary: label,
-                        selected: id === getActiveSizeId()
-                    })), focusControlEl: buttonRef.current ?? undefined, mode: 'single-select', ref: menuRef, onItemClick: onSizeSelect }) })] }));
+                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `${t('rte_font_size')}. ${getActiveSize()} ${t('selected').toLocaleLowerCase()}`, "aria-haspopup": true, children: [_jsx("span", { children: getActiveSize() }), _jsx(Icon, { name: 'arrow-micro-down' })] }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_font_size') })), isTouchDevice ? (_jsx(TouchDialog, { ref: touchDialogRef, open: open, heading: t('rte_font_size'), onDismiss: () => setOpen(false), children: menuContent })) : (_jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: menuContent }))] }));
 };
 export default FontSizeSelect;
 //# sourceMappingURL=FontSizeSelect.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FontSizeSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/FontSizeSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, 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 * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport useEscapeKey from '../hooks/useEscapeKey';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledFontSizeSelect = 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 height: calc(3.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n min-width: 6ch;\n\n span {\n white-space: nowrap;\n }\n `;\n});\n\nStyledFontSizeSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div(({ theme }) => {\n return css`\n min-width: 8ch;\n max-height: calc(30 * ${theme.base.spacing});\n `;\n});\n\nStyledSelectMenu.defaultProps = defaultThemeProp;\n\nconst FONT_SIZES = [\n { id: '8', label: '8px', value: '8px' },\n { id: '9', label: '9px', value: '9px' },\n { id: '10', label: '10px', value: '10px' },\n { id: '11', label: '11px', value: '11px' },\n { id: '12', label: '12px', value: '12px' },\n { id: '14', label: '14px', value: '14px' },\n { id: '16', label: '16px', value: '16px' },\n { id: '18', label: '18px', value: '18px' },\n { id: '20', label: '20px', value: '20px' },\n { id: '24', label: '24px', value: '24px' },\n { id: '28', label: '28px', value: '28px' },\n { id: '32', label: '32px', value: '32px' },\n { id: '36', label: '36px', value: '36px' },\n { id: '48', label: '48px', value: '48px' },\n { id: '72', label: '72px', value: '72px' }\n];\n\ninterface FontSizeSelectProps {\n editor: TiptapEditor;\n 'data-testid'?: string;\n}\n\nconst FontSizeSelect = ({ editor, ...restProps }: FontSizeSelectProps) => {\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 useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef], () => {\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 onSizeSelect = (sizeId: string, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n\n const size = FONT_SIZES.find(s => s.id === sizeId);\n if (size) {\n editor.chain().focus().setFontSize(size.value).run();\n }\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 getActiveSize = (): string => {\n const attrs = editor.getAttributes('textStyle');\n const { fontSize } = attrs;\n if (typeof fontSize !== 'string' \|\| !fontSize) return '12px';\n const match = FONT_SIZES.find(s => s.value === fontSize);\n return match ? match.label : '12px';\n };\n\n const getActiveSizeId = (): string => {\n const attrs = editor.getAttributes('textStyle');\n const { fontSize } = attrs;\n if (typeof fontSize !== 'string' \|\| !fontSize) return '12';\n const match = FONT_SIZES.find(s => s.value === fontSize);\n return match ? match.id : '12';\n };\n\n return (\n <>\n <StyledFontSizeSelect\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_font_size')}. ${getActiveSize()} ${t('selected').toLocaleLowerCase()}`}\n aria-haspopup\n >\n <span>{getActiveSize()}</span>\n <Icon name='arrow-micro-down' />\n </StyledFontSizeSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_font_size')}\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={FONT_SIZES.map(({ id, label }) => ({\n id,\n primary: label,\n selected: id === getActiveSizeId()\n }))}\n focusControlEl={buttonRef.current ?? undefined}\n mode='single-select'\n ref={menuRef}\n onItemClick={onSizeSelect}\n />\n </Popover>\n </>\n );\n};\n\nexport default FontSizeSelect;\n"]}
1	+ {"version":3,"file":"FontSizeSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/FontSizeSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, 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 TouchDialog,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize,\n isInstance,\n isTouchDevice\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport useEscapeKey from '../hooks/useEscapeKey';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledFontSizeSelect = 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 height: calc(3.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n min-width: 6ch;\n\n span {\n white-space: nowrap;\n }\n `;\n});\n\nStyledFontSizeSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div(({ theme }) => {\n return css`\n min-width: 8ch;\n max-height: calc(30 * ${theme.base.spacing});\n `;\n});\n\nStyledSelectMenu.defaultProps = defaultThemeProp;\n\nconst FONT_SIZES = [\n { id: '8', label: '8px', value: '8px' },\n { id: '9', label: '9px', value: '9px' },\n { id: '10', label: '10px', value: '10px' },\n { id: '11', label: '11px', value: '11px' },\n { id: '12', label: '12px', value: '12px' },\n { id: '14', label: '14px', value: '14px' },\n { id: '16', label: '16px', value: '16px' },\n { id: '18', label: '18px', value: '18px' },\n { id: '20', label: '20px', value: '20px' },\n { id: '24', label: '24px', value: '24px' },\n { id: '28', label: '28px', value: '28px' },\n { id: '32', label: '32px', value: '32px' },\n { id: '36', label: '36px', value: '36px' },\n { id: '48', label: '48px', value: '48px' },\n { id: '72', label: '72px', value: '72px' }\n];\n\ninterface FontSizeSelectProps {\n editor: TiptapEditor;\n 'data-testid'?: string;\n}\n\nconst FontSizeSelect = ({ editor, ...restProps }: FontSizeSelectProps) => {\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 const touchDialogRef = useRef<HTMLDivElement>(null);\n\n useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef, touchDialogRef], () => {\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 onSizeSelect = (sizeId: string, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n\n const size = FONT_SIZES.find(s => s.id === sizeId);\n if (size) {\n editor.chain().focus().setFontSize(size.value).run();\n }\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 getActiveSize = (): string => {\n const attrs = editor.getAttributes('textStyle');\n const { fontSize } = attrs;\n if (typeof fontSize !== 'string' \|\| !fontSize) return '12px';\n const match = FONT_SIZES.find(s => s.value === fontSize);\n return match ? match.label : '12px';\n };\n\n const getActiveSizeId = (): string => {\n const attrs = editor.getAttributes('textStyle');\n const { fontSize } = attrs;\n if (typeof fontSize !== 'string' \|\| !fontSize) return '12';\n const match = FONT_SIZES.find(s => s.value === fontSize);\n return match ? match.id : '12';\n };\n\n const menuContent = (\n <Menu\n items={FONT_SIZES.map(({ id, label }) => ({\n id,\n primary: label,\n selected: id === getActiveSizeId()\n }))}\n scrollAt={isTouchDevice ? FONT_SIZES.length : undefined}\n focusControlEl={isTouchDevice ? undefined : buttonRef.current ?? undefined}\n mode='single-select'\n ref={menuRef}\n onItemClick={onSizeSelect}\n />\n );\n\n return (\n <>\n <StyledFontSizeSelect\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 !touchDialogRef.current?.contains(relatedTarget)\n ) {\n setOpen(false);\n }\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`${t('rte_font_size')}. ${getActiveSize()} ${t('selected').toLocaleLowerCase()}`}\n aria-haspopup\n >\n <span>{getActiveSize()}</span>\n <Icon name='arrow-micro-down' />\n </StyledFontSizeSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_font_size')}\n </Tooltip>\n )}\n {isTouchDevice ? (\n <TouchDialog\n ref={touchDialogRef}\n open={open}\n heading={t('rte_font_size')}\n onDismiss={() => setOpen(false)}\n >\n {menuContent}\n </TouchDialog>\n ) : (\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n {menuContent}\n </Popover>\n )}\n </>\n );\n};\n\nexport default FontSizeSelect;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TableButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TableButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;~~AAsH3D~~,UAAU,gBAAgB;IACxB,MAAM,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,WAAW,GAAI,0BAA0B,gBAAgB,~~4CAuT9D~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"TableButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TableButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAuI3D,UAAU,gBAAgB;IACxB,MAAM,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,WAAW,GAAI,0BAA0B,gBAAgB,4CA2V9D,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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 { Popover, TouchDialog, Icon, registerIcon, useOuterEvent, Button, Menu, defaultThemeProp, useI18n, Tooltip, Flex, Text, isInstance, tryCatch, isTouchDevice } 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';
@@ -28,7 +28,16 @@ const StyledTableButton = styled(Button)(({ theme, $active }) => {
 StyledTableButton.defaultProps = defaultThemeProp;
 const StyledGridContainer = styled.div(({ theme }) => {
     return css `
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
     padding: ${theme.base.spacing};
+    > div {
+      flex: 1;
+      min-height: 0;
+    }
   `;
 });
 StyledGridContainer.defaultProps = defaultThemeProp;
@@ -67,6 +76,10 @@ StyledCell.defaultProps = defaultThemeProp;
 const StyledMenuContainer = styled.div(() => {
     return css `
     min-width: 12ch;
+    > div:focus-visible {
+      box-shadow: none;
+    }
   `;
 });
 StyledMenuContainer.defaultProps = defaultThemeProp;
@@ -74,8 +87,10 @@ 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;
+    justify-content: space-between;
+    margin: auto ${theme.base.spacing} 0;
+    width: calc(100% - (2 * ${theme.base.spacing}));
+    padding-block-end: ${theme.base.spacing};
   `;
 });
 StyledButtonGroup.defaultProps = defaultThemeProp;
@@ -84,6 +99,7 @@ const TableButton = ({ editor, ...restProps }) => {
     const [open, setOpen] = useState(false);
     const [hoveredCell, setHoveredCell] = useState(null);
     const [isInTable, setIsInTable] = useState(false);
+    const [focusEditorAfterClose, setFocusEditorAfterClose] = useState(false);
     const [selectedSize, setSelectedSize] = useState({
         row: 1,
         col: 1
@@ -92,6 +108,7 @@ const TableButton = ({ editor, ...restProps }) => {
     const justOpenedRef = useRef(false);
     const buttonRef = useRef(null);
     const popoverRef = useRef(null);
+    const touchDialogRef = useRef(null);
     const gridContainerRef = useRef(null);
     const menuRef = useRef(null);
     const firstCellCallbackRef = useCallback((node) => {
@@ -118,7 +135,7 @@ const TableButton = ({ editor, ...restProps }) => {
             editor.off('transaction', updateState);
         };
     }, [editor, checkIsInTable]);
-    useOuterEvent('mousedown', [buttonRef, popoverRef], () => {
+    useOuterEvent('mousedown', [buttonRef, popoverRef, touchDialogRef], () => {
         if (open) {
             setOpen(false);
         }
@@ -130,9 +147,18 @@ const TableButton = ({ editor, ...restProps }) => {
     useEscapeKey(open, handleEscapeClose, editor);
     useCloseOnEditorClick(open, handleEscapeClose);
     const insertTable = useCallback((rows, cols) => {
+        if (isTouchDevice) {
+            setFocusEditorAfterClose(true);
+        }
         editor.chain().focus().insertTable({ rows, cols, withHeaderRow: false }).run();
         setOpen(false);
     }, [editor]);
+    const handleCellSelect = useCallback((row, col) => {
+        setSelectedSize({ row, col });
+        if (!isTouchDevice) {
+            insertTable(row + 1, col + 1);
+        }
+    }, [insertTable]);
     const addRow = () => {
         editor.chain().focus().addRowAfter().run();
         setOpen(false);
@@ -196,14 +222,11 @@ const TableButton = ({ editor, ...restProps }) => {
                 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}`));
+                result.push(_jsx(StyledCell, { ref: isFirstCell ? firstCellCallbackRef : undefined, tabIndex: isFirstCell ? 0 : -1, "$isSelected": isHovered || isKeyboardSelected, onMouseEnter: () => setHoveredCell({ row, col }), onClick: () => handleCellSelect(row, col), onKeyDown: handleCellKeyDown, "aria-label": t('rte_table_size', [row + 1, col + 1]) }, `${row}-${col}`));
             }
         }
         return result;
-    }, [hoveredCell, selectedSize, firstCellCallbackRef, handleCellKeyDown, insertTable, t]);
+    }, [hoveredCell, selectedSize, firstCellCallbackRef, handleCellKeyDown, handleCellSelect, t]);
     // Reset selected size to 2x2 default when opening
     useEffect(() => {
         if (open && !isInTable) {
@@ -221,9 +244,37 @@ const TableButton = ({ editor, ...restProps }) => {
     };
     const gridLabel = getGridLabel();
     const handleCancel = () => {
+        setFocusEditorAfterClose(false);
         setOpen(false);
         buttonRef.current?.focus();
     };
+    const tableContent = isInTable ? (_jsx(StyledMenuContainer, { children: _jsx(Menu, { ref: menuRef, focusControlEl: isTouchDevice ? undefined : 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: [!isTouchDevice && _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') })] })] }) }));
     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) => {
@@ -245,7 +296,8 @@ const TableButton = ({ editor, ...restProps }) => {
                         (!buttonRef.current?.contains(relatedTarget) &&
                             !popoverRef.current?.contains(relatedTarget) &&
                             !gridContainerRef.current?.contains(relatedTarget) &&
-                            !menuRef.current?.contains(relatedTarget))) {
+                            !menuRef.current?.contains(relatedTarget) &&
+                            !touchDialogRef.current?.contains(relatedTarget))) {
                         setOpen(false);
                     }
                 }, onClick: (e) => {
@@ -259,33 +311,15 @@ const TableButton = ({ editor, ...restProps }) => {
                         }, 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') })] })] }) })) })] }));
+                }, "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') })), isTouchDevice ? (_jsx(TouchDialog, { ref: touchDialogRef, open: open, heading: isInTable ? t('rte_table') : t('rte_insert_table'), onDismiss: () => {
+                    setFocusEditorAfterClose(false);
+                    setOpen(false);
+                }, onAfterClose: () => {
+                    if (focusEditorAfterClose) {
+                        setFocusEditorAfterClose(false);
+                        editor.commands.focus();
+                    }
+                }, children: tableContent })) : (_jsx(Popover, { show: open, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: tableContent }))] }));
 };
 export default TableButton;
 //# sourceMappingURL=TableButton.js.map

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

	@@ -1 +1 @@
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"]}
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 TouchDialog,\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 isTouchDevice\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 display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n padding: ${theme.base.spacing};\n\n > div {\n flex: 1;\n min-height: 0;\n }\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 > div:focus-visible {\n box-shadow: none;\n }\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: space-between;\n margin: auto ${theme.base.spacing} 0;\n width: calc(100% - (2 * ${theme.base.spacing}));\n padding-block-end: ${theme.base.spacing};\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 [focusEditorAfterClose, setFocusEditorAfterClose] = 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 touchDialogRef = 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, touchDialogRef], () => {\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 if (isTouchDevice) {\n setFocusEditorAfterClose(true);\n }\n editor.chain().focus().insertTable({ rows, cols, withHeaderRow: false }).run();\n setOpen(false);\n },\n [editor]\n );\n\n const handleCellSelect = useCallback(\n (row: number, col: number) => {\n setSelectedSize({ row, col });\n if (!isTouchDevice) {\n insertTable(row + 1, col + 1);\n }\n },\n [insertTable]\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={() => handleCellSelect(row, col)}\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, handleCellSelect, 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 setFocusEditorAfterClose(false);\n setOpen(false);\n buttonRef.current?.focus();\n };\n\n const tableContent = isInTable ? (\n <StyledMenuContainer>\n <Menu\n ref={menuRef}\n focusControlEl={isTouchDevice ? undefined : 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 {!isTouchDevice && <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\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 !touchDialogRef.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 {isTouchDevice ? (\n <TouchDialog\n ref={touchDialogRef}\n open={open}\n heading={isInTable ? t('rte_table') : t('rte_insert_table')}\n onDismiss={() => {\n setFocusEditorAfterClose(false);\n setOpen(false);\n }}\n onAfterClose={() => {\n if (focusEditorAfterClose) {\n setFocusEditorAfterClose(false);\n editor.commands.focus();\n }\n }}\n >\n {tableContent}\n </TouchDialog>\n ) : (\n <Popover show={open} target={buttonRef.current} placement='bottom-start' ref={popoverRef}>\n {tableContent}\n </Popover>\n )}\n </>\n );\n};\n\nexport default TableButton;\n"]}

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":"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"}
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;AAkB3D,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,4CAkLxF,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { Popover, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize, isInstance } from '@pega/cosmos-react-core';
+import { Popover, TouchDialog, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize, isInstance, isTouchDevice } 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';
@@ -89,10 +89,11 @@ const TextSelect = ({ osx, editor, ...restProps }) => {
     const buttonRef = useRef(null);
     const popoverRef = useRef(null);
     const menuRef = useRef(null);
+    const touchDialogRef = useRef(null);
     const textFormats = useMemo(() => {
         return getTextFormats(t, osx);
     }, [t, osx]);
-    useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef], () => {
+    useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef, touchDialogRef], () => {
         setOpen(false);
     });
     const handleEscapeClose = useCallback(() => {
@@ -157,6 +158,12 @@ const TextSelect = ({ osx, editor, ...restProps }) => {
             return unknown;
         return textFormats.find(({ id }) => id === format)?.text ?? unknown;
     })();
+    const menuContent = (_jsx(Menu, { items: textFormats.map(({ text, type, subText }) => ({
+            id: type,
+            primary: text,
+            secondary: [subText],
+            selected: type === activeFormat()
+        })), focusControlEl: isTouchDevice ? undefined : buttonRef.current ?? undefined, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }));
     return (_jsxs(_Fragment, { children: [_jsxs(StyledTextSelect, { ...restProps, variant: 'simple', type: 'button', icon: false, ref: buttonRef, "data-toolbar-item": 'true', onMouseDown: (e) => {
                     e.preventDefault();
                     if (!open) {
@@ -188,15 +195,11 @@ const TextSelect = ({ osx, editor, ...restProps }) => {
                     if (isInstance(relatedTarget, Node) &&
                         !buttonRef.current?.contains(relatedTarget) &&
                         !popoverRef.current?.contains(relatedTarget) &&
-                        !menuRef.current?.contains(relatedTarget)) {
+                        !menuRef.current?.contains(relatedTarget) &&
+                        !touchDialogRef.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,
-                        secondary: [subText],
-                        selected: type === activeFormat()
-                    })), focusControlEl: buttonRef.current ?? undefined, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }) })] }));
+                }, 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') })), isTouchDevice ? (_jsx(TouchDialog, { ref: touchDialogRef, open: open, heading: t('rte_heading_style'), onDismiss: () => setOpen(false), children: menuContent })) : (_jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: menuContent }))] }));
 };
 export default TextSelect;
 //# sourceMappingURL=TextSelect.js.map