@pega/cosmos-react-rte 3.0.0-dev.4.2 → 3.0.0-dev.7.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.
- package/lib/components/Editor/Editor.js +2 -2
- package/lib/components/Editor/Editor.js.map +1 -1
- package/lib/components/Editor/ImageEditor.js +3 -3
- package/lib/components/Editor/ImageEditor.js.map +1 -1
- package/lib/components/Editor/Toolbar/AnchorButton.js +4 -4
- package/lib/components/Editor/Toolbar/AnchorButton.js.map +1 -1
- package/lib/components/Editor/Toolbar/ImageButton.js +2 -2
- package/lib/components/Editor/Toolbar/ImageButton.js.map +1 -1
- package/lib/components/Editor/Toolbar/TextSelect.js +2 -2
- package/lib/components/Editor/Toolbar/TextSelect.js.map +1 -1
- package/lib/components/Editor/Toolbar/Toolbar.js +7 -7
- package/lib/components/Editor/Toolbar/Toolbar.js.map +1 -1
- package/lib/components/RichTextEditor/DecoratorComponents/CodeBlock.js +1 -1
- package/lib/components/RichTextEditor/DecoratorComponents/CodeBlock.js.map +1 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Image.js +1 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Image.js.map +1 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Link.js +1 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Link.js.map +1 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Table.js +4 -4
- package/lib/components/RichTextEditor/DecoratorComponents/Table.js.map +1 -1
- package/lib/components/RichTextEditor/RichTextEditor.js +3 -3
- package/lib/components/RichTextEditor/RichTextEditor.js.map +1 -1
- package/lib/components/RichTextEditor/RichTextViewer.js +2 -2
- package/lib/components/RichTextEditor/RichTextViewer.js.map +1 -1
- package/lib/components/RichTextEditor/Toolbar/AnchorButton.js +4 -4
- package/lib/components/RichTextEditor/Toolbar/AnchorButton.js.map +1 -1
- package/lib/components/RichTextEditor/Toolbar/ImageButton.js +2 -2
- package/lib/components/RichTextEditor/Toolbar/ImageButton.js.map +1 -1
- package/lib/components/RichTextEditor/Toolbar/IndentButton.js +1 -1
- package/lib/components/RichTextEditor/Toolbar/IndentButton.js.map +1 -1
- package/lib/components/RichTextEditor/Toolbar/TableButton.js +1 -1
- package/lib/components/RichTextEditor/Toolbar/TableButton.js.map +1 -1
- package/lib/components/RichTextEditor/Toolbar/TextSelect.js +2 -2
- package/lib/components/RichTextEditor/Toolbar/TextSelect.js.map +1 -1
- package/lib/components/RichTextEditor/Toolbar/Toolbar.js +4 -4
- package/lib/components/RichTextEditor/Toolbar/Toolbar.js.map +1 -1
- package/lib/components/RichTextEditor/Toolbar/ToolbarButton.js +1 -1
- package/lib/components/RichTextEditor/Toolbar/ToolbarButton.js.map +1 -1
- package/lib/components/RichTextEditor/utils/markdownConverter.js +1 -1
- package/lib/components/RichTextEditor/utils/markdownConverter.js.map +1 -1
- package/lib/components/RichTextEditor/utils/renderers.js +26 -26
- package/lib/components/RichTextEditor/utils/renderers.js.map +1 -1
- package/package.json +3 -3
|
@@ -108,12 +108,12 @@ const TextSelect = ({ osx }) => {
|
|
|
108
108
|
}, onFocus: (e) => {
|
|
109
109
|
e.preventDefault();
|
|
110
110
|
e.stopPropagation();
|
|
111
|
-
}, 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)] }
|
|
111
|
+
}, 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 }) => ({
|
|
112
112
|
id: type,
|
|
113
113
|
primary: text,
|
|
114
114
|
secondary: [subText],
|
|
115
115
|
selected: type === EditorCommands.getActiveBlockType(editor)
|
|
116
|
-
})), focusControlEl: buttonRef.current || undefined, focusElOnClose: false, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }
|
|
116
|
+
})), focusControlEl: buttonRef.current || undefined, focusElOnClose: false, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }) })] }));
|
|
117
117
|
};
|
|
118
118
|
export default TextSelect;
|
|
119
119
|
//# sourceMappingURL=TextSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, MouseEvent, useCallback, KeyboardEvent, FocusEvent } from 'react';\nimport { Element, Transforms } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { getKeyCommand } from './utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n height: calc(4 * ${theme.base.spacing});\n padding: calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n\n span {\n white-space: nowrap;\n }\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n min-width: 10rem;\n`;\n\nconst textMapping: { [key: string]: string } = {\n paragraph: 'Normal',\n 'heading-1': 'Heading 1',\n 'heading-2': 'Heading 2',\n 'heading-3': 'Heading 3',\n 'heading-4': 'Heading 4',\n '': 'Normal'\n};\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nconst getTextFormats = (\n osx: boolean\n): { text: string; subText: string; type: Element['type'] }[] => {\n return [\n { text: 'Normal', subText: getTextCommand(0, osx), type: 'paragraph' },\n { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'heading-1' },\n { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'heading-2' },\n { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'heading-3' },\n { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'heading-4' }\n ];\n};\n\nconst TextSelect: FC<{ osx: boolean }> = ({ osx }) => {\n const t = useI18n();\n const { disabled } = useRTEContext();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n const editor = useSlate();\n\n const textFormats = useCallback(() => {\n return getTextFormats(osx);\n }, [osx])();\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: Element['type'], e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n EditorCommands.setBlock(type, editor);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor) && openedByClick.current) {\n const selection = editor.selection;\n ReactEditor.focus(editor);\n if (selection) Transforms.select(editor, selection);\n }\n }, 0);\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\n disabled={disabled}\n icon={false}\n ref={buttonRef}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n openedByClick.current = true;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' && !selecting.current) {\n e.preventDefault();\n setOpen(true);\n openedByClick.current = false;\n } else if (e.key === 'Enter') {\n e.preventDefault();\n selecting.current = false;\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`Text formatting toolbar. ${t('rte_heading_style')}. ${\n textMapping[EditorCommands.getActiveBlockType(editor)]\n } selected`}\n aria-haspopup\n >\n <span>{textMapping[EditorCommands.getActiveBlockType(editor)]}</span>\n <Icon name='arrow-micro-down' />\n </StyledTextSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_heading_style')}\n </Tooltip>\n )}\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n <Menu\n items={textFormats.map(({ text, type, subText }) => ({\n id: type,\n primary: text,\n secondary: [subText],\n selected: type === EditorCommands.getActiveBlockType(editor)\n }))}\n focusControlEl={buttonRef.current || undefined}\n focusElOnClose={false}\n mode='single-select'\n ref={menuRef}\n onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n />\n </Popover>\n </>\n );\n};\n\nexport default TextSelect;\n"]}
|
|
1
|
+
{"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, MouseEvent, useCallback, KeyboardEvent, FocusEvent } from 'react';\nimport { Element, Transforms } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { getKeyCommand } from './utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n height: calc(4 * ${theme.base.spacing});\n padding: calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n\n span {\n white-space: nowrap;\n }\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n min-width: 10rem;\n`;\n\nconst textMapping: { [key: string]: string } = {\n paragraph: 'Normal',\n 'heading-1': 'Heading 1',\n 'heading-2': 'Heading 2',\n 'heading-3': 'Heading 3',\n 'heading-4': 'Heading 4',\n '': 'Normal'\n};\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nconst getTextFormats = (\n osx: boolean\n): { text: string; subText: string; type: Element['type'] }[] => {\n return [\n { text: 'Normal', subText: getTextCommand(0, osx), type: 'paragraph' },\n { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'heading-1' },\n { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'heading-2' },\n { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'heading-3' },\n { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'heading-4' }\n ];\n};\n\nconst TextSelect: FC<{ osx: boolean }> = ({ osx }) => {\n const t = useI18n();\n const { disabled } = useRTEContext();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n const editor = useSlate();\n\n const textFormats = useCallback(() => {\n return getTextFormats(osx);\n }, [osx])();\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: Element['type'], e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n EditorCommands.setBlock(type, editor);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor) && openedByClick.current) {\n const selection = editor.selection;\n ReactEditor.focus(editor);\n if (selection) Transforms.select(editor, selection);\n }\n }, 0);\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\n disabled={disabled}\n icon={false}\n ref={buttonRef}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n openedByClick.current = true;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' && !selecting.current) {\n e.preventDefault();\n setOpen(true);\n openedByClick.current = false;\n } else if (e.key === 'Enter') {\n e.preventDefault();\n selecting.current = false;\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`Text formatting toolbar. ${t('rte_heading_style')}. ${\n textMapping[EditorCommands.getActiveBlockType(editor)]\n } selected`}\n aria-haspopup\n >\n <span>{textMapping[EditorCommands.getActiveBlockType(editor)]}</span>\n <Icon name='arrow-micro-down' />\n </StyledTextSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_heading_style')}\n </Tooltip>\n )}\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n <Menu\n items={textFormats.map(({ text, type, subText }) => ({\n id: type,\n primary: text,\n secondary: [subText],\n selected: type === EditorCommands.getActiveBlockType(editor)\n }))}\n focusControlEl={buttonRef.current || undefined}\n focusElOnClose={false}\n mode='single-select'\n ref={menuRef}\n onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n />\n </Popover>\n </>\n );\n};\n\nexport default TextSelect;\n"]}
|
|
@@ -98,7 +98,7 @@ function renderCutCopyPaste(editor, t, osx) {
|
|
|
98
98
|
return (_jsx(ToolbarButton, { onMouseDown: e => {
|
|
99
99
|
e.preventDefault();
|
|
100
100
|
btn.func();
|
|
101
|
-
}, tooltip: btn.tooltip, label: btn.label, children: _jsx(Icon, { name: btn.icon }
|
|
101
|
+
}, tooltip: btn.tooltip, label: btn.label, children: _jsx(Icon, { name: btn.icon }) }, btn.text));
|
|
102
102
|
});
|
|
103
103
|
}
|
|
104
104
|
// Takes the features array and transforms it into a map for faster lookup
|
|
@@ -128,13 +128,13 @@ const Toolbar = (props) => {
|
|
|
128
128
|
if (navigator.appVersion.includes('Mac'))
|
|
129
129
|
setOsx(true);
|
|
130
130
|
}, []);
|
|
131
|
-
return (_jsxs(Flex, { as: StyledToolbar, sticky: sticky, container: { justify: 'between' }, ref: toolbarRef, children: [_jsxs(Flex, { container: { alignItems: 'end' }, children: [_jsx(TextSelect, { osx: osx }
|
|
131
|
+
return (_jsxs(Flex, { as: StyledToolbar, sticky: sticky, container: { justify: 'between' }, ref: toolbarRef, children: [_jsxs(Flex, { container: { alignItems: 'end' }, children: [_jsx(TextSelect, { osx: osx }), activeFeatures['inline-styling'] && renderStyleButtons(editor, t, focused, osx), activeFeatures.lists && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onMouseDown: e => {
|
|
132
132
|
e.preventDefault();
|
|
133
133
|
ListCommands.toggleList('unordered-list', editor);
|
|
134
|
-
}, active: EditorCommands.isBlockActive('unordered-list', editor), tooltip: getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`), label: t('rte_bulleted_list'), children: _jsx(Icon, { name: 'list' }
|
|
134
|
+
}, active: EditorCommands.isBlockActive('unordered-list', editor), tooltip: getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`), label: t('rte_bulleted_list'), children: _jsx(Icon, { name: 'list' }) }), _jsx(ToolbarButton, { onMouseDown: e => {
|
|
135
135
|
e.preventDefault();
|
|
136
136
|
ListCommands.toggleList('ordered-list', editor);
|
|
137
|
-
}, active: EditorCommands.isBlockActive('ordered-list', editor), tooltip: t('rte_numbered_list'), label: t('rte_numbered_list'), children: _jsx(Icon, { name: 'list-number' }
|
|
137
|
+
}, active: EditorCommands.isBlockActive('ordered-list', editor), tooltip: t('rte_numbered_list'), label: t('rte_numbered_list'), children: _jsx(Icon, { name: 'list-number' }) })] })), activeFeatures.indentation && (_jsxs(_Fragment, { children: [_jsx(IndentButton, { type: 'indent', osx: osx }), _jsx(IndentButton, { type: 'unindent', osx: osx })] })), activeFeatures.tables && _jsx(TableButton, {})] }), _jsxs(Flex, { container: { alignItems: 'end' }, children: [activeFeatures.links && _jsx(AnchorButton, { osx: osx }), activeFeatures.images && _jsx(ImageButton, {})] }), activeFeatures['cut-copy-paste'] && (_jsx(Flex, { container: { alignItems: 'end' }, children: renderCutCopyPaste(editor, t, osx) }))] }));
|
|
138
138
|
};
|
|
139
139
|
export default Toolbar;
|
|
140
140
|
//# sourceMappingURL=Toolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState, useEffect, useRef } from 'react';\nimport { 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 TranslationPack\n} from '@pega/cosmos-react-core';\nimport { 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 { 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 }>`\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 ${props =>\n props.sticky &&\n css`\n position: sticky;\n bottom: 0;\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: Exclude<keyof Text, 'text'>;\n tooltip: string;\n};\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: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`\n )\n },\n {\n style: 'ITALIC',\n text: 'I',\n format: 'italic',\n label: t('rte_italic'),\n tooltip: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`\n )\n },\n {\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'line-through',\n label: t('rte_strike_through'),\n tooltip: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`\n )\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((acc, feature) => {\n return { ...acc, [feature]: true };\n }, {} as { [F in Features]: boolean });\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={getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\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 { FC, useState, useEffect, useRef } from 'react';\nimport { 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 TranslationPack\n} from '@pega/cosmos-react-core';\nimport { 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 { 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 }>`\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 ${props =>\n props.sticky &&\n css`\n position: sticky;\n bottom: 0;\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: Exclude<keyof Text, 'text'>;\n tooltip: string;\n};\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: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`\n )\n },\n {\n style: 'ITALIC',\n text: 'I',\n format: 'italic',\n label: t('rte_italic'),\n tooltip: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`\n )\n },\n {\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'line-through',\n label: t('rte_strike_through'),\n tooltip: getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`\n )\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((acc, feature) => {\n return { ...acc, [feature]: true };\n }, {} as { [F in Features]: boolean });\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={getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\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"]}
|
|
@@ -60,7 +60,7 @@ const ToolbarButton = forwardRef(({ tooltip, active, styleType, disabled, label,
|
|
|
60
60
|
if (e.key === 'Enter') {
|
|
61
61
|
onMouseDown?.(e);
|
|
62
62
|
}
|
|
63
|
-
}, onMouseDown: onMouseDown, type: 'button', "aria-label": `${label} ${active ? 'active' : ''}`, "aria-pressed": active, ...restProps }
|
|
63
|
+
}, onMouseDown: onMouseDown, type: 'button', "aria-label": `${label} ${active ? 'active' : ''}`, "aria-pressed": active, ...restProps }), el && tooltip && (_jsx(Tooltip, { target: el, showDelay: 'none', hideDelay: 'none', children: tooltip }))] }));
|
|
64
64
|
});
|
|
65
65
|
export default ToolbarButton;
|
|
66
66
|
//# sourceMappingURL=ToolbarButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ToolbarButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAC;AACvE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EACL,gBAAgB,EAEhB,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,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;wBACY,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa;;aAE/C,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;cAM/E,IAAI;iBACD,IAAI;eACN,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK;;;;oBAIrB,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,CACrE,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,EAC1E,GAA2B,EAC3B,EAAE;IACF,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,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;wBACrB,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;qBAClB;gBACH,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,QAAQ,gBACD,GAAG,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,kBAClC,MAAM,KAChB,SAAS,
|
|
1
|
+
{"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ToolbarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, KeyboardEvent, MouseEvent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Tooltip,\n tryCatch,\n useConsolidatedRef,\n useElement\n} from '@pega/cosmos-react-core';\n\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { 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: ${active ? activeColor : 'transparent'};\n border: none;\n color: ${active ? theme.base.palette.interactive : 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: ${active ? 'inherit' : '0.7'};\n cursor: pointer;\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(\n (\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 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 ? '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);\n\nexport default ToolbarButton;\n"]}
|
|
@@ -29,7 +29,7 @@ const getNode = (token, interactionRenderers, markdownMap) => {
|
|
|
29
29
|
if (CustomComponent)
|
|
30
30
|
return {
|
|
31
31
|
type: 'override',
|
|
32
|
-
component: _jsx(CustomComponent, { token: token }
|
|
32
|
+
component: _jsx(CustomComponent, { token: token }),
|
|
33
33
|
children: [{ text: '' }]
|
|
34
34
|
};
|
|
35
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdownConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/markdownConverter.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAKlD,OAAO,2BAA2B,MAAM,uBAAuB,CAAC;AAEhE,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;AAErC,MAAM,OAAO,GAAG,CACd,KAAmB,EACnB,oBAAkE,EAClE,WAAgD,EAChC,EAAE;IAClB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK;QACjD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC;IAEzD,IAAI,QAAQ,CAAC;IAEb,IAAI,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;QAC5B,mEAAmE;QACnE,QAAQ,GAAG,eAAe,CACvB,KAAK,CAAC,MAAuC,IAAI,EAAE,EACpD,oBAAoB,EACpB,WAAW,CACZ,CAAC;KACH;SAAM,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE;QAClC,mEAAmE;QACnE,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,EAAE,oBAAoB,EAAE,WAAW,CAAC,CAAC;KAC5E;SAAM;QACL,IAAI,MAAM,GAAG,EAAE,CAAC;QAEhB,KAAI,8BAA+B,KAAK,CAAC,IAAI,KAAK,MAAM;YAAE,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC;aACxE,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC;YAAE,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC;QAErD,QAAQ,GAAG,2BAA2B,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;KACtE;IAED,IAAI,WAAW,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QAC7B,4EAA4E;QAC5E,MAAM,eAAe,GAAQ,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,KAAY,CAAC,CAAC;QACrE,IAAI,eAAe;YACjB,OAAO;gBACL,IAAI,EAAE,UAAU;gBAChB,SAAS,EAAE,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"markdownConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/markdownConverter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CosmosCustom, Element, Text } from 'slate';\nimport { marked } from 'marked';\n\nimport { hasProp } from '@pega/cosmos-react-core';\n\nimport { RichTextViewerProps } from '../RichTextViewer.types';\nimport { RichTextEditorProps } from '../RichTextEditor.types';\n\nimport parseTextToCustomSlateNodes from './interactionRenderer';\n\nmarked.setOptions({ mangle: false });\n\nconst getNode = (\n token: marked.Token,\n interactionRenderers?: RichTextViewerProps['interactionRenderers'],\n markdownMap?: RichTextViewerProps['markdownMap']\n): Element | Text => {\n if (!hasProp(token, 'type') || token.type === 'def')\n return { type: 'paragraph', children: [{ text: '' }] };\n\n let children;\n\n if (hasProp(token, 'tokens')) {\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n children = markDownToSlate(\n (token.tokens as marked.Tokens.Link['tokens']) || [],\n interactionRenderers,\n markdownMap\n );\n } else if (hasProp(token, 'items')) {\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n children = markDownToSlate(token.items, interactionRenderers, markdownMap);\n } else {\n let mdText = '';\n\n if (/* token.type === 'link' || */ token.type === 'text') mdText = token.raw;\n else if (hasProp(token, 'text')) mdText = token.text;\n\n children = parseTextToCustomSlateNodes(mdText, interactionRenderers);\n }\n\n if (markdownMap?.[token.type]) {\n // Typed as any since typescript is unaware that token type matches argument\n const CustomComponent: any = markdownMap[token.type]?.(token as any);\n if (CustomComponent)\n return {\n type: 'override',\n component: <CustomComponent token={token} />,\n children: [{ text: '' }]\n };\n }\n\n if (!children.length) {\n return {\n type: 'paragraph',\n children: [{ text: token.raw }]\n };\n }\n\n switch (token.type) {\n case 'paragraph': {\n return {\n type: token.type,\n children\n };\n }\n case 'heading': {\n return {\n type:\n token.depth && token.depth <= 4\n ? (`heading-${token.depth}` as `heading-${1 | 2 | 3 | 4}`)\n : 'heading-4',\n children\n };\n }\n case 'link': {\n return {\n href: token.href,\n text: token.text || ''\n };\n }\n case 'em': {\n return {\n italic: true,\n text: token.text || ''\n };\n }\n case 'strong': {\n return {\n bold: true,\n text: token.text || ''\n };\n }\n case 'del': {\n return {\n 'line-through': true,\n text: token.text || ''\n };\n }\n case 'list': {\n return {\n type: token.ordered ? 'ordered-list' : 'unordered-list',\n children: children as CosmosCustom.ListItemElement[]\n };\n }\n case 'list_item': {\n return {\n type: 'list-item',\n children: children as Element[]\n };\n }\n case 'image': {\n return {\n type: 'image',\n alt: token.text,\n src: token.href,\n children: [{ text: '' }]\n };\n }\n default: {\n return {\n type: token.type,\n children\n } as Element;\n }\n }\n};\n\nconst markDownToSlate = (\n tokens: marked.Token[],\n interactionRenderers?: RichTextViewerProps['interactionRenderers'],\n markdownMap?: RichTextViewerProps['markdownMap']\n): (Element | Text)[] => {\n return tokens.map(token => {\n return getNode(token, interactionRenderers, markdownMap);\n });\n};\n\nexport const convertMarkdownForEditor = (\n md = '',\n searchRenderers?: RichTextEditorProps['searchRenderers']\n): (Element | Text)[] => {\n return [\n {\n type: 'paragraph',\n children: parseTextToCustomSlateNodes(md, searchRenderers)\n }\n ];\n};\n\n/* Converts markdown into Slate compatible nodes, also takes regex used\nin Feed Component to pass them down to custom elements */\nconst convertMarkdown = (\n md: string,\n interactionRenderers?: RichTextViewerProps['interactionRenderers'],\n markdownMap?: RichTextViewerProps['markdownMap']\n): (Element | Text)[] => {\n const lexer = new marked.Lexer({ gfm: false });\n const output = lexer.lex(md);\n return markDownToSlate(output, interactionRenderers, markdownMap);\n};\n\nexport default convertMarkdown;\n"]}
|
|
@@ -5,33 +5,33 @@ import { Table, TableRow, TableCell, TableBody } from '../DecoratorComponents/Ta
|
|
|
5
5
|
export const nodeRenderer = (props) => {
|
|
6
6
|
switch (props.element.type) {
|
|
7
7
|
case 'heading-1':
|
|
8
|
-
return (_jsx(Text, { variant: 'h1', ...props.attributes, children: props.children }
|
|
8
|
+
return (_jsx(Text, { variant: 'h1', ...props.attributes, children: props.children }));
|
|
9
9
|
case 'heading-2':
|
|
10
|
-
return (_jsx(Text, { variant: 'h2', ...props.attributes, children: props.children }
|
|
10
|
+
return (_jsx(Text, { variant: 'h2', ...props.attributes, children: props.children }));
|
|
11
11
|
case 'heading-3':
|
|
12
|
-
return (_jsx(Text, { variant: 'h3', ...props.attributes, children: props.children }
|
|
12
|
+
return (_jsx(Text, { variant: 'h3', ...props.attributes, children: props.children }));
|
|
13
13
|
case 'heading-4':
|
|
14
|
-
return (_jsx(Text, { variant: 'h4', ...props.attributes, children: props.children }
|
|
14
|
+
return (_jsx(Text, { variant: 'h4', ...props.attributes, children: props.children }));
|
|
15
15
|
case 'ordered-list':
|
|
16
|
-
return _jsx("ol", { ...props.attributes, children: props.children }
|
|
16
|
+
return _jsx("ol", { ...props.attributes, children: props.children });
|
|
17
17
|
case 'unordered-list':
|
|
18
|
-
return _jsx("ul", { ...props.attributes, children: props.children }
|
|
18
|
+
return _jsx("ul", { ...props.attributes, children: props.children });
|
|
19
19
|
case 'list-item':
|
|
20
|
-
return (_jsx("li", { ...props.attributes, "data-order": props.element.order, "data-level": props.element.level, "data-id": props.element.id, "data-parent-id": props.element.parentId, children: props.children }
|
|
20
|
+
return (_jsx("li", { ...props.attributes, "data-order": props.element.order, "data-level": props.element.level, "data-id": props.element.id, "data-parent-id": props.element.parentId, children: props.children }));
|
|
21
21
|
case 'custom': {
|
|
22
22
|
const CustomComponent = props.element.component;
|
|
23
|
-
let child = _jsx(CustomComponent, { ...props.attributes, children: props.element.content }
|
|
23
|
+
let child = _jsx(CustomComponent, { ...props.attributes, children: props.element.content });
|
|
24
24
|
if (props.element.href) {
|
|
25
|
-
child = (_jsx(Link, { href: props.element.href, target: '_blank', children: child }
|
|
25
|
+
child = (_jsx(Link, { href: props.element.href, target: '_blank', children: child }));
|
|
26
26
|
}
|
|
27
27
|
if (props.element.italic) {
|
|
28
|
-
child = _jsx("em", { children: child }
|
|
28
|
+
child = _jsx("em", { children: child });
|
|
29
29
|
}
|
|
30
30
|
if (props.element.bold) {
|
|
31
|
-
child = _jsx("strong", { children: child }
|
|
31
|
+
child = _jsx("strong", { children: child });
|
|
32
32
|
}
|
|
33
33
|
if (props.element['line-through']) {
|
|
34
|
-
child = _jsx("del", { children: child }
|
|
34
|
+
child = _jsx("del", { children: child });
|
|
35
35
|
}
|
|
36
36
|
return child;
|
|
37
37
|
}
|
|
@@ -39,21 +39,21 @@ export const nodeRenderer = (props) => {
|
|
|
39
39
|
return props.element.component;
|
|
40
40
|
}
|
|
41
41
|
case 'table':
|
|
42
|
-
return _jsx(Table, { ...props.attributes, children: props.children }
|
|
42
|
+
return _jsx(Table, { ...props.attributes, children: props.children });
|
|
43
43
|
case 'table-body':
|
|
44
|
-
return _jsx(TableBody, { ...props.attributes, children: props.children }
|
|
44
|
+
return _jsx(TableBody, { ...props.attributes, children: props.children });
|
|
45
45
|
case 'table-row':
|
|
46
|
-
return _jsx(TableRow, { ...props.attributes, children: props.children }
|
|
46
|
+
return _jsx(TableRow, { ...props.attributes, children: props.children });
|
|
47
47
|
case 'table-cell':
|
|
48
|
-
return _jsx(TableCell, { ...props.attributes, children: props.children }
|
|
48
|
+
return _jsx(TableCell, { ...props.attributes, children: props.children });
|
|
49
49
|
case 'paragraph':
|
|
50
|
-
return (_jsx("div", { children: _jsx(Text, { ...props.attributes, children: props.children }
|
|
50
|
+
return (_jsx("div", { children: _jsx(Text, { ...props.attributes, children: props.children }) }));
|
|
51
51
|
case 'image':
|
|
52
|
-
return (_jsxs("div", { ...props.attributes, children: [_jsx(Image, { src: props.element.src, alt: props.element.alt }
|
|
52
|
+
return (_jsxs("div", { ...props.attributes, children: [_jsx(Image, { src: props.element.src, alt: props.element.alt }), props.children] }));
|
|
53
53
|
case 'image-placeholder':
|
|
54
|
-
return _jsx("div", { ...props.attributes, children: props.children }
|
|
54
|
+
return _jsx("div", { ...props.attributes, children: props.children });
|
|
55
55
|
default: {
|
|
56
|
-
return _jsx("span", { ...props.attributes, children: props.children }
|
|
56
|
+
return _jsx("span", { ...props.attributes, children: props.children });
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
};
|
|
@@ -62,20 +62,20 @@ export const leafRenderer = (props) => {
|
|
|
62
62
|
let child = props.children;
|
|
63
63
|
if (props.leaf.searchResult) {
|
|
64
64
|
const CustomComponent = props.leaf.searchResult.component;
|
|
65
|
-
return (_jsx("span", { ...props.attributes, children: _jsx(CustomComponent, { ...props.leaf.searchResult.props, children: child }
|
|
65
|
+
return (_jsx("span", { ...props.attributes, children: _jsx(CustomComponent, { ...props.leaf.searchResult.props, children: child }) }));
|
|
66
66
|
}
|
|
67
67
|
if (props.leaf['line-through']) {
|
|
68
|
-
child = _jsx("del", { children: child }
|
|
68
|
+
child = _jsx("del", { children: child });
|
|
69
69
|
}
|
|
70
70
|
if (props.leaf.italic) {
|
|
71
|
-
child = _jsx("em", { children: child }
|
|
71
|
+
child = _jsx("em", { children: child });
|
|
72
72
|
}
|
|
73
73
|
if (props.leaf.bold) {
|
|
74
|
-
child = _jsx("strong", { children: child }
|
|
74
|
+
child = _jsx("strong", { children: child });
|
|
75
75
|
}
|
|
76
76
|
if (props.leaf.href) {
|
|
77
|
-
child = (_jsx(Link, { href: props.leaf.href, target: '_blank', children: child }
|
|
77
|
+
child = (_jsx(Link, { href: props.leaf.href, target: '_blank', children: child }));
|
|
78
78
|
}
|
|
79
|
-
return _jsx("span", { ...props.attributes, children: child }
|
|
79
|
+
return _jsx("span", { ...props.attributes, children: child });
|
|
80
80
|
};
|
|
81
81
|
//# sourceMappingURL=renderers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderers.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/renderers.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAErF,oCAAoC;AACpC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAyB,EAAE,EAAE;IACxD,QAAQ,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE;QAC1B,KAAK,WAAW;YACd,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,KAAK,KAAK,CAAC,UAAU,YACpC,KAAK,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"renderers.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/renderers.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RenderElementProps, RenderLeafProps } from 'slate-react';\n\nimport { Text, Link, Image } from '@pega/cosmos-react-core';\n\nimport { Table, TableRow, TableCell, TableBody } from '../DecoratorComponents/Table';\n\n// Renderer for block level elements\nexport const nodeRenderer = (props: RenderElementProps) => {\n switch (props.element.type) {\n case 'heading-1':\n return (\n <Text variant='h1' {...props.attributes}>\n {props.children}\n </Text>\n );\n case 'heading-2':\n return (\n <Text variant='h2' {...props.attributes}>\n {props.children}\n </Text>\n );\n case 'heading-3':\n return (\n <Text variant='h3' {...props.attributes}>\n {props.children}\n </Text>\n );\n case 'heading-4':\n return (\n <Text variant='h4' {...props.attributes}>\n {props.children}\n </Text>\n );\n case 'ordered-list':\n return <ol {...props.attributes}>{props.children}</ol>;\n case 'unordered-list':\n return <ul {...props.attributes}>{props.children}</ul>;\n case 'list-item':\n return (\n <li\n {...props.attributes}\n data-order={props.element.order}\n data-level={props.element.level}\n data-id={props.element.id}\n data-parent-id={props.element.parentId}\n >\n {props.children}\n </li>\n );\n case 'custom': {\n const CustomComponent = props.element.component;\n let child = <CustomComponent {...props.attributes}>{props.element.content}</CustomComponent>;\n if (props.element.href) {\n child = (\n <Link href={props.element.href} target='_blank'>\n {child}\n </Link>\n );\n }\n if (props.element.italic) {\n child = <em>{child}</em>;\n }\n if (props.element.bold) {\n child = <strong>{child}</strong>;\n }\n if (props.element['line-through']) {\n child = <del>{child}</del>;\n }\n return child;\n }\n case 'override': {\n return props.element.component;\n }\n case 'table':\n return <Table {...props.attributes}>{props.children}</Table>;\n case 'table-body':\n return <TableBody {...props.attributes}>{props.children}</TableBody>;\n case 'table-row':\n return <TableRow {...props.attributes}>{props.children}</TableRow>;\n case 'table-cell':\n return <TableCell {...props.attributes}>{props.children}</TableCell>;\n case 'paragraph':\n return (\n <div>\n <Text {...props.attributes}>{props.children}</Text>\n </div>\n );\n case 'image':\n return (\n <div {...props.attributes}>\n <Image src={props.element.src} alt={props.element.alt as string} />\n {props.children}\n </div>\n );\n case 'image-placeholder':\n return <div {...props.attributes}>{props.children}</div>;\n default: {\n return <span {...props.attributes}>{props.children}</span>;\n }\n }\n};\n\n// Renderer for inline elements\nexport const leafRenderer = (props: RenderLeafProps) => {\n let child = props.children;\n\n if (props.leaf.searchResult) {\n const CustomComponent = props.leaf.searchResult.component;\n return (\n <span {...props.attributes}>\n <CustomComponent {...props.leaf.searchResult.props}>{child}</CustomComponent>\n </span>\n );\n }\n\n if (props.leaf['line-through']) {\n child = <del>{child}</del>;\n }\n\n if (props.leaf.italic) {\n child = <em>{child}</em>;\n }\n\n if (props.leaf.bold) {\n child = <strong>{child}</strong>;\n }\n\n if (props.leaf.href) {\n child = (\n <Link href={props.leaf.href} target='_blank'>\n {child}\n </Link>\n );\n }\n\n return <span {...props.attributes}>{child}</span>;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-rte",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.7.0",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.7.0",
|
|
24
24
|
"@popperjs/core": "^2.11.0",
|
|
25
25
|
"marked": "^4.0.12",
|
|
26
26
|
"parse5": "^6.0.1",
|
|
@@ -46,6 +46,6 @@
|
|
|
46
46
|
"@types/parse5": "^6.0.0",
|
|
47
47
|
"@types/tinymce": "^4.6.4",
|
|
48
48
|
"enzyme": "^3.11.0",
|
|
49
|
-
"typescript": "~4.
|
|
49
|
+
"typescript": "~4.6.2"
|
|
50
50
|
}
|
|
51
51
|
}
|