@frontify/fondue
Version:
Design system of Frontify
90 lines (89 loc) • 4.06 kB
JavaScript
import { ELEMENT_LINK as f } from "@udecode/plate-link";
import { ELEMENT_LIC as u, ELEMENT_LI as L, ELEMENT_OL as c, ELEMENT_UL as N } from "@udecode/plate-list";
import { ELEMENT_MENTION as h } from "@udecode/plate-mention";
import { isText as T } from "@udecode/slate";
import { ELEMENT_CHECK_ITEM as d } from "../../Plugins/CheckboxListPlugin/id.es.js";
import { getLicElementClassNames as g, LIST_ITEM_SPAN_CLASSES as $ } from "../../Plugins/ListPlugin/ListItemContentMarkupElement.es.js";
import { LI_CLASSNAMES as C, getLiStyles as M } from "../../Plugins/ListPlugin/ListItemMarkupElement.es.js";
import { getOrderedListClasses as S, OL_STYLES as _ } from "../../Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.es.js";
import { UL_CLASSES as y } from "../../Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.es.js";
import { TextStyles as r } from "../../Plugins/TextStylePlugin/types.es.js";
import { ELEMENT_BUTTON as I, alignmentClassnames as k } from "../../Plugins/helper.es.js";
import { merge as x } from "../../../../utilities/merge.es.js";
import { buttonNode as b } from "../nodes/button.es.js";
import { checkItemNode as A } from "../nodes/checkItem.es.js";
import { linkNode as H } from "../nodes/link.es.js";
import { mentionHtmlNode as v } from "../nodes/mentionHtmlNode.es.js";
import { reactCssPropsToCss as n } from "./reactCssPropsToCss.es.js";
import { serializeLeafToHtml as w } from "./serializeLeafToHtml.es.js";
const p = (t, e) => {
let o = 0;
for (const s of t) {
let i = 0;
s.type === e && (i = 1), s.children && (i += p(s.children, e)), o = Math.max(o, i);
}
return o;
}, O = (t, e, { mappedMentionable: o, nestingCount: s = {} }) => {
if (T(t))
return w(t);
const i = s[t.type] || p([t], t.type);
let a = "";
for (const l of t.children)
a += O(l, e, {
nestingCount: {
...s,
[l.type]: i
},
mappedMentionable: o
});
const E = U[t.type];
try {
return E({
classNames: q(
t.breakAfterColumn,
t.align
),
children: a,
rootNestingCount: i,
node: t,
mappedMentionable: o,
styles: e
}) ?? a;
} catch {
return console.warn(`The htmlMapper for node type: '${t.type}' does not exist.`), a;
}
}, U = {
[r.heading1]: (t) => m(r.heading1, t, "h1"),
[r.heading2]: (t) => m(r.heading2, t, "h2"),
[r.heading3]: (t) => m(r.heading3, t, "h3"),
[r.heading4]: (t) => m(r.heading4, t, "h4"),
[r.p]: (t) => m(r.p, t, "p"),
[r.custom1]: (t) => m(r.custom1, t, "p"),
[r.custom2]: (t) => m(r.custom2, t, "p"),
[r.custom3]: (t) => m(r.custom3, t, "p"),
[r.quote]: (t) => m(r.quote, t, "p"),
[r.imageTitle]: (t) => m(r.imageTitle, t, "p"),
[r.imageCaption]: (t) => m(r.imageCaption, t, "p"),
[N]: (t) => `<ul dir="auto" class="${y} ${t.classNames}">${t.children}</ul>`,
[c]: ({ classNames: t, children: e, node: o, rootNestingCount: s }) => {
const i = Math.max(s - p([o], c), 0);
return `<ol dir="auto" class="${S(i)} ${t}" style="${n(
_
)}">${e}</ol>`;
},
[L]: ({ classNames: t, children: e, node: o, styles: s }) => `<li dir="auto" class="${t} ${C}" style="${n(
M(o, s)
)}">${e}</li>`,
[u]: ({ classNames: t, children: e, node: o }) => `<p dir="auto" class="${t} ${g(o, !1)}"><span class="${$}">${e}</span></p>`,
[f]: ({ node: t, children: e, classNames: o, styles: s }) => H(t, e, o, s),
[I]: ({ node: t, children: e, classNames: o, styles: s }) => b(t, e, o, s),
[d]: ({ node: t, children: e, classNames: o, styles: s }) => A(t, e, o, s),
[h]: ({ node: t, mappedMentionable: e }) => v(t, { mentionable: e })
}, m = (t, { classNames: e, styles: o, children: s }, i) => `<${i} dir="auto" class="${e}" style="${n(o[t])}">${s}</${i}>`, q = (t, e) => {
const o = "tw-break-words", s = t === "active" ? "tw-break-after-column tw-break-inside-avoid-column" : "", i = e ? k[e] : "";
return x([i, o, s]);
};
export {
O as serializeNodeToHtmlRecursive
};
//# sourceMappingURL=serializeNodeToHtmlRecursive.es.js.map