feat(ew): comments

Author: usman-khalid

blocks/browse/da-list/da-list.css

@@ -257,60 +257,6 @@ da-list-item.is-expanded::after {
   display: none;
 }
 
-.da-list-status {
-  position: fixed;
-  inset: 0;
-  background: rgb(255 255 255 / 60%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 500;
-}
-
-.da-list-status-toast {
-  width: 280px;
-  background: var(--s2-blue-800);
-  line-height: 48px;
-  border-radius: 6px;
-  filter: drop-shadow(rgb(0 0 0 / 15%) 0 1px 4px);
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-  color: #fff;
-  font-size: 14px;
-  overflow: hidden;
-}
-
-.da-list-status-title {
-  font-weight: 700;
-  padding: 0 12px 0 40px;
-  margin: 0;
-}
-
-.da-list-status-description {
-  line-height: 1.6;
-  padding: 6px 12px;
-  margin: 0;
-  background: rgb(255 255 255 / 10%);
-}
-
-.da-list-status-type-info .da-list-status-title {
-  background-color: var(--s2-blue-800);
-  position: relative;
-}
-
-.da-list-status-type-info .da-list-status-title::before {
-  content: '';
-  position: absolute;
-  left: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
-  background: url("/img/icons/s2-icon-infocircle-20-n.svg") center / contain no-repeat;
-  filter: brightness(0) invert(1);
-}
-
 /* Checkbox */
 
 .checkbox-label {

blocks/browse/da-list/da-list.js

@@ -30,7 +30,7 @@ export default class DaList extends LitElement {
     _dropFiles: { state: true },
     _dropMessage: { state: true },
     _dropConflicts: { state: true },
-    _status: { state: true },
+    _toast: { state: true },
     _confirm: { state: true },
     _confirmText: { state: true },
     _unpublish: { state: true },
@@ -91,16 +91,17 @@ export default class DaList extends LitElement {
 
   async firstUpdated() {
     await import('../../shared/da-dialog/da-dialog.js');
+    await import('../../shared/da-toast/da-toast.js');
     await import('../da-actionbar/da-actionbar.js');
     this.setupObserver();
   }
 
   setStatus(text, description, type = 'info') {
     if (!text) {
-      this._status = null;
+      this._toast = null;
       return;
     }
-    this._status = { type, text, description };
+    this._toast = { type, text, description, duration: 0 };
   }
 
   handlePermissions(permissions) {
@@ -409,7 +410,7 @@ export default class DaList extends LitElement {
       return pasteItem;
     });
 
-    const showStatus = setTimeout(() => {
+    const pasteStatusTimer = setTimeout(() => {
       this.setStatus('Pasting', 'Please be patient. Pasting items with many children can take time.');
     }, 2000);
 
@@ -419,7 +420,7 @@ export default class DaList extends LitElement {
       await this.handleItemAction({ item, type });
     }));
 
-    clearTimeout(showStatus);
+    clearTimeout(pasteStatusTimer);
 
     this.setStatus();
     this.handleClear();
@@ -506,8 +507,7 @@ export default class DaList extends LitElement {
   }
 
   handleShare() {
-    this.setStatus('Copied', 'URLs have been copied to the clipboard.');
-    setTimeout(() => { this.setStatus(); }, 3000);
+    this._toast = { text: 'Copied', description: 'URLs have been copied to the clipboard.' };
   }
 
   dragenter(e) {
@@ -793,13 +793,7 @@ export default class DaList extends LitElement {
   }
 
   renderStatus() {
-    return html`
-      <div class="da-list-status">
-        <div class="da-list-status-toast da-list-status-type-${this._status.type}">
-          <p class="da-list-status-title">${this._status.text}</p>
-          ${this._status.description ? html`<p class="da-list-status-description">${this._status.description}</p>` : nothing}
-        </div>
-      </div>`;
+    return html`<da-toast .toast=${this._toast} @close=${() => { this._toast = null; }}></da-toast>`;
   }
 
   renderConfirm() {
@@ -1012,7 +1006,7 @@ export default class DaList extends LitElement {
         currentPath="${this.fullpath}"
         role="row"
         data-visible="${this._selectedItems?.length > 0}"></da-actionbar>
-      ${this._status ? this.renderStatus() : nothing}
+      ${this._toast ? this.renderStatus() : nothing}
       ${this._confirm ? this.renderConfirm() : nothing}
       ${this._dropConflicts?.length ? this.renderDropConfirm() : nothing}
       ${!this._confirm && this._itemErrors.length ? this.renderErrors() : nothing}

blocks/browse/da-sites/da-sites.css

@@ -421,45 +421,3 @@ form button:hover {
   text-align: center;
 }
 
-/* Handle Share */
-
-.da-list-status {
-  position: fixed;
-  inset: 0;
-  background: rgb(255 255 255 / 60%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 500;
-}
-
-.da-list-status-toast {
-  width: 280px;
-  background: var(--s2-blue-800);
-  line-height: 48px;
-  border-radius: 6px;
-  filter: drop-shadow(rgb(0 0 0 / 15%) 0 1px 4px);
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-  color: #FFF;
-  font-size: 14px;
-  overflow: hidden;
-}
-
-.da-list-status-title {
-  font-weight: 700;
-  padding: 0 12px 0 40px;
-  margin: 0;
-}
-
-.da-list-status-description {
-  line-height: 1.6;
-  padding: 6px 12px;
-  margin: 0;
-  background: rgb(255 255 255 / 10%);
-}
-
-.da-list-status-type-info .da-list-status-title {
-  background: var(--s2-blue-800) url('/blocks/browse/img/Smock_InfoOutline_18_N.svg') 12px 50% no-repeat;
-}

blocks/browse/da-sites/da-sites.js

@@ -13,7 +13,7 @@ function getRandom() {
 export default class DaSites extends LitElement {
   static properties = {
     _recents: { state: true },
-    _status: { state: true },
+    _toast: { state: true },
     _urlError: { state: true },
   };
 
@@ -26,6 +26,7 @@ export default class DaSites extends LitElement {
     super.connectedCallback();
     this.shadowRoot.adoptedStyleSheets = [styles];
     this._recents = this.getRecents();
+    import('../../shared/da-toast/da-toast.js');
   }
 
   getRecents() {
@@ -42,10 +43,6 @@ export default class DaSites extends LitElement {
     return null;
   }
 
-  setStatus(text, description, type = 'info') {
-    this._status = text ? { type, text, description } : null;
-  }
-
   handleRemove(site) {
     // Get the index of the site to remove
     const idx = this._recents.findIndex((recent) => recent.name === site.name);
@@ -100,18 +97,7 @@ export default class DaSites extends LitElement {
     const data = [new ClipboardItem({ [blob.type]: blob })];
     navigator.clipboard.write(data);
 
-    this.setStatus('Copied', 'The link was copied to the clipboard.');
-    setTimeout(() => { this.setStatus(); }, 3000);
-  }
-
-  renderStatus() {
-    return html`
-      <div class="da-list-status">
-        <div class="da-list-status-toast da-list-status-type-${this._status.type}">
-          <p class="da-list-status-title">${this._status.text}</p>
-          ${this._status.description ? html`<p class="da-list-status-description">${this._status.description}</p>` : nothing}
-        </div>
-      </div>`;
+    this._toast = { text: 'Copied', description: 'The link was copied to the clipboard.' };
   }
 
   renderGo() {
@@ -230,7 +216,7 @@ export default class DaSites extends LitElement {
           </a>
         </div>
       </div>
-      ${this._status ? this.renderStatus() : nothing}
+      <da-toast .toast=${this._toast} @close=${() => { this._toast = null; }}></da-toast>
     `;
   }
 }

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 } from './comments-bridge.js';
+import { getSelectionData } from '../ew-comments/helpers/anchor.js';
 
 /* ---- Apply factories ---- */
 
@@ -274,6 +276,23 @@ export function removeLink(view) {
   view.dispatch(tr);
 }
 
+/* ---- Comments ---- */
+
+export function requestComment(_) {
+  document.querySelector('ew-canvas-header')?.dispatchEvent(new CustomEvent('nx-canvas-open-panel', {
+    bubbles: true,
+    composed: true,
+    detail: { position: 'after', panelName: 'comments' },
+  }));
+  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,14 @@
+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 },
+  }));
+}