npm - @springmicro/rte - Versions diffs - 0.1.3 - Mend

@springmicro/rte 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/.eslintrc.cjs +18 -0
package/README.md +15 -0
package/dist/index.d.ts +10 -0
package/dist/index.js +63921 -0
package/dist/index.umd.cjs +469 -0
package/dist/style.css +1 -0
package/index.html +13 -0
package/package.json +54 -0
package/src/App.css +42 -0
package/src/App.tsx +10 -0
package/src/contexts/color-context.tsx +53 -0
package/src/hooks/useSimpleFormik.tsx +74 -0
package/src/index.css +68 -0
package/src/index.tsx +3 -0
package/src/main.tsx +10 -0
package/src/slate/base-editor.stories.tsx +16 -0
package/src/slate/base-editor.tsx +116 -0
package/src/slate/blog-rte.stories.tsx +16 -0
package/src/slate/blog-rte.tsx +126 -0
package/src/slate/common/button.tsx +35 -0
package/src/slate/common/element.tsx +13 -0
package/src/slate/common/icon.jsx +97 -0
package/src/slate/components/code-to-text/CodeToTextButton.jsx +19 -0
package/src/slate/components/code-to-text/HtmlCode.jsx +64 -0
package/src/slate/components/code-to-text/HtmlContextMenu.jsx +39 -0
package/src/slate/components/code-to-text/index.jsx +111 -0
package/src/slate/components/color-picker/color-cursor.stories.tsx +16 -0
package/src/slate/components/color-picker/color-cursor.tsx +34 -0
package/src/slate/components/color-picker/color-formats-view.stories.tsx +25 -0
package/src/slate/components/color-picker/color-formats-view.tsx +115 -0
package/src/slate/components/color-picker/color-gradient.stories.tsx +48 -0
package/src/slate/components/color-picker/color-gradient.tsx +128 -0
package/src/slate/components/color-picker/color-hue.stories.tsx +41 -0
package/src/slate/components/color-picker/color-hue.tsx +110 -0
package/src/slate/components/color-picker/color-picker.stories.tsx +25 -0
package/src/slate/components/color-picker/color-picker.tsx +41 -0
package/src/slate/components/color-picker/color-popover.stories.tsx +26 -0
package/src/slate/components/color-picker/color-popover.tsx +58 -0
package/src/slate/components/color-picker/color-swatch.stories.tsx +16 -0
package/src/slate/components/color-picker/color-swatch.tsx +76 -0
package/src/slate/components/color-picker/default-colors.ts +38 -0
package/src/slate/components/color-picker/slate-color-button.tsx +128 -0
package/src/slate/components/embed/Embed.jsx +96 -0
package/src/slate/components/embed/Image.jsx +45 -0
package/src/slate/components/embed/Video.jsx +65 -0
package/src/slate/components/equation/Equation.jsx +19 -0
package/src/slate/components/equation/EquationButton.jsx +68 -0
package/src/slate/components/id/Id.jsx +57 -0
package/src/slate/components/image/image.stories.tsx +17 -0
package/src/slate/components/image/image.tsx +62 -0
package/src/slate/components/image/insert-image-button.stories.tsx +83 -0
package/src/slate/components/image/insert-image-button.tsx +132 -0
package/src/slate/components/image/types.ts +9 -0
package/src/slate/components/link/Link.jsx +56 -0
package/src/slate/components/link/LinkButton.tsx +106 -0
package/src/slate/components/table/Table.jsx +11 -0
package/src/slate/components/table/TableSelector.jsx +97 -0
package/src/slate/components/table-context-menu/TableContextMenu.tsx +106 -0
package/src/slate/custom-types.d.ts +152 -0
package/src/slate/editor.module.css +226 -0
package/src/slate/paper-rte.stories.tsx +16 -0
package/src/slate/paper-rte.tsx +47 -0
package/src/slate/plugins/withEmbeds.js +33 -0
package/src/slate/plugins/withEquation.js +8 -0
package/src/slate/plugins/withImages.ts +69 -0
package/src/slate/plugins/withLinks.js +9 -0
package/src/slate/plugins/withTable.js +74 -0
package/src/slate/serializers/generic.ts +44 -0
package/src/slate/serializers/types.ts +20 -0
package/src/slate/toolbar/index.tsx +186 -0
package/src/slate/toolbar/paper-toolbar.tsx +494 -0
package/src/slate/toolbar/shortcuts.tsx +77 -0
package/src/slate/toolbar/toolbar-groups.ts +213 -0
package/src/slate/types/index.ts +0 -0
package/src/slate/utils/customHooks/useContextMenu.js +42 -0
package/src/slate/utils/customHooks/useFormat.js +26 -0
package/src/slate/utils/customHooks/usePopup.jsx +26 -0
package/src/slate/utils/customHooks/useResize.js +27 -0
package/src/slate/utils/embed.js +18 -0
package/src/slate/utils/equation.js +22 -0
package/src/slate/utils/index.jsx +267 -0
package/src/slate/utils/link.js +44 -0
package/src/slate/utils/p.js +4 -0
package/src/slate/utils/table.js +131 -0
package/src/vite-env.d.ts +1 -0
package/tsconfig.json +32 -0
package/tsconfig.node.json +10 -0
package/vite.config.ts +41 -0

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ ._popupWrapper_g4nbi_3{display:inline;position:relative}._popup_g4nbi_3{position:absolute;left:0;background-color:#fff;padding:6px 10px;border:1px solid #e6e8f0;height:fit-content;z-index:1000}._editorWrapper_g4nbi_29{border-radius:8px;min-height:100px;min-width:100%;width:fit-content;height:fit-content;margin-top:6px;border:1px solid #e6e8f0;padding:0 10px}._editorWrapper_g4nbi_29>div:focus-visible{border:none;outline:none}._slate_g4nbi_59 blockquote{border-left:2px solid #ddd;margin-left:0;margin-right:0;padding-left:10px;color:#aaa;font-style:italic}._slate_g4nbi_59 table,._slate_g4nbi_59 th,._slate_g4nbi_59 td{border:1px solid black}._slate_g4nbi_59 table{border-collapse:collapse}._slate_g4nbi_59 button{background-color:#fff;border:none;opacity:.5}._slate_g4nbi_59 ._btnActive_g4nbi_101{opacity:1}._slate_g4nbi_59 table{width:100%}._slate_g4nbi_59 td{height:50px;padding:0 5px}._slate_g4nbi_59 ul,._slate_g4nbi_59 ol{padding-left:1rem}._slate_g4nbi_59 button{cursor:pointer}._slate_g4nbi_59 code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}._slate_g4nbi_59 [data-slate-node=element]:not(li){margin:10px 0}._slate_g4nbi_59 ._code-wrapper_g4nbi_157{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000e6;z-index:2;display:flex;justify-content:center;align-items:center}._slate_g4nbi_59 ._codeToTextWrapper_g4nbi_181{width:80%;height:80%;grid-template-columns:45% 10% 45%}._slate_g4nbi_59 ._codeToText_g4nbi_181{width:100%;height:90%;display:grid;grid-template-columns:45% 10% 45%}._slate_g4nbi_59 ._codeToText_g4nbi_181 textarea,._textOutput_g4nbi_205{border-radius:15px;padding:10px}._slate_g4nbi_59 ._codeToText_g4nbi_181 textarea{resize:none}._slate_g4nbi_59 ._codeToText_g4nbi_181 textarea:focus{outline:none}._slate_g4nbi_59 ._textOutput_g4nbi_205{background:#fff;overflow:scroll}._slate_g4nbi_59 ._codeToTextWrapper_g4nbi_181 button{margin:3% 1%;padding:10px 37px;cursor:pointer;border-radius:5px;opacity:1;font-weight:bolder}._slate_g4nbi_59 ._done_g4nbi_251{background:#3fc79a;color:#fff}._slate_g4nbi_59 ._clear_g4nbi_259{background:#fff;color:#a9a4a4;border:1px solid #e6e8f0}._slate_g4nbi_59 ._embed_g4nbi_273{width:fit-content;position:relative;margin-right:20px}._slate_g4nbi_59 ._embed_g4nbi_273 img,._slate_g4nbi_59 ._embed_g4nbi_273 iframe{width:100%;height:100%}._slate_g4nbi_59 ._embed_g4nbi_273 button{position:absolute;bottom:-6px;right:0}._slate_g4nbi_59 ._equation-inline_g4nbi_307{display:inline;position:relative}._slate_g4nbi_59 ._table-option_g4nbi_319{display:flex;margin:5px 2px;gap:5px}._slate_g4nbi_59 ._table-option_g4nbi_319{white-space:nowrap}._slate_g4nbi_59 ._table-input_g4nbi_335{display:grid;grid-template-columns:auto auto auto auto auto auto;gap:3px}._slate_g4nbi_59 ._table-unit_g4nbi_345{width:15px;height:15px;border:1px solid #e6e8f0}._slate_g4nbi_59 ._contextMenu_g4nbi_359{width:fit-content;height:fit-content;position:fixed;background:#fff;border:1px solid #e6e8f0;border-radius:10px;padding:.5%;display:flex;gap:15px;flex-direction:column;cursor:pointer}._slate_g4nbi_59 ._menuOption_g4nbi_385{display:flex;gap:15px}._slate_g4nbi_59 ._toolbar_g4nbi_397{border-radius:10px;background:#fff;box-shadow:-8px 8px 13px #ededed,8px -8px 13px #fff;margin:5% 0;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:15px 10px;row-gap:15px;position:-webkit-sticky;position:sticky;top:0;z-index:2}._slate_g4nbi_59 ._toolbar-grp_g4nbi_429>*{margin-right:10px;cursor:pointer}._slate_g4nbi_59 ._toolbar-grp_g4nbi_429{margin:0 10px}._slate_g4nbi_59 select{height:30px;border:none;width:6.9rem}

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,54 @@
+{
+  "name": "@springmicro/rte",
+  "version": "0.1.3",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "rm -rf dist && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.0.0",
+    "@springmicro/utils": "^0.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-icons": "^5.0.0"
+  },
+  "dependencies": {
+    "@springmicro/utils": "^0.1.3",
+    "@uiw/react-textarea-code-editor": "^3.0.2",
+    "domhandler": "^5.0.3",
+    "escape-html": "^1.0.3",
+    "html-to-rtf": "^2.1.0",
+    "interweave": "^13.1.0",
+    "is-url": "^1.2.4",
+    "react-katex": "^3.0.1",
+    "slate": "^0.103.0",
+    "slate-history": "^0.100.0",
+    "slate-react": "^0.104.0",
+    "slate-serializers": "^2.1.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.8",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.0"
+  },
+  "gitHead": "d09e3906681dadcf2680775e01a1aabc35b82812"
+}

package/src/App.css ADDED Viewed

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { useState } from "react";
+import "./App.css";
+function App() {
+  const [count, setCount] = useState(0);
+  return <></>;
+}
+export default App;

package/src/contexts/color-context.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+import * as React from "react";
+import {
+  // FontMetadata,
+  // PagesType,
+  // LayoutsType,
+  ColorFormats,
+} from "@springmicro/utils/types";
+import {
+  colorStringToColorFormats,
+  // defaultSelectedColors,
+  // defaultSelectedFonts,
+} from "@springmicro/utils/editor";
+export const ColorContext = React.createContext({
+  colorFormats: colorStringToColorFormats("#ffffff") as ColorFormats,
+  setColorFormats: ((colorFormats: ColorFormats) => {}) as React.Dispatch<
+    React.SetStateAction<ColorFormats>
+  >,
+});
+export function ColorProvider({
+  initialColor,
+  colorChangeCallback,
+  children,
+}: React.PropsWithChildren<{
+  initialColor: string;
+  colorChangeCallback?: (color: string) => void;
+}>) {
+  const [colorFormats, setColorFormats] = React.useState(
+    colorStringToColorFormats(initialColor)
+  );
+  React.useEffect(() => {
+    setColorFormats(colorStringToColorFormats(initialColor));
+  }, [initialColor]);
+  React.useEffect(() => {
+    // the callback updates the selectedColors for the site
+    if (colorChangeCallback && initialColor !== "#" + colorFormats.hex) {
+      colorChangeCallback("#" + colorFormats.hex);
+    }
+  }, [colorFormats]);
+  const value = {
+    colorFormats,
+    setColorFormats,
+  };
+  return (
+    <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
+  );
+}

package/src/hooks/useSimpleFormik.tsx ADDED Viewed

@@ -0,0 +1,74 @@
+// drop-in replacement for formik and Yup
+// in the minimum way we use it in color-formats-view.tsx
+import { useState, useCallback, ChangeEvent, FocusEvent } from "react";
+interface FormikValues {
+  [key: string]: any;
+}
+interface FormikValidators {
+  [key: string]: {
+    fn: (value: any) => boolean;
+    msg: string;
+  };
+}
+interface UseSimpleFormik<T> {
+  errors: Record<string, undefined | string>;
+  values: T;
+  setValues: React.Dispatch<React.SetStateAction<T>>;
+  handleChange: (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  handleBlur: (
+    event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+}
+const useSimpleFormik = <T extends FormikValues>(
+  initialValues: T,
+  validators: FormikValidators
+): UseSimpleFormik<T> => {
+  const [values, setValues] = useState<T>(initialValues);
+  const [errors, setErrors] = useState(
+    Object.fromEntries(
+      Object.entries(initialValues).map(([k, _]) => [k, undefined])
+    )
+  );
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const { name, value } = event.target;
+      if (validators[name]?.fn(value) === false) {
+        setErrors((prevValues) => ({
+          ...prevValues,
+          [name]: validators[name].msg,
+        }));
+      }
+      setValues((prevValues) => ({
+        ...prevValues,
+        [name]: value,
+      }));
+    },
+    []
+  );
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const { name } = event.target;
+      // Here you can handle the blur event, e.g., setting touched fields if needed
+      console.log(`${name} field blurred`);
+    },
+    []
+  );
+  return {
+    errors,
+    values,
+    setValues,
+    handleChange,
+    handleBlur,
+  };
+};
+export default useSimpleFormik;

package/src/index.css ADDED Viewed

@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/index.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+import { PaperEditor } from "./slate/paper-rte";
+export { PaperEditor };

package/src/main.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/src/slate/base-editor.stories.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import { SlateEditor, SlateEditorProps } from "./base-editor";
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "Slate/Slate Editor Base",
+  component: SlateEditor,
+} as Meta<typeof SlateEditor>;
+export const Primary = {
+  args: { readOnly: false } as SlateEditorProps,
+};

package/src/slate/base-editor.tsx ADDED Viewed

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { Descendant, createEditor } from "slate";
+import { withHistory } from "slate-history";
+import {
+  Slate,
+  Editable,
+  withReact,
+  RenderLeafProps,
+  RenderElementProps,
+} from "slate-react";
+import Toolbar from "./toolbar";
+import { getMarked, getBlock } from "./utils";
+import withLinks from "./plugins/withLinks.js";
+import withTables from "./plugins/withTable.js";
+import withEmbeds from "./plugins/withEmbeds.js";
+import withEquation from "./plugins/withEquation.js";
+import styles from "./editor.module.css";
+import CodeToText from "./components/code-to-text";
+import { issuesToolbarGroups } from "./toolbar/toolbar-groups";
+import { Element } from "./common/element";
+import { ScopedCssBaseline } from "@mui/material";
+// import { serialize } from "./utils/serializer"
+export type SlateEditorProps = {
+  value?: Descendant[];
+  setValue?: React.Dispatch<React.SetStateAction<Descendant[]>>;
+  readOnly: boolean;
+};
+const Leaf = ({ attributes, children, leaf }: RenderLeafProps) => {
+  children = getMarked(leaf, children);
+  return <span {...attributes}>{children}</span>;
+};
+export function SlateEditor(props: SlateEditorProps) {
+  const { readOnly } = props;
+  const initialValue = props.value || [
+    {
+      type: "p",
+      children: [{ text: "" }],
+    },
+  ];
+  const [value, setValue] = React.useState(initialValue);
+  const [htmlAction, setHtmlAction] = React.useState({
+    showInput: false,
+    html: "",
+    action: "",
+    location: "",
+  });
+  const editor = React.useMemo(
+    () =>
+      withEquation(
+        withHistory(
+          withEmbeds(withTables(withLinks(withReact(createEditor()))))
+        )
+      ),
+    []
+  );
+  const renderElement = React.useCallback(
+    (props: RenderElementProps) => <Element {...props} />,
+    []
+  );
+  const renderLeaf = React.useCallback((props: RenderLeafProps) => {
+    return <Leaf {...props} />;
+  }, []);
+  const handleEditorChange = (newValue: Descendant[]) => {
+    if (props.setValue) {
+      props.setValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+  };
+  const handleCodeToText = (partialState: any) => {
+    setHtmlAction((prev) => ({
+      ...prev,
+      ...partialState,
+    }));
+  };
+  return (
+    <div className={styles.slate}>
+      <ScopedCssBaseline>
+        <Slate
+          editor={editor}
+          initialValue={props.value !== undefined ? props.value : value}
+          onChange={handleEditorChange}
+        >
+          {!readOnly && (
+            <Toolbar
+              handleCodeToText={handleCodeToText}
+              toolbarGroups={issuesToolbarGroups}
+            />
+          )}
+          <div className={readOnly ? "" : styles.editorWrapper}>
+            <Editable
+              placeholder="Write something"
+              renderElement={renderElement}
+              renderLeaf={renderLeaf}
+              readOnly={props.readOnly}
+              spellCheck={true}
+            />
+          </div>
+          {htmlAction.showInput && (
+            <CodeToText {...htmlAction} handleCodeToText={handleCodeToText} />
+          )}
+        </Slate>
+      </ScopedCssBaseline>
+    </div>
+  );
+}

package/src/slate/blog-rte.stories.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import { BlogEditor, BlogEditorProps } from "./blog-rte"
+import React from "react"
+import { StoryFn, Meta } from "@storybook/react"
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "Slate/Blog Editor",
+  component: BlogEditor,
+} as Meta<typeof BlogEditor>
+export const Primary = {
+  args: { readOnly: false } as BlogEditorProps,
+}

package/src/slate/blog-rte.tsx ADDED Viewed

@@ -0,0 +1,126 @@
+import * as React from "react";
+import { Box, ScopedCssBaseline } from "@mui/material";
+import { BaseEditor, Descendant, createEditor } from "slate";
+import { withHistory } from "slate-history";
+import {
+  Slate,
+  Editable,
+  withReact,
+  RenderLeafProps,
+  RenderElementProps,
+  ReactEditor,
+} from "slate-react";
+import Toolbar from "./toolbar";
+import { getMarked, getBlock } from "./utils";
+import withLinks from "./plugins/withLinks.js";
+import withTables from "./plugins/withTable.js";
+import withEmbeds from "./plugins/withEmbeds.js";
+import withEquation from "./plugins/withEquation.js";
+import withImages from "./plugins/withImages";
+import styles from "./editor.module.css";
+import CodeToText from "./components/code-to-text";
+import { blogToolbarGroups } from "./toolbar/toolbar-groups";
+import { Element } from "./common/element";
+export type BlogEditorProps = {
+  value?: Descendant[];
+  setValue?: React.Dispatch<React.SetStateAction<Descendant[]>>;
+  readOnly: boolean;
+  editor?: BaseEditor & ReactEditor;
+};
+const Leaf = ({ attributes, children, leaf }: RenderLeafProps) => {
+  children = getMarked(leaf, children);
+  return <span {...attributes}>{children}</span>;
+};
+export function BlogEditor(props: BlogEditorProps) {
+  const { readOnly } = props;
+  const initialValue = props.value || [
+    {
+      type: "p",
+      children: [{ text: "" }],
+    },
+  ];
+  const [value, setValue] = React.useState(initialValue);
+  const [htmlAction, setHtmlAction] = React.useState({
+    showInput: false,
+    html: "",
+    action: "",
+    location: "",
+  });
+  const editor =
+    props.editor ||
+    React.useMemo(
+      () =>
+        withImages(
+          withEquation(
+            withHistory(
+              withEmbeds(withTables(withLinks(withReact(createEditor()))))
+            )
+          )
+        ),
+      []
+    );
+  const renderElement = React.useCallback(
+    (props: RenderElementProps) => <Element {...props} />,
+    []
+  );
+  const renderLeaf = React.useCallback((props: RenderLeafProps) => {
+    return <Leaf {...props} />;
+  }, []);
+  const handleEditorChange = (newValue: Descendant[]) => {
+    // console.log(newValue)
+    if (props.setValue) {
+      props.setValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+  };
+  const handleCodeToText = (partialState: any) => {
+    setHtmlAction((prev) => ({
+      ...prev,
+      ...partialState,
+    }));
+  };
+  return (
+    <div className={styles.slate}>
+      <ScopedCssBaseline>
+        <Slate
+          editor={editor}
+          initialValue={props.value ? props.value : value}
+          onChange={handleEditorChange}
+        >
+          {!readOnly && (
+            <Toolbar
+              handleCodeToText={handleCodeToText}
+              toolbarGroups={blogToolbarGroups}
+            />
+          )}
+          <Box
+            className={readOnly ? "" : styles.editorWrapper}
+            sx={{ minHeight: 400 }}
+          >
+            <Editable
+              placeholder="Write something"
+              renderElement={renderElement}
+              renderLeaf={renderLeaf}
+              readOnly={props.readOnly}
+              spellCheck={true}
+            />
+          </Box>
+          {htmlAction.showInput && (
+            <CodeToText {...htmlAction} handleCodeToText={handleCodeToText} />
+          )}
+        </Slate>
+      </ScopedCssBaseline>
+    </div>
+  );
+}

package/src/slate/common/button.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Box, useTheme } from "@mui/material";
+import { snakeToTitle } from "@springmicro/utils/string";
+import { getShortcutKey } from "../toolbar/shortcuts";
+const Button = (props: React.PropsWithChildren<any>) => {
+  const theme = useTheme();
+  const { children, format, active, ...rest } = props;
+  const [key, combo] = getShortcutKey(format, true);
+  const title =
+    key && combo
+      ? `${snakeToTitle(format)} (${combo}+${key.toUpperCase()})`
+      : snakeToTitle(format);
+  return (
+    <Box
+      component="button"
+      title={title}
+      {...rest}
+      sx={{
+        width: "30px",
+        height: "20px",
+        margin: "0 2px",
+        paddingBottom: "24px",
+        borderBottom: active
+          ? `2px solid ${theme.palette.primary.main} !important`
+          : "",
+        ...rest.sx,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+export default Button;

package/src/slate/common/element.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import Image from "../components/image/image";
+import { getBlock } from "../utils";
+export const Element = (props: any) => {
+  const { attributes, children, element } = props;
+  switch (element.type) {
+    case "image":
+      return <Image {...props} />;
+    default:
+      return getBlock(props);
+  }
+};