@frontify/fondue 12.0.0-beta.12 → 12.0.0-beta.14

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

@@ -1,92 +1,70 @@
-import n, { useEffect as L, useCallback as T } from "react";
-import { Plate as _ } from "@udecode/plate";
-import { useMemoizedId as v } from "../../hooks/useMemoizedId.es.js";
-import { debounce as C } from "../../utilities/debounce.es.js";
-import { Toolbar as D } from "./components/Toolbar/Toolbar.es.js";
-import { RichTextEditorProvider as I } from "./context/RichTextEditorContext.es.js";
-import { useEditorState as V } from "./hooks/useEditorState.es.js";
-import { PaddingSizes as w } from "./types.es.js";
-import { defaultActions as x } from "./utils/actions.es.js";
-import "slate";
-import { ON_SAVE_DELAY_IN_MS as G } from "./utils/constants.es.js";
-import { defaultDesignTokens as s } from "./utils/defaultDesignTokens.es.js";
-import { parseRawValue as M } from "./utils/parseRawValue.es.js";
-import { TextStyles as d } from "./Plugins/TextStylePlugin/TextStyles/textStyles.es.js";
-import "./Plugins/TextStylePlugin/TextStyles/Custom1Plugin/createCustom1Plugin.es.js";
-import "./Plugins/TextStylePlugin/TextStyles/Custom2Plugin/createCustom2Plugin.es.js";
-import "./Plugins/TextStylePlugin/TextStyles/Custom3Plugin/createCustom3Plugin.es.js";
-import "./Plugins/TextStylePlugin/TextStyles/Heading1Plugin/createHeading1Plugin.es.js";
-import "./Plugins/TextStylePlugin/TextStyles/Heading2Plugin/createHeading2Plugin.es.js";
-import "./Plugins/TextStylePlugin/TextStyles/Heading3Plugin/createHeading3Plugin.es.js";
-import "./Plugins/TextStylePlugin/TextStyles/Heading4Plugin/createHeading4Plugin.es.js";
-import "./Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
+import r from "react";
+import { Plate as v } from "@udecode/plate";
+import { useMemoizedId as y } from "../../hooks/useMemoizedId.es.js";
+import { Toolbar as A } from "./components/Toolbar/Toolbar.es.js";
+import { RichTextEditorProvider as N } from "./context/RichTextEditorContext.es.js";
+import { useEditorState as R } from "./hooks/useEditorState.es.js";
+import { PaddingSizes as S } from "./types.es.js";
+import { defaultActions as w } from "./utils/actions.es.js";
+import { defaultDesignTokens as C } from "./utils/defaultDesignTokens.es.js";
+import { parseRawValue as L } from "./utils/parseRawValue.es.js";
 import "./EditorPositioningWrapper/index.es.js";
-import { getEditorConfig as z } from "./utils/editorConfig.es.js";
-import { defaultPlugins as H } from "./Plugins/index.es.js";
-import { forceTabOutOfActiveElement as J } from "./helpers/forceTabOutOfActiveElement.es.js";
-import { GeneratePlugins as Y } from "./Plugins/GeneratePlugins.es.js";
-import { Position as j } from "./EditorPositioningWrapper/types.es.js";
-const F = {
+import { getEditorConfig as x } from "./utils/editorConfig.es.js";
+import { defaultPlugins as D } from "./Plugins/index.es.js";
+import { forceTabOutOfActiveElement as I } from "./helpers/forceTabOutOfActiveElement.es.js";
+import { Position as V } from "./EditorPositioningWrapper/types.es.js";
+import { GeneratePlugins as z } from "./Plugins/GeneratePlugins.es.js";
+const G = {
   position: "relative",
   height: "0"
-}, At = ({
-  id: u,
-  value: E,
-  placeholder: g = "",
-  readonly: P = !1,
-  clear: A = !1,
-  designTokens: o = s,
-  actions: f = x,
-  onTextChange: a,
-  onBlur: c,
-  padding: O = w.None,
-  position: b = j.FLOATING,
-  plugins: N = H
+}, $ = ({
+  id: l,
+  value: s,
+  placeholder: f = "",
+  readonly: c = !1,
+  designTokens: d = C,
+  actions: n = w,
+  onTextChange: p,
+  onBlur: m,
+  padding: u = S.None,
+  position: g = V.FLOATING,
+  plugins: E = D
 }) => {
-  const e = v(u), { localValue: l } = V(e, A), S = {
-    placeholder: g,
-    renderPlaceholder: ({ children: t, attributes: m }) => {
-      const R = {
-        ...m,
+  const e = y(l), { localValue: P, onChange: T } = R(p), h = {
+    placeholder: f,
+    renderPlaceholder: ({ children: i, attributes: a }) => {
+      const b = {
+        ...a,
         style: {
-          ...m.style,
-          ...F
+          ...a.style,
+          ...G
         }
       };
-      return /* @__PURE__ */ n.createElement("span", {
-        ...R
-      }, t);
+      return /* @__PURE__ */ r.createElement("span", {
+        ...b
+      }, i);
     },
-    readOnly: P,
-    onBlur: () => c && c(JSON.stringify(l.current)),
-    className: O,
-    onKeyDown: (t) => {
-      t.code === "Tab" && J();
+    readOnly: c,
+    onBlur: () => m && m(JSON.stringify(P.current)),
+    className: u,
+    onKeyDown: (i) => {
+      i.code === "Tab" && I();
     }
-  };
-  L(() => {
-    for (const t of Object.values(d).filter((m) => m !== d.ELEMENT_PARAGRAPH))
-      o[t] || (o[t] = s[t]);
-  }, [o]);
-  const p = C((t) => {
-    a && a(JSON.stringify(t));
-  }, G), h = T((t) => {
-    p(t), l.current = t;
-  }, [p, l]), r = Y(e, N), i = !!r && f.length === 0, y = i ? r.create() : z();
-  return /* @__PURE__ */ n.createElement(I, {
-    value: { designTokens: o, position: b }
-  }, /* @__PURE__ */ n.createElement(_, {
+  }, o = z(e, E), t = !!o && n.length === 0, O = t ? o.create() : x();
+  return /* @__PURE__ */ r.createElement(N, {
+    value: { designTokens: d, position: g }
+  }, /* @__PURE__ */ r.createElement(v, {
     id: e,
-    initialValue: M(E),
-    onChange: h,
-    editableProps: S,
-    plugins: y
-  }, i && r.toolbar(), i && r.inline(), !i && /* @__PURE__ */ n.createElement(D, {
+    initialValue: L({ editorId: e, raw: s }),
+    onChange: T,
+    editableProps: h,
+    plugins: O
+  }, t && o.toolbar(), t && o.inline(), !t && /* @__PURE__ */ r.createElement(A, {
     editorId: e,
-    actions: f
+    actions: n
   })));
 };
 export {
-  At 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 React, { FC, useCallback, useEffect } from 'react';\nimport { Plate, TNode } from '@udecode/plate';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { debounce } from '@utilities/debounce';\nimport { EditableProps, RenderPlaceholderProps } from 'slate-react/dist/components/editable';\nimport { Toolbar } from './components/Toolbar/Toolbar';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { useEditorState } from './hooks';\nimport { DesignTokens, PaddingSizes } from './types';\nimport { EditorActions, defaultActions } from './utils/actions';\nimport { ON_SAVE_DELAY_IN_MS } from './utils';\nimport { defaultDesignTokens } from './utils/defaultDesignTokens';\nimport { parseRawValue } from './utils/parseRawValue';\nimport { TextStyles } from './Plugins/TextStylePlugin/TextStyles';\nimport { Position } from './EditorPositioningWrapper';\nimport { getEditorConfig } from './utils/editorConfig';\nimport { GeneratePlugins, PluginComposer, defaultPlugins } from './Plugins';\nimport { forceTabOutOfActiveElement } from './helpers';\n\nconst PLACEHOLDER_STYLES: RenderPlaceholderProps['attributes']['style'] = {\n    position: 'relative',\n    height: '0',\n};\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    clear?: boolean;\n    designTokens?: DesignTokens;\n    actions?: EditorActions[][];\n    padding?: PaddingSizes;\n    position?: Position;\n    plugins?: PluginComposer;\n};\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n    id,\n    value: initialValue,\n    placeholder = '',\n    readonly = false,\n    clear = false,\n    designTokens = defaultDesignTokens,\n    actions = defaultActions,\n    onTextChange,\n    onBlur,\n    padding = PaddingSizes.None,\n    position = Position.FLOATING,\n    plugins = defaultPlugins,\n}) => {\n    const editorId = useMemoizedId(id);\n    const { localValue } = useEditorState(editorId, clear);\n\n    const editableProps: EditableProps = {\n        placeholder,\n        renderPlaceholder: ({ children, attributes }) => {\n            const mergedAttributes = {\n                ...attributes,\n                style: {\n                    ...attributes.style,\n                    ...PLACEHOLDER_STYLES,\n                },\n            };\n            return <span {...mergedAttributes}>{children}</span>;\n        },\n        readOnly: readonly,\n        onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n        className: padding,\n        onKeyDown: (event) => {\n            if (event.code === 'Tab') {\n                // Forcing a blur event because of accessibility\n                forceTabOutOfActiveElement();\n            }\n        },\n    };\n\n    useEffect(() => {\n        for (const element of Object.values(TextStyles).filter(\n            (textStyle) => textStyle !== TextStyles.ELEMENT_PARAGRAPH,\n        )) {\n            if (!designTokens[element]) {\n                designTokens[element] = defaultDesignTokens[element];\n            }\n        }\n    }, [designTokens]);\n\n    const debouncedOnChange = debounce((value: TNode[]) => {\n        onTextChange && onTextChange(JSON.stringify(value));\n    }, ON_SAVE_DELAY_IN_MS);\n\n    const onChange = useCallback(\n        (value) => {\n            debouncedOnChange(value);\n            localValue.current = value;\n        },\n        [debouncedOnChange, localValue],\n    );\n\n    const config = GeneratePlugins(editorId, plugins);\n    const isNew = !!config && actions.length === 0;\n    const editorConfig = isNew ? config.create() : getEditorConfig();\n\n    return (\n        <RichTextEditorProvider value={{ designTokens, position }}>\n            <Plate\n                id={editorId}\n                initialValue={parseRawValue(initialValue)}\n                onChange={onChange}\n                editableProps={editableProps}\n                plugins={editorConfig}\n            >\n                {isNew && config.toolbar()}\n                {isNew && config.inline()}\n                {!isNew && <Toolbar editorId={editorId} actions={actions} />}\n            </Plate>\n        </RichTextEditorProvider>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,IAAoE;AAAA,EACtE,UAAU;AAAA,EACV,QAAQ;AACZ,GAiBa,KAA0C,CAAC;AAAA,EACpD;AAAA,EACA,OAAO;AAAA,EACP,iBAAc;AAAA,EACd,cAAW;AAAA,EACX,WAAQ;AAAA,EACR,kBAAe;AAAA,EACf,aAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,aAAU,EAAa;AAAA,EACvB,cAAW,EAAS;AAAA,EACpB,aAAU;AAAA,MACR;AACI,QAAA,IAAW,EAAc,CAAE,GAC3B,EAAE,kBAAe,EAAe,GAAU,CAAK,GAE/C,IAA+B;AAAA,IACjC;AAAA,IACA,mBAAmB,CAAC,EAAE,aAAU,oBAAiB;AAC7C,YAAM,IAAmB;AAAA,QACrB,GAAG;AAAA,QACH,OAAO;AAAA,UACH,GAAG,EAAW;AAAA,UACd,GAAG;AAAA,QACP;AAAA,MAAA;AAEJ,aAAQ,kBAAA,cAAA,QAAA;AAAA,QAAM,GAAG;AAAA,MAAA,GAAmB,CAAS;AAAA,IACjD;AAAA,IACA,UAAU;AAAA,IACV,QAAQ,MAAM,KAAU,EAAO,KAAK,UAAU,EAAW,OAAO,CAAC;AAAA,IACjE,WAAW;AAAA,IACX,WAAW,CAAC,MAAU;AACd,MAAA,EAAM,SAAS,SAEY;IAEnC;AAAA,EAAA;AAGJ,IAAU,MAAM;AACD,eAAA,KAAW,OAAO,OAAO,CAAU,EAAE,OAC5C,CAAC,MAAc,MAAc,EAAW,iBAC5C;AACQ,MAAC,EAAa,MACd,GAAa,KAAW,EAAoB;AAAA,EAEpD,GACD,CAAC,CAAY,CAAC;AAEX,QAAA,IAAoB,EAAS,CAAC,MAAmB;AACnD,SAAgB,EAAa,KAAK,UAAU,CAAK,CAAC;AAAA,KACnD,CAAmB,GAEhB,IAAW,EACb,CAAC,MAAU;AACP,MAAkB,CAAK,GACvB,EAAW,UAAU;AAAA,EAAA,GAEzB,CAAC,GAAmB,CAAU,CAClC,GAEM,IAAS,EAAgB,GAAU,CAAO,GAC1C,IAAQ,CAAC,CAAC,KAAU,EAAQ,WAAW,GACvC,IAAe,IAAQ,EAAO,WAAW,EAAgB;AAE/D,SACK,kBAAA,cAAA,GAAA;AAAA,IAAuB,OAAO,EAAE,iBAAc,YAAS;AAAA,EAAA,GACnD,kBAAA,cAAA,GAAA;AAAA,IACG,IAAI;AAAA,IACJ,cAAc,EAAc,CAAY;AAAA,IACxC;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAER,GAAA,KAAS,EAAO,QAAA,GAChB,KAAS,EAAO,OAAO,GACvB,CAAC,KAAU,kBAAA,cAAA,GAAA;AAAA,IAAQ;AAAA,IAAoB;AAAA,EAAkB,CAAA,CAC9D,CACJ;AAER;"}
+{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC } from 'react';\nimport { Plate } from '@udecode/plate';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { EditableProps, RenderPlaceholderProps } from 'slate-react/dist/components/editable';\nimport { Toolbar } from './components/Toolbar/Toolbar';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { useEditorState } from './hooks';\nimport { DesignTokens, PaddingSizes } from './types';\nimport { EditorActions, defaultActions } from './utils/actions';\nimport { defaultDesignTokens } from './utils/defaultDesignTokens';\nimport { parseRawValue } from './utils/parseRawValue';\nimport { Position } from './EditorPositioningWrapper';\nimport { getEditorConfig } from './utils/editorConfig';\nimport { GeneratePlugins, PluginComposer, defaultPlugins } from './Plugins';\nimport { forceTabOutOfActiveElement } from './helpers';\n\nconst PLACEHOLDER_STYLES: RenderPlaceholderProps['attributes']['style'] = {\n    position: 'relative',\n    height: '0',\n};\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    designTokens?: DesignTokens;\n    actions?: EditorActions[][];\n    padding?: PaddingSizes;\n    position?: Position;\n    plugins?: PluginComposer;\n};\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n    id,\n    value: initialValue,\n    placeholder = '',\n    readonly = false,\n    designTokens = defaultDesignTokens,\n    actions = defaultActions,\n    onTextChange,\n    onBlur,\n    padding = PaddingSizes.None,\n    position = Position.FLOATING,\n    plugins = defaultPlugins,\n}) => {\n    const editorId = useMemoizedId(id);\n    const { localValue, onChange } = useEditorState(onTextChange);\n\n    const editableProps: EditableProps = {\n        placeholder,\n        renderPlaceholder: ({ children, attributes }) => {\n            const mergedAttributes = {\n                ...attributes,\n                style: {\n                    ...attributes.style,\n                    ...PLACEHOLDER_STYLES,\n                },\n            };\n            return <span {...mergedAttributes}>{children}</span>;\n        },\n        readOnly: readonly,\n        onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n        className: padding,\n        onKeyDown: (event) => {\n            if (event.code === 'Tab') {\n                // Forcing a blur event because of accessibility\n                forceTabOutOfActiveElement();\n            }\n        },\n    };\n\n    const config = GeneratePlugins(editorId, plugins);\n    const isNew = !!config && actions.length === 0;\n    const editorConfig = isNew ? config.create() : getEditorConfig();\n\n    return (\n        <RichTextEditorProvider value={{ designTokens, position }}>\n            <Plate\n                id={editorId}\n                initialValue={parseRawValue({ editorId, raw: initialValue })}\n                onChange={onChange}\n                editableProps={editableProps}\n                plugins={editorConfig}\n            >\n                {isNew && config.toolbar()}\n                {isNew && config.inline()}\n                {!isNew && <Toolbar editorId={editorId} actions={actions} />}\n            </Plate>\n        </RichTextEditorProvider>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,IAAoE;AAAA,EACtE,UAAU;AAAA,EACV,QAAQ;AACZ,GAgBa,IAA0C,CAAC;AAAA,EACpD;AAAA,EACA,OAAO;AAAA,EACP,iBAAc;AAAA,EACd,cAAW;AAAA,EACX,kBAAe;AAAA,EACf,aAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,aAAU,EAAa;AAAA,EACvB,cAAW,EAAS;AAAA,EACpB,aAAU;AAAA,MACR;AACI,QAAA,IAAW,EAAc,CAAE,GAC3B,EAAE,eAAY,gBAAa,EAAe,CAAY,GAEtD,IAA+B;AAAA,IACjC;AAAA,IACA,mBAAmB,CAAC,EAAE,aAAU,oBAAiB;AAC7C,YAAM,IAAmB;AAAA,QACrB,GAAG;AAAA,QACH,OAAO;AAAA,UACH,GAAG,EAAW;AAAA,UACd,GAAG;AAAA,QACP;AAAA,MAAA;AAEJ,aAAQ,kBAAA,cAAA,QAAA;AAAA,QAAM,GAAG;AAAA,MAAA,GAAmB,CAAS;AAAA,IACjD;AAAA,IACA,UAAU;AAAA,IACV,QAAQ,MAAM,KAAU,EAAO,KAAK,UAAU,EAAW,OAAO,CAAC;AAAA,IACjE,WAAW;AAAA,IACX,WAAW,CAAC,MAAU;AACd,MAAA,EAAM,SAAS,SAEY;IAEnC;AAAA,EAAA,GAGE,IAAS,EAAgB,GAAU,CAAO,GAC1C,IAAQ,CAAC,CAAC,KAAU,EAAQ,WAAW,GACvC,IAAe,IAAQ,EAAO,WAAW,EAAgB;AAE/D,SACK,kBAAA,cAAA,GAAA;AAAA,IAAuB,OAAO,EAAE,iBAAc,YAAS;AAAA,EAAA,GACnD,kBAAA,cAAA,GAAA;AAAA,IACG,IAAI;AAAA,IACJ,cAAc,EAAc,EAAE,aAAU,KAAK,GAAc;AAAA,IAC3D;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAER,GAAA,KAAS,EAAO,QAAA,GAChB,KAAS,EAAO,OAAO,GACvB,CAAC,KAAU,kBAAA,cAAA,GAAA;AAAA,IAAQ;AAAA,IAAoB;AAAA,EAAkB,CAAA,CAC9D,CACJ;AAER;"}

package/dist/components/RichTextEditor/Toolbar/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ToolbarProps } from './types';
-export declare const Toolbar: ({ buttons, editor, editorId }: ToolbarProps) => JSX.Element;
+export declare const Toolbar: ({ buttons, editorId }: ToolbarProps) => JSX.Element;

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

@@ -1,28 +1,29 @@
+import { usePlateEditorRef as w } from "@udecode/plate";
 import t from "react";
-import { useEditorResizeContext as w } from "../context/EditorResizeContext.es.js";
-import { useRichTextEditorContext as x } from "../context/RichTextEditorContext.es.js";
-import { EditorPositioningWrapper as E } from "../EditorPositioningWrapper/index.es.js";
-import { ButtonGroupWrapper as W } from "../Plugins/helper.es.js";
-import { getButtonGroupWidths as G, getButtonGroupsPerRow as b } from "./utils.es.js";
-const y = ({ buttons: n, editor: p, editorId: m }) => {
-  const { editorWidth: o } = w(), { position: s } = x(), a = G(n), e = b(o || 0, a), u = E[s];
+import { useEditorResizeContext as x } from "../context/EditorResizeContext.es.js";
+import { useRichTextEditorContext as E } from "../context/RichTextEditorContext.es.js";
+import { EditorPositioningWrapper as W } from "../EditorPositioningWrapper/index.es.js";
+import { ButtonGroupWrapper as G } from "../Plugins/helper.es.js";
+import { getButtonGroupWidths as R, getButtonGroupsPerRow as b } from "./utils.es.js";
+const C = ({ buttons: p, editorId: o }) => {
+  const m = w(o), { editorWidth: e } = x(), { position: s } = E(), a = R(p), r = b(e || 0, a), u = W[s];
   return /* @__PURE__ */ t.createElement(u.ToolbarWrapper, {
-    editorWidth: o,
-    toolbarButtonGroups: e
-  }, e.map((d, c) => /* @__PURE__ */ t.createElement("div", {
+    editorWidth: e,
+    toolbarButtonGroups: r
+  }, r.map((d, c) => /* @__PURE__ */ t.createElement("div", {
     className: "tw-divide-x tw-divide-line tw-flex tw-w-full tw-flex-wrap",
     key: c
-  }, d.map(({ group: l, index: r }) => /* @__PURE__ */ t.createElement(W, {
-    index: r,
-    key: r
-  }, l.map((i, f) => /* @__PURE__ */ t.createElement(i.button, {
-    editor: p,
-    editorId: m,
-    id: i.id,
+  }, d.map(({ group: l, index: i }) => /* @__PURE__ */ t.createElement(G, {
+    index: i,
+    key: i
+  }, l.map((n, f) => /* @__PURE__ */ t.createElement(n.button, {
+    editor: m,
+    editorId: o,
+    id: n.id,
     key: f.toString()
   })))))));
 };
 export {
-  y as Toolbar
+  C as Toolbar
 };
 //# sourceMappingURL=index.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../../src/components/RichTextEditor/Toolbar/index.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { useEditorResizeContext } from '../context/EditorResizeContext';\nimport { useRichTextEditorContext } from '../context/RichTextEditorContext';\nimport { EditorPositioningWrapper } from '../EditorPositioningWrapper';\nimport { ButtonGroupWrapper } from '../Plugins/helper';\nimport { ToolbarProps } from './types';\nimport { getButtonGroupWidths, getButtonGroupsPerRow } from './utils';\n\nexport const Toolbar = ({ buttons, editor, editorId }: ToolbarProps) => {\n    const { editorWidth } = useEditorResizeContext();\n    const { position } = useRichTextEditorContext();\n\n    const buttonGroupWidths = getButtonGroupWidths(buttons);\n    const buttonGroupsPerRow = getButtonGroupsPerRow(editorWidth || 0, buttonGroupWidths);\n\n    const PositioningWrapper = EditorPositioningWrapper[position];\n\n    return (\n        <PositioningWrapper.ToolbarWrapper editorWidth={editorWidth} toolbarButtonGroups={buttonGroupsPerRow}>\n            {buttonGroupsPerRow.map((row, index) => (\n                <div className=\"tw-divide-x tw-divide-line tw-flex tw-w-full tw-flex-wrap\" key={index}>\n                    {row.map(({ group, index }) => (\n                        <ButtonGroupWrapper index={index} key={index}>\n                            {group.map((ToolbarButton, idx) => (\n                                <ToolbarButton.button\n                                    editor={editor}\n                                    editorId={editorId}\n                                    id={ToolbarButton.id}\n                                    key={idx.toString()}\n                                />\n                            ))}\n                        </ButtonGroupWrapper>\n                    ))}\n                </div>\n            ))}\n        </PositioningWrapper.ToolbarWrapper>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,IAAU,CAAC,EAAE,YAAS,WAAQ,kBAA6B;AAC9D,QAAA,EAAE,mBAAgB,KAClB,EAAE,gBAAa,KAEf,IAAoB,EAAqB,CAAO,GAChD,IAAqB,EAAsB,KAAe,GAAG,CAAiB,GAE9E,IAAqB,EAAyB;AAGhD,SAAA,kBAAA,cAAC,EAAmB,gBAAnB;AAAA,IAAkC;AAAA,IAA0B,qBAAqB;AAAA,EAAA,GAC7E,EAAmB,IAAI,CAAC,GAAK,MACzB,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,IAA4D,KAAK;AAAA,EAAA,GAC3E,EAAI,IAAI,CAAC,EAAE,UAAO,eACd,kBAAA,cAAA,GAAA;AAAA,IAAmB,OAAO;AAAA,IAAO,KAAK;AAAA,EAAA,GAClC,EAAM,IAAI,CAAC,GAAe,MACvB,kBAAA,cAAC,EAAc,QAAd;AAAA,IACG;AAAA,IACA;AAAA,IACA,IAAI,EAAc;AAAA,IAClB,KAAK,EAAI,SAAS;AAAA,EAAA,CACtB,CACH,CACL,CACH,CACL,CACH,CACL;AAER;"}
+{"version":3,"file":"index.es.js","sources":["../../../../src/components/RichTextEditor/Toolbar/index.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { usePlateEditorRef } from '@udecode/plate';\nimport React from 'react';\nimport { useEditorResizeContext } from '../context/EditorResizeContext';\nimport { useRichTextEditorContext } from '../context/RichTextEditorContext';\nimport { EditorPositioningWrapper } from '../EditorPositioningWrapper';\nimport { ButtonGroupWrapper } from '../Plugins/helper';\nimport { ToolbarProps } from './types';\nimport { getButtonGroupWidths, getButtonGroupsPerRow } from './utils';\n\nexport const Toolbar = ({ buttons, editorId }: ToolbarProps) => {\n    const editor = usePlateEditorRef(editorId)!;\n    const { editorWidth } = useEditorResizeContext();\n    const { position } = useRichTextEditorContext();\n\n    const buttonGroupWidths = getButtonGroupWidths(buttons);\n    const buttonGroupsPerRow = getButtonGroupsPerRow(editorWidth || 0, buttonGroupWidths);\n\n    const PositioningWrapper = EditorPositioningWrapper[position];\n\n    return (\n        <PositioningWrapper.ToolbarWrapper editorWidth={editorWidth} toolbarButtonGroups={buttonGroupsPerRow}>\n            {buttonGroupsPerRow.map((row, index) => (\n                <div className=\"tw-divide-x tw-divide-line tw-flex tw-w-full tw-flex-wrap\" key={index}>\n                    {row.map(({ group, index }) => (\n                        <ButtonGroupWrapper index={index} key={index}>\n                            {group.map((ToolbarButton, idx) => (\n                                <ToolbarButton.button\n                                    editor={editor}\n                                    editorId={editorId}\n                                    id={ToolbarButton.id}\n                                    key={idx.toString()}\n                                />\n                            ))}\n                        </ButtonGroupWrapper>\n                    ))}\n                </div>\n            ))}\n        </PositioningWrapper.ToolbarWrapper>\n    );\n};\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,IAAU,CAAC,EAAE,YAAS,kBAA6B;AACtD,QAAA,IAAS,EAAkB,CAAQ,GACnC,EAAE,mBAAgB,KAClB,EAAE,gBAAa,KAEf,IAAoB,EAAqB,CAAO,GAChD,IAAqB,EAAsB,KAAe,GAAG,CAAiB,GAE9E,IAAqB,EAAyB;AAGhD,SAAA,kBAAA,cAAC,EAAmB,gBAAnB;AAAA,IAAkC;AAAA,IAA0B,qBAAqB;AAAA,EAAA,GAC7E,EAAmB,IAAI,CAAC,GAAK,MACzB,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,IAA4D,KAAK;AAAA,EAAA,GAC3E,EAAI,IAAI,CAAC,EAAE,UAAO,eACd,kBAAA,cAAA,GAAA;AAAA,IAAmB,OAAO;AAAA,IAAO,KAAK;AAAA,EAAA,GAClC,EAAM,IAAI,CAAC,GAAe,MACvB,kBAAA,cAAC,EAAc,QAAd;AAAA,IACG;AAAA,IACA;AAAA,IACA,IAAI,EAAc;AAAA,IAClB,KAAK,EAAI,SAAS;AAAA,EAAA,CACtB,CACH,CACL,CACH,CACL,CACH,CACL;AAER;"}

package/dist/components/RichTextEditor/Toolbar/types.d.ts

@@ -1,8 +1,6 @@
-import { PlateEditor } from '@udecode/plate';
 import { Button, Buttons } from '../Plugins/types';
 export declare type ToolbarProps = {
     buttons: Buttons;
-    editor: PlateEditor;
     editorId: string;
 };
 export declare type ButtonGroupWidths = {

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

@@ -1,33 +1,21 @@
-import e, { createContext as m, useContext as p } from "react";
+import t, { createContext as n, useContext as d } from "react";
 import "@udecode/plate";
-import "./RichTextEditorContext.es.js";
-import "../Plugins/CheckboxListPlugin/index.es.js";
-import "slate-react";
-import "../Plugins/LinkPlugin/index.es.js";
-import "../Plugins/TextStylePlugin/TextStyles/textStyles.es.js";
-import "../Plugins/TextStylePlugin/TextStyles/Custom1Plugin/createCustom1Plugin.es.js";
-import "../Plugins/TextStylePlugin/TextStyles/Custom2Plugin/createCustom2Plugin.es.js";
-import "../Plugins/TextStylePlugin/TextStyles/Custom3Plugin/createCustom3Plugin.es.js";
-import "../Plugins/TextStylePlugin/TextStyles/Heading1Plugin/createHeading1Plugin.es.js";
-import "../Plugins/TextStylePlugin/TextStyles/Heading2Plugin/createHeading2Plugin.es.js";
-import "../Plugins/TextStylePlugin/TextStyles/Heading3Plugin/createHeading3Plugin.es.js";
-import "../Plugins/TextStylePlugin/TextStyles/Heading4Plugin/createHeading4Plugin.es.js";
-import "../Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
-import { useEditorResize as n } from "../hooks/useEditorResize.es.js";
-import { PlateWrapper as d } from "../EditorPositioningWrapper/PlateWrapper.es.js";
-const r = m({
+import "slate";
+import { useEditorResize as s } from "../hooks/useEditorResize.es.js";
+import { PlateWrapper as m } from "../EditorPositioningWrapper/PlateWrapper.es.js";
+const r = n({
   editorWidth: 0,
   editorRef: null
-}), j = () => p(r), k = ({ children: o }) => {
-  const { editorWidth: i, editorRef: t } = n();
-  return /* @__PURE__ */ e.createElement(r.Provider, {
-    value: { editorWidth: i, editorRef: t }
-  }, /* @__PURE__ */ e.createElement(d, {
-    ref: t
+}), l = () => d(r), u = ({ children: o }) => {
+  const { editorWidth: i, editorRef: e } = s();
+  return /* @__PURE__ */ t.createElement(r.Provider, {
+    value: { editorWidth: i, editorRef: e }
+  }, /* @__PURE__ */ t.createElement(m, {
+    ref: e
   }, o));
 };
 export {
-  k as EditorResizeContextProvider,
-  j as useEditorResizeContext
+  u as EditorResizeContextProvider,
+  l as useEditorResizeContext
 };
 //# sourceMappingURL=EditorResizeContext.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditorResizeContext.es.js","sources":["../../../../src/components/RichTextEditor/context/EditorResizeContext.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { createContext, useContext } from 'react';\nimport { useEditorResize } from '../hooks';\nimport { PlateWrapper } from '../EditorPositioningWrapper/PlateWrapper';\n\ntype EditorResizeContextProps = {\n    editorWidth: number | undefined;\n    editorRef: ((node: HTMLDivElement) => ResizeObserver | undefined) | null;\n};\nconst EditorResizeContext = createContext<EditorResizeContextProps>({\n    editorWidth: 0,\n    editorRef: null,\n});\nexport const useEditorResizeContext = () => useContext(EditorResizeContext);\n\ntype EditorResizeContextProviderProps = {\n    children: React.ReactNode;\n};\n\nexport const EditorResizeContextProvider = ({ children }: EditorResizeContextProviderProps) => {\n    const { editorWidth, editorRef } = useEditorResize();\n\n    return (\n        <EditorResizeContext.Provider value={{ editorWidth, editorRef }}>\n            <PlateWrapper ref={editorRef}>{children}</PlateWrapper>\n        </EditorResizeContext.Provider>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAUA,MAAM,IAAsB,EAAwC;AAAA,EAChE,aAAa;AAAA,EACb,WAAW;AACf,CAAC,GACY,IAAyB,MAAM,EAAW,CAAmB,GAM7D,IAA8B,CAAC,EAAE,kBAAiD;AACrF,QAAA,EAAE,gBAAa,iBAAc,EAAgB;AAG/C,SAAA,kBAAA,cAAC,EAAoB,UAApB;AAAA,IAA6B,OAAO,EAAE,gBAAa,aAAU;AAAA,EAAA,GACzD,kBAAA,cAAA,GAAA;AAAA,IAAa,KAAK;AAAA,EAAA,GAAY,CAAS,CAC5C;AAER;"}
+{"version":3,"file":"EditorResizeContext.es.js","sources":["../../../../src/components/RichTextEditor/context/EditorResizeContext.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { createContext, useContext } from 'react';\nimport { useEditorResize } from '../hooks';\nimport { PlateWrapper } from '../EditorPositioningWrapper/PlateWrapper';\n\ntype EditorResizeContextProps = {\n    editorWidth: number | undefined;\n    editorRef: ((node: HTMLDivElement) => ResizeObserver | undefined) | null;\n};\nconst EditorResizeContext = createContext<EditorResizeContextProps>({\n    editorWidth: 0,\n    editorRef: null,\n});\nexport const useEditorResizeContext = () => useContext(EditorResizeContext);\n\ntype EditorResizeContextProviderProps = {\n    children: React.ReactNode;\n};\n\nexport const EditorResizeContextProvider = ({ children }: EditorResizeContextProviderProps) => {\n    const { editorWidth, editorRef } = useEditorResize();\n\n    return (\n        <EditorResizeContext.Provider value={{ editorWidth, editorRef }}>\n            <PlateWrapper ref={editorRef}>{children}</PlateWrapper>\n        </EditorResizeContext.Provider>\n    );\n};\n"],"names":[],"mappings":";;;;;AAUA,MAAM,IAAsB,EAAwC;AAAA,EAChE,aAAa;AAAA,EACb,WAAW;AACf,CAAC,GACY,IAAyB,MAAM,EAAW,CAAmB,GAM7D,IAA8B,CAAC,EAAE,kBAAiD;AACrF,QAAA,EAAE,gBAAa,iBAAc,EAAgB;AAG/C,SAAA,kBAAA,cAAC,EAAoB,UAApB;AAAA,IAA6B,OAAO,EAAE,gBAAa,aAAU;AAAA,EAAA,GACzD,kBAAA,cAAA,GAAA;AAAA,IAAa,KAAK;AAAA,EAAA,GAAY,CAAS,CAC5C;AAER;"}

package/dist/components/RichTextEditor/context/RichTextEditorContext.d.ts

@@ -5,7 +5,7 @@ declare type RichTextEditorContextProps = {
     designTokens: DesignTokens;
     position: Position;
 };
-export declare const useRichTextEditorContext: () => RichTextEditorContextProps | null;
+export declare const useRichTextEditorContext: () => RichTextEditorContextProps;
 declare type RichTextEditorProviderProps = {
     children: React.ReactNode;
     value: {

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

@@ -1,23 +1,22 @@
-import r, { createContext as c, useContext as d } from "react";
-import { defaultDesignTokens as m } from "../utils/defaultDesignTokens.es.js";
+import o, { createContext as d, useContext as x } from "react";
+import { defaultDesignTokens as r } from "../utils/defaultDesignTokens.es.js";
 import "../EditorPositioningWrapper/index.es.js";
-import { EditorResizeContextProvider as x } from "./EditorResizeContext.es.js";
-import { Position as u } from "../EditorPositioningWrapper/types.es.js";
-const o = c(null), T = () => {
-  if (!o)
-    throw new Error("useRichTextEditorContext must be used within a RichTextEditorProvider");
-  return d(o);
-}, f = ({ children: i, value: n }) => {
-  const { designTokens: t, position: e } = n, s = {
-    designTokens: t != null ? t : m,
-    position: e != null ? e : u.FLOATING
+import { EditorResizeContextProvider as a } from "./EditorResizeContext.es.js";
+import { Position as i } from "../EditorPositioningWrapper/types.es.js";
+const n = d({
+  designTokens: r,
+  position: i.FLOATING
+}), f = () => x(n), C = ({ children: s, value: c }) => {
+  const { designTokens: t, position: e } = c, m = {
+    designTokens: t != null ? t : r,
+    position: e != null ? e : i.FLOATING
   };
-  return /* @__PURE__ */ r.createElement(o.Provider, {
-    value: s
-  }, /* @__PURE__ */ r.createElement(x, null, i));
+  return /* @__PURE__ */ o.createElement(n.Provider, {
+    value: m
+  }, /* @__PURE__ */ o.createElement(a, null, s));
 };
 export {
-  f as RichTextEditorProvider,
-  T as useRichTextEditorContext
+  C as RichTextEditorProvider,
+  f as useRichTextEditorContext
 };
 //# sourceMappingURL=RichTextEditorContext.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditorContext.es.js","sources":["../../../../src/components/RichTextEditor/context/RichTextEditorContext.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { createContext, useContext } from 'react';\nimport { DesignTokens } from '../types';\nimport { defaultDesignTokens } from '../utils/defaultDesignTokens';\nimport { Position } from '../EditorPositioningWrapper';\nimport { EditorResizeContextProvider } from './EditorResizeContext';\n\ntype RichTextEditorContextProps = {\n    designTokens: DesignTokens;\n    position: Position;\n};\n\nconst RichTextEditorContext = createContext<RichTextEditorContextProps | null>(null);\nexport const useRichTextEditorContext = () => {\n    if (!RichTextEditorContext) {\n        throw new Error('useRichTextEditorContext must be used within a RichTextEditorProvider');\n    }\n    return useContext(RichTextEditorContext);\n};\n\ntype RichTextEditorProviderProps = {\n    children: React.ReactNode;\n    value: {\n        designTokens: DesignTokens;\n        position: Position;\n    };\n};\n\nexport const RichTextEditorProvider = ({ children, value }: RichTextEditorProviderProps) => {\n    const { designTokens, position } = value;\n\n    const state = {\n        designTokens: designTokens ?? defaultDesignTokens,\n        position: position ?? Position.FLOATING,\n    };\n\n    return (\n        <RichTextEditorContext.Provider value={state}>\n            <EditorResizeContextProvider>{children}</EditorResizeContextProvider>\n        </RichTextEditorContext.Provider>\n    );\n};\n"],"names":[],"mappings":";;;;;AAcA,MAAM,IAAwB,EAAiD,IAAI,GACtE,IAA2B,MAAM;AAC1C,MAAI,CAAC;AACK,UAAA,IAAI,MAAM,uEAAuE;AAE3F,SAAO,EAAW,CAAqB;AAC3C,GAUa,IAAyB,CAAC,EAAE,aAAU,eAAyC;AAClF,QAAA,EAAE,iBAAc,gBAAa,GAE7B,IAAQ;AAAA,IACV,cAAc,gBAAgB;AAAA,IAC9B,UAAU,gBAAY,EAAS;AAAA,EAAA;AAI/B,SAAA,kBAAA,cAAC,EAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,EAAA,GACnC,kBAAA,cAAC,GAA6B,MAAA,CAAS,CAC3C;AAER;"}
+{"version":3,"file":"RichTextEditorContext.es.js","sources":["../../../../src/components/RichTextEditor/context/RichTextEditorContext.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { createContext, useContext } from 'react';\nimport { DesignTokens } from '../types';\nimport { defaultDesignTokens } from '../utils/defaultDesignTokens';\nimport { Position } from '../EditorPositioningWrapper';\nimport { EditorResizeContextProvider } from './EditorResizeContext';\n\ntype RichTextEditorContextProps = {\n    designTokens: DesignTokens;\n    position: Position;\n};\n\nconst RichTextEditorContext = createContext<RichTextEditorContextProps>({\n    designTokens: defaultDesignTokens,\n    position: Position.FLOATING,\n});\nexport const useRichTextEditorContext = () => useContext(RichTextEditorContext);\n\ntype RichTextEditorProviderProps = {\n    children: React.ReactNode;\n    value: {\n        designTokens: DesignTokens;\n        position: Position;\n    };\n};\n\nexport const RichTextEditorProvider = ({ children, value }: RichTextEditorProviderProps) => {\n    const { designTokens, position } = value;\n\n    const state = {\n        designTokens: designTokens ?? defaultDesignTokens,\n        position: position ?? Position.FLOATING,\n    };\n\n    return (\n        <RichTextEditorContext.Provider value={state}>\n            <EditorResizeContextProvider>{children}</EditorResizeContextProvider>\n        </RichTextEditorContext.Provider>\n    );\n};\n"],"names":[],"mappings":";;;;;AAcA,MAAM,IAAwB,EAA0C;AAAA,EACpE,cAAc;AAAA,EACd,UAAU,EAAS;AACvB,CAAC,GACY,IAA2B,MAAM,EAAW,CAAqB,GAUjE,IAAyB,CAAC,EAAE,aAAU,eAAyC;AAClF,QAAA,EAAE,iBAAc,gBAAa,GAE7B,IAAQ;AAAA,IACV,cAAc,gBAAgB;AAAA,IAC9B,UAAU,gBAAY,EAAS;AAAA,EAAA;AAI/B,SAAA,kBAAA,cAAC,EAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,EAAA,GACnC,kBAAA,cAAC,GAA6B,MAAA,CAAS,CAC3C;AAER;"}

package/dist/components/RichTextEditor/hooks/useEditorState.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
 import { TNode } from '@udecode/plate';
-export declare const useEditorState: (editorId: string, clear?: boolean) => {
+declare type useEditorStateProps = ((value: string) => void) | undefined;
+export declare const useEditorState: (onTextChange: useEditorStateProps) => {
     localValue: import("react").MutableRefObject<TNode[] | null>;
+    onChange: (value: any) => void;
 };
+export {};

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

@@ -1,14 +1,15 @@
-import { useRef as f, useEffect as i } from "react";
-import { usePlateEditorState as c } from "@udecode/plate";
-import { EMPTY_RICH_TEXT_VALUE as s } from "../utils/parseRawValue.es.js";
-const d = (n, o = !1) => {
-  const e = f(null), t = c(n);
-  return i(() => {
-    if (o && t) {
-      const r = { path: [0, 0], offset: 0 };
-      t.selection = { anchor: r, focus: r }, t.history = { redos: [], undos: [] }, t.children = s, e.current = s;
-    }
-  }, [o, t]), { localValue: e };
+import { useRef as c, useCallback as i } from "react";
+import { debounce as m } from "../../../utilities/debounce.es.js";
+import "@udecode/plate";
+import "slate";
+import { ON_SAVE_DELAY_IN_MS as s } from "../utils/constants.es.js";
+const d = (t) => {
+  const r = c(null), e = m((o) => {
+    t && t(JSON.stringify(o));
+  }, s), n = i((o) => {
+    e(o), r.current = o;
+  }, [e, r]);
+  return { localValue: r, onChange: n };
 };
 export {
   d as useEditorState

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

@@ -1 +1 @@
-{"version":3,"file":"useEditorState.es.js","sources":["../../../../src/components/RichTextEditor/hooks/useEditorState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useRef } from 'react';\nimport { TNode, usePlateEditorState } from '@udecode/plate';\nimport { EMPTY_RICH_TEXT_VALUE } from '../utils/parseRawValue';\n\nexport const useEditorState = (editorId: string, clear = false) => {\n    const localValue = useRef<TNode[] | null>(null);\n    const editor = usePlateEditorState(editorId);\n\n    useEffect(() => {\n        if (clear && editor) {\n            const point = { path: [0, 0], offset: 0 };\n            editor.selection = { anchor: point, focus: point };\n            editor.history = { redos: [], undos: [] };\n            editor.children = EMPTY_RICH_TEXT_VALUE;\n            localValue.current = EMPTY_RICH_TEXT_VALUE;\n        }\n    }, [clear, editor]);\n\n    return { localValue };\n};\n"],"names":[],"mappings":";;;AAMO,MAAM,IAAiB,CAAC,GAAkB,IAAQ,OAAU;AACzD,QAAA,IAAa,EAAuB,IAAI,GACxC,IAAS,EAAoB,CAAQ;AAE3C,WAAU,MAAM;AACZ,QAAI,KAAS,GAAQ;AACX,YAAA,IAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ;AACtC,QAAO,YAAY,EAAE,QAAQ,GAAO,OAAO,KAC3C,EAAO,UAAU,EAAE,OAAO,CAAA,GAAI,OAAO,CAAA,KACrC,EAAO,WAAW,GAClB,EAAW,UAAU;AAAA,IACzB;AAAA,EAAA,GACD,CAAC,GAAO,CAAM,CAAC,GAEX,EAAE,cAAW;AACxB;"}
+{"version":3,"file":"useEditorState.es.js","sources":["../../../../src/components/RichTextEditor/hooks/useEditorState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useRef } from 'react';\nimport { TNode } from '@udecode/plate';\nimport { debounce } from '@utilities/debounce';\nimport { ON_SAVE_DELAY_IN_MS } from '../utils';\n\ntype useEditorStateProps = ((value: string) => void) | undefined;\n\nexport const useEditorState = (onTextChange: useEditorStateProps) => {\n    const localValue = useRef<TNode[] | null>(null);\n\n    const debouncedOnChange = debounce((value: TNode[]) => {\n        onTextChange && onTextChange(JSON.stringify(value));\n    }, ON_SAVE_DELAY_IN_MS);\n\n    const onChange = useCallback(\n        (value) => {\n            debouncedOnChange(value);\n            localValue.current = value;\n        },\n        [debouncedOnChange, localValue],\n    );\n\n    return { localValue, onChange };\n};\n"],"names":[],"mappings":";;;;;AASa,MAAA,IAAiB,CAAC,MAAsC;AAC3D,QAAA,IAAa,EAAuB,IAAI,GAExC,IAAoB,EAAS,CAAC,MAAmB;AACnD,SAAgB,EAAa,KAAK,UAAU,CAAK,CAAC;AAAA,KACnD,CAAmB,GAEhB,IAAW,EACb,CAAC,MAAU;AACP,MAAkB,CAAK,GACvB,EAAW,UAAU;AAAA,EAAA,GAEzB,CAAC,GAAmB,CAAU,CAClC;AAEO,SAAA,EAAE,eAAY;AACzB;"}

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

@@ -3,7 +3,7 @@ import { parseRawValue as i } from "../utils/parseRawValue.es.js";
 import { serializeNodeToHtmlRecursive as n } from "./utils/serializeNodeToHtmlRecursive.es.js";
 import { setDefaultDesignTokensIfNull as m } from "./utils/setDefaultDesignTokensIfNull.es.js";
 const T = (e, o = s) => {
-  const r = i(e);
+  const r = i({ raw: e });
   return l(r, o);
 }, l = (e, o = s) => {
   const r = m(s, o);

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":["import { TDescendant } from '@udecode/plate';\nimport { DesignTokens } from '../types';\nimport { defaultDesignTokens } from '../utils/defaultDesignTokens';\nimport { parseRawValue } from '../utils/parseRawValue';\nimport { serializeNodeToHtmlRecursive } from './utils/serializeNodeToHtmlRecursive';\nimport { setDefaultDesignTokensIfNull } from './utils/setDefaultDesignTokensIfNull';\n\nexport const serializeRawToHtml = (raw: string, designTokens: DesignTokens = defaultDesignTokens): string => {\n    const nodes = parseRawValue(raw);\n    return serializeNodesToHtml(nodes, designTokens);\n};\n\nexport const serializeNodesToHtml = (\n    nodes: TDescendant[],\n    designTokens: DesignTokens = defaultDesignTokens,\n): string => {\n    const mergedDesignTokens = setDefaultDesignTokensIfNull(defaultDesignTokens, designTokens);\n    return nodes.map((node) => serializeNodeToHtmlRecursive(node, mergedDesignTokens)).join('');\n};\n"],"names":[],"mappings":";;;;AAOO,MAAM,IAAqB,CAAC,GAAa,IAA6B,MAAgC;AACnG,QAAA,IAAQ,EAAc,CAAG;AACxB,SAAA,EAAqB,GAAO,CAAY;AACnD,GAEa,IAAuB,CAChC,GACA,IAA6B,MACpB;AACH,QAAA,IAAqB,EAA6B,GAAqB,CAAY;AAClF,SAAA,EAAM,IAAI,CAAC,MAAS,EAA6B,GAAM,CAAkB,CAAC,EAAE,KAAK,EAAE;AAC9F;"}
+{"version":3,"file":"serializeToHtml.es.js","sources":["../../../../src/components/RichTextEditor/serializer/serializeToHtml.ts"],"sourcesContent":["import { TDescendant } from '@udecode/plate';\nimport { DesignTokens } from '../types';\nimport { defaultDesignTokens } from '../utils/defaultDesignTokens';\nimport { parseRawValue } from '../utils/parseRawValue';\nimport { serializeNodeToHtmlRecursive } from './utils/serializeNodeToHtmlRecursive';\nimport { setDefaultDesignTokensIfNull } from './utils/setDefaultDesignTokensIfNull';\n\nexport const serializeRawToHtml = (raw: string, designTokens: DesignTokens = defaultDesignTokens): string => {\n    const nodes = parseRawValue({ raw });\n    return serializeNodesToHtml(nodes, designTokens);\n};\n\nexport const serializeNodesToHtml = (\n    nodes: TDescendant[],\n    designTokens: DesignTokens = defaultDesignTokens,\n): string => {\n    const mergedDesignTokens = setDefaultDesignTokensIfNull(defaultDesignTokens, designTokens);\n    return nodes.map((node) => serializeNodeToHtmlRecursive(node, mergedDesignTokens)).join('');\n};\n"],"names":[],"mappings":";;;;AAOO,MAAM,IAAqB,CAAC,GAAa,IAA6B,MAAgC;AACzG,QAAM,IAAQ,EAAc,EAAE,OAAK,CAAA;AAC5B,SAAA,EAAqB,GAAO,CAAY;AACnD,GAEa,IAAuB,CAChC,GACA,IAA6B,MACpB;AACH,QAAA,IAAqB,EAA6B,GAAqB,CAAY;AAClF,SAAA,EAAM,IAAI,CAAC,MAAS,EAA6B,GAAM,CAAkB,CAAC,EAAE,KAAK,EAAE;AAC9F;"}

package/dist/components/RichTextEditor/utils/parseRawValue.d.ts

@@ -1,3 +1,8 @@
 import { Value } from '@udecode/plate';
 export declare const EMPTY_RICH_TEXT_VALUE: Value;
-export declare const parseRawValue: (raw?: string | undefined) => Value;
+declare type ParseRawValueOptions = {
+    editorId?: string;
+    raw?: string;
+};
+export declare const parseRawValue: ({ editorId, raw }: ParseRawValueOptions) => Value;
+export {};

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

@@ -1,22 +1,22 @@
-import { ELEMENT_PARAGRAPH as m, createPlateEditor as i, parseHtmlDocument as l, deserializeHtml as p } from "@udecode/plate";
-import { getEditorConfig as a } from "./editorConfig.es.js";
-const d = (t) => /^<\w+>.*<\/\w+>$/.test(t) ? t : `<p>${t}</p>`, u = [{ type: m, children: [{ text: "" }] }], h = (t) => {
-  let e = u;
+import { ELEMENT_PARAGRAPH as i, createPlateEditor as l, parseHtmlDocument as m, deserializeHtml as p } from "@udecode/plate";
+import { getEditorConfig as u } from "./editorConfig.es.js";
+const d = (e) => /^<\w+>.*<\/\w+>$/.test(e) ? e : `<p>${e}</p>`, E = [{ type: i, children: [{ text: "" }] }], h = ({ editorId: e = "parseRawValue", raw: t }) => {
+  let r = E;
   if (!t)
-    return e;
+    return r;
   try {
-    e = JSON.parse(t);
+    r = JSON.parse(t);
   } catch {
-    const o = i({ plugins: a() }), n = t.trim().replace(/>\s+</g, "><"), c = d(n), s = l(c), r = p(o, {
-      element: s.body,
+    const s = l({ id: `${e}_parseRawValue`, plugins: u() }), n = t.trim().replace(/>\s+</g, "><"), c = d(n), a = m(c), o = p(s, {
+      element: a.body,
       stripWhitespace: !0
     });
-    r && (e = r);
+    o && (r = o);
   }
-  return e;
+  return r;
 };
 export {
-  u as EMPTY_RICH_TEXT_VALUE,
+  E as EMPTY_RICH_TEXT_VALUE,
   h as parseRawValue
 };
 //# sourceMappingURL=parseRawValue.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"parseRawValue.es.js","sources":["../../../../src/components/RichTextEditor/utils/parseRawValue.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ELEMENT_PARAGRAPH, Value, createPlateEditor, deserializeHtml, parseHtmlDocument } from '@udecode/plate';\nimport { getEditorConfig } from './editorConfig';\n\nconst wrapTextInHtml = (text: string) => {\n    const htmlDocRegex = /^<\\w+>.*<\\/\\w+>$/;\n\n    return htmlDocRegex.test(text) ? text : `<p>${text}</p>`;\n};\n\nexport const EMPTY_RICH_TEXT_VALUE: Value = [{ type: ELEMENT_PARAGRAPH, children: [{ text: '' }] }];\n\nexport const parseRawValue = (raw?: string): Value => {\n    let parsedValue = EMPTY_RICH_TEXT_VALUE;\n\n    if (!raw) {\n        return parsedValue;\n    }\n\n    try {\n        parsedValue = JSON.parse(raw);\n    } catch {\n        const editor = createPlateEditor({ plugins: getEditorConfig() });\n        const trimmed = raw.trim().replace(/>\\s+</g, '><');\n        const htmlDocumentString = wrapTextInHtml(trimmed);\n        const document = parseHtmlDocument(htmlDocumentString);\n        const parsedHtml = deserializeHtml(editor, {\n            element: document.body,\n            stripWhitespace: true,\n        }) as Value;\n        if (parsedHtml) {\n            parsedValue = parsedHtml;\n        }\n    }\n\n    return parsedValue;\n};\n"],"names":[],"mappings":";;AAKA,MAAM,IAAiB,CAAC,MAGb,AAFc,mBAED,KAAK,CAAI,IAAI,IAAO,MAAM,SAGrC,IAA+B,CAAC,EAAE,MAAM,GAAmB,UAAU,CAAC,EAAE,MAAM,GAAI,CAAA,GAAG,GAErF,IAAgB,CAAC,MAAwB;AAClD,MAAI,IAAc;AAElB,MAAI,CAAC;AACM,WAAA;AAGP,MAAA;AACc,QAAA,KAAK,MAAM,CAAG;AAAA,EAAA,QAC9B;AACE,UAAM,IAAS,EAAkB,EAAE,SAAS,EAAA,EAAmB,CAAA,GACzD,IAAU,EAAI,KAAA,EAAO,QAAQ,UAAU,IAAI,GAC3C,IAAqB,EAAe,CAAO,GAC3C,IAAW,EAAkB,CAAkB,GAC/C,IAAa,EAAgB,GAAQ;AAAA,MACvC,SAAS,EAAS;AAAA,MAClB,iBAAiB;AAAA,IAAA,CACpB;AACD,IAAI,KACc,KAAA;AAAA,EAEtB;AAEO,SAAA;AACX;"}
+{"version":3,"file":"parseRawValue.es.js","sources":["../../../../src/components/RichTextEditor/utils/parseRawValue.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ELEMENT_PARAGRAPH, Value, createPlateEditor, deserializeHtml, parseHtmlDocument } from '@udecode/plate';\nimport { getEditorConfig } from './editorConfig';\n\nconst wrapTextInHtml = (text: string) => {\n    const htmlDocRegex = /^<\\w+>.*<\\/\\w+>$/;\n\n    return htmlDocRegex.test(text) ? text : `<p>${text}</p>`;\n};\n\nexport const EMPTY_RICH_TEXT_VALUE: Value = [{ type: ELEMENT_PARAGRAPH, children: [{ text: '' }] }];\n\ntype ParseRawValueOptions = {\n    editorId?: string;\n    raw?: string;\n};\n\nexport const parseRawValue = ({ editorId = 'parseRawValue', raw }: ParseRawValueOptions): Value => {\n    let parsedValue = EMPTY_RICH_TEXT_VALUE;\n\n    if (!raw) {\n        return parsedValue;\n    }\n\n    try {\n        parsedValue = JSON.parse(raw);\n    } catch {\n        const editor = createPlateEditor({ id: `${editorId}_parseRawValue`, plugins: getEditorConfig() });\n        const trimmed = raw.trim().replace(/>\\s+</g, '><');\n        const htmlDocumentString = wrapTextInHtml(trimmed);\n        const document = parseHtmlDocument(htmlDocumentString);\n        const parsedHtml = deserializeHtml(editor, {\n            element: document.body,\n            stripWhitespace: true,\n        }) as Value;\n        if (parsedHtml) {\n            parsedValue = parsedHtml;\n        }\n    }\n\n    return parsedValue;\n};\n"],"names":[],"mappings":";;AAKA,MAAM,IAAiB,CAAC,MAGb,AAFc,mBAED,KAAK,CAAI,IAAI,IAAO,MAAM,SAGrC,IAA+B,CAAC,EAAE,MAAM,GAAmB,UAAU,CAAC,EAAE,MAAM,GAAI,CAAA,GAAG,GAOrF,IAAgB,CAAC,EAAE,cAAW,iBAAiB,aAAuC;AAC/F,MAAI,IAAc;AAElB,MAAI,CAAC;AACM,WAAA;AAGP,MAAA;AACc,QAAA,KAAK,MAAM,CAAG;AAAA,EAAA,QAC9B;AACQ,UAAA,IAAS,EAAkB,EAAE,IAAI,GAAG,mBAA0B,SAAS,EAAgB,EAAG,CAAA,GAC1F,IAAU,EAAI,KAAA,EAAO,QAAQ,UAAU,IAAI,GAC3C,IAAqB,EAAe,CAAO,GAC3C,IAAW,EAAkB,CAAkB,GAC/C,IAAa,EAAgB,GAAQ;AAAA,MACvC,SAAS,EAAS;AAAA,MAClB,iBAAiB;AAAA,IAAA,CACpB;AACD,IAAI,KACc,KAAA;AAAA,EAEtB;AAEO,SAAA;AACX;"}

package/dist/components/ScrollWrapper/ScrollWrapper.es.js

@@ -1727,10 +1727,10 @@ import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading4Plugin/crea
 import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
 import "../RichTextEditor/context/EditorResizeContext.es.js";
 import "../RichTextEditor/EditorPositioningWrapper/index.es.js";
+import "slate";
 import "../RichTextEditor/Plugins/CheckboxListPlugin/index.es.js";
 import "slate-react";
 import "../RichTextEditor/Plugins/LinkPlugin/index.es.js";
-import "slate";
 import "../RichTextEditor/Plugins/index.es.js";
 import { useScrollWrapper as g } from "./hooks/useScrollWrapper.es.js";
 import { ScrollWrapperDirection as i, scrollWrapperDirections as h } from "./types.es.js";

package/dist/components/Table/TableCell.es.js

@@ -1726,10 +1726,10 @@ import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading4Plugin/crea
 import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
 import "../RichTextEditor/context/EditorResizeContext.es.js";
 import "../RichTextEditor/EditorPositioningWrapper/index.es.js";
+import "slate";
 import "../RichTextEditor/Plugins/CheckboxListPlugin/index.es.js";
 import "slate-react";
 import "../RichTextEditor/Plugins/LinkPlugin/index.es.js";
-import "slate";
 import "../RichTextEditor/Plugins/index.es.js";
 import "../../styles.es.js";
 import { SelectionMode as k } from "./Table.es.js";

package/dist/components/Table/TableColumnHeader.es.js

@@ -1727,10 +1727,10 @@ import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading4Plugin/crea
 import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
 import "../RichTextEditor/context/EditorResizeContext.es.js";
 import "../RichTextEditor/EditorPositioningWrapper/index.es.js";
+import "slate";
 import "../RichTextEditor/Plugins/CheckboxListPlugin/index.es.js";
 import "slate-react";
 import "../RichTextEditor/Plugins/LinkPlugin/index.es.js";
-import "slate";
 import "../RichTextEditor/Plugins/index.es.js";
 import "../../styles.es.js";
 import { SortDirection as O, SelectionMode as _ } from "./Table.es.js";

package/dist/components/Tree/utils/mocks.es.js

@@ -1728,10 +1728,10 @@ import "../../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading4Plugin/c
 import "../../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
 import "../../RichTextEditor/context/EditorResizeContext.es.js";
 import "../../RichTextEditor/EditorPositioningWrapper/index.es.js";
+import "slate";
 import "../../RichTextEditor/Plugins/CheckboxListPlugin/index.es.js";
 import "slate-react";
 import "../../RichTextEditor/Plugins/LinkPlugin/index.es.js";
-import "slate";
 import "../../RichTextEditor/Plugins/index.es.js";
 import "@react-stately/table";
 import "react-textarea-autosize";