Add more highlighter color choices (#7012)

* Add more highlighter color choices, closes #7011

* docs

shared/editor/marks/Highlight.ts

@@ -1,3 +1,4 @@
+import { rgba } from "polished";
 import { toggleMark } from "prosemirror-commands";
 import { MarkSpec, MarkType } from "prosemirror-model";
 import markInputRule from "../lib/markInputRule";
@@ -5,14 +6,48 @@ import markRule from "../rules/mark";
 import Mark from "./Mark";
 
 export default class Highlight extends Mark {
+  /** The colors that can be used for highlighting */
+  static colors = ["#FDEA9B", "#FED46A", "#FA551E", "#B4DC19", "#C8AFF0"];
+
+  /** The names of the colors that can be used for highlighting, must match length of array above */
+  static colorNames = ["Coral", "Apricot", "Sunset", "Smoothie", "Bubblegum"];
+
+  /** The default opacity of the highlight */
+  static opacity = 0.4;
+
   get name() {
     return "highlight";
   }
 
   get schema(): MarkSpec {
     return {
-      parseDOM: [{ tag: "mark" }],
-      toDOM: () => ["mark"],
+      attrs: {
+        color: {
+          default: null,
+        },
+      },
+      parseDOM: [
+        {
+          tag: "mark",
+          getAttrs: (dom) => {
+            const color = dom.getAttribute("data-color") || "";
+
+            return {
+              color: Highlight.colors.includes(color) ? color : null,
+            };
+          },
+        },
+      ],
+      toDOM: (node) => [
+        "mark",
+        {
+          "data-color": node.attrs.color,
+          style: `background-color: ${rgba(
+            node.attrs.color || Highlight.colors[0],
+            Highlight.opacity
+          )}`,
+        },
+      ],
     };
   }