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

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

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

Files changed (191) hide show

package/lib/components/RichTextEditor/RichTextViewer.js CHANGED Viewed

@@ -1,11 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect } from 'react';
-import { HTML, ErrorState, useI18n, useTestIds, withTestIds, hasProp } from '@pega/cosmos-react-core';
+import styled, { css } from 'styled-components';
+import { HTML, ErrorState, useI18n, useTestIds, withTestIds, hasProp, defaultThemeProp } 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';
 import { getRichTextViewerTestIds } from './RichTextViewer.test-ids';
+const StyledHTMLViewer = styled(HTML)(({ theme: { base: { spacing } } }) => {
+    return css `
+    padding: calc(0.125 * ${spacing});
+  `;
+});
+StyledHTMLViewer.defaultProps = defaultThemeProp;
 // 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 isValidHTTPURL = (href) => {
@@ -63,7 +70,7 @@ const RichTextViewer = forwardRef(function RichTextViewer({ testId, content, typ
         }
     }, [content, type, interactionRenderers]);
     if (type === 'html' && (!interactionRenderers || interactionRenderers.length === 0)) {
-        return _jsx(HTML, { ref: ref, content: content });
+        return _jsx(StyledHTMLViewer, { ref: ref, content: content });
     }
     return error ? (_jsx(ErrorState, { message: t('rte_invalid_html'), onRetry: onRetry })) : (_jsx(StyledRichTextViewer, { "data-testid": testIds.root, ref: ref, ...restProps, children: _jsx(StyledEditorContainer, { children: _jsx(RichTextTreeRenderer, { nodes: nodes }) }) }));
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextViewer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAIxD~~,OAAO,EACL,IAAI,EACJ,UAAU,EACV,OAAO,EACP,UAAU,EACV,WAAW,EACX,OAAO,~~EACR~~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~~IAAI~~,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;~~IAC9C~~,CAAC;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,mBAAc,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,YACtE,KAAC,qBAAqB,cACpB,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,GAAI,GAChB,GACH,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,cAAc,EAAE,wBAAwB,CAAC,CAAC","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport type { PegaCustom } from 'slate';\n\nimport {\n HTML,\n ErrorState,\n useI18n,\n useTestIds,\n withTestIds,\n hasProp\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport convertMarkdown from './utils/markdownConverter';\nimport type { RichTextViewerProps } from './RichTextViewer.types';\nimport { StyledEditorContainer, StyledRichTextViewer } from './RichTextEditor.styles';\nimport { convertHtml } from './utils/htmlConverter';\nimport { RichTextTreeRenderer } from './RichTextTreeRenderer';\nimport type { RichTextTreeRendererProps } from './RichTextTreeRenderer';\nimport { getRichTextViewerTestIds } from './RichTextViewer.test-ids';\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 isValidHTTPURL = (href?: string): boolean => {\n if (!href) return false;\n\n try {\n const url = new URL(href, window.location.href);\n return url.protocol.startsWith('http');\n } catch {\n return false;\n }\n};\n\nconst findFirstHref = (nodes: (PegaCustom.Element \| PegaCustom.Text)[]): string \| undefined => {\n for (const node of nodes) {\n if (hasProp(node, 'children')) {\n const href = findFirstHref(node.children);\n if (isValidHTTPURL(href)) {\n return href;\n }\n } else if (isValidHTTPURL(node.href)) {\n return node.href;\n }\n }\n};\n\nconst RichTextViewer: ForwardRefForwardPropsComponent<RichTextViewerProps> = forwardRef(\n function RichTextViewer(\n {\n testId,\n content,\n type,\n interactionRenderers,\n markdownMap,\n onRetry,\n onMarkdownLinkRender,\n ...restProps\n }: PropsWithoutRef<RichTextViewerProps>,\n ref: RichTextViewerProps['ref']\n ) {\n const testIds = useTestIds(testId, getRichTextViewerTestIds);\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 const newNodes = convertMarkdown(\n content,\n [...(interactionRenderers ?? []), { regexPattern: URL_REGEX, type: 'builtin-url' }],\n markdownMap\n );\n\n if (onMarkdownLinkRender) {\n const href = findFirstHref(newNodes);\n if (href) {\n onMarkdownLinkRender(href);\n }\n }\n\n setNodes(newNodes);\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 data-testid={testIds.root} ref={ref} {...restProps}>\n <StyledEditorContainer>\n <RichTextTreeRenderer nodes={nodes} />\n </StyledEditorContainer>\n </StyledRichTextViewer>\n );\n }\n);\n\nexport default withTestIds(RichTextViewer, getRichTextViewerTestIds);\n"]}
1	+ {"version":3,"file":"RichTextViewer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport type { PegaCustom } from 'slate';\nimport styled, { css } from 'styled-components';\n\nimport {\n HTML,\n ErrorState,\n useI18n,\n useTestIds,\n withTestIds,\n hasProp,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport convertMarkdown from './utils/markdownConverter';\nimport type { RichTextViewerProps } from './RichTextViewer.types';\nimport { StyledEditorContainer, StyledRichTextViewer } from './RichTextEditor.styles';\nimport { convertHtml } from './utils/htmlConverter';\nimport { RichTextTreeRenderer } from './RichTextTreeRenderer';\nimport type { RichTextTreeRendererProps } from './RichTextTreeRenderer';\nimport { getRichTextViewerTestIds } from './RichTextViewer.test-ids';\n\nconst StyledHTMLViewer = styled(HTML)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n padding: calc(0.125 * ${spacing});\n `;\n});\n\nStyledHTMLViewer.defaultProps = defaultThemeProp;\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 isValidHTTPURL = (href?: string): boolean => {\n if (!href) return false;\n\n try {\n const url = new URL(href, window.location.href);\n return url.protocol.startsWith('http');\n } catch {\n return false;\n }\n};\n\nconst findFirstHref = (nodes: (PegaCustom.Element \| PegaCustom.Text)[]): string \| undefined => {\n for (const node of nodes) {\n if (hasProp(node, 'children')) {\n const href = findFirstHref(node.children);\n if (isValidHTTPURL(href)) {\n return href;\n }\n } else if (isValidHTTPURL(node.href)) {\n return node.href;\n }\n }\n};\n\nconst RichTextViewer: ForwardRefForwardPropsComponent<RichTextViewerProps> = forwardRef(\n function RichTextViewer(\n {\n testId,\n content,\n type,\n interactionRenderers,\n markdownMap,\n onRetry,\n onMarkdownLinkRender,\n ...restProps\n }: PropsWithoutRef<RichTextViewerProps>,\n ref: RichTextViewerProps['ref']\n ) {\n const testIds = useTestIds(testId, getRichTextViewerTestIds);\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 const newNodes = convertMarkdown(\n content,\n [...(interactionRenderers ?? []), { regexPattern: URL_REGEX, type: 'builtin-url' }],\n markdownMap\n );\n\n if (onMarkdownLinkRender) {\n const href = findFirstHref(newNodes);\n if (href) {\n onMarkdownLinkRender(href);\n }\n }\n\n setNodes(newNodes);\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 <StyledHTMLViewer ref={ref} content={content} />;\n }\n\n return error ? (\n <ErrorState message={t('rte_invalid_html')} onRetry={onRetry} />\n ) : (\n <StyledRichTextViewer data-testid={testIds.root} ref={ref} {...restProps}>\n <StyledEditorContainer>\n <RichTextTreeRenderer nodes={nodes} />\n </StyledEditorContainer>\n </StyledRichTextViewer>\n );\n }\n);\n\nexport default withTestIds(RichTextViewer, getRichTextViewerTestIds);\n"]}

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

@@ -14,7 +14,7 @@ import IndentButton from './IndentButton';
 import { getKeyCommand } from './utils';
 const StyledToolbar = styled.div(({ sticky, theme }) => {
     return css `
-    background-color: ${props => props.theme.base.palette['primary-background']};
+    background-color: ${props => props.theme.components['form-control']['background-color']};
     border-radius: calc(0.25 * ${props => props.theme.base['border-radius']});
     overflow: auto;
     padding: 0.125rem;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport type { FC } from 'react';\nimport type { Text } from 'slate';\nimport { useSlate, useFocused, ReactEditor } from 'slate-react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n navigatorIsAvailable\n} from '@pega/cosmos-react-core';\nimport type { TranslationPack, ExcludeStrict } from '@pega/cosmos-react-core';\nimport type { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\n\nimport EditorCommands from '../utils/EditorCommands';\nimport ListCommands from '../utils/ListCommands';\n\nimport ToolbarButton from './ToolbarButton';\nimport type { StyleType, Features } from './Toolbar.types';\nimport TableButton from './TableButton';\nimport AnchorButton from './AnchorButton';\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport IndentButton from './IndentButton';\nimport { getKeyCommand } from './utils';\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(({ sticky, theme }) => {\n return css`\n background-color: ${props => props.theme.base.palette['primary-background']};\n border-radius: calc(0.25 * ${props => props.theme.base['border-radius']});\n overflow: auto;\n padding: 0.125rem;\n ${sticky &&\n css`\n position: sticky;\n bottom: 0;\n `}\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps {\n features: Features[];\n sticky?: boolean;\n setFocusableBtn: (el: HTMLElement) => void;\n}\n\ntype StyleButtonType = {\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: ExcludeStrict<keyof Text, 'text'>;\n tooltip: string;\n};\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: ReactEditor,\n t: TranslationFunction<TranslationPack>,\n focused: boolean,\n osx: boolean\n) {\n const inlineStyleButtons: StyleButtonType[] = [\n {\n style: 'BOLD',\n text: 'B',\n format: 'bold',\n label: t('rte_bold'),\n tooltip: isMobile\n ? `${t('rte_bold')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`)\n },\n {\n style: 'ITALIC',\n text: 'I',\n format: 'italic',\n label: t('rte_italic'),\n tooltip: isMobile\n ? `${t('rte_italic')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`)\n },\n {\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'line-through',\n label: t('rte_strike_through'),\n tooltip: isMobile\n ? `${t('rte_strike_through')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`)\n }\n ];\n\n return inlineStyleButtons.map(({ format, style, text, label, tooltip }) => {\n return (\n <ToolbarButton\n key={style}\n onMouseDown={e => {\n e.preventDefault();\n if (!focused) {\n ReactEditor.focus(editor);\n }\n setTimeout(() => {\n EditorCommands.toggleFormat(format, editor);\n }, 0);\n }}\n styleType={style}\n active={EditorCommands.isFormatActive(format, editor)}\n tooltip={tooltip}\n label={label}\n >\n {text}\n </ToolbarButton>\n );\n });\n}\n\n// Function that returns the cut, copy and paste buttons\nfunction renderCutCopyPaste(\n editor: ReactEditor,\n t: TranslationFunction<TranslationPack>,\n osx: boolean\n) {\n const CutCopyPasteButtons = [\n {\n text: 'Cut',\n icon: 'scissors',\n label: t('rte_cut'),\n func: () => {\n document.execCommand('cut');\n },\n tooltip: getKeyCommand(osx, ({ ctrl }) => `${t('rte_cut')} (${ctrl}X)`)\n },\n {\n text: 'Copy',\n icon: 'copy',\n label: t('rte_copy'),\n func: () => {\n document.execCommand('copy');\n },\n tooltip: getKeyCommand(osx, ({ ctrl }) => `${t('rte_copy')} (${ctrl}C)`)\n },\n {\n text: 'Paste',\n icon: 'clipboard-data',\n label: t('rte_paste'),\n func: () => {\n navigator.clipboard.readText().then(text => {\n EditorCommands.replaceWithText(editor, editor.selection, text);\n });\n },\n tooltip: getKeyCommand(osx, ({ ctrl }) => `${t('rte_paste')} (${ctrl}V)`)\n }\n ];\n\n return CutCopyPasteButtons.map(btn => {\n return (\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n btn.func();\n }}\n key={btn.text}\n tooltip={btn.tooltip}\n label={btn.label}\n >\n <Icon name={btn.icon} />\n </ToolbarButton>\n );\n });\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n return features.reduce(\n (acc, feature) => {\n return { ...acc, [feature]: true };\n },\n {} as { [F in Features]: boolean }\n );\n}\n\nconst Toolbar: FC<ToolbarProps> = (props: ToolbarProps) => {\n const { features, sticky, setFocusableBtn } = props;\n const editor = useSlate();\n const focused = useFocused();\n const t = useI18n();\n const [osx, setOsx] = useState(false);\n const toolbarRef = useRef<HTMLElement>(null);\n\n useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });\n\n const [activeFeatures, setActiveFeatures] = useState(createActiveFeaturesMap(features));\n\n useEffect(() => {\n const btn = toolbarRef?.current?.querySelector('button');\n if (btn) setFocusableBtn(btn);\n }, [toolbarRef.current]);\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n useEffect(() => {\n if (navigator.appVersion.includes('Mac')) setOsx(true);\n }, []);\n\n return (\n <Flex as={StyledToolbar} sticky={sticky} container={{ justify: 'between' }} ref={toolbarRef}>\n <Flex container={{ alignItems: 'end' }}>\n <TextSelect osx={osx} />\n {activeFeatures['inline-styling'] && renderStyleButtons(editor, t, focused, osx)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n ListCommands.toggleList('unordered-list', editor);\n }}\n active={EditorCommands.isBlockActive('unordered-list', editor)}\n tooltip={\n isMobile\n ? `${t('rte_bulleted_list')}`\n : getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n )\n }\n label={t('rte_bulleted_list')}\n >\n <Icon name='list' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n ListCommands.toggleList('ordered-list', editor);\n }}\n active={EditorCommands.isBlockActive('ordered-list', editor)}\n tooltip={t('rte_numbered_list')}\n label={t('rte_numbered_list')}\n >\n <Icon name='list-number' />\n </ToolbarButton>\n </>\n )}\n {activeFeatures.indentation && (\n <>\n <IndentButton type='indent' osx={osx} />\n <IndentButton type='unindent' osx={osx} />\n </>\n )}\n {activeFeatures.tables && <TableButton />}\n </Flex>\n <Flex container={{ alignItems: 'end' }}>\n {activeFeatures.links && <AnchorButton osx={osx} />}\n {activeFeatures.images && <ImageButton />}\n </Flex>\n {activeFeatures['cut-copy-paste'] && (\n <Flex container={{ alignItems: 'end' }}>{renderCutCopyPaste(editor, t, osx)}</Flex>\n )}\n </Flex>\n );\n};\n\nexport default Toolbar;\n"]}
1	+ {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport type { FC } from 'react';\nimport type { Text } from 'slate';\nimport { useSlate, useFocused, ReactEditor } from 'slate-react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n navigatorIsAvailable\n} from '@pega/cosmos-react-core';\nimport type { TranslationPack, ExcludeStrict } from '@pega/cosmos-react-core';\nimport type { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\n\nimport EditorCommands from '../utils/EditorCommands';\nimport ListCommands from '../utils/ListCommands';\n\nimport ToolbarButton from './ToolbarButton';\nimport type { StyleType, Features } from './Toolbar.types';\nimport TableButton from './TableButton';\nimport AnchorButton from './AnchorButton';\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport IndentButton from './IndentButton';\nimport { getKeyCommand } from './utils';\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(({ sticky, theme }) => {\n return css`\n background-color: ${props => props.theme.components['form-control']['background-color']};\n border-radius: calc(0.25 * ${props => props.theme.base['border-radius']});\n overflow: auto;\n padding: 0.125rem;\n ${sticky &&\n css`\n position: sticky;\n bottom: 0;\n `}\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps {\n features: Features[];\n sticky?: boolean;\n setFocusableBtn: (el: HTMLElement) => void;\n}\n\ntype StyleButtonType = {\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: ExcludeStrict<keyof Text, 'text'>;\n tooltip: string;\n};\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: ReactEditor,\n t: TranslationFunction<TranslationPack>,\n focused: boolean,\n osx: boolean\n) {\n const inlineStyleButtons: StyleButtonType[] = [\n {\n style: 'BOLD',\n text: 'B',\n format: 'bold',\n label: t('rte_bold'),\n tooltip: isMobile\n ? `${t('rte_bold')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`)\n },\n {\n style: 'ITALIC',\n text: 'I',\n format: 'italic',\n label: t('rte_italic'),\n tooltip: isMobile\n ? `${t('rte_italic')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`)\n },\n {\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'line-through',\n label: t('rte_strike_through'),\n tooltip: isMobile\n ? `${t('rte_strike_through')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`)\n }\n ];\n\n return inlineStyleButtons.map(({ format, style, text, label, tooltip }) => {\n return (\n <ToolbarButton\n key={style}\n onMouseDown={e => {\n e.preventDefault();\n if (!focused) {\n ReactEditor.focus(editor);\n }\n setTimeout(() => {\n EditorCommands.toggleFormat(format, editor);\n }, 0);\n }}\n styleType={style}\n active={EditorCommands.isFormatActive(format, editor)}\n tooltip={tooltip}\n label={label}\n >\n {text}\n </ToolbarButton>\n );\n });\n}\n\n// Function that returns the cut, copy and paste buttons\nfunction renderCutCopyPaste(\n editor: ReactEditor,\n t: TranslationFunction<TranslationPack>,\n osx: boolean\n) {\n const CutCopyPasteButtons = [\n {\n text: 'Cut',\n icon: 'scissors',\n label: t('rte_cut'),\n func: () => {\n document.execCommand('cut');\n },\n tooltip: getKeyCommand(osx, ({ ctrl }) => `${t('rte_cut')} (${ctrl}X)`)\n },\n {\n text: 'Copy',\n icon: 'copy',\n label: t('rte_copy'),\n func: () => {\n document.execCommand('copy');\n },\n tooltip: getKeyCommand(osx, ({ ctrl }) => `${t('rte_copy')} (${ctrl}C)`)\n },\n {\n text: 'Paste',\n icon: 'clipboard-data',\n label: t('rte_paste'),\n func: () => {\n navigator.clipboard.readText().then(text => {\n EditorCommands.replaceWithText(editor, editor.selection, text);\n });\n },\n tooltip: getKeyCommand(osx, ({ ctrl }) => `${t('rte_paste')} (${ctrl}V)`)\n }\n ];\n\n return CutCopyPasteButtons.map(btn => {\n return (\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n btn.func();\n }}\n key={btn.text}\n tooltip={btn.tooltip}\n label={btn.label}\n >\n <Icon name={btn.icon} />\n </ToolbarButton>\n );\n });\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n return features.reduce(\n (acc, feature) => {\n return { ...acc, [feature]: true };\n },\n {} as { [F in Features]: boolean }\n );\n}\n\nconst Toolbar: FC<ToolbarProps> = (props: ToolbarProps) => {\n const { features, sticky, setFocusableBtn } = props;\n const editor = useSlate();\n const focused = useFocused();\n const t = useI18n();\n const [osx, setOsx] = useState(false);\n const toolbarRef = useRef<HTMLElement>(null);\n\n useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });\n\n const [activeFeatures, setActiveFeatures] = useState(createActiveFeaturesMap(features));\n\n useEffect(() => {\n const btn = toolbarRef?.current?.querySelector('button');\n if (btn) setFocusableBtn(btn);\n }, [toolbarRef.current]);\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n useEffect(() => {\n if (navigator.appVersion.includes('Mac')) setOsx(true);\n }, []);\n\n return (\n <Flex as={StyledToolbar} sticky={sticky} container={{ justify: 'between' }} ref={toolbarRef}>\n <Flex container={{ alignItems: 'end' }}>\n <TextSelect osx={osx} />\n {activeFeatures['inline-styling'] && renderStyleButtons(editor, t, focused, osx)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n ListCommands.toggleList('unordered-list', editor);\n }}\n active={EditorCommands.isBlockActive('unordered-list', editor)}\n tooltip={\n isMobile\n ? `${t('rte_bulleted_list')}`\n : getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n )\n }\n label={t('rte_bulleted_list')}\n >\n <Icon name='list' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n ListCommands.toggleList('ordered-list', editor);\n }}\n active={EditorCommands.isBlockActive('ordered-list', editor)}\n tooltip={t('rte_numbered_list')}\n label={t('rte_numbered_list')}\n >\n <Icon name='list-number' />\n </ToolbarButton>\n </>\n )}\n {activeFeatures.indentation && (\n <>\n <IndentButton type='indent' osx={osx} />\n <IndentButton type='unindent' osx={osx} />\n </>\n )}\n {activeFeatures.tables && <TableButton />}\n </Flex>\n <Flex container={{ alignItems: 'end' }}>\n {activeFeatures.links && <AnchorButton osx={osx} />}\n {activeFeatures.images && <ImageButton />}\n </Flex>\n {activeFeatures['cut-copy-paste'] && (\n <Flex container={{ alignItems: 'end' }}>{renderCutCopyPaste(editor, t, osx)}</Flex>\n )}\n </Flex>\n );\n};\n\nexport default Toolbar;\n"]}

package/lib/components/RichTextEditor/Toolbar/Toolbar.types.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-export type StyleType = 'BOLD' | 'ITALIC' | 'STRIKE-THROUGH' | 'HEADER-1' | 'HEADER-2';
-export type StyleMapType<T = any> = {
+export type StyleType = 'BOLD' | 'ITALIC' | 'UNDERLINE' | 'STRIKE-THROUGH' | 'SUBSCRIPT' | 'SUPERSCRIPT' | 'HEADER-1' | 'HEADER-2';
+export type StyleMapType<T = unknown> = {
     [S in StyleType]: T;
 };
-export type PartialStyleMapType<T = any> = {
+export type PartialStyleMapType<T = unknown> = {
     [S in StyleType]?: T;
 };
-export type Features = 'lists' | 'headers' | 'inline-styling' | 'images' | 'links' | 'tables' | 'cut-copy-paste' | 'indentation';
+export type Features = 'lists' | 'headers' | 'inline-styling' | 'bold' | 'italic' | 'strikethrough' | 'underline' | 'subscript' | 'superscript' | 'font-family' | 'font-size' | 'text-color' | 'background-color' | 'alignment' | 'images' | 'links' | 'tables' | 'cut-copy-paste' | 'indentation' | 'source-code' | 'ai-rewrite' | 'word-count';
 //# sourceMappingURL=Toolbar.types.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,~~GAAG~~,MAAM,~~GAAG~~,QAAQ,~~GAAG~~,gBAAgB,~~GAAG~~,UAAU,~~GAAG~~,UAAU,CAAC;~~AACvF~~,MAAM,MAAM,YAAY,CAAC,CAAC,GAAG,~~GAAG~~,IAAI;KAAG,CAAC,IAAI,SAAS,GAAG,CAAC;CAAE,CAAC;~~AAC5D~~,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,~~GAAG~~,IAAI;KAAG,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC;CAAE,CAAC;~~AACpE~~,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,SAAS,GACT,gBAAgB,GAChB,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,gBAAgB,GAChB,aAAa,CAAC"}
1	+ {"version":3,"file":"Toolbar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,QAAQ,GACR,WAAW,GACX,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,UAAU,GACV,UAAU,CAAC;AACf,MAAM,MAAM,YAAY,CAAC,CAAC,GAAG,OAAO,IAAI;KAAG,CAAC,IAAI,SAAS,GAAG,CAAC;CAAE,CAAC;AAChE,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;KAAG,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC;CAAE,CAAC;AACxE,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,SAAS,GACT,gBAAgB,GAChB,MAAM,GACN,QAAQ,GACR,eAAe,GACf,WAAW,GACX,WAAW,GACX,aAAa,GACb,aAAa,GACb,WAAW,GACX,YAAY,GACZ,kBAAkB,GAClB,WAAW,GACX,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,YAAY,GACZ,YAAY,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.types.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["export type StyleType = 'BOLD' \| 'ITALIC' \| 'STRIKE-THROUGH' \| 'HEADER-1' \| 'HEADER-2';\nexport type StyleMapType<T = ~~any~~> = { [S in StyleType]: T };\nexport type PartialStyleMapType<T = ~~any~~> = { [S in StyleType]?: T };\nexport type Features =\n \| 'lists'\n \| 'headers'\n \| 'inline-styling'\n \| 'images'\n \| 'links'\n \| 'tables'\n \| 'cut-copy-paste'\n \| 'indentation';\n"]}
1	+ {"version":3,"file":"Toolbar.types.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["export type StyleType =\n \| 'BOLD'\n \| 'ITALIC'\n \| 'UNDERLINE'\n \| 'STRIKE-THROUGH'\n \| 'SUBSCRIPT'\n \| 'SUPERSCRIPT'\n \| 'HEADER-1'\n \| 'HEADER-2';\nexport type StyleMapType<T = unknown> = { [S in StyleType]: T };\nexport type PartialStyleMapType<T = unknown> = { [S in StyleType]?: T };\nexport type Features =\n \| 'lists'\n \| 'headers'\n \| 'inline-styling'\n \| 'bold'\n \| 'italic'\n \| 'strikethrough'\n \| 'underline'\n \| 'subscript'\n \| 'superscript'\n \| 'font-family'\n \| 'font-size'\n \| 'text-color'\n \| 'background-color'\n \| 'alignment'\n \| 'images'\n \| 'links'\n \| 'tables'\n \| 'cut-copy-paste'\n \| 'indentation'\n \| 'source-code'\n \| 'ai-rewrite'\n \| 'word-count';\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ToolbarButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,aAAa,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;~~AAYhE~~,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;CACvD;~~AA+DD~~,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,GAAG,YAAY,~~CAkCvD~~,CAAC;AAEH,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ToolbarButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,aAAa,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAchE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;CACvD;AA8ED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,GAAG,YAAY,CAmCvD,CAAC;AAEH,eAAe,aAAa,CAAC"}

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

@@ -2,48 +2,30 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
-import { defaultThemeProp, Tooltip, tryCatch, useConsolidatedRef, useElement, useI18n } from '@pega/cosmos-react-core';
+import { Button, defaultThemeProp, Tooltip, tryCatch, useConsolidatedRef, useElement, useI18n, calculateFontSize } from '@pega/cosmos-react-core';
 import { useRTEContext } from '../RichTextEditor.context';
-const StyledToolbarButton = styled.button(props => {
-    const { active, theme, styleType } = props;
-    const size = `calc(4 * ${props.theme.base.spacing})`;
+const StyledToolbarButton = styled(Button)(props => {
+    const { $active: active, theme, $styleType: styleType } = props;
+    const size = `calc(3.75 * ${props.theme.base.spacing})`;
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const activeColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
     return css `
-    background-color: transparent;
-    border: none;
     color: ${theme.base.palette['foreground-color']};
-    outline: none;
     display: inline-flex;
     line-height: 1;
     align-items: center;
     justify-content: center;
     height: ${size};
     min-width: ${size};
-    opacity: '0.7';
-    cursor: pointer;
+    padding: 0;
     ${active &&
         css `
       background-color: ${activeColor};
       color: ${theme.base.palette.interactive};
-      opacity: inherit;
-      box-shadow: inset 0 -0.125rem 0 0 ${theme.base.palette.interactive};
-      border-inline: 0.25rem solid transparent;
+      border-bottom: calc(0.25 * ${theme.base.spacing}) solid ${theme.base.palette.interactive};
     `}
-    &:focus {
-      box-shadow: ${theme.base.shadow.focus};
-    }
-    &:hover {
-      opacity: 1;
-    }
-    &:disabled {
-      cursor: not-allowed;
-      box-shadow: none;
-    }
     ${styleType === 'BOLD' &&
         css `
       font-weight: bold;
@@ -57,6 +39,39 @@ const StyledToolbarButton = styled.button(props => {
     ${styleType === 'STRIKE-THROUGH' &&
         css `
       text-decoration: line-through;
+      /* Override text-decoration: none hover style in StyledButton. */
+      &&:hover {
+        text-decoration: line-through;
+      }
+    `}
+    ${styleType === 'UNDERLINE' &&
+        css `
+      text-decoration: underline;
+      /* Override text-decoration: none hover style in StyledButton. */
+      &&:hover {
+        text-decoration: underline;
+      }
+    `}
+    ${styleType === 'SUBSCRIPT' &&
+        css `
+      sub {
+        font-size: ${fontSizes.xxs};
+        vertical-align: sub;
+        line-height: 1;
+      }
+    `}
+    ${styleType === 'SUPERSCRIPT' &&
+        css `
+      sup {
+        font-size: ${fontSizes.xxs};
+        vertical-align: super;
+        line-height: 1;
+      }
     `}
   `;
 });
@@ -66,7 +81,7 @@ const ToolbarButton = forwardRef(function ToolbarButton({ tooltip, active, style
     const [el, setEl] = useElement();
     const toolBarRef = useConsolidatedRef(setEl, ref);
     const t = useI18n();
-    return (_jsxs(_Fragment, { children: [_jsx(StyledToolbarButton, { active: active, styleType: styleType, ref: toolBarRef, disabled: contextDisabled || disabled, tabIndex: -1, onKeyPress: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(StyledToolbarButton, { variant: 'simple', "$active": active, "$styleType": styleType, ref: toolBarRef, disabled: contextDisabled || disabled, "data-toolbar-item": 'true', onKeyDown: (e) => {
                     if (e.key === 'Enter') {
                         onMouseDown?.(e);
                     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ToolbarButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EACL,gBAAgB,EAChB,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,OAAO,~~EACR~~,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAa1D,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,~~CAAqB~~,KAAK,CAAC,EAAE;~~IACpE~~,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;~~IAC3C~~,MAAM,IAAI,GAAG,~~YAAY~~,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC;~~IACrD~~,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CACpF,CAAC;IACF,OAAO,GAAG,CAAA~~;;;aAGC~~,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC~~;;;;;;cAMrC~~,IAAI;iBACD,IAAI~~;;;;MAIf~~,MAAM;QACR,GAAG,CAAA;0BACmB,WAAW;eACtB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW~~;;0CAEH~~,KAAK,CAAC,IAAI,CAAC,OAAO,~~CAAC,~~WAAW~~;;KAEnE;;;oBAGe~~,KAAK,CAAC,IAAI,CAAC,~~MAAM~~,CAAC,~~KAAK;;;;;;;;;;;;MAYrC~~,SAAS,KAAK,MAAM;QACtB,GAAG,CAAA;;KAEF;;MAEC,SAAS,KAAK,QAAQ;QACxB,GAAG,CAAA;;KAEF;;MAEC,SAAS,KAAK,gBAAgB;QAChC,GAAG,CAAA;;~~KAEF~~;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,aAAa,GAA0C,UAAU,CAAC,SAAS,aAAa,CAC5F,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,EAC1E,GAA2B;IAE3B,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,aAAa,EAAE,CAAC;IACtD,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IACjC,MAAM,UAAU,GAAG,kBAAkB,CAAoB,KAAK,EAAE,GAAG,CAAC,CAAC;IACrE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,8BACE,KAAC,mBAAmB,IAClB,~~MAAM~~,~~EAAE~~,~~MAAM~~,~~EACd~~,~~SAAS~~,~~EAAE~~,SAAS,~~EACpB~~,GAAG,EAAE,UAAU,EACf,QAAQ,EAAE,eAAe,IAAI,QAAQ,~~EACrC~~,~~QAAQ~~,~~EAAE~~,~~CAAC~~,~~CAAC,EACZ,UAAU,~~EAAE,CAAC,CAAmC,EAAE,EAAE;~~oBAClD~~,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;oBACnB,CAAC;gBACH,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,QAAQ,gBACD,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,kBAC5C,MAAM,KAChB,SAAS,GACb,EACD,EAAE,IAAI,OAAO,IAAI,CAChB,KAAC,OAAO,IAAC,MAAM,EAAE,EAAE,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACnD,OAAO,GACA,CACX,IACA,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, KeyboardEvent, MouseEvent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n defaultThemeProp,\n Tooltip,\n tryCatch,\n useConsolidatedRef,\n useElement,\n useI18n\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport type { StyleType } from './Toolbar.types';\n\nexport interface ToolBarButtonProps {\n tooltip?: string;\n active?: boolean;\n styleType?: StyleType;\n disabled?: boolean;\n label?: string;\n onMouseDown?: (e: MouseEvent \| KeyboardEvent) => void;\n}\n\nconst StyledToolbarButton = styled~~.button~~<~~ToolBarButtonProps~~>(props => {\n const { active, theme, styleType } = props;\n const size = `calc(4 * ${props.theme.base.spacing})`;\n const activeColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n return css`\n ~~background-~~color: ~~transparent;\n border: none;\n color:~~ ${theme.base.palette['foreground-color']};\n ~~outline: none;\n~~ display: inline-flex;\n line-height: 1;\n align-items: center;\n justify-content: center;\n height: ${size};\n min-width: ${size};\n ~~opacity~~: '0~~.7'~~;\n ~~cursor: pointer;\n~~\n ${active &&\n css`\n background-color: ${activeColor};\n color: ${theme.base.palette.interactive};\n ~~opacity: inherit;\n box~~-~~shadow~~: ~~inset~~ 0 -0.~~125rem~~ 0 0 ${theme.base.palette.interactive};\n ~~border-inline: 0.25rem solid transparent;\n~~ `}\n\n ~~&:focus~~ {\n ~~box~~-~~shadow~~: ~~${theme.base.shadow.focus}~~;\n }\n\n ~~&:hover~~ {\n ~~opacity~~: 1;\n }\n\n ~~&:disabled~~ {\n ~~cursor~~: ~~not~~-~~allowed~~;\n ~~box~~-~~shadow~~: none;\n }\n\n ${styleType === '~~BOLD~~' &&\n css`\n ~~font~~-~~weight~~: ~~bold~~;\n `}\n\n ${styleType === '~~ITALIC~~' &&\n css`\n font-~~style~~: ~~italic~~;\n `}\n\n ${styleType === '~~STRIKE-THROUGH~~' &&\n css`\n ~~text~~-~~decoration~~: line-~~through~~;\n `}\n `;\n});\n\nStyledToolbarButton.defaultProps = defaultThemeProp;\n\nconst ToolbarButton: FC<ToolBarButtonProps & ForwardProps> = forwardRef(function ToolbarButton(\n { tooltip, active, styleType, disabled, label, onMouseDown, ...restProps },\n ref: Ref<HTMLButtonElement>\n) {\n const { disabled: contextDisabled } = useRTEContext();\n const [el, setEl] = useElement();\n const toolBarRef = useConsolidatedRef<HTMLButtonElement>(setEl, ref);\n const t = useI18n();\n return (\n <>\n <StyledToolbarButton\n active={active}\n styleType={styleType}\n ref={toolBarRef}\n disabled={contextDisabled \|\| disabled}\n ~~tabIndex~~=~~{-1}~~\n ~~onKeyPress~~={(e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter') {\n onMouseDown?.(e);\n }\n }}\n onMouseDown={onMouseDown}\n type='button'\n aria-label={`${label}${active ? ` - ${t('active')}` : ''}`}\n aria-pressed={active}\n {...restProps}\n />\n {el && tooltip && (\n <Tooltip target={el} showDelay='none' hideDelay='none'>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default ToolbarButton;\n"]}
1	+ {"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ToolbarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, KeyboardEvent, MouseEvent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n Button,\n defaultThemeProp,\n Tooltip,\n tryCatch,\n useConsolidatedRef,\n useElement,\n useI18n,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport type { StyleType } from './Toolbar.types';\n\nexport interface ToolBarButtonProps {\n tooltip?: string;\n active?: boolean;\n styleType?: StyleType;\n disabled?: boolean;\n label?: string;\n onMouseDown?: (e: MouseEvent \| KeyboardEvent) => void;\n}\n\nconst StyledToolbarButton = styled(Button)<{ $active?: boolean; $styleType?: StyleType }>(props => {\n const { $active: active, theme, $styleType: styleType } = props;\n const size = `calc(3.75 * ${props.theme.base.spacing})`;\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const activeColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n line-height: 1;\n align-items: center;\n justify-content: center;\n height: ${size};\n min-width: ${size};\n padding: 0;\n\n ${active &&\n css`\n background-color: ${activeColor};\n color: ${theme.base.palette.interactive};\n border-bottom: calc(0.25 * ${theme.base.spacing}) solid ${theme.base.palette.interactive};\n `}\n\n ${styleType === 'BOLD' &&\n css`\n font-weight: bold;\n `}\n\n ${styleType === 'ITALIC' &&\n css`\n font-style: italic;\n `}\n\n ${styleType === 'STRIKE-THROUGH' &&\n css`\n text-decoration: line-through;\n\n /* Override text-decoration: none hover style in StyledButton. /\n &&:hover {\n text-decoration: line-through;\n }\n `}\n\n ${styleType === 'UNDERLINE' &&\n css`\n text-decoration: underline;\n\n / Override text-decoration: none hover style in StyledButton. */\n &&:hover {\n text-decoration: underline;\n }\n `}\n\n ${styleType === 'SUBSCRIPT' &&\n css`\n sub {\n font-size: ${fontSizes.xxs};\n vertical-align: sub;\n line-height: 1;\n }\n `}\n\n ${styleType === 'SUPERSCRIPT' &&\n css`\n sup {\n font-size: ${fontSizes.xxs};\n vertical-align: super;\n line-height: 1;\n }\n `}\n `;\n});\n\nStyledToolbarButton.defaultProps = defaultThemeProp;\n\nconst ToolbarButton: FC<ToolBarButtonProps & ForwardProps> = forwardRef(function ToolbarButton(\n { tooltip, active, styleType, disabled, label, onMouseDown, ...restProps },\n ref: Ref<HTMLButtonElement>\n) {\n const { disabled: contextDisabled } = useRTEContext();\n const [el, setEl] = useElement();\n const toolBarRef = useConsolidatedRef<HTMLButtonElement>(setEl, ref);\n const t = useI18n();\n return (\n <>\n <StyledToolbarButton\n variant='simple'\n $active={active}\n $styleType={styleType}\n ref={toolBarRef}\n disabled={contextDisabled \|\| disabled}\n data-toolbar-item='true'\n onKeyDown={(e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter') {\n onMouseDown?.(e);\n }\n }}\n onMouseDown={onMouseDown}\n type='button'\n aria-label={`${label}${active ? ` - ${t('active')}` : ''}`}\n aria-pressed={active}\n {...restProps}\n />\n {el && tooltip && (\n <Tooltip target={el} showDelay='none' hideDelay='none'>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default ToolbarButton;\n"]}

package/lib/components/RichTextEditor/utils/htmlConverter.d.ts CHANGED Viewed

@@ -11,7 +11,9 @@ export declare const htmlToSlateMap: {
     readonly table: "table";
     readonly tr: "table-row";
     readonly td: "table-cell";
+    readonly th: "table-cell";
     readonly tbody: "table-body";
+    readonly thead: "table-head";
     readonly p: "paragraph";
     readonly img: "image";
     readonly b: "skip";

package/lib/components/RichTextEditor/utils/htmlConverter.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"htmlConverter.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/htmlConverter.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAYnE,eAAO,MAAM,cAAc~~;;;;;;;;;;;;;;;;;;CAkBjB~~,CAAC;AAGX,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;~~AA8IX~~,eAAO,MAAM,WAAW,GACtB,MAAM,MAAM,EACZ,uBAAuB,mBAAmB,CAAC,sBAAsB,CAAC,KACjE,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAe9B,CAAC"}
1	+ {"version":3,"file":"htmlConverter.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/htmlConverter.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAYnE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;CAoBjB,CAAC;AAGX,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AAwJX,eAAO,MAAM,WAAW,GACtB,MAAM,MAAM,EACZ,uBAAuB,mBAAmB,CAAC,sBAAsB,CAAC,KACjE,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAe9B,CAAC"}

package/lib/components/RichTextEditor/utils/htmlConverter.js CHANGED Viewed

@@ -15,7 +15,9 @@ export const htmlToSlateMap = {
     table: 'table',
     tr: 'table-row',
     td: 'table-cell',
+    th: 'table-cell',
     tbody: 'table-body',
+    thead: 'table-head',
     p: 'paragraph',
     img: 'image',
     b: 'skip',
@@ -60,6 +62,15 @@ const getAttributes = (node) => {
                 }
                 return attrsObj;
             }
+            case 'td':
+            case 'th': {
+                const alignAttr = node.attrs.find(attr => attr.name === 'align');
+                const alignment = alignAttr?.value.toLowerCase();
+                if (alignment === 'left' || alignment === 'center' || alignment === 'right') {
+                    return { align: alignment };
+                }
+                return {};
+            }
             default:
                 return {};
         }
@@ -111,6 +122,7 @@ const getSlateNode = (node, parentNode, interactionRenderers) => {
     const nodeObj = {
         type: type || 'paragraph',
         ...attributes,
+        ...(node.nodeName === 'th' && { isHeaderCell: true }),
         children: [{ text: '' }]
     };
     return { node: nodeObj };

package/lib/components/RichTextEditor/utils/htmlConverter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"htmlConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/htmlConverter.ts"],"names":[],"mappings":"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","sourcesContent":["import { parse } from 'parse5';\n// Use namespaced types to more easily differentiate between similar types (ie, ChildNode from parse5 and Node from slate).\nimport type * as parse5 from 'parse5';\nimport type * as slate from 'slate';\n\nimport type { RichTextViewerProps } from '../RichTextViewer.types';\n\nimport parseTextToCustomSlateNodes from './interactionRenderer';\n\nconst checkElement = (node: parse5.ChildNode \| undefined): node is parse5.Element =>\n !!node && node.nodeName !== '#text' && node.nodeName !== '#comment';\nconst checkTextNode = (node: parse5.ChildNode \| undefined): node is parse5.TextNode =>\n !!node && node.nodeName === '#text';\nconst checkComment = (node: parse5.ChildNode \| undefined): node is parse5.TextNode =>\n !!node && node.nodeName === '#comment';\n\n// Mapping of HTML tags to slate types. b, del, i, and a tags are labeled as skip because they need special logic\nexport const htmlToSlateMap = {\n h1: 'heading-1',\n h2: 'heading-2',\n h3: 'heading-3',\n h4: 'heading-4',\n ul: 'unordered-list',\n ol: 'ordered-list',\n li: 'list-item',\n table: 'table',\n tr: 'table-row',\n td: 'table-cell',\n tbody: 'table-body',\n p: 'paragraph',\n img: 'image',\n b: 'skip',\n del: 'skip',\n i: 'skip',\n a: 'skip'\n} as const;\n\n// Inline HTML tags to slate types\nexport const inlineHtmlToStyleMap = {\n b: 'bold',\n del: 'line-through',\n i: 'italic',\n a: 'href'\n} as const;\n\n// Maps HTML Attributes to an object. Right now this is specifically used for list items.\n\ninterface InlineParentNodes extends slate.PegaCustom.CustomElement {\n href?: string;\n italic?: boolean;\n bold?: boolean;\n text?: string;\n}\n\nconst getAttributes = (node: parse5.ChildNode) => {\n if (checkElement(node) && node.attrs.length) {\n switch (node.nodeName) {\n case 'li':\n return Object.fromEntries(\n node.attrs.flatMap(attr => {\n // eslint-disable-next-line sonarjs/no-nested-switch\n switch (attr.name) {\n case 'data-id':\n return [['id', attr.value]];\n case 'data-parent-id':\n return [['parentId', attr.value]];\n case 'data-level':\n return [['level', attr.value]];\n case 'data-order':\n return [['order', attr.value]];\n default:\n return [];\n }\n })\n );\n case 'img': {\n const imgAttrs = ['src', 'alt'];\n const attrsObj: { [key: string]: string } = {};\n for (let i = 0; i < node.attrs.length; i += 1) {\n const { name, value } = node.attrs[i];\n if (imgAttrs.includes(name)) {\n attrsObj[name] = value;\n }\n }\n return attrsObj;\n }\n default:\n return {};\n }\n }\n return {};\n};\n\nconst getSlateNode = (\n node: parse5.ChildNode,\n parentNode?: slate.Element \| slate.Text,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): { node: slate.Element \| slate.Text; collapseNext?: boolean } => {\n if (checkTextNode(node)) {\n if (node.parentNode.nodeName === 'body') {\n return {\n node: {\n type: 'paragraph',\n children: [{ text: node.value }]\n }\n };\n }\n // Make sure to spread any parent style attributes for slates text nodes\n const children = parseTextToCustomSlateNodes(\n node.value,\n interactionRenderers\n ) as slate.PegaCustom.CustomElement[];\n if (children.length === 1) {\n const tempParentNode = parentNode as InlineParentNodes;\n if (children[0]?.type === 'custom') {\n delete tempParentNode?.text;\n }\n\n return { node: { ...tempParentNode, ...children[0] } as slate.Text };\n }\n return {\n node: {\n ...parentNode,\n children\n } as slate.Element\n };\n }\n\n const type = htmlToSlateMap[node.nodeName as keyof typeof htmlToSlateMap];\n // If the type of the HTML tag is an inline (b, i, del, a) we want to let the recursive function know\n // that it needs to collapse the next node, also we are setting the correct style mark to true\n if (type === 'skip') {\n const style = inlineHtmlToStyleMap[node.nodeName as 'b' \| 'i' \| 'del' \| 'a'];\n let value: string \| boolean = true;\n if (node.nodeName === 'a') {\n const hrefObj = node.attrs?.find(attr => attr.name === 'href');\n value = hrefObj ? hrefObj.value : value;\n }\n return {\n node: { ...parentNode, [style]: value, text: '' } as slate.Text,\n collapseNext: true\n };\n }\n\n const attributes = getAttributes(node);\n const nodeObj = {\n type: type \|\| 'paragraph',\n ...attributes,\n children: [{ text: '' }]\n } as slate.Element;\n return { node: nodeObj };\n};\n\n// Recursive function that will convert Parse5Nodes into Slate compatible nodes\nconst convertNodes = (\n nodes: parse5.ChildNode[],\n parentNode?: slate.Element \| slate.Text,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): (slate.Element \| slate.Text)[] => {\n const returnNodes: (slate.Element \| slate.Text)[] = [];\n nodes.forEach(node => {\n const { node: slateNode, collapseNext } = getSlateNode(node, parentNode, interactionRenderers);\n if (!checkComment(node)) {\n let returnNode = slateNode;\n if (checkElement(node) && node.childNodes && node.childNodes.length) {\n if (collapseNext) {\n returnNode = convertNodes(node.childNodes, slateNode, interactionRenderers)[0];\n } else {\n (slateNode as slate.Element).children = convertNodes(\n node.childNodes,\n undefined,\n interactionRenderers\n );\n returnNode = slateNode;\n }\n }\n\n returnNodes.push(returnNode);\n }\n });\n return returnNodes;\n};\n\nconst defaultValue = [{ type: 'paragraph', children: [{ text: '' }] }] satisfies slate.Element[];\n\nexport const convertHtml = (\n html: string,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): (slate.Element \| slate.Text)[] => {\n // Wrap the html in another body in case the value given has no body\n const doc = parse(`<body>${html.replace('\\n', '')}</body>`);\n let nodesToConvert = doc.childNodes;\n // If we have a root tag\n if (doc.childNodes.length === 1) {\n const root = doc.childNodes[0];\n if (!checkElement(root)) return defaultValue;\n\n const body = root.childNodes[1];\n if (!checkElement(body)) return defaultValue;\n\n nodesToConvert = body.childNodes;\n }\n return convertNodes(nodesToConvert, undefined, interactionRenderers);\n};\n"]}
1	+ {"version":3,"file":"htmlConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/htmlConverter.ts"],"names":[],"mappings":"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","sourcesContent":["import { parse } from 'parse5';\n// Use namespaced types to more easily differentiate between similar types (ie, ChildNode from parse5 and Node from slate).\nimport type * as parse5 from 'parse5';\nimport type * as slate from 'slate';\n\nimport type { RichTextViewerProps } from '../RichTextViewer.types';\n\nimport parseTextToCustomSlateNodes from './interactionRenderer';\n\nconst checkElement = (node: parse5.ChildNode \| undefined): node is parse5.Element =>\n !!node && node.nodeName !== '#text' && node.nodeName !== '#comment';\nconst checkTextNode = (node: parse5.ChildNode \| undefined): node is parse5.TextNode =>\n !!node && node.nodeName === '#text';\nconst checkComment = (node: parse5.ChildNode \| undefined): node is parse5.TextNode =>\n !!node && node.nodeName === '#comment';\n\n// Mapping of HTML tags to slate types. b, del, i, and a tags are labeled as skip because they need special logic\nexport const htmlToSlateMap = {\n h1: 'heading-1',\n h2: 'heading-2',\n h3: 'heading-3',\n h4: 'heading-4',\n ul: 'unordered-list',\n ol: 'ordered-list',\n li: 'list-item',\n table: 'table',\n tr: 'table-row',\n td: 'table-cell',\n th: 'table-cell',\n tbody: 'table-body',\n thead: 'table-head',\n p: 'paragraph',\n img: 'image',\n b: 'skip',\n del: 'skip',\n i: 'skip',\n a: 'skip'\n} as const;\n\n// Inline HTML tags to slate types\nexport const inlineHtmlToStyleMap = {\n b: 'bold',\n del: 'line-through',\n i: 'italic',\n a: 'href'\n} as const;\n\n// Maps HTML Attributes to an object. Right now this is specifically used for list items.\n\ninterface InlineParentNodes extends slate.PegaCustom.CustomElement {\n href?: string;\n italic?: boolean;\n bold?: boolean;\n text?: string;\n}\n\nconst getAttributes = (node: parse5.ChildNode) => {\n if (checkElement(node) && node.attrs.length) {\n switch (node.nodeName) {\n case 'li':\n return Object.fromEntries(\n node.attrs.flatMap(attr => {\n // eslint-disable-next-line sonarjs/no-nested-switch\n switch (attr.name) {\n case 'data-id':\n return [['id', attr.value]];\n case 'data-parent-id':\n return [['parentId', attr.value]];\n case 'data-level':\n return [['level', attr.value]];\n case 'data-order':\n return [['order', attr.value]];\n default:\n return [];\n }\n })\n );\n case 'img': {\n const imgAttrs = ['src', 'alt'];\n const attrsObj: { [key: string]: string } = {};\n for (let i = 0; i < node.attrs.length; i += 1) {\n const { name, value } = node.attrs[i];\n if (imgAttrs.includes(name)) {\n attrsObj[name] = value;\n }\n }\n return attrsObj;\n }\n case 'td':\n case 'th': {\n const alignAttr = node.attrs.find(attr => attr.name === 'align');\n const alignment = alignAttr?.value.toLowerCase();\n if (alignment === 'left' \|\| alignment === 'center' \|\| alignment === 'right') {\n return { align: alignment };\n }\n return {};\n }\n default:\n return {};\n }\n }\n return {};\n};\n\nconst getSlateNode = (\n node: parse5.ChildNode,\n parentNode?: slate.Element \| slate.Text,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): { node: slate.Element \| slate.Text; collapseNext?: boolean } => {\n if (checkTextNode(node)) {\n if (node.parentNode.nodeName === 'body') {\n return {\n node: {\n type: 'paragraph',\n children: [{ text: node.value }]\n }\n };\n }\n // Make sure to spread any parent style attributes for slates text nodes\n const children = parseTextToCustomSlateNodes(\n node.value,\n interactionRenderers\n ) as slate.PegaCustom.CustomElement[];\n if (children.length === 1) {\n const tempParentNode = parentNode as InlineParentNodes;\n if (children[0]?.type === 'custom') {\n delete tempParentNode?.text;\n }\n\n return { node: { ...tempParentNode, ...children[0] } as slate.Text };\n }\n return {\n node: {\n ...parentNode,\n children\n } as slate.Element\n };\n }\n\n const type = htmlToSlateMap[node.nodeName as keyof typeof htmlToSlateMap];\n // If the type of the HTML tag is an inline (b, i, del, a) we want to let the recursive function know\n // that it needs to collapse the next node, also we are setting the correct style mark to true\n if (type === 'skip') {\n const style = inlineHtmlToStyleMap[node.nodeName as 'b' \| 'i' \| 'del' \| 'a'];\n let value: string \| boolean = true;\n if (node.nodeName === 'a') {\n const hrefObj = node.attrs?.find(attr => attr.name === 'href');\n value = hrefObj ? hrefObj.value : value;\n }\n return {\n node: { ...parentNode, [style]: value, text: '' } as slate.Text,\n collapseNext: true\n };\n }\n\n const attributes = getAttributes(node);\n const nodeObj = {\n type: type \|\| 'paragraph',\n ...attributes,\n ...(node.nodeName === 'th' && { isHeaderCell: true }),\n children: [{ text: '' }]\n } as slate.Element;\n return { node: nodeObj };\n};\n\n// Recursive function that will convert Parse5Nodes into Slate compatible nodes\nconst convertNodes = (\n nodes: parse5.ChildNode[],\n parentNode?: slate.Element \| slate.Text,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): (slate.Element \| slate.Text)[] => {\n const returnNodes: (slate.Element \| slate.Text)[] = [];\n nodes.forEach(node => {\n const { node: slateNode, collapseNext } = getSlateNode(node, parentNode, interactionRenderers);\n if (!checkComment(node)) {\n let returnNode = slateNode;\n if (checkElement(node) && node.childNodes && node.childNodes.length) {\n if (collapseNext) {\n returnNode = convertNodes(node.childNodes, slateNode, interactionRenderers)[0];\n } else {\n (slateNode as slate.Element).children = convertNodes(\n node.childNodes,\n undefined,\n interactionRenderers\n );\n returnNode = slateNode;\n }\n }\n\n returnNodes.push(returnNode);\n }\n });\n return returnNodes;\n};\n\nconst defaultValue = [{ type: 'paragraph', children: [{ text: '' }] }] satisfies slate.Element[];\n\nexport const convertHtml = (\n html: string,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): (slate.Element \| slate.Text)[] => {\n // Wrap the html in another body in case the value given has no body\n const doc = parse(`<body>${html.replace('\\n', '')}</body>`);\n let nodesToConvert = doc.childNodes;\n // If we have a root tag\n if (doc.childNodes.length === 1) {\n const root = doc.childNodes[0];\n if (!checkElement(root)) return defaultValue;\n\n const body = root.childNodes[1];\n if (!checkElement(body)) return defaultValue;\n\n nodesToConvert = body.childNodes;\n }\n return convertNodes(nodesToConvert, undefined, interactionRenderers);\n};\n"]}

package/lib/components/RichTextEditor/utils/interactionRenderer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interactionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/interactionRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,UAAU,UAAW,SAAQ,oBAAoB;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,UAAU,gBAAiB,SAAQ,oBAAoB;IACrD,IAAI,EAAE,MAAM,CAAC;CACd;AAKD,eAAO,MAAM,UAAU,GAAI,QAAQ,gBAAgB,iBAclD,CAAC;AAGF,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAc3E,CAAC;AAGF,QAAA,MAAM,2BAA2B,GAC/B,MAAM,MAAM,EACZ,YAAY,oBAAoB,EAAE,KACjC,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,~~EAuG9B~~,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
1	+ {"version":3,"file":"interactionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/interactionRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,UAAU,UAAW,SAAQ,oBAAoB;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,UAAU,gBAAiB,SAAQ,oBAAoB;IACrD,IAAI,EAAE,MAAM,CAAC;CACd;AAKD,eAAO,MAAM,UAAU,GAAI,QAAQ,gBAAgB,iBAclD,CAAC;AAGF,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAc3E,CAAC;AAGF,QAAA,MAAM,2BAA2B,GAC/B,MAAM,MAAM,EACZ,YAAY,oBAAoB,EAAE,KACjC,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EA4G9B,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/lib/components/RichTextEditor/utils/interactionRenderer.js CHANGED Viewed

@@ -41,10 +41,21 @@ const parseTextToCustomSlateNodes = (text, renderers) => {
     }
     // Sorts the matches based on the start positions of the matches
     positions.sort((a, b) => a.start - b.start);
+    const validPositions = positions.filter(pos => {
+        if (pos.type === 'builtin-url' && pos.match.groups) {
+            const { url, protocol, tld } = pos.match.groups;
+            const normalizedUrl = protocol ? url : `https://${url}`;
+            return URL.canParse(normalizedUrl) && TLDs.includes(tld);
+        }
+        return true;
+    });
+    if (validPositions.length === 0) {
+        return [{ text }];
+    }
     const nodes = [];
     // Use the regex match positions to slice the text into the correct text nodes and other custom nodes
     let lastPos;
-    positions.forEach((pos, i) => {
+    validPositions.forEach((pos, i) => {
         // If the first regex match isn't at the start of the text node,
         // slice the text node up to the first match and insert it into the nodes array
         if (i === 0 && pos.start !== 0) {
@@ -66,24 +77,14 @@ const parseTextToCustomSlateNodes = (text, renderers) => {
         }
         if (pos.type === 'builtin-url' && pos.match.groups) {
             const { leadingChar, url } = pos.match.groups;
-            try {
-                // Check for valid URL since the regex isn't exhaustive.
-                const { href } = new URL(pos.match.groups.protocol ? url : `https://${url}`);
-                if (!TLDs.includes(pos.match.groups.tld)) {
-                    throw new Error('Invalid URL. Skipping formatting.');
-                }
-                if (leadingChar) {
-                    nodes.push({ text: leadingChar });
-                }
-                nodes.push({
-                    text: url,
-                    href
-                });
-            }
-            catch {
-                // Invalid URL, just render as text.
-                nodes.push({ text: pos.match[0] });
+            const { href } = new URL(pos.match.groups.protocol ? url : `https://${url}`);
+            if (leadingChar) {
+                nodes.push({ text: leadingChar });
             }
+            nodes.push({
+                text: url,
+                href
+            });
         }
         else if (pos.xmlElement) {
             const xmlAttributes = getXMLAttributes(pos.match[0]);
@@ -119,7 +120,7 @@ const parseTextToCustomSlateNodes = (text, renderers) => {
         }
         // If we are at the end of the positions array, and there's still text left
         // slice the text and add it as a new text node
-        if (i === positions.length - 1 && pos.end < text.length) {
+        if (i === validPositions.length - 1 && pos.end < text.length) {
             nodes.push({
                 text: text.slice(pos.end, text.length)
             });

package/lib/components/RichTextEditor/utils/interactionRenderer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interactionRenderer.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/interactionRenderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAcvC,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;AAE/B,oEAAoE;AACpE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAwB,EAAE,EAAE;IACrD,MAAM,YAAY,GAAiB,EAAE,CAAC;IACtC,IAAI,GAAG,CAAC;IACR,0CAA0C;IAC1C,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;QACrD,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QACxB,YAAY,CAAC,IAAI,CAAC;YAChB,KAAK;YACL,GAAG,EAAE,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM;YAC1B,KAAK,EAAE,GAAG;YACV,GAAG,MAAM;SACV,CAAC,CAAC;IACL,CAAC;IACD,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC;AAEF,sEAAsE;AACtE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAe,EAAsC,EAAE;IACtF,MAAM,QAAQ,GAAG,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IACpE,IAAI,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC;QAAE,OAAO,SAAS,CAAC;IAC5D,MAAM,UAAU,GAA2B,EAAE,CAAC;IAE9C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;QACvE,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACzD,IAAI,IAAI,EAAE,CAAC;YACT,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACrC,CAAC;IACH,CAAC;IACD,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,wCAAwC;AACxC,MAAM,2BAA2B,GAAG,CAClC,IAAY,EACZ,SAAkC,EACF,EAAE;IAClC,iEAAiE;IACjE,MAAM,SAAS,GACb,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAE1E,uCAAuC;IACvC,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3B,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACpB,CAAC;IAED,gEAAgE;IAChE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAmC,EAAE,CAAC;IAEjD,qGAAqG;IACrG,IAAI,OAAmB,CAAC;IACxB,~~SAAS~~,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;~~QAC3B~~,gEAAgE;QAChE,+EAA+E;QAE/E,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,KAAK,KAAK,CAAC,EAAE,CAAC;YAC/B,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC;aAC/B,CAAC,CAAC;QACL,CAAC;QAED,yEAAyE;QACzE,uDAAuD;QACvD,IAAI,OAAO,IAAI,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC;YACvC,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC;aACzC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACnB,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI,EAAE,GAAG;aACV,CAAC,CAAC;QACL,CAAC;QAED,IAAI,GAAG,CAAC,IAAI,KAAK,aAAa,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACnD,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC;YAE9C,~~IAAI,CAAC;gBACH,wDAAwD;gBACxD,~~MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC;~~gBAC7E~~,IAAI,~~CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;oBACzC,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;gBACvD,CAAC;gBAED,IAAI,~~WAAW,EAAE,CAAC;~~oBAChB~~,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;~~gBACpC~~,CAAC;~~gBAED~~,KAAK,CAAC,IAAI,CAAC;~~oBACT~~,IAAI,EAAE,GAAG;~~oBACT~~,IAAI;~~iBACL~~,CAAC,CAAC;~~YACL~~,CAAC;~~YAAC,MAAM,CAAC;gBACP,oCAAoC;gBACpC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;~~aAAM,IAAI,GAAG,CAAC,UAAU,EAAE,CAAC;YAC1B,MAAM,aAAa,GAAG,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAErD,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,oCAAoC;gBACpC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACrC,CAAC;iBAAM,IAAI,GAAG,CAAC,SAAS,EAAE,CAAC;gBACzB,KAAK,CAAC,IAAI,CAAC;oBACT,IAAI,EAAE,QAAQ;oBACd,SAAS,EAAE,GAAG,CAAC,SAAS;oBACxB,OAAO,EAAE,aAAa;oBACtB,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;iBACzB,CAAC,CAAC;YACL,CAAC;iBAAM,IAAI,GAAG,CAAC,mBAAmB,EAAE,CAAC;gBACnC,MAAM,YAAY,GAAG,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC3E,IAAI,YAAY,IAAI,YAAY,CAAC,IAAI,EAAE,CAAC;oBACtC,KAAK,CAAC,IAAI,CAAC;wBACT,IAAI,EAAE,YAAY,CAAC,IAAI;wBACvB,YAAY,EAAE;4BACZ,QAAQ,EAAE,YAAY,CAAC,QAAQ;4BAC/B,SAAS,EAAE,YAAY,CAAC,SAAS;4BACjC,KAAK,EAAE,YAAY,CAAC,KAAK;4BACzB,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS;yBACxB;qBACF,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBACrC,CAAC;YACH,CAAC;QACH,CAAC;QAED,2EAA2E;QAC3E,+CAA+C;QAC/C,IAAI,CAAC,KAAK,~~SAAS~~,CAAC,MAAM,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;~~YACxD~~,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC;aACvC,CAAC,CAAC;QACL,CAAC;QACD,OAAO,GAAG,GAAG,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;AACnD,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC","sourcesContent":["import type * as slate from 'slate';\nimport { TLDs } from 'global-tld-list';\n\nimport type { InteractionRenderers } from '../RichTextViewer.types';\n\ninterface RegexMatch extends InteractionRenderers {\n start: number;\n end: number;\n match: RegExpExecArray;\n}\n\ninterface CheckRegexParams extends InteractionRenderers {\n text: string;\n}\n\nconst parser = new DOMParser();\n\n// Checks a string for regex matches and returns an array of matches\nexport const checkRegex = (params: CheckRegexParams) => {\n const regexMatches: RegexMatch[] = [];\n let res;\n // eslint-disable-next-line no-cond-assign\n while ((res = params.regexPattern.exec(params.text))) {\n const start = res.index;\n regexMatches.push({\n start,\n end: start + res[0].length,\n match: res,\n ...params\n });\n }\n return regexMatches;\n};\n\n// Extracts all properties from an xml element represented as a string\nexport const getXMLAttributes = (element: string): Record<string, string> \| undefined => {\n const document = parser.parseFromString(element, 'application/xml');\n if (document.querySelector('parsererror')) return undefined;\n const attributes: Record<string, string> = {};\n\n for (let i = 0; i < document.documentElement.attributes.length; i += 1) {\n const attr = document.documentElement.attributes.item(i);\n if (attr) {\n attributes[attr.name] = attr.value;\n }\n }\n attributes.rawText = element;\n\n return attributes;\n};\n\n// Parses text node to custom slate node\nconst parseTextToCustomSlateNodes = (\n text: string,\n renderers?: InteractionRenderers[]\n): (slate.Element \| slate.Text)[] => {\n // Runs through an array of custom renderers and gets the matches\n const positions: RegexMatch[] =\n renderers?.flatMap(renderer => checkRegex({ text, ...renderer })) \|\| [];\n\n // Early exit when no matched positions\n if (positions.length === 0) {\n return [{ text }];\n }\n\n // Sorts the matches based on the start positions of the matches\n positions.sort((a, b) => a.start - b.start);\n\n const nodes: (slate.Element \| slate.Text)[] = [];\n\n // Use the regex match positions to slice the text into the correct text nodes and other custom nodes\n let lastPos: RegexMatch;\n ~~positions~~.forEach((pos, i) => {\n // If the first regex match isn't at the start of the text node,\n // slice the text node up to the first match and insert it into the nodes array\n\n if (i === 0 && pos.start !== 0) {\n nodes.push({\n text: text.slice(i, pos.start)\n });\n }\n\n // If there was a last position, slice the text between the last position\n // and the new position to insert it as a new text node\n if (lastPos && lastPos.end < pos.start) {\n nodes.push({\n text: text.slice(lastPos.end, pos.start)\n });\n } else if (i !== 0) {\n nodes.push({\n text: ' '\n });\n }\n\n if (pos.type === 'builtin-url' && pos.match.groups) {\n const { leadingChar, url } = pos.match.groups;\n\n ~~try {\n // Check for valid URL since the regex isn't exhaustive.\n~~ const { href } = new URL(pos.match.groups.protocol ? url : `https://${url}`);\n ~~if (!TLDs.includes(pos.match.groups.tld)) {~~\n ~~throw new Error('Invalid URL. Skipping formatting.');\n }\n\n~~ if (leadingChar) {\n nodes.push({ text: leadingChar });\n }\n\n nodes.push({\n text: url,\n href\n ~~});\n~~ } ~~catch {\n // Invalid URL, just render as text.\n nodes.push({ text: pos.match[0] }~~);\n ~~}\n~~ } else if (pos.xmlElement) {\n const xmlAttributes = getXMLAttributes(pos.match[0]);\n\n if (!xmlAttributes) {\n // Invalid XML, just render as text.\n nodes.push({ text: pos.match[0] });\n } else if (pos.component) {\n nodes.push({\n type: 'custom',\n component: pos.component,\n content: xmlAttributes,\n children: [{ text: '' }]\n });\n } else if (pos.getSearchAttributes) {\n const searchResult = pos.getSearchAttributes(pos.xmlElement, pos.match[0]);\n if (searchResult && searchResult.text) {\n nodes.push({\n text: searchResult.text,\n searchResult: {\n markdown: searchResult.markdown,\n component: searchResult.component,\n props: searchResult.props,\n toJSON: () => undefined\n }\n });\n } else {\n nodes.push({ text: pos.match[0] });\n }\n }\n }\n\n // If we are at the end of the positions array, and there's still text left\n // slice the text and add it as a new text node\n if (i === ~~positions~~.length - 1 && pos.end < text.length) {\n nodes.push({\n text: text.slice(pos.end, text.length)\n });\n }\n lastPos = pos;\n });\n\n return nodes.length > 0 ? nodes : [{ text: '' }];\n};\n\nexport default parseTextToCustomSlateNodes;\n"]}
1	+ {"version":3,"file":"interactionRenderer.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/interactionRenderer.ts"],"names":[],"mappings":"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","sourcesContent":["import type * as slate from 'slate';\nimport { TLDs } from 'global-tld-list';\n\nimport type { InteractionRenderers } from '../RichTextViewer.types';\n\ninterface RegexMatch extends InteractionRenderers {\n start: number;\n end: number;\n match: RegExpExecArray;\n}\n\ninterface CheckRegexParams extends InteractionRenderers {\n text: string;\n}\n\nconst parser = new DOMParser();\n\n// Checks a string for regex matches and returns an array of matches\nexport const checkRegex = (params: CheckRegexParams) => {\n const regexMatches: RegexMatch[] = [];\n let res;\n // eslint-disable-next-line no-cond-assign\n while ((res = params.regexPattern.exec(params.text))) {\n const start = res.index;\n regexMatches.push({\n start,\n end: start + res[0].length,\n match: res,\n ...params\n });\n }\n return regexMatches;\n};\n\n// Extracts all properties from an xml element represented as a string\nexport const getXMLAttributes = (element: string): Record<string, string> \| undefined => {\n const document = parser.parseFromString(element, 'application/xml');\n if (document.querySelector('parsererror')) return undefined;\n const attributes: Record<string, string> = {};\n\n for (let i = 0; i < document.documentElement.attributes.length; i += 1) {\n const attr = document.documentElement.attributes.item(i);\n if (attr) {\n attributes[attr.name] = attr.value;\n }\n }\n attributes.rawText = element;\n\n return attributes;\n};\n\n// Parses text node to custom slate node\nconst parseTextToCustomSlateNodes = (\n text: string,\n renderers?: InteractionRenderers[]\n): (slate.Element \| slate.Text)[] => {\n // Runs through an array of custom renderers and gets the matches\n const positions: RegexMatch[] =\n renderers?.flatMap(renderer => checkRegex({ text, ...renderer })) \|\| [];\n\n // Early exit when no matched positions\n if (positions.length === 0) {\n return [{ text }];\n }\n\n // Sorts the matches based on the start positions of the matches\n positions.sort((a, b) => a.start - b.start);\n\n const validPositions = positions.filter(pos => {\n if (pos.type === 'builtin-url' && pos.match.groups) {\n const { url, protocol, tld } = pos.match.groups;\n const normalizedUrl = protocol ? url : `https://${url}`;\n return URL.canParse(normalizedUrl) && TLDs.includes(tld);\n }\n\n return true;\n });\n\n if (validPositions.length === 0) {\n return [{ text }];\n }\n\n const nodes: (slate.Element \| slate.Text)[] = [];\n\n // Use the regex match positions to slice the text into the correct text nodes and other custom nodes\n let lastPos: RegexMatch;\n validPositions.forEach((pos, i) => {\n // If the first regex match isn't at the start of the text node,\n // slice the text node up to the first match and insert it into the nodes array\n\n if (i === 0 && pos.start !== 0) {\n nodes.push({\n text: text.slice(i, pos.start)\n });\n }\n\n // If there was a last position, slice the text between the last position\n // and the new position to insert it as a new text node\n if (lastPos && lastPos.end < pos.start) {\n nodes.push({\n text: text.slice(lastPos.end, pos.start)\n });\n } else if (i !== 0) {\n nodes.push({\n text: ' '\n });\n }\n\n if (pos.type === 'builtin-url' && pos.match.groups) {\n const { leadingChar, url } = pos.match.groups;\n\n const { href } = new URL(pos.match.groups.protocol ? url : `https://${url}`);\n\n if (leadingChar) {\n nodes.push({ text: leadingChar });\n }\n\n nodes.push({\n text: url,\n href\n });\n } else if (pos.xmlElement) {\n const xmlAttributes = getXMLAttributes(pos.match[0]);\n\n if (!xmlAttributes) {\n // Invalid XML, just render as text.\n nodes.push({ text: pos.match[0] });\n } else if (pos.component) {\n nodes.push({\n type: 'custom',\n component: pos.component,\n content: xmlAttributes,\n children: [{ text: '' }]\n });\n } else if (pos.getSearchAttributes) {\n const searchResult = pos.getSearchAttributes(pos.xmlElement, pos.match[0]);\n if (searchResult && searchResult.text) {\n nodes.push({\n text: searchResult.text,\n searchResult: {\n markdown: searchResult.markdown,\n component: searchResult.component,\n props: searchResult.props,\n toJSON: () => undefined\n }\n });\n } else {\n nodes.push({ text: pos.match[0] });\n }\n }\n }\n\n // If we are at the end of the positions array, and there's still text left\n // slice the text and add it as a new text node\n if (i === validPositions.length - 1 && pos.end < text.length) {\n nodes.push({\n text: text.slice(pos.end, text.length)\n });\n }\n lastPos = pos;\n });\n\n return nodes.length > 0 ? nodes : [{ text: '' }];\n};\n\nexport default parseTextToCustomSlateNodes;\n"]}

package/lib/components/RichTextEditor/utils/markdownConverter.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"markdownConverter.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/markdownConverter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,WAAW,~~EAAE~~,MAAM,QAAQ,CAAC;~~AAK1C~~,OAAO,KAAK,~~EAAE~~,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;~~AAIzF~~,eAAO,MAAM,OAAO,GAClB,OAAO,WAAW,EAClB,uBAAuB,oBAAoB,EAAE,EAC7C,cAAc,mBAAmB,CAAC,aAAa,CAAC,KAC/C,OAAO,GAAG,~~IAiJZ~~,CAAC;~~AAYF~~,eAAO,MAAM,wBAAwB,GACnC,WAAO,EACP,kBAAkB,oBAAoB,EAAE,KACvC,CAAC,OAAO,GAAG,IAAI,CAAC,EAOlB,CAAC;AAIF,QAAA,MAAM,eAAe,GACnB,IAAI,MAAM,EACV,uBAAuB,oBAAoB,EAAE,EAC7C,cAAc,mBAAmB,CAAC,aAAa,CAAC,KAC/C,CAAC,OAAO,GAAG,IAAI,CAAC,EAIlB,CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"markdownConverter.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/markdownConverter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAU,MAAM,QAAQ,CAAC;AAKlD,OAAO,KAAK,EAAY,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAkKnG,eAAO,MAAM,OAAO,GAClB,OAAO,WAAW,EAClB,uBAAuB,oBAAoB,EAAE,EAC7C,cAAc,mBAAmB,CAAC,aAAa,CAAC,KAC/C,OAAO,GAAG,IAyLZ,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,WAAO,EACP,kBAAkB,oBAAoB,EAAE,KACvC,CAAC,OAAO,GAAG,IAAI,CAAC,EAOlB,CAAC;AAIF,QAAA,MAAM,eAAe,GACnB,IAAI,MAAM,EACV,uBAAuB,oBAAoB,EAAE,EAC7C,cAAc,mBAAmB,CAAC,aAAa,CAAC,KAC/C,CAAC,OAAO,GAAG,IAAI,CAAC,EAIlB,CAAC;AAEF,eAAe,eAAe,CAAC"}