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

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

@@ -18,9 +18,10 @@
   outline: 2px solid;
 }
 
-/* Hover outline for instrumented editables and blocks (data-prose-index, data-block-index) */
-[data-prose-index]:hover,
-[data-block-index]:hover {
+/* Text editables get a lightweight CSS :hover outline. Blocks instead use the
+   JS-drawn .qe-hover-box (below) so the outline persists onto the floating name
+   pill, which lives in the overlay rather than inside the block. */
+[data-prose-index]:hover {
   outline: 1px solid var(--color-blue-600, blue);
 }
 
@@ -271,3 +272,143 @@ 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;
+
+  /* Always-on, lighter outline so authors can see annotated blocks/images. */
+  outline: 2px solid color-mix(in srgb, var(--comment-highlight-border) 55%, transparent);
+  outline-offset: 3px;
+}
+
+.qe-comment-box-anchor-block.is-active {
+  /* Darken to the active color when the thread is selected. */
+  outline-color: var(--comment-highlight-border-active);
+}
+
+.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-top-right {
+  border-radius: 50% 50% 2px;
+}
+
+.qe-comment-marker.is-active {
+  background: var(--comment-highlight-border-active);
+}
+
+.qe-comment-marker:hover {
+  filter: brightness(0.95);
+}
+
+.qe-selection-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 9997;
+}
+
+.qe-selected-box {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: 2px solid var(--color-blue-600, #3b82f6);
+  outline-offset: 2px;
+  background: transparent;
+  pointer-events: none;
+}
+
+.qe-hover-box {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: 1px solid var(--color-blue-600, #3b82f6);
+  background: transparent;
+  pointer-events: none;
+}
+
+.qe-selected-pill {
+  position: absolute;
+  padding: 2px 8px;
+  background: var(--color-blue-600, #3b82f6);
+  color: #fff;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+  border: 0;
+  white-space: nowrap;
+  pointer-events: none;
+  appearance: none;
+  z-index: 1;
+}
+
+.qe-selected-pill.is-hover {
+  pointer-events: auto;
+  cursor: pointer;
+}

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

@@ -2,6 +2,18 @@ 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,
+} from './src/comments.js';
+import {
+  setupNodeSelection,
+  setSelectedNode,
+  getSelectedNode,
+} from './src/selection.js';
 
 import { loadStyle } from '../../../scripts/nexter.js';
 
@@ -20,6 +32,11 @@ 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);
+  setupNodeSelection(ctx);
+  // Re-stamp the selection overlay after a body re-push (indices are fresh).
+  setSelectedNode(getSelectedNode());
   setupContentEditableListeners(ctx);
   setupImageDropListeners(ctx, document.body.querySelector('main'));
   if (!parentControllerPort) {
@@ -46,6 +63,12 @@ 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);
+  } else if (e.data.type === 'set-selected-node') {
+    setSelectedNode(e.data.node, document, { scrollIntoView: e.data.scrollIntoView });
   }
 }
 
@@ -63,6 +86,7 @@ function setupParentController(loadPage) {
     };
     port.onmessage = (ev) => onMessage(ev, ctx);
     port.postMessage({ ready: true });
+    setupCommentShortcut(ctx);
 
     window.removeEventListener('message', listener);
   };