add spine to lists; add list-style for nested <ol>

ui/src/components/nodes/Rich.tsx

@@ -68,13 +68,11 @@ import {
   CodeBlockExtension,
   HeadingExtension,
   IframeExtension,
-  BulletListExtension,
-  OrderedListExtension,
-  TaskListExtension,
   CodeExtension,
   StrikeExtension,
   UnderlineExtension,
 } from "remirror/extensions";
+
 import {
   Remirror,
   EditorComponent,
@@ -126,6 +124,12 @@ import {
   MathInlineExtension,
   MathBlockExtension,
 } from "./extensions/mathExtension";
+import {
+  BulletListExtension,
+  OrderedListExtension,
+  TaskListExtension,
+} from "./extensions/list";
+
 import { NewPodButtons, level2fontsize } from "./utils";
 
 class LinkExtension extends RemirrorLinkExtension {
@@ -660,7 +664,20 @@ const MyEditor = ({
       onBlur={() => {
         setPodBlur(id);
       }}
-      sx={{ userSelect: "text", cursor: "auto" }}
+      sx={{
+        userSelect: "text",
+        cursor: "auto",
+        // Display different markers for different levels in nested ordered lists.
+        ol: {
+          "list-style-type": "decimal",
+        },
+        "ol li ol": {
+          "list-style-type": "lower-alpha",
+        },
+        "ol li ol li ol": {
+          "list-style-type": "lower-roman",
+        },
+      }}
       ref={ref}
       overflow="auto"
     >

ui/src/components/nodes/extensions/list.ts

@@ -0,0 +1,88 @@
+import {
+  BulletListExtension as RemirrorBulletListExtension,
+  OrderedListExtension as RemirrorOrderedListExtension,
+  TaskListExtension as RemirrorTaskListExtension,
+} from "remirror/extensions";
+
+import { ExtensionListTheme } from "@remirror/theme";
+import { NodeViewMethod, ProsemirrorNode } from "@remirror/core";
+
+function addSpine(dom, view, getPos) {
+  const pos = (getPos as () => number)();
+  const $pos = view.state.doc.resolve(pos + 1);
+
+  const parentListItemNode: ProsemirrorNode | undefined = $pos.node(
+    $pos.depth - 1
+  );
+
+  const isNotFirstLevel = ["listItem", "taskListItem"].includes(
+    parentListItemNode?.type?.name || ""
+  );
+
+  if (isNotFirstLevel) {
+    const spine = document.createElement("div");
+    spine.contentEditable = "false";
+    spine.classList.add(ExtensionListTheme.LIST_SPINE);
+    dom.append(spine);
+  }
+}
+
+/**
+ * Add spline but not listener.
+ */
+export class BulletListExtension extends RemirrorBulletListExtension {
+  createNodeViews(): NodeViewMethod | Record<string, never> {
+    return (_, view, getPos) => {
+      const dom = document.createElement("div");
+      dom.style.position = "relative";
+
+      addSpine(dom, view, getPos);
+
+      const contentDOM = document.createElement("ul");
+      dom.append(contentDOM);
+
+      return {
+        dom,
+        contentDOM,
+      };
+    };
+  }
+}
+
+export class OrderedListExtension extends RemirrorOrderedListExtension {
+  createNodeViews(): NodeViewMethod | Record<string, never> {
+    return (_, view, getPos) => {
+      const dom = document.createElement("div");
+      dom.style.position = "relative";
+
+      addSpine(dom, view, getPos);
+
+      const contentDOM = document.createElement("ol");
+      dom.append(contentDOM);
+
+      return {
+        dom,
+        contentDOM,
+      };
+    };
+  }
+}
+
+export class TaskListExtension extends RemirrorTaskListExtension {
+  createNodeViews(): NodeViewMethod | Record<string, never> {
+    return (_, view, getPos) => {
+      const dom = document.createElement("div");
+      dom.style.position = "relative";
+
+      addSpine(dom, view, getPos);
+
+      const contentDOM = document.createElement("ul");
+      dom.append(contentDOM);
+
+      return {
+        dom,
+        contentDOM,
+      };
+    };
+  }
+}