@openspecui/web 0.9.0

package/src/lib/codemirror-markdown-preview.ts

@@ -0,0 +1,494 @@
+/**
+ * CodeMirror 6 Markdown Live Preview Extension
+ *
+ * 隐藏 Markdown 语法标记，显示富文本效果
+ * 参考 codemirror-rich-markdoc 的实现方式
+ */
+import { HighlightStyle, syntaxHighlighting, syntaxTree } from '@codemirror/language'
+import type { Extension } from '@codemirror/state'
+import type { DecorationSet } from '@codemirror/view'
+import { Decoration, EditorView, ViewPlugin, ViewUpdate, WidgetType } from '@codemirror/view'
+import type { SyntaxNodeRef } from '@lezer/common'
+import { tags as t } from '@lezer/highlight'
+
+/** 需要隐藏的语法标记 token */
+const HIDDEN_TOKENS = [
+  'HeaderMark', // # ## ###
+  'EmphasisMark', // * _
+  'LinkMark', // [ ] ( )
+  'URL', // 链接 URL
+  'HardBreak', // 硬换行
+  'QuoteMark', // >
+  'ListMark', // - * 1.
+]
+
+/** 装饰定义 */
+const hiddenDecoration = Decoration.mark({ class: 'cm-md-hidden' })
+const codeBlockLine = Decoration.line({ class: 'cm-md-codeblock-line' })
+const codeBlockStart = Decoration.line({ class: 'cm-md-codeblock-line-start' })
+const codeBlockEnd = Decoration.line({ class: 'cm-md-codeblock-line-end' })
+const codeBlockInactive = Decoration.line({ class: 'cm-md-codeblock-inactive' })
+const linkDecoration = Decoration.mark({ class: 'cm-md-link' })
+const imageDecoration = Decoration.mark({ class: 'cm-md-image' })
+const fadedDecoration = Decoration.mark({ class: 'cm-md-faded' })
+const taskFadedDecoration = Decoration.mark({ class: 'cm-md-task-faded' })
+const fenceDecoration = Decoration.mark({ class: 'cm-md-fence' })
+const orderedDecoration = (label: number, faded: boolean) =>
+  Decoration.replace({
+    widget: new OrderedListNumberWidget(label, faded),
+    inclusive: false,
+  })
+
+class OrderedListNumberWidget extends WidgetType {
+  constructor(
+    private label: number,
+    private faded: boolean
+  ) {
+    super()
+  }
+  eq(other: OrderedListNumberWidget): boolean {
+    return this.label === other.label && this.faded === other.faded
+  }
+  toDOM(): HTMLElement {
+    const span = document.createElement('span')
+    span.textContent = `${this.label}.`
+    span.className = `cm-md-olist${this.faded ? ' cm-md-olist-faded' : ''}`
+    return span
+  }
+}
+
+class BulletWidget extends WidgetType {
+  constructor(private faded: boolean) {
+    super()
+  }
+  eq(other: BulletWidget): boolean {
+    return this.faded === other.faded
+  }
+  toDOM(): HTMLElement {
+    const span = document.createElement('span')
+    span.textContent = '•'
+    span.className = `cm-md-ulmark${this.faded ? ' cm-md-olist-faded' : ''}`
+    return span
+  }
+}
+
+class TaskCheckboxWidget extends WidgetType {
+  constructor(private checked: boolean) {
+    super()
+  }
+  eq(other: TaskCheckboxWidget): boolean {
+    return this.checked === other.checked
+  }
+  toDOM(): HTMLElement {
+    const box = document.createElement('span')
+    box.className = `cm-md-task ${this.checked ? 'cm-md-task-checked' : ''}`
+    box.ariaHidden = 'true'
+    return box
+  }
+}
+
+function applyCodeBlockLines(
+  view: EditorView,
+  node: SyntaxNodeRef,
+  widgets: { from: number; to: number; decoration: Decoration }[],
+  isSelected: boolean
+) {
+  const firstLine = view.state.doc.lineAt(node.from).number
+  const lastLine = view.state.doc.lineAt(node.to).number
+  const hasClosingFence =
+    node.to - node.from > 3 && view.state.doc.sliceString(node.to - 3, node.to) === '```'
+
+  for (let lineNo = firstLine; lineNo <= lastLine; lineNo++) {
+    const line = view.state.doc.line(lineNo)
+    widgets.push({ from: line.from, to: line.from, decoration: codeBlockLine })
+    if (lineNo === firstLine) {
+      widgets.push({ from: line.from, to: line.from, decoration: codeBlockStart })
+      if (!isSelected && hasClosingFence) {
+        widgets.push({ from: line.from, to: line.from, decoration: codeBlockInactive })
+      }
+    }
+    if (lineNo === lastLine) {
+      widgets.push({ from: line.from, to: line.from, decoration: codeBlockEnd })
+    }
+  }
+}
+
+/** Markdown 预览 ViewPlugin */
+class MarkdownPreviewPlugin {
+  decorations: DecorationSet
+
+  constructor(view: EditorView) {
+    this.decorations = this.buildDecorations(view)
+  }
+
+  update(update: ViewUpdate): void {
+    if (update.docChanged || update.viewportChanged || update.selectionSet) {
+      this.decorations = this.buildDecorations(update.view)
+    }
+  }
+
+  buildDecorations(view: EditorView): DecorationSet {
+    const widgets: { from: number; to: number; decoration: Decoration }[] = []
+    const selectionRanges = view.state.selection.ranges
+    const selectedLines: Array<{ from: number; to: number }> = selectionRanges.map((r) => {
+      const lineFrom = view.state.doc.lineAt(r.from)
+      const lineTo = view.state.doc.lineAt(r.to)
+      return { from: Math.min(lineFrom.from, lineTo.from), to: Math.max(lineFrom.to, lineTo.to) }
+    })
+    const listStack: number[] = []
+
+    for (const { from, to } of view.visibleRanges) {
+      syntaxTree(view.state).iterate({
+        from,
+        to,
+        enter(node: SyntaxNodeRef) {
+          const { name } = node.type
+          const isSelectedLine = selectedLines.some(
+            (range) => node.from < range.to && node.to > range.from
+          )
+          const parentName = node.node.parent?.name ?? ''
+          const grandName = node.node.parent?.parent?.name ?? ''
+          const isOrderedList =
+            parentName.includes('OrderedList') || grandName.includes('OrderedList')
+          const text = view.state.doc.sliceString(node.from, node.to)
+
+          if (name === 'OrderedList') {
+            listStack.push(1)
+            return
+          }
+
+          // 代码块：若选区包含则保持原文，应用行装饰；否则也仅应用行装饰（不替换内容）
+          if (name === 'FencedCode') {
+            const overlapsSelection = selectedLines.some(
+              (range) => node.from < range.to && node.to > range.from
+            )
+            applyCodeBlockLines(view, node, widgets, overlapsSelection)
+            return false
+          }
+
+          // 链接文本样式
+          if (name === 'Link') {
+            const label = node.node.getChild('LinkLabel')
+            if (label) {
+              widgets.push({
+                from: label.from,
+                to: label.to,
+                decoration: linkDecoration,
+              })
+            }
+          }
+
+          // 图片标记
+          if (name === 'Image') {
+            widgets.push({
+              from: node.from,
+              to: node.to,
+              decoration: imageDecoration,
+            })
+          }
+
+          // 列表项 bullet 样式
+          if (name === 'ListMark') {
+            if (isOrderedList) {
+              const current = listStack[listStack.length - 1] ?? 1
+              if (isSelectedLine) {
+                // 光标所在行：显示原始文本，淡化但可编辑
+                widgets.push({
+                  from: node.from,
+                  to: node.to,
+                  decoration: fadedDecoration,
+                })
+              } else {
+                widgets.push({
+                  from: node.from,
+                  to: node.to,
+                  decoration: orderedDecoration(current, false),
+                })
+              }
+              if (listStack.length) {
+                listStack[listStack.length - 1] = current + 1
+              }
+              return
+            }
+
+            // 无序列表：未选中行用圆点，选中行显示原始符号（淡化且可编辑）
+            if (isSelectedLine) {
+              widgets.push({
+                from: node.from,
+                to: node.to,
+                decoration: fadedDecoration,
+              })
+            } else {
+              widgets.push({
+                from: node.from,
+                to: node.to,
+                decoration: Decoration.replace({
+                  widget: new BulletWidget(false),
+                  inclusive: false,
+                }),
+              })
+            }
+            return
+          }
+
+          // 任务列表 checkbox
+          if (name === 'TaskMarker') {
+            const checked = /\[[xX]\]/.test(text)
+            if (isSelectedLine) {
+              widgets.push({
+                from: node.from,
+                to: node.to,
+                decoration: taskFadedDecoration,
+              })
+            } else {
+              widgets.push({
+                from: node.from,
+                to: node.to,
+                decoration: Decoration.replace({
+                  widget: new TaskCheckboxWidget(checked),
+                  inclusive: false,
+                }),
+              })
+            }
+            return
+          }
+
+          // 代码块 fence 与语言标记
+          if (name === 'CodeMark' || name === 'CodeInfo') {
+            const decoration = isSelectedLine ? fadedDecoration : fenceDecoration
+            widgets.push({
+              from: node.from,
+              to: node.to,
+              decoration,
+            })
+            return
+          }
+
+          // HeaderMark 需要包含后面的空格
+          if (name === 'HeaderMark') {
+            const decoration = isSelectedLine ? fadedDecoration : hiddenDecoration
+            widgets.push({
+              from: node.from,
+              to: node.to + 1, // +1 包含空格
+              decoration,
+            })
+            return
+          }
+
+          // 隐藏语法标记
+          if (HIDDEN_TOKENS.includes(name)) {
+            if (isSelectedLine) {
+              widgets.push({
+                from: node.from,
+                to: node.to,
+                decoration: fadedDecoration,
+              })
+              return
+            }
+            widgets.push({
+              from: node.from,
+              to: node.to,
+              decoration: hiddenDecoration,
+            })
+          }
+        },
+        leave(node) {
+          if (node.name === 'OrderedList') {
+            listStack.pop()
+          }
+        },
+      })
+    }
+
+    // 按位置排序，构建 DecorationSet
+    widgets.sort((a, b) => a.from - b.from || a.to - b.to)
+    return Decoration.set(widgets.map((w) => w.decoration.range(w.from, w.to)))
+  }
+}
+
+const markdownPreviewPlugin = ViewPlugin.fromClass(MarkdownPreviewPlugin, {
+  decorations: (v) => v.decorations,
+})
+
+/** 富文本样式定义 - 使用 HighlightStyle */
+const markdownHighlightStyle = HighlightStyle.define([
+  // 标题样式
+  {
+    tag: t.heading1,
+    fontWeight: 'bold',
+    fontSize: '1.75em',
+    lineHeight: '1.3',
+  },
+  {
+    tag: t.heading2,
+    fontWeight: 'bold',
+    fontSize: '1.5em',
+    lineHeight: '1.3',
+  },
+  {
+    tag: t.heading3,
+    fontWeight: 'bold',
+    fontSize: '1.25em',
+    lineHeight: '1.3',
+  },
+  {
+    tag: t.heading4,
+    fontWeight: 'bold',
+    fontSize: '1.1em',
+  },
+  {
+    tag: t.heading5,
+    fontWeight: 'bold',
+    fontSize: '1em',
+  },
+  {
+    tag: t.heading6,
+    fontWeight: 'bold',
+    fontSize: '0.9em',
+    color: 'var(--color-muted-foreground)',
+  },
+  // 强调样式
+  {
+    tag: t.strong,
+    fontWeight: 'bold',
+  },
+  {
+    tag: t.emphasis,
+    fontStyle: 'italic',
+  },
+  // 链接样式
+  {
+    tag: t.link,
+    color: 'var(--color-primary, #3b82f6)',
+    textDecoration: 'underline',
+  },
+  // 行内代码
+  {
+    tag: t.monospace,
+    fontFamily: 'var(--font-mono)',
+    padding: '1px 4px',
+  },
+  // 引用块
+  {
+    tag: t.quote,
+    color: 'var(--color-muted-foreground)',
+    fontStyle: 'italic',
+  },
+  // 删除线
+  {
+    tag: t.strikethrough,
+    textDecoration: 'line-through',
+  },
+])
+
+/** CSS 主题样式 */
+const markdownPreviewTheme = EditorView.baseTheme({
+  // 隐藏语法标记
+  '.cm-md-hidden': {
+    display: 'none',
+  },
+  // 防止背景行与编辑器边框叠加
+  '.cm-line': {
+    position: 'relative',
+  },
+  // 代码块样式
+  '.cm-md-codeblock': {
+    backgroundColor: 'color-mix(in srgb, currentColor 5%, transparent)',
+    borderRadius: '10px',
+    display: 'block',
+    padding: '12px',
+    fontFamily: 'ui-monospace, monospace',
+    fontSize: '0.9em',
+    border: '1px solid color-mix(in srgb, currentColor 12%, transparent)',
+  },
+  '.cm-md-codeblock-line': {
+    backgroundColor: 'color-mix(in srgb, currentColor 4%, transparent)',
+    paddingInline: '4px',
+    marginBottom: 0,
+    marginInlineStart: '4px',
+  },
+  '.cm-md-codeblock-line-start': {
+    borderTopLeftRadius: '8px',
+    borderTopRightRadius: '8px',
+  },
+  '.cm-md-codeblock-line-end': {
+    borderBottomLeftRadius: '8px',
+    borderBottomRightRadius: '8px',
+    marginBottom: '6px',
+  },
+  '.cm-md-codeblock-inactive': {
+    opacity: 0.6,
+  },
+  // ``` fences & lang info
+  '.cm-md-fence': {
+    color: 'color-mix(in srgb, currentColor 55%, transparent)',
+    letterSpacing: '0.03em',
+    fontWeight: 600,
+  },
+  // 链接样式
+  '.cm-md-link': {
+    color: 'var(--color-primary, #3b82f6)',
+    textDecoration: 'underline',
+    cursor: 'pointer',
+  },
+  // 图片容器
+  '.cm-md-image': {
+    display: 'inline-block',
+  },
+  // 有序列表编号
+  '.cm-md-olist': {
+    color: 'var(--color-muted-foreground)',
+    paddingRight: '0.35em',
+    fontVariantNumeric: 'tabular-nums',
+  },
+  '.cm-md-olist.cm-md-olist-faded': {
+    color: 'color-mix(in srgb, currentColor 45%, transparent)',
+  },
+  // 活动行上的原始 Markdown 标记淡化显示
+  '.cm-md-faded': {
+    color: 'color-mix(in srgb, currentColor 40%, transparent)',
+    opacity: 0.55,
+  },
+  '.cm-md-task': {
+    display: 'inline-block',
+    width: '0.95em',
+    height: '0.95em',
+    borderRadius: '3px',
+    border: '1px solid color-mix(in srgb, currentColor 30%, transparent)',
+    marginRight: '0.35em',
+    background: 'color-mix(in srgb, var(--background) 80%, transparent)',
+  },
+  '.cm-md-task-checked': {
+    background: 'color-mix(in srgb, var(--primary) 35%, transparent)',
+    borderColor: 'color-mix(in srgb, var(--primary) 60%, transparent)',
+    position: 'relative',
+  },
+  '.cm-md-task-checked::after': {
+    content: '""',
+    position: 'absolute',
+    inset: '0.6px 3px 2.4px 3px',
+    borderBottom: '2px solid var(--background)',
+    borderRight: '2px solid var(--background)',
+    transform: 'rotate(35deg)',
+    opacity: 0.9,
+  },
+  '.cm-md-task-faded': {
+    opacity: 0.55,
+  },
+  // 无序列表标记
+  '.cm-md-ulmark': {
+    color: 'oklch(0.18 0 0)', // 近似黑色
+    fontWeight: 700,
+    paddingRight: '0.2em',
+  },
+  // 引用块左边框
+  '.cm-line:has(.tok-quote)': {
+    borderLeft: '3px solid color-mix(in srgb, currentColor 30%, transparent)',
+    paddingLeft: '12px',
+  },
+})
+
+/** 导出 Markdown 实时预览扩展 */
+export function markdownPreview(): Extension {
+  return [markdownPreviewPlugin, syntaxHighlighting(markdownHighlightStyle), markdownPreviewTheme]
+}

package/src/lib/format-time.ts

@@ -0,0 +1,51 @@
+/**
+ * Format a timestamp as relative time (e.g., "2 hours ago", "3 days ago")
+ */
+export function formatRelativeTime(timestamp: number): string {
+  if (!timestamp) return ''
+
+  const now = Date.now()
+  const diff = now - timestamp
+
+  const seconds = Math.floor(diff / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+  const weeks = Math.floor(days / 7)
+  const months = Math.floor(days / 30)
+  const years = Math.floor(days / 365)
+
+  if (seconds < 60) return 'just now'
+  if (minutes < 60) return `${minutes}m ago`
+  if (hours < 24) return `${hours}h ago`
+  if (days < 7) return `${days}d ago`
+  if (weeks < 4) return `${weeks}w ago`
+  if (months < 12) return `${months}mo ago`
+  return `${years}y ago`
+}
+
+/**
+ * Format a timestamp as absolute date (e.g., "Nov 28, 2025")
+ */
+export function formatDate(timestamp: number): string {
+  if (!timestamp) return ''
+  return new Date(timestamp).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+/**
+ * Format a timestamp as date and time (e.g., "Nov 28, 2025 14:30")
+ */
+export function formatDateTime(timestamp: number): string {
+  if (!timestamp) return ''
+  return new Date(timestamp).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}

package/src/lib/shiki-highlighter.ts

@@ -0,0 +1,47 @@
+import {
+  getSingletonHighlighter,
+  type BundledTheme,
+  type Highlighter,
+  type StringLiteralUnion,
+} from 'shiki'
+
+let highlighterPromise: Promise<Highlighter> | null = null
+let cachedHighlighter: Highlighter | null = null
+
+const themes: StringLiteralUnion<BundledTheme, string>[] = [
+  'github-light-default',
+  'github-dark-default',
+]
+const langs = [
+  'javascript',
+  'typescript',
+  'json',
+  'yaml',
+  'markdown',
+  'tsx',
+  'jsx',
+  'bash',
+  'shell',
+]
+
+export async function loadShikiHighlighter(): Promise<Highlighter> {
+  if (!highlighterPromise) {
+    highlighterPromise = getSingletonHighlighter({
+      themes,
+      langs,
+    }).then(
+      (hl) => {
+        cachedHighlighter = hl
+        return hl
+      },
+      (err) => {
+        throw err
+      }
+    )
+  }
+  return highlighterPromise
+}
+
+export function getShikiHighlighterSync(): Highlighter | null {
+  return cachedHighlighter
+}