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/TextSelect.js.map CHANGED Viewed

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

package/lib/components/RichTextEditor/Toolbar/AnchorButton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EAKH,MAAM,OAAO,CAAC;~~AAkBf~~,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;~~AAW5D~~,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;CACd;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,~~CAyNtD~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EAKH,MAAM,OAAO,CAAC;AAsBf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAmC5D,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;CACd;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CA2NtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/RichTextEditor/Toolbar/AnchorButton.js CHANGED Viewed

@@ -2,19 +2,41 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef, useState, useEffect } from 'react';
 import { Text, Editor, Transforms } from 'slate';
 import { ReactEditor, useSlate } from 'slate-react';
-import { Button, CardContent, Grid, Icon, registerIcon, Input, Popover, useOuterEvent, useElement, Form, useI18n } from '@pega/cosmos-react-core';
+import styled from 'styled-components';
+import { Button, CardContent, Grid, Icon, registerIcon, Input, TouchDialog, Popover, useOuterEvent, useElement, Form, useI18n, isTouchDevice, defaultThemeProp } from '@pega/cosmos-react-core';
 import * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';
 import { useRTEContext } from '../RichTextEditor.context';
 import EditorCommands from '../utils/EditorCommands';
 import ToolbarButton from './ToolbarButton';
 import { getKeyCommand } from './utils';
 registerIcon(chainIcon);
+const StyledTouchDialogContent = styled(CardContent)(() => `
+  flex: 1;
+  > div {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+  > form {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+  > form > div:not([aria-hidden='true']):nth-last-child(2) {
+    margin-top: auto;
+  }
+`);
+StyledTouchDialogContent.defaultProps = defaultThemeProp;
 const AnchorButton = ({ osx, ...props }) => {
     const t = useI18n();
     const { setPopoverOpen, onEditorFocus } = useRTEContext();
     const buttonRef = useRef(null);
     const textInputRef = useRef(null);
     const urlInputRef = useRef(null);
+    const touchDialogRef = useRef(null);
     const editor = useSlate();
     const [popoverEl, setPopoverEl] = useElement();
     const [selectedText, setSelectedText] = useState('');
@@ -50,7 +72,7 @@ const AnchorButton = ({ osx, ...props }) => {
             }, 0);
         }
     };
-    useOuterEvent('mousedown', [popoverEl], () => {
+    useOuterEvent('mousedown', [popoverEl, buttonRef, touchDialogRef], () => {
         if (anchorMenu) {
             resetMenu();
         }
@@ -110,6 +132,32 @@ const AnchorButton = ({ osx, ...props }) => {
             document.removeEventListener('keydown', keyCommandListener);
         };
     }, []);
+    const anchorFormContent = (_jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: cancelAnchorCreation, onMouseDown: cancelAnchorCreation, type: 'button', children: t('cancel') }), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', type: 'submit', variant: 'primary', children: t('apply') })] }), onSubmit: (e) => {
+            e.preventDefault();
+            createLink();
+        }, children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: t('rte_link_text'), value: selectedText, onClick: preventDef, onChange: (e) => setSelectedText(e.target.value), ref: textInputRef }), _jsx(Input, { label: t('rte_link_url'), value: url, onClick: preventDef, onChange: (e) => {
+                        const urlInput = e.target.value;
+                        setUrl(urlInput);
+                        if (!urlMatch) {
+                            try {
+                                // eslint-disable-next-line no-new
+                                new URL(/^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `http:${urlInput}`);
+                                setUrlMatch(true);
+                            }
+                            catch {
+                                setUrlMatch(false);
+                            }
+                        }
+                    }, onBlur: () => {
+                        try {
+                            // eslint-disable-next-line no-new
+                            new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `http:${url}`);
+                            setUrlMatch(true);
+                        }
+                        catch {
+                            setUrlMatch(false);
+                        }
+                    }, info: !urlMatch ? t('rte_invalid_url') : '', status: !urlMatch ? 'error' : undefined, ref: urlInputRef })] }) }));
     return (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { ref: buttonRef, onMouseDown: () => {
                     openMenu();
                 }, onKeyDown: (e) => {
@@ -117,40 +165,7 @@ const AnchorButton = ({ osx, ...props }) => {
                         e.preventDefault();
                         openMenu({ focusInput: true });
                     }
-                }, active: isLinkActive(), tooltip: tooltip, label: t('rte_link'), ...props, children: _jsx(Icon, { name: 'chain' }) }), _jsx(Popover, { show: anchorMenu, target: buttonRef.current, ref: setPopoverEl, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: cancelAnchorCreation, onMouseDown: cancelAnchorCreation, type: 'button', children: "Cancel" }), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', type: 'submit', variant: 'primary', children: "Apply" })] }), onSubmit: (e) => {
-                            e.preventDefault();
-                            createLink();
-                        }, children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: 'Text', value: selectedText, onClick: preventDef, onChange: (e) => {
-                                        setSelectedText(e.target.value);
-                                    }, onBlur: () => {
-                                        setTimeout(() => {
-                                            if (document.activeElement !== urlInputRef.current) {
-                                                resetMenu({ focusEditor: false });
-                                            }
-                                        }, 0);
-                                    }, ref: textInputRef }), _jsx(Input, { label: 'URL', value: url, onClick: preventDef, onChange: (e) => {
-                                        const urlInput = e.target.value;
-                                        setUrl(urlInput);
-                                        if (!urlMatch) {
-                                            try {
-                                                // eslint-disable-next-line no-new
-                                                new URL(/^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `http:${urlInput}`);
-                                                setUrlMatch(true);
-                                            }
-                                            catch {
-                                                setUrlMatch(false);
-                                            }
-                                        }
-                                    }, onBlur: () => {
-                                        try {
-                                            // eslint-disable-next-line no-new
-                                            new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `http:${url}`);
-                                            setUrlMatch(true);
-                                        }
-                                        catch {
-                                            setUrlMatch(false);
-                                        }
-                                    }, info: !urlMatch ? 'Not a valid URL' : '', status: !urlMatch ? 'error' : undefined, ref: urlInputRef })] }) }) }) })] }));
+                }, active: isLinkActive(), tooltip: tooltip, label: t('rte_link'), ...props, children: _jsx(Icon, { name: 'chain' }) }), isTouchDevice ? (_jsx(TouchDialog, { ref: touchDialogRef, open: anchorMenu, heading: t('rte_add_link'), onDismiss: () => resetMenu(), children: _jsx(StyledTouchDialogContent, { children: anchorFormContent }) })) : (_jsx(Popover, { show: anchorMenu, target: buttonRef.current, ref: setPopoverEl, placement: 'bottom', children: _jsx(CardContent, { children: anchorFormContent }) }))] }));
 };
 export default AnchorButton;
 //# sourceMappingURL=AnchorButton.js.map

package/lib/components/RichTextEditor/Toolbar/AnchorButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect } from 'react';\nimport type {\n FC,\n ChangeEvent,\n MouseEvent,\n KeyboardEvent as ReactKeyboardEvent,\n FormEvent\n} from 'react';\nimport { Text, Editor, Transforms } from 'slate';\nimport type { Range } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\n\nimport {\n Button,\n CardContent,\n Grid,\n Icon,\n registerIcon,\n Input,\n Popover,\n useOuterEvent,\n useElement,\n Form,\n useI18n\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport { useRTEContext } from '../RichTextEditor.context';\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton from './ToolbarButton';\nimport { getKeyCommand } from './utils';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n osx: boolean;\n}\n\nconst AnchorButton: FC<AnchorButtonProps & ForwardProps> = ({ osx, ...props }) => {\n const t = useI18n();\n const { setPopoverOpen, onEditorFocus } = useRTEContext();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const textInputRef = useRef<HTMLInputElement>(null);\n const urlInputRef = useRef<HTMLInputElement>(null);\n const editor = useSlate();\n const [popoverEl, setPopoverEl] = useElement();\n const [selectedText, setSelectedText] = useState('');\n const [selection, setSelection] = useState<Range \| null>(null);\n const [url, setUrl] = useState('');\n const [urlMatch, setUrlMatch] = useState(true);\n const [anchorMenu, setAnchorMenu] = useState(false);\n const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n const openMenu = (opts: { focusInput?: boolean } = {}) => {\n setAnchorMenu(true);\n setPopoverOpen(true);\n if (opts.focusInput) {\n setTimeout(() => {\n textInputRef.current?.focus();\n }, 0);\n }\n };\n\n const resetMenu = (opts: { focusEditor?: boolean } = { focusEditor: true }) => {\n setSelection(null);\n setSelectedText('');\n setUrl('');\n setUrlMatch(true);\n setAnchorMenu(false);\n setPopoverOpen(false);\n if (opts.focusEditor) {\n setTimeout(() => {\n onEditorFocus({\n runAfterFocus: () => {\n if (selection) Transforms.setSelection(editor, selection);\n }\n });\n }, 0);\n }\n };\n\n useOuterEvent('mousedown', [popoverEl], () => {\n if (anchorMenu) {\n resetMenu();\n }\n });\n\n const createLink = () => {\n if (url) {\n EditorCommands.createLink(\n editor,\n selectedText,\n new URL(/^[a-z][a-z0-9.+-]:/i.test(url) ? url : `http:${url}`).href,\n selection\n );\n resetMenu();\n }\n };\n\n useEffect(() => {\n if (editor.selection) {\n setSelectedText(Editor.string(editor, editor.selection));\n setSelection(editor.selection);\n const [match] = Editor.nodes<Text>(editor, {\n match: n => Text.isText(n) && !!n.href,\n at: editor.selection\n });\n if (match) {\n setUrl(match[0].href \|\| '');\n setSelectedText(match[0].text);\n } else {\n setUrl('');\n }\n }\n }, [anchorMenu]);\n\n const preventDef = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const isLinkActive = () => {\n const [link] = Editor.nodes<Text>(editor, { match: n => Text.isText(n) && !!n.href });\n return !!link;\n };\n\n const cancelAnchorCreation = (event?: KeyboardEvent \| MouseEvent) => {\n if (\n (event?.type === 'keydown' && (event as KeyboardEvent)?.key === 'Enter') \|\|\n event?.type === 'mousedown' \|\|\n !event\n ) {\n event?.preventDefault();\n resetMenu({ focusEditor: false });\n buttonRef.current?.focus();\n }\n };\n\n useEffect(() => {\n const keyCommandListener = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey \|\| e.ctrlKey) && ReactEditor.isFocused(editor)) {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n if (e.key === 'Escape') {\n cancelAnchorCreation();\n }\n };\n\n document.addEventListener('keydown', keyCommandListener);\n\n return () => {\n document.removeEventListener('keydown', keyCommandListener);\n };\n }, []);\n\n return (\n <>\n <ToolbarButton\n ref={buttonRef}\n onMouseDown={() => {\n openMenu();\n }}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n }}\n active={isLinkActive()}\n tooltip={tooltip}\n label={t('rte_link')}\n {...props}\n >\n <Icon name='chain' />\n </ToolbarButton>\n <Popover show={anchorMenu} target={buttonRef.current} ref={setPopoverEl} placement='bottom'>\n <CardContent>\n <Form\n actions={\n <>\n <Button\n variant='secondary'\n onKeyDown={cancelAnchorCreation}\n onMouseDown={cancelAnchorCreation}\n type='button'\n >\n Cancel\n </Button>\n <Button disabled={!url \|\| !urlMatch} name='apply' type='submit' variant='primary'>\n Apply\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n createLink();\n }}\n >\n <Grid container={{ rowGap: 2 }}>\n <Input\n label='Text'\n value={selectedText}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setSelectedText(e.target.value);\n }}\n onBlur={() => {\n setTimeout(() => {\n if (document.activeElement !== urlInputRef.current) {\n resetMenu({ focusEditor: false });\n }\n }, 0);\n }}\n ref={textInputRef}\n />\n <Input\n label='URL'\n value={url}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n const urlInput = e.target.value;\n setUrl(urlInput);\n\n if (!urlMatch) {\n try {\n // eslint-disable-next-line no-new\n new URL(\n /^[a-z][a-z0-9+.-]:/i.test(urlInput) ? urlInput : `http:${urlInput}`\n );\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }\n }}\n onBlur={() => {\n try {\n // eslint-disable-next-line no-new\n new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `http:${url}`);\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }}\n info={!urlMatch ? 'Not a valid URL' : ''}\n status={!urlMatch ? 'error' : undefined}\n ref={urlInputRef}\n />\n </Grid>\n </Form>\n </CardContent>\n </Popover>\n </>\n );\n};\n\nexport default AnchorButton;\n"]}
1	+ {"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect } from 'react';\nimport type {\n FC,\n ChangeEvent,\n MouseEvent,\n KeyboardEvent as ReactKeyboardEvent,\n FormEvent\n} from 'react';\nimport { Text, Editor, Transforms } from 'slate';\nimport type { Range } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\nimport styled from 'styled-components';\n\nimport {\n Button,\n CardContent,\n Grid,\n Icon,\n registerIcon,\n Input,\n TouchDialog,\n Popover,\n useOuterEvent,\n useElement,\n Form,\n useI18n,\n isTouchDevice,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport { useRTEContext } from '../RichTextEditor.context';\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton from './ToolbarButton';\nimport { getKeyCommand } from './utils';\n\nregisterIcon(chainIcon);\n\nconst StyledTouchDialogContent = styled(CardContent)(\n () => `\n flex: 1;\n\n > div {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n }\n\n > form {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n }\n\n > form > div:not([aria-hidden='true']):nth-last-child(2) {\n margin-top: auto;\n }\n`\n);\n\nStyledTouchDialogContent.defaultProps = defaultThemeProp;\n\ninterface AnchorButtonProps {\n osx: boolean;\n}\n\nconst AnchorButton: FC<AnchorButtonProps & ForwardProps> = ({ osx, ...props }) => {\n const t = useI18n();\n const { setPopoverOpen, onEditorFocus } = useRTEContext();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const textInputRef = useRef<HTMLInputElement>(null);\n const urlInputRef = useRef<HTMLInputElement>(null);\n const touchDialogRef = useRef<HTMLDivElement>(null);\n const editor = useSlate();\n const [popoverEl, setPopoverEl] = useElement();\n const [selectedText, setSelectedText] = useState('');\n const [selection, setSelection] = useState<Range \| null>(null);\n const [url, setUrl] = useState('');\n const [urlMatch, setUrlMatch] = useState(true);\n const [anchorMenu, setAnchorMenu] = useState(false);\n const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n const openMenu = (opts: { focusInput?: boolean } = {}) => {\n setAnchorMenu(true);\n setPopoverOpen(true);\n if (opts.focusInput) {\n setTimeout(() => {\n textInputRef.current?.focus();\n }, 0);\n }\n };\n\n const resetMenu = (opts: { focusEditor?: boolean } = { focusEditor: true }) => {\n setSelection(null);\n setSelectedText('');\n setUrl('');\n setUrlMatch(true);\n setAnchorMenu(false);\n setPopoverOpen(false);\n if (opts.focusEditor) {\n setTimeout(() => {\n onEditorFocus({\n runAfterFocus: () => {\n if (selection) Transforms.setSelection(editor, selection);\n }\n });\n }, 0);\n }\n };\n\n useOuterEvent('mousedown', [popoverEl, buttonRef, touchDialogRef], () => {\n if (anchorMenu) {\n resetMenu();\n }\n });\n\n const createLink = () => {\n if (url) {\n EditorCommands.createLink(\n editor,\n selectedText,\n new URL(/^[a-z][a-z0-9.+-]:/i.test(url) ? url : `http:${url}`).href,\n selection\n );\n resetMenu();\n }\n };\n\n useEffect(() => {\n if (editor.selection) {\n setSelectedText(Editor.string(editor, editor.selection));\n setSelection(editor.selection);\n const [match] = Editor.nodes<Text>(editor, {\n match: n => Text.isText(n) && !!n.href,\n at: editor.selection\n });\n if (match) {\n setUrl(match[0].href \|\| '');\n setSelectedText(match[0].text);\n } else {\n setUrl('');\n }\n }\n }, [anchorMenu]);\n\n const preventDef = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const isLinkActive = () => {\n const [link] = Editor.nodes<Text>(editor, { match: n => Text.isText(n) && !!n.href });\n return !!link;\n };\n\n const cancelAnchorCreation = (event?: KeyboardEvent \| MouseEvent) => {\n if (\n (event?.type === 'keydown' && (event as KeyboardEvent)?.key === 'Enter') \|\|\n event?.type === 'mousedown' \|\|\n !event\n ) {\n event?.preventDefault();\n resetMenu({ focusEditor: false });\n buttonRef.current?.focus();\n }\n };\n\n useEffect(() => {\n const keyCommandListener = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey \|\| e.ctrlKey) && ReactEditor.isFocused(editor)) {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n if (e.key === 'Escape') {\n cancelAnchorCreation();\n }\n };\n\n document.addEventListener('keydown', keyCommandListener);\n\n return () => {\n document.removeEventListener('keydown', keyCommandListener);\n };\n }, []);\n\n const anchorFormContent = (\n <Form\n actions={\n <>\n <Button\n variant='secondary'\n onKeyDown={cancelAnchorCreation}\n onMouseDown={cancelAnchorCreation}\n type='button'\n >\n {t('cancel')}\n </Button>\n <Button disabled={!url \|\| !urlMatch} name='apply' type='submit' variant='primary'>\n {t('apply')}\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n createLink();\n }}\n >\n <Grid container={{ rowGap: 2 }}>\n <Input\n label={t('rte_link_text')}\n value={selectedText}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setSelectedText(e.target.value)}\n ref={textInputRef}\n />\n <Input\n label={t('rte_link_url')}\n value={url}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n const urlInput = e.target.value;\n setUrl(urlInput);\n if (!urlMatch) {\n try {\n // eslint-disable-next-line no-new\n new URL(/^[a-z][a-z0-9+.-]:/i.test(urlInput) ? urlInput : `http:${urlInput}`);\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }\n }}\n onBlur={() => {\n try {\n // eslint-disable-next-line no-new\n new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `http:${url}`);\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }}\n info={!urlMatch ? t('rte_invalid_url') : ''}\n status={!urlMatch ? 'error' : undefined}\n ref={urlInputRef}\n />\n </Grid>\n </Form>\n );\n\n return (\n <>\n <ToolbarButton\n ref={buttonRef}\n onMouseDown={() => {\n openMenu();\n }}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n }}\n active={isLinkActive()}\n tooltip={tooltip}\n label={t('rte_link')}\n {...props}\n >\n <Icon name='chain' />\n </ToolbarButton>\n {isTouchDevice ? (\n <TouchDialog\n ref={touchDialogRef}\n open={anchorMenu}\n heading={t('rte_add_link')}\n onDismiss={() => resetMenu()}\n >\n <StyledTouchDialogContent>{anchorFormContent}</StyledTouchDialogContent>\n </TouchDialog>\n ) : (\n <Popover show={anchorMenu} target={buttonRef.current} ref={setPopoverEl} placement='bottom'>\n <CardContent>{anchorFormContent}</CardContent>\n </Popover>\n )}\n </>\n );\n};\n\nexport default AnchorButton;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAyC,MAAM,OAAO,CAAC;~~AA0DvE~~,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,GAAG,EAAE,OAAO,CAAA;CAAE,~~CA2IpC~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAyC,MAAM,OAAO,CAAC;AA4DvE,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,GAAG,EAAE,OAAO,CAAA;CAAE,CAkKpC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -3,7 +3,7 @@ import { useRef, useState, useCallback } from 'react';
 import { Transforms } from 'slate';
 import { ReactEditor, useSlate } from 'slate-react';
 import styled, { css } from 'styled-components';
-import { Popover, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize } from '@pega/cosmos-react-core';
+import { TouchDialog, Popover, Icon, registerIcon, useOuterEvent, isTouchDevice, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize } from '@pega/cosmos-react-core';
 import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
 import EditorCommands from '../utils/EditorCommands';
 import { useRTEContext } from '../RichTextEditor.context';
@@ -45,6 +45,7 @@ const TextSelect = ({ osx }) => {
     const buttonRef = useRef(null);
     const popoverRef = useRef(null);
     const menuRef = useRef(null);
+    const touchDialogRef = useRef(null);
     const editor = useSlate();
     const textFormats = useCallback(() => {
         return [
@@ -83,13 +84,16 @@ const TextSelect = ({ osx }) => {
         'heading-4': t('rte_heading_style_heading_4'),
         '': t('rte_heading_style_normal')
     };
-    useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {
+    useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef, touchDialogRef], () => {
         setOpen(false);
     });
     const onTextSelect = (type, e) => {
         e.stopPropagation();
         e.preventDefault();
-        EditorCommands.setBlock(type, editor);
+        const format = textFormats.find(item => item.type === type);
+        if (format) {
+            EditorCommands.setBlock(format.type, editor);
+        }
         if (!openedByClick.current) {
             buttonRef.current?.focus();
         }
@@ -104,6 +108,12 @@ const TextSelect = ({ osx }) => {
             }
         }, 0);
     };
+    const menuContent = (_jsx(Menu, { items: textFormats.map(({ text, type, subText }) => ({
+            id: type,
+            primary: text,
+            secondary: [subText],
+            selected: type === EditorCommands.getActiveBlockType(editor)
+        })), focusControlEl: isTouchDevice ? undefined : buttonRef.current || undefined, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }));
     return (_jsxs(_Fragment, { children: [_jsxs(StyledTextSelect, { variant: 'simple', type: 'button', disabled: disabled, icon: false, ref: buttonRef, onMouseDown: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -125,12 +135,7 @@ const TextSelect = ({ osx }) => {
                 }, onFocus: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `Text formatting toolbar. ${t('rte_heading_style')}. ${textMapping[EditorCommands.getActiveBlockType(editor)]} selected`, "aria-haspopup": true, children: [_jsx("span", { children: textMapping[EditorCommands.getActiveBlockType(editor)] }), _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 === EditorCommands.getActiveBlockType(editor)
-                    })), focusControlEl: buttonRef.current || undefined, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }) })] }));
+                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `Text formatting toolbar. ${t('rte_heading_style')}. ${textMapping[EditorCommands.getActiveBlockType(editor)]} selected`, "aria-haspopup": true, children: [_jsx("span", { children: textMapping[EditorCommands.getActiveBlockType(editor)] }), _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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useCallback } from 'react';\nimport type { FC, MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport { Transforms } from 'slate';\nimport type { Element } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { getKeyCommand } from './utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n height: calc(4 * ${theme.base.spacing});\n padding: calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n\n span {\n white-space: nowrap;\n }\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n min-width: 10rem;\n`;\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nconst TextSelect: FC<{ osx: boolean }> = ({ osx }) => {\n const t = useI18n();\n const { disabled } = useRTEContext();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n const editor = useSlate();\n\n const textFormats = useCallback(() => {\n return [\n {\n text: t('rte_heading_style_normal'),\n subText: getTextCommand(0, osx),\n type: 'paragraph'\n },\n {\n text: t('rte_heading_style_heading_1'),\n subText: getTextCommand(1, osx),\n type: 'heading-1'\n },\n {\n text: t('rte_heading_style_heading_2'),\n subText: getTextCommand(2, osx),\n type: 'heading-2'\n },\n {\n text: t('rte_heading_style_heading_3'),\n subText: getTextCommand(3, osx),\n type: 'heading-3'\n },\n {\n text: t('rte_heading_style_heading_4'),\n subText: getTextCommand(4, osx),\n type: 'heading-4'\n }\n ];\n }, [osx])();\n\n const textMapping: { [key: string]: string } = {\n paragraph: t('rte_heading_style_normal'),\n 'heading-1': t('rte_heading_style_heading_1'),\n 'heading-2': t('rte_heading_style_heading_2'),\n 'heading-3': t('rte_heading_style_heading_3'),\n 'heading-4': t('rte_heading_style_heading_4'),\n '': t('rte_heading_style_normal')\n };\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: Element['type'], e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n EditorCommands.setBlock(type, editor);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor) && openedByClick.current) {\n const selection = editor.selection;\n ReactEditor.focus(editor);\n if (selection) Transforms.select(editor, selection);\n }\n }, 0);\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\n disabled={disabled}\n icon={false}\n ref={buttonRef}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n openedByClick.current = true;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' && !selecting.current) {\n e.preventDefault();\n setOpen(true);\n openedByClick.current = false;\n } else if (e.key === 'Enter') {\n e.preventDefault();\n selecting.current = false;\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`Text formatting toolbar. ${t('rte_heading_style')}. ${\n textMapping[EditorCommands.getActiveBlockType(editor)]\n } selected`}\n aria-haspopup\n >\n <span>{textMapping[EditorCommands.getActiveBlockType(editor)]}</span>\n <Icon name='arrow-micro-down' />\n </StyledTextSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_heading_style')}\n </Tooltip>\n )}\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n <Menu\n items={textFormats.map(({ text, type, subText }) => ({\n id: type,\n primary: text,\n secondary: [subText],\n selected: type === EditorCommands.getActiveBlockType(editor)\n }))}\n focusControlEl={buttonRef.current \|\| undefined}\n mode='single-select'\n ref={menuRef}\n onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n />\n </Popover>\n </>\n );\n};\n\nexport default TextSelect;\n"]}
1	+ {"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useCallback } from 'react';\nimport type { FC, MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport { Transforms } from 'slate';\nimport type { Element } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\nimport styled, { css } from 'styled-components';\n\nimport {\n TouchDialog,\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n isTouchDevice,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { getKeyCommand } from './utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n height: calc(4 * ${theme.base.spacing});\n padding: calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n\n span {\n white-space: nowrap;\n }\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n min-width: 10rem;\n`;\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nconst TextSelect: FC<{ osx: boolean }> = ({ osx }) => {\n const t = useI18n();\n const { disabled } = useRTEContext();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n const touchDialogRef = useRef<HTMLDivElement>(null);\n const editor = useSlate();\n\n const textFormats = useCallback((): {\n text: string;\n subText: string;\n type: Element['type'];\n }[] => {\n return [\n {\n text: t('rte_heading_style_normal'),\n subText: getTextCommand(0, osx),\n type: 'paragraph'\n },\n {\n text: t('rte_heading_style_heading_1'),\n subText: getTextCommand(1, osx),\n type: 'heading-1'\n },\n {\n text: t('rte_heading_style_heading_2'),\n subText: getTextCommand(2, osx),\n type: 'heading-2'\n },\n {\n text: t('rte_heading_style_heading_3'),\n subText: getTextCommand(3, osx),\n type: 'heading-3'\n },\n {\n text: t('rte_heading_style_heading_4'),\n subText: getTextCommand(4, osx),\n type: 'heading-4'\n }\n ];\n }, [osx])();\n\n const textMapping: { [key: string]: string } = {\n paragraph: t('rte_heading_style_normal'),\n 'heading-1': t('rte_heading_style_heading_1'),\n 'heading-2': t('rte_heading_style_heading_2'),\n 'heading-3': t('rte_heading_style_heading_3'),\n 'heading-4': t('rte_heading_style_heading_4'),\n '': t('rte_heading_style_normal')\n };\n\n useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef, touchDialogRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: string, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n const format = textFormats.find(item => item.type === type);\n if (format) {\n EditorCommands.setBlock(format.type, editor);\n }\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor) && openedByClick.current) {\n const selection = editor.selection;\n ReactEditor.focus(editor);\n if (selection) Transforms.select(editor, selection);\n }\n }, 0);\n };\n\n const menuContent = (\n <Menu\n items={textFormats.map(({ text, type, subText }) => ({\n id: type,\n primary: text,\n secondary: [subText],\n selected: type === EditorCommands.getActiveBlockType(editor)\n }))}\n focusControlEl={isTouchDevice ? undefined : buttonRef.current \|\| undefined}\n mode='single-select'\n ref={menuRef}\n onItemClick={onTextSelect}\n />\n );\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\n disabled={disabled}\n icon={false}\n ref={buttonRef}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n openedByClick.current = true;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' && !selecting.current) {\n e.preventDefault();\n setOpen(true);\n openedByClick.current = false;\n } else if (e.key === 'Enter') {\n e.preventDefault();\n selecting.current = false;\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`Text formatting toolbar. ${t('rte_heading_style')}. ${\n textMapping[EditorCommands.getActiveBlockType(editor)]\n } selected`}\n aria-haspopup\n >\n <span>{textMapping[EditorCommands.getActiveBlockType(editor)]}</span>\n <Icon name='arrow-micro-down' />\n </StyledTextSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_heading_style')}\n </Tooltip>\n )}\n {isTouchDevice ? (\n <TouchDialog\n ref={touchDialogRef}\n open={open}\n heading={t('rte_heading_style')}\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 TextSelect;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-rte",
-  "version": "9.33.2",
+  "version": "9.34.0",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@intevation/tiptap-extension-office-paste": "^0.1.2",
-    "@pega/cosmos-react-core": "9.33.2",
+    "@pega/cosmos-react-core": "9.34.0",
     "@popperjs/core": "^2.11.6",
     "@tiptap/core": "^3.12.1",
     "@tiptap/extension-blockquote": "^3.12.1",