@pega/cosmos-react-rte 3.0.0-dev.2.0 → 3.0.0-dev.4.1
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 +3 -0
- package/lib/components/Editor/Editor.d.ts.map +1 -1
- package/lib/components/Editor/Editor.js +53 -32
- package/lib/components/Editor/Editor.js.map +1 -1
- package/lib/components/Editor/Editor.types.d.ts +19 -7
- 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 +9 -0
- package/lib/components/Editor/ImageEditor.d.ts.map +1 -0
- package/lib/components/Editor/ImageEditor.js +268 -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 +3 -2
- package/lib/components/Editor/Toolbar/AnchorButton.js.map +1 -1
- package/lib/components/Editor/Toolbar/TextSelect.d.ts.map +1 -1
- package/lib/components/Editor/Toolbar/TextSelect.js +2 -1
- 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 +2 -2
- package/lib/components/Editor/Toolbar/Toolbar.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 +2 -29
- 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 +7 -1
- 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 +9 -107
- 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 +4 -10
- 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/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/markdownConverter.js +2 -2
- 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 +14 -1
- 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 +12 -13
|
@@ -1,58 +1,6 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
export const listStyles = css `
|
|
5
|
-
ul,
|
|
6
|
-
ol {
|
|
7
|
-
padding-inline-start: 2.5rem;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
li {
|
|
11
|
-
margin: 0.5rem 0;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
ul li {
|
|
15
|
-
ul {
|
|
16
|
-
margin-inline-start: 1rem;
|
|
17
|
-
list-style-type: circle;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
ul ul {
|
|
21
|
-
margin-inline-start: 2rem;
|
|
22
|
-
list-style-type: square;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
ul ul ul {
|
|
26
|
-
margin-inline-start: 3rem;
|
|
27
|
-
list-style-type: disc;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
ol li {
|
|
32
|
-
ol {
|
|
33
|
-
margin-inline-start: 1rem;
|
|
34
|
-
list-style-type: lower-alpha;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
ol ol {
|
|
38
|
-
margin-inline-start: 2rem;
|
|
39
|
-
list-style-type: lower-roman;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
ol ol ol {
|
|
43
|
-
margin-inline-start: 3rem;
|
|
44
|
-
list-style-type: decimal;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
${StyledPopover} ul, ${StyledPopover} ol {
|
|
49
|
-
padding-inline-start: 0;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
${StyledPopover} li {
|
|
53
|
-
margin: 0;
|
|
54
|
-
}
|
|
55
|
-
`;
|
|
2
|
+
import { defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';
|
|
3
|
+
import { listStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';
|
|
56
4
|
export const StyledEditorContainer = styled.div(({ containerHeight, readOnly, toolbar, theme }) => {
|
|
57
5
|
return css `
|
|
58
6
|
${typeof containerHeight === 'string' &&
|
|
@@ -86,6 +34,13 @@ export const StyledEditorContainer = styled.div(({ containerHeight, readOnly, to
|
|
|
86
34
|
&:hover {
|
|
87
35
|
cursor: text;
|
|
88
36
|
}
|
|
37
|
+
.mce-offscreen-selection {
|
|
38
|
+
border: 0;
|
|
39
|
+
clip: rect(0 0 0 0);
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
padding: 0;
|
|
42
|
+
position: absolute;
|
|
43
|
+
}
|
|
89
44
|
|
|
90
45
|
${listStyles}
|
|
91
46
|
`;
|
|
@@ -132,58 +87,5 @@ export const StyledRichTextViewer = styled.div `
|
|
|
132
87
|
}
|
|
133
88
|
}
|
|
134
89
|
`;
|
|
135
|
-
export const StyledHtml = styled.div(({ theme }) => {
|
|
136
|
-
const { base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette }, components: { text } } = theme;
|
|
137
|
-
const fontSize = calculateFontSize(baseFontSize, baseFontScale);
|
|
138
|
-
return css `
|
|
139
|
-
${listStyles}
|
|
140
|
-
table {
|
|
141
|
-
${getTableStyles(theme)}
|
|
142
|
-
}
|
|
143
|
-
img {
|
|
144
|
-
max-width: 100%;
|
|
145
|
-
}
|
|
146
|
-
a {
|
|
147
|
-
color: ${palette.interactive};
|
|
148
|
-
}
|
|
149
|
-
pre {
|
|
150
|
-
white-space: break-spaces;
|
|
151
|
-
}
|
|
152
|
-
p {
|
|
153
|
-
min-height: ${fontSize[text.primary['font-size']]};
|
|
154
|
-
}
|
|
155
|
-
h1 {
|
|
156
|
-
font-size: ${fontSize[text.h1['font-size']]};
|
|
157
|
-
font-weight: ${text.h1['font-weight']};
|
|
158
|
-
min-height: ${fontSize[text.h1['font-size']]};
|
|
159
|
-
}
|
|
160
|
-
h2 {
|
|
161
|
-
font-size: ${fontSize[text.h2['font-size']]};
|
|
162
|
-
font-weight: ${text.h2['font-weight']};
|
|
163
|
-
min-height: ${fontSize[text.h2['font-size']]};
|
|
164
|
-
}
|
|
165
|
-
h3 {
|
|
166
|
-
font-size: ${fontSize[text.h3['font-size']]};
|
|
167
|
-
font-weight: ${text.h3['font-weight']};
|
|
168
|
-
min-height: ${fontSize[text.h3['font-size']]};
|
|
169
|
-
}
|
|
170
|
-
h4 {
|
|
171
|
-
font-size: ${fontSize[text.h4['font-size']]};
|
|
172
|
-
font-weight: ${text.h4['font-weight']};
|
|
173
|
-
min-height: ${fontSize[text.h4['font-size']]};
|
|
174
|
-
}
|
|
175
|
-
h5 {
|
|
176
|
-
font-size: ${fontSize[text.h5['font-size']]};
|
|
177
|
-
font-weight: ${text.h5['font-weight']};
|
|
178
|
-
min-height: ${fontSize[text.h5['font-size']]};
|
|
179
|
-
}
|
|
180
|
-
h6 {
|
|
181
|
-
font-size: ${fontSize[text.h6['font-size']]};
|
|
182
|
-
font-weight: ${text.h6['font-weight']};
|
|
183
|
-
min-height: ${fontSize[text.h6['font-size']]};
|
|
184
|
-
}
|
|
185
|
-
`;
|
|
186
|
-
});
|
|
187
|
-
StyledHtml.defaultProps = defaultThemeProp;
|
|
188
90
|
export default StyledRichTextEditor;
|
|
189
91
|
//# sourceMappingURL=RichTextEditor.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,
|
|
1
|
+
{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAW9E,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;QACN,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;kBACS,eAAe;OAC1B;;QAEC,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;UACC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;wBACa,eAAe,CAAC,GAAG;SAClC;;UAEC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;wBACa,eAAe,CAAC,GAAG;SAClC;OACF;;QAEC,CAAC,QAAQ,IAAI,OAAO,CAAC;QACvB,GAAG,CAAA;mBACU,KAAK,CAAC,IAAI,CAAC,OAAO;OAC9B;;QAEC,eAAe;QACjB,GAAG,CAAA;;OAEF;;;;;;;;;;;;;QAaC,UAAU;KACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IACxF,OAAO,GAAG,CAAA;wBACY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,aAAa;;;;;sBAKpE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBAC5D,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;iBAK3D,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;GAEtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;MACN,oBAAoB;QAClB,CAAC,OAAO;QACV,GAAG,CAAA;;;OAGF;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;IAI1C,UAAU;;;;;;;CAOb,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';\nimport { listStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';\n\nimport { RichTextEditorProps } from './RichTextEditor.types';\n\ninterface StyledRichTextEditorProps {\n toolbar?: boolean;\n focused?: boolean;\n readOnly?: boolean;\n containerHeight?: RichTextEditorProps['height'];\n}\n\nexport const StyledEditorContainer = styled.div<StyledRichTextEditorProps>(\n ({ containerHeight, readOnly, toolbar, theme }) => {\n return css`\n ${typeof containerHeight === 'string' &&\n css`\n height: ${containerHeight};\n `}\n\n ${typeof containerHeight === 'object' &&\n css`\n ${containerHeight.min &&\n css`\n min-height: ${containerHeight.min};\n `}\n\n ${containerHeight.max &&\n css`\n max-height: ${containerHeight.max};\n `}\n `}\n\n ${(readOnly || toolbar) &&\n css`\n padding: ${theme.base.spacing};\n `}\n\n ${containerHeight &&\n css`\n overflow: auto;\n `}\n\n &:hover {\n cursor: text;\n }\n .mce-offscreen-selection {\n border: 0;\n clip: rect(0 0 0 0);\n overflow: hidden;\n padding: 0;\n position: absolute;\n }\n\n ${listStyles}\n `;\n }\n);\n\nStyledEditorContainer.defaultProps = defaultThemeProp;\n\nconst StyledRichTextEditor = styled.div<StyledRichTextEditorProps>(({ toolbar, theme }) => {\n return css`\n background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};\n width: 100%;\n position: relative;\n\n &:focus-within:not([disabled]) {\n border-color: ${theme.components['form-control'][':focus']['border-color']};\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n }\n\n /* Override default styling of slate placeholder. */\n span[contenteditable='false'] {\n opacity: ${theme.base.transparency['transparent-3']} !important;\n }\n `;\n});\n\nStyledRichTextEditor.defaultProps = defaultThemeProp;\n\nexport const StyledRichTextFormField = styled.div<StyledRichTextEditorProps>(({ toolbar }) => {\n return css`\n ${StyledRichTextEditor} {\n ${!toolbar &&\n css`\n border: none;\n box-shadow: none;\n `}\n }\n `;\n});\n\nexport const StyledRichTextViewer = styled.div`\n width: 100%;\n position: relative;\n\n ${StyledLink} {\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: none;\n text-decoration: underline;\n }\n }\n`;\n\nexport default StyledRichTextEditor;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAQ,YAAY,EAAuB,MAAM,yBAAyB,CAAC;AAIlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAQ7D,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CA4D1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -2,11 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef, useMemo, useState, useEffect } from 'react';
|
|
3
3
|
import { Slate, Editable, withReact } from 'slate-react';
|
|
4
4
|
import { createEditor } from 'slate';
|
|
5
|
-
import
|
|
6
|
-
import { ErrorState, useI18n } from '@pega/cosmos-react-core';
|
|
5
|
+
import { HTML, ErrorState, useI18n } from '@pega/cosmos-react-core';
|
|
7
6
|
import convertMarkdown from './utils/markdownConverter';
|
|
8
7
|
import { nodeRenderer, leafRenderer } from './utils/renderers';
|
|
9
|
-
import { StyledEditorContainer,
|
|
8
|
+
import { StyledEditorContainer, StyledRichTextViewer } from './RichTextEditor.styles';
|
|
10
9
|
import { convertHtml } from './utils/htmlConverter';
|
|
11
10
|
// Regex to match valid URLs
|
|
12
11
|
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;
|
|
@@ -38,13 +37,8 @@ const RichTextViewer = forwardRef(({ content, type, interactionRenderers, markdo
|
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
39
|
}, [editor, content, type, interactionRenderers]);
|
|
41
|
-
|
|
42
|
-
return
|
|
43
|
-
? dompurify.sanitize(content)
|
|
44
|
-
: '';
|
|
45
|
-
}, [content, type, interactionRenderers]);
|
|
46
|
-
if (sanitizedHtml) {
|
|
47
|
-
return _jsx(StyledHtml, { ref: ref, dangerouslySetInnerHTML: { __html: sanitizedHtml } }, void 0);
|
|
40
|
+
if (type === 'html' && (!interactionRenderers || interactionRenderers.length === 0)) {
|
|
41
|
+
return _jsx(HTML, { ref: ref, content: content }, void 0);
|
|
48
42
|
}
|
|
49
43
|
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
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextViewer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;
|
|
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';\n\nimport { HTML, 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, 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\n if (type === 'html' && (!interactionRenderers || interactionRenderers.length === 0)) {\n return <HTML ref={ref} content={content} />;\n }\n\n return error ? (\n <ErrorState message={t('rte_invalid_html')} onRetry={onRetry} />\n ) : (\n <StyledRichTextViewer ref={ref} {...restProps}>\n <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,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { marked } from 'marked';
|
|
2
2
|
import { ComponentType, FC } from 'react';
|
|
3
3
|
import { ErrorStateProps } from '@pega/cosmos-react-core';
|
|
4
4
|
export interface InteractionRenderers {
|
|
@@ -7,12 +7,12 @@ export interface InteractionRenderers {
|
|
|
7
7
|
component?: ComponentType<any>;
|
|
8
8
|
}
|
|
9
9
|
export declare type TokenMap = {
|
|
10
|
-
[K in Exclude<Token, Tokens.Def>['type']]: Extract<Token, {
|
|
10
|
+
[K in Exclude<marked.Token, marked.Tokens.Def>['type']]: Extract<marked.Token, {
|
|
11
11
|
type: K;
|
|
12
12
|
}>;
|
|
13
13
|
};
|
|
14
14
|
export declare type MDMap = {
|
|
15
|
-
[K in Exclude<Token, Tokens.Def>['type']]?: (token: TokenMap[K]) => FC<{
|
|
15
|
+
[K in Exclude<marked.Token, marked.Tokens.Def>['type']]?: (token: TokenMap[K]) => FC<{
|
|
16
16
|
token: TokenMap[K];
|
|
17
17
|
}> | undefined;
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextViewer.types.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"RichTextViewer.types.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,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;KACpB,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC;CAC5F,CAAC;AAEF,oBAAY,KAAK,GAAG;KACjB,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CACxD,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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextViewer.types.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"","sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"RichTextViewer.types.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { marked } from 'marked';\nimport { ComponentType, FC } from 'react';\n\nimport { ErrorStateProps } from '@pega/cosmos-react-core';\n\nexport interface InteractionRenderers {\n type: string;\n regexPattern: RegExp;\n component?: ComponentType<any>;\n}\n\nexport type TokenMap = {\n [K in Exclude<marked.Token, marked.Tokens.Def>['type']]: Extract<marked.Token, { type: K }>;\n};\n\nexport type MDMap = {\n [K in Exclude<marked.Token, marked.Tokens.Def>['type']]?: (\n token: TokenMap[K]\n ) => FC<{ token: TokenMap[K] }> | undefined;\n};\n\nexport interface RichTextViewerProps {\n content: string;\n type: 'markdown' | 'html' | 'richtext';\n interactionRenderers?: InteractionRenderers[];\n markdownMap?: MDMap;\n onRetry?: ErrorStateProps['onRetry'];\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"htmlConverter.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/htmlConverter.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAY9D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAkBjB,CAAC;AAGX,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;
|
|
1
|
+
{"version":3,"file":"htmlConverter.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/htmlConverter.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAY9D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAkBjB,CAAC;AAGX,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AAgJX,eAAO,MAAM,WAAW,SAChB,MAAM,yBACW,mBAAmB,CAAC,sBAAsB,CAAC,KACjE,CAAC,aAAa,GAAG,UAAU,CAAC,EAe9B,CAAC"}
|
|
@@ -30,7 +30,6 @@ export const inlineHtmlToStyleMap = {
|
|
|
30
30
|
i: 'italic',
|
|
31
31
|
a: 'href'
|
|
32
32
|
};
|
|
33
|
-
// Maps HTML Attributes to an object. Right now this is specifically used for list items.
|
|
34
33
|
const getAttributes = (node) => {
|
|
35
34
|
if (checkElement(node) && node.attrs.length) {
|
|
36
35
|
switch (node.nodeName) {
|
|
@@ -80,7 +79,11 @@ const getSlateNode = (node, parentNode, interactionRenderers) => {
|
|
|
80
79
|
// Make sure to spread any parent style attributes for slates text nodes
|
|
81
80
|
const children = parseTextToCustomSlateNodes(node.value, interactionRenderers);
|
|
82
81
|
if (children.length === 1) {
|
|
83
|
-
|
|
82
|
+
const tempParentNode = parentNode;
|
|
83
|
+
if (children[0]?.type === 'custom') {
|
|
84
|
+
delete tempParentNode?.text;
|
|
85
|
+
}
|
|
86
|
+
return { node: { ...tempParentNode, ...children[0] } };
|
|
84
87
|
}
|
|
85
88
|
return {
|
|
86
89
|
node: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"htmlConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/htmlConverter.ts"],"names":[],"mappings":"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","sourcesContent":["import { parse } from 'parse5';\n// Use namespaced types to more easily differentiate between similar types (ie, ChildNode from parse5 and Node from slate).\nimport type * as parse5 from 'parse5';\nimport type * as slate from 'slate';\n\nimport { RichTextViewerProps } from '../RichTextViewer.types';\n\nimport parseTextToCustomSlateNodes from './interactionRenderer';\n\nconst checkElement = (node: parse5.ChildNode | undefined): node is parse5.Element =>\n !!node && node.nodeName !== '#text' && node.nodeName !== '#comment';\nconst checkTextNode = (node: parse5.ChildNode | undefined): node is parse5.TextNode =>\n !!node && node.nodeName === '#text';\nconst checkComment = (node: parse5.ChildNode | undefined): node is parse5.TextNode =>\n !!node && node.nodeName === '#comment';\n\n// Mapping of HTML tags to slate types. b, del, i, and a tags are labeled as skip because they need special logic\nexport const htmlToSlateMap = {\n h1: 'heading-1',\n h2: 'heading-2',\n h3: 'heading-3',\n h4: 'heading-4',\n ul: 'unordered-list',\n ol: 'ordered-list',\n li: 'list-item',\n table: 'table',\n tr: 'table-row',\n td: 'table-cell',\n tbody: 'table-body',\n p: 'paragraph',\n img: 'image',\n b: 'skip',\n del: 'skip',\n i: 'skip',\n a: 'skip'\n} as const;\n\n// Inline HTML tags to slate types\nexport const inlineHtmlToStyleMap = {\n b: 'bold',\n del: 'line-through',\n i: 'italic',\n a: 'href'\n} as const;\n\n// Maps HTML Attributes to an object. Right now this is specifically used for list items.\nconst getAttributes = (node: parse5.ChildNode) => {\n if (checkElement(node) && node.attrs.length) {\n switch (node.nodeName) {\n case 'li':\n return Object.fromEntries(\n node.attrs.flatMap(attr => {\n // eslint-disable-next-line sonarjs/no-nested-switch\n switch (attr.name) {\n case 'data-id':\n return [['id', attr.value]];\n case 'data-parent-id':\n return [['parentId', attr.value]];\n case 'data-level':\n return [['level', attr.value]];\n case 'data-order':\n return [['order', attr.value]];\n default:\n return [];\n }\n })\n );\n case 'img': {\n const imgAttrs = ['src', 'alt'];\n const attrsObj: { [key: string]: string } = {};\n for (let i = 0; i < node.attrs.length; i += 1) {\n const { name, value } = node.attrs[i];\n if (imgAttrs.includes(name)) {\n attrsObj[name] = value;\n }\n }\n return attrsObj;\n }\n default:\n return {};\n }\n }\n return {};\n};\n\nconst getSlateNode = (\n node: parse5.ChildNode,\n parentNode?: slate.Element | slate.Text,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): { node: slate.Element | slate.Text; collapseNext?: boolean } => {\n if (checkTextNode(node)) {\n if (node.parentNode.nodeName === 'body') {\n return {\n node: {\n type: 'paragraph',\n children: [{ text: node.value }]\n }\n };\n }\n // Make sure to spread any parent style attributes for slates text nodes\n const children = parseTextToCustomSlateNodes(node.value, interactionRenderers);\n if (children.length === 1) {\n return { node: { ...parentNode, ...children[0] } as slate.Text };\n }\n return {\n node: {\n ...parentNode,\n children\n } as slate.Element\n };\n }\n\n const type = htmlToSlateMap[node.nodeName as keyof typeof htmlToSlateMap];\n /*\n If the type of the HTML tag is an inline (b, i, del, a) we want to let the recursive function know\n that it needs to collapse the next node, also we are setting the correct style mark to true\n */\n if (type === 'skip') {\n const style = inlineHtmlToStyleMap[node.nodeName as 'b' | 'i' | 'del' | 'a'];\n let value: string | boolean = true;\n if (node.nodeName === 'a') {\n const hrefObj = node.attrs?.find(attr => attr.name === 'href');\n value = hrefObj ? hrefObj.value : value;\n }\n return {\n node: { ...parentNode, [style]: value, text: '' } as slate.Text,\n collapseNext: true\n };\n }\n\n const attributes = getAttributes(node);\n const nodeObj = {\n type: type || 'paragraph',\n ...attributes,\n children: [{ text: '' }]\n } as slate.Element;\n return { node: nodeObj };\n};\n\n// Recursive function that will convert Parse5Nodes into Slate compatible nodes\nconst convertNodes = (\n nodes: parse5.ChildNode[],\n parentNode?: slate.Element | slate.Text,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): (slate.Element | slate.Text)[] => {\n const returnNodes: (slate.Element | slate.Text)[] = [];\n nodes.forEach(node => {\n const { node: slateNode, collapseNext } = getSlateNode(node, parentNode, interactionRenderers);\n if (!checkComment(node)) {\n let returnNode = slateNode;\n if (checkElement(node) && node.childNodes && node.childNodes.length) {\n if (collapseNext) {\n returnNode = convertNodes(node.childNodes, slateNode, interactionRenderers)[0];\n } else {\n (slateNode as slate.Element).children = convertNodes(\n node.childNodes,\n undefined,\n interactionRenderers\n );\n returnNode = slateNode;\n }\n }\n\n returnNodes.push(returnNode);\n }\n });\n return returnNodes;\n};\n\nconst defaultValue = [{ type: 'paragraph', children: [{ text: '' }] } as slate.Element];\n\nexport const convertHtml = (\n html: string,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): (slate.Element | slate.Text)[] => {\n // Wrap the html in another body in case the value given has no body\n const doc = parse(`<body>${html.replace('\\n', '')}</body>`);\n let nodesToConvert = doc.childNodes;\n // If we have a root tag\n if (doc.childNodes.length === 1) {\n const root = doc.childNodes[0];\n if (!checkElement(root)) return defaultValue;\n\n const body = root.childNodes[1];\n if (!checkElement(body)) return defaultValue;\n\n nodesToConvert = body.childNodes;\n }\n return convertNodes(nodesToConvert, undefined, interactionRenderers);\n};\n"]}
|
|
1
|
+
{"version":3,"file":"htmlConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/htmlConverter.ts"],"names":[],"mappings":"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","sourcesContent":["import { parse } from 'parse5';\n// Use namespaced types to more easily differentiate between similar types (ie, ChildNode from parse5 and Node from slate).\nimport type * as parse5 from 'parse5';\nimport type * as slate from 'slate';\n\nimport { RichTextViewerProps } from '../RichTextViewer.types';\n\nimport parseTextToCustomSlateNodes from './interactionRenderer';\n\nconst checkElement = (node: parse5.ChildNode | undefined): node is parse5.Element =>\n !!node && node.nodeName !== '#text' && node.nodeName !== '#comment';\nconst checkTextNode = (node: parse5.ChildNode | undefined): node is parse5.TextNode =>\n !!node && node.nodeName === '#text';\nconst checkComment = (node: parse5.ChildNode | undefined): node is parse5.TextNode =>\n !!node && node.nodeName === '#comment';\n\n// Mapping of HTML tags to slate types. b, del, i, and a tags are labeled as skip because they need special logic\nexport const htmlToSlateMap = {\n h1: 'heading-1',\n h2: 'heading-2',\n h3: 'heading-3',\n h4: 'heading-4',\n ul: 'unordered-list',\n ol: 'ordered-list',\n li: 'list-item',\n table: 'table',\n tr: 'table-row',\n td: 'table-cell',\n tbody: 'table-body',\n p: 'paragraph',\n img: 'image',\n b: 'skip',\n del: 'skip',\n i: 'skip',\n a: 'skip'\n} as const;\n\n// Inline HTML tags to slate types\nexport const inlineHtmlToStyleMap = {\n b: 'bold',\n del: 'line-through',\n i: 'italic',\n a: 'href'\n} as const;\n\n// Maps HTML Attributes to an object. Right now this is specifically used for list items.\n\ninterface InlineParentNodes extends slate.CosmosCustom.CustomElement {\n href?: string;\n italic?: boolean;\n bold?: boolean;\n text?: string;\n}\n\nconst getAttributes = (node: parse5.ChildNode) => {\n if (checkElement(node) && node.attrs.length) {\n switch (node.nodeName) {\n case 'li':\n return Object.fromEntries(\n node.attrs.flatMap(attr => {\n // eslint-disable-next-line sonarjs/no-nested-switch\n switch (attr.name) {\n case 'data-id':\n return [['id', attr.value]];\n case 'data-parent-id':\n return [['parentId', attr.value]];\n case 'data-level':\n return [['level', attr.value]];\n case 'data-order':\n return [['order', attr.value]];\n default:\n return [];\n }\n })\n );\n case 'img': {\n const imgAttrs = ['src', 'alt'];\n const attrsObj: { [key: string]: string } = {};\n for (let i = 0; i < node.attrs.length; i += 1) {\n const { name, value } = node.attrs[i];\n if (imgAttrs.includes(name)) {\n attrsObj[name] = value;\n }\n }\n return attrsObj;\n }\n default:\n return {};\n }\n }\n return {};\n};\n\nconst getSlateNode = (\n node: parse5.ChildNode,\n parentNode?: slate.Element | slate.Text,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): { node: slate.Element | slate.Text; collapseNext?: boolean } => {\n if (checkTextNode(node)) {\n if (node.parentNode.nodeName === 'body') {\n return {\n node: {\n type: 'paragraph',\n children: [{ text: node.value }]\n }\n };\n }\n // Make sure to spread any parent style attributes for slates text nodes\n const children = parseTextToCustomSlateNodes(\n node.value,\n interactionRenderers\n ) as slate.CosmosCustom.CustomElement[];\n if (children.length === 1) {\n const tempParentNode = parentNode as InlineParentNodes;\n if (children[0]?.type === 'custom') {\n delete tempParentNode?.text;\n }\n\n return { node: { ...tempParentNode, ...children[0] } as slate.Text };\n }\n return {\n node: {\n ...parentNode,\n children\n } as slate.Element\n };\n }\n\n const type = htmlToSlateMap[node.nodeName as keyof typeof htmlToSlateMap];\n /*\n If the type of the HTML tag is an inline (b, i, del, a) we want to let the recursive function know\n that it needs to collapse the next node, also we are setting the correct style mark to true\n */\n if (type === 'skip') {\n const style = inlineHtmlToStyleMap[node.nodeName as 'b' | 'i' | 'del' | 'a'];\n let value: string | boolean = true;\n if (node.nodeName === 'a') {\n const hrefObj = node.attrs?.find(attr => attr.name === 'href');\n value = hrefObj ? hrefObj.value : value;\n }\n return {\n node: { ...parentNode, [style]: value, text: '' } as slate.Text,\n collapseNext: true\n };\n }\n\n const attributes = getAttributes(node);\n const nodeObj = {\n type: type || 'paragraph',\n ...attributes,\n children: [{ text: '' }]\n } as slate.Element;\n return { node: nodeObj };\n};\n\n// Recursive function that will convert Parse5Nodes into Slate compatible nodes\nconst convertNodes = (\n nodes: parse5.ChildNode[],\n parentNode?: slate.Element | slate.Text,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): (slate.Element | slate.Text)[] => {\n const returnNodes: (slate.Element | slate.Text)[] = [];\n nodes.forEach(node => {\n const { node: slateNode, collapseNext } = getSlateNode(node, parentNode, interactionRenderers);\n if (!checkComment(node)) {\n let returnNode = slateNode;\n if (checkElement(node) && node.childNodes && node.childNodes.length) {\n if (collapseNext) {\n returnNode = convertNodes(node.childNodes, slateNode, interactionRenderers)[0];\n } else {\n (slateNode as slate.Element).children = convertNodes(\n node.childNodes,\n undefined,\n interactionRenderers\n );\n returnNode = slateNode;\n }\n }\n\n returnNodes.push(returnNode);\n }\n });\n return returnNodes;\n};\n\nconst defaultValue = [{ type: 'paragraph', children: [{ text: '' }] } as slate.Element];\n\nexport const convertHtml = (\n html: string,\n interactionRenderers?: RichTextViewerProps['interactionRenderers']\n): (slate.Element | slate.Text)[] => {\n // Wrap the html in another body in case the value given has no body\n const doc = parse(`<body>${html.replace('\\n', '')}</body>`);\n let nodesToConvert = doc.childNodes;\n // If we have a root tag\n if (doc.childNodes.length === 1) {\n const root = doc.childNodes[0];\n if (!checkElement(root)) return defaultValue;\n\n const body = root.childNodes[1];\n if (!checkElement(body)) return defaultValue;\n\n nodesToConvert = body.childNodes;\n }\n return convertNodes(nodesToConvert, undefined, interactionRenderers);\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import marked from 'marked';
|
|
2
|
+
import { marked } from 'marked';
|
|
3
3
|
import { hasProp } from '@pega/cosmos-react-core';
|
|
4
4
|
import parseTextToCustomSlateNodes from './interactionRenderer';
|
|
5
5
|
marked.setOptions({ mangle: false });
|
|
@@ -17,7 +17,7 @@ const getNode = (token, interactionRenderers, markdownMap) => {
|
|
|
17
17
|
}
|
|
18
18
|
else {
|
|
19
19
|
let mdText = '';
|
|
20
|
-
if (token.type === 'link' || token.type === 'text')
|
|
20
|
+
if ( /* token.type === 'link' || */token.type === 'text')
|
|
21
21
|
mdText = token.raw;
|
|
22
22
|
else if (hasProp(token, 'text'))
|
|
23
23
|
mdText = token.text;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdownConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/markdownConverter.tsx"],"names":[],"mappings":";AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"markdownConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/markdownConverter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CosmosCustom, Element, Text } from 'slate';\nimport { marked } from 'marked';\n\nimport { hasProp } from '@pega/cosmos-react-core';\n\nimport { RichTextViewerProps } from '../RichTextViewer.types';\nimport { RichTextEditorProps } from '../RichTextEditor.types';\n\nimport parseTextToCustomSlateNodes from './interactionRenderer';\n\nmarked.setOptions({ mangle: false });\n\nconst getNode = (\n token: marked.Token,\n interactionRenderers?: RichTextViewerProps['interactionRenderers'],\n markdownMap?: RichTextViewerProps['markdownMap']\n): Element | Text => {\n if (!hasProp(token, 'type') || token.type === 'def')\n return { type: 'paragraph', children: [{ text: '' }] };\n\n let children;\n\n if (hasProp(token, 'tokens')) {\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n children = markDownToSlate(\n (token.tokens as marked.Tokens.Link['tokens']) || [],\n interactionRenderers,\n markdownMap\n );\n } else if (hasProp(token, 'items')) {\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n children = markDownToSlate(token.items, interactionRenderers, markdownMap);\n } else {\n let mdText = '';\n\n if (/* token.type === 'link' || */ token.type === 'text') mdText = token.raw;\n else if (hasProp(token, 'text')) mdText = token.text;\n\n children = parseTextToCustomSlateNodes(mdText, interactionRenderers);\n }\n\n if (markdownMap?.[token.type]) {\n // Typed as any since typescript is unaware that token type matches argument\n const CustomComponent: any = markdownMap[token.type]?.(token as any);\n if (CustomComponent)\n return {\n type: 'override',\n component: <CustomComponent token={token} />,\n children: [{ text: '' }]\n };\n }\n\n if (!children.length) {\n return {\n type: 'paragraph',\n children: [{ text: token.raw }]\n };\n }\n\n switch (token.type) {\n case 'paragraph': {\n return {\n type: token.type,\n children\n };\n }\n case 'heading': {\n return {\n type:\n token.depth && token.depth <= 4\n ? (`heading-${token.depth}` as `heading-${1 | 2 | 3 | 4}`)\n : 'heading-4',\n children\n };\n }\n case 'link': {\n return {\n href: token.href,\n text: token.text || ''\n };\n }\n case 'em': {\n return {\n italic: true,\n text: token.text || ''\n };\n }\n case 'strong': {\n return {\n bold: true,\n text: token.text || ''\n };\n }\n case 'del': {\n return {\n 'line-through': true,\n text: token.text || ''\n };\n }\n case 'list': {\n return {\n type: token.ordered ? 'ordered-list' : 'unordered-list',\n children: children as CosmosCustom.ListItemElement[]\n };\n }\n case 'list_item': {\n return {\n type: 'list-item',\n children: children as Element[]\n };\n }\n case 'image': {\n return {\n type: 'image',\n alt: token.text,\n src: token.href,\n children: [{ text: '' }]\n };\n }\n default: {\n return {\n type: token.type,\n children\n } as Element;\n }\n }\n};\n\nconst markDownToSlate = (\n tokens: marked.Token[],\n interactionRenderers?: RichTextViewerProps['interactionRenderers'],\n markdownMap?: RichTextViewerProps['markdownMap']\n): (Element | Text)[] => {\n return tokens.map(token => {\n return getNode(token, interactionRenderers, markdownMap);\n });\n};\n\nexport const convertMarkdownForEditor = (\n md = '',\n searchRenderers?: RichTextEditorProps['searchRenderers']\n): (Element | Text)[] => {\n return [\n {\n type: 'paragraph',\n children: parseTextToCustomSlateNodes(md, searchRenderers)\n }\n ];\n};\n\n/* Converts markdown into Slate compatible nodes, also takes regex used\nin Feed Component to pass them down to custom elements */\nconst convertMarkdown = (\n md: string,\n interactionRenderers?: RichTextViewerProps['interactionRenderers'],\n markdownMap?: RichTextViewerProps['markdownMap']\n): (Element | Text)[] => {\n const lexer = new marked.Lexer({ gfm: false });\n const output = lexer.lex(md);\n return markDownToSlate(output, interactionRenderers, markdownMap);\n};\n\nexport default convertMarkdown;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/renderers.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAOlE,eAAO,MAAM,YAAY,UAAW,kBAAkB,
|
|
1
|
+
{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/renderers.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAOlE,eAAO,MAAM,YAAY,UAAW,kBAAkB,gBA6FrD,CAAC;AAGF,eAAO,MAAM,YAAY,UAAW,eAAe,gBAiClD,CAAC"}
|
|
@@ -20,7 +20,20 @@ export const nodeRenderer = (props) => {
|
|
|
20
20
|
return (_jsx("li", { ...props.attributes, "data-order": props.element.order, "data-level": props.element.level, "data-id": props.element.id, "data-parent-id": props.element.parentId, children: props.children }, void 0));
|
|
21
21
|
case 'custom': {
|
|
22
22
|
const CustomComponent = props.element.component;
|
|
23
|
-
|
|
23
|
+
let child = _jsx(CustomComponent, { ...props.attributes, children: props.element.content }, void 0);
|
|
24
|
+
if (props.element.href) {
|
|
25
|
+
child = (_jsx(Link, { href: props.element.href, target: '_blank', children: child }, void 0));
|
|
26
|
+
}
|
|
27
|
+
if (props.element.italic) {
|
|
28
|
+
child = _jsx("em", { children: child }, void 0);
|
|
29
|
+
}
|
|
30
|
+
if (props.element.bold) {
|
|
31
|
+
child = _jsx("strong", { children: child }, void 0);
|
|
32
|
+
}
|
|
33
|
+
if (props.element['line-through']) {
|
|
34
|
+
child = _jsx("del", { children: child }, void 0);
|
|
35
|
+
}
|
|
36
|
+
return child;
|
|
24
37
|
}
|
|
25
38
|
case 'override': {
|
|
26
39
|
return props.element.component;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderers.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/renderers.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAErF,oCAAoC;AACpC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAyB,EAAE,EAAE;IACxD,QAAQ,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE;QAC1B,KAAK,WAAW;YACd,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,KAAK,KAAK,CAAC,UAAU,YACpC,KAAK,CAAC,QAAQ,WACV,CACR,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,KAAK,KAAK,CAAC,UAAU,YACpC,KAAK,CAAC,QAAQ,WACV,CACR,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,KAAK,KAAK,CAAC,UAAU,YACpC,KAAK,CAAC,QAAQ,WACV,CACR,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,KAAK,KAAK,CAAC,UAAU,YACpC,KAAK,CAAC,QAAQ,WACV,CACR,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO,gBAAQ,KAAK,CAAC,UAAU,YAAG,KAAK,CAAC,QAAQ,WAAM,CAAC;QACzD,KAAK,gBAAgB;YACnB,OAAO,gBAAQ,KAAK,CAAC,UAAU,YAAG,KAAK,CAAC,QAAQ,WAAM,CAAC;QACzD,KAAK,WAAW;YACd,OAAO,CACL,gBACM,KAAK,CAAC,UAAU,gBACR,KAAK,CAAC,OAAO,CAAC,KAAK,gBACnB,KAAK,CAAC,OAAO,CAAC,KAAK,aACtB,KAAK,CAAC,OAAO,CAAC,EAAE,oBACT,KAAK,CAAC,OAAO,CAAC,QAAQ,YAErC,KAAK,CAAC,QAAQ,WACZ,CACN,CAAC;QACJ,KAAK,QAAQ,CAAC,CAAC;YACb,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;YAChD,
|
|
1
|
+
{"version":3,"file":"renderers.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/renderers.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RenderElementProps, RenderLeafProps } from 'slate-react';\n\nimport { Text, Link, Image } from '@pega/cosmos-react-core';\n\nimport { Table, TableRow, TableCell, TableBody } from '../DecoratorComponents/Table';\n\n// Renderer for block level elements\nexport const nodeRenderer = (props: RenderElementProps) => {\n switch (props.element.type) {\n case 'heading-1':\n return (\n <Text variant='h1' {...props.attributes}>\n {props.children}\n </Text>\n );\n case 'heading-2':\n return (\n <Text variant='h2' {...props.attributes}>\n {props.children}\n </Text>\n );\n case 'heading-3':\n return (\n <Text variant='h3' {...props.attributes}>\n {props.children}\n </Text>\n );\n case 'heading-4':\n return (\n <Text variant='h4' {...props.attributes}>\n {props.children}\n </Text>\n );\n case 'ordered-list':\n return <ol {...props.attributes}>{props.children}</ol>;\n case 'unordered-list':\n return <ul {...props.attributes}>{props.children}</ul>;\n case 'list-item':\n return (\n <li\n {...props.attributes}\n data-order={props.element.order}\n data-level={props.element.level}\n data-id={props.element.id}\n data-parent-id={props.element.parentId}\n >\n {props.children}\n </li>\n );\n case 'custom': {\n const CustomComponent = props.element.component;\n let child = <CustomComponent {...props.attributes}>{props.element.content}</CustomComponent>;\n if (props.element.href) {\n child = (\n <Link href={props.element.href} target='_blank'>\n {child}\n </Link>\n );\n }\n if (props.element.italic) {\n child = <em>{child}</em>;\n }\n if (props.element.bold) {\n child = <strong>{child}</strong>;\n }\n if (props.element['line-through']) {\n child = <del>{child}</del>;\n }\n return child;\n }\n case 'override': {\n return props.element.component;\n }\n case 'table':\n return <Table {...props.attributes}>{props.children}</Table>;\n case 'table-body':\n return <TableBody {...props.attributes}>{props.children}</TableBody>;\n case 'table-row':\n return <TableRow {...props.attributes}>{props.children}</TableRow>;\n case 'table-cell':\n return <TableCell {...props.attributes}>{props.children}</TableCell>;\n case 'paragraph':\n return (\n <div>\n <Text {...props.attributes}>{props.children}</Text>\n </div>\n );\n case 'image':\n return (\n <div {...props.attributes}>\n <Image src={props.element.src} alt={props.element.alt as string} />\n {props.children}\n </div>\n );\n case 'image-placeholder':\n return <div {...props.attributes}>{props.children}</div>;\n default: {\n return <span {...props.attributes}>{props.children}</span>;\n }\n }\n};\n\n// Renderer for inline elements\nexport const leafRenderer = (props: RenderLeafProps) => {\n let child = props.children;\n\n if (props.leaf.searchResult) {\n const CustomComponent = props.leaf.searchResult.component;\n return (\n <span {...props.attributes}>\n <CustomComponent {...props.leaf.searchResult.props}>{child}</CustomComponent>\n </span>\n );\n }\n\n if (props.leaf['line-through']) {\n child = <del>{child}</del>;\n }\n\n if (props.leaf.italic) {\n child = <em>{child}</em>;\n }\n\n if (props.leaf.bold) {\n child = <strong>{child}</strong>;\n }\n\n if (props.leaf.href) {\n child = (\n <Link href={props.leaf.href} target='_blank'>\n {child}\n </Link>\n );\n }\n\n return <span {...props.attributes}>{child}</span>;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slateConverter.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/slateConverter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpD,eAAO,MAAM,cAAc
|
|
1
|
+
{"version":3,"file":"slateConverter.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/slateConverter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;CAoB1B,CAAC;AA8BF,eAAO,MAAM,aAAa,UAAW,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,KAAG,MAkCzD,CAAC;AAEF,eAAO,MAAM,kBAAkB,UAAW,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,KAAG,MAW9D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slateConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/slateConverter.ts"],"names":[],"mappings":"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","sourcesContent":["import { CosmosCustom, Element, Text } from 'slate';\n\nexport const slateToHtmlMap = {\n link: 'a',\n 'heading-1': 'h1',\n 'heading-2': 'h2',\n 'heading-3': 'h3',\n 'heading-4': 'h4',\n 'unordered-list': 'ul',\n 'ordered-list': 'ol',\n 'list-item': 'li',\n table: 'table',\n 'table-body': 'tbody',\n 'table-row': 'tr',\n 'table-cell': 'td',\n paragraph: 'p',\n bold: 'b',\n 'line-through': 'del',\n italic: 'i',\n href: 'a',\n image: 'img'\n};\n\n// Reduces the properties in a slate node into the correct html attributes, mostly used for list-items at the moment\nconst getAttrs = (\n el: Exclude<Element, CosmosCustom.ImagePlaceholderElement | CosmosCustom.CustomElement>\n) => {\n // eslint-disable-next-line sonarjs/no-small-switch\n switch (el.type) {\n case 'list-item':\n return [\n { name: 'data-id', value: el.id },\n { name: 'data-parent-id', value: el.parentId },\n { name: 'data-order', value: el.order },\n { name: 'data-level', value: el.level }\n ].reduce((acc, attr) => {\n if (attr.value) {\n return `${acc} ${attr.name}='${attr.value}'`;\n }\n return acc;\n }, '');\n default:\n return Object.keys(el).reduce((innerAcc, key) => {\n return key !== 'type' && key !== 'children'\n ? `${innerAcc} ${key}='${el[key as keyof Element]}'`\n : innerAcc;\n }, '');\n }\n};\n\n// Recursive function to reduce Slate Nodes into an HTML string\nexport const constructHtml = (nodes: (Element | Text)[]): string => {\n return nodes.reduce((acc, node) => {\n if (\n Element.isElement(node) &&\n (node.type === 'image-placeholder' || node.type === 'custom' || node.type === 'override')\n )\n return acc;\n\n const htmlTag = Element.isElement(node) ? slateToHtmlMap[node.type] : undefined;\n let html;\n if (Text.isText(node)) {\n const { text, ...restNode } = node;\n // Reducing inline style properties from a single Slate Node into the correct HTML tags\n html = Object.keys(restNode).reduce((innerAcc, key, i) => {\n const tag = slateToHtmlMap[key as 'bold' | 'line-through' | 'italic' | 'href'];\n // Add the href attribute if needed\n const firstInnerTag = tag === 'a' ? `${tag} href='${restNode[key as 'href']}'` : tag;\n\n if (i === 0) {\n return `<${firstInnerTag}>${text}</${tag}>`;\n }\n return `<${firstInnerTag}>${innerAcc}</${tag}>`;\n }, '');\n if (!html) {\n html = text;\n }\n } else {\n const attrs = getAttrs(node);\n html = `<${htmlTag}${attrs}>${constructHtml(\n (node.children as (Element | Text)[]) || []\n )}</${htmlTag}>`;\n }\n return `${acc}${html}`;\n }, '');\n};\n\nexport const convertSlateToHtml = (nodes: (Element | Text)[]): string => {\n if (\n nodes.length === 1 &&\n Element.isElement(nodes[0]) &&\n Text.isText(nodes[0].children[0]) &&\n nodes[0].children[0].text === ''\n ) {\n return '';\n }\n const htmlNodes = constructHtml(nodes);\n return `<body>${htmlNodes}</body>`;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"slateConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/slateConverter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,GAAG;IACT,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,IAAI;IACjB,gBAAgB,EAAE,IAAI;IACtB,cAAc,EAAE,IAAI;IACpB,WAAW,EAAE,IAAI;IACjB,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,OAAO;IACrB,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,IAAI;IAClB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,GAAG;IACT,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,KAAK;CACb,CAAC;AAEF,oHAAoH;AACpH,MAAM,QAAQ,GAAG,CACf,EAAuF,EACvF,EAAE;IACF,mDAAmD;IACnD,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,KAAK,WAAW;YACd,OAAO;gBACL,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE;gBACjC,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE;gBAC9C,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE;gBACvC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE;aACxC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;gBACrB,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,OAAO,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC;iBAC9C;gBACD,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,EAAE,CAAC,CAAC;QACT;YACE,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE;gBAC9C,OAAO,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,UAAU;oBACzC,CAAC,CAAC,GAAG,QAAQ,IAAI,GAAG,KAAK,EAAE,CAAC,GAAoB,CAAC,GAAG;oBACpD,CAAC,CAAC,QAAQ,CAAC;YACf,CAAC,EAAE,EAAE,CAAC,CAAC;KACV;AACH,CAAC,CAAC;AAEF,+DAA+D;AAC/D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAU,EAAE;IACjE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QAChC,IACE,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC;YACvB,CAAC,IAAI,CAAC,IAAI,KAAK,mBAAmB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC;YAEzF,OAAO,GAAG,CAAC;QAEb,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAChF,IAAI,IAAI,CAAC;QACT,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;YACrB,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,GAAG,IAAI,CAAC;YACnC,uFAAuF;YACvF,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE;gBACvD,MAAM,GAAG,GAAG,cAAc,CAAC,GAAkD,CAAC,CAAC;gBAC/E,mCAAmC;gBACnC,MAAM,aAAa,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,UAAU,QAAQ,CAAC,GAAa,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;gBAErF,IAAI,CAAC,KAAK,CAAC,EAAE;oBACX,OAAO,IAAI,aAAa,IAAI,IAAI,KAAK,GAAG,GAAG,CAAC;iBAC7C;gBACD,OAAO,IAAI,aAAa,IAAI,QAAQ,KAAK,GAAG,GAAG,CAAC;YAClD,CAAC,EAAE,EAAE,CAAC,CAAC;YACP,IAAI,CAAC,IAAI,EAAE;gBACT,IAAI,GAAG,IAAI,CAAC;aACb;SACF;aAAM;YACL,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC7B,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,IAAI,aAAa,CACxC,IAAI,CAAC,QAA+B,IAAI,EAAE,CAC5C,KAAK,OAAO,GAAG,CAAC;SAClB;QACD,OAAO,GAAG,GAAG,GAAG,IAAI,EAAE,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAyB,EAAU,EAAE;IACtE,IACE,KAAK,CAAC,MAAM,KAAK,CAAC;QAClB,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACjC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,EAChC;QACA,OAAO,EAAE,CAAC;KACX;IACD,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACvC,OAAO,SAAS,SAAS,SAAS,CAAC;AACrC,CAAC,CAAC","sourcesContent":["import { CosmosCustom, Element, Text } from 'slate';\n\nexport const slateToHtmlMap = {\n link: 'a',\n 'heading-1': 'h1',\n 'heading-2': 'h2',\n 'heading-3': 'h3',\n 'heading-4': 'h4',\n 'unordered-list': 'ul',\n 'ordered-list': 'ol',\n 'list-item': 'li',\n table: 'table',\n 'table-body': 'tbody',\n 'table-row': 'tr',\n 'table-cell': 'td',\n text: 'span',\n paragraph: 'p',\n bold: 'b',\n 'line-through': 'del',\n italic: 'i',\n href: 'a',\n image: 'img'\n};\n\n// Reduces the properties in a slate node into the correct html attributes, mostly used for list-items at the moment\nconst getAttrs = (\n el: Exclude<Element, CosmosCustom.ImagePlaceholderElement | CosmosCustom.CustomElement>\n) => {\n // eslint-disable-next-line sonarjs/no-small-switch\n switch (el.type) {\n case 'list-item':\n return [\n { name: 'data-id', value: el.id },\n { name: 'data-parent-id', value: el.parentId },\n { name: 'data-order', value: el.order },\n { name: 'data-level', value: el.level }\n ].reduce((acc, attr) => {\n if (attr.value) {\n return `${acc} ${attr.name}='${attr.value}'`;\n }\n return acc;\n }, '');\n default:\n return Object.keys(el).reduce((innerAcc, key) => {\n return key !== 'type' && key !== 'children'\n ? `${innerAcc} ${key}='${el[key as keyof Element]}'`\n : innerAcc;\n }, '');\n }\n};\n\n// Recursive function to reduce Slate Nodes into an HTML string\nexport const constructHtml = (nodes: (Element | Text)[]): string => {\n return nodes.reduce((acc, node) => {\n if (\n Element.isElement(node) &&\n (node.type === 'image-placeholder' || node.type === 'custom' || node.type === 'override')\n )\n return acc;\n\n const htmlTag = Element.isElement(node) ? slateToHtmlMap[node.type] : undefined;\n let html;\n if (Text.isText(node)) {\n const { text, ...restNode } = node;\n // Reducing inline style properties from a single Slate Node into the correct HTML tags\n html = Object.keys(restNode).reduce((innerAcc, key, i) => {\n const tag = slateToHtmlMap[key as 'bold' | 'line-through' | 'italic' | 'href'];\n // Add the href attribute if needed\n const firstInnerTag = tag === 'a' ? `${tag} href='${restNode[key as 'href']}'` : tag;\n\n if (i === 0) {\n return `<${firstInnerTag}>${text}</${tag}>`;\n }\n return `<${firstInnerTag}>${innerAcc}</${tag}>`;\n }, '');\n if (!html) {\n html = text;\n }\n } else {\n const attrs = getAttrs(node);\n html = `<${htmlTag}${attrs}>${constructHtml(\n (node.children as (Element | Text)[]) || []\n )}</${htmlTag}>`;\n }\n return `${acc}${html}`;\n }, '');\n};\n\nexport const convertSlateToHtml = (nodes: (Element | Text)[]): string => {\n if (\n nodes.length === 1 &&\n Element.isElement(nodes[0]) &&\n Text.isText(nodes[0].children[0]) &&\n nodes[0].children[0].text === ''\n ) {\n return '';\n }\n const htmlNodes = constructHtml(nodes);\n return `<body>${htmlNodes}</body>`;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-rte",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.4.1",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.4.1",
|
|
24
24
|
"@popperjs/core": "^2.11.0",
|
|
25
|
-
"
|
|
26
|
-
"marked": "^2.0.3",
|
|
25
|
+
"marked": "^4.0.12",
|
|
27
26
|
"parse5": "^6.0.1",
|
|
28
27
|
"polished": "^4.1.0",
|
|
29
28
|
"react": "^16.14.0 || ^17.0.0",
|
|
30
29
|
"react-dom": "^16.14.0 || ^17.0.0",
|
|
30
|
+
"react-popper": "^2.2.5",
|
|
31
31
|
"slate": "^0.72.3",
|
|
32
32
|
"slate-history": "^0.66.0",
|
|
33
33
|
"slate-react": "^0.72.1",
|
|
@@ -35,15 +35,14 @@
|
|
|
35
35
|
"tinymce": "^5.10.2"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@storybook/addon-a11y": "^6.4.
|
|
39
|
-
"@storybook/addon-actions": "^6.4.
|
|
40
|
-
"@storybook/addon-storysource": "^6.4.
|
|
41
|
-
"@storybook/addon-toolbars": "^6.4.
|
|
42
|
-
"@storybook/addons": "^6.4.
|
|
43
|
-
"@storybook/react": "^6.4.
|
|
44
|
-
"@storybook/theming": "^6.4.
|
|
45
|
-
"@types/
|
|
46
|
-
"@types/marked": "2.0.2",
|
|
38
|
+
"@storybook/addon-a11y": "^6.4.19",
|
|
39
|
+
"@storybook/addon-actions": "^6.4.19",
|
|
40
|
+
"@storybook/addon-storysource": "^6.4.19",
|
|
41
|
+
"@storybook/addon-toolbars": "^6.4.19",
|
|
42
|
+
"@storybook/addons": "^6.4.19",
|
|
43
|
+
"@storybook/react": "^6.4.19",
|
|
44
|
+
"@storybook/theming": "^6.4.19",
|
|
45
|
+
"@types/marked": "^4.0.2",
|
|
47
46
|
"@types/parse5": "^6.0.0",
|
|
48
47
|
"@types/tinymce": "^4.6.4",
|
|
49
48
|
"enzyme": "^3.11.0",
|