@frontify/fondue 12.0.0-beta.284 → 12.0.0-beta.286

package/dist/components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement.d.ts

@@ -1,7 +1,7 @@
 import { PlateRenderElementProps, TElement } from '@udecode/plate';
 import { CSSProperties } from 'react';
 import { MarkupElement } from '../MarkupElement';
-export declare const LI_CLASSNAMES = "[&>p]:before:tw-flex [&>p]:before:tw-justify-end [&>p]:before:tw-w-[1.2em] !tw-no-underline";
+export declare const LI_CLASSNAMES = "[&>p]:before:tw-flex [&>p]:before:tw-justify-end [&>p]:before:tw-w-[1.2em] !tw-no-underline !tw-list-item";
 export declare const ListItemMarkupElementNode: ({ attributes, children, element }: PlateRenderElementProps) => JSX.Element;
 export declare class ListItemMarkupElement extends MarkupElement {
     constructor(id?: string, node?: ({ attributes, children, element }: PlateRenderElementProps<import("@udecode/plate").Value, TElement>) => JSX.Element);

package/dist/components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement.es.js

@@ -1,32 +1,32 @@
 import { ELEMENT_LI as l } from "@udecode/plate";
 import n from "react";
-import { MarkupElement as c } from "../MarkupElement.es.js";
-import { TextStyles as i } from "../TextStylePlugin/types.es.js";
+import { MarkupElement as i } from "../MarkupElement.es.js";
+import { TextStyles as c } from "../TextStylePlugin/types.es.js";
 import { useRichTextEditorContext as m } from "../../context/RichTextEditorContext.es.js";
-const p = "[&>p]:before:tw-flex [&>p]:before:tw-justify-end [&>p]:before:tw-w-[1.2em] !tw-no-underline", f = ({ attributes: t, children: e, element: r }) => {
+const p = "[&>p]:before:tw-flex [&>p]:before:tw-justify-end [&>p]:before:tw-w-[1.2em] !tw-no-underline !tw-list-item", f = ({ attributes: e, children: t, element: r }) => {
   const { styles: s } = m();
-  return /* @__PURE__ */ n.createElement("li", { style: u(r, s), ...t, className: p }, e);
+  return /* @__PURE__ */ n.createElement("li", { style: u(r, s), ...e, className: p }, t);
 };
-class d extends c {
-  constructor(e = l, r = f) {
-    super(e, r);
+class d extends i {
+  constructor(t = l, r = f) {
+    super(t, r);
   }
 }
-const u = (t, e) => ({
-  ...e[o(t) ?? i.p],
+const u = (e, t) => ({
+  ...t[o(e) ?? c.p],
   counterIncrement: "count"
-}), o = (t) => {
-  let e;
-  if (t.type === "a")
-    e = t.children[0].textStyle;
-  else if (t.children)
-    for (const r of t.children) {
+}), o = (e) => {
+  let t;
+  if (e.type === "a")
+    t = e.children[0].textStyle;
+  else if (e.children)
+    for (const r of e.children) {
       const s = o(r);
-      s && (!e || s.startsWith(e)) && (e = s);
+      s && (!t || s.startsWith(t)) && (t = s);
     }
   else
-    e = t.textStyle;
-  return e;
+    t = e.textStyle;
+  return t;
 };
 export {
   p as LI_CLASSNAMES,

package/dist/components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemMarkupElement.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ELEMENT_LI, PlateRenderElementProps, TElement } from '@udecode/plate';\nimport React, { CSSProperties } from 'react';\nimport { MarkupElement } from '../MarkupElement';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context';\nimport { TextStyles } from '../TextStylePlugin';\n\nexport const LI_CLASSNAMES =\n    '[&>p]:before:tw-flex [&>p]:before:tw-justify-end [&>p]:before:tw-w-[1.2em] !tw-no-underline';\n\nexport const ListItemMarkupElementNode = ({ attributes, children, element }: PlateRenderElementProps) => {\n    const { styles } = useRichTextEditorContext();\n    return (\n        <li style={getLiStyles(element, styles)} {...attributes} className={LI_CLASSNAMES}>\n            {children}\n        </li>\n    );\n};\n\nexport class ListItemMarkupElement extends MarkupElement {\n    constructor(id = ELEMENT_LI, node = ListItemMarkupElementNode) {\n        super(id, node);\n    }\n}\n\nexport const getLiStyles = (element: TElement, styles: Record<string, CSSProperties>): CSSProperties => {\n    return {\n        ...styles[getDeepestTextStyle(element) ?? TextStyles.p],\n        counterIncrement: 'count',\n    };\n};\n\nconst getDeepestTextStyle = (node: TElement): string => {\n    let textStyle;\n\n    if (node.type === 'a') {\n        textStyle = node.children[0].textStyle;\n    } else if (node.children) {\n        for (const childNode of node.children) {\n            const deepestTextStyle = getDeepestTextStyle(childNode as TElement);\n            if (deepestTextStyle && (!textStyle || deepestTextStyle.startsWith(textStyle))) {\n                textStyle = deepestTextStyle;\n            }\n        }\n    } else {\n        textStyle = node.textStyle;\n    }\n\n    return textStyle as string;\n};\n"],"names":["LI_CLASSNAMES","ListItemMarkupElementNode","attributes","children","element","styles","useRichTextEditorContext","React","getLiStyles","ListItemMarkupElement","MarkupElement","id","ELEMENT_LI","node","getDeepestTextStyle","TextStyles","textStyle","childNode","deepestTextStyle"],"mappings":";;;;;AAQO,MAAMA,IACT,+FAESC,IAA4B,CAAC,EAAE,YAAAC,GAAY,UAAAC,GAAU,SAAAC,QAAuC;AAC/F,QAAA,EAAE,QAAAC,MAAWC;AAEf,SAAA,gBAAAC,EAAA,cAAC,MAAG,EAAA,OAAOC,EAAYJ,GAASC,CAAM,GAAI,GAAGH,GAAY,WAAWF,EAAA,GAC/DG,CACL;AAER;AAEO,MAAMM,UAA8BC,EAAc;AAAA,EACrD,YAAYC,IAAKC,GAAYC,IAAOZ,GAA2B;AAC3D,UAAMU,GAAIE,CAAI;AAAA,EAClB;AACJ;AAEa,MAAAL,IAAc,CAACJ,GAAmBC,OACpC;AAAA,EACH,GAAGA,EAAOS,EAAoBV,CAAO,KAAKW,EAAW,CAAC;AAAA,EACtD,kBAAkB;AAAA,IAIpBD,IAAsB,CAACD,MAA2B;AAChD,MAAAG;AAEA,MAAAH,EAAK,SAAS;AACF,IAAAG,IAAAH,EAAK,SAAS,CAAC,EAAE;AAAA,WACtBA,EAAK;AACD,eAAAI,KAAaJ,EAAK,UAAU;AAC7B,YAAAK,IAAmBJ,EAAoBG,CAAqB;AAClE,MAAIC,MAAqB,CAACF,KAAaE,EAAiB,WAAWF,CAAS,OAC5DA,IAAAE;AAAA,IAEpB;AAAA;AAEA,IAAAF,IAAYH,EAAK;AAGd,SAAAG;AACX;"}
+{"version":3,"file":"ListItemMarkupElement.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ELEMENT_LI, PlateRenderElementProps, TElement } from '@udecode/plate';\nimport React, { CSSProperties } from 'react';\nimport { MarkupElement } from '../MarkupElement';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context';\nimport { TextStyles } from '../TextStylePlugin';\n\nexport const LI_CLASSNAMES =\n    '[&>p]:before:tw-flex [&>p]:before:tw-justify-end [&>p]:before:tw-w-[1.2em] !tw-no-underline !tw-list-item';\n\nexport const ListItemMarkupElementNode = ({ attributes, children, element }: PlateRenderElementProps) => {\n    const { styles } = useRichTextEditorContext();\n    return (\n        <li style={getLiStyles(element, styles)} {...attributes} className={LI_CLASSNAMES}>\n            {children}\n        </li>\n    );\n};\n\nexport class ListItemMarkupElement extends MarkupElement {\n    constructor(id = ELEMENT_LI, node = ListItemMarkupElementNode) {\n        super(id, node);\n    }\n}\n\nexport const getLiStyles = (element: TElement, styles: Record<string, CSSProperties>): CSSProperties => {\n    return {\n        ...styles[getDeepestTextStyle(element) ?? TextStyles.p],\n        counterIncrement: 'count',\n    };\n};\n\nconst getDeepestTextStyle = (node: TElement): string => {\n    let textStyle;\n\n    if (node.type === 'a') {\n        textStyle = node.children[0].textStyle;\n    } else if (node.children) {\n        for (const childNode of node.children) {\n            const deepestTextStyle = getDeepestTextStyle(childNode as TElement);\n            if (deepestTextStyle && (!textStyle || deepestTextStyle.startsWith(textStyle))) {\n                textStyle = deepestTextStyle;\n            }\n        }\n    } else {\n        textStyle = node.textStyle;\n    }\n\n    return textStyle as string;\n};\n"],"names":["LI_CLASSNAMES","ListItemMarkupElementNode","attributes","children","element","styles","useRichTextEditorContext","React","getLiStyles","ListItemMarkupElement","MarkupElement","id","ELEMENT_LI","node","getDeepestTextStyle","TextStyles","textStyle","childNode","deepestTextStyle"],"mappings":";;;;;AAQO,MAAMA,IACT,6GAESC,IAA4B,CAAC,EAAE,YAAAC,GAAY,UAAAC,GAAU,SAAAC,QAAuC;AAC/F,QAAA,EAAE,QAAAC,MAAWC;AAEf,SAAA,gBAAAC,EAAA,cAAC,MAAG,EAAA,OAAOC,EAAYJ,GAASC,CAAM,GAAI,GAAGH,GAAY,WAAWF,EAAA,GAC/DG,CACL;AAER;AAEO,MAAMM,UAA8BC,EAAc;AAAA,EACrD,YAAYC,IAAKC,GAAYC,IAAOZ,GAA2B;AAC3D,UAAMU,GAAIE,CAAI;AAAA,EAClB;AACJ;AAEa,MAAAL,IAAc,CAACJ,GAAmBC,OACpC;AAAA,EACH,GAAGA,EAAOS,EAAoBV,CAAO,KAAKW,EAAW,CAAC;AAAA,EACtD,kBAAkB;AAAA,IAIpBD,IAAsB,CAACD,MAA2B;AAChD,MAAAG;AAEA,MAAAH,EAAK,SAAS;AACF,IAAAG,IAAAH,EAAK,SAAS,CAAC,EAAE;AAAA,WACtBA,EAAK;AACD,eAAAI,KAAaJ,EAAK,UAAU;AAC7B,YAAAK,IAAmBJ,EAAoBG,CAAqB;AAClE,MAAIC,MAAqB,CAACF,KAAaE,EAAiB,WAAWF,CAAS,OAC5DA,IAAAE;AAAA,IAEpB;AAAA;AAEA,IAAAF,IAAYH,EAAK;AAGd,SAAAG;AACX;"}

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js

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

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js.map

@@ -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 { 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>,\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    return (\n        htmlMapper({\n            classNames: getClassNames(node.breakAfterColumn as string | undefined, node.align as string | undefined),\n            children,\n            rootNestingCount,\n            node,\n            mappedMentionable,\n            styles,\n        }) ?? 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 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 class=\"${getOrderedListClasses(nestingLevel)} ${classNames}\" style=\"${reactCssPropsToCss(\n            OL_STYLES,\n        )}\">${children}</ol>`;\n    },\n    [ELEMENT_LI]: ({ classNames, children, node, styles }) =>\n        `<li class=\"${classNames} ${LI_CLASSNAMES}\" style=\"${reactCssPropsToCss(\n            getLiStyles(node, styles),\n        )}\">${children}</li>`,\n    [ELEMENT_LIC]: ({ classNames, children, node }) =>\n        `<p 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 }) => buttonNode(node, children, classNames, styles),\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} 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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"}
+{"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 { 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>,\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 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 class=\"${getOrderedListClasses(nestingLevel)} ${classNames}\" style=\"${reactCssPropsToCss(\n            OL_STYLES,\n        )}\">${children}</ol>`;\n    },\n    [ELEMENT_LI]: ({ classNames, children, node, styles }) =>\n        `<li class=\"${classNames} ${LI_CLASSNAMES}\" style=\"${reactCssPropsToCss(\n            getLiStyles(node, styles),\n        )}\">${children}</li>`,\n    [ELEMENT_LIC]: ({ classNames, children, node }) =>\n        `<p 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 }) => buttonNode(node, children, classNames, styles),\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} 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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"}