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

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

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

Files changed (191) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useLayoutEffect } from 'react';\nimport type { FC, ChangeEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport type { Editor, EditorSelection } from 'tinymce';\n\nimport {\n Button,\n CardContent,\n Grid,\n Icon,\n registerIcon,\n Input,\n useOuterEvent,\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 ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { StyledEditPopover } from '../Editor.styles';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n osx: boolean;\n editor: Editor;\n}\n\nconst AnchorButton: FC<AnchorButtonProps & ForwardProps> = ({ osx, editor, ...restProps }) => {\n const t = useI18n();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const textInputRef = useRef<HTMLInputElement>(null);\n const urlInputRef = useRef<HTMLInputElement>(null);\n const popoverRef = useRef(null);\n const [selectedText, setSelectedText] = useState('');\n const [selection, setSelection] = useState<EditorSelection \| undefined>();\n const [url, setUrl] = useState('');\n const [urlMatch, setUrlMatch] = useState(false);\n const [anchorMenu, setAnchorMenu] = useState(false);\n const [shouldFocusInput, setShouldFocusInput] = useState(false);\n const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n const openMenu = (opts: { focusInput?: boolean } = {}) => {\n setAnchorMenu(true);\n if (opts.focusInput) {\n setShouldFocusInput(true);\n }\n };\n\n const resetMenu = () => {\n setSelection(undefined);\n setSelectedText('');\n setUrl('');\n setUrlMatch(true);\n setAnchorMenu(false);\n };\n\n useOuterEvent('mousedown', [popoverRef, buttonRef], () => {\n if (anchorMenu) {\n resetMenu();\n }\n });\n\n const createLink = () => {\n if (url && selection) {\n editor.focus();\n editor.selection = selection;\n if (selection.getNode().tagName === 'A') {\n const anchorEl = editor.selection.getNode();\n anchorEl.setAttribute('href', url);\n anchorEl.setAttribute('data-mce-href', url);\n anchorEl.textContent = selectedText;\n editor.execCommand('mceAddUndoLevel');\n } else {\n editor.insertContent(\n `<a href='${\n new URL(/^[a-z][a-z0-9.+-]:/i.test(url) ? url : `https:${url}`).href\n }'>${selectedText}</a>`\n );\n }\n resetMenu();\n }\n };\n\n useEffect(() => {\n if (anchorMenu) {\n if (editor.selection) {\n const selectedEl = editor.selection.getNode();\n if (selectedEl?.tagName === 'A') {\n setSelectedText(selectedEl.textContent \|\| '');\n setUrl(selectedEl.getAttribute('href') \|\| '');\n } else {\n setSelectedText(editor.selection.getContent({ format: 'text' }));\n }\n setSelection({ ...editor.selection });\n }\n } else {\n resetMenu();\n }\n }, [anchorMenu]);\n\n const preventDef = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const isLinkActive = () => {\n return editor.selection.getNode().tagName === 'A' && editor.hasFocus();\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 anchorMenu\n ) {\n event?.preventDefault();\n resetMenu();\n buttonRef.current?.focus();\n }\n };\n\n useEffect(() => {\n const keyCommandListener = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey \|\| e.ctrlKey) && editor.hasFocus()) {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n if (e.key === 'Escape') {\n cancelAnchorCreation();\n }\n };\n\n editor.getDoc().addEventListener('keydown', keyCommandListener);\n\n return () => {\n editor.getDoc().removeEventListener('keydown', keyCommandListener);\n };\n }, []);\n\n useLayoutEffect(() => {\n if (anchorMenu && shouldFocusInput) {\n textInputRef.current?.focus();\n setShouldFocusInput(false);\n }\n }, [textInputRef.current]);\n\n useEffect(() => {\n // These events must be added here so they run before the native event in useArrows (used in the toolbar).\n const onKeyDown = (e: KeyboardEvent) => {\n e.stopPropagation();\n };\n textInputRef.current?.addEventListener('keydown', onKeyDown);\n urlInputRef.current?.addEventListener('keydown', onKeyDown);\n return () => {\n textInputRef.current?.removeEventListener('keydown', onKeyDown);\n urlInputRef.current?.removeEventListener('keydown', onKeyDown);\n };\n }, [textInputRef.current, urlInputRef.current]);\n\n return (\n <>\n <ToolbarButton\n ref={buttonRef}\n onMouseDown={e => {\n e.preventDefault();\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 {...restProps}\n >\n <Icon name='chain' />\n </ToolbarButton>\n <StyledEditPopover\n show={anchorMenu}\n target={buttonRef.current}\n ref={popoverRef}\n placement='bottom'\n >\n <CardContent>\n <Form\n as='div'\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\n disabled={!url \|\| !urlMatch}\n name='apply'\n variant='primary'\n onClick={(e: MouseEvent) => {\n e.preventDefault();\n createLink();\n }}\n >\n {t('apply')}\n </Button>\n </>\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>) => {\n setSelectedText(e.target.value);\n }}\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\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 : `https:${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 : `https:${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 </CardContent>\n </StyledEditPopover>\n </>\n );\n};\n\nexport default AnchorButton;\n"]}
1	+ {"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';\nimport type { ChangeEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport {\n Button,\n CardContent,\n Grid,\n Icon,\n registerIcon,\n Input,\n useOuterEvent,\n Form,\n useI18n,\n Text,\n useElement,\n useEscape,\n isInstance\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 ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { StyledEditPopover } from '../Editor.styles';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n osx: boolean;\n editor: TiptapEditor;\n}\n\nconst AnchorButton = ({ osx, editor, ...restProps }: AnchorButtonProps & ForwardProps) => {\n const t = useI18n();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [textInputEl, setTextInputEl] = useElement<HTMLInputElement>();\n const [urlInputEl, setUrlInputEl] = useElement<HTMLInputElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n const [linkText, setLinkText] = useState('');\n const [url, setUrl] = useState('');\n const [urlMatch, setUrlMatch] = useState(true);\n const [anchorMenu, setAnchorMenu] = useState(false);\n const [shouldFocusInput, setShouldFocusInput] = useState(false);\n // Store the original selection range when menu opens so we can restore it when creating the link\n const originalSelectionRef = useRef<{ from: number; to: number } \| null>(null);\n const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n const openMenu = (opts: { focusInput?: boolean } = {}) => {\n // Save the original selection before opening the menu\n const { from, to } = editor.state.selection;\n originalSelectionRef.current = { from, to };\n setAnchorMenu(true);\n if (opts.focusInput) {\n setShouldFocusInput(true);\n }\n };\n\n const resetMenu = useCallback(() => {\n setLinkText('');\n setUrl('');\n setUrlMatch(true);\n setAnchorMenu(false);\n originalSelectionRef.current = null;\n }, []);\n\n useOuterEvent('mousedown', [popoverEl, buttonRef], () => {\n if (anchorMenu) {\n resetMenu();\n }\n });\n\n // Close menu when clicking inside the editor iframe\n const handleEditorClick = useCallback(() => {\n if (anchorMenu) {\n resetMenu();\n }\n }, [anchorMenu, resetMenu]);\n useCloseOnEditorClick(anchorMenu, handleEditorClick);\n\n const isValidUrl = (urlString: string): boolean => {\n if (!urlString.trim()) return false;\n const allowedProtocols = /^(https?\|mailto\|tel):/i;\n const hasProtocol = /^[a-z][a-z0-9.+-]:/i.test(urlString);\n\n try {\n const testUrl = hasProtocol ? urlString : `https://${urlString}`;\n if (hasProtocol && !allowedProtocols.test(urlString)) {\n return false;\n }\n const urlObj = new URL(testUrl);\n return URL.canParse?.(testUrl) ?? Boolean(urlObj.href);\n } catch {\n return false;\n }\n };\n\n const createLink = useCallback(() => {\n if (!url \|\| !isValidUrl(url)) {\n return;\n }\n\n // Only allow safe protocols to prevent XSS (e.g., javascript: URLs)\n const allowedProtocols = /^(https?\|mailto\|tel):/i;\n const hasProtocol = /^[a-z][a-z0-9.+-]:/i.test(url);\n\n let normalizedUrl: string;\n if (hasProtocol) {\n // Reject URLs with disallowed protocols\n if (!allowedProtocols.test(url)) {\n return;\n }\n normalizedUrl = url;\n } else {\n normalizedUrl = `https://${url}`;\n }\n\n // Use the original selection to determine if text was selected in the editor\n const originalSelection = originalSelectionRef.current;\n\n if (originalSelection && originalSelection.from !== originalSelection.to) {\n // Text was originally selected - restore selection and apply link\n // Then collapse selection to end and clear stored mark so subsequent typing isn't linked\n editor\n .chain()\n .focus()\n .setTextSelection({ from: originalSelection.from, to: originalSelection.to })\n .setLink({ href: normalizedUrl })\n .setTextSelection(originalSelection.to)\n .unsetMark('link')\n .run();\n } else if (linkText) {\n // No text was originally selected, insert new link with the text entered in modal\n editor\n .chain()\n .focus()\n .insertContent({\n type: 'text',\n text: linkText,\n marks: [{ type: 'link', attrs: { href: normalizedUrl } }]\n })\n .unsetMark('link')\n .insertContent(' ')\n .run();\n }\n resetMenu();\n }, [url, linkText, editor, resetMenu]);\n\n useEffect(() => {\n if (anchorMenu && originalSelectionRef.current) {\n // Use the stored original selection to populate the modal\n // This avoids issues where focus shift may collapse the editor selection\n const { from, to } = originalSelectionRef.current;\n const text = editor.state.doc.textBetween(from, to);\n const linkMark = editor.getAttributes('link');\n\n if (linkMark.href) {\n setUrl(linkMark.href);\n setLinkText(text \|\| '');\n } else {\n setLinkText(text \|\| '');\n }\n } else if (!anchorMenu) {\n resetMenu();\n }\n }, [anchorMenu, editor, resetMenu]);\n\n const preventDef = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const isLinkActive = () => {\n return editor.isActive('link') && editor.isFocused;\n };\n\n const cancelAnchorCreation = useCallback(\n (event?: KeyboardEvent \| MouseEvent) => {\n if (\n ((event && 'key' in event && event.key === 'Escape') \|\|\n event?.type === 'click' \|\|\n !event) &&\n anchorMenu\n ) {\n if (event && 'key' in event && event.key === 'Escape') {\n event.stopPropagation();\n }\n\n resetMenu();\n buttonRef.current?.focus();\n }\n },\n [anchorMenu, resetMenu]\n );\n\n // Ctrl+K shortcut to open link dialog from within the editor iframe\n useEffect(() => {\n const handleCtrlK = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey \|\| e.ctrlKey)) {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n };\n\n const iframeWindow = editor.view.dom.ownerDocument.defaultView;\n iframeWindow?.addEventListener('keydown', handleCtrlK);\n return () => iframeWindow?.removeEventListener('keydown', handleCtrlK);\n }, [editor]);\n\n // Escape to close popover - listen on both iframe and parent document\n // since focus may be in either location depending on how the popover was opened\n useEffect(() => {\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && anchorMenu) {\n e.preventDefault();\n cancelAnchorCreation();\n }\n };\n const iframeWindow = editor.view.dom.ownerDocument.defaultView;\n iframeWindow?.addEventListener('keydown', handleEscape);\n document.addEventListener('keydown', handleEscape);\n return () => {\n iframeWindow?.removeEventListener('keydown', handleEscape);\n document.removeEventListener('keydown', handleEscape);\n };\n }, [editor, anchorMenu, cancelAnchorCreation]);\n\n useEscape(cancelAnchorCreation, popoverEl);\n\n useLayoutEffect(() => {\n if (textInputEl && shouldFocusInput) {\n textInputEl.focus();\n setShouldFocusInput(false);\n }\n }, [textInputEl, shouldFocusInput]);\n\n useEffect(() => {\n // These events must be added here so they run before the native event in useArrows (used in the toolbar).\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key !== 'Escape') {\n e.stopPropagation();\n }\n };\n textInputEl?.addEventListener('keydown', onKeyDown);\n urlInputEl?.addEventListener('keydown', onKeyDown);\n return () => {\n textInputEl?.removeEventListener('keydown', onKeyDown);\n urlInputEl?.removeEventListener('keydown', onKeyDown);\n };\n }, [textInputEl, urlInputEl]);\n\n return (\n <>\n <ToolbarButton\n ref={buttonRef}\n onMouseDown={e => {\n e.preventDefault();\n openMenu();\n }}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n }}\n onBlur={(e: React.FocusEvent) => {\n const { relatedTarget } = e;\n if (\n isInstance(relatedTarget, Node) &&\n !buttonRef.current?.contains(relatedTarget) &&\n !popoverEl?.contains(relatedTarget)\n ) {\n resetMenu();\n }\n }}\n active={isLinkActive()}\n tooltip={tooltip}\n label={t('rte_link')}\n {...restProps}\n >\n <Icon name='chain' />\n </ToolbarButton>\n <StyledEditPopover\n show={anchorMenu}\n target={buttonRef.current}\n ref={setPopoverEl}\n placement='bottom'\n >\n <CardContent>\n <Form\n as='div'\n actions={\n <>\n <Button variant='secondary' onClick={cancelAnchorCreation} type='button'>\n {t('cancel')}\n </Button>\n <Button\n variant='primary'\n disabled={!url \|\| !urlMatch}\n onClick={(e: MouseEvent) => {\n e.preventDefault();\n createLink();\n }}\n >\n {t('apply')}\n </Button>\n </>\n }\n >\n <Grid container={{ rowGap: 2 }}>\n <Text variant='h2'>{t('rte_add_link')}</Text>\n <Input\n label={t('rte_link_text')}\n value={linkText}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setLinkText(e.target.value);\n }}\n ref={setTextInputEl}\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 // Clear error while typing, validate on blur\n if (!urlMatch) {\n setUrlMatch(true);\n }\n }}\n onBlur={() => {\n setUrlMatch(!url \|\| isValidUrl(url));\n }}\n info={url && !urlMatch ? t('rte_invalid_url') : ''}\n status={url && !urlMatch ? 'error' : undefined}\n ref={setUrlInputEl}\n />\n </Grid>\n </Form>\n </CardContent>\n </StyledEditPopover>\n </>\n );\n};\n\nexport default AnchorButton;\n"]}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ColorPickerButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/ColorPickerButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAuG3D,UAAU,sBAAsB;IAC9B,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAID,QAAA,MAAM,iBAAiB,GAAI,gCAAgC,sBAAsB,4CAuMhF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, RadioButtonGroup, RadioButton, ColorPicker, defaultThemeProp, useI18n, useUID, Tooltip, Popover, useOuterEvent, Text, Flex, calculateFontSize, isInstance, readableColor } from '@pega/cosmos-react-core';
+import useEscapeKey from '../hooks/useEscapeKey';
+import useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';
+const StyledColorButton = styled(Button)(({ theme }) => {
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(3.5 * ${theme.base.spacing});
+    min-width: calc(3.5 * ${theme.base.spacing});
+    padding: 0;
+  `;
+});
+const StyledTextColorIcon = styled.span(({ theme, $color }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-weight: bold;
+    font-size: ${fontSizes.s};
+    line-height: 1;
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: calc(0.375 * ${theme.base.spacing});
+      background-color: ${$color || theme.base.palette['foreground-color']};
+      border-radius: calc(0.125 * ${theme.base.spacing});
+      margin-top: calc(0.125 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledTextColorIcon.defaultProps = defaultThemeProp;
+const StyledHighlightColorIcon = styled.span(({ theme, $color }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const textColor = $color ? readableColor($color) : 'inherit';
+    return css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: ${fontSizes.s};
+    min-width: 1.25em;
+    min-height: 1.25em;
+    padding: 0.125em 0.25em;
+    border: calc(0.125 * ${theme.base.spacing}) solid
+      ${theme.components['form-control']['border-color']};
+    border-radius: calc(0.25 * ${theme.base['border-radius']});
+    background-color: ${$color || 'transparent'};
+    color: ${textColor};
+  `;
+});
+StyledHighlightColorIcon.defaultProps = defaultThemeProp;
+StyledColorButton.defaultProps = defaultThemeProp;
+const StyledPopoverContent = styled.div(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing};
+    min-width: calc(14 * ${theme.base.spacing});
+  `;
+});
+StyledPopoverContent.defaultProps = defaultThemeProp;
+const StyledButtonGroup = styled.div(({ theme }) => {
+    return css `
+    display: flex;
+    gap: calc(0.5 * ${theme.base.spacing});
+    justify-content: flex-end;
+  `;
+});
+StyledButtonGroup.defaultProps = defaultThemeProp;
+const ColorPickerButton = ({ editor, type, ...restProps }) => {
+    const t = useI18n();
+    const titleId = useUID();
+    const buttonRef = useRef(null);
+    const popoverRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [colorType, setColorType] = useState('custom');
+    const [customColor, setCustomColor] = useState('#000000');
+    // Focus first radio button when popover opens
+    useEffect(() => {
+        if (open) {
+            // Use setTimeout to wait for popover to render
+            const timer = setTimeout(() => {
+                if (popoverRef.current) {
+                    const firstRadio = popoverRef.current.querySelector('input[type="radio"]');
+                    firstRadio?.focus();
+                }
+            }, 0);
+            return () => clearTimeout(timer);
+        }
+    }, [open]);
+    const getCurrentColor = () => {
+        const attrs = type === 'text' ? editor.getAttributes('textStyle') : editor.getAttributes('highlight');
+        const { color } = attrs;
+        return typeof color === 'string' ? color : undefined;
+    };
+    const currentColor = getCurrentColor();
+    const openMenu = () => {
+        // Initialize state based on current color, default to custom
+        if (currentColor) {
+            setCustomColor(currentColor);
+        }
+        else {
+            setCustomColor('#000000');
+        }
+        setColorType('custom');
+        setOpen(true);
+    };
+    const resetMenu = () => {
+        setOpen(false);
+    };
+    useOuterEvent('mousedown', [popoverRef, buttonRef], (event) => {
+        // Don't close if clicking inside a nested popover (like ColorPicker's palette)
+        const { target } = event;
+        if (isInstance(target, HTMLElement) && target.closest('[data-popper-placement]')) {
+            return;
+        }
+        if (open) {
+            resetMenu();
+        }
+    });
+    const handleSubmit = () => {
+        if (colorType === 'auto') {
+            if (type === 'text') {
+                editor.chain().focus().unsetColor().run();
+            }
+            else {
+                editor.chain().focus().unsetHighlight().run();
+            }
+        }
+        else if (type === 'text') {
+            editor.chain().focus().setColor(customColor).run();
+        }
+        else {
+            editor.chain().focus().setHighlight({ color: customColor }).run();
+        }
+        resetMenu();
+    };
+    const handleCancelKeyDown = (event) => {
+        if (event.key === 'Enter' && open) {
+            event.preventDefault();
+            resetMenu();
+            buttonRef.current?.focus();
+        }
+    };
+    const handleCancelMouseDown = (event) => {
+        if (open) {
+            event.preventDefault();
+            resetMenu();
+            buttonRef.current?.focus();
+        }
+    };
+    const handleEscapeClose = useCallback(() => {
+        resetMenu();
+        buttonRef.current?.focus();
+    }, []);
+    useEscapeKey(open, handleEscapeClose, editor);
+    useCloseOnEditorClick(open, handleEscapeClose);
+    const label = type === 'text' ? t('rte_text_color') : t('rte_background_color');
+    const modalTitle = type === 'text' ? t('rte_font_color') : t('rte_background_color');
+    const isHighlight = type === 'highlight';
+    return (_jsxs(_Fragment, { children: [_jsx(StyledColorButton, { ...restProps, variant: 'simple', type: 'button', ref: buttonRef, "data-toolbar-item": 'true', onMouseDown: (e) => {
+                    e.preventDefault();
+                    openMenu();
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        openMenu();
+                    }
+                }, onBlur: (e) => {
+                    const { relatedTarget } = e;
+                    if (isInstance(relatedTarget, Node) &&
+                        !buttonRef.current?.contains(relatedTarget) &&
+                        !popoverRef.current?.contains(relatedTarget)) {
+                        resetMenu();
+                    }
+                }, "aria-label": label, "aria-haspopup": 'dialog', "aria-expanded": open, children: isHighlight ? (_jsx(StyledHighlightColorIcon, { "$color": currentColor, children: "A" })) : (_jsx(StyledTextColorIcon, { "$color": currentColor, children: "A" })) }), buttonRef.current && !open && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: label })), _jsx(Popover, { show: open, target: buttonRef.current, ref: popoverRef, placement: 'bottom', children: _jsx(StyledPopoverContent, { role: 'dialog', "aria-labelledby": titleId, children: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', id: titleId, children: modalTitle }), _jsxs(RadioButtonGroup, { name: 'colorType', label: t('rte_color_type'), labelHidden: true, onChange: (e) => {
+                                    const { value } = e.target;
+                                    if (value === 'auto' || value === 'custom') {
+                                        setColorType(value);
+                                    }
+                                }, inline: true, children: [_jsx(RadioButton, { label: t('rte_color_auto'), value: 'auto', checked: colorType === 'auto' }), _jsx(RadioButton, { label: t('rte_color_custom'), value: 'custom', checked: colorType === 'custom' })] }), _jsx(ColorPicker, { label: t('rte_color'), labelHidden: true, value: customColor, onChange: color => setCustomColor(color.hex), disabled: colorType === 'auto' }), _jsxs(StyledButtonGroup, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: handleCancelKeyDown, onMouseDown: handleCancelMouseDown, type: 'button', children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: handleSubmit, children: t('submit') })] })] }) }) })] }));
+};
+export default ColorPickerButton;
+//# sourceMappingURL=ColorPickerButton.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ColorPickerButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/ColorPickerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useCallback } from 'react';\nimport type { MouseEvent, KeyboardEvent as ReactKeyboardEvent, ChangeEvent } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n RadioButtonGroup,\n RadioButton,\n ColorPicker,\n defaultThemeProp,\n useI18n,\n useUID,\n Tooltip,\n Popover,\n useOuterEvent,\n Text,\n Flex,\n calculateFontSize,\n isInstance,\n readableColor\n} from '@pega/cosmos-react-core';\n\nimport useEscapeKey from '../hooks/useEscapeKey';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nconst StyledColorButton = styled(Button)(({ theme }) => {\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});\n\nconst StyledTextColorIcon = styled.span<{ $color?: string }>(({ theme, $color }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n display: flex;\n flex-direction: column;\n align-items: center;\n font-weight: bold;\n font-size: ${fontSizes.s};\n line-height: 1;\n\n &::after {\n content: '';\n display: block;\n width: 100%;\n height: calc(0.375 * ${theme.base.spacing});\n background-color: ${$color || theme.base.palette['foreground-color']};\n border-radius: calc(0.125 * ${theme.base.spacing});\n margin-top: calc(0.125 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledTextColorIcon.defaultProps = defaultThemeProp;\n\nconst StyledHighlightColorIcon = styled.span<{ $color?: string }>(({ theme, $color }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const textColor = $color ? readableColor($color) : 'inherit';\n return css`\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: ${fontSizes.s};\n min-width: 1.25em;\n min-height: 1.25em;\n padding: 0.125em 0.25em;\n border: calc(0.125 * ${theme.base.spacing}) solid\n ${theme.components['form-control']['border-color']};\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n background-color: ${$color || 'transparent'};\n color: ${textColor};\n `;\n});\n\nStyledHighlightColorIcon.defaultProps = defaultThemeProp;\n\nStyledColorButton.defaultProps = defaultThemeProp;\n\nconst StyledPopoverContent = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing};\n min-width: calc(14 * ${theme.base.spacing});\n `;\n});\n\nStyledPopoverContent.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-end;\n `;\n});\n\nStyledButtonGroup.defaultProps = defaultThemeProp;\n\ninterface ColorPickerButtonProps {\n editor: TiptapEditor;\n type: 'text' | 'highlight';\n 'data-testid'?: string;\n}\n\ntype ColorType = 'auto' | 'custom';\n\nconst ColorPickerButton = ({ editor, type, ...restProps }: ColorPickerButtonProps) => {\n const t = useI18n();\n const titleId = useUID();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const [open, setOpen] = useState(false);\n const [colorType, setColorType] = useState<ColorType>('custom');\n const [customColor, setCustomColor] = useState('#000000');\n\n // Focus first radio button when popover opens\n useEffect(() => {\n if (open) {\n // Use setTimeout to wait for popover to render\n const timer = setTimeout(() => {\n if (popoverRef.current) {\n const firstRadio =\n popoverRef.current.querySelector<HTMLInputElement>('input[type=\"radio\"]');\n firstRadio?.focus();\n }\n }, 0);\n return () => clearTimeout(timer);\n }\n }, [open]);\n\n const getCurrentColor = (): string | undefined => {\n const attrs =\n type === 'text' ? editor.getAttributes('textStyle') : editor.getAttributes('highlight');\n const { color } = attrs;\n return typeof color === 'string' ? color : undefined;\n };\n\n const currentColor = getCurrentColor();\n\n const openMenu = () => {\n // Initialize state based on current color, default to custom\n if (currentColor) {\n setCustomColor(currentColor);\n } else {\n setCustomColor('#000000');\n }\n setColorType('custom');\n setOpen(true);\n };\n\n const resetMenu = () => {\n setOpen(false);\n };\n\n useOuterEvent('mousedown', [popoverRef, buttonRef], (event: Event) => {\n // Don't close if clicking inside a nested popover (like ColorPicker's palette)\n const { target } = event;\n if (isInstance(target, HTMLElement) && target.closest('[data-popper-placement]')) {\n return;\n }\n if (open) {\n resetMenu();\n }\n });\n\n const handleSubmit = () => {\n if (colorType === 'auto') {\n if (type === 'text') {\n editor.chain().focus().unsetColor().run();\n } else {\n editor.chain().focus().unsetHighlight().run();\n }\n } else if (type === 'text') {\n editor.chain().focus().setColor(customColor).run();\n } else {\n editor.chain().focus().setHighlight({ color: customColor }).run();\n }\n resetMenu();\n };\n\n const handleCancelKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' && open) {\n event.preventDefault();\n resetMenu();\n buttonRef.current?.focus();\n }\n };\n\n const handleCancelMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n if (open) {\n event.preventDefault();\n resetMenu();\n buttonRef.current?.focus();\n }\n };\n\n const handleEscapeClose = useCallback(() => {\n resetMenu();\n buttonRef.current?.focus();\n }, []);\n\n useEscapeKey(open, handleEscapeClose, editor);\n useCloseOnEditorClick(open, handleEscapeClose);\n\n const label = type === 'text' ? t('rte_text_color') : t('rte_background_color');\n const modalTitle = type === 'text' ? t('rte_font_color') : t('rte_background_color');\n const isHighlight = type === 'highlight';\n\n return (\n <>\n <StyledColorButton\n {...restProps}\n variant='simple'\n type='button'\n ref={buttonRef}\n data-toolbar-item='true'\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n openMenu();\n }}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n openMenu();\n }\n }}\n onBlur={(e: React.FocusEvent) => {\n const { relatedTarget } = e;\n if (\n isInstance(relatedTarget, Node) &&\n !buttonRef.current?.contains(relatedTarget) &&\n !popoverRef.current?.contains(relatedTarget)\n ) {\n resetMenu();\n }\n }}\n aria-label={label}\n aria-haspopup='dialog'\n aria-expanded={open}\n >\n {isHighlight ? (\n <StyledHighlightColorIcon $color={currentColor}>A</StyledHighlightColorIcon>\n ) : (\n <StyledTextColorIcon $color={currentColor}>A</StyledTextColorIcon>\n )}\n </StyledColorButton>\n {buttonRef.current && !open && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {label}\n </Tooltip>\n )}\n <Popover show={open} target={buttonRef.current} ref={popoverRef} placement='bottom'>\n <StyledPopoverContent role='dialog' aria-labelledby={titleId}>\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4' id={titleId}>\n {modalTitle}\n </Text>\n <RadioButtonGroup\n name='colorType'\n label={t('rte_color_type')}\n labelHidden\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n const { value } = e.target;\n if (value === 'auto' || value === 'custom') {\n setColorType(value);\n }\n }}\n inline\n >\n <RadioButton\n label={t('rte_color_auto')}\n value='auto'\n checked={colorType === 'auto'}\n />\n <RadioButton\n label={t('rte_color_custom')}\n value='custom'\n checked={colorType === 'custom'}\n />\n </RadioButtonGroup>\n <ColorPicker\n label={t('rte_color')}\n labelHidden\n value={customColor}\n onChange={color => setCustomColor(color.hex)}\n disabled={colorType === 'auto'}\n />\n <StyledButtonGroup>\n <Button\n variant='secondary'\n onKeyDown={handleCancelKeyDown}\n onMouseDown={handleCancelMouseDown}\n type='button'\n >\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={handleSubmit}>\n {t('submit')}\n </Button>\n </StyledButtonGroup>\n </Flex>\n </StyledPopoverContent>\n </Popover>\n </>\n );\n};\n\nexport default ColorPickerButton;\n"]}

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

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

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"FontFamilySelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/FontFamilySelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAoE3D,UAAU,qBAAqB;IAC7B,MAAM,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,GAAI,0BAA0B,qBAAqB,4CAwJxE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,150 @@
+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 * 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';
+registerIcon(arrowMicroDownIcon);
+const StyledFontSelect = styled(Button)(({ theme }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    display: inline-flex;
+    align-items: center;
+    height: calc(3.5 * ${theme.base.spacing});
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    font-size: ${fontSizes.xxs};
+    min-width: 12ch;
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `;
+});
+StyledFontSelect.defaultProps = defaultThemeProp;
+const StyledSelectMenu = styled.div(({ theme }) => {
+    return css `
+    min-width: 16ch;
+    max-height: calc(30 * ${theme.base.spacing});
+  `;
+});
+StyledSelectMenu.defaultProps = defaultThemeProp;
+const FONT_FAMILIES = [
+    { id: 'default', labelKey: 'rte_default_font', value: '' },
+    { id: 'arial', label: 'Arial', value: 'Arial, Helvetica, sans-serif' },
+    { id: 'courier', label: 'Courier New', value: '"Courier New", Courier, monospace' },
+    { id: 'georgia', label: 'Georgia', value: 'Georgia, serif' },
+    { id: 'times', label: 'Times New Roman', value: '"Times New Roman", Times, serif' },
+    { id: 'trebuchet', label: 'Trebuchet MS', value: '"Trebuchet MS", sans-serif' },
+    { id: 'verdana', label: 'Verdana', value: 'Verdana, Geneva, sans-serif' }
+];
+const FontFamilySelect = ({ editor, ...restProps }) => {
+    const t = useI18n();
+    const [open, setOpen] = useState(false);
+    const selecting = useRef(false);
+    const openedByClick = useRef(false);
+    const buttonRef = useRef(null);
+    const popoverRef = useRef(null);
+    const menuRef = useRef(null);
+    useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef], () => {
+        if (open) {
+            setOpen(false);
+        }
+    });
+    const handleEscapeClose = useCallback(() => {
+        setOpen(false);
+        buttonRef.current?.focus();
+    }, []);
+    useEscapeKey(open, handleEscapeClose, editor);
+    useCloseOnEditorClick(open, handleEscapeClose);
+    const onFontSelect = (fontId, e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const font = FONT_FAMILIES.find(f => f.id === fontId);
+        if (font) {
+            if (font.value) {
+                editor.chain().focus().setFontFamily(font.value).run();
+            }
+            else {
+                editor.chain().focus().unsetFontFamily().run();
+            }
+        }
+        if (!openedByClick.current) {
+            buttonRef.current?.focus();
+        }
+        setOpen(false);
+        selecting.current = true;
+        setTimeout(() => {
+            selecting.current = false;
+            if (!editor.isFocused && openedByClick.current) {
+                editor.commands.focus();
+            }
+        }, 0);
+    };
+    const getFontLabel = (font) => {
+        if (font.labelKey) {
+            return t(font.labelKey);
+        }
+        return font.label;
+    };
+    const getActiveFont = () => {
+        const attrs = editor.getAttributes('textStyle');
+        const { fontFamily } = attrs;
+        if (typeof fontFamily !== 'string' || !fontFamily)
+            return t('rte_default_font');
+        const match = FONT_FAMILIES.find(f => f.value === fontFamily);
+        return match ? getFontLabel(match) : fontFamily;
+    };
+    const getActiveFontId = () => {
+        const attrs = editor.getAttributes('textStyle');
+        const { fontFamily } = attrs;
+        if (typeof fontFamily !== 'string' || !fontFamily)
+            return 'default';
+        const match = FONT_FAMILIES.find(f => f.value === fontFamily);
+        return match?.id ?? 'default';
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledFontSelect, { ...restProps, variant: 'simple', type: 'button', icon: false, ref: buttonRef, "data-toolbar-item": 'true', onMouseDown: (e) => {
+                    e.preventDefault();
+                    if (!open) {
+                        openedByClick.current = true;
+                    }
+                    setOpen(!open);
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Enter' && !selecting.current) {
+                        e.preventDefault();
+                        setOpen(true);
+                        openedByClick.current = false;
+                    }
+                    else if (e.key === 'Enter') {
+                        e.preventDefault();
+                        selecting.current = false;
+                    }
+                    else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                        setOpen(false);
+                    }
+                    else if (e.key === 'Escape' && open) {
+                        e.preventDefault();
+                        setOpen(false);
+                    }
+                }, onFocus: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, onBlur: (e) => {
+                    const { relatedTarget } = e;
+                    if (isInstance(relatedTarget, Node) &&
+                        !buttonRef.current?.contains(relatedTarget) &&
+                        !popoverRef.current?.contains(relatedTarget) &&
+                        !menuRef.current?.contains(relatedTarget)) {
+                        setOpen(false);
+                    }
+                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `${t('rte_font_family')}. ${getActiveFont()} ${t('selected').toLocaleLowerCase()}`, "aria-haspopup": true, children: [_jsx("span", { children: getActiveFont() }), _jsx(Icon, { name: 'arrow-micro-down' })] }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_font_family') })), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: FONT_FAMILIES.map(font => ({
+                        id: font.id,
+                        primary: getFontLabel(font),
+                        selected: font.id === getActiveFontId()
+                    })), focusControlEl: buttonRef.current ?? undefined, mode: 'single-select', ref: menuRef, onItemClick: onFontSelect }) })] }));
+};
+export default FontFamilySelect;
+//# sourceMappingURL=FontFamilySelect.js.map

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

@@ -0,0 +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"]}

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

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

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

	@@ -0,0 +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"}