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",