dsh-tiddlywiki 0.3.1 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-tiddlywiki",
   "description": "TiddlyWiki 5 as the DSH persistent knowledge base: tiddlywiki_* agent tools (search/get/put/delete + git sync), a full TiddlyWiki editor embedded in the GUI center column, a floating quick-note widget in the chat area, and git-based sync with auto-commit. Mounts via the official dsh plugin system — no DSH source changes.",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "keywords": [
     "dsh",
@@ -60,6 +60,12 @@
     "tiddlywiki": "^5.4.1"
   },
   "devDependencies": {
+    "@codemirror/commands": "^6.11.0",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.2",
+    "@codemirror/view": "^6.43.10",
+    "@lezer/highlight": "^1.2.3",
     "@types/node": "^22.20.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/client/markdown-editor.ts

@@ -0,0 +1,123 @@
+/**
+ * CodeMirror 6 Markdown editor for the quick-note widget (replaces the
+ * hand-rolled regex highlighter in the old markdown.ts — real Lezer syntax
+ * tree, proper GFM coverage, undo/redo, and a native editing surface).
+ *
+ * The widget stays a plain-DOM product: CodeMirror is framework-agnostic, so
+ * no React is pulled in. The editor is built into a wrapper `<div>`
+ * (`.dsh-tw-note-editor`) that the widget can append, drag-drop onto, and
+ * re-read via `getValue()`/`setValue()`.
+ *
+ * Theming follows the DSH design tokens (`--dsw-alias-*`) through a
+ * `HighlightStyle` that maps Markdown tags onto the same palette the old
+ * `.md-*` rules used, so light/dark both look right.
+ *
+ * @module dsh-tiddlywiki/client/markdown-editor
+ */
+import { EditorView, keymap, placeholder, drawSelection } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
+import { syntaxHighlighting, HighlightStyle } from '@codemirror/language'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { tags as t } from '@lezer/highlight'
+
+/** Design-token aliases (same values as styles.ts / the old .md-* rules). */
+const BRAND = 'var(--dsw-alias-brand-primary, #3e63dd)'
+const BRAND_DIM = 'color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 55%, transparent)'
+const SECONDARY = 'var(--dsw-alias-label-secondary, #888)'
+const DIMMED = 'var(--dsw-alias-label-dimmed, #999)'
+const MONO = 'ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace'
+const CODE_BG = 'color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 12%, transparent)'
+const CODE_BLOCK_BG = 'color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 8%, transparent)'
+
+/** Markdown token → design-token style map (mirrors the old .md-* palette). */
+const mdHighlight = HighlightStyle.define([
+  // Headings (# … ######) — brand + bold.
+  { tag: [t.heading1, t.heading2, t.heading3, t.heading4, t.heading5, t.heading6], color: BRAND, fontWeight: '700' },
+  // Markers: #, >, -, *, `, [ ] etc.
+  { tag: t.processingInstruction, color: BRAND_DIM },
+  // Inline code + fenced code text — monospace, tinted background.
+  { tag: t.monospace, fontFamily: MONO, backgroundColor: CODE_BG, borderRadius: '4px', padding: '0 3px' },
+  // Code block content (inside a fence) gets a slightly wider tint.
+  { tag: t.content, fontFamily: MONO, backgroundColor: CODE_BLOCK_BG },
+  { tag: t.strong, fontWeight: '700' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strikethrough, textDecoration: 'line-through', opacity: '.75' },
+  { tag: t.link, color: BRAND, textDecoration: 'underline' },
+  { tag: t.url, color: BRAND_DIM, textDecoration: 'underline dotted' },
+  { tag: t.quote, fontStyle: 'italic', color: SECONDARY },
+  { tag: t.contentSeparator, color: DIMMED, textDecoration: 'line-through' },
+  { tag: t.comment, color: DIMMED },
+])
+
+/** Public editor surface the quick-note widget consumes. */
+export interface MarkdownEditor {
+  /** Wrapper element (append/drag-target). */
+  el: HTMLDivElement
+  /** The CodeMirror EditorView (advanced use / future extensions). */
+  view: EditorView
+  getValue(): string
+  setValue(value: string): void
+  /** Insert a Markdown line at the current caret (used by file upload). */
+  insertAtCaret(markdown: string): void
+  focus(): void
+}
+
+export interface MarkdownEditorOptions {
+  /** Placeholder text shown when the doc is empty. */
+  placeholder?: string
+  /** Called on Ctrl/Cmd+Enter (wired after save is defined by the widget). */
+  onSave?: () => void
+}
+
+/**
+ * Build a CodeMirror 6 Markdown editor inside `.dsh-tw-note-editor`.
+ * GFM base language (strikethrough, tables, task lists, autolinks) — strictly
+ * more coverage than the old regex highlighter.
+ */
+export function buildMarkdownEditor(opts: MarkdownEditorOptions = {}): MarkdownEditor {
+  const wrap = document.createElement('div')
+  wrap.className = 'dsh-tw-note-editor'
+
+  const view = new EditorView({
+    parent: wrap,
+    state: EditorState.create({
+      doc: '',
+      extensions: [
+        EditorView.lineWrapping,
+        history(),
+        markdown({ base: markdownLanguage }),
+        syntaxHighlighting(mdHighlight),
+        drawSelection(),
+        placeholder(opts.placeholder ?? ''),
+        keymap.of([
+          ...defaultKeymap,
+          ...historyKeymap,
+          { key: 'Mod-Enter', run: () => { opts.onSave?.(); return true } },
+        ]),
+      ],
+    }),
+  })
+
+  return {
+    el: wrap,
+    view,
+    getValue: () => view.state.doc.toString(),
+    setValue(value: string) {
+      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } })
+    },
+    insertAtCaret(markdownLine: string) {
+      const { from } = view.state.selection.main
+      const line = view.state.doc.lineAt(from)
+      const atLineStart = from === line.from
+      const insert = `${atLineStart ? '' : '\n'}${markdownLine}\n`
+      view.dispatch({
+        changes: { from, insert },
+        selection: { anchor: from + insert.length },
+        scrollIntoView: true,
+      })
+      view.focus()
+    },
+    focus: () => view.focus(),
+  }
+}

package/src/client/note-widget.ts

@@ -14,9 +14,10 @@
  * (GET /dsh-tiddlywiki/tags). Enter/`,` commits the typed value; Backspace on
  * an empty field removes the last chip; the dropdown filters on typing.
  *
- * Markdown editing: a "highlighted textarea" overlay (a `<pre>` rendered
- * behind a transparent-text `<textarea>`, see markdown.ts) so Markdown is
- * syntax-highlighted as you type — no dependencies, perfect alignment.
+ * Markdown editing: a CodeMirror 6 editor (see markdown-editor.ts) with real
+ * Lezer-based syntax highlighting (GFM: headings, lists, code, links, tables,
+ * task lists, strikethrough…) plus undo/redo, wired into the same
+ * `.dsh-tw-note-editor` surface the widget reads/writes.
  *
  * File upload: the body accepts files via the 📎 button or drag-and-drop;
  * each file is POSTed raw to /dsh-tiddlywiki/upload (saved under the wiki's
@@ -27,7 +28,8 @@
  */
 import { toast } from './toast.ts'
 import { openEditorPopup } from './editor-popup.ts'
-import { highlightMarkdown } from './markdown.ts'
+import { buildMarkdownEditor, type MarkdownEditor } from './markdown-editor.ts'
+import type { EditorView } from '@codemirror/view'
 
 const NOTE_ENDPOINT = '/dsh-tiddlywiki/note'
 const EDIT_ENDPOINT = '/dsh-tiddlywiki/edit'
@@ -195,54 +197,23 @@ function buildTagEditor(): {
 }
 
 /**
- * Markdown editor: a `<pre>` overlay (highlighted by markdown.ts) rendered
- * behind a transparent-text `<textarea>` with identical metrics. Scroll is
- * mirrored; on every input the overlay is re-rendered. The text layer stays
- * exactly aligned with the highlight layer because the highlighter never
- * changes the user's characters.
+ * Build the CodeMirror 6 Markdown editor for the quick-note widget. The editor
+ * lives inside `.dsh-tw-note-editor`; the widget reads/writes through
+ * getValue/setValue and inserts uploaded files at the caret via insertAtCaret.
+ * Mod-Enter (save) is routed through `onSave`.
  */
-function buildEditor(): {
-  el: HTMLDivElement
-  textarea: HTMLTextAreaElement
-  render: () => void
-  focus: () => void
-} {
-  const wrap = document.createElement('div')
-  wrap.className = 'dsh-tw-note-editor'
-
-  const hl = document.createElement('pre')
-  hl.className = 'dsh-tw-note-hl'
-  hl.setAttribute('aria-hidden', 'true')
-
-  const textarea = document.createElement('textarea')
-  textarea.className = 'dsh-tw-note-text'
-  textarea.placeholder = '写点东西… Markdown 高亮，可 📎/拖入文件\nCtrl+Enter 保存'
-
-  wrap.append(hl, textarea)
-
-  const render = (): void => {
-    hl.innerHTML = `${highlightMarkdown(textarea.value)}\n`
-    hl.scrollTop = textarea.scrollTop
-    hl.scrollLeft = textarea.scrollLeft
-  }
-
-  const syncScroll = (): void => {
-    hl.scrollTop = textarea.scrollTop
-    hl.scrollLeft = textarea.scrollLeft
-  }
-
-  textarea.addEventListener('input', render)
-  textarea.addEventListener('scroll', syncScroll)
-  render()
-
-  return { el: wrap, textarea, render, focus: () => textarea.focus() }
+function buildEditor(onSave: () => void): MarkdownEditor {
+  return buildMarkdownEditor({
+    placeholder: '写点东西… Markdown 高亮，可 📎/拖入文件\nCtrl+Enter 保存',
+    onSave,
+  })
 }
 
 /**
  * Upload one file to the wiki (raw body, name in ?name=), then insert a
  * Markdown image/link line at the caret of the given editor.
  */
-async function uploadInto(file: File, editor: { textarea: HTMLTextAreaElement; render: () => void }): Promise<void> {
+async function uploadInto(file: File, editor: MarkdownEditor): Promise<void> {
   if (file.size > MAX_UPLOAD_BYTES) {
     toast(`文件过大（≤ ${Math.round(MAX_UPLOAD_BYTES / 1024 / 1024)}MB）`)
     return
@@ -263,26 +234,15 @@ async function uploadInto(file: File, editor: { textarea: HTMLTextAreaElement; r
     const markdown = file.type.startsWith('image/')
       ? `![${name}](${payload.url})`
       : `[${name}](${payload.url})`
-    const ta = editor.textarea
-    const start = ta.selectionStart ?? ta.value.length
-    const end = ta.selectionEnd ?? start
-    const before = ta.value.slice(0, start)
-    const after = ta.value.slice(end)
-    const needsLead = start > 0 && !before.endsWith('\n')
-    const insert = `${needsLead ? '\n' : ''}${markdown}\n`
-    ta.value = `${before}${insert}${after}`
-    const caret = (before + insert).length
-    ta.setSelectionRange(caret, caret)
-    ta.focus()
-    editor.render()
+    editor.insertAtCaret(markdown)
     toast(`已上传「${name}」并插入链接`)
   } catch (err) {
     toast(`上传失败：${err instanceof Error ? err.message : String(err)}`)
   }
 }
 
-/** Build the whole widget DOM and wire it up (returns the appended root). */
-function buildWidget(): HTMLDivElement {
+/** Build the whole widget DOM and wire it up (returns root + editor view). */
+function buildWidget(): { root: HTMLDivElement; editorView: EditorView } {
   const root = document.createElement('div')
   root.className = 'dsh-tw-note'
 
@@ -310,8 +270,10 @@ function buildWidget(): HTMLDivElement {
   const tagEditor = buildTagEditor()
   fields.append(titleInput, tagEditor.el)
 
-  const editor = buildEditor()
-  const textarea = editor.textarea
+  // Mod-Enter save routes through doSave, which is assigned below (the editor
+  // keymap only runs after the widget is fully wired, so this is safe).
+  let doSave: () => Promise<void> | undefined
+  const editor = buildEditor(() => { void doSave?.() })
 
   // ── file upload (button + drag & drop onto the editor) ────────────────
   const uploadBtn = document.createElement('button')
@@ -407,8 +369,8 @@ function buildWidget(): HTMLDivElement {
   toggle.addEventListener('click', () => { void (opened ? close() : open()) })
   closeBtn.addEventListener('click', close)
 
-  const doSave = async (): Promise<void> => {
-    const text = textarea.value.trim()
+  doSave = async (): Promise<void> => {
+    const text = editor.getValue().trim()
     if (text.length === 0) {
       toast('内容为空，未保存')
       return
@@ -431,8 +393,7 @@ function buildWidget(): HTMLDivElement {
         toast(`保存失败：${payload?.error ?? `HTTP ${res.status}`}`)
         return
       }
-      textarea.value = ''
-      editor.render()
+      editor.setValue('')
       resetTitle()
       toast(`已保存「${payload.title ?? titleInput.value}」`)
       close()
@@ -444,18 +405,12 @@ function buildWidget(): HTMLDivElement {
     }
   }
 
-  save.addEventListener('click', () => { void doSave() })
-  textarea.addEventListener('keydown', (event) => {
-    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
-      event.preventDefault()
-      void doSave()
-    }
-  })
+  save.addEventListener('click', () => { void doSave?.() })
 
   /** Save (if non-empty) and open the tiddler in TW's native editor. */
   const doEdit = async (): Promise<void> => {
     const title = titleInput.value.trim().length > 0 ? titleInput.value.trim() : timestampTitle()
-    const text = textarea.value
+    const text = editor.getValue()
     const tags = tagEditor.getTags()
     edit.disabled = true
     edit.textContent = '打开中…'
@@ -489,19 +444,22 @@ function buildWidget(): HTMLDivElement {
 
   edit.addEventListener('click', () => { void doEdit() })
 
-  return root
+  return { root, editorView: editor.view }
 }
 
 /**
  * Mount the floating quick-note widget. Fetches /status first: when
  * `ui.showQuickNote` is off the widget is never created (no DOM side effects).
- * Returns a disposer that removes it.
+ * Returns a disposer that removes it (and destroys the CodeMirror view).
  */
 export function mountNoteWidget(): () => void {
   let disposed = false
   let root: HTMLDivElement | undefined
+  let editorView: EditorView | undefined
   const disposer = (): void => {
     disposed = true
+    // CodeMirror holds a ResizeObserver + timers; destroy it, not just the DOM.
+    editorView?.destroy()
     root?.remove()
     const toastEl = document.querySelector<HTMLElement>('.dsh-tw-toast')
     toastEl?.remove()
@@ -509,7 +467,9 @@ export function mountNoteWidget(): () => void {
   void (async () => {
     const ui = await fetchUiOptions()
     if (disposed || !ui.showQuickNote) return
-    root = buildWidget()
+    const widget = buildWidget()
+    root = widget.root
+    editorView = widget.editorView
   })()
   return disposer
 }

package/src/client/styles.ts

@@ -130,75 +130,52 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   font: inherit; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer;
 }
 .dsh-tw-note-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, #222); }
-.dsh-tw-note-fields { display: flex; gap: 8px; }
+/* 标题与标签上下分行：标题一行，标签 chips+输入框独占一行，
+   避免标签增多时把并排的标题栏一起撑高。 */
+.dsh-tw-note-fields { display: flex; flex-direction: column; gap: 8px; }
 .dsh-tw-note-fields input {
-  flex: 1; min-width: 0; border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
+  width: 100%; box-sizing: border-box; border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
   border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 12px;
   background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, inherit);
   transition: border-color 120ms ease, box-shadow 120ms ease;
 }
-.dsh-tw-note-fields input:focus, .dsh-tw-note-text:focus {
+.dsh-tw-note-fields input:focus, .dsh-tw-note-editor .cm-editor.cm-focused {
   outline: none; border-color: var(--dsw-alias-brand-primary, #3e63dd);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 25%, transparent);
 }
-.dsh-tw-note-text::placeholder { color: var(--dsw-alias-label-dimmed, #999); }
-/* ── Markdown editor (highlighted-textarea overlay) ────────────────
-   The <pre> highlight layer and the transparent <textarea> share identical
-   metrics (border/padding/font/line-height/white-space) so lines align 1:1. */
+/* ── Markdown editor (CodeMirror 6, see markdown-editor.ts) ──────────
+   The .cm-editor box carries the border/radius/min-height the old textarea
+   had; font metrics live on the scroller so lines/selection stay aligned. */
 .dsh-tw-note-editor { position: relative; min-width: 0; }
-.dsh-tw-note-editor pre,
-.dsh-tw-note-editor textarea {
-  margin: 0; box-sizing: border-box; width: 100%;
+.dsh-tw-note-editor .cm-editor {
   border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18)); border-radius: 8px;
-  padding: 8px 9px; font: inherit; font-size: 13px; line-height: 1.5; min-height: 120px;
-  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; tab-size: 4;
+  background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #222);
+  font-size: 13px; min-height: 120px;
   transition: border-color 120ms ease, box-shadow 120ms ease;
 }
-.dsh-tw-note-editor .dsh-tw-note-hl {
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
-  background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #222);
-  pointer-events: none; overflow: hidden;
+.dsh-tw-note-editor .cm-scroller {
+  font-family: inherit; font-size: 13px; line-height: 1.5;
+  min-height: 120px; overflow: auto;
+}
+.dsh-tw-note-editor .cm-content {
+  caret-color: var(--dsw-alias-label-primary, #222);
+  padding: 8px 9px;
+}
+.dsh-tw-note-editor .cm-placeholder { color: var(--dsw-alias-label-dimmed, #999); }
+.dsh-tw-note-editor .cm-line { padding: 0; }
+/* Selection + active line follow the theme. */
+.dsh-tw-note-editor .cm-editor .cm-selectionBackground,
+.dsh-tw-note-editor .cm-editor.cm-focused .cm-selectionBackground {
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 22%, transparent) !important;
 }
-.dsh-tw-note-editor .dsh-tw-note-text {
-  position: relative; z-index: 1; resize: vertical;
-  background: transparent; color: transparent; caret-color: var(--dsw-alias-label-primary, #222);
-  overflow: auto;
+.dsh-tw-note-editor .cm-editor .cm-activeLine {
+  background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 8%, transparent);
 }
-.dsh-tw-note-editor .dsh-tw-note-text:focus { outline: none; }
-.dsh-tw-note-drop .dsh-tw-note-text,
-.dsh-tw-note-drop .dsh-tw-note-hl {
+/* Drag-over highlight (file upload) targets the CodeMirror box now. */
+.dsh-tw-note-drop .cm-editor {
   border-color: var(--dsw-alias-brand-primary, #3e63dd);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 25%, transparent);
 }
-/* ── markdown highlight tokens (colors only — never size/height, so the
-      overlay keeps line-for-line alignment with the invisible textarea) ── */
-.dsh-tw-note-hl .md-heading { font-weight: 700; color: var(--dsw-alias-brand-primary, #3e63dd); }
-.dsh-tw-note-hl .md-hash { font-weight: 700; color: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 55%, transparent); }
-.dsh-tw-note-hl .md-code,
-.dsh-tw-note-hl .md-code-block,
-.dsh-tw-note-hl .md-fence {
-  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
-}
-.dsh-tw-note-hl .md-code {
-  background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 14%, transparent);
-  border-radius: 4px; padding: 0 3px;
-}
-.dsh-tw-note-hl .md-code-block,
-.dsh-tw-note-hl .md-fence {
-  display: block; background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 8%, transparent);
-}
-.dsh-tw-note-hl .md-bold { font-weight: 700; }
-.dsh-tw-note-hl .md-italic { font-style: italic; }
-.dsh-tw-note-hl .md-strike { text-decoration: line-through; opacity: .75; }
-.dsh-tw-note-hl .md-link { color: var(--dsw-alias-brand-primary, #3e63dd); text-decoration: underline; }
-.dsh-tw-note-hl .md-url { color: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 70%, #999); text-decoration: underline dotted; }
-.dsh-tw-note-hl .md-image { color: var(--dsw-alias-state-success-primary, #3eaa5f); font-weight: 600; }
-.dsh-tw-note-hl .md-bullet { font-weight: 700; color: var(--dsw-alias-brand-primary, #3e63dd); }
-.dsh-tw-note-hl .md-number { font-weight: 700; color: var(--dsw-alias-state-warning-primary, #d9822b); }
-.dsh-tw-note-hl .md-quote { font-style: italic; color: var(--dsw-alias-label-secondary, #888); }
-.dsh-tw-note-hl .md-hr { color: var(--dsw-alias-label-dimmed, #999); text-decoration: line-through; }
-.dsh-tw-note-hl .md-task { color: var(--dsw-alias-label-secondary, #888); }
-.dsh-tw-note-hl .md-task-checked { color: var(--dsw-alias-state-success-primary, #3eaa5f); font-weight: 600; }
 .dsh-tw-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .dsh-tw-note-foot-left, .dsh-tw-note-foot-right { display: flex; align-items: center; gap: 8px; }
 .dsh-tw-note-hint { font-size: 11px; color: var(--dsw-alias-label-dimmed, #999); }
@@ -228,7 +205,7 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 .dsh-tw-note-edit:active:not(:disabled) { transform: scale(.96); }
 .dsh-tw-note-edit:disabled { opacity: .55; cursor: default; }
 /* ── Multi-tag chip editor (quick-note tags) ─────────────────────────────── */
-.dsh-tw-note-tags { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.dsh-tw-note-tags { position: relative; width: 100%; display: flex; flex-direction: column; gap: 4px; }
 .dsh-tw-note-chips { display: flex; flex-wrap: wrap; gap: 4px; }
 .dsh-tw-note-tagchip {
   display: inline-flex; align-items: center; gap: 4px;

package/src/client/markdown.ts

@@ -1,137 +0,0 @@
-/**
- * Lightweight Markdown syntax highlighter for the quick-note editor.
- *
- * The editor is the classic "highlighted textarea": a `<pre>` rendered BEHIND
- * a transparent-text `<textarea>` with identical metrics. To keep the two
- * layers perfectly aligned we NEVER change the user's text — every token is
- * only wrapped in a colored `<span class="md-*">`, so each line keeps its
- * exact characters and column widths. Leading whitespace (indentation) is
- * preserved as-is so list/heading/quote alignment survives.
- *
- * Coverage is deliberately pragmatic (a scratch-note editor, not CommonMark):
- * ATX headings, fenced code blocks, blockquotes, bullet + ordered + task
- * lists, horizontal rules, inline code, bold, italic, strikethrough, links
- * and images. HTML is escaped first, so the output is always safe to set as
- * `innerHTML` (no raw HTML from the user is ever executed).
- *
- * @module dsh-tiddlywiki/client/markdown
- */
-
-/** Escape a raw source fragment for safe insertion into the overlay HTML. */
-export function escapeHtml(value: string): string {
-  return value
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-}
-
-/**
- * Inline token highlighting on ALREADY-ESCAPED text. Inline code spans are
- * first pulled out into placeholders so later passes (links/bold/italic) can
- * never reach inside them, then restored.
- */
-function highlightInline(escaped: string): string {
-  // Inline code spans are pulled out first so later passes never reach inside.
-  const codeTokens: string[] = []
-  let s = escaped.replace(/(`+)([^`]+?)\1/g, (_all, t: string, code: string) => {
-    codeTokens.push(`<span class="md-code">${t}${code}${t}</span>`)
-    return `\u0000${codeTokens.length - 1}\u0000`
-  })
-
-  // Images and links: keep the literal markdown text, color the pieces.
-  s = s.replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (_a, alt: string, url: string) =>
-    `<span class="md-image">![${alt}](</span><span class="md-url">${url}</span><span class="md-image">)</span>`)
-  s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_a, text: string, url: string) =>
-    `<span class="md-link">[${text}](</span><span class="md-url">${url}</span><span class="md-link">)</span>`)
-
-  // Bold spans are also protected (placeholders) so the later italic pass
-  // cannot chew into their `**` delimiters (which are also single `*`).
-  const boldTokens: string[] = []
-  s = s.replace(/(\*\*|__)([^*_]+?)\1/g, (_a, d: string, text: string) => {
-    boldTokens.push(`<span class="md-bold">${d}${text}${d}</span>`)
-    return `\u0001${boldTokens.length - 1}\u0001`
-  })
-
-  s = s.replace(/(\*|_)([^*_]+?)\1/g, '<span class="md-italic">$1$2$1</span>')
-  s = s.replace(/~~([^~]+?)~~/g, '<span class="md-strike">~~$1~~</span>')
-
-  return s
-    .replace(/\u0001(\d+)\u0001/g, (_a, i: string) => boldTokens[Number(i)] ?? '')
-    .replace(/\u0000(\d+)\u0000/g, (_a, i: string) => codeTokens[Number(i)] ?? '')
-}
-
-/**
- * Match and return groups as a plain string array ('' for absent groups), or
- * null when the pattern does not match. Avoids noUncheckedIndexedAccess
- * friction on RegExpMatchArray indexing.
- */
-function groups(re: RegExp, value: string): string[] | null {
-  const m = value.match(re)
-  if (m === null) return null
-  return Array.from(m, (g) => g ?? '')
-}
-
-/** Highlight one non-fence line (leading whitespace preserved verbatim). */
-function highlightLine(raw: string): string {
-  const leadMatch = groups(/^(\s*)(.*)$/, raw)
-  const lead = leadMatch === null ? '' : leadMatch[1]!
-  const body = leadMatch === null ? raw : leadMatch[2]!
-  if (body.length === 0) return raw
-
-  // ATX heading: ## 标题
-  const heading = groups(/^(#{1,6})(\s+)(.*)$/, body)
-  if (heading !== null) {
-    return `${lead}<span class="md-heading">${escapeHtml(heading[1]!)}${escapeHtml(heading[2]!)}</span>${highlightInline(escapeHtml(heading[3]!))}`
-  }
-  // Horizontal rule
-  if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(body)) {
-    return `${lead}<span class="md-hr">${escapeHtml(body)}</span>`
-  }
-  // Blockquote: > 内容
-  const quote = groups(/^(>)( ?)(.*)$/, body)
-  if (quote !== null) {
-    return `${lead}<span class="md-quote">${escapeHtml(quote[1]!)}</span>${escapeHtml(quote[2]!)}${highlightInline(escapeHtml(quote[3]!))}`
-  }
-  // Task list item: - [x] 内容 / - [ ] 内容
-  const task = groups(/^([-*+])(\s+)(\[[ xX]\])(\s+)(.*)$/, body)
-  if (task !== null) {
-    const checked = /\[[xX]\]/.test(task[3]!)
-    return `${lead}<span class="md-bullet">${escapeHtml(task[1]!)}</span>${escapeHtml(task[2]!)}<span class="md-task${checked ? ' md-task-checked' : ''}">${escapeHtml(task[3]!)}</span>${escapeHtml(task[4]!)}${highlightInline(escapeHtml(task[5]!))}`
-  }
-  // Bullet list item
-  const bullet = groups(/^([-*+])(\s+)(.*)$/, body)
-  if (bullet !== null) {
-    return `${lead}<span class="md-bullet">${escapeHtml(bullet[1]!)}</span>${escapeHtml(bullet[2]!)}${highlightInline(escapeHtml(bullet[3]!))}`
-  }
-  // Ordered list item: 1. 内容
-  const ordered = groups(/^(\d+)([.)])(\s+)(.*)$/, body)
-  if (ordered !== null) {
-    return `${lead}<span class="md-number">${escapeHtml(ordered[1]!)}${escapeHtml(ordered[2]!)}</span>${escapeHtml(ordered[3]!)}${highlightInline(escapeHtml(ordered[4]!))}`
-  }
-  // Plain inline line
-  return `${lead}${highlightInline(escapeHtml(body))}`
-}
-
-/**
- * Highlight full Markdown source into safe `<span>`-wrapped HTML. Line count
- * and per-line text (including whitespace) are preserved exactly.
- */
-export function highlightMarkdown(src: string): string {
-  const lines = src.split('\n')
-  const out: string[] = []
-  let inFence = false
-  for (const rawLine of lines) {
-    const fence = rawLine.match(/^\s*(```|~~~)\s*([\w-]*)\s*$/)
-    if (fence !== null) {
-      inFence = !inFence
-      out.push(`<span class="md-fence">${escapeHtml(rawLine)}</span>`)
-      continue
-    }
-    if (inFence) {
-      out.push(`<span class="md-code-block">${escapeHtml(rawLine)}</span>`)
-      continue
-    }
-    out.push(highlightLine(rawLine))
-  }
-  return out.join('\n')
-}