@frontify/fondue 12.0.0-beta.334 → 12.0.0-beta.335
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/serializer/utils/serializeNodeToHtmlRecursive.es.js +51 -44
- package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.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
|
@@ -1,79 +1,86 @@
|
|
|
1
|
-
import { getLicElementClassNames as
|
|
2
|
-
import { LI_CLASSNAMES as f, getLiStyles as
|
|
3
|
-
import { isText as L, ELEMENT_UL as
|
|
1
|
+
import { getLicElementClassNames as u } from "../../Plugins/ListPlugin/ListItemContentMarkupElement.es.js";
|
|
2
|
+
import { LI_CLASSNAMES as f, getLiStyles as h } from "../../Plugins/ListPlugin/ListItemMarkupElement.es.js";
|
|
3
|
+
import { isText as L, ELEMENT_UL as N, ELEMENT_OL as p, ELEMENT_LI as T, ELEMENT_LIC as d, ELEMENT_LINK as g, ELEMENT_MENTION as $ } from "@udecode/plate";
|
|
4
4
|
import { merge as C } from "../../../../utilities/merge.es.js";
|
|
5
|
-
import { buttonNode as
|
|
6
|
-
import { checkItemNode as
|
|
5
|
+
import { buttonNode as M } from "../nodes/button.es.js";
|
|
6
|
+
import { checkItemNode as y } from "../nodes/checkItem.es.js";
|
|
7
7
|
import { linkNode as _ } from "../nodes/link.es.js";
|
|
8
8
|
import { mentionHtmlNode as S } from "../nodes/mentionHtmlNode.es.js";
|
|
9
9
|
import { reactCssPropsToCss as n } from "./reactCssPropsToCss.es.js";
|
|
10
10
|
import { serializeLeafToHtml as k } from "./serializeLeafToHtml.es.js";
|
|
11
|
-
import { UL_CLASSES as
|
|
12
|
-
import { getOrderedListClasses as
|
|
13
|
-
import { ELEMENT_BUTTON as H, alignmentClassnames as
|
|
14
|
-
import { TextStyles as
|
|
11
|
+
import { UL_CLASSES as x } from "../../Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.es.js";
|
|
12
|
+
import { getOrderedListClasses as I, OL_STYLES as b } from "../../Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.es.js";
|
|
13
|
+
import { ELEMENT_BUTTON as H, alignmentClassnames as v } from "../../Plugins/helper.es.js";
|
|
14
|
+
import { TextStyles as r } from "../../Plugins/TextStylePlugin/types.es.js";
|
|
15
15
|
import { ELEMENT_CHECK_ITEM as w } from "../../Plugins/CheckboxListPlugin/id.es.js";
|
|
16
|
-
const
|
|
16
|
+
const c = (t, e) => {
|
|
17
|
+
let o = 0;
|
|
18
|
+
for (const s of t) {
|
|
19
|
+
let i = 0;
|
|
20
|
+
s.type === e && (i = 1), s.children && (i += c(s.children, e)), o = Math.max(o, i);
|
|
21
|
+
}
|
|
22
|
+
return o;
|
|
23
|
+
}, O = (t, e, { mappedMentionable: o, nestingCount: s = {} }) => {
|
|
17
24
|
if (L(t))
|
|
18
25
|
return k(t);
|
|
19
|
-
const
|
|
26
|
+
const i = s[t.type] || c([t], t.type);
|
|
20
27
|
let a = "";
|
|
21
28
|
for (const l of t.children)
|
|
22
|
-
a +=
|
|
29
|
+
a += O(l, e, {
|
|
23
30
|
nestingCount: {
|
|
24
31
|
...s,
|
|
25
|
-
[l.type]:
|
|
32
|
+
[l.type]: i
|
|
26
33
|
},
|
|
27
|
-
mappedMentionable:
|
|
34
|
+
mappedMentionable: o
|
|
28
35
|
});
|
|
29
|
-
const
|
|
36
|
+
const E = A[t.type];
|
|
30
37
|
try {
|
|
31
|
-
return
|
|
38
|
+
return E({
|
|
32
39
|
classNames: U(
|
|
33
40
|
t.breakAfterColumn,
|
|
34
41
|
t.align
|
|
35
42
|
),
|
|
36
43
|
children: a,
|
|
37
|
-
rootNestingCount:
|
|
44
|
+
rootNestingCount: i,
|
|
38
45
|
node: t,
|
|
39
|
-
mappedMentionable:
|
|
46
|
+
mappedMentionable: o,
|
|
40
47
|
styles: e
|
|
41
48
|
}) ?? a;
|
|
42
49
|
} catch {
|
|
43
50
|
return console.warn(`The htmlMapper for node type: '${t.type}' does not exist.`), a;
|
|
44
51
|
}
|
|
45
52
|
}, A = {
|
|
46
|
-
[
|
|
47
|
-
[
|
|
48
|
-
[
|
|
49
|
-
[
|
|
50
|
-
[
|
|
51
|
-
[
|
|
52
|
-
[
|
|
53
|
-
[
|
|
54
|
-
[
|
|
55
|
-
[
|
|
56
|
-
[
|
|
57
|
-
[
|
|
58
|
-
[
|
|
59
|
-
const
|
|
60
|
-
return `<ol dir="auto" class="${
|
|
61
|
-
|
|
53
|
+
[r.heading1]: (t) => m(r.heading1, t, "h1"),
|
|
54
|
+
[r.heading2]: (t) => m(r.heading2, t, "h2"),
|
|
55
|
+
[r.heading3]: (t) => m(r.heading3, t, "h3"),
|
|
56
|
+
[r.heading4]: (t) => m(r.heading4, t, "h4"),
|
|
57
|
+
[r.p]: (t) => m(r.p, t, "p"),
|
|
58
|
+
[r.custom1]: (t) => m(r.custom1, t, "p"),
|
|
59
|
+
[r.custom2]: (t) => m(r.custom2, t, "p"),
|
|
60
|
+
[r.custom3]: (t) => m(r.custom3, t, "p"),
|
|
61
|
+
[r.quote]: (t) => m(r.quote, t, "p"),
|
|
62
|
+
[r.imageTitle]: (t) => m(r.imageTitle, t, "p"),
|
|
63
|
+
[r.imageCaption]: (t) => m(r.imageCaption, t, "p"),
|
|
64
|
+
[N]: (t) => `<ul dir="auto" class="${x} ${t.classNames}">${t.children}</ul>`,
|
|
65
|
+
[p]: ({ classNames: t, children: e, node: o, rootNestingCount: s }) => {
|
|
66
|
+
const i = Math.max(s - c([o], p), 0);
|
|
67
|
+
return `<ol dir="auto" class="${I(i)} ${t}" style="${n(
|
|
68
|
+
b
|
|
62
69
|
)}">${e}</ol>`;
|
|
63
70
|
},
|
|
64
|
-
[
|
|
65
|
-
|
|
71
|
+
[T]: ({ classNames: t, children: e, node: o, styles: s }) => `<li dir="auto" class="${t} ${f}" style="${n(
|
|
72
|
+
h(o, s)
|
|
66
73
|
)}">${e}</li>`,
|
|
67
|
-
[d]: ({ classNames: t, children: e, node:
|
|
68
|
-
[g]: ({ node: t, children: e, classNames:
|
|
69
|
-
[H]: ({ node: t, children: e, classNames:
|
|
70
|
-
[w]: ({ node: t, children: e, classNames:
|
|
74
|
+
[d]: ({ classNames: t, children: e, node: o }) => `<p dir="auto" class="${t} ${u(o)}"><span>${e}</span></p>`,
|
|
75
|
+
[g]: ({ node: t, children: e, classNames: o, styles: s }) => _(t, e, o, s),
|
|
76
|
+
[H]: ({ node: t, children: e, classNames: o, styles: s }) => M(t, e, o, s),
|
|
77
|
+
[w]: ({ node: t, children: e, classNames: o, styles: s }) => y(t, e, o, s),
|
|
71
78
|
[$]: ({ node: t, mappedMentionable: e }) => S(t, { mentionable: e })
|
|
72
|
-
},
|
|
73
|
-
const
|
|
74
|
-
return C([
|
|
79
|
+
}, m = (t, { classNames: e, styles: o, children: s }, i) => `<${i} dir="auto" class="${e}" style="${n(o[t])}">${s}</${i}>`, U = (t, e) => {
|
|
80
|
+
const o = "tw-break-words", s = t === "active" ? "tw-break-after-column tw-break-inside-avoid-column" : "", i = e ? v[e] : "";
|
|
81
|
+
return C([i, o, s]);
|
|
75
82
|
};
|
|
76
83
|
export {
|
|
77
|
-
|
|
84
|
+
O as serializeNodeToHtmlRecursive
|
|
78
85
|
};
|
|
79
86
|
//# sourceMappingURL=serializeNodeToHtmlRecursive.es.js.map
|
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 TextStyles,\n UL_CLASSES,\n alignmentClassnames,\n getOrderedListClasses,\n} from '@components/RichTextEditor/Plugins';\nimport { getLicElementClassNames } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement';\nimport { LI_CLASSNAMES, getLiStyles } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement';\nimport {\n ELEMENT_LI,\n ELEMENT_LIC,\n ELEMENT_LINK,\n ELEMENT_MENTION,\n ELEMENT_OL,\n ELEMENT_UL,\n TDescendant,\n TElement,\n isText,\n} from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport { ButtonStylesType, 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 { CSSPropertiesHover } from '../types';\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 mappedMentionable?: MappedMentionableItems;\n nestingCount?: NestingCount;\n};\n\nexport const serializeNodeToHtmlRecursive = (\n node: TDescendant,\n styles: Record<string, CSSPropertiesHover> | ButtonStylesType,\n { mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,\n): string => {\n if (isText(node)) {\n return serializeLeafToHtml(node);\n }\n\n const rootNestingCount = nestingCount[node.type] || countNodesOfType([node], node.type);\n let children = '';\n for (const element of node.children) {\n children += serializeNodeToHtmlRecursive(element, styles, {\n nestingCount: {\n ...nestingCount,\n [element.type as string]: rootNestingCount,\n },\n mappedMentionable,\n });\n }\n\n const htmlMapper = MapNodeTypesToHtml[node.type];\n try {\n return (\n htmlMapper({\n classNames: getClassNames(\n node.breakAfterColumn as string | undefined,\n node.align as string | undefined,\n ),\n children,\n rootNestingCount,\n node,\n mappedMentionable,\n styles,\n }) ?? children\n );\n } catch (error) {\n console.warn(`The htmlMapper for node type: '${node.type}' does not exist.`);\n return children;\n }\n};\n\ntype Arguments = {\n classNames: string;\n children: string;\n rootNestingCount: number;\n node: TElement;\n mappedMentionable?: MappedMentionableItems;\n styles: Record<string, CSSPropertiesHover>;\n};\n\nconst MapNodeTypesToHtml: { [key: string]: ({ ...args }: Arguments) => string } = {\n [TextStyles.heading1]: (args) => getTextStyleHtml(TextStyles.heading1, args, 'h1'),\n [TextStyles.heading2]: (args) => getTextStyleHtml(TextStyles.heading2, args, 'h2'),\n [TextStyles.heading3]: (args) => getTextStyleHtml(TextStyles.heading3, args, 'h3'),\n [TextStyles.heading4]: (args) => getTextStyleHtml(TextStyles.heading4, args, 'h4'),\n [TextStyles.p]: (args) => getTextStyleHtml(TextStyles.p, args, 'p'),\n [TextStyles.custom1]: (args) => getTextStyleHtml(TextStyles.custom1, args, 'p'),\n [TextStyles.custom2]: (args) => getTextStyleHtml(TextStyles.custom2, args, 'p'),\n [TextStyles.custom3]: (args) => getTextStyleHtml(TextStyles.custom3, args, 'p'),\n [TextStyles.quote]: (args) => getTextStyleHtml(TextStyles.quote, args, 'p'),\n [TextStyles.imageTitle]: (args) => getTextStyleHtml(TextStyles.imageTitle, args, 'p'),\n [TextStyles.imageCaption]: (args) => getTextStyleHtml(TextStyles.imageCaption, args, 'p'),\n [ELEMENT_UL]: (args) => `<ul dir=\"auto\" class=\"${UL_CLASSES} ${args.classNames}\">${args.children}</ul>`,\n [ELEMENT_OL]: ({ classNames, children, node, rootNestingCount }) => {\n const nestingLevel = Math.max(rootNestingCount - countNodesOfType([node], ELEMENT_OL), 0);\n return `<ol dir=\"auto\" class=\"${getOrderedListClasses(nestingLevel)} ${classNames}\" style=\"${reactCssPropsToCss(\n OL_STYLES,\n )}\">${children}</ol>`;\n },\n [ELEMENT_LI]: ({ classNames, children, node, styles }) =>\n `<li dir=\"auto\" class=\"${classNames} ${LI_CLASSNAMES}\" style=\"${reactCssPropsToCss(\n getLiStyles(node, styles),\n )}\">${children}</li>`,\n [ELEMENT_LIC]: ({ classNames, children, node }) =>\n `<p dir=\"auto\" class=\"${classNames} ${getLicElementClassNames(node)}\"><span>${children}</span></p>`,\n [ELEMENT_LINK]: ({ node, children, classNames, styles }) => linkNode(node, children, classNames, styles),\n [ELEMENT_BUTTON]: ({ node, children, classNames, styles }) =>\n buttonNode(node, children, classNames, styles as ButtonStylesType),\n [ELEMENT_CHECK_ITEM]: ({ node, children, classNames, styles }) => checkItemNode(node, children, classNames, styles),\n [ELEMENT_MENTION]: ({ node, mappedMentionable }) => mentionHtmlNode(node, { mentionable: mappedMentionable }),\n};\n\nconst getTextStyleHtml = (\n tag: TextStyles,\n { classNames, styles, children }: Arguments,\n htmlTag: 'p' | 'h1' | 'h2' | 'h3' | 'h4',\n) => `<${htmlTag} dir=\"auto\" class=\"${classNames}\" style=\"${reactCssPropsToCss(styles[tag])}\">${children}</${htmlTag}>`;\n\nconst getClassNames = (breakAfterColumn?: string, align?: string) => {\n const breakWordsClass = 'tw-break-words';\n const columnBreakClasses =\n breakAfterColumn === 'active' ? 'tw-break-after-column tw-break-inside-avoid-column' : '';\n const alignClass = align ? alignmentClassnames[align] : '';\n return merge([alignClass, breakWordsClass, columnBreakClasses]);\n};\n"],"names":["countNodesOfType","nodes","type","acc","node","serializeNodeToHtmlRecursive","styles","mappedMentionable","nestingCount","isText","serializeLeafToHtml","rootNestingCount","children","element","htmlMapper","MapNodeTypesToHtml","getClassNames","TextStyles","args","getTextStyleHtml","ELEMENT_UL","UL_CLASSES","ELEMENT_OL","classNames","nestingLevel","getOrderedListClasses","reactCssPropsToCss","OL_STYLES","ELEMENT_LI","LI_CLASSNAMES","getLiStyles","ELEMENT_LIC","getLicElementClassNames","ELEMENT_LINK","linkNode","ELEMENT_BUTTON","buttonNode","ELEMENT_CHECK_ITEM","checkItemNode","ELEMENT_MENTION","mentionHtmlNode","tag","htmlTag","breakAfterColumn","align","breakWordsClass","columnBreakClasses","alignClass","alignmentClassnames","merge"],"mappings":"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"}
|
|
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 TextStyles,\n UL_CLASSES,\n alignmentClassnames,\n getOrderedListClasses,\n} from '@components/RichTextEditor/Plugins';\nimport { getLicElementClassNames } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement';\nimport { LI_CLASSNAMES, getLiStyles } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement';\nimport {\n ELEMENT_LI,\n ELEMENT_LIC,\n ELEMENT_LINK,\n ELEMENT_MENTION,\n ELEMENT_OL,\n ELEMENT_UL,\n TDescendant,\n TElement,\n isText,\n} from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport { ButtonStylesType, 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 { CSSPropertiesHover } from '../types';\n\nconst getNestingLevels = (nodes: TDescendant[], type: string): number => {\n let maxDepth = 0;\n\n for (const node of nodes) {\n let currentDepth = 0;\n if (node.type === type) {\n currentDepth = 1;\n }\n if (node.children) {\n currentDepth += getNestingLevels(node.children as TDescendant[], type);\n }\n maxDepth = Math.max(maxDepth, currentDepth);\n }\n\n return maxDepth;\n};\n\ntype NestingCount = {\n [type: string]: number;\n};\n\ntype SerializeNodeToHtmlRecursiveOptions = {\n mappedMentionable?: MappedMentionableItems;\n nestingCount?: NestingCount;\n};\n\nexport const serializeNodeToHtmlRecursive = (\n node: TDescendant,\n styles: Record<string, CSSPropertiesHover> | ButtonStylesType,\n { mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,\n): string => {\n if (isText(node)) {\n return serializeLeafToHtml(node);\n }\n\n const rootNestingCount = nestingCount[node.type] || getNestingLevels([node], node.type);\n let children = '';\n for (const element of node.children) {\n children += serializeNodeToHtmlRecursive(element, styles, {\n nestingCount: {\n ...nestingCount,\n [element.type as string]: rootNestingCount,\n },\n mappedMentionable,\n });\n }\n\n const htmlMapper = MapNodeTypesToHtml[node.type];\n try {\n return (\n htmlMapper({\n classNames: getClassNames(\n node.breakAfterColumn as string | undefined,\n node.align as string | undefined,\n ),\n children,\n rootNestingCount,\n node,\n mappedMentionable,\n styles,\n }) ?? children\n );\n } catch (error) {\n console.warn(`The htmlMapper for node type: '${node.type}' does not exist.`);\n return children;\n }\n};\n\ntype Arguments = {\n classNames: string;\n children: string;\n rootNestingCount: number;\n node: TElement;\n mappedMentionable?: MappedMentionableItems;\n styles: Record<string, CSSPropertiesHover>;\n};\n\nconst MapNodeTypesToHtml: { [key: string]: ({ ...args }: Arguments) => string } = {\n [TextStyles.heading1]: (args) => getTextStyleHtml(TextStyles.heading1, args, 'h1'),\n [TextStyles.heading2]: (args) => getTextStyleHtml(TextStyles.heading2, args, 'h2'),\n [TextStyles.heading3]: (args) => getTextStyleHtml(TextStyles.heading3, args, 'h3'),\n [TextStyles.heading4]: (args) => getTextStyleHtml(TextStyles.heading4, args, 'h4'),\n [TextStyles.p]: (args) => getTextStyleHtml(TextStyles.p, args, 'p'),\n [TextStyles.custom1]: (args) => getTextStyleHtml(TextStyles.custom1, args, 'p'),\n [TextStyles.custom2]: (args) => getTextStyleHtml(TextStyles.custom2, args, 'p'),\n [TextStyles.custom3]: (args) => getTextStyleHtml(TextStyles.custom3, args, 'p'),\n [TextStyles.quote]: (args) => getTextStyleHtml(TextStyles.quote, args, 'p'),\n [TextStyles.imageTitle]: (args) => getTextStyleHtml(TextStyles.imageTitle, args, 'p'),\n [TextStyles.imageCaption]: (args) => getTextStyleHtml(TextStyles.imageCaption, args, 'p'),\n [ELEMENT_UL]: (args) => `<ul dir=\"auto\" class=\"${UL_CLASSES} ${args.classNames}\">${args.children}</ul>`,\n [ELEMENT_OL]: ({ classNames, children, node, rootNestingCount }) => {\n const nestingLevel = Math.max(rootNestingCount - getNestingLevels([node], ELEMENT_OL), 0);\n return `<ol dir=\"auto\" class=\"${getOrderedListClasses(nestingLevel)} ${classNames}\" style=\"${reactCssPropsToCss(\n OL_STYLES,\n )}\">${children}</ol>`;\n },\n [ELEMENT_LI]: ({ classNames, children, node, styles }) =>\n `<li dir=\"auto\" class=\"${classNames} ${LI_CLASSNAMES}\" style=\"${reactCssPropsToCss(\n getLiStyles(node, styles),\n )}\">${children}</li>`,\n [ELEMENT_LIC]: ({ classNames, children, node }) =>\n `<p dir=\"auto\" class=\"${classNames} ${getLicElementClassNames(node)}\"><span>${children}</span></p>`,\n [ELEMENT_LINK]: ({ node, children, classNames, styles }) => linkNode(node, children, classNames, styles),\n [ELEMENT_BUTTON]: ({ node, children, classNames, styles }) =>\n buttonNode(node, children, classNames, styles as ButtonStylesType),\n [ELEMENT_CHECK_ITEM]: ({ node, children, classNames, styles }) => checkItemNode(node, children, classNames, styles),\n [ELEMENT_MENTION]: ({ node, mappedMentionable }) => mentionHtmlNode(node, { mentionable: mappedMentionable }),\n};\n\nconst getTextStyleHtml = (\n tag: TextStyles,\n { classNames, styles, children }: Arguments,\n htmlTag: 'p' | 'h1' | 'h2' | 'h3' | 'h4',\n) => `<${htmlTag} dir=\"auto\" class=\"${classNames}\" style=\"${reactCssPropsToCss(styles[tag])}\">${children}</${htmlTag}>`;\n\nconst getClassNames = (breakAfterColumn?: string, align?: string) => {\n const breakWordsClass = 'tw-break-words';\n const columnBreakClasses =\n breakAfterColumn === 'active' ? 'tw-break-after-column tw-break-inside-avoid-column' : '';\n const alignClass = align ? alignmentClassnames[align] : '';\n return merge([alignClass, breakWordsClass, columnBreakClasses]);\n};\n"],"names":["getNestingLevels","nodes","type","maxDepth","node","currentDepth","serializeNodeToHtmlRecursive","styles","mappedMentionable","nestingCount","isText","serializeLeafToHtml","rootNestingCount","children","element","htmlMapper","MapNodeTypesToHtml","getClassNames","TextStyles","args","getTextStyleHtml","ELEMENT_UL","UL_CLASSES","ELEMENT_OL","classNames","nestingLevel","getOrderedListClasses","reactCssPropsToCss","OL_STYLES","ELEMENT_LI","LI_CLASSNAMES","getLiStyles","ELEMENT_LIC","getLicElementClassNames","ELEMENT_LINK","linkNode","ELEMENT_BUTTON","buttonNode","ELEMENT_CHECK_ITEM","checkItemNode","ELEMENT_MENTION","mentionHtmlNode","tag","htmlTag","breakAfterColumn","align","breakWordsClass","columnBreakClasses","alignClass","alignmentClassnames","merge"],"mappings":"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"}
|