ckeditor 16 with code blocks plugin

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.37.7",
+  "version": "0.37.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/public/javascripts/services/mime_types.js

@@ -1,6 +1,7 @@
 import optionsService from "./options.js";
 
 const MIME_TYPES_DICT = [
+    { default: true, title: "Plain text", mime: "text/plain" },
     { title: "APL", mime: "text/apl" },
     { title: "PGP", mime: "application/pgp" },
     { title: "ASN.1", mime: "text/x-ttcn-asn" },
@@ -91,7 +92,6 @@ const MIME_TYPES_DICT = [
     { default: true, title: "Perl", mime: "text/x-perl" },
     { default: true, title: "PHP", mime: "text/x-php" },
     { title: "Pig", mime: "text/x-pig" },
-    { title: "Plain Text", mime: "text/plain" },
     { title: "PLSQL", mime: "text/x-plsql" },
     { title: "PostgreSQL", mime: "text/x-pgsql" },
     { title: "PowerShell", mime: "application/x-powershell" },
@@ -168,7 +168,7 @@ function loadMimeTypes(options) {
         || MIME_TYPES_DICT.filter(mt => mt.default).map(mt => mt.mime);
 
     for (const mt of mimeTypes) {
-        mt.enabled = enabledMimeTypes.includes(mt.mime);
+        mt.enabled = enabledMimeTypes.includes(mt.mime) || mt.mime === 'text/plain'; // text/plain is always enabled
     }
 }
 

src/public/javascripts/services/note_detail_text.js

@@ -1,6 +1,7 @@
 import libraryLoader from "./library_loader.js";
 import treeService from './tree.js';
 import noteAutocompleteService from './note_autocomplete.js';
+import mimeTypesService from './mime_types.js';
 
 class NoteDetailText {
     /**
@@ -41,6 +42,16 @@ class NoteDetailText {
             // textEditor might have been initialized during previous await so checking again
             // looks like double initialization can freeze CKEditor pretty badly
             if (!this.textEditor) {
+                const codeBlockLanguages =
+                        (await mimeTypesService.getMimeTypes())
+                        .filter(mt => mt.enabled)
+                        .map(mt => {
+                            return {
+                                language: mt.mime.toLowerCase().replace(/[\W_]+/g,"-"),
+                                label: mt.title
+                            }
+                        });
+
                 this.textEditor = await BalloonEditor.create(this.$editorEl[0], {
                     placeholder: "Type the content of your note here ...",
                     mention: {
@@ -77,6 +88,9 @@ class NoteDetailText {
                                 minimumCharacters: 0
                             }
                         ]
+                    },
+                    codeBlock: {
+                        languages: codeBlockLanguages
                     }
                 });
 

src/public/stylesheets/themes.css

@@ -196,7 +196,7 @@ body {
 
     --ck-color-todo-list-checkmark-border: var(--main-border-color);
 
-    --ck-color-engine-placeholder-text: var(--main-text-color);
+    --ck-color-engine-placeholder-text: var(--muted-text-color);
 }
 
 body {