feat: highlight commented images (#11808)

app/editor/index.tsx

@@ -944,7 +944,7 @@ const EditorContainer = styled(Styles)<{
       a#comment-${props.focusedCommentId}
         ~ span.component-image
         div.image-wrapper {
-        outline: ${props.theme.commentMarkBackground} solid 2px;
+        outline: ${props.theme.commentedImageOutlineDark} solid 2px;
       }
     `}
 

app/typings/styled-components.d.ts

@@ -141,6 +141,8 @@ declare module "styled-components" {
     textDiffDeletedBackground: string;
     placeholder: string;
     commentMarkBackground: string;
+    commentedImageOutlineLight: string;
+    commentedImageOutlineDark: string;
     sidebarBackground: string;
     sidebarHoverBackground: string;
     sidebarActiveBackground: string;

shared/editor/components/Styles.ts

@@ -959,6 +959,10 @@ img.ProseMirror-separator {
   display: block;
 }
 
+.image-commented .image-wrapper {
+  outline: ${props.theme.commentedImageOutlineLight} solid 2px;
+}
+
 // Removes forced paragraph spaces below images, this is needed to images
 // being inline nodes that are displayed like blocks
 .component-image + img.ProseMirror-separator,

shared/editor/nodes/Image.tsx

@@ -20,6 +20,7 @@ import { ImageSource } from "../lib/FileHelper";
 import { DiagramPlaceholder } from "../components/DiagramPlaceholder";
 import { addComment } from "../commands/comment";
 import { addLink } from "../commands/link";
+import { commentedImagePlugin } from "../plugins/CommentedImagePlugin";
 
 const imageSizeRegex = /\s=(\d+)?x(\d+)?$/;
 
@@ -241,6 +242,7 @@ export default class Image extends SimpleImage {
   get plugins() {
     return [
       ...super.plugins,
+      commentedImagePlugin(),
       new Plugin({
         props: {
           handleKeyDown: (view, event) => {

shared/editor/plugins/CommentedImagePlugin.ts

@@ -0,0 +1,57 @@
+import type { EditorState } from "prosemirror-state";
+import { Plugin } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+
+/**
+ * Plugin that applies a light outline decoration to image nodes that have
+ * comment marks, providing a visual indicator that the image has been commented
+ * on.
+ */
+export class CommentedImagePlugin extends Plugin {
+  constructor() {
+    super({
+      state: {
+        init: (_, state: EditorState) => ({
+          decorations: this.createDecorations(state),
+        }),
+        apply: (tr, pluginState, _oldState, newState) => {
+          if (tr.docChanged) {
+            return { decorations: this.createDecorations(newState) };
+          }
+          return pluginState;
+        },
+      },
+      props: {
+        decorations: (state) => {
+          const pluginState = this.getState(state);
+          return pluginState ? pluginState.decorations : null;
+        },
+      },
+    });
+  }
+
+  private createDecorations(state: EditorState) {
+    const decorations: Decoration[] = [];
+
+    state.doc.descendants((node, pos) => {
+      if (
+        node.type.name === "image" &&
+        Array.isArray(node.attrs.marks) &&
+        node.attrs.marks.some(
+          (mark: { type: string; attrs?: { resolved?: boolean } }) =>
+            mark.type === "comment" && !mark.attrs?.resolved
+        )
+      ) {
+        decorations.push(
+          Decoration.node(pos, pos + node.nodeSize, {
+            class: "image-commented",
+          })
+        );
+      }
+    });
+
+    return DecorationSet.create(state.doc, decorations);
+  }
+}
+
+export const commentedImagePlugin = () => new CommentedImagePlugin();

shared/styles/theme.ts

@@ -71,7 +71,9 @@ const buildBaseTheme = (input: Partial<Colors>) => {
     selected: colors.accent,
     textHighlight: "#FDEA9B",
     textHighlightForeground: colors.almostBlack,
-    commentMarkBackground: transparentize(0.5, "#2BC2FF"),
+    commentMarkBackground: transparentize(0.5, colors.brand.marine),
+    commentedImageOutlineDark: colors.brand.marine,
+    commentedImageOutlineLight: transparentize(0.7, colors.brand.marine),
     code: colors.lightBlack,
     codeComment: "#008000",
     codePunctuation: "#393a34",