collabmd 0.1.20 → 0.1.23

package/src/client/infrastructure/editor-view-adapter.js

@@ -11,11 +11,12 @@ import {
 } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
-import { Compartment, EditorSelection, EditorState, Prec } from '@codemirror/state';
+import { Compartment, EditorSelection, EditorState, Prec, StateEffect, StateField } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
   Decoration,
   EditorView,
+  WidgetType,
   crosshairCursor,
   drawSelection,
   highlightActiveLine,
@@ -36,6 +37,59 @@ import { handleImagePasteEvent } from './editor-paste-utils.js';
 const markdownCodeLanguages = [...languages, plantUmlLanguageDescription];
 const pairedMatchingBracketMark = Decoration.mark({ class: 'cm-matchingBracket cm-matchingBracket-paired' });
 const nonmatchingBracketMark = Decoration.mark({ class: 'cm-nonmatchingBracket' });
+const remoteUpdateMark = Decoration.mark({ class: 'cm-remoteUpdateFlash' });
+const REMOTE_UPDATE_FLASH_DURATION_MS = 1350;
+const REMOTE_UPDATE_CARET_MAX_LENGTH = 160;
+const RECENT_LOCAL_INPUT_WINDOW_MS = 900;
+
+class RemoteUpdateCaretWidget extends WidgetType {
+  toDOM() {
+    const element = document.createElement('span');
+    element.className = 'cm-remoteUpdateCaretWidget';
+    element.setAttribute('aria-hidden', 'true');
+    return element;
+  }
+
+  ignoreEvent() {
+    return true;
+  }
+}
+
+const addRemoteUpdateFlashEffect = StateEffect.define();
+const clearRemoteUpdateFlashEffect = StateEffect.define();
+const remoteUpdateFlashField = StateField.define({
+  create: () => Decoration.none,
+  update(decorations, transaction) {
+    let nextDecorations = decorations.map(transaction.changes);
+
+    transaction.effects.forEach((effect) => {
+      if (effect.is(clearRemoteUpdateFlashEffect)) {
+        nextDecorations = Decoration.none;
+        return;
+      }
+
+      if (effect.is(addRemoteUpdateFlashEffect)) {
+        const { from, showCaret, to } = effect.value;
+        const nextRanges = [];
+        if (to > from) {
+          nextRanges.push(remoteUpdateMark.range(from, to));
+        }
+        if (showCaret) {
+          nextRanges.push(Decoration.widget({
+            side: -1,
+            widget: new RemoteUpdateCaretWidget(),
+          }).range(from));
+        }
+        nextDecorations = nextRanges.length > 0
+          ? Decoration.set(nextRanges, true)
+          : Decoration.none;
+      }
+    });
+
+    return nextDecorations;
+  },
+  provide: (field) => EditorView.decorations.from(field),
+});
 
 function isBracketBeforeCaret(range, state) {
   return state.selection.ranges.some((selectionRange) =>
@@ -150,6 +204,35 @@ function createEditorTheme(theme) {
     '.cm-selectionMatch': {
       backgroundColor: 'var(--color-primary-highlight)',
     },
+    '.cm-remoteUpdateFlash': {
+      animation: 'collabmd-remote-update-flash 1.35s ease-out',
+      backgroundColor: theme === 'dark'
+        ? 'oklch(from var(--color-primary) l c h / 0.22)'
+        : 'oklch(from var(--color-primary) l c h / 0.16)',
+      borderRadius: '3px',
+      boxShadow: `0 0 0 1px ${theme === 'dark'
+        ? 'oklch(from var(--color-primary) calc(l + 0.05) c h / 0.26)'
+        : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.2)'}`,
+    },
+    '.cm-remoteUpdateCaretWidget': {
+      animation: 'collabmd-remote-update-caret 1s ease-out',
+      backgroundColor: 'transparent',
+      borderLeft: `2px solid ${theme === 'dark'
+        ? 'color-mix(in oklab, var(--color-primary) 78%, white)'
+        : 'color-mix(in oklab, var(--color-primary) 84%, black)'}`,
+      borderRadius: '999px',
+      boxShadow: `0 0 0 1px ${theme === 'dark'
+        ? 'oklch(from var(--color-primary) calc(l + 0.06) c h / 0.22)'
+        : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.16)'}`,
+      display: 'inline-block',
+      height: '1.2em',
+      marginLeft: '-1px',
+      marginRight: '-1px',
+      pointerEvents: 'none',
+      transformOrigin: 'center bottom',
+      verticalAlign: 'text-bottom',
+      width: '0',
+    },
     '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
       backgroundColor: selectionBackground,
     },
@@ -157,6 +240,42 @@ function createEditorTheme(theme) {
       border: `1px solid ${selectionBorder}`,
       borderRadius: '2px',
     },
+    '@keyframes collabmd-remote-update-flash': {
+      '0%': {
+        backgroundColor: theme === 'dark'
+          ? 'oklch(from var(--color-primary) l c h / 0.34)'
+          : 'oklch(from var(--color-primary) l c h / 0.26)',
+      },
+      '100%': {
+        backgroundColor: theme === 'dark'
+          ? 'oklch(from var(--color-primary) l c h / 0)'
+          : 'oklch(from var(--color-primary) l c h / 0)',
+      },
+    },
+    '@keyframes collabmd-remote-update-caret': {
+      '0%': {
+        boxShadow: `0 0 0 1px ${theme === 'dark'
+          ? 'oklch(from var(--color-primary) calc(l + 0.08) c h / 0.34)'
+          : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.24)'}`,
+        opacity: '0',
+        transform: 'translateY(0.2em) scaleY(0.7)',
+      },
+      '18%': {
+        opacity: '1',
+        transform: 'translateY(0) scaleY(1)',
+      },
+      '72%': {
+        opacity: '1',
+        transform: 'translateY(0) scaleY(1)',
+      },
+      '100%': {
+        boxShadow: `0 0 0 1px ${theme === 'dark'
+          ? 'oklch(from var(--color-primary) calc(l + 0.08) c h / 0)'
+          : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0)'}`,
+        opacity: '0',
+        transform: 'translateY(-0.05em) scaleY(0.9)',
+      },
+    },
   }, { dark: theme === 'dark' });
 }
 
@@ -204,6 +323,8 @@ export class EditorViewAdapter {
     this.syntaxThemeCompartment = new Compartment();
     this.lineWrappingCompartment = new Compartment();
     this.viewportFrame = 0;
+    this.remoteUpdateFlashTimer = 0;
+    this.lastLocalInputAt = 0;
     this.handleScroll = () => {
       if (this.viewportFrame) {
         return;
@@ -214,10 +335,13 @@ export class EditorViewAdapter {
         this.emitViewportChange();
       });
     };
+    this.handleLocalInputActivity = () => {
+      this.lastLocalInputAt = Date.now();
+    };
   }
 
-  initialize({ awareness, filePath, undoManager, ytext }) {
-    const updateListener = EditorView.updateListener.of((update) => {
+  createUpdateListener() {
+    return EditorView.updateListener.of((update) => {
       if (update.docChanged) {
         this.onDocChanged?.();
       }
@@ -227,65 +351,144 @@ export class EditorViewAdapter {
         this.onSelectionChanged?.(update.state);
       }
     });
+  }
+
+  getBaseExtensions(filePath, { readOnly = false } = {}) {
+    const extensions = [
+      lineNumbers(),
+      highlightActiveLineGutter(),
+      highlightSpecialChars(),
+      history(),
+      foldGutter(),
+      drawSelection(),
+      EditorState.allowMultipleSelections.of(true),
+      indentOnInput(),
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      bracketMatching({ renderMatch: renderBracketMatch }),
+      closeBrackets(),
+      autocompletion({
+        override: [wikiLinkCompletions(this.getFileList)],
+      }),
+      rectangularSelection(),
+      crosshairCursor(),
+      highlightActiveLine(),
+      highlightSelectionMatches(),
+      keymap.of([
+        ...closeBracketsKeymap,
+        ...defaultKeymap,
+        ...historyKeymap,
+        ...searchKeymap,
+        ...foldKeymap,
+        indentWithTab,
+      ]),
+      EditorView.contentAttributes.of({
+        'aria-label': 'Markdown editor',
+      }),
+      createLanguageExtension(filePath),
+      this.themeCompartment.of(createEditorTheme(this.initialTheme)),
+      this.syntaxThemeCompartment.of(this.initialTheme === 'dark' ? oneDark : []),
+      this.lineWrappingCompartment.of(this.lineWrappingEnabled ? EditorView.lineWrapping : []),
+      remoteUpdateFlashField,
+      this.createUpdateListener(),
+    ];
+
+    if (readOnly) {
+      extensions.push(EditorState.readOnly.of(true));
+      extensions.push(EditorView.editable.of(false));
+      return extensions;
+    }
+
+    extensions.splice(13, 0, Prec.highest(EditorView.domEventHandlers({
+      paste: (event) => handleImagePasteEvent(event, this.onImagePaste),
+    })));
+    return extensions;
+  }
 
-    const loadingIndicator = this.editorContainer.querySelector('#editorLoading');
+  clearEditorDom({ preserveLoadingIndicator = true } = {}) {
+    if (!this.editorContainer) {
+      return;
+    }
+
+    const loadingIndicator = preserveLoadingIndicator
+      ? this.editorContainer.querySelector('#editorLoading')
+      : null;
     Array.from(this.editorContainer.children).forEach((child) => {
       if (child !== loadingIndicator) {
         child.remove();
       }
     });
+  }
+
+  teardownEditorView({ clearContainer = false } = {}) {
+    this.editorView?.contentDOM?.removeEventListener('beforeinput', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('keydown', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('paste', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('compositionstart', this.handleLocalInputActivity);
+    this.editorView?.scrollDOM?.removeEventListener('scroll', this.handleScroll);
+    this.editorView?.destroy();
+    this.editorView = null;
+
+    if (clearContainer && this.editorContainer) {
+      this.editorContainer.innerHTML = '';
+      delete this.editorContainer.dataset.editorMode;
+    }
+  }
+
+  mountEditor(state, { editorMode = 'collaborative', preserveScrollTop = 0 } = {}) {
+    this.clearEditorDom({ preserveLoadingIndicator: true });
+    this.teardownEditorView();
 
     this.editorView = new EditorView({
       parent: this.editorContainer,
-      state: EditorState.create({
-        doc: ytext.toString(),
-        extensions: [
-          lineNumbers(),
-          highlightActiveLineGutter(),
-          highlightSpecialChars(),
-          history(),
-          foldGutter(),
-          drawSelection(),
-          EditorState.allowMultipleSelections.of(true),
-          indentOnInput(),
-          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-          bracketMatching({ renderMatch: renderBracketMatch }),
-          closeBrackets(),
-          autocompletion({
-            override: [wikiLinkCompletions(this.getFileList)],
-          }),
-          rectangularSelection(),
-          crosshairCursor(),
-          highlightActiveLine(),
-          highlightSelectionMatches(),
-          keymap.of([
-            ...closeBracketsKeymap,
-            ...defaultKeymap,
-            ...historyKeymap,
-            ...searchKeymap,
-            ...foldKeymap,
-            indentWithTab,
-          ]),
-          EditorView.contentAttributes.of({
-            'aria-label': 'Markdown editor',
-          }),
-          Prec.highest(EditorView.domEventHandlers({
-            paste: (event) => handleImagePasteEvent(event, this.onImagePaste),
-          })),
-          createLanguageExtension(filePath),
-          this.themeCompartment.of(createEditorTheme(this.initialTheme)),
-          this.syntaxThemeCompartment.of(this.initialTheme === 'dark' ? oneDark : []),
-          this.lineWrappingCompartment.of(this.lineWrappingEnabled ? EditorView.lineWrapping : []),
-          yCollab(ytext, awareness, { undoManager }),
-          updateListener,
-        ],
-      }),
+      state,
     });
 
+    this.editorContainer.dataset.editorMode = editorMode;
     this.editorView.scrollDOM.addEventListener('scroll', this.handleScroll, { passive: true });
+    this.editorView.contentDOM.addEventListener('beforeinput', this.handleLocalInputActivity);
+    this.editorView.contentDOM.addEventListener('keydown', this.handleLocalInputActivity);
+    this.editorView.contentDOM.addEventListener('paste', this.handleLocalInputActivity);
+    this.editorView.contentDOM.addEventListener('compositionstart', this.handleLocalInputActivity);
     this.updateCursorInfo(this.editorView.state);
     this.onSelectionChanged?.(this.editorView.state);
     this.emitViewportChange();
+
+    if (preserveScrollTop > 0) {
+      requestAnimationFrame(() => {
+        if (this.editorView?.scrollDOM) {
+          this.editorView.scrollDOM.scrollTop = preserveScrollTop;
+        }
+      });
+    }
+  }
+
+  initialize({ awareness, filePath, undoManager, ytext }) {
+    const preserveScrollTop = this.editorView?.scrollDOM?.scrollTop ?? 0;
+    const state = EditorState.create({
+      doc: ytext.toString(),
+      extensions: [
+        ...this.getBaseExtensions(filePath),
+        yCollab(ytext, awareness, { undoManager }),
+      ],
+    });
+
+    this.mountEditor(state, {
+      editorMode: 'collaborative',
+      preserveScrollTop,
+    });
+  }
+
+  initializeProvisional({ content = '', filePath }) {
+    const preserveScrollTop = this.editorView?.scrollDOM?.scrollTop ?? 0;
+    const state = EditorState.create({
+      doc: String(content ?? ''),
+      extensions: this.getBaseExtensions(filePath, { readOnly: true }),
+    });
+
+    this.mountEditor(state, {
+      editorMode: 'provisional',
+      preserveScrollTop,
+    });
   }
 
   destroy() {
@@ -293,13 +496,11 @@ export class EditorViewAdapter {
       cancelAnimationFrame(this.viewportFrame);
       this.viewportFrame = 0;
     }
-    this.editorView?.scrollDOM?.removeEventListener('scroll', this.handleScroll);
-    this.editorView?.destroy();
-    this.editorView = null;
-
-    if (this.editorContainer) {
-      this.editorContainer.innerHTML = '';
+    if (this.remoteUpdateFlashTimer) {
+      clearTimeout(this.remoteUpdateFlashTimer);
+      this.remoteUpdateFlashTimer = 0;
     }
+    this.teardownEditorView({ clearContainer: true });
   }
 
   getText() {
@@ -355,6 +556,49 @@ export class EditorViewAdapter {
     this.editorView?.requestMeasure();
   }
 
+  flashRemoteRange({ from = 0, to = 0 } = {}, durationMs = REMOTE_UPDATE_FLASH_DURATION_MS) {
+    const state = this.editorView?.state;
+    if (!state || state.doc.length === 0) {
+      return false;
+    }
+
+    let start = Math.min(Math.max(Math.round(from), 0), state.doc.length);
+    let end = Math.min(Math.max(Math.round(to), 0), state.doc.length);
+    if (end <= start) {
+      if (start < state.doc.length) {
+        end = start + 1;
+      } else if (start > 0) {
+        start -= 1;
+        end = start + 1;
+      } else {
+        return false;
+      }
+    }
+
+    const rangeLength = Math.max(end - start, 0);
+    const showCaret = (
+      rangeLength <= REMOTE_UPDATE_CARET_MAX_LENGTH
+      && (Date.now() - this.lastLocalInputAt) > RECENT_LOCAL_INPUT_WINDOW_MS
+    );
+
+    this.editorView.dispatch({
+      effects: addRemoteUpdateFlashEffect.of({ from: start, showCaret, to: end }),
+    });
+
+    if (this.remoteUpdateFlashTimer) {
+      clearTimeout(this.remoteUpdateFlashTimer);
+    }
+
+    this.remoteUpdateFlashTimer = window.setTimeout(() => {
+      this.remoteUpdateFlashTimer = 0;
+      this.editorView?.dispatch({
+        effects: clearRemoteUpdateFlashEffect.of(null),
+      });
+    }, durationMs);
+
+    return true;
+  }
+
   getViewportState(viewportRatio = 0.35) {
     return {
       topLine: this.getTopVisibleLineNumber(viewportRatio),

package/src/client/infrastructure/runtime-config.js

@@ -30,6 +30,36 @@ function normalizeDiffScope(scope) {
 export function getHashRoute() {
   const params = getHashParams();
 
+  if (params.has('git-file-preview')) {
+    const historicalFilePath = params.get('git-file-preview') || null;
+    return {
+      currentFilePath: params.get('current') || historicalFilePath,
+      filePath: historicalFilePath,
+      hash: params.get('hash') || null,
+      type: 'git-file-preview',
+    };
+  }
+
+  if (params.has('git-file-history')) {
+    return {
+      filePath: params.get('git-file-history') || null,
+      type: 'git-file-history',
+    };
+  }
+
+  if (params.has('git-history')) {
+    return { type: 'git-history' };
+  }
+
+  if (params.has('git-commit')) {
+    return {
+      hash: params.get('git-commit') || null,
+      historyFilePath: params.get('history') || null,
+      path: params.get('path') || null,
+      type: 'git-commit',
+    };
+  }
+
   if (params.has('git-diff')) {
     const filePath = params.get('git-diff') || null;
     return {
@@ -63,3 +93,39 @@ export function navigateToGitDiff({ filePath = null, scope = 'all' } = {}) {
   params.set('scope', normalizeDiffScope(scope));
   window.location.hash = params.toString();
 }
+
+export function navigateToGitCommit({ hash, path = null, historyFilePath = null } = {}) {
+  const normalizedHash = String(hash ?? '').trim();
+  const params = new URLSearchParams();
+  params.set('git-commit', normalizedHash);
+  if (historyFilePath) {
+    params.set('history', historyFilePath);
+  }
+  if (path) {
+    params.set('path', path);
+  }
+  window.location.hash = params.toString();
+}
+
+export function navigateToGitHistory() {
+  const params = new URLSearchParams();
+  params.set('git-history', '1');
+  window.location.hash = params.toString();
+}
+
+export function navigateToGitFileHistory({ filePath } = {}) {
+  const params = new URLSearchParams();
+  params.set('git-file-history', filePath ?? '');
+  window.location.hash = params.toString();
+}
+
+export function navigateToGitFilePreview({ hash, path, currentFilePath = null } = {}) {
+  const normalizedHash = String(hash ?? '').trim();
+  const params = new URLSearchParams();
+  params.set('git-file-preview', path ?? '');
+  if (currentFilePath) {
+    params.set('current', currentFilePath);
+  }
+  params.set('hash', normalizedHash);
+  window.location.hash = params.toString();
+}