@beyondwork/docx-react-component 1.0.98 → 1.0.99

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.98",
+  "version": "1.0.99",
   "description": "Embeddable React Word (docx) editor with review, comments, tracked changes, and round-trip OOXML fidelity.",
   "type": "module",
   "sideEffects": [

package/src/ui/headless/comment-decoration-model.ts

@@ -133,6 +133,13 @@ export function normalizeMarkupDisplay(
   }
 }
 
+const COMMENT_ACTIVE_MARKER_CLASS =
+  "bg-comment-soft underline decoration-comment decoration-2 underline-offset-4 decoration-solid box-decoration-clone rounded-[2px] shadow-[inset_0_-2px_0_var(--color-comment)]";
+const COMMENT_OPEN_MARKER_CLASS =
+  "bg-comment-soft underline decoration-comment decoration-2 underline-offset-4 decoration-solid box-decoration-clone rounded-[2px]";
+const COMMENT_RESOLVED_MARKER_CLASS =
+  "bg-comment-soft underline decoration-comment/60 decoration-1 underline-offset-4 decoration-solid box-decoration-clone rounded-[2px]";
+
 export function getCommentHighlightClass(
   model: CommentDecorationModel | undefined,
   from: number,
@@ -147,23 +154,29 @@ export function getCommentHighlightClass(
   switch (normalizeMarkupDisplay(markupDisplay)) {
     case "no-markup":
     case "original":
-      return state.hasActive ? "bg-comment-soft" : "";
+      if (state.hasActive) {
+        return COMMENT_ACTIVE_MARKER_CLASS;
+      }
+      if (state.hasOpen) {
+        return COMMENT_OPEN_MARKER_CLASS;
+      }
+      return COMMENT_RESOLVED_MARKER_CLASS;
     case "simple-markup":
       if (state.hasActive) {
-        return "underline decoration-comment decoration-2 underline-offset-4";
+        return COMMENT_ACTIVE_MARKER_CLASS;
       }
       if (state.hasOpen) {
-        return "underline decoration-comment/60 decoration-1 underline-offset-4";
+        return COMMENT_OPEN_MARKER_CLASS;
       }
-      return "underline decoration-comment/40 decoration-1 underline-offset-4";
+      return COMMENT_RESOLVED_MARKER_CLASS;
     case "all-markup":
       if (state.hasActive) {
-        return "bg-comment-strong";
+        return COMMENT_ACTIVE_MARKER_CLASS;
       }
       if (state.hasOpen) {
-        return "bg-comment-soft";
+        return COMMENT_OPEN_MARKER_CLASS;
       }
-      return "bg-comment-soft opacity-60";
+      return COMMENT_RESOLVED_MARKER_CLASS;
   }
 }