@pega/cosmos-react-rte 2.1.3 → 2.1.6
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/package.json +4 -4
- package/lib/components/Editor/Editor.context.d.ts +0 -10
- package/lib/components/Editor/Editor.context.d.ts.map +0 -1
- package/lib/components/Editor/Editor.context.js +0 -10
- package/lib/components/Editor/Editor.context.js.map +0 -1
- package/lib/components/Editor/Editor.d.ts +0 -10
- package/lib/components/Editor/Editor.d.ts.map +0 -1
- package/lib/components/Editor/Editor.js +0 -187
- package/lib/components/Editor/Editor.js.map +0 -1
- package/lib/components/Editor/Editor.types.d.ts +0 -48
- package/lib/components/Editor/Editor.types.d.ts.map +0 -1
- package/lib/components/Editor/Editor.types.js +0 -2
- package/lib/components/Editor/Editor.types.js.map +0 -1
- package/lib/components/Editor/Toolbar/AnchorButton.d.ts +0 -10
- package/lib/components/Editor/Toolbar/AnchorButton.d.ts.map +0 -1
- package/lib/components/Editor/Toolbar/AnchorButton.js +0 -141
- package/lib/components/Editor/Toolbar/AnchorButton.js.map +0 -1
- package/lib/components/Editor/Toolbar/ImageButton.d.ts +0 -8
- package/lib/components/Editor/Toolbar/ImageButton.d.ts.map +0 -1
- package/lib/components/Editor/Toolbar/ImageButton.js +0 -30
- package/lib/components/Editor/Toolbar/ImageButton.js.map +0 -1
- package/lib/components/Editor/Toolbar/TextSelect.d.ts +0 -14
- package/lib/components/Editor/Toolbar/TextSelect.d.ts.map +0 -1
- package/lib/components/Editor/Toolbar/TextSelect.js +0 -117
- package/lib/components/Editor/Toolbar/TextSelect.js.map +0 -1
- package/lib/components/Editor/Toolbar/Toolbar.d.ts +0 -13
- package/lib/components/Editor/Toolbar/Toolbar.d.ts.map +0 -1
- package/lib/components/Editor/Toolbar/Toolbar.js +0 -142
- package/lib/components/Editor/Toolbar/Toolbar.js.map +0 -1
- package/lib/components/Editor/index.d.ts +0 -4
- package/lib/components/Editor/index.d.ts.map +0 -1
- package/lib/components/Editor/index.js +0 -3
- package/lib/components/Editor/index.js.map +0 -1
- package/lib/components/RichTextEditor/DecoratorComponents/CodeBlock.d.ts +0 -4
- package/lib/components/RichTextEditor/DecoratorComponents/CodeBlock.d.ts.map +0 -1
- package/lib/components/RichTextEditor/DecoratorComponents/CodeBlock.js +0 -15
- package/lib/components/RichTextEditor/DecoratorComponents/CodeBlock.js.map +0 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Image.d.ts +0 -4
- package/lib/components/RichTextEditor/DecoratorComponents/Image.d.ts.map +0 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Image.js +0 -7
- package/lib/components/RichTextEditor/DecoratorComponents/Image.js.map +0 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Link.d.ts +0 -4
- package/lib/components/RichTextEditor/DecoratorComponents/Link.d.ts.map +0 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Link.js +0 -8
- package/lib/components/RichTextEditor/DecoratorComponents/Link.js.map +0 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Table.d.ts +0 -8
- package/lib/components/RichTextEditor/DecoratorComponents/Table.d.ts.map +0 -1
- package/lib/components/RichTextEditor/DecoratorComponents/Table.js +0 -51
- package/lib/components/RichTextEditor/DecoratorComponents/Table.js.map +0 -1
- package/lib/components/RichTextEditor/RichTextEditor.context.d.ts +0 -15
- package/lib/components/RichTextEditor/RichTextEditor.context.d.ts.map +0 -1
- package/lib/components/RichTextEditor/RichTextEditor.context.js +0 -11
- package/lib/components/RichTextEditor/RichTextEditor.context.js.map +0 -1
- package/lib/components/RichTextEditor/RichTextEditor.d.ts +0 -6
- package/lib/components/RichTextEditor/RichTextEditor.d.ts.map +0 -1
- package/lib/components/RichTextEditor/RichTextEditor.js +0 -292
- package/lib/components/RichTextEditor/RichTextEditor.js.map +0 -1
- package/lib/components/RichTextEditor/RichTextEditor.styles.d.ts +0 -15
- package/lib/components/RichTextEditor/RichTextEditor.styles.d.ts.map +0 -1
- package/lib/components/RichTextEditor/RichTextEditor.styles.js +0 -189
- package/lib/components/RichTextEditor/RichTextEditor.styles.js.map +0 -1
- package/lib/components/RichTextEditor/RichTextEditor.types.d.ts +0 -80
- package/lib/components/RichTextEditor/RichTextEditor.types.d.ts.map +0 -1
- package/lib/components/RichTextEditor/RichTextEditor.types.js +0 -2
- package/lib/components/RichTextEditor/RichTextEditor.types.js.map +0 -1
- package/lib/components/RichTextEditor/RichTextViewer.d.ts +0 -6
- package/lib/components/RichTextEditor/RichTextViewer.d.ts.map +0 -1
- package/lib/components/RichTextEditor/RichTextViewer.js +0 -52
- package/lib/components/RichTextEditor/RichTextViewer.js.map +0 -1
- package/lib/components/RichTextEditor/RichTextViewer.types.d.ts +0 -26
- package/lib/components/RichTextEditor/RichTextViewer.types.d.ts.map +0 -1
- package/lib/components/RichTextEditor/RichTextViewer.types.js +0 -2
- package/lib/components/RichTextEditor/RichTextViewer.types.js.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/AnchorButton.d.ts +0 -8
- package/lib/components/RichTextEditor/Toolbar/AnchorButton.d.ts.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/AnchorButton.js +0 -156
- package/lib/components/RichTextEditor/Toolbar/AnchorButton.js.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/ImageButton.d.ts +0 -5
- package/lib/components/RichTextEditor/Toolbar/ImageButton.d.ts.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/ImageButton.js +0 -30
- package/lib/components/RichTextEditor/Toolbar/ImageButton.js.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/IndentButton.d.ts +0 -8
- package/lib/components/RichTextEditor/Toolbar/IndentButton.d.ts.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/IndentButton.js +0 -28
- package/lib/components/RichTextEditor/Toolbar/IndentButton.js.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/TableButton.d.ts +0 -5
- package/lib/components/RichTextEditor/Toolbar/TableButton.d.ts.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/TableButton.js +0 -20
- package/lib/components/RichTextEditor/Toolbar/TableButton.js.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/TextSelect.d.ts +0 -6
- package/lib/components/RichTextEditor/Toolbar/TextSelect.d.ts.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/TextSelect.js +0 -119
- package/lib/components/RichTextEditor/Toolbar/TextSelect.js.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/Toolbar.d.ts +0 -10
- package/lib/components/RichTextEditor/Toolbar/Toolbar.d.ts.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/Toolbar.js +0 -140
- package/lib/components/RichTextEditor/Toolbar/Toolbar.js.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/Toolbar.types.d.ts +0 -9
- package/lib/components/RichTextEditor/Toolbar/Toolbar.types.d.ts.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/Toolbar.types.js +0 -2
- package/lib/components/RichTextEditor/Toolbar/Toolbar.types.js.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/ToolbarButton.d.ts +0 -14
- package/lib/components/RichTextEditor/Toolbar/ToolbarButton.d.ts.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/ToolbarButton.js +0 -66
- package/lib/components/RichTextEditor/Toolbar/ToolbarButton.js.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/utils.d.ts +0 -7
- package/lib/components/RichTextEditor/Toolbar/utils.d.ts.map +0 -1
- package/lib/components/RichTextEditor/Toolbar/utils.js +0 -13
- package/lib/components/RichTextEditor/Toolbar/utils.js.map +0 -1
- package/lib/components/RichTextEditor/index.d.ts +0 -8
- package/lib/components/RichTextEditor/index.d.ts.map +0 -1
- package/lib/components/RichTextEditor/index.js +0 -5
- package/lib/components/RichTextEditor/index.js.map +0 -1
- package/lib/components/RichTextEditor/utils/EditorCommands.d.ts +0 -33
- package/lib/components/RichTextEditor/utils/EditorCommands.d.ts.map +0 -1
- package/lib/components/RichTextEditor/utils/EditorCommands.js +0 -423
- package/lib/components/RichTextEditor/utils/EditorCommands.js.map +0 -1
- package/lib/components/RichTextEditor/utils/ListCommands.d.ts +0 -10
- package/lib/components/RichTextEditor/utils/ListCommands.d.ts.map +0 -1
- package/lib/components/RichTextEditor/utils/ListCommands.js +0 -346
- package/lib/components/RichTextEditor/utils/ListCommands.js.map +0 -1
- package/lib/components/RichTextEditor/utils/htmlConverter.d.ts +0 -29
- package/lib/components/RichTextEditor/utils/htmlConverter.d.ts.map +0 -1
- package/lib/components/RichTextEditor/utils/htmlConverter.js +0 -155
- package/lib/components/RichTextEditor/utils/htmlConverter.js.map +0 -1
- package/lib/components/RichTextEditor/utils/interactionRenderer.d.ts +0 -12
- package/lib/components/RichTextEditor/utils/interactionRenderer.d.ts.map +0 -1
- package/lib/components/RichTextEditor/utils/interactionRenderer.js +0 -105
- package/lib/components/RichTextEditor/utils/interactionRenderer.js.map +0 -1
- package/lib/components/RichTextEditor/utils/markdownConverter.d.ts +0 -7
- package/lib/components/RichTextEditor/utils/markdownConverter.d.ts.map +0 -1
- package/lib/components/RichTextEditor/utils/markdownConverter.js +0 -130
- package/lib/components/RichTextEditor/utils/markdownConverter.js.map +0 -1
- package/lib/components/RichTextEditor/utils/renderers.d.ts +0 -5
- package/lib/components/RichTextEditor/utils/renderers.d.ts.map +0 -1
- package/lib/components/RichTextEditor/utils/renderers.js +0 -68
- package/lib/components/RichTextEditor/utils/renderers.js.map +0 -1
- package/lib/components/RichTextEditor/utils/search.d.ts +0 -11
- package/lib/components/RichTextEditor/utils/search.d.ts.map +0 -1
- package/lib/components/RichTextEditor/utils/search.js +0 -29
- package/lib/components/RichTextEditor/utils/search.js.map +0 -1
- package/lib/components/RichTextEditor/utils/slateConverter.d.ts +0 -24
- package/lib/components/RichTextEditor/utils/slateConverter.d.ts.map +0 -1
- package/lib/components/RichTextEditor/utils/slateConverter.js +0 -87
- package/lib/components/RichTextEditor/utils/slateConverter.js.map +0 -1
- package/lib/components/RichTextEditor/utils/utils.types.d.ts +0 -3
- package/lib/components/RichTextEditor/utils/utils.types.d.ts.map +0 -1
- package/lib/components/RichTextEditor/utils/utils.types.js +0 -3
- package/lib/components/RichTextEditor/utils/utils.types.js.map +0 -1
- package/lib/index.d.ts +0 -3
- package/lib/index.d.ts.map +0 -1
- package/lib/index.js +0 -4
- package/lib/index.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.types.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref, ComponentType } from 'react';\n\nimport { FormControlProps, MenuProps } from '@pega/cosmos-react-core';\nimport { BaseProps } from '@pega/cosmos-react-core/lib/types';\n\nimport { Features } from './Toolbar/Toolbar.types';\n\nexport type RichTextEditorState = {\n focus: () => void;\n getPlainText: () => string;\n getRichText: () => string;\n getHtml: () => string;\n clear: () => void;\n appendImage: (imageData: { src: string; alt: string }, id: string) => void;\n /** This functionality will only work when the editor is focused. */\n insertText: (text: string) => void;\n insertHtml: (html: string, overwrite: boolean) => void;\n};\n\nexport interface SearchRenderers {\n regexPattern: RegExp;\n getSearchAttributes: (\n searchResult: RegExpExecArray\n ) =>\n | { markdown: string; component: ComponentType<any>; props: Record<string, any>; text: string }\n | undefined;\n}\nexport interface RichTextEditorProps extends FormControlProps, BaseProps {\n /** An array of strings that activate features on the toolbar */\n toolbar?: Features[];\n /** Turning on markdown only turns off the tool bar, any rich text features, and input styling */\n markdownOnly?: boolean;\n /** A set of characters that designate special search capabilities. */\n searchTriggers?: {\n trigger: string;\n regex?: string;\n }[];\n /** Callback triggered on text change following a valid search trigger. */\n onSearch?: (event: { search: string; trigger: string }) => void;\n /** Callback triggered on selection of a search result that returns an object representing the node to replace the search with. */\n getSearchItemReplacement?: (id: string) =>\n | {\n markdown?: string;\n component?: ComponentType<any>;\n props?: Record<string, any>;\n text: string;\n }\n | undefined;\n /**\n * A set of custom renderer configurations to convert markdown for search results.\n * @internal\n * */\n searchRenderers?: SearchRenderers[];\n /** The menu that will render as a response to a search query. */\n menu?: MenuProps;\n /** A callback that supplies an object with functions that can manipulate the editor and retrieve it's content/state */\n onChange?: () => void;\n /** A callback that runs if the editor is focused */\n onFocus?: () => void;\n /** A callback that runs if the editor loses focus */\n onBlur?: () => void;\n /** A callback when an image is added through the toolbar image feature */\n onImageAdded?: (image: File, id: string) => void;\n /** Standard placeholder for an input */\n placeholder?: string;\n /** Default value for the RTE - HTML String */\n defaultValue?: string;\n /** Will automatically focus the RTE on render if true */\n autoFocus?: boolean;\n /** Sets the height for the RTE. If no max height is set the RTE will continue to expand, otherwise an overflow will be applied */\n height?:\n | string\n | {\n min?: string;\n max?: string;\n };\n type?: 'html' | 'markdown';\n /** Handle to the state. */\n ref?: Ref<RichTextEditorState>;\n}\n"]}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
-
import { RichTextViewerProps } from './RichTextViewer.types';
|
|
4
|
-
declare const RichTextViewer: FC<RichTextViewerProps & ForwardProps>;
|
|
5
|
-
export default RichTextViewer;
|
|
6
|
-
//# sourceMappingURL=RichTextViewer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAK1E,OAAO,EAAE,YAAY,EAAuB,MAAM,yBAAyB,CAAC;AAI5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAQ7D,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAiE1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useMemo, useState, useEffect } from 'react';
|
|
3
|
-
import { Slate, Editable, withReact } from 'slate-react';
|
|
4
|
-
import { createEditor } from 'slate';
|
|
5
|
-
import dompurify from 'dompurify';
|
|
6
|
-
import { ErrorState, useI18n } from '@pega/cosmos-react-core';
|
|
7
|
-
import convertMarkdown from './utils/markdownConverter';
|
|
8
|
-
import { nodeRenderer, leafRenderer } from './utils/renderers';
|
|
9
|
-
import { StyledEditorContainer, StyledHtml, StyledRichTextViewer } from './RichTextEditor.styles';
|
|
10
|
-
import { convertHtml } from './utils/htmlConverter';
|
|
11
|
-
// Regex to match valid URLs
|
|
12
|
-
const URL_REGEX = /(?<leadingChar>^|[^(:/a-z0-9@])(?<url>(?<protocol>https?:\/\/)?(?<host>[a-z0-9]+(?:[-.][a-z0-9]+)*\.[a-z]{2,5}(?<port>:[0-9]{1,5})?)(?<pathQueryHash>\/\S*)?)(?<trailingChar>$|[^):/a-z0-9])/g;
|
|
13
|
-
const RichTextViewer = forwardRef(({ content, type, interactionRenderers, markdownMap, onRetry, ...restProps }, ref) => {
|
|
14
|
-
const t = useI18n();
|
|
15
|
-
const editor = useMemo(() => withReact(createEditor()), []);
|
|
16
|
-
// State is unused, but still set to force a re-render when updating editor.children.
|
|
17
|
-
const [, setNodes] = useState([]);
|
|
18
|
-
const [error, setError] = useState(false);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
if (type === 'markdown') {
|
|
21
|
-
editor.children = convertMarkdown(content, [...(interactionRenderers || []), { regexPattern: URL_REGEX, type: 'builtin-url' }], markdownMap);
|
|
22
|
-
setNodes(editor.children);
|
|
23
|
-
}
|
|
24
|
-
if (type === 'richtext') {
|
|
25
|
-
editor.children = JSON.parse(content);
|
|
26
|
-
setNodes(editor.children);
|
|
27
|
-
}
|
|
28
|
-
if (type === 'html' && interactionRenderers && interactionRenderers.length > 0) {
|
|
29
|
-
try {
|
|
30
|
-
editor.children = convertHtml(content, interactionRenderers);
|
|
31
|
-
setNodes(editor.children);
|
|
32
|
-
setError(false);
|
|
33
|
-
}
|
|
34
|
-
catch {
|
|
35
|
-
editor.children = [];
|
|
36
|
-
setNodes(editor.children);
|
|
37
|
-
setError(true);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}, [editor, content, type, interactionRenderers]);
|
|
41
|
-
const sanitizedHtml = useMemo(() => {
|
|
42
|
-
return type === 'html' && (!interactionRenderers || interactionRenderers.length === 0)
|
|
43
|
-
? dompurify.sanitize(content)
|
|
44
|
-
: '';
|
|
45
|
-
}, [content, type, interactionRenderers]);
|
|
46
|
-
if (sanitizedHtml) {
|
|
47
|
-
return _jsx(StyledHtml, { ref: ref, dangerouslySetInnerHTML: { __html: sanitizedHtml } }, void 0);
|
|
48
|
-
}
|
|
49
|
-
return error ? (_jsx(ErrorState, { message: t('rte_invalid_html'), onRetry: onRetry }, void 0)) : (_jsx(StyledRichTextViewer, { ref: ref, ...restProps, children: _jsx(Slate, { editor: editor, value: [], onChange: () => { }, children: _jsx(StyledEditorContainer, { children: _jsx(Editable, { readOnly: true, renderElement: nodeRenderer, renderLeaf: leafRenderer }, void 0) }, void 0) }, void 0) }, void 0));
|
|
50
|
-
});
|
|
51
|
-
export default RichTextViewer;
|
|
52
|
-
//# sourceMappingURL=RichTextViewer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextViewer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, Ref, forwardRef, useMemo, useState, useEffect } from 'react';\nimport { Slate, Editable, withReact } from 'slate-react';\nimport { Descendant, createEditor } from 'slate';\nimport dompurify from 'dompurify';\n\nimport { ForwardProps, ErrorState, useI18n } from '@pega/cosmos-react-core';\n\nimport convertMarkdown from './utils/markdownConverter';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { RichTextViewerProps } from './RichTextViewer.types';\nimport { StyledEditorContainer, StyledHtml, StyledRichTextViewer } from './RichTextEditor.styles';\nimport { convertHtml } from './utils/htmlConverter';\n\n// Regex to match valid URLs\nconst URL_REGEX =\n /(?<leadingChar>^|[^(:/a-z0-9@])(?<url>(?<protocol>https?:\\/\\/)?(?<host>[a-z0-9]+(?:[-.][a-z0-9]+)*\\.[a-z]{2,5}(?<port>:[0-9]{1,5})?)(?<pathQueryHash>\\/\\S*)?)(?<trailingChar>$|[^):/a-z0-9])/g;\n\nconst RichTextViewer: FC<RichTextViewerProps & ForwardProps> = forwardRef(\n (\n {\n content,\n type,\n interactionRenderers,\n markdownMap,\n onRetry,\n ...restProps\n }: RichTextViewerProps,\n ref: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n const editor = useMemo(() => withReact(createEditor()), []);\n // State is unused, but still set to force a re-render when updating editor.children.\n const [, setNodes] = useState<Descendant[]>([]);\n const [error, setError] = useState(false);\n\n useEffect(() => {\n if (type === 'markdown') {\n editor.children = convertMarkdown(\n content,\n [...(interactionRenderers || []), { regexPattern: URL_REGEX, type: 'builtin-url' }],\n markdownMap\n );\n setNodes(editor.children);\n }\n if (type === 'richtext') {\n editor.children = JSON.parse(content);\n setNodes(editor.children);\n }\n if (type === 'html' && interactionRenderers && interactionRenderers.length > 0) {\n try {\n editor.children = convertHtml(content, interactionRenderers);\n setNodes(editor.children);\n setError(false);\n } catch {\n editor.children = [];\n setNodes(editor.children);\n setError(true);\n }\n }\n }, [editor, content, type, interactionRenderers]);\n const sanitizedHtml = useMemo(() => {\n return type === 'html' && (!interactionRenderers || interactionRenderers.length === 0)\n ? dompurify.sanitize(content)\n : '';\n }, [content, type, interactionRenderers]);\n\n if (sanitizedHtml) {\n return <StyledHtml ref={ref} dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;\n }\n\n return error ? (\n <ErrorState message={t('rte_invalid_html')} onRetry={onRetry} />\n ) : (\n <StyledRichTextViewer ref={ref} {...restProps}>\n <Slate editor={editor} value={[]} onChange={() => {}}>\n <StyledEditorContainer>\n <Editable readOnly renderElement={nodeRenderer} renderLeaf={leafRenderer} />\n </StyledEditorContainer>\n </Slate>\n </StyledRichTextViewer>\n );\n }\n);\n\nexport default RichTextViewer;\n"]}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { Token, Tokens } from 'marked';
|
|
2
|
-
import { ComponentType, FC } from 'react';
|
|
3
|
-
import { ErrorStateProps } from '@pega/cosmos-react-core';
|
|
4
|
-
export interface InteractionRenderers {
|
|
5
|
-
type: string;
|
|
6
|
-
regexPattern: RegExp;
|
|
7
|
-
component?: ComponentType<any>;
|
|
8
|
-
}
|
|
9
|
-
export declare type TokenMap = {
|
|
10
|
-
[K in Exclude<Token, Tokens.Def>['type']]: Extract<Token, {
|
|
11
|
-
type: K;
|
|
12
|
-
}>;
|
|
13
|
-
};
|
|
14
|
-
export declare type MDMap = {
|
|
15
|
-
[K in Exclude<Token, Tokens.Def>['type']]?: (token: TokenMap[K]) => FC<{
|
|
16
|
-
token: TokenMap[K];
|
|
17
|
-
}> | undefined;
|
|
18
|
-
};
|
|
19
|
-
export interface RichTextViewerProps {
|
|
20
|
-
content: string;
|
|
21
|
-
type: 'markdown' | 'html' | 'richtext';
|
|
22
|
-
interactionRenderers?: InteractionRenderers[];
|
|
23
|
-
markdownMap?: MDMap;
|
|
24
|
-
onRetry?: ErrorStateProps['onRetry'];
|
|
25
|
-
}
|
|
26
|
-
//# sourceMappingURL=RichTextViewer.types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextViewer.types.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAChC;AAED,oBAAY,QAAQ,GAAG;KAAG,CAAC,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC;CAAE,CAAC;AAElG,oBAAY,KAAK,GAAG;KACjB,CAAC,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAC1C,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KACf,EAAE,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,GAAG,SAAS;CAC5C,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;IACvC,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextViewer.types.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Token, Tokens } from 'marked';\nimport { ComponentType, FC } from 'react';\n\nimport { ErrorStateProps } from '@pega/cosmos-react-core';\n\nexport interface InteractionRenderers {\n type: string;\n regexPattern: RegExp;\n component?: ComponentType<any>;\n}\n\nexport type TokenMap = { [K in Exclude<Token, Tokens.Def>['type']]: Extract<Token, { type: K }> };\n\nexport type MDMap = {\n [K in Exclude<Token, Tokens.Def>['type']]?: (\n token: TokenMap[K]\n ) => FC<{ token: TokenMap[K] }> | undefined;\n};\n\nexport interface RichTextViewerProps {\n content: string;\n type: 'markdown' | 'html' | 'richtext';\n interactionRenderers?: InteractionRenderers[];\n markdownMap?: MDMap;\n onRetry?: ErrorStateProps['onRetry'];\n}\n"]}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
-
interface AnchorButtonProps {
|
|
4
|
-
osx: boolean;
|
|
5
|
-
}
|
|
6
|
-
declare const AnchorButton: FC<AnchorButtonProps & ForwardProps>;
|
|
7
|
-
export default AnchorButton;
|
|
8
|
-
//# sourceMappingURL=AnchorButton.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAQH,MAAM,OAAO,CAAC;AAIf,OAAO,EAUL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAWjC,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;CACd;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAyNtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useRef, useState, useEffect } from 'react';
|
|
3
|
-
import { Text, Editor, Transforms } from 'slate';
|
|
4
|
-
import { ReactEditor, useSlate } from 'slate-react';
|
|
5
|
-
import { Button, CardContent, Grid, Icon, registerIcon, Input, Popover, useOuterEvent, useElement, Form, useI18n } from '@pega/cosmos-react-core';
|
|
6
|
-
import * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';
|
|
7
|
-
import { useRTEContext } from '../RichTextEditor.context';
|
|
8
|
-
import EditorCommands from '../utils/EditorCommands';
|
|
9
|
-
import ToolbarButton from './ToolbarButton';
|
|
10
|
-
import { getKeyCommand } from './utils';
|
|
11
|
-
registerIcon(chainIcon);
|
|
12
|
-
const AnchorButton = ({ osx, ...props }) => {
|
|
13
|
-
const t = useI18n();
|
|
14
|
-
const { setPopoverOpen, onEditorFocus } = useRTEContext();
|
|
15
|
-
const buttonRef = useRef(null);
|
|
16
|
-
const textInputRef = useRef(null);
|
|
17
|
-
const urlInputRef = useRef(null);
|
|
18
|
-
const editor = useSlate();
|
|
19
|
-
const [popoverEl, setPopoverEl] = useElement();
|
|
20
|
-
const [selectedText, setSelectedText] = useState('');
|
|
21
|
-
const [selection, setSelection] = useState(null);
|
|
22
|
-
const [url, setUrl] = useState('');
|
|
23
|
-
const [urlMatch, setUrlMatch] = useState(true);
|
|
24
|
-
const [anchorMenu, setAnchorMenu] = useState(false);
|
|
25
|
-
const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_anchor')} (${ctrl}K)`);
|
|
26
|
-
const openMenu = (opts = {}) => {
|
|
27
|
-
setAnchorMenu(true);
|
|
28
|
-
setPopoverOpen(true);
|
|
29
|
-
if (opts.focusInput) {
|
|
30
|
-
setTimeout(() => {
|
|
31
|
-
textInputRef.current?.focus();
|
|
32
|
-
}, 0);
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const resetMenu = (opts = { focusEditor: true }) => {
|
|
36
|
-
setSelection(null);
|
|
37
|
-
setSelectedText('');
|
|
38
|
-
setUrl('');
|
|
39
|
-
setUrlMatch(true);
|
|
40
|
-
setAnchorMenu(false);
|
|
41
|
-
setPopoverOpen(false);
|
|
42
|
-
if (opts.focusEditor) {
|
|
43
|
-
setTimeout(() => {
|
|
44
|
-
onEditorFocus({
|
|
45
|
-
runAfterFocus: () => {
|
|
46
|
-
if (selection)
|
|
47
|
-
Transforms.setSelection(editor, selection);
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
}, 0);
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
useOuterEvent('mousedown', [popoverEl], () => {
|
|
54
|
-
if (anchorMenu) {
|
|
55
|
-
resetMenu();
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
const createLink = () => {
|
|
59
|
-
if (url) {
|
|
60
|
-
EditorCommands.createLink(editor, selectedText, new URL(/^[a-z][a-z0-9.+-]*:/i.test(url) ? url : `http:${url}`).href, selection);
|
|
61
|
-
resetMenu();
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
useEffect(() => {
|
|
65
|
-
if (editor.selection) {
|
|
66
|
-
setSelectedText(Editor.string(editor, editor.selection));
|
|
67
|
-
setSelection(editor.selection);
|
|
68
|
-
const [match] = Editor.nodes(editor, {
|
|
69
|
-
match: n => Text.isText(n) && !!n.href,
|
|
70
|
-
at: editor.selection
|
|
71
|
-
});
|
|
72
|
-
if (match) {
|
|
73
|
-
setUrl(match[0].href || '');
|
|
74
|
-
setSelectedText(match[0].text);
|
|
75
|
-
}
|
|
76
|
-
else {
|
|
77
|
-
setUrl('');
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}, [anchorMenu]);
|
|
81
|
-
const preventDef = (e) => {
|
|
82
|
-
e.preventDefault();
|
|
83
|
-
e.stopPropagation();
|
|
84
|
-
};
|
|
85
|
-
const isLinkActive = () => {
|
|
86
|
-
const [link] = Editor.nodes(editor, { match: n => Text.isText(n) && !!n.href });
|
|
87
|
-
return !!link;
|
|
88
|
-
};
|
|
89
|
-
const cancelAnchorCreation = (event) => {
|
|
90
|
-
event?.preventDefault();
|
|
91
|
-
if ((event?.type === 'keydown' && event?.key === 'Enter') ||
|
|
92
|
-
event?.type === 'mousedown' ||
|
|
93
|
-
!event) {
|
|
94
|
-
resetMenu({ focusEditor: false });
|
|
95
|
-
buttonRef.current?.focus();
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
useEffect(() => {
|
|
99
|
-
const keyCommandListener = (e) => {
|
|
100
|
-
if (e.key === 'k' && (e.metaKey || e.ctrlKey) && ReactEditor.isFocused(editor)) {
|
|
101
|
-
e.preventDefault();
|
|
102
|
-
openMenu({ focusInput: true });
|
|
103
|
-
}
|
|
104
|
-
if (e.key === 'Escape') {
|
|
105
|
-
cancelAnchorCreation();
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
document.addEventListener('keydown', keyCommandListener);
|
|
109
|
-
return () => {
|
|
110
|
-
document.removeEventListener('keydown', keyCommandListener);
|
|
111
|
-
};
|
|
112
|
-
}, []);
|
|
113
|
-
return (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { ref: buttonRef, onMouseDown: () => {
|
|
114
|
-
openMenu();
|
|
115
|
-
}, onKeyDown: (e) => {
|
|
116
|
-
if (e.key === 'Enter') {
|
|
117
|
-
e.preventDefault();
|
|
118
|
-
openMenu({ focusInput: true });
|
|
119
|
-
}
|
|
120
|
-
}, active: isLinkActive(), tooltip: tooltip, label: t('rte_anchor'), ...props, children: _jsx(Icon, { name: 'chain' }, void 0) }, void 0), _jsx(Popover, { show: anchorMenu, target: buttonRef.current, ref: setPopoverEl, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: cancelAnchorCreation, onMouseDown: cancelAnchorCreation, type: 'button', children: "Cancel" }, void 0), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', type: 'submit', variant: 'primary', children: "Apply" }, void 0)] }, void 0), onSubmit: (e) => {
|
|
121
|
-
e.preventDefault();
|
|
122
|
-
createLink();
|
|
123
|
-
}, children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: 'Text', value: selectedText, onClick: preventDef, onChange: (e) => {
|
|
124
|
-
setSelectedText(e.target.value);
|
|
125
|
-
}, onBlur: () => {
|
|
126
|
-
setTimeout(() => {
|
|
127
|
-
if (document.activeElement !== urlInputRef.current) {
|
|
128
|
-
resetMenu({ focusEditor: false });
|
|
129
|
-
}
|
|
130
|
-
}, 0);
|
|
131
|
-
}, ref: textInputRef }, void 0), _jsx(Input, { label: 'URL', value: url, onClick: preventDef, onChange: (e) => {
|
|
132
|
-
const urlInput = e.target.value;
|
|
133
|
-
setUrl(urlInput);
|
|
134
|
-
if (!urlMatch) {
|
|
135
|
-
try {
|
|
136
|
-
// eslint-disable-next-line no-new
|
|
137
|
-
new URL(/^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `http:${urlInput}`);
|
|
138
|
-
setUrlMatch(true);
|
|
139
|
-
}
|
|
140
|
-
catch {
|
|
141
|
-
setUrlMatch(false);
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
}, onBlur: () => {
|
|
145
|
-
try {
|
|
146
|
-
// eslint-disable-next-line no-new
|
|
147
|
-
new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `http:${url}`);
|
|
148
|
-
setUrlMatch(true);
|
|
149
|
-
}
|
|
150
|
-
catch {
|
|
151
|
-
setUrlMatch(false);
|
|
152
|
-
}
|
|
153
|
-
}, info: !urlMatch ? 'Not a valid URL' : '', status: !urlMatch ? 'error' : undefined, ref: urlInputRef }, void 0)] }, void 0) }, void 0) }, void 0) }, void 0)] }, void 0));
|
|
154
|
-
};
|
|
155
|
-
export default AnchorButton;
|
|
156
|
-
//# sourceMappingURL=AnchorButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,MAAM,EACN,QAAQ,EAER,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,EAAS,UAAU,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,EACL,MAAM,EACN,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,OAAO,EACP,aAAa,EACb,UAAU,EAEV,IAAI,EACJ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,cAAc,MAAM,yBAAyB,CAAC;AAErD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxB,MAAM,YAAY,GAAyC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC/E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAC;IAC1D,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAe,IAAI,CAAC,CAAC;IAC/D,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;IAElF,MAAM,QAAQ,GAAG,CAAC,OAAiC,EAAE,EAAE,EAAE;QACvD,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,UAAU,CAAC,GAAG,EAAE;gBACd,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YAChC,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,OAAkC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE;QAC5E,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,MAAM,CAAC,EAAE,CAAC,CAAC;QACX,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,UAAU,CAAC,GAAG,EAAE;gBACd,aAAa,CAAC;oBACZ,aAAa,EAAE,GAAG,EAAE;wBAClB,IAAI,SAAS;4BAAE,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;oBAC5D,CAAC;iBACF,CAAC,CAAC;YACL,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;IACH,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE;QAC3C,IAAI,UAAU,EAAE;YACd,SAAS,EAAE,CAAC;SACb;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,GAAG,EAAE;YACP,cAAc,CAAC,UAAU,CACvB,MAAM,EACN,YAAY,EACZ,IAAI,GAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC,IAAI,EACpE,SAAS,CACV,CAAC;YACF,SAAS,EAAE,CAAC;SACb;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,SAAS,EAAE;YACpB,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;YACzD,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YAC/B,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAO,MAAM,EAAE;gBACzC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;gBACtC,EAAE,EAAE,MAAM,CAAC,SAAS;aACrB,CAAC,CAAC;YACH,IAAI,KAAK,EAAE;gBACT,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;gBAC5B,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aAChC;iBAAM;gBACL,MAAM,CAAC,EAAE,CAAC,CAAC;aACZ;SACF;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,UAAU,GAAG,CAAC,CAAa,EAAE,EAAE;QACnC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,KAAK,CAAO,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACtF,OAAO,CAAC,CAAC,IAAI,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,KAAkC,EAAE,EAAE;QAClE,KAAK,EAAE,cAAc,EAAE,CAAC;QACxB,IACE,CAAC,KAAK,EAAE,IAAI,KAAK,SAAS,IAAK,KAAuB,EAAE,GAAG,KAAK,OAAO,CAAC;YACxE,KAAK,EAAE,IAAI,KAAK,WAAW;YAC3B,CAAC,KAAK,EACN;YACA,SAAS,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;YAClC,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE;gBAC9E,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;aAChC;YACD,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACtB,oBAAoB,EAAE,CAAC;aACxB;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC;QAEzD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BACE,KAAC,aAAa,IACZ,GAAG,EAAE,SAAS,EACd,WAAW,EAAE,GAAG,EAAE;oBAChB,QAAQ,EAAE,CAAC;gBACb,CAAC,EACD,SAAS,EAAE,CAAC,CAAqB,EAAE,EAAE;oBACnC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;wBACrB,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,QAAQ,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;qBAChC;gBACH,CAAC,EACD,MAAM,EAAE,YAAY,EAAE,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,KAClB,KAAK,YAET,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACP,EAChB,KAAC,OAAO,IAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAC,QAAQ,YACzF,KAAC,WAAW,cACV,KAAC,IAAI,IACH,OAAO,EACL,8BACE,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,oBAAoB,EAC/B,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAC,QAAQ,+BAGN,EACT,KAAC,MAAM,IAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,8BAExE,YACR,EAEL,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;4BACzB,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,UAAU,EAAE,CAAC;wBACf,CAAC,YAED,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC5B,KAAC,KAAK,IACJ,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;wCAC7C,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oCAClC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;wCACX,UAAU,CAAC,GAAG,EAAE;4CACd,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,CAAC,OAAO,EAAE;gDAClD,SAAS,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;6CACnC;wCACH,CAAC,EAAE,CAAC,CAAC,CAAC;oCACR,CAAC,EACD,GAAG,EAAE,YAAY,WACjB,EACF,KAAC,KAAK,IACJ,KAAK,EAAC,KAAK,EACX,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;wCAC7C,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;wCAChC,MAAM,CAAC,QAAQ,CAAC,CAAC;wCAEjB,IAAI,CAAC,QAAQ,EAAE;4CACb,IAAI;gDACF,kCAAkC;gDAClC,IAAI,GAAG,CACL,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,QAAQ,EAAE,CACtE,CAAC;gDACF,WAAW,CAAC,IAAI,CAAC,CAAC;6CACnB;4CAAC,MAAM;gDACN,WAAW,CAAC,KAAK,CAAC,CAAC;6CACpB;yCACF;oCACH,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;wCACX,IAAI;4CACF,kCAAkC;4CAClC,IAAI,GAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC;4CAChE,WAAW,CAAC,IAAI,CAAC,CAAC;yCACnB;wCAAC,MAAM;4CACN,WAAW,CAAC,KAAK,CAAC,CAAC;yCACpB;oCACH,CAAC,EACD,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EACxC,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACvC,GAAG,EAAE,WAAW,WAChB,YACG,WACF,WACK,WACN,YACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n FC,\n useRef,\n useState,\n ChangeEvent,\n useEffect,\n MouseEvent,\n KeyboardEvent as ReactKeyboardEvent,\n FormEvent\n} from 'react';\nimport { Text, Editor, Range, Transforms } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\n\nimport {\n Button,\n CardContent,\n Grid,\n Icon,\n registerIcon,\n Input,\n Popover,\n useOuterEvent,\n useElement,\n ForwardProps,\n Form,\n useI18n\n} from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport { useRTEContext } from '../RichTextEditor.context';\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton from './ToolbarButton';\nimport { getKeyCommand } from './utils';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n osx: boolean;\n}\n\nconst AnchorButton: FC<AnchorButtonProps & ForwardProps> = ({ osx, ...props }) => {\n const t = useI18n();\n const { setPopoverOpen, onEditorFocus } = useRTEContext();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const textInputRef = useRef<HTMLInputElement>(null);\n const urlInputRef = useRef<HTMLInputElement>(null);\n const editor = useSlate();\n const [popoverEl, setPopoverEl] = useElement();\n const [selectedText, setSelectedText] = useState('');\n const [selection, setSelection] = useState<Range | null>(null);\n const [url, setUrl] = useState('');\n const [urlMatch, setUrlMatch] = useState(true);\n const [anchorMenu, setAnchorMenu] = useState(false);\n const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_anchor')} (${ctrl}K)`);\n\n const openMenu = (opts: { focusInput?: boolean } = {}) => {\n setAnchorMenu(true);\n setPopoverOpen(true);\n if (opts.focusInput) {\n setTimeout(() => {\n textInputRef.current?.focus();\n }, 0);\n }\n };\n\n const resetMenu = (opts: { focusEditor?: boolean } = { focusEditor: true }) => {\n setSelection(null);\n setSelectedText('');\n setUrl('');\n setUrlMatch(true);\n setAnchorMenu(false);\n setPopoverOpen(false);\n if (opts.focusEditor) {\n setTimeout(() => {\n onEditorFocus({\n runAfterFocus: () => {\n if (selection) Transforms.setSelection(editor, selection);\n }\n });\n }, 0);\n }\n };\n\n useOuterEvent('mousedown', [popoverEl], () => {\n if (anchorMenu) {\n resetMenu();\n }\n });\n\n const createLink = () => {\n if (url) {\n EditorCommands.createLink(\n editor,\n selectedText,\n new URL(/^[a-z][a-z0-9.+-]*:/i.test(url) ? url : `http:${url}`).href,\n selection\n );\n resetMenu();\n }\n };\n\n useEffect(() => {\n if (editor.selection) {\n setSelectedText(Editor.string(editor, editor.selection));\n setSelection(editor.selection);\n const [match] = Editor.nodes<Text>(editor, {\n match: n => Text.isText(n) && !!n.href,\n at: editor.selection\n });\n if (match) {\n setUrl(match[0].href || '');\n setSelectedText(match[0].text);\n } else {\n setUrl('');\n }\n }\n }, [anchorMenu]);\n\n const preventDef = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const isLinkActive = () => {\n const [link] = Editor.nodes<Text>(editor, { match: n => Text.isText(n) && !!n.href });\n return !!link;\n };\n\n const cancelAnchorCreation = (event?: KeyboardEvent | MouseEvent) => {\n event?.preventDefault();\n if (\n (event?.type === 'keydown' && (event as KeyboardEvent)?.key === 'Enter') ||\n event?.type === 'mousedown' ||\n !event\n ) {\n resetMenu({ focusEditor: false });\n buttonRef.current?.focus();\n }\n };\n\n useEffect(() => {\n const keyCommandListener = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey || e.ctrlKey) && ReactEditor.isFocused(editor)) {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n if (e.key === 'Escape') {\n cancelAnchorCreation();\n }\n };\n\n document.addEventListener('keydown', keyCommandListener);\n\n return () => {\n document.removeEventListener('keydown', keyCommandListener);\n };\n }, []);\n\n return (\n <>\n <ToolbarButton\n ref={buttonRef}\n onMouseDown={() => {\n openMenu();\n }}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n }}\n active={isLinkActive()}\n tooltip={tooltip}\n label={t('rte_anchor')}\n {...props}\n >\n <Icon name='chain' />\n </ToolbarButton>\n <Popover show={anchorMenu} target={buttonRef.current} ref={setPopoverEl} placement='bottom'>\n <CardContent>\n <Form\n actions={\n <>\n <Button\n variant='secondary'\n onKeyDown={cancelAnchorCreation}\n onMouseDown={cancelAnchorCreation}\n type='button'\n >\n Cancel\n </Button>\n <Button disabled={!url || !urlMatch} name='apply' type='submit' variant='primary'>\n Apply\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n createLink();\n }}\n >\n <Grid container={{ rowGap: 2 }}>\n <Input\n label='Text'\n value={selectedText}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setSelectedText(e.target.value);\n }}\n onBlur={() => {\n setTimeout(() => {\n if (document.activeElement !== urlInputRef.current) {\n resetMenu({ focusEditor: false });\n }\n }, 0);\n }}\n ref={textInputRef}\n />\n <Input\n label='URL'\n value={url}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n const urlInput = e.target.value;\n setUrl(urlInput);\n\n if (!urlMatch) {\n try {\n // eslint-disable-next-line no-new\n new URL(\n /^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `http:${urlInput}`\n );\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }\n }}\n onBlur={() => {\n try {\n // eslint-disable-next-line no-new\n new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `http:${url}`);\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }}\n info={!urlMatch ? 'Not a valid URL' : ''}\n status={!urlMatch ? 'error' : undefined}\n ref={urlInputRef}\n />\n </Grid>\n </Form>\n </CardContent>\n </Popover>\n </>\n );\n};\n\nexport default AnchorButton;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ImageButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ImageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAU,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAsB,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAapF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,CAmCjC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useRef } from 'react';
|
|
3
|
-
import styled from 'styled-components';
|
|
4
|
-
import { hideVisually } from 'polished';
|
|
5
|
-
import { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';
|
|
6
|
-
import * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';
|
|
7
|
-
import { useRTEContext } from '../RichTextEditor.context';
|
|
8
|
-
import ToolbarButton from './ToolbarButton';
|
|
9
|
-
registerIcon(pictureIcon);
|
|
10
|
-
const StyledImageInput = styled.input `
|
|
11
|
-
${hideVisually}
|
|
12
|
-
`;
|
|
13
|
-
const ImageButton = ({ ...props }) => {
|
|
14
|
-
const t = useI18n();
|
|
15
|
-
const { addImage } = useRTEContext();
|
|
16
|
-
const fileInputRef = useRef(null);
|
|
17
|
-
const onImageInputChange = (e) => {
|
|
18
|
-
if (e.target.files) {
|
|
19
|
-
addImage(e.target.files[0]);
|
|
20
|
-
if (fileInputRef.current) {
|
|
21
|
-
fileInputRef.current.value = '';
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
return (_jsxs(_Fragment, { children: [_jsx(StyledImageInput, { type: 'file', accept: 'image/*', ref: fileInputRef, onChange: onImageInputChange }, void 0), _jsx(ToolbarButton, { onClick: () => {
|
|
26
|
-
fileInputRef?.current?.click();
|
|
27
|
-
}, tooltip: t('rte_image'), label: t('rte_image'), ...props, children: _jsx(Icon, { name: 'picture' }, void 0) }, void 0)] }, void 0));
|
|
28
|
-
};
|
|
29
|
-
export default ImageButton;
|
|
30
|
-
//# sourceMappingURL=ImageButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ImageButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ImageButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAA;IACjC,YAAY;CACf,CAAC;AAEF,MAAM,WAAW,GAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IACrC,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC9D,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAE5B,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxB,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;aACjC;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,gBAAgB,IACf,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,kBAAkB,WAC5B,EACF,KAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBACjC,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KACjB,KAAK,YAET,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,WAAG,WACT,YACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { ChangeEvent, FC, useRef } from 'react';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { Icon, registerIcon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';\n\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport ToolbarButton from './ToolbarButton';\n\nregisterIcon(pictureIcon);\n\nconst StyledImageInput = styled.input`\n ${hideVisually}\n`;\n\nconst ImageButton: FC<ForwardProps> = ({ ...props }) => {\n const t = useI18n();\n const { addImage } = useRTEContext();\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n const onImageInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n addImage(e.target.files[0]);\n\n if (fileInputRef.current) {\n fileInputRef.current.value = '';\n }\n }\n };\n\n return (\n <>\n <StyledImageInput\n type='file'\n accept='image/*'\n ref={fileInputRef}\n onChange={onImageInputChange}\n />\n <ToolbarButton\n onClick={() => {\n fileInputRef?.current?.click();\n }}\n tooltip={t('rte_image')}\n label={t('rte_image')}\n {...props}\n >\n <Icon name='picture' />\n </ToolbarButton>\n </>\n );\n};\n\nexport default ImageButton;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IndentButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/IndentButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAc3B,UAAU,iBAAiB;IACzB,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC5B,GAAG,EAAE,OAAO,CAAC;CACd;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAsBvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { ReactEditor, useSlate } from 'slate-react';
|
|
3
|
-
import { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';
|
|
4
|
-
import * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';
|
|
5
|
-
import * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';
|
|
6
|
-
import EditorCommands from '../utils/EditorCommands';
|
|
7
|
-
import ToolbarButton from './ToolbarButton';
|
|
8
|
-
import { getKeyCommand } from './utils';
|
|
9
|
-
registerIcon(indentIcon, unindentIcon);
|
|
10
|
-
const IndentButton = ({ type, osx }) => {
|
|
11
|
-
const editor = useSlate();
|
|
12
|
-
const t = useI18n();
|
|
13
|
-
const tooltip = getKeyCommand(osx, ({ shift, alt }) => type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`);
|
|
14
|
-
const onMouseDown = e => {
|
|
15
|
-
e.preventDefault();
|
|
16
|
-
if (type === 'indent') {
|
|
17
|
-
EditorCommands.indent(editor);
|
|
18
|
-
}
|
|
19
|
-
else {
|
|
20
|
-
EditorCommands.unindent(editor);
|
|
21
|
-
}
|
|
22
|
-
if (!ReactEditor.isFocused(editor))
|
|
23
|
-
ReactEditor.focus(editor);
|
|
24
|
-
};
|
|
25
|
-
return (_jsx(ToolbarButton, { onMouseDown: onMouseDown, tooltip: tooltip, label: type, children: _jsx(Icon, { name: type }, void 0) }, void 0));
|
|
26
|
-
};
|
|
27
|
-
export default IndentButton;
|
|
28
|
-
//# sourceMappingURL=IndentButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IndentButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/IndentButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAC5F,OAAO,KAAK,YAAY,MAAM,iEAAiE,CAAC;AAEhG,OAAO,cAAc,MAAM,yBAAyB,CAAC;AAErD,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAOvC,MAAM,YAAY,GAA0B,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE;IAC5D,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CACpD,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAC9F,CAAC;IAEF,MAAM,WAAW,GAAsC,CAAC,CAAC,EAAE;QACzD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SAC/B;aAAM;YACL,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SACjC;QACD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC;YAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,YACpE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,WACN,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC } from 'react';\nimport { ReactEditor, useSlate } from 'slate-react';\n\nimport { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton, { ToolBarButtonProps } from './ToolbarButton';\nimport { getKeyCommand } from './utils';\n\nregisterIcon(indentIcon, unindentIcon);\n\ninterface IndentButtonProps {\n type: 'indent' | 'unindent';\n osx: boolean;\n}\n\nconst IndentButton: FC<IndentButtonProps> = ({ type, osx }) => {\n const editor = useSlate();\n const t = useI18n();\n const tooltip = getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n\n const onMouseDown: ToolBarButtonProps['onMouseDown'] = e => {\n e.preventDefault();\n if (type === 'indent') {\n EditorCommands.indent(editor);\n } else {\n EditorCommands.unindent(editor);\n }\n if (!ReactEditor.isFocused(editor)) ReactEditor.focus(editor);\n };\n\n return (\n <ToolbarButton onMouseDown={onMouseDown} tooltip={tooltip} label={type}>\n <Icon name={type} />\n </ToolbarButton>\n );\n};\n\nexport default IndentButton;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TableButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAsB,YAAY,EAAW,MAAM,yBAAyB,CAAC;AASpF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,CAsBjC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useSlate } from 'slate-react';
|
|
3
|
-
import { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';
|
|
4
|
-
import * as tableIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/table.icon';
|
|
5
|
-
import EditorCommands from '../utils/EditorCommands';
|
|
6
|
-
import ToolbarButton from './ToolbarButton';
|
|
7
|
-
registerIcon(tableIcon);
|
|
8
|
-
const TableButton = props => {
|
|
9
|
-
const t = useI18n();
|
|
10
|
-
const editor = useSlate();
|
|
11
|
-
const createNewTable = () => {
|
|
12
|
-
EditorCommands.appendTable(editor);
|
|
13
|
-
};
|
|
14
|
-
return (_jsx(ToolbarButton, { type: 'button', onMouseDown: e => {
|
|
15
|
-
e.preventDefault();
|
|
16
|
-
createNewTable();
|
|
17
|
-
}, tooltip: t('rte_table'), label: t('rte_table'), ...props, children: _jsx(Icon, { name: 'table' }, void 0) }, void 0));
|
|
18
|
-
};
|
|
19
|
-
export default TableButton;
|
|
20
|
-
//# sourceMappingURL=TableButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TableButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,cAAc,MAAM,yBAAyB,CAAC;AAErD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,WAAW,GAAqB,KAAK,CAAC,EAAE;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;IAE1B,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,CAAC,CAAC,EAAE;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,cAAc,EAAE,CAAC;QACnB,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KACjB,KAAK,YAET,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACP,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useSlate } from 'slate-react';\n\nimport { Icon, registerIcon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport * as tableIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/table.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton from './ToolbarButton';\n\nregisterIcon(tableIcon);\n\nconst TableButton: FC<ForwardProps> = props => {\n const t = useI18n();\n const editor = useSlate();\n\n const createNewTable = () => {\n EditorCommands.appendTable(editor);\n };\n\n return (\n <ToolbarButton\n type='button'\n onMouseDown={e => {\n e.preventDefault();\n createNewTable();\n }}\n tooltip={t('rte_table')}\n label={t('rte_table')}\n {...props}\n >\n <Icon name='table' />\n </ToolbarButton>\n );\n};\n\nexport default TableButton;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAwE,MAAM,OAAO,CAAC;AA8EjG,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,GAAG,EAAE,OAAO,CAAA;CAAE,CAyGpC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useRef, useState, useCallback } from 'react';
|
|
3
|
-
import { Transforms } from 'slate';
|
|
4
|
-
import { ReactEditor, useSlate } from 'slate-react';
|
|
5
|
-
import styled, { css } from 'styled-components';
|
|
6
|
-
import { Popover, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize } from '@pega/cosmos-react-core';
|
|
7
|
-
import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
|
|
8
|
-
import EditorCommands from '../utils/EditorCommands';
|
|
9
|
-
import { useRTEContext } from '../RichTextEditor.context';
|
|
10
|
-
import { getKeyCommand } from './utils';
|
|
11
|
-
registerIcon(arrowMicroDownIcon);
|
|
12
|
-
const StyledTextSelect = styled(Button)(({ theme }) => {
|
|
13
|
-
const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
|
|
14
|
-
return css `
|
|
15
|
-
color: ${theme.base.palette['foreground-color']};
|
|
16
|
-
display: inline-flex;
|
|
17
|
-
align-items: center;
|
|
18
|
-
border-radius: calc(0.25 * ${theme.base['border-radius']});
|
|
19
|
-
height: calc(4 * ${theme.base.spacing});
|
|
20
|
-
padding: calc(0.5 * ${theme.base.spacing});
|
|
21
|
-
font-size: ${fontSizes.xxs};
|
|
22
|
-
|
|
23
|
-
span {
|
|
24
|
-
white-space: nowrap;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:focus {
|
|
28
|
-
box-shadow: ${theme.base.shadow.focus};
|
|
29
|
-
}
|
|
30
|
-
`;
|
|
31
|
-
});
|
|
32
|
-
StyledTextSelect.defaultProps = defaultThemeProp;
|
|
33
|
-
const StyledSelectMenu = styled.div `
|
|
34
|
-
min-width: 10rem;
|
|
35
|
-
`;
|
|
36
|
-
const textMapping = {
|
|
37
|
-
paragraph: 'Normal',
|
|
38
|
-
'heading-1': 'Heading 1',
|
|
39
|
-
'heading-2': 'Heading 2',
|
|
40
|
-
'heading-3': 'Heading 3',
|
|
41
|
-
'heading-4': 'Heading 4',
|
|
42
|
-
'': 'Normal'
|
|
43
|
-
};
|
|
44
|
-
const getTextCommand = (num, osx) => {
|
|
45
|
-
return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);
|
|
46
|
-
};
|
|
47
|
-
const getTextFormats = (osx) => {
|
|
48
|
-
return [
|
|
49
|
-
{ text: 'Normal', subText: getTextCommand(0, osx), type: 'paragraph' },
|
|
50
|
-
{ text: 'Heading 1', subText: getTextCommand(1, osx), type: 'heading-1' },
|
|
51
|
-
{ text: 'Heading 2', subText: getTextCommand(2, osx), type: 'heading-2' },
|
|
52
|
-
{ text: 'Heading 3', subText: getTextCommand(3, osx), type: 'heading-3' },
|
|
53
|
-
{ text: 'Heading 4', subText: getTextCommand(4, osx), type: 'heading-4' }
|
|
54
|
-
];
|
|
55
|
-
};
|
|
56
|
-
const TextSelect = ({ osx }) => {
|
|
57
|
-
const t = useI18n();
|
|
58
|
-
const { disabled } = useRTEContext();
|
|
59
|
-
const [open, setOpen] = useState(false);
|
|
60
|
-
const selecting = useRef(false);
|
|
61
|
-
const openedByClick = useRef(false);
|
|
62
|
-
const buttonRef = useRef(null);
|
|
63
|
-
const popoverRef = useRef(null);
|
|
64
|
-
const menuRef = useRef(null);
|
|
65
|
-
const editor = useSlate();
|
|
66
|
-
const textFormats = useCallback(() => {
|
|
67
|
-
return getTextFormats(osx);
|
|
68
|
-
}, [osx])();
|
|
69
|
-
useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {
|
|
70
|
-
setOpen(false);
|
|
71
|
-
});
|
|
72
|
-
const onTextSelect = (type, e) => {
|
|
73
|
-
e.stopPropagation();
|
|
74
|
-
e.preventDefault();
|
|
75
|
-
EditorCommands.setBlock(type, editor);
|
|
76
|
-
if (!openedByClick.current) {
|
|
77
|
-
buttonRef.current?.focus();
|
|
78
|
-
}
|
|
79
|
-
setOpen(false);
|
|
80
|
-
selecting.current = true;
|
|
81
|
-
setTimeout(() => {
|
|
82
|
-
if (!ReactEditor.isFocused(editor) && openedByClick.current) {
|
|
83
|
-
const selection = editor.selection;
|
|
84
|
-
ReactEditor.focus(editor);
|
|
85
|
-
if (selection)
|
|
86
|
-
Transforms.select(editor, selection);
|
|
87
|
-
}
|
|
88
|
-
}, 0);
|
|
89
|
-
};
|
|
90
|
-
return (_jsxs(_Fragment, { children: [_jsxs(StyledTextSelect, { variant: 'simple', type: 'button', disabled: disabled, icon: false, ref: buttonRef, onMouseDown: (e) => {
|
|
91
|
-
e.preventDefault();
|
|
92
|
-
e.stopPropagation();
|
|
93
|
-
setOpen(true);
|
|
94
|
-
openedByClick.current = true;
|
|
95
|
-
}, onKeyDown: (e) => {
|
|
96
|
-
if (e.key === 'Enter' && !selecting.current) {
|
|
97
|
-
e.preventDefault();
|
|
98
|
-
setOpen(true);
|
|
99
|
-
openedByClick.current = false;
|
|
100
|
-
}
|
|
101
|
-
else if (e.key === 'Enter') {
|
|
102
|
-
e.preventDefault();
|
|
103
|
-
selecting.current = false;
|
|
104
|
-
}
|
|
105
|
-
else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
|
106
|
-
setOpen(false);
|
|
107
|
-
}
|
|
108
|
-
}, onFocus: (e) => {
|
|
109
|
-
e.preventDefault();
|
|
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)] }, void 0), _jsx(Icon, { name: 'arrow-micro-down' }, void 0)] }, void 0), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_heading_style') }, void 0)), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: textFormats.map(({ text, type, subText }) => ({
|
|
112
|
-
id: type,
|
|
113
|
-
primary: text,
|
|
114
|
-
secondary: [subText],
|
|
115
|
-
selected: type === EditorCommands.getActiveBlockType(editor)
|
|
116
|
-
})), focusControlEl: buttonRef.current || undefined, focusElOnClose: false, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }, void 0) }, void 0)] }, void 0));
|
|
117
|
-
};
|
|
118
|
-
export default TextSelect;
|
|
119
|
-
//# sourceMappingURL=TextSelect.js.map
|