HAR-6913 - super-editor: strikethrough and underline

packages/super-editor/package.json

@@ -27,6 +27,7 @@
     "prosemirror-schema-basic": "^1.2.2",
     "prosemirror-schema-list": "^1.3.0",
     "prosemirror-view": "^1.33.6",
+    "uuidv4": "^6.2.13",
     "vue": "^3.4.21",
     "xml-js": "^1.6.11"
   },

packages/super-editor/src/core/schema/DocxSchema.js

@@ -1,38 +1,38 @@
 import { Schema } from "prosemirror-model"
 
+const olDOM = ["ol", 0], ulDOM = ["ul", 0], liDOM = ["li", 0];
+
 /**
  * Custom schema for docx files with prose mirror
  * Reference: https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.ts
  */
 const DocxSchema = new Schema({
   nodes: {
 
-
-    /**
-     * ❗️ TODO: Implement a custom node view for run nodes that are children of list types
-     */
-    unorderedList: {
-      content: "text*",
-      inline: false,
-      group: "block",
-      toDOM() { return ["ul", 0]; },
+    bulletList: {
+      content: "listItem+",
+      group: "block list",
       parseDOM: [{ tag: "ul" }],
-      attrs: {
-        attributes: { default: {} },
-        type: { default: null },
-      },
+      toDOM() { return ulDOM; },
     },
 
     orderedList: {
-      content: "text*",
-      inline: false,
-      group: "block",
-      toDOM() { return ["ol", 0]; },
-      parseDOM: [{ tag: "ol" }],
-      attrs: {
-        attributes: { default: {} },
-        type: { default: null },
+      content: "listItem+",
+      group: "block list",
+      parseDOM: [{tag: "ol", getAttrs(dom) {
+        return {order: dom.hasAttribute("start") ? +dom.getAttribute("start") : 1};
+      }}],
+      toDOM(node) {
+        return node.attrs.order === 1 ? olDOM : ["ol", {start: node.attrs.order}, 0];
       },
+      attrs: {order: {default: 1}},
+    },
+
+    listItem: {
+      content: "paragraph block*",
+      parseDOM: [{tag: "li"}],
+      toDOM() { return liDOM },
+      defining: true,
     },
 
     commentRangeStart: {
@@ -102,7 +102,7 @@ const DocxSchema = new Schema({
     },
 
     body: {
-      content: "(paragraph+ | unorderedList*)",
+      content: "(paragraph+ | bulletList* | orderedList*)",
       toDOM() { return ["body", 0]; },
       attrs: {
         attributes: { default: {} },
@@ -138,6 +138,22 @@ const DocxSchema = new Schema({
         { style: "font-style=normal", clearMark: m => m.type.name == "em" }
       ],
       toDOM() { return ["em", 0]; }
+    },
+    underline: {
+      parseDOM: [
+        { tag: "u" },
+        { style: "text-decoration=underline" },
+        { style: "text-decoration=auto", clearMark: m => m.type.name == "u" }
+      ],
+      toDOM() { return ["u", 0]; }
+    },
+    strikethrough: {
+      parseDOM: [
+        { tag: "s" },
+        { style: "text-decoration=line-through" },
+        { style: "text-decoration=auto", clearMark: m => m.type.name == "s" }
+      ],
+      toDOM() { return ["s", 0]; }
     }
   }
 });

packages/super-editor/src/core/shortcuts/buildKeymap.js

@@ -13,6 +13,8 @@ export function buildKeymap() {
       "Mod-y": redo,
       "Mod-b": toggleMark(DocxSchema.marks.strong),
       "Mod-i": toggleMark(DocxSchema.marks.em),
+      "Mod-u": toggleMark(DocxSchema.marks.underline),
+      "Mod-Shift-S": toggleMark(DocxSchema.marks.strikethrough),
       "Enter": chainCommands(Commands.enter),
 
       // Just as an example