@young1lin/dsh-ui-gitworkbench 0.1.13 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@young1lin/dsh-ui-gitworkbench",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Out-of-tree dsh web UI plugin: a session-header git workbench chip opening a drawer with the file tree, per-file diff, history, compare, staging, commit, and sync (fetch/pull/push).",
   "type": "module",
   "main": "lib/index.js",

package/src/client/DiffViews.tsx

@@ -4,6 +4,7 @@ import {
 } from 'react'
 
 import { attachWordRanges, gutterSides, overlayRanges, parseRows, type Row, type RowWithRanges } from './diff-model.ts'
+import { CR, CR_GLYPH, splitOnCr } from './cr-mark.ts'
 import { parsePatch } from '../patch-model.ts'
 import { alignRows, allBlockLines, allBlockTally, blockActionsDisabled, blockCount, blockEdge, blockIsWholeFile, blockLines, blockTally, currentActionBlock, needsFirstBlockClearance, sideBodyState, type SideCell, type SideRow } from './side-rows.ts'
 import { anchorFor, blockNearestTo, blockTopsFromRows, blockTopsFromSideRows, countBlocks, scrollTopFor, stepBlockIndex, unifiedBlocks } from './diff-nav.ts'
@@ -170,14 +171,25 @@ function rowClass(kind: Row['kind']): string {
 function renderCode(row: RowWithRanges, tokens: readonly HighlightRun[]): ReactNode {
   if (row.kind === 'hunk') return row.text
   const painted = overlayRanges(tokens.length > 0 ? tokens : [{ text: row.text }], row.ranges ?? [])
-  if (painted.length === 1 && painted[0]!.color === undefined && !painted[0]!.mark) return row.text
-  return painted.map((tok, i) => (
-    <span
-      key={i}
-      className={tok.mark ? (row.kind === 'add' ? css.wordAdd : css.wordDel) : undefined}
-      style={tok.color === undefined && !tok.italic ? undefined : { color: tok.color, fontStyle: tok.italic ? 'italic' : undefined }}
-    >{tok.text}</span>
-  ))
+  // The trailing-CR marker rides AFTER everything painted: word ranges are
+  // char offsets into the row text, so a mid-line glyph would shift them.
+  // Mid-line CRs (a CR-only file) stay invisible here; the side pane draws those.
+  const crTail = row.text.endsWith(CR)
+    ? <span className={css.crMark} aria-hidden="true">{CR_GLYPH}</span>
+    : null
+  if (painted.length === 1 && painted[0]!.color === undefined && !painted[0]!.mark) {
+    return crTail === null ? row.text : <>{row.text}{crTail}</>
+  }
+  return (<>
+    {painted.map((tok, i) => (
+      <span
+        key={i}
+        className={tok.mark ? (row.kind === 'add' ? css.wordAdd : css.wordDel) : undefined}
+        style={tok.color === undefined && !tok.italic ? undefined : { color: tok.color, fontStyle: tok.italic ? 'italic' : undefined }}
+      >{tok.text}</span>
+    ))}
+    {crTail}
+  </>)
 }
 
 /* ---------- side-by-side diff rendering (working tree only) ---------- */
@@ -1043,16 +1055,33 @@ function sideCodeClass(row: SideRow, side: 'left' | 'right'): string {
   return `${side === 'left' ? css.sideCodeDel : css.sideCodeAdd} ${css.sideCellBlock}`
 }
 
-/** One cell's Shiki runs, or its plain text when no tokens exist. */
+/** One text with every carriage return drawn as the CR glyph. No CR means
+ * the text comes back untouched — the common line, on both sides, costs one
+ * `includes`. The glyph spans are aria-hidden and unselectable, so copying a
+ * line copies code, not markers. */
+function renderWithCrMarks(text: string): ReactNode {
+  const parts = splitOnCr(text)
+  if (parts.length === 1) return text
+  const out: ReactNode[] = [parts[0]!]
+  for (let i = 1; i < parts.length; i += 1) {
+    out.push(<span key={`cr${i}`} className={css.crMark} aria-hidden="true">{CR_GLYPH}</span>)
+    out.push(parts[i]!)
+  }
+  return out
+}
+
+/** One cell's Shiki runs, or its plain text when no tokens exist; either way
+ * each carriage return in the cell is drawn, so a line whose only change is
+ * its ending shows the difference instead of two identical-looking cells. */
 function renderSideCode(cell: SideCell | null, tokens: readonly HighlightRun[] | undefined): ReactNode {
   if (cell === null) return ''
-  if (tokens === undefined || tokens.length === 0) return cell.text
-  if (tokens.length === 1 && tokens[0]!.color === undefined && !tokens[0]!.italic) return cell.text
+  if (tokens === undefined || tokens.length === 0) return renderWithCrMarks(cell.text)
+  if (tokens.length === 1 && tokens[0]!.color === undefined && !tokens[0]!.italic) return renderWithCrMarks(cell.text)
   return tokens.map((tok, i) => (
     <span
       key={i}
       style={tok.color === undefined && !tok.italic ? undefined : { color: tok.color, fontStyle: tok.italic ? 'italic' : undefined }}
-    >{tok.text}</span>
+    >{renderWithCrMarks(tok.text)}</span>
   ))
 }
 

package/src/client/cr-mark.ts

@@ -0,0 +1,39 @@
+/**
+ * Making the carriage return visible in diff views.
+ *
+ * A diff line's text carries the CR byte through verbatim (`fileSides` serves
+ * git's own bytes), and a browser draws nothing for it: two cells whose only
+ * difference is a line ending render as byte-identical text, so a whole-file
+ * CRLF rewrite reads as a wall of changed lines with no visible change in
+ * any of them. The fix is not to strip the CR — the byte must survive into
+ * every patch the block actions emit — but to draw a glyph at each CR while
+ * RENDERING, the way `git diff` spells it as `^M`.
+ *
+ * The glyph is U+240D (SYMBOL FOR CARRIAGE RETURN), the standard picture of
+ * the control character, so a marked line reads as "ends in CR" rather than
+ * as a stray character in the code.
+ *
+ * Pure: no React, no CSS, no git. `tests/cr-mark.test.ts` loads it directly.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/cr-mark
+ */
+
+/** Built rather than escaped so this source file survives any tool that
+ * normalises text-mode line endings on its way to disk. */
+export const CR = String.fromCharCode(13)
+
+/** What a carriage return is drawn as. */
+export const CR_GLYPH = '\u240d'
+
+/**
+ * Split text at every carriage return, so a renderer can interleave one
+ * {@link CR_GLYPH} span between consecutive parts.
+ *
+ * @param text - one cell's text, as the diff model carries it.
+ * @returns the parts between CRs; a text with no CR comes back as itself in
+ *          one piece (length 1), which is the caller's cheap early-out.
+ */
+export function splitOnCr(text: string): readonly string[] {
+  if (!text.includes(CR)) return [text]
+  return text.split(CR)
+}

package/src/client/locales.ts

@@ -99,7 +99,7 @@ export const zh: Record<WorkbenchKey, string> = {
   filesDiscardOpen: '丢弃并打开',
   // Read-only rather than withheld: in this view READING the file is the
   // point, and only saving it back would rewrite bytes nobody touched.
-  fileReadOnlyCrlf: '这个文件的行尾是 CRLF，只能查看不能编辑（编辑器会把行尾统一成 LF，保存时整份文件都会被改写）。',
+  fileReadOnlyCrlf: '这个文件的行尾是 CRLF，只能查看不能编辑（编辑器会把行尾统一成 LF，保存时整份文件都会被改写）；建议把行尾统一成 LF。',
   fileReadOnlyEncoding: '这个文件不是 UTF-8 编码，只能查看不能编辑：页面上的文字是一次有损解码，保存回去会改写每一个非 ASCII 字节。',
   blameLine: '第 {line} 行',
   blameInHistory: '他在本文件的提交',
@@ -292,7 +292,7 @@ export const zh: Record<WorkbenchKey, string> = {
   blameUncommitted: '尚未提交',
   blameFailed: '这个文件没有可追溯的历史（可能是未跟踪的新文件）。',
   blameTruncated: '文件过长，追溯信息只显示了前面一部分。',
-  crlfNotice: '这个文件的行尾是 CRLF，暂不支持在线编辑（编辑框会把行尾统一成 LF，保存时整份文件都会被改写）；查看和按块暂存/撤回不受影响。',
+  crlfNotice: '这个文件的行尾是 CRLF，暂不支持在线编辑（编辑框会把行尾统一成 LF，保存时整份文件都会被改写）；建议把行尾统一成 LF。差异里的回车已用 ␍ 标出；查看和按块暂存/撤回不受影响。',
   encodingNotice: '这个文件不是 UTF-8 编码（可能是 GBK、Shift JIS 之类），暂不支持在线编辑：页面上看到的文字是一次有损解码，保存回去会把文件里每一个非 ASCII 字节都改写掉，包括你没动过的行。查看和按块暂存/撤回不受影响。',
   saveFailed: '保存失败',
   saveUnavailable: '当前宿主还不支持保存（需要重启 dsh web 加载新版宿主端）。',
@@ -339,7 +339,7 @@ export const en: Record<WorkbenchKey, string> = {
   filesVanished: '{path} is not in the repository any more — deleted, renamed, or on a branch that no longer has it.',
   filesUnsavedAsk: 'You have unsaved edits; opening another file discards them.',
   filesDiscardOpen: 'Discard and open',
-  fileReadOnlyCrlf: 'This file uses CRLF line endings, so it opens read-only (the editor normalises them to LF, and a save would rewrite every line).',
+  fileReadOnlyCrlf: 'This file uses CRLF line endings, so it opens read-only (the editor normalises them to LF, and a save would rewrite every line); normalising the endings to LF is recommended.',
   fileReadOnlyEncoding: 'This file is not UTF-8, so it opens read-only: the text shown is a lossy decode, and saving it back would rewrite every non-ASCII byte.',
   blameLine: 'Line {line}',
   blameInHistory: 'Their commits on this file',
@@ -517,7 +517,7 @@ export const en: Record<WorkbenchKey, string> = {
   blameUncommitted: 'Not committed yet',
   blameFailed: 'This file has no history to blame (it may be a new, untracked file).',
   blameTruncated: 'The file is long, so blame is shown for the first part only.',
-  crlfNotice: 'This file has CRLF line endings, which the editor does not support yet (the edit box would turn every ending into LF, so a save rewrites the whole file); viewing and block staging/rolling back still work.',
+  crlfNotice: 'This file has CRLF line endings, which the editor does not support yet (the edit box would turn every ending into LF, so a save rewrites the whole file); normalising the endings to LF is recommended. Carriage returns are marked ␍ in the diff; viewing and block staging/rolling back still work.',
   encodingNotice: 'This file is not UTF-8 (GBK, Shift JIS or similar), so the editor is unavailable: the text shown is a lossy decode of it, and saving that back would rewrite every non-ASCII byte in the file, including lines you never touched. Viewing and block staging/rolling back still work.',
   saveFailed: 'Save failed',
   saveUnavailable: 'This host does not support saving yet — restart dsh web to load the new host half.',

package/src/client/styles/changes.css

@@ -279,6 +279,14 @@
 
 .wordAdd { background: var(--gs-add-word); border-radius: 2px; }
 .wordDel { background: var(--gs-del-word); border-radius: 2px; }
+/* A carriage return, drawn. The diff's text carries the CR byte through
+   verbatim and a browser paints nothing for it, so a line whose only change
+   is its ending rendered as two identical-looking cells; the glyph (U+240D,
+   the picture of the control character — `cr-mark.ts`) makes the ending
+   visible wherever the diff paints one. Dim and slightly small so a whole
+   CRLF file reads as code with quiet markers, not as a wall of symbols, and
+   unselectable so copying a line copies code. */
+.crMark { color: var(--gs-fg-faint); font-size: 0.9em; user-select: none; }
 
 /* Side-by-side diff pane. One grid holds EVERY row's four cells — a per-row
    grid would let the column boundary drift with each row's content, and a