@barocss/math-editor 0.5.0 → 0.6.1

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 (49) hide show
  1. package/API-SESSION.md +25 -1
  2. package/CHANGELOG.md +48 -0
  3. package/CLIPBOARD.md +54 -0
  4. package/EDITING-SCENARIOS.md +55 -20
  5. package/GETTING-STARTED.md +54 -0
  6. package/IMPLEMENTATION.md +10 -0
  7. package/KEYBOARD.md +41 -0
  8. package/LATEX-GUIDE.md +30 -2
  9. package/README.md +52 -10
  10. package/RELEASING.md +22 -8
  11. package/ROADMAP.md +106 -1
  12. package/STYLING.md +28 -1
  13. package/TEXT-EDITORS.md +157 -0
  14. package/VALIDATION.md +102 -0
  15. package/dist/dom/caret-geometry.js +1 -1
  16. package/dist/dom/help.d.ts +5 -0
  17. package/dist/dom/help.js +104 -0
  18. package/dist/dom/menu-position.js +4 -3
  19. package/dist/dom/readable-layout.d.ts +3 -0
  20. package/dist/dom/readable-layout.js +52 -0
  21. package/dist/dom/toolbar-catalog.d.ts +1 -1
  22. package/dist/dom/toolbar.d.ts +2 -0
  23. package/dist/dom/toolbar.js +8 -1
  24. package/dist/dom.d.ts +11 -1
  25. package/dist/dom.js +138 -15
  26. package/dist/enter-policy.js +1 -1
  27. package/dist/lines.d.ts +2 -0
  28. package/dist/lines.js +15 -0
  29. package/dist/locales/en.js +21 -3
  30. package/dist/locales/en.json +21 -3
  31. package/dist/locales/ko.js +21 -3
  32. package/dist/locales/ko.json +21 -3
  33. package/dist/math-editor-toolbar.js +2 -1
  34. package/dist/math-editor.d.ts +1 -0
  35. package/dist/math-editor.js +135 -39
  36. package/dist/model.d.ts +2 -0
  37. package/dist/model.js +23 -1
  38. package/dist/range.d.ts +10 -2
  39. package/dist/range.js +31 -6
  40. package/dist/selection-shortcuts.d.ts +13 -0
  41. package/dist/selection-shortcuts.js +35 -0
  42. package/dist/session.d.ts +1 -0
  43. package/dist/session.js +1 -1
  44. package/dist/symbols.d.ts +1 -1
  45. package/dist/symbols.js +1 -0
  46. package/dist/vertical-navigation.d.ts +5 -0
  47. package/dist/vertical-navigation.js +33 -0
  48. package/package.json +1 -1
  49. package/src/style.css +227 -57
package/RELEASING.md CHANGED
@@ -4,12 +4,14 @@ See [Editing scenarios](EDITING-SCENARIOS.md) for stable scenario IDs, acceptanc
4
4
 
5
5
 
6
6
  The source stays in this monorepo. The local batch release includes
7
- `@barocss/math-editor` and the nine public host plugins. All use MIT, public npm
7
+ `@barocss/math-editor`, nine public rich-text plugins and four text packages
8
+ (`math-editor-text`, `math-editor-codemirror6`, `math-editor-codemirror5`,
9
+ `math-editor-monaco`, all under `@barocss`). All use MIT, public npm
8
10
  access and the `latest` tag. Framework adapters are core subpaths and share the
9
11
  core version. The private integration workspace and other products are excluded.
10
12
 
11
- The published baseline is core **0.4.0** and host plugins **0.1.0**. Later versions
12
- remain independent; a batch release does not force every package to change.
13
+ Versions remain independent; a batch release does not force every package to change.
14
+ VS Code is a separate VSIX/Marketplace release and is not published by this npm command.
13
15
 
14
16
  ## Local release
15
17
 
@@ -20,10 +22,10 @@ npm login --registry=https://registry.npmjs.org/
20
22
  pnpm release:math
21
23
  ```
22
24
 
23
- This one command runs release-tool tests, core formatting/type/unit checks,
24
- integration type/unit checks, builds and package validation. It verifies the core
25
+ This one command runs core formatting/type/unit checks,
26
+ integration type/unit checks, builds, package validation and release-tool tests. It verifies the core
25
27
  entry points and each plugin's packed declarations, runtime imports and required
26
- files. It then runs **one `pnpm -r publish` command** for the ten allowed names.
28
+ files. It then runs **one `pnpm -r publish` command** for the fourteen allowed names.
27
29
  `pnpm release` is an alias for this workflow.
28
30
 
29
31
  Only the inspected package contents enter a generated workspace under
@@ -42,7 +44,7 @@ guarantee one authentication prompt.
42
44
  For checks without publishing:
43
45
 
44
46
  ```sh
45
- # Build and inspect all ten packages. No registry publication.
47
+ # Build and inspect all fourteen packages. No registry publication.
46
48
  pnpm release:math:prepare
47
49
  # Also exercise recursive publishing with npm's dry-run flag.
48
50
  # This can read registry metadata; it does not upload packages.
@@ -62,10 +64,22 @@ Before releasing UI changes, also run `pnpm --filter @barocss/math-demo test:e2e
62
64
 
63
65
  1. Run `pnpm changeset`, select the affected math core and/or public plugins, and write a user-facing change summary.
64
66
  2. Use patch for compatible fixes and minor for features. During 0.x development, clearly identify breaking API changes in a minor release. Reserve 1.0.0 for the agreed stable API.
65
- 3. Run `pnpm version:math:plan` to preview the core and nine plugin versions. Run `pnpm version:math` to apply that plan. Changesets runs in a temporary math-only workspace and copies back only affected math manifests/changelogs. Unrelated product changesets remain untouched. Review plugin peer-range changes before publishing.
67
+ 3. Run `pnpm version:math:plan` to preview the core, nine rich-text plugin and four text-package versions. Run `pnpm version:math` to apply that plan. Changesets runs in a temporary math-only workspace and copies back only affected math manifests/changelogs. Unrelated product changesets remain untouched. Review plugin peer-range changes before publishing.
66
68
  4. Review and commit the version/changelog and any dependency/lockfile changes with the implementation. Run release validation, then publish locally.
67
69
  5. Record package-specific Git tags on the release commit, and update the site with the matching package version. The batch command does not create commits or tags.
68
70
 
71
+ The scoped Changesets configuration only promotes peer dependents when the new
72
+ version leaves their supported range. Widen a compatible peer range explicitly
73
+ and add a patch changeset; incompatible range changes still require release review.
74
+
75
+ Text tarballs are installed with the packed core into a temporary consumer using
76
+ `npm install --offline --ignore-scripts --legacy-peer-deps`. Host SDKs come from the
77
+ local installation. Strict public declaration checks and runtime import checks run
78
+ there. This validates package contents and local installation, not npm availability
79
+ or a fresh registry peer installation. Monaco interaction is covered by browser QA.
80
+ See [text editor validation](../../apps/math-text-demo/test/README.md) for native
81
+ IME and physical mobile checks that remain open.
82
+
69
83
  Versioning is separate from publishing. Repeating a publish command must not create
70
84
  another version. Avoid `pnpm version-packages` and unfiltered `pnpm -r publish`
71
85
  for a math-only release because they can include other products.
package/ROADMAP.md CHANGED
@@ -1,8 +1,91 @@
1
1
  # Math editor roadmap
2
2
 
3
- This roadmap describes priorities, not release promises. The current package is an independent editing prototype. Production integration requires the reliability work below even if additional notation is implemented first.
3
+ ## Learning and discoverability implemented, 2026-09-13
4
4
 
5
+ - Five interactive site exercises use their own field and validate normalized formula models: correction, fraction wrapping, power, root conversion and LaTeX insertion.
6
+ - Beginner, clipboard and keyboard guides are in the documentation navigation. Outdated claims that norms/integrals/brace annotations were still planned were removed from the LaTeX guide.
7
+ - Localized F1/toolbar help works in React and native fields, including toolbar-free inline. Closing restores native input selection. Custom controls can use `showHelp()`; separate native toolbars connect with `onHelp`.
8
+ - EDIT-035 and the extended 17-target host chain pass; see [validation](VALIDATION.md).
5
9
 
10
+ Possible later convenience work: configurable key bindings with host-conflict rules, and selection-only image export. These are not implemented by the help API. Prioritize demonstrated input problems and platform validation before adding more notation.
11
+
12
+ ## Completed milestone: reliable editing of supported notation — 2026-09-13
13
+
14
+ Complete an uninterrupted formula workflow: **input → select → wrap or transform → navigate → delete → copy/paste → undo/redo → save → reopen and edit**. The JSON tree, exported LaTeX, visible notation and active caret must agree at each relevant checkpoint.
15
+
16
+ This section defines the current work and its completion criteria. The dated records below are historical evidence; their old “next” and “awaiting release” statements do not define current priority or publication status. Dates describe verification runs, not release promises.
17
+
18
+ ### Starting baseline
19
+
20
+ - EDIT-019: 17 standalone/integration targets, 499 continuous-editing checkpoints.
21
+ - EDIT-033: 63 selection-shortcut cases, 510 checkpoints, including 21 comparisons of actual edited output with KaTeX.
22
+ - EDIT-034: React block and native DOM block/inline, 131 held-arrow checkpoints.
23
+ - Rendering: 91 formulas, 330 renderer/mode/size combinations. These are selected geometry checks, not complete pixel or behavior coverage.
24
+ - Core: 1,677 tests in 42 files at the latest recorded run.
25
+
26
+ See [validation](VALIDATION.md) and [editing scenarios](EDITING-SCENARIOS.md). The starting counts above are historical; the closure results below supersede them.
27
+
28
+ ### Execution order and bounded deliverables
29
+
30
+ All six batches are **complete for the environment and checks stated here**. The local gate passed 1,736 core tests, 113 editing cases / 4,311 checkpoints and 330 KaTeX comparisons. Strict type checks, core build and site/docs build passed. [Validation](VALIDATION.md) contains the per-suite evidence. The CI workflow is configured and its entry point passed locally; remote execution and publishing remain separate actions.
31
+
32
+ | Order | Batch | Scope | Completion check |
33
+ | --- | --- | --- | --- |
34
+ | 1 | Structure and grid deletion | EDIT-006/015: Backspace and Delete inside/outside empty and populated structures; selected ranges; matrix, cases and alignment rows/cells | Define the expected action before implementation. Preserve all content not explicitly deleted. One Undo restores the exact tree and a valid caret. Follow deletion with typing and Redo. |
35
+ | 2 | Range interchange | EDIT-007/015: text plus nested structures; copy, cut and paste within/across instances; matrix rectangles; supported LaTeX fallback; malformed and mismatched payloads | Preserve selected structure and unselected content. Cut is undoable. Rejected paste changes nothing. Distinguish controlled clipboard-event checks from actual system clipboard verification. |
36
+ | 3 | Lines and keyboard navigation | EDIT-012/013/016/034: line split/merge; cases/alignment row edits; matrix traversal; repeat keys; vertical movement; suggestion navigation | Preserve the preferred horizontal caret position across repeated vertical movement where geometry permits. Menus own their documented keys. Inline Enter follows the host contract and creates no formula line. |
37
+ | 4 | Selection and transformations | EDIT-002–005/021–033: direct wrapping, suggestion-based conversion, nearest nested target, Escape and continued input without a toolbar | Current supported transformations remain discoverable by keyboard. They preserve operands, use the intended slot and support one-step Undo. Do not add new notation as a prerequisite. |
38
+ | 5 | Host lifecycle | EDIT-008–011/018/019: extend current host chains with the completed operations; Apply/Cancel; storage reload; read-only; multiple instances; teardown | Draft operations do not modify stored host content. Apply creates one host history event where supported. Reopened formulas remain editable. Menus and listeners do not survive instance destruction. |
39
+ | 6 | Consolidated verification and release checks | Run the required suites on the same candidate source; update scenario status, support limits, docs and release notes; connect the required checks to CI | Checks fail on regressions or missing required results, retain reports/screenshots and work without a developer-specific absolute CLI path. No required in-scope scenario remains unrun or failed. Publishing is a separate action. |
40
+
41
+ For each batch: reproduce → specify the expected tree/caret → add a failing case → fix the shared behavior → compare editor/KaTeX → rerun affected scenarios → record evidence. Rerun the complete geometry set when shared layout rules change. Keep every discovered regression as a stable scenario.
42
+
43
+ ### Structure and visual comparison contract
44
+
45
+ 1. Cover every currently supported structure kind in the catalog with a populated edit and an empty-slot/boundary case where applicable. Shared structural families may share fixtures, but each catalog kind must map to coverage or an explicit non-applicable reason.
46
+ 2. Keep the existing catalog-driven parser/exporter combination checks. Add browser combinations by behavior: structure in a fraction slot, a script, a radical/fence, an operator bound, or a grid cell. Include repeated siblings, compound operands, mixed text/math and at least three nested structural levels. This is a finite representative matrix, not every possible expression.
47
+ 3. For changed flows, compare **the LaTeX produced by actual editing**, not only a separately imported formula. Verify the expected JSON structure independently; a visually correct preview cannot excuse lost or misplaced model content.
48
+ 4. Compare idle and focused states at 22px and 36px, with matching KaTeX display mode. Check baseline/relative positions, script and index size, fences/radicals, operator bounds, horizontal spacing, clipping and input-induced movement.
49
+ 5. Retain the existing metric thresholds: font difference ≤ 0.1px, relative vertical-center difference ≤ 0.25em, active-position change ≤ 0.2em, and horizontal difference ≤ 0.25em where comparable anchors are defined. These proxies are not complete glyph-ink measurements. Add a check when a visible defect is outside the measured anchors; do not relax thresholds to hide it.
50
+ 6. Review screenshots of changed notation. Reject obscured symbols, overlapping slots, clipped content or a position that suggests the wrong mathematical attachment, even if a measured probe passes. Record intentional differences for empty slots, focus backgrounds and caret hit areas. Exact pixel equality with KaTeX is not a milestone requirement.
51
+
52
+ Detailed comparison tables and screenshots stay in the source-only rendering ledger. Public guides describe supported behavior and limitations.
53
+
54
+ ### Environments included in this milestone
55
+
56
+ - Automated editing and visual acceptance: desktop Chromium on macOS, with the recorded browser and font versions.
57
+ - Core surfaces: React block and native DOM block/inline. Smoke-check Pure JS, Web Component, Vue, Svelte and Solid wrappers for focus, option updates, independent instances and teardown; shared DOM passes alone do not certify wrapper lifecycle.
58
+ - Existing host configurations: Tiptap, ProseMirror, Lexical, Quill, Slate, TinyMCE inline host and CKEditor ClassicEditor in their current block/inline math demos; Editor.js and Gutenberg standalone in block mode. Run the relevant chain in each host that supports the operation.
59
+ - Editor.js host history is not configured in the current demo. Formula history is required; do not count host Undo as passed. Gutenberg RichText inline math and additional host configurations are outside this scope.
60
+ - English/Korean labels and custom-locale fallback must remain valid. Include a narrow desktop container to check clipping and suggestion placement, without claiming touch support.
61
+
62
+ ### Closure rule
63
+
64
+ Close this milestone only when all six batches have executable coverage, the required checks pass on the candidate source, and no known in-scope content-loss, blocked-input, incorrect-structure or visual-attachment defect remains. Each result must identify its scenario, renderer/mode, source fingerprint and observed limitation. A test count alone is not completion evidence.
65
+
66
+ If a new defect is within this contract, fix and rerun before closure. If it requires a new notation family, platform or product, record it in the later queue instead of silently expanding the milestone. “Complete” refers to this bounded milestone, not all TeX or every device.
67
+
68
+ ### Subsequent milestones
69
+
70
+ | Next stage | Work deferred from the current milestone |
71
+ | --- | --- |
72
+ | Platform validation | Safari, Firefox, Windows Chromium, real Korean IME, actual OS/application clipboard exchange, touch/mobile input and screen-reader verification. The earlier deferral of real OS input testing remains explicit; synthetic checks do not replace it. |
73
+ | Library operating contract | Versioned JSON migration/recovery, measured document-size/depth and performance budgets, supported host-version policy and broader installed-host configurations such as TinyMCE iframe and WordPress admin. |
74
+ | Demand-led expansion | Additional LaTeX environments/style declarations, reviewed language packs, new editor integrations and optional radial suggestions. Require a concrete input/editing use case first. |
75
+
76
+ Full TeX documents, arbitrary macros/packages, symbolic computation, collaboration and a paper-writing service are separate products or projects. They are not required to finish this editor milestone.
77
+
78
+ ## Historical implementation records
79
+
80
+ The following entries preserve past decisions and dated evidence. Use the completed milestone and subsequent milestones above for current scope.
81
+
82
+ ## Direct selection shortcuts — workspace, 2026-09-13
83
+
84
+ Implemented immediate range wrapping for `(`, `[`, `{`, `|`, `/`, `^` and `_` in both renderers. Selection content, script/fraction caret placement and one-step Undo use the existing model operation. Other characters still replace selections. Unselected input and literal text retain their current behavior.
85
+
86
+ Validation: EDIT-033 passes 63 cases / 510 checkpoints; geometry passes 91 formulas / 330 combinations after correcting fraction sizing and spacing. EDIT-019 still passes 17 targets / 499 checkpoints.
87
+
88
+ EDIT-033 adds a repeatable browser suite for keyboard, native and dragged selections. VIS-080–093 add block/inline KaTeX position comparisons for the resulting formulas. Continue running editing and rendering checks together when shortcuts or notation change. Ambiguous keys such as `<` (relation, angle bracket, arrow prefix) and word commands such as `sqrt` remain suggestions.
6
89
 
7
90
  ## Current focus: continuous editing — workspace, 2026-09-10
8
91
 
@@ -404,3 +487,25 @@ punctuation and script comparisons at 22 px and 36 px in React and native DOM.
404
487
  Next: longer expressions, complete atom classification across structure wrappers,
405
488
  named-function boundaries, explicit spacing commands and browser font differences.
406
489
  The source-only rendering ledger records measured limits and remaining work.
490
+
491
+ ## Text editor integrations — 2026-09-13
492
+
493
+ - Implemented: optional direct LaTeX completion and caret preview for the three browser adapters; keyboard template navigation and source-preserving command insertion.
494
+ - Implemented: grouped Examples navigation and per-example installation, usage and guide links.
495
+ - Remaining: VS Code native source completion, wider platform/assistive-technology validation, and custom TeX dialect completion.
496
+
497
+ - Implemented: shared LaTeX source-range discovery and draft popup; separate CodeMirror 6, CodeMirror 5, and Monaco packages.
498
+ - Implemented: VS Code Edit Formula and Insert Formula commands, Webview UI, and VSIX build. VS Code 1.103.1 desktop command and Webview round-trip checks passed.
499
+ - Added: workspace-source examples, English/Korean popup messages, source conflict protection, unchanged-source preservation, and one-step host undo.
500
+ - Next: host syntax-tree resolvers for additional Markdown/TeX dialects, rebasing non-overlapping source edits, multi-caret policy, and broader VS Code platform QA.
501
+ - Separate project: typed WGSL/GLSL expression editing. No shader parser is used by these adapters.
502
+ - Publication: the four browser text packages are in the math release allowlist. The VS Code extension remains a separate release.
503
+
504
+ ## Editing readability and navigation — 2026-09-14
505
+
506
+ - Added a configurable 14px editing minimum and extra line space for raised scripts.
507
+ - Corrected fraction descendant sizes, nested fence alignment and radical geometry in scripts.
508
+ - Added lexical/structural movement and selection: Ctrl+arrows, or Option+arrows on macOS, with Shift to select.
509
+ - Added 100/125/150% visual text-popup zoom; default 125%, with a saved browser preference.
510
+ - Documented a 26px editing base and optional 16px minimum for complex formulas. Output size stays separate.
511
+ - Remaining: exact glyph contours/spacing, the full updated rendering audit, cross-editor suggestion dismissal, and wider browser/platform checks. Focused browser checks are recorded in the source rendering ledger; historical all-suite PASS results are not evidence for the new size policy.
package/STYLING.md CHANGED
@@ -49,11 +49,27 @@ Try the website's **Theme**, **Math size** and **Compact spacing** controls in t
49
49
 
50
50
  ## Public CSS variables
51
51
 
52
+ For complex fractions, start with a **26px editing base** instead of enlarging
53
+ only the numerator or denominator. Use a **16px minimum** if nested text remains
54
+ hard to read. Keep the KaTeX preview/export size separate from editing size:
55
+
56
+ ```css
57
+ .product-math {
58
+ --me-font-size: 26px;
59
+ --me-min-font-size: 16px;
60
+ }
61
+ ```
62
+
63
+ 복잡한 분수는 편집 기본 크기를 **26px**, 중첩 글자의 최소 크기를 **16px**로
64
+ 설정해 보세요. KaTeX 미리보기와 이미지 출력 크기는 앱에서 별도로 설정합니다.
65
+ 수식이 커지면 줄 높이도 늘어날 수 있도록 호스트 영역의 고정 높이를 피하세요.
66
+
52
67
  Unset variables preserve the existing default appearance. Some controls intentionally have slightly different default shades/radii; a supplied token unifies them. Set lengths such as the base font size in `px` or `rem` when the editor and its portal have different parents.
53
68
 
54
69
  | Variable | Controls | Default behavior |
55
70
  | --- | --- | --- |
56
71
  | `--me-font-size` | Base formula text and relative script sizes | `22px` in standalone editors |
72
+ | `--me-min-font-size` | Minimum editing glyph/input size, including nested fractions and scripts | `14px`; `0px` disables the floor |
57
73
  | `--me-ui-font-family` | Toolbars, menus and helper text | `system-ui, sans-serif` |
58
74
  | `--me-text` | UI text and neutral math glyphs | Dark green/gray |
59
75
  | `--me-muted` | Help text, line numbers, menu details | Muted gray/green |
@@ -85,7 +101,18 @@ Unset variables preserve the existing default appearance. Some controls intentio
85
101
  | `--me-menu-shadow` | Floating menu shadow | Soft dark shadow |
86
102
  | `--me-menu-z-index` | Suggestion menu stacking level | `1000` |
87
103
 
88
- Inline mode retains its content-driven minimum height. Explicit LaTeX sizing commands and specialty mathematical fonts retain their own metrics; the base-size token is not an image scaling API. Formula export/KaTeX rendering is owned by the consumer and does not inherit semantic editing colors automatically.
104
+ Inline mode retains its content-driven minimum height. The editor reserves extra line space when scripts extend beyond the row. The host must allow this height to grow instead of clipping the editor into a fixed-height line.
105
+
106
+ Nested math uses TeX size ratios with a readable `14px` floor. The same floor applies to glyphs, measuring spans and focused inputs, so fractions and fences grow with their contents. Explicit small LaTeX styles are also subject to this editing floor. To use a larger minimum:
107
+
108
+ ```css
109
+ .product-math {
110
+ --me-font-size: 22px;
111
+ --me-min-font-size: 16px;
112
+ }
113
+ ```
114
+
115
+ Set `--me-min-font-size: 0px` for unmodified TeX size ratios, for example in a typography comparison. Use a nonnegative length in `px` or `rem`. The floor changes editing layout only; it does not add sizing commands to LaTeX, change history, or enlarge suggestion menu labels. Formula export/KaTeX rendering is owned by the consumer and does not inherit this floor or semantic editing colors automatically. The base-size token is not an image scaling API.
89
116
 
90
117
  ## Dark and monochrome themes
91
118
 
@@ -0,0 +1,157 @@
1
+ # LaTeX editing in text editors
2
+
3
+ The browser text-editor adapters support a visual popup and optional LaTeX source completion with a formula preview. They do not replace the host's text model. WGSL and GLSL expression editing is a separate project.
4
+
5
+ ## Available implementations
6
+
7
+ | Package or extension | Editing surface | Lifecycle |
8
+ | --- | --- | --- |
9
+ | `@barocss/math-editor-text` | Shared range scanner and DOM popup | Explicit controller cleanup |
10
+ | `@barocss/math-editor-codemirror6` | Caret popup, Alt+Enter | CodeMirror 6 view plugin |
11
+ | `@barocss/math-editor-codemirror5` | Caret popup, Alt+Enter | Attachment with `destroy()` |
12
+ | `@barocss/math-editor-monaco` | Caret popup, Alt+Enter | Attachment and editor disposal |
13
+ | Barocss Math Editor for VS Code | Webview beside the document | VS Code extension lifecycle |
14
+
15
+ [Open the browser examples](../text-editors.html). The three examples import individual workspace packages directly from source. Published package exports target their own build artifacts. The new packages start at 0.1.0; npm and Marketplace publication are separate steps.
16
+
17
+ ## CodeMirror 6
18
+
19
+ ```sh
20
+ npm install @barocss/math-editor @barocss/math-editor-text @barocss/math-editor-codemirror6 @codemirror/state @codemirror/view @codemirror/commands
21
+ ```
22
+
23
+ ```ts
24
+ import { mathEditor } from '@barocss/math-editor-codemirror6';
25
+ import '@barocss/math-editor/style.css';
26
+ import '@barocss/math-editor-text/style.css';
27
+
28
+ // Add to your EditorState extensions alongside the host's history extension.
29
+ const extension = mathEditor({
30
+ locale: 'en',
31
+ syntax: 'markdown',
32
+ onError: message => { statusElement.textContent = message; },
33
+ });
34
+ ```
35
+
36
+ For CodeMirror 5 and Monaco, import `attachMathEditor` from the corresponding package and pass the host editor instance. The return value has `open()` and `destroy()`. CodeMirror 5 also has `refresh()`; call it after changing host options such as read-only mode. CodeMirror 6 exports the `openMathEditor(view)` command for custom controls. CodeMirror 5 uses its own package because its API differs from CodeMirror 6. Monaco applications retain their normal worker configuration.
37
+
38
+
39
+ ## Direct LaTeX input
40
+
41
+ [Try source completion](../text-editors.html?mode=source). Choose **LaTeX completion** on the example page. The visual popup remains the default for existing integrations.
42
+
43
+ Pass `sourceEditing` to the CodeMirror 5, CodeMirror 6, or Monaco adapter. An empty object enables completion without a preview. To show a preview, install KaTeX separately and supply a renderer:
44
+
45
+ ```sh
46
+ npm install katex
47
+ ```
48
+
49
+ ```ts
50
+ import katex from 'katex';
51
+ import 'katex/dist/katex.min.css';
52
+ import '@barocss/math-editor/style.css';
53
+ import '@barocss/math-editor-text/style.css';
54
+
55
+ const options = {
56
+ locale: 'en',
57
+ sourceEditing: {
58
+ renderPreview(latex, element, displayMode) {
59
+ katex.render(latex, element, {
60
+ displayMode,
61
+ throwOnError: true,
62
+ trust: false,
63
+ maxExpand: 1000,
64
+ });
65
+ },
66
+ },
67
+ };
68
+ // CodeMirror 6: mathEditor(options), included in EditorState extensions.
69
+ // CodeMirror 5 / Monaco: attachMathEditor(editor, options).
70
+ ```
71
+
72
+ | Action | Result |
73
+ | --- | --- |
74
+ | Type `\frac`, `\sqrt`, or another command inside a detected math range | Show localized catalog suggestions below the caret |
75
+ | Place the caret after `a`, `4ab`, or `x_i^2` | Offer fractions, roots, scripts and fences that retain the operand |
76
+ | Select a complete expression inside one math range | Preview the selection and offer source-preserving wrappers after drag release |
77
+ | Ctrl+Space inside a math range | Open the catalog without typing a command |
78
+ | Up / Down with suggestions open | Choose a candidate without moving the source caret |
79
+ | Enter or Tab after choosing a suggestion | Apply the selected command or operand wrapper and enter its next argument |
80
+ | Tab / Shift+Tab after insertion | Move through template arguments; this takes priority over operand wrapping suggestions |
81
+ | Tab after the last argument | Exit the inserted template |
82
+ | Escape | Dismiss source tools without changing source or collapsing its selection |
83
+ | Alt+Enter | Open the existing visual editor |
84
+
85
+ The preview sits above the caret when space permits. Incomplete syntax displays a short status instead of changing the source or blocking typing. The renderer is optional and is owned by the host. It must render only trusted UI; when using KaTeX, keep `trust: false` for document content.
86
+
87
+ Completion uses the math-editor catalog and serializer to create an **isolated insertion**. It does not parse or normalize the surrounding formula. For example, `\rightarrow` suggestions may insert the catalog's equivalent `\to ` spelling. A trailing space terminates a control word so it cannot absorb the following variable. Operand wrapping fills a catalog template with the original variable/number run and simple scripts, without reserializing the source. For example, `4ab` becomes `\frac{4ab}{}` and the caret enters the denominator. Existing-structure transformations remain visual-editor actions.
88
+
89
+ Automatic operand and selection menus do not preselect an action. Until you choose an item with Up/Down, Enter and Tab retain their normal host behavior. Typing a command or explicitly opening Ctrl+Space still preselects a completion.
90
+
91
+ Selection mode shows the selected source and keyboard hints in a fixed menu header. Up/Down keeps the native selection; Enter/Tab or a click wraps exactly that range. Shift+Arrow continues to adjust the selection. The shared core parser validates selected expressions without serializing them. Split command names, unbalanced groups, literal text, cross-formula selections and ordinary document text do not get math wrapping suggestions.
92
+
93
+ A position-aware lexical scan distinguishes command names, operand spans, comments, and braced text/environment names. Completing `\fr|ac{a}{b}` replaces the complete command name while preserving the arguments. Text and comments do not offer math wrappers. This is not a full TeX semantic parser: custom macros and arbitrary compound-expression boundaries are not inferred. Source mode accepts whitespace beside paired delimiters, including the trailing space inserted after a symbol command. The default visual-import scanner remains strict.
94
+
95
+ The shared dropdown keeps focus in the host and applies changes through the host edit/history API. It handles navigation keys only while its suggestions or template navigation are active. IME composition suspends suggestions. Read-only state, selection outside the math range, and host disposal remove the tools. Multi-caret completion, arbitrary TeX macro completion, and full snippet-language syntax are not supported. Argument navigation ends after leaving the template, undoing its insertion, or replacing across its argument boundaries.
96
+
97
+ `latexCompletions(query, locale)` is also exported from `@barocss/math-editor-text`. Each result includes `id`, `label`, `glyph`, `insert`, and UTF-16 `stops` relative to `insert`. A host can use this data in its own native completion provider instead of enabling the supplied dropdown. The `messages` option includes `suggestions`, `preview`, and `incomplete`; suggestion labels use the core locale catalog.
98
+
99
+ This source-completion mode applies to the three browser adapters. The VS Code extension currently retains its separate visual Webview workflow.
100
+
101
+ ## User workflow
102
+
103
+ 1. Place the caret within `$…$`, `$$…$$`, `\(…\)`, or `\[…\]`. Alternatively, select a bare LaTeX expression.
104
+ 2. Press Alt+Enter (Option+Enter on macOS) or click **Edit formula**.
105
+ 3. Edit the draft. Math suggestions and clipboard controls operate inside the popup.
106
+ 4. Apply to replace the formula contents. Cancel to preserve the original.
107
+ 5. Continue in the host text editor. Undo once to reverse the applied edit.
108
+
109
+ Opening the affordance never steals focus. An unchanged Apply does not normalize the original or add an undo entry. Changed formulas use the core serializer, which can normalize commands and whitespace inside the edited range. Existing dollar/backslash delimiters and surrounding prose remain intact. Leading/trailing whitespace inside the delimiters is preserved, including blank lines and indentation. For example, `$$\nx+1\n$$` becomes `$$\ny+1\n$$` after changing `x` to `y`. Newly serialized rows retain the source CRLF/LF convention; one-line display formulas remain one line.
110
+
111
+ While the popup is open, move the source caret to another formula to switch its contents. This does not take focus from the source editor. Moving outside math hides the popup; entering another formula shows it again. Unapplied drafts survive formula switches while the source version is unchanged. Apply changes only the current formula. If other drafts remain, Apply or Cancel first shows a warning. The explicit discard button finishes the session; returning to another formula keeps its draft. Repeated Enter/Escape does not confirm discarding.
112
+
113
+ ## Source safety and limitations
114
+
115
+ The default scanner skips ordinary Markdown code fences, inline code, indented code lines, and HTML comments. LaTeX mode skips percent line comments and common `\verb`, `verbatim`, `lstlisting`, and `minted` literal constructs. It supports a bounded set of equation, alignment, cases, and matrix environments. Detection is followed by the core LaTeX parser; unsupported syntax cannot overwrite the source. Complete environment ranges can be normalized when edited.
116
+
117
+ The scanner is not a full Markdown/TeX parser. Hosts with custom macros, custom literal environments, or nested Markdown containers should provide `resolveRange(source, selection)` using their syntax tree. A return value of `undefined` disables automatic fallback for that position. Source offsets are UTF-16 positions.
118
+
119
+ Any source edit or document switch invalidates an open draft, including edit-then-undo. External changes while editing in the popup still block Apply. Returning to the source caret reloads its current formula from the new source. Old-version drafts are not restored or rebased. Read-only documents reject Apply. Multiple selections are rejected. Multi-caret batch editing and concurrent-edit rebasing are not implemented.
120
+
121
+ ## Localization and styling
122
+
123
+ `locale` controls the math editor. The popup includes English and Korean dictionaries. `messages` overrides individual popup labels for additional locales. Register core locale messages separately for mathematical suggestions and controls.
124
+
125
+ The popup exposes `--me-text-background`, `--me-text-foreground`, `--me-text-border`, `--me-text-muted`, `--me-text-accent`, and `--me-text-on-accent`. Import both the core and text popup styles.
126
+
127
+ ## VS Code
128
+
129
+ The extension supplies **Barocss: Edit Formula** and **Barocss: Insert Formula**. It uses a Webview and the public VS Code document API, not the internal Monaco DOM. In Markdown and LaTeX documents, Alt+Enter opens editing; users can change that binding in VS Code.
130
+
131
+ Build and package from the workspace:
132
+
133
+ ```sh
134
+ pnpm --filter barocss-math-editor type-check
135
+ pnpm --filter barocss-math-editor package
136
+ ```
137
+
138
+ Install the generated VSIX through **Extensions: Install from VSIX**. Desktop Extension Host validation and Marketplace publication must be checked separately from browser adapter tests.
139
+
140
+ ## Validation scenarios
141
+
142
+ | Scenario | Expected result |
143
+ | --- | --- |
144
+ | Caret enters a formula | Edit affordance appears without taking focus |
145
+ | Apply `x` → `y` | Only the formula contents change |
146
+ | Undo / Redo | One host history step restores/reapplies the edit |
147
+ | Cancel | Original text and history remain unchanged |
148
+ | Apply unchanged draft | Exact original source remains |
149
+ | Source edited while popup is open | Conflict shown; newer source preserved |
150
+ | Unsupported command | Error shown; source preserved |
151
+ | Caret in Markdown code | No automatic formula popup |
152
+ | Read-only host | No source edit allowed |
153
+ | Host destroyed | Popup and listeners removed |
154
+
155
+ Browser scenario source: `apps/math-text-demo/test/editing.browser.js`. Range tests: `packages/math-editor-text/test/ranges.test.ts`.
156
+
157
+ When wrapping a compound source expression in an exponent, visible parentheses preserve its scope: selecting `a+b` inserts `{\left(a+b\right)}^{}`. A single variable, number, or already grouped structure does not receive redundant parentheses. Source text inside the base remains unchanged.
package/VALIDATION.md CHANGED
@@ -1,5 +1,88 @@
1
1
  # Validation report
2
2
 
3
+ ## Readability, geometry and navigation — release preparation, 2026-09-14
4
+
5
+ This candidate includes a configurable editing minimum, line clearance for
6
+ scripts, fraction descendant sizing, nested fence/radical fixes, token/structure
7
+ movement and selection, and visual text-popup zoom. The learning and styling
8
+ guides now recommend a 26px editing base for complex fractions, with a separate
9
+ preview/export size and an optional 16px nested minimum.
10
+
11
+ - Core regression checks: 1,743 unit tests passed; core and demo type checks passed.
12
+ - Focused browser checks: minimum-size editing, nested fences, script radicals,
13
+ keyboard movement/selection, and visual popup zoom. Detailed scope and limits
14
+ are recorded in the source-only records below.
15
+ - English/Korean site guidance explains the larger editing size. Public keyboard
16
+ help now documents Ctrl/Option movement and selection and the matrix column
17
+ deletion shortcut change.
18
+ - Historical full rendering and continuous-editing results below were obtained
19
+ before this candidate. They are not a fresh all-suite pass for the new size
20
+ policy. Exact curves/spacing and broader browser/platform QA remain open.
21
+ - This section records preparation, not npm publication or site deployment.
22
+
23
+ Source evidence: `test/rendering/STATUS.md`, `test/rendering/READABILITY.md`,
24
+ `test/editing/TOKEN-NAVIGATION.md`, and
25
+ `packages/math-editor-text/test/VISUAL-ZOOM.md` in the repository.
26
+
27
+ ## Learning and keyboard help — workspace, 2026-09-13
28
+
29
+ - EDIT-035: **4 results / 40 checkpoints passed**: five model-checked tutorial exercises, wrong-answer/reset/close behavior, unchanged playground, toolbar help, Korean labels, and F1 lifecycle on React block/native block/native inline. [Evidence](../../output/playwright/editing-scenarios/2026-09-13T12-33-34-456Z/REPORT.md).
30
+ - EDIT-019: **17 targets / 549 checkpoints passed**, including F1/Escape before the full continuous editing and host persistence chain. [Evidence](../../output/playwright/editing-scenarios/2026-09-13T12-31-33-614Z/REPORT.md).
31
+ - Core: **1,736 tests / 43 files**, core/demo type checks, package build and site build passed.
32
+ - Rendering: **330 PASS / 0 DIFF / 0 ERROR**, source stable. [Gallery](../../output/playwright/rendering-audit/2026-09-13T12-31-34-393Z/GALLERY.html). The new styles target help and the tutorial; mathematical geometry thresholds are unchanged.
33
+
34
+ The first toolbar-help check exposed native selection collapse after closing help; selection restoration now passes immediate wrapping and continued input. A separate toolbar now uses explicit `onHelp` ownership instead of guessing a target field. The tutorial's LaTeX readout is not an extra live status region. English semantic locale-key checks pass.
35
+
36
+ The consolidated CI entry point now includes the learning suite. These are local Chromium/macOS results. Actual OS F1/Fn routing, screen readers and system clipboard exchange remain unverified. No npm/site publication was performed.
37
+
38
+ ## Supported-notation editing milestone — workspace, 2026-09-13
39
+
40
+ The bounded milestone in [the roadmap](ROADMAP.md) passed its local gate. This is a workspace result; no package version or publication status changed.
41
+
42
+ - Core: **1,736 tests in 43 files**, strict core and browser-fixture type checks, and package build passed.
43
+ - Editing: **113 cases / 4,311 checkpoints** across 11 suites. All suites used identical source fingerprints, which still matched the candidate after execution.
44
+ - Rendering: **91 formulas / 330 PASS, 0 DIFF, 0 ERROR**. Existing thresholds were retained. Rendering sources matched the editing candidate. Twenty-one direct-shortcut cases also compare actual edited output with KaTeX.
45
+ - Main site/docs production build passed. The repository-owned runner and CI workflow use `node scripts/check-math-editor.mjs`. Workflow YAML and runner syntax passed; remote GitHub Actions execution is not claimed.
46
+
47
+ | Suite | Cases | Checkpoints | Result |
48
+ | --- | ---: | ---: | --- |
49
+ | EDIT-006 | 3 | 2766 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T11-56-52-074Z/REPORT.md) |
50
+ | EDIT-007 | 4 | 76 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T11-57-55-776Z/REPORT.md) |
51
+ | EDIT-013 | 2 | 10 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T11-58-09-267Z/REPORT.md) |
52
+ | EDIT-016 | 2 | 28 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T11-58-21-145Z/REPORT.md) |
53
+ | EDIT-018 | 8 | 60 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T11-58-33-699Z/REPORT.md) |
54
+ | EDIT-018-options | 5 | 30 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T11-58-46-765Z/REPORT.md) |
55
+ | EDIT-017-narrow | 3 | 12 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T11-58-58-829Z/REPORT.md) |
56
+ | EDIT-029 | 3 | 156 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T11-59-12-733Z/REPORT.md) |
57
+ | EDIT-034 | 3 | 131 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T11-59-30-658Z/REPORT.md) |
58
+ | EDIT-033 | 63 | 510 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T11-59-45-550Z/REPORT.md) |
59
+ | EDIT-019 | 17 | 532 | [PASS](../../output/playwright/editing-scenarios/2026-09-13T12-00-17-841Z/REPORT.md) |
60
+
61
+ [Consolidated evidence](../../output/playwright/math-editor-milestone/2026-09-13/REPORT.md) · [Rendering gallery](../../output/playwright/rendering-audit/2026-09-13T12-01-09-133Z/GALLERY.html)
62
+
63
+ Corrections include forward structure deletion, joining the following line, preferred vertical column retention, malformed clipboard rejection, multiline-paste rejection in React single-line fields, consistent Shift+Enter behavior and horizontal scrolling inside narrow inline hosts. English and Korean include the new invalid-clipboard message.
64
+
65
+ Clipboard checks use controlled ClipboardEvents/DataTransfer. Read-only is toggled without pointer blur to isolate the host state transition; clicking outside may intentionally apply a draft first. Editor.js data is checked after re-enabling because it cannot save while read-only. Its demo has no host Undo integration. Svelte option updates use its action API; the framework sample also covers actual Svelte mount/unmount.
66
+
67
+ Scope is desktop Chromium 152 on macOS with KaTeX 0.16.28. Safari, Firefox, Windows, real OS IME/clipboard, touch, screen readers, TinyMCE iframe and an installed WordPress admin are separate validation work. Geometry uses selected anchors and screenshot review, not complete pixel equality.
68
+
69
+ ## Held arrow navigation — workspace validation, 2026-09-13
70
+
71
+ - React and native DOM now read the live input selection before keydown handling. Delayed selection events no longer leave token/slot boundary checks one key repeat behind.
72
+ - EDIT-034: 3 renderer/mode targets passed 131 checkpoints with repeated keydown and one final keyup. Both horizontal directions, fraction slots, held Shift selection, collapse, continued input and Undo are covered.
73
+ - EDIT-033: 63 cases / 510 checkpoints passed, including 21 actual edited-output comparisons with KaTeX.
74
+ - EDIT-019: all 17 standalone/integration targets passed 499 continuous editing checkpoints.
75
+ - Core: 1,677 tests / 42 files, type checking and package build passed. Evidence is linked from the source-only editing test README. This change is not published yet.
76
+
77
+ ## Selection shortcuts — workspace validation, 2026-09-13
78
+
79
+ - Core: 1,677 tests / 42 files passed; type checking passed.
80
+ - EDIT-033: 63 cases / 510 checkpoints passed in Chromium. React block and native DOM block/inline each cover keyboard, native input and dragged selections, seven wrapping keys, continued typing and Undo/Redo.
81
+ - Geometry: 91 formulas / 330 combinations passed after fixing fraction term sizing and spacing. The same thresholds apply.
82
+ - Twenty-one keyboard cases also compare the actual edited output with KaTeX using the existing font-size and vertical-position thresholds.
83
+ - EDIT-019: all 17 standalone/integration targets passed 499 continuous editing checkpoints after the layout correction.
84
+ - Browser artifacts and measured rendering limits remain in the source-only editing/rendering ledgers. OS IME, other browser engines and the previously excluded host configurations remain separate work.
85
+
3
86
  ## Inline fence transformation suggestions — workspace, 2026-09-09
4
87
 
5
88
  Core: **584 tests in 36 files passed**. Core type checking and the main site/docs
@@ -698,3 +781,22 @@ This is local Chromium evidence. OS IME, Safari/Firefox, installed WordPress and
698
781
  collaboration, native OS IME/clipboard, Firefox/WebKit, touch, accessibility
699
782
  and performance remain separate targets. Editor.js/Gutenberg are block tools;
700
783
  no inline mode is claimed for them.
784
+
785
+ ## Text editor integrations — 2026-09-13
786
+
787
+ - Source-range tests: 31 passing cases (`packages/math-editor-text/test/ranges.test.ts`).
788
+ - macOS Chromium browser adapters: 52 passing checkpoints across CodeMirror 6, CodeMirror 5, and Monaco. Includes nested root editing, display Enter, read-only changes, conflicting source, unsupported syntax, code exclusion, and Korean popup labels.
789
+ - VS Code 1.103.1 Extension Host: four command-opening checks and eight Webview Apply/Cancel/Undo/Redo checks across Markdown and LaTeX. A disposable copy uses a test-only DOM input driver; no test driver ships in the VSIX.
790
+ - Evidence: `output/playwright/math-text/`. Browser script: `apps/math-text-demo/test/editing.browser.js`. VS Code runner: `pnpm --filter barocss-math-editor test:extension`.
791
+ - Remaining coverage: Firefox/Safari, Windows/Linux shortcuts, screen readers, VS Code web/remote hosts, and custom Markdown/TeX dialect resolvers.
792
+
793
+ ## Direct source completion and example guides — 2026-09-13
794
+
795
+ - Shared source unit coverage: 37 passing checks, including range detection, fraction/root argument positions, rectangular matrices, symbol aliases, canonical export spellings and localized completion labels.
796
+ - Browser source completion: 42 checks across CodeMirror 5, CodeMirror 6 and Monaco. Covers command-only replacement, focus retention, one-step Undo/Redo, forward argument navigation, scrolling, explicit catalog opening, incomplete source, read-only state and visual-popup fallback.
797
+ - Additional source layout checks: 9 across the three hosts, covering indexed roots, reverse argument navigation, KaTeX preview placement and composition-event suspension. Synthetic composition events test gating; this is not a complete OS IME certification.
798
+ - Existing visual-popup browser suite: 52 checkpoints still pass.
799
+ - Example guides: 12 pages, including all nine document editors, with installation instructions and links checked against rendered HTML documentation.
800
+ - Text packages, main site and integration site build successfully. Main and integration bundles retain existing large-chunk warnings.
801
+ - Scripts: `apps/math-text-demo/test/source.browser.js`, `source-layout.browser.js`, `example-guides.browser.js`. Evidence is under `output/playwright/math-text/`.
802
+ - This does not establish Firefox/Safari, Windows/Linux, screen-reader or VS Code source-completion support. No npm or site publication was performed for this change.
@@ -21,7 +21,7 @@ export function renderedCaretGeometry(surface) {
21
21
  ? affinity === 'forward'
22
22
  ? candidates.at(-1)
23
23
  : candidates[0]
24
- : candidates.find((item) => item.querySelector('.me-input')) ?? candidates[0];
24
+ : (candidates.find((item) => item.querySelector('.me-input')) ?? candidates[0]);
25
25
  const mirror = run?.querySelector('.me-measure');
26
26
  if (!run || !mirror)
27
27
  return;
@@ -0,0 +1,5 @@
1
+ import { type MathLocale } from '../i18n.js';
2
+ /** Route a toolbar request to its owning field, including fields inside an iframe. */
3
+ export declare function requestMathHelp(control: HTMLElement): void;
4
+ /** Shared help UI. It does not execute model commands or read the clipboard. */
5
+ export declare function attachMathHelp(root: HTMLElement, locale: () => MathLocale): () => void;