@springmicro/rte 0.1.3

package/src/slate/components/link/LinkButton.tsx

@@ -0,0 +1,106 @@
+import { useRef, useState, MouseEvent, ChangeEvent, FormEvent } from "react";
+import { insertLink } from "../../utils/link";
+import Button from "../../common/button";
+import Icon from "../../common/icon";
+import { Box, Menu, MenuItem, TextField } from "@mui/material";
+import { isBlockActive } from "../../utils";
+import { IconButton, FormControlLabel, Checkbox } from "@mui/material";
+import usePopup from "../../utils/customHooks/usePopup";
+import { BaseEditor, BaseSelection, Location, Transforms } from "slate";
+import { useShortcut } from "../../toolbar/shortcuts";
+import { CustomEditor } from "../../custom-types";
+
+export type LinkButtonProps = {
+  active: boolean;
+  editor: CustomEditor;
+};
+
+const LinkButton = (props: LinkButtonProps) => {
+  const { editor } = props;
+  const [anchorEl, setAnchorEl] = useState<null | Element>(null);
+  const open = Boolean(anchorEl);
+  const [url, setUrl] = useState("");
+  const [showInNewTab, setShowInNewTab] = useState(false);
+  const [selection, setSelection] = useState<BaseSelection | Location>();
+
+  const handleClick = (event?: MouseEvent<HTMLButtonElement>) => {
+    const el = event?.currentTarget
+      ? event.currentTarget
+      : document.querySelector("#link-menu-button");
+    setSelection(editor.selection);
+    if (anchorEl) setAnchorEl(null);
+    else if (el) setAnchorEl(el);
+  };
+
+  // const handleClose = () => {
+  //   setAnchorEl(null)
+  // }
+
+  const handleInsertLink = (e: FormEvent) => {
+    e.preventDefault();
+    if (selection === undefined) return;
+    Transforms.select(editor, selection!);
+    insertLink(editor, { url, showInNewTab });
+    setUrl("");
+    handleClick();
+    setShowInNewTab(false);
+  };
+
+  const handleInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+    if (target?.type === "checkbox") {
+      setShowInNewTab((prev) => !prev);
+    } else {
+      setUrl(target?.value);
+    }
+  };
+
+  useShortcut("link", () => handleClick());
+
+  return (
+    <>
+      <Button
+        id="link-menu-button"
+        aria-controls={open ? "basic-menu" : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? "true" : undefined}
+        onClick={handleClick}
+        format="link"
+        style={{ backgroundColor: "#f9fafc" }}
+      >
+        <Icon icon="link" />
+      </Button>
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={() => handleClick()}
+        MenuListProps={{
+          "aria-labelledby": "link-menu-button",
+        }}
+      >
+        <form onSubmit={handleInsertLink}>
+          <Box sx={{ display: "flex", gap: 1, px: 1 }}>
+            <TextField
+              aria-label="url"
+              type="text"
+              placeholder="https://springmicrohost.com"
+              value={url}
+              onChange={handleInputChange}
+              size="small"
+            />
+            <IconButton type="submit" aria-label="add link" size="small">
+              <Icon icon="add" />
+            </IconButton>
+          </Box>
+          <FormControlLabel
+            control={<Checkbox onChange={handleInputChange} />}
+            label="Open in new tab"
+            sx={{ px: 2 }}
+          />
+        </form>
+      </Menu>
+    </>
+  );
+};
+
+export default LinkButton;

package/src/slate/components/table/Table.jsx

@@ -0,0 +1,11 @@
+import React from "react"
+
+const Table = ({ attributes, children, element }) => {
+  return (
+    <table>
+      <tbody {...attributes}>{children}</tbody>
+    </table>
+  )
+}
+
+export default Table

package/src/slate/components/table/TableSelector.jsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef, useState } from "react";
+import Icon from "../../common/icon";
+import usePopup from "../../utils/customHooks/usePopup";
+import { Transforms } from "slate";
+import { TableUtil } from "../../utils/table";
+
+const TableSelector = ({ editor }) => {
+  const tableOptionsRef = useRef();
+  const [selection, setSelection] = useState();
+  const [showOptions, setShowOptions] = usePopup(tableOptionsRef);
+  const [tableData, setTableData] = useState({
+    row: 0,
+    column: 0,
+  });
+  const [tableInput, setTableInput] = useState(
+    Array.from({ length: 6 }, () =>
+      Array.from({ length: 6 }, (v, i) => ({
+        bg: "lightGray",
+        column: i,
+      }))
+    )
+  );
+
+  useEffect(() => {
+    const newTable = Array.from({ length: 6 }, (obj, row) =>
+      Array.from({ length: 6 }, (v, col) => ({
+        bg:
+          row + 1 <= tableData.row && col + 1 <= tableData.column
+            ? "orange"
+            : "lightgray",
+        column: col,
+      }))
+    );
+    setTableInput(newTable);
+  }, [tableData]);
+  useEffect(() => {
+    if (!showOptions) {
+      setTableData({
+        row: 0,
+        column: 0,
+      });
+    }
+  }, [showOptions]);
+  const table = new TableUtil(editor);
+
+  const handleButtonClick = () => {
+    setSelection(editor.selection);
+    setShowOptions((prev) => !prev);
+  };
+  const handleInsert = () => {
+    selection && Transforms.select(editor, selection);
+    setTableData({ row: -1, column: -1 });
+    table.insertTable(tableData.row, tableData.column);
+    setShowOptions(false);
+  };
+  return (
+    <div ref={tableOptionsRef} className="popup-wrapper">
+      <button
+        style={{ border: showOptions ? "1px solid lightgray" : "none" }}
+        title="table"
+        onClick={handleButtonClick}
+      >
+        <Icon icon="table" />
+      </button>
+      {showOptions && (
+        <div className="popup">
+          {
+            <span style={{ fontSize: "0.85em" }}>
+              <i>{`Insert a ${
+                tableData.row >= 1
+                  ? `${tableData.row} x ${tableData.column}`
+                  : ""
+              } table`}</i>
+            </span>
+          }
+          <div className="table-input">
+            {tableInput.map((grp, row) =>
+              grp.map(({ column, bg }, col) => (
+                <div
+                  key={row + col}
+                  onClick={() => handleInsert()}
+                  onMouseOver={() =>
+                    setTableData({ row: row + 1, column: column + 1 })
+                  }
+                  className="table-unit"
+                  style={{ border: `1px solid ${bg}` }}
+                ></div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TableSelector;

package/src/slate/components/table-context-menu/TableContextMenu.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from "react";
+import useContextMenu from "../../utils/customHooks/useContextMenu";
+import Icon from "../../common/icon";
+import { TableUtil } from "../../utils/table";
+import { BaseEditor, Location, Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+import { CustomEditor } from "../../custom-types";
+
+type Action = { type: string; position?: string };
+
+const TableContextMenu = (props: { editor: CustomEditor }) => {
+  const { editor } = props;
+  const [selection, setSelection] = useState<Location>();
+  const [showMenu, { top, left }] = useContextMenu(
+    editor,
+    "table",
+    setSelection
+  ) as [
+    boolean,
+    {
+      top: string;
+      left: string;
+    }
+  ];
+  const table = new TableUtil(editor);
+
+  const menu = [
+    {
+      icon: "insertColumnRight",
+      text: "Insert Columns to the Right",
+      action: {
+        type: "insertColumn",
+        position: "after",
+      },
+    },
+    {
+      icon: "insertColumnLeft",
+      text: "Insert Columns to the Left",
+      action: {
+        type: "insertColumn",
+        position: "at",
+      },
+    },
+    {
+      icon: "insertRowAbove",
+      text: "Insert Row Above",
+      action: {
+        type: "insertRow",
+        positon: "at",
+      },
+    },
+    {
+      icon: "insertRowBelow",
+      text: "Insert Row Below",
+      action: {
+        type: "insertRow",
+        position: "after",
+      },
+    },
+    {
+      icon: "trashCan",
+      text: "Remove Table",
+      action: {
+        type: "remove",
+      },
+    },
+  ];
+
+  const handleInsert = ({ type, position }: Action) => {
+    if (selection === undefined) return;
+    Transforms.select(editor, selection);
+    switch (type) {
+      case "insertRow":
+        table.insertRow(position);
+        break;
+      case "insertColumn":
+        table.insertColumn(position);
+        break;
+      case "remove":
+        table.removeTable();
+        break;
+      default:
+        return;
+    }
+    ReactEditor.focus(editor as ReactEditor);
+  };
+
+  return showMenu ? (
+    <div className="contextMenu" style={{ top, left }}>
+      {menu.map(({ icon, text, action }, index) => (
+        <div
+          className="menuOption"
+          key={index}
+          onClick={() => handleInsert(action)}
+        >
+          <Icon icon={icon} />
+          <span>{text}</span>
+        </div>
+      ))}
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default TableContextMenu;

package/src/slate/custom-types.d.ts

@@ -0,0 +1,152 @@
+import { Descendant, BaseEditor, BaseRange, Range, Element } from "slate";
+import { ReactEditor } from "slate-react";
+import { HistoryEditor } from "slate-history";
+import { Node } from "domhandler";
+
+export type BlockQuoteElement = {
+  type: "block-quote";
+  align?: string;
+  children: Descendant[];
+};
+
+export type BulletedListElement = {
+  type: "unorderedList";
+  align?: string;
+  children: Descendant[];
+};
+
+export type CheckListItemElement = {
+  type: "check-list-item";
+  checked: boolean;
+  children: Descendant[];
+};
+
+export type EditableVoidElement = {
+  type: "editable-void";
+  children: EmptyText[];
+};
+
+export type HeadingElement = {
+  type: "h1";
+  align?: string;
+  children: Descendant[];
+};
+
+export type HeadingTwoElement = {
+  type: "h2";
+  align?: string;
+  children: Descendant[];
+};
+
+export type HeadingThreeElement = {
+  type: "h3";
+  align?: string;
+  children: Descendant[];
+};
+
+export type ImageElement = {
+  type: "image";
+  url: string;
+  children: EmptyText[];
+};
+
+export type LinkElement = {
+  type: "link";
+  href: string;
+  target?: string;
+  children: Descendant[];
+};
+
+export type ButtonElement = { type: "button"; children: Descendant[] };
+
+export type BadgeElement = { type: "badge"; children: Descendant[] };
+
+export type ListItemElement = { type: "li"; children: Descendant[] };
+
+export type MentionElement = {
+  type: "mention";
+  character: string;
+  children: CustomText[];
+};
+
+export type ParagraphElement = {
+  type: "p";
+  align?: string;
+  children: Descendant[];
+};
+
+export type TableElement = { type: "table"; children: TableRow[] };
+
+export type TableCellElement = { type: "table-cell"; children: CustomText[] };
+
+export type TableRowElement = { type: "table-row"; children: TableCell[] };
+
+export type TitleElement = { type: "title"; children: Descendant[] };
+
+export type VideoElement = {
+  type: "video";
+  url: string;
+  children: EmptyText[];
+};
+
+export type CodeBlockElement = {
+  type: "code-block";
+  language: string;
+  children: Descendant[];
+};
+
+export type CodeLineElement = {
+  type: "code-line";
+  children: Descendant[];
+};
+
+type CustomElement =
+  | BlockQuoteElement
+  | BulletedListElement
+  | CheckListItemElement
+  | EditableVoidElement
+  | HeadingElement
+  | HeadingTwoElement
+  | HeadingThreeElement
+  | ImageElement
+  | LinkElement
+  | ButtonElement
+  | BadgeElement
+  | ListItemElement
+  | MentionElement
+  | ParagraphElement
+  | TableElement
+  | TableRowElement
+  | TableCellElement
+  | TitleElement
+  | VideoElement
+  | CodeBlockElement
+  | CodeLineElement;
+
+export type CustomText = {
+  bold?: boolean;
+  italic?: boolean;
+  code?: boolean;
+  text: string;
+};
+
+export type EmptyText = {
+  text: string;
+};
+
+export type CustomEditor = BaseEditor &
+  ReactEditor &
+  HistoryEditor & {
+    nodeToDecorations?: Map<Element, Range[]>;
+  };
+
+declare module "slate" {
+  interface CustomTypes {
+    Editor: CustomEditor;
+    Element: CustomElement;
+    Text: CustomText | EmptyText;
+    Range: BaseRange & {
+      [key: string]: unknown;
+    };
+  }
+}

package/src/slate/editor.module.css

@@ -0,0 +1,226 @@
+/* In Use */
+.popupWrapper {
+  display: inline;
+  position: relative;
+}
+.popup {
+  position: absolute;
+  left: 0;
+  background-color: white;
+  padding: 6px 10px;
+  border: 1px solid #e6e8f0;
+  height: fit-content;
+  z-index: 1000;
+}
+.editorWrapper {
+  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 > div:focus-visible {
+  border: none;
+  outline: none;
+}
+
+.slate blockquote {
+  border-left: 2px solid #ddd;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 10px;
+  color: #aaa;
+  font-style: italic;
+}
+.slate table,
+.slate th,
+.slate td {
+  border: 1px solid black;
+}
+.slate table {
+  border-collapse: collapse;
+}
+.slate button {
+  background-color: white;
+  border: none;
+  opacity: 0.5;
+}
+.slate .btnActive {
+  opacity: 1;
+}
+
+.slate table {
+  width: 100%;
+}
+.slate td {
+  height: 50px;
+  padding: 0 5px;
+}
+
+.slate ul,
+.slate ol {
+  padding-left: 1rem;
+}
+
+.slate button {
+  cursor: pointer;
+}
+.slate code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+.slate [data-slate-node="element"]:not(li) {
+  margin: 10px 0;
+}
+/* CodeToText.css */
+.slate .code-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.slate .codeToTextWrapper {
+  width: 80%;
+  height: 80%;
+  grid-template-columns: 45% 10% 45%;
+}
+.slate .codeToText {
+  width: 100%;
+  height: 90%;
+  display: grid;
+  grid-template-columns: 45% 10% 45%;
+}
+.slate .codeToText textarea,
+.textOutput {
+  border-radius: 15px;
+  padding: 10px;
+}
+
+.slate .codeToText textarea {
+  resize: none;
+}
+.slate .codeToText textarea:focus {
+  outline: none;
+}
+.slate .textOutput {
+  background: #fff;
+  overflow: scroll;
+}
+.slate .codeToTextWrapper button {
+  margin: 3% 1%;
+  padding: 10px 37px;
+  cursor: pointer;
+  border-radius: 5px;
+  opacity: 1;
+  font-weight: bolder;
+}
+.slate .done {
+  background: #3fc79a;
+  color: #fff;
+}
+.slate .clear {
+  background: #fff;
+  color: #a9a4a4;
+  border: 1px solid #e6e8f0;
+}
+
+/* Embed.css */
+.slate .embed {
+  width: fit-content;
+  position: relative;
+  margin-right: 20px;
+}
+.slate .embed img,
+.slate .embed iframe {
+  width: 100%;
+  height: 100%;
+}
+.slate .embed button {
+  position: absolute;
+  bottom: -6px;
+  right: 0;
+}
+
+/* Equation */
+.slate .equation-inline {
+  display: inline;
+  position: relative;
+}
+
+/* TableSelector.css */
+.slate .table-option {
+  display: flex;
+  margin: 5px 2px;
+  gap: 5px;
+}
+.slate .table-option {
+  white-space: nowrap;
+}
+.slate .table-input {
+  display: grid;
+  grid-template-columns: auto auto auto auto auto auto;
+  gap: 3px;
+}
+.slate .table-unit {
+  width: 15px;
+  height: 15px;
+  border: 1px solid #e6e8f0;
+}
+
+/* TableContextMenu */
+.slate .contextMenu {
+  width: fit-content;
+  height: fit-content;
+  position: fixed;
+  background: white;
+  border: 1px solid #e6e8f0;
+  border-radius: 10px;
+  padding: 0.5%;
+  display: flex;
+  gap: 15px;
+  flex-direction: column;
+  cursor: pointer;
+}
+.slate .menuOption {
+  display: flex;
+  gap: 15px;
+}
+
+/* Toolbar */
+.slate .toolbar {
+  border-radius: 10px;
+  background: #ffffff;
+  box-shadow: -8px 8px 13px #ededed, 8px -8px 13px #ffffff;
+  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 .toolbar-grp > * {
+  margin-right: 10px;
+  cursor: pointer;
+}
+.slate .toolbar-grp {
+  margin: 0 10px;
+}
+.slate select {
+  height: 30px;
+  border: none;
+  width: 6.9rem;
+}

package/src/slate/paper-rte.stories.tsx

@@ -0,0 +1,16 @@
+import { PaperEditor, PaperEditorProps } from "./paper-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/Paper Editor",
+  component: PaperEditor,
+} as Meta<typeof PaperEditor>
+
+export const Primary = {
+  args: {} as PaperEditorProps,
+}