Lots of work making CodeMirror work. It is in a mostly useable state now.

package-lock.json

@@ -9,9 +9,11 @@
       "version": "0.2.507",
       "dependencies": {
         "@codemirror/commands": "^6.8.1",
+        "@codemirror/gutter": "^0.19.9",
         "@codemirror/lang-css": "^6.3.1",
         "@codemirror/lang-html": "^6.4.9",
         "@codemirror/lang-javascript": "^6.2.3",
+        "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-markdown": "^6.3.2",
         "@codemirror/language": "^6.11.0",
         "@codemirror/language-data": "^6.5.1",
@@ -170,6 +172,40 @@
         "@lezer/common": "^1.1.0"
       }
     },
+    "node_modules/@codemirror/gutter": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/gutter/-/gutter-0.19.9.tgz",
+      "integrity": "sha512-PFrtmilahin1g6uL27aG5tM/rqR9DZzZYZsIrCXA5Uc2OFTFqx4owuhoU9hqfYxHp5ovfvBwQ+txFzqS4vog6Q==",
+      "deprecated": "As of 0.20.0, this package has been merged into @codemirror/view",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.23"
+      }
+    },
+    "node_modules/@codemirror/gutter/node_modules/@codemirror/state": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
+      "integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/text": "^0.19.0"
+      }
+    },
+    "node_modules/@codemirror/gutter/node_modules/@codemirror/view": {
+      "version": "0.19.48",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.48.tgz",
+      "integrity": "sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/rangeset": "^0.19.5",
+        "@codemirror/state": "^0.19.3",
+        "@codemirror/text": "^0.19.0",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@codemirror/lang-angular": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@codemirror/lang-angular/-/lang-angular-0.1.4.tgz",
@@ -498,6 +534,25 @@
         "crelt": "^1.0.5"
       }
     },
+    "node_modules/@codemirror/rangeset": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/rangeset/-/rangeset-0.19.9.tgz",
+      "integrity": "sha512-V8YUuOvK+ew87Xem+71nKcqu1SXd5QROMRLMS/ljT5/3MCxtgrRie1Cvild0G/Z2f1fpWxzX78V0U4jjXBorBQ==",
+      "deprecated": "As of 0.20.0, this package has been merged into @codemirror/state",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^0.19.0"
+      }
+    },
+    "node_modules/@codemirror/rangeset/node_modules/@codemirror/state": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
+      "integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/text": "^0.19.0"
+      }
+    },
     "node_modules/@codemirror/search": {
       "version": "6.5.10",
       "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.10.tgz",
@@ -518,6 +573,13 @@
         "@marijn/find-cluster-break": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/text": {
+      "version": "0.19.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.6.tgz",
+      "integrity": "sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==",
+      "deprecated": "As of 0.20.0, this package has been merged into @codemirror/state",
+      "license": "MIT"
+    },
     "node_modules/@codemirror/theme-one-dark": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",

package.json

@@ -87,9 +87,11 @@
   "type": "module",
   "dependencies": {
     "@codemirror/commands": "^6.8.1",
+    "@codemirror/gutter": "^0.19.9",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.3",
+    "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-markdown": "^6.3.2",
     "@codemirror/language": "^6.11.0",
     "@codemirror/language-data": "^6.5.1",

src/lib/e_app_codemirror_v5.svelte

@@ -1,72 +1,185 @@
 <script lang="ts">
+// This will be the wrapper for the CodeMirror editor. It should hide most of the configuration requirements.
+// WARNING: This has not been fully updated to Svelte version 5. It is a work in progress.
 // *** Import Svelte version 5 specific
 import { browser } from '$app/environment';
 
 import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-import { EditorView, keymap, placeholder as placeholderExt } from '@codemirror/view';
+import {
-import { EditorState, StateEffect, type Extension } from '@codemirror/state';
+    EditorView, keymap, highlightSpecialChars, drawSelection,
-import { indentWithTab } from '@codemirror/commands';
+    highlightActiveLine, dropCursor, rectangularSelection,
+    crosshairCursor,
+    gutter, GutterMarker, highlightActiveLineGutter, lineNumbers,
+    placeholder as placeholderExt,
+    } from "@codemirror/view"
+import { EditorState, RangeSet, StateEffect, type Extension, Text } from '@codemirror/state';
+import {
+    defaultKeymap, history, historyKeymap, indentWithTab,
+    } from "@codemirror/commands"
+import { indentUnit } from '@codemirror/language';
+import { languages } from '@codemirror/language-data';
+// import {
+//     defaultHighlightStyle, syntaxHighlighting, indentOnInput,
+//     bracketMatching, foldGutter, foldKeymap
+//     } from "@codemirror/language"
+// import {
+//     defaultHighlightStyle, syntaxHighlighting, indentOnInput,
+//     bracketMatching, foldGutter, foldKeymap
+//     } from "@codemirror/language"
+// import {
+//     searchKeymap, highlightSelectionMatches
+//     } from "@codemirror/search"
+// import {
+//     autocompletion, completionKeymap, closeBrackets,
+//     closeBracketsKeymap
+//     } from "@codemirror/autocomplete"
+// import {lintKeymap} from "@codemirror/lint"
+
+// import { } from '@codemirror/gutter'; // Merged into @codemirror/view
 import { basicSetup } from 'codemirror';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
 import { oneDark } from "@codemirror/theme-one-dark";
 
 // Props
 export let content: string = 'test test test test';
 export let new_content: string = '';
-export let language: Extension = javascript();
+
-export let theme: Extension = oneDark;
+// export let language: Extension = markdown(); // javascript()
+export let theme_mode: string = 'light'; // 'dark' | 'light'
+export let theme: Extension = EditorView.baseTheme(); // EditorView.baseTheme(); // oneDark
+
 export let extensions: Extension[] = [];
+
 export let editable: boolean = true;
+export let readonly: boolean = false;
+
 export let placeholder: string = 'Start typing...';
+
+export let show_line_numbers: boolean = false;
+export let wrap_lines: boolean = true;
+export let use_tab: boolean = true;
+export let tab_size: number = 4;
 let classes = "";
 export { classes as class };
 
-let baseTheme = EditorView.baseTheme({
-    ".cm-o-replacement": {
-        display: "inline-block",
-        width: ".5em",
-        height: ".5em",
-        borderRadius: ".25em"
-    },
-    "&light .cm-o-replacement": {
-        backgroundColor: "#04c"
-    },
-    "&dark .cm-o-replacement": {
-        backgroundColor: "#5bf"
-    }
-})
-// theme == baseTheme;
-
 const dispatch = createEventDispatcher<{ change: string }>();
 
 let editor_element: HTMLDivElement;
 let editorView: EditorView;
 
+// theme = [
+//     // baseTheme,
+//     theme,
+// ];
+// console.log(`Theme:`, theme);
+
+if (theme_mode == 'dark') {
+    theme = oneDark;
+} else {
+    // theme = EditorView.baseTheme({
+    //     "&": {
+    //         color: "black",
+    //         backgroundColor: "white"
+    //     },
+    //     ".cm-cursor, .cm-dropCursor": { borderLeftColor: "#000" },
+    //     "&.cm-focused .cm-selectionBackground, ::selection": {
+    //         backgroundColor: "#B7D5FF"
+    //     },
+    //     "&.cm-focused .cm-selectionForeground": { color: "black" }
+    // });
+}
+
+if (editable) {
+    extensions.push(EditorView.editable.of(true));
+} else {
+    // extensions.push(EditorState.editable.of(false));
+}
+if (readonly) {
+    extensions.push(EditorState.readOnly.of(true));
+} else {
+    // extensions.push(EditorState.readOnly.of(false));
+}
+
+if (placeholder) { extensions.push(placeholderExt(placeholder)); }
+
+if (show_line_numbers) {
+    // extensions.push(lineNumbers({ class: "line-numbers" }));
+} else {
+    // extensions.push(lineNumbers(false));
+    // extensions.push(gutter(false));
+    // extensions.pop();
+    // extensions.slice(extensions.indexOf(lineNumbers), 1);
+
+}
+
+if (wrap_lines) { extensions.push(EditorView.lineWrapping); }
+
+if (use_tab) { extensions.push(keymap.of([indentWithTab])); }
+if (tab_size) { extensions.push(indentUnit.of(" ".repeat(tab_size))); }
+
+
+
+// let languages = [
+//     { name: 'CSS', mode: 'css' },
+//     { name: 'HTML', mode: 'html' },
+//     { name: 'JavaScript', mode: 'javascript' },
+//     { name: 'Markdown', mode: 'markdown' },
+//     { name: 'Python', mode: 'python' },
+// ];
+
 // Reactive declaration for extensions
 $: editor_extensions = [
     basicSetup,
-    EditorView.editable.of(editable),
+    // gutter({class: "hidden-gutter"}),
-    keymap.of([indentWithTab]),
+    // A line number gutter
-    placeholderExt(placeholder),
+    // lineNumbers(false),
-    language,
+    // A gutter with code folding markers
+    // foldGutter(false),
+    // lineWrapping(false),
+    // EditorView.lineWrapping, // Enable line wrapping
+
+    // EditorView.indentUnit.of(" ".repeat(tab_size)),
+    // EditorView.tabSize.of(tab_size),
+    // indentUnit.of(" ".repeat(tab_size)),
+
+    // EditorView.editable.of(editable),
+    // EditorState.readOnly.of(readonly),
+
+    // EditorState.tabSize.of(tab_size),
+    // keymap.of([indentWithTab]),
+    // placeholderExt(placeholder),
+    // language,
+    markdown({base: markdownLanguage, codeLanguages: languages}),
+    javascript({typescript: true}),
+    json({ jsx: true }),
     theme,
-    // baseTheme = {
+
-    //     ".cm-o-replacement": {
-    //         display: "inline-block",
-    //         width: ".5em",
-    //         height: ".5em",
-    //         borderRadius: ".25em"
-    //     },
-    //     "&light .cm-o-replacement": {
-    //         backgroundColor: "#04c"
-    //     },
-    //     "&dark .cm-o-replacement": {
-    //         backgroundColor: "#5bf"
-    //     }
-    // },
     ...extensions
 ];
 
+// baseTheme = {
+//     ".cm-o-replacement": {
+//         display: "inline-block",
+//         width: ".5em",
+//         height: ".5em",
+//         borderRadius: ".25em"
+//     },
+//     "&light .cm-o-replacement": {
+//         backgroundColor: "#04c"
+//     },
+//     "&dark .cm-o-replacement": {
+//         backgroundColor: "#5bf"
+//     }
+// },
+// let dimensions = {
+//         width: '100%',
+//         height: 'calc(100vh - 48px)' // Adjust for header and other elements
+//     };
+// editorView.setSize(dimensions.width, dimensions.height);
+
+
 // Initialize CodeMirror on mount
 onMount(() => {
     editorView = new EditorView({
@@ -74,7 +187,7 @@ onMount(() => {
             doc: content,
             extensions: editor_extensions,
         }),
-        parent: editor_element,
+        parent: editor_element, // document.body
         dispatch: (transaction) => {
             editorView.update([transaction]);
             if (transaction.docChanged) {
@@ -103,19 +216,71 @@ $: if (editorView && editorView.state.doc.toString() !== content) {
 </script>
 
 {#if browser}
-    <div bind:this={editor_element} class="codemirror-wrapper {classes}"></div>
+    <!-- flex flex-col flex-wrap items-center justify-center -->
+    <div bind:this={editor_element} class="codemirror-wrapper h-100 max-h-full w-100 max-w-6xl {classes}"></div>
 {:else}
 <div class="scm-waiting {classes}">
     <div class="scm-waiting__loading scm-loading">
         <p class="scm-loading__text">Loading editor...</p>
     </div>
 
-    <pre class="scm-pre cm-editor">{value}</pre>
+    <pre class="scm-pre cm-editor">{content}</pre>
 </div>
 {/if}
 
 <style>
-    .codemirror-wrapper :global(.cm-focused) {
+/* .codemirror-wrapper :global(.cm-focused) {
-        outline: none;
+    outline: none;
-    }
+} */
+
+.codemirror-wrapper {
+    flex-grow: 1;
+    /* flex-shrink: 1; */
+    /* flex-basis: 100%; */
+
+    /* font-size: 1rem; */
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    /* overflow: auto; */
+    /* background-color: var(--cm-background); */
+
+    /* text-wrap: normal; */
+    /* text-wrap: balance; */
+    /* text-wrap: wrap; */
+    /* text-wrap: break-word; */
+}
+.codemirror-wrapper :global(.cm-editor) {
+    /* font-size: .8rem; */
+    /* text-wrap: normal; */
+    /* text-wrap: balance; */
+    /* text-wrap: wrap; */
+    /* text-wrap: break-word; */
+
+    /* max-width: 100%; */
+    /* max-height: 100%; */
+
+    /* overflow: auto; */
+
+    /* width: 100%; */
+    /* height: 100%; */
+
+    /* background-color: var(--cm-background); */
+    /* color: var(--cm-text); */
+}
+
+/* .codemirror-wrapper :global(.cm-gutters) {
+    background-color: var(--cm-gutter-background);
+    color: var(--cm-gutter-text);
+}
+.codemirror-wrapper :global(.cm-gutter) {
+    background-color: var(--cm-gutter-background);
+    color: var(--cm-gutter-text);
+}
+.codemirror-wrapper :global(.cm-gutterElement) {
+    background-color: var(--cm-gutter-background);
+    color: var(--cm-gutter-text);
+} */
+
 </style>

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -28,8 +28,8 @@ import {
 // import E_app_codemirror from '$lib/e_app_codemirror.svelte';
 // import E_app_codemirror_v4 from '$lib/e_app_codemirror_v4.svelte';
 import E_app_codemirror_v5 from '$lib/e_app_codemirror_v5.svelte';
-import {javascript} from "@codemirror/lang-javascript";
+// import {javascript} from "@codemirror/lang-javascript";
-import {markdown} from "@codemirror/lang-markdown";
+// import {markdown} from "@codemirror/lang-markdown";
 
 
 // *** Import Aether specific variables and functions
@@ -1792,7 +1792,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
         "
     >
 {#if (!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id])}
-
+    {#if !$ae_loc.edit_mode || !$ae_loc.trusted_access}
     <article
         class="
             flex-grow
@@ -1851,6 +1851,25 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
     <!-- {@html encrypt_content($lq__journal_entry_obj?.content, journal_key)} -->
     <!-- --{@html encrypted_base64_string}-- -->
     <!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->
+    {:else}
+
+    <E_app_codemirror_v5
+        editable={false}
+        readonly={true}
+        content={tmp_entry_obj?.content ?? ''}
+        bind:new_content={tmp_entry_obj.content}
+        bind:theme_mode={$ae_loc.theme_mode}
+        placeholder="Write using Markdown here..."
+        class="
+            p-2
+            bg-slate-100 text-gray-900
+            dark:bg-slate-900 dark:text-gray-100
+            shadow-lg rounded-lg
+            border border-gray-200 dark:border-gray-700
+            hover:border-green-500 dark:hover:border-green-500
+            "
+        />
+    {/if}
 
 {:else if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current')}
 <!-- && !($lq__journal_entry_obj?.content_encrypted && decrypted_content)) -->
@@ -1935,17 +1954,10 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
         <E_app_codemirror_v5
             content={tmp_entry_obj?.content ?? ''}
             bind:new_content={tmp_entry_obj.content}
-            language={markdown()}
+            bind:theme_mode={$ae_loc.theme_mode}
-            placeholder="Write your JavaScript code here..."
+            placeholder="Write using Markdown here..."
-            classes="
+            class="
-                flex-grow
-                flex-shrink-0
-                basis-full
-                h-max min-h-max max-h-full
-                w-full min-w-full max-w-6xl
                 p-2
-                space-y-1
-                font-mono
                 bg-slate-100 text-gray-900
                 dark:bg-slate-900 dark:text-gray-100
                 shadow-lg rounded-lg