@filipc77/cowrite 0.6.7 → 0.6.8

package/ui/modules/app.js

@@ -0,0 +1,90 @@
+// @ts-check
+
+/** @typedef {import('../../src/types.js').Comment} Comment */
+/** @typedef {import('../../src/types.js').WSServerMessage} WSServerMessage */
+
+import { $ } from './utils.js';
+import { state } from './state.js';
+import { initPreferences } from './preferences.js';
+import { initWebSocket, send } from './ws-client.js';
+import { initFilePicker, loadFileList } from './file-picker.js';
+import { initCommentSidebar, renderComments } from './comment-sidebar.js';
+import { initCommentHighlights, applyHighlights, createCommentHighlightExtension } from './comment-highlight.js';
+import { initToolbar, showToolbarForSelection } from './toolbar.js';
+import { initUndoManager, loadUndoStack } from './undo-manager.js';
+import { createEditor, getEditor, isMarkdownFile, isProgrammaticContentUpdate } from './editor.js';
+import { handleFileUpdate, applyPendingUpdate, submitEdit, reRenderContent } from './markdown-sync.js';
+import { createSlashCommandExtension, blockCommandInProgress } from './block-menu.js';
+
+const commentCountEl = $("#commentCount");
+const undoBtn = /** @type {HTMLButtonElement} */ ($("#undoBtn"));
+const fileContentEl = $("#fileContent");
+
+// Initialize preferences (sidebar resize, theme, font size)
+// Pass reRenderContent as callback for theme changes that need to re-render mermaid/highlights
+initPreferences(reRenderContent);
+
+// Initialize all modules
+initFilePicker();
+initCommentSidebar();
+initCommentHighlights();
+initToolbar();
+initUndoManager();
+
+// Create the TipTap editor, mounting it into #fileContent
+createEditor(fileContentEl, {
+  extensions: [createCommentHighlightExtension(), createSlashCommandExtension()],
+  onUpdate(markdown) {
+    if (isProgrammaticContentUpdate()) return;
+    state.editorDirty = true;
+  },
+  onSelectionUpdate({ editor }) {
+    if (isMarkdownFile(state.currentFile)) {
+      showToolbarForSelection(editor);
+    }
+  },
+});
+
+// Wire editor blur to apply pending updates and submit edits
+fileContentEl.addEventListener('focusout', (e) => {
+  // Only act when focus leaves the ProseMirror editor entirely
+  // (not when focus moves within it, e.g. between nodes)
+  setTimeout(() => {
+    if (blockCommandInProgress) return;
+    const proseMirror = fileContentEl.querySelector('.ProseMirror');
+    if (proseMirror && proseMirror.contains(document.activeElement)) return;
+    submitEdit();           // Send user changes first
+    applyPendingUpdate();   // Then apply queued server update
+  }, 100);
+});
+
+// Initialize WebSocket and wire up message handlers
+initWebSocket({
+  onFileUpdate(msg) {
+    handleFileUpdate(msg);
+  },
+
+  onCommentsUpdate(msg) {
+    state.comments = msg.comments;
+    commentCountEl.textContent = String(state.comments.filter(c => c.status !== "resolved").length);
+    renderComments();
+    applyHighlights(getEditor(), isMarkdownFile(state.currentFile));
+  },
+
+  onError(msg) {
+    console.error("Server error:", msg.message);
+  },
+
+  onOpen() {
+    // If URL has ?file= param, switch to that file
+    const params = new URLSearchParams(location.search);
+    const fileParam = params.get("file");
+    if (fileParam) {
+      send({ type: "switch_file", file: fileParam });
+      state.undoStack = loadUndoStack(fileParam);
+      undoBtn.disabled = state.undoStack.length === 0;
+    }
+
+    loadFileList();
+  },
+});

package/ui/modules/block-menu.js

@@ -0,0 +1,251 @@
+// @ts-check
+import { Extension } from '@tiptap/core';
+import Suggestion from '@tiptap/suggestion';
+
+/** True while a block command is being applied — prevents focusout from submitting edits. */
+export let blockCommandInProgress = false;
+
+const BLOCK_TYPES = [
+  { id: 'text',    label: 'Text',           category: 'Basic blocks', icon: 'Aa',  command: (editor) => editor.chain().focus().setParagraph().run() },
+  { id: 'h1',      label: 'Heading 1',      category: 'Basic blocks', icon: 'H1',  command: (editor) => editor.chain().focus().setHeading({ level: 1 }).run() },
+  { id: 'h2',      label: 'Heading 2',      category: 'Basic blocks', icon: 'H2',  command: (editor) => editor.chain().focus().setHeading({ level: 2 }).run() },
+  { id: 'h3',      label: 'Heading 3',      category: 'Basic blocks', icon: 'H3',  command: (editor) => editor.chain().focus().setHeading({ level: 3 }).run() },
+  { id: 'bullet',  label: 'Bulleted list',  category: 'Basic blocks', icon: '\u2022',   command: (editor) => editor.chain().focus().toggleBulletList().run() },
+  { id: 'number',  label: 'Numbered list',  category: 'Basic blocks', icon: '1.',  command: (editor) => editor.chain().focus().toggleOrderedList().run() },
+  { id: 'task',    label: 'Task list',      category: 'Basic blocks', icon: '\u2611',   command: (editor) => editor.chain().focus().toggleTaskList().run() },
+  { id: 'quote',   label: 'Quote',          category: 'Basic blocks', icon: '\u201C',   command: (editor) => editor.chain().focus().toggleBlockquote().run() },
+  { id: 'divider', label: 'Divider',        category: 'Basic blocks', icon: '\u2014',   command: (editor) => editor.chain().focus().setHorizontalRule().run() },
+  { id: 'code',    label: 'Code block',     category: 'Advanced',     icon: '</>', command: (editor) => editor.chain().focus().toggleCodeBlock().run() },
+  { id: 'table',   label: 'Table',          category: 'Advanced',     icon: '\u229E',  command: (editor) => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },
+];
+
+/**
+ * Escape HTML entities.
+ * @param {string} text
+ * @returns {string}
+ */
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Create the popup DOM element.
+ * @param {object} props - Suggestion props
+ * @param {number} selectedIndex
+ * @returns {{ element: HTMLElement, currentItems: Array<object> }}
+ */
+function createPopupElement(props, selectedIndex) {
+  const menu = document.createElement('div');
+  menu.className = 'block-type-menu';
+  menu.style.position = 'fixed';
+  menu.style.zIndex = '1001';
+
+  const list = document.createElement('div');
+  list.className = 'block-type-list';
+  menu.appendChild(list);
+
+  const component = { element: menu, currentItems: [], commandFn: props.command || null };
+  renderItems(component, props.items, selectedIndex, component.commandFn);
+  return component;
+}
+
+/**
+ * Render filtered items into the popup list, grouped by category.
+ * @param {{ element: HTMLElement, currentItems: Array<object> }} component
+ * @param {Array<object>} items
+ * @param {number} selectedIndex
+ */
+function renderItems(component, items, selectedIndex, commandFn) {
+  const list = component.element.querySelector('.block-type-list');
+  if (!list) return;
+  list.innerHTML = '';
+  component.currentItems = items;
+
+  if (items.length === 0) {
+    list.innerHTML = '<div class="block-type-empty">No matches</div>';
+    return;
+  }
+
+  let lastCategory = '';
+  items.forEach((item, i) => {
+    if (item.category !== lastCategory) {
+      lastCategory = item.category;
+      const header = document.createElement('div');
+      header.className = 'block-type-category';
+      header.textContent = item.category;
+      list.appendChild(header);
+    }
+    const el = document.createElement('div');
+    el.className = 'block-type-item';
+    if (i === selectedIndex) el.classList.add('highlighted');
+    el.innerHTML = `<span class="block-type-icon">${escapeHtml(item.icon)}</span><span>${escapeHtml(item.label)}</span>`;
+    el.addEventListener('mouseenter', () => {
+      for (const other of list.querySelectorAll('.block-type-item')) {
+        other.classList.remove('highlighted');
+      }
+      el.classList.add('highlighted');
+    });
+    el.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+    });
+    el.addEventListener('click', () => {
+      if (commandFn) {
+        blockCommandInProgress = true;
+        commandFn(item);
+        setTimeout(() => { blockCommandInProgress = false; }, 300);
+      }
+    });
+    list.appendChild(el);
+  });
+}
+
+/**
+ * Update the popup with new items.
+ * @param {{ element: HTMLElement, currentItems: Array<object> }} component
+ * @param {object} props - Suggestion props
+ * @param {number} selectedIndex
+ */
+function updatePopupItems(component, props, selectedIndex) {
+  component.commandFn = props.command || null;
+  component.currentItems = props.items;
+  renderItems(component, props.items, selectedIndex, component.commandFn);
+}
+
+/**
+ * Update the highlighted item in the popup.
+ * @param {{ element: HTMLElement, currentItems: Array<object> }} component
+ * @param {number} selectedIndex
+ */
+function updateHighlight(component, selectedIndex) {
+  const items = component.element.querySelectorAll('.block-type-item');
+  items.forEach((el, i) => {
+    el.classList.toggle('highlighted', i === selectedIndex);
+  });
+  // Scroll highlighted item into view
+  if (items[selectedIndex]) {
+    items[selectedIndex].scrollIntoView({ block: 'nearest' });
+  }
+}
+
+/**
+ * Position the popup near the cursor.
+ * @param {HTMLElement} element
+ * @param {object} props - Suggestion props with clientRect
+ */
+function positionPopup(element, props) {
+  const rect = props.clientRect?.();
+  if (!rect) return;
+
+  element.style.left = `${rect.left}px`;
+  element.style.top = `${rect.bottom + 4}px`;
+
+  // Clamp so popup doesn't overflow below viewport
+  requestAnimationFrame(() => {
+    const popupRect = element.getBoundingClientRect();
+    if (popupRect.bottom > window.innerHeight) {
+      element.style.top = `${rect.top - popupRect.height - 4}px`;
+    }
+    if (popupRect.right > window.innerWidth) {
+      element.style.left = `${window.innerWidth - popupRect.width - 8}px`;
+    }
+  });
+}
+
+/**
+ * Create the slash command TipTap extension.
+ * @returns {Extension}
+ */
+export function createSlashCommandExtension() {
+  return Extension.create({
+    name: 'slashCommand',
+
+    addOptions() {
+      return {
+        suggestion: {
+          char: '/',
+          startOfLine: true,
+          command: ({ editor, range, props }) => {
+            // Delete the slash command text
+            editor.chain().focus().deleteRange(range).run();
+            // Execute the block type command
+            props.command(editor);
+          },
+        },
+      };
+    },
+
+    addProseMirrorPlugins() {
+      return [
+        Suggestion({
+          editor: this.editor,
+          ...this.options.suggestion,
+          items: ({ query }) => {
+            return BLOCK_TYPES.filter(item =>
+              item.label.toLowerCase().includes(query.toLowerCase()) ||
+              item.id.includes(query.toLowerCase())
+            );
+          },
+          render: () => {
+            let component = null;
+            let selectedIndex = 0;
+
+            return {
+              onStart(props) {
+                selectedIndex = 0;
+                component = createPopupElement(props, selectedIndex);
+                document.body.appendChild(component.element);
+                positionPopup(component.element, props);
+              },
+              onUpdate(props) {
+                if (!component) return;
+                selectedIndex = 0;
+                updatePopupItems(component, props, selectedIndex);
+                positionPopup(component.element, props);
+              },
+              onKeyDown(props) {
+                if (!component) return false;
+                const items = component.currentItems;
+                if (items.length === 0) return false;
+
+                if (props.event.key === 'ArrowDown') {
+                  selectedIndex = (selectedIndex + 1) % items.length;
+                  updateHighlight(component, selectedIndex);
+                  return true;
+                }
+                if (props.event.key === 'ArrowUp') {
+                  selectedIndex = (selectedIndex - 1 + items.length) % items.length;
+                  updateHighlight(component, selectedIndex);
+                  return true;
+                }
+                if (props.event.key === 'Enter') {
+                  if (items[selectedIndex] && component.commandFn) {
+                    blockCommandInProgress = true;
+                    component.commandFn(items[selectedIndex]);
+                    setTimeout(() => { blockCommandInProgress = false; }, 300);
+                  }
+                  return true;
+                }
+                if (props.event.key === 'Escape') {
+                  component.element.remove();
+                  component = null;
+                  return true;
+                }
+                return false;
+              },
+              onExit() {
+                if (component) {
+                  const el = component.element;
+                  component = null;
+                  setTimeout(() => { el.remove(); }, 0);
+                }
+                selectedIndex = 0;
+              },
+            };
+          },
+        }),
+      ];
+    },
+  });
+}

package/ui/modules/comment-anchoring.js

@@ -0,0 +1,112 @@
+// @ts-check
+
+/**
+ * Create a CommentAnchor from TipTap editor selection.
+ * @param {import('@tiptap/core').Editor} editor - TipTap editor instance
+ * @param {number} from - ProseMirror selection start
+ * @param {number} to - ProseMirror selection end
+ * @returns {{textQuote: {exact: string, prefix: string, suffix: string}, offset: number, length: number}}
+ */
+export function createAnchor(editor, from, to) {
+  const doc = editor.state.doc;
+
+  // Get the selected text
+  const exact = doc.textBetween(from, to, '\n', '\n');
+
+  // Get prefix (up to 30 chars before selection)
+  const prefixStart = Math.max(0, from - 30);
+  const prefix = doc.textBetween(prefixStart, from, '\n', '\n');
+
+  // Get suffix (up to 30 chars after selection)
+  const suffixEnd = Math.min(doc.content.size, to + 30);
+  const suffix = doc.textBetween(to, suffixEnd, '\n', '\n');
+
+  // Compute character offset in the flat text
+  const textBefore = doc.textBetween(0, from, '\n', '\n');
+  const offset = textBefore.length;
+
+  return {
+    textQuote: { exact, prefix, suffix },
+    offset,
+    length: exact.length,
+  };
+}
+
+/**
+ * Resolve a comment anchor in current content.
+ * Returns {offset, length} or null if orphaned.
+ * @param {{textQuote?: {exact: string, prefix: string, suffix: string}, offset: number, length: number}} anchor
+ * @param {string} content - Current document text content
+ * @returns {{offset: number, length: number} | null}
+ */
+export function resolveAnchor(anchor, content) {
+  if (!anchor) return null;
+
+  const searchText = anchor.textQuote?.exact || '';
+  if (!searchText) return null;
+
+  // Strategy 1: Text quote selector with prefix/suffix scoring
+  if (anchor.textQuote) {
+    const candidates = [];
+    let pos = 0;
+    while (pos < content.length) {
+      const idx = content.indexOf(searchText, pos);
+      if (idx === -1) break;
+
+      // Score by prefix/suffix match
+      const actualPrefix = content.slice(Math.max(0, idx - 30), idx);
+      const actualSuffix = content.slice(idx + searchText.length, idx + searchText.length + 30);
+      const prefixScore = matchScore(anchor.textQuote.prefix, actualPrefix);
+      const suffixScore = matchScore(anchor.textQuote.suffix, actualSuffix);
+      const proximityScore = 1000 - Math.min(1000, Math.abs(idx - anchor.offset));
+
+      candidates.push({
+        offset: idx,
+        score: prefixScore + suffixScore + proximityScore * 0.1,
+      });
+      pos = idx + 1;
+    }
+
+    if (candidates.length > 0) {
+      candidates.sort((a, b) => b.score - a.score);
+      return { offset: candidates[0].offset, length: searchText.length };
+    }
+  }
+
+  // Strategy 2: Try exact text near expected offset (+/-100 chars)
+  const windowStart = Math.max(0, anchor.offset - 100);
+  const windowEnd = Math.min(content.length, anchor.offset + anchor.length + 100);
+  const windowText = content.slice(windowStart, windowEnd);
+  const localIdx = windowText.indexOf(searchText);
+  if (localIdx !== -1) {
+    return { offset: windowStart + localIdx, length: searchText.length };
+  }
+
+  // Strategy 3: Global search
+  const globalIdx = content.indexOf(searchText);
+  if (globalIdx !== -1) {
+    return { offset: globalIdx, length: searchText.length };
+  }
+
+  return null; // Orphaned
+}
+
+/**
+ * Score how well two strings match from their boundaries.
+ * @param {string} expected
+ * @param {string} actual
+ * @returns {number}
+ */
+function matchScore(expected, actual) {
+  if (!expected || !actual) return 0;
+  let score = 0;
+  const minLen = Math.min(expected.length, actual.length);
+  for (let i = 0; i < minLen; i++) {
+    if (expected[expected.length - 1 - i] === actual[actual.length - 1 - i]) {
+      score++;
+    } else {
+      break;
+    }
+  }
+  return score;
+}

package/ui/modules/comment-highlight.js

@@ -0,0 +1,243 @@
+// @ts-check
+
+import { $ } from './utils.js';
+import { state } from './state.js';
+import { resolveAnchor } from './comment-anchoring.js';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import { Extension } from '@tiptap/core';
+
+const commentHighlightKey = new PluginKey('commentHighlight');
+
+/**
+ * Create the CommentHighlight TipTap extension.
+ * This extension manages a DecorationSet for comment highlights.
+ */
+export function createCommentHighlightExtension() {
+  return Extension.create({
+    name: 'commentHighlight',
+
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          key: commentHighlightKey,
+          state: {
+            init() {
+              return DecorationSet.empty;
+            },
+            apply(tr, oldSet) {
+              const meta = tr.getMeta(commentHighlightKey);
+              if (meta?.decorations) {
+                return meta.decorations;
+              }
+              // Remap existing decorations through document changes
+              if (tr.docChanged) {
+                return oldSet.map(tr.mapping, tr.doc);
+              }
+              return oldSet;
+            },
+          },
+          props: {
+            decorations(editorState) {
+              return commentHighlightKey.getState(editorState);
+            },
+          },
+        }),
+      ];
+    },
+  });
+}
+
+/**
+ * Apply comment highlights using ProseMirror decorations for markdown files,
+ * or DOM wrapping for non-markdown files.
+ * @param {import('@tiptap/core').Editor} [editor] - TipTap editor instance (optional)
+ * @param {boolean} [isMarkdown] - Whether the current file is markdown
+ */
+export function applyHighlights(editor, isMarkdown) {
+  if (editor && isMarkdown) {
+    applyProseMirrorHighlights(editor);
+  } else {
+    applyDomHighlights();
+  }
+}
+
+/**
+ * Apply highlights via ProseMirror decorations.
+ * @param {import('@tiptap/core').Editor} editor
+ */
+function applyProseMirrorHighlights(editor) {
+  const doc = editor.state.doc;
+  const decorations = [];
+
+  for (const comment of state.comments) {
+    if (!comment.selectedText) continue;
+
+    // Build an anchor-like object from the comment
+    const anchor = comment.anchor || {
+      textQuote: { exact: comment.selectedText, prefix: '', suffix: '' },
+      offset: comment.offset,
+      length: comment.length,
+    };
+
+    // Get the full text from ProseMirror doc
+    const fullText = doc.textBetween(0, doc.content.size, '\n', '\n');
+    const resolved = resolveAnchor(anchor, fullText);
+
+    if (!resolved) continue;
+
+    // Map text offset to ProseMirror position
+    const pmFrom = textOffsetToPmPos(doc, resolved.offset);
+    const pmTo = textOffsetToPmPos(doc, resolved.offset + resolved.length);
+
+    if (pmFrom === null || pmTo === null) continue;
+    if (pmFrom >= pmTo || pmTo > doc.content.size) continue;
+
+    decorations.push(
+      Decoration.inline(pmFrom, pmTo, {
+        class: `comment-highlight ${comment.status}`,
+        'data-comment-id': comment.id,
+        title: comment.comment,
+      })
+    );
+  }
+
+  const decoSet = DecorationSet.create(doc, decorations);
+
+  // Dispatch a transaction with our decorations as metadata
+  const tr = editor.state.tr;
+  tr.setMeta(commentHighlightKey, { decorations: decoSet });
+  editor.view.dispatch(tr);
+}
+
+/**
+ * Convert a text offset (character position in flat text) to a ProseMirror position.
+ * Mirrors the traversal logic of doc.textBetween(0, size, '\n', '\n') exactly,
+ * tracking both the flat-text offset and the corresponding PM position.
+ * @param {import('@tiptap/pm/model').Node} doc
+ * @param {number} targetOffset
+ * @returns {number | null}
+ */
+function textOffsetToPmPos(doc, targetOffset) {
+  let textPos = 0;
+  let separated = true; // mirrors textBetween initial state
+  let result = null;
+
+  doc.descendants((node, pos) => {
+    if (result !== null) return false;
+
+    if (node.isText) {
+      const len = node.text.length;
+      if (textPos + len >= targetOffset) {
+        result = pos + (targetOffset - textPos);
+        return false;
+      }
+      textPos += len;
+      separated = false;
+      return false; // text nodes have no children
+    }
+
+    if (node.isLeaf) {
+      // Non-text leaf (hard break, horizontal rule, etc.)
+      // textBetween adds leafText ('\n') for these
+      if (textPos >= targetOffset) {
+        result = pos;
+        return false;
+      }
+      textPos += 1;
+      separated = false;
+      return false;
+    }
+
+    // Block node with children — textBetween inserts '\n' separator
+    // when we've already seen text content (separated === false)
+    if (!separated && node.isBlock) {
+      if (textPos >= targetOffset) {
+        result = pos + 1;
+        return false;
+      }
+      textPos += 1;
+      separated = true;
+    }
+
+    return true; // descend into children
+  });
+
+  return result;
+}
+
+/**
+ * Fallback: apply highlights via DOM wrapping (for non-markdown files).
+ */
+function applyDomHighlights() {
+  const fileContentEl = $('#fileContent');
+  const container = fileContentEl.querySelector('.plain-text-container') || fileContentEl;
+
+  // Remove existing highlights
+  for (const el of container.querySelectorAll('.comment-highlight')) {
+    const parent = el.parentNode;
+    parent.replaceChild(document.createTextNode(el.textContent), el);
+    parent.normalize();
+  }
+
+  if (state.comments.length === 0) return;
+
+  // Build text-node map
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  const textNodes = [];
+  let totalOffset = 0;
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    const text = node.textContent || '';
+    textNodes.push({ node, start: totalOffset, end: totalOffset + text.length });
+    totalOffset += text.length;
+  }
+  const fullText = textNodes.map(n => n.node.textContent).join('');
+
+  for (const comment of state.comments) {
+    if (!comment.selectedText) continue;
+    const searchText = comment.selectedText;
+    let textIdx = fullText.indexOf(searchText, Math.max(0, comment.offset - 50));
+    if (textIdx === -1 || Math.abs(textIdx - comment.offset) > 200) {
+      textIdx = fullText.indexOf(searchText);
+    }
+    if (textIdx === -1) continue;
+    wrapRange(textNodes, textIdx, textIdx + searchText.length, comment);
+  }
+}
+
+function wrapRange(textNodes, start, end, comment) {
+  for (let i = 0; i < textNodes.length; i++) {
+    const tn = textNodes[i];
+    if (tn.end <= start || tn.start >= end) continue;
+    const nodeStart = Math.max(start - tn.start, 0);
+    const nodeEnd = Math.min(end - tn.start, tn.node.textContent.length);
+    const range = document.createRange();
+    range.setStart(tn.node, nodeStart);
+    range.setEnd(tn.node, nodeEnd);
+    const span = document.createElement('span');
+    span.className = `comment-highlight ${comment.status}`;
+    span.dataset.commentId = comment.id;
+    span.title = comment.comment;
+    try {
+      range.surroundContents(span);
+      return;
+    } catch {
+      return;
+    }
+  }
+}
+
+/**
+ * Initialize comment highlight click behavior.
+ */
+export function initCommentHighlights() {
+  const commentListEl = $('#commentList');
+  document.addEventListener('mousedown', (e) => {
+    if (!e.target.closest('.comment-highlight')) {
+      for (const card of commentListEl.querySelectorAll('.comment-card.active')) {
+        card.classList.remove('active');
+      }
+    }
+  });
+}