@springmicro/rte 0.1.3 → 0.1.10

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

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

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

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

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

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

@@ -1,226 +0,0 @@
-/* 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

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