Replace Monaco with CodeMirror (#36764)

- Replace monaco-editor with CodeMirror 6 - Add `--color-syntax-*` CSS variables for all syntax token types, shared by CodeMirror, Chroma and EasyMDE - Consolidate chroma CSS into a single theme-independent file (`modules/chroma.css`) - Syntax colors in the code editor now match the code view and light/dark themes - Code editor is now 12px instead of 14px font size to match code view and GitHub - Use a global style for kbd elements - When editing existing files, focus will be on codemirror instead of filename input. - Keyboard shortcuts are roughtly the same as VSCode - Add a "Find" button, useful for mobile - Add context menu similar to Monaco - Add a command palette (Ctrl/Cmd+Shift+P or F1) or via button - Add clickable URLs via Ctrl/Cmd+click - Add e2e test for the code editor - Remove `window.codeEditors` global - The main missing Monaco features are hover types and semantic rename but these were not fully working because monaco operated only on single files and only for JS/TS/HTML/CSS/JSON. | | Monaco (main) | CodeMirror (cm) | Delta | |---|---|---|---| | **Build time** | 7.8s | 5.3s | **-32%** | | **JS output** | 25 MB | 14 MB | **-44%** | | **CSS output** | 1.2 MB | 1012 KB | **-17%** | | **Total (no maps)** | 23.3 MB | 12.1 MB | **-48%** | Fixes: #36311 Fixes: #14776 Fixes: #12171 <img width="1333" height="555" alt="image" src="https://github.com/user-attachments/assets/f0fe3a28-1ed9-4f22-bf25-2b161501d7ce" /> --------- Signed-off-by: silverwind <me@silverwind.io> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2026-03-31 23:50:45 +02:00
parent 4747dd68bd
commit e2e8509239
48 changed files with 2590 additions and 766 deletions
@@ -12,12 +12,13 @@
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
-  /* line-height: use the default value as "modules/normalize.css" */
-  --line-height-default: normal;
+  --line-height-default: normal; /* line-height: use the default value as "modules/normalize.css" */
+  --line-height-code: 20px; /* line-height for code, also used by the editor */
  /* images */
  --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9"><path fill-rule="evenodd" d="M11.78.22a.75.75 0 0 1 0 1.061L4.52 8.541a.75.75 0 0 1-1.062 0L.202 5.285a.75.75 0 0 1 1.061-1.061l2.725 2.723L10.718.22a.75.75 0 0 1 1.062 0"/></svg>');
  --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" viewBox="0 0 10 2"><path fill-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>');
  --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
+  --octicon-x: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.75.75 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.75.75 0 0 1-.734-.215L8 9.06l-3.22 3.22a.75.75 0 0 1-1.042-.018.75.75 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06"/></svg>');
  --select-arrows: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427m0-1.957L7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426"/></svg>');
  /* other variables */
  --border-radius: 4px;
@@ -43,6 +44,7 @@
  --gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */

  --background-view-image: repeating-conic-gradient(var(--color-transparency-grid-dark) 0 25%, var(--color-transparency-grid-light) 0 50%) 0 0 / 18px 18px;
+  --box-shadow-kbd: inset 0 -1px 0 var(--color-secondary);
 }

@media (min-width: 768px) and (max-width: 1200px) {
@@ -99,7 +101,6 @@ samp {

 pre,
 code,
-kbd,
 samp,
 .tw-font-mono {
  font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */
@@ -322,6 +323,8 @@ a.label,
 .native-select > select {
  appearance: none; /* hide default triangle */
  padding: 6px 26px 6px 10px;
+  border: 1px solid var(--color-light-border) !important;
+  color: var(--color-text);
  border-radius: var(--border-radius);
 }

@@ -672,7 +675,7 @@ overflow-menu .ui.label {

 .lines-num span::after {
  content: attr(data-line-number);
-  line-height: 20px !important;
+  line-height: var(--line-height-code) !important;
  padding: 0 10px;
  display: block;
 }
@@ -686,7 +689,7 @@ overflow-menu .ui.label {
 .lines-code {
  font-size: 12px;
  font-family: var(--fonts-monospace);
-  line-height: 20px;
+  line-height: var(--line-height-code);
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: top;
@@ -743,7 +746,7 @@ overflow-menu .ui.label {
  width: min(26vw, 300px);
  display: block;
  padding: 0 0 0 6px;
-  line-height: 20px;
+  line-height: var(--line-height-code);
  box-sizing: content-box;
 }

@@ -1,46 +0,0 @@
-/* LineTableTD */
-.chroma .lntd {
-  vertical-align: top;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-/* LineTable */
-.chroma .lntable {
-  border-spacing: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  width: auto;
-  overflow: auto;
-  display: block;
-}
-
-/* LineHighlight */
-.chroma .hl {
-  display: block;
-  width: 100%;
-}
-
-/* LineNumbersTable */
-.chroma .lnt {
-  margin-right: 0.4em;
-  padding: 0 0.4em;
-}
-
-/* LineNumbers */
-.chroma .ln {
-  margin-right: 0.4em;
-  padding: 0 0.4em;
-}
-
-/* GenericStrong */
-.chroma .gs {
-  font-weight: var(--font-weight-semibold);
-}
-
-/* GenericUnderline */
-.chroma .gl {
-  text-decoration: underline;
-}
@@ -1,76 +0,0 @@
-/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */
-.chroma .bp { color: #fabd2f; } /* NameBuiltinPseudo */
-.chroma .c { color: #777e94; } /* Comment */
-.chroma .c1 { color: #777e94; } /* CommentSingle */
-.chroma .ch { color: #777e94; } /* CommentHashbang */
-.chroma .cm { color: #777e94; } /* CommentMultiline */
-.chroma .cp { color: #8ec07c; } /* CommentPreproc */
-.chroma .cpf { color: #649bc4; } /* CommentPreprocFile */
-.chroma .cs { color: #9075cd; } /* CommentSpecial */
-.chroma .dl { color: #649bc4; } /* LiteralStringDelimiter */
-.chroma .fm {} /* NameFunctionMagic */
-.chroma .g {} /* Generic */
-.chroma .gd { color: #ffffff; background-color: #5f3737; } /* GenericDeleted */
-.chroma .ge { color: #ddee30; } /* GenericEmph */
-.chroma .gh { color: #ffaa10; } /* GenericHeading */
-.chroma .gi { color: #ffffff; background-color: #3a523a; } /* GenericInserted */
-.chroma .gl {} /* GenericUnderline */
-.chroma .go { color: #777e94; } /* GenericOutput */
-.chroma .gp { color: #ebdbb2; } /* GenericPrompt */
-.chroma .gr { color: #ff4433; } /* GenericError */
-.chroma .gs { color: #ebdbb2; } /* GenericStrong */
-.chroma .gt { color: #ff7540; } /* GenericTraceback */
-.chroma .gu { color: #b8bb26; } /* GenericSubheading */
-.chroma .il { color: #649bc4; } /* LiteralNumberIntegerLong */
-.chroma .k { color: #ff7540; } /* Keyword */
-.chroma .kc { color: #649bc4; } /* KeywordConstant */
-.chroma .kd { color: #ff7540; } /* KeywordDeclaration */
-.chroma .kn { color: #ffaa10; } /* KeywordNamespace */
-.chroma .kp { color: #5f8700; } /* KeywordPseudo */
-.chroma .kr { color: #ff7540; } /* KeywordReserved */
-.chroma .kt { color: #ff7b72; } /* KeywordType */
-.chroma .l {} /* Literal */
-.chroma .ld {} /* LiteralDate */
-.chroma .m { color: #649bc4; } /* LiteralNumber */
-.chroma .mb { color: #649bc4; } /* LiteralNumberBin */
-.chroma .mf { color: #649bc4; } /* LiteralNumberFloat */
-.chroma .mh { color: #649bc4; } /* LiteralNumberHex */
-.chroma .mi { color: #649bc4; } /* LiteralNumberInteger */
-.chroma .mo { color: #649bc4; } /* LiteralNumberOct */
-.chroma .n { color: #c9d1d9; } /* Name */
-.chroma .na { color: #fabd2f; } /* NameAttribute */
-.chroma .nb { color: #fabd2f; } /* NameBuiltin */
-.chroma .nc { color: #ffaa10; } /* NameClass */
-.chroma .nd { color: #8ec07c; } /* NameDecorator */
-.chroma .ne { color: #ff7540; } /* NameException */
-.chroma .nf { color: #fabd2f; } /* NameFunction */
-.chroma .ni { color: #fabd2f; } /* NameEntity */
-.chroma .nl { color: #ff7540; } /* NameLabel */
-.chroma .nn { color: #c9d1d9; } /* NameNamespace */
-.chroma .no { color: #649bc4; } /* NameConstant */
-.chroma .nt { color: #ff7540; } /* NameTag */
-.chroma .nv { color: #ebdbb2; } /* NameVariable */
-.chroma .nx { color: #b6bac5; } /* NameOther */
-.chroma .o { color: #ff7540; } /* Operator */
-.chroma .ow { color: #5f8700; } /* OperatorWord */
-.chroma .p { color: #d2d4db; } /* Punctuation */
-.chroma .py {} /* NameProperty */
-.chroma .s { color: #b8bb26; } /* LiteralString */
-.chroma .s1 { color: #b8bb26; } /* LiteralStringSingle */
-.chroma .s2 { color: #b8bb26; } /* LiteralStringDouble */
-.chroma .sa { color: #ffaa10; } /* LiteralStringAffix */
-.chroma .sb { color: #b8bb26; } /* LiteralStringBacktick */
-.chroma .sc { color: #ffaa10; } /* LiteralStringChar */
-.chroma .sd { color: #b8bb26; } /* LiteralStringDoc */
-.chroma .se { color: #ff8540; } /* LiteralStringEscape */
-.chroma .sh { color: #b8bb26; } /* LiteralStringHeredoc */
-.chroma .si { color: #ffaa10; } /* LiteralStringInterpol */
-.chroma .sr { color: #9075cd; } /* LiteralStringRegex */
-.chroma .ss { color: #ff8540; } /* LiteralStringSymbol */
-.chroma .sx { color: #ffaa10; } /* LiteralStringOther */
-.chroma .vc { color: #649bee; } /* NameVariableClass */
-.chroma .vg { color: #649bee; } /* NameVariableGlobal */
-.chroma .vi { color: #649bee; } /* NameVariableInstance */
-.chroma .vm {} /* NameVariableMagic */
-.chroma .w { color: #7f8699; } /* TextWhitespace */
-.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */
@@ -1,76 +0,0 @@
-/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */
-.chroma .bp { color: #999999; } /* NameBuiltinPseudo */
-.chroma .c { color: #6a737d; } /* Comment */
-.chroma .c1 { color: #6a737d; } /* CommentSingle */
-.chroma .ch { color: #6a737d; } /* CommentHashbang */
-.chroma .cm { color: #999988; } /* CommentMultiline */
-.chroma .cp { color: #109295; } /* CommentPreproc */
-.chroma .cpf { color: #4c4dbc; } /* CommentPreprocFile */
-.chroma .cs { color: #999999; } /* CommentSpecial */
-.chroma .dl { color: #106303; } /* LiteralStringDelimiter */
-.chroma .fm {} /* NameFunctionMagic */
-.chroma .g {} /* Generic */
-.chroma .gd { color: #000000; background-color: #ffdddd; } /* GenericDeleted */
-.chroma .ge { color: #000000; } /* GenericEmph */
-.chroma .gh { color: #999999; } /* GenericHeading */
-.chroma .gi { color: #000000; background-color: #ddffdd; } /* GenericInserted */
-.chroma .gl {} /* GenericUnderline */
-.chroma .go { color: #888888; } /* GenericOutput */
-.chroma .gp { color: #555555; } /* GenericPrompt */
-.chroma .gr { color: #aa0000; } /* GenericError */
-.chroma .gs {} /* GenericStrong */
-.chroma .gt { color: #aa0000; } /* GenericTraceback */
-.chroma .gu { color: #aaaaaa; } /* GenericSubheading */
-.chroma .il { color: #009999; } /* LiteralNumberIntegerLong */
-.chroma .k { color: #d73a49; } /* Keyword */
-.chroma .kc { color: #d73a49; } /* KeywordConstant */
-.chroma .kd { color: #d73a49; } /* KeywordDeclaration */
-.chroma .kn { color: #d73a49; } /* KeywordNamespace */
-.chroma .kp { color: #d73a49; } /* KeywordPseudo */
-.chroma .kr { color: #d73a49; } /* KeywordReserved */
-.chroma .kt { color: #445588; } /* KeywordType */
-.chroma .l {} /* Literal */
-.chroma .ld {} /* LiteralDate */
-.chroma .m { color: #009999; } /* LiteralNumber */
-.chroma .mb { color: #009999; } /* LiteralNumberBin */
-.chroma .mf { color: #009999; } /* LiteralNumberFloat */
-.chroma .mh { color: #009999; } /* LiteralNumberHex */
-.chroma .mi { color: #009999; } /* LiteralNumberInteger */
-.chroma .mo { color: #009999; } /* LiteralNumberOct */
-.chroma .n {} /* Name */
-.chroma .na { color: #d73a49; } /* NameAttribute */
-.chroma .nb { color: #005cc5; } /* NameBuiltin */
-.chroma .nc { color: #445588; } /* NameClass */
-.chroma .nd { color: #3c5d5d; } /* NameDecorator */
-.chroma .ne { color: #990000; } /* NameException */
-.chroma .nf { color: #005cc5; } /* NameFunction */
-.chroma .ni { color: #6f42c1; } /* NameEntity */
-.chroma .nl { color: #990000; } /* NameLabel */
-.chroma .nn { color: #555555; } /* NameNamespace */
-.chroma .no { color: #008080; } /* NameConstant */
-.chroma .nt { color: #22863a; } /* NameTag */
-.chroma .nv { color: #008080; } /* NameVariable */
-.chroma .nx { color: #24292e; } /* NameOther */
-.chroma .o { color: #d73a49; } /* Operator */
-.chroma .ow { color: #d73a49; } /* OperatorWord */
-.chroma .p {} /* Punctuation */
-.chroma .py {} /* NameProperty */
-.chroma .s { color: #106303; } /* LiteralString */
-.chroma .s1 { color: #106303; } /* LiteralStringSingle */
-.chroma .s2 { color: #106303; } /* LiteralStringDouble */
-.chroma .sa { color: #cc7a00; } /* LiteralStringAffix */
-.chroma .sb { color: #106303; } /* LiteralStringBacktick */
-.chroma .sc { color: #cc7a00; } /* LiteralStringChar */
-.chroma .sd { color: #106303; } /* LiteralStringDoc */
-.chroma .se { color: #994400; } /* LiteralStringEscape */
-.chroma .sh { color: #106303; } /* LiteralStringHeredoc */
-.chroma .si { color: #cc7a00; } /* LiteralStringInterpol */
-.chroma .sr { color: #4c4dbc; } /* LiteralStringRegex */
-.chroma .ss { color: #994400; } /* LiteralStringSymbol */
-.chroma .sx { color: #106303; } /* LiteralStringOther */
-.chroma .vc { color: #008080; } /* NameVariableClass */
-.chroma .vg { color: #008080; } /* NameVariableGlobal */
-.chroma .vi { color: #008080; } /* NameVariableInstance */
-.chroma .vm {} /* NameVariableMagic */
-.chroma .w { color: #bbbbbb; } /* TextWhitespace */
-.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */
@@ -1,106 +0,0 @@
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-property,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-property {
-  color: #a0cc75;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-header,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-header {
-  color: #9daccc;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-quote,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-quote {
-  color: #009900;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-keyword,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-keyword {
-  color: #cc8a61;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-atom,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-atom {
-  color: #ef5e77;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-number,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-number {
-  color: #ff5656;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-def,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-def {
-  color: #e4e4e4;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-variable-2,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-variable-2 {
-  color: #00bdbf;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-variable-3,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-variable-3 {
-  color: #008855;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-comment,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-comment {
-  color: #8e9ab3;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-string,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-string {
-  color: #a77272;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-string-2,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-string-2 {
-  color: #ff5500;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-meta,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-meta,
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-qualifier,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-qualifier {
-  color: #ffb176;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-builtin,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-builtin {
-  color: #b7c951;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-bracket,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-bracket {
-  color: #999977;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-tag,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-tag {
-  color: #f1d273;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-attribute,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-attribute {
-  color: #bfcc70;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-hr,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-hr {
-  color: #999999;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-url,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-url {
-  color: #c5cfd0;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-link,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-link {
-  color: #d8c792;
-}
-
-.EasyMDEContainer .CodeMirror.cm-s-default .cm-error,
-.EasyMDEContainer .CodeMirror.cm-s-paper .cm-error {
-  color: #dbdbeb;
-}
@@ -1 +0,0 @@
-/* Placeholder, there is no light theme, it uses CM defaults */
@@ -440,3 +440,26 @@
  border: 1px solid var(--color-secondary);
  padding: 5px;
 }
+
+.EasyMDEContainer .CodeMirror .cm-keyword { color: var(--color-syntax-keyword); }
+.EasyMDEContainer .CodeMirror .cm-atom { color: var(--color-syntax-keyword); }
+.EasyMDEContainer .CodeMirror .cm-number { color: var(--color-syntax-number); }
+.EasyMDEContainer .CodeMirror .cm-def { color: var(--color-syntax-name); }
+.EasyMDEContainer .CodeMirror .cm-variable-2 { color: var(--color-syntax-name); }
+.EasyMDEContainer .CodeMirror .cm-variable-3 { color: var(--color-syntax-type); }
+.EasyMDEContainer .CodeMirror .cm-property { color: var(--color-syntax-name); }
+.EasyMDEContainer .CodeMirror .cm-comment { color: var(--color-syntax-comment); }
+.EasyMDEContainer .CodeMirror .cm-string { color: var(--color-syntax-string); }
+.EasyMDEContainer .CodeMirror .cm-string-2 { color: var(--color-syntax-regexp); }
+.EasyMDEContainer .CodeMirror .cm-meta { color: var(--color-syntax-control); }
+.EasyMDEContainer .CodeMirror .cm-qualifier { color: var(--color-syntax-control); }
+.EasyMDEContainer .CodeMirror .cm-builtin { color: var(--color-syntax-keyword); }
+.EasyMDEContainer .CodeMirror .cm-bracket { color: var(--color-syntax-operator); }
+.EasyMDEContainer .CodeMirror .cm-tag { color: var(--color-syntax-type); }
+.EasyMDEContainer .CodeMirror .cm-attribute { color: var(--color-syntax-name); }
+.EasyMDEContainer .CodeMirror .cm-header { color: var(--color-syntax-type); }
+.EasyMDEContainer .CodeMirror .cm-quote { color: var(--color-syntax-comment); }
+.EasyMDEContainer .CodeMirror .cm-hr { color: var(--color-syntax-operator); }
+.EasyMDEContainer .CodeMirror .cm-url { color: var(--color-syntax-link); }
+.EasyMDEContainer .CodeMirror .cm-link { color: var(--color-syntax-link); }
+.EasyMDEContainer .CodeMirror .cm-error { color: var(--color-syntax-invalid); }
@@ -1,47 +0,0 @@
-.editor-loading {
-  padding: 1rem;
-  text-align: center;
-}
-
-.monaco-editor-container,
-.editor-loading.is-loading {
-  width: 100%;
-  min-height: 200px;
-  height: 90vh;
-}
-
-.edit.githook .monaco-editor-container {
-  border: 1px solid var(--color-secondary);
-  height: 70vh;
-}
-
-/* overwrite conflicting styles from fomantic */
-.monaco-editor-container .inputarea {
-  min-height: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  resize: none !important;
-  border: none !important;
-  color: transparent !important;
-  background-color: transparent !important;
-}
-
-.monaco-editor,
-.monaco-editor .overflow-guard {
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
-}
-
-/* fomantic styles destroy this element only visible on IOS, restore it */
-.monaco-editor .iPadShowKeyboard {
-  border: none !important;
-  width: 58px !important;
-  min-width: 0 !important;
-  height: 36px !important;
-  min-height: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  position: absolute !important;
-  resize: none !important;
-  overflow: hidden !important;
-  border-radius: var(--border-radius-medium) !important;
-}
@@ -31,6 +31,8 @@
@import "./modules/toast.css";
@import "./modules/svg.css";
@import "./modules/flexcontainer.css";
+@import "./modules/codeeditor.css";
+@import "./modules/chroma.css";

@import "./shared/flex-list.css";
@import "./shared/milestone.css";
@@ -41,7 +43,6 @@
@import "./features/gitgraph.css";
@import "./features/heatmap.css";
@import "./features/imagediff.css";
-@import "./features/codeeditor.css";
@import "./features/projects.css";
@import "./features/expander.css";
@import "./features/cropper.css";
@@ -53,7 +54,6 @@
@import "./markup/codepreview.css";
@import "./markup/asciicast.css";

-@import "./chroma/base.css";
@import "./font_i18n.css";
@import "./base.css";
@import "./home.css";
@@ -503,7 +503,7 @@ html[data-gitea-theme-dark="false"] .markup img[src*="#gh-dark-mode-only"] {
  background-color: var(--color-markup-code-inline);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
-  box-shadow: inset 0 -1px 0 var(--color-secondary);
+  box-shadow: var(--box-shadow-kbd);
 }

 .markup .ui.list .list,
@@ -0,0 +1,79 @@
+/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */
+
+/* structural */
+.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+.chroma .hl { display: block; width: 100%; }
+.chroma .lnt { margin-right: 0.4em; padding: 0 0.4em; }
+.chroma .ln { margin-right: 0.4em; padding: 0 0.4em; }
+
+/* tokens */
+.chroma .bp { color: var(--color-syntax-name-pseudo); } /* NameBuiltinPseudo */
+.chroma .c { color: var(--color-syntax-comment); } /* Comment */
+.chroma .c1 { color: var(--color-syntax-comment); } /* CommentSingle */
+.chroma .ch { color: var(--color-syntax-comment); } /* CommentHashbang */
+.chroma .cm { color: var(--color-syntax-comment); } /* CommentMultiline */
+.chroma .cp { color: var(--color-syntax-preproc); } /* CommentPreproc */
+.chroma .cpf { color: var(--color-syntax-preproc-file); } /* CommentPreprocFile */
+.chroma .cs { color: var(--color-syntax-comment-special); } /* CommentSpecial */
+.chroma .dl { color: var(--color-syntax-string); } /* LiteralStringDelimiter */
+.chroma .gd { color: var(--color-syntax-diff-fg); background-color: var(--color-syntax-deleted-bg); } /* GenericDeleted */
+.chroma .ge { color: var(--color-syntax-emph); } /* GenericEmph */
+.chroma .gh { color: var(--color-syntax-heading); } /* GenericHeading */
+.chroma .gi { color: var(--color-syntax-diff-fg); background-color: var(--color-syntax-inserted-bg); } /* GenericInserted */
+.chroma .gl { text-decoration: underline; } /* GenericUnderline */
+.chroma .go { color: var(--color-syntax-output); } /* GenericOutput */
+.chroma .gp { color: var(--color-syntax-prompt); } /* GenericPrompt */
+.chroma .gr { color: var(--color-syntax-invalid); } /* GenericError */
+.chroma .gs { color: var(--color-syntax-strong); font-weight: var(--font-weight-semibold); } /* GenericStrong */
+.chroma .gt { color: var(--color-syntax-traceback); } /* GenericTraceback */
+.chroma .gu { color: var(--color-syntax-subheading); } /* GenericSubheading */
+.chroma .il { color: var(--color-syntax-number); } /* LiteralNumberIntegerLong */
+.chroma .k { color: var(--color-syntax-keyword); } /* Keyword */
+.chroma .kc { color: var(--color-syntax-bool); } /* KeywordConstant */
+.chroma .kd { color: var(--color-syntax-keyword); } /* KeywordDeclaration */
+.chroma .kn { color: var(--color-syntax-control); } /* KeywordNamespace */
+.chroma .kp { color: var(--color-syntax-keyword); } /* KeywordPseudo */
+.chroma .kr { color: var(--color-syntax-keyword); } /* KeywordReserved */
+.chroma .kt { color: var(--color-syntax-type); } /* KeywordType */
+.chroma .m { color: var(--color-syntax-number); } /* LiteralNumber */
+.chroma .mb { color: var(--color-syntax-number); } /* LiteralNumberBin */
+.chroma .mf { color: var(--color-syntax-number); } /* LiteralNumberFloat */
+.chroma .mh { color: var(--color-syntax-number); } /* LiteralNumberHex */
+.chroma .mi { color: var(--color-syntax-number); } /* LiteralNumberInteger */
+.chroma .mo { color: var(--color-syntax-number); } /* LiteralNumberOct */
+.chroma .n { color: var(--color-syntax-text); } /* Name */
+.chroma .na { color: var(--color-syntax-attribute); } /* NameAttribute */
+.chroma .nb { color: var(--color-syntax-name); } /* NameBuiltin */
+.chroma .nc { color: var(--color-syntax-type); } /* NameClass */
+.chroma .nd { color: var(--color-syntax-decorator); } /* NameDecorator */
+.chroma .ne { color: var(--color-syntax-keyword); } /* NameException */
+.chroma .nf { color: var(--color-syntax-name); } /* NameFunction */
+.chroma .ni { color: var(--color-syntax-entity); } /* NameEntity */
+.chroma .nl { color: var(--color-syntax-keyword); } /* NameLabel */
+.chroma .nn { color: var(--color-syntax-namespace); } /* NameNamespace */
+.chroma .no { color: var(--color-syntax-variable); } /* NameConstant */
+.chroma .nt { color: var(--color-syntax-tag); } /* NameTag */
+.chroma .nv { color: var(--color-syntax-variable); } /* NameVariable */
+.chroma .nx { color: var(--color-syntax-text-alt); } /* NameOther */
+.chroma .o { color: var(--color-syntax-operator); } /* Operator */
+.chroma .ow { color: var(--color-syntax-operator); } /* OperatorWord */
+.chroma .p { color: var(--color-syntax-punctuation); } /* Punctuation */
+.chroma .s { color: var(--color-syntax-string); } /* LiteralString */
+.chroma .s1 { color: var(--color-syntax-string); } /* LiteralStringSingle */
+.chroma .s2 { color: var(--color-syntax-string); } /* LiteralStringDouble */
+.chroma .sa { color: var(--color-syntax-string-special); } /* LiteralStringAffix */
+.chroma .sb { color: var(--color-syntax-string); } /* LiteralStringBacktick */
+.chroma .sc { color: var(--color-syntax-string-special); } /* LiteralStringChar */
+.chroma .sd { color: var(--color-syntax-string); } /* LiteralStringDoc */
+.chroma .se { color: var(--color-syntax-escape); } /* LiteralStringEscape */
+.chroma .sh { color: var(--color-syntax-string); } /* LiteralStringHeredoc */
+.chroma .si { color: var(--color-syntax-string-special); } /* LiteralStringInterpol */
+.chroma .sr { color: var(--color-syntax-regexp); } /* LiteralStringRegex */
+.chroma .ss { color: var(--color-syntax-escape); } /* LiteralStringSymbol */
+.chroma .sx { color: var(--color-syntax-string); } /* LiteralStringOther */
+.chroma .vc { color: var(--color-syntax-variable); } /* NameVariableClass */
+.chroma .vg { color: var(--color-syntax-variable); } /* NameVariableGlobal */
+.chroma .vi { color: var(--color-syntax-variable); } /* NameVariableInstance */
+.chroma .w { color: var(--color-syntax-whitespace); } /* TextWhitespace */
+.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */
@@ -0,0 +1,569 @@
+.code-editor-options {
+  flex-wrap: wrap;
+}
+
+.editor-loading {
+  padding: 1rem;
+  text-align: center;
+}
+
+.editor-loading.is-loading {
+  width: 100%;
+  min-height: 200px;
+  height: 90vh;
+}
+
+.edit.githook .code-editor-container {
+  border: 1px solid var(--color-secondary);
+}
+
+/* editor layout */
+.code-editor-container .cm-editor {
+  color: var(--color-text);
+  background-color: var(--color-code-bg);
+  font-family: var(--fonts-monospace);
+  font-size: 12px;
+  max-height: 90vh;
+}
+
+.code-editor-container .cm-editor,
+.code-editor-container .cm-editor .cm-scroller {
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+
+.code-editor-container .cm-content,
+.code-editor-container .cm-gutter {
+  min-height: 200px;
+}
+
+.code-editor-container .cm-scroller {
+  overflow: auto;
+  line-height: var(--line-height-code);
+}
+
+.code-editor-container .cm-content * {
+  caret-color: inherit;
+}
+
+.code-editor-container .cm-content {
+  padding: 0;
+}
+
+.code-editor-container .cm-cursor,
+.code-editor-container .cm-dropCursor {
+  border-left-color: var(--color-caret);
+}
+
+.code-editor-container .cm-editor.cm-focused {
+  outline: none;
+}
+
+.code-editor-container .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
+.code-editor-container .cm-selectionBackground {
+  background-color: var(--color-primary-alpha-30);
+}
+
+.code-editor-container .cm-panels {
+  background-color: var(--color-body);
+  color: var(--color-text);
+  border-color: var(--color-secondary);
+  font-family: var(--fonts-regular);
+  font-size: 13px;
+}
+
+.code-editor-container .cm-panel.cm-search {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+  padding-right: 24px;
+}
+
+.code-editor-container .cm-panel.cm-search br {
+  display: none;
+}
+
+.code-editor-container .cm-panel.cm-search::after {
+  content: "";
+  flex-basis: 100%;
+  order: 1;
+}
+
+.code-editor-container .cm-panel.cm-search .cm-textfield {
+  width: 200px;
+}
+
+.code-editor-container .cm-panel.cm-search br + input.cm-textfield,
+.code-editor-container .cm-panel.cm-search br + input.cm-textfield ~ * {
+  order: 2;
+}
+
+.code-editor-container .cm-panel.cm-search input,
+.code-editor-container .cm-panel.cm-search button,
+.code-editor-container .cm-panel.cm-search label {
+  margin: 0;
+}
+
+.code-editor-container .cm-panel.cm-search .cm-button + label,
+.code-editor-container .cm-panel.cm-search label + label {
+  margin-left: 4px;
+}
+
+.code-editor-container .cm-panel.cm-search label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.code-editor-container .cm-panel.cm-search input[type="checkbox"] {
+  cursor: pointer;
+}
+
+.code-editor-container .cm-editor .cm-panel button[name="close"] {
+  font-size: 0;
+  width: 16px;
+  height: 16px;
+  background-color: currentcolor;
+  mask-image: var(--octicon-x);
+  mask-size: cover;
+  -webkit-mask-image: var(--octicon-x);
+  -webkit-mask-size: cover;
+  border-radius: var(--border-radius);
+}
+
+.code-editor-container .cm-panel.cm-search button[name="close"] {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+
+.code-editor-container .cm-editor .cm-panel button[name="close"]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.code-editor-container .cm-activeLine,
+.code-editor-container .cm-activeLineGutter {
+  background-color: var(--color-editor-line-highlight);
+}
+
+.code-editor-container .cm-gutters {
+  background-color: var(--color-code-bg);
+  color: var(--color-secondary-dark-6);
+  border-right: none;
+}
+
+.code-editor-container .cm-gutters .cm-lineNumbers .cm-gutterElement {
+  min-width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.code-editor-container .cm-foldGutter .cm-gutterElement {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 2px;
+  overflow: hidden;
+}
+
+.code-editor-container .cm-foldGutter .cm-gutterElement svg {
+  color: var(--color-text-light-2);
+  cursor: pointer;
+  visibility: hidden;
+}
+
+.code-editor-container .cm-gutters:hover .cm-foldGutter .cm-gutterElement svg {
+  visibility: visible;
+}
+
+.code-editor-container .cm-foldGutter .cm-gutterElement:hover svg {
+  color: var(--color-text);
+}
+
+.code-editor-container .cm-gutters .cm-lineNumbers .cm-activeLineGutter {
+  color: var(--color-text-light);
+}
+
+.code-editor-container .cm-editor .cm-line ::selection,
+.code-editor-container .cm-editor .cm-line::selection {
+  color: currentcolor;
+  background-color: var(--color-editor-selection);
+}
+
+.code-editor-container .cm-foldPlaceholder {
+  display: inline-flex;
+  align-items: center;
+  background: none;
+  border: none;
+  color: var(--color-text-light-2);
+  cursor: pointer;
+  vertical-align: middle;
+  padding: 0 1px;
+  margin: 0 2px;
+}
+
+.code-editor-container .cm-foldPlaceholder:hover {
+  color: var(--color-text);
+}
+
+.code-editor-container .cm-searchMatch {
+  background-color: var(--color-highlight-bg);
+  outline: 1px solid var(--color-highlight-fg);
+}
+
+.code-editor-container .cm-searchMatch-selected {
+  background-color: var(--color-primary-alpha-30);
+}
+
+.code-editor-container .cm-selectionMatch {
+  background-color: var(--color-highlight-bg);
+}
+
+.code-editor-container .cm-tooltip {
+  background-color: var(--color-body);
+  color: var(--color-text);
+  border-color: var(--color-secondary);
+}
+
+.code-editor-container .cm-tooltip.cm-tooltip-autocomplete > ul > li {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+}
+
+.code-editor-container .cm-completionIcon {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  padding-right: 4px;
+  color: var(--color-text-light);
+  opacity: 1;
+}
+
+.code-editor-container .cm-tooltip-autocomplete ul li[aria-selected] {
+  background-color: var(--color-primary-alpha-30);
+  color: var(--color-text);
+}
+
+.code-editor-container .cm-completionMatchedText {
+  text-decoration: none;
+  color: var(--color-primary-dark-1);
+  font-weight: var(--font-weight-semibold);
+}
+
+.code-editor-container .cm-placeholder {
+  color: var(--color-placeholder-text);
+}
+
+.code-editor-container .cm-button {
+  background-image: none;
+  background-color: var(--color-button);
+  color: var(--color-text);
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  height: 28px;
+  padding: 0 10px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.code-editor-container .cm-button:hover {
+  background-color: var(--color-hover);
+}
+
+.code-editor-container .cm-textfield {
+  background-color: var(--color-input-background);
+  color: var(--color-input-text);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--border-radius);
+  height: 28px;
+  padding: 0 6px;
+}
+
+.code-editor-container .cm-textfield:focus {
+  border-color: var(--color-primary);
+}
+
+.code-editor-container .cm-specialChar {
+  color: var(--color-syntax-invalid);
+}
+
+.code-editor-container .cm-trailingSpace {
+  background-color: var(--color-error-bg);
+}
+
+.code-editor-container .cm-activeLine .cm-trailingSpace {
+  background-color: transparent;
+}
+
+.code-editor-container.cm-mod-held .cm-url {
+  text-decoration: underline dotted var(--color-syntax-link);
+  cursor: pointer;
+}
+
+.code-editor-container .cm-editor.cm-focused .cm-matchingBracket {
+  background-color: var(--color-syntax-matching-bracket-bg);
+}
+
+.code-editor-container .cm-editor.cm-focused .cm-nonmatchingBracket {
+  background-color: var(--color-syntax-nonmatching-bracket-bg);
+}
+
+.code-editor-container .cm-panels-top {
+  border-bottom-color: var(--color-secondary);
+}
+
+.code-editor-container .cm-panels-bottom {
+  border-top-color: var(--color-secondary);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+
+.code-editor-container .cm-snippetField {
+  background-color: var(--color-primary-alpha-10);
+}
+
+.code-editor-container .cm-snippetFieldPosition {
+  border-left-color: var(--color-text-light-3);
+}
+
+.code-editor-container .cm-tooltip.cm-tooltip-autocomplete > ul > completion-section {
+  border-bottom-color: var(--color-secondary);
+}
+
+.code-editor-container .cm-tooltip-autocomplete-disabled ul li[aria-selected] {
+  background-color: var(--color-secondary);
+}
+
+/* command palette */
+.code-editor-container {
+  position: relative;
+  min-height: 90vh;
+}
+
+.cm-command-palette {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 301;
+  width: 400px;
+  max-width: min(calc(100% - 16px), 90vw);
+  background-color: var(--color-body);
+  border: 1px solid var(--color-secondary);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  box-shadow: 0 4px 12px var(--color-shadow);
+  font-family: var(--fonts-regular);
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px;
+}
+
+.cm-command-palette-input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 4px 6px !important;
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  background-color: var(--color-input-background);
+  color: var(--color-input-text);
+  font-size: 13px;
+  outline: none;
+}
+
+.cm-command-palette-input:focus {
+  border-color: var(--color-primary);
+}
+
+.cm-command-palette-list {
+  position: relative;
+  max-height: calc(8 * 24px);
+  overflow-y: auto;
+}
+
+.cm-command-palette-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 24px;
+  padding: 0 6px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.cm-command-palette-item[aria-selected="true"] {
+  background-color: var(--color-primary-alpha-30);
+}
+
+.cm-command-palette-empty {
+  color: var(--color-text-light);
+  text-align: center;
+}
+
+.cm-command-palette-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cm-command-palette-label mark {
+  background: none;
+  color: var(--color-primary-dark-1);
+  font-weight: var(--font-weight-semibold);
+}
+
+.cm-command-palette-keys {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 8px;
+}
+
+.code-editor-container .cm-gutter-lint {
+  width: 14px;
+}
+
+.code-editor-container .cm-gutter-lint .cm-gutterElement {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.code-editor-container .cm-lint-marker-error {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--color-red);
+}
+
+.code-editor-container .cm-lint-marker-warning {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--color-yellow);
+}
+
+.code-editor-container .cm-lintRange-error {
+  background-image: none;
+  text-decoration: wavy underline var(--color-red);
+  text-underline-offset: 3px;
+}
+
+.code-editor-container .cm-lintRange-warning {
+  background-image: none;
+  text-decoration: wavy underline var(--color-yellow);
+  text-underline-offset: 3px;
+}
+
+.code-editor-container .cm-lintPoint-error::after {
+  border-bottom-color: var(--color-red);
+}
+
+.code-editor-container .cm-lintPoint-warning::after {
+  border-bottom-color: var(--color-yellow);
+}
+
+.code-editor-container .cm-tooltip-lint {
+  background-color: var(--color-body);
+  color: var(--color-text);
+  border-color: var(--color-secondary);
+}
+
+.code-editor-container .cm-panel.cm-panel-lint button[name="close"] {
+  top: 4px;
+  right: 8px;
+}
+
+.code-editor-container .cm-panel.cm-panel-lint ul {
+  max-height: 120px;
+  outline: none;
+}
+
+.code-editor-container .cm-panel.cm-panel-lint [aria-selected] {
+  background-color: var(--color-primary-alpha-30) !important;
+}
+
+.code-editor-container .cm-diagnostic.cm-diagnostic-error {
+  border-left-color: var(--color-red);
+}
+
+.code-editor-container .cm-diagnostic.cm-diagnostic-warning {
+  border-left-color: var(--color-yellow);
+}
+
+/* syntax highlighting classes from @lezer/highlight classHighlighter */
+.code-editor-container .tok-keyword,
+.code-editor-container .tok-atom { color: var(--color-syntax-keyword); }
+.code-editor-container .tok-bool { color: var(--color-syntax-bool); }
+.code-editor-container .tok-variableName { color: var(--color-syntax-variable); }
+.code-editor-container .tok-variableName2 { color: var(--color-syntax-keyword); }
+.code-editor-container .tok-propertyName { color: var(--color-syntax-property); }
+.code-editor-container .tok-typeName,
+.code-editor-container .tok-className { color: var(--color-syntax-type); }
+.code-editor-container .tok-namespace { color: var(--color-syntax-namespace); }
+.code-editor-container .tok-macroName { color: var(--color-syntax-name); }
+.code-editor-container .tok-labelName { color: var(--color-syntax-name); }
+.code-editor-container .tok-number { color: var(--color-syntax-number); }
+.code-editor-container .tok-string { color: var(--color-syntax-string); }
+.code-editor-container .tok-string2 { color: var(--color-syntax-regexp); }
+.code-editor-container .tok-operator { color: var(--color-syntax-operator); }
+.code-editor-container .tok-punctuation { color: var(--color-syntax-punctuation); }
+.code-editor-container .tok-comment { color: var(--color-syntax-comment); }
+.code-editor-container .tok-meta { color: var(--color-syntax-preproc); }
+.code-editor-container .tok-invalid { color: var(--color-syntax-invalid); }
+.code-editor-container .tok-link { color: var(--color-syntax-link); }
+.code-editor-container .tok-heading { color: var(--color-syntax-heading); }
+.code-editor-container .tok-emphasis { color: var(--color-syntax-emph); font-style: italic; }
+.code-editor-container .tok-strong { font-weight: var(--font-weight-bold); }
+.code-editor-container .tok-inserted { color: var(--color-syntax-string); }
+.code-editor-container .tok-deleted { color: var(--color-syntax-invalid); }
+
+/* language-specific overrides */
+.code-editor-container[data-language="json"] .tok-propertyName,
+.code-editor-container[data-language="json5"] .tok-propertyName,
+.code-editor-container[data-language="yaml"] .tok-propertyName { color: var(--color-syntax-tag); }
+.code-editor-container[data-language="css"] .tok-propertyName { color: var(--color-syntax-name); }
+.code-editor-container[data-language="html"] .tok-propertyName,
+.code-editor-container[data-language="xml"] .tok-propertyName { color: var(--color-syntax-attribute); }
+
+/* context menu — uses tippy "menu" theme for base styling */
+.cm-context-menu {
+  min-width: 200px;
+  font-size: 13px;
+  user-select: none;
+}
+
+.cm-context-menu .item {
+  height: 24px !important;
+  padding: 0 12px !important;
+  cursor: pointer;
+}
+
+.cm-context-menu .item.disabled {
+  color: var(--color-text-light-3);
+  cursor: default;
+  pointer-events: none;
+}
+
+.cm-context-menu-keys {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  padding-left: 30px;
+}
+
+.cm-context-menu-separator {
+  border-top: 1px solid var(--color-secondary);
+  margin: 4px 0;
+}
@@ -2,19 +2,25 @@
  position: relative;
 }

+kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  padding: 2px 4px;
+  font-size: 11px;
+  line-height: 1;
+  color: var(--color-text-light-2);
+  background-color: var(--color-box-body);
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-kbd);
+}
+
 .global-shortcut-wrapper > kbd {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
-  display: inline-block;
-  padding: 2px 6px;
-  font-size: 11px;
-  line-height: 14px;
-  color: var(--color-text-light-2);
-  background-color: var(--color-box-body);
-  border: 1px solid var(--color-secondary);
-  border-radius: var(--border-radius);
-  box-shadow: inset 0 -1px 0 var(--color-secondary);
  pointer-events: none;
 }
@@ -207,6 +207,10 @@ td .commit-summary {
  padding: 0 !important;
 }

+.repo-editor-menu {
+  min-height: auto !important;
+}
+
 .repo-editor-header {
  display: flex;
  margin: 1rem 0;
@@ -841,7 +845,7 @@ td .commit-summary {
  width: 1%;
  min-width: 50px;
  font-family: monospace;
-  line-height: 20px;
+  line-height: var(--line-height-code);
  color: var(--color-text-light-1);
  white-space: nowrap;
  vertical-align: top;
@@ -1763,13 +1767,23 @@ tbody.commit-list {
 }

 .removed-code {
+  color: var(--color-text);
  background: var(--color-diff-removed-word-bg);
 }

+.removed-code span {
+  color: inherit !important;
+}
+
 .added-code {
+  color: var(--color-text);
  background: var(--color-diff-added-word-bg);
 }

+.added-code span {
+  color: inherit !important;
+}
+
 .code-diff-unified .del-code,
 .code-diff-unified .del-code td,
 .code-diff-split .del-code .lines-num-old,
@@ -1,6 +1,3 @@
-@import "../chroma/dark.css";
-@import "../codemirror/dark.css";
-
 gitea-theme-meta-info {
  --theme-display-name: "Dark";
  --theme-color-scheme: "dark";
@@ -224,7 +221,8 @@ gitea-theme-meta-info {
  --color-secondary-bg: #2a3137;
  --color-expand-button: #2f363d;
  --color-placeholder-text: var(--color-text-light-3);
-  --color-editor-line-highlight: var(--color-primary-light-5);
+  --color-editor-line-highlight: var(--color-secondary-alpha-40);
+  --color-editor-selection: var(--color-primary-alpha-50);
  --color-project-column-bg: var(--color-secondary-light-2);
  --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
  --color-reaction-bg: #e8f3ff12;
@@ -243,12 +241,53 @@ gitea-theme-meta-info {
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-5);
  --color-highlight-fg: #87651e;
-  --color-highlight-bg: #352c1c;
+  --color-highlight-bg: #443a27;
  --color-overlay-backdrop: #080808c0;
  --color-danger: var(--color-red);
  --color-transparency-grid-light: #2a2a2a;
  --color-transparency-grid-dark: #1a1a1a;
  --color-workflow-edge-hover: #616e78;
+  --color-syntax-keyword: #ff8854;
+  --color-syntax-bool: #25bbc9;
+  --color-syntax-control: #dd9e17;
+  --color-syntax-name: #c7a618;
+  --color-syntax-type: #eb8cb3;
+  --color-syntax-number: #63b2dd;
+  --color-syntax-operator: #ff8854;
+  --color-syntax-regexp: #b89de4;
+  --color-syntax-string: #95b62a;
+  --color-syntax-comment: #8898b0;
+  --color-syntax-invalid: #ff8686;
+  --color-syntax-link: var(--color-primary);
+  --color-syntax-tag: #ff8854;
+  --color-syntax-attribute: #c792ff;
+  --color-syntax-property: #55afff;
+  --color-syntax-variable: #e29b33;
+  --color-syntax-string-special: #dd9e17;
+  --color-syntax-escape: #c7a618;
+  --color-syntax-entity: #c792ff;
+  --color-syntax-preproc: #4cbe7a;
+  --color-syntax-preproc-file: #63b2dd;
+  --color-syntax-decorator: #4cbe7a;
+  --color-syntax-namespace: #c9d1d9;
+  --color-syntax-name-pseudo: #c792ff;
+  --color-syntax-comment-special: #b89de4;
+  --color-syntax-text: #c9d1d9;
+  --color-syntax-text-alt: #b9bcc7;
+  --color-syntax-punctuation: #d2d4db;
+  --color-syntax-whitespace: #7f8699;
+  --color-syntax-diff-fg: #ffffff;
+  --color-syntax-deleted-bg: #5f3737;
+  --color-syntax-inserted-bg: #3a523a;
+  --color-syntax-emph: #d1a242;
+  --color-syntax-strong: #e29b33;
+  --color-syntax-heading: #dd9e17;
+  --color-syntax-subheading: #95b62a;
+  --color-syntax-output: #8898b0;
+  --color-syntax-prompt: #e29b33;
+  --color-syntax-traceback: #ff8686;
+  --color-syntax-matching-bracket-bg: #00918a48;
+  --color-syntax-nonmatching-bracket-bg: #cc484848;
  accent-color: var(--color-accent);
  color-scheme: dark;
 }
@@ -1,6 +1,3 @@
-@import "../chroma/light.css";
-@import "../codemirror/light.css";
-
 gitea-theme-meta-info {
  --theme-display-name: "Light";
  --theme-color-scheme: "light";
@@ -224,7 +221,8 @@ gitea-theme-meta-info {
  --color-secondary-bg: #f2f5f8;
  --color-expand-button: #cfe8fa;
  --color-placeholder-text: var(--color-text-light-3);
-  --color-editor-line-highlight: var(--color-primary-light-6);
+  --color-editor-line-highlight: var(--color-secondary-alpha-30);
+  --color-editor-selection: var(--color-primary-alpha-30);
  --color-project-column-bg: var(--color-secondary-light-4);
  --color-caret: var(--color-text-dark);
  --color-reaction-bg: #0000170a;
@@ -243,12 +241,53 @@ gitea-theme-meta-info {
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-6);
  --color-highlight-fg: #eed200;
-  --color-highlight-bg: #fffbdd;
+  --color-highlight-bg: #f5efc5;
  --color-overlay-backdrop: #080808c0;
  --color-danger: var(--color-red);
  --color-transparency-grid-light: #fafafa;
  --color-transparency-grid-dark: #e2e2e2;
  --color-workflow-edge-hover: #b1b7bd;
+  --color-syntax-keyword: #a73a00;
+  --color-syntax-bool: #076872;
+  --color-syntax-control: #7d5700;
+  --color-syntax-name: #785900;
+  --color-syntax-type: #ae2368;
+  --color-syntax-number: #105ead;
+  --color-syntax-operator: #a73a00;
+  --color-syntax-regexp: #773dc5;
+  --color-syntax-string: #456800;
+  --color-syntax-comment: #506070;
+  --color-syntax-invalid: #c00000;
+  --color-syntax-link: var(--color-primary);
+  --color-syntax-tag: #a73a00;
+  --color-syntax-attribute: #6f41c5;
+  --color-syntax-property: #2060a0;
+  --color-syntax-variable: #944a00;
+  --color-syntax-string-special: #7d5700;
+  --color-syntax-escape: #785900;
+  --color-syntax-entity: #6f41c5;
+  --color-syntax-preproc: #2d6a4b;
+  --color-syntax-preproc-file: #105ead;
+  --color-syntax-decorator: #2d6a4b;
+  --color-syntax-namespace: #555555;
+  --color-syntax-name-pseudo: #6f41c5;
+  --color-syntax-comment-special: #773dc5;
+  --color-syntax-text: inherit;
+  --color-syntax-text-alt: #47525b;
+  --color-syntax-punctuation: inherit;
+  --color-syntax-whitespace: #bbbbbb;
+  --color-syntax-diff-fg: #000000;
+  --color-syntax-deleted-bg: #ffdddd;
+  --color-syntax-inserted-bg: #ddffdd;
+  --color-syntax-emph: #8b5000;
+  --color-syntax-strong: inherit;
+  --color-syntax-heading: #7d5700;
+  --color-syntax-subheading: #456800;
+  --color-syntax-output: #506070;
+  --color-syntax-prompt: #944a00;
+  --color-syntax-traceback: #c00000;
+  --color-syntax-matching-bracket-bg: #00b5ad38;
+  --color-syntax-nonmatching-bracket-bg: #db282838;
  accent-color: var(--color-accent);
  color-scheme: light;
 }
@@ -1,255 +0,0 @@
-import {colord} from 'colord';
-import {basename, extname, isObject, isDarkTheme} from '../utils.ts';
-import {onInputDebounce, toggleElem} from '../utils/dom.ts';
-import type MonacoNamespace from 'monaco-editor';
-
-type Monaco = typeof MonacoNamespace;
-type IStandaloneCodeEditor = MonacoNamespace.editor.IStandaloneCodeEditor;
-type IEditorOptions = MonacoNamespace.editor.IEditorOptions;
-type IGlobalEditorOptions = MonacoNamespace.editor.IGlobalEditorOptions;
-type ITextModelUpdateOptions = MonacoNamespace.editor.ITextModelUpdateOptions;
-type MonacoOpts = IEditorOptions & IGlobalEditorOptions & ITextModelUpdateOptions;
-
-type CodeEditorConfig = {
-  indent_style?: 'tab' | 'space',
-  indent_size?: number,
-  tab_width?: string | number, // backend emits this as string
-  trim_trailing_whitespace?: boolean,
-};
-
-const languagesByFilename: Record<string, string> = {};
-const languagesByExt: Record<string, string> = {};
-
-const baseOptions: MonacoOpts = {
-  fontFamily: 'var(--fonts-monospace)',
-  fontSize: 14, // https://github.com/microsoft/monaco-editor/issues/2242
-  guides: {bracketPairs: false, indentation: false},
-  links: false,
-  minimap: {enabled: false},
-  occurrencesHighlight: 'off',
-  overviewRulerLanes: 0,
-  renderLineHighlight: 'all',
-  renderLineHighlightOnlyWhenFocus: true,
-  rulers: [],
-  scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6, alwaysConsumeMouseWheel: false},
-  scrollBeyondLastLine: false,
-  automaticLayout: true,
-  indentSize: 'tabSize',
-  wrappingIndent: 'none',
-  wordWrapBreakAfterCharacters: '',
-  wordWrapBreakBeforeCharacters: '',
-  matchBrackets: 'never',
-  editContext: false, // https://github.com/microsoft/monaco-editor/issues/5081
-};
-
-function getCodeEditorConfig(input: HTMLInputElement): CodeEditorConfig | null {
-  const json = input.getAttribute('data-code-editor-config');
-  if (!json) return null;
-  try {
-    return JSON.parse(json);
-  } catch {
-    return null;
-  }
-}
-
-function initLanguages(monaco: Monaco): void {
-  for (const {filenames, extensions, id} of monaco.languages.getLanguages()) {
-    for (const filename of filenames || []) {
-      languagesByFilename[filename] = id;
-    }
-    for (const extension of extensions || []) {
-      languagesByExt[extension] = id;
-    }
-    if (id === 'typescript') {
-      monaco.typescript.typescriptDefaults.setCompilerOptions({
-        // this is needed to suppress error annotations in tsx regarding missing --jsx flag.
-        jsx: monaco.typescript.JsxEmit.Preserve,
-      });
-    }
-  }
-}
-
-function getLanguage(filename: string): string {
-  return languagesByFilename[filename] || languagesByExt[extname(filename)] || 'plaintext';
-}
-
-function updateEditor(monaco: Monaco, editor: IStandaloneCodeEditor, filename: string, lineWrapExts: string[]): void {
-  editor.updateOptions(getFileBasedOptions(filename, lineWrapExts));
-  const model = editor.getModel();
-  if (!model) return;
-  const language = model.getLanguageId();
-  const newLanguage = getLanguage(filename);
-  if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
-  // TODO: Need to update the model uri with the new filename, but there is no easy way currently, see
-  // https://github.com/microsoft/monaco-editor/discussions/3751
-}
-
-// export editor for customization - https://github.com/go-gitea/gitea/issues/10409
-function exportEditor(editor: IStandaloneCodeEditor): void {
-  if (!window.codeEditors) window.codeEditors = [];
-  if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor);
-}
-
-function updateTheme(monaco: Monaco): void {
-  // https://github.com/microsoft/monaco-editor/issues/2427
-  // also, monaco can only parse 6-digit hex colors, so we convert the colors to that format
-  const styles = window.getComputedStyle(document.documentElement);
-  const getColor = (name: string) => colord(styles.getPropertyValue(name).trim()).alpha(1).toHex();
-
-  monaco.editor.defineTheme('gitea', {
-    base: isDarkTheme() ? 'vs-dark' : 'vs',
-    inherit: true,
-    rules: [
-      {
-        background: getColor('--color-code-bg'),
-        token: '',
-      },
-    ],
-    colors: {
-      'editor.background': getColor('--color-code-bg'),
-      'editor.foreground': getColor('--color-text'),
-      'editor.inactiveSelectionBackground': getColor('--color-primary-light-4'),
-      'editor.lineHighlightBackground': getColor('--color-editor-line-highlight'),
-      'editor.selectionBackground': getColor('--color-primary-light-3'),
-      'editor.selectionForeground': getColor('--color-primary-light-3'),
-      'editorLineNumber.background': getColor('--color-code-bg'),
-      'editorLineNumber.foreground': getColor('--color-secondary-dark-6'),
-      'editorWidget.background': getColor('--color-body'),
-      'editorWidget.border': getColor('--color-secondary'),
-      'input.background': getColor('--color-input-background'),
-      'input.border': getColor('--color-input-border'),
-      'input.foreground': getColor('--color-input-text'),
-      'scrollbar.shadow': getColor('--color-shadow-opaque'),
-      'progressBar.background': getColor('--color-primary'),
-      'focusBorder': '#0000', // prevent blue border
-    },
-  });
-}
-
-type CreateMonacoOpts = MonacoOpts & {language?: string};
-
-export async function createMonaco(textarea: HTMLTextAreaElement, filename: string, opts: CreateMonacoOpts): Promise<{monaco: Monaco, editor: IStandaloneCodeEditor}> {
-  const monaco = await import('../modules/monaco.ts');
-
-  initLanguages(monaco);
-  let {language, ...other} = opts;
-  if (!language) language = getLanguage(filename);
-
-  const container = document.createElement('div');
-  container.className = 'monaco-editor-container';
-  if (!textarea.parentNode) throw new Error('Parent node absent');
-  textarea.parentNode.append(container);
-
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-    updateTheme(monaco);
-  });
-  updateTheme(monaco);
-
-  const model = monaco.editor.createModel(textarea.value, language, monaco.Uri.file(filename));
-
-  const editor = monaco.editor.create(container, {
-    model,
-    theme: 'gitea',
-    ...baseOptions,
-    ...other,
-  });
-
-  monaco.editor.addKeybindingRules([
-    {keybinding: monaco.KeyCode.Enter, command: null}, // disable enter from accepting code completion
-  ]);
-
-  model.onDidChangeContent(() => {
-    textarea.value = editor.getValue({
-      preserveBOM: true,
-      lineEnding: '',
-    });
-    textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure
-  });
-
-  const elEditorOptions = textarea.closest('form')?.querySelector('.code-editor-options');
-  if (elEditorOptions) {
-    elEditorOptions.querySelector<HTMLSelectElement>('.js-indent-style-select')!.addEventListener('change', (e) => {
-      const insertSpaces = (e.target as HTMLSelectElement).value === 'space';
-      editor.updateOptions({insertSpaces, useTabStops: !insertSpaces});
-    });
-    elEditorOptions.querySelector<HTMLSelectElement>('.js-indent-size-select')!.addEventListener('change', (e) => {
-      const tabSize = Number((e.target as HTMLSelectElement).value);
-      editor.updateOptions({tabSize});
-    });
-    elEditorOptions.querySelector<HTMLSelectElement>('.js-line-wrap-select')!.addEventListener('change', (e) => {
-      const wordWrap = (e.target as HTMLSelectElement).value as IEditorOptions['wordWrap'];
-      editor.updateOptions({wordWrap});
-    });
-  }
-
-  exportEditor(editor);
-
-  const loading = document.querySelector('.editor-loading');
-  if (loading) loading.remove();
-
-  return {monaco, editor};
-}
-
-function getFileBasedOptions(filename: string, lineWrapExts: string[]): MonacoOpts {
-  return {
-    wordWrap: (lineWrapExts || []).includes(extname(filename)) ? 'on' : 'off',
-  };
-}
-
-function togglePreviewDisplay(previewable: boolean): void {
-  // FIXME: here and below, the selector is too broad, it should only query in the editor related scope
-  const previewTab = document.querySelector<HTMLElement>('a[data-tab="preview"]');
-  // the "preview tab" exists for "file code editor", but doesn't exist for "git hook editor"
-  if (!previewTab) return;
-
-  toggleElem(previewTab, previewable);
-  if (previewable) return;
-
-  // If not previewable but the "preview" tab was active (user changes the filename to a non-previewable one),
-  // then the "preview" tab becomes inactive (hidden), so the "write" tab should become active
-  if (previewTab.classList.contains('active')) {
-    const writeTab = document.querySelector<HTMLElement>('a[data-tab="write"]');
-    writeTab?.click(); // TODO: it shouldn't need null-safe operator, writeTab must exist
-  }
-}
-
-export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameInput: HTMLInputElement): Promise<IStandaloneCodeEditor> {
-  const filename = basename(filenameInput.value);
-  const previewableExts = new Set((textarea.getAttribute('data-previewable-extensions') || '').split(','));
-  const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(',');
-  const isPreviewable = previewableExts.has(extname(filename));
-  const editorConfig = getCodeEditorConfig(filenameInput);
-
-  togglePreviewDisplay(isPreviewable);
-
-  const {monaco, editor} = await createMonaco(textarea, filename, {
-    ...getFileBasedOptions(filenameInput.value, lineWrapExts),
-    ...getMonacoOptsByCodeEditorConfig(editorConfig),
-  });
-
-  filenameInput.addEventListener('input', onInputDebounce(() => {
-    const filename = filenameInput.value;
-    const previewable = previewableExts.has(extname(filename));
-    togglePreviewDisplay(previewable);
-    updateEditor(monaco, editor, filename, lineWrapExts);
-  }));
-
-  return editor;
-}
-
-function getMonacoOptsByCodeEditorConfig(ec: CodeEditorConfig | null): MonacoOpts {
-  if (!ec || !isObject(ec)) return {};
-
-  const opts: MonacoOpts = {};
-  opts.detectIndentation = !ec.indent_style || !ec.indent_size;
-
-  // with indentSize='tabSize', this also controls the `indentSize` option
-  if (!opts.detectIndentation) {
-    opts.tabSize = Number(ec.tab_width) || Number(ec.indent_size) || 4;
-  }
-
-  opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true;
-  opts.insertSpaces = ec.indent_style === 'space';
-  opts.useTabStops = ec.indent_style === 'tab';
-  return opts;
-}
@@ -1,6 +1,7 @@
 import {html, htmlRaw} from '../utils/html.ts';
-import {createCodeEditor} from './codeeditor.ts';
-import {hideElem, queryElems, showElem, createElementFromHTML} from '../utils/dom.ts';
+import {createCodeEditor} from '../modules/codeeditor/main.ts';
+import {trimTrailingWhitespaceFromView} from '../modules/codeeditor/utils.ts';
+import {hideElem, queryElems, showElem, createElementFromHTML, onInputDebounce} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
 import {initDropzone} from './dropzone.ts';
 import {confirmModal} from './comp/ConfirmModal.ts';
@@ -50,8 +51,12 @@ export function initRepoEditor() {
    });
  }

+  // ATTENTION: two pages have this filename input
+  // * new/edit file page: there is a code editor
+  // * upload page: there is no code editor, but a uploader
  const filenameInput = document.querySelector<HTMLInputElement>('#file-name')!;
  if (!filenameInput) return;
+  filenameInput.value = filenameInput.defaultValue; // prevent browser from restoring form values on refresh
  function joinTreePath() {
    const parts = [];
    for (const el of document.querySelectorAll('.breadcrumb span.section')) {
@@ -143,7 +148,8 @@ export function initRepoEditor() {

  const elForm = document.querySelector<HTMLFormElement>('.repository.editor .edit.form')!;

-  // on the upload page, there is no editor(textarea)
+  // see the ATTENTION above, on the upload page, there is no editor(textarea)
+  // so only the filename input above is initialized, the code below (for the code editor) will be skipped
  const editArea = document.querySelector<HTMLTextAreaElement>('.page-content.repository.editor textarea#edit_area');
  if (!editArea) return;

@@ -170,16 +176,22 @@ export function initRepoEditor() {

  (async () => {
    const editor = await createCodeEditor(editArea, filenameInput);
+    filenameInput.addEventListener('input', onInputDebounce(() => editor.updateFilename(filenameInput.value)));

    // Update the editor from query params, if available,
    // only after the dirtyFileClass initialization
    const params = new URLSearchParams(window.location.search);
    const value = params.get('value');
    if (value) {
-      editor.setValue(value);
+      editor.view.dispatch({
+        changes: {from: 0, to: editor.view.state.doc.length, insert: value},
+      });
    }

    commitButton.addEventListener('click', async (e) => {
+      if (editor.trimTrailingWhitespace) {
+        trimTrailingWhitespaceFromView(editor.view);
+      }
      // A modal which asks if an empty file should be committed
      if (!editArea.value) {
        e.preventDefault();
@@ -1,4 +1,4 @@
-import {createMonaco} from './codeeditor.ts';
+import {createCodeEditor} from '../modules/codeeditor/main.ts';
 import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
 import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
@@ -72,8 +72,7 @@ function initRepoSettingsSearchTeamBox() {

 function initRepoSettingsGitHook() {
  if (!document.querySelector('.page-content.repository.settings.edit.githook')) return;
-  const filename = document.querySelector('.hook-filename')!.textContent;
-  createMonaco(document.querySelector<HTMLTextAreaElement>('#content')!, filename, {language: 'shell'});
+  createCodeEditor(document.querySelector<HTMLTextAreaElement>('#content')!);
 }

 function initRepoSettingsBranches() {
@@ -61,13 +61,8 @@ interface Window {
    _inited: boolean,
    push: (e: ErrorEvent & PromiseRejectionEvent) => void | number,
  },
-  codeEditors: any[], // export editor for customization
  localUserSettings: typeof import('./modules/user-settings.ts').localUserSettings,

-  MonacoEnvironment?: {
-    getWorker: (workerId: string, label: string) => Worker,
-  },
-
  // various captcha plugins
  grecaptcha: any,
  turnstile: any,
@@ -0,0 +1,216 @@
+import {isMac, keySymbols} from '../../utils.ts';
+import {trimTrailingWhitespaceFromView} from './utils.ts';
+import type {EditorView} from '@codemirror/view';
+import type {CodemirrorModules} from './main.ts';
+
+export type PaletteCommand = {
+  label: string;
+  keys: string;
+  run: (view: EditorView) => void;
+};
+
+function formatKeys(keys: string): string[][] {
+  return keys.split(' ').map((chord) => chord.split('+').map((k) => keySymbols[k] || k));
+}
+
+export function commandPalette(cm: CodemirrorModules) {
+  const commands: PaletteCommand[] = [
+    {label: 'Undo', keys: 'Mod+Z', run: cm.commands.undo},
+    {label: 'Redo', keys: 'Mod+Shift+Z', run: cm.commands.redo},
+    {label: 'Find', keys: 'Mod+F', run: cm.search.openSearchPanel},
+    {label: 'Go to line', keys: 'Mod+Alt+G', run: cm.search.gotoLine},
+    {label: 'Select All', keys: 'Mod+A', run: cm.commands.selectAll},
+    {label: 'Delete Line', keys: 'Mod+Shift+K', run: cm.commands.deleteLine},
+    {label: 'Move Line Up', keys: 'Alt+Up', run: cm.commands.moveLineUp},
+    {label: 'Move Line Down', keys: 'Alt+Down', run: cm.commands.moveLineDown},
+    {label: 'Copy Line Up', keys: 'Shift+Alt+Up', run: cm.commands.copyLineUp},
+    {label: 'Copy Line Down', keys: 'Shift+Alt+Down', run: cm.commands.copyLineDown},
+    {label: 'Toggle Comment', keys: 'Mod+/', run: cm.commands.toggleComment},
+    {label: 'Insert Blank Line', keys: 'Mod+Enter', run: cm.commands.insertBlankLine},
+    {label: 'Add Cursor Above', keys: isMac ? 'Mod+Alt+Up' : 'Ctrl+Alt+Up', run: cm.commands.addCursorAbove},
+    {label: 'Add Cursor Below', keys: isMac ? 'Mod+Alt+Down' : 'Ctrl+Alt+Down', run: cm.commands.addCursorBelow},
+    {label: 'Add Next Occurrence', keys: 'Mod+D', run: cm.search.selectNextOccurrence},
+    {label: 'Go to Matching Bracket', keys: 'Mod+Shift+\\', run: cm.commands.cursorMatchingBracket},
+    {label: 'Indent More', keys: 'Mod+]', run: cm.commands.indentMore},
+    {label: 'Indent Less', keys: 'Mod+[', run: cm.commands.indentLess},
+    {label: 'Fold Code', keys: isMac ? 'Mod+Alt+[' : 'Ctrl+Shift+[', run: cm.language.foldCode},
+    {label: 'Unfold Code', keys: isMac ? 'Mod+Alt+]' : 'Ctrl+Shift+]', run: cm.language.unfoldCode},
+    {label: 'Fold All', keys: 'Ctrl+Alt+[', run: cm.language.foldAll},
+    {label: 'Unfold All', keys: 'Ctrl+Alt+]', run: cm.language.unfoldAll},
+    {label: 'Trigger Autocomplete', keys: 'Ctrl+Space', run: cm.autocomplete.startCompletion},
+    {label: 'Trim Trailing Whitespace', keys: 'Mod+K Mod+X', run: trimTrailingWhitespaceFromView},
+  ];
+
+  let overlay: HTMLElement | null = null;
+  let filtered: PaletteCommand[] = [];
+  let selectedIndex = 0;
+  let cleanupClickOutside: (() => void) | null = null;
+
+  function hide(view: EditorView) {
+    if (!overlay) return;
+    cleanupClickOutside?.();
+    cleanupClickOutside = null;
+    overlay.remove();
+    overlay = null;
+    view.focus();
+  }
+
+  function renderList(list: HTMLElement, query: string) {
+    list.textContent = '';
+    if (!filtered.length) {
+      const empty = document.createElement('div');
+      empty.className = 'cm-command-palette-empty';
+      empty.textContent = 'No matches';
+      list.append(empty);
+      return;
+    }
+    for (const [index, cmd] of filtered.entries()) {
+      const item = document.createElement('div');
+      item.className = 'cm-command-palette-item';
+      item.setAttribute('role', 'option');
+      item.setAttribute('data-index', String(index));
+      if (index === selectedIndex) item.setAttribute('aria-selected', 'true');
+
+      const label = document.createElement('span');
+      label.className = 'cm-command-palette-label';
+      const matchIndex = query ? cmd.label.toLowerCase().indexOf(query) : -1;
+      if (matchIndex !== -1) {
+        label.append(cmd.label.slice(0, matchIndex));
+        const mark = document.createElement('mark');
+        mark.textContent = cmd.label.slice(matchIndex, matchIndex + query.length);
+        label.append(mark, cmd.label.slice(matchIndex + query.length));
+      } else {
+        label.textContent = cmd.label;
+      }
+      item.append(label);
+
+      if (cmd.keys) {
+        const keysEl = document.createElement('span');
+        keysEl.className = 'cm-command-palette-keys';
+        for (const [chordIndex, chord] of formatKeys(cmd.keys).entries()) {
+          if (chordIndex > 0) keysEl.append('→');
+          for (const k of chord) {
+            const kbd = document.createElement('kbd');
+            kbd.textContent = k;
+            keysEl.append(kbd);
+          }
+        }
+        item.append(keysEl);
+      }
+      list.append(item);
+    }
+  }
+
+  function show(view: EditorView, items?: PaletteCommand[], placeholder?: string) {
+    const container = view.dom.closest('.code-editor-container')!;
+    overlay = document.createElement('div');
+    overlay.className = 'cm-command-palette';
+
+    const input = document.createElement('input');
+    input.className = 'cm-command-palette-input';
+    input.placeholder = placeholder || 'Type a command...';
+
+    const list = document.createElement('div');
+    list.className = 'cm-command-palette-list';
+    list.setAttribute('role', 'listbox');
+
+    const source = items || commands;
+    filtered = source;
+    selectedIndex = 0;
+
+    const updateSelected = () => {
+      list.querySelector('[aria-selected]')?.removeAttribute('aria-selected');
+      const el = list.children[selectedIndex] as HTMLElement | undefined;
+      if (el) {
+        el.setAttribute('aria-selected', 'true');
+        if (el.offsetTop < list.scrollTop) {
+          list.scrollTop = el.offsetTop;
+        } else if (el.offsetTop + el.offsetHeight > list.scrollTop + list.clientHeight) {
+          list.scrollTop = el.offsetTop + el.offsetHeight - list.clientHeight;
+        }
+      }
+    };
+
+    const execute = (cmd: PaletteCommand) => {
+      hide(view);
+      cmd.run(view);
+    };
+
+    list.addEventListener('pointerover', (e) => {
+      const item = (e.target as Element).closest<HTMLElement>('.cm-command-palette-item');
+      if (!item) return;
+      selectedIndex = Number(item.getAttribute('data-index'));
+      updateSelected();
+    });
+
+    list.addEventListener('mousedown', (e) => {
+      const item = (e.target as Element).closest<HTMLElement>('.cm-command-palette-item');
+      if (!item) return;
+      e.preventDefault();
+      const cmd = filtered[Number(item.getAttribute('data-index'))];
+      if (cmd) execute(cmd);
+    });
+
+    input.addEventListener('input', () => {
+      const q = input.value.toLowerCase();
+      filtered = q ? source.filter((cmd) => cmd.label.toLowerCase().includes(q)) : source;
+      selectedIndex = 0;
+      renderList(list, q);
+    });
+
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        selectedIndex = (selectedIndex + 1) % filtered.length;
+        updateSelected();
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        selectedIndex = (selectedIndex - 1 + filtered.length) % filtered.length;
+        updateSelected();
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (filtered[selectedIndex]) execute(filtered[selectedIndex]);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        hide(view);
+      }
+    });
+
+    overlay.append(input, list);
+    container.append(overlay);
+    renderList(list, '');
+    input.focus();
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Element;
+      if (overlay && !overlay.contains(target) && !target.closest('.js-code-command-palette')) {
+        hide(view);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    cleanupClickOutside = () => document.removeEventListener('mousedown', handleClickOutside);
+  }
+
+  function showWithItems(view: EditorView, items: PaletteCommand[], placeholder: string) {
+    if (overlay) hide(view);
+    show(view, items, placeholder);
+  }
+
+  function togglePalette(view: EditorView) {
+    if (overlay) {
+      hide(view);
+    } else {
+      show(view);
+    }
+    return true;
+  }
+
+  return {
+    extensions: cm.view.keymap.of([
+      {key: 'Mod-Shift-p', run: togglePalette, preventDefault: true},
+      {key: 'F1', run: togglePalette, preventDefault: true},
+    ]),
+    togglePalette,
+    showWithItems,
+  };
+}
@@ -0,0 +1,249 @@
+import {clippie} from 'clippie';
+import {createTippy} from '../tippy.ts';
+import {keySymbols} from '../../utils.ts';
+import {goToDefinitionAt} from './utils.ts';
+import type {Instance} from 'tippy.js';
+import type {EditorView} from '@codemirror/view';
+import type {CodemirrorModules} from './main.ts';
+
+type MenuItem = {
+  label: string;
+  keys?: string;
+  disabled?: boolean;
+  run: (view: EditorView) => void | Promise<void>;
+} | 'separator';
+
+/** Get the word at cursor, or selected text. Checks adjacent positions when cursor is on a non-word char. */
+export function getWordAtPosition(view: EditorView, from: number, to: number): string {
+  if (from !== to) return view.state.doc.sliceString(from, to);
+  for (const pos of [from, from - 1, from + 1]) {
+    const range = view.state.wordAt(pos);
+    if (range) return view.state.doc.sliceString(range.from, range.to);
+  }
+  return '';
+}
+
+/** Select all occurrences of the word at cursor for multi-cursor editing. */
+export function selectAllOccurrences(cm: CodemirrorModules, view: EditorView) {
+  const {from, to} = view.state.selection.main;
+  const word = getWordAtPosition(view, from, to);
+  if (!word) return;
+  const ranges = [];
+  let main = 0;
+  const cursor = new cm.search.SearchCursor(view.state.doc, word);
+  while (!cursor.done) {
+    cursor.next();
+    if (cursor.done) break;
+    if (cursor.value.from <= from && cursor.value.to >= from) main = ranges.length;
+    ranges.push(cm.state.EditorSelection.range(cursor.value.from, cursor.value.to));
+  }
+  if (ranges.length) {
+    view.dispatch({selection: cm.state.EditorSelection.create(ranges, main)});
+  }
+}
+
+/** Collect symbol definitions from the Lezer syntax tree. */
+export function collectSymbols(cm: CodemirrorModules, view: EditorView): {label: string; kind: string; from: number}[] {
+  const tree = cm.language.syntaxTree(view.state);
+  const symbols: {label: string; kind: string; from: number}[] = [];
+  const seen = new Set<number>(); // track by position to avoid O(n²) dedup
+  const addSymbol = (label: string, kind: string, from: number) => {
+    if (!seen.has(from)) {
+      seen.add(from);
+      symbols.push({label, kind, from});
+    }
+  };
+  tree.iterate({
+    enter(node): false | void {
+      if (node.name === 'VariableDefinition' || node.name === 'DefName') {
+        addSymbol(view.state.doc.sliceString(node.from, node.to), 'variable', node.from);
+      } else if (node.name === 'FunctionDeclaration' || node.name === 'FunctionDecl' || node.name === 'ClassDeclaration') {
+        const nameNode = node.node.getChild('VariableDefinition') || node.node.getChild('DefName');
+        if (nameNode) {
+          const kind = node.name === 'ClassDeclaration' ? 'class' : 'function';
+          addSymbol(view.state.doc.sliceString(nameNode.from, nameNode.to), kind, nameNode.from);
+        }
+        return false;
+      } else if (node.name === 'MethodDeclaration' || node.name === 'MethodDecl' || node.name === 'PropertyDefinition') {
+        const nameNode = node.node.getChild('PropertyDefinition') || node.node.getChild('PropertyName') || node.node.getChild('DefName');
+        if (nameNode) {
+          addSymbol(view.state.doc.sliceString(nameNode.from, nameNode.to), node.name === 'PropertyDefinition' ? 'property' : 'method', nameNode.from);
+        }
+      } else if (node.name === 'TypeDecl' || node.name === 'TypeSpec') {
+        const nameNode = node.node.getChild('DefName');
+        if (nameNode) {
+          addSymbol(view.state.doc.sliceString(nameNode.from, nameNode.to), 'type', nameNode.from);
+        }
+      }
+    },
+  });
+  return symbols;
+}
+
+function buildMenuItems(cm: CodemirrorModules, view: EditorView, togglePalette: (view: EditorView) => boolean, goToSymbol: (view: EditorView) => void): MenuItem[] {
+  const {from, to} = view.state.selection.main;
+  const hasSelection = from !== to;
+  // Check if cursor is on a symbol that has a definition
+  const tree = cm.language.syntaxTree(view.state);
+  const nodeAtCursor = tree.resolveInner(from, 1);
+  const hasDefinition = nodeAtCursor?.name === 'VariableName';
+  const hasWord = Boolean(getWordAtPosition(view, from, to));
+  return [
+    {label: 'Go to Definition', keys: 'F12', disabled: !hasDefinition, run: (v) => { goToDefinitionAt(cm, v, v.state.selection.main.from) }},
+    {label: 'Go to Symbol…', keys: 'Mod+Shift+O', run: goToSymbol},
+    {label: 'Change All Occurrences', keys: 'Mod+F2', disabled: !hasWord, run: (v) => selectAllOccurrences(cm, v)},
+    'separator',
+    {label: 'Cut', keys: 'Mod+X', disabled: !hasSelection, run: async (v) => {
+      const {from, to} = v.state.selection.main;
+      if (await clippie(v.state.doc.sliceString(from, to))) {
+        v.dispatch({changes: {from, to}});
+      }
+    }},
+    {label: 'Copy', keys: 'Mod+C', disabled: !hasSelection, run: async (v) => {
+      const {from, to} = v.state.selection.main;
+      await clippie(v.state.doc.sliceString(from, to));
+    }},
+    {label: 'Paste', keys: 'Mod+V', run: async (view) => {
+      try {
+        const text = await navigator.clipboard.readText();
+        view.dispatch(view.state.replaceSelection(text));
+      } catch { /* clipboard permission denied */ }
+    }},
+    'separator',
+    {label: 'Command Palette', keys: 'F1', run: (v) => { togglePalette(v) }},
+  ];
+}
+
+type MenuResult = {el: HTMLElement; actions: ((() => void) | null)[]};
+
+function createMenuElement(items: MenuItem[], view: EditorView, onAction: () => void): MenuResult {
+  const menu = document.createElement('div');
+  menu.className = 'cm-context-menu';
+  const actions: ((() => void) | null)[] = [];
+  for (const item of items) {
+    if (item === 'separator') {
+      const sep = document.createElement('div');
+      sep.className = 'cm-context-menu-separator';
+      menu.append(sep);
+      continue;
+    }
+    const row = document.createElement('div');
+    row.className = `item${item.disabled ? ' disabled' : ''}`;
+    if (item.disabled) row.setAttribute('aria-disabled', 'true');
+    const label = document.createElement('span');
+    label.className = 'cm-context-menu-label';
+    label.textContent = item.label;
+    row.append(label);
+    if (item.keys) {
+      const keysEl = document.createElement('span');
+      keysEl.className = 'cm-context-menu-keys';
+      for (const key of item.keys.split('+')) {
+        const kbd = document.createElement('kbd');
+        kbd.textContent = keySymbols[key] || key;
+        keysEl.append(kbd);
+      }
+      row.append(keysEl);
+    }
+    const execute = item.disabled ? null : () => { onAction(); item.run(view) };
+    if (execute) {
+      row.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation(); execute() });
+    }
+    actions.push(execute);
+    menu.append(row);
+  }
+  return {el: menu, actions};
+}
+
+export function contextMenu(cm: CodemirrorModules, togglePalette: (view: EditorView) => boolean, goToSymbol: (view: EditorView) => void) {
+  let instance: Instance | null = null;
+
+  function hideMenu() {
+    if (instance) {
+      instance.destroy();
+      instance = null;
+    }
+  }
+
+  return cm.view.EditorView.domEventHandlers({
+    contextmenu(event: MouseEvent, view: EditorView) {
+      event.preventDefault();
+      hideMenu();
+
+      // Place cursor at right-click position if not inside a selection
+      const pos = view.posAtCoords({x: event.clientX, y: event.clientY});
+      if (pos !== null) {
+        const {from, to} = view.state.selection.main;
+        if (pos < from || pos > to) {
+          view.dispatch({selection: {anchor: pos}});
+        }
+      }
+
+      const controller = new AbortController();
+      const dismiss = () => {
+        controller.abort();
+        hideMenu();
+      };
+
+      const menuItems = buildMenuItems(cm, view, togglePalette, goToSymbol);
+      const {el: menuEl, actions} = createMenuElement(menuItems, view, dismiss);
+
+      // Create a virtual anchor at mouse position for tippy
+      const anchor = document.createElement('div');
+      anchor.style.position = 'fixed';
+      anchor.style.left = `${event.clientX}px`;
+      anchor.style.top = `${event.clientY}px`;
+      document.body.append(anchor);
+
+      instance = createTippy(anchor, {
+        content: menuEl,
+        theme: 'menu',
+        trigger: 'manual',
+        placement: 'bottom-start',
+        interactive: true,
+        arrow: false,
+        offset: [0, 0],
+        showOnCreate: true,
+        onHidden: () => {
+          anchor.remove();
+          instance = null;
+        },
+      });
+      const rows = menuEl.querySelectorAll<HTMLElement>('.item');
+      let focusIndex = -1;
+      const setFocus = (idx: number) => {
+        focusIndex = idx;
+        for (const [rowIdx, el] of rows.entries()) {
+          el.classList.toggle('active', rowIdx === focusIndex);
+        }
+      };
+      const nextEnabled = (from: number, dir: number) => {
+        for (let step = 1; step <= actions.length; step++) {
+          const idx = (from + dir * step + actions.length) % actions.length;
+          if (actions[idx]) return idx;
+        }
+        return from;
+      };
+
+      document.addEventListener('mousedown', (e: MouseEvent) => {
+        if (!menuEl.contains(e.target as Element)) dismiss();
+      }, {signal: controller.signal});
+      document.addEventListener('keydown', (e: KeyboardEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (e.key === 'Escape') {
+          dismiss(); view.focus();
+        } else if (e.key === 'ArrowDown') {
+          setFocus(nextEnabled(focusIndex, 1));
+        } else if (e.key === 'ArrowUp') {
+          setFocus(nextEnabled(focusIndex, -1));
+        } else if (e.key === 'Enter' && focusIndex >= 0 && actions[focusIndex]) {
+          actions[focusIndex]!();
+        }
+      }, {signal: controller.signal, capture: true});
+      view.scrollDOM.addEventListener('scroll', dismiss, {signal: controller.signal, once: true});
+      document.addEventListener('scroll', dismiss, {signal: controller.signal, once: true});
+      window.addEventListener('blur', dismiss, {signal: controller.signal});
+      window.addEventListener('resize', dismiss, {signal: controller.signal});
+    },
+  });
+}
@@ -0,0 +1,39 @@
+import type {CodemirrorModules} from './main.ts';
+import type {Extension} from '@codemirror/state';
+
+/** Creates a linter for JSON files using `jsonParseLinter` from `@codemirror/lang-json`. */
+export async function createJsonLinter(cm: CodemirrorModules): Promise<Extension> {
+  const {jsonParseLinter} = await import(/* webpackChunkName: "codemirror" */ '@codemirror/lang-json');
+  const baseLinter = jsonParseLinter();
+  return cm.lint.linter((view) => {
+    return baseLinter(view).map((d) => {
+      if (d.from === d.to) {
+        const line = view.state.doc.lineAt(d.from);
+        // expand to end of line content, or at least 1 char
+        d.to = Math.min(Math.max(d.from + 1, line.to), view.state.doc.length);
+      }
+      return d;
+    });
+  });
+}
+
+/** Creates a generic linter that detects Lezer parse-tree error nodes. */
+export function createSyntaxErrorLinter(cm: CodemirrorModules): Extension {
+  return cm.lint.linter((view) => {
+    const diagnostics: {from: number, to: number, severity: 'error', message: string}[] = [];
+    const tree = cm.language.syntaxTree(view.state);
+    tree.iterate({
+      enter(node) {
+        if (node.type.isError) {
+          diagnostics.push({
+            from: node.from,
+            to: node.to === node.from ? Math.min(node.from + 1, view.state.doc.length) : node.to,
+            severity: 'error',
+            message: 'Syntax error',
+          });
+        }
+      },
+    });
+    return diagnostics;
+  });
+}
@@ -0,0 +1,330 @@
+import {extname} from '../../utils.ts';
+import {createElementFromHTML, toggleElem} from '../../utils/dom.ts';
+import {html, htmlRaw} from '../../utils/html.ts';
+import {svg} from '../../svg.ts';
+import {commandPalette} from './command-palette.ts';
+import type {PaletteCommand} from './command-palette.ts';
+import {contextMenu, collectSymbols, selectAllOccurrences} from './context-menu.ts';
+import {createJsonLinter, createSyntaxErrorLinter} from './linter.ts';
+import {clickableUrls, goToDefinitionAt, trimTrailingWhitespaceFromView} from './utils.ts';
+import type {LanguageDescription} from '@codemirror/language';
+import type {Compartment, Extension} from '@codemirror/state';
+import type {EditorView, ViewUpdate} from '@codemirror/view';
+
+// CodeEditorConfig is also used by backend, defined in "editor_util.go"
+const codeEditorConfigDefault = {
+  filename: '', // the current filename (base name, not full path), used for language detection
+  autofocus: false, // whether to autofocus the editor on load
+  previewableExtensions: [] as string[], // file extensions that support preview rendering
+  lineWrapExtensions: [] as string[], // file extensions that enable line wrapping by default
+  lineWrap: false, // whether line wrapping is enabled for the current file
+
+  indentStyle: '', // "space" or "tab", from .editorconfig, or empty for not specified (detect from source code)
+  indentSize: 0,  // number of spaces per indent level, from .editorconfig, or 0 for not specified (detect from source code)
+  tabWidth: 4, // display width of a tab character, from .editorconfig, defaults to 4
+  trimTrailingWhitespace: false, // whether to trim trailing whitespace on save, from .editorconfig
+};
+type CodeEditorConfig = typeof codeEditorConfigDefault;
+
+export type CodemirrorEditor = {
+  view: EditorView;
+  trimTrailingWhitespace: boolean;
+  togglePalette: (view: EditorView) => boolean;
+  updateFilename: (filename: string) => Promise<void>;
+  languages: LanguageDescription[];
+  compartments: {
+    wordWrap: Compartment;
+    language: Compartment;
+    tabSize: Compartment;
+    indentUnit: Compartment;
+    lint: Compartment;
+  };
+};
+
+export type CodemirrorModules = Awaited<ReturnType<typeof importCodemirror>>;
+
+async function importCodemirror() {
+  const [autocomplete, commands, language, languageData, lint, search, state, view, highlight, indentMarkers, vscodeKeymap] = await Promise.all([
+    import(/* webpackChunkName: "codemirror" */ '@codemirror/autocomplete'),
+    import(/* webpackChunkName: "codemirror" */ '@codemirror/commands'),
+    import(/* webpackChunkName: "codemirror" */ '@codemirror/language'),
+    import(/* webpackChunkName: "codemirror" */ '@codemirror/language-data'),
+    import(/* webpackChunkName: "codemirror" */ '@codemirror/lint'),
+    import(/* webpackChunkName: "codemirror" */ '@codemirror/search'),
+    import(/* webpackChunkName: "codemirror" */ '@codemirror/state'),
+    import(/* webpackChunkName: "codemirror" */ '@codemirror/view'),
+    import(/* webpackChunkName: "codemirror" */ '@lezer/highlight'),
+    import(/* webpackChunkName: "codemirror" */ '@replit/codemirror-indentation-markers'),
+    import(/* webpackChunkName: "codemirror" */ '@replit/codemirror-vscode-keymap'),
+  ]);
+  return {autocomplete, commands, language, languageData, lint, search, state, view, highlight, indentMarkers, vscodeKeymap};
+}
+
+function togglePreviewDisplay(previewable: boolean): void {
+  // FIXME: here and below, the selector is too broad, it should only query in the editor related scope
+  const previewTab = document.querySelector<HTMLElement>('a[data-tab="preview"]');
+  // the "preview tab" exists for "file code editor", but doesn't exist for "git hook editor"
+  if (!previewTab) return;
+
+  toggleElem(previewTab, previewable);
+  if (previewable) return;
+
+  // If not previewable but the "preview" tab was active (user changes the filename to a non-previewable one),
+  // then the "preview" tab becomes inactive (hidden), so the "write" tab should become active
+  if (previewTab.classList.contains('active')) {
+    const writeTab = document.querySelector<HTMLElement>('a[data-tab="write"]');
+    writeTab!.click();
+  }
+}
+
+export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameInput?: HTMLInputElement): Promise<CodemirrorEditor> {
+  const config: CodeEditorConfig = {
+    ...codeEditorConfigDefault,
+    ...JSON.parse(textarea.getAttribute('data-code-editor-config')!),
+  };
+  const previewableExts = new Set(config.previewableExtensions || []);
+  const lineWrapExts = config.lineWrapExtensions || [];
+  const cm = await importCodemirror();
+
+  const languageDescriptions: LanguageDescription[] = [
+    ...cm.languageData.languages.filter((l: LanguageDescription) => l.name !== 'Markdown'),
+    cm.language.LanguageDescription.of({
+      name: 'Markdown', extensions: ['md', 'markdown', 'mkd'],
+      load: async () => (await import('@codemirror/lang-markdown')).markdown({codeLanguages: languageDescriptions}),
+    }),
+    cm.language.LanguageDescription.of({
+      name: 'Elixir', extensions: ['ex', 'exs'],
+      load: async () => (await import('codemirror-lang-elixir')).elixir(),
+    }),
+    cm.language.LanguageDescription.of({
+      name: 'Nix', extensions: ['nix'],
+      load: async () => (await import('@replit/codemirror-lang-nix')).nix(),
+    }),
+    cm.language.LanguageDescription.of({
+      name: 'Svelte', extensions: ['svelte'],
+      load: async () => (await import('@replit/codemirror-lang-svelte')).svelte(),
+    }),
+    cm.language.LanguageDescription.of({
+      name: 'Makefile', filename: /^(GNUm|M|m)akefile$/,
+      load: async () => new cm.language.LanguageSupport(cm.language.StreamLanguage.define((await import('@codemirror/legacy-modes/mode/shell')).shell)),
+    }),
+    cm.language.LanguageDescription.of({
+      name: 'Dotenv', extensions: ['env'], filename: /^\.env(\..*)?$/,
+      load: async () => new cm.language.LanguageSupport(cm.language.StreamLanguage.define((await import('@codemirror/legacy-modes/mode/shell')).shell)),
+    }),
+    cm.language.LanguageDescription.of({
+      name: 'JSON5', extensions: ['json5', 'jsonc'],
+      load: async () => (await import('@codemirror/lang-json')).json(),
+    }),
+  ];
+  const matchedLang = cm.language.LanguageDescription.matchFilename(languageDescriptions, config.filename);
+
+  const container = document.createElement('div');
+  container.className = 'code-editor-container';
+  container.setAttribute('data-language', matchedLang?.name.toLowerCase() || '');
+  // Replace the loading placeholder with the editor container in one operation
+  // to avoid a flash where neither element is in the DOM.
+  const loading = textarea.parentNode!.querySelector<HTMLElement>('.editor-loading');
+  if (loading) {
+    loading.replaceWith(container);
+  } else {
+    textarea.parentNode!.append(container);
+  }
+
+  const loadedLang = matchedLang ? await matchedLang.load() : null;
+  const wordWrap = new cm.state.Compartment();
+  const language = new cm.state.Compartment();
+  const tabSize = new cm.state.Compartment();
+  const indentUnitComp = new cm.state.Compartment();
+  const lintComp = new cm.state.Compartment();
+  const palette = commandPalette(cm);
+
+  const goToSymbol = (view: EditorView) => {
+    const symbols = collectSymbols(cm, view);
+    const items: PaletteCommand[] = symbols.map((sym) => ({
+      label: `${sym.label}  (${sym.kind})`,
+      keys: '',
+      run: (v: EditorView) => v.dispatch({selection: {anchor: sym.from}, scrollIntoView: true}),
+    }));
+    palette.showWithItems(view, items, 'Go to symbol…');
+    return true;
+  };
+
+  const view = new cm.view.EditorView({
+    doc: textarea.defaultValue, // use defaultValue to prevent browser from restoring form values on refresh
+    parent: container,
+    extensions: [
+      cm.view.lineNumbers(),
+      cm.language.codeFolding({
+        placeholderDOM(_view: EditorView, onclick: (event: Event) => void) {
+          const el = createElementFromHTML(html`<span class="cm-foldPlaceholder">${htmlRaw(svg('octicon-kebab-horizontal', 13))}</span>`);
+          el.addEventListener('click', onclick);
+          return el as unknown as HTMLElement;
+        },
+      }),
+      cm.language.foldGutter({
+        markerDOM(open: boolean) {
+          return createElementFromHTML(svg(open ? 'octicon-chevron-down' : 'octicon-chevron-right', 13));
+        },
+      }),
+      cm.view.highlightActiveLineGutter(),
+      cm.view.highlightSpecialChars(),
+      cm.view.highlightActiveLine(),
+      cm.view.drawSelection(),
+      cm.view.dropCursor(),
+      cm.view.rectangularSelection(),
+      cm.view.crosshairCursor(),
+      cm.view.placeholder(textarea.placeholder),
+      config.trimTrailingWhitespace ? cm.view.highlightTrailingWhitespace() : [],
+      cm.search.search({top: true}),
+      cm.search.highlightSelectionMatches(),
+      cm.view.keymap.of([
+        ...cm.vscodeKeymap.vscodeKeymap,
+        ...cm.search.searchKeymap,
+        ...cm.lint.lintKeymap,
+        cm.commands.indentWithTab,
+        {key: 'Mod-k Mod-x', run: (view) => { trimTrailingWhitespaceFromView(view); return true }, preventDefault: true},
+        {key: 'Mod-Enter', run: cm.commands.insertBlankLine, preventDefault: true},
+        {key: 'Mod-k Mod-k', run: cm.commands.deleteToLineEnd, preventDefault: true},
+        {key: 'Mod-k Mod-Backspace', run: cm.commands.deleteToLineStart, preventDefault: true},
+      ]),
+      cm.state.EditorState.allowMultipleSelections.of(true),
+      cm.language.indentOnInput(),
+      cm.language.syntaxHighlighting(cm.highlight.classHighlighter),
+      cm.language.bracketMatching(),
+      indentUnitComp.of(
+        cm.language.indentUnit.of(
+          config.indentStyle === 'tab' ? '\t' : ' '.repeat(config.indentSize || 4),
+        ),
+      ),
+      cm.autocomplete.closeBrackets(),
+      cm.autocomplete.autocompletion(),
+      cm.state.EditorState.languageData.of(() => [{autocomplete: cm.autocomplete.completeAnyWord}]),
+      cm.indentMarkers.indentationMarkers({
+        colors: {
+          light: 'transparent',
+          dark: 'transparent',
+          activeLight: 'var(--color-secondary-dark-3)',
+          activeDark: 'var(--color-secondary-dark-3)',
+        },
+      }),
+      cm.commands.history(),
+      palette.extensions,
+      cm.view.keymap.of([
+        {key: 'Mod-Shift-o', run: goToSymbol, preventDefault: true},
+        {key: 'Mod-F2', run: (v) => { selectAllOccurrences(cm, v); return true }, preventDefault: true},
+        {key: 'F12', run: (v) => goToDefinitionAt(cm, v, v.state.selection.main.from), preventDefault: true},
+      ]),
+      contextMenu(cm, palette.togglePalette, goToSymbol),
+      clickableUrls(cm),
+      tabSize.of(cm.state.EditorState.tabSize.of(config.tabWidth || 4)),
+      wordWrap.of(config.lineWrap ? cm.view.EditorView.lineWrapping : []),
+      language.of(loadedLang ?? []),
+      lintComp.of(await getLinterExtension(cm, config.filename, loadedLang)),
+      cm.view.EditorView.updateListener.of((update: ViewUpdate) => {
+        if (update.docChanged) {
+          textarea.value = update.state.doc.toString();
+          textarea.dispatchEvent(new Event('change')); // needed for jquery-are-you-sure
+        }
+      }),
+    ],
+  });
+
+  const editor: CodemirrorEditor = {
+    view,
+    trimTrailingWhitespace: config.trimTrailingWhitespace,
+    togglePalette: palette.togglePalette,
+    updateFilename: async (filename: string) => {
+      togglePreviewDisplay(previewableExts.has(extname(filename)));
+      await updateEditorLanguage(cm, editor, filename, lineWrapExts);
+    },
+    languages: languageDescriptions,
+    compartments: {wordWrap, language, tabSize, indentUnit: indentUnitComp, lint: lintComp},
+  };
+
+  const elEditorOptions = textarea.closest('form')!.querySelector('.code-editor-options');
+  if (elEditorOptions) {
+    const indentStyleSelect = elEditorOptions.querySelector<HTMLSelectElement>('.js-indent-style-select')!;
+    const indentSizeSelect = elEditorOptions.querySelector<HTMLSelectElement>('.js-indent-size-select')!;
+
+    const applyIndentSettings = (style: string, size: number) => {
+      view.dispatch({
+        effects: [
+          indentUnitComp.reconfigure(cm.language.indentUnit.of(style === 'tab' ? '\t' : ' '.repeat(size))),
+          tabSize.reconfigure(cm.state.EditorState.tabSize.of(size)),
+        ],
+      });
+    };
+
+    indentStyleSelect.addEventListener('change', () => {
+      applyIndentSettings(indentStyleSelect.value, Number(indentSizeSelect.value) || 4);
+    });
+
+    indentSizeSelect.addEventListener('change', () => {
+      applyIndentSettings(indentStyleSelect.value || 'space', Number(indentSizeSelect.value) || 4);
+    });
+
+    elEditorOptions.querySelector('.js-code-find')!.addEventListener('click', () => {
+      if (cm.search.searchPanelOpen(view.state)) {
+        cm.search.closeSearchPanel(view);
+      } else {
+        cm.search.openSearchPanel(view);
+      }
+    });
+
+    elEditorOptions.querySelector('.js-code-command-palette')!.addEventListener('click', () => {
+      palette.togglePalette(view);
+    });
+
+    elEditorOptions.querySelector<HTMLSelectElement>('.js-line-wrap-select')!.addEventListener('change', (e) => {
+      const target = e.target as HTMLSelectElement;
+      view.dispatch({
+        effects: wordWrap.reconfigure(target.value === 'on' ? cm.view.EditorView.lineWrapping : []),
+      });
+    });
+  }
+
+  togglePreviewDisplay(previewableExts.has(extname(config.filename)));
+
+  if (config.autofocus) {
+    editor.view.focus();
+  } else if (filenameInput) {
+    filenameInput.focus();
+  }
+
+  return editor;
+}
+
+// files that are JSONC despite having a .json extension
+const jsoncFilesRegex = /^([jt]sconfig.*|devcontainer)\.json$/;
+
+async function getLinterExtension(cm: CodemirrorModules, filename: string, loadedLang: {language: unknown} | null): Promise<Extension> {
+  const ext = extname(filename).toLowerCase();
+  if (ext === '.json' || ext === '.map') {
+    return jsoncFilesRegex.test(filename) ? [] : [cm.lint.lintGutter(), await createJsonLinter(cm)];
+  }
+  // StreamLanguage (legacy modes) don't produce Lezer error nodes
+  if (!loadedLang || loadedLang.language instanceof cm.language.StreamLanguage) return [];
+  return [cm.lint.lintGutter(), createSyntaxErrorLinter(cm)];
+}
+
+async function updateEditorLanguage(cm: CodemirrorModules, editor: CodemirrorEditor, filename: string, lineWrapExts: string[]): Promise<void> {
+  const {compartments, view, languages: editorLanguages} = editor;
+
+  const newLanguage = cm.language.LanguageDescription.matchFilename(editorLanguages, filename);
+  const newLoadedLang = newLanguage ? await newLanguage.load() : null;
+  view.dom.closest('.code-editor-container')!.setAttribute('data-language', newLanguage?.name.toLowerCase() || '');
+  view.dispatch(
+    {
+      effects: [
+        compartments.wordWrap.reconfigure(
+          lineWrapExts.includes(extname(filename).toLowerCase()) ? cm.view.EditorView.lineWrapping : [],
+        ),
+        compartments.language.reconfigure(newLoadedLang ?? []),
+        compartments.lint.reconfigure(await getLinterExtension(cm, filename, newLoadedLang)),
+      ],
+    },
+    // clear stale diagnostics from the previous language on filename change
+    cm.lint.setDiagnostics(view.state, []),
+  );
+}
@@ -0,0 +1,47 @@
+import {findUrlAtPosition, trimUrlPunctuation, urlRawRegex} from './utils.ts';
+
+function matchUrls(text: string): string[] {
+  return Array.from(text.matchAll(urlRawRegex), (m) => trimUrlPunctuation(m[0]));
+}
+
+test('matchUrls', () => {
+  expect(matchUrls('visit https://example.com for info')).toEqual(['https://example.com']);
+  expect(matchUrls('see https://example.com.')).toEqual(['https://example.com']);
+  expect(matchUrls('see https://example.com, and')).toEqual(['https://example.com']);
+  expect(matchUrls('see https://example.com; and')).toEqual(['https://example.com']);
+  expect(matchUrls('(https://example.com)')).toEqual(['https://example.com']);
+  expect(matchUrls('"https://example.com"')).toEqual(['https://example.com']);
+  expect(matchUrls('https://example.com/path?q=1&b=2#hash')).toEqual(['https://example.com/path?q=1&b=2#hash']);
+  expect(matchUrls('https://example.com/path?q=1&b=2#hash.')).toEqual(['https://example.com/path?q=1&b=2#hash']);
+  expect(matchUrls('https://x.co')).toEqual(['https://x.co']);
+  expect(matchUrls('https://example.com/path_(wiki)')).toEqual(['https://example.com/path_(wiki)']);
+  expect(matchUrls('https://en.wikipedia.org/wiki/Rust_(programming_language)')).toEqual(['https://en.wikipedia.org/wiki/Rust_(programming_language)']);
+  expect(matchUrls('(https://en.wikipedia.org/wiki/Rust_(programming_language))')).toEqual(['https://en.wikipedia.org/wiki/Rust_(programming_language)']);
+  expect(matchUrls('http://example.com')).toEqual(['http://example.com']);
+  expect(matchUrls('no url here')).toEqual([]);
+  expect(matchUrls('https://a.com and https://b.com')).toEqual(['https://a.com', 'https://b.com']);
+  expect(matchUrls('[![](https://img.shields.io/npm/v/pkg.svg?style=flat)](https://www.npmjs.org/package/pkg)')).toEqual(['https://img.shields.io/npm/v/pkg.svg?style=flat', 'https://www.npmjs.org/package/pkg']);
+});
+
+test('trimUrlPunctuation', () => {
+  expect(trimUrlPunctuation('https://example.com.')).toEqual('https://example.com');
+  expect(trimUrlPunctuation('https://example.com,')).toEqual('https://example.com');
+  expect(trimUrlPunctuation('https://example.com;')).toEqual('https://example.com');
+  expect(trimUrlPunctuation('https://example.com:')).toEqual('https://example.com');
+  expect(trimUrlPunctuation("https://example.com'")).toEqual('https://example.com');
+  expect(trimUrlPunctuation('https://example.com"')).toEqual('https://example.com');
+  expect(trimUrlPunctuation('https://example.com.,;')).toEqual('https://example.com');
+  expect(trimUrlPunctuation('https://example.com/path')).toEqual('https://example.com/path');
+  expect(trimUrlPunctuation('https://example.com/path_(wiki)')).toEqual('https://example.com/path_(wiki)');
+  expect(trimUrlPunctuation('https://example.com)')).toEqual('https://example.com');
+  expect(trimUrlPunctuation('https://en.wikipedia.org/wiki/Rust_(lang))')).toEqual('https://en.wikipedia.org/wiki/Rust_(lang)');
+});
+
+test('findUrlAtPosition', () => {
+  const doc = 'visit https://example.com for info';
+  expect(findUrlAtPosition(doc, 0)).toBeNull();
+  expect(findUrlAtPosition(doc, 6)).toEqual('https://example.com');
+  expect(findUrlAtPosition(doc, 15)).toEqual('https://example.com');
+  expect(findUrlAtPosition(doc, 24)).toEqual('https://example.com');
+  expect(findUrlAtPosition(doc, 25)).toBeNull();
+});
@@ -0,0 +1,131 @@
+import type {EditorView, ViewUpdate} from '@codemirror/view';
+import type {CodemirrorModules} from './main.ts';
+
+/** Remove trailing whitespace from all lines in the editor. */
+export function trimTrailingWhitespaceFromView(view: EditorView): void {
+  const changes = [];
+  const doc = view.state.doc;
+  for (let i = 1; i <= doc.lines; i++) {
+    const line = doc.line(i);
+    const trimmed = line.text.replace(/\s+$/, '');
+    if (trimmed.length < line.text.length) {
+      changes.push({from: line.from + trimmed.length, to: line.to});
+    }
+  }
+  if (changes.length) view.dispatch({changes});
+}
+
+/** Matches URLs, excluding characters that are never valid unencoded in URLs per RFC 3986. */
+export const urlRawRegex = /\bhttps?:\/\/[^\s<>[\]]+/gi;
+
+/** Strip trailing punctuation that is likely not part of the URL. */
+export function trimUrlPunctuation(url: string): string {
+  url = url.replace(/[.,;:'"]+$/, '');
+  // Strip trailing closing parens only if unbalanced (not part of the URL like Wikipedia links)
+  while (url.endsWith(')') && (url.match(/\(/g) || []).length < (url.match(/\)/g) || []).length) {
+    url = url.slice(0, -1);
+  }
+  return url;
+}
+
+/** Find the URL at the given character position in a document string, or null if none. */
+export function findUrlAtPosition(doc: string, pos: number): string | null {
+  for (const match of doc.matchAll(urlRawRegex)) {
+    const url = trimUrlPunctuation(match[0]);
+    if (match.index !== undefined && pos >= match.index && pos < match.index + url.length) {
+      return url;
+    }
+  }
+  return null;
+}
+
+// Lezer syntax tree node names for identifier usages and definitions across grammars
+const usageNodes = new Set(['VariableName', 'Identifier', 'TypeIdentifier', 'TypeName', 'FieldIdentifier']);
+const definitionNodes = new Set(['VariableDefinition', 'DefName', 'Definition', 'TypeDefinition', 'TypeDef']);
+
+export function goToDefinitionAt(cm: CodemirrorModules, view: EditorView, pos: number): boolean {
+  const tree = cm.language.syntaxTree(view.state);
+  const node = tree.resolveInner(pos, 1);
+  if (!node || !usageNodes.has(node.name)) return false;
+  const name = view.state.doc.sliceString(node.from, node.to);
+  let target: number | null = null;
+  tree.iterate({
+    enter(n): false | void {
+      if (target !== null) return false;
+      if (definitionNodes.has(n.name) && n.from !== node.from && view.state.doc.sliceString(n.from, n.to) === name) {
+        target = n.from;
+        return false;
+      }
+    },
+  });
+  if (target === null) return false;
+  view.dispatch({selection: {anchor: target}, scrollIntoView: true});
+  return true;
+}
+
+/** CodeMirror extension that makes URLs clickable via Ctrl/Cmd+click. */
+export function clickableUrls(cm: CodemirrorModules) {
+  const urlMark = cm.view.Decoration.mark({class: 'cm-url'});
+  const urlDecorator = new cm.view.MatchDecorator({
+    regexp: urlRawRegex,
+    decorate: (add, from, _to, match) => {
+      const trimmed = trimUrlPunctuation(match[0]);
+      add(from, from + trimmed.length, urlMark);
+    },
+  });
+
+  const plugin = cm.view.ViewPlugin.fromClass(class {
+    decorations: ReturnType<typeof urlDecorator.createDeco>;
+    constructor(view: EditorView) {
+      this.decorations = urlDecorator.createDeco(view);
+    }
+    update(update: ViewUpdate) {
+      this.decorations = urlDecorator.updateDeco(update, this.decorations);
+    }
+  }, {decorations: (v) => v.decorations});
+
+  const handler = cm.view.EditorView.domEventHandlers({
+    mousedown(event: MouseEvent, view: EditorView) {
+      if (!event.metaKey && !event.ctrlKey) return false;
+      const pos = view.posAtCoords({x: event.clientX, y: event.clientY});
+      if (pos === null) return false;
+      const line = view.state.doc.lineAt(pos);
+      const url = findUrlAtPosition(line.text, pos - line.from);
+      if (url) {
+        window.open(url, '_blank', 'noopener');
+        event.preventDefault();
+        return true;
+      }
+      // Fall back to go-to-definition: find the symbol at cursor and jump to its definition
+      if (goToDefinitionAt(cm, view, pos)) {
+        event.preventDefault();
+        return true;
+      }
+      return false;
+    },
+  });
+
+  const modClass = cm.view.ViewPlugin.fromClass(class {
+    container: Element;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleKeyUp: (e: KeyboardEvent) => void;
+    handleBlur: () => void;
+    constructor(view: EditorView) {
+      this.container = view.dom.closest('.code-editor-container')!;
+      this.handleKeyDown = (e) => { if (e.key === 'Meta' || e.key === 'Control') this.container.classList.add('cm-mod-held'); };
+      this.handleKeyUp = (e) => { if (e.key === 'Meta' || e.key === 'Control') this.container.classList.remove('cm-mod-held'); };
+      this.handleBlur = () => this.container.classList.remove('cm-mod-held');
+      document.addEventListener('keydown', this.handleKeyDown);
+      document.addEventListener('keyup', this.handleKeyUp);
+      window.addEventListener('blur', this.handleBlur);
+    }
+    destroy() {
+      document.removeEventListener('keydown', this.handleKeyDown);
+      document.removeEventListener('keyup', this.handleKeyUp);
+      window.removeEventListener('blur', this.handleBlur);
+      this.container.classList.remove('cm-mod-held');
+    }
+  });
+
+  return [plugin, handler, modClass];
+}
@@ -1,4 +1,4 @@
-import {showGlobalErrorMessage, shouldIgnoreError} from './errors.ts';
+import {showGlobalErrorMessage} from './errors.ts';

 test('showGlobalErrorMessage', () => {
  document.body.innerHTML = '<div class="page-content"></div>';
@@ -10,19 +10,3 @@ test('showGlobalErrorMessage', () => {
  expect(document.body.innerHTML).toContain('>test msg 2<');
  expect(document.querySelectorAll('.js-global-error').length).toEqual(2);
 });
-
-test('shouldIgnoreError', () => {
-  for (const url of [
-    'https://gitea.test/assets/js/monaco.D14TzjS9.js',
-    'https://gitea.test/assets/js/editor.api2.BdhK7zNg.js',
-    'https://gitea.test/assets/js/editor.worker.BYgvyFya.js',
-  ]) {
-    const err = new Error('test');
-    err.stack = `Error: test\n    at ${url}:1:1`;
-    expect(shouldIgnoreError(err)).toEqual(true);
-  }
-
-  const otherError = new Error('test');
-  otherError.stack = 'Error: test\n    at https://gitea.test/assets/js/index.js:1:1';
-  expect(shouldIgnoreError(otherError)).toEqual(false);
-});
@@ -23,19 +23,6 @@ export function showGlobalErrorMessage(msg: string, msgType: Intent = 'error') {
  msgContainer.prepend(msgDiv);
 }

-export function shouldIgnoreError(err: Error) {
-  const ignorePatterns: Array<RegExp> = [
-    // https://github.com/go-gitea/gitea/issues/30861
-    // https://github.com/microsoft/monaco-editor/issues/4496
-    // https://github.com/microsoft/monaco-editor/issues/4679
-    /\/assets\/js\/.*(monaco|editor\.(api|worker))/,
-  ];
-  for (const pattern of ignorePatterns) {
-    if (pattern.test(err.stack ?? '')) return true;
-  }
-  return false;
-}
-
 export function processWindowErrorEvent({error, reason, message, type, filename, lineno, colno}: ErrorEvent & PromiseRejectionEvent) {
  const err = error ?? reason;
  const assetBaseUrl = String(new URL(`${window.config?.assetUrlPrefix ?? '/assets'}/`, window.location.origin));
@@ -51,13 +38,9 @@ export function processWindowErrorEvent({error, reason, message, type, filename,
    if (runModeIsProd) return;
  }

-  if (err instanceof Error) {
-    // If the error stack trace does not include the base URL of our script assets, it likely came
-    // from a browser extension or inline script. Do not show such errors in production.
-    if (!err.stack?.includes(assetBaseUrl) && runModeIsProd) return;
-    // Ignore some known errors that are unable to fix
-    if (shouldIgnoreError(err)) return;
-  }
+  // If the error stack trace does not include the base URL of our script assets, it likely came
+  // from a browser extension or inline script. Do not show such errors in production.
+  if (err instanceof Error && !err.stack?.includes(assetBaseUrl) && runModeIsProd) return;

  let msg = err?.message ?? message;
  if (lineno) msg += ` (${filename} @ ${lineno}:${colno})`;
@@ -1,17 +0,0 @@
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-
-window.MonacoEnvironment = {
-  getWorker(_: string, label: string) {
-    if (label === 'json') return new jsonWorker();
-    if (label === 'css' || label === 'scss' || label === 'less') return new cssWorker();
-    if (label === 'html' || label === 'handlebars' || label === 'razor') return new htmlWorker();
-    if (label === 'typescript' || label === 'javascript') return new tsWorker();
-    return new editorWorker();
-  },
-};
-
-export * from 'monaco-editor';
@@ -10,12 +10,17 @@ function initShortcutKbd(kbd: HTMLElement) {
  kbd.setAttribute('aria-keyshortcuts', kbd.getAttribute('data-shortcut-keys')!);
 }

+function shortcutWrapper(el: HTMLElement): HTMLElement | null {
+  const parent = el.parentElement;
+  return parent?.matches('.global-shortcut-wrapper') ? parent : null;
+}
+
 function elemFromKbd(kbd: HTMLElement): HTMLInputElement | HTMLTextAreaElement | null {
-  return kbd.parentElement!.querySelector<HTMLInputElement>('input, textarea') || null;
+  return shortcutWrapper(kbd)?.querySelector<HTMLInputElement>('input, textarea') || null;
 }

 function kbdFromElem(input: HTMLElement): HTMLElement | null {
-  return input.parentElement!.querySelector<HTMLElement>('kbd') || null;
+  return shortcutWrapper(input)?.querySelector<HTMLElement>('kbd') || null;
 }

 export function initGlobalShortcut() {
@@ -27,6 +27,14 @@ export function isObject<T = Record<string, any>>(obj: any): obj is T {
  return Object.prototype.toString.call(obj) === '[object Object]';
 }

+/** Whether the current platform is macOS or iOS. */
+export const isMac = /Mac/i.test(navigator.userAgent);
+
+/** Platform-aware display symbols for keyboard modifier and special keys. */
+export const keySymbols: Record<string, string> = isMac ?
+  {Mod: '⌘', Alt: '⌥', Shift: '⇧', Ctrl: '⌃', Up: '↑', Down: '↓', Enter: '⏎'} :
+  {Mod: 'Ctrl', Shift: 'Shift', Alt: 'Alt', Up: '↑', Down: '↓', Enter: '⏎'};
+
 /** returns whether a dark theme is enabled */
 export function isDarkTheme(): boolean {
  const style = window.getComputedStyle(document.documentElement);
				`@@ -1 +0,0 @@`
				`/* Placeholder, there is no light theme, it uses CM defaults */`