feat(visual diff) diff view to support LOC and MSM file changes in EW

blocks/canvas/canvas.css

@@ -14,6 +14,11 @@ html:has(aside.panel[data-position="after"]:not([hidden])) ew-canvas-header::par
   display: none;
 }
 
+html:has(ew-canvas-header[has-conflicts]) aside.panel[data-position="before"] {
+  pointer-events: none;
+  opacity: 0.45;
+}
+
 .fragment-content:has(nx-chat) {
   height: 100%;
 

blocks/canvas/canvas.js

@@ -161,6 +161,7 @@ async function installCanvasHeader(block, { org, site }) {
   header.editorView = await readInitialCanvasEditorView({ org, site });
   canvasBus.editorViewRequest.subscribe(({ view: rawView }) => {
     const view = normalizeCanvasEditorView(rawView);
+    header.editorView = view;
     persistCanvasEditorView(view);
     notifyCanvasEditorActive(view);
     syncEditorSplitLayout({ mountRoot: canvasEditorMountRoot(block), view });
@@ -251,6 +252,13 @@ export default async function decorate(block) {
   syncEditorSplitLayout({ mountRoot, view: header.editorView });
   installEditorSplitDrag(mountRoot);
 
+  canvasBus.mergeConflictsState.subscribe((detail) => {
+    header.hasUnresolvedMergeConflicts = detail?.hasMergeConflicts ?? false;
+    if (header.hasUnresolvedMergeConflicts && header.editorView !== 'content') {
+      canvasBus.editorViewRequest.emit({ view: 'content' });
+    }
+  });
+
   canvasBus.undoState.subscribe((detail) => {
     header.undoAvailable = detail?.canUndo ?? false;
     header.redoAvailable = detail?.canRedo ?? false;

blocks/canvas/editor-utils/prose-merge-conflicts.js

@@ -0,0 +1,20 @@
+import { Plugin } from 'da-y-wrapper';
+import { checkForLocNodes } from '../../edit/prose/diff/diff-utils.js';
+import { debounce } from '../../edit/utils/helpers.js';
+
+export function createMergeConflictsPlugin(onMergeConflictsChange, hostEl) {
+  const debouncedCheck = debounce((view) => {
+    onMergeConflictsChange?.(checkForLocNodes(view, hostEl));
+  }, 500);
+
+  return new Plugin({
+    view(editorView) {
+      debouncedCheck(editorView);
+      return {
+        update(view, prevState) {
+          if (view.state.doc !== prevState.doc) debouncedCheck(view);
+        },
+      };
+    },
+  });
+}

blocks/canvas/ew-canvas-header/ew-canvas-header.css

@@ -92,6 +92,16 @@
     outline: none;
   }
 
+  &:disabled {
+    color: var(--s2-gray-400);
+    cursor: not-allowed;
+
+    &:hover {
+      color: var(--s2-gray-400);
+      background-color: transparent;
+    }
+  }
+
   &:hover:not(.is-selected) {
     color: var(--s2-gray-900);
     background-color: var(--s2-gray-200);
@@ -118,6 +128,10 @@
     flex-shrink: 0;
     overflow: hidden;
   }
+
+  &:disabled.segment-icon svg.icon {
+    opacity: 0.45;
+  }
 }
 
 .bar {

blocks/canvas/ew-canvas-header/ew-canvas-header.js

@@ -28,6 +28,7 @@ class EWCanvasHeader extends LitElement {
     undoAvailable: { type: Boolean },
     redoAvailable: { type: Boolean },
     authorized: { type: Boolean },
+    hasUnresolvedMergeConflicts: { type: Boolean, reflect: true, attribute: 'has-conflicts' },
     canWrite: { type: Boolean },
     _chatDisabled: { state: true },
   };
@@ -38,6 +39,7 @@ class EWCanvasHeader extends LitElement {
     this.undoAvailable = false;
     this.redoAvailable = false;
     this.authorized = true;
+    this.hasUnresolvedMergeConflicts = false;
     this.canWrite = true;
   }
 
@@ -81,9 +83,9 @@ class EWCanvasHeader extends LitElement {
     canvasBus.redoRequest.emit();
   }
 
-  _setEditorView(view) {
+  setEditorView(view) {
+    if (this.hasUnresolvedMergeConflicts && view !== 'content') return;
     if (!EDITOR_VIEWS.includes(view) || view === this.editorView) return;
-    this.editorView = view;
     canvasBus.editorViewRequest.emit({ view });
   }
 
@@ -134,21 +136,24 @@ class EWCanvasHeader extends LitElement {
               type="button"
               class="segment ${this.editorView === 'layout' ? 'is-selected' : ''}"
               aria-pressed=${this.editorView === 'layout'}
-              @click=${() => this._setEditorView('layout')}
+              title=${this.hasUnresolvedMergeConflicts ? 'Resolve conflicts to switch views' : nothing}
+              ?disabled=${this.hasUnresolvedMergeConflicts}
+              @click=${() => this.setEditorView('layout')}
             >Layout</button>
             <button
               type="button"
               class="segment ${this.editorView === 'content' ? 'is-selected' : ''}"
               aria-pressed=${this.editorView === 'content'}
-              @click=${() => this._setEditorView('content')}
+              @click=${() => this.setEditorView('content')}
             >Content</button>
             <button
               type="button"
               class="segment segment-icon ${this.editorView === 'split' ? 'is-selected' : ''}"
               aria-pressed=${this.editorView === 'split'}
               aria-label="Split view"
-              title="Split view"
-              @click=${() => this._setEditorView('split')}
+              title=${this.hasUnresolvedMergeConflicts ? 'Resolve conflicts to switch views' : 'Split view'}
+              ?disabled=${this.hasUnresolvedMergeConflicts}
+              @click=${() => this.setEditorView('split')}
             >${this._renderIcon('gridCompare')}</button>
           </div>
           ` : nothing}

blocks/canvas/ew-editor-doc/ew-editor-doc-diff.css

@@ -0,0 +1,155 @@
+/* stylelint-disable selector-class-pattern */
+
+.ew-editor-doc-mount .loc-tabbed-container {
+  background: var(--s2-gray-25);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+  border-radius: var(--s2-corner-radius-400);
+}
+
+.ew-editor-doc-mount .diff-tab-content {
+  background: var(--s2-gray-25);
+}
+
+.ew-editor-doc-mount .da-diff-btn-base {
+  border-radius: var(--s2-corner-radius-400);
+  height: 28px;
+  background: var(--s2-gray-100);
+}
+
+.ew-editor-doc-mount .da-diff-btn .switch-btn,
+.ew-editor-doc-mount .da-diff-btn-3part .diff-label {
+  padding: 4px 10px;
+}
+
+.ew-editor-doc-mount .da-diff-btn .switch-btn {
+  cursor: default;
+}
+
+.ew-editor-doc-mount .da-diff-btn-base-element {
+  font-size: var(--s2-component-s-regular-font-size, 0.875rem);
+  font-weight: 600;
+
+  &:focus-visible {
+    outline: 2px solid var(--s2-blue-800);
+    outline-offset: 2px;
+  }
+}
+
+.ew-editor-doc-mount .da-diff-btn .confirm-btn,
+.ew-editor-doc-mount .da-diff-btn-3part .diff-accept,
+.ew-editor-doc-mount .da-diff-btn-3part .diff-delete {
+  padding: 0;
+}
+
+.ew-editor-doc-mount .da-diff-btn .confirm-btn::before,
+.ew-editor-doc-mount .da-diff-btn-3part .diff-accept::before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: currentcolor;
+  mask: no-repeat center / 16px url('/img/icons/s2-icon-checkmark-20-n.svg');
+}
+
+.ew-editor-doc-mount .da-diff-btn-3part .diff-delete::before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: currentcolor;
+  mask: no-repeat center / 16px url('/img/icons/s2-icon-close-20-n.svg');
+}
+
+.ew-editor-doc-mount .da-diff-btn:is(.is-local, .is-upstream, .is-diff) .switch-btn,
+.ew-editor-doc-mount .da-diff-btn-3part:is(.is-local, .is-upstream) .diff-label {
+  background: transparent;
+  color: var(--s2-gray-800);
+}
+
+.ew-editor-doc-mount .da-diff-btn:is(.is-local, .is-upstream, .is-diff) .confirm-btn,
+.ew-editor-doc-mount .da-diff-btn-3part:is(.is-local, .is-upstream) .diff-accept,
+.ew-editor-doc-mount .da-diff-btn-3part:is(.is-local, .is-upstream) .diff-delete {
+  background: var(--s2-gray-200);
+  color: var(--s2-gray-800);
+  border-left: 1px solid var(--s2-gray-300);
+}
+
+.ew-editor-doc-mount .da-diff-btn.is-active {
+  border-color: var(--s2-gray-900);
+}
+
+.ew-editor-doc-mount .da-diff-btn.is-active .switch-btn,
+.ew-editor-doc-mount .da-diff-btn.is-active .confirm-btn {
+  background: var(--s2-gray-300);
+  color: var(--s2-gray-900);
+}
+
+.ew-editor-doc-mount .da-diff-btn .confirm-btn:hover,
+.ew-editor-doc-mount .da-diff-btn-3part .diff-accept:hover,
+.ew-editor-doc-mount .da-diff-btn-3part .diff-delete:hover {
+  background: var(--s2-gray-300);
+  color: var(--s2-gray-900);
+}
+
+.ew-editor-doc-mount .diff-tooltip {
+  background: var(--s2-gray-1000);
+  color: var(--s2-gray-25);
+  font-weight: 500;
+  border: none;
+  border-radius: var(--s2-corner-radius-400);
+  box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
+  backdrop-filter: none;
+}
+
+.ew-editor-doc-mount .diff-tooltip::before {
+  display: none;
+}
+
+.ew-editor-doc-mount .diff-tooltip::after {
+  border-top-color: var(--s2-gray-1000);
+  filter: none;
+}
+
+.ew-editor-doc-mount .diff-tab-pane del.diffdel,
+.ew-editor-doc-mount .diff-tab-pane del.diffmod {
+  background-color: var(--s2-red-200);
+  color: var(--s2-red-900);
+  border: none;
+}
+
+.ew-editor-doc-mount .diff-tab-pane ins.diffins,
+.ew-editor-doc-mount .diff-tab-pane ins.diffmod {
+  background-color: var(--s2-green-200);
+  color: var(--s2-green-900);
+  border: none;
+}
+
+.ew-editor-doc-mount .loc-color-overlay.loc-regional {
+  background-color: color-mix(in srgb, var(--s2-green-200) 25%, transparent);
+}
+
+.ew-editor-doc-mount .loc-color-overlay.loc-langstore {
+  background-color: color-mix(in srgb, var(--s2-red-200) 25%, transparent);
+}
+
+.ew-editor-doc-mount .diff-bg-local {
+  background-color: color-mix(in srgb, var(--s2-green-200) 25%, transparent);
+}
+
+.ew-editor-doc-mount .diff-bg-upstream {
+  background-color: color-mix(in srgb, var(--s2-red-200) 25%, transparent);
+}
+
+.ew-editor-doc-mount .diff-bg-diff {
+  background-color: color-mix(in srgb, var(--s2-gray-100) 25%, transparent);
+}
+
+.ew-editor-doc-mount .da-regional-edits-overlay {
+  padding: var(--s2-spacing-200);
+  background: var(--s2-gray-25);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+}
+
+.ew-editor-doc-mount .da-regional-edits-actions {
+  gap: var(--s2-spacing-200);
+}

blocks/canvas/ew-editor-doc/ew-editor-doc.js

@@ -1,6 +1,7 @@
 import { LitElement, html, nothing } from 'da-lit';
 import { yUndo, yRedo, NodeSelection, TextSelection } from 'da-y-wrapper';
-import { getNx } from '../../../scripts/utils.js';
+import { getNx, getNx2 } from '../../../scripts/utils.js';
+import getSheet from '../../shared/sheet.js';
 import { updateDocument, updateCursors, getInstrumentedHTML, getEditor } from '../editor-utils/editor-utils.js';
 import { getActiveBlockIndex, getBlockPositions } from '../editor-utils/blocks.js';
 import {
@@ -41,6 +42,8 @@ const { loadStyle } = await import(`${getNx()}/utils/utils.js`);
 const { CHAT_EVENT } = await import(`${getNx()}/blocks/chat/constants.js`);
 
 const style = await loadStyle(import.meta.url);
+const buttons = await getSheet(`${getNx2()}/styles/buttons.css`);
+const diffStyle = await getSheet('/blocks/canvas/ew-editor-doc/ew-editor-doc-diff.css');
 
 export class EwEditorDoc extends LitElement {
   static properties = {
@@ -95,6 +98,10 @@ export class EwEditorDoc extends LitElement {
     canvasBus.undoState.emit({ canUndo, canRedo });
   }
 
+  _emitMergeConflictsState(hasMergeConflicts) {
+    canvasBus.mergeConflictsState.emit({ hasMergeConflicts });
+  }
+
   _observeUndoManager(mgr) {
     this._stopObservingUndoManager();
     if (!mgr) return;
@@ -281,6 +288,8 @@ export class EwEditorDoc extends LitElement {
         permissions,
         setEditable: (editable) => this._setEditable(editable),
         getToken: () => token,
+        onMergeConflictsChange: (hasConflicts) => this._emitMergeConflictsState(hasConflicts),
+        hostEl: this,
         extraPlugins: [
           createExtensionsBridgePlugin(),
           createTrackingPlugin(
@@ -336,7 +345,7 @@ export class EwEditorDoc extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.shadowRoot.adoptedStyleSheets = [style];
+    this.shadowRoot.adoptedStyleSheets = [style, buttons, diffStyle];
     this._unsubscribeEditorActive = canvasBus.editorViewState.subscribe(({ view }) => {
       this.hidden = view === 'layout';
       hideSelectionToolbar();

blocks/canvas/ew-editor-doc/prose.js

@@ -41,6 +41,9 @@ import { getNx } from '../../../scripts/utils.js';
 import { getAuthToken } from '../../shared/utils.js';
 import { generateColor, getCollabIdentity } from './utils/collab.js';
 import { checkBlockLibraryConfigured } from '../editor-utils/block-slash.js';
+import { getDiffClass, addActiveView } from '../../edit/prose/diff/diff-utils.js';
+import { initDaMetadata } from '../../edit/utils/helpers.js';
+import { createMergeConflictsPlugin } from '../editor-utils/prose-merge-conflicts.js';
 import { canvasBus } from '../utils/canvas-bus.js';
 
 const { DA_ADMIN, DA_COLLAB, hashChange } = await import(`${getNx()}/utils/utils.js`);
@@ -83,7 +86,7 @@ function checkLibraryConfiguredOnSync(wsProvider, canWrite) {
 
 export default async function initProse({
   path, permissions, setEditable, getToken,
-  extraPlugins = [],
+  extraPlugins = [], onMergeConflictsChange, hostEl,
 }) {
   const editor = document.createElement('div');
   editor.className = 'da-prose-mirror';
@@ -212,19 +215,35 @@ export default async function initProse({
 
   if (canWrite) {
     plugins.unshift(createSlashMenuPlugin(), createSelectionToolbarPlugin());
-    plugins.push(imageFocalPoint());
+    plugins.push(imageFocalPoint(), createMergeConflictsPlugin(onMergeConflictsChange, hostEl));
   }
 
   let state = EditorState.create({ schema, plugins });
 
   const fix = fixTables(state);
   if (fix) state = state.apply(fix.setMeta('addToHistory', false));
 
+  const diffNodeViews = canWrite ? {
+    diff_added(node, view, getPos) {
+      const MergeConflictsAddedView = getDiffClass('da-diff-added', getSchema, () => {}, { isUpstream: false, hostEl });
+      return new MergeConflictsAddedView(node, view, getPos);
+    },
+    diff_deleted(node, view, getPos) {
+      const MergeConflictsDeletedView = getDiffClass('da-diff-deleted', getSchema, () => {}, { isUpstream: true, hostEl });
+      return new MergeConflictsDeletedView(node, view, getPos);
+    },
+  } : undefined;
+
   viewRef = new EditorView(editor, {
     state,
     editable() { return canWrite; },
+    nodeViews: diffNodeViews,
   });
 
+  if (canWrite) addActiveView(viewRef);
+
+  initDaMetadata(ydoc.getMap('daMetadata'));
+
   const undoManager = yUndoPluginKey.getState(viewRef.state)?.undoManager ?? null;
 
   return { proseEl: editor, wsProvider, view: viewRef, ydoc, undoManager };