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

package/lib/components/Editor/Toolbar/AIRewriteButton.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { AIRewrite, Icon, registerIcon, useElement, useI18n } from '@pega/cosmos-react-core';
+import * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';
+import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
+import { extractLinkAndImg, restorePlaceholders } from '../utils/htmlPlaceholder';
+registerIcon(polarisIcon);
+const AIRewriteButton = ({ editor, onRewriteClick, renderSuggestionEditor }) => {
+    const t = useI18n();
+    const [buttonEl, setButtonEl] = useElement();
+    const [showPopover, setShowPopover] = useState(false);
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [suggestion, setSuggestion] = useState(undefined);
+    const [hasSuggestionContent, setHasSuggestionContent] = useState(false);
+    const getContentRef = useRef(undefined);
+    const generationTokenRef = useRef(0);
+    const placeholderMapRef = useRef({});
+    const userPlaceholdersRef = useRef([]);
+    const getHtmlContent = () => {
+        return editor ? editor.getHTML().trim() : '';
+    };
+    const hasContent = () => {
+        return editor ? editor.getText().trim() !== '' : false;
+    };
+    const handleGenerate = (rewriteAction, additionalInstructions) => {
+        const originalContent = getHtmlContent();
+        const { placeholderHtml, placeholderMap, userPlaceholders } = extractLinkAndImg(originalContent);
+        placeholderMapRef.current = placeholderMap;
+        userPlaceholdersRef.current = userPlaceholders;
+        generationTokenRef.current += 1;
+        const token = generationTokenRef.current;
+        setIsGenerating(true);
+        setSuggestion(undefined);
+        setHasSuggestionContent(false);
+        onRewriteClick(placeholderHtml, rewriteAction, additionalInstructions || '', (rewrittenText) => {
+            if (token !== generationTokenRef.current)
+                return;
+            setIsGenerating(false);
+            const trimmedText = rewrittenText.trim();
+            setSuggestion(trimmedText || undefined);
+            setHasSuggestionContent(trimmedText.length > 0);
+        });
+    };
+    const handleSubmit = () => {
+        const editedContent = getContentRef.current?.() ?? suggestion ?? '';
+        const restoredContent = restorePlaceholders(editedContent, placeholderMapRef.current, userPlaceholdersRef.current);
+        editor.chain().setContent(restoredContent).focus('end').run();
+        setShowPopover(false);
+        setSuggestion(undefined);
+        setHasSuggestionContent(false);
+        placeholderMapRef.current = {};
+        userPlaceholdersRef.current = [];
+    };
+    const handleCancel = () => {
+        generationTokenRef.current += 1;
+        setShowPopover(false);
+        setSuggestion(undefined);
+        setIsGenerating(false);
+        setHasSuggestionContent(false);
+        placeholderMapRef.current = {};
+        userPlaceholdersRef.current = [];
+        buttonEl?.focus();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { ref: setButtonEl, onClick: () => {
+                    setShowPopover(true);
+                }, disabled: !hasContent(), tooltip: t('ai_rewrite_title'), label: t('ai_rewrite_title'), children: _jsx(Icon, { name: 'polaris' }) }), showPopover && buttonEl && (_jsx(AIRewrite, { target: buttonEl, isGenerating: isGenerating, suggestion: hasSuggestionContent ? suggestion : undefined, onGenerate: handleGenerate, onSubmit: handleSubmit, onCancel: handleCancel, suggestionEditor: renderSuggestionEditor
+                    ? renderSuggestionEditor({
+                        defaultValue: suggestion,
+                        disabled: isGenerating || !suggestion,
+                        readOnly: false,
+                        onGetContent: getContent => {
+                            getContentRef.current = getContent;
+                        },
+                        onContentChange: setHasSuggestionContent
+                    })
+                    : undefined }))] }));
+};
+export default AIRewriteButton;
+//# sourceMappingURL=AIRewriteButton.js.map

package/lib/components/Editor/Toolbar/AIRewriteButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewriteButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AIRewriteButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport { AIRewrite, Icon, registerIcon, useElement, useI18n } from '@pega/cosmos-react-core';\nimport type { AIAction } from '@pega/cosmos-react-core';\nimport * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { extractLinkAndImg, restorePlaceholders } from '../utils/htmlPlaceholder';\nimport type { PlaceholderMap } from '../utils/htmlPlaceholder';\n\nregisterIcon(polarisIcon);\n\nexport interface AIRewriteButtonProps {\n  editor: TiptapEditor;\n  onRewriteClick: (\n    originalText: string,\n    rewriteAction: AIAction,\n    additionalInstructions: string,\n    onSuccess: (rewrittenText: string) => void\n  ) => void;\n  renderSuggestionEditor?: (props: {\n    defaultValue?: string;\n    disabled: boolean;\n    readOnly: boolean;\n    onGetContent: (getContent: () => string) => void;\n    onContentChange: (hasContent: boolean) => void;\n  }) => ReactNode;\n}\n\nconst AIRewriteButton = ({\n  editor,\n  onRewriteClick,\n  renderSuggestionEditor\n}: AIRewriteButtonProps) => {\n  const t = useI18n();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const [showPopover, setShowPopover] = useState(false);\n  const [isGenerating, setIsGenerating] = useState(false);\n  const [suggestion, setSuggestion] = useState<string | undefined>(undefined);\n  const [hasSuggestionContent, setHasSuggestionContent] = useState(false);\n  const getContentRef = useRef<(() => string) | undefined>(undefined);\n  const generationTokenRef = useRef(0);\n  const placeholderMapRef = useRef<PlaceholderMap>({});\n  const userPlaceholdersRef = useRef<string[]>([]);\n\n  const getHtmlContent = (): string => {\n    return editor ? editor.getHTML().trim() : '';\n  };\n\n  const hasContent = (): boolean => {\n    return editor ? editor.getText().trim() !== '' : false;\n  };\n\n  const handleGenerate = (rewriteAction: AIAction, additionalInstructions: string) => {\n    const originalContent = getHtmlContent();\n    const { placeholderHtml, placeholderMap, userPlaceholders } =\n      extractLinkAndImg(originalContent);\n    placeholderMapRef.current = placeholderMap;\n    userPlaceholdersRef.current = userPlaceholders;\n    generationTokenRef.current += 1;\n    const token = generationTokenRef.current;\n    setIsGenerating(true);\n    setSuggestion(undefined);\n    setHasSuggestionContent(false);\n\n    onRewriteClick(\n      placeholderHtml,\n      rewriteAction,\n      additionalInstructions || '',\n      (rewrittenText: string) => {\n        if (token !== generationTokenRef.current) return;\n        setIsGenerating(false);\n        const trimmedText = rewrittenText.trim();\n        setSuggestion(trimmedText || undefined);\n        setHasSuggestionContent(trimmedText.length > 0);\n      }\n    );\n  };\n\n  const handleSubmit = () => {\n    const editedContent = getContentRef.current?.() ?? suggestion ?? '';\n    const restoredContent = restorePlaceholders(\n      editedContent,\n      placeholderMapRef.current,\n      userPlaceholdersRef.current\n    );\n    editor.chain().setContent(restoredContent).focus('end').run();\n    setShowPopover(false);\n    setSuggestion(undefined);\n    setHasSuggestionContent(false);\n    placeholderMapRef.current = {};\n    userPlaceholdersRef.current = [];\n  };\n\n  const handleCancel = () => {\n    generationTokenRef.current += 1;\n    setShowPopover(false);\n    setSuggestion(undefined);\n    setIsGenerating(false);\n    setHasSuggestionContent(false);\n    placeholderMapRef.current = {};\n    userPlaceholdersRef.current = [];\n    buttonEl?.focus();\n  };\n\n  return (\n    <>\n      <ToolbarButton\n        ref={setButtonEl}\n        onClick={() => {\n          setShowPopover(true);\n        }}\n        disabled={!hasContent()}\n        tooltip={t('ai_rewrite_title')}\n        label={t('ai_rewrite_title')}\n      >\n        <Icon name='polaris' />\n      </ToolbarButton>\n      {showPopover && buttonEl && (\n        <AIRewrite\n          target={buttonEl}\n          isGenerating={isGenerating}\n          suggestion={hasSuggestionContent ? suggestion : undefined}\n          onGenerate={handleGenerate}\n          onSubmit={handleSubmit}\n          onCancel={handleCancel}\n          suggestionEditor={\n            renderSuggestionEditor\n              ? renderSuggestionEditor({\n                  defaultValue: suggestion,\n                  disabled: isGenerating || !suggestion,\n                  readOnly: false,\n                  onGetContent: getContent => {\n                    getContentRef.current = getContent;\n                  },\n                  onContentChange: setHasSuggestionContent\n                })\n              : undefined\n          }\n        />\n      )}\n    </>\n  );\n};\n\nexport default AIRewriteButton;\n"]}

package/lib/components/Editor/Toolbar/AlignmentSelect.d.ts

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

package/lib/components/Editor/Toolbar/AlignmentSelect.d.ts.map

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

package/lib/components/Editor/Toolbar/AlignmentSelect.js

@@ -0,0 +1,137 @@
+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 { Popover, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, isInstance } from '@pega/cosmos-react-core';
+import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
+import * as alignLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/align-left.icon';
+import * as alignCenterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/align-center.icon';
+import * as alignRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/align-right.icon';
+import useEscapeKey from '../hooks/useEscapeKey';
+import useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';
+registerIcon(arrowMicroDownIcon, alignLeftIcon, alignCenterIcon, alignRightIcon);
+const StyledAlignmentSelect = styled(Button)(({ theme }) => {
+    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});
+  `;
+});
+StyledAlignmentSelect.defaultProps = defaultThemeProp;
+const StyledSelectMenu = styled.div(({ theme }) => {
+    return css `
+    min-width: calc(20 * ${theme.base.spacing});
+  `;
+});
+StyledSelectMenu.defaultProps = defaultThemeProp;
+const ALIGNMENTS = [
+    { id: 'left', icon: 'align-left', labelKey: 'rte_align_left' },
+    { id: 'center', icon: 'align-center', labelKey: 'rte_align_center' },
+    { id: 'right', icon: 'align-right', labelKey: 'rte_align_right' }
+];
+const AlignmentSelect = ({ editor, ...restProps }) => {
+    const t = useI18n();
+    const [open, setOpen] = useState(false);
+    const [activeAlignment, setActiveAlignment] = useState('left');
+    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], () => {
+        setOpen(false);
+    });
+    const handleEscapeClose = useCallback(() => {
+        setOpen(false);
+        buttonRef.current?.focus();
+    }, []);
+    useEscapeKey(open, handleEscapeClose, editor);
+    useCloseOnEditorClick(open, handleEscapeClose);
+    const updateActiveAlignment = useCallback(() => {
+        if (editor.isActive({ textAlign: 'center' })) {
+            setActiveAlignment('center');
+        }
+        else if (editor.isActive({ textAlign: 'right' })) {
+            setActiveAlignment('right');
+        }
+        else {
+            setActiveAlignment('left');
+        }
+    }, [editor]);
+    useEffect(() => {
+        updateActiveAlignment();
+        editor.on('selectionUpdate', updateActiveAlignment);
+        editor.on('transaction', updateActiveAlignment);
+        return () => {
+            editor.off('selectionUpdate', updateActiveAlignment);
+            editor.off('transaction', updateActiveAlignment);
+        };
+    }, [editor, updateActiveAlignment]);
+    const onAlignmentSelect = (alignmentId, e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        editor.chain().focus().setTextAlign(alignmentId).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 getActiveIcon = () => {
+        const alignment = ALIGNMENTS.find(a => a.id === activeAlignment);
+        return alignment?.icon || 'align-left';
+    };
+    const getActiveLabel = () => {
+        const alignment = ALIGNMENTS.find(a => a.id === activeAlignment);
+        return alignment ? t(alignment.labelKey) : t('rte_align_left');
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledAlignmentSelect, { ...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_alignment')}. ${getActiveLabel()} ${t('selected').toLocaleLowerCase()}`, "aria-haspopup": true, children: [_jsx(Icon, { name: getActiveIcon() }), _jsx(Icon, { name: 'arrow-micro-down' })] }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_alignment') })), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: ALIGNMENTS.map(({ id, icon, labelKey }) => ({
+                        id,
+                        primary: t(labelKey),
+                        visual: _jsx(Icon, { name: icon }),
+                        selected: id === activeAlignment
+                    })), focusControlEl: buttonRef.current ?? undefined, mode: 'single-select', ref: menuRef, onItemClick: onAlignmentSelect }) })] }));
+};
+export default AlignmentSelect;
+//# sourceMappingURL=AlignmentSelect.js.map

package/lib/components/Editor/Toolbar/AlignmentSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlignmentSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AlignmentSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGjE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,MAAM,EACN,gBAAgB,EAChB,OAAO,EACP,OAAO,EACP,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,kBAAkB,MAAM,yEAAyE,CAAC;AAC9G,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,eAAe,MAAM,qEAAqE,CAAC;AACvG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AAErG,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,qBAAqB,MAAM,gCAAgC,CAAC;AAEnE,YAAY,CAAC,kBAAkB,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC;AAEjF,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;yBAG1B,KAAK,CAAC,IAAI,CAAC,OAAO;4BACf,KAAK,CAAC,IAAI,CAAC,OAAO;GAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAIjD,MAAM,UAAU,GAA6E;IAC3F,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE;IAC9D,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,kBAAkB,EAAE;IACpE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,iBAAiB,EAAE;CAClE,CAAC;AAOF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,EAAwB,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAkB,MAAM,CAAC,CAAC;IAChF,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE;QAChE,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,YAAY,CAAC,IAAI,EAAE,iBAAiB,EAAE,MAAM,CAAC,CAAC;IAC9C,qBAAqB,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;IAE/C,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;YAC7C,kBAAkB,CAAC,QAAQ,CAAC,CAAC;QAC/B,CAAC;aAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YACnD,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,kBAAkB,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,qBAAqB,EAAE,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,CAAC;YACrD,MAAM,CAAC,GAAG,CAAC,aAAa,EAAE,qBAAqB,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEpC,MAAM,iBAAiB,GAAG,CAAC,WAAmB,EAAE,CAAsB,EAAE,EAAE;QACxE,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC;QAEvD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;YAC3B,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC;QACD,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,UAAU,CAAC,GAAG,EAAE;YACd,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC/C,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,eAAe,CAAC,CAAC;QACjE,OAAO,SAAS,EAAE,IAAI,IAAI,YAAY,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,eAAe,CAAC,CAAC;QACjE,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACjE,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,qBAAqB,OAChB,SAAS,EACb,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,SAAS,uBACI,MAAM,EACxB,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE;oBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,IAAI,EAAE,CAAC;wBACV,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC/B,CAAC;oBACD,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;gBACjB,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;wBAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,OAAO,CAAC,IAAI,CAAC,CAAC;wBACd,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;oBAChC,CAAC;yBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;oBAC5B,CAAC;yBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;wBAC3D,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC;yBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,EAAE,CAAC;wBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC;gBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACtB,CAAC,EACD,MAAM,EAAE,CAAC,CAAa,EAAE,EAAE;oBACxB,MAAM,EAAE,aAAa,EAAE,GAAG,CAAC,CAAC;oBAC5B,IACE,UAAU,CAAC,aAAa,EAAE,IAAI,CAAC;wBAC/B,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC;wBAC3C,CAAC,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC;wBAC5C,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC,EACzC,CAAC;wBACD,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC;gBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,mBAChC,IAAI,gBACP,GAAG,CAAC,CAAC,eAAe,CAAC,KAAK,cAAc,EAAE,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,iBAAiB,EAAE,EAAE,oCAG7F,KAAC,IAAI,IAAC,IAAI,EAAE,aAAa,EAAE,GAAI,EAC/B,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,GAAG,IACV,EACvB,SAAS,CAAC,OAAO,IAAI,CACpB,KAAC,OAAO,IAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YAClE,CAAC,CAAC,eAAe,CAAC,GACX,CACX,EACD,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,gBAAgB,EACpB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,UAAU,YAEf,KAAC,IAAI,IACH,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;wBACjD,EAAE;wBACF,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC;wBACpB,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI;wBAC5B,QAAQ,EAAE,EAAE,KAAK,eAAe;qBACjC,CAAC,CAAC,EACH,cAAc,EAAE,SAAS,CAAC,OAAO,IAAI,SAAS,EAC9C,IAAI,EAAC,eAAe,EACpB,GAAG,EAAE,OAAO,EACZ,WAAW,EAAE,iBAAiB,GAC9B,GACM,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useRef, useState, useEffect, 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  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';\nimport * as alignLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/align-left.icon';\nimport * as alignCenterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/align-center.icon';\nimport * as alignRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/align-right.icon';\n\nimport useEscapeKey from '../hooks/useEscapeKey';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nregisterIcon(arrowMicroDownIcon, alignLeftIcon, alignCenterIcon, alignRightIcon);\n\nconst StyledAlignmentSelect = styled(Button)(({ theme }) => {\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  `;\n});\n\nStyledAlignmentSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div(({ theme }) => {\n  return css`\n    min-width: calc(20 * ${theme.base.spacing});\n  `;\n});\n\nStyledSelectMenu.defaultProps = defaultThemeProp;\n\ntype AlignmentOption = 'left' | 'center' | 'right';\n\nconst ALIGNMENTS: { id: AlignmentOption; icon: string; labelKey: keyof TranslationPack }[] = [\n  { id: 'left', icon: 'align-left', labelKey: 'rte_align_left' },\n  { id: 'center', icon: 'align-center', labelKey: 'rte_align_center' },\n  { id: 'right', icon: 'align-right', labelKey: 'rte_align_right' }\n];\n\ninterface AlignmentSelectProps {\n  editor: TiptapEditor;\n  'data-testid'?: string;\n}\n\nconst AlignmentSelect = ({ editor, ...restProps }: AlignmentSelectProps) => {\n  const t = useI18n();\n  const [open, setOpen] = useState(false);\n  const [activeAlignment, setActiveAlignment] = useState<AlignmentOption>('left');\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    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 updateActiveAlignment = useCallback(() => {\n    if (editor.isActive({ textAlign: 'center' })) {\n      setActiveAlignment('center');\n    } else if (editor.isActive({ textAlign: 'right' })) {\n      setActiveAlignment('right');\n    } else {\n      setActiveAlignment('left');\n    }\n  }, [editor]);\n\n  useEffect(() => {\n    updateActiveAlignment();\n    editor.on('selectionUpdate', updateActiveAlignment);\n    editor.on('transaction', updateActiveAlignment);\n    return () => {\n      editor.off('selectionUpdate', updateActiveAlignment);\n      editor.off('transaction', updateActiveAlignment);\n    };\n  }, [editor, updateActiveAlignment]);\n\n  const onAlignmentSelect = (alignmentId: string, e: MouseEvent<Element>) => {\n    e.stopPropagation();\n    e.preventDefault();\n\n    editor.chain().focus().setTextAlign(alignmentId).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 getActiveIcon = () => {\n    const alignment = ALIGNMENTS.find(a => a.id === activeAlignment);\n    return alignment?.icon || 'align-left';\n  };\n\n  const getActiveLabel = () => {\n    const alignment = ALIGNMENTS.find(a => a.id === activeAlignment);\n    return alignment ? t(alignment.labelKey) : t('rte_align_left');\n  };\n\n  return (\n    <>\n      <StyledAlignmentSelect\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_alignment')}. ${getActiveLabel()} ${t('selected').toLocaleLowerCase()}`}\n        aria-haspopup\n      >\n        <Icon name={getActiveIcon()} />\n        <Icon name='arrow-micro-down' />\n      </StyledAlignmentSelect>\n      {buttonRef.current && (\n        <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n          {t('rte_alignment')}\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={ALIGNMENTS.map(({ id, icon, labelKey }) => ({\n            id,\n            primary: t(labelKey),\n            visual: <Icon name={icon} />,\n            selected: id === activeAlignment\n          }))}\n          focusControlEl={buttonRef.current ?? undefined}\n          mode='single-select'\n          ref={menuRef}\n          onItemClick={onAlignmentSelect}\n        />\n      </Popover>\n    </>\n  );\n};\n\nexport default AlignmentSelect;\n"]}

package/lib/components/Editor/Toolbar/AnchorButton.d.ts

@@ -1,10 +1,9 @@
-import type { FC } from 'react';
-import type { Editor } from 'tinymce';
+import type { Editor as TiptapEditor } from '@tiptap/core';
 import type { ForwardProps } from '@pega/cosmos-react-core';
 interface AnchorButtonProps {
     osx: boolean;
-    editor: Editor;
+    editor: TiptapEditor;
 }
-declare const AnchorButton: FC<AnchorButtonProps & ForwardProps>;
+declare const AnchorButton: ({ osx, editor, ...restProps }: AnchorButtonProps & ForwardProps) => import("react/jsx-runtime").JSX.Element;
 export default AnchorButton;
 //# sourceMappingURL=AnchorButton.d.ts.map

package/lib/components/Editor/Toolbar/AnchorButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAgE,MAAM,OAAO,CAAC;AAC9F,OAAO,KAAK,EAAE,MAAM,EAAmB,MAAM,SAAS,CAAC;AAavD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAS5D,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CA4OtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAiB3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAU5D,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,YAAY,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,GAAI,+BAA+B,iBAAiB,GAAG,YAAY,4CAwTpF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Editor/Toolbar/AnchorButton.js

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