@springmicro/rte 0.1.3

package/src/slate/toolbar/paper-toolbar.tsx

@@ -0,0 +1,494 @@
+import {
+  MenuList,
+  MenuItem,
+  Button,
+  ButtonGroup,
+  Grow,
+  Popper,
+  ClickAwayListener,
+  Paper,
+  Box,
+  Typography,
+} from "@mui/material";
+import Icon from "../common/icon";
+import * as React from "react";
+import { BaseEditor, Descendant } from "slate";
+import { slateToHtml, SlateToDomConfig } from "slate-serializers";
+import { ParentNode, TextNode } from "../serializers/types";
+import { Element, Node, ChildNode } from "domhandler";
+import { fontFamilyMap, sizeMap } from "../utils";
+
+import "html-to-rtf/app/browser/bundle.js";
+
+// @ts-ignore
+// dynamic(() => import("html-to-rtf/app/browser/bundle.js"), { ssr: false });
+
+export type PaperToolbarProps = {
+  value: Descendant[];
+  editor: BaseEditor;
+};
+
+function download(filename: string, text: string, mime: string) {
+  let element = document.createElement("a");
+  element.setAttribute(
+    "href",
+    `data:${mime};charset=utf-8,` + encodeURIComponent(text)
+  );
+  element.setAttribute("download", filename);
+
+  element.style.display = "none";
+  document.body.appendChild(element);
+
+  element.click();
+
+  document.body.removeChild(element);
+}
+
+const PAGE_MARGIN_X_INCHES = 0.5;
+const PAGE_MARGIN_Y_INCHES = 1;
+const EXPORT_STYLES =
+  "font-family: Helvetica, Arial, sans serif; font-size: 16px;"; // When exporting the margins will be figured out by the PDF renderer, so we don't need to add them here
+const DEFAULT_STYLES =
+  EXPORT_STYLES +
+  `padding: ${PAGE_MARGIN_X_INCHES}in ${PAGE_MARGIN_Y_INCHES}in; `; // I still want the padding when regularly exporting to HTML
+
+// Typescript HATES this code, but it works B)
+// Feel free to refactor it if you want, but I'm pretty sure the problem is that we are using the same "type" but from different libraries
+// so typescript thinks they are different types even though they are the same (at keast for some of them)
+// Default config + lists and colors and tweaks to links and blockquotes
+export const slate_config: SlateToDomConfig = {
+  elementMap: {
+    p: "p",
+    paragraph: "p",
+    h1: "h1",
+    h2: "h2",
+    h3: "h3",
+    h4: "h4",
+    h5: "h5",
+    h6: "h6",
+    ["table-row"]: "tr",
+    ["table-cell"]: "td",
+  },
+  markMap: {
+    strikethrough: ["s"],
+    bold: ["strong"],
+    underline: ["u"],
+    italic: ["i"],
+    code: ["pre", "code"],
+  },
+  elementTransforms: {
+    // Need indentation in PDF export
+    //@ts-ignore
+    blockquote: ({ node, children = [] }) => {
+      //@ts-ignore
+      const p = [new Element("p", {}, children)];
+      return new Element("blockquote", {}, p);
+    },
+    //@ts-ignore
+    link: ({ node, children = [] }) => {
+      const attributes = {
+        target: "",
+      };
+      attributes.target = node.target;
+      return new Element(
+        "a",
+        {
+          href: node.href,
+          ...attributes,
+        },
+        children as unknown as ChildNode[] // keep this change in merge
+      );
+    },
+    //@ts-ignore
+    unorderedList: ({ node, children = [] }) => {
+      const new_children = children.map(
+        //@ts-ignore
+        (child) => new Element("li", {}, [child])
+      );
+      return new Element("ul", {}, new_children);
+    },
+    //@ts-ignore
+    orderedList: ({ children = [] }) => {
+      const new_children = children.map(
+        //@ts-ignore
+        (child) => new Element("li", {}, [child])
+      );
+      return new Element("ol", {}, new_children);
+    },
+    //@ts-ignore
+    image: ({ node }) => {
+      const attributes = {
+        src: "",
+      };
+      attributes.src = node.url;
+      return new Element("img", attributes, []);
+    },
+    //@ts-ignore
+    alignCenter: ({ node, children = [] }) => {
+      const attributes = {
+        style: "",
+      };
+      attributes.style = `text-align: center; display: block;`;
+      //@ts-ignore
+      return new Element("div", attributes, children);
+    },
+    //@ts-ignore
+    alignRight: ({ node, children = [] }) => {
+      const attributes = {
+        style: "",
+      };
+      attributes.style = `text-align: right; display: block;`;
+      //@ts-ignore
+      return new Element("div", attributes, children);
+    },
+    //@ts-ignore
+    alignLeft: ({ node, children = [] }) => {
+      const attributes = {
+        style: "",
+      };
+      attributes.style = `text-align: left; display: block;`;
+      //@ts-ignore
+      return new Element("div", attributes, children);
+    },
+    //@ts-ignore
+    table: ({ node, children = [] }) => {
+      const attributes = {
+        border: "",
+      };
+      attributes.border = `1`;
+      //@ts-ignore
+      return new Element("table", attributes, children);
+    },
+  },
+  markTransforms: {
+    //@ts-ignore
+    color: ({ node }) => {
+      const attributes = {
+        style: "",
+      };
+      attributes.style = `color: ${node.color}`;
+      return new Element("span", attributes, node.children);
+    },
+    //@ts-ignore
+    bgColor: ({ node }) => {
+      const attributes = {
+        style: "",
+      };
+      attributes.style = `background-color: ${node.bgColor}`;
+      return new Element("span", attributes, node.children);
+    },
+    //@ts-ignore
+    fontFamily: ({ node }) => {
+      const attributes = {
+        style: "",
+      };
+
+      // I don't know if using this random import is better or worse than just using an if statement for each font
+      // on one hand it means one less place to update duplicate data (DRY)
+      // on the other hand it's a random import to a random index.jsx file that I don't know the purpose of and having dependencies to random unrelated files is bad
+      let typedMap = fontFamilyMap as Record<string, string>;
+
+      attributes.style = `font-family: ${typedMap[node.fontFamily]}`;
+
+      return new Element("span", attributes, node.children);
+    },
+    //@ts-ignore
+    fontSize: ({ node }) => {
+      const attributes = {
+        style: "",
+      };
+
+      // This is the same as above with the fontFamilyMap
+      let typedMap = sizeMap as Record<string, string>;
+      attributes.style = `font-size: ${typedMap[node.fontSize]}`;
+      return new Element("span", attributes, node.children);
+    },
+    //@ts-ignore
+    superscript: ({ node }) => {
+      const attributes = {
+        style: "",
+      };
+      attributes.style = `vertical-align: super; font-size: smaller;`;
+      return new Element("span", attributes, node.children);
+    },
+    //@ts-ignore
+    subscript: ({ node }) => {
+      const attributes = {
+        style: "",
+      };
+      attributes.style = `vertical-align: sub; font-size: smaller;`;
+      return new Element("span", attributes, node.children);
+    },
+  },
+};
+
+// Made this wrapper function to make it easier to change the default styles (DRY code!)
+const parseToHTML = (value: Descendant[], styles?: string) => {
+  if (styles == undefined) {
+    styles = DEFAULT_STYLES;
+  }
+  return (
+    `<div style='${styles}'>` + slateToHtml(value, slate_config) + "</div>"
+  );
+};
+
+// 🐢 TODO: Figure out how to add submenus, and then add them for the "Export as" option
+const menuOptions = {
+  file: {
+    "Log html to console and clipboard": (value: Descendant[]) => {
+      const html = parseToHTML(value);
+      console.log(html);
+      navigator.clipboard.writeText(html);
+    },
+    Divider: "line",
+    "Download as .html file": (value: Descendant[]) => {
+      const html = parseToHTML(value);
+      download("markup.html", html, "text/html");
+    },
+    // "Download as .md file": (editor: TextNode | ParentNode) => {
+    //   const markdown = serializeMD(editor)
+    //   download("markdown.md", markdown, "text/plain")
+    //   console.log(markdown)
+    // },
+    "Download as .rtf file": (value: Descendant[]) => {
+      // @ts-ignore
+      const rtf = window.htmlToRtf(parseToHTML(value));
+      download("rich.rtf", rtf, "text/rtf");
+      console.log(rtf);
+    },
+    // Untested because I can't test in Storybook due to CORS, and I do not know where in the app to go to test this 😎
+    "Download as .pdf file": (value: Descendant[]) => {
+      const htmlContent = parseToHTML(value, EXPORT_STYLES);
+
+      const response = fetch("http://localhost:3000/api/editor/export-pdf", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ htmlContent }),
+      })
+        .then((response) => response.blob())
+        .then((blob) => {
+          const blobUrl = URL.createObjectURL(blob);
+          download("document.pdf", blobUrl, "application/pdf");
+
+          // Make sure to release the URL object when you're done with it
+          URL.revokeObjectURL(blobUrl);
+        });
+    },
+  } as Record<string, Function | string>,
+  edit: {
+    Undo: () => {},
+    Redo: () => {},
+    "The names of entries that return line dont matter": "line",
+    Cut: () => {},
+    Copy: () => {},
+    Paste: () => {},
+    "These entries are the dividing lines between sections": "line",
+    "Select All": () => {},
+    Delete: () => {},
+    "Maybe this is a bad system, but it's simple to edit on the fly. Once groups are more settled we can hard code them":
+      "line",
+    "Find and Replace": () => {},
+  } as Record<string, Function | string>,
+  view: {
+    "Toggle Fullscreen": () => {},
+    "Toggle Paper View": () => {},
+  } as Record<string, Function | string>,
+  format: {
+    // Having menu options for all of these things we already have buttons for feels redundant, but that's how google docs does it. We can change it later if we want, especially since there's no code for these yet
+    "Paper Margins": () => {},
+    "Paper Dimensions": () => {},
+    Divider1: "line",
+    Bold: () => {},
+    Italic: () => {},
+    Underline: () => {},
+    Strikethrough: () => {},
+    Divider2: "line",
+    Superscript: () => {},
+    Subscript: () => {},
+    Divider3: "line",
+    "Font Family": () => {},
+    "Font Size": () => {},
+    Divider4: "line",
+    "Text Color": () => {},
+    "Background Color": () => {},
+    Divider5: "line",
+    "Align Left": () => {},
+    "Align Center": () => {},
+    "Align Right": () => {},
+  } as Record<string, Function | string>,
+  insert: {
+    Link: () => {},
+    Table: () => {},
+    Equation: () => {},
+    Image: () => {},
+    Code: () => {},
+  } as Record<string, Function | string>,
+  help: {
+    "Keyboard Shortcuts": () => {},
+    Divider: "line",
+    About: () => {},
+    Divider1: "line",
+    "Ask Keith": () => {},
+  } as Record<string, Function | string>,
+} as Record<string, Record<string, Function | string>>;
+
+//These are the options that you shouldn't be able to access if you haven't selected anything
+const selectDependentOptions = ["Cut", "Copy", "Delete"];
+
+export function PaperToolbar({ editor, value }: PaperToolbarProps) {
+  const menuOpenState = {
+    file: false,
+    edit: false,
+    view: false,
+    format: false,
+    insert: false,
+    help: false,
+  } as Record<string, boolean>;
+
+  const [open, setOpen] = React.useState(menuOpenState);
+  const anchorRef = React.useRef<HTMLDivElement>(null);
+  const [selectedIndex, setSelectedIndex] = React.useState(1);
+
+  // const handleClick = () => {
+  //   console.info(`You clicked ${Object.keys(fileOptions)[selectedIndex]}`)
+  //   fileOptions[Object.keys(fileOptions)[selectedIndex]](editor)
+  // }
+
+  const handleMenuItemClick = (
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    menuOptions: Record<string, Function>,
+    index: number
+  ) => {
+    // setSelectedIndex(index)
+    const clickedOption = Object.keys(menuOptions)[index];
+    console.info(`You clicked ${clickedOption}`);
+    console.log(value);
+    menuOptions[clickedOption](value);
+    setOpen((prevOpen) => ({ ...prevOpen, file: false }));
+  };
+
+  const handleToggle = (menuItem: string) => {
+    console.log("You clicked " + menuItem);
+    console.log(
+      editor.selection?.anchor.offset == editor.selection?.focus.offset
+    );
+    console.log(editor.selection?.anchor.offset);
+    console.log(editor.selection?.focus.offset);
+    setOpen((prevOpen) => ({
+      ...prevOpen,
+      [menuItem]: !prevOpen[menuItem] as boolean,
+    }));
+  };
+
+  const handleClose = (event: Event, menuItem: string) => {
+    if (
+      anchorRef.current &&
+      anchorRef.current
+        .querySelector(`.${menuItem}`)
+        ?.contains(event.target as HTMLElement)
+    ) {
+      return;
+    }
+
+    console.log("You closed " + menuItem);
+    setOpen((prevOpen) => ({ ...prevOpen, [menuItem]: false }));
+  };
+
+  return (
+    <>
+      <ButtonGroup variant="outlined" ref={anchorRef} aria-label="split button">
+        {Object.keys(menuOpenState).map((key) => {
+          return (
+            <Button
+              size="small"
+              aria-controls={open[key] ? "split-button-menu" : undefined}
+              aria-expanded={open[key] ? "true" : undefined}
+              aria-haspopup="menu"
+              onClick={() => handleToggle(key)}
+              sx={{ pr: 1 }}
+              className={key}
+              key={key}
+            >
+              {key.charAt(0).toUpperCase() + key.slice(1)}
+              <Icon icon="arrowDown" />
+            </Button>
+          );
+        })}
+      </ButtonGroup>
+      {Object.keys(menuOpenState).map((key) => {
+        return (
+          <Popper
+            sx={{
+              zIndex: 1,
+              left: 0,
+            }}
+            open={open[key]}
+            anchorEl={anchorRef.current?.querySelector(`.${key}`)}
+            role={undefined} //What does this do?
+            transition
+            disablePortal
+            placement="bottom-start"
+            key={key}
+          >
+            {({ TransitionProps, placement }) => (
+              <Grow
+                {...TransitionProps}
+                style={{
+                  transformOrigin: "center bottom",
+                }}
+              >
+                <Paper>
+                  <ClickAwayListener
+                    onClickAway={(event) => handleClose(event, key)}
+                  >
+                    <MenuList id="split-button-menu" autoFocusItem>
+                      {Object.keys(menuOptions[key]).map((option, index) => {
+                        if (menuOptions[key][option] == "line") {
+                          // 🐢 -(The hard coded color here should probably come from a theme or something like that?)
+                          return (
+                            <Box
+                              key={option}
+                              sx={{
+                                mx: 0,
+                                my: 0.5,
+                                borderBottom: "solid 2px #f2f2f2",
+                              }}
+                            />
+                          );
+                        }
+                        return (
+                          <MenuItem
+                            key={option}
+                            disabled={
+                              selectDependentOptions.includes(option) &&
+                              editor.selection?.anchor.offset ==
+                                editor.selection?.focus.offset
+                                ? true
+                                : false
+                            }
+                            // selected={index === selectedIndex}
+                            onClick={(event) =>
+                              handleMenuItemClick(
+                                event,
+                                menuOptions[key] as Record<string, Function>,
+                                index
+                              )
+                            }
+                          >
+                            {option}
+                          </MenuItem>
+                        );
+                      })}
+                    </MenuList>
+                  </ClickAwayListener>
+                </Paper>
+              </Grow>
+            )}
+          </Popper>
+        );
+      })}
+    </>
+  );
+}

package/src/slate/toolbar/shortcuts.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+
+const CTRL = "Ctrl";
+const CTRL_SHIFT = "Ctrl+Shift";
+const ALT_SHIFT = "Alt+Shift";
+
+const CTRL_USED_BY_EDITOR = [
+  "b",
+  "i",
+  "u",
+  ".",
+  ",",
+  "1",
+  "2",
+  "3",
+  "k",
+  "7",
+  "8",
+];
+
+/**
+ * Modelled directly after Google Docs' shortcut keys.
+ * Custom shortcuts unique to us: Headings.
+ * @returns [key, combo]
+ */
+export function getShortcutKey(format: string, toPrint?: boolean) {
+  let combo = CTRL;
+  if (format === "bold") return ["b", combo];
+  if (format === "italic") return ["i", combo];
+  if (format === "underline") return ["u", combo];
+  if (format === "superscript") return [".", combo];
+  if (format === "subscript") return [",", combo];
+  if (format === "h1") return ["1", combo];
+  if (format === "h2") return ["2", combo];
+  if (format === "h3") return ["3", combo];
+  if (format === "link") return ["k", combo];
+  combo = CTRL_SHIFT;
+  if (format === "orderedList") return toPrint ? ["7", combo] : ["*", combo];
+  if (format === "unorderedList") return toPrint ? ["8", combo] : ["&", combo];
+  if (format === "blockquote") return toPrint ? [".", combo] : [">", combo];
+  combo = ALT_SHIFT;
+  if (format === "strikethrough") return toPrint ? ["5", combo] : ["%", combo];
+  return ["", ""];
+}
+
+export function useShortcut(format: string, action: Function) {
+  React.useEffect(() => {
+    const [key, combo] = getShortcutKey(format);
+    if (key === "") return;
+    if ((window as any).keyMappings === undefined) {
+      console.log("create keymappings");
+      (window as any).keyMappings = {
+        [CTRL]: {} as Record<string, Function>,
+        [ALT_SHIFT]: {} as Record<string, Function>,
+        [CTRL_SHIFT]: {} as Record<string, Function>,
+      };
+      window.onkeydown = (e) => {
+        if (
+          (e.ctrlKey && CTRL_USED_BY_EDITOR.includes(e.key)) ||
+          (e.altKey && e.shiftKey)
+        ) {
+          e.preventDefault();
+          const combo = e.ctrlKey
+            ? e.shiftKey
+              ? CTRL_SHIFT
+              : CTRL
+            : ALT_SHIFT;
+          const action = (window as any).keyMappings[combo][e.key];
+          if (action) action();
+        }
+      };
+    }
+    if (!(window as any).keyMappings[combo][key]) {
+      (window as any).keyMappings[combo][key] = action;
+    }
+  }, [window]);
+}