@frontify/fondue 12.0.0-beta.155 → 12.0.0-beta.156
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/Plugins/ListPlugin/ListItemContentMarkupElement.es.js +7 -7
- package/dist/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.es.js.map +1 -1
- package/dist/components/RichTextEditor/Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.es.js +3 -3
- package/dist/components/RichTextEditor/Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.es.js.map +1 -1
- package/dist/components/RichTextEditor/Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.d.ts +1 -1
- package/dist/components/RichTextEditor/Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.es.js +5 -5
- package/dist/components/RichTextEditor/Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/utils/reactCssPropsToCss.es.js +3 -3
- package/dist/components/RichTextEditor/serializer/utils/reactCssPropsToCss.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js +18 -18
- package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js.map +1 -1
- package/dist/index.cjs.js +4 -4
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +4 -4
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useRichTextEditorContext as c } from "../../context/RichTextEditorContext.es.js";
|
|
2
|
-
import { TextStylesToDesignTokenMap as
|
|
3
|
-
import { ELEMENT_LIC as
|
|
2
|
+
import { TextStylesToDesignTokenMap as p } from "../../types.es.js";
|
|
3
|
+
import { ELEMENT_LIC as l } from "@udecode/plate";
|
|
4
4
|
import { merge as n } from "../../../../utilities/merge.es.js";
|
|
5
5
|
import o from "react";
|
|
6
6
|
import { getColumnBreakClasses as E } from "../ColumnBreakPlugin/utils/getColumnBreakClasses.es.js";
|
|
@@ -10,26 +10,26 @@ import { MARK_TEXT_STYLE as T } from "./ListPlugin.es.js";
|
|
|
10
10
|
import { TextStyles as s } from "../TextStylePlugin/TextStyles/textStyles.es.js";
|
|
11
11
|
const g = (t) => {
|
|
12
12
|
const r = Object.values(s).find((e) => (t == null ? void 0 : t[T]) === e) ?? s.ELEMENT_PARAGRAPH;
|
|
13
|
-
return
|
|
13
|
+
return p[r];
|
|
14
14
|
}, x = (t, r) => {
|
|
15
15
|
var e;
|
|
16
16
|
return ((e = t[g(r.children[0])]) == null ? void 0 : e.textDecoration) === "underline" ? "tw-underline" : "";
|
|
17
17
|
}, C = (t) => n([
|
|
18
18
|
E(t),
|
|
19
|
-
t.align ? f[t.align] : "tw-justify-start
|
|
19
|
+
t.align ? f[t.align] : "tw-justify-start",
|
|
20
20
|
"tw-grid tw-grid-cols-[min-content_repeat(3,_auto)]"
|
|
21
|
-
]),
|
|
21
|
+
]), L = ({ attributes: t, children: r, element: e }) => {
|
|
22
22
|
const { designTokens: m } = c(), i = e.children.every((a) => a.text === "");
|
|
23
23
|
return /* @__PURE__ */ o.createElement("p", { className: C(e), ...t }, /* @__PURE__ */ o.createElement("span", { className: n([i && "tw-w-4", x(m, e)]) }, r));
|
|
24
24
|
};
|
|
25
25
|
class h extends u {
|
|
26
|
-
constructor(r =
|
|
26
|
+
constructor(r = l, e = L) {
|
|
27
27
|
super(r, e);
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
export {
|
|
31
31
|
h as ListItemContentMarkupElement,
|
|
32
|
-
|
|
32
|
+
L as ListItemContentMarkupElementNode,
|
|
33
33
|
C as getLicElementClassNames,
|
|
34
34
|
g as getTextStyle,
|
|
35
35
|
x as getUnderlineClassNames
|
package/dist/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemContentMarkupElement.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { DesignTokens, TextStylesToDesignTokenMap } from '@components/RichTextEditor/types';\nimport { ELEMENT_LIC, PlateRenderElementProps, TElement, TNode } from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport React from 'react';\nimport { getColumnBreakClasses } from '../ColumnBreakPlugin/utils/getColumnBreakClasses';\nimport { MarkupElement } from '../MarkupElement';\nimport { TextStyles } from '../TextStylePlugin';\nimport { justifyClassNames } from '../TextStylePlugin/TextStyles/alignment';\nimport { MARK_TEXT_STYLE } from './ListPlugin';\n\nexport const getTextStyle = (styledNode: TNode) => {\n const textStyles =\n Object.values(TextStyles).find((textStyle) => styledNode?.[MARK_TEXT_STYLE] === textStyle) ??\n TextStyles.ELEMENT_PARAGRAPH;\n\n return TextStylesToDesignTokenMap[textStyles];\n};\n\nexport const getUnderlineClassNames = (designTokens: DesignTokens, element: TElement) =>\n designTokens[getTextStyle(element.children[0])]?.textDecoration === 'underline' ? 'tw-underline' : '';\n\nexport const getLicElementClassNames = (element: TElement) =>\n merge([\n getColumnBreakClasses(element),\n element.align ? justifyClassNames[element.align as string] : 'tw-justify-start
|
|
1
|
+
{"version":3,"file":"ListItemContentMarkupElement.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { DesignTokens, TextStylesToDesignTokenMap } from '@components/RichTextEditor/types';\nimport { ELEMENT_LIC, PlateRenderElementProps, TElement, TNode } from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport React from 'react';\nimport { getColumnBreakClasses } from '../ColumnBreakPlugin/utils/getColumnBreakClasses';\nimport { MarkupElement } from '../MarkupElement';\nimport { TextStyles } from '../TextStylePlugin';\nimport { justifyClassNames } from '../TextStylePlugin/TextStyles/alignment';\nimport { MARK_TEXT_STYLE } from './ListPlugin';\n\nexport const getTextStyle = (styledNode: TNode) => {\n const textStyles =\n Object.values(TextStyles).find((textStyle) => styledNode?.[MARK_TEXT_STYLE] === textStyle) ??\n TextStyles.ELEMENT_PARAGRAPH;\n\n return TextStylesToDesignTokenMap[textStyles];\n};\n\nexport const getUnderlineClassNames = (designTokens: DesignTokens, element: TElement) =>\n designTokens[getTextStyle(element.children[0])]?.textDecoration === 'underline' ? 'tw-underline' : '';\n\nexport const getLicElementClassNames = (element: TElement) =>\n merge([\n getColumnBreakClasses(element),\n element.align ? justifyClassNames[element.align as string] : 'tw-justify-start',\n 'tw-grid tw-grid-cols-[min-content_repeat(3,_auto)]',\n ]);\n\nexport const ListItemContentMarkupElementNode = ({ attributes, children, element }: PlateRenderElementProps) => {\n const { designTokens } = useRichTextEditorContext();\n const isEmpty = element.children.every((child) => child.text === '');\n\n return (\n <p className={getLicElementClassNames(element)} {...attributes}>\n <span className={merge([isEmpty && 'tw-w-4', getUnderlineClassNames(designTokens, element)])}>\n {children}\n </span>\n </p>\n );\n};\n\nexport class ListItemContentMarkupElement extends MarkupElement {\n constructor(id = ELEMENT_LIC, node = ListItemContentMarkupElementNode) {\n super(id, node);\n }\n}\n"],"names":["getTextStyle","styledNode","textStyles","TextStyles","textStyle","MARK_TEXT_STYLE","TextStylesToDesignTokenMap","getUnderlineClassNames","designTokens","element","_a","getLicElementClassNames","merge","getColumnBreakClasses","justifyClassNames","ListItemContentMarkupElementNode","attributes","children","useRichTextEditorContext","isEmpty","child","React","ListItemContentMarkupElement","MarkupElement","id","ELEMENT_LIC","node"],"mappings":";;;;;;;;;;AAaa,MAAAA,IAAe,CAACC,MAAsB;AAC/C,QAAMC,IACF,OAAO,OAAOC,CAAU,EAAE,KAAK,CAACC,OAAcH,KAAA,gBAAAA,EAAaI,QAAqBD,CAAS,KACzFD,EAAW;AAEf,SAAOG,EAA2BJ,CAAU;AAChD,GAEaK,IAAyB,CAACC,GAA4BC,MAAA;;AAC/D,WAAAC,IAAAF,EAAaR,EAAaS,EAAQ,SAAS,CAAC,CAAC,CAAC,MAA9C,gBAAAC,EAAiD,oBAAmB,cAAc,iBAAiB;AAAA,GAE1FC,IAA0B,CAACF,MACpCG,EAAM;AAAA,EACFC,EAAsBJ,CAAO;AAAA,EAC7BA,EAAQ,QAAQK,EAAkBL,EAAQ,KAAe,IAAI;AAAA,EAC7D;AACJ,CAAC,GAEQM,IAAmC,CAAC,EAAE,YAAAC,GAAY,UAAAC,GAAU,SAAAR,QAAuC;AACtG,QAAA,EAAE,cAAAD,MAAiBU,KACnBC,IAAUV,EAAQ,SAAS,MAAM,CAACW,MAAUA,EAAM,SAAS,EAAE;AAG/D,SAAA,gBAAAC,EAAA,cAAC,OAAE,WAAWV,EAAwBF,CAAO,GAAI,GAAGO,KAChD,gBAAAK,EAAA,cAAC,QAAK,EAAA,WAAWT,EAAM,CAACO,KAAW,UAAUZ,EAAuBC,GAAcC,CAAO,CAAC,CAAC,KACtFQ,CACL,CACJ;AAER;AAEO,MAAMK,UAAqCC,EAAc;AAAA,EAC5D,YAAYC,IAAKC,GAAaC,IAAOX,GAAkC;AACnE,UAAMS,GAAIE,CAAI;AAAA,EAClB;AACJ;"}
|
|
@@ -2,9 +2,9 @@ import { usePlateEditorRef as c, ELEMENT_OL as s, findNodePath as l, getNodeAnce
|
|
|
2
2
|
import i from "react";
|
|
3
3
|
import { MarkupElement as a } from "../../MarkupElement.es.js";
|
|
4
4
|
const u = [
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
"[&>li>p]:before:tw-content-[counter(count,decimal)_'._']",
|
|
6
|
+
"[&>li>p]:before:tw-content-[counter(count,_lower-alpha)_'._']",
|
|
7
|
+
"[&>li>p]:before:tw-content-[counter(count,lower-roman)_'._']"
|
|
8
8
|
], m = (e, o) => {
|
|
9
9
|
const t = l(e, o);
|
|
10
10
|
if (!t)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrderedListMarkupElement.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n ELEMENT_OL,\n PlateEditor,\n PlateRenderLeafProps,\n TElement,\n findNodePath,\n getNodeAncestors,\n usePlateEditorRef,\n} from '@udecode/plate';\nimport React from 'react';\nimport { MarkupElement } from '../../MarkupElement';\n\nconst LIST_TYPES = [\n
|
|
1
|
+
{"version":3,"file":"OrderedListMarkupElement.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n ELEMENT_OL,\n PlateEditor,\n PlateRenderLeafProps,\n TElement,\n findNodePath,\n getNodeAncestors,\n usePlateEditorRef,\n} from '@udecode/plate';\nimport React from 'react';\nimport { MarkupElement } from '../../MarkupElement';\n\nconst LIST_TYPES = [\n \"[&>li>p]:before:tw-content-[counter(count,decimal)_'._']\",\n \"[&>li>p]:before:tw-content-[counter(count,_lower-alpha)_'._']\",\n \"[&>li>p]:before:tw-content-[counter(count,lower-roman)_'._']\",\n];\n\nconst getNestingLevel = (editor: PlateEditor, element: TElement) => {\n const path = findNodePath(editor, element);\n if (!path) {\n return 0;\n }\n\n const nodeAncestors = getNodeAncestors(editor, path);\n return Array.from(nodeAncestors).filter((node) => node[0].type === ELEMENT_OL).length;\n};\n\nexport const getOrderedListClasses = (nestingLevel: number) =>\n `tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px] [&>li>p]:before:tw-pr-1 ${LIST_TYPES[nestingLevel % 3]}`;\nexport const OL_STYLES = { counterReset: 'count' };\n\nexport const OrderedListMarkupElementNode = ({\n attributes,\n children,\n element,\n}: PlateRenderLeafProps & { element: TElement }) => {\n const editor = usePlateEditorRef();\n const nestingLevel = getNestingLevel(editor, element);\n\n return (\n <ol className={getOrderedListClasses(nestingLevel)} {...attributes} style={OL_STYLES}>\n {children}\n </ol>\n );\n};\n\nexport class OrderedListMarkupElement extends MarkupElement {\n constructor(id = ELEMENT_OL, node = OrderedListMarkupElementNode) {\n super(id, node);\n }\n}\n"],"names":["LIST_TYPES","getNestingLevel","editor","element","path","findNodePath","nodeAncestors","getNodeAncestors","node","ELEMENT_OL","getOrderedListClasses","nestingLevel","OL_STYLES","OrderedListMarkupElementNode","attributes","children","usePlateEditorRef","React","OrderedListMarkupElement","MarkupElement","id"],"mappings":";;;AAcA,MAAMA,IAAa;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACJ,GAEMC,IAAkB,CAACC,GAAqBC,MAAsB;AAC1D,QAAAC,IAAOC,EAAaH,GAAQC,CAAO;AACzC,MAAI,CAACC;AACM,WAAA;AAGL,QAAAE,IAAgBC,EAAiBL,GAAQE,CAAI;AACnD,SAAO,MAAM,KAAKE,CAAa,EAAE,OAAO,CAACE,MAASA,EAAK,CAAC,EAAE,SAASC,CAAU,EAAE;AACnF,GAEaC,IAAwB,CAACC,MAClC,+EAA+EX,EAAWW,IAAe,CAAC,KACjGC,IAAY,EAAE,cAAc,QAAQ,GAEpCC,IAA+B,CAAC;AAAA,EACzC,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAZ;AACJ,MAAoD;AAChD,QAAMD,IAASc,KACTL,IAAeV,EAAgBC,GAAQC,CAAO;AAGhD,SAAA,gBAAAc,EAAA,cAAC,MAAG,EAAA,WAAWP,EAAsBC,CAAY,GAAI,GAAGG,GAAY,OAAOF,EAAA,GACtEG,CACL;AAER;AAEO,MAAMG,UAAiCC,EAAc;AAAA,EACxD,YAAYC,IAAKX,GAAYD,IAAOK,GAA8B;AAC9D,UAAMO,GAAIZ,CAAI;AAAA,EAClB;AACJ;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { PlateRenderLeafProps } from '@udecode/plate';
|
|
3
3
|
import { MarkupElement } from '../../MarkupElement';
|
|
4
|
-
export declare const UL_CLASSES = "[&>li>p]:before:tw-content-[\
|
|
4
|
+
export declare const UL_CLASSES = "[&>li>p]:before:tw-content-['\u2022'] [&>li>p]:before:tw-px-2 tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px]";
|
|
5
5
|
export declare const UnorderedListMarkupElementNode: ({ attributes, children }: PlateRenderLeafProps) => JSX.Element;
|
|
6
6
|
export declare class UnorderedListMarkupElement extends MarkupElement {
|
|
7
7
|
constructor(id?: string, node?: ({ attributes, children }: PlateRenderLeafProps<import("@udecode/plate").Value, import("@udecode/plate").TText>) => JSX.Element);
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import o from "react";
|
|
2
2
|
import { ELEMENT_UL as p } from "@udecode/plate";
|
|
3
3
|
import { MarkupElement as n } from "../../MarkupElement.es.js";
|
|
4
|
-
const
|
|
4
|
+
const m = "[&>li>p]:before:tw-content-['•'] [&>li>p]:before:tw-px-2 tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px]", l = ({ attributes: t, children: e }) => /* @__PURE__ */ o.createElement("ul", { className: m, ...t }, e);
|
|
5
5
|
class i extends n {
|
|
6
|
-
constructor(
|
|
7
|
-
super(
|
|
6
|
+
constructor(e = p, r = l) {
|
|
7
|
+
super(e, r);
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
10
|
export {
|
|
11
|
-
|
|
11
|
+
m as UL_CLASSES,
|
|
12
12
|
i as UnorderedListMarkupElement,
|
|
13
|
-
|
|
13
|
+
l as UnorderedListMarkupElementNode
|
|
14
14
|
};
|
|
15
15
|
//# sourceMappingURL=UnorderedListMarkupElement.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UnorderedListMarkupElement.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { ELEMENT_UL, PlateRenderLeafProps } from '@udecode/plate';\nimport { MarkupElement } from '../../MarkupElement';\n\nexport const UL_CLASSES =\n
|
|
1
|
+
{"version":3,"file":"UnorderedListMarkupElement.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { ELEMENT_UL, PlateRenderLeafProps } from '@udecode/plate';\nimport { MarkupElement } from '../../MarkupElement';\n\nexport const UL_CLASSES =\n \"[&>li>p]:before:tw-content-['•'] [&>li>p]:before:tw-px-2 tw-list-none tw-pl-[10px] tw-mb-[10px] tw-ml-[15px]\";\n\nexport const UnorderedListMarkupElementNode = ({ attributes, children }: PlateRenderLeafProps) => (\n <ul className={UL_CLASSES} {...attributes}>\n {children}\n </ul>\n);\n\nexport class UnorderedListMarkupElement extends MarkupElement {\n constructor(id = ELEMENT_UL, node = UnorderedListMarkupElementNode) {\n super(id, node);\n }\n}\n"],"names":["UL_CLASSES","UnorderedListMarkupElementNode","attributes","children","React","UnorderedListMarkupElement","MarkupElement","id","ELEMENT_UL","node"],"mappings":";;;AAMO,MAAMA,IACT,gHAESC,IAAiC,CAAC,EAAE,YAAAC,GAAY,UAAAC,EAAS,MACjE,gBAAAC,EAAA,cAAA,MAAA,EAAG,WAAWJ,GAAa,GAAGE,EAAA,GAC1BC,CACL;AAGG,MAAME,UAAmCC,EAAc;AAAA,EAC1D,YAAYC,IAAKC,GAAYC,IAAOR,GAAgC;AAChE,UAAMM,GAAIE,CAAI;AAAA,EAClB;AACJ;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { convertCamelCaseToKebabCase as o } from "./convertCamelCaseToKebabCase.es.js";
|
|
2
|
-
const
|
|
2
|
+
const n = (e) => e ? Object.keys(e).reduce((r, t) => {
|
|
3
3
|
const s = e[t];
|
|
4
4
|
return s ? `${r}${o(t)}: ${s}; ` : r;
|
|
5
|
-
}, "").trim() : "";
|
|
5
|
+
}, "").trim().replaceAll('"', "'") : "";
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
n as reactCssPropsToCss
|
|
8
8
|
};
|
|
9
9
|
//# sourceMappingURL=reactCssPropsToCss.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reactCssPropsToCss.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/reactCssPropsToCss.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties } from 'react';\nimport { convertCamelCaseToKebabCase } from './convertCamelCaseToKebabCase';\n\nexport const reactCssPropsToCss = (props?: CSSProperties): string => {\n if (!props) {\n return '';\n }\n\n return Object.keys(props)\n .reduce<string>((acc, key) => {\n const value = props[key as keyof CSSProperties];\n return value ? `${acc}${convertCamelCaseToKebabCase(key)}: ${value}; ` : acc;\n }, '')\n .trim();\n};\n"],"names":["reactCssPropsToCss","props","acc","key","value","convertCamelCaseToKebabCase"],"mappings":";AAKa,MAAAA,IAAqB,CAACC,MAC1BA,IAIE,OAAO,KAAKA,CAAK,EACnB,OAAe,CAACC,GAAKC,MAAQ;AACpB,QAAAC,IAAQH,EAAME,CAA0B;AAC9C,SAAOC,IAAQ,GAAGF,IAAMG,EAA4BF,CAAG,MAAMC,QAAYF;AAAA,GAC1E,EAAE,EACJ,
|
|
1
|
+
{"version":3,"file":"reactCssPropsToCss.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/reactCssPropsToCss.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties } from 'react';\nimport { convertCamelCaseToKebabCase } from './convertCamelCaseToKebabCase';\n\nexport const reactCssPropsToCss = (props?: CSSProperties): string => {\n if (!props) {\n return '';\n }\n\n return Object.keys(props)\n .reduce<string>((acc, key) => {\n const value = props[key as keyof CSSProperties];\n return value ? `${acc}${convertCamelCaseToKebabCase(key)}: ${value}; ` : acc;\n }, '')\n .trim()\n .replaceAll('\"', \"'\");\n};\n"],"names":["reactCssPropsToCss","props","acc","key","value","convertCamelCaseToKebabCase"],"mappings":";AAKa,MAAAA,IAAqB,CAACC,MAC1BA,IAIE,OAAO,KAAKA,CAAK,EACnB,OAAe,CAACC,GAAKC,MAAQ;AACpB,QAAAC,IAAQH,EAAME,CAA0B;AAC9C,SAAOC,IAAQ,GAAGF,IAAMG,EAA4BF,CAAG,MAAMC,QAAYF;AAAA,GAC1E,EAAE,EACJ,OACA,WAAW,KAAK,GAAG,IATb;"}
|
|
@@ -29,43 +29,43 @@ const $ = (r, t) => r.reduce((l, c) => (c.type === t && l++, c.children ? l + $(
|
|
|
29
29
|
).join(""), p = r.breakAfterColumn === "active" ? "tw-break-after-column tw-break-inside-avoid-column" : "", o = "tw-break-words", N = r != null && r.align ? P[r.align] : "", e = G([N, o, p]);
|
|
30
30
|
switch (r.type) {
|
|
31
31
|
case E.ELEMENT_HEADING1:
|
|
32
|
-
return `<h1 class="${e}" style=
|
|
32
|
+
return `<h1 class="${e}" style="${a(t.heading1)}">${s}</h1>`;
|
|
33
33
|
case E.ELEMENT_HEADING2:
|
|
34
|
-
return `<h2 class=
|
|
34
|
+
return `<h2 class="${e}" style="${a(t.heading2)}">${s}</h2>`;
|
|
35
35
|
case E.ELEMENT_HEADING3:
|
|
36
|
-
return `<h3 class=
|
|
36
|
+
return `<h3 class="${e}" style="${a(t.heading3)}">${s}</h3>`;
|
|
37
37
|
case E.ELEMENT_HEADING4:
|
|
38
|
-
return `<h4 class=
|
|
38
|
+
return `<h4 class="${e}" style="${a(t.heading4)}">${s}</h4>`;
|
|
39
39
|
case E.ELEMENT_CUSTOM1:
|
|
40
|
-
return `<p class=
|
|
40
|
+
return `<p class="${e}" style="${a(t.custom1)}">${s}</p>`;
|
|
41
41
|
case E.ELEMENT_CUSTOM2:
|
|
42
|
-
return `<p class=
|
|
42
|
+
return `<p class="${e}" style="${a(t.custom2)}">${s}</p>`;
|
|
43
43
|
case E.ELEMENT_CUSTOM3:
|
|
44
|
-
return `<p class=
|
|
44
|
+
return `<p class="${e}" style="${a(t.custom3)}">${s}</p>`;
|
|
45
45
|
case E.ELEMENT_QUOTE:
|
|
46
|
-
return `<p class=
|
|
46
|
+
return `<p class="${e}" style="${a(t.quote)}">${s}</p>`;
|
|
47
47
|
case I:
|
|
48
|
-
return `<p class=
|
|
48
|
+
return `<p class="${e}" style="${a(t.p)}">${s}</p>`;
|
|
49
49
|
case E.ELEMENT_IMAGE_TITLE:
|
|
50
|
-
return `<p class=
|
|
50
|
+
return `<p class="${e}" style="${a(t.imageTitle)}">${s}</p>`;
|
|
51
51
|
case E.ELEMENT_IMAGE_CAPTION:
|
|
52
|
-
return `<p class=
|
|
52
|
+
return `<p class="${e}" style="${a(t.imageCaption)}">${s}</p>`;
|
|
53
53
|
case y:
|
|
54
|
-
return `<ul class=
|
|
54
|
+
return `<ul class="${D} ${e}">${s}</ul>`;
|
|
55
55
|
case u:
|
|
56
56
|
const m = Math.max(i - $([r], u), 0);
|
|
57
|
-
return `<ol class=
|
|
57
|
+
return `<ol class="${x(m)} ${e}" style="${a(
|
|
58
58
|
B
|
|
59
|
-
)}
|
|
59
|
+
)}">${s}</ol>`;
|
|
60
60
|
case n:
|
|
61
|
-
return `<li class=
|
|
61
|
+
return `<li class="${e} ${b}" style="${a(
|
|
62
62
|
w(t, r)
|
|
63
|
-
)}
|
|
63
|
+
)}">${s}</li>`;
|
|
64
64
|
case h:
|
|
65
65
|
const L = M(t, r);
|
|
66
|
-
return `<p class=
|
|
66
|
+
return `<p class="${e} ${_(
|
|
67
67
|
r
|
|
68
|
-
)}
|
|
68
|
+
)}"><span class="${L}">${s}</span></p>`;
|
|
69
69
|
case T:
|
|
70
70
|
return O(r, s, t, e);
|
|
71
71
|
case v:
|
package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"serializeNodeToHtmlRecursive.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n ELEMENT_BUTTON,\n ELEMENT_CHECK_ITEM,\n MappedMentionableItems,\n OL_STYLES,\n UL_CLASSES,\n getOrderedListClasses,\n} from '@components/RichTextEditor/Plugins';\nimport {\n getLicElementClassNames,\n getUnderlineClassNames,\n} from '@components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement';\nimport { TextStyles, alignmentClassnames } from '@components/RichTextEditor/Plugins/TextStylePlugin/TextStyles';\nimport { DesignTokens } from '@components/RichTextEditor/types';\nimport {\n ELEMENT_LI,\n ELEMENT_LIC,\n ELEMENT_LINK,\n ELEMENT_MENTION,\n ELEMENT_OL,\n ELEMENT_PARAGRAPH,\n ELEMENT_UL,\n TDescendant,\n TText,\n isText,\n} from '@udecode/plate';\nimport { buttonNode } from '../nodes/button';\nimport { checkItemNode } from '../nodes/checkItem';\nimport { linkNode } from '../nodes/link';\nimport { mentionHtmlNode } from '../nodes/mentionHtmlNode';\nimport { reactCssPropsToCss } from './reactCssPropsToCss';\nimport { serializeLeafToHtml } from './serializeLeafToHtml';\nimport { merge } from '@utilities/merge';\nimport { LI_CLASSNAMES, getLiStyles } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement';\n\nconst countNodesOfType = (nodes: TDescendant[], type: string): number => {\n return nodes.reduce((acc, node) => {\n if (node.type === type) {\n acc++;\n }\n if (node.children) {\n return acc + countNodesOfType(node.children as TDescendant[], type);\n }\n return acc;\n }, 0);\n};\n\ntype NestingCount = {\n [type: string]: number;\n};\n\ntype SerializeNodeToHtmlRecursiveOptions = {\n designTokens: DesignTokens;\n mappedMentionable?: MappedMentionableItems;\n nestingCount?: NestingCount;\n};\n\nexport const serializeNodeToHtmlRecursive = (\n node: TDescendant,\n { designTokens, mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,\n): string => {\n if (isText(node)) {\n return serializeLeafToHtml(node as TText);\n }\n\n const rootNestingCount = nestingCount[node.type] || countNodesOfType([node], node.type);\n const children = (node.children as TDescendant[])\n .map((n: TDescendant) =>\n serializeNodeToHtmlRecursive(n, {\n designTokens,\n nestingCount: {\n ...nestingCount,\n [n.type as string]: rootNestingCount,\n },\n mappedMentionable,\n }),\n )\n .join('');\n\n const hasColumnBreak = node.breakAfterColumn === 'active';\n const columnBreakClasses = hasColumnBreak ? 'tw-break-after-column tw-break-inside-avoid-column' : '';\n const breakWordsClass = 'tw-break-words';\n const alignClass = node?.align ? alignmentClassnames[node.align as string] : '';\n const classNames = merge([alignClass, breakWordsClass, columnBreakClasses]);\n\n switch (node.type) {\n case TextStyles.ELEMENT_HEADING1:\n return `<h1 class=\"${classNames}\" style
|
|
1
|
+
{"version":3,"file":"serializeNodeToHtmlRecursive.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n ELEMENT_BUTTON,\n ELEMENT_CHECK_ITEM,\n MappedMentionableItems,\n OL_STYLES,\n UL_CLASSES,\n getOrderedListClasses,\n} from '@components/RichTextEditor/Plugins';\nimport {\n getLicElementClassNames,\n getUnderlineClassNames,\n} from '@components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement';\nimport { TextStyles, alignmentClassnames } from '@components/RichTextEditor/Plugins/TextStylePlugin/TextStyles';\nimport { DesignTokens } from '@components/RichTextEditor/types';\nimport {\n ELEMENT_LI,\n ELEMENT_LIC,\n ELEMENT_LINK,\n ELEMENT_MENTION,\n ELEMENT_OL,\n ELEMENT_PARAGRAPH,\n ELEMENT_UL,\n TDescendant,\n TText,\n isText,\n} from '@udecode/plate';\nimport { buttonNode } from '../nodes/button';\nimport { checkItemNode } from '../nodes/checkItem';\nimport { linkNode } from '../nodes/link';\nimport { mentionHtmlNode } from '../nodes/mentionHtmlNode';\nimport { reactCssPropsToCss } from './reactCssPropsToCss';\nimport { serializeLeafToHtml } from './serializeLeafToHtml';\nimport { merge } from '@utilities/merge';\nimport { LI_CLASSNAMES, getLiStyles } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement';\n\nconst countNodesOfType = (nodes: TDescendant[], type: string): number => {\n return nodes.reduce((acc, node) => {\n if (node.type === type) {\n acc++;\n }\n if (node.children) {\n return acc + countNodesOfType(node.children as TDescendant[], type);\n }\n return acc;\n }, 0);\n};\n\ntype NestingCount = {\n [type: string]: number;\n};\n\ntype SerializeNodeToHtmlRecursiveOptions = {\n designTokens: DesignTokens;\n mappedMentionable?: MappedMentionableItems;\n nestingCount?: NestingCount;\n};\n\nexport const serializeNodeToHtmlRecursive = (\n node: TDescendant,\n { designTokens, mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,\n): string => {\n if (isText(node)) {\n return serializeLeafToHtml(node as TText);\n }\n\n const rootNestingCount = nestingCount[node.type] || countNodesOfType([node], node.type);\n const children = (node.children as TDescendant[])\n .map((n: TDescendant) =>\n serializeNodeToHtmlRecursive(n, {\n designTokens,\n nestingCount: {\n ...nestingCount,\n [n.type as string]: rootNestingCount,\n },\n mappedMentionable,\n }),\n )\n .join('');\n\n const hasColumnBreak = node.breakAfterColumn === 'active';\n const columnBreakClasses = hasColumnBreak ? 'tw-break-after-column tw-break-inside-avoid-column' : '';\n const breakWordsClass = 'tw-break-words';\n const alignClass = node?.align ? alignmentClassnames[node.align as string] : '';\n const classNames = merge([alignClass, breakWordsClass, columnBreakClasses]);\n\n switch (node.type) {\n case TextStyles.ELEMENT_HEADING1:\n return `<h1 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading1)}\">${children}</h1>`;\n case TextStyles.ELEMENT_HEADING2:\n return `<h2 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading2)}\">${children}</h2>`;\n case TextStyles.ELEMENT_HEADING3:\n return `<h3 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading3)}\">${children}</h3>`;\n case TextStyles.ELEMENT_HEADING4:\n return `<h4 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading4)}\">${children}</h4>`;\n case TextStyles.ELEMENT_CUSTOM1:\n return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.custom1)}\">${children}</p>`;\n case TextStyles.ELEMENT_CUSTOM2:\n return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.custom2)}\">${children}</p>`;\n case TextStyles.ELEMENT_CUSTOM3:\n return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.custom3)}\">${children}</p>`;\n case TextStyles.ELEMENT_QUOTE:\n return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.quote)}\">${children}</p>`;\n case ELEMENT_PARAGRAPH:\n return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.p)}\">${children}</p>`;\n case TextStyles.ELEMENT_IMAGE_TITLE:\n return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.imageTitle)}\">${children}</p>`;\n case TextStyles.ELEMENT_IMAGE_CAPTION:\n return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.imageCaption)}\">${children}</p>`;\n case ELEMENT_UL:\n return `<ul class=\"${UL_CLASSES} ${classNames}\">${children}</ul>`;\n case ELEMENT_OL:\n const nestingLevel = Math.max(rootNestingCount - countNodesOfType([node], ELEMENT_OL), 0);\n return `<ol class=\"${getOrderedListClasses(nestingLevel)} ${classNames}\" style=\"${reactCssPropsToCss(\n OL_STYLES,\n )}\">${children}</ol>`;\n case ELEMENT_LI:\n return `<li class=\"${classNames} ${LI_CLASSNAMES}\" style=\"${reactCssPropsToCss(\n getLiStyles(designTokens, node),\n )}\">${children}</li>`;\n case ELEMENT_LIC:\n const underline = getUnderlineClassNames(designTokens, node);\n return `<p class=\"${classNames} ${getLicElementClassNames(\n node,\n )}\"><span class=\"${underline}\">${children}</span></p>`;\n case ELEMENT_LINK:\n return linkNode(node, children, designTokens, classNames);\n case ELEMENT_BUTTON:\n return buttonNode(node, children, designTokens, classNames);\n case ELEMENT_CHECK_ITEM:\n return checkItemNode(node, children, classNames);\n case ELEMENT_MENTION:\n return mentionHtmlNode(node, { mentionable: mappedMentionable });\n\n default:\n return children;\n }\n};\n"],"names":["countNodesOfType","nodes","type","acc","node","serializeNodeToHtmlRecursive","designTokens","mappedMentionable","nestingCount","isText","serializeLeafToHtml","rootNestingCount","children","n","columnBreakClasses","breakWordsClass","alignClass","alignmentClassnames","classNames","merge","TextStyles","reactCssPropsToCss","ELEMENT_PARAGRAPH","ELEMENT_UL","UL_CLASSES","ELEMENT_OL","nestingLevel","getOrderedListClasses","OL_STYLES","ELEMENT_LI","LI_CLASSNAMES","getLiStyles","ELEMENT_LIC","underline","getUnderlineClassNames","getLicElementClassNames","ELEMENT_LINK","linkNode","ELEMENT_BUTTON","buttonNode","ELEMENT_CHECK_ITEM","checkItemNode","ELEMENT_MENTION","mentionHtmlNode"],"mappings":";;;;;;;;;;;;;;;;AAqCA,MAAMA,IAAmB,CAACC,GAAsBC,MACrCD,EAAM,OAAO,CAACE,GAAKC,OAClBA,EAAK,SAASF,KACdC,KAEAC,EAAK,WACED,IAAMH,EAAiBI,EAAK,UAA2BF,CAAI,IAE/DC,IACR,CAAC,GAaKE,IAA+B,CACxCD,GACA,EAAE,cAAAE,GAAc,mBAAAC,GAAmB,cAAAC,IAAe,CAAA,QACzC;AACL,MAAAC,EAAOL,CAAI;AACX,WAAOM,EAAoBN,CAAa;AAGtC,QAAAO,IAAmBH,EAAaJ,EAAK,IAAI,KAAKJ,EAAiB,CAACI,CAAI,GAAGA,EAAK,IAAI,GAChFQ,IAAYR,EAAK,SAClB;AAAA,IAAI,CAACS,MACFR,EAA6BQ,GAAG;AAAA,MAC5B,cAAAP;AAAA,MACA,cAAc;AAAA,QACV,GAAGE;AAAA,QACH,CAACK,EAAE,IAAc,GAAGF;AAAA,MACxB;AAAA,MACA,mBAAAJ;AAAA,IAAA,CACH;AAAA,EAAA,EAEJ,KAAK,EAAE,GAGNO,IADiBV,EAAK,qBAAqB,WACL,uDAAuD,IAC7FW,IAAkB,kBAClBC,IAAaZ,KAAA,QAAAA,EAAM,QAAQa,EAAoBb,EAAK,KAAe,IAAI,IACvEc,IAAaC,EAAM,CAACH,GAAYD,GAAiBD,CAAkB,CAAC;AAE1E,UAAQV,EAAK,MAAM;AAAA,IACf,KAAKgB,EAAW;AACZ,aAAO,cAAcF,aAAsBG,EAAmBf,EAAa,QAAQ,MAAMM;AAAA,IAC7F,KAAKQ,EAAW;AACZ,aAAO,cAAcF,aAAsBG,EAAmBf,EAAa,QAAQ,MAAMM;AAAA,IAC7F,KAAKQ,EAAW;AACZ,aAAO,cAAcF,aAAsBG,EAAmBf,EAAa,QAAQ,MAAMM;AAAA,IAC7F,KAAKQ,EAAW;AACZ,aAAO,cAAcF,aAAsBG,EAAmBf,EAAa,QAAQ,MAAMM;AAAA,IAC7F,KAAKQ,EAAW;AACZ,aAAO,aAAaF,aAAsBG,EAAmBf,EAAa,OAAO,MAAMM;AAAA,IAC3F,KAAKQ,EAAW;AACZ,aAAO,aAAaF,aAAsBG,EAAmBf,EAAa,OAAO,MAAMM;AAAA,IAC3F,KAAKQ,EAAW;AACZ,aAAO,aAAaF,aAAsBG,EAAmBf,EAAa,OAAO,MAAMM;AAAA,IAC3F,KAAKQ,EAAW;AACZ,aAAO,aAAaF,aAAsBG,EAAmBf,EAAa,KAAK,MAAMM;AAAA,IACzF,KAAKU;AACD,aAAO,aAAaJ,aAAsBG,EAAmBf,EAAa,CAAC,MAAMM;AAAA,IACrF,KAAKQ,EAAW;AACZ,aAAO,aAAaF,aAAsBG,EAAmBf,EAAa,UAAU,MAAMM;AAAA,IAC9F,KAAKQ,EAAW;AACZ,aAAO,aAAaF,aAAsBG,EAAmBf,EAAa,YAAY,MAAMM;AAAA,IAChG,KAAKW;AACM,aAAA,cAAcC,KAAcN,MAAeN;AAAA,IACtD,KAAKa;AACK,YAAAC,IAAe,KAAK,IAAIf,IAAmBX,EAAiB,CAACI,CAAI,GAAGqB,CAAU,GAAG,CAAC;AACxF,aAAO,cAAcE,EAAsBD,CAAY,KAAKR,aAAsBG;AAAA,QAC9EO;AAAA,MAAA,MACEhB;AAAA,IACV,KAAKiB;AACM,aAAA,cAAcX,KAAcY,aAAyBT;AAAA,QACxDU,EAAYzB,GAAcF,CAAI;AAAA,MAAA,MAC5BQ;AAAA,IACV,KAAKoB;AACK,YAAAC,IAAYC,EAAuB5B,GAAcF,CAAI;AAC3D,aAAO,aAAac,KAAciB;AAAA,QAC9B/B;AAAA,yBACe6B,MAAcrB;AAAA,IACrC,KAAKwB;AACD,aAAOC,EAASjC,GAAMQ,GAAUN,GAAcY,CAAU;AAAA,IAC5D,KAAKoB;AACD,aAAOC,EAAWnC,GAAMQ,GAAUN,GAAcY,CAAU;AAAA,IAC9D,KAAKsB;AACM,aAAAC,EAAcrC,GAAMQ,GAAUM,CAAU;AAAA,IACnD,KAAKwB;AACD,aAAOC,EAAgBvC,GAAM,EAAE,aAAaG,EAAmB,CAAA;AAAA,IAEnE;AACW,aAAAK;AAAA,EACf;AACJ;"}
|