feat: add rich-text node (#160)

* add rich-text node

* save content to db

* add back @emotion/xxx packages

* fix level color condition

Author: lihebi

ui/package.json

@@ -6,10 +6,16 @@
     "@apollo/client": "^3.7.0",
     "@dnd-kit/core": "^6.0.5",
     "@emotion/css": "^11.10.0",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.10.10",
+    "@remirror/extension-react-tables": "^2.2.9",
+    "@remirror/extension-sub": "^2.0.9",
+    "@remirror/extension-text-highlight": "^2.0.10",
+    "@remirror/pm": "^2.0.2",
+    "@remirror/react": "^2.0.22",
+    "@remirror/react-editors": "^1.0.22",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -36,6 +42,7 @@
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
     "reactflow": "^11.3.0",
+    "remirror": "^2.0.21",
     "slate": "^0.82.1",
     "slate-history": "^0.66.0",
     "slate-react": "^0.83.2",

ui/src/components/Canvas.tsx

@@ -60,6 +60,7 @@ import { useApolloClient } from "@apollo/client";
 import { CanvasContextMenu } from "./CanvasContextMenu";
 import styles from "./canvas.style.js";
 import { ShareProjDialog } from "./ShareProjDialog";
+import { RichNode } from "./RichNode";
 
 const nanoid = customAlphabet(lowercase + numbers, 20);
 
@@ -741,7 +742,7 @@ const CodeNode = memo<Props>(function ({
   );
 });
 
-const nodeTypes = { scope: ScopeNode, code: CodeNode };
+const nodeTypes = { scope: ScopeNode, code: CodeNode, rich: RichNode };
 
 const level2color = {
   0: "rgba(187, 222, 251, 0.5)",
@@ -768,6 +769,39 @@ function getAbsPos({ node, nodesMap }) {
   }
 }
 
+/**
+ * For historical reason, the state.pod.type and DB schema pod.type are "CODE",
+ * "DECK", "WYSIWYG", while the node types in react-flow are "code", "scope",
+ * "rich". These two functions document this and handle the conversion.
+ * @param dbtype
+ * @returns
+ */
+function dbtype2nodetype(dbtype: string) {
+  switch (dbtype) {
+    case "CODE":
+      return "code";
+    case "DECK":
+      return "scope";
+    case "WYSIWYG":
+      return "rich";
+    default:
+      throw new Error(`unknown dbtype ${dbtype}`);
+  }
+}
+
+function nodetype2dbtype(nodetype: string) {
+  switch (nodetype) {
+    case "code":
+      return "CODE";
+    case "scope":
+      return "DECK";
+    case "rich":
+      return "WYSIWYG";
+    default:
+      throw new Error(`unknown nodetype ${nodetype}`);
+  }
+}
+
 export function Canvas() {
   const [nodes, setNodes, onNodesChange] = useNodesStateSynced([]);
   const [edges, setEdges] = useState<any[]>([]);
@@ -795,7 +829,7 @@ export function Canvas() {
       if (id !== "ROOT") {
         res.push({
           id: id,
-          type: pod.type === "CODE" ? "code" : "scope",
+          type: dbtype2nodetype(pod.type),
           data: {
             // label: `ID: ${id}, parent: ${pods[id].parent}, pos: ${pods[id].x}, ${pods[id].y}`,
             label: id,
@@ -809,7 +843,7 @@ export function Canvas() {
           level,
           style: {
             backgroundColor:
-              pod.type === "CODE"
+              pod.type !== "DECK"
                 ? undefined
                 : level2color[level] || level2color["default"],
             width: pod.width || undefined,
@@ -904,23 +938,28 @@ export function Canvas() {
   );
 
   const addNode = useCallback(
-    (x: number, y: number, type: string) => {
+    (x: number, y: number, type: "code" | "scope" | "rich") => {
       const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
       let style;
 
-      // if (type === "code") type = "default";
-      if (type === "scope") {
-        style = {
-          backgroundColor: level2color[0],
-          width: 600,
-          height: 600,
-        };
-      } else {
-        style = {
-          width: 300,
-          // we must not set the height here, otherwise the auto layout will not work
-          height: undefined,
-        };
+      switch (type) {
+        case "scope":
+          style = {
+            backgroundColor: level2color[0],
+            width: 600,
+            height: 600,
+          };
+          break;
+        case "code":
+        case "rich":
+          style = {
+            width: 300,
+            // we must not set the height here, otherwise the auto layout will not work
+            height: undefined,
+          };
+          break;
+        default:
+          throw new Error(`unknown type ${type}`);
       }
 
       const position = reactFlowInstance.project({
@@ -951,7 +990,7 @@ export function Canvas() {
       addPod(apolloClient, {
         id,
         parent: "ROOT",
-        type: type === "code" ? "CODE" : "DECK",
+        type: nodetype2dbtype(type),
         lang: "python",
         x: position.x,
         y: position.y,
@@ -1405,6 +1444,7 @@ export function Canvas() {
             y={points.y}
             addCode={() => addNode(client.x, client.y, "code")}
             addScope={() => addNode(client.x, client.y, "scope")}
+            addRich={() => addNode(client.x, client.y, "rich")}
             onShareClick={() => {
               setShareOpen(true);
             }}

ui/src/components/CanvasContextMenu.tsx

@@ -8,6 +8,7 @@ import MenuItem from "@mui/material/MenuItem";
 import React, { useContext } from "react";
 import CodeIcon from "@mui/icons-material/Code";
 import PostAddIcon from "@mui/icons-material/PostAdd";
+import NoteIcon from "@mui/icons-material/Note";
 import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
 
 const paneMenuStyle = (left, top) => {
@@ -51,6 +52,14 @@ export function CanvasContextMenu(props) {
             <ListItemText>New Code</ListItemText>
           </MenuItem>
         )}
+        {role !== RoleType.GUEST && (
+          <MenuItem onClick={props.addRich} sx={ItemStyle}>
+            <ListItemIcon>
+              <NoteIcon />
+            </ListItemIcon>
+            <ListItemText>New Note</ListItemText>
+          </MenuItem>
+        )}
         {role !== RoleType.GUEST && (
           <MenuItem onClick={props.addScope} sx={ItemStyle}>
             <ListItemIcon>