@frontify/fondue 12.0.0-beta.11 → 12.0.0-beta.12
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/dist/components/RichTextEditor/RichTextEditor.es.js +9 -9
- package/dist/components/RichTextEditor/RichTextEditor.es.js.map +1 -1
- package/dist/components/RichTextEditor/utils/parseRawValue.d.ts +1 -1
- package/dist/components/RichTextEditor/utils/parseRawValue.es.js +13 -13
- package/dist/components/RichTextEditor/utils/parseRawValue.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
|
@@ -35,7 +35,7 @@ const F = {
|
|
|
35
35
|
placeholder: g = "",
|
|
36
36
|
readonly: P = !1,
|
|
37
37
|
clear: A = !1,
|
|
38
|
-
designTokens:
|
|
38
|
+
designTokens: o = s,
|
|
39
39
|
actions: f = x,
|
|
40
40
|
onTextChange: a,
|
|
41
41
|
onBlur: c,
|
|
@@ -43,7 +43,7 @@ const F = {
|
|
|
43
43
|
position: b = j.FLOATING,
|
|
44
44
|
plugins: N = H
|
|
45
45
|
}) => {
|
|
46
|
-
const
|
|
46
|
+
const e = v(u), { localValue: l } = V(e, A), S = {
|
|
47
47
|
placeholder: g,
|
|
48
48
|
renderPlaceholder: ({ children: t, attributes: m }) => {
|
|
49
49
|
const R = {
|
|
@@ -66,23 +66,23 @@ const F = {
|
|
|
66
66
|
};
|
|
67
67
|
L(() => {
|
|
68
68
|
for (const t of Object.values(d).filter((m) => m !== d.ELEMENT_PARAGRAPH))
|
|
69
|
-
|
|
70
|
-
}, [
|
|
69
|
+
o[t] || (o[t] = s[t]);
|
|
70
|
+
}, [o]);
|
|
71
71
|
const p = C((t) => {
|
|
72
72
|
a && a(JSON.stringify(t));
|
|
73
73
|
}, G), h = T((t) => {
|
|
74
74
|
p(t), l.current = t;
|
|
75
|
-
}, [p, l]), r = Y(
|
|
75
|
+
}, [p, l]), r = Y(e, N), i = !!r && f.length === 0, y = i ? r.create() : z();
|
|
76
76
|
return /* @__PURE__ */ n.createElement(I, {
|
|
77
|
-
value: { designTokens:
|
|
77
|
+
value: { designTokens: o, position: b }
|
|
78
78
|
}, /* @__PURE__ */ n.createElement(_, {
|
|
79
|
-
id:
|
|
80
|
-
initialValue: M(
|
|
79
|
+
id: e,
|
|
80
|
+
initialValue: M(E),
|
|
81
81
|
onChange: h,
|
|
82
82
|
editableProps: S,
|
|
83
83
|
plugins: y
|
|
84
84
|
}, i && r.toolbar(), i && r.inline(), !i && /* @__PURE__ */ n.createElement(D, {
|
|
85
|
-
editorId:
|
|
85
|
+
editorId: e,
|
|
86
86
|
actions: f
|
|
87
87
|
})));
|
|
88
88
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, useCallback, useEffect } from 'react';\nimport { Plate, TNode } from '@udecode/plate';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { debounce } from '@utilities/debounce';\nimport { EditableProps, RenderPlaceholderProps } from 'slate-react/dist/components/editable';\nimport { Toolbar } from './components/Toolbar/Toolbar';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { useEditorState } from './hooks';\nimport { DesignTokens, PaddingSizes } from './types';\nimport { EditorActions, defaultActions } from './utils/actions';\nimport { ON_SAVE_DELAY_IN_MS } from './utils';\nimport { defaultDesignTokens } from './utils/defaultDesignTokens';\nimport { parseRawValue } from './utils/parseRawValue';\nimport { TextStyles } from './Plugins/TextStylePlugin/TextStyles';\nimport { Position } from './EditorPositioningWrapper';\nimport { getEditorConfig } from './utils/editorConfig';\nimport { GeneratePlugins, PluginComposer, defaultPlugins } from './Plugins';\nimport { forceTabOutOfActiveElement } from './helpers';\n\nconst PLACEHOLDER_STYLES: RenderPlaceholderProps['attributes']['style'] = {\n position: 'relative',\n height: '0',\n};\n\nexport type RichTextEditorProps = {\n id?: string;\n placeholder?: string;\n value?: string;\n onTextChange?: (value: string) => void;\n onBlur?: (value: string) => void;\n readonly?: boolean;\n clear?: boolean;\n designTokens?: DesignTokens;\n actions?: EditorActions[][];\n padding?: PaddingSizes;\n position?: Position;\n plugins?: PluginComposer;\n};\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n id,\n value: initialValue,\n placeholder = '',\n readonly = false,\n clear = false,\n designTokens = defaultDesignTokens,\n actions = defaultActions,\n onTextChange,\n onBlur,\n padding = PaddingSizes.None,\n position = Position.FLOATING,\n plugins = defaultPlugins,\n}) => {\n const editorId = useMemoizedId(id);\n const { localValue } = useEditorState(editorId, clear);\n\n const editableProps: EditableProps = {\n placeholder,\n renderPlaceholder: ({ children, attributes }) => {\n const mergedAttributes = {\n ...attributes,\n style: {\n ...attributes.style,\n ...PLACEHOLDER_STYLES,\n },\n };\n return <span {...mergedAttributes}>{children}</span>;\n },\n readOnly: readonly,\n onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n className: padding,\n onKeyDown: (event) => {\n if (event.code === 'Tab') {\n // Forcing a blur event because of accessibility\n forceTabOutOfActiveElement();\n }\n },\n };\n\n useEffect(() => {\n for (const element of Object.values(TextStyles).filter(\n (textStyle) => textStyle !== TextStyles.ELEMENT_PARAGRAPH,\n )) {\n if (!designTokens[element]) {\n designTokens[element] = defaultDesignTokens[element];\n }\n }\n }, [designTokens]);\n\n const debouncedOnChange = debounce((value: TNode[]) => {\n onTextChange && onTextChange(JSON.stringify(value));\n }, ON_SAVE_DELAY_IN_MS);\n\n const onChange = useCallback(\n (value) => {\n debouncedOnChange(value);\n localValue.current = value;\n },\n [debouncedOnChange, localValue],\n );\n\n const config = GeneratePlugins(editorId, plugins);\n const isNew = !!config && actions.length === 0;\n const editorConfig = isNew ? config.create() : getEditorConfig();\n\n return (\n <RichTextEditorProvider value={{ designTokens, position }}>\n <Plate\n id={editorId}\n initialValue={parseRawValue(
|
|
1
|
+
{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, useCallback, useEffect } from 'react';\nimport { Plate, TNode } from '@udecode/plate';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { debounce } from '@utilities/debounce';\nimport { EditableProps, RenderPlaceholderProps } from 'slate-react/dist/components/editable';\nimport { Toolbar } from './components/Toolbar/Toolbar';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { useEditorState } from './hooks';\nimport { DesignTokens, PaddingSizes } from './types';\nimport { EditorActions, defaultActions } from './utils/actions';\nimport { ON_SAVE_DELAY_IN_MS } from './utils';\nimport { defaultDesignTokens } from './utils/defaultDesignTokens';\nimport { parseRawValue } from './utils/parseRawValue';\nimport { TextStyles } from './Plugins/TextStylePlugin/TextStyles';\nimport { Position } from './EditorPositioningWrapper';\nimport { getEditorConfig } from './utils/editorConfig';\nimport { GeneratePlugins, PluginComposer, defaultPlugins } from './Plugins';\nimport { forceTabOutOfActiveElement } from './helpers';\n\nconst PLACEHOLDER_STYLES: RenderPlaceholderProps['attributes']['style'] = {\n position: 'relative',\n height: '0',\n};\n\nexport type RichTextEditorProps = {\n id?: string;\n placeholder?: string;\n value?: string;\n onTextChange?: (value: string) => void;\n onBlur?: (value: string) => void;\n readonly?: boolean;\n clear?: boolean;\n designTokens?: DesignTokens;\n actions?: EditorActions[][];\n padding?: PaddingSizes;\n position?: Position;\n plugins?: PluginComposer;\n};\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n id,\n value: initialValue,\n placeholder = '',\n readonly = false,\n clear = false,\n designTokens = defaultDesignTokens,\n actions = defaultActions,\n onTextChange,\n onBlur,\n padding = PaddingSizes.None,\n position = Position.FLOATING,\n plugins = defaultPlugins,\n}) => {\n const editorId = useMemoizedId(id);\n const { localValue } = useEditorState(editorId, clear);\n\n const editableProps: EditableProps = {\n placeholder,\n renderPlaceholder: ({ children, attributes }) => {\n const mergedAttributes = {\n ...attributes,\n style: {\n ...attributes.style,\n ...PLACEHOLDER_STYLES,\n },\n };\n return <span {...mergedAttributes}>{children}</span>;\n },\n readOnly: readonly,\n onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n className: padding,\n onKeyDown: (event) => {\n if (event.code === 'Tab') {\n // Forcing a blur event because of accessibility\n forceTabOutOfActiveElement();\n }\n },\n };\n\n useEffect(() => {\n for (const element of Object.values(TextStyles).filter(\n (textStyle) => textStyle !== TextStyles.ELEMENT_PARAGRAPH,\n )) {\n if (!designTokens[element]) {\n designTokens[element] = defaultDesignTokens[element];\n }\n }\n }, [designTokens]);\n\n const debouncedOnChange = debounce((value: TNode[]) => {\n onTextChange && onTextChange(JSON.stringify(value));\n }, ON_SAVE_DELAY_IN_MS);\n\n const onChange = useCallback(\n (value) => {\n debouncedOnChange(value);\n localValue.current = value;\n },\n [debouncedOnChange, localValue],\n );\n\n const config = GeneratePlugins(editorId, plugins);\n const isNew = !!config && actions.length === 0;\n const editorConfig = isNew ? config.create() : getEditorConfig();\n\n return (\n <RichTextEditorProvider value={{ designTokens, position }}>\n <Plate\n id={editorId}\n initialValue={parseRawValue(initialValue)}\n onChange={onChange}\n editableProps={editableProps}\n plugins={editorConfig}\n >\n {isNew && config.toolbar()}\n {isNew && config.inline()}\n {!isNew && <Toolbar editorId={editorId} actions={actions} />}\n </Plate>\n </RichTextEditorProvider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,IAAoE;AAAA,EACtE,UAAU;AAAA,EACV,QAAQ;AACZ,GAiBa,KAA0C,CAAC;AAAA,EACpD;AAAA,EACA,OAAO;AAAA,EACP,iBAAc;AAAA,EACd,cAAW;AAAA,EACX,WAAQ;AAAA,EACR,kBAAe;AAAA,EACf,aAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,aAAU,EAAa;AAAA,EACvB,cAAW,EAAS;AAAA,EACpB,aAAU;AAAA,MACR;AACI,QAAA,IAAW,EAAc,CAAE,GAC3B,EAAE,kBAAe,EAAe,GAAU,CAAK,GAE/C,IAA+B;AAAA,IACjC;AAAA,IACA,mBAAmB,CAAC,EAAE,aAAU,oBAAiB;AAC7C,YAAM,IAAmB;AAAA,QACrB,GAAG;AAAA,QACH,OAAO;AAAA,UACH,GAAG,EAAW;AAAA,UACd,GAAG;AAAA,QACP;AAAA,MAAA;AAEJ,aAAQ,kBAAA,cAAA,QAAA;AAAA,QAAM,GAAG;AAAA,MAAA,GAAmB,CAAS;AAAA,IACjD;AAAA,IACA,UAAU;AAAA,IACV,QAAQ,MAAM,KAAU,EAAO,KAAK,UAAU,EAAW,OAAO,CAAC;AAAA,IACjE,WAAW;AAAA,IACX,WAAW,CAAC,MAAU;AACd,MAAA,EAAM,SAAS,SAEY;IAEnC;AAAA,EAAA;AAGJ,IAAU,MAAM;AACD,eAAA,KAAW,OAAO,OAAO,CAAU,EAAE,OAC5C,CAAC,MAAc,MAAc,EAAW,iBAC5C;AACQ,MAAC,EAAa,MACd,GAAa,KAAW,EAAoB;AAAA,EAEpD,GACD,CAAC,CAAY,CAAC;AAEX,QAAA,IAAoB,EAAS,CAAC,MAAmB;AACnD,SAAgB,EAAa,KAAK,UAAU,CAAK,CAAC;AAAA,KACnD,CAAmB,GAEhB,IAAW,EACb,CAAC,MAAU;AACP,MAAkB,CAAK,GACvB,EAAW,UAAU;AAAA,EAAA,GAEzB,CAAC,GAAmB,CAAU,CAClC,GAEM,IAAS,EAAgB,GAAU,CAAO,GAC1C,IAAQ,CAAC,CAAC,KAAU,EAAQ,WAAW,GACvC,IAAe,IAAQ,EAAO,WAAW,EAAgB;AAE/D,SACK,kBAAA,cAAA,GAAA;AAAA,IAAuB,OAAO,EAAE,iBAAc,YAAS;AAAA,EAAA,GACnD,kBAAA,cAAA,GAAA;AAAA,IACG,IAAI;AAAA,IACJ,cAAc,EAAc,CAAY;AAAA,IACxC;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAER,GAAA,KAAS,EAAO,QAAA,GAChB,KAAS,EAAO,OAAO,GACvB,CAAC,KAAU,kBAAA,cAAA,GAAA;AAAA,IAAQ;AAAA,IAAoB;AAAA,EAAkB,CAAA,CAC9D,CACJ;AAER;"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { ELEMENT_PARAGRAPH as m, createPlateEditor as
|
|
2
|
-
import { getEditorConfig as
|
|
3
|
-
const
|
|
4
|
-
let
|
|
5
|
-
if (!
|
|
6
|
-
return
|
|
1
|
+
import { ELEMENT_PARAGRAPH as m, createPlateEditor as i, parseHtmlDocument as l, deserializeHtml as p } from "@udecode/plate";
|
|
2
|
+
import { getEditorConfig as a } from "./editorConfig.es.js";
|
|
3
|
+
const d = (t) => /^<\w+>.*<\/\w+>$/.test(t) ? t : `<p>${t}</p>`, u = [{ type: m, children: [{ text: "" }] }], h = (t) => {
|
|
4
|
+
let e = u;
|
|
5
|
+
if (!t)
|
|
6
|
+
return e;
|
|
7
7
|
try {
|
|
8
|
-
|
|
8
|
+
e = JSON.parse(t);
|
|
9
9
|
} catch {
|
|
10
|
-
const
|
|
11
|
-
element:
|
|
10
|
+
const o = i({ plugins: a() }), n = t.trim().replace(/>\s+</g, "><"), c = d(n), s = l(c), r = p(o, {
|
|
11
|
+
element: s.body,
|
|
12
12
|
stripWhitespace: !0
|
|
13
13
|
});
|
|
14
|
-
|
|
14
|
+
r && (e = r);
|
|
15
15
|
}
|
|
16
|
-
return
|
|
16
|
+
return e;
|
|
17
17
|
};
|
|
18
18
|
export {
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
u as EMPTY_RICH_TEXT_VALUE,
|
|
20
|
+
h as parseRawValue
|
|
21
21
|
};
|
|
22
22
|
//# sourceMappingURL=parseRawValue.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parseRawValue.es.js","sources":["../../../../src/components/RichTextEditor/utils/parseRawValue.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ELEMENT_PARAGRAPH, Value, createPlateEditor, deserializeHtml, parseHtmlDocument } from '@udecode/plate';\nimport { getEditorConfig } from './editorConfig';\n\nconst wrapTextInHtml = (text: string) => {\n const htmlDocRegex = /^<\\w+>.*<\\/\\w+>$/;\n\n return htmlDocRegex.test(text) ? text : `<p>${text}</p>`;\n};\n\nexport const EMPTY_RICH_TEXT_VALUE: Value = [{ type: ELEMENT_PARAGRAPH, children: [{ text: '' }] }];\n\nexport const parseRawValue = (
|
|
1
|
+
{"version":3,"file":"parseRawValue.es.js","sources":["../../../../src/components/RichTextEditor/utils/parseRawValue.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ELEMENT_PARAGRAPH, Value, createPlateEditor, deserializeHtml, parseHtmlDocument } from '@udecode/plate';\nimport { getEditorConfig } from './editorConfig';\n\nconst wrapTextInHtml = (text: string) => {\n const htmlDocRegex = /^<\\w+>.*<\\/\\w+>$/;\n\n return htmlDocRegex.test(text) ? text : `<p>${text}</p>`;\n};\n\nexport const EMPTY_RICH_TEXT_VALUE: Value = [{ type: ELEMENT_PARAGRAPH, children: [{ text: '' }] }];\n\nexport const parseRawValue = (raw?: string): Value => {\n let parsedValue = EMPTY_RICH_TEXT_VALUE;\n\n if (!raw) {\n return parsedValue;\n }\n\n try {\n parsedValue = JSON.parse(raw);\n } catch {\n const editor = createPlateEditor({ plugins: getEditorConfig() });\n const trimmed = raw.trim().replace(/>\\s+</g, '><');\n const htmlDocumentString = wrapTextInHtml(trimmed);\n const document = parseHtmlDocument(htmlDocumentString);\n const parsedHtml = deserializeHtml(editor, {\n element: document.body,\n stripWhitespace: true,\n }) as Value;\n if (parsedHtml) {\n parsedValue = parsedHtml;\n }\n }\n\n return parsedValue;\n};\n"],"names":[],"mappings":";;AAKA,MAAM,IAAiB,CAAC,MAGb,AAFc,mBAED,KAAK,CAAI,IAAI,IAAO,MAAM,SAGrC,IAA+B,CAAC,EAAE,MAAM,GAAmB,UAAU,CAAC,EAAE,MAAM,GAAI,CAAA,GAAG,GAErF,IAAgB,CAAC,MAAwB;AAClD,MAAI,IAAc;AAElB,MAAI,CAAC;AACM,WAAA;AAGP,MAAA;AACc,QAAA,KAAK,MAAM,CAAG;AAAA,EAAA,QAC9B;AACE,UAAM,IAAS,EAAkB,EAAE,SAAS,EAAA,EAAmB,CAAA,GACzD,IAAU,EAAI,KAAA,EAAO,QAAQ,UAAU,IAAI,GAC3C,IAAqB,EAAe,CAAO,GAC3C,IAAW,EAAkB,CAAkB,GAC/C,IAAa,EAAgB,GAAQ;AAAA,MACvC,SAAS,EAAS;AAAA,MAClB,iBAAiB;AAAA,IAAA,CACpB;AACD,IAAI,KACc,KAAA;AAAA,EAEtB;AAEO,SAAA;AACX;"}
|