@filipc77/cowrite 0.6.7 → 0.6.8

package/ui/modules/comment-sidebar.js

@@ -0,0 +1,192 @@
+// @ts-check
+
+import { $, escapeHtml, timeAgo } from './utils.js';
+import { state } from './state.js';
+import { send } from './ws-client.js';
+import { resolveAnchor } from './comment-anchoring.js';
+import { isMarkdownFile } from './editor.js';
+
+const fileContentEl = $("#fileContent");
+const commentListEl = $("#commentList");
+
+export function renderComments() {
+  if (state.comments.length === 0) {
+    commentListEl.innerHTML = `
+      <div class="empty-state">
+        <p>No comments yet.</p>
+        <p>Select text to comment, or use + for file comments.</p>
+      </div>
+    `;
+    return;
+  }
+
+  commentListEl.innerHTML = state.comments.map((c) => {
+    // Check if the anchor is orphaned (text no longer found in content)
+    const isOrphaned = c.selectedText && state.currentContent && (() => {
+      const anchor = c.anchor || {
+        textQuote: { exact: c.selectedText, prefix: '', suffix: '' },
+        offset: c.offset || 0,
+        length: c.selectedText.length,
+      };
+      return resolveAnchor(anchor, state.currentContent) === null;
+    })();
+
+    const repliesHtml = c.replies.length > 0 ? `
+      <div class="comment-replies">
+        ${c.replies.map((r) => r.proposal ? `
+          <div class="reply agent proposal-reply proposal-${r.proposal.status}">
+            <div class="reply-from agent">agent \u2014 proposal</div>
+            <div class="proposal-explanation">${escapeHtml(r.proposal.explanation)}</div>
+            ${r.proposal.status === "pending" ? `
+              <div class="proposal-diff">
+                <div class="proposal-old"><span class="proposal-label">Current</span><pre>${escapeHtml(r.proposal.oldText)}</pre></div>
+                <div class="proposal-new"><span class="proposal-label">Proposed</span><pre>${escapeHtml(r.proposal.newText)}</pre></div>
+              </div>
+              <div class="proposal-actions">
+                <button class="proposal-apply-btn" onclick="applyProposal('${c.id}', '${r.id}')">Apply</button>
+                <button class="proposal-reject-btn" onclick="rejectProposal('${c.id}', '${r.id}')">Reject</button>
+              </div>
+            ` : r.proposal.status === "applied" ? `
+              <div class="proposal-diff">
+                <div class="proposal-new"><span class="proposal-label">&#10003; Applied</span><pre>${escapeHtml(r.proposal.newText)}</pre></div>
+              </div>
+            ` : `
+              <div class="proposal-diff">
+                <div class="proposal-old"><span class="proposal-label">&#10007; Rejected</span><pre>${escapeHtml(r.proposal.oldText)}</pre></div>
+              </div>
+            `}
+          </div>
+        ` : `
+          <div class="reply ${r.from}">
+            <div class="reply-from ${r.from}">${r.from}</div>
+            <div>${escapeHtml(r.text)}</div>
+          </div>
+        `).join("")}
+      </div>
+    ` : "";
+
+    if (c.status === "resolved") {
+      const truncated = c.comment.length > 60 ? c.comment.slice(0, 60) + "..." : c.comment;
+      return `
+        <div class="comment-card resolved" data-id="${c.id}">
+          <button class="comment-delete-btn" onclick="deleteComment('${c.id}')" title="Delete comment">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+          </button>
+          <div class="resolved-summary" onclick="toggleResolvedExpand('${c.id}')">
+            <svg class="resolved-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+            <span class="comment-status resolved">resolved</span>
+            <span class="resolved-summary-text">${escapeHtml(truncated)}</span>
+          </div>
+          <div class="resolved-details" hidden>
+            ${c.selectedText
+              ? `<div class="comment-selected-text">${escapeHtml(c.selectedText)}</div>`
+              : `<div class="comment-file-badge">Whole file</div>`
+            }
+            <div class="comment-text">${escapeHtml(c.comment)}</div>
+            ${repliesHtml}
+            <div class="comment-meta">
+              <span>${timeAgo(c.createdAt)}</span>
+            </div>
+            <div class="comment-actions">
+              <button onclick="reopenComment('${c.id}')">Reopen</button>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    return `
+      <div class="comment-card ${c.status}${isOrphaned ? ' orphaned' : ''}" data-id="${c.id}">
+        <button class="comment-delete-btn" onclick="deleteComment('${c.id}')" title="Delete comment">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+        </button>
+        ${c.selectedText
+          ? `<div class="comment-selected-text">${escapeHtml(c.selectedText)}${isOrphaned ? '<span class="orphaned-badge">Anchor lost</span>' : ''}</div>`
+          : `<div class="comment-file-badge">Whole file</div>`
+        }
+        <div class="comment-text">${escapeHtml(c.comment)}</div>
+        ${repliesHtml}
+        <div class="comment-meta">
+          <span>${timeAgo(c.createdAt)}</span>
+          <span class="comment-status ${c.status}">${c.status}</span>
+        </div>
+        <div class="comment-actions">
+          <button onclick="showReplyForm('${c.id}')">Reply</button>
+          <button onclick="resolveComment('${c.id}')">Resolve</button>
+        </div>
+        <div class="reply-form" id="reply-form-${c.id}" hidden>
+          <textarea rows="2" placeholder="Reply..."></textarea>
+          <div class="reply-form-actions">
+            <button onclick="submitReply('${c.id}')">Send</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }).join("");
+
+  // Click to scroll to highlight
+  for (const card of commentListEl.querySelectorAll(".comment-card")) {
+    card.addEventListener("click", (e) => {
+      if (e.target.tagName === "BUTTON" || e.target.tagName === "TEXTAREA") return;
+      const id = card.dataset.id;
+      const highlight = fileContentEl.querySelector(`[data-comment-id="${id}"]`);
+      if (highlight) {
+        highlight.scrollIntoView({ behavior: "smooth", block: "center" });
+        highlight.style.outline = "2px solid var(--accent)";
+        setTimeout(() => highlight.style.outline = "", 1500);
+      }
+    });
+  }
+}
+
+export function initCommentSidebar() {
+  // Global functions for inline onclick handlers
+  window.showReplyForm = function (id) {
+    const form = document.getElementById(`reply-form-${id}`);
+    if (form) {
+      form.hidden = !form.hidden;
+      if (!form.hidden) form.querySelector("textarea").focus();
+    }
+  };
+
+  window.resolveComment = function (id) {
+    send({ type: "comment_resolve", commentId: id });
+  };
+
+  window.reopenComment = function (id) {
+    send({ type: "comment_reopen", commentId: id });
+  };
+
+  window.deleteComment = function (id) {
+    send({ type: "comment_delete", commentId: id });
+  };
+
+  window.submitReply = function (id) {
+    const form = document.getElementById(`reply-form-${id}`);
+    const textarea = form?.querySelector("textarea");
+    const text = textarea?.value.trim();
+    if (!text) return;
+    send({ type: "comment_reply", commentId: id, text });
+    textarea.value = "";
+    form.hidden = true;
+  };
+
+  window.applyProposal = function (commentId, replyId) {
+    send({ type: "proposal_apply", commentId, replyId });
+  };
+
+  window.rejectProposal = function (commentId, replyId) {
+    send({ type: "proposal_reject", commentId, replyId });
+  };
+
+  window.toggleResolvedExpand = function (id) {
+    const card = commentListEl.querySelector(`.comment-card[data-id="${id}"]`);
+    if (!card) return;
+    const details = card.querySelector(".resolved-details");
+    const chevron = card.querySelector(".resolved-chevron");
+    if (!details) return;
+    const expanding = details.hidden;
+    details.hidden = !expanding;
+    card.classList.toggle("resolved-expanded", expanding);
+  };
+}

package/ui/modules/editor.js

@@ -0,0 +1,117 @@
+// @ts-check
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { Markdown } from 'tiptap-markdown';
+import Table from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import Placeholder from '@tiptap/extension-placeholder';
+
+let editor = null;
+let isProgrammaticUpdate = false;
+
+/**
+ * Create the TipTap editor and mount it into the given container.
+ * @param {HTMLElement} container
+ * @param {object} options
+ * @param {(markdown: string) => void} [options.onUpdate] - Called on content change
+ * @param {(params: {editor: any}) => void} [options.onSelectionUpdate] - Called on selection change
+ * @param {Array} [options.extensions] - Extra TipTap extensions to include
+ * @returns {Editor}
+ */
+export function createEditor(container, options = {}) {
+  if (editor) editor.destroy();
+
+  editor = new Editor({
+    element: container,
+    editable: true,
+    extensions: [
+      StarterKit.configure({
+        codeBlock: {
+          HTMLAttributes: { class: 'hljs' },
+        },
+      }),
+      Markdown.configure({
+        html: true,
+        tightLists: true,
+        transformPastedText: true,
+        transformCopiedText: true,
+      }),
+      Table.configure({ resizable: false }),
+      TableRow,
+      TableCell,
+      TableHeader,
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Placeholder.configure({
+        placeholder: 'Type / for commands...',
+      }),
+      ...(options.extensions || []),
+    ],
+    onUpdate({ editor }) {
+      if (options.onUpdate) {
+        const md = editor.storage.markdown.getMarkdown();
+        options.onUpdate(md);
+      }
+    },
+    onSelectionUpdate({ editor }) {
+      if (options.onSelectionUpdate) {
+        options.onSelectionUpdate({ editor });
+      }
+    },
+  });
+
+  // @ts-ignore - expose for browser testing
+  window.__tiptap = editor;
+
+  return editor;
+}
+
+/**
+ * Set the editor content from markdown string.
+ * @param {string} markdown
+ */
+export function setMarkdownContent(markdown) {
+  if (!editor) return;
+  isProgrammaticUpdate = true;
+  editor.commands.setContent(markdown, false);
+  isProgrammaticUpdate = false;
+}
+
+/**
+ * Check if a programmatic content update is in progress.
+ * Used to prevent onUpdate from setting editorDirty during setMarkdownContent().
+ * @returns {boolean}
+ */
+export function isProgrammaticContentUpdate() {
+  return isProgrammaticUpdate;
+}
+
+/**
+ * Get the current editor content as markdown.
+ * @returns {string}
+ */
+export function getMarkdownContent() {
+  if (!editor) return '';
+  return editor.storage.markdown.getMarkdown();
+}
+
+/**
+ * Get the TipTap editor instance.
+ * @returns {Editor|null}
+ */
+export function getEditor() {
+  return editor;
+}
+
+/**
+ * Check if a file is markdown based on extension.
+ * @param {string} filePath
+ * @returns {boolean}
+ */
+export function isMarkdownFile(filePath) {
+  return /\.(md|mdx|markdown)$/i.test(filePath);
+}

package/ui/modules/file-picker.js

@@ -0,0 +1,74 @@
+// @ts-check
+
+import { $ } from './utils.js';
+import { state } from './state.js';
+import { send } from './ws-client.js';
+import { loadUndoStack, saveUndoStack } from './undo-manager.js';
+
+const filePicker = /** @type {HTMLInputElement} */ ($("#filePicker"));
+const fileList = $("#fileList");
+const undoBtn = /** @type {HTMLButtonElement} */ ($("#undoBtn"));
+
+// Track meta key for Cmd+Click to open in new tab
+let lastClickHadMeta = false;
+document.addEventListener("mousedown", (e) => { lastClickHadMeta = e.metaKey || e.ctrlKey; });
+
+export async function loadFileList() {
+  try {
+    const res = await fetch("/api/files");
+    const data = await res.json();
+    fileList.innerHTML = "";
+    for (const file of data.files) {
+      if (!/\.(md|markdown|mdx)$/i.test(file)) continue;
+      const option = document.createElement("option");
+      option.value = file;
+      fileList.appendChild(option);
+    }
+  } catch {
+    // Will retry on reconnect
+  }
+}
+
+function switchFile(file) {
+  if (!file || !state.ws || state.ws.readyState !== WebSocket.OPEN) return;
+  if (state.currentFile) saveUndoStack(state.currentFile);
+  state.undoStack = loadUndoStack(file);
+  undoBtn.disabled = state.undoStack.length === 0;
+  send({ type: "switch_file", file });
+  filePicker.value = "";
+  // Update URL without reload
+  const url = new URL(location.href);
+  url.searchParams.set("file", file);
+  history.replaceState(null, "", url.toString());
+}
+
+function openFileInNewTab(file) {
+  const url = new URL(location.href);
+  url.searchParams.set("file", file);
+  window.open(url.toString(), "_blank");
+}
+
+export function initFilePicker() {
+  filePicker.addEventListener("change", () => {
+    const file = filePicker.value.trim();
+    if (!file) return;
+    if (lastClickHadMeta) {
+      openFileInNewTab(file);
+      filePicker.value = "";
+    } else {
+      switchFile(file);
+    }
+  });
+
+  filePicker.addEventListener("keydown", (e) => {
+    const file = filePicker.value.trim();
+    if (!file) return;
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      openFileInNewTab(file);
+      filePicker.value = "";
+    } else if (e.key === "Enter") {
+      switchFile(file);
+    }
+  });
+}

package/ui/modules/markdown-sync.js

@@ -0,0 +1,229 @@
+// @ts-check
+import { state } from './state.js';
+import { getEditor, setMarkdownContent, getMarkdownContent, isMarkdownFile } from './editor.js';
+import { send } from './ws-client.js';
+import { pushUndo } from './undo-manager.js';
+import { loadUndoStack } from './undo-manager.js';
+import { applyHighlights } from './comment-highlight.js';
+import { $ } from './utils.js';
+
+let pendingUpdate = null;
+
+/**
+ * Render mermaid diagrams found in the ProseMirror DOM.
+ * Converts `pre > code.language-mermaid` blocks into rendered SVG diagrams.
+ */
+async function renderMermaidDiagrams() {
+  if (!window.__mermaid) return;
+  const fileContentEl = $('#fileContent');
+  const blocks = fileContentEl.querySelectorAll('pre code.language-mermaid');
+  if (blocks.length === 0) return;
+
+  const containers = [];
+  for (const code of blocks) {
+    const pre = code.parentElement;
+    if (!pre) continue;
+    // Wrap in a mermaid-container if not already
+    if (!pre.parentElement?.classList.contains('mermaid-container')) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'mermaid-container';
+      pre.parentElement.insertBefore(wrapper, pre);
+      wrapper.appendChild(pre);
+    }
+    pre.classList.add('mermaid');
+    containers.push(pre);
+  }
+  if (containers.length === 0) return;
+
+  try {
+    await window.__mermaid.run({ nodes: containers });
+  } catch (err) {
+    console.error('Mermaid rendering failed:', err);
+  }
+}
+
+/**
+ * Enhance code blocks with a header (language label + copy button).
+ * Skips mermaid blocks and already-wrapped blocks.
+ */
+function enhanceCodeBlocks() {
+  const fileContentEl = $('#fileContent');
+  const codeBlocks = fileContentEl.querySelectorAll('.ProseMirror pre');
+
+  for (const pre of codeBlocks) {
+    // Skip mermaid blocks
+    if (pre.closest('.mermaid-container')) continue;
+    // Skip already wrapped blocks
+    if (pre.parentElement?.classList.contains('code-block-wrapper')) continue;
+
+    const code = pre.querySelector('code');
+    const langClass = code?.className.match(/language-(\w+)/);
+    const lang = langClass ? langClass[1] : '';
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'code-block-wrapper';
+
+    const header = document.createElement('div');
+    header.className = 'code-block-header';
+
+    const langSpan = document.createElement('span');
+    langSpan.className = 'code-block-lang';
+    langSpan.textContent = lang || 'code';
+    header.appendChild(langSpan);
+
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'code-copy-btn';
+    copyBtn.textContent = 'Copy';
+    header.appendChild(copyBtn);
+
+    pre.parentElement.insertBefore(wrapper, pre);
+    wrapper.appendChild(header);
+    wrapper.appendChild(pre);
+
+    // Copy button handler
+    copyBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      navigator.clipboard.writeText(code?.textContent || '').then(() => {
+        copyBtn.textContent = 'Copied!';
+        setTimeout(() => { copyBtn.textContent = 'Copy'; }, 2000);
+      });
+    });
+  }
+}
+
+/**
+ * Post-process ProseMirror content: enhance code blocks + render mermaid.
+ */
+async function postProcessContent() {
+  enhanceCodeBlocks();
+  await renderMermaidDiagrams();
+}
+
+/**
+ * Handle file_update from WebSocket.
+ * For markdown files: update TipTap editor content.
+ * For non-markdown files: render as plain text with data-offset spans.
+ * @param {object} msg - {file, content, html}
+ */
+export function handleFileUpdate(msg) {
+  const filePathEl = $('#filePath');
+  filePathEl.textContent = msg.file;
+
+  const fileChanged = state.currentFile !== msg.file;
+  state.currentFile = msg.file;
+  state.currentContent = msg.content;
+  state.currentHtml = msg.html;
+
+  if (fileChanged && msg.file) {
+    state.undoStack = loadUndoStack(msg.file);
+    const undoBtn = /** @type {HTMLButtonElement} */ ($('#undoBtn'));
+    undoBtn.disabled = state.undoStack.length === 0;
+  }
+
+  const fileContentEl = $('#fileContent');
+  const editor = getEditor();
+
+  if (!isMarkdownFile(msg.file)) {
+    // Non-markdown: use server-rendered HTML (plain text with data-offset spans)
+    // Hide TipTap editor, show plain HTML
+    const proseMirror = fileContentEl.querySelector('.ProseMirror');
+    if (proseMirror) /** @type {HTMLElement} */ (proseMirror).style.display = 'none';
+
+    // Create or reuse a plain-text container
+    let plainContainer = /** @type {HTMLElement|null} */ (fileContentEl.querySelector('.plain-text-container'));
+    if (!plainContainer) {
+      plainContainer = document.createElement('div');
+      plainContainer.className = 'plain-text-container';
+      fileContentEl.appendChild(plainContainer);
+    }
+    plainContainer.style.display = '';
+    plainContainer.innerHTML = msg.html;
+    applyHighlights(null, false);
+    return;
+  }
+
+  // Markdown file: use TipTap
+  // Show TipTap, hide plain container
+  const proseMirror = fileContentEl.querySelector('.ProseMirror');
+  if (proseMirror) /** @type {HTMLElement} */ (proseMirror).style.display = '';
+  const plainContainer = /** @type {HTMLElement|null} */ (fileContentEl.querySelector('.plain-text-container'));
+  if (plainContainer) plainContainer.style.display = 'none';
+
+  if (editor && editor.isFocused) {
+    // Queue update for when editor loses focus
+    pendingUpdate = msg;
+    return;
+  }
+
+  if (editor) {
+    // Apply content update
+    setMarkdownContent(msg.content);
+    postProcessContent().then(() => applyHighlights(editor, true));
+  }
+}
+
+/**
+ * Apply any pending file update (called when editor loses focus).
+ */
+export function applyPendingUpdate() {
+  if (!pendingUpdate) return;
+  const msg = pendingUpdate;
+  pendingUpdate = null;
+
+  state.currentContent = msg.content;
+  state.currentHtml = msg.html;
+  state.editorDirty = false;
+  setMarkdownContent(msg.content);
+  const editor = getEditor();
+  postProcessContent().then(() => applyHighlights(editor, true));
+}
+
+/**
+ * Submit the current editor content as an edit if it changed.
+ */
+export function submitEdit() {
+  const editor = getEditor();
+  if (!editor) return;
+
+  // Only submit if the user actually edited (typed/pasted/formatted),
+  // not just clicked in and out. TipTap's markdown serialization isn't
+  // lossless, so comparing content alone causes false positives that
+  // corrupt the file.
+  if (!state.editorDirty) return;
+
+  const newContent = getMarkdownContent();
+  if (newContent === state.currentContent) {
+    state.editorDirty = false;
+    return;
+  }
+
+  pushUndo();
+  send({
+    type: 'edit_apply',
+    offset: 0,
+    length: state.currentContent.length,
+    newText: newContent,
+  });
+  state.currentContent = newContent;
+  state.editorDirty = false;
+}
+
+/**
+ * Re-render content for theme changes etc.
+ * For TipTap markdown files, highlights just need to be re-applied.
+ * For non-markdown files, re-render from stored HTML.
+ */
+export function reRenderContent() {
+  const editor = getEditor();
+  const isMd = isMarkdownFile(state.currentFile);
+  if (isMd) {
+    postProcessContent().then(() => applyHighlights(editor, true));
+  } else {
+    const fileContentEl = $('#fileContent');
+    const plainContainer = /** @type {HTMLElement|null} */ (fileContentEl.querySelector('.plain-text-container'));
+    if (plainContainer) {
+      plainContainer.innerHTML = state.currentHtml;
+    }
+    applyHighlights(null, false);
+  }
+}