From e2e850923994d1a3f221544608c79ec1271cca1d Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 31 Mar 2026 23:50:45 +0200 Subject: [PATCH] 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 image --------- Signed-off-by: silverwind Co-authored-by: Claude Opus 4.6 Co-authored-by: wxiaoguang Co-authored-by: Giteabot Co-authored-by: Lunny Xiao --- eslint.config.ts | 4 +- options/locale/locale_en-US.json | 5 +- package.json | 18 +- playwright.config.ts | 2 +- pnpm-lock.yaml | 678 +++++++++++++++++- routers/web/repo/editor.go | 7 +- routers/web/repo/editor_apply_patch.go | 2 +- routers/web/repo/editor_util.go | 28 +- routers/web/repo/setting/git_hooks.go | 2 +- templates/repo/editor/commit_form.tmpl | 2 +- templates/repo/editor/common_breadcrumb.tmpl | 2 +- templates/repo/editor/edit.tmpl | 6 +- templates/repo/editor/options.tmpl | 8 +- templates/repo/editor/patch.tmpl | 4 +- templates/repo/settings/githook_edit.tmpl | 11 +- tests/e2e/codeeditor.test.ts | 21 + tests/e2e/utils.ts | 2 +- web_src/css/base.css | 15 +- web_src/css/chroma/base.css | 46 -- web_src/css/chroma/dark.css | 76 -- web_src/css/chroma/light.css | 76 -- web_src/css/codemirror/dark.css | 106 --- web_src/css/codemirror/light.css | 1 - web_src/css/easymde.css | 23 + web_src/css/features/codeeditor.css | 47 -- web_src/css/index.css | 4 +- web_src/css/markup/content.css | 2 +- web_src/css/modules/chroma.css | 79 ++ web_src/css/modules/codeeditor.css | 569 +++++++++++++++ web_src/css/modules/shortcut.css | 24 +- web_src/css/repo.css | 16 +- web_src/css/themes/theme-gitea-dark.css | 49 +- web_src/css/themes/theme-gitea-light.css | 49 +- web_src/js/features/codeeditor.ts | 255 ------- web_src/js/features/repo-editor.ts | 20 +- web_src/js/features/repo-settings.ts | 5 +- web_src/js/globals.d.ts | 5 - .../js/modules/codeeditor/command-palette.ts | 216 ++++++ web_src/js/modules/codeeditor/context-menu.ts | 249 +++++++ web_src/js/modules/codeeditor/linter.ts | 39 + web_src/js/modules/codeeditor/main.ts | 330 +++++++++ web_src/js/modules/codeeditor/utils.test.ts | 47 ++ web_src/js/modules/codeeditor/utils.ts | 131 ++++ web_src/js/modules/errors.test.ts | 18 +- web_src/js/modules/errors.ts | 23 +- web_src/js/modules/monaco.ts | 17 - web_src/js/modules/shortcut.ts | 9 +- web_src/js/utils.ts | 8 + 48 files changed, 2590 insertions(+), 766 deletions(-) create mode 100644 tests/e2e/codeeditor.test.ts delete mode 100644 web_src/css/chroma/base.css delete mode 100644 web_src/css/chroma/dark.css delete mode 100644 web_src/css/chroma/light.css delete mode 100644 web_src/css/codemirror/dark.css delete mode 100644 web_src/css/codemirror/light.css delete mode 100644 web_src/css/features/codeeditor.css create mode 100644 web_src/css/modules/chroma.css create mode 100644 web_src/css/modules/codeeditor.css delete mode 100644 web_src/js/features/codeeditor.ts create mode 100644 web_src/js/modules/codeeditor/command-palette.ts create mode 100644 web_src/js/modules/codeeditor/context-menu.ts create mode 100644 web_src/js/modules/codeeditor/linter.ts create mode 100644 web_src/js/modules/codeeditor/main.ts create mode 100644 web_src/js/modules/codeeditor/utils.test.ts create mode 100644 web_src/js/modules/codeeditor/utils.ts delete mode 100644 web_src/js/modules/monaco.ts diff --git a/eslint.config.ts b/eslint.config.ts index b52c8aad39..2afdf1736c 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -329,7 +329,7 @@ export default defineConfig([ 'github/no-innerText': [2], 'github/no-then': [2], 'github/no-useless-passive': [2], - 'github/prefer-observers': [2], + 'github/prefer-observers': [0], 'github/require-passive-events': [2], 'github/unescaped-html-literal': [2], 'grouped-accessor-pairs': [2], @@ -1013,7 +1013,7 @@ export default defineConfig([ }, }, { - files: ['*', 'tools/**/*'], + files: ['*', 'tools/**/*', 'tests/**/*'], languageOptions: {globals: globals.nodeBuiltin}, }, { diff --git a/options/locale/locale_en-US.json b/options/locale/locale_en-US.json index 199637d76b..ce9f1027aa 100644 --- a/options/locale/locale_en-US.json +++ b/options/locale/locale_en-US.json @@ -213,6 +213,9 @@ "editor.buttons.switch_to_legacy.tooltip": "Use the legacy editor instead", "editor.buttons.enable_monospace_font": "Enable monospace font", "editor.buttons.disable_monospace_font": "Disable monospace font", + "editor.code_editor.command_palette": "Command Palette", + "editor.code_editor.find": "Find", + "editor.code_editor.placeholder": "Enter file content here", "filter.string.asc": "A–Z", "filter.string.desc": "Z–A", "error.occurred": "An error occurred", @@ -2250,8 +2253,6 @@ "repo.settings.webhook.delivery.success": "An event has been added to the delivery queue. It may take few seconds before it shows up in the delivery history.", "repo.settings.githooks_desc": "Git Hooks are powered by Git itself. You can edit hook files below to set up custom operations.", "repo.settings.githook_edit_desc": "If the hook is inactive, sample content will be presented. Leaving content to an empty value will disable this hook.", - "repo.settings.githook_name": "Hook Name", - "repo.settings.githook_content": "Hook Content", "repo.settings.update_githook": "Update Hook", "repo.settings.add_webhook_desc": "Gitea will send POST requests with a specified content type to the target URL. Read more in the webhooks guide.", "repo.settings.payload_url": "Target URL", diff --git a/package.json b/package.json index 40ce7bc9d0..29d80fb717 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,28 @@ "@citation-js/plugin-bibtex": "0.7.21", "@citation-js/plugin-csl": "0.7.22", "@citation-js/plugin-software-formats": "0.6.2", + "@codemirror/autocomplete": "6.20.1", + "@codemirror/commands": "6.10.3", + "@codemirror/lang-json": "6.0.2", + "@codemirror/lang-markdown": "6.5.0", + "@codemirror/language": "6.12.3", + "@codemirror/language-data": "6.5.2", + "@codemirror/legacy-modes": "6.5.2", + "@codemirror/lint": "6.9.5", + "@codemirror/search": "6.6.0", + "@codemirror/state": "6.6.0", + "@codemirror/view": "6.40.0", "@github/markdown-toolbar-element": "2.2.3", "@github/paste-markdown": "1.5.3", "@github/text-expander-element": "2.9.4", + "@lezer/highlight": "1.2.3", "@mcaptcha/vanilla-glue": "0.1.0-alpha-3", "@mermaid-js/layout-elk": "0.2.1", "@primer/octicons": "19.23.1", + "@replit/codemirror-indentation-markers": "6.5.3", + "@replit/codemirror-lang-nix": "6.0.1", + "@replit/codemirror-lang-svelte": "6.0.0", + "@replit/codemirror-vscode-keymap": "6.0.2", "@resvg/resvg-wasm": "2.6.2", "@silverwind/vue3-calendar-heatmap": "2.1.1", "@vitejs/plugin-vue": "6.0.5", @@ -25,6 +41,7 @@ "chartjs-adapter-dayjs-4": "1.0.4", "chartjs-plugin-zoom": "2.2.0", "clippie": "4.1.10", + "codemirror-lang-elixir": "4.0.1", "colord": "2.9.3", "compare-versions": "6.1.1", "cropperjs": "1.6.2", @@ -38,7 +55,6 @@ "js-yaml": "4.1.1", "katex": "0.16.43", "mermaid": "11.13.0", - "monaco-editor": "0.55.1", "online-3d-viewer": "0.18.0", "pdfobject": "2.3.1", "perfect-debounce": "2.1.0", diff --git a/playwright.config.ts b/playwright.config.ts index e318a79d0c..00582a4807 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -14,7 +14,7 @@ export default defineConfig({ timeout, }, use: { - baseURL: env.GITEA_TEST_E2E_URL?.replace?.(/\/$/g, ''), + baseURL: env.GITEA_TEST_E2E_URL?.replace?.(/\/$/, ''), locale: 'en-US', actionTimeout: timeout, navigationTimeout: 2 * timeout, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 56a7ab5493..444e6f863c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,39 @@ importers: '@citation-js/plugin-software-formats': specifier: 0.6.2 version: 0.6.2 + '@codemirror/autocomplete': + specifier: 6.20.1 + version: 6.20.1 + '@codemirror/commands': + specifier: 6.10.3 + version: 6.10.3 + '@codemirror/lang-json': + specifier: 6.0.2 + version: 6.0.2 + '@codemirror/lang-markdown': + specifier: 6.5.0 + version: 6.5.0 + '@codemirror/language': + specifier: 6.12.3 + version: 6.12.3 + '@codemirror/language-data': + specifier: 6.5.2 + version: 6.5.2 + '@codemirror/legacy-modes': + specifier: 6.5.2 + version: 6.5.2 + '@codemirror/lint': + specifier: 6.9.5 + version: 6.9.5 + '@codemirror/search': + specifier: 6.6.0 + version: 6.6.0 + '@codemirror/state': + specifier: 6.6.0 + version: 6.6.0 + '@codemirror/view': + specifier: 6.40.0 + version: 6.40.0 '@github/markdown-toolbar-element': specifier: 2.2.3 version: 2.2.3 @@ -47,6 +80,9 @@ importers: '@github/text-expander-element': specifier: 2.9.4 version: 2.9.4 + '@lezer/highlight': + specifier: 1.2.3 + version: 1.2.3 '@mcaptcha/vanilla-glue': specifier: 0.1.0-alpha-3 version: 0.1.0-alpha-3 @@ -56,6 +92,18 @@ importers: '@primer/octicons': specifier: 19.23.1 version: 19.23.1 + '@replit/codemirror-indentation-markers': + specifier: 6.5.3 + version: 6.5.3(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0) + '@replit/codemirror-lang-nix': + specifier: 6.0.1 + version: 6.0.1(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)(@lezer/common@1.5.1)(@lezer/highlight@1.2.3)(@lezer/lr@1.4.8) + '@replit/codemirror-lang-svelte': + specifier: 6.0.0 + version: 6.0.0(@codemirror/autocomplete@6.20.1)(@codemirror/lang-css@6.3.1)(@codemirror/lang-html@6.4.11)(@codemirror/lang-javascript@6.2.5)(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)(@lezer/common@1.5.1)(@lezer/highlight@1.2.3)(@lezer/javascript@1.5.4)(@lezer/lr@1.4.8) + '@replit/codemirror-vscode-keymap': + specifier: 6.0.2 + version: 6.0.2(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.5)(@codemirror/search@6.6.0)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0) '@resvg/resvg-wasm': specifier: 2.6.2 version: 2.6.2 @@ -83,6 +131,9 @@ importers: clippie: specifier: 4.1.10 version: 4.1.10 + codemirror-lang-elixir: + specifier: 4.0.1 + version: 4.0.1 colord: specifier: 2.9.3 version: 2.9.3 @@ -122,9 +173,6 @@ importers: mermaid: specifier: 11.13.0 version: 11.13.0 - monaco-editor: - specifier: 0.55.1 - version: 0.55.1 online-3d-viewer: specifier: 0.18.0 version: 0.18.0 @@ -443,6 +491,96 @@ packages: resolution: {integrity: sha512-3XQOO3u4WXY/7AWZyQ+9SuBzS8bYTlJ+NF1uCgrZO64g36nK5iIc5YV9cBl2TL2QhHF6S36nvAsXsj5fX9FeHw==} engines: {node: '>=14.0.0'} + '@codemirror/autocomplete@6.20.1': + resolution: {integrity: sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==} + + '@codemirror/commands@6.10.3': + resolution: {integrity: sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==} + + '@codemirror/lang-angular@0.1.4': + resolution: {integrity: sha512-oap+gsltb/fzdlTQWD6BFF4bSLKcDnlxDsLdePiJpCVNKWXSTAbiiQeYI3UmES+BLAdkmIC1WjyztC1pi/bX4g==} + + '@codemirror/lang-cpp@6.0.3': + resolution: {integrity: sha512-URM26M3vunFFn9/sm6rzqrBzDgfWuDixp85uTY49wKudToc2jTHUrKIGGKs+QWND+YLofNNZpxcNGRynFJfvgA==} + + '@codemirror/lang-css@6.3.1': + resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==} + + '@codemirror/lang-go@6.0.1': + resolution: {integrity: sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==} + + '@codemirror/lang-html@6.4.11': + resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==} + + '@codemirror/lang-java@6.0.2': + resolution: {integrity: sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==} + + '@codemirror/lang-javascript@6.2.5': + resolution: {integrity: sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==} + + '@codemirror/lang-jinja@6.0.0': + resolution: {integrity: sha512-47MFmRcR8UAxd8DReVgj7WJN1WSAMT7OJnewwugZM4XiHWkOjgJQqvEM1NpMj9ALMPyxmlziEI1opH9IaEvmaw==} + + '@codemirror/lang-json@6.0.2': + resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==} + + '@codemirror/lang-less@6.0.2': + resolution: {integrity: sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==} + + '@codemirror/lang-liquid@6.3.2': + resolution: {integrity: sha512-6PDVU3ZnfeYyz1at1E/ttorErZvZFXXt1OPhtfe1EZJ2V2iDFa0CwPqPgG5F7NXN0yONGoBogKmFAafKTqlwIw==} + + '@codemirror/lang-markdown@6.5.0': + resolution: {integrity: sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==} + + '@codemirror/lang-php@6.0.2': + resolution: {integrity: sha512-ZKy2v1n8Fc8oEXj0Th0PUMXzQJ0AIR6TaZU+PbDHExFwdu+guzOA4jmCHS1Nz4vbFezwD7LyBdDnddSJeScMCA==} + + '@codemirror/lang-python@6.2.1': + resolution: {integrity: sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==} + + '@codemirror/lang-rust@6.0.2': + resolution: {integrity: sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==} + + '@codemirror/lang-sass@6.0.2': + resolution: {integrity: sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==} + + '@codemirror/lang-sql@6.10.0': + resolution: {integrity: sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==} + + '@codemirror/lang-vue@0.1.3': + resolution: {integrity: sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==} + + '@codemirror/lang-wast@6.0.2': + resolution: {integrity: sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==} + + '@codemirror/lang-xml@6.1.0': + resolution: {integrity: sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==} + + '@codemirror/lang-yaml@6.1.3': + resolution: {integrity: sha512-AZ8DJBuXGVHybpBQhmZtgew5//4hv3tdkXnr3vDmOUMJRuB6vn/uuwtmTOTlqEaQFg3hQSVeA90NmvIQyUV6FQ==} + + '@codemirror/language-data@6.5.2': + resolution: {integrity: sha512-CPkWBKrNS8stYbEU5kwBwTf3JB1kghlbh4FSAwzGW2TEscdeHHH4FGysREW86Mqnj3Qn09s0/6Ea/TutmoTobg==} + + '@codemirror/language@6.12.3': + resolution: {integrity: sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==} + + '@codemirror/legacy-modes@6.5.2': + resolution: {integrity: sha512-/jJbwSTazlQEDOQw2FJ8LEEKVS72pU0lx6oM54kGpL8t/NJ2Jda3CZ4pcltiKTdqYSRk3ug1B3pil1gsjA6+8Q==} + + '@codemirror/lint@6.9.5': + resolution: {integrity: sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==} + + '@codemirror/search@6.6.0': + resolution: {integrity: sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==} + + '@codemirror/state@6.6.0': + resolution: {integrity: sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==} + + '@codemirror/view@6.40.0': + resolution: {integrity: sha512-WA0zdU7xfF10+5I3HhUUq3kqOx3KjqmtQ9lqZjfK7jtYk4G72YW9rezcSywpaUMCWOMlq+6E0pO1IWg1TNIhtg==} + '@csstools/css-calc@3.1.1': resolution: {integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==} engines: {node: '>=20.19.0'} @@ -782,6 +920,60 @@ packages: '@kurkle/color@0.3.4': resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==} + '@lezer/common@1.5.1': + resolution: {integrity: sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==} + + '@lezer/cpp@1.1.5': + resolution: {integrity: sha512-DIhSXmYtJKLehrjzDFN+2cPt547ySQ41nA8yqcDf/GxMc+YM736xqltFkvADL2M0VebU5I+3+4ks2Vv+Kyq3Aw==} + + '@lezer/css@1.3.3': + resolution: {integrity: sha512-RzBo8r+/6QJeow7aPHIpGVIH59xTcJXp399820gZoMo9noQDRVpJLheIBUicYwKcsbOYoBRoLZlf2720dG/4Tg==} + + '@lezer/go@1.0.1': + resolution: {integrity: sha512-xToRsYxwsgJNHTgNdStpcvmbVuKxTapV0dM0wey1geMMRc9aggoVyKgzYp41D2/vVOx+Ii4hmE206kvxIXBVXQ==} + + '@lezer/highlight@1.2.3': + resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==} + + '@lezer/html@1.3.13': + resolution: {integrity: sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==} + + '@lezer/java@1.1.3': + resolution: {integrity: sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==} + + '@lezer/javascript@1.5.4': + resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==} + + '@lezer/json@1.0.3': + resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==} + + '@lezer/lr@1.4.8': + resolution: {integrity: sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==} + + '@lezer/markdown@1.6.3': + resolution: {integrity: sha512-jpGm5Ps+XErS+xA4urw7ogEGkeZOahVQF21Z6oECF0sj+2liwZopd2+I8uH5I/vZsRuuze3OxBREIANLf6KKUw==} + + '@lezer/php@1.0.5': + resolution: {integrity: sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==} + + '@lezer/python@1.1.18': + resolution: {integrity: sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==} + + '@lezer/rust@1.0.2': + resolution: {integrity: sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==} + + '@lezer/sass@1.1.0': + resolution: {integrity: sha512-3mMGdCTUZ/84ArHOuXWQr37pnf7f+Nw9ycPUeKX+wu19b7pSMcZGLbaXwvD2APMBDOGxPmpK/O6S1v1EvLoqgQ==} + + '@lezer/xml@1.0.6': + resolution: {integrity: sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==} + + '@lezer/yaml@1.0.4': + resolution: {integrity: sha512-2lrrHqxalACEbxIbsjhqGpSW8kWpUKuY6RHgnSAFZa6qK62wvnPxA8hGOwOoDbwHcOFs5M4o27mjGu+P7TvBmw==} + + '@marijn/find-cluster-break@1.0.2': + resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==} + '@mcaptcha/core-glue@0.1.0-alpha-5': resolution: {integrity: sha512-16qWm5O5X0Y9LXULULaAks8Vf9FNlUUBcR5KDt49aWhFhG5++JzxNmCwQM9EJSHNU7y0U+FdyAWcGmjfKlkRLA==} @@ -894,6 +1086,50 @@ packages: '@primer/octicons@19.23.1': resolution: {integrity: sha512-CzjGmxkmNhyst6EekrS3SJPdtzgIkUMP/LSJch65y99/kmiFXbO1a+q7zoYe3hnI9NaOM0IN+ydDIbOmd8YqcA==} + '@replit/codemirror-indentation-markers@6.5.3': + resolution: {integrity: sha512-hL5Sfvw3C1vgg7GolLe/uxX5T3tmgOA3ZzqlMv47zjU1ON51pzNWiVbS22oh6crYhtVhv8b3gdXwoYp++2ilHw==} + peerDependencies: + '@codemirror/language': ^6.0.0 + '@codemirror/state': ^6.0.0 + '@codemirror/view': ^6.0.0 + + '@replit/codemirror-lang-nix@6.0.1': + resolution: {integrity: sha512-lvzjoYn9nfJzBD5qdm3Ut6G3+Or2wEacYIDJ49h9+19WSChVnxv4ojf+rNmQ78ncuxIt/bfbMvDLMeMP0xze6g==} + peerDependencies: + '@codemirror/autocomplete': ^6.0.0 + '@codemirror/language': ^6.0.0 + '@codemirror/state': ^6.0.0 + '@codemirror/view': ^6.0.0 + '@lezer/common': ^1.0.0 + '@lezer/highlight': ^1.0.0 + '@lezer/lr': ^1.0.0 + + '@replit/codemirror-lang-svelte@6.0.0': + resolution: {integrity: sha512-U2OqqgMM6jKelL0GNWbAmqlu1S078zZNoBqlJBW+retTc5M4Mha6/Y2cf4SVg6ddgloJvmcSpt4hHrVoM4ePRA==} + peerDependencies: + '@codemirror/autocomplete': ^6.0.0 + '@codemirror/lang-css': ^6.0.1 + '@codemirror/lang-html': ^6.2.0 + '@codemirror/lang-javascript': ^6.1.1 + '@codemirror/language': ^6.0.0 + '@codemirror/state': ^6.0.0 + '@codemirror/view': ^6.0.0 + '@lezer/common': ^1.0.0 + '@lezer/highlight': ^1.0.0 + '@lezer/javascript': ^1.2.0 + '@lezer/lr': ^1.0.0 + + '@replit/codemirror-vscode-keymap@6.0.2': + resolution: {integrity: sha512-j45qTwGxzpsv82lMD/NreGDORFKSctMDVkGRopaP+OrzSzv+pXDQuU3LnFvKpasyjVT0lf+PKG1v2DSCn/vxxg==} + peerDependencies: + '@codemirror/autocomplete': ^6.0.0 + '@codemirror/commands': ^6.0.0 + '@codemirror/language': ^6.0.0 + '@codemirror/lint': ^6.0.0 + '@codemirror/search': ^6.0.0 + '@codemirror/state': ^6.0.0 + '@codemirror/view': ^6.0.0 + '@resvg/resvg-wasm@2.6.2': resolution: {integrity: sha512-FqALmHI8D4o6lk/LRWDnhw95z5eO+eAa6ORjVg09YRR7BkcM6oPHU9uyC0gtQG5vpFLvgpeU4+zEAz2H8APHNw==} engines: {node: '>= 10'} @@ -1840,6 +2076,9 @@ packages: clippie@4.1.10: resolution: {integrity: sha512-zUjK2fLH8/wju2lks5mH0u8wSRYCOJoHfT1KQ61+aCT5O1ouONnSrnKQ3BTKvIYLUYJarbLZo4FLHyce/SLF2g==} + codemirror-lang-elixir@4.0.1: + resolution: {integrity: sha512-z6W/XB4b7TZrp9EZYBGVq93vQfvKbff+1iM8YZaVErL0dguBAeLmVRlEv1NuDZHOP1qjJ3NwyibkUkNWn7q9VQ==} + codemirror-spell-checker@1.1.2: resolution: {integrity: sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==} @@ -1919,6 +2158,9 @@ packages: typescript: optional: true + crelt@1.0.6: + resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==} + cropperjs@1.6.2: resolution: {integrity: sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==} @@ -2187,9 +2429,6 @@ packages: resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} engines: {node: '>= 4'} - dompurify@3.2.7: - resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==} - dompurify@3.3.3: resolution: {integrity: sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==} @@ -2895,6 +3134,9 @@ packages: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} + lezer-elixir@1.1.3: + resolution: {integrity: sha512-Ymc58/WhxdZS9yEOlnKbF3rdeBdFcPm4OEm26KMqA1Za9vztXi7I5qwGw1KxYmm3Nv0iDHq//EQyBwSEzKG9Mg==} + lightningcss-android-arm64@1.32.0: resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==} engines: {node: '>= 12.0.0'} @@ -3023,11 +3265,6 @@ packages: resolution: {integrity: sha512-UKybllYNheWac61Ia7T6fzuQNDZimFIpCg2w6hHjgV1Qu0w1TV0LlSgryUGzM0bkKQCBhy2FDhEELB73Kb0kAg==} engines: {node: '>=20'} - marked@14.0.0: - resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==} - engines: {node: '>= 18'} - hasBin: true - marked@16.4.2: resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==} engines: {node: '>= 20'} @@ -3160,9 +3397,6 @@ packages: moment@2.30.1: resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==} - monaco-editor@0.55.1: - resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==} - moo@0.5.3: resolution: {integrity: sha512-m2fmM2dDm7GZQsY7KK2cme8agi+AAljILjQnof7p1ZMDe6dQ4bdnSMx0cPppudoeNv5hEFQirN6u+O4fDE0IWA==} @@ -3655,6 +3889,9 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + style-mod@4.1.3: + resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==} + style-search@0.1.0: resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==} @@ -4004,6 +4241,9 @@ packages: typescript: optional: true + w3c-keyname@2.2.8: + resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==} + webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} @@ -4185,6 +4425,254 @@ snapshots: '@citation-js/date': 0.5.1 '@citation-js/name': 0.4.2 + '@codemirror/autocomplete@6.20.1': + dependencies: + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@lezer/common': 1.5.1 + + '@codemirror/commands@6.10.3': + dependencies: + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@lezer/common': 1.5.1 + + '@codemirror/lang-angular@0.1.4': + dependencies: + '@codemirror/lang-html': 6.4.11 + '@codemirror/lang-javascript': 6.2.5 + '@codemirror/language': 6.12.3 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@codemirror/lang-cpp@6.0.3': + dependencies: + '@codemirror/language': 6.12.3 + '@lezer/cpp': 1.1.5 + + '@codemirror/lang-css@6.3.1': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@lezer/common': 1.5.1 + '@lezer/css': 1.3.3 + + '@codemirror/lang-go@6.0.1': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@lezer/common': 1.5.1 + '@lezer/go': 1.0.1 + + '@codemirror/lang-html@6.4.11': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/lang-css': 6.3.1 + '@codemirror/lang-javascript': 6.2.5 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@lezer/common': 1.5.1 + '@lezer/css': 1.3.3 + '@lezer/html': 1.3.13 + + '@codemirror/lang-java@6.0.2': + dependencies: + '@codemirror/language': 6.12.3 + '@lezer/java': 1.1.3 + + '@codemirror/lang-javascript@6.2.5': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/language': 6.12.3 + '@codemirror/lint': 6.9.5 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@lezer/common': 1.5.1 + '@lezer/javascript': 1.5.4 + + '@codemirror/lang-jinja@6.0.0': + dependencies: + '@codemirror/lang-html': 6.4.11 + '@codemirror/language': 6.12.3 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@codemirror/lang-json@6.0.2': + dependencies: + '@codemirror/language': 6.12.3 + '@lezer/json': 1.0.3 + + '@codemirror/lang-less@6.0.2': + dependencies: + '@codemirror/lang-css': 6.3.1 + '@codemirror/language': 6.12.3 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@codemirror/lang-liquid@6.3.2': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/lang-html': 6.4.11 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@codemirror/lang-markdown@6.5.0': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/lang-html': 6.4.11 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@lezer/common': 1.5.1 + '@lezer/markdown': 1.6.3 + + '@codemirror/lang-php@6.0.2': + dependencies: + '@codemirror/lang-html': 6.4.11 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@lezer/common': 1.5.1 + '@lezer/php': 1.0.5 + + '@codemirror/lang-python@6.2.1': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@lezer/common': 1.5.1 + '@lezer/python': 1.1.18 + + '@codemirror/lang-rust@6.0.2': + dependencies: + '@codemirror/language': 6.12.3 + '@lezer/rust': 1.0.2 + + '@codemirror/lang-sass@6.0.2': + dependencies: + '@codemirror/lang-css': 6.3.1 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@lezer/common': 1.5.1 + '@lezer/sass': 1.1.0 + + '@codemirror/lang-sql@6.10.0': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@codemirror/lang-vue@0.1.3': + dependencies: + '@codemirror/lang-html': 6.4.11 + '@codemirror/lang-javascript': 6.2.5 + '@codemirror/language': 6.12.3 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@codemirror/lang-wast@6.0.2': + dependencies: + '@codemirror/language': 6.12.3 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@codemirror/lang-xml@6.1.0': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@lezer/common': 1.5.1 + '@lezer/xml': 1.0.6 + + '@codemirror/lang-yaml@6.1.3': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + '@lezer/yaml': 1.0.4 + + '@codemirror/language-data@6.5.2': + dependencies: + '@codemirror/lang-angular': 0.1.4 + '@codemirror/lang-cpp': 6.0.3 + '@codemirror/lang-css': 6.3.1 + '@codemirror/lang-go': 6.0.1 + '@codemirror/lang-html': 6.4.11 + '@codemirror/lang-java': 6.0.2 + '@codemirror/lang-javascript': 6.2.5 + '@codemirror/lang-jinja': 6.0.0 + '@codemirror/lang-json': 6.0.2 + '@codemirror/lang-less': 6.0.2 + '@codemirror/lang-liquid': 6.3.2 + '@codemirror/lang-markdown': 6.5.0 + '@codemirror/lang-php': 6.0.2 + '@codemirror/lang-python': 6.2.1 + '@codemirror/lang-rust': 6.0.2 + '@codemirror/lang-sass': 6.0.2 + '@codemirror/lang-sql': 6.10.0 + '@codemirror/lang-vue': 0.1.3 + '@codemirror/lang-wast': 6.0.2 + '@codemirror/lang-xml': 6.1.0 + '@codemirror/lang-yaml': 6.1.3 + '@codemirror/language': 6.12.3 + '@codemirror/legacy-modes': 6.5.2 + + '@codemirror/language@6.12.3': + dependencies: + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + style-mod: 4.1.3 + + '@codemirror/legacy-modes@6.5.2': + dependencies: + '@codemirror/language': 6.12.3 + + '@codemirror/lint@6.9.5': + dependencies: + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + crelt: 1.0.6 + + '@codemirror/search@6.6.0': + dependencies: + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + crelt: 1.0.6 + + '@codemirror/state@6.6.0': + dependencies: + '@marijn/find-cluster-break': 1.0.2 + + '@codemirror/view@6.40.0': + dependencies: + '@codemirror/state': 6.6.0 + crelt: 1.0.6 + style-mod: 4.1.3 + w3c-keyname: 2.2.8 + '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)': dependencies: '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) @@ -4440,6 +4928,101 @@ snapshots: '@kurkle/color@0.3.4': {} + '@lezer/common@1.5.1': {} + + '@lezer/cpp@1.1.5': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/css@1.3.3': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/go@1.0.1': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/highlight@1.2.3': + dependencies: + '@lezer/common': 1.5.1 + + '@lezer/html@1.3.13': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/java@1.1.3': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/javascript@1.5.4': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/json@1.0.3': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/lr@1.4.8': + dependencies: + '@lezer/common': 1.5.1 + + '@lezer/markdown@1.6.3': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + + '@lezer/php@1.0.5': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/python@1.1.18': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/rust@1.0.2': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/sass@1.1.0': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/xml@1.0.6': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@lezer/yaml@1.0.4': + dependencies: + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@marijn/find-cluster-break@1.0.2': {} + '@mcaptcha/core-glue@0.1.0-alpha-5': {} '@mcaptcha/vanilla-glue@0.1.0-alpha-3': @@ -4548,6 +5131,46 @@ snapshots: dependencies: object-assign: 4.1.1 + '@replit/codemirror-indentation-markers@6.5.3(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)': + dependencies: + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + + '@replit/codemirror-lang-nix@6.0.1(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)(@lezer/common@1.5.1)(@lezer/highlight@1.2.3)(@lezer/lr@1.4.8)': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + + '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.20.1)(@codemirror/lang-css@6.3.1)(@codemirror/lang-html@6.4.11)(@codemirror/lang-javascript@6.2.5)(@codemirror/language@6.12.3)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)(@lezer/common@1.5.1)(@lezer/highlight@1.2.3)(@lezer/javascript@1.5.4)(@lezer/lr@1.4.8)': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/lang-css': 6.3.1 + '@codemirror/lang-html': 6.4.11 + '@codemirror/lang-javascript': 6.2.5 + '@codemirror/language': 6.12.3 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@lezer/common': 1.5.1 + '@lezer/highlight': 1.2.3 + '@lezer/javascript': 1.5.4 + '@lezer/lr': 1.4.8 + + '@replit/codemirror-vscode-keymap@6.0.2(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.5)(@codemirror/search@6.6.0)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)': + dependencies: + '@codemirror/autocomplete': 6.20.1 + '@codemirror/commands': 6.10.3 + '@codemirror/language': 6.12.3 + '@codemirror/lint': 6.9.5 + '@codemirror/search': 6.6.0 + '@codemirror/state': 6.6.0 + '@codemirror/view': 6.40.0 + '@resvg/resvg-wasm@2.6.2': {} '@rolldown/binding-android-arm64@1.0.0-rc.12': @@ -5407,6 +6030,11 @@ snapshots: clippie@4.1.10: {} + codemirror-lang-elixir@4.0.1: + dependencies: + '@codemirror/language': 6.12.3 + lezer-elixir: 1.1.3 + codemirror-spell-checker@1.1.2: dependencies: typo-js: 1.3.1 @@ -5469,6 +6097,8 @@ snapshots: optionalDependencies: typescript: 5.9.3 + crelt@1.0.6: {} + cropperjs@1.6.2: {} cross-spawn@7.0.6: @@ -5750,10 +6380,6 @@ snapshots: dependencies: domelementtype: 2.3.0 - dompurify@3.2.7: - optionalDependencies: - '@types/trusted-types': 2.0.7 - dompurify@3.3.3: optionalDependencies: '@types/trusted-types': 2.0.7 @@ -6516,6 +7142,11 @@ snapshots: prelude-ls: 1.2.1 type-check: 0.4.0 + lezer-elixir@1.1.3: + dependencies: + '@lezer/highlight': 1.2.3 + '@lezer/lr': 1.4.8 + lightningcss-android-arm64@1.32.0: optional: true @@ -6637,8 +7268,6 @@ snapshots: transitivePeerDependencies: - supports-color - marked@14.0.0: {} - marked@16.4.2: {} marked@4.3.0: {} @@ -6882,11 +7511,6 @@ snapshots: moment@2.30.1: {} - monaco-editor@0.55.1: - dependencies: - dompurify: 3.2.7 - marked: 14.0.0 - moo@0.5.3: {} ms@2.1.3: {} @@ -7360,6 +7984,8 @@ snapshots: strip-json-comments@3.1.1: {} + style-mod@4.1.3: {} + style-search@0.1.0: {} stylelint-config-recommended@18.0.0(stylelint@17.6.0(typescript@5.9.3)): @@ -7749,6 +8375,8 @@ snapshots: optionalDependencies: typescript: 5.9.3 + w3c-keyname@2.2.8: {} + webidl-conversions@3.0.1: {} whatwg-mimetype@3.0.0: {} diff --git a/routers/web/repo/editor.go b/routers/web/repo/editor.go index 8fd98980c3..0aa3271683 100644 --- a/routers/web/repo/editor.go +++ b/routers/web/repo/editor.go @@ -319,7 +319,12 @@ func EditFile(ctx *context.Context) { } } - ctx.Data["CodeEditorConfig"] = getCodeEditorConfig(ctx, ctx.Repo.TreePath) + editorConfig := getCodeEditorConfigByEditorconfig(ctx, ctx.Repo.TreePath) + editorConfig.Autofocus = !isNewFile + if isNewFile { + editorConfig.Filename = "" + } + ctx.Data["CodeEditorConfig"] = editorConfig ctx.HTML(http.StatusOK, tplEditFile) } diff --git a/routers/web/repo/editor_apply_patch.go b/routers/web/repo/editor_apply_patch.go index 1a01bfd5cb..111e0161f2 100644 --- a/routers/web/repo/editor_apply_patch.go +++ b/routers/web/repo/editor_apply_patch.go @@ -20,7 +20,7 @@ func NewDiffPatch(ctx *context.Context) { } ctx.Data["PageIsPatch"] = true - ctx.Data["CodeEditorConfig"] = CodeEditorConfig{} // not really editing a file, so no need to fill in the config + ctx.Data["CodeEditorConfig"] = CodeEditorConfig{Filename: "diff.patch"} ctx.HTML(http.StatusOK, tplPatchFile) } diff --git a/routers/web/repo/editor_util.go b/routers/web/repo/editor_util.go index aca732ac70..7155b6e99d 100644 --- a/routers/web/repo/editor_util.go +++ b/routers/web/repo/editor_util.go @@ -65,27 +65,33 @@ func getClosestParentWithFiles(gitRepo *git.Repository, branchName, originTreePa return f(originTreePath, commit) } -// CodeEditorConfig is also used by frontend, defined in "codeeditor.ts" +// CodeEditorConfig is also used by frontend, defined in "codeeditor" module type CodeEditorConfig struct { - PreviewableExtensions []string `json:"previewable_extensions"` - LineWrapExtensions []string `json:"line_wrap_extensions"` - LineWrapOn bool `json:"line_wrap_on"` + Filename string `json:"filename"` // the base name, not full path + Autofocus bool `json:"autofocus"` + PreviewableExtensions []string `json:"previewableExtensions,omitempty"` + LineWrapExtensions []string `json:"lineWrapExtensions,omitempty"` + LineWrap bool `json:"lineWrap"` + Previewable bool `json:"previewable,omitempty"` - IndentStyle string `json:"indent_style"` - IndentSize int `json:"indent_size"` - TabWidth int `json:"tab_width"` - TrimTrailingWhitespace *bool `json:"trim_trailing_whitespace,omitempty"` + // the following can be read from .editorconfig if exists, or use default value + IndentStyle string `json:"indentStyle"` // in most cases, keep it empty by default, detected by the source code + IndentSize int `json:"indentSize"` + TabWidth int `json:"tabWidth"` + TrimTrailingWhitespace *bool `json:"trimTrailingWhitespace,omitempty"` } -func getCodeEditorConfig(ctx *context_service.Context, treePath string) (ret CodeEditorConfig) { +func getCodeEditorConfigByEditorconfig(ctx *context_service.Context, treePath string) CodeEditorConfig { + ret := CodeEditorConfig{Filename: path.Base(treePath)} ret.PreviewableExtensions = markup.PreviewableExtensions() ret.LineWrapExtensions = setting.Repository.Editor.LineWrapExtensions - ret.LineWrapOn = util.SliceContainsString(ret.LineWrapExtensions, path.Ext(treePath), true) + ret.LineWrap = util.SliceContainsString(ret.LineWrapExtensions, path.Ext(treePath), true) + ret.Previewable = util.SliceContainsString(ret.PreviewableExtensions, path.Ext(treePath), true) ec, _, err := ctx.Repo.GetEditorconfig() if err == nil { def, err := ec.GetDefinitionForFilename(treePath) if err == nil { - ret.IndentStyle = def.IndentStyle + ret.IndentStyle = util.IfZero(def.IndentStyle, ret.IndentStyle) ret.IndentSize, _ = strconv.Atoi(def.IndentSize) ret.TabWidth = def.TabWidth ret.TrimTrailingWhitespace = def.TrimTrailingWhitespace diff --git a/routers/web/repo/setting/git_hooks.go b/routers/web/repo/setting/git_hooks.go index 1f542a3f9f..a5aa74dafa 100644 --- a/routers/web/repo/setting/git_hooks.go +++ b/routers/web/repo/setting/git_hooks.go @@ -42,7 +42,7 @@ func GitHooksEdit(ctx *context.Context) { return } ctx.Data["Hook"] = hook - ctx.Data["CodeEditorConfig"] = repo.CodeEditorConfig{} // not really editing a repo file, so no editor config + ctx.Data["CodeEditorConfig"] = repo.CodeEditorConfig{Filename: name + ".sh", IndentStyle: "tab", TabWidth: 4} ctx.HTML(http.StatusOK, tplGithookEdit) } diff --git a/templates/repo/editor/commit_form.tmpl b/templates/repo/editor/commit_form.tmpl index 10872f8af7..7fdd36b3bd 100644 --- a/templates/repo/editor/commit_form.tmpl +++ b/templates/repo/editor/commit_form.tmpl @@ -11,7 +11,7 @@ {{- end}}
- +
diff --git a/templates/repo/editor/common_breadcrumb.tmpl b/templates/repo/editor/common_breadcrumb.tmpl index 44c9058457..257a005d90 100644 --- a/templates/repo/editor/common_breadcrumb.tmpl +++ b/templates/repo/editor/common_breadcrumb.tmpl @@ -5,7 +5,7 @@ {{range $i, $v := .TreeNames}}
/
{{if eq $i $l}} - + {{svg "octicon-info"}} {{else}} {{$v}} diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 8a5ed4a39c..bb7cb705b3 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -21,7 +21,7 @@
{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}} - {{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}} + {{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}} {{if not .IsNewFile}} {{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}} {{end}} @@ -32,8 +32,8 @@
+ data-code-editor-config="{{JsonUtils.EncodeToString $.CodeEditorConfig}}" + placeholder="{{ctx.Locale.Tr "editor.code_editor.placeholder"}}">{{.FileContent}}
diff --git a/templates/repo/editor/options.tmpl b/templates/repo/editor/options.tmpl index 04cbd44cd6..029e384de8 100644 --- a/templates/repo/editor/options.tmpl +++ b/templates/repo/editor/options.tmpl @@ -1,7 +1,9 @@ {{$indentStyle := $.CodeEditorConfig.IndentStyle}} {{$indentSize := or $.CodeEditorConfig.IndentSize 4}} -{{$lineWrapOn := $.CodeEditorConfig.LineWrapOn}} +{{$lineWrap := $.CodeEditorConfig.LineWrap}}
+ +
- {{ctx.Locale.Tr "text_line_wrap"}} - {{ctx.Locale.Tr "text_line_nowrap"}} + {{ctx.Locale.Tr "text_line_wrap"}} + {{ctx.Locale.Tr "text_line_nowrap"}}
diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl index a70464dacb..78fdbfa016 100644 --- a/templates/repo/editor/patch.tmpl +++ b/templates/repo/editor/patch.tmpl @@ -31,7 +31,9 @@
+ data-code-editor-config="{{JsonUtils.EncodeToString $.CodeEditorConfig}}" + data-context="{{.RepoLink}}" + placeholder="{{ctx.Locale.Tr "editor.code_editor.placeholder"}}">{{.FileContent}}
diff --git a/templates/repo/settings/githook_edit.tmpl b/templates/repo/settings/githook_edit.tmpl index 97bd5ebf4d..8c07ed0fb4 100644 --- a/templates/repo/settings/githook_edit.tmpl +++ b/templates/repo/settings/githook_edit.tmpl @@ -2,7 +2,7 @@

- {{ctx.Locale.Tr "repo.settings.githooks"}} + {{.Hook.Name}}
{{template "repo/editor/options" dict "CodeEditorConfig" $.CodeEditorConfig}}
@@ -10,13 +10,10 @@

{{ctx.Locale.Tr "repo.settings.githook_edit_desc"}}

{{with .Hook}} -
- - {{.Name}} -
- - +
diff --git a/tests/e2e/codeeditor.test.ts b/tests/e2e/codeeditor.test.ts new file mode 100644 index 0000000000..2b28670b0e --- /dev/null +++ b/tests/e2e/codeeditor.test.ts @@ -0,0 +1,21 @@ +import {env} from 'node:process'; +import {expect, test} from '@playwright/test'; +import {login, apiCreateRepo, apiDeleteRepo} from './utils.ts'; + +test('codeeditor textarea updates correctly', async ({page, request}) => { + const repoName = `e2e-codeeditor-${Date.now()}`; + await apiCreateRepo(request, {name: repoName}); + try { + await login(page); + await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/_new/main`); + await page.getByPlaceholder('Name your file…').fill('test.js'); + await expect(page.locator('.editor-loading')).toBeHidden(); + const editor = page.locator('.cm-content[role="textbox"]'); + await expect(editor).toBeVisible(); + await editor.click(); + await page.keyboard.type('const hello = "world";'); + await expect(page.locator('textarea[name="content"]')).toHaveValue('const hello = "world";'); + } finally { + await apiDeleteRepo(request, env.GITEA_TEST_E2E_USER, repoName); + } +}); diff --git a/tests/e2e/utils.ts b/tests/e2e/utils.ts index c7e6636bc2..2a255aff33 100644 --- a/tests/e2e/utils.ts +++ b/tests/e2e/utils.ts @@ -24,7 +24,7 @@ async function apiRetry(fn: () => Promise<{ok: () => boolean; status: () => numb if (response.ok()) return; if ([500, 502, 503].includes(response.status()) && attempt < maxAttempts - 1) { const jitter = Math.random() * 500; - await new Promise((resolve) => globalThis.setTimeout(resolve, 1000 * (attempt + 1) + jitter)); + await new Promise((resolve) => setTimeout(resolve, 1000 * (attempt + 1) + jitter)); continue; } throw new Error(`${label} failed: ${response.status()} ${await response.text()}`); diff --git a/web_src/css/base.css b/web_src/css/base.css index b660e19ac4..bb16b9fe21 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -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,'); --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); --octicon-chevron-right: url('data:image/svg+xml;utf8,'); + --octicon-x: url('data:image/svg+xml;utf8,'); --select-arrows: url('data:image/svg+xml;utf8,'); /* 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; } diff --git a/web_src/css/chroma/base.css b/web_src/css/chroma/base.css deleted file mode 100644 index bce13332f8..0000000000 --- a/web_src/css/chroma/base.css +++ /dev/null @@ -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; -} diff --git a/web_src/css/chroma/dark.css b/web_src/css/chroma/dark.css deleted file mode 100644 index bfe9d69f73..0000000000 --- a/web_src/css/chroma/dark.css +++ /dev/null @@ -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 */ diff --git a/web_src/css/chroma/light.css b/web_src/css/chroma/light.css deleted file mode 100644 index c1e4cb3545..0000000000 --- a/web_src/css/chroma/light.css +++ /dev/null @@ -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 */ diff --git a/web_src/css/codemirror/dark.css b/web_src/css/codemirror/dark.css deleted file mode 100644 index 0fcc13c076..0000000000 --- a/web_src/css/codemirror/dark.css +++ /dev/null @@ -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; -} diff --git a/web_src/css/codemirror/light.css b/web_src/css/codemirror/light.css deleted file mode 100644 index aa89263bc1..0000000000 --- a/web_src/css/codemirror/light.css +++ /dev/null @@ -1 +0,0 @@ -/* Placeholder, there is no light theme, it uses CM defaults */ diff --git a/web_src/css/easymde.css b/web_src/css/easymde.css index a3193bcfbe..9de6a1d431 100644 --- a/web_src/css/easymde.css +++ b/web_src/css/easymde.css @@ -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); } diff --git a/web_src/css/features/codeeditor.css b/web_src/css/features/codeeditor.css deleted file mode 100644 index 33a9191f40..0000000000 --- a/web_src/css/features/codeeditor.css +++ /dev/null @@ -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; -} diff --git a/web_src/css/index.css b/web_src/css/index.css index 8107d06f1d..f44a5d41ed 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -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"; diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css index c86510d5cf..78cd025e41 100644 --- a/web_src/css/markup/content.css +++ b/web_src/css/markup/content.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, diff --git a/web_src/css/modules/chroma.css b/web_src/css/modules/chroma.css new file mode 100644 index 0000000000..f853723fcc --- /dev/null +++ b/web_src/css/modules/chroma.css @@ -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 */ diff --git a/web_src/css/modules/codeeditor.css b/web_src/css/modules/codeeditor.css new file mode 100644 index 0000000000..11b772c05c --- /dev/null +++ b/web_src/css/modules/codeeditor.css @@ -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; +} diff --git a/web_src/css/modules/shortcut.css b/web_src/css/modules/shortcut.css index f8e62b8de5..78e87c867e 100644 --- a/web_src/css/modules/shortcut.css +++ b/web_src/css/modules/shortcut.css @@ -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; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index d98d7ea9cf..1dd5301338 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -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, diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 28dd878481..cf5d05c8b6 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -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; } diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 6576b88987..7e3ed763c7 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -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; } diff --git a/web_src/js/features/codeeditor.ts b/web_src/js/features/codeeditor.ts deleted file mode 100644 index 58acf1494d..0000000000 --- a/web_src/js/features/codeeditor.ts +++ /dev/null @@ -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 = {}; -const languagesByExt: Record = {}; - -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('.js-indent-style-select')!.addEventListener('change', (e) => { - const insertSpaces = (e.target as HTMLSelectElement).value === 'space'; - editor.updateOptions({insertSpaces, useTabStops: !insertSpaces}); - }); - elEditorOptions.querySelector('.js-indent-size-select')!.addEventListener('change', (e) => { - const tabSize = Number((e.target as HTMLSelectElement).value); - editor.updateOptions({tabSize}); - }); - elEditorOptions.querySelector('.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('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('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 { - 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; -} diff --git a/web_src/js/features/repo-editor.ts b/web_src/js/features/repo-editor.ts index 4957e83d00..63800ae391 100644 --- a/web_src/js/features/repo-editor.ts +++ b/web_src/js/features/repo-editor.ts @@ -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('#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('.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('.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(); diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts index da0d135cb1..f3b95178f3 100644 --- a/web_src/js/features/repo-settings.ts +++ b/web_src/js/features/repo-settings.ts @@ -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('#content')!, filename, {language: 'shell'}); + createCodeEditor(document.querySelector('#content')!); } function initRepoSettingsBranches() { diff --git a/web_src/js/globals.d.ts b/web_src/js/globals.d.ts index 2a6f86b65e..9fa2c11e7f 100644 --- a/web_src/js/globals.d.ts +++ b/web_src/js/globals.d.ts @@ -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, diff --git a/web_src/js/modules/codeeditor/command-palette.ts b/web_src/js/modules/codeeditor/command-palette.ts new file mode 100644 index 0000000000..3b30230570 --- /dev/null +++ b/web_src/js/modules/codeeditor/command-palette.ts @@ -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('.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('.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, + }; +} diff --git a/web_src/js/modules/codeeditor/context-menu.ts b/web_src/js/modules/codeeditor/context-menu.ts new file mode 100644 index 0000000000..aa620f1c9e --- /dev/null +++ b/web_src/js/modules/codeeditor/context-menu.ts @@ -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; +} | '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(); // 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('.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}); + }, + }); +} diff --git a/web_src/js/modules/codeeditor/linter.ts b/web_src/js/modules/codeeditor/linter.ts new file mode 100644 index 0000000000..8536601146 --- /dev/null +++ b/web_src/js/modules/codeeditor/linter.ts @@ -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 { + 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; + }); +} diff --git a/web_src/js/modules/codeeditor/main.ts b/web_src/js/modules/codeeditor/main.ts new file mode 100644 index 0000000000..743b72973a --- /dev/null +++ b/web_src/js/modules/codeeditor/main.ts @@ -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; + languages: LanguageDescription[]; + compartments: { + wordWrap: Compartment; + language: Compartment; + tabSize: Compartment; + indentUnit: Compartment; + lint: Compartment; + }; +}; + +export type CodemirrorModules = Awaited>; + +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('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('a[data-tab="write"]'); + writeTab!.click(); + } +} + +export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameInput?: HTMLInputElement): Promise { + 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('.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`${htmlRaw(svg('octicon-kebab-horizontal', 13))}`); + 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('.js-indent-style-select')!; + const indentSizeSelect = elEditorOptions.querySelector('.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('.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 { + 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 { + 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, []), + ); +} diff --git a/web_src/js/modules/codeeditor/utils.test.ts b/web_src/js/modules/codeeditor/utils.test.ts new file mode 100644 index 0000000000..2bf3e74967 --- /dev/null +++ b/web_src/js/modules/codeeditor/utils.test.ts @@ -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(); +}); diff --git a/web_src/js/modules/codeeditor/utils.ts b/web_src/js/modules/codeeditor/utils.ts new file mode 100644 index 0000000000..a40cf191fe --- /dev/null +++ b/web_src/js/modules/codeeditor/utils.ts @@ -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; + 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]; +} diff --git a/web_src/js/modules/errors.test.ts b/web_src/js/modules/errors.test.ts index c860a3f7cb..8ac0e262b2 100644 --- a/web_src/js/modules/errors.test.ts +++ b/web_src/js/modules/errors.test.ts @@ -1,4 +1,4 @@ -import {showGlobalErrorMessage, shouldIgnoreError} from './errors.ts'; +import {showGlobalErrorMessage} from './errors.ts'; test('showGlobalErrorMessage', () => { document.body.innerHTML = '
'; @@ -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); -}); diff --git a/web_src/js/modules/errors.ts b/web_src/js/modules/errors.ts index 3ec01b3eb7..882da36977 100644 --- a/web_src/js/modules/errors.ts +++ b/web_src/js/modules/errors.ts @@ -23,19 +23,6 @@ export function showGlobalErrorMessage(msg: string, msgType: Intent = 'error') { msgContainer.prepend(msgDiv); } -export function shouldIgnoreError(err: Error) { - const ignorePatterns: Array = [ - // 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})`; diff --git a/web_src/js/modules/monaco.ts b/web_src/js/modules/monaco.ts deleted file mode 100644 index c8e1ff7765..0000000000 --- a/web_src/js/modules/monaco.ts +++ /dev/null @@ -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'; diff --git a/web_src/js/modules/shortcut.ts b/web_src/js/modules/shortcut.ts index de155cab42..93419ab539 100644 --- a/web_src/js/modules/shortcut.ts +++ b/web_src/js/modules/shortcut.ts @@ -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('input, textarea') || null; + return shortcutWrapper(kbd)?.querySelector('input, textarea') || null; } function kbdFromElem(input: HTMLElement): HTMLElement | null { - return input.parentElement!.querySelector('kbd') || null; + return shortcutWrapper(input)?.querySelector('kbd') || null; } export function initGlobalShortcut() { diff --git a/web_src/js/utils.ts b/web_src/js/utils.ts index 1edd17fbb4..23bddc3b1c 100644 --- a/web_src/js/utils.ts +++ b/web_src/js/utils.ts @@ -27,6 +27,14 @@ export function isObject>(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 = 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);