@springmicro/rte 0.1.3 → 0.1.11

package/src/slate/paper-rte.tsx

@@ -1,47 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,186 +0,0 @@
-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>
-  );
-}