@vscode/markdown-editor 0.0.2-13 → 0.0.2-131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/README.md +659 -0
  2. package/dist/commands.d.ts +67 -0
  3. package/dist/commands.js +185 -0
  4. package/dist/commands.js.map +1 -0
  5. package/dist/config-BGeaJqWk.js +286 -0
  6. package/dist/config-BGeaJqWk.js.map +1 -0
  7. package/dist/config.d.ts +10 -0
  8. package/dist/config.js +6 -0
  9. package/dist/config.js.map +1 -0
  10. package/dist/index.d.ts +1611 -270
  11. package/dist/index.js +7839 -3291
  12. package/dist/index.js.map +1 -1
  13. package/dist/markdown-editor.css +1 -1
  14. package/dist/scrolling-C4GW1cCQ.js +391 -0
  15. package/dist/scrolling-C4GW1cCQ.js.map +1 -0
  16. package/dist/web-editors.d.ts +354 -0
  17. package/dist/web-editors.js +7528 -0
  18. package/dist/web-editors.js.map +1 -0
  19. package/package.json +59 -19
  20. package/src/contrib/comments/commentInput.css +38 -80
  21. package/src/contrib/comments/commentWidget.css +60 -0
  22. package/src/contrib/find/find.css +347 -0
  23. package/src/contrib/rename/rename.css +73 -0
  24. package/src/contrib/suggest/suggest.css +109 -0
  25. package/src/view/editor.css +1702 -111
  26. package/src/view/themes/default.css +21 -4
  27. package/src/view/themes/github.css +25 -13
  28. package/src/view/themes/vscode-default.css +98 -23
  29. package/src/view/themes/vscode-github.css +84 -15
  30. package/dist/_observables/assert.d.ts +0 -2
  31. package/dist/_observables/deps.d.ts +0 -28
  32. package/dist/_observables/disposables.d.ts +0 -19
  33. package/dist/_observables/equals.d.ts +0 -32
  34. package/dist/_observables/index.d.ts +0 -2
  35. package/dist/_observables/observableInternal/base.d.ts +0 -172
  36. package/dist/_observables/observableInternal/changeTracker.d.ts +0 -44
  37. package/dist/_observables/observableInternal/commonFacade/cancellation.d.ts +0 -24
  38. package/dist/_observables/observableInternal/commonFacade/deps.d.ts +0 -24
  39. package/dist/_observables/observableInternal/debugLocation.d.ts +0 -21
  40. package/dist/_observables/observableInternal/debugName.d.ts +0 -33
  41. package/dist/_observables/observableInternal/experimental/deferUnobserve.d.ts +0 -16
  42. package/dist/_observables/observableInternal/experimental/reducer.d.ts +0 -37
  43. package/dist/_observables/observableInternal/experimental/utils.d.ts +0 -15
  44. package/dist/_observables/observableInternal/index.d.ts +0 -25
  45. package/dist/_observables/observableInternal/logging/consoleObservableLogger.d.ts +0 -40
  46. package/dist/_observables/observableInternal/logging/debugGetDependencyGraph.d.ts +0 -4
  47. package/dist/_observables/observableInternal/logging/debugger/debuggerRpc.d.ts +0 -4
  48. package/dist/_observables/observableInternal/logging/debugger/devToolsLogger.d.ts +0 -43
  49. package/dist/_observables/observableInternal/logging/debugger/rpc.d.ts +0 -41
  50. package/dist/_observables/observableInternal/logging/debugger/utils.d.ts +0 -13
  51. package/dist/_observables/observableInternal/logging/logging.d.ts +0 -30
  52. package/dist/_observables/observableInternal/map.d.ts +0 -18
  53. package/dist/_observables/observableInternal/observables/baseObservable.d.ts +0 -58
  54. package/dist/_observables/observableInternal/observables/constObservable.d.ts +0 -5
  55. package/dist/_observables/observableInternal/observables/derived.d.ts +0 -46
  56. package/dist/_observables/observableInternal/observables/derivedImpl.d.ts +0 -83
  57. package/dist/_observables/observableInternal/observables/lazyObservableValue.d.ts +0 -27
  58. package/dist/_observables/observableInternal/observables/observableFromEvent.d.ts +0 -37
  59. package/dist/_observables/observableInternal/observables/observableSignal.d.ts +0 -11
  60. package/dist/_observables/observableInternal/observables/observableSignalFromEvent.d.ts +0 -5
  61. package/dist/_observables/observableInternal/observables/observableValue.d.ts +0 -37
  62. package/dist/_observables/observableInternal/observables/observableValueOpts.d.ts +0 -8
  63. package/dist/_observables/observableInternal/reactions/autorun.d.ts +0 -56
  64. package/dist/_observables/observableInternal/reactions/autorunImpl.d.ts +0 -53
  65. package/dist/_observables/observableInternal/set.d.ts +0 -17
  66. package/dist/_observables/observableInternal/transaction.d.ts +0 -27
  67. package/dist/_observables/observableInternal/utils/promise.d.ts +0 -75
  68. package/dist/_observables/observableInternal/utils/runOnChange.d.ts +0 -7
  69. package/dist/_observables/observableInternal/utils/utils.d.ts +0 -43
  70. package/dist/_observables/observableInternal/utils/utilsCancellation.d.ts +0 -10
  71. package/dist/_observables/observableInternal/utils/valueWithChangeEvent.d.ts +0 -10
  72. package/dist/_observables/utils.d.ts +0 -15
  73. package/dist/observables.d.ts +0 -4
  74. package/dist/observables.js +0 -439
  75. package/dist/observables.js.map +0 -1
  76. package/dist/runOnChange-C00UIwqQ.js +0 -1538
  77. package/dist/runOnChange-C00UIwqQ.js.map +0 -1
  78. package/src/contrib/comments/comments.css +0 -129
  79. package/src/contrib/commentsVscode/vscodeCommentWidgetV2.css +0 -166
package/README.md ADDED
@@ -0,0 +1,659 @@
1
+ # Markdown editor
2
+
3
+ `@vscode/markdown-editor` is an experimental, browser-based hybrid Markdown
4
+ editor. It keeps Markdown source as the canonical document while presenting
5
+ inactive blocks in rendered form and active blocks in editable source form.
6
+
7
+ ## Package releases
8
+
9
+ The npm release pipelines run `pnpm exec turbo build --filter=@vscode/markdown-editor`.
10
+ The package build depends on the workspace observables, HubRPC, and web-editors
11
+ builds. Fixture-only dependencies (Component Explorer and the cmark WASM compiler)
12
+ remain in the fixture/screenshot task graph, not the library release graph.
13
+ Both stable and nightly release jobs install Chromium before running the package
14
+ tests, which include real-browser clipboard and widget tests.
15
+
16
+ The Markdown test runner is temporarily pinned to Playwright 1.56.1, matching
17
+ Monaco's release tooling. Its Chromium download uses Microsoft's distribution
18
+ endpoint; newer Chrome-for-Testing downloads redirect to Google storage, which
19
+ failed with `EPERM` on the Azure release agent. Keep the exact pin until the newer
20
+ download route is approved and verified on that agent. This affects test tooling,
21
+ not the published editor's runtime dependencies or Component Explorer's renderer.
22
+
23
+ ## Embedded editor presentation
24
+
25
+ Iframe editor descriptors can opt into host-owned presentation controls:
26
+
27
+ ```ts
28
+ presentation: {
29
+ resizable: true,
30
+ fullWidth: true,
31
+ fullView: true,
32
+ minHeight: 180,
33
+ }
34
+ ```
35
+
36
+ These controls work without an editor protocol implementation in the iframe.
37
+ Full width uses the Markdown viewport width while retaining document flow.
38
+ Full view fills the visible Markdown viewport, keeps the same iframe alive,
39
+ and restores the previous width mode, inline height, and scroll position on exit.
40
+ The host toolbar groups copy and presentation actions in a compact, themed Codicon
41
+ overlay. It appears on hover or keyboard focus without reserving a header row,
42
+ alongside a rounded border around the iframe and its resize grip. These use the
43
+ same 4px frame and 6px toolbar radii as the Mermaid preview controls.
44
+ The toolbar and border fade in and out over 200ms with `ease-in-out`, matching
45
+ Markdown preview. Reduced-motion preferences disable these transitions.
46
+ The toolbar always provides an exit button in full view. Escape also exits when handled
47
+ by the injected iframe bootstrap (nested remote pages can use the message below).
48
+ Resize handles support pointer capture and Arrow Up/Down. After a user resize,
49
+ content-size reports no longer override the chosen height; **Automatic height**
50
+ returns control to the content. Full view always uses the host viewport height.
51
+ Presentation changes never edit the Markdown source.
52
+ The host iframe uses the page theme's background in every presentation mode.
53
+ Guest HTML can remain transparent to show that color without revealing the
54
+ Markdown document behind it in full view.
55
+
56
+ Cooperative pages can advertise the same preferences with
57
+ `parent.postMessage({ type: 'vscode-markdown-editor::presentation', preferences }, '*')`.
58
+ Explicit descriptor properties override guest preferences, including `false`.
59
+ The host sends `{ type: 'vscode-markdown-editor::presentation', mode }` to the
60
+ iframe on binding, loading, and mode changes. Modes are `inline`, `full-width`,
61
+ and `full-view`; pages measure dimensions with their own resize observer.
62
+ Pages should check `event.source === parent` before accepting this notification.
63
+ Send the same message type with `action: 'request-state'` to request the current
64
+ mode, or `action: 'exit-full-view'` to leave full view.
65
+
66
+ The **Experimental / Embedded presentation** group contains page-sized fixtures,
67
+ each with one embedded editor. Provider controls, guest preferences, and explicit
68
+ provider overrides use a release-notes editor backed by the sample web editor's
69
+ text mode. Its borderless red background
70
+ distinguishes guest UI from the Markdown host's themed controls. Edits update the underlying Markdown
71
+ block through the real web editor protocol. **Transparent editor** shows only
72
+ centered text, with no guest background or border, and a host-owned height-resize
73
+ grip. Embedded mode fills the browser; Explorer page mode supports desktop/mobile
74
+ viewports. Their light/dark Playwright tests exercise scaled-preview alignment,
75
+ drag capture, minimum height, size-report precedence, full-width
76
+ and full-view geometry, mode notifications, state retention, and restoration.
77
+
78
+ **Red editor (hover)** and **Transparent editor (hover)** default the `mockHover`
79
+ fixture input to true for deterministic visual verification. This sets
80
+ `data-md-iframe-hover="true"` on the fixture container, exercising the same chrome
81
+ visibility rules as real hover/focus without moving the pointer. Set the input
82
+ to false to test natural hover behavior.
83
+ The `animations` fixture input defaults to false for stable screenshots. Set it
84
+ to true to exercise the production fades, with either real or mocked hover.
85
+
86
+ ## Browser tests
87
+
88
+ `pnpm test:e2e` builds the fixture dependencies and runs the Playwright interaction
89
+ suite. Tests use isolated browser contexts and run in parallel, with four workers
90
+ in CI (override with Playwright's `--workers` option). This is separate from
91
+ Component Explorer's screenshot renderer, which already defaults to available
92
+ CPUs capped at eight workers. Screenshot computation remains Turbo-cached.
93
+
94
+ The Playwright `e2e/milestone-one.spec.ts` suite is temporarily skipped to unblock
95
+ CI while its debug-panel-based checks are replaced with fixture-native assertions.
96
+ The milestone fixtures remain in the screenshot pipeline; other E2E and unit
97
+ tests remain enabled.
98
+
99
+ In locked mode, submitting a comment or dismissing it with Escape keeps the input
100
+ hidden for the current selection, including across layout changes. Changing the
101
+ selection makes comment entry available again.
102
+
103
+ ## Editing policies
104
+
105
+ The editor has three independent policies:
106
+
107
+ - `EditorModel.readonlyMode`: disables text editing. The lock/pencil button
108
+ changes only this permission, not parsing, layout, or syntax visibility.
109
+ - `EditorModel.presentation`: `reading` uses conventional Markdown whitespace;
110
+ `editing` preserves source line breaks, blank lines, repeated spaces and tabs
111
+ while keeping rich formatting. Both work while locked or editable.
112
+ - `EditorModel.renderMarkupText`: `none` hides syntax, `selection` uses the
113
+ existing active-block revelation rules, and `all` reveals syntax throughout
114
+ the document. Hidden inline syntax occupies no width in either presentation.
115
+ Find can temporarily reveal hidden source for the current match without
116
+ changing this policy or cursor-navigation rules; closing Find removes the reveal.
117
+
118
+ Non-obvious spaces (leading, trailing, and runs of two or more) show dot
119
+ indicators wherever markup is revealed; tabs show an arrow. Ordinary single
120
+ inter-word spaces remain unmarked. The view-data layer maps markup visibility
121
+ to per-leaf `showWhitespace` booleans, so whitespace rendering does not depend
122
+ on the public policy enum. In editing presentation these are overlays on real
123
+ source whitespace: line breaks, wrapping, source offsets, and clipboard text
124
+ remain unchanged.
125
+
126
+ The model defaults to editable, reading presentation, and selection markup.
127
+ Hosts can initialize presentation with `EditorView`'s `presentation` option.
128
+ Switching presentation reparses without changing source or selection. Locking
129
+ does not reparse the document.
130
+
131
+ Authoritative host updates preserve selection identity and caret affinity when
132
+ the mapped endpoints are unchanged, avoiding a second render for an identical
133
+ edit echo. Pending-paragraph state is still cleared and stale offsets are clamped.
134
+ Rich-link layout batches DOM reads and writes across independent blocks, while
135
+ keeping dependent pills within a paragraph or table sequential.
136
+
137
+ The editing preset maps to explicit parser options rather than a parser UI mode:
138
+ `explicitBlankLineBlocks`, `explicitFinalEmptyLine`,
139
+ `preserveTrailingListContinuation`, and `allowEmptyListItemInterrupts`.
140
+ Blank source lines become empty blocks; the final unfinished line stays in its
141
+ list paragraph when it can continue that paragraph. A blank line ends this lazy
142
+ continuation. Empty nested list prefixes are structural before their first text
143
+ character is typed. These narrow recognition deviations avoid structural jumps
144
+ while typing or deleting, without depending on editing history. The reading
145
+ preset leaves these extensions off.
146
+
147
+ Editing presentation recognizes empty task checkboxes (`[ ]`, `[x]`, and `[]`)
148
+ at end-of-file as well as before whitespace or a newline. Enter exits an empty
149
+ task just like an empty list item; a nested empty task first outdents.
150
+
151
+ In editing presentation, Enter continues complete list items and exits/outdents
152
+ empty ones. Elsewhere it inserts a single newline without creating a virtual
153
+ paragraph. Arrow Down also stays within
154
+ the existing source instead of creating a virtual paragraph.
155
+
156
+ At a soft wrap, the end of one visual line and start of the next share a source
157
+ offset. Mouse placement and visual-line navigation retain upstream caret
158
+ affinity when targeting the preceding line, without changing source offsets.
159
+ Explicit newlines and programmatic selections keep their existing behavior.
160
+
161
+ See [Editing property tests](docs/editing-properties.md) for the interactive
162
+ assertion fixtures, CI contracts, deterministic editing corpus, and the
163
+ red/green/visual evidence required for layout fixes.
164
+
165
+ ### Rich link display hints (experimental)
166
+
167
+ Inline Markdown link titles can opt into two rendering experiments:
168
+
169
+ - `[commit](commit:1234567 "md:max-width=32")` bounds the entire pill to `32ch`.
170
+ - `[commit](commit:1234567 "md:icon-only")` shows only the resource icon, retaining
171
+ its tooltip, accessible name, keyboard activation and original destination.
172
+
173
+ Only these complete title values are interpreted as hints; other titles do not
174
+ change pill rendering. The source title and URL remain editable and unchanged.
175
+ These are fixture-driven experiments, not an extension contribution API.
176
+
177
+ ### Automatic links
178
+
179
+ Bare HTTP(S) URLs, `www.` addresses, and email addresses are detected using GFM
180
+ autolink rules. Angle-bracket autolinks are supported too. They use the same link
181
+ nodes and host presentation provider as explicit Markdown links, so recognized
182
+ GitHub issue URLs can receive VS Code rich presentations without `[label](url)`
183
+ syntax. Active links retain their exact editable source. Code spans and fenced
184
+ code do not auto-link; trailing punctuation is excluded from link targets.
185
+
186
+ Pasting a single HTTP(S) URL over selected inline text turns that selection into
187
+ a Markdown link, preserving inline formatting. Pasting without a selection,
188
+ inside code or an existing link, or across block boundaries keeps ordinary text
189
+ replacement. Ctrl/Cmd+Shift+V bypasses link creation with the async clipboard
190
+ strategy (including VS Code). Typed URLs do not wrap selections.
191
+
192
+ ### Fixture reference rendering
193
+
194
+ The real-editor examples expose **Interactive mode** in the fixture toolbar.
195
+ This live input enables browser typing and cursor blinking without resetting the
196
+ editor, selection, or recording; it defaults off for deterministic screenshots.
197
+
198
+ In the sidebar, **showEditModeToggle** restores the editor's lock button.
199
+ **readonly**, **presentation** (`reading` / `editing`), and **renderMarkupText**
200
+ (`none` / `selection` / `all`) control permission, presentation, and markup policy.
201
+ In read-only mode, `selection` keeps Markdown rendered even when text is selected;
202
+ unlocking restores selection-driven source markers. Explicit `all` still exposes
203
+ source for inspection, and diff/find diagnostics retain their explicit source reveals.
204
+ These controls are
205
+ live in the examples, main demos, content/selection fixtures, and Mermaid
206
+ fixtures: edits and selection survive changes. The dropdown follows the editor
207
+ button and replayed state. Legacy recordings with `sourceEditing` and
208
+ `activeEverywhere` are translated when loaded; new recordings store the explicit
209
+ policies. Existing fixture defaults are preserved, including
210
+ hidden buttons in the examples and selection fixtures. Browser input remains
211
+ controlled separately by **Interactive mode**.
212
+
213
+ The Compare diagnostics (injectivity, Arrow Down coverage, and active/inactive
214
+ comparison) also honor **showEditModeToggle**, defaulting to hidden. They retain
215
+ their diagnostic selection/presentation setup rather than synchronizing the
216
+ compared models through the interactive policy controls.
217
+ Injectivity activates each source character and compares its start and end in
218
+ that same layout. It does not compare coordinates across cell activations,
219
+ which can resize table columns when inline markers appear or collapse.
220
+
221
+ The **Reference** debug tab follows the editor's source and replay position.
222
+ Its renderer selector defaults to **GitHub (cmark-gfm)**, using the
223
+ [`@vscode/cmark-gfm-wasm`](../../../cmark-gfm-wasm/README.md) workspace package
224
+ with GFM tables, task lists, strikethrough, and autolinks. **markdown-it** retains
225
+ the previous reference engine for comparison (including its different task-list
226
+ behavior). Both use `github-markdown-css` in a script-disabled iframe.
227
+ Ordinary paragraphs and lists therefore usually look identical. For a visible
228
+ engine difference, try `- [x] Done`: cmark-gfm renders a checkbox, while the
229
+ markdown-it configuration leaves `[x]` as text.
230
+ This is GitHub's Markdown parser plus reference CSS, not GitHub's complete site
231
+ rendering/sanitization pipeline. cmark's safe HTML defaults remain enabled.
232
+ Initialization/rendering errors are displayed in the pane, not replaced by a
233
+ different engine.
234
+
235
+ The **Trees** pane groups **AST**, **Tokens**, **View data**, and **View** behind
236
+ a dropdown. **Split right** opens another copy with an independent tree
237
+ selection; both continue to follow live edits and replay. **Layout** remains a
238
+ separate pane.
239
+
240
+ Fixture dependency builds now require Emscripten 4.0.15 and CMake for cmark-gfm.
241
+ Alternatively, build that package with `pnpm --filter @vscode/cmark-gfm-wasm
242
+ build:docker`, then run `pnpm run build:fixtures` once the other fixture
243
+ dependencies have been built. Production editor bundles do not include this
244
+ fixture-only renderer.
245
+
246
+ ### Language feature widgets
247
+
248
+ `RenameModel` / `RenameWidget` and `SuggestModel` / `SuggestWidget` are isolated,
249
+ observable-driven contributions exported from the package. Import
250
+ `@vscode/markdown-editor/rename.css` or `@vscode/markdown-editor/suggest.css`
251
+ alongside the corresponding widget. Hosts own provider requests, edit application,
252
+ command routing, and editor integration; importing a widget does not enable a
253
+ language feature automatically.
254
+
255
+ See the [rename integration guide](src/contrib/rename/README.md) and
256
+ [suggest integration guide](src/contrib/suggest/README.md) for their contracts,
257
+ focus handling, and lifecycle requirements.
258
+
259
+ ### Milestone 1 editing coverage
260
+
261
+ The `editor/milestone-1` fixture group is generated from
262
+ `src/view/fixture/milestoneOneScenarios.ts`. Each unique source, directed
263
+ selection, and presentation state mounts the real editor directly. Screenshot
264
+ fixtures do not replay editing history: restored undo/redo states and other
265
+ identical states are deduplicated across the group. Behavioral tests cover
266
+ typing and history separately. The star has detailed prefix coverage; other
267
+ list markers each have a sanity state rather than a duplicate sequence.
268
+ Examples default to 360px wide and content-sized height. **Editor margin**,
269
+ width, markup policy, read-only toggle, and interactive input controls support
270
+ live visual review. Disabling editor margins retains a left rail for hanging
271
+ source markers. The source-selection status uses a fixed-height, ellipsized row.
272
+
273
+ | Family | Source-state coverage | Still to verify before milestone completion |
274
+ | --- | --- | --- |
275
+ | Text and whitespace | Spaces, tabs, soft line breaks, graphemes, empty/populated documents, directed selections | Empty-file VS Code integration, wrapping, clipboard and IME |
276
+ | Headings | ATX levels 1/2/6, setext creation, incomplete prefixes | Other levels, Enter/split/join and caret geometry across wrapping |
277
+ | Lists | Star prefixes, alternate-marker sanity checks, lazy continuation, stable blank-line carets, source/bullet alignment, list continuation/exit | Broader active-block ownership, indentation/outdent and nested combinations |
278
+ | Task lists | Checked/unchecked prefixes, nested task ownership, mixed sibling label alignment | Toggling/history and broader nested task transitions |
279
+ | Links | Inline destination completion, reference definition completion, formatted labels | Escapes/titles, selections at boundaries, mouse placement and wrapped labels |
280
+ | Inline formatting | Star/underscore italics, bold, strike, bold-italic and nested/adjacent emphasis | Delimiter boundary matrix, escaped punctuation, cross-line and cross-block selections |
281
+
282
+ These are coverage seeds, not a claim that every combination is complete.
283
+ Concrete feedback must receive a named fixture plus behavioral/geometry
284
+ assertions; screenshot review alone does not close a regression.
285
+ Point-to-source resolution always uses the editor's geometric hit test. The
286
+ demo's `caretDomPosArea` visualization samples that same path; the browser
287
+ caret hit-test alternative and its `caretDomPos`/`ownHitTest` switches are removed.
288
+
289
+ The list-marker review deliberately distinguishes presentation policies.
290
+ Editing presentation treats a bare `*`, `-`, `+`, or ordered marker as paragraph
291
+ text until its separator space/tab exists. A standalone bare marker has no list
292
+ indentation; a bare continuation stays in its existing bullet paragraph. Inserting
293
+ the separator promotes it, and deleting the separator reverses that promotion.
294
+ Reading presentation retains CommonMark empty-list parsing, with the caret
295
+ immediately after the actual marker rather than its synthetic gutter separator.
296
+ The `lists/lazy-continuation` checkpoints, parser ownership tests, and browser
297
+ geometry/history regressions cover these differences.
298
+
299
+ The `lists/empty-line-0` and `lists/lazy-empty-line`
300
+ checkpoints compare the same caret at EOF and before an additional newline,
301
+ without duplicate restored-state screenshots. The first empty continuation line of a
302
+ populated list paragraph keeps its indentation even when another newline follows;
303
+ the final line after the list terminator remains outside the list. Empty
304
+ marker-only items retain their existing empty-line placement.
305
+
306
+ `lists/nested-indent-dots` spreads source indentation indicators over the reserved
307
+ gutter. `lists/indent-space-1`, `lists/indent-space-2`, and `lists/indent-space-3`
308
+ isolate individual space selections and caret movement before a list marker.
309
+ Parsed list depth determines the gutter width; the actual source whitespace
310
+ shares that width evenly, rather than assuming two spaces per nesting level.
311
+ Each space's source-mapped text and dot fill its allocated cell. At the final
312
+ indentation boundary the caret meets the actual source glyph, including its
313
+ normal font sidebearing; the selection spans those exact caret endpoints.
314
+ Source-only spaces that do not create a nested item extend
315
+ leftward into the gutter instead of moving the logical bullet or text column.
316
+ Their display width uses the parsed marker prefix, not a fixed two-space rule.
317
+ Native bullet typography is unchanged.
318
+ Nested task prefixes use half-width indentation cells to bring their first
319
+ source-space dot closer to ordinary siblings without moving bullets, checkboxes,
320
+ or labels. Unordered-list continuation indentation reuses the source prefix's
321
+ indentation, marker, and separator cells, including an indented blank line
322
+ following a list. `lists/mixed-prefix-spaces`, `lists/blank-continuation-spaces`,
323
+ and `lists/nested-continuation-spaces` isolate these cases; browser tests verify
324
+ each cell's geometry, clicking, arrow movement, and typing at four font sizes.
325
+ Within a list paragraph, continuation whitespace takes no space while the block
326
+ is inactive. Activating the block reveals the source prefix inline so its spaces
327
+ indent the continuation text, rather than placing them in a left-hand gutter.
328
+ Quote prefixes and list indentation on the same line share that source span.
329
+ Whitespace remains source-mapped for clicking, navigation, and editing.
330
+ The `lists/same-paragraph-continuation`, `lists/nested-same-paragraph-continuation`,
331
+ `lists/quoted-same-paragraph-continuation`, and
332
+ `lists/uneven-same-paragraph-continuation` fixtures show inactive and active
333
+ states. Browser tests cover ordinary, ordered, task, nested and quoted lists,
334
+ tabs, CRLF, hard breaks, wrapped lines, cross-line formatting/link labels,
335
+ multiple continuation lines, prefix clicks, and caret movement.
336
+ Reading presentation retains its existing soft-line-break behavior.
337
+ The `lists/indent-depth-2`, `lists/indent-depth-uneven`, and `lists/indent-prefix-3`
338
+ fixtures reconstruct the nested-spacing feedback with minimal sources.
339
+ Browser geometry assertions also cover wider ordered prefixes, tabs,
340
+ markup visibility, typing, and undo.
341
+
342
+ Typing the third backtick of a new opening fence inserts a closing fence on the
343
+ next line, leaving the caret on the opener for a language name. Container
344
+ indentation is retained; pasted, inline, already-paired, and closing fences are
345
+ not completed. `formatting/fence-completion` captures the typing states. Enter
346
+ inside a fenced block preserves its indentation in editing presentation.
347
+ `lists/fenced-continuation-spaces` covers list-contained fences: opening, code,
348
+ and closing-line spaces reuse the list's source prefix cells, including with
349
+ syntax highlighting, without changing reading presentation.
350
+
351
+ The mode toggle is a sticky overlay in the right margin when there is room,
352
+ and may overlap content in narrow editors. It never changes text flow or reserves
353
+ an asymmetric rail. Left and right padding use two fixed sizes, without
354
+ intermediate scaling: 8px through 600px editor width, then 48px.
355
+ Once the document reaches its configured maximum width (900px by default),
356
+ it stays that width and additional space goes equally to the outer margins.
357
+ Disabling the width limit keeps the 48px margins on wide editors.
358
+ Top-level headings retain
359
+ symmetric 2em minimum clearance for their hanging markers, independent of heading
360
+ level. Long prefixes scale to fit that gutter instead of moving the document.
361
+ Top padding stays at 32px regardless of editor width, document content, or
362
+ scrollbar gutters. The VS Code webview uses thin scrollbars with transparent
363
+ tracks. First and later headings use identical font line boxes, preserving the
364
+ same text-to-underline spacing. Only the first block's top margin is removed;
365
+ the fixed top padding provides the optical spacing adjustment.
366
+ The `editor/readonly-toggle/` fixtures include wide, narrow, and scrolling documents.
367
+ The first block has no additional top margin in either presentation. The first
368
+ block inside a blockquote also has no top margin, preventing it from collapsing
369
+ outward and shifting the quote when a marker-only line gains content. The
370
+ paired `HeadingReading` and `HeadingEditing` fixtures and lock-toggle browser
371
+ tests guard its text position. VS Code themes map whitespace indicators to
372
+ `editorWhitespace.foreground`, including its dark-theme opacity.
373
+ The `HeadingSpacingH1` and `HeadingSpacingH2` fixtures compare first and later
374
+ headings; browser tests cover their underline spacing across themes, widths,
375
+ wrapped text, presentation modes, and active or inactive selections.
376
+
377
+ An empty, unlocked document in editing presentation always keeps a collapsed
378
+ selection at offset zero and its active typing block, including after Escape,
379
+ margin clicks, clicks below the document, and external selection clearing.
380
+ This does not take keyboard focus: the caret blinks only while the editor is
381
+ focused. Reading and locked documents keep their existing selection behavior.
382
+ `EmptyEditing` captures the empty surface; browser tests verify actual blink
383
+ cycles, blur, typing/deleting, and presentation/lock transitions.
384
+
385
+ Escape clears an existing selection, including a collapsed caret, and cancels
386
+ any pending empty paragraph. The exception is an empty, unlocked editing
387
+ document: Escape keeps its caret and active block visible so typing can begin
388
+ immediately. Open find/suggestion widgets and focused nested
389
+ controls handle Escape first. With no selection or pending paragraph, Escape
390
+ remains available to the host. Clicking beside or below a non-empty document also
391
+ clears selection. The empty-document invariant is enforced by the view, not by
392
+ individual input handlers. The editor fills a fixed-height host so its blank
393
+ area receives the same pointer handling as the margins, without stretching the
394
+ document itself.
395
+
396
+ Set `EditorViewOptions.highlightActiveBlock` to `false` to disable the active
397
+ block's background and glow, or update the live `view.highlightActiveBlock`
398
+ observable. This does not change active source markers, selection, or editing
399
+ behavior. Highlighting is enabled by default.
400
+
401
+ Empty ATX headings keep their separator whitespace in the same source marker
402
+ as populated headings. A zero-source-length line anchor preserves the heading
403
+ caret's column and line box when typing or removing its first character.
404
+ The existing `headings/atx-*` empty-prefix states and `headings/prefix-caret-*`
405
+ populated states cover this transition.
406
+
407
+ Rich-link pills at the end of a rendered line may use the remaining content
408
+ width before truncating their title. Short titles retain their natural width;
409
+ pills followed by prose retain their compact title limit. The width is updated
410
+ with editor layout and metadata changes, respecting list indentation and the
411
+ mode toggle's local exclusion rectangle. `Links/Rich links/Static/Trailing titles`
412
+ provides long, short, mid-line, formatted, and session-link examples.
413
+
414
+ `task-lists/nested-task-ownership` prevents a child checkbox from turning its
415
+ parent into a task. `task-lists/mixed-task-labels` aligns labels of task and
416
+ ordinary sibling items while preserving nested indentation. The ordinary
417
+ item's real separator spaces expand to fill the extra label-column width.
418
+ `task-lists/nested-task-empty-sibling-*` and `task-lists/mixed-task-separated-lists-*`
419
+ isolate populated/empty nested tasks and mixed lists separated by a thematic break.
420
+ In both presentations, checkboxes and ordinary bullets share a gutter column;
421
+ the task's extra source bullet hangs farther left. Labels keep their position
422
+ when markup visibility changes, except for extra source-only separator padding.
423
+ `lists/mixed-label-column` compares the same nested labels in reading and editing;
424
+ both use one shared marker/label layout rather than separate task indentation.
425
+ The expanded ordinary separator has a visible
426
+ whitespace dot. Browser tests click task-label characters with markup hidden,
427
+ selection-revealed, and fully revealed, then verify exact insertion offsets.
428
+ `task-lists/empty-task-label` keeps a completed checkbox plus separator structural
429
+ before label text is typed in editing presentation. Reading retains standard GFM
430
+ parsing. Typing or deleting the label must not change checkbox ownership or move
431
+ the empty caret's text column.
432
+ The `task-lists/checkbox-separator-*` fixtures cover the caret immediately
433
+ after `]`, after its first separator, and after an extra space. In editing
434
+ presentation, the first separator reaches the label column and each additional
435
+ space advances normally. The checkbox and separator participate in inline layout,
436
+ so native text ranges, clicks, and the painted caret agree.
437
+ The `lists/extra-separator-continuation-spaces` and
438
+ `lists/extra-separator-blank-line` fixtures protect `- test` followed by a blank
439
+ line and ` test`: the four prefix cells align and the blank-line caret sits
440
+ at the active label column.
441
+ Editing also treats `- [] test` as unchecked, preserving task layout through
442
+ `[x]` -> `[]` -> `[ ]` edits without inserting a space into the source.
443
+ Reading keeps `[]` as literal text. The normal separator requirement remains;
444
+ `- []text` and a bare `- []` at EOF are not tasks. The reduced
445
+ `task-lists/checkbox-value-0`, `checkbox-value-1`, and `checkbox-value-2`
446
+ fixtures cover all three values in reading and editing presentation.
447
+ The paired `task-lists/checkbox-line-end-empty` and `task-lists/checkbox-line-end-filled`
448
+ states extend this guarantee to a checkbox followed directly by a newline:
449
+ typing on the continuation must neither create the checkbox nor move the caret
450
+ column. Bare `* [ ]` without a separator retains standard non-task parsing.
451
+ `lists/nested-parent-filled` and `lists/nested-parent-empty` preserve the parent's
452
+ marker separator and its own visual line when its last label character is
453
+ removed. The nested item's row and indentation must not move. Parser tests cover
454
+ LF, CRLF, CR, source tiling, and incremental edits; browser tests assert the
455
+ caret and nested-item coordinates through deletion and retyping.
456
+ `task-lists/continuation-enter` covers a blank task continuation: editing Enter
457
+ inserts only `\n`. List auto-continuation still applies on the item's own marker
458
+ line, not every later line owned by that item.
459
+ `task-lists/checkbox-newline` keeps the line ending after `[ ]` in paragraph
460
+ flow instead of the absolutely positioned checkbox source.
461
+ The paired `lists/marker-separator-1` and `lists/marker-separator-2` states keep
462
+ the marker fixed while additional separator characters move the content right.
463
+ Extra spaces occupy half-em source cells. Unordered source symbols use the
464
+ body font and baseline in a one-em gutter cell, followed by a half-em separator.
465
+ Native reading bullets retain their original size, font, and nested list style;
466
+ we do not require unrelated glyphs to have identical pixel ink bounds across
467
+ fallback fonts. Geometry tests cover multiple font families and sizes.
468
+
469
+ `lists/separator-activation-inactive` and `lists/separator-activation-active`
470
+ show that extra source-only separator padding collapses outside the active
471
+ item. Nested logical gutters do not move. The explicit `all` and `none` markup
472
+ policies still force revelation or hiding.
473
+ `formatting/table-cell-outside`, `formatting/table-cell-first`, and
474
+ `formatting/table-cell-second` keep inline formatting markers out of the
475
+ inactive cells' layout. Activating another cell may resize columns; source
476
+ offsets remain distinct within each resulting layout.
477
+
478
+ `lists/blank-between-items` keeps list-level blank separators at their
479
+ surrounding container's margin, including typing and undo/redo. These separators
480
+ are distinct from continuation lines within a list-item paragraph.
481
+ `lists/first-blank-between-items` covers the first empty line immediately after
482
+ populated item text: its caret stays at the item's text indent, even when later
483
+ blank lines and another item follow. Moving to the next blank line moves to the
484
+ document margin. Browser tests compare each empty-line caret with the position
485
+ of ordinary text inserted there, across nested, ordered, and quoted lists,
486
+ empty items, and LF and CRLF endings. Parser source-ownership and incremental
487
+ reconciliation tests also cover CR endings.
488
+
489
+ `listMarkerAlignment/Source versus rendered bullet` places the production
490
+ source star and rendered bullet side by side. Reading bullets retain native
491
+ browser typography; source symbols use the body font and baseline, centered
492
+ in a one-em gutter slot. Browser regressions check the source column and
493
+ baseline across font families and sizes, and ensure reading bullets are not
494
+ replaced or resized. They deliberately do not require optical ink centers to
495
+ match across different glyphs and fallback fonts.
496
+
497
+ ### Screenshot CI
498
+
499
+ All fixtures use the package-local `fixtureUtils.ts` wrapper to disable CSS
500
+ animations and transitions within their own container, including the mode
501
+ toggle and cursor. Editor examples restore live motion when **Interactive mode**
502
+ is enabled. The custom cycling highlighter stays fixed by default; enable
503
+ **Cycle keyword colors** to exercise its live observable updates. Property
504
+ fixtures keep their complete diagnostic evidence in a **Replay log** disclosure,
505
+ collapsed by default so screenshots capture the editor rather than the JSON.
506
+
507
+ The `markdown-editor-screenshots` workflow captures every fixture discovered
508
+ by this package's Component Explorer configuration, including content,
509
+ diagnostic, property, and widget fixtures. There is no fixture-ID allowlist
510
+ or fixed fixture count; new fixtures are included automatically. The separate
511
+ screenshot job runs for every PR targeting main and every push to main, without
512
+ changed-path gates. Turbo decides which computations can be reused; commit
513
+ manifest publication always runs for authorized events, including cache hits.
514
+ This registers unchanged snapshots for new commit SHAs so unrelated main
515
+ changes do not leave holes in the baseline history. Pages reload
516
+ between fixtures to isolate their rendering. Capture uses `build:fixtures`
517
+ and `component-explorer.screenshots.json` to serve a static build on an
518
+ ephemeral local port, avoiding dev-server dependency optimization and module
519
+ reloads during a full run. Interactive exploration still uses the regular
520
+ `component-explorer.json` dev-server configuration. On the hosted Ubuntu runner,
521
+ CI removes the unused Android SDK before installing dependencies to leave
522
+ disk space for the full capture. The package-owned
523
+ `scripts/screenshots.mjs` and `screenshots` task store their
524
+ validated render JSON (without Git commit metadata or PNGs) in Turborepo's
525
+ cross-commit cache. The publish step attaches the *current* commit and the
526
+ `markdown-editor` service project ID, checks each content hash against
527
+ the screenshot service, and uploads only missing PNGs. If a cached hash is
528
+ missing remotely and its PNG is no longer local, it recaptures and verifies
529
+ the image before publishing; unchanged hashes already present remotely need
530
+ no browser run on a cache hit.
531
+
532
+ CI restores only the published-cache namespace and saves it after successful
533
+ image/manifest upload and validation. Fork and Dependabot runs do not populate
534
+ this cache. Thus a reusable CI snapshot's images have already been published;
535
+ PNGs remain in the service rather than in Turbo. The existing missing-image
536
+ recovery also supports local caches and older snapshots.
537
+
538
+ Before consulting the screenshot cache, CI builds the renderer and its
539
+ dependencies with `pnpm --filter @vscode/component-explorer-cli... run build`.
540
+ This deliberately bypasses Turbo's dependency-build cache: package builds can
541
+ also generate external dependency outputs (such as LinkRPC), which are not
542
+ restored by a cache entry containing only that package's `dist` directory.
543
+ Screenshot render results remain cached across commits.
544
+ Screenshot-script tests and fixture typechecking are explicit Turbo tasks.
545
+ Rendering depends on successful fixture typechecking, including on cache hits;
546
+ unchanged successful checks need not execute again. Commit metadata, service
547
+ publication, and PR reporting remain outside the cached tasks.
548
+
549
+ Image lookups run in batches of at most eight, use a 10-second timeout per attempt, and retry transient network
550
+ errors and HTTP 429/500/502/503/504 responses up to three total attempts, with
551
+ one- and two-second backoffs logged to CI. Only HTTP 404 means an image is
552
+ missing; persistent service errors fail preparation rather than being hidden.
553
+ The workflow archives the per-commit manifest and writes an advisory
554
+ base-commit comparison with before/after screenshots to the job summary.
555
+ Non-fork PRs also get a single updated comparison comment. Large comments
556
+ stop at a complete fixture boundary below GitHub's size limit; the complete
557
+ comparison remains in the job summary and `markdown-editor-screenshot-report`
558
+ artifact. Comparisons can
559
+ read the legacy `markdown-editor-pilot` baseline until main has published
560
+ under the new project ID; new uploads always use `markdown-editor`.
561
+ Diagnostic fixture errors remain in the published manifest and are listed
562
+ explicitly in the comparison report, including fixtures that could not produce
563
+ an image. Every fixture must pass diagnostics for required CI to be green,
564
+ including when its result is restored from the screenshot cache. The diagnostic
565
+ check runs after artifacts, uploads, reports, and PR comments so failures retain
566
+ their evidence. Run `node scripts/screenshots.mjs check` locally to check the
567
+ cached manifest, or pass a manifest path to check a specific capture.
568
+ Visual screenshot changes remain advisory, not merge gates.
569
+ Empty, duplicate, or malformed manifests, infrastructure failures, and
570
+ invalid image hashes still fail CI.
571
+
572
+ The service must support its existing `/images/<sha256>`,
573
+ `/commits/<owner>/<repo>/<sha>`, and authenticated `/upload` endpoints, with
574
+ project snapshots enabled. The upload step sends the manifest and
575
+ missing PNGs as a ZIP directly; no service-side GitHub token is needed to
576
+ download Actions artifacts. Main-branch pushes and non-fork PRs authenticate using GitHub
577
+ Actions OIDC (the same mechanism used by VS Code screenshot CI), not a new
578
+ repository secret. The service must authorize this repository's main pushes
579
+ and non-fork PR tokens for its OIDC audience. Fork and Dependabot PRs skip
580
+ OIDC upload and commenting; their job summary links to the workflow artifacts
581
+ instead of embedding unpublished images. Upload or unexpected baseline-service
582
+ errors fail CI explicitly, while artifacts are preserved for inspection.
583
+ The reusable `markdown-editor-screenshots` workflow handles rendering,
584
+ archiving, upload, and reporting for both callers. Both `required` and the
585
+ main-push-only `markdown-editor-screenshots-publish` caller explicitly grant
586
+ `contents: read`, `id-token: write`, and `pull-requests: write`; reusable
587
+ workflows cannot elevate their caller's permissions.
588
+ The workflow's
589
+ public service URL and runner/font configuration must be updated together
590
+ when changing service or rendering environment; renderer source, fixture
591
+ inputs, dependency lockfile, and the runner image version participate in
592
+ the Turbo cache key. Branch protection still requires the repository
593
+ administrator to mark the umbrella `Required / required` check as required.
594
+
595
+ Screenshot orchestration, contract tests (`pnpm run test:screenshots`), and
596
+ the Turbo task configuration live in this package. Component Explorer provides
597
+ the reusable renderer and screenshot service, with no Markdown-specific scripts.
598
+ The `markdown-editor-screenshots` artifact contains the upload manifest and new
599
+ PNGs; `markdown-editor-screenshot-render` preserves render diagnostics.
600
+
601
+ Start with the [current implementation specification](./docs/specification.md).
602
+ It explains the architecture, runtime data flow, public integration surface,
603
+ extension points, the VS Code custom text editor adapter, tests, and current
604
+ limitations.
605
+
606
+ Other package documents:
607
+
608
+ - [Original design](./docs/design.md) - historical design intent.
609
+ - [Original implementation plan](./docs/plan.md) - historical roadmap; its
610
+ checkboxes do not describe current completion.
611
+ - [Engineering backlog](./docs/todo.md) - known issues and future work.
612
+
613
+ From this package directory:
614
+
615
+ ```sh
616
+ pnpm test
617
+ pnpm test:e2e
618
+ pnpm build
619
+ pnpm build:explorer
620
+ ```
621
+
622
+ Playwright reuses test servers from the same worktree using a deterministic
623
+ worktree-specific port pair. Set `VSCODE_MARKDOWN_EDITOR_E2E_BASE_PORT` to the
624
+ first port of a different adjacent pair if the generated ports conflict with
625
+ another local service.
626
+
627
+ From the `vscode-packages` workspace root, run `tilt up` to supervise the editor
628
+ test page in Tilt's local web UI at http://localhost:10350. Tilt checks the
629
+ workspace installation with `pnpm install --frozen-lockfile` first; the `editor`
630
+ resource then serves the test page at its worktree-specific URL (shown in the
631
+ Tilt UI). Enable the optional `fixtures` resource in the UI to build and serve
632
+ the Component Explorer fixtures on the adjacent port. The servers run locally;
633
+ Docker and Kubernetes are not needed. Disable either server in the UI to stop
634
+ it, or run `tilt down` to stop Tilt's resources. To start only the fixtures
635
+ from the command line, use `tilt up fixtures`.
636
+
637
+ Install [Tilt](https://docs.tilt.dev/install.html) and use a Node installation
638
+ that supports TypeScript type stripping (Node 22.6+). Corepack runs the pnpm
639
+ version pinned in the workspace's `package.json`. The same
640
+ `VSCODE_MARKDOWN_EDITOR_E2E_BASE_PORT` override applies to both Tilt servers.
641
+
642
+ The multi-repository workspace also has a `Tiltfile` beside
643
+ `markdown-editor.code-workspace`. Run `tilt up` from that directory to see the
644
+ package resources and optional VS Code resources in one dashboard. From either
645
+ dashboard, enable `markdown-explorer` for the interactive Component Explorer
646
+ (port 5339), `explorer-demo` for its demo app (port 5174),
647
+ `markdown-package-watch`, or `team-tools-watch`. The `fixtures` resource above
648
+ is a built preview, not the interactive Component Explorer CLI server. Enabling
649
+ `markdown-explorer` requires stopping any separately launched Component
650
+ Explorer daemon for this same project first; Tilt will not terminate it.
651
+
652
+ In the multi-repository dashboard, `vscode-markdown-webview-watch` and
653
+ `vscode-client-watch` run watchers from the VS Code checkout, while
654
+ `vscode-explorer` serves its separate Component Explorer (port 5337).
655
+ `vscode-extension-host` builds Team Tools and launches Code - OSS with an
656
+ isolated profile, no built-in or installed extensions, and only the Team Tools
657
+ development extension. Disabling the resource closes that window, not other
658
+ VS Code instances. The VS Code checkout needs its own dependencies installed
659
+ before enabling its watchers or Component Explorer.