feat: comments

blocks/canvas/canvas.js

@@ -1,5 +1,6 @@
 import { getNx } from '../../scripts/utils.js';
 import { editorSelectChange } from './editor-utils/editor-utils.js';
+import { getCommentsBridge } from './editor-utils/comments-bridge.js';
 import {
   normalizeCanvasEditorView,
   readInitialCanvasEditorView,
@@ -19,6 +20,14 @@ import { resolveEditorDocSession } from './ew-editor-doc/utils/load-editor-doc.j
 import { sourceUrlFromEditorCtx } from './ew-editor-doc/utils/ctx.js';
 import { SEL_BLOCK, SEL_ITEM, SEL_TEXT } from './ew-editor-doc/utils/selection.js';
 
+export function handleCommentShortcut(event, { controller, openPanel }) {
+  const isShortcut = (event.metaKey || event.ctrlKey) && event.altKey && event.code === 'KeyM';
+  if (!isShortcut) return;
+  event.preventDefault();
+  controller?.requestCompose();
+  openPanel();
+}
+
 const { loadStyle, hashChange } = await import(`${getNx()}/utils/utils.js`);
 const { getPanelStore, openPanel } = await import(`${getNx()}/utils/panel.js`);
 
@@ -217,6 +226,13 @@ export default async function decorate(block) {
   const { org, site } = hashState();
   const header = await installCanvasHeader(block, { org, site });
 
+  window.addEventListener('keydown', (event) => {
+    handleCommentShortcut(event, {
+      controller: getCommentsBridge().controller,
+      openPanel: () => openCanvasPanel('after', { panelName: 'comments' }),
+    });
+  });
+
   const mountRoot = canvasEditorMountRoot(block);
   mountRoot.classList.add('nx-canvas-editor-mount');
   syncEditorSplitLayout({ mountRoot, view: header.editorView });

blocks/canvas/editor-utils/command-defs.js

@@ -28,6 +28,8 @@ import {
   isImageNodeSelected,
   selectionHasLink,
   removeLink,
+  requestComment,
+  canComment,
 } from './command-helpers.js';
 import { openLinkDialog, openAltDialog, triggerAddImage } from './selection-toolbar.js';
 
@@ -339,6 +341,16 @@ export const COMMANDS = [
     apply: triggerAddImage,
   },
 
+  // Toolbar: comment (end of the toolbar, after image)
+  {
+    id: 'add-comment',
+    label: 'Comment',
+    icon: iconName('comment'),
+    showIn: ['toolbar-comment'],
+    visible: canComment,
+    apply: requestComment,
+  },
+
   // Slash menu: text section only
   {
     id: 'section-break',

blocks/canvas/editor-utils/command-helpers.js

@@ -18,6 +18,8 @@ import {
   splitCell,
   isInTable,
 } from 'da-y-wrapper';
+import { getCommentsBridge, openCommentsPanel } from './comments-bridge.js';
+import { getSelectionData } from '../../shared/comments/helpers/anchor.js';
 
 /* ---- Apply factories ---- */
 
@@ -274,6 +276,19 @@ export function removeLink(view) {
   view.dispatch(tr);
 }
 
+/* ---- Comments ---- */
+
+export function requestComment(_) {
+  openCommentsPanel();
+  getCommentsBridge().controller?.requestCompose();
+}
+
+// Only show the comment action when the selection can be anchored to a comment
+// (non-empty text, or an image/table node selection).
+export function canComment(state) {
+  return getSelectionData(state) != null;
+}
+
 /* ---- Block-type picker value ---- */
 
 const SCHEMA_NODE_TO_ID = new Map([

blocks/canvas/editor-utils/comments-bridge.js

@@ -0,0 +1,27 @@
+const bridge = { controller: null };
+
+export function getCommentsBridge() {
+  return bridge;
+}
+
+export function setCommentsController(controller) {
+  bridge.controller = controller ?? null;
+  document.dispatchEvent(new CustomEvent('nx-comments-controller-change', {
+    bubbles: true,
+    composed: true,
+    detail: { controller: bridge.controller },
+  }));
+}
+
+export function formatCommentsViewLabel(activeCount) {
+  const count = Number(activeCount) || 0;
+  return count > 0 ? `Comments (${count})` : 'Comments';
+}
+
+export function openCommentsPanel() {
+  document.querySelector('ew-canvas-header')?.dispatchEvent(new CustomEvent('nx-canvas-open-panel', {
+    bubbles: true,
+    composed: true,
+    detail: { position: 'after', panelName: 'comments' },
+  }));
+}

blocks/canvas/editor-utils/editor-utils.js

@@ -192,6 +192,27 @@ export function getInstrumentedHTML(view) {
     div.insertAdjacentElement('beforebegin', blockMarker);
   });
 
+  // Image instrumentation: layout mode selects images by position, but standalone
+  // images lose their <p data-prose-index> wrapper during prose2aem's makePictures,
+  // so text-block walking can't resolve them. Stamp each content image with its own
+  // PM position under a DEDICATED attribute (data-image-index) so it never pollutes
+  // the [data-prose-index] text-block queries. It rides makePictures' img.cloneNode
+  // onto the final <picture>'s inner <img>.
+  const originalImages = view.dom.querySelectorAll('img');
+  const clonedImages = editorClone.querySelectorAll('img');
+  originalImages.forEach((originalImage, index) => {
+    if (originalImage.matches('.ProseMirror-separator, .ProseMirror-trailingBreak')) return;
+    const clonedImage = clonedImages[index];
+    if (!clonedImage) return;
+    try {
+      const pos = view.posAtDOM(originalImage, 0);
+      clonedImage.setAttribute('data-image-index', pos);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('Could not find position for image:', e);
+    }
+  });
+
   const remoteCursors = editorClone.querySelectorAll('.ProseMirror-yjs-cursor');
 
   remoteCursors.forEach((remoteCursor) => {

blocks/canvas/ew-comments/ew-comments.js

@@ -0,0 +1,21 @@
+import getSheet from '../../shared/sheet.js';
+import { CommentsPanel } from '../../shared/comments/comments-panel.js';
+import { openCommentsPanel } from '../editor-utils/comments-bridge.js';
+
+const sheet = await getSheet('/blocks/shared/comments/comments-panel.css');
+
+export class EwComments extends CommentsPanel {
+  static extraStylesheets = [sheet];
+
+  openCommentsHost() {
+    openCommentsPanel();
+  }
+
+  closeCommentsHost() {
+    this.dispatchEvent(new CustomEvent('nx-panel-close', { bubbles: true, composed: true }));
+  }
+}
+
+customElements.define('ew-comments', EwComments);
+
+export default EwComments;

blocks/canvas/ew-comments/iframe-bridge.js

@@ -0,0 +1,57 @@
+import { decodeAnchor } from '../../shared/comments/helpers/anchor.js';
+
+function imageSrcAtAnchor(view, from) {
+  if (!view?.state?.doc) return '';
+  const { doc } = view.state;
+  let src = '';
+  doc.nodesBetween(from, Math.min(from + 2, doc.content.size), (node) => {
+    if (node.type?.name === 'image') {
+      src = node.attrs?.src ?? '';
+      return false;
+    }
+    return true;
+  });
+  return src;
+}
+
+export function commentMarkers(view, controller) {
+  if (!view || !controller?.getAttachedThreadIds) return [];
+  const ids = controller.getAttachedThreadIds();
+  if (!ids) return [];
+  const markers = [];
+  ids.forEach((threadId) => {
+    const comment = controller.getComment(threadId);
+    if (!comment) return;
+    const range = decodeAnchor({ anchor: comment, state: view.state });
+    if (!range) return;
+    const marker = {
+      threadId,
+      anchorType: comment.anchorType,
+      from: range.from,
+      to: range.to,
+      anchorText: comment.anchorText ?? '',
+    };
+    if (comment.anchorType === 'image') {
+      marker.imageSrc = imageSrcAtAnchor(view, range.from);
+    }
+    markers.push(marker);
+  });
+  return markers;
+}
+
+export function postCommentMarkers(port, markers, controller) {
+  port?.postMessage({
+    type: 'set-comment-markers',
+    markers,
+    selectedThreadId: controller?.selectedThreadId ?? null,
+  });
+}
+
+export function postScrollToComment(port, view, controller) {
+  if (!port || !view || !controller) return;
+  const threadId = controller.selectedThreadId;
+  if (!threadId) return;
+  const comment = controller.getComment(threadId);
+  const range = comment ? decodeAnchor({ anchor: comment, state: view.state }) : null;
+  if (range) port.postMessage({ type: 'scroll-to-pos', proseIndex: range.from });
+}