@webiny/lexical-editor 0.0.0-unstable.06b2ede40f

package/components/LexicalEditorConfig/components/Node.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Property } from "@webiny/react-properties";
+export const Node = ({
+  name,
+  node,
+  after = undefined,
+  before = undefined,
+  remove = false
+}) => {
+  const placeBefore = before !== undefined ? `node:${before}` : undefined;
+  const placeAfter = after !== undefined ? `node:${after}` : undefined;
+  return /*#__PURE__*/React.createElement(Property, {
+    id: `nodes:${name}`,
+    name: "nodes",
+    array: true,
+    before: placeBefore,
+    after: placeAfter,
+    remove: remove
+  }, /*#__PURE__*/React.createElement(Property, {
+    id: `node:${name}:name`,
+    name: "name",
+    value: name
+  }), node ? /*#__PURE__*/React.createElement(Property, {
+    id: `node:${name}:node`,
+    name: "node",
+    value: node
+  }) : null);
+};
+
+//# sourceMappingURL=Node.js.map

package/components/LexicalEditorConfig/components/Node.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Property","Node","name","node","after","undefined","before","remove","placeBefore","placeAfter","createElement","id","array","value"],"sources":["Node.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\nimport type { Klass, LexicalNode } from \"lexical\";\n\nexport interface NodeConfig {\n    name: string;\n    node: Klass<LexicalNode>;\n}\n\nexport interface NodeProps {\n    name: string;\n    node?: Klass<LexicalNode>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const Node = ({\n    name,\n    node,\n    after = undefined,\n    before = undefined,\n    remove = false\n}: NodeProps) => {\n    const placeBefore = before !== undefined ? `node:${before}` : undefined;\n    const placeAfter = after !== undefined ? `node:${after}` : undefined;\n\n    return (\n        <Property\n            id={`nodes:${name}`}\n            name={\"nodes\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`node:${name}:name`} name={\"name\"} value={name} />\n            {node ? <Property id={`node:${name}:node`} name={\"node\"} value={node} /> : null}\n        </Property>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,0BAA0B;AAgBnD,OAAO,MAAMC,IAAI,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK,GAAGC,SAAS;EACjBC,MAAM,GAAGD,SAAS;EAClBE,MAAM,GAAG;AACF,CAAC,KAAK;EACb,MAAMC,WAAW,GAAGF,MAAM,KAAKD,SAAS,GAAG,QAAQC,MAAM,EAAE,GAAGD,SAAS;EACvE,MAAMI,UAAU,GAAGL,KAAK,KAAKC,SAAS,GAAG,QAAQD,KAAK,EAAE,GAAGC,SAAS;EAEpE,oBACIN,KAAA,CAAAW,aAAA,CAACV,QAAQ;IACLW,EAAE,EAAE,SAAST,IAAI,EAAG;IACpBA,IAAI,EAAE,OAAQ;IACdU,KAAK,EAAE,IAAK;IACZN,MAAM,EAAEE,WAAY;IACpBJ,KAAK,EAAEK,UAAW;IAClBF,MAAM,EAAEA;EAAO,gBAEfR,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,QAAQT,IAAI,OAAQ;IAACA,IAAI,EAAE,MAAO;IAACW,KAAK,EAAEX;EAAK,CAAE,CAAC,EAC/DC,IAAI,gBAAGJ,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,QAAQT,IAAI,OAAQ;IAACA,IAAI,EAAE,MAAO;IAACW,KAAK,EAAEV;EAAK,CAAE,CAAC,GAAG,IACrE,CAAC;AAEnB,CAAC","ignoreList":[]}

package/components/LexicalEditorConfig/components/Plugin.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface PluginConfig {
+    name: string;
+    element: React.ReactElement;
+}
+export interface PluginProps {
+    name: string;
+    element?: React.ReactElement<unknown>;
+    remove?: boolean;
+    before?: string;
+    after?: string;
+}
+export declare const Plugin: ({ name, element, after, before, remove }: PluginProps) => React.JSX.Element;

package/components/LexicalEditorConfig/components/Plugin.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Property } from "@webiny/react-properties";
+export const Plugin = ({
+  name,
+  element,
+  after = undefined,
+  before = undefined,
+  remove = false
+}) => {
+  const placeBefore = before !== undefined ? `plugin:${before}` : undefined;
+  const placeAfter = after !== undefined ? `plugin:${after}` : undefined;
+  return /*#__PURE__*/React.createElement(Property, {
+    id: `plugins:${name}`,
+    name: "plugins",
+    array: true,
+    before: placeBefore,
+    after: placeAfter,
+    remove: remove
+  }, /*#__PURE__*/React.createElement(Property, {
+    id: `plugin:${name}:name`,
+    name: "name",
+    value: name
+  }), element ? /*#__PURE__*/React.createElement(Property, {
+    id: `plugin:${name}:element`,
+    name: "element",
+    value: element
+  }) : null);
+};
+
+//# sourceMappingURL=Plugin.js.map

package/components/LexicalEditorConfig/components/Plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Property","Plugin","name","element","after","undefined","before","remove","placeBefore","placeAfter","createElement","id","array","value"],"sources":["Plugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\n\nexport interface PluginConfig {\n    name: string;\n    element: React.ReactElement;\n}\n\nexport interface PluginProps {\n    name: string;\n    element?: React.ReactElement<unknown>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const Plugin = ({\n    name,\n    element,\n    after = undefined,\n    before = undefined,\n    remove = false\n}: PluginProps) => {\n    const placeBefore = before !== undefined ? `plugin:${before}` : undefined;\n    const placeAfter = after !== undefined ? `plugin:${after}` : undefined;\n\n    return (\n        <Property\n            id={`plugins:${name}`}\n            name={\"plugins\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`plugin:${name}:name`} name={\"name\"} value={name} />\n            {element ? (\n                <Property id={`plugin:${name}:element`} name={\"element\"} value={element} />\n            ) : null}\n        </Property>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,0BAA0B;AAenD,OAAO,MAAMC,MAAM,GAAGA,CAAC;EACnBC,IAAI;EACJC,OAAO;EACPC,KAAK,GAAGC,SAAS;EACjBC,MAAM,GAAGD,SAAS;EAClBE,MAAM,GAAG;AACA,CAAC,KAAK;EACf,MAAMC,WAAW,GAAGF,MAAM,KAAKD,SAAS,GAAG,UAAUC,MAAM,EAAE,GAAGD,SAAS;EACzE,MAAMI,UAAU,GAAGL,KAAK,KAAKC,SAAS,GAAG,UAAUD,KAAK,EAAE,GAAGC,SAAS;EAEtE,oBACIN,KAAA,CAAAW,aAAA,CAACV,QAAQ;IACLW,EAAE,EAAE,WAAWT,IAAI,EAAG;IACtBA,IAAI,EAAE,SAAU;IAChBU,KAAK,EAAE,IAAK;IACZN,MAAM,EAAEE,WAAY;IACpBJ,KAAK,EAAEK,UAAW;IAClBF,MAAM,EAAEA;EAAO,gBAEfR,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,UAAUT,IAAI,OAAQ;IAACA,IAAI,EAAE,MAAO;IAACW,KAAK,EAAEX;EAAK,CAAE,CAAC,EACjEC,OAAO,gBACJJ,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,UAAUT,IAAI,UAAW;IAACA,IAAI,EAAE,SAAU;IAACW,KAAK,EAAEV;EAAQ,CAAE,CAAC,GAC3E,IACE,CAAC;AAEnB,CAAC","ignoreList":[]}

package/components/LexicalEditorConfig/components/ToolbarElement.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface ToolbarElementConfig {
+    name: string;
+    element: React.ReactElement;
+}
+export interface ToolbarElementProps {
+    name: string;
+    element?: React.ReactElement<unknown>;
+    remove?: boolean;
+    before?: string;
+    after?: string;
+}
+export declare const ToolbarElement: ({ name, element, after, before, remove }: ToolbarElementProps) => React.JSX.Element;

package/components/LexicalEditorConfig/components/ToolbarElement.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Property } from "@webiny/react-properties";
+export const ToolbarElement = ({
+  name,
+  element,
+  after = undefined,
+  before = undefined,
+  remove = false
+}) => {
+  const placeBefore = before !== undefined ? `element:${before}` : undefined;
+  const placeAfter = after !== undefined ? `element:${after}` : undefined;
+  return /*#__PURE__*/React.createElement(Property, {
+    id: `element:${name}`,
+    name: "toolbarElements",
+    array: true,
+    before: placeBefore,
+    after: placeAfter,
+    remove: remove
+  }, /*#__PURE__*/React.createElement(Property, {
+    id: `element:${name}:name`,
+    name: "name",
+    value: name
+  }), element ? /*#__PURE__*/React.createElement(Property, {
+    id: `element:${name}:element`,
+    name: "element",
+    value: element
+  }) : null);
+};
+
+//# sourceMappingURL=ToolbarElement.js.map

package/components/LexicalEditorConfig/components/ToolbarElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Property","ToolbarElement","name","element","after","undefined","before","remove","placeBefore","placeAfter","createElement","id","array","value"],"sources":["ToolbarElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\n\nexport interface ToolbarElementConfig {\n    name: string;\n    element: React.ReactElement;\n}\n\nexport interface ToolbarElementProps {\n    name: string;\n    element?: React.ReactElement<unknown>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const ToolbarElement = ({\n    name,\n    element,\n    after = undefined,\n    before = undefined,\n    remove = false\n}: ToolbarElementProps) => {\n    const placeBefore = before !== undefined ? `element:${before}` : undefined;\n    const placeAfter = after !== undefined ? `element:${after}` : undefined;\n\n    return (\n        <Property\n            id={`element:${name}`}\n            name={\"toolbarElements\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`element:${name}:name`} name={\"name\"} value={name} />\n            {element ? (\n                <Property id={`element:${name}:element`} name={\"element\"} value={element} />\n            ) : null}\n        </Property>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,0BAA0B;AAenD,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAC3BC,IAAI;EACJC,OAAO;EACPC,KAAK,GAAGC,SAAS;EACjBC,MAAM,GAAGD,SAAS;EAClBE,MAAM,GAAG;AACQ,CAAC,KAAK;EACvB,MAAMC,WAAW,GAAGF,MAAM,KAAKD,SAAS,GAAG,WAAWC,MAAM,EAAE,GAAGD,SAAS;EAC1E,MAAMI,UAAU,GAAGL,KAAK,KAAKC,SAAS,GAAG,WAAWD,KAAK,EAAE,GAAGC,SAAS;EAEvE,oBACIN,KAAA,CAAAW,aAAA,CAACV,QAAQ;IACLW,EAAE,EAAE,WAAWT,IAAI,EAAG;IACtBA,IAAI,EAAE,iBAAkB;IACxBU,KAAK,EAAE,IAAK;IACZN,MAAM,EAAEE,WAAY;IACpBJ,KAAK,EAAEK,UAAW;IAClBF,MAAM,EAAEA;EAAO,gBAEfR,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,WAAWT,IAAI,OAAQ;IAACA,IAAI,EAAE,MAAO;IAACW,KAAK,EAAEX;EAAK,CAAE,CAAC,EAClEC,OAAO,gBACJJ,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,WAAWT,IAAI,UAAW;IAACA,IAAI,EAAE,SAAU;IAACW,KAAK,EAAEV;EAAQ,CAAE,CAAC,GAC5E,IACE,CAAC;AAEnB,CAAC","ignoreList":[]}

package/components/LexicalHtmlRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { Klass, LexicalNode } from "lexical";
+import type { CSSObject } from "@emotion/react";
+import type { EditorTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
+import type { LexicalValue } from "../types";
+interface LexicalHtmlRendererProps {
+    nodes?: Klass<LexicalNode>[];
+    value: LexicalValue | null;
+    theme: Partial<EditorTheme>;
+    themeEmotionMap?: ThemeEmotionMap;
+    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;
+}
+export declare const LexicalHtmlRenderer: ({ nodes, value, ...props }: LexicalHtmlRendererProps) => React.JSX.Element;
+export {};

package/components/LexicalHtmlRenderer.js

@@ -0,0 +1,55 @@
+import React, { useRef } from "react";
+import { css } from "emotion";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { allNodes } from "@webiny/lexical-nodes";
+import { createTheme, toTypographyEmotionMap } from "@webiny/lexical-theme";
+import { RichTextEditorProvider } from "../context/RichTextEditorContext";
+import { StateHandlingPlugin } from "../plugins/StateHandlingPlugin";
+export const LexicalHtmlRenderer = ({
+  nodes,
+  value,
+  ...props
+}) => {
+  const theme = {
+    styles: {},
+    emotionMap: {},
+    ...props.theme
+  };
+  const themeEmotionMap = props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);
+  const editorTheme = useRef(createTheme(theme));
+  const initialConfig = {
+    editorState: null,
+    namespace: "webiny",
+    onError: () => {
+      // Ignore errors. We don't want to break the app because of errors caused by config/value updates.
+      // These are usually resolved in the next component render cycle.
+    },
+    editable: false,
+    nodes: [...allNodes, ...(nodes || [])],
+    theme: {
+      ...editorTheme.current,
+      emotionMap: themeEmotionMap,
+      styles: theme.styles
+    }
+  };
+  return /*#__PURE__*/React.createElement(LexicalComposer, {
+    initialConfig: initialConfig,
+    key: initialConfig.nodes.length
+  }, /*#__PURE__*/React.createElement(RichTextEditorProvider, {
+    theme: theme,
+    themeEmotionMap: themeEmotionMap
+  }, /*#__PURE__*/React.createElement(RichTextPlugin, {
+    contentEditable: /*#__PURE__*/React.createElement("div", {
+      className: "editor"
+    }, /*#__PURE__*/React.createElement(ContentEditable, null)),
+    ErrorBoundary: LexicalErrorBoundary,
+    placeholder: null
+  }), /*#__PURE__*/React.createElement(StateHandlingPlugin, {
+    value: value
+  })));
+};
+
+//# sourceMappingURL=LexicalHtmlRenderer.js.map

package/components/LexicalHtmlRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","css","LexicalComposer","RichTextPlugin","ContentEditable","LexicalErrorBoundary","allNodes","createTheme","toTypographyEmotionMap","RichTextEditorProvider","StateHandlingPlugin","LexicalHtmlRenderer","nodes","value","props","theme","styles","emotionMap","themeEmotionMap","themeStylesTransformer","editorTheme","initialConfig","editorState","namespace","onError","editable","current","createElement","key","length","contentEditable","className","ErrorBoundary","placeholder"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { css } from \"emotion\";\nimport type { CSSObject } from \"@emotion/react\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { EditorTheme, ThemeEmotionMap } from \"@webiny/lexical-theme\";\nimport { createTheme, toTypographyEmotionMap } from \"@webiny/lexical-theme\";\nimport type { LexicalValue } from \"~/types\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: Partial<EditorTheme>;\n    themeEmotionMap?: ThemeEmotionMap;\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n    const theme: EditorTheme = { styles: {}, emotionMap: {}, ...props.theme };\n    const themeEmotionMap =\n        props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);\n    const editorTheme = useRef(createTheme(theme));\n\n    const initialConfig = {\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        editable: false,\n        nodes: [...allNodes, ...(nodes || [])],\n        theme: { ...editorTheme.current, emotionMap: themeEmotionMap, styles: theme.styles }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <RichTextEditorProvider theme={theme} themeEmotionMap={themeEmotionMap}>\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor\">\n                            <ContentEditable />\n                        </div>\n                    }\n                    ErrorBoundary={LexicalErrorBoundary}\n                    placeholder={null}\n                />\n                <StateHandlingPlugin value={value} />\n            </RichTextEditorProvider>\n        </LexicalComposer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AAErC,SAASC,GAAG,QAAQ,SAAS;AAE7B,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,sCAAsC;AACrE,SAASC,eAAe,QAAQ,uCAAuC;AACvE,OAAOC,oBAAoB,MAAM,qCAAqC;AACtE,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,WAAW,EAAEC,sBAAsB,QAAQ,uBAAuB;AAE3E,SAASC,sBAAsB;AAC/B,SAASC,mBAAmB;AAU5B,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACzF,MAAMC,KAAkB,GAAG;IAAEC,MAAM,EAAE,CAAC,CAAC;IAAEC,UAAU,EAAE,CAAC,CAAC;IAAE,GAAGH,KAAK,CAACC;EAAM,CAAC;EACzE,MAAMG,eAAe,GACjBJ,KAAK,EAAEI,eAAe,IAAIV,sBAAsB,CAACP,GAAG,EAAEc,KAAK,EAAED,KAAK,CAACK,sBAAsB,CAAC;EAC9F,MAAMC,WAAW,GAAGpB,MAAM,CAACO,WAAW,CAACQ,KAAK,CAAC,CAAC;EAE9C,MAAMM,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAI;IACjBC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAEA,CAAA,KAAM;MACX;MACA;IAAA,CACH;IACDC,QAAQ,EAAE,KAAK;IACfb,KAAK,EAAE,CAAC,GAAGN,QAAQ,EAAE,IAAIM,KAAK,IAAI,EAAE,CAAC,CAAC;IACtCG,KAAK,EAAE;MAAE,GAAGK,WAAW,CAACM,OAAO;MAAET,UAAU,EAAEC,eAAe;MAAEF,MAAM,EAAED,KAAK,CAACC;IAAO;EACvF,CAAC;EAED,oBACIjB,KAAA,CAAA4B,aAAA,CAACzB,eAAe;IAACmB,aAAa,EAAEA,aAAc;IAACO,GAAG,EAAEP,aAAa,CAACT,KAAK,CAACiB;EAAO,gBAC3E9B,KAAA,CAAA4B,aAAA,CAAClB,sBAAsB;IAACM,KAAK,EAAEA,KAAM;IAACG,eAAe,EAAEA;EAAgB,gBACnEnB,KAAA,CAAA4B,aAAA,CAACxB,cAAc;IACX2B,eAAe,eACX/B,KAAA,CAAA4B,aAAA;MAAKI,SAAS,EAAC;IAAQ,gBACnBhC,KAAA,CAAA4B,aAAA,CAACvB,eAAe,MAAE,CACjB,CACR;IACD4B,aAAa,EAAE3B,oBAAqB;IACpC4B,WAAW,EAAE;EAAK,CACrB,CAAC,eACFlC,KAAA,CAAA4B,aAAA,CAACjB,mBAAmB;IAACG,KAAK,EAAEA;EAAM,CAAE,CAChB,CACX,CAAC;AAE1B,CAAC","ignoreList":[]}

package/components/Toolbar/StaticToolbar.css

@@ -0,0 +1,260 @@
+.static-toolbar {
+  display: flex;
+  position: relative;
+  padding: 4px;
+  vertical-align: middle;
+  border: 1px solid #eee;
+  will-change: transform;
+  background: #fff;
+  flex-wrap: wrap;
+  z-index: 1;
+}
+
+.static-toolbar button.popup-item {
+  border: 0;
+  display: flex;
+  background: #fff;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.static-toolbar button.popup-item:disabled {
+  cursor: not-allowed;
+}
+
+.static-toolbar button.popup-item.spaced {
+  margin-right: 2px;
+}
+
+.static-toolbar button.popup-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  margin-top: 2px;
+  vertical-align: -0.25em;
+  display: flex;
+}
+
+.static-toolbar button.popup-item:disabled i.format {
+  opacity: 0.2;
+}
+
+.static-toolbar button.popup-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.static-toolbar button.popup-item.active i {
+  opacity: 1;
+}
+
+.static-toolbar .popup-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.static-toolbar select.popup-item {
+  border: 0;
+  display: flex;
+  border-radius: 10px;
+  padding: 8px;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 70px;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+}
+
+.static-toolbar select.code-language {
+  text-transform: capitalize;
+  width: 130px;
+}
+
+.static-toolbar .popup-item .text {
+  display: flex;
+  line-height: 20px;
+  width: 200px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  width: 70px;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+}
+
+.static-toolbar .popup-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.static-toolbar i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.static-toolbar i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.static-toolbar .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+.static-toolbar .icon.bullet-list,
+.static-toolbar .icon.bullet {
+  background-image: url("../../images/icons/list-ul.svg");
+}
+
+.static-toolbar .icon.numbered-list,
+.static-toolbar .icon.number {
+  background-image: url("../../images/icons/list-ol.svg");
+}
+
+.static-toolbar .link-editor .button.active,
+.static-toolbar .button.active {
+  background-color: rgb(223, 232, 250);
+}
+
+.static-toolbar button.toolbar-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.static-toolbar button.toolbar-item:disabled {
+  cursor: not-allowed;
+}
+
+.static-toolbar button.toolbar-item.spaced {
+  margin-right: 2px;
+}
+
+.static-toolbar button.toolbar-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.static-toolbar button.toolbar-item:disabled .icon,
+.static-toolbar button.toolbar-item:disabled .text,
+.static-toolbar button.toolbar-item:disabled i.format,
+.static-toolbar button.toolbar-item:disabled .chevron-down {
+  opacity: 0.2;
+}
+
+.static-toolbar button.toolbar-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.static-toolbar button.toolbar-item.active i {
+  opacity: 1;
+}
+
+.static-toolbar .toolbar-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.static-toolbar .toolbar-item.font-family .text {
+  display: block;
+  max-width: 40px;
+}
+
+.static-toolbar .code-language {
+  width: 150px;
+}
+
+.static-toolbar .toolbar-item .text {
+  display: flex;
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+  padding-right: 10px;
+}
+
+.static-toolbar .toolbar-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.static-toolbar i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.static-toolbar i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.static-toolbar .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+.lexical-dropdown-container {
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+}
+
+.static-toolbar button.item i {
+  opacity: 0.6;
+}
+
+.static-toolbar button.item.dropdown-item-active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.static-toolbar button.item.dropdown-item-active i {
+  opacity: 1;
+}

package/components/Toolbar/StaticToolbar.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./StaticToolbar.css";
+export declare const StaticToolbar: ({ className }: {
+    className?: string | undefined;
+}) => React.JSX.Element;

package/components/Toolbar/StaticToolbar.js

@@ -0,0 +1,22 @@
+import React, { Fragment } from "react";
+import "./StaticToolbar.css";
+import { useLexicalEditorConfig } from "../LexicalEditorConfig/LexicalEditorConfig";
+import { useRichTextEditor } from "../../hooks";
+export const StaticToolbar = ({
+  className
+}) => {
+  const {
+    toolbarElements
+  } = useLexicalEditorConfig();
+  const {
+    editor
+  } = useRichTextEditor();
+  return /*#__PURE__*/React.createElement("div", {
+    className: className ?? "static-toolbar",
+    "data-role": "toolbar"
+  }, editor.isEditable() && /*#__PURE__*/React.createElement(React.Fragment, null, toolbarElements.map(action => /*#__PURE__*/React.createElement(Fragment, {
+    key: action.name
+  }, action.element))));
+};
+
+//# sourceMappingURL=StaticToolbar.js.map

package/components/Toolbar/StaticToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","useLexicalEditorConfig","useRichTextEditor","StaticToolbar","className","toolbarElements","editor","createElement","isEditable","map","action","key","name","element"],"sources":["StaticToolbar.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport \"./StaticToolbar.css\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const StaticToolbar = ({ className }: { className?: string }) => {\n    const { toolbarElements } = useLexicalEditorConfig();\n    const { editor } = useRichTextEditor();\n\n    return (\n        <div className={className ?? \"static-toolbar\"} data-role={\"toolbar\"}>\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC;AACA,SAASC,sBAAsB;AAC/B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAkC,CAAC,KAAK;EACpE,MAAM;IAAEC;EAAgB,CAAC,GAAGJ,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEK;EAAO,CAAC,GAAGJ,iBAAiB,CAAC,CAAC;EAEtC,oBACIH,KAAA,CAAAQ,aAAA;IAAKH,SAAS,EAAEA,SAAS,IAAI,gBAAiB;IAAC,aAAW;EAAU,GAC/DE,MAAM,CAACE,UAAU,CAAC,CAAC,iBAChBT,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAC,QAAA,QACKK,eAAe,CAACI,GAAG,CAACC,MAAM,iBACvBX,KAAA,CAAAQ,aAAA,CAACP,QAAQ;IAACW,GAAG,EAAED,MAAM,CAACE;EAAK,GAAEF,MAAM,CAACG,OAAkB,CACzD,CACH,CAEL,CAAC;AAEd,CAAC","ignoreList":[]}