dsh-remote-vs 0.0.0-stage → 0.8.3

package/src/client/vsc/markdown.tsx

@@ -0,0 +1,172 @@
+/**
+ * Minimal, dependency-free Markdown renderer for the remote preview pane.
+ *
+ * It renders React elements directly (never `dangerouslySetInnerHTML`), so raw
+ * HTML in a remote document stays inert text. Coverage is the subset that
+ * matters when reading a repository file: headings, fenced and inline code,
+ * lists, blockquotes, rules, GFM tables, links, bold / italic / strike.
+ */
+import { createElement, type ReactNode } from 'react'
+
+/**
+ * Schemes a remote document's link may use.
+ *
+ * The preview renders UNTRUSTED content: any repository the user browses (or
+ * a file an agent wrote) can contain `[x](javascript:...)`, which matches the
+ * inline pattern below unchanged. React 18 only warns about a `javascript:`
+ * href — it does not strip the attribute — and such a URL executes in the
+ * current document regardless of `target`, i.e. in the DSH GUI's own origin.
+ * Anything not matching is rendered as plain text instead of a link.
+ */
+const SAFE_HREF = /^(?:https?:|mailto:|#|\/(?!\/)|\.{1,2}\/)/i
+
+/** Inline formatting: code spans, links, bold, italic, strike. */
+function inline(text: string, keyBase: string): ReactNode[] {
+  const nodes: ReactNode[] = []
+  const pattern = /(`[^`]+`)|(\*\*[^*]+\*\*)|(__[^_]+__)|(\*[^*\n]+\*)|(_[^_\n]+_)|(~~[^~]+~~)|(\[[^\]]+\]\([^)\s]+\))/g
+  let last = 0
+  let index = 0
+  for (let match = pattern.exec(text); match !== null; match = pattern.exec(text)) {
+    if (match.index > last) nodes.push(text.slice(last, match.index))
+    const token = match[0]
+    const key = `${keyBase}-i${index++}`
+    if (token.startsWith('`')) {
+      nodes.push(createElement('code', { key }, token.slice(1, -1)))
+    } else if (token.startsWith('**') || token.startsWith('__')) {
+      nodes.push(createElement('strong', { key }, token.slice(2, -2)))
+    } else if (token.startsWith('~~')) {
+      nodes.push(createElement('del', { key }, token.slice(2, -2)))
+    } else if (token.startsWith('[')) {
+      const split = token.indexOf('](')
+      const label = token.slice(1, split)
+      const href = token.slice(split + 2, -1)
+      if (SAFE_HREF.test(href)) {
+        nodes.push(createElement('a', { key, href, target: '_blank', rel: 'noreferrer noopener' }, label))
+      } else {
+        // Unsafe scheme (javascript:, data:, vbscript:, …): keep the text, drop
+        // the link. Skipping the token inside a single createElement pair keeps
+        // the label readable but inert.
+        nodes.push(createElement('span', { key, title: href }, label))
+      }
+    } else {
+      nodes.push(createElement('em', { key }, token.slice(1, -1)))
+    }
+    last = match.index + token.length
+  }
+  if (last < text.length) nodes.push(text.slice(last))
+  return nodes
+}
+
+/** Split one table row into cells. */
+function cells(line: string): string[] {
+  return line.replace(/^\s*\|/, '').replace(/\|\s*$/, '').split('|').map(cell => cell.trim())
+}
+
+/** Render a whole document. */
+export function renderMarkdown(text: string): ReactNode {
+  const lines = text.replace(/\r\n/g, '\n').split('\n')
+  const out: ReactNode[] = []
+  let i = 0
+  let key = 0
+  const nextKey = (): string => `md-${key++}`
+
+  while (i < lines.length) {
+    const line = lines[i] as string
+
+    // Fenced code.
+    const fence = /^\s*(```|~~~)\s*([\w+-]*)\s*$/.exec(line)
+    if (fence !== null) {
+      const marker = fence[1] as string
+      const body: string[] = []
+      i += 1
+      while (i < lines.length && !(lines[i] as string).trimStart().startsWith(marker)) {
+        body.push(lines[i] as string)
+        i += 1
+      }
+      i += 1
+      out.push(createElement('pre', { key: nextKey() }, createElement('code', null, body.join('\n'))))
+      continue
+    }
+
+    // Heading.
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line)
+    if (heading !== null) {
+      const level = Math.min(6, (heading[1] as string).length)
+      out.push(createElement(`h${level}`, { key: nextKey() }, inline(heading[2] as string, nextKey())))
+      i += 1
+      continue
+    }
+
+    // Horizontal rule.
+    if (/^\s*([-*_])\s*\1\s*\1[\s\S]*$/.test(line) && line.replace(/[\s\-*_]/g, '') === '') {
+      out.push(createElement('hr', { key: nextKey() }))
+      i += 1
+      continue
+    }
+
+    // Table (header row + separator).
+    if (line.includes('|') && i + 1 < lines.length && /^\s*\|?[\s:|-]+\|[\s:|-]*$/.test(lines[i + 1] as string)) {
+      const head = cells(line)
+      i += 2
+      const rows: string[][] = []
+      while (i < lines.length && (lines[i] as string).includes('|') && (lines[i] as string).trim() !== '') {
+        rows.push(cells(lines[i] as string))
+        i += 1
+      }
+      out.push(createElement('table', { key: nextKey() },
+        createElement('thead', null,
+          createElement('tr', null, head.map((cell, index) => createElement('th', { key: index }, inline(cell, nextKey()))))),
+        createElement('tbody', null, rows.map((row, rowIndex) => createElement('tr', { key: rowIndex },
+          row.map((cell, cellIndex) => createElement('td', { key: cellIndex }, inline(cell, nextKey()))))))))
+      continue
+    }
+
+    // Blockquote.
+    if (/^\s*>/.test(line)) {
+      const body: string[] = []
+      while (i < lines.length && /^\s*>/.test(lines[i] as string)) {
+        body.push((lines[i] as string).replace(/^\s*>\s?/, ''))
+        i += 1
+      }
+      out.push(createElement('blockquote', { key: nextKey() }, renderMarkdown(body.join('\n'))))
+      continue
+    }
+
+    // Lists.
+    const listMatch = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/.exec(line)
+    if (listMatch !== null) {
+      const ordered = /^\d/.test(listMatch[2] as string)
+      const items: string[] = []
+      while (i < lines.length) {
+        const current = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/.exec(lines[i] as string)
+        if (current === null) break
+        items.push(current[3] as string)
+        i += 1
+      }
+      out.push(createElement(ordered ? 'ol' : 'ul', { key: nextKey() },
+        items.map((item, index) => createElement('li', { key: index }, inline(item, nextKey())))))
+      continue
+    }
+
+    // Blank line.
+    if (line.trim() === '') {
+      i += 1
+      continue
+    }
+
+    // Paragraph: consume until a blank line or another block starter.
+    const paragraph: string[] = [line]
+    i += 1
+    while (i < lines.length) {
+      const current = lines[i] as string
+      if (current.trim() === '') break
+      if (/^(#{1,6})\s/.test(current) || /^\s*(```|~~~)/.test(current) || /^\s*>/.test(current)) break
+      if (/^(\s*)([-*+]|\d+[.)])\s+/.test(current)) break
+      paragraph.push(current)
+      i += 1
+    }
+    out.push(createElement('p', { key: nextKey() }, inline(paragraph.join(' '), nextKey())))
+  }
+
+  return createElement('div', { className: 'rvs-markdown' }, out)
+}

package/src/client/vsc/reveal-line.ts

@@ -0,0 +1,142 @@
+/**
+ * "Land here": the jump a search hit (or an `@`-reference) performs.
+ *
+ * Kept as one module-level helper because it has to work on an editor that is
+ * ALREADY mounted — clicking a second hit in the same file must re-jump, not
+ * silently do nothing (which is what a mount-only reveal does).
+ */
+import { EditorSelection, StateEffect, StateField } from '@codemirror/state'
+import { Decoration, EditorView, type DecorationSet } from '@codemirror/view'
+
+/** Set (or clear) the landing highlight on one line. */
+export const setRevealLine = StateEffect.define<number | null>()
+
+/**
+ * The landing highlight for a jump (search hit, `@` reference): without it a
+ * jump into a long file leaves the caret in a wall of identical lines and the
+ * user has to hunt for it.
+ */
+export const revealLineField = StateField.define<DecorationSet>({
+  create: () => Decoration.none,
+  update(value, tr) {
+    let next = value.map(tr.changes)
+    for (const effect of tr.effects) {
+      if (!effect.is(setRevealLine)) continue
+      next = effect.value === null
+        ? Decoration.none
+        : Decoration.set([Decoration.line({ class: 'rvs-reveal-line' }).range(effect.value)])
+    }
+    return next
+  },
+  provide: field => EditorView.decorations.from(field),
+})
+
+/** How long the landing highlight stays lit. */
+const LIT_MS = 2600
+
+/**
+ * Scroll to a 1-based line, put the caret on it and light it up.
+ *
+ * Centering is done in TWO steps on purpose: CodeMirror scrolls its own
+ * scroller, but the editor can also sit inside a taller ancestor scroller (the
+ * panel height is not ours to control), and only `scrollIntoView` walks every
+ * scrollable ancestor. Without the second step the line can land off-screen.
+ */
+export function revealLine(view: EditorView, target: number, lit: (position: number | null) => void): void {
+  let line = 0
+  try {
+    const clamped = Math.min(Math.max(1, Math.round(target)), view.state.doc.lines)
+    line = view.state.doc.line(clamped).number
+    const from = view.state.doc.line(line).from
+    view.dispatch({
+      selection: { anchor: from },
+      effects: EditorView.scrollIntoView(from, { y: 'center' }),
+    })
+    lit(from)
+  } catch {
+    // A stale line number or a disposed view: nothing to reveal.
+    return
+  }
+  view.focus()
+  // Second step: centre the line in the *visible* area whatever scrolls.
+  window.setTimeout(() => {
+    try {
+      const element = lineElement(view, line)
+      element?.scrollIntoView({ block: 'center', inline: 'nearest' })
+    } catch {
+      // No layout: the CodeMirror scroll already did its best.
+    }
+  }, 30)
+  window.setTimeout(() => {
+    try {
+      lit(null)
+    } catch {
+      // Disposed.
+    }
+  }, LIT_MS)
+}
+
+/** The rendered `.cm-line` element for a 1-based line number, if visible. */
+function lineElement(view: EditorView, line: number): HTMLElement | null {
+  const position = view.state.doc.line(line).from
+  if (position < view.viewport.from || position > view.viewport.to) return null
+  const dom = view.domAtPos(position)
+  let node: Node | null = dom.node
+  while (node !== null && node !== view.dom) {
+    if (node instanceof HTMLElement && node.classList.contains('cm-line')) return node
+    node = node.parentNode
+  }
+  return null
+}
+
+/**
+ * 选中一个行区间并把它带到视野中央（「上一个/下一个改动点」用）。
+ *
+ * 与 `revealLine` 的差别只有两点：用 `EditorSelection.range` 把整段选起来（一个
+ * 改动块常常有好几行，只放一个 caret 看不出这次改动有多大），以及**不**点灯 —
+ * 改动块本身已经有自己的绿/红背景，再叠一层 landing 蓝只会糊成第三种颜色。
+ *
+ * `from` / `to` 都是 **1-based 行号**（与 `revealLine` 同一套语义），越界夹到文件
+ * 首尾，`from > to` 时自动对调。`lit` 与 `revealLine` 同义，给那些需要额外提示
+ * 的调用方留口子（传 null 收灯，`LIT_MS` 后自动熄灭）。
+ */
+export function revealRange(
+  view: EditorView,
+  from: number,
+  to: number,
+  lit?: (position: number | null) => void,
+): void {
+  let line = 0
+  try {
+    const total = view.state.doc.lines
+    const firstNumber = Math.min(Math.max(1, Math.round(Math.min(from, to))), total)
+    const lastNumber = Math.min(Math.max(firstNumber, Math.round(Math.max(from, to))), total)
+    const first = view.state.doc.line(firstNumber)
+    const last = view.state.doc.line(lastNumber)
+    line = firstNumber
+    view.dispatch({
+      selection: EditorSelection.range(first.from, last.to),
+      effects: EditorView.scrollIntoView(first.from, { y: 'center' }),
+    })
+    lit?.(first.from)
+  } catch {
+    // A stale line number or a disposed view: nothing to reveal.
+    return
+  }
+  view.focus()
+  // 与 revealLine 同理：祖先滚动容器也要走一遍，否则选中的块可能整个在视野外。
+  window.setTimeout(() => {
+    try {
+      lineElement(view, line)?.scrollIntoView({ block: 'center', inline: 'nearest' })
+    } catch {
+      // No layout: the CodeMirror scroll already did its best.
+    }
+  }, 30)
+  window.setTimeout(() => {
+    try {
+      lit?.(null)
+    } catch {
+      // Disposed.
+    }
+  }, LIT_MS)
+}