feat(ew): render layout-mode comment markers in the quick-edit iframe

Author: usman-khalid

nx/public/plugins/quick-edit/quick-edit.css

@@ -271,3 +271,82 @@ da-palette {
 da-palette .da-palette-field {
   color: black;
 }
+
+.qe-comment-overlay {
+  --comment-highlight-bg: light-dark(#fbf198, rgb(255 200 50 / 24%));
+  --comment-highlight-bg-active: light-dark(#f8d904, rgb(255 220 90 / 38%));
+  --comment-highlight-border: light-dark(#f8d904, rgb(255 210 70 / 90%));
+  --comment-highlight-border-active: light-dark(#e8c600, rgb(255 238 130));
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 9998;
+}
+
+.qe-comment-box {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border: none;
+  pointer-events: auto;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.qe-comment-box-text {
+  --da-comment-bg: var(--comment-highlight-bg);
+  --da-comment-border-color: var(--comment-highlight-border);
+
+  /* Visual only: let clicks fall through to the editable text underneath. */
+  pointer-events: none;
+  background: light-dark(
+    color-mix(in srgb, var(--da-comment-bg) 42%, transparent),
+    color-mix(in srgb, var(--da-comment-bg) 55%, transparent)
+  );
+  border-bottom: 2px solid var(--da-comment-border-color);
+  z-index: 2;
+}
+
+.qe-comment-box.is-active {
+  --da-comment-bg: var(--comment-highlight-bg-active);
+  --da-comment-border-color: var(--comment-highlight-border-active);
+}
+
+.qe-comment-box-text.is-active {
+  background: light-dark(
+    color-mix(in srgb, var(--da-comment-bg) 55%, transparent),
+    color-mix(in srgb, var(--da-comment-bg) 65%, transparent)
+  );
+  border-bottom-color: var(--da-comment-border-color);
+}
+
+.qe-comment-box-anchor-block {
+  pointer-events: none;
+  z-index: 1;
+  background: transparent !important;
+  outline: 2px solid var(--comment-highlight-border-active);
+  outline-offset: 3px;
+}
+
+.qe-comment-marker {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: none;
+  border-radius: 50% 50% 50% 2px;
+  background: var(--comment-highlight-border);
+  pointer-events: auto;
+  cursor: pointer;
+  z-index: 9999;
+}
+
+.qe-comment-marker.is-active {
+  background: var(--comment-highlight-border-active);
+}
+
+.qe-comment-marker:hover {
+  filter: brightness(0.95);
+}

nx/public/plugins/quick-edit/quick-edit.js

@@ -2,6 +2,14 @@ import { setupContentEditableListeners, setupImageDropListeners, updateImageSrc,
 import { setEditorState } from './src/prose.js';
 import { setCursors } from './src/cursors.js';
 import { pollConnection, setupActions } from './src/utils.js';
+import {
+  scrollToProseIndex,
+  setCommentMarkers,
+  applyCommentMarkers,
+  setupCommentShortcut,
+  restoreBlockIndices,
+  scheduleCommentMarkerLayout,
+} from './src/comments.js';
 
 import { loadStyle } from '../../../scripts/nexter.js';
 
@@ -20,6 +28,9 @@ async function setBody(body, ctx) {
   const doc = new DOMParser().parseFromString(body, 'text/html');
   document.body.innerHTML = doc.body.innerHTML;
   await ctx.loadPage();
+  restoreBlockIndices(doc, document);
+  applyCommentMarkers(ctx);
+  scheduleCommentMarkerLayout(ctx);
   setupContentEditableListeners(ctx);
   setupImageDropListeners(ctx, document.body.querySelector('main'));
   if (!parentControllerPort) {
@@ -46,6 +57,10 @@ function onMessage(e, ctx) {
     updateImageSrc(originalSrc, newSrc);
   } else if (e.data.type === 'image-error') {
     handleImageError(e.data.error);
+  } else if (e.data.type === 'scroll-to-pos') {
+    scrollToProseIndex(e.data.proseIndex);
+  } else if (e.data.type === 'set-comment-markers') {
+    setCommentMarkers(e.data, ctx);
   }
 }
 
@@ -63,6 +78,7 @@ function setupParentController(loadPage) {
     };
     port.onmessage = (ev) => onMessage(ev, ctx);
     port.postMessage({ ready: true });
+    setupCommentShortcut(ctx);
 
     window.removeEventListener('message', listener);
   };