@frontify/fondue 12.1.5 → 12.1.7

package/dist/components/RichTextEditor/Plugins/ColumnBreakPlugin/createColumnBreakPlugin.es.js

@@ -1,42 +1,44 @@
-var r = Object.defineProperty;
-var u = (e, t, n) => t in e ? r(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var o = (e, t, n) => (u(e, typeof t != "symbol" ? t + "" : t, n), n);
-import { createPluginFactory as l } from "@udecode/plate-core";
-import { Plugin as m } from "../Plugin.es.js";
-import { ColumnBreakButton as a } from "./ColumnBreakButton/index.es.js";
-import { onKeyDownColumnBreak as i } from "./onKeyDownColumnBreak.es.js";
-import { useColumnBreakHandler as c } from "./useColumnBreakHandler.es.js";
-const s = "breakAfterColumn", g = "normal";
-class y extends m {
-  constructor(n) {
+var u = Object.defineProperty;
+var l = (e, n, t) => n in e ? u(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t;
+var o = (e, n, t) => (l(e, typeof n != "symbol" ? n + "" : n, t), t);
+import { createPluginFactory as m } from "@udecode/plate-core";
+import { Plugin as a } from "../Plugin.es.js";
+import { ColumnBreakButton as s } from "./ColumnBreakButton/index.es.js";
+import { onKeyDownColumnBreak as r } from "./onKeyDownColumnBreak.es.js";
+import { useColumnBreakHandler as i } from "./useColumnBreakHandler.es.js";
+const c = "breakAfterColumn", g = "normal";
+class y extends a {
+  constructor(t) {
     super("break-after-plugin", {
-      button: a,
-      ...n
+      button: s,
+      ...t
     });
     o(this, "columns");
     o(this, "gap");
-    this.columns = (n == null ? void 0 : n.columns) ?? 1, this.gap = (n == null ? void 0 : n.gap) ?? g;
+    o(this, "customClass");
+    this.columns = (t == null ? void 0 : t.columns) ?? 1, this.gap = (t == null ? void 0 : t.gap) ?? g, this.customClass = t == null ? void 0 : t.customClass;
   }
   plugins() {
-    return [k(this.columns, this.gap)];
+    return [k(this.columns, this.gap, this.customClass)];
   }
 }
-const k = (e, t) => l({
-  key: s,
+const k = (e, n, t) => m({
+  key: c,
   handlers: {
-    onKeyDown: i
+    onKeyDown: r
   },
-  useHooks: c,
+  useHooks: i,
   options: {
     columns: e,
-    gap: t,
+    gap: n,
+    customClass: t,
     hotkey: ["shift+ctrl+enter"]
   }
 })();
 export {
   y as BreakAfterPlugin,
   g as GAP_DEFAULT,
-  s as KEY_ELEMENT_BREAK_AFTER_COLUMN,
+  c as KEY_ELEMENT_BREAK_AFTER_COLUMN,
   k as createColumnBreakPlugin
 };
 //# sourceMappingURL=createColumnBreakPlugin.es.js.map

package/dist/components/RichTextEditor/Plugins/ColumnBreakPlugin/createColumnBreakPlugin.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"createColumnBreakPlugin.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/ColumnBreakPlugin/createColumnBreakPlugin.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';\nimport { type CSSProperties } from 'react';\n\nimport { Plugin, type PluginProps } from '../Plugin';\n\nimport { ColumnBreakButton } from './ColumnBreakButton';\nimport { onKeyDownColumnBreak } from './onKeyDownColumnBreak';\nimport { useColumnBreakHandler } from './useColumnBreakHandler';\n\nexport const KEY_ELEMENT_BREAK_AFTER_COLUMN = 'breakAfterColumn';\nexport const GAP_DEFAULT = 'normal';\n\nexport class BreakAfterPlugin extends Plugin {\n    private columns: number;\n    private gap: CSSProperties['gap'];\n    constructor(props?: PluginProps) {\n        super('break-after-plugin', {\n            button: ColumnBreakButton,\n            ...props,\n        });\n        this.columns = props?.columns ?? 1;\n        this.gap = props?.gap ?? GAP_DEFAULT;\n    }\n\n    plugins(): PlatePlugin[] {\n        return [createColumnBreakPlugin(this.columns, this.gap)];\n    }\n}\n\nexport const createColumnBreakPlugin = (columns: number, gap: CSSProperties['gap']): PlatePlugin => {\n    return createPluginFactory({\n        key: KEY_ELEMENT_BREAK_AFTER_COLUMN,\n        handlers: {\n            onKeyDown: onKeyDownColumnBreak,\n        },\n        useHooks: useColumnBreakHandler,\n        options: {\n            columns,\n            gap,\n            hotkey: ['shift+ctrl+enter'],\n        },\n    })();\n};\n"],"names":["KEY_ELEMENT_BREAK_AFTER_COLUMN","GAP_DEFAULT","BreakAfterPlugin","Plugin","props","ColumnBreakButton","__publicField","createColumnBreakPlugin","columns","gap","createPluginFactory","onKeyDownColumnBreak","useColumnBreakHandler"],"mappings":";;;;;;;;AAWO,MAAMA,IAAiC,oBACjCC,IAAc;AAEpB,MAAMC,UAAyBC,EAAO;AAAA,EAGzC,YAAYC,GAAqB;AAC7B,UAAM,sBAAsB;AAAA,MACxB,QAAQC;AAAA,MACR,GAAGD;AAAA,IAAA,CACN;AANG,IAAAE,EAAA;AACA,IAAAA,EAAA;AAMC,SAAA,WAAUF,KAAA,gBAAAA,EAAO,YAAW,GAC5B,KAAA,OAAMA,KAAA,gBAAAA,EAAO,QAAOH;AAAA,EAC7B;AAAA,EAEA,UAAyB;AACrB,WAAO,CAACM,EAAwB,KAAK,SAAS,KAAK,GAAG,CAAC;AAAA,EAC3D;AACJ;AAEa,MAAAA,IAA0B,CAACC,GAAiBC,MAC9CC,EAAoB;AAAA,EACvB,KAAKV;AAAA,EACL,UAAU;AAAA,IACN,WAAWW;AAAA,EACf;AAAA,EACA,UAAUC;AAAA,EACV,SAAS;AAAA,IACL,SAAAJ;AAAA,IACA,KAAAC;AAAA,IACA,QAAQ,CAAC,kBAAkB;AAAA,EAC/B;AACH,CAAA;"}
+{"version":3,"file":"createColumnBreakPlugin.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/ColumnBreakPlugin/createColumnBreakPlugin.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type PlatePlugin, createPluginFactory } from '@udecode/plate-core';\nimport { type CSSProperties } from 'react';\n\nimport { type BreakAfterPluginProps } from '@components/RichTextEditor/Plugins/ColumnBreakPlugin/types';\n\nimport { Plugin } from '../Plugin';\n\nimport { ColumnBreakButton } from './ColumnBreakButton';\nimport { onKeyDownColumnBreak } from './onKeyDownColumnBreak';\nimport { useColumnBreakHandler } from './useColumnBreakHandler';\n\nexport const KEY_ELEMENT_BREAK_AFTER_COLUMN = 'breakAfterColumn';\nexport const GAP_DEFAULT = 'normal';\n\nexport class BreakAfterPlugin extends Plugin {\n    private columns: number;\n    private gap: CSSProperties['gap'];\n    private customClass: string | undefined;\n    constructor(props?: BreakAfterPluginProps) {\n        super('break-after-plugin', {\n            button: ColumnBreakButton,\n            ...props,\n        });\n        this.columns = props?.columns ?? 1;\n        this.gap = props?.gap ?? GAP_DEFAULT;\n        this.customClass = props?.customClass;\n    }\n\n    plugins(): PlatePlugin[] {\n        return [createColumnBreakPlugin(this.columns, this.gap, this.customClass)];\n    }\n}\n\nexport const createColumnBreakPlugin = (\n    columns: number,\n    gap: CSSProperties['gap'],\n    customClass: string | undefined,\n): PlatePlugin => {\n    return createPluginFactory({\n        key: KEY_ELEMENT_BREAK_AFTER_COLUMN,\n        handlers: {\n            onKeyDown: onKeyDownColumnBreak,\n        },\n        useHooks: useColumnBreakHandler,\n        options: {\n            columns,\n            gap,\n            customClass,\n            hotkey: ['shift+ctrl+enter'],\n        },\n    })();\n};\n"],"names":["KEY_ELEMENT_BREAK_AFTER_COLUMN","GAP_DEFAULT","BreakAfterPlugin","Plugin","props","ColumnBreakButton","__publicField","createColumnBreakPlugin","columns","gap","customClass","createPluginFactory","onKeyDownColumnBreak","useColumnBreakHandler"],"mappings":";;;;;;;;AAaO,MAAMA,IAAiC,oBACjCC,IAAc;AAEpB,MAAMC,UAAyBC,EAAO;AAAA,EAIzC,YAAYC,GAA+B;AACvC,UAAM,sBAAsB;AAAA,MACxB,QAAQC;AAAA,MACR,GAAGD;AAAA,IAAA,CACN;AAPG,IAAAE,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AAMC,SAAA,WAAUF,KAAA,gBAAAA,EAAO,YAAW,GAC5B,KAAA,OAAMA,KAAA,gBAAAA,EAAO,QAAOH,GACzB,KAAK,cAAcG,KAAA,gBAAAA,EAAO;AAAA,EAC9B;AAAA,EAEA,UAAyB;AACd,WAAA,CAACG,EAAwB,KAAK,SAAS,KAAK,KAAK,KAAK,WAAW,CAAC;AAAA,EAC7E;AACJ;AAEO,MAAMA,IAA0B,CACnCC,GACAC,GACAC,MAEOC,EAAoB;AAAA,EACvB,KAAKX;AAAA,EACL,UAAU;AAAA,IACN,WAAWY;AAAA,EACf;AAAA,EACA,UAAUC;AAAA,EACV,SAAS;AAAA,IACL,SAAAL;AAAA,IACA,KAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAQ,CAAC,kBAAkB;AAAA,EAC/B;AACH,CAAA;"}

package/dist/components/RichTextEditor/Plugins/Plugin.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Plugin.es.js","sources":["../../../../src/components/RichTextEditor/Plugins/Plugin.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type PlatePlugin } from '@udecode/plate-core';\nimport { type CSSProperties } from 'react';\n\nimport { Position } from '../components/EditorPositioningWrapper';\n\nimport { type MarkupElement } from './MarkupElement';\nimport { type InlineData, type PluginButton } from './types';\n\nexport type PluginProps = {\n    id?: string;\n    button?: PluginButton;\n    markupElement?: MarkupElement;\n    markupInputElement?: MarkupElement;\n    leafMarkupElements?: MarkupElement | MarkupElement[];\n    showIn?: Position[];\n    columns?: number;\n    gap?: string | number;\n    label?: string;\n    textStyles?: Plugin<PluginProps>[];\n    styles?: CSSProperties;\n};\n\nexport abstract class Plugin<P extends PluginProps = PluginProps> {\n    readonly id: string;\n    readonly button?: PluginButton;\n    readonly markupElement?: MarkupElement;\n    readonly markupInputElement?: MarkupElement;\n    readonly leafMarkupElements?: MarkupElement | MarkupElement[];\n    readonly showIn: Position[];\n    readonly props?: P;\n    readonly textStyles?: Plugin<PluginProps>[];\n    readonly styles?: CSSProperties;\n\n    constructor(id: string, rest?: P) {\n        this.id = rest?.id || id;\n        this.button = rest?.button;\n        this.markupElement = rest?.markupElement;\n        this.markupInputElement = rest?.markupInputElement;\n        this.leafMarkupElements = rest?.leafMarkupElements;\n        this.showIn = rest?.showIn ?? [Position.BOTTOM, Position.TOP, Position.FLOATING];\n        this.props = rest;\n    }\n\n    inline(): InlineData | undefined {\n        return undefined;\n    }\n\n    abstract plugins(): PlatePlugin[];\n}\n"],"names":["Plugin","id","rest","__publicField","Position"],"mappings":";;;;AAwBO,MAAeA,EAA4C;AAAA,EAW9D,YAAYC,GAAYC,GAAU;AAVzB,IAAAC,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AAGA,SAAA,MAAKD,KAAA,gBAAAA,EAAM,OAAMD,GACtB,KAAK,SAASC,KAAA,gBAAAA,EAAM,QACpB,KAAK,gBAAgBA,KAAA,gBAAAA,EAAM,eAC3B,KAAK,qBAAqBA,KAAA,gBAAAA,EAAM,oBAChC,KAAK,qBAAqBA,KAAA,gBAAAA,EAAM,oBAC3B,KAAA,UAASA,KAAA,gBAAAA,EAAM,WAAU,CAACE,EAAS,QAAQA,EAAS,KAAKA,EAAS,QAAQ,GAC/E,KAAK,QAAQF;AAAA,EACjB;AAAA,EAEA,SAAiC;AAAA,EAEjC;AAGJ;"}
+{"version":3,"file":"Plugin.es.js","sources":["../../../../src/components/RichTextEditor/Plugins/Plugin.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type PlatePlugin } from '@udecode/plate-core';\nimport { type CSSProperties } from 'react';\n\nimport { Position } from '../components/EditorPositioningWrapper';\n\nimport { type MarkupElement } from './MarkupElement';\nimport { type InlineData, type PluginButton } from './types';\n\nexport type PluginProps = {\n    id?: string;\n    button?: PluginButton;\n    markupElement?: MarkupElement;\n    markupInputElement?: MarkupElement;\n    leafMarkupElements?: MarkupElement | MarkupElement[];\n    showIn?: Position[];\n    label?: string;\n    textStyles?: Plugin<PluginProps>[];\n    styles?: CSSProperties;\n};\n\nexport abstract class Plugin<P extends PluginProps = PluginProps> {\n    readonly id: string;\n    readonly button?: PluginButton;\n    readonly markupElement?: MarkupElement;\n    readonly markupInputElement?: MarkupElement;\n    readonly leafMarkupElements?: MarkupElement | MarkupElement[];\n    readonly showIn: Position[];\n    readonly props?: P;\n    readonly textStyles?: Plugin<PluginProps>[];\n    readonly styles?: CSSProperties;\n\n    constructor(id: string, rest?: P) {\n        this.id = rest?.id || id;\n        this.button = rest?.button;\n        this.markupElement = rest?.markupElement;\n        this.markupInputElement = rest?.markupInputElement;\n        this.leafMarkupElements = rest?.leafMarkupElements;\n        this.showIn = rest?.showIn ?? [Position.BOTTOM, Position.TOP, Position.FLOATING];\n        this.props = rest;\n    }\n\n    inline(): InlineData | undefined {\n        return undefined;\n    }\n\n    abstract plugins(): PlatePlugin[];\n}\n"],"names":["Plugin","id","rest","__publicField","Position"],"mappings":";;;;AAsBO,MAAeA,EAA4C;AAAA,EAW9D,YAAYC,GAAYC,GAAU;AAVzB,IAAAC,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AACA,IAAAA,EAAA;AAGA,SAAA,MAAKD,KAAA,gBAAAA,EAAM,OAAMD,GACtB,KAAK,SAASC,KAAA,gBAAAA,EAAM,QACpB,KAAK,gBAAgBA,KAAA,gBAAAA,EAAM,eAC3B,KAAK,qBAAqBA,KAAA,gBAAAA,EAAM,oBAChC,KAAK,qBAAqBA,KAAA,gBAAAA,EAAM,oBAC3B,KAAA,UAASA,KAAA,gBAAAA,EAAM,WAAU,CAACE,EAAS,QAAQA,EAAS,KAAKA,EAAS,QAAQ,GAC/E,KAAK,QAAQF;AAAA,EACjB;AAAA,EAEA,SAAiC;AAAA,EAEjC;AAGJ;"}

package/dist/components/RichTextEditor/RichTextEditor.es.js

@@ -1,73 +1,74 @@
-import { jsx as i, jsxs as g } from "react/jsx-runtime";
-import { Plate as G, PlateContent as M } from "@udecode/plate-core";
-import { useMemo as S, useCallback as E } from "react";
-import { BlurObserver as z } from "./BlurObserver.es.js";
-import { useMemoizedId as A } from "../../hooks/useMemoizedId.es.js";
-import { ContentReplacement as D } from "./ContentReplacement.es.js";
-import { RichTextEditorProvider as b } from "./context/RichTextEditorContext.es.js";
-import { PaddingSizes as j } from "./types.es.js";
-import { useEditorState as B } from "./hooks/useEditorState.es.js";
-import { KEY_ELEMENT_BREAK_AFTER_COLUMN as H, GAP_DEFAULT as U } from "./Plugins/ColumnBreakPlugin/createColumnBreakPlugin.es.js";
-import { forceToFocusNextElement as J } from "./helpers/forceToFocusElement.es.js";
-import { Position as y } from "./components/EditorPositioningWrapper/types.es.js";
-import { defaultPlugins as Y } from "./Plugins/defaultPlugins.es.js";
-import { RenderPlaceholder as $ } from "./components/RenderPlaceholder/RenderPlaceholder.es.js";
-import q from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/noop.es.js";
-import { parseRawValue as v } from "./utils/parseRawValue.es.js";
-const Q = ({
-  id: T,
+import { jsx as i, jsxs as S } from "react/jsx-runtime";
+import { Plate as g, PlateContent as z } from "@udecode/plate-core";
+import { useMemo as D, useCallback as T } from "react";
+import { BlurObserver as j } from "./BlurObserver.es.js";
+import { useMemoizedId as B } from "../../hooks/useMemoizedId.es.js";
+import { merge as H } from "../../utilities/merge.es.js";
+import { ContentReplacement as U } from "./ContentReplacement.es.js";
+import { RichTextEditorProvider as A } from "./context/RichTextEditorContext.es.js";
+import { PaddingSizes as J } from "./types.es.js";
+import { useEditorState as Y } from "./hooks/useEditorState.es.js";
+import { KEY_ELEMENT_BREAK_AFTER_COLUMN as b, GAP_DEFAULT as q } from "./Plugins/ColumnBreakPlugin/createColumnBreakPlugin.es.js";
+import { forceToFocusNextElement as v } from "./helpers/forceToFocusElement.es.js";
+import { RenderPlaceholder as Q } from "./components/RenderPlaceholder/RenderPlaceholder.es.js";
+import W from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/noop.es.js";
+import { Position as h } from "./components/EditorPositioningWrapper/types.es.js";
+import { defaultPlugins as X } from "./Plugins/defaultPlugins.es.js";
+import { parseRawValue as Z } from "./utils/parseRawValue.es.js";
+const $ = ({
+  id: N,
   value: m,
-  placeholder: h = "",
-  readonly: N = !1,
-  onTextChange: R,
+  placeholder: R = "",
+  readonly: x = !1,
+  onTextChange: C,
   onBlur: n,
-  padding: x = j.None,
-  position: s = y.FLOATING,
-  plugins: l = Y,
-  updateValueOnChange: P = !1,
-  onValueChanged: F,
-  border: O = !0,
-  toolbarWidth: V,
-  hideExternalFloatingModals: w
+  padding: F = J.None,
+  position: l = h.FLOATING,
+  plugins: s = X,
+  updateValueOnChange: O = !1,
+  onValueChanged: V,
+  border: w = !0,
+  toolbarWidth: I,
+  hideExternalFloatingModals: K
 }) => {
-  var f, u;
-  const r = A(T), { localValue: a, onChange: C, memoizedValue: I, config: t } = B({
-    editorId: r,
+  var u, E, y;
+  const t = B(N), { localValue: a, onChange: L, memoizedValue: P, config: r } = Y({
+    editorId: t,
     initialValue: m,
-    onTextChange: R,
-    plugins: l,
-    onValueChanged: F
-  }), o = l.plugins.find((e) => e.key === H), c = ((f = o == null ? void 0 : o.options) == null ? void 0 : f.columns) ?? 1, d = ((u = o == null ? void 0 : o.options) == null ? void 0 : u.gap) ?? U, K = S(
+    onTextChange: C,
+    plugins: s,
+    onValueChanged: V
+  }), o = s.plugins.find((e) => e.key === b), c = (u = o == null ? void 0 : o.options) == null ? void 0 : u.customClass, d = c ? null : ((E = o == null ? void 0 : o.options) == null ? void 0 : E.columns) ?? 1, p = ((y = o == null ? void 0 : o.options) == null ? void 0 : y.gap) ?? q, _ = D(
     () => ({
-      columns: c,
-      columnGap: d,
+      columns: d,
+      columnGap: p,
       outline: "none"
     }),
-    [c, d]
-  ), L = E(() => {
+    [d, p]
+  ), G = T(() => {
     n && n(JSON.stringify(a.current));
-  }, [n, a]), _ = E((e) => {
-    e.code === "Tab" && J(e, !e.shiftKey);
-  }, []), p = {
-    placeholder: h,
-    renderPlaceholder: $,
-    readOnly: N,
-    onBlur: L,
-    className: `${x}`,
-    style: K,
-    onKeyDown: _,
-    scrollSelectionIntoView: q
+  }, [n, a]), M = T((e) => {
+    e.code === "Tab" && v(e, !e.shiftKey);
+  }, []), f = {
+    placeholder: R,
+    renderPlaceholder: Q,
+    readOnly: x,
+    onBlur: G,
+    className: H([F, c]),
+    style: _,
+    onKeyDown: M,
+    scrollSelectionIntoView: W
   };
-  return /* @__PURE__ */ i(b, { styles: t.styles(), position: s, border: O, editorId: r, children: /* @__PURE__ */ g(G, { id: r, onChange: C, plugins: t.plugins, initialValue: I, children: [
-    /* @__PURE__ */ i(M, { ...p }),
-    !p.readOnly && t.toolbar(V),
-    t.inline(),
-    P && /* @__PURE__ */ i(D, { value: v({ editorId: r, raw: m, plugins: l }) }),
-    s === y.FLOATING && /* @__PURE__ */ i(z, { hideExternalFloatingModals: w })
+  return /* @__PURE__ */ i(A, { styles: r.styles(), position: l, border: w, editorId: t, children: /* @__PURE__ */ S(g, { id: t, onChange: L, plugins: r.plugins, initialValue: P, children: [
+    /* @__PURE__ */ i(z, { ...f }),
+    !f.readOnly && r.toolbar(I),
+    r.inline(),
+    O && /* @__PURE__ */ i(U, { value: Z({ editorId: t, raw: m, plugins: s }) }),
+    l === h.FLOATING && /* @__PURE__ */ i(j, { hideExternalFloatingModals: K })
   ] }) });
 };
-Q.displayName = "FondueRichTextEditor";
+$.displayName = "FondueRichTextEditor";
 export {
-  Q as RichTextEditor
+  $ as RichTextEditor
 };
 //# sourceMappingURL=RichTextEditor.es.js.map

package/dist/components/RichTextEditor/RichTextEditor.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Plate, PlateContent, type TEditableProps } from '@udecode/plate-core';\nimport { noop } from 'lodash-es';\nimport { type KeyboardEvent, useCallback, useMemo } from 'react';\n\nimport { BlurObserver } from '@components/RichTextEditor/BlurObserver';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nimport { ContentReplacement } from './ContentReplacement';\nimport { GAP_DEFAULT, KEY_ELEMENT_BREAK_AFTER_COLUMN, type PluginComposer, defaultPlugins } from './Plugins';\nimport { Position } from './components/EditorPositioningWrapper';\nimport { RenderPlaceholder } from './components/RenderPlaceholder';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { forceToFocusNextElement } from './helpers';\nimport { useEditorState } from './hooks';\nimport { PaddingSizes, type TreeOfNodes } from './types';\nimport { parseRawValue } from './utils';\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    padding?: PaddingSizes;\n    position?: Position;\n    plugins?: PluginComposer;\n    onValueChanged?: (value: TreeOfNodes | null) => void;\n    border?: boolean;\n    updateValueOnChange?: boolean; // Only set to true when you are sure that performance isn't an issue\n    toolbarWidth?: number;\n    hideExternalFloatingModals?: (editorId: string) => void;\n};\n\nexport const RichTextEditor = ({\n    id,\n    value,\n    placeholder = '',\n    readonly: readOnly = false,\n    onTextChange,\n    onBlur,\n    padding = PaddingSizes.None,\n    position = Position.FLOATING,\n    plugins = defaultPlugins,\n    updateValueOnChange = false,\n    onValueChanged,\n    border = true,\n    toolbarWidth,\n    hideExternalFloatingModals,\n}: RichTextEditorProps) => {\n    const editorId = useMemoizedId(id);\n    const { localValue, onChange, memoizedValue, config } = useEditorState({\n        editorId,\n        initialValue: value,\n        onTextChange,\n        plugins,\n        onValueChanged,\n    });\n    const breakAfterPlugin = plugins.plugins.find((plugin) => plugin.key === KEY_ELEMENT_BREAK_AFTER_COLUMN);\n    const columns = breakAfterPlugin?.options?.columns ?? 1;\n    const columnGap = breakAfterPlugin?.options?.gap ?? GAP_DEFAULT;\n\n    const style = useMemo(\n        () => ({\n            columns,\n            columnGap,\n            outline: 'none',\n        }),\n        [columns, columnGap],\n    );\n\n    const onBlurHandler = useCallback(() => {\n        if (onBlur) {\n            onBlur(JSON.stringify(localValue.current));\n        }\n    }, [onBlur, localValue]);\n\n    const onKeyDownHandler = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n        if (event.code === 'Tab') {\n            forceToFocusNextElement(event, !event.shiftKey);\n        }\n    }, []);\n\n    const editableProps: TEditableProps = {\n        placeholder,\n        renderPlaceholder: RenderPlaceholder,\n        readOnly,\n        onBlur: onBlurHandler,\n        className: `${padding}`,\n        style,\n        onKeyDown: onKeyDownHandler,\n        scrollSelectionIntoView: noop,\n    };\n\n    return (\n        <RichTextEditorProvider styles={config.styles()} position={position} border={border} editorId={editorId}>\n            <Plate id={editorId} onChange={onChange} plugins={config.plugins} initialValue={memoizedValue}>\n                <PlateContent {...editableProps} />\n                {!editableProps.readOnly && config.toolbar(toolbarWidth)}\n                {config.inline()}\n                {updateValueOnChange && <ContentReplacement value={parseRawValue({ editorId, raw: value, plugins })} />}\n                {position === Position.FLOATING && (\n                    <BlurObserver hideExternalFloatingModals={hideExternalFloatingModals} />\n                )}\n            </Plate>\n        </RichTextEditorProvider>\n    );\n};\nRichTextEditor.displayName = 'FondueRichTextEditor';\n"],"names":["RichTextEditor","id","value","placeholder","readOnly","onTextChange","onBlur","padding","PaddingSizes","position","Position","plugins","defaultPlugins","updateValueOnChange","onValueChanged","border","toolbarWidth","hideExternalFloatingModals","editorId","useMemoizedId","localValue","onChange","memoizedValue","config","useEditorState","breakAfterPlugin","plugin","KEY_ELEMENT_BREAK_AFTER_COLUMN","columns","_a","columnGap","_b","GAP_DEFAULT","style","useMemo","onBlurHandler","useCallback","onKeyDownHandler","event","forceToFocusNextElement","editableProps","RenderPlaceholder","noop","RichTextEditorProvider","jsxs","Plate","jsx","PlateContent","ContentReplacement","parseRawValue","BlurObserver"],"mappings":";;;;;;;;;;;;;;;;AAoCO,MAAMA,IAAiB,CAAC;AAAA,EAC3B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAUC,IAAW;AAAA,EACrB,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAUC,EAAa;AAAA,EACvB,UAAAC,IAAWC,EAAS;AAAA,EACpB,SAAAC,IAAUC;AAAA,EACV,qBAAAC,IAAsB;AAAA,EACtB,gBAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAAC;AAAA,EACA,4BAAAC;AACJ,MAA2B;;AACjB,QAAAC,IAAWC,EAAclB,CAAE,GAC3B,EAAE,YAAAmB,GAAY,UAAAC,GAAU,eAAAC,GAAe,QAAAC,EAAA,IAAWC,EAAe;AAAA,IACnE,UAAAN;AAAA,IACA,cAAchB;AAAA,IACd,cAAAG;AAAA,IACA,SAAAM;AAAA,IACA,gBAAAG;AAAA,EAAA,CACH,GACKW,IAAmBd,EAAQ,QAAQ,KAAK,CAACe,MAAWA,EAAO,QAAQC,CAA8B,GACjGC,MAAUC,IAAAJ,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAI,EAA2B,YAAW,GAChDC,MAAYC,IAAAN,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAM,EAA2B,QAAOC,GAE9CC,IAAQC;AAAA,IACV,OAAO;AAAA,MACH,SAAAN;AAAA,MACA,WAAAE;AAAA,MACA,SAAS;AAAA,IAAA;AAAA,IAEb,CAACF,GAASE,CAAS;AAAA,EAAA,GAGjBK,IAAgBC,EAAY,MAAM;AACpC,IAAI9B,KACAA,EAAO,KAAK,UAAUc,EAAW,OAAO,CAAC;AAAA,EAC7C,GACD,CAACd,GAAQc,CAAU,CAAC,GAEjBiB,IAAmBD,EAAY,CAACE,MAAyC;AACvE,IAAAA,EAAM,SAAS,SACSC,EAAAD,GAAO,CAACA,EAAM,QAAQ;AAAA,EAEtD,GAAG,CAAE,CAAA,GAECE,IAAgC;AAAA,IAClC,aAAArC;AAAA,IACA,mBAAmBsC;AAAA,IACnB,UAAArC;AAAA,IACA,QAAQ+B;AAAA,IACR,WAAW,GAAG5B,CAAO;AAAA,IACrB,OAAA0B;AAAA,IACA,WAAWI;AAAA,IACX,yBAAyBK;AAAA,EAAA;AAG7B,2BACKC,GAAuB,EAAA,QAAQpB,EAAO,OAAO,GAAG,UAAAd,GAAoB,QAAAM,GAAgB,UAAAG,GACjF,UAAC,gBAAA0B,EAAAC,GAAA,EAAM,IAAI3B,GAAU,UAAAG,GAAoB,SAASE,EAAO,SAAS,cAAcD,GAC5E,UAAA;AAAA,IAAC,gBAAAwB,EAAAC,GAAA,EAAc,GAAGP,GAAe;AAAA,IAChC,CAACA,EAAc,YAAYjB,EAAO,QAAQP,CAAY;AAAA,IACtDO,EAAO,OAAO;AAAA,IACdV,KAAwB,gBAAAiC,EAAAE,GAAA,EAAmB,OAAOC,EAAc,EAAE,UAAA/B,GAAU,KAAKhB,GAAO,SAAAS,EAAQ,CAAC,EAAG,CAAA;AAAA,IACpGF,MAAaC,EAAS,YACnB,gBAAAoC,EAACI,KAAa,4BAAAjC,GAAwD;AAAA,EAAA,EAE9E,CAAA,EACJ,CAAA;AAER;AACAjB,EAAe,cAAc;"}
+{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Plate, PlateContent, type TEditableProps } from '@udecode/plate-core';\nimport { noop } from 'lodash-es';\nimport { type KeyboardEvent, useCallback, useMemo } from 'react';\n\nimport { BlurObserver } from '@components/RichTextEditor/BlurObserver';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\n\nimport { ContentReplacement } from './ContentReplacement';\nimport { GAP_DEFAULT, KEY_ELEMENT_BREAK_AFTER_COLUMN, type PluginComposer, defaultPlugins } from './Plugins';\nimport { Position } from './components/EditorPositioningWrapper';\nimport { RenderPlaceholder } from './components/RenderPlaceholder';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { forceToFocusNextElement } from './helpers';\nimport { useEditorState } from './hooks';\nimport { PaddingSizes, type TreeOfNodes } from './types';\nimport { parseRawValue } from './utils';\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    padding?: PaddingSizes;\n    position?: Position;\n    plugins?: PluginComposer;\n    onValueChanged?: (value: TreeOfNodes | null) => void;\n    border?: boolean;\n    updateValueOnChange?: boolean; // Only set to true when you are sure that performance isn't an issue\n    toolbarWidth?: number;\n    hideExternalFloatingModals?: (editorId: string) => void;\n};\n\nexport const RichTextEditor = ({\n    id,\n    value,\n    placeholder = '',\n    readonly: readOnly = false,\n    onTextChange,\n    onBlur,\n    padding = PaddingSizes.None,\n    position = Position.FLOATING,\n    plugins = defaultPlugins,\n    updateValueOnChange = false,\n    onValueChanged,\n    border = true,\n    toolbarWidth,\n    hideExternalFloatingModals,\n}: RichTextEditorProps) => {\n    const editorId = useMemoizedId(id);\n    const { localValue, onChange, memoizedValue, config } = useEditorState({\n        editorId,\n        initialValue: value,\n        onTextChange,\n        plugins,\n        onValueChanged,\n    });\n    const breakAfterPlugin = plugins.plugins.find((plugin) => plugin.key === KEY_ELEMENT_BREAK_AFTER_COLUMN);\n    const customClass = breakAfterPlugin?.options?.customClass as string | undefined;\n    const columns = customClass ? null : breakAfterPlugin?.options?.columns ?? 1;\n    const columnGap = breakAfterPlugin?.options?.gap ?? GAP_DEFAULT;\n\n    const style = useMemo(\n        () => ({\n            columns,\n            columnGap,\n            outline: 'none',\n        }),\n        [columns, columnGap],\n    );\n\n    const onBlurHandler = useCallback(() => {\n        if (onBlur) {\n            onBlur(JSON.stringify(localValue.current));\n        }\n    }, [onBlur, localValue]);\n\n    const onKeyDownHandler = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n        if (event.code === 'Tab') {\n            forceToFocusNextElement(event, !event.shiftKey);\n        }\n    }, []);\n\n    const editableProps: TEditableProps = {\n        placeholder,\n        renderPlaceholder: RenderPlaceholder,\n        readOnly,\n        onBlur: onBlurHandler,\n        className: merge([padding, customClass]),\n        style,\n        onKeyDown: onKeyDownHandler,\n        scrollSelectionIntoView: noop,\n    };\n\n    return (\n        <RichTextEditorProvider styles={config.styles()} position={position} border={border} editorId={editorId}>\n            <Plate id={editorId} onChange={onChange} plugins={config.plugins} initialValue={memoizedValue}>\n                <PlateContent {...editableProps} />\n                {!editableProps.readOnly && config.toolbar(toolbarWidth)}\n                {config.inline()}\n                {updateValueOnChange && <ContentReplacement value={parseRawValue({ editorId, raw: value, plugins })} />}\n                {position === Position.FLOATING && (\n                    <BlurObserver hideExternalFloatingModals={hideExternalFloatingModals} />\n                )}\n            </Plate>\n        </RichTextEditorProvider>\n    );\n};\nRichTextEditor.displayName = 'FondueRichTextEditor';\n"],"names":["RichTextEditor","id","value","placeholder","readOnly","onTextChange","onBlur","padding","PaddingSizes","position","Position","plugins","defaultPlugins","updateValueOnChange","onValueChanged","border","toolbarWidth","hideExternalFloatingModals","editorId","useMemoizedId","localValue","onChange","memoizedValue","config","useEditorState","breakAfterPlugin","plugin","KEY_ELEMENT_BREAK_AFTER_COLUMN","customClass","_a","columns","_b","columnGap","_c","GAP_DEFAULT","style","useMemo","onBlurHandler","useCallback","onKeyDownHandler","event","forceToFocusNextElement","editableProps","RenderPlaceholder","merge","noop","RichTextEditorProvider","jsxs","Plate","jsx","PlateContent","ContentReplacement","parseRawValue","BlurObserver"],"mappings":";;;;;;;;;;;;;;;;;AAqCO,MAAMA,IAAiB,CAAC;AAAA,EAC3B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAUC,IAAW;AAAA,EACrB,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAUC,EAAa;AAAA,EACvB,UAAAC,IAAWC,EAAS;AAAA,EACpB,SAAAC,IAAUC;AAAA,EACV,qBAAAC,IAAsB;AAAA,EACtB,gBAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAAC;AAAA,EACA,4BAAAC;AACJ,MAA2B;;AACjB,QAAAC,IAAWC,EAAclB,CAAE,GAC3B,EAAE,YAAAmB,GAAY,UAAAC,GAAU,eAAAC,GAAe,QAAAC,EAAA,IAAWC,EAAe;AAAA,IACnE,UAAAN;AAAA,IACA,cAAchB;AAAA,IACd,cAAAG;AAAA,IACA,SAAAM;AAAA,IACA,gBAAAG;AAAA,EAAA,CACH,GACKW,IAAmBd,EAAQ,QAAQ,KAAK,CAACe,MAAWA,EAAO,QAAQC,CAA8B,GACjGC,KAAcC,IAAAJ,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAI,EAA2B,aACzCC,IAAUF,IAAc,SAAOG,IAAAN,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAM,EAA2B,YAAW,GACrEC,MAAYC,IAAAR,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAQ,EAA2B,QAAOC,GAE9CC,IAAQC;AAAA,IACV,OAAO;AAAA,MACH,SAAAN;AAAA,MACA,WAAAE;AAAA,MACA,SAAS;AAAA,IAAA;AAAA,IAEb,CAACF,GAASE,CAAS;AAAA,EAAA,GAGjBK,IAAgBC,EAAY,MAAM;AACpC,IAAIhC,KACAA,EAAO,KAAK,UAAUc,EAAW,OAAO,CAAC;AAAA,EAC7C,GACD,CAACd,GAAQc,CAAU,CAAC,GAEjBmB,IAAmBD,EAAY,CAACE,MAAyC;AACvE,IAAAA,EAAM,SAAS,SACSC,EAAAD,GAAO,CAACA,EAAM,QAAQ;AAAA,EAEtD,GAAG,CAAE,CAAA,GAECE,IAAgC;AAAA,IAClC,aAAAvC;AAAA,IACA,mBAAmBwC;AAAA,IACnB,UAAAvC;AAAA,IACA,QAAQiC;AAAA,IACR,WAAWO,EAAM,CAACrC,GAASqB,CAAW,CAAC;AAAA,IACvC,OAAAO;AAAA,IACA,WAAWI;AAAA,IACX,yBAAyBM;AAAA,EAAA;AAG7B,2BACKC,GAAuB,EAAA,QAAQvB,EAAO,OAAO,GAAG,UAAAd,GAAoB,QAAAM,GAAgB,UAAAG,GACjF,UAAC,gBAAA6B,EAAAC,GAAA,EAAM,IAAI9B,GAAU,UAAAG,GAAoB,SAASE,EAAO,SAAS,cAAcD,GAC5E,UAAA;AAAA,IAAC,gBAAA2B,EAAAC,GAAA,EAAc,GAAGR,GAAe;AAAA,IAChC,CAACA,EAAc,YAAYnB,EAAO,QAAQP,CAAY;AAAA,IACtDO,EAAO,OAAO;AAAA,IACdV,KAAwB,gBAAAoC,EAAAE,GAAA,EAAmB,OAAOC,EAAc,EAAE,UAAAlC,GAAU,KAAKhB,GAAO,SAAAS,EAAQ,CAAC,EAAG,CAAA;AAAA,IACpGF,MAAaC,EAAS,YACnB,gBAAAuC,EAACI,KAAa,4BAAApC,GAAwD;AAAA,EAAA,EAE9E,CAAA,EACJ,CAAA;AAER;AACAjB,EAAe,cAAc;"}

package/dist/components/RichTextEditor/serializer/serializeToHtml.es.js

@@ -1,26 +1,33 @@
-import { parseRawValue as a } from "../utils/parseRawValue.es.js";
-import { serializeNodeToHtmlRecursive as f } from "./utils/serializeNodeToHtmlRecursive.es.js";
-import { defaultPlugins as i } from "../Plugins/defaultPlugins.es.js";
-import { mapMentionable as d } from "../Plugins/MentionPlugin/helpers/mapMentionable.es.js";
-import { defaultStyles as u } from "../utils/defaultStyles.es.js";
-const R = (t, e = i, o = 1, r = "normal") => {
-  const l = a({ raw: t, plugins: e }), s = e.getStyles;
-  return c(l, { columns: o, columnGap: r, styles: s });
-}, T = async (t, e = i, o = 1, r = "normal") => {
-  const l = a({ raw: t, plugins: e }), s = e.getStyles;
-  return Promise.resolve(c(l, { columns: o, columnGap: r, styles: s }));
-}, c = (t, { mentionable: e, columns: o = 1, columnGap: r = "normal", styles: l = u } = {}) => {
-  const s = e ? d(e) : /* @__PURE__ */ new Map();
-  let n = "";
-  for (let m = 0, p = t.length; m < p; m++)
-    n += f(t[m], l, {
-      mappedMentionable: s
+import { parseRawValue as i } from "../utils/parseRawValue.es.js";
+import { serializeNodeToHtmlRecursive as d } from "./utils/serializeNodeToHtmlRecursive.es.js";
+import { defaultPlugins as c } from "../Plugins/defaultPlugins.es.js";
+import { mapMentionable as u } from "../Plugins/MentionPlugin/helpers/mapMentionable.es.js";
+import { defaultStyles as $ } from "../utils/defaultStyles.es.js";
+const T = (o, e = c, l = 1, r = "normal", t = "") => {
+  const s = i({ raw: o, plugins: e }), n = e.getStyles;
+  return y(s, { columns: l, columnGap: r, styles: n, customClass: t });
+}, g = async (o, e = c, l = 1, r = "normal", t = "") => {
+  const s = i({ raw: o, plugins: e }), n = e.getStyles;
+  return Promise.resolve(y(s, { columns: l, columnGap: r, styles: n, customClass: t }));
+}, y = (o, {
+  mentionable: e,
+  columns: l = 1,
+  columnGap: r = "normal",
+  customClass: t = "",
+  styles: s = $
+} = {}) => {
+  const n = e ? u(e) : /* @__PURE__ */ new Map();
+  let m = "";
+  for (let a = 0, f = o.length; a < f; a++)
+    m += d(o[a], s, {
+      mappedMentionable: n
     });
-  return o > 1 ? `<div style="columns:${o}; column-gap:${r};">${n}</div>` : n;
+  const p = `${t ? "" : `columns:${l};`} column-gap:${r};`;
+  return l > 1 || t ? `<div style="${p}" class="${t}">${m}</div>` : m;
 };
 export {
-  c as serializeNodesToHtml,
-  R as serializeRawToHtml,
-  T as serializeRawToHtmlAsync
+  y as serializeNodesToHtml,
+  T as serializeRawToHtml,
+  g as serializeRawToHtmlAsync
 };
 //# sourceMappingURL=serializeToHtml.es.js.map

package/dist/components/RichTextEditor/serializer/serializeToHtml.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"serializeToHtml.es.js","sources":["../../../../src/components/RichTextEditor/serializer/serializeToHtml.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type TDescendant } from '@udecode/slate';\nimport { type CSSProperties } from 'react';\n\nimport { type PluginComposer, defaultPlugins } from '../Plugins';\nimport { type MentionableItems } from '../Plugins/MentionPlugin';\nimport { mapMentionable } from '../Plugins/MentionPlugin/helpers';\nimport { defaultStyles } from '../utils';\nimport { parseRawValue } from '../utils/parseRawValue';\n\nimport { type CSSPropertiesHover } from './types';\nimport { serializeNodeToHtmlRecursive } from './utils/serializeNodeToHtmlRecursive';\n\nexport const serializeRawToHtml = (\n    raw: string,\n    plugins: PluginComposer = defaultPlugins,\n    columns: SerializeNodesToHtmlOptions['columns'] = 1,\n    columnGap: SerializeNodesToHtmlOptions['columnGap'] = 'normal',\n): string => {\n    const nodes = parseRawValue({ raw, plugins });\n    const styles = plugins.getStyles;\n    return serializeNodesToHtml(nodes, { columns, columnGap, styles });\n};\nexport const serializeRawToHtmlAsync = async (\n    raw: string,\n    plugins: PluginComposer = defaultPlugins,\n    columns: SerializeNodesToHtmlOptions['columns'] = 1,\n    columnGap: SerializeNodesToHtmlOptions['columnGap'] = 'normal',\n): Promise<string> => {\n    const nodes = parseRawValue({ raw, plugins });\n    const styles = plugins.getStyles;\n    return Promise.resolve(serializeNodesToHtml(nodes, { columns, columnGap, styles }));\n};\n\nexport type SerializeNodesToHtmlOptions = {\n    styles?: Record<string, CSSPropertiesHover>;\n    mentionable?: MentionableItems;\n    columns?: number;\n    columnGap?: CSSProperties['columnGap'];\n};\n\nexport const serializeNodesToHtml = (\n    nodes: TDescendant[],\n    { mentionable, columns = 1, columnGap = 'normal', styles = defaultStyles }: SerializeNodesToHtmlOptions = {},\n): string => {\n    const mappedMentionable = mentionable ? mapMentionable(mentionable) : new Map();\n\n    let html = '';\n    for (let i = 0, len = nodes.length; i < len; i++) {\n        html += serializeNodeToHtmlRecursive(nodes[i], styles, {\n            mappedMentionable,\n        });\n    }\n\n    if (columns > 1) {\n        return `<div style=\"columns:${columns}; column-gap:${columnGap};\">${html}</div>`;\n    }\n\n    return html;\n};\n"],"names":["serializeRawToHtml","raw","plugins","defaultPlugins","columns","columnGap","nodes","parseRawValue","styles","serializeNodesToHtml","serializeRawToHtmlAsync","mentionable","defaultStyles","mappedMentionable","mapMentionable","html","i","len","serializeNodeToHtmlRecursive"],"mappings":";;;;;AAca,MAAAA,IAAqB,CAC9BC,GACAC,IAA0BC,GAC1BC,IAAkD,GAClDC,IAAsD,aAC7C;AACT,QAAMC,IAAQC,EAAc,EAAE,KAAAN,GAAK,SAAAC,EAAS,CAAA,GACtCM,IAASN,EAAQ;AACvB,SAAOO,EAAqBH,GAAO,EAAE,SAAAF,GAAS,WAAAC,GAAW,QAAAG,GAAQ;AACrE,GACaE,IAA0B,OACnCT,GACAC,IAA0BC,GAC1BC,IAAkD,GAClDC,IAAsD,aACpC;AAClB,QAAMC,IAAQC,EAAc,EAAE,KAAAN,GAAK,SAAAC,EAAS,CAAA,GACtCM,IAASN,EAAQ;AAChB,SAAA,QAAQ,QAAQO,EAAqBH,GAAO,EAAE,SAAAF,GAAS,WAAAC,GAAW,QAAAG,EAAQ,CAAA,CAAC;AACtF,GASaC,IAAuB,CAChCH,GACA,EAAE,aAAAK,GAAa,SAAAP,IAAU,GAAG,WAAAC,IAAY,UAAU,QAAAG,IAASI,EAAc,IAAiC,CAAA,MACjG;AACT,QAAMC,IAAoBF,IAAcG,EAAeH,CAAW,wBAAQ;AAE1E,MAAII,IAAO;AACX,WAASC,IAAI,GAAGC,IAAMX,EAAM,QAAQU,IAAIC,GAAKD;AACzC,IAAAD,KAAQG,EAA6BZ,EAAMU,CAAC,GAAGR,GAAQ;AAAA,MACnD,mBAAAK;AAAA,IAAA,CACH;AAGL,SAAIT,IAAU,IACH,uBAAuBA,CAAO,gBAAgBC,CAAS,MAAMU,CAAI,WAGrEA;AACX;"}
+{"version":3,"file":"serializeToHtml.es.js","sources":["../../../../src/components/RichTextEditor/serializer/serializeToHtml.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type TDescendant } from '@udecode/slate';\nimport { type CSSProperties } from 'react';\n\nimport { type PluginComposer, defaultPlugins } from '../Plugins';\nimport { type MentionableItems } from '../Plugins/MentionPlugin';\nimport { mapMentionable } from '../Plugins/MentionPlugin/helpers';\nimport { defaultStyles } from '../utils';\nimport { parseRawValue } from '../utils/parseRawValue';\n\nimport { type CSSPropertiesHover } from './types';\nimport { serializeNodeToHtmlRecursive } from './utils/serializeNodeToHtmlRecursive';\n\nexport const serializeRawToHtml = (\n    raw: string,\n    plugins: PluginComposer = defaultPlugins,\n    columns: SerializeNodesToHtmlOptions['columns'] = 1,\n    columnGap: SerializeNodesToHtmlOptions['columnGap'] = 'normal',\n    customClass = '',\n): string => {\n    const nodes = parseRawValue({ raw, plugins });\n    const styles = plugins.getStyles;\n    return serializeNodesToHtml(nodes, { columns, columnGap, styles, customClass });\n};\nexport const serializeRawToHtmlAsync = async (\n    raw: string,\n    plugins: PluginComposer = defaultPlugins,\n    columns: SerializeNodesToHtmlOptions['columns'] = 1,\n    columnGap: SerializeNodesToHtmlOptions['columnGap'] = 'normal',\n    customClass = '',\n): Promise<string> => {\n    const nodes = parseRawValue({ raw, plugins });\n    const styles = plugins.getStyles;\n    return Promise.resolve(serializeNodesToHtml(nodes, { columns, columnGap, styles, customClass }));\n};\n\nexport type SerializeNodesToHtmlOptions = {\n    styles?: Record<string, CSSPropertiesHover>;\n    mentionable?: MentionableItems;\n    columns?: number;\n    columnGap?: CSSProperties['columnGap'];\n    customClass?: string;\n};\n\nexport const serializeNodesToHtml = (\n    nodes: TDescendant[],\n    {\n        mentionable,\n        columns = 1,\n        columnGap = 'normal',\n        customClass = '',\n        styles = defaultStyles,\n    }: SerializeNodesToHtmlOptions = {},\n): string => {\n    const mappedMentionable = mentionable ? mapMentionable(mentionable) : new Map();\n\n    let html = '';\n    for (let i = 0, len = nodes.length; i < len; i++) {\n        html += serializeNodeToHtmlRecursive(nodes[i], styles, {\n            mappedMentionable,\n        });\n    }\n\n    const columnsStyle = customClass ? '' : `columns:${columns};`;\n    const style = `${columnsStyle} column-gap:${columnGap};`;\n\n    if (columns > 1 || customClass) {\n        return `<div style=\"${style}\" class=\"${customClass}\">${html}</div>`;\n    }\n\n    return html;\n};\n"],"names":["serializeRawToHtml","raw","plugins","defaultPlugins","columns","columnGap","customClass","nodes","parseRawValue","styles","serializeNodesToHtml","serializeRawToHtmlAsync","mentionable","defaultStyles","mappedMentionable","mapMentionable","html","i","len","serializeNodeToHtmlRecursive","style"],"mappings":";;;;;AAca,MAAAA,IAAqB,CAC9BC,GACAC,IAA0BC,GAC1BC,IAAkD,GAClDC,IAAsD,UACtDC,IAAc,OACL;AACT,QAAMC,IAAQC,EAAc,EAAE,KAAAP,GAAK,SAAAC,EAAS,CAAA,GACtCO,IAASP,EAAQ;AACvB,SAAOQ,EAAqBH,GAAO,EAAE,SAAAH,GAAS,WAAAC,GAAW,QAAAI,GAAQ,aAAAH,GAAa;AAClF,GACaK,IAA0B,OACnCV,GACAC,IAA0BC,GAC1BC,IAAkD,GAClDC,IAAsD,UACtDC,IAAc,OACI;AAClB,QAAMC,IAAQC,EAAc,EAAE,KAAAP,GAAK,SAAAC,EAAS,CAAA,GACtCO,IAASP,EAAQ;AAChB,SAAA,QAAQ,QAAQQ,EAAqBH,GAAO,EAAE,SAAAH,GAAS,WAAAC,GAAW,QAAAI,GAAQ,aAAAH,EAAa,CAAA,CAAC;AACnG,GAUaI,IAAuB,CAChCH,GACA;AAAA,EACI,aAAAK;AAAA,EACA,SAAAR,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,QAAAG,IAASI;AACb,IAAiC,OACxB;AACT,QAAMC,IAAoBF,IAAcG,EAAeH,CAAW,wBAAQ;AAE1E,MAAII,IAAO;AACX,WAASC,IAAI,GAAGC,IAAMX,EAAM,QAAQU,IAAIC,GAAKD;AACzC,IAAAD,KAAQG,EAA6BZ,EAAMU,CAAC,GAAGR,GAAQ;AAAA,MACnD,mBAAAK;AAAA,IAAA,CACH;AAIL,QAAMM,IAAQ,GADOd,IAAc,KAAK,WAAWF,CAAO,GAC7B,eAAeC,CAAS;AAEjD,SAAAD,IAAU,KAAKE,IACR,eAAec,CAAK,YAAYd,CAAW,KAAKU,CAAI,WAGxDA;AACX;"}