Merge pull request #1908 from TriliumNext/feature/codemirror6

Update to CodeMirror 6

Author: eliandoran

apps/client/package.json

@@ -23,12 +23,12 @@
     "@popperjs/core": "2.11.8",
     "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/commons": "workspace:*",
+    "@triliumnext/codemirror": "workspace:*",
     "bootstrap": "5.3.6",
     "dayjs": "1.11.13",
     "dayjs-plugin-utc": "0.1.2",
     "debounce": "2.2.0",
     "draggabilly": "3.0.0",
-    "eslint-linter-browserify": "9.26.0",
     "force-graph": "1.49.5",
     "globals": "16.1.0",
     "i18next": "25.1.2",

apps/client/src/components/note_context.ts

@@ -11,6 +11,7 @@ import type { ViewScope } from "../services/link.js";
 import type FNote from "../entities/fnote.js";
 import type TypeWidget from "../widgets/type_widgets/type_widget.js";
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
+import type CodeMirror from "@triliumnext/codemirror";
 
 export interface SetNoteOpts {
     triggerSwitchEvent?: unknown;
@@ -312,7 +313,7 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
     async getCodeEditor() {
         return this.timeout(
-            new Promise<CodeMirrorInstance>((resolve) =>
+            new Promise<CodeMirror>((resolve) =>
                 appContext.triggerCommand("executeWithCodeEditor", {
                     resolve,
                     ntxId: this.ntxId

apps/client/src/libraries/codemirror/eslint.js

@@ -5,7 +5,6 @@ import libraryLoader from "./library_loader.js";
 import ws from "./ws.js";
 import froca from "./froca.js";
 import linkService from "./link.js";
-import { lint } from "./eslint.js";
 
 function setupGlobs() {
     window.glob.isDesktop = utils.isDesktop;
@@ -19,7 +18,6 @@ function setupGlobs() {
     // required for ESLint plugin and CKEditor
     window.glob.getActiveContextNote = () => appContext.tabManager.getActiveContextNote();
     window.glob.requireLibrary = libraryLoader.requireLibrary;
-    window.glob.linter = lint;
     window.glob.appContext = appContext; // for debugging
     window.glob.froca = froca;
     window.glob.treeCache = froca; // compatibility for CKEditor builds for a while

apps/client/src/services/glob.ts

@@ -7,37 +7,6 @@ export interface Library {
     css?: string[];
 }
 
-const CODE_MIRROR: Library = {
-    js: () => {
-        const scriptsToLoad = [
-            "node_modules/codemirror/lib/codemirror.js",
-            "node_modules/codemirror/addon/display/placeholder.js",
-            "node_modules/codemirror/addon/edit/matchbrackets.js",
-            "node_modules/codemirror/addon/edit/matchtags.js",
-            "node_modules/codemirror/addon/fold/xml-fold.js",
-            "node_modules/codemirror/addon/lint/lint.js",
-            "node_modules/codemirror/addon/mode/loadmode.js",
-            "node_modules/codemirror/addon/mode/multiplex.js",
-            "node_modules/codemirror/addon/mode/overlay.js",
-            "node_modules/codemirror/addon/mode/simple.js",
-            "node_modules/codemirror/addon/search/match-highlighter.js",
-            "node_modules/codemirror/mode/meta.js",
-            "node_modules/codemirror/keymap/vim.js",
-            "libraries/codemirror/eslint.js"
-        ];
-
-        const mimeTypes = mimeTypesService.getMimeTypes();
-        for (const mimeType of mimeTypes) {
-            if (mimeType.enabled && mimeType.codeMirrorSource) {
-                scriptsToLoad.push(mimeType.codeMirrorSource);
-            }
-        }
-
-        return scriptsToLoad;
-    },
-    css: ["node_modules/codemirror/lib/codemirror.css", "node_modules/codemirror/addon/lint/lint.css"]
-};
-
 const KATEX: Library = {
     js: ["node_modules/katex/dist/katex.min.js", "node_modules/katex/dist/contrib/mhchem.min.js", "node_modules/katex/dist/contrib/auto-render.min.js"],
     css: ["node_modules/katex/dist/katex.min.css"]
@@ -152,7 +121,6 @@ export default {
     requireCss,
     requireLibrary,
     loadHighlightingTheme,
-    CODE_MIRROR,
     KATEX,
     HIGHLIGHT_JS
 };

apps/client/src/services/library_loader.ts

@@ -68,6 +68,7 @@ export const MIME_TYPES_DICT: readonly MimeTypeDefinition[] = Object.freeze([
     { title: "Forth", mime: "text/x-forth" },
     { title: "Fortran", mime: "text/x-fortran", highlightJs: "fortran" },
     { title: "Gas", mime: "text/x-gas" },
+    { title: "GDScript (Godot)", mime: "text/x-gdscript" },
     { title: "Gherkin", mime: "text/x-feature", highlightJs: "gherkin" },
     { title: "GitHub Flavored Markdown", mime: "text/x-gfm", highlightJs: "markdown" },
     { title: "Go", mime: "text/x-go", highlightJs: "go", default: true },
@@ -106,6 +107,7 @@ export const MIME_TYPES_DICT: readonly MimeTypeDefinition[] = Object.freeze([
     { title: "msgenny", mime: "text/x-msgenny" },
     { title: "MUMPS", mime: "text/x-mumps" },
     { title: "MySQL", mime: "text/x-mysql", highlightJs: "sql" },
+    { title: "Nix", mime: "text/x-nix", highlightJs: "nix" },
     { title: "Nginx", mime: "text/x-nginx-conf", highlightJs: "nginx" },
     { title: "NSIS", mime: "text/x-nsis", highlightJs: "nsis" },
     { title: "NTriples", mime: "application/n-triples" },

apps/client/src/services/mime_type_definitions.ts

@@ -420,33 +420,24 @@ body.desktop #context-menu-container .dropdown-item > span {
     width: 100%;
 }
 
-.CodeMirror {
+.cm-editor {
     height: 100%;
-    background: inherit;
+    outline: none !important;
+    border-radius: 6px;
+    overflow: hidden;
+    margin: 4px;
 }
 
-body .CodeMirror {
+body .cm-editor {
     font-size: var(--monospace-font-size);
 }
 
-.CodeMirror-gutters {
+body .cm-editor .cm-gutters {
     background-color: inherit !important;
     border-right: none;
 }
 
-.cm-matchhighlight {
-    background-color: #eeeeee;
-}
-
-.cm-matchhighlight.ck-find-result{
-    background: var(--ck-color-highlight-background);
-}
-
-.cm-matchhighlight.ck-find-result_selected {
-    background-color: #ff9633;
-}
-
-.CodeMirror pre.CodeMirror-placeholder {
+body .cm-editor .cm-placeholder {
     color: #999 !important;
 }
 
@@ -457,11 +448,11 @@ body .CodeMirror {
     margin-bottom: 10px;
 }
 
-#sql-console-query .CodeMirror {
+#sql-console-query .cm-editor {
     height: 150px;
 }
 
-#sql-console-query .CodeMirror-scroll {
+#sql-console-query .cm-editor .cm-scroller {
     min-height: inherit !important;
 }
 
@@ -524,7 +515,7 @@ button.btn-sm {
     padding: 0;
 }
 
-pre:not(.CodeMirror-line):not(.hljs) {
+pre:not(.hljs) {
     color: var(--main-text-color) !important;
     white-space: pre-wrap;
     font-size: 100%;

apps/client/src/stylesheets/style.css

@@ -81,10 +81,6 @@ body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
 
-body .CodeMirror {
-    filter: invert(90%) hue-rotate(180deg);
-}
-
 .excalidraw.theme--dark {
     --theme-filter: invert(80%) hue-rotate(180deg) !important;
 }

apps/client/src/stylesheets/theme-dark.css

@@ -244,10 +244,6 @@ body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
 
-body .CodeMirror {
-    filter: invert(90%) hue-rotate(180deg);
-}
-
 .excalidraw.theme--dark {
     --theme-filter: invert(80%) hue-rotate(180deg) !important;
 }

apps/client/src/stylesheets/theme-next-dark.css

@@ -1616,7 +1616,7 @@
     "auto-detect-language": "自动检测"
   },
   "highlighting": {
-    "title": "文本笔记的代码语法高亮",
+    "title": "",
     "description": "控制文本笔记中代码块的语法高亮，代码笔记不会受到影响。",
     "color-scheme": "颜色方案"
   },