Add more highlighter color choices (#7012)

* Add more highlighter color choices, closes #7011

* docs

app/components/Icons/CircleIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
+  color?: string;
+  /** If true, the icon will retain its color in selected menus and other places that attempt to override it */
+  retainColor?: boolean;
+};
+
+export default function CircleIcon({
+  size = 24,
+  color = "currentColor",
+  retainColor,
+  ...rest
+}: Props) {
+  return (
+    <svg
+      fill={color}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      version="1.1"
+      style={retainColor ? { fill: color } : undefined}
+      {...rest}
+    >
+      <circle xmlns="http://www.w3.org/2000/svg" cx="12" cy="12" r="8" />
+    </svg>
+  );
+}

app/editor/components/ToolbarMenu.tsx

@@ -20,7 +20,7 @@ type Props = {
 /*
  * Renders a dropdown menu in the floating toolbar.
  */
-function ToolbarDropdown(props: { item: MenuItem }) {
+function ToolbarDropdown(props: { active: boolean; item: MenuItem }) {
   const menu = useMenuState();
   const { commands, view } = useEditor();
   const { item } = props;
@@ -102,7 +102,7 @@ function ToolbarMenu(props: Props) {
             key={index}
           >
             {item.children ? (
-              <ToolbarDropdown item={item} />
+              <ToolbarDropdown active={isActive && !item.label} item={item} />
             ) : (
               <ToolbarButton
                 onClick={handleClick(item)}

app/editor/menus/formatting.tsx

@@ -20,11 +20,14 @@ import {
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
+import Highlight from "@shared/editor/marks/Highlight";
+import { getMarksBetween } from "@shared/editor/queries/getMarksBetween";
 import { isInCode } from "@shared/editor/queries/isInCode";
 import { isInList } from "@shared/editor/queries/isInList";
 import { isMarkActive } from "@shared/editor/queries/isMarkActive";
 import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
+import CircleIcon from "~/components/Icons/CircleIcon";
 import { Dictionary } from "~/hooks/useDictionary";
 
 export default function formattingMenuItems(
@@ -38,6 +41,12 @@ export default function formattingMenuItems(
   const isCodeBlock = isInCode(state, { onlyBlock: true });
   const isEmpty = state.selection.empty;
 
+  const highlight = getMarksBetween(
+    state.selection.from,
+    state.selection.to,
+    state
+  ).find(({ mark }) => mark.type.name === "highlight");
+
   return [
     {
       name: "placeholder",
@@ -72,11 +81,21 @@ export default function formattingMenuItems(
       visible: !isCode && (!isMobile || !isEmpty),
     },
     {
-      name: "highlight",
       tooltip: dictionary.mark,
-      icon: <HighlightIcon />,
-      active: isMarkActive(schema.marks.highlight),
+      icon: highlight ? (
+        <CircleIcon color={highlight.mark.attrs.color} />
+      ) : (
+        <HighlightIcon />
+      ),
+      active: () => !!highlight,
       visible: !isCode && (!isMobile || !isEmpty),
+      children: Highlight.colors.map((color, index) => ({
+        name: "highlight",
+        label: Highlight.colorNames[index],
+        icon: <CircleIcon retainColor color={color} />,
+        active: isMarkActive(schema.marks.highlight, { color }),
+        attrs: { color },
+      })),
     },
     {
       name: "code_inline",

shared/editor/components/Styles.ts

@@ -1179,11 +1179,10 @@ code {
 
 mark {
   border-radius: 1px;
-  color: ${props.theme.textHighlightForeground};
-  background: ${props.theme.textHighlight};
+  color: ${props.theme.text};
 
   a {
-    color: ${props.theme.textHighlightForeground};
+    color: ${props.theme.text};
   }
 }
 

shared/editor/lib/markInputRule.ts

@@ -1,23 +1,7 @@
 import { InputRule } from "prosemirror-inputrules";
-import { MarkType, Mark } from "prosemirror-model";
+import { MarkType } from "prosemirror-model";
 import { EditorState } from "prosemirror-state";
-
-function getMarksBetween(start: number, end: number, state: EditorState) {
-  let marks: { start: number; end: number; mark: Mark }[] = [];
-
-  state.doc.nodesBetween(start, end, (node, pos) => {
-    marks = [
-      ...marks,
-      ...node.marks.map((mark) => ({
-        start: pos,
-        end: pos + node.nodeSize,
-        mark,
-      })),
-    ];
-  });
-
-  return marks;
-}
+import { getMarksBetween } from "../queries/getMarksBetween";
 
 /**
  * A factory function for creating Prosemirror plugins that automatically apply a mark to text

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
+          )}`,
+        },
+      ],
     };
   }
 

shared/editor/queries/getMarksBetween.ts

@@ -0,0 +1,31 @@
+import { Mark } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+
+/**
+ * Get all marks that are applied to text between two positions.
+ *
+ * @param start The start position
+ * @param end The end position
+ * @param state The editor state
+ * @returns A list of marks
+ */
+export function getMarksBetween(
+  start: number,
+  end: number,
+  state: EditorState
+) {
+  let marks: { start: number; end: number; mark: Mark }[] = [];
+
+  state.doc.nodesBetween(start, end, (node, pos) => {
+    marks = [
+      ...marks,
+      ...node.marks.map((mark) => ({
+        start: pos,
+        end: pos + node.nodeSize,
+        mark,
+      })),
+    ];
+  });
+
+  return marks;
+}

shared/editor/queries/isList.ts

@@ -1,5 +1,12 @@
 import { Node, Schema } from "prosemirror-model";
 
+/**
+ * Check if a node is a list node.
+ *
+ * @param node The node to check
+ * @param schema The schema to check against
+ * @returns True if the node is a list node, false otherwise
+ */
 export function isList(node: Node, schema: Schema) {
   return (
     node.type === schema.nodes.bullet_list ||

shared/editor/queries/isMarkActive.ts

@@ -1,16 +1,38 @@
 import { MarkType } from "prosemirror-model";
 import { EditorState } from "prosemirror-state";
+import { Primitive } from "utility-types";
+import { getMarksBetween } from "./getMarksBetween";
 
+/**
+ * Checks if a mark is active in the current selection or not.
+ *
+ * @param type The mark type to check.
+ * @param attrs The attributes to check.
+ * @returns A function that checks if a mark is active in the current selection or not.
+ */
 export const isMarkActive =
-  (type: MarkType) =>
+  (type: MarkType, attrs?: Record<string, Primitive>) =>
   (state: EditorState): boolean => {
     if (!type) {
       return false;
     }
 
     const { from, $from, to, empty } = state.selection;
-
-    return !!(empty
+    const hasMark = !!(empty
       ? type.isInSet(state.storedMarks || $from.marks())
       : state.doc.rangeHasMark(from, to, type));
+
+    if (!hasMark) {
+      return false;
+    }
+    if (attrs) {
+      const results = getMarksBetween(from, to, state);
+      return results.some(
+        ({ mark }) =>
+          mark.type === type &&
+          Object.keys(attrs).every((key) => mark.attrs[key] === attrs[key])
+      );
+    }
+
+    return true;
   };

shared/editor/queries/isNodeActive.ts

@@ -3,6 +3,13 @@ import { EditorState } from "prosemirror-state";
 import { Primitive } from "utility-types";
 import { findParentNode } from "./findParentNode";
 
+/**
+ * Checks if a node is active in the current selection or not.
+ *
+ * @param type The node type to check.
+ * @param attrs The attributes to check.
+ * @returns A function that checks if a node is active in the current selection or not.
+ */
 export const isNodeActive =
   (type: NodeType, attrs: Record<string, Primitive> = {}) =>
   (state: EditorState) => {
@@ -14,9 +21,7 @@ export const isNodeActive =
     let node = nodeAfter?.type === type ? nodeAfter : undefined;
 
     if (!node) {
-      const parent = findParentNode((node) => node.type === type)(
-        state.selection
-      );
+      const parent = findParentNode((n) => n.type === type)(state.selection);
       node = parent?.node;
     }