@pega/cosmos-react-rte 5.0.0-dev.4.8 → 5.0.0-dev.5.0

package/lib/components/RichTextEditor/RichTextTreeRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextTreeRenderer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextTreeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI/D,MAAM,OAAO,GAAG,CAAC,IAAgB,EAAE,KAAa,EAAE,EAAE;IAClD,IAAI,OAAO,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE;QAC7B,MAAM,QAAQ,GAAkB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3F,OAAO,KAAC,QAAQ,cAAc,YAAY,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,CAAC,IAA3C,KAAK,CAAkD,CAAC;KAC/E;IACD,OAAO,KAAC,QAAQ,cAAc,YAAY,CAAC,IAAI,CAAC,IAA1B,KAAK,CAAiC,CAAC;AAC/D,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,oBAAoB,GAAkC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/E,OAAO,4BAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,GAAI,CAAC;AACzD,CAAC,CAAC","sourcesContent":["import { FC, Fragment } from 'react';\nimport { CosmosCustom } from 'slate';\n\nimport { hasProp } from '@pega/cosmos-react-core';\n\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\n\ntype CosmosNode = CosmosCustom.Element | CosmosCustom.Text;\n\nconst getNode = (node: CosmosNode, index: number) => {\n  if (hasProp(node, 'children')) {\n    const children: JSX.Element[] = node.children.map((childNode, i) => getNode(childNode, i));\n    return <Fragment key={index}>{nodeRenderer({ ...node, children })}</Fragment>;\n  }\n  return <Fragment key={index}>{leafRenderer(node)}</Fragment>;\n};\n\nexport interface RichTextTreeRendererProps {\n  nodes: CosmosNode[];\n}\n\nexport const RichTextTreeRenderer: FC<RichTextTreeRendererProps> = ({ nodes }) => {\n  return <>{nodes.map((node, i) => getNode(node, i))}</>;\n};\n"]}

package/lib/components/RichTextEditor/RichTextViewer.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { RichTextViewerProps } from './RichTextViewer.types';
+export declare const URL_REGEX: RegExp;
+declare const RichTextViewer: FC<RichTextViewerProps & ForwardProps>;
+export default RichTextViewer;
+//# sourceMappingURL=RichTextViewer.d.ts.map

package/lib/components/RichTextEditor/RichTextViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAwC,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAQ,YAAY,EAAuB,MAAM,yBAAyB,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAM7D,eAAO,MAAM,SAAS,QACoK,CAAC;AAE3L,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CA6CzD,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/lib/components/RichTextEditor/RichTextViewer.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from 'react';
+import { HTML, ErrorState, useI18n } from '@pega/cosmos-react-core';
+import convertMarkdown from './utils/markdownConverter';
+import { StyledEditorContainer, StyledRichTextViewer } from './RichTextEditor.styles';
+import { convertHtml } from './utils/htmlConverter';
+import { RichTextTreeRenderer } from './RichTextTreeRenderer';
+// Regex to match valid URLs
+export const URL_REGEX = /(?<leadingChar>^|\s)(?<url>(?<protocol>https?:\/\/)?(?<host>[a-z0-9]+(?:[-.][a-z0-9]+)*\.(?<tld>[a-z]{2,5})(?<port>:[0-9]{1,5})?)(?<pathQueryHash>[/a-zA-Z0-9?=&+%@.|#_~:[\]'()-]*)?)/g;
+const RichTextViewer = forwardRef(function RichTextViewer({ content, type, interactionRenderers, markdownMap, onRetry, ...restProps }, ref) {
+    const t = useI18n();
+    const [nodes, setNodes] = useState([]);
+    const [error, setError] = useState(false);
+    useEffect(() => {
+        if (type === 'markdown') {
+            setNodes(convertMarkdown(content, [...(interactionRenderers || []), { regexPattern: URL_REGEX, type: 'builtin-url' }], markdownMap));
+        }
+        if (type === 'richtext') {
+            setNodes(JSON.parse(content));
+        }
+        if (type === 'html' && interactionRenderers && interactionRenderers.length > 0) {
+            try {
+                setNodes(convertHtml(content, interactionRenderers));
+                setError(false);
+            }
+            catch {
+                setNodes([]);
+                setError(true);
+            }
+        }
+    }, [content, type, interactionRenderers]);
+    if (type === 'html' && (!interactionRenderers || interactionRenderers.length === 0)) {
+        return _jsx(HTML, { ref: ref, content: content });
+    }
+    return error ? (_jsx(ErrorState, { message: t('rte_invalid_html'), onRetry: onRetry })) : (_jsx(StyledRichTextViewer, { ref: ref, ...restProps, children: _jsx(StyledEditorContainer, { children: _jsx(RichTextTreeRenderer, { nodes: nodes }) }) }));
+});
+export default RichTextViewer;
+//# sourceMappingURL=RichTextViewer.js.map

package/lib/components/RichTextEditor/RichTextViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextViewer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,IAAI,EAAgB,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElF,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAA6B,MAAM,wBAAwB,CAAC;AAEzF,4BAA4B;AAC5B,MAAM,CAAC,MAAM,SAAS,GACpB,wLAAwL,CAAC;AAE3L,MAAM,cAAc,GAA2C,UAAU,CAAC,SAAS,cAAc,CAC/F,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,SAAS,EAAuB,EAChG,GAAwB;IAExB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqC,EAAE,CAAC,CAAC;IAC3E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,QAAQ,CACN,eAAe,CACb,OAAO,EACP,CAAC,GAAG,CAAC,oBAAoB,IAAI,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,EACnF,WAAW,CACZ,CACF,CAAC;SACH;QACD,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SAC/B;QACD,IAAI,IAAI,KAAK,MAAM,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9E,IAAI;gBACF,QAAQ,CAAC,WAAW,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC;gBACrD,QAAQ,CAAC,KAAK,CAAC,CAAC;aACjB;YAAC,MAAM;gBACN,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACb,QAAQ,CAAC,IAAI,CAAC,CAAC;aAChB;SACF;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1C,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE;QACnF,OAAO,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;KAC7C;IAED,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,GAAI,CACjE,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC3C,KAAC,qBAAqB,cACpB,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,GAAI,GAChB,GACH,CACxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC","sourcesContent":["import { FC, Ref, forwardRef, useState, useEffect } from 'react';\n\nimport { HTML, ForwardProps, ErrorState, useI18n } from '@pega/cosmos-react-core';\n\nimport convertMarkdown from './utils/markdownConverter';\nimport { RichTextViewerProps } from './RichTextViewer.types';\nimport { StyledEditorContainer, StyledRichTextViewer } from './RichTextEditor.styles';\nimport { convertHtml } from './utils/htmlConverter';\nimport { RichTextTreeRenderer, RichTextTreeRendererProps } from './RichTextTreeRenderer';\n\n// Regex to match valid URLs\nexport const URL_REGEX =\n  /(?<leadingChar>^|\\s)(?<url>(?<protocol>https?:\\/\\/)?(?<host>[a-z0-9]+(?:[-.][a-z0-9]+)*\\.(?<tld>[a-z]{2,5})(?<port>:[0-9]{1,5})?)(?<pathQueryHash>[/a-zA-Z0-9?=&+%@.|#_~:[\\]'()-]*)?)/g;\n\nconst RichTextViewer: FC<RichTextViewerProps & ForwardProps> = forwardRef(function RichTextViewer(\n  { content, type, interactionRenderers, markdownMap, onRetry, ...restProps }: RichTextViewerProps,\n  ref: Ref<HTMLDivElement>\n) {\n  const t = useI18n();\n  const [nodes, setNodes] = useState<RichTextTreeRendererProps['nodes']>([]);\n  const [error, setError] = useState(false);\n\n  useEffect(() => {\n    if (type === 'markdown') {\n      setNodes(\n        convertMarkdown(\n          content,\n          [...(interactionRenderers || []), { regexPattern: URL_REGEX, type: 'builtin-url' }],\n          markdownMap\n        )\n      );\n    }\n    if (type === 'richtext') {\n      setNodes(JSON.parse(content));\n    }\n    if (type === 'html' && interactionRenderers && interactionRenderers.length > 0) {\n      try {\n        setNodes(convertHtml(content, interactionRenderers));\n        setError(false);\n      } catch {\n        setNodes([]);\n        setError(true);\n      }\n    }\n  }, [content, type, interactionRenderers]);\n\n  if (type === 'html' && (!interactionRenderers || interactionRenderers.length === 0)) {\n    return <HTML ref={ref} content={content} />;\n  }\n\n  return error ? (\n    <ErrorState message={t('rte_invalid_html')} onRetry={onRetry} />\n  ) : (\n    <StyledRichTextViewer ref={ref} {...restProps}>\n      <StyledEditorContainer>\n        <RichTextTreeRenderer nodes={nodes} />\n      </StyledEditorContainer>\n    </StyledRichTextViewer>\n  );\n});\n\nexport default RichTextViewer;\n"]}

package/lib/components/RichTextEditor/RichTextViewer.types.d.ts

@@ -0,0 +1,33 @@
+import { marked } from 'marked';
+import { ComponentType, FC } from 'react';
+import { ErrorStateProps, ExcludeStrict } from '@pega/cosmos-react-core';
+export interface InteractionRenderers {
+    type: string;
+    regexPattern: RegExp;
+    xmlElement?: string;
+    component?: ComponentType<any>;
+    getSearchAttributes?: (xmlElement: string, searchResult: string) => {
+        markdown: string;
+        component: ComponentType<any>;
+        props: Record<string, any>;
+        text: string;
+    } | undefined;
+}
+export type TokenMap = {
+    [K in ExcludeStrict<marked.Token, marked.Tokens.Def>['type']]: Extract<marked.Token, {
+        type: K;
+    }>;
+};
+export type MDMap = {
+    [K in ExcludeStrict<marked.Token, marked.Tokens.Def>['type']]?: (token: TokenMap[K]) => FC<{
+        token: TokenMap[K];
+    }> | undefined;
+};
+export interface RichTextViewerProps {
+    content: string;
+    type: 'markdown' | 'html' | 'richtext';
+    interactionRenderers?: InteractionRenderers[];
+    markdownMap?: MDMap;
+    onRetry?: ErrorStateProps['onRetry'];
+}
+//# sourceMappingURL=RichTextViewer.types.d.ts.map

package/lib/components/RichTextEditor/RichTextViewer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextViewer.types.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC/B,mBAAmB,CAAC,EAAE,CACpB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,KAElB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAC7F,SAAS,CAAC;CACf;AAED,MAAM,MAAM,QAAQ,GAAG;KACpB,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC;CAClG,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;KACjB,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAC9D,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KACf,EAAE,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,GAAG,SAAS;CAC5C,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;IACvC,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC"}

package/lib/components/RichTextEditor/RichTextViewer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RichTextViewer.types.js.map

package/lib/components/RichTextEditor/RichTextViewer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextViewer.types.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { marked } from 'marked';\nimport { ComponentType, FC } from 'react';\n\nimport { ErrorStateProps, ExcludeStrict } from '@pega/cosmos-react-core';\n\nexport interface InteractionRenderers {\n  type: string;\n  regexPattern: RegExp;\n  xmlElement?: string;\n  component?: ComponentType<any>;\n  getSearchAttributes?: (\n    xmlElement: string,\n    searchResult: string\n  ) =>\n    | { markdown: string; component: ComponentType<any>; props: Record<string, any>; text: string }\n    | undefined;\n}\n\nexport type TokenMap = {\n  [K in ExcludeStrict<marked.Token, marked.Tokens.Def>['type']]: Extract<marked.Token, { type: K }>;\n};\n\nexport type MDMap = {\n  [K in ExcludeStrict<marked.Token, marked.Tokens.Def>['type']]?: (\n    token: TokenMap[K]\n  ) => FC<{ token: TokenMap[K] }> | undefined;\n};\n\nexport interface RichTextViewerProps {\n  content: string;\n  type: 'markdown' | 'html' | 'richtext';\n  interactionRenderers?: InteractionRenderers[];\n  markdownMap?: MDMap;\n  onRetry?: ErrorStateProps['onRetry'];\n}\n"]}

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+interface AnchorButtonProps {
+    osx: boolean;
+}
+declare const AnchorButton: FC<AnchorButtonProps & ForwardProps>;
+export default AnchorButton;
+//# sourceMappingURL=AnchorButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAQH,MAAM,OAAO,CAAC;AAIf,OAAO,EAUL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAWjC,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;CACd;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAyNtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import { Text, Editor, Transforms } from 'slate';
+import { ReactEditor, useSlate } from 'slate-react';
+import { Button, CardContent, Grid, Icon, registerIcon, Input, Popover, useOuterEvent, useElement, Form, useI18n } from '@pega/cosmos-react-core';
+import * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';
+import { useRTEContext } from '../RichTextEditor.context';
+import EditorCommands from '../utils/EditorCommands';
+import ToolbarButton from './ToolbarButton';
+import { getKeyCommand } from './utils';
+registerIcon(chainIcon);
+const AnchorButton = ({ osx, ...props }) => {
+    const t = useI18n();
+    const { setPopoverOpen, onEditorFocus } = useRTEContext();
+    const buttonRef = useRef(null);
+    const textInputRef = useRef(null);
+    const urlInputRef = useRef(null);
+    const editor = useSlate();
+    const [popoverEl, setPopoverEl] = useElement();
+    const [selectedText, setSelectedText] = useState('');
+    const [selection, setSelection] = useState(null);
+    const [url, setUrl] = useState('');
+    const [urlMatch, setUrlMatch] = useState(true);
+    const [anchorMenu, setAnchorMenu] = useState(false);
+    const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);
+    const openMenu = (opts = {}) => {
+        setAnchorMenu(true);
+        setPopoverOpen(true);
+        if (opts.focusInput) {
+            setTimeout(() => {
+                textInputRef.current?.focus();
+            }, 0);
+        }
+    };
+    const resetMenu = (opts = { focusEditor: true }) => {
+        setSelection(null);
+        setSelectedText('');
+        setUrl('');
+        setUrlMatch(true);
+        setAnchorMenu(false);
+        setPopoverOpen(false);
+        if (opts.focusEditor) {
+            setTimeout(() => {
+                onEditorFocus({
+                    runAfterFocus: () => {
+                        if (selection)
+                            Transforms.setSelection(editor, selection);
+                    }
+                });
+            }, 0);
+        }
+    };
+    useOuterEvent('mousedown', [popoverEl], () => {
+        if (anchorMenu) {
+            resetMenu();
+        }
+    });
+    const createLink = () => {
+        if (url) {
+            EditorCommands.createLink(editor, selectedText, new URL(/^[a-z][a-z0-9.+-]*:/i.test(url) ? url : `http:${url}`).href, selection);
+            resetMenu();
+        }
+    };
+    useEffect(() => {
+        if (editor.selection) {
+            setSelectedText(Editor.string(editor, editor.selection));
+            setSelection(editor.selection);
+            const [match] = Editor.nodes(editor, {
+                match: n => Text.isText(n) && !!n.href,
+                at: editor.selection
+            });
+            if (match) {
+                setUrl(match[0].href || '');
+                setSelectedText(match[0].text);
+            }
+            else {
+                setUrl('');
+            }
+        }
+    }, [anchorMenu]);
+    const preventDef = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const isLinkActive = () => {
+        const [link] = Editor.nodes(editor, { match: n => Text.isText(n) && !!n.href });
+        return !!link;
+    };
+    const cancelAnchorCreation = (event) => {
+        if ((event?.type === 'keydown' && event?.key === 'Enter') ||
+            event?.type === 'mousedown' ||
+            !event) {
+            event?.preventDefault();
+            resetMenu({ focusEditor: false });
+            buttonRef.current?.focus();
+        }
+    };
+    useEffect(() => {
+        const keyCommandListener = (e) => {
+            if (e.key === 'k' && (e.metaKey || e.ctrlKey) && ReactEditor.isFocused(editor)) {
+                e.preventDefault();
+                openMenu({ focusInput: true });
+            }
+            if (e.key === 'Escape') {
+                cancelAnchorCreation();
+            }
+        };
+        document.addEventListener('keydown', keyCommandListener);
+        return () => {
+            document.removeEventListener('keydown', keyCommandListener);
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { ref: buttonRef, onMouseDown: () => {
+                    openMenu();
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        openMenu({ focusInput: true });
+                    }
+                }, active: isLinkActive(), tooltip: tooltip, label: t('rte_link'), ...props, children: _jsx(Icon, { name: 'chain' }) }), _jsx(Popover, { show: anchorMenu, target: buttonRef.current, ref: setPopoverEl, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: cancelAnchorCreation, onMouseDown: cancelAnchorCreation, type: 'button', children: "Cancel" }), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', type: 'submit', variant: 'primary', children: "Apply" })] }), onSubmit: (e) => {
+                            e.preventDefault();
+                            createLink();
+                        }, children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: 'Text', value: selectedText, onClick: preventDef, onChange: (e) => {
+                                        setSelectedText(e.target.value);
+                                    }, onBlur: () => {
+                                        setTimeout(() => {
+                                            if (document.activeElement !== urlInputRef.current) {
+                                                resetMenu({ focusEditor: false });
+                                            }
+                                        }, 0);
+                                    }, ref: textInputRef }), _jsx(Input, { label: 'URL', value: url, onClick: preventDef, onChange: (e) => {
+                                        const urlInput = e.target.value;
+                                        setUrl(urlInput);
+                                        if (!urlMatch) {
+                                            try {
+                                                // eslint-disable-next-line no-new
+                                                new URL(/^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `http:${urlInput}`);
+                                                setUrlMatch(true);
+                                            }
+                                            catch {
+                                                setUrlMatch(false);
+                                            }
+                                        }
+                                    }, onBlur: () => {
+                                        try {
+                                            // eslint-disable-next-line no-new
+                                            new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `http:${url}`);
+                                            setUrlMatch(true);
+                                        }
+                                        catch {
+                                            setUrlMatch(false);
+                                        }
+                                    }, info: !urlMatch ? 'Not a valid URL' : '', status: !urlMatch ? 'error' : undefined, ref: urlInputRef })] }) }) }) })] }));
+};
+export default AnchorButton;
+//# sourceMappingURL=AnchorButton.js.map

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

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

package/lib/components/RichTextEditor/Toolbar/ImageButton.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+declare const ImageButton: FC<ForwardProps>;
+export default ImageButton;
+//# sourceMappingURL=ImageButton.d.ts.map

package/lib/components/RichTextEditor/Toolbar/ImageButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ImageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAU,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAsB,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAapF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,CAmCjC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/RichTextEditor/Toolbar/ImageButton.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import styled from 'styled-components';
+import { hideVisually } from 'polished';
+import { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';
+import * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';
+import { useRTEContext } from '../RichTextEditor.context';
+import ToolbarButton from './ToolbarButton';
+registerIcon(pictureIcon);
+const StyledImageInput = styled.input `
+  ${hideVisually}
+`;
+const ImageButton = ({ ...props }) => {
+    const t = useI18n();
+    const { addImage } = useRTEContext();
+    const fileInputRef = useRef(null);
+    const onImageInputChange = (e) => {
+        if (e.target.files) {
+            addImage(e.target.files[0]);
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StyledImageInput, { type: 'file', accept: 'image/*', ref: fileInputRef, onChange: onImageInputChange }), _jsx(ToolbarButton, { onClick: () => {
+                    fileInputRef?.current?.click();
+                }, tooltip: t('rte_image'), label: t('rte_image'), ...props, children: _jsx(Icon, { name: 'picture' }) })] }));
+};
+export default ImageButton;
+//# sourceMappingURL=ImageButton.js.map

package/lib/components/RichTextEditor/Toolbar/ImageButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ImageButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAA;IACjC,YAAY;CACf,CAAC;AAEF,MAAM,WAAW,GAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IACrC,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC9D,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAE5B,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxB,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;aACjC;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,gBAAgB,IACf,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,kBAAkB,GAC5B,EACF,KAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBACjC,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KACjB,KAAK,YAET,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,GACT,IACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { ChangeEvent, FC, useRef } from 'react';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { Icon, registerIcon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';\n\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport ToolbarButton from './ToolbarButton';\n\nregisterIcon(pictureIcon);\n\nconst StyledImageInput = styled.input`\n  ${hideVisually}\n`;\n\nconst ImageButton: FC<ForwardProps> = ({ ...props }) => {\n  const t = useI18n();\n  const { addImage } = useRTEContext();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const onImageInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (e.target.files) {\n      addImage(e.target.files[0]);\n\n      if (fileInputRef.current) {\n        fileInputRef.current.value = '';\n      }\n    }\n  };\n\n  return (\n    <>\n      <StyledImageInput\n        type='file'\n        accept='image/*'\n        ref={fileInputRef}\n        onChange={onImageInputChange}\n      />\n      <ToolbarButton\n        onClick={() => {\n          fileInputRef?.current?.click();\n        }}\n        tooltip={t('rte_image')}\n        label={t('rte_image')}\n        {...props}\n      >\n        <Icon name='picture' />\n      </ToolbarButton>\n    </>\n  );\n};\n\nexport default ImageButton;\n"]}

package/lib/components/RichTextEditor/Toolbar/IndentButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface IndentButtonProps {
+    type: 'indent' | 'unindent';
+    osx: boolean;
+}
+declare const IndentButton: FC<IndentButtonProps>;
+export default IndentButton;
+//# sourceMappingURL=IndentButton.d.ts.map

package/lib/components/RichTextEditor/Toolbar/IndentButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndentButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/IndentButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAc3B,UAAU,iBAAiB;IACzB,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC5B,GAAG,EAAE,OAAO,CAAC;CACd;AAID,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwBvC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/RichTextEditor/Toolbar/IndentButton.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReactEditor, useSlate } from 'slate-react';
+import { Icon, navigatorIsAvailable, registerIcon, useI18n } from '@pega/cosmos-react-core';
+import * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';
+import * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';
+import EditorCommands from '../utils/EditorCommands';
+import ToolbarButton from './ToolbarButton';
+import { getKeyCommand } from './utils';
+registerIcon(indentIcon, unindentIcon);
+const isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');
+const IndentButton = ({ type, osx }) => {
+    const editor = useSlate();
+    const t = useI18n();
+    const tooltipMobile = type === 'indent' ? `${t('rte_indent')}` : `${t('rte_unindent')}`;
+    const tooltipDesktop = getKeyCommand(osx, ({ shift, alt }) => type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`);
+    const tooltip = isMobile ? tooltipMobile : tooltipDesktop;
+    const onMouseDown = e => {
+        e.preventDefault();
+        if (type === 'indent') {
+            EditorCommands.indent(editor);
+        }
+        else {
+            EditorCommands.unindent(editor);
+        }
+        if (!ReactEditor.isFocused(editor))
+            ReactEditor.focus(editor);
+    };
+    return (_jsx(ToolbarButton, { onMouseDown: onMouseDown, tooltip: tooltip, label: type, children: _jsx(Icon, { name: type }) }));
+};
+export default IndentButton;
+//# sourceMappingURL=IndentButton.js.map

package/lib/components/RichTextEditor/Toolbar/IndentButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndentButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/IndentButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAC5F,OAAO,KAAK,YAAY,MAAM,iEAAiE,CAAC;AAEhG,OAAO,cAAc,MAAM,yBAAyB,CAAC;AAErD,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAOvC,MAAM,QAAQ,GAAG,oBAAoB,IAAI,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAEhF,MAAM,YAAY,GAA0B,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE;IAC5D,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC;IACxF,MAAM,cAAc,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAC3D,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAC9F,CAAC;IACF,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC;IAE1D,MAAM,WAAW,GAAsC,CAAC,CAAC,EAAE;QACzD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SAC/B;aAAM;YACL,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SACjC;QACD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC;YAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,YACpE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,GACN,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC } from 'react';\nimport { ReactEditor, useSlate } from 'slate-react';\n\nimport { Icon, navigatorIsAvailable, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton, { ToolBarButtonProps } from './ToolbarButton';\nimport { getKeyCommand } from './utils';\n\nregisterIcon(indentIcon, unindentIcon);\n\ninterface IndentButtonProps {\n  type: 'indent' | 'unindent';\n  osx: boolean;\n}\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst IndentButton: FC<IndentButtonProps> = ({ type, osx }) => {\n  const editor = useSlate();\n  const t = useI18n();\n  const tooltipMobile = type === 'indent' ? `${t('rte_indent')}` : `${t('rte_unindent')}`;\n  const tooltipDesktop = getKeyCommand(osx, ({ shift, alt }) =>\n    type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n  );\n  const tooltip = isMobile ? tooltipMobile : tooltipDesktop;\n\n  const onMouseDown: ToolBarButtonProps['onMouseDown'] = e => {\n    e.preventDefault();\n    if (type === 'indent') {\n      EditorCommands.indent(editor);\n    } else {\n      EditorCommands.unindent(editor);\n    }\n    if (!ReactEditor.isFocused(editor)) ReactEditor.focus(editor);\n  };\n\n  return (\n    <ToolbarButton onMouseDown={onMouseDown} tooltip={tooltip} label={type}>\n      <Icon name={type} />\n    </ToolbarButton>\n  );\n};\n\nexport default IndentButton;\n"]}

package/lib/components/RichTextEditor/Toolbar/TableButton.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+declare const TableButton: FC<ForwardProps>;
+export default TableButton;
+//# sourceMappingURL=TableButton.d.ts.map

package/lib/components/RichTextEditor/Toolbar/TableButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TableButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAsB,YAAY,EAAW,MAAM,yBAAyB,CAAC;AASpF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,CAsBjC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/RichTextEditor/Toolbar/TableButton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlate } from 'slate-react';
+import { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';
+import * as tableIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/table.icon';
+import EditorCommands from '../utils/EditorCommands';
+import ToolbarButton from './ToolbarButton';
+registerIcon(tableIcon);
+const TableButton = props => {
+    const t = useI18n();
+    const editor = useSlate();
+    const createNewTable = () => {
+        EditorCommands.appendTable(editor);
+    };
+    return (_jsx(ToolbarButton, { type: 'button', onMouseDown: e => {
+            e.preventDefault();
+            createNewTable();
+        }, tooltip: t('rte_table'), label: t('rte_table'), ...props, children: _jsx(Icon, { name: 'table' }) }));
+};
+export default TableButton;
+//# sourceMappingURL=TableButton.js.map

package/lib/components/RichTextEditor/Toolbar/TableButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TableButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,cAAc,MAAM,yBAAyB,CAAC;AAErD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,WAAW,GAAqB,KAAK,CAAC,EAAE;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;IAE1B,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,CAAC,CAAC,EAAE;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,cAAc,EAAE,CAAC;QACnB,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KACjB,KAAK,YAET,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACP,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useSlate } from 'slate-react';\n\nimport { Icon, registerIcon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport * as tableIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/table.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton from './ToolbarButton';\n\nregisterIcon(tableIcon);\n\nconst TableButton: FC<ForwardProps> = props => {\n  const t = useI18n();\n  const editor = useSlate();\n\n  const createNewTable = () => {\n    EditorCommands.appendTable(editor);\n  };\n\n  return (\n    <ToolbarButton\n      type='button'\n      onMouseDown={e => {\n        e.preventDefault();\n        createNewTable();\n      }}\n      tooltip={t('rte_table')}\n      label={t('rte_table')}\n      {...props}\n    >\n      <Icon name='table' />\n    </ToolbarButton>\n  );\n};\n\nexport default TableButton;\n"]}

package/lib/components/RichTextEditor/Toolbar/TextSelect.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+declare const TextSelect: FC<{
+    osx: boolean;
+}>;
+export default TextSelect;
+//# sourceMappingURL=TextSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAwE,MAAM,OAAO,CAAC;AA8EjG,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,GAAG,EAAE,OAAO,CAAA;CAAE,CAwGpC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from 'react';
+import { Transforms } from 'slate';
+import { ReactEditor, useSlate } from 'slate-react';
+import styled, { css } from 'styled-components';
+import { Popover, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize } from '@pega/cosmos-react-core';
+import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
+import EditorCommands from '../utils/EditorCommands';
+import { useRTEContext } from '../RichTextEditor.context';
+import { getKeyCommand } from './utils';
+registerIcon(arrowMicroDownIcon);
+const StyledTextSelect = 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;
+    border-radius: calc(0.25 * ${theme.base['border-radius']});
+    height: calc(4 * ${theme.base.spacing});
+    padding: calc(0.5 * ${theme.base.spacing});
+    font-size: ${fontSizes.xxs};
+
+    span {
+      white-space: nowrap;
+    }
+
+    :focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `;
+});
+StyledTextSelect.defaultProps = defaultThemeProp;
+const StyledSelectMenu = styled.div `
+  min-width: 10rem;
+`;
+const textMapping = {
+    paragraph: 'Normal',
+    'heading-1': 'Heading 1',
+    'heading-2': 'Heading 2',
+    'heading-3': 'Heading 3',
+    'heading-4': 'Heading 4',
+    '': 'Normal'
+};
+const getTextCommand = (num, osx) => {
+    return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);
+};
+const getTextFormats = (osx) => {
+    return [
+        { text: 'Normal', subText: getTextCommand(0, osx), type: 'paragraph' },
+        { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'heading-1' },
+        { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'heading-2' },
+        { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'heading-3' },
+        { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'heading-4' }
+    ];
+};
+const TextSelect = ({ osx }) => {
+    const t = useI18n();
+    const { disabled } = useRTEContext();
+    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);
+    const editor = useSlate();
+    const textFormats = useCallback(() => {
+        return getTextFormats(osx);
+    }, [osx])();
+    useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {
+        setOpen(false);
+    });
+    const onTextSelect = (type, e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        EditorCommands.setBlock(type, editor);
+        if (!openedByClick.current) {
+            buttonRef.current?.focus();
+        }
+        setOpen(false);
+        selecting.current = true;
+        setTimeout(() => {
+            if (!ReactEditor.isFocused(editor) && openedByClick.current) {
+                const selection = editor.selection;
+                ReactEditor.focus(editor);
+                if (selection)
+                    Transforms.select(editor, selection);
+            }
+        }, 0);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledTextSelect, { variant: 'simple', type: 'button', disabled: disabled, icon: false, ref: buttonRef, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setOpen(true);
+                    openedByClick.current = true;
+                }, 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);
+                    }
+                }, onFocus: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `Text formatting toolbar. ${t('rte_heading_style')}. ${textMapping[EditorCommands.getActiveBlockType(editor)]} selected`, "aria-haspopup": true, children: [_jsx("span", { children: textMapping[EditorCommands.getActiveBlockType(editor)] }), _jsx(Icon, { name: 'arrow-micro-down' })] }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_heading_style') })), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: textFormats.map(({ text, type, subText }) => ({
+                        id: type,
+                        primary: text,
+                        secondary: [subText],
+                        selected: type === EditorCommands.getActiveBlockType(editor)
+                    })), focusControlEl: buttonRef.current || undefined, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }) })] }));
+};
+export default TextSelect;
+//# sourceMappingURL=TextSelect.js.map