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

package/dist/components/RichTextEditor/Plugins/GeneratePlugins.d.ts

@@ -2,9 +2,9 @@ import { ReactNode } from 'react';
 import { AnyObject, PlatePlugin } from '@udecode/plate';
 import type { PluginComposer } from './PluginComposer';
 declare type GeneratePluginsReturn = {
-    Create: () => PlatePlugin<AnyObject>[];
-    Toolbar: () => ReactNode;
-    Inline: () => ReactNode;
+    create: () => PlatePlugin<AnyObject>[];
+    toolbar: () => ReactNode;
+    inline: () => ReactNode;
 };
 export declare const createPlatePlugins: (pluginComposer: PluginComposer) => PlatePlugin<AnyObject, import("@udecode/plate").Value, import("@udecode/plate").PlateEditor<import("@udecode/plate").Value>>[];
 export declare const GeneratePlugins: (editorId: string, pluginComposer?: PluginComposer | undefined) => GeneratePluginsReturn | null;

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

@@ -1,24 +1,20 @@
-import e from "react";
-import { createPlugins as l, createPlateUI as c, usePlateEditorRef as o } from "@udecode/plate";
+import n from "react";
+import { createPlugins as l, createPlateUI as c } from "@udecode/plate";
 import { Toolbar as m } from "../Toolbar/index.es.js";
-const u = (t) => l(t.plugins, {
-  components: c(t.elements)
-}), P = (t, n) => n ? {
-  Create: () => u(n),
-  Toolbar: () => {
-    const r = o(t);
-    return r && n.hasToolbar ? /* @__PURE__ */ e.createElement(m, {
-      buttons: n.buttons,
-      editor: r,
-      editorId: t
-    }) : /* @__PURE__ */ e.createElement(e.Fragment, null);
-  },
-  Inline: () => /* @__PURE__ */ e.createElement(e.Fragment, null, n.inline.map((r, a) => /* @__PURE__ */ e.createElement(r, {
+const o = (e) => l(e.plugins, {
+  components: c(e.elements)
+}), P = (e, t) => t ? {
+  create: () => o(t),
+  toolbar: () => /* @__PURE__ */ n.createElement(m, {
+    buttons: t.buttons,
+    editorId: e
+  }),
+  inline: () => /* @__PURE__ */ n.createElement(n.Fragment, null, t.inline.map((r, a) => /* @__PURE__ */ n.createElement(r, {
     key: a
   })))
 } : null;
 export {
   P as GeneratePlugins,
-  u as createPlatePlugins
+  o as createPlatePlugins
 };
 //# sourceMappingURL=GeneratePlugins.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GeneratePlugins.es.js","sources":["../../../../src/components/RichTextEditor/Plugins/GeneratePlugins.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactNode } from 'react';\nimport { AnyObject, PlatePlugin, createPlateUI, createPlugins, usePlateEditorRef } from '@udecode/plate';\nimport { Toolbar } from '../Toolbar';\nimport type { PluginComposer } from './PluginComposer';\n\ntype GeneratePluginsReturn = {\n    Create: () => PlatePlugin<AnyObject>[];\n    Toolbar: () => ReactNode;\n    Inline: () => ReactNode;\n};\n\nexport const createPlatePlugins = (pluginComposer: PluginComposer) =>\n    createPlugins(pluginComposer.plugins, {\n        components: createPlateUI(pluginComposer.elements),\n    });\n\nexport const GeneratePlugins = (editorId: string, pluginComposer?: PluginComposer): GeneratePluginsReturn | null => {\n    if (!pluginComposer) {\n        return null;\n    }\n\n    return {\n        Create: () => createPlatePlugins(pluginComposer),\n        Toolbar: () => {\n            const editor = usePlateEditorRef(editorId)!;\n\n            if (editor && pluginComposer.hasToolbar) {\n                return <Toolbar buttons={pluginComposer.buttons} editor={editor} editorId={editorId} />;\n            }\n\n            return <></>;\n        },\n        Inline: () => (\n            <>\n                {pluginComposer.inline.map((Inline, index) => (\n                    <Inline key={index} />\n                ))}\n            </>\n        ),\n    };\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,IAAqB,CAAC,MAC/B,EAAc,EAAe,SAAS;AAAA,EAClC,YAAY,EAAc,EAAe,QAAQ;AACrD,CAAC,GAEQ,IAAkB,CAAC,GAAkB,MACzC,IAIE;AAAA,EACH,QAAQ,MAAM,EAAmB,CAAc;AAAA,EAC/C,SAAS,MAAM;AACL,UAAA,IAAS,EAAkB,CAAQ;AAErC,WAAA,KAAU,EAAe,aACjB,kBAAA,cAAA,GAAA;AAAA,MAAQ,SAAS,EAAe;AAAA,MAAS;AAAA,MAAgB;AAAA,IAAA,CAAoB,IAGhF,kBAAA,cAAA,EAAA,UAAA,IAAA;AAAA,EACb;AAAA,EACA,QAAQ,MAEC,kBAAA,cAAA,EAAA,UAAA,MAAA,EAAe,OAAO,IAAI,CAAC,GAAQ,MAC/B,kBAAA,cAAA,GAAA;AAAA,IAAO,KAAK;AAAA,EAAO,CAAA,CACvB,CACL;AAAA,IAnBG;"}
+{"version":3,"file":"GeneratePlugins.es.js","sources":["../../../../src/components/RichTextEditor/Plugins/GeneratePlugins.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactNode } from 'react';\nimport { AnyObject, PlatePlugin, createPlateUI, createPlugins } from '@udecode/plate';\nimport { Toolbar } from '../Toolbar';\nimport type { PluginComposer } from './PluginComposer';\n\ntype GeneratePluginsReturn = {\n    create: () => PlatePlugin<AnyObject>[];\n    toolbar: () => ReactNode;\n    inline: () => ReactNode;\n};\n\nexport const createPlatePlugins = (pluginComposer: PluginComposer) =>\n    createPlugins(pluginComposer.plugins, {\n        components: createPlateUI(pluginComposer.elements),\n    });\n\nexport const GeneratePlugins = (editorId: string, pluginComposer?: PluginComposer): GeneratePluginsReturn | null => {\n    if (!pluginComposer) {\n        return null;\n    }\n\n    return {\n        create: () => createPlatePlugins(pluginComposer),\n        toolbar: () => <Toolbar buttons={pluginComposer.buttons} editorId={editorId} />,\n        inline: () => (\n            <>\n                {pluginComposer.inline.map((Inline, index) => (\n                    <Inline key={index} />\n                ))}\n            </>\n        ),\n    };\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,IAAqB,CAAC,MAC/B,EAAc,EAAe,SAAS;AAAA,EAClC,YAAY,EAAc,EAAe,QAAQ;AACrD,CAAC,GAEQ,IAAkB,CAAC,GAAkB,MACzC,IAIE;AAAA,EACH,QAAQ,MAAM,EAAmB,CAAc;AAAA,EAC/C,SAAS,MAAO,kBAAA,cAAA,GAAA;AAAA,IAAQ,SAAS,EAAe;AAAA,IAAS;AAAA,EAAA,CAAoB;AAAA,EAC7E,QAAQ,MAEC,kBAAA,cAAA,EAAA,UAAA,MAAA,EAAe,OAAO,IAAI,CAAC,GAAQ,MAC/B,kBAAA,cAAA,GAAA;AAAA,IAAO,KAAK;AAAA,EAAO,CAAA,CACvB,CACL;AAAA,IAXG;"}

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

@@ -2,16 +2,16 @@ 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 C } from "./context/RichTextEditorContext.es.js";
-import { useEditorState as N } from "./hooks/useEditorState.es.js";
-import { PaddingSizes as R } from "./types.es.js";
-import { defaultActions as S } from "./utils/actions.es.js";
-import { defaultDesignTokens as w } from "./utils/defaultDesignTokens.es.js";
-import { parseRawValue as I } from "./utils/parseRawValue.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 L } from "./utils/editorConfig.es.js";
-import { defaultPlugins as x } from "./Plugins/index.es.js";
-import { forceTabOutOfActiveElement as D } from "./helpers/forceTabOutOfActiveElement.es.js";
+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 = {
@@ -22,15 +22,15 @@ const G = {
   value: s,
   placeholder: f = "",
   readonly: c = !1,
-  designTokens: d = w,
-  actions: n = S,
+  designTokens: d = C,
+  actions: n = w,
   onTextChange: p,
   onBlur: m,
-  padding: u = R.None,
+  padding: u = S.None,
   position: g = V.FLOATING,
-  plugins: E = x
+  plugins: E = D
 }) => {
-  const e = y(l), { localValue: P, onChange: T } = N(p), h = {
+  const e = y(l), { localValue: P, onChange: T } = R(p), h = {
     placeholder: f,
     renderPlaceholder: ({ children: i, attributes: a }) => {
       const b = {
@@ -48,18 +48,18 @@ const G = {
     onBlur: () => m && m(JSON.stringify(P.current)),
     className: u,
     onKeyDown: (i) => {
-      i.code === "Tab" && D();
+      i.code === "Tab" && I();
     }
-  }, o = z(e, E), t = !!o && n.length === 0, O = t ? o.Create() : L();
-  return /* @__PURE__ */ r.createElement(C, {
+  }, 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: I({ editorId: e, raw: s }),
+    initialValue: L({ editorId: e, raw: s }),
     onChange: T,
     editableProps: h,
     plugins: O
-  }, t && o.Toolbar(), t && o.Inline(), !t && /* @__PURE__ */ r.createElement(A, {
+  }, t && o.toolbar(), t && o.inline(), !t && /* @__PURE__ */ r.createElement(A, {
     editorId: e,
     actions: n
   })));

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 } 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;"}
+{"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/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;"}