@springmicro/rte 0.1.3

package/src/slate/paper-rte.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Descendant, createEditor } from "slate";
+import { withReact } from "slate-react";
+import { BlogEditor, BlogEditorProps } from "./blog-rte";
+import { PaperToolbar } from "./toolbar/paper-toolbar";
+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 { withHistory } from "slate-history";
+
+export type PaperEditorProps = {
+  value?: Descendant[];
+};
+
+export function PaperEditor(props: PaperEditorProps) {
+  const [value, setValue] = React.useState(
+    props.value ||
+      ([
+        {
+          type: "p",
+          children: [{ text: "" }],
+        },
+      ] as Descendant[])
+  );
+  const editor = React.useMemo(
+    () =>
+      withEquation(
+        withHistory(
+          withEmbeds(withTables(withLinks(withReact(createEditor()))))
+        )
+      ),
+    []
+  );
+
+  return (
+    <>
+      <PaperToolbar editor={editor} value={value} />
+      <BlogEditor
+        readOnly={false}
+        value={value}
+        setValue={setValue}
+        editor={editor}
+      />
+    </>
+  );
+}

package/src/slate/plugins/withEmbeds.js

@@ -0,0 +1,33 @@
+import { Transforms, Path, Node } from "slate"
+
+const withEmbeds = (editor) => {
+  const { isVoid, insertBreak } = editor
+
+  editor.isVoid = (element) =>
+    ["video", "image", "htmlCode"].includes(element.type) ? true : isVoid(element)
+
+  editor.insertBreak = (...args) => {
+    const parentPath = Path.parent(editor.selection.focus.path)
+    const parentNode = Node.get(editor, parentPath)
+    // console.log(parentNode);
+    if (editor.isVoid(parentNode)) {
+      const nextPath = Path.next(parentPath)
+      Transforms.insertNodes(
+        editor,
+        {
+          type: "p",
+          children: [{ text: "" }],
+        },
+        {
+          at: nextPath,
+          select: true, // Focus on this node once inserted
+        }
+      )
+    } else {
+      insertBreak(...args)
+    }
+  }
+  return editor
+}
+
+export default withEmbeds

package/src/slate/plugins/withEquation.js

@@ -0,0 +1,8 @@
+const withEquation = (editor) =>{
+    const { isInline } = editor;
+    editor.isInline = (element) =>
+        element.type === 'equation' && element.inline ? true : isInline(element)
+    return editor;
+}
+
+export default withEquation;

package/src/slate/plugins/withImages.ts

@@ -0,0 +1,69 @@
+import {
+  Descendant,
+  BaseEditor,
+  BaseRange,
+  Range,
+  Element,
+  Transforms,
+  BaseElement,
+  Editor,
+} from "slate";
+import { ImageElement } from "../components/image/types";
+import { ReactEditor } from "slate-react";
+import { HistoryEditor } from "slate-history";
+// @ts-ignore
+import imageExtensions from "image-extensions";
+import isUrl from "is-url";
+
+export const isImageUrl = (url: string) => {
+  if (!url) return false;
+  if (!isUrl(url)) return false;
+  return true;
+  // const ext = new URL(url).pathname.split(".").pop();
+  // return imageExtensions.includes(ext);
+};
+
+const insertImage = (editor: Editor, url: string) => {
+  const text = { text: "" };
+  const image: ImageElement = { type: "image", url, children: [text] };
+  Transforms.insertNodes(editor, image);
+};
+
+const withImages = (editor: Editor) => {
+  const { insertData, isVoid } = editor;
+
+  editor.isVoid = (element: BaseElement) => {
+    // @ts-ignore
+    return element.type === "image" ? true : isVoid(element);
+  };
+
+  editor.insertData = (data) => {
+    const text = data.getData("text/plain");
+    const { files } = data;
+
+    if (files && files.length > 0) {
+      // @ts-ignore
+      for (const file of files) {
+        const reader = new FileReader();
+        const [mime] = file.type.split("/");
+
+        if (mime === "image") {
+          reader.addEventListener("load", () => {
+            const url = reader.result;
+            insertImage(editor, url as string);
+          });
+
+          reader.readAsDataURL(file);
+        }
+      }
+    } else if (isImageUrl(text)) {
+      insertImage(editor, text);
+    } else {
+      insertData(data);
+    }
+  };
+
+  return editor;
+};
+
+export default withImages;

package/src/slate/plugins/withLinks.js

@@ -0,0 +1,9 @@
+const withLinks = (editor)=>{
+
+    const { isInline } = editor;
+    editor.isInline = (element) => 
+        element.type === 'link' ? true :isInline(element);
+    return editor;
+};
+
+export default withLinks;

package/src/slate/plugins/withTable.js

@@ -0,0 +1,74 @@
+import { Editor, Range, Point, Element} from 'slate'
+
+const withTable = (editor) =>{
+    const { deleteBackward, deleteForward, insertBreak} = editor
+
+    editor.deleteBackward = unit =>{
+        const { selection }= editor;
+        if (selection) {
+            const [cell] = Editor.nodes(editor, {
+              match: n =>
+                !Editor.isEditor(n) &&
+                Element.isElement(n) &&
+                n.type === 'table-cell',
+            })
+            const prevNodePath = Editor.before(editor,selection)
+
+            const [tableNode] = Editor.nodes(editor,{
+              at:prevNodePath,
+              match:n =>!Editor.isEditor(n) && Element.isElement && n.type === 'table-cell'
+            })
+
+            if (cell) {
+              const [, cellPath] = cell
+
+              const start = Editor.start(editor, cellPath)
+              if (Point.equals(selection.anchor, start)) {
+                return
+              }
+            }
+            if(!cell && tableNode){
+              return
+            }
+          }
+      
+          deleteBackward(unit)
+    }
+    editor.deleteForward = unit => {
+        const { selection } = editor
+        if (selection && Range.isCollapsed(selection)) {
+          const [cell] = Editor.nodes(editor, {
+            match: n =>
+              !Editor.isEditor(n) &&
+              Element.isElement(n) &&
+              n.type === 'table-cell',
+          })
+          
+          const prevNodePath = Editor.after(editor,selection)
+          const [tableNode] = Editor.nodes(editor,{
+            at:prevNodePath,
+            match:n =>!Editor.isEditor(n) && Element.isElement && n.type === 'table-cell'
+          })
+          
+          
+          if (cell) {
+            const [, cellPath] = cell
+            const end = Editor.end(editor, cellPath)
+    
+            if (Point.equals(selection.anchor, end)) {
+              return
+            }
+          }
+          if(!cell && tableNode){
+            return
+          }
+        }
+    
+        deleteForward(unit)
+      }
+
+    return editor;
+}
+
+
+export default withTable;

package/src/slate/serializers/generic.ts

@@ -0,0 +1,44 @@
+import escapeHTML from "escape-html";
+import { TextNode, ParentNode } from "./types";
+
+const formatValue = (k: string, v: string) => {
+  if (k === "href") {
+    return escapeHTML(v);
+  } else {
+    return v;
+  }
+};
+
+const attrToString = (attr: Record<string, string>) => {
+  return Object.entries(attr)
+    .map(([k, v]) => `${k}="${formatValue(k, v)}"`)
+    .join(" ");
+};
+
+// these assume that the markdown generated is gfm and supports html
+const toBold = (text: string) => `<b>${text}</b>`;
+const toItalic = (text: string) => `<i>${text}</i>`;
+const toUnderline = (text: string) => `<u>${text}</u>`;
+const toStrikethrough = (text: string) => `<del>${text}</del>`;
+const toSubscript = (text: string) => `<sub>${text}</sub>`;
+const toSuperscript = (text: string) => `<sup>${text}</sup>`;
+
+export const serializeLink = (node: ParentNode, serializedChildren: string) => {
+  const { type, children, ...attr } = node;
+  if (type === "link") {
+    return `<a ${attrToString(attr)}>${serializedChildren}</a>`;
+  } else {
+    return "";
+  }
+};
+
+export const serializeText = (node: TextNode) => {
+  let string = node.text;
+  if (node.bold) string = toBold(string);
+  if (node.italic) string = toItalic(string);
+  if (node.underline) string = toUnderline(string);
+  if (node.strikethrough) string = toStrikethrough(string);
+  if (node.subscript) string = toSubscript(string);
+  if (node.superscript) string = toSuperscript(string);
+  return string;
+};

package/src/slate/serializers/types.ts

@@ -0,0 +1,20 @@
+export interface TextNode {
+  text: string
+  bold?: boolean
+  italic?: boolean
+  underline?: boolean
+  strikethrough?: boolean
+  subscript?: boolean
+  superscript?: boolean
+}
+
+export interface ParentNode {
+  type: string
+  children: TextNode[]
+  href?: string
+  target?: string
+}
+
+export function instanceOfTextNode(object: any): object is TextNode {
+  return "text" in object
+}

package/src/slate/toolbar/index.tsx

@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from "react";
+import { useSlate } from "slate-react";
+import { Range } from "slate";
+import Button from "../common/button";
+import Icon from "../common/icon";
+import {
+  Select,
+  Box,
+  MenuItem,
+  SelectChangeEvent,
+  FormControl,
+} from "@mui/material";
+import {
+  toggleBlock,
+  toggleMark,
+  isMarkActive,
+  addMarkData,
+  isBlockActive,
+  activeMark,
+} from "../utils";
+import useFormat from "../utils/customHooks/useFormat.js";
+import LinkButton from "../components/link/LinkButton";
+import Embed from "../components/embed/Embed";
+import TableSelector from "../components/table/TableSelector";
+import EquationButton from "../components/equation/EquationButton";
+import Id from "../components/id/Id";
+import TableContextMenu from "../components/table-context-menu/TableContextMenu";
+import CodeToTextButton from "../components/code-to-text/CodeToTextButton";
+import HtmlContextMenu from "../components/code-to-text/HtmlContextMenu";
+import { ToolbarGroup } from "./toolbar-groups";
+import { useShortcut } from "./shortcuts";
+import { SlateColorButton } from "../components/color-picker/slate-color-button";
+import { InsertImageButton } from "../components/image/insert-image-button";
+
+export type ToolbarProps = {
+  handleCodeToText: Function;
+  toolbarGroups: Array<Array<ToolbarGroup>>;
+};
+
+export default function Toolbar(props: ToolbarProps) {
+  const { handleCodeToText } = props;
+  const editor = useSlate();
+  const isTable = useFormat(editor, "table");
+  const [toolbarGroups, setToolbarGroups] = useState(props.toolbarGroups);
+
+  useEffect(() => {
+    // Filter out the groups which are not allowed to be inserted when a table is in focus.
+    let filteredGroups = [...props.toolbarGroups];
+    if (isTable) {
+      filteredGroups = toolbarGroups.map((grp) =>
+        grp.filter(
+          (element) =>
+            //groups that are not supported inside the table
+            !["codeToText"].includes(element.type)
+        )
+      );
+      filteredGroups = filteredGroups.filter((elem) => elem.length);
+    }
+    setToolbarGroups(filteredGroups);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isTable]);
+
+  const BlockButton = ({ format }: ToolbarGroup) => {
+    useShortcut(format, () => toggleBlock(editor, format));
+    return (
+      <Button
+        active={isBlockActive(editor, format)}
+        format={format}
+        onMouseDown={(e: MouseEvent) => {
+          e.preventDefault();
+          toggleBlock(editor, format);
+        }}
+        style={{ backgroundColor: "#f9fafc" }}
+      >
+        <Icon icon={format} />
+      </Button>
+    );
+  };
+
+  const MarkButton = ({ format }: ToolbarGroup) => {
+    useShortcut(format, () => toggleMark(editor, format));
+    return (
+      <Button
+        active={isMarkActive(editor, format)}
+        format={format}
+        onMouseDown={(e: MouseEvent) => {
+          e.preventDefault();
+          toggleMark(editor, format);
+        }}
+        style={{ backgroundColor: "#f9fafc" }}
+      >
+        <Icon icon={format} />
+      </Button>
+    );
+  };
+
+  const Dropdown = ({ format, options }: ToolbarGroup) => {
+    return (
+      <FormControl sx={{ m: 1, minWidth: 120 }} size="small">
+        <Select
+          value={activeMark(editor, format)}
+          onChange={(e) => changeMarkData(e, format)}
+        >
+          {options?.map((item, index) => (
+            <MenuItem key={index} value={item.value}>
+              {item.text}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    );
+  };
+
+  const changeMarkData = (event: SelectChangeEvent<any>, format: string) => {
+    event.preventDefault();
+    const value = event.target.value;
+    console.log(value);
+    addMarkData(editor, { format, value });
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+      }}
+    >
+      {toolbarGroups.map((group, index) => (
+        <Box key={index} sx={{ display: "flex" }}>
+          {group.map((element) => {
+            switch (element.type) {
+              case "block":
+                return <BlockButton key={element.id} {...element} />;
+              case "mark":
+                return <MarkButton key={element.id} {...element} />;
+              case "dropdown":
+                return <Dropdown key={element.id} {...element} />;
+              case "link":
+                return (
+                  <LinkButton
+                    key={element.id}
+                    active={isBlockActive(editor, "link")}
+                    editor={editor}
+                  />
+                );
+              case "embed":
+                return (
+                  <Embed
+                    key={element.id}
+                    format={element.format}
+                    editor={editor}
+                  />
+                );
+              case "color-picker":
+                return (
+                  <SlateColorButton
+                    key={element.id}
+                    editor={editor}
+                    format={element.format as "bgcolor" | "color"}
+                  />
+                );
+              case "table":
+                return <TableSelector key={element.id} editor={editor} />;
+              case "id":
+                return <Id editor={editor} />;
+              case "equation":
+                return <EquationButton editor={editor} />;
+              case "codeToText":
+                return (
+                  <CodeToTextButton handleButtonClick={handleCodeToText} />
+                );
+              case "image":
+                return <InsertImageButton editor={editor} />;
+              default:
+                return null;
+            }
+          })}
+        </Box>
+      ))}
+      <TableContextMenu editor={editor} />
+      <HtmlContextMenu editor={editor} handleCodeToText={handleCodeToText} />
+    </Box>
+  );
+}