@pega/cosmos-react-rte 3.0.0-dev.2.1 → 3.0.0-dev.20.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.d.ts +6 -0
- package/lib/components/Editor/Editor.d.ts.map +1 -1
- package/lib/components/Editor/Editor.js +167 -50
- package/lib/components/Editor/Editor.js.map +1 -1
- package/lib/components/Editor/Editor.styles.d.ts +3 -0
- package/lib/components/Editor/Editor.styles.d.ts.map +1 -0
- package/lib/components/Editor/Editor.styles.js +30 -0
- package/lib/components/Editor/Editor.styles.js.map +1 -0
- package/lib/components/Editor/Editor.types.d.ts +29 -10
- package/lib/components/Editor/Editor.types.d.ts.map +1 -1
- package/lib/components/Editor/Editor.types.js.map +1 -1
- package/lib/components/Editor/ImageEditor.d.ts +10 -0
- package/lib/components/Editor/ImageEditor.d.ts.map +1 -0
- package/lib/components/Editor/ImageEditor.js +274 -0
- package/lib/components/Editor/ImageEditor.js.map +1 -0
- package/lib/components/Editor/Toolbar/AnchorButton.d.ts.map +1 -1
- package/lib/components/Editor/Toolbar/AnchorButton.js +33 -15
- 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.d.ts.map +1 -1
- package/lib/components/Editor/Toolbar/TextSelect.js +4 -3
- package/lib/components/Editor/Toolbar/TextSelect.js.map +1 -1
- package/lib/components/Editor/Toolbar/Toolbar.d.ts.map +1 -1
- package/lib/components/Editor/Toolbar/Toolbar.js +10 -14
- 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 +2 -2
- package/lib/components/RichTextEditor/DecoratorComponents/Image.js.map +1 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Link.js +3 -3
- package/lib/components/RichTextEditor/DecoratorComponents/Link.js.map +1 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Table.d.ts +0 -2
- package/lib/components/RichTextEditor/DecoratorComponents/Table.d.ts.map +1 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Table.js +6 -33
- package/lib/components/RichTextEditor/DecoratorComponents/Table.js.map +1 -1
- package/lib/components/RichTextEditor/RichTextEditor.d.ts.map +1 -1
- package/lib/components/RichTextEditor/RichTextEditor.js +33 -7
- package/lib/components/RichTextEditor/RichTextEditor.js.map +1 -1
- package/lib/components/RichTextEditor/RichTextEditor.styles.d.ts +0 -2
- package/lib/components/RichTextEditor/RichTextEditor.styles.d.ts.map +1 -1
- package/lib/components/RichTextEditor/RichTextEditor.styles.js +17 -119
- package/lib/components/RichTextEditor/RichTextEditor.styles.js.map +1 -1
- package/lib/components/RichTextEditor/RichTextViewer.d.ts.map +1 -1
- package/lib/components/RichTextEditor/RichTextViewer.js +11 -12
- package/lib/components/RichTextEditor/RichTextViewer.js.map +1 -1
- package/lib/components/RichTextEditor/RichTextViewer.types.d.ts +3 -3
- package/lib/components/RichTextEditor/RichTextViewer.types.d.ts.map +1 -1
- package/lib/components/RichTextEditor/RichTextViewer.types.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/htmlConverter.d.ts.map +1 -1
- package/lib/components/RichTextEditor/utils/htmlConverter.js +5 -2
- package/lib/components/RichTextEditor/utils/htmlConverter.js.map +1 -1
- package/lib/components/RichTextEditor/utils/interactionRenderer.d.ts +1 -1
- package/lib/components/RichTextEditor/utils/interactionRenderer.d.ts.map +1 -1
- package/lib/components/RichTextEditor/utils/interactionRenderer.js +1 -4
- package/lib/components/RichTextEditor/utils/interactionRenderer.js.map +1 -1
- package/lib/components/RichTextEditor/utils/markdownConverter.js +3 -3
- package/lib/components/RichTextEditor/utils/markdownConverter.js.map +1 -1
- package/lib/components/RichTextEditor/utils/renderers.d.ts.map +1 -1
- package/lib/components/RichTextEditor/utils/renderers.js +35 -22
- package/lib/components/RichTextEditor/utils/renderers.js.map +1 -1
- package/lib/components/RichTextEditor/utils/slateConverter.d.ts +1 -0
- package/lib/components/RichTextEditor/utils/slateConverter.d.ts.map +1 -1
- package/lib/components/RichTextEditor/utils/slateConverter.js +1 -0
- package/lib/components/RichTextEditor/utils/slateConverter.js.map +1 -1
- package/package.json +23 -19
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, MouseEvent, KeyboardEvent, FocusEvent, useMemo } from 'react';\nimport { Editor } from 'tinymce';\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 { getKeyCommand } from '../../RichTextEditor/Toolbar/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: 20ch;\n`;\n\ntype FormatTypes = 'p' | 'h1' | 'h2' | 'h3' | 'h4';\n\nconst textMapping = {\n p: 'Normal',\n h1: 'Heading 1',\n h2: 'Heading 2',\n h3: 'Heading 3',\n h4: 'Heading 4',\n '': 'Normal'\n} as const;\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nexport const getTextFormats = (\n osx: boolean = false\n): { text: string; subText: string; type: FormatTypes }[] => {\n return [\n { text: 'Normal', subText: getTextCommand(0, osx), type: 'p' },\n { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'h1' },\n { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'h2' },\n { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'h3' },\n { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'h4' }\n ];\n};\n\nconst TextSelect: FC<{ osx: boolean; editor: Editor }> = ({ osx, editor }) => {\n const t = useI18n();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n\n const textFormats = useMemo(() => {\n return getTextFormats(osx);\n }, [osx]);\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: FormatTypes, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n editor.execCommand('FormatBlock', false, type);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!editor.hasFocus() && openedByClick.current) {\n editor.focus();\n }\n }, 0);\n };\n\n const activeFormat = (): FormatTypes => {\n return editor.queryCommandValue('FormatBlock') as FormatTypes;\n };\n\n const getFormatText = (): string => {\n const format = textMapping[activeFormat()];\n return format || 'Unknown';\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\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={`${t('rte_text_formatting_toolbar')}. ${t(\n 'rte_heading_style'\n )}. ${getFormatText()} ${t('selected').toLocaleLowerCase()}`}\n aria-haspopup\n >\n <span>{getFormatText()}</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 === activeFormat()\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/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, MouseEvent, KeyboardEvent, FocusEvent, useMemo } from 'react';\nimport { Editor } from 'tinymce';\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 { getKeyCommand } from '../../RichTextEditor/Toolbar/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: 20ch;\n`;\n\ntype FormatTypes = 'p' | 'h1' | 'h2' | 'h3' | 'h4';\n\nconst textMapping = {\n p: 'Normal',\n h1: 'Heading 1',\n h2: 'Heading 2',\n h3: 'Heading 3',\n h4: 'Heading 4',\n '': 'Normal',\n div: 'Normal'\n} as const;\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nexport const getTextFormats = (\n osx: boolean = false\n): { text: string; subText: string; type: FormatTypes }[] => {\n return [\n { text: 'Normal', subText: getTextCommand(0, osx), type: 'p' },\n { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'h1' },\n { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'h2' },\n { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'h3' },\n { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'h4' }\n ];\n};\n\nconst TextSelect: FC<{ osx: boolean; editor: Editor }> = ({ osx, editor }) => {\n const t = useI18n();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n\n const textFormats = useMemo(() => {\n return getTextFormats(osx);\n }, [osx]);\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: FormatTypes, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n editor.execCommand('FormatBlock', false, type);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!editor.hasFocus() && openedByClick.current) {\n editor.focus();\n }\n }, 0);\n };\n\n const activeFormat = (): FormatTypes => {\n return editor.queryCommandValue('FormatBlock') as FormatTypes;\n };\n\n const getFormatText = (): string => {\n const format = textMapping[activeFormat()];\n return format || 'Unknown';\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\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={`${t('rte_text_formatting_toolbar')}. ${t(\n 'rte_heading_style'\n )}. ${getFormatText()} ${t('selected').toLocaleLowerCase()}`}\n aria-haspopup\n >\n <span>{getFormatText()}</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 === activeFormat()\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAiBjC,OAAO,EAAa,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEjF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA0B/C,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;AAwFD,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAsI7B,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Flex, Icon, useArrows, useI18n, defaultThemeProp, registerIcon } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Flex, Icon, useArrows, useI18n, defaultThemeProp, registerIcon, useOS } from '@pega/cosmos-react-core';
|
|
5
5
|
import * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';
|
|
6
6
|
import * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';
|
|
7
7
|
import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
|
|
@@ -73,7 +73,7 @@ function createActiveFeaturesMap(features) {
|
|
|
73
73
|
}
|
|
74
74
|
const Toolbar = ({ features, sticky, editor, customActions }) => {
|
|
75
75
|
const t = useI18n();
|
|
76
|
-
const
|
|
76
|
+
const { macintosh: osx } = useOS();
|
|
77
77
|
const toolbarRef = useRef(null);
|
|
78
78
|
useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });
|
|
79
79
|
const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));
|
|
@@ -88,10 +88,6 @@ const Toolbar = ({ features, sticky, editor, customActions }) => {
|
|
|
88
88
|
useEffect(() => {
|
|
89
89
|
setActiveFeatures(createActiveFeaturesMap(features));
|
|
90
90
|
}, [features]);
|
|
91
|
-
useEffect(() => {
|
|
92
|
-
if (navigator.appVersion.includes('Mac'))
|
|
93
|
-
setOsx(true);
|
|
94
|
-
}, []);
|
|
95
91
|
const getActiveStyles = useCallback(() => {
|
|
96
92
|
if (editor.hasFocus()) {
|
|
97
93
|
setActiveStyles({
|
|
@@ -119,24 +115,24 @@ const Toolbar = ({ features, sticky, editor, customActions }) => {
|
|
|
119
115
|
editor.off('SelectionChange', getActiveStyles);
|
|
120
116
|
};
|
|
121
117
|
}, [editor, getActiveStyles]);
|
|
122
|
-
return (_jsxs(Flex, { as: StyledToolbar, sticky: sticky, container: { justify: 'between' }, ref: toolbarRef, children: [_jsxs(Flex, { container: { alignItems: 'end' }, children: [_jsx(TextSelect, { osx: osx, editor: editor }
|
|
118
|
+
return (_jsxs(Flex, { as: StyledToolbar, sticky: sticky, container: { justify: 'between' }, ref: toolbarRef, children: [_jsxs(Flex, { container: { alignItems: 'end' }, children: [_jsx(TextSelect, { osx: osx, editor: editor }), activeFeatures['inline-styling'] && renderStyleButtons(editor, t, activeStyles, osx), activeFeatures.lists && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onMouseDown: e => {
|
|
123
119
|
e.preventDefault();
|
|
124
120
|
editor.execCommand('InsertUnorderedList');
|
|
125
|
-
}, active: activeStyles.unorderedList, tooltip: getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`), label: t('rte_bulleted_list'), children: _jsx(Icon, { name: 'list' }
|
|
121
|
+
}, active: activeStyles.unorderedList, 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 => {
|
|
126
122
|
e.preventDefault();
|
|
127
123
|
editor.execCommand('InsertOrderedList');
|
|
128
|
-
}, active: activeStyles.orderedList, tooltip: t('rte_numbered_list'), label: t('rte_numbered_list'), children: _jsx(Icon, { name: 'list-number' }
|
|
124
|
+
}, active: activeStyles.orderedList, tooltip: t('rte_numbered_list'), label: t('rte_numbered_list'), children: _jsx(Icon, { name: 'list-number' }) })] })), activeFeatures.indentation && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onMouseDown: e => {
|
|
129
125
|
e.preventDefault();
|
|
130
126
|
editor.execCommand('Indent');
|
|
131
|
-
}, label: t('rte_indent'), tooltip: getIndentationToolTip('indent'), children: _jsx(Icon, { name: 'indent' }
|
|
127
|
+
}, label: t('rte_indent'), tooltip: getIndentationToolTip('indent'), children: _jsx(Icon, { name: 'indent' }) }), _jsx(ToolbarButton, { onMouseDown: e => {
|
|
132
128
|
e.preventDefault();
|
|
133
129
|
editor.execCommand('Outdent');
|
|
134
|
-
}, label: t('rte_unindent'), tooltip: getIndentationToolTip('unindent'), children: _jsx(Icon, { name: 'unindent' }
|
|
130
|
+
}, label: t('rte_unindent'), tooltip: getIndentationToolTip('unindent'), children: _jsx(Icon, { name: 'unindent' }) })] }))] }), _jsxs(Flex, { container: { alignItems: 'end' }, children: [customActions?.map(action => {
|
|
135
131
|
return (_jsx(ToolbarButton, { onMouseDown: e => {
|
|
136
132
|
e.preventDefault();
|
|
137
|
-
action.onMouseDown();
|
|
138
|
-
}, tooltip: action.text, children: _jsx(Icon, { name: action.icon }
|
|
139
|
-
}), activeFeatures.links && _jsx(AnchorButton, { editor: editor, osx: osx }
|
|
133
|
+
action.onMouseDown(e);
|
|
134
|
+
}, tooltip: action.text, label: action.text, active: action.active?.(editor) || false, children: _jsx(Icon, { name: action.icon }) }, action.icon));
|
|
135
|
+
}), activeFeatures.links && _jsx(AnchorButton, { editor: editor, osx: osx }), activeFeatures.images && _jsx(ImageButton, { editor: editor })] })] }));
|
|
140
136
|
};
|
|
141
137
|
export default Toolbar;
|
|
142
138
|
//# sourceMappingURL=Toolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState, useEffect, useRef, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { Editor } from 'tinymce';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n TranslationPack,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { CustomAction } from '../Editor.types';\n\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\n\nregisterIcon(indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(\n ({ sticky, theme }) => `\n background-color: ${theme.base.palette['primary-background']};\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n overflow: auto;\n padding: 0.125rem;\n ${\n sticky &&\n css`\n position: sticky;\n bottom: 0;\n `\n }\n`\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps {\n features: Features[];\n sticky?: boolean;\n editor: Editor;\n customActions?: CustomAction[];\n}\n\ntype StyleButtonType = {\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: string;\n element?: string;\n tooltip: string;\n};\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: Editor,\n t: TranslationFunction<TranslationPack>,\n activeStyles: { [key: string]: 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 element: 'strong',\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 element: 'i',\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: 'Strikethrough',\n element: 's',\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 (editor.hasFocus()) {\n editor.execCommand(format);\n } else {\n editor.focus();\n setTimeout(() => {\n editor.execCommand(format);\n }, 0);\n }\n }}\n styleType={style}\n active={activeStyles[format.toLowerCase()]}\n tooltip={tooltip}\n label={label}\n >\n {text}\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> = ({ features, sticky, editor, customActions }: ToolbarProps) => {\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 const [activeStyles, setActiveStyles] = useState(() => ({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n }));\n\n const getIndentationToolTip = (type: 'indent' | 'unindent') =>\n getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n useEffect(() => {\n if (navigator.appVersion.includes('Mac')) setOsx(true);\n }, []);\n\n const getActiveStyles = useCallback(() => {\n if (editor.hasFocus()) {\n setActiveStyles({\n bold: editor.queryCommandState('Bold'),\n italic: editor.queryCommandState('Italic'),\n strikethrough: editor.queryCommandState('Strikethrough'),\n unorderedList: editor.queryCommandState('InsertUnorderedList'),\n orderedList: editor.queryCommandState('InsertOrderedList')\n });\n } else {\n setActiveStyles({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n });\n }\n }, [editor, setActiveStyles]);\n\n useEffect(() => {\n getActiveStyles();\n editor.on('SelectionChange', getActiveStyles);\n return () => {\n editor.off('SelectionChange', getActiveStyles);\n };\n }, [editor, getActiveStyles]);\n\n return (\n <Flex as={StyledToolbar} sticky={sticky} container={{ justify: 'between' }} ref={toolbarRef}>\n <Flex container={{ alignItems: 'end' }}>\n <TextSelect osx={osx} editor={editor} />\n {activeFeatures['inline-styling'] && renderStyleButtons(editor, t, activeStyles, osx)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertUnorderedList');\n }}\n active={activeStyles.unorderedList}\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 editor.execCommand('InsertOrderedList');\n }}\n active={activeStyles.orderedList}\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 <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Indent');\n }}\n label={t('rte_indent')}\n tooltip={getIndentationToolTip('indent')}\n >\n <Icon name='indent' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Outdent');\n }}\n label={t('rte_unindent')}\n tooltip={getIndentationToolTip('unindent')}\n >\n <Icon name='unindent' />\n </ToolbarButton>\n </>\n )}\n </Flex>\n <Flex container={{ alignItems: 'end' }}>\n {customActions?.map(action => {\n return (\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n action.onMouseDown();\n }}\n tooltip={action.text}\n key={action.icon}\n >\n <Icon name={action.icon} />\n </ToolbarButton>\n );\n })}\n {activeFeatures.links && <AnchorButton editor={editor} osx={osx} />}\n {activeFeatures.images && <ImageButton editor={editor} />}\n </Flex>\n </Flex>\n );\n};\n\nexport default Toolbar;\n"]}
|
|
1
|
+
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState, useEffect, useRef, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { Editor } from 'tinymce';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n TranslationPack,\n registerIcon,\n useOS\n} from '@pega/cosmos-react-core';\nimport { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { CustomAction } from '../Editor.types';\n\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\n\nregisterIcon(indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(\n ({ sticky, theme }) => `\n background-color: ${theme.base.palette['primary-background']};\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n overflow: auto;\n padding: 0.125rem;\n ${\n sticky &&\n css`\n position: sticky;\n bottom: 0;\n `\n }\n`\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps {\n features: Features[];\n sticky?: boolean;\n editor: Editor;\n customActions?: CustomAction[];\n}\n\ntype StyleButtonType = {\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: string;\n element?: string;\n tooltip: string;\n};\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: Editor,\n t: TranslationFunction<TranslationPack>,\n activeStyles: { [key: string]: 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 element: 'strong',\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 element: 'i',\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: 'Strikethrough',\n element: 's',\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 (editor.hasFocus()) {\n editor.execCommand(format);\n } else {\n editor.focus();\n setTimeout(() => {\n editor.execCommand(format);\n }, 0);\n }\n }}\n styleType={style}\n active={activeStyles[format.toLowerCase()]}\n tooltip={tooltip}\n label={label}\n >\n {text}\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> = ({ features, sticky, editor, customActions }: ToolbarProps) => {\n const t = useI18n();\n const { macintosh: osx } = useOS();\n const toolbarRef = useRef<HTMLElement>(null);\n\n useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });\n\n const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));\n const [activeStyles, setActiveStyles] = useState(() => ({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n }));\n\n const getIndentationToolTip = (type: 'indent' | 'unindent') =>\n getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n const getActiveStyles = useCallback(() => {\n if (editor.hasFocus()) {\n setActiveStyles({\n bold: editor.queryCommandState('Bold'),\n italic: editor.queryCommandState('Italic'),\n strikethrough: editor.queryCommandState('Strikethrough'),\n unorderedList: editor.queryCommandState('InsertUnorderedList'),\n orderedList: editor.queryCommandState('InsertOrderedList')\n });\n } else {\n setActiveStyles({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n });\n }\n }, [editor, setActiveStyles]);\n\n useEffect(() => {\n getActiveStyles();\n editor.on('SelectionChange', getActiveStyles);\n return () => {\n editor.off('SelectionChange', getActiveStyles);\n };\n }, [editor, getActiveStyles]);\n\n return (\n <Flex as={StyledToolbar} sticky={sticky} container={{ justify: 'between' }} ref={toolbarRef}>\n <Flex container={{ alignItems: 'end' }}>\n <TextSelect osx={osx} editor={editor} />\n {activeFeatures['inline-styling'] && renderStyleButtons(editor, t, activeStyles, osx)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertUnorderedList');\n }}\n active={activeStyles.unorderedList}\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 editor.execCommand('InsertOrderedList');\n }}\n active={activeStyles.orderedList}\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 <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Indent');\n }}\n label={t('rte_indent')}\n tooltip={getIndentationToolTip('indent')}\n >\n <Icon name='indent' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Outdent');\n }}\n label={t('rte_unindent')}\n tooltip={getIndentationToolTip('unindent')}\n >\n <Icon name='unindent' />\n </ToolbarButton>\n </>\n )}\n </Flex>\n <Flex container={{ alignItems: 'end' }}>\n {customActions?.map(action => {\n return (\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n action.onMouseDown(e);\n }}\n tooltip={action.text}\n label={action.text}\n key={action.icon}\n active={action.active?.(editor) || false}\n >\n <Icon name={action.icon} />\n </ToolbarButton>\n );\n })}\n {activeFeatures.links && <AnchorButton editor={editor} osx={osx} />}\n {activeFeatures.images && <ImageButton editor={editor} />}\n </Flex>\n </Flex>\n );\n};\n\nexport default Toolbar;\n"]}
|
|
@@ -9,7 +9,7 @@ const StyledCodeBlock = styled.code `
|
|
|
9
9
|
`;
|
|
10
10
|
StyledCodeBlock.defaultProps = defaultThemeProp;
|
|
11
11
|
const CodeBlock = (props) => {
|
|
12
|
-
return _jsx(StyledCodeBlock, { ...props }
|
|
12
|
+
return _jsx(StyledCodeBlock, { ...props });
|
|
13
13
|
};
|
|
14
14
|
export default CodeBlock;
|
|
15
15
|
//# sourceMappingURL=CodeBlock.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/CodeBlock.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAA;sBACb,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;aAG7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CAC7C,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,SAAS,GAAY,CAAC,KAAU,EAAE,EAAE;IACxC,OAAO,KAAC,eAAe,OAAK,KAAK,
|
|
1
|
+
{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/CodeBlock.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAA;sBACb,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;aAG7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CAC7C,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,SAAS,GAAY,CAAC,KAAU,EAAE,EAAE;IACxC,OAAO,KAAC,eAAe,OAAK,KAAK,GAAI,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nconst StyledCodeBlock = styled.code`\n background-color: ${props => props.theme.base.colors.gray['extra-light']};\n display: block;\n font-family: monospace;\n padding: ${props => props.theme.base.spacing};\n`;\n\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nconst CodeBlock: FC<any> = (props: any) => {\n return <StyledCodeBlock {...props} />;\n};\n\nexport default CodeBlock;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Flex, Image } from '@pega/cosmos-react-core';
|
|
3
|
-
const ImageBlock = (
|
|
4
|
-
return (_jsx(Flex, { container: { alignItems: 'end' }, children: _jsx(Image, { src:
|
|
3
|
+
const ImageBlock = ({ src, alt }) => {
|
|
4
|
+
return (_jsx(Flex, { container: { alignItems: 'end' }, children: _jsx(Image, { src: src, alt: alt }) }));
|
|
5
5
|
};
|
|
6
6
|
export default ImageBlock;
|
|
7
7
|
//# sourceMappingURL=Image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Image.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAOtD,MAAM,UAAU,GAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Image.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAOtD,MAAM,UAAU,GAAY,CAAC,EAAE,GAAG,EAAE,GAAG,EAAmB,EAAE,EAAE;IAC5D,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,YACpC,KAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAI,GACxB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Image } from '@pega/cosmos-react-core';\n\ninterface ImageBlockProps {\n src: string;\n alt: string;\n}\n\nconst ImageBlock: FC<any> = ({ src, alt }: ImageBlockProps) => {\n return (\n <Flex container={{ alignItems: 'end' }}>\n <Image src={src} alt={alt} />\n </Flex>\n );\n};\n\nexport default ImageBlock;\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Link } from '@pega/cosmos-react-core';
|
|
3
|
-
const LinkEntity = (
|
|
4
|
-
const { url } =
|
|
5
|
-
return (_jsx(Link, { href: url, target: '_blank', children:
|
|
3
|
+
const LinkEntity = ({ children, contentState, entityKey }) => {
|
|
4
|
+
const { url } = contentState.getEntity(entityKey).getData();
|
|
5
|
+
return (_jsx(Link, { href: url, target: '_blank', children: children }));
|
|
6
6
|
};
|
|
7
7
|
export default LinkEntity;
|
|
8
8
|
//# sourceMappingURL=Link.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Link.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,UAAU,GAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Link.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,UAAU,GAAY,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAO,EAAE,EAAE;IACzE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;IAC5D,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Link } from '@pega/cosmos-react-core';\n\nconst LinkEntity: FC<any> = ({ children, contentState, entityKey }: any) => {\n const { url } = contentState.getEntity(entityKey).getData();\n return (\n <Link href={url} target='_blank'>\n {children}\n </Link>\n );\n};\n\nexport default LinkEntity;\n"]}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DefaultTheme } from 'styled-components';
|
|
3
|
-
export declare const getTableStyles: (theme: DefaultTheme) => import("styled-components").FlattenSimpleInterpolation;
|
|
4
2
|
export declare const TableBody: FC<any>;
|
|
5
3
|
export declare const Table: FC<any>;
|
|
6
4
|
export declare const TableRow: FC<any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAU5C,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,GAAG,CAO5B,CAAC;AAEH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,GAAG,CAOxB,CAAC;AAEH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,GAAG,CAO3B,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,GAAG,CAO5B,CAAC"}
|
|
@@ -1,51 +1,24 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import styled
|
|
3
|
+
import styled from 'styled-components';
|
|
4
4
|
import { defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
|
-
|
|
6
|
-
border-collapse: collapse;
|
|
7
|
-
|
|
8
|
-
td {
|
|
9
|
-
border: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
10
|
-
min-width: 6.25rem;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
tr:first-child {
|
|
14
|
-
td:first-child {
|
|
15
|
-
border-top-left-radius: 0.125rem;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
td:last-child {
|
|
19
|
-
border-top-right-radius: 0.125rem;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
tr:last-child {
|
|
24
|
-
td:first-child {
|
|
25
|
-
border-bottom-left-radius: 0.125rem;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
td:last-child {
|
|
29
|
-
border-bottom-right-radius: 0.125rem;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
`;
|
|
5
|
+
import { getTableStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';
|
|
33
6
|
const StyledTable = styled.table(props => getTableStyles(props.theme));
|
|
34
7
|
StyledTable.defaultProps = defaultThemeProp;
|
|
35
8
|
export const TableBody = forwardRef((props, ref) => {
|
|
36
9
|
const { children, ...restProps } = props;
|
|
37
|
-
return (_jsx("tbody", { ...restProps, ref: ref, children: children }
|
|
10
|
+
return (_jsx("tbody", { ...restProps, ref: ref, children: children }));
|
|
38
11
|
});
|
|
39
12
|
export const Table = forwardRef((props, ref) => {
|
|
40
13
|
const { children, ...restProps } = props;
|
|
41
|
-
return (_jsx(StyledTable, { ...restProps, ref: ref, children: children }
|
|
14
|
+
return (_jsx(StyledTable, { ...restProps, ref: ref, children: children }));
|
|
42
15
|
});
|
|
43
16
|
export const TableRow = forwardRef((props, ref) => {
|
|
44
17
|
const { children, ...restProps } = props;
|
|
45
|
-
return (_jsx("tr", { ...restProps, ref: ref, children: children }
|
|
18
|
+
return (_jsx("tr", { ...restProps, ref: ref, children: children }));
|
|
46
19
|
});
|
|
47
20
|
export const TableCell = forwardRef((props, ref) => {
|
|
48
21
|
const { children, ...restProps } = props;
|
|
49
|
-
return (_jsx("td", { ...restProps, ref: ref, children: children }
|
|
22
|
+
return (_jsx("td", { ...restProps, ref: ref, children: children }));
|
|
50
23
|
});
|
|
51
24
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AAElF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAEvE,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,SAAS,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACzE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,mBAAW,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,QAAQ,GACH,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,KAAC,WAAW,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YACjC,QAAQ,GACG,CACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACxE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,gBAAQ,SAAS,EAAE,GAAG,EAAE,GAAG,YACxB,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACzE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,gBAAQ,SAAS,EAAE,GAAG,EAAE,GAAG,YACxB,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\nimport { getTableStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';\n\nconst StyledTable = styled.table(props => getTableStyles(props.theme));\n\nStyledTable.defaultProps = defaultThemeProp;\n\nexport const TableBody: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n const { children, ...restProps } = props;\n return (\n <tbody {...restProps} ref={ref}>\n {children}\n </tbody>\n );\n});\n\nexport const Table: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n const { children, ...restProps } = props;\n return (\n <StyledTable {...restProps} ref={ref}>\n {children}\n </StyledTable>\n );\n});\n\nexport const TableRow: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n const { children, ...restProps } = props;\n return (\n <tr {...restProps} ref={ref}>\n {children}\n </tr>\n );\n});\n\nexport const TableCell: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n const { children, ...restProps } = props;\n return (\n <td {...restProps} ref={ref}>\n {children}\n </td>\n );\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,EAAE,EAQH,MAAM,OAAO,CAAC;AASf,OAAO,EAQL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAajC,OAAO,EAAuB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAmBlF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,EAAE,EAQH,MAAM,OAAO,CAAC;AASf,OAAO,EAQL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAajC,OAAO,EAAuB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAmBlF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAyb1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -58,7 +58,28 @@ const RichTextEditor = forwardRef((props, ref) => {
|
|
|
58
58
|
.map(node => {
|
|
59
59
|
if (markdownOnly && node.children) {
|
|
60
60
|
return node.children
|
|
61
|
-
.map(
|
|
61
|
+
.map(child => {
|
|
62
|
+
let textNode = child;
|
|
63
|
+
if (child.type === 'text') {
|
|
64
|
+
const children = child.children;
|
|
65
|
+
// When input is copied and pasted text nodes can be split into multiple texts, this handles that case
|
|
66
|
+
if (children.length === 1) {
|
|
67
|
+
textNode = children[0];
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
return children
|
|
71
|
+
.map(subChild => {
|
|
72
|
+
const childText = subChild;
|
|
73
|
+
if (childText.searchResult) {
|
|
74
|
+
return childText.searchResult.markdown;
|
|
75
|
+
}
|
|
76
|
+
return childText.text;
|
|
77
|
+
})
|
|
78
|
+
.join('');
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return textNode.searchResult?.markdown || textNode.text;
|
|
82
|
+
})
|
|
62
83
|
.join('');
|
|
63
84
|
}
|
|
64
85
|
return Node.string(node);
|
|
@@ -160,9 +181,14 @@ const RichTextEditor = forwardRef((props, ref) => {
|
|
|
160
181
|
}
|
|
161
182
|
};
|
|
162
183
|
const onKeyDown = useCallback((event) => {
|
|
163
|
-
if (popoverTarget && menu
|
|
164
|
-
event.
|
|
165
|
-
|
|
184
|
+
if (popoverTarget && menu) {
|
|
185
|
+
if (event.key === 'Escape') {
|
|
186
|
+
event.preventDefault();
|
|
187
|
+
setPopoverTarget(null);
|
|
188
|
+
}
|
|
189
|
+
if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
|
|
190
|
+
event.preventDefault();
|
|
191
|
+
}
|
|
166
192
|
}
|
|
167
193
|
else if (event.key === 'Tab' && !event.shiftKey) {
|
|
168
194
|
if (focusableToolbarBtn) {
|
|
@@ -232,7 +258,7 @@ const RichTextEditor = forwardRef((props, ref) => {
|
|
|
232
258
|
disabled: disabled || false
|
|
233
259
|
}, children: _jsx(FormField, { as: StyledRichTextFormField, toolbar: !!(!markdownOnly && toolbar?.length), label:
|
|
234
260
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
|
|
235
|
-
_jsx("span", { onClick: () => onEditorFocus({ focusEditor: true }), children: label }
|
|
261
|
+
_jsx("span", { onClick: () => onEditorFocus({ focusEditor: true }), children: label }), labelHidden: labelHidden, labelFor: '', labelId: labelId, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onDrop: onDrop, onFocus: (e) => {
|
|
236
262
|
if (e.target === formFieldRef.current && !disabled) {
|
|
237
263
|
onEditorFocus({ focusEditor: true });
|
|
238
264
|
}
|
|
@@ -284,9 +310,9 @@ const RichTextEditor = forwardRef((props, ref) => {
|
|
|
284
310
|
}
|
|
285
311
|
}, children: _jsx(Editable, { id: id, renderElement: nodeRenderer, renderLeaf: leafRenderer, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: placeholder, onFocus: (event) => {
|
|
286
312
|
onEditorFocus({ focusEditor: true, event });
|
|
287
|
-
}, onBlur: () => blurEditor(), disabled: disabled, readOnly: readOnly, onPaste: onPaste, tabIndex: disabled ? -1 : undefined, "aria-labelledby": labelId }
|
|
313
|
+
}, onBlur: () => blurEditor(), disabled: disabled, readOnly: readOnly, onPaste: onPaste, tabIndex: disabled ? -1 : undefined, "aria-labelledby": labelId }) }), !markdownOnly && !readOnly && toolbar?.length ? (_jsx(Toolbar, { features: toolbar, sticky: toolbarSticky, setFocusableBtn: el => {
|
|
288
314
|
setFocusableToolbarBtn(el);
|
|
289
|
-
} }
|
|
315
|
+
} })) : null] }), _jsx(Popover, { show: !!popoverTarget && !!menu, strategy: 'fixed', target: searchEl, placement: 'bottom-start', children: menu && (_jsx(Menu, { ...menu, as: StyledSearchPopover, focusControlEl: formFieldRef.current?.querySelector('[role="textbox"]') || undefined, mode: 'action', onItemClick: onMenuItemClick })) })] }) }) }));
|
|
290
316
|
});
|
|
291
317
|
export default RichTextEditor;
|
|
292
318
|
//# sourceMappingURL=RichTextEditor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n useState,\n useRef,\n useMemo,\n FC,\n useEffect,\n useCallback,\n MouseEvent,\n KeyboardEvent,\n useImperativeHandle,\n ClipboardEvent,\n FocusEvent\n} from 'react';\n// Import the Slate editor factory.\nimport { createEditor, Editor, Node, Element, Text, Range, Transforms } from 'slate';\n// Import the Slate components and React plugin.\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react';\nimport { withHistory } from 'slate-history';\nimport styled from 'styled-components';\nimport { VirtualElement } from '@popperjs/core';\n\nimport {\n FormField,\n FormControl,\n StyledPopover,\n useTheme,\n useUID,\n createUID,\n debounce,\n ForwardProps,\n Popover,\n Menu\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n StyledEditorContainer,\n StyledRichTextFormField\n} from './RichTextEditor.styles';\nimport Toolbar from './Toolbar/Toolbar';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { onSearchChange } from './utils/search';\nimport EditorCommands from './utils/EditorCommands';\nimport ListCommands from './utils/ListCommands';\nimport { convertHtml } from './utils/htmlConverter';\nimport { convertSlateToHtml } from './utils/slateConverter';\nimport { RichTextEditorState, RichTextEditorProps } from './RichTextEditor.types';\nimport { RichTextEditorContext, RichTextEditorContextValue } from './RichTextEditor.context';\nimport { convertMarkdownForEditor } from './utils/markdownConverter';\n\nconst withVoids = (editor: Editor): ReactEditor => {\n editor.isVoid = element => {\n if (element.type === 'image' || element.type === 'image-placeholder') {\n return true;\n }\n return false;\n };\n\n return editor as ReactEditor;\n};\n\nconst StyledSearchPopover = styled(StyledPopover)`\n min-width: 20rem;\n`;\n\nconst RichTextEditor: FC<RichTextEditorProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<RichTextEditorProps>, ref: RichTextEditorProps['ref']) => {\n const {\n components: {\n 'text-area': { 'min-height': minHeight }\n }\n } = useTheme();\n const uid = useUID();\n const labelId = useUID();\n const {\n id = uid,\n label,\n labelHidden,\n info,\n status,\n required,\n disabled,\n readOnly,\n onChange,\n onFocus,\n onBlur,\n placeholder,\n toolbar,\n onImageAdded,\n markdownOnly,\n searchTriggers,\n onSearch,\n getSearchItemReplacement,\n searchRenderers,\n menu,\n height = { min: minHeight },\n defaultValue,\n autoFocus,\n ...restProps\n } = props;\n\n const formFieldRef = useRef<HTMLElement>(null);\n const editor = useMemo(() => withVoids(withReact(withHistory(createEditor()))), []);\n const [value, setValue] = useState<(Element | Text)[]>(() =>\n defaultValue && !markdownOnly\n ? convertHtml(defaultValue)\n : convertMarkdownForEditor(defaultValue, searchRenderers)\n );\n const [toolbarPopover, setToolbarPopover] = useState(false);\n const [toolbarSticky, setToolbarSticky] = useState(false);\n const [focusableToolbarBtn, setFocusableToolbarBtn] = useState<HTMLElement | null>(null);\n\n const [popoverTarget, setPopoverTarget] = useState<Range | null>(null);\n const [searchEl, setSearchEl] = useState<VirtualElement | null>(null);\n\n const updateToolbarStyle = () => {\n if ((formFieldRef.current?.offsetHeight || 0) > window.innerHeight) {\n setToolbarSticky(true);\n } else {\n setToolbarSticky(false);\n }\n };\n\n const debouncedUpdateToolbarStyle = debounce(updateToolbarStyle, 200);\n\n const getPlainText = () => {\n return value\n .map(node => {\n if (markdownOnly && (node as Element).children) {\n return (node as Element).children\n .map(textNode => (textNode as Text).searchResult?.markdown || (textNode as Text).text)\n .join('');\n }\n return Node.string(node);\n })\n .join('\\n');\n };\n\n const onEditorFocus: RichTextEditorContextValue['onEditorFocus'] = ({\n event,\n force,\n focusEditor,\n runAfterFocus\n }) => {\n if (focusEditor) {\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor)) {\n ReactEditor.focus(editor);\n onFocus?.();\n }\n }, 0);\n }\n\n if (runAfterFocus && (force || (!disabled && !toolbarPopover))) {\n setTimeout(runAfterFocus, 0);\n } else {\n event?.stopPropagation();\n }\n };\n\n const blurEditor = (force?: boolean) => {\n if (force) ReactEditor.blur(editor);\n if (ReactEditor.isFocused(editor)) {\n onBlur?.();\n }\n setPopoverTarget(null);\n };\n\n useImperativeHandle<any, RichTextEditorState>(\n ref,\n () => ({\n focus: () => {\n onEditorFocus({ focusEditor: true });\n },\n getPlainText: () => {\n return getPlainText();\n },\n getRichText: () => {\n return JSON.stringify(value);\n },\n getHtml: () => {\n return convertSlateToHtml(value);\n },\n clear: () => {\n const point = { path: [0, 0], offset: 0 };\n editor.selection = { anchor: point, focus: point };\n editor.children = [\n {\n type: 'paragraph',\n children: [{ text: '' }]\n }\n ];\n setValue(editor.children);\n },\n appendImage: ({ src, alt }, imageId) => {\n const path = EditorCommands.appendImage(editor, { src, alt }, imageId);\n if (path) {\n Transforms.select(editor, { anchor: path, focus: path });\n ReactEditor.focus(editor);\n }\n },\n insertText: (text: string) => {\n editor.insertText(text);\n },\n insertHtml: (html: string, overwrite: boolean = false) => {\n if (overwrite) {\n const point = { path: [0, 0], offset: 0 };\n editor.selection = { anchor: point, focus: point };\n editor.children = convertHtml(html !== '' ? html : '<p></p>');\n } else {\n editor.children = [...value, ...convertHtml(html)];\n }\n setValue(editor.children);\n }\n }),\n [editor, value]\n );\n\n const onMenuItemClick = (itemId: string, e: MouseEvent<any> | KeyboardEvent<any>) => {\n // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.\n menu?.onItemClick?.(itemId, e as MouseEvent<any>);\n const replacement = getSearchItemReplacement?.(itemId);\n if (replacement) {\n let node: Node;\n\n if (replacement.markdown && replacement.component && replacement.props) {\n node = {\n text: replacement.text,\n searchResult: {\n markdown: replacement.markdown,\n component: replacement.component,\n props: replacement.props,\n // Prevents copying searchResult attribute onPaste\n toJSON: () => undefined\n }\n };\n } else {\n node = { text: replacement.text };\n }\n\n EditorCommands.replaceWithNodes(editor, popoverTarget, node);\n }\n };\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<any>) => {\n if (popoverTarget && menu && event.key === 'Escape') {\n event.preventDefault();\n setPopoverTarget(null);\n } else if (event.key === 'Tab' && !event.shiftKey) {\n if (focusableToolbarBtn) {\n focusableToolbarBtn.focus();\n event.preventDefault();\n }\n } else {\n ListCommands.checkListEnter(editor, event);\n EditorCommands.checkLinkBreak(editor, event);\n EditorCommands.checkSearchDownKeys(editor, event);\n EditorCommands.checkImageEnter(editor, event);\n EditorCommands.checkKeyCommands(editor, event);\n }\n },\n [menu, popoverTarget, focusableToolbarBtn]\n );\n\n const onKeyUp = (event: KeyboardEvent<any>) => {\n EditorCommands.checkSearchUpKeys(editor, event);\n };\n\n // Adds an image placeholder to be replaced later in time by an image\n const addImage = (file: File) => {\n const placeholderId = EditorCommands.appendImagePlaceholder(editor);\n if (placeholderId) onImageAdded?.(file, placeholderId);\n };\n\n const onPaste = (e: ClipboardEvent) => {\n let image;\n for (let i = 0; i < e.clipboardData.items.length; i += 1) {\n const item = e.clipboardData.items[i];\n\n if (item.type.startsWith('image')) {\n image = item.getAsFile();\n }\n }\n\n if (image) {\n e.preventDefault();\n addImage(image);\n }\n };\n\n const onDrop = (e: DragEvent) => {\n e.preventDefault();\n if (e.dataTransfer) {\n Array.from(e.dataTransfer.files).forEach(file => {\n if (file.type.includes('image')) {\n addImage(file);\n }\n });\n }\n };\n\n useEffect(() => {\n if (popoverTarget) {\n setSearchEl(ReactEditor.toDOMRange(editor, popoverTarget) as VirtualElement);\n }\n }, [popoverTarget]);\n\n useEffect(() => {\n onChange?.();\n }, [value]);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n ReactEditor.focus(editor);\n }, 0);\n }\n }, []);\n\n return (\n <RichTextEditorContext.Provider\n value={{\n addImage,\n setPopoverOpen: setToolbarPopover,\n onEditorFocus,\n disabled: disabled || false\n }}\n >\n <FormField\n as={StyledRichTextFormField}\n toolbar={!!(!markdownOnly && toolbar?.length)}\n label={\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <span onClick={() => onEditorFocus({ focusEditor: true })}>{label}</span>\n }\n labelHidden={labelHidden}\n labelFor=''\n labelId={labelId}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onDrop={onDrop}\n onFocus={(e: FocusEvent) => {\n if (e.target === formFieldRef.current && !disabled) {\n onEditorFocus({ focusEditor: true });\n }\n }}\n ref={formFieldRef}\n aria-label={`${label} ${\n !markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''\n }`}\n tabIndex={disabled ? -1 : undefined}\n >\n <Slate\n editor={editor}\n value={value}\n onChange={newValue => {\n if (!disabled) {\n setValue(newValue);\n debouncedUpdateToolbarStyle();\n\n if (searchTriggers && onSearch && markdownOnly) {\n const res = searchTriggers.flatMap(({ trigger, regex }) => {\n for (let i = 0; i < 10; i += 1) {\n try {\n const groupId = createUID();\n return [\n {\n trigger,\n groupId: `g${groupId}`,\n regex: new RegExp(\n String.raw`(?:^|\\s)(?<match>${trigger}(?<g${groupId}>${\n regex || String.raw`\\w*`\n }))$`\n )\n }\n ];\n } catch (e: unknown) {\n if (!(e instanceof SyntaxError)) throw e;\n }\n }\n\n // Failsafe\n return [];\n });\n\n let search;\n for (let i = 0; i < res.length; i += 1) {\n search = onSearchChange(editor, res[i]);\n if (search) break;\n }\n\n if (search) {\n setPopoverTarget(search.target);\n onSearch({ search: search.search, trigger: search.trigger });\n } else {\n setPopoverTarget(null);\n }\n }\n }\n }}\n >\n <FormControl\n {...restProps}\n ref={ref}\n ariaLabel={label}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n as={StyledRichTextEditor}\n toolbar={!!(!markdownOnly && toolbar?.length)}\n onClick={() => {\n onEditorFocus({ focusEditor: true });\n }}\n focused={ReactEditor.isFocused(editor)}\n >\n <StyledEditorContainer\n toolbar={!!(!markdownOnly && toolbar?.length)}\n containerHeight={height}\n onClick={() => {\n if (!disabled) {\n onEditorFocus({ focusEditor: true });\n }\n }}\n >\n <Editable\n id={id}\n renderElement={nodeRenderer}\n renderLeaf={leafRenderer}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n placeholder={placeholder}\n onFocus={(event: FocusEvent) => {\n onEditorFocus({ focusEditor: true, event });\n }}\n onBlur={() => blurEditor()}\n disabled={disabled}\n readOnly={readOnly}\n onPaste={onPaste}\n tabIndex={disabled ? -1 : undefined}\n aria-labelledby={labelId}\n />\n </StyledEditorContainer>\n {!markdownOnly && !readOnly && toolbar?.length ? (\n <Toolbar\n features={toolbar}\n sticky={toolbarSticky}\n setFocusableBtn={el => {\n setFocusableToolbarBtn(el);\n }}\n />\n ) : null}\n </FormControl>\n <Popover\n show={!!popoverTarget && !!menu}\n strategy='fixed'\n target={searchEl}\n placement='bottom-start'\n >\n {menu && (\n <Menu\n {...menu}\n as={StyledSearchPopover}\n focusControlEl={\n formFieldRef.current?.querySelector('[role=\"textbox\"]') || undefined\n }\n mode='action'\n onItemClick={onMenuItemClick}\n />\n )}\n </Popover>\n </Slate>\n </FormField>\n </RichTextEditorContext.Provider>\n );\n }\n);\n\nexport default RichTextEditor;\n"]}
|
|
1
|
+
{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n useState,\n useRef,\n useMemo,\n FC,\n useEffect,\n useCallback,\n MouseEvent,\n KeyboardEvent,\n useImperativeHandle,\n ClipboardEvent,\n FocusEvent\n} from 'react';\n// Import the Slate editor factory.\nimport { createEditor, Editor, Node, Element, Text, Range, Transforms } from 'slate';\n// Import the Slate components and React plugin.\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react';\nimport { withHistory } from 'slate-history';\nimport styled from 'styled-components';\nimport { VirtualElement } from '@popperjs/core';\n\nimport {\n FormField,\n FormControl,\n StyledPopover,\n useTheme,\n useUID,\n createUID,\n debounce,\n ForwardProps,\n Popover,\n Menu\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, {\n StyledEditorContainer,\n StyledRichTextFormField\n} from './RichTextEditor.styles';\nimport Toolbar from './Toolbar/Toolbar';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { onSearchChange } from './utils/search';\nimport EditorCommands from './utils/EditorCommands';\nimport ListCommands from './utils/ListCommands';\nimport { convertHtml } from './utils/htmlConverter';\nimport { convertSlateToHtml } from './utils/slateConverter';\nimport { RichTextEditorState, RichTextEditorProps } from './RichTextEditor.types';\nimport { RichTextEditorContext, RichTextEditorContextValue } from './RichTextEditor.context';\nimport { convertMarkdownForEditor } from './utils/markdownConverter';\n\nconst withVoids = (editor: Editor): ReactEditor => {\n editor.isVoid = element => {\n if (element.type === 'image' || element.type === 'image-placeholder') {\n return true;\n }\n return false;\n };\n\n return editor as ReactEditor;\n};\n\nconst StyledSearchPopover = styled(StyledPopover)`\n min-width: 20rem;\n`;\n\nconst RichTextEditor: FC<RichTextEditorProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<RichTextEditorProps>, ref: RichTextEditorProps['ref']) => {\n const {\n components: {\n 'text-area': { 'min-height': minHeight }\n }\n } = useTheme();\n const uid = useUID();\n const labelId = useUID();\n const {\n id = uid,\n label,\n labelHidden,\n info,\n status,\n required,\n disabled,\n readOnly,\n onChange,\n onFocus,\n onBlur,\n placeholder,\n toolbar,\n onImageAdded,\n markdownOnly,\n searchTriggers,\n onSearch,\n getSearchItemReplacement,\n searchRenderers,\n menu,\n height = { min: minHeight },\n defaultValue,\n autoFocus,\n ...restProps\n } = props;\n\n const formFieldRef = useRef<HTMLElement>(null);\n const editor = useMemo(() => withVoids(withReact(withHistory(createEditor()))), []);\n const [value, setValue] = useState<(Element | Text)[]>(() =>\n defaultValue && !markdownOnly\n ? convertHtml(defaultValue)\n : convertMarkdownForEditor(defaultValue, searchRenderers)\n );\n const [toolbarPopover, setToolbarPopover] = useState(false);\n const [toolbarSticky, setToolbarSticky] = useState(false);\n const [focusableToolbarBtn, setFocusableToolbarBtn] = useState<HTMLElement | null>(null);\n\n const [popoverTarget, setPopoverTarget] = useState<Range | null>(null);\n const [searchEl, setSearchEl] = useState<VirtualElement | null>(null);\n\n const updateToolbarStyle = () => {\n if ((formFieldRef.current?.offsetHeight || 0) > window.innerHeight) {\n setToolbarSticky(true);\n } else {\n setToolbarSticky(false);\n }\n };\n\n const debouncedUpdateToolbarStyle = debounce(updateToolbarStyle, 200);\n\n const getPlainText = () => {\n return value\n .map(node => {\n if (markdownOnly && (node as Element).children) {\n return (node as Element).children\n .map(child => {\n let textNode = child;\n if ((child as Element).type === 'text') {\n const children = (child as Element).children;\n // When input is copied and pasted text nodes can be split into multiple texts, this handles that case\n if (children.length === 1) {\n textNode = children[0];\n } else {\n return children\n .map(subChild => {\n const childText = subChild as Text;\n if (childText.searchResult) {\n return childText.searchResult.markdown;\n }\n return childText.text;\n })\n .join('');\n }\n }\n return (textNode as Text).searchResult?.markdown || (textNode as Text).text;\n })\n .join('');\n }\n return Node.string(node);\n })\n .join('\\n');\n };\n\n const onEditorFocus: RichTextEditorContextValue['onEditorFocus'] = ({\n event,\n force,\n focusEditor,\n runAfterFocus\n }) => {\n if (focusEditor) {\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor)) {\n ReactEditor.focus(editor);\n onFocus?.();\n }\n }, 0);\n }\n\n if (runAfterFocus && (force || (!disabled && !toolbarPopover))) {\n setTimeout(runAfterFocus, 0);\n } else {\n event?.stopPropagation();\n }\n };\n\n const blurEditor = (force?: boolean) => {\n if (force) ReactEditor.blur(editor);\n if (ReactEditor.isFocused(editor)) {\n onBlur?.();\n }\n setPopoverTarget(null);\n };\n\n useImperativeHandle<any, RichTextEditorState>(\n ref,\n () => ({\n focus: () => {\n onEditorFocus({ focusEditor: true });\n },\n getPlainText: () => {\n return getPlainText();\n },\n getRichText: () => {\n return JSON.stringify(value);\n },\n getHtml: () => {\n return convertSlateToHtml(value);\n },\n clear: () => {\n const point = { path: [0, 0], offset: 0 };\n editor.selection = { anchor: point, focus: point };\n editor.children = [\n {\n type: 'paragraph',\n children: [{ text: '' }]\n }\n ];\n setValue(editor.children);\n },\n appendImage: ({ src, alt }, imageId) => {\n const path = EditorCommands.appendImage(editor, { src, alt }, imageId);\n if (path) {\n Transforms.select(editor, { anchor: path, focus: path });\n ReactEditor.focus(editor);\n }\n },\n insertText: (text: string) => {\n editor.insertText(text);\n },\n insertHtml: (html: string, overwrite: boolean = false) => {\n if (overwrite) {\n const point = { path: [0, 0], offset: 0 };\n editor.selection = { anchor: point, focus: point };\n editor.children = convertHtml(html !== '' ? html : '<p></p>');\n } else {\n editor.children = [...value, ...convertHtml(html)];\n }\n setValue(editor.children);\n }\n }),\n [editor, value]\n );\n\n const onMenuItemClick = (itemId: string, e: MouseEvent<any> | KeyboardEvent<any>) => {\n // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.\n menu?.onItemClick?.(itemId, e as MouseEvent<any>);\n const replacement = getSearchItemReplacement?.(itemId);\n if (replacement) {\n let node: Node;\n\n if (replacement.markdown && replacement.component && replacement.props) {\n node = {\n text: replacement.text,\n searchResult: {\n markdown: replacement.markdown,\n component: replacement.component,\n props: replacement.props,\n // Prevents copying searchResult attribute onPaste\n toJSON: () => undefined\n }\n };\n } else {\n node = { text: replacement.text };\n }\n\n EditorCommands.replaceWithNodes(editor, popoverTarget, node);\n }\n };\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<any>) => {\n if (popoverTarget && menu) {\n if (event.key === 'Escape') {\n event.preventDefault();\n setPopoverTarget(null);\n }\n if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {\n event.preventDefault();\n }\n } else if (event.key === 'Tab' && !event.shiftKey) {\n if (focusableToolbarBtn) {\n focusableToolbarBtn.focus();\n event.preventDefault();\n }\n } else {\n ListCommands.checkListEnter(editor, event);\n EditorCommands.checkLinkBreak(editor, event);\n EditorCommands.checkSearchDownKeys(editor, event);\n EditorCommands.checkImageEnter(editor, event);\n EditorCommands.checkKeyCommands(editor, event);\n }\n },\n [menu, popoverTarget, focusableToolbarBtn]\n );\n\n const onKeyUp = (event: KeyboardEvent<any>) => {\n EditorCommands.checkSearchUpKeys(editor, event);\n };\n\n // Adds an image placeholder to be replaced later in time by an image\n const addImage = (file: File) => {\n const placeholderId = EditorCommands.appendImagePlaceholder(editor);\n if (placeholderId) onImageAdded?.(file, placeholderId);\n };\n\n const onPaste = (e: ClipboardEvent) => {\n let image;\n for (let i = 0; i < e.clipboardData.items.length; i += 1) {\n const item = e.clipboardData.items[i];\n\n if (item.type.startsWith('image')) {\n image = item.getAsFile();\n }\n }\n\n if (image) {\n e.preventDefault();\n addImage(image);\n }\n };\n\n const onDrop = (e: DragEvent) => {\n e.preventDefault();\n if (e.dataTransfer) {\n Array.from(e.dataTransfer.files).forEach(file => {\n if (file.type.includes('image')) {\n addImage(file);\n }\n });\n }\n };\n\n useEffect(() => {\n if (popoverTarget) {\n setSearchEl(ReactEditor.toDOMRange(editor, popoverTarget) as VirtualElement);\n }\n }, [popoverTarget]);\n\n useEffect(() => {\n onChange?.();\n }, [value]);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n ReactEditor.focus(editor);\n }, 0);\n }\n }, []);\n\n return (\n <RichTextEditorContext.Provider\n value={{\n addImage,\n setPopoverOpen: setToolbarPopover,\n onEditorFocus,\n disabled: disabled || false\n }}\n >\n <FormField\n as={StyledRichTextFormField}\n toolbar={!!(!markdownOnly && toolbar?.length)}\n label={\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n <span onClick={() => onEditorFocus({ focusEditor: true })}>{label}</span>\n }\n labelHidden={labelHidden}\n labelFor=''\n labelId={labelId}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onDrop={onDrop}\n onFocus={(e: FocusEvent) => {\n if (e.target === formFieldRef.current && !disabled) {\n onEditorFocus({ focusEditor: true });\n }\n }}\n ref={formFieldRef}\n aria-label={`${label} ${\n !markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''\n }`}\n tabIndex={disabled ? -1 : undefined}\n >\n <Slate\n editor={editor}\n value={value}\n onChange={newValue => {\n if (!disabled) {\n setValue(newValue);\n debouncedUpdateToolbarStyle();\n\n if (searchTriggers && onSearch && markdownOnly) {\n const res = searchTriggers.flatMap(({ trigger, regex }) => {\n for (let i = 0; i < 10; i += 1) {\n try {\n const groupId = createUID();\n return [\n {\n trigger,\n groupId: `g${groupId}`,\n regex: new RegExp(\n String.raw`(?:^|\\s)(?<match>${trigger}(?<g${groupId}>${\n regex || String.raw`\\w*`\n }))$`\n )\n }\n ];\n } catch (e: unknown) {\n if (!(e instanceof SyntaxError)) throw e;\n }\n }\n\n // Failsafe\n return [];\n });\n\n let search;\n for (let i = 0; i < res.length; i += 1) {\n search = onSearchChange(editor, res[i]);\n if (search) break;\n }\n\n if (search) {\n setPopoverTarget(search.target);\n onSearch({ search: search.search, trigger: search.trigger });\n } else {\n setPopoverTarget(null);\n }\n }\n }\n }}\n >\n <FormControl\n {...restProps}\n ref={ref}\n ariaLabel={label}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n as={StyledRichTextEditor}\n toolbar={!!(!markdownOnly && toolbar?.length)}\n onClick={() => {\n onEditorFocus({ focusEditor: true });\n }}\n focused={ReactEditor.isFocused(editor)}\n >\n <StyledEditorContainer\n toolbar={!!(!markdownOnly && toolbar?.length)}\n containerHeight={height}\n onClick={() => {\n if (!disabled) {\n onEditorFocus({ focusEditor: true });\n }\n }}\n >\n <Editable\n id={id}\n renderElement={nodeRenderer}\n renderLeaf={leafRenderer}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n placeholder={placeholder}\n onFocus={(event: FocusEvent) => {\n onEditorFocus({ focusEditor: true, event });\n }}\n onBlur={() => blurEditor()}\n disabled={disabled}\n readOnly={readOnly}\n onPaste={onPaste}\n tabIndex={disabled ? -1 : undefined}\n aria-labelledby={labelId}\n />\n </StyledEditorContainer>\n {!markdownOnly && !readOnly && toolbar?.length ? (\n <Toolbar\n features={toolbar}\n sticky={toolbarSticky}\n setFocusableBtn={el => {\n setFocusableToolbarBtn(el);\n }}\n />\n ) : null}\n </FormControl>\n <Popover\n show={!!popoverTarget && !!menu}\n strategy='fixed'\n target={searchEl}\n placement='bottom-start'\n >\n {menu && (\n <Menu\n {...menu}\n as={StyledSearchPopover}\n focusControlEl={\n formFieldRef.current?.querySelector('[role=\"textbox\"]') || undefined\n }\n mode='action'\n onItemClick={onMenuItemClick}\n />\n )}\n </Popover>\n </Slate>\n </FormField>\n </RichTextEditorContext.Provider>\n );\n }\n);\n\nexport default RichTextEditor;\n"]}
|
|
@@ -5,11 +5,9 @@ interface StyledRichTextEditorProps {
|
|
|
5
5
|
readOnly?: boolean;
|
|
6
6
|
containerHeight?: RichTextEditorProps['height'];
|
|
7
7
|
}
|
|
8
|
-
export declare const listStyles: import("styled-components").FlattenSimpleInterpolation;
|
|
9
8
|
export declare const StyledEditorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
|
|
10
9
|
declare const StyledRichTextEditor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
|
|
11
10
|
export declare const StyledRichTextFormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
|
|
12
11
|
export declare const StyledRichTextViewer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
|
-
export declare const StyledHtml: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
14
12
|
export default StyledRichTextEditor;
|
|
15
13
|
//# sourceMappingURL=RichTextEditor.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,UAAU,yBAAyB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,qBAAqB,gIAsCjC,CAAC;AAIF,QAAA,MAAM,oBAAoB,gIAqBzB,CAAC;AAIF,eAAO,MAAM,uBAAuB,gIAUlC,CAAC;AAEH,eAAO,MAAM,oBAAoB,yGAWhC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|