feat(json): swap raw textareas for a CodeMirror 6 JsonEditor

A new JsonEditor.vue component wraps CodeMirror 6 + lang-json with
line numbers, JSON syntax highlighting, bracket matching, code
folding, search (Ctrl+F), undo/redo, lint (red squiggle and gutter
icon on invalid JSON), tab indent, and line wrapping. It is wired
into the four raw-JSON spots that previously used <a-textarea
class="json-editor">: the Xray Advanced Template tab, the Outbound
JSON tab, the Balancer Observatory pane, and the Inbound Advanced
tab (settings / streamSettings / sniffing).

Chrome colors are driven by EditorView.theme so they win the
specificity fight cleanly against CodeMirror's own injected styles.
A single buildDarkTheme() factory yields a Dark+ palette (#1e1e1e
background, #252526 active line, #2d2d30 panels) for the regular
dark mode and a near-black variant (#0a0a0a / #141414 / #1f1f1f
border) for ultra-dark — both pair with oneDarkHighlightStyle for
the syntax colors. Light mode stays on basicSetup's default.

CodeMirror lazy-loads as a ~17 kB gzipped chunk that only appears
on the Xray/Inbounds bundles.
This commit is contained in:
MHSanaei
2026-05-14 00:02:59 +02:00
parent 18614bd6ea
commit ce4c42e09c
7 changed files with 701 additions and 82 deletions

View File

@@ -16,8 +16,11 @@
},
"dependencies": {
"@ant-design/icons-vue": "^7.0.1",
"@codemirror/lang-json": "^6.0.2",
"@codemirror/theme-one-dark": "^6.1.3",
"ant-design-vue": "^4.2.6",
"axios": "^1.7.9",
"codemirror": "^6.0.2",
"dayjs": "^1.11.20",
"otpauth": "^9.5.1",
"qs": "^6.13.1",