From 2b442c14d51ff7ef4422c724555341fe0c860964 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20James?= <gaeljames@gmail.com>
Date: Thu, 8 Feb 2024 19:10:45 +0100
Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=90=9B=20Fix=20browser=20refresh=20sc?=
 =?UTF-8?q?ript=20url=20in=20example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Examples.BlazorWasm/wwwroot/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Examples.BlazorWasm/wwwroot/index.html b/Examples.BlazorWasm/wwwroot/index.html
index 8d3cd143..a6a0d8cd 100644
--- a/Examples.BlazorWasm/wwwroot/index.html
+++ b/Examples.BlazorWasm/wwwroot/index.html
@@ -28,7 +28,7 @@
         <a class="dismiss">🗙</a>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
-    <script src="/_framework/aspnetcore-browser-refresh.js"></script>
+    <script src="_framework/aspnetcore-browser-refresh.js"></script>
 
     <script
         src="https://js.sentry-cdn.com/d0ab79eee7b999c61d2c01fdf3958eeb.min.js"

From 1d0287cb7837f4536417a10b49a075e48302d407 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20James?= <gaeljames@gmail.com>
Date: Thu, 8 Feb 2024 19:21:34 +0100
Subject: [PATCH 2/9] =?UTF-8?q?=F0=9F=94=8A=20Make=20all=20js=20loggings?=
 =?UTF-8?q?=20optional?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CodeMirror6/NodeLib/src/CmColumns.ts    |  7 +++---
 CodeMirror6/NodeLib/src/CmCommands.ts   |  9 +++----
 CodeMirror6/NodeLib/src/CmFileUpload.ts |  3 ++-
 CodeMirror6/NodeLib/src/CmLanguage.ts   |  9 +++----
 CodeMirror6/NodeLib/src/CmLint.ts       |  5 ++--
 CodeMirror6/NodeLib/src/CmLogging.ts    |  6 +++++
 CodeMirror6/NodeLib/src/index.ts        | 31 +++++++++++--------------
 7 files changed, 37 insertions(+), 33 deletions(-)
 create mode 100644 CodeMirror6/NodeLib/src/CmLogging.ts

diff --git a/CodeMirror6/NodeLib/src/CmColumns.ts b/CodeMirror6/NodeLib/src/CmColumns.ts
index 1a6ad8e5..9c4cb875 100644
--- a/CodeMirror6/NodeLib/src/CmColumns.ts
+++ b/CodeMirror6/NodeLib/src/CmColumns.ts
@@ -2,6 +2,7 @@ import { Decoration, ViewPlugin, EditorView, KeyBinding } from "@codemirror/view
 import { Extension, RangeSetBuilder, Transaction } from "@codemirror/state";
 import { buildWidget } from "./lib/codemirror-kit";
 import { Diagnostic } from "@codemirror/lint";
+import { consoleLog } from "./CmLogging";
 
 
 function createColumnReplaceDecoration(content: string, from: number) {
@@ -110,7 +111,6 @@ export function columnStylingPlugin(separator: string): Extension {
         decorations: plugin => plugin.update(),
         eventHandlers: {
             keydown: (e, view) => {
-                console.log(e)
                 if (e.ctrlKey === true || e.metaKey === true || e.altKey === true || e.shiftKey === true)
                     return
                 if (e.key === "ArrowLeft") {
@@ -145,7 +145,7 @@ export function getSeparator(languageName: string) {
     return null
 }
 
-export async function columnLintSource(view: EditorView, separator: string): Promise<readonly Diagnostic[]> {
+export async function columnLintSource(id: string, view: EditorView, separator: string): Promise<readonly Diagnostic[]> {
     try {
         const code = view.state.doc.toString()
         const data = parseCSV(code, separator)
@@ -160,7 +160,7 @@ export async function columnLintSource(view: EditorView, separator: string): Pro
             }
         }
         if (errors.length > 0)
-            console.log('Linter found:', errors)
+            consoleLog(id, 'Linter found:', errors)
         return errors
     } catch (error) {
         console.error('Linter error:', error)
@@ -169,7 +169,6 @@ export async function columnLintSource(view: EditorView, separator: string): Pro
 }
 
 function moveCursor(view: EditorView, inc: number) {
-    console.log("moveCursors")
     const { state } = view
     state.selection.main
     const range = state.selection.main
diff --git a/CodeMirror6/NodeLib/src/CmCommands.ts b/CodeMirror6/NodeLib/src/CmCommands.ts
index 16c3c441..2d41019b 100644
--- a/CodeMirror6/NodeLib/src/CmCommands.ts
+++ b/CodeMirror6/NodeLib/src/CmCommands.ts
@@ -4,21 +4,22 @@ import { SyntaxNodeRef } from "@lezer/common"
 import { EditorState, ChangeSpec, EditorSelection, Transaction, Text, SelectionRange, TransactionSpec } from "@codemirror/state"
 import { Command } from "@codemirror/view"
 import { EditorView } from "codemirror"
+import { consoleLog } from "./CmLogging"
 
 /**
  * Return the active Markdown styles in the selection
  * @param update
  * @returns
  */
-export function getMarkdownStyleAtSelections(state: EditorState): string[] {
+export function getMarkdownStyleAtSelections(id: string, state: EditorState): string[] {
     let styles: string[] = [];
     for (let range of state.selection.ranges) {
-        styles.push(...getMarkdownStyleAtRange(state, range))
+        styles.push(...getMarkdownStyleAtRange(id, state, range))
     }
     return styles
 }
 
-function getMarkdownStyleAtRange(state: EditorState, range: SelectionRange): string[] {
+function getMarkdownStyleAtRange(id: string, state: EditorState, range: SelectionRange): string[] {
     let styles: string[] = [];
     let tree = syntaxTree(state)
     tree.iterate({
@@ -31,7 +32,7 @@ function getMarkdownStyleAtRange(state: EditorState, range: SelectionRange): str
             }
         }
     })
-    console.log("Active styles in range:", styles)
+    consoleLog(id, "Active styles in range:", styles)
     return styles
 }
 
diff --git a/CodeMirror6/NodeLib/src/CmFileUpload.ts b/CodeMirror6/NodeLib/src/CmFileUpload.ts
index 8236a9be..7e7b140d 100644
--- a/CodeMirror6/NodeLib/src/CmFileUpload.ts
+++ b/CodeMirror6/NodeLib/src/CmFileUpload.ts
@@ -2,6 +2,7 @@ import { EditorView } from "@codemirror/view"
 import { EditorSelection } from '@codemirror/state'
 import { CmSetup } from "./CmSetup"
 import { CMInstances } from "./CmInstance"
+import { consoleLog } from "./CmLogging"
 
 
 export function getFileUploadExtensions(id: string, setup: CmSetup)
@@ -93,7 +94,7 @@ export function getFileUploadExtensions(id: string, setup: CmSetup)
             const file = files[i]
             const fileUrl = await uploadFileWithDotnet(id, file)
             fileUrls.push(fileUrl)
-            console.log("Uploaded file:", fileUrl)
+            consoleLog(id, "Uploaded file:", fileUrl)
             const fileName = files[0].name
             var imageChar = file.type.indexOf("image/") === 0 ? "!" : ""
             var imageLink = `\n${imageChar}[${fileName}](${fileUrl})\n`
diff --git a/CodeMirror6/NodeLib/src/CmLanguage.ts b/CodeMirror6/NodeLib/src/CmLanguage.ts
index e612ec12..d2debe83 100644
--- a/CodeMirror6/NodeLib/src/CmLanguage.ts
+++ b/CodeMirror6/NodeLib/src/CmLanguage.ts
@@ -5,6 +5,7 @@ import { mermaid, mermaidLanguage, flowchartLanguageDescription, ganttLanguageDe
 import { languages } from "@codemirror/language-data"
 import { StateEffect } from "@codemirror/state"
 import { customMarkdownKeymap } from "./CmKeymap"
+import { consoleLog } from "./CmLogging"
 
 /**
  * StateEffect that is triggered when the language changes
@@ -16,18 +17,18 @@ export const languageChangeEffect = StateEffect.define<Language>()
  * @param languageName
  * @returns
  */
-export async function getLanguage(languageName: string, fileNameOrExtension: string): Promise<LanguageSupport> {
+export async function getLanguage(id: string, languageName: string, fileNameOrExtension: string): Promise<LanguageSupport> {
     if (fileNameOrExtension) {
         var extension = fileNameOrExtension.split('.').pop()
         if (extension) {
             var selectedLanguage = languages.find((language) => language.extensions.includes(extension))
             if (selectedLanguage) {
-                console.log("loading Language: " + selectedLanguage.name)
+                consoleLog(id, "loading Language: " + selectedLanguage.name)
                 return await selectedLanguage.load()
             }
         }
     }
-    console.log("getLanguage: " + languageName)
+    consoleLog(id, "getLanguage: " + languageName)
     switch (languageName) {
         case "Plain Text":
         case "CSV":
@@ -55,7 +56,7 @@ export async function getLanguage(languageName: string, fileNameOrExtension: str
         default:
             var selectedLanguage = languages.find((language) => language.name === languageName)
             if (selectedLanguage) {
-                console.log("loading Language: " + selectedLanguage.name)
+                consoleLog(id, "loading Language: " + selectedLanguage.name)
                 return await selectedLanguage.load()
             }
             console.error("Language not found: " + languageName)
diff --git a/CodeMirror6/NodeLib/src/CmLint.ts b/CodeMirror6/NodeLib/src/CmLint.ts
index 6fa94631..9fdeada0 100644
--- a/CodeMirror6/NodeLib/src/CmLint.ts
+++ b/CodeMirror6/NodeLib/src/CmLint.ts
@@ -1,16 +1,17 @@
 import { Diagnostic } from "@codemirror/lint"
 import { DotNet } from "@microsoft/dotnet-js-interop"
 import { EditorView } from "codemirror"
+import { consoleLog } from "./CmLogging"
 
 /**
  * A function that fetches diagnostics from the Blazor component.
  */
-export async function externalLintSource(view: EditorView, dotnetHelper: DotNet.DotNetObject): Promise<readonly Diagnostic[]> {
+export async function externalLintSource(id: string, view: EditorView, dotnetHelper: DotNet.DotNetObject): Promise<readonly Diagnostic[]> {
     try {
         const code = view.state.doc.toString()
         const errors: Diagnostic[] = await dotnetHelper.invokeMethodAsync("LintingRequestedFromJS", code)
         if (errors.length > 0)
-            console.log('Linter found:', errors)
+            consoleLog(id, 'Linter found:', errors)
         return errors
     } catch (error) {
         console.error('Linter error:', error)
diff --git a/CodeMirror6/NodeLib/src/CmLogging.ts b/CodeMirror6/NodeLib/src/CmLogging.ts
new file mode 100644
index 00000000..d5dc5e72
--- /dev/null
+++ b/CodeMirror6/NodeLib/src/CmLogging.ts
@@ -0,0 +1,6 @@
+import { CMInstances } from "./CmInstance";
+
+export function consoleLog(id: string, message: any, ...optionalParams: any[]) {
+    if (CMInstances[id].setup.debugLogs === true)
+        console.log(message, ...optionalParams)
+}
diff --git a/CodeMirror6/NodeLib/src/index.ts b/CodeMirror6/NodeLib/src/index.ts
index c536686b..b77450f4 100644
--- a/CodeMirror6/NodeLib/src/index.ts
+++ b/CodeMirror6/NodeLib/src/index.ts
@@ -62,6 +62,7 @@ import { markdownTableExtension } from "./CmMarkdownTable"
 import { dynamicDiagramsExtension } from "./CmDiagrams"
 import { hideMarksExtension } from "./CmHideMarkdownMarks"
 import { getColumnStylingKeymap, columnStylingPlugin, columnLintSource, getSeparator } from "./CmColumns"
+import { consoleLog } from "./CmLogging"
 
 /**
  * Initialize a new CodeMirror instance
@@ -80,8 +81,9 @@ export async function initCodeMirror(
         return
     }
 
-    if (setup.debugLogs === true)
+    if (setup.debugLogs === true) {
         console.log(`Initializing CodeMirror instance ${id}`)
+    }
     try {
         const minDelay = new Promise(res => setTimeout(res, 100))
 
@@ -94,7 +96,7 @@ export async function initCodeMirror(
 
         let extensions = [
             CMInstances[id].keymapCompartment.of(keymap.of(customKeyMap)),
-            CMInstances[id].languageCompartment.of(await getLanguage(initialConfig.languageName, initialConfig.fileNameOrExtension) ?? []),
+            CMInstances[id].languageCompartment.of(await getLanguage(id, initialConfig.languageName, initialConfig.fileNameOrExtension) ?? []),
             CMInstances[id].markdownStylingCompartment.of(initialConfig.languageName !== "Markdown" ? [] : autoFormatMarkdownExtensions(id, initialConfig.autoFormatMarkdown)),
             CMInstances[id].tabSizeCompartment.of(EditorState.tabSize.of(initialConfig.tabSize)),
             CMInstances[id].indentUnitCompartment.of(indentUnit.of(" ".repeat(initialConfig.tabSize))),
@@ -114,10 +116,10 @@ export async function initCodeMirror(
                     ? [
                         columnStylingPlugin(getSeparator(initialConfig.languageName)),
                         keymap.of(getColumnStylingKeymap(getSeparator(initialConfig.languageName))),
-                        linter(async view => columnLintSource(view, getSeparator(initialConfig.languageName))),
+                        linter(async view => columnLintSource(id, view, getSeparator(initialConfig.languageName))),
                     ]
                     : []
-                ),
+            ),
 
             EditorView.updateListener.of(async (update) => { await updateListenerExtension(id, update) }),
             keymap.of([
@@ -179,7 +181,7 @@ export async function initCodeMirror(
         if (setup.allowMultipleSelections === true) extensions.push(EditorState.allowMultipleSelections.of(true))
 
         if (initialConfig.lintingEnabled === true || setup.bindValueMode == "OnDelayedInput")
-            extensions.push(linter(async view => await externalLintSource(view, dotnetHelper), getExternalLinterConfig()))
+            extensions.push(linter(async view => await externalLintSource(id, view, dotnetHelper), getExternalLinterConfig()))
         if (initialConfig.lintingEnabled === true)
             extensions.push(lintGutter())
 
@@ -206,7 +208,7 @@ export async function initCodeMirror(
             scrollTo: setup.scrollToEnd === true ? scrollToEndEffect : null,
         })
 
-        if (setup.scrollToEnd === true ) {
+        if (setup.scrollToEnd === true) {
             CMInstances[id].view.focus()
         }
 
@@ -226,20 +228,13 @@ export async function initCodeMirror(
     }
 }
 
-function consoleLog(id: string, message: string)
-{
-    if (CMInstances[id].setup.debugLogs === true)
-        console.log(message)
-}
-
-export function getAllSupportedLanguageNames()
-{
+export function getAllSupportedLanguageNames() {
     return languages.map((language) => language.name)
 }
 
 async function updateListenerExtension(id: string, update: ViewUpdate) {
     const dotnetHelper = CMInstances[id].dotNetHelper
-    if (dotnetHelper === undefined){
+    if (dotnetHelper === undefined) {
         consoleLog(id, `DotNetHelper is undefined`)
         return
     }
@@ -254,7 +249,7 @@ async function updateListenerExtension(id: string, update: ViewUpdate) {
             await dotnetHelper.invokeMethodAsync("DocChangedFromJS", update.state.doc.toString())
     }
     if (update.selectionSet) {
-        await dotnetHelper.invokeMethodAsync("MarkdownStyleChangedFromJS", getMarkdownStyleAtSelections(update.state))
+        await dotnetHelper.invokeMethodAsync("MarkdownStyleChangedFromJS", getMarkdownStyleAtSelections(id, update.state))
         await dotnetHelper.invokeMethodAsync("SelectionSetFromJS", update.state.selection.ranges.map(r => { return { from: r.from, to: r.to } }))
     }
 }
@@ -320,7 +315,7 @@ export function setUnifiedMergeView(id: string, mergeViewConfiguration: UnifiedM
 }
 
 export async function setLanguage(id: string, languageName: string, fileNameOrExtension: string) {
-    const language = await getLanguage(languageName, fileNameOrExtension)
+    const language = await getLanguage(id, languageName, fileNameOrExtension)
     const customKeyMap = getLanguageKeyMaps(languageName, fileNameOrExtension)
     if (languageName !== "CSV" && languageName !== "TSV")
         customKeyMap.push(indentWithTab)
@@ -337,7 +332,7 @@ export async function setLanguage(id: string, languageName: string, fileNameOrEx
                     ? [
                         columnStylingPlugin(separator),
                         keymap.of(getColumnStylingKeymap(separator)),
-                        linter(async view => columnLintSource(view, separator)),
+                        linter(async view => columnLintSource(id, view, separator)),
                     ]
                     : []
             ),

From a48976c00deefd82efa099d1f9c3ce95322983a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20James?= <gaeljames@gmail.com>
Date: Thu, 8 Feb 2024 19:21:57 +0100
Subject: [PATCH 3/9] =?UTF-8?q?=F0=9F=90=9B=20AUtomatically=20load=20inlin?=
 =?UTF-8?q?e=20component=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CodeMirror6/NodeLib/src/index.ts         | 23 +++++++++++++++++++++++
 Examples.BlazorServer/Pages/_Host.cshtml |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/CodeMirror6/NodeLib/src/index.ts b/CodeMirror6/NodeLib/src/index.ts
index b77450f4..dc1298fd 100644
--- a/CodeMirror6/NodeLib/src/index.ts
+++ b/CodeMirror6/NodeLib/src/index.ts
@@ -81,6 +81,8 @@ export async function initCodeMirror(
         return
     }
 
+    await loadCss("_content/GaelJ.BlazorCodeMirror6/GaelJ.BlazorCodeMirror6.bundle.scp.css")
+
     if (setup.debugLogs === true) {
         console.log(`Initializing CodeMirror instance ${id}`)
     }
@@ -473,6 +475,27 @@ export function dispatchCommand(id: string, functionName: string, ...args: any[]
     }
 }
 
+function loadCss(url: string, cacheBust: boolean = true): Promise<void> {
+    const versionedUrl = cacheBust ? `${url}?v=${new Date().getTime()}` : url;
+
+    return new Promise((resolve, reject) => {
+        if (document.querySelector(`link[href="${versionedUrl}"]`)) {
+            resolve();
+            return;
+        }
+
+        const link = document.createElement('link');
+        link.type = 'text/css';
+        link.rel = 'stylesheet';
+        link.href = versionedUrl;
+        link.onload = () => resolve();
+        link.onerror = () => reject(new Error(`Failed to load CSS: ${versionedUrl}`));
+
+        document.head.appendChild(link);
+    });
+}
+
+
 /**
  * Dispose of a CodeMirror instance
  * @param id
diff --git a/Examples.BlazorServer/Pages/_Host.cshtml b/Examples.BlazorServer/Pages/_Host.cshtml
index 7140bb55..db5718c5 100644
--- a/Examples.BlazorServer/Pages/_Host.cshtml
+++ b/Examples.BlazorServer/Pages/_Host.cshtml
@@ -11,7 +11,7 @@
     <base href="~/" />
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/site.css" rel="stylesheet" />
-    <link href="Examples.BlazorServer.styles.css" rel="stylesheet" />
+    @* <link href="Examples.BlazorServer.styles.css" rel="stylesheet" /> *@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
     <link rel="icon" type="image/png" href="favicon.png"/>
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

From d74e99f8989f1b1776b95c7b2dd3b69fcc13f4a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20James?= <gaeljames@gmail.com>
Date: Thu, 8 Feb 2024 19:22:20 +0100
Subject: [PATCH 4/9] =?UTF-8?q?=F0=9F=A5=85=20Catch=20js=20disconnected=20?=
 =?UTF-8?q?exceptions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CodeMirror6/CodeMirror6WrapperInternal.razor.JsInterop.cs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CodeMirror6/CodeMirror6WrapperInternal.razor.JsInterop.cs b/CodeMirror6/CodeMirror6WrapperInternal.razor.JsInterop.cs
index de1e3d2b..6b30e6c1 100644
--- a/CodeMirror6/CodeMirror6WrapperInternal.razor.JsInterop.cs
+++ b/CodeMirror6/CodeMirror6WrapperInternal.razor.JsInterop.cs
@@ -42,6 +42,7 @@ internal async Task ModuleInvokeVoidAsync(string method, params object?[] args)
                 args = args.Prepend(cm6WrapperComponent.Setup.Id).ToArray();
                 await module.InvokeVoidAsync(method, args);
             }
+            catch (JSDisconnectedException) {}
             catch (Exception ex)
             {
                 #if NET8_0_OR_GREATER
@@ -64,6 +65,9 @@ internal async Task ModuleInvokeVoidAsync(string method, params object?[] args)
                 args = args.Prepend(cm6WrapperComponent.Setup.Id).ToArray();
                 return await module.InvokeAsync<T?>(method, args);
             }
+            catch (JSDisconnectedException) {
+                return default;
+            }
             catch (Exception ex)
             {
                 #if NET8_0_OR_GREATER

From 2d80c2da0bceb7c4c551ed12569c7c734223eab5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20James?= <gaeljames@gmail.com>
Date: Thu, 8 Feb 2024 19:23:56 +0100
Subject: [PATCH 5/9] =?UTF-8?q?=F0=9F=93=9D=20Cleanup=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CodeMirror6/CodeMirror6Wrapper.razor.cs       | 31 +------------------
 .../CodeMirror6WrapperInternal.razor.cs       | 28 -----------------
 .../Converters/JsonStringValueAttribute.cs    |  1 -
 CodeMirror6/Models/CodeMirrorDiagnostic.cs    |  5 ---
 CodeMirror6/Models/CodeMirrorSetup.cs         |  3 +-
 CodeMirror6/Models/CodeMirrorState.cs         |  1 -
 CodeMirror6/Models/SelectionRange.cs          |  2 --
 CodeMirror6/Models/UnifiedMergeConfig.cs      |  1 -
 8 files changed, 2 insertions(+), 70 deletions(-)

diff --git a/CodeMirror6/CodeMirror6Wrapper.razor.cs b/CodeMirror6/CodeMirror6Wrapper.razor.cs
index ac7c8931..0d37823e 100644
--- a/CodeMirror6/CodeMirror6Wrapper.razor.cs
+++ b/CodeMirror6/CodeMirror6Wrapper.razor.cs
@@ -13,75 +13,61 @@ namespace GaelJ.BlazorCodeMirror6;
 public partial class CodeMirror6Wrapper : ComponentBase
 {
     /// <summary>
-    /// /// Gets or sets the unique identifier for the CodeMirror6 editor.
+    /// Gets or sets the unique identifier for the CodeMirror6 editor.
     /// Defaults to CodeMirror6_Editor_{NewGuid}.
     /// </summary>
-    /// <value></value>
     [Parameter] public string Id { get; set; } = $"CodeMirror6_Editor_{Guid.NewGuid()}";
     /// <summary>
     /// The size of the tab character to use for the editor
     /// </summary>
-    /// <value></value>
     [Parameter] public int TabSize { get; set; } = 2;
     /// <summary>
     /// The number of spaces to use for indentation
     /// </summary>
-    /// <value></value>
     [Parameter] public int IndentationUnit { get; set; } = 2;
     /// <summary>
     /// The document contents
     /// </summary>
-    /// <value></value>
     [Parameter] public string? Doc { get; set; }
     /// <summary>
     /// The document contents has changed
     /// </summary>
-    /// <value></value>
     [Parameter] public EventCallback<string?> DocChanged { get; set; }
     /// <summary>
     /// The placeholder text to display in an empty editor
     /// </summary>
-    /// <value></value>
     [Parameter] public string? Placeholder { get; set; }
     /// <summary>
     /// The document focus has changed
     /// </summary>
-    /// <value></value>
     [Parameter] public EventCallback<bool> FocusChanged { get; set; }
     /// <summary>
     /// Set the cursor position or selections
     /// </summary>
-    /// <value></value>
     [Parameter] public List<SelectionRange>? Selection { get; set; }
     /// <summary>
     /// The cursor position or selections have changed
     /// </summary>
-    /// <value></value>
     [Parameter] public EventCallback<List<SelectionRange>?> SelectionChanged { get; set; }
     /// <summary>
     /// The theme to use for the editor
     /// </summary>
-    /// <value></value>
     [Parameter] public ThemeMirrorTheme? Theme { get; set; }
     /// <summary>
     /// Determine whether editing functionality should apply.
     /// </summary>
-    /// <value></value>
     [Parameter] public bool ReadOnly { get; set; }
     /// <summary>
     /// Controls whether the editor content DOM is editable
     /// </summary>
-    /// <value></value>
     [Parameter] public bool Editable { get; set; } = true;
     /// <summary>
     /// Controls whether long lines should wrap
     /// </summary>
-    /// <value></value>
     [Parameter] public bool LineWrapping { get; set; } = true;
     /// <summary>
     /// The language to use in the editor
     /// </summary>
-    /// <value></value>
     [Parameter] public CodeMirrorLanguage? Language { get; set; } = CodeMirrorLanguage.Markdown;
     /// <summary>
     /// Define a file name or file extension to be used for automatic language detection / syntax highlighting
@@ -90,22 +76,18 @@ public partial class CodeMirror6Wrapper : ComponentBase
     /// <summary>
     /// Automatically format (resize) markdown headers
     /// </summary>
-    /// <value></value>
     [Parameter] public bool AutoFormatMarkdown { get; set; }
     /// <summary>
     /// Content to be rendered before the editor
     /// </summary>
-    /// <value></value>
     [Parameter] public RenderFragment<(CMCommandDispatcher Commands, CodeMirrorConfiguration Config, CodeMirrorState State)>? ContentBefore { get; set; }
     /// <summary>
     /// Content to be rendered after the editor
     /// </summary>
-    /// <value></value>
     [Parameter] public RenderFragment<(CMCommandDispatcher Commands, CodeMirrorConfiguration Config, CodeMirrorState State)>? ContentAfter { get; set; }
     /// <summary>
     /// The active markdown styles at the current selection(s)
     /// </summary>
-    /// <value></value>
     [Parameter] public EventCallback<ReadOnlyCollection<string>> MarkdownStylesAtSelectionsChanged { get; set; }
     /// <summary>
     /// Whether to allow vertical resizing similar to a textarea
@@ -114,32 +96,26 @@ public partial class CodeMirror6Wrapper : ComponentBase
     /// <summary>
     /// Whether to allow horizontal resizing similar to a textarea
     /// </summary>
-    /// <value></value>
     [Parameter] public bool AllowHorizontalResize { get; set; }
     /// <summary>
     /// Find any errors in the document
     /// </summary>
-    /// <value></value>
     [Parameter] public Func<string, CancellationToken, Task<List<CodeMirrorDiagnostic>>>? LintDocument { get; set; }
     /// <summary>
     /// The CodeMirror setup
     /// </summary>
-    /// <value></value>
     [Parameter] public CodeMirrorSetup Setup { get; set; } = new();
     /// <summary>
     /// Whether to replace :emoji_codes: with emoji
     /// </summary>
-    /// <value></value>
     [Parameter] public bool ReplaceEmojiCodes { get; set; } = false;
     /// <summary>
     /// Get all users available for &#64;user mention completions
     /// </summary>
-    /// <value></value>
     [Parameter] public Func<Task<List<CodeMirrorCompletion>>>? GetMentionCompletions { get; set; }
     /// <summary>
     /// Upload a file to a server and return the URL to the file
     /// </summary>
-    /// <value></value>
     [Parameter] public Func<IFormFile, Task<string>>? UploadFile { get; set; }
     /// <summary>
     /// Upload an IBrowserFile to a server and returns the URL to the file
@@ -152,27 +128,22 @@ public partial class CodeMirror6Wrapper : ComponentBase
     /// <summary>
     /// The unified merge view configuration
     /// </summary>
-    /// <value></value>
     [Parameter] public UnifiedMergeConfig? MergeViewConfiguration { get; set; }
     /// <summary>
     /// Whether to allow horizontal resizing similar to a textarea
     /// </summary>
-    /// <value></value>
     [Parameter] public bool HighlightTrailingWhitespace { get; set; }
     /// <summary>
     /// Whether to allow horizontal resizing similar to a textarea
     /// </summary>
-    /// <value></value>
     [Parameter] public bool HighlightWhitespace { get; set; }
     /// <summary>
     /// Whether the editor is visible
     /// </summary>
-    /// <value></value>
     [Parameter] public bool Visible { get; set; } = true;
     /// <summary>
     /// Additional attributes to be applied to the container element
     /// </summary>
-    /// <value></value>
     [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     /// <summary>
diff --git a/CodeMirror6/CodeMirror6WrapperInternal.razor.cs b/CodeMirror6/CodeMirror6WrapperInternal.razor.cs
index efcc699a..1b874808 100644
--- a/CodeMirror6/CodeMirror6WrapperInternal.razor.cs
+++ b/CodeMirror6/CodeMirror6WrapperInternal.razor.cs
@@ -19,67 +19,54 @@ public partial class CodeMirror6WrapperInternal : ComponentBase, IAsyncDisposabl
     /// <summary>
     /// The size of the tab character to use for the editor
     /// </summary>
-    /// <value></value>
     [Parameter] public int TabSize { get; set; } = 2;
     /// <summary>
     /// The number of spaces to use for indentation
     /// </summary>
-    /// <value></value>
     [Parameter] public int IndentationUnit { get; set; } = 2;
     /// <summary>
     /// The document contents
     /// </summary>
-    /// <value></value>
     [Parameter] public string? Doc { get; set; }
     /// <summary>
     /// The document contents has changed
     /// </summary>
-    /// <value></value>
     [Parameter] public EventCallback<string?> DocChanged { get; set; }
     /// <summary>
     /// The placeholder text to display in an empty editor
     /// </summary>
-    /// <value></value>
     [Parameter] public string? Placeholder { get; set; }
     /// <summary>
     /// The document focus has changed
     /// </summary>
-    /// <value></value>
     [Parameter] public EventCallback<bool> FocusChanged { get; set; }
     /// <summary>
     /// Set the cursor position or selections
     /// </summary>
-    /// <value></value>
     [Parameter] public List<SelectionRange>? Selection { get; set; }
     /// <summary>
     /// The cursor position or selections have changed
     /// </summary>
-    /// <value></value>
     [Parameter] public EventCallback<List<SelectionRange>?> SelectionChanged { get; set; }
     /// <summary>
     /// The theme to use for the editor
     /// </summary>
-    /// <value></value>
     [Parameter] public ThemeMirrorTheme? Theme { get; set; }
     /// <summary>
     /// Determine whether editing functionality should apply.
     /// </summary>
-    /// <value></value>
     [Parameter] public bool ReadOnly { get; set; }
     /// <summary>
     /// Controls whether the editor content DOM is editable
     /// </summary>
-    /// <value></value>
     [Parameter] public bool Editable { get; set; } = true;
     /// <summary>
     /// Controls whether long lines should wrap
     /// </summary>
-    /// <value></value>
     [Parameter] public bool LineWrapping { get; set; } = true;
     /// <summary>
     /// The language to use in the editor
     /// </summary>
-    /// <value></value>
     [Parameter] public CodeMirrorLanguage? Language { get; set; } = CodeMirrorLanguage.Markdown;
     /// <summary>
     /// Define a file name or file extension to be used for automatic language detection / syntax highlighting
@@ -88,22 +75,18 @@ public partial class CodeMirror6WrapperInternal : ComponentBase, IAsyncDisposabl
     /// <summary>
     /// Automatically format (resize) markdown headers
     /// </summary>
-    /// <value></value>
     [Parameter] public bool AutoFormatMarkdown { get; set; }
     /// <summary>
     /// Content to be rendered before the editor
     /// </summary>
-    /// <value></value>
     [Parameter] public RenderFragment<(CMCommandDispatcher Commands, CodeMirrorConfiguration Config, CodeMirrorState State)>? ContentBefore { get; set; }
     /// <summary>
     /// Content to be rendered after the editor
     /// </summary>
-    /// <value></value>
     [Parameter] public RenderFragment<(CMCommandDispatcher Commands, CodeMirrorConfiguration Config, CodeMirrorState State)>? ContentAfter { get; set; }
     /// <summary>
     /// The active markdown styles at the current selection(s)
     /// </summary>
-    /// <value></value>
     [Parameter] public EventCallback<ReadOnlyCollection<string>> MarkdownStylesAtSelectionsChanged { get; set; }
     /// <summary>
     /// Whether to allow vertical resizing similar to a textarea
@@ -112,32 +95,26 @@ public partial class CodeMirror6WrapperInternal : ComponentBase, IAsyncDisposabl
     /// <summary>
     /// Whether to allow horizontal resizing similar to a textarea
     /// </summary>
-    /// <value></value>
     [Parameter] public bool AllowHorizontalResize { get; set; }
     /// <summary>
     /// Find any errors in the document
     /// </summary>
-    /// <value></value>
     [Parameter] public Func<string, CancellationToken, Task<List<CodeMirrorDiagnostic>>>? LintDocument { get; set; }
     /// <summary>
     /// The CodeMirror setup
     /// </summary>
-    /// <value></value>
     [Parameter] public CodeMirrorSetup Setup { get; set; } = new();
     /// <summary>
     /// Whether to replace :emoji_codes: with emoji
     /// </summary>
-    /// <value></value>
     [Parameter] public bool ReplaceEmojiCodes { get; set; } = false;
     /// <summary>
     /// Get all users available for &#64;user mention completions
     /// </summary>
-    /// <value></value>
     [Parameter] public Func<Task<List<CodeMirrorCompletion>>>? GetMentionCompletions { get; set; }
     /// <summary>
     /// Upload a file to a server and return the URL to the file
     /// </summary>
-    /// <value></value>
     [Parameter] public Func<IFormFile, Task<string>>? UploadFile { get; set; }
     /// <summary>
     /// Upload an IBrowserFile to a server and returns the URL to the file
@@ -150,27 +127,22 @@ public partial class CodeMirror6WrapperInternal : ComponentBase, IAsyncDisposabl
     /// <summary>
     /// The unified merge view configuration
     /// </summary>
-    /// <value></value>
     [Parameter] public UnifiedMergeConfig? MergeViewConfiguration { get; set; }
     /// <summary>
     /// Whether to allow horizontal resizing similar to a textarea
     /// </summary>
-    /// <value></value>
     [Parameter] public bool HighlightTrailingWhitespace { get; set; }
     /// <summary>
     /// Whether to allow horizontal resizing similar to a textarea
     /// </summary>
-    /// <value></value>
     [Parameter] public bool HighlightWhitespace { get; set; }
     /// <summary>
     /// Whether the editor is visible
     /// </summary>
-    /// <value></value>
     [Parameter] public bool Visible { get; set; } = true;
     /// <summary>
     /// Additional attributes to be applied to the container element
     /// </summary>
-    /// <value></value>
     [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
     /// <summary>
diff --git a/CodeMirror6/Converters/JsonStringValueAttribute.cs b/CodeMirror6/Converters/JsonStringValueAttribute.cs
index 750a5e2f..f54d6f9a 100644
--- a/CodeMirror6/Converters/JsonStringValueAttribute.cs
+++ b/CodeMirror6/Converters/JsonStringValueAttribute.cs
@@ -10,6 +10,5 @@ public class JsonStringValueAttribute(string value) : Attribute
     /// <summary>
     /// The string value of the field when serialized to JSON.
     /// </summary>
-    /// <value></value>
     public string Value { get; } = value;
 }
diff --git a/CodeMirror6/Models/CodeMirrorDiagnostic.cs b/CodeMirror6/Models/CodeMirrorDiagnostic.cs
index 3733292c..033f4db3 100644
--- a/CodeMirror6/Models/CodeMirrorDiagnostic.cs
+++ b/CodeMirror6/Models/CodeMirrorDiagnostic.cs
@@ -10,13 +10,11 @@ public record CodeMirrorDiagnostic
     /// <summary>
     /// The start position of the relevant text, in characters counted from the start of the string.
     /// </summary>
-    /// <value></value>
     [JsonPropertyName("from")] public int From { get; init; }
     /// <summary>
     /// The end position. May be equal to `from`, though actually
     /// covering text is preferable.
     /// </summary>
-    /// <value></value>
     [JsonPropertyName("to")] public int To { get; init; }
     /// <summary>
     /// The severity of the problem. This will influence how it is
@@ -28,18 +26,15 @@ public record CodeMirrorDiagnostic
     /// When given, add an extra CSS class to parts of the code that
     /// this diagnostic applies to.
     /// </summary>
-    /// <value></value>
     [JsonPropertyName("markClass")] public string? MarkClass { get; init; }
     /// <summary>
     /// An optional source string indicating where the diagnostic is
     /// coming from. You can put the name of your linter here, if
     /// applicable.
     /// </summary>
-    /// <value></value>
     [JsonPropertyName("source")] public string? Source { get; init; }
     /// <summary>
     /// The message associated with this diagnostic.
     /// </summary>
-    /// <value></value>
     [JsonPropertyName("message")] public string Message { get; init; } = null!;
 }
diff --git a/CodeMirror6/Models/CodeMirrorSetup.cs b/CodeMirror6/Models/CodeMirrorSetup.cs
index 677ee785..b670a5d4 100644
--- a/CodeMirror6/Models/CodeMirrorSetup.cs
+++ b/CodeMirror6/Models/CodeMirrorSetup.cs
@@ -16,10 +16,9 @@ public CodeMirrorSetup()
     }
 
     /// <summary>
-    /// /// Gets or sets the unique identifier for the CodeMirror6 editor.
+    /// Gets or sets the unique identifier for the CodeMirror6 editor.
     /// Defaults to CodeMirror6_Editor_{NewGuid}.
     /// </summary>
-    /// <value></value>
     [JsonPropertyName("id")] public string Id { get; init; } = $"CodeMirror6_Editor_{Guid.NewGuid()}";
 
     /// <summary>
diff --git a/CodeMirror6/Models/CodeMirrorState.cs b/CodeMirror6/Models/CodeMirrorState.cs
index d442b039..4b549851 100644
--- a/CodeMirror6/Models/CodeMirrorState.cs
+++ b/CodeMirror6/Models/CodeMirrorState.cs
@@ -10,7 +10,6 @@ public class CodeMirrorState
     /// <summary>
     /// List of markdown styles active at the current selection(s)
     /// </summary>
-    /// <value></value>
     public ReadOnlyCollection<string> MarkdownStylesAtSelections { get; internal set; } = new([]);
 
     /// <summary>
diff --git a/CodeMirror6/Models/SelectionRange.cs b/CodeMirror6/Models/SelectionRange.cs
index d57d908f..1055463b 100644
--- a/CodeMirror6/Models/SelectionRange.cs
+++ b/CodeMirror6/Models/SelectionRange.cs
@@ -15,11 +15,9 @@ public record SelectionRange
     /// <summary>
     /// The lower boundary of the range.
     /// </summary>
-    /// <value></value>
     [JsonPropertyName("from")] public int? From { get; set; }
     /// <summary>
     /// The upper boundary of the range.
     /// </summary>
-    /// <value></value>
     [JsonPropertyName("to")] public int? To { get; set; }
 }
diff --git a/CodeMirror6/Models/UnifiedMergeConfig.cs b/CodeMirror6/Models/UnifiedMergeConfig.cs
index 36f6d2a0..55507321 100644
--- a/CodeMirror6/Models/UnifiedMergeConfig.cs
+++ b/CodeMirror6/Models/UnifiedMergeConfig.cs
@@ -55,6 +55,5 @@ public record DiffConfig
     /// changed characters in a scanned range. This should help avoid
     /// quadratic running time on large, very different inputs.
     /// </summary>
-    /// <value></value>
     [JsonPropertyName("scanLimit")] public int? ScanLimit { get; set; }
 }

From 1a418fe7db623d6b4586e2cdce48d4bfbc3dde31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20James?= <gaeljames@gmail.com>
Date: Thu, 8 Feb 2024 19:25:01 +0100
Subject: [PATCH 6/9] =?UTF-8?q?=F0=9F=8E=A8=20Finish=20removing=20Id=20par?=
 =?UTF-8?q?ameter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CodeMirror6/CodeMirror6Wrapper.razor.cs | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/CodeMirror6/CodeMirror6Wrapper.razor.cs b/CodeMirror6/CodeMirror6Wrapper.razor.cs
index 0d37823e..ca03e6b7 100644
--- a/CodeMirror6/CodeMirror6Wrapper.razor.cs
+++ b/CodeMirror6/CodeMirror6Wrapper.razor.cs
@@ -12,11 +12,6 @@ namespace GaelJ.BlazorCodeMirror6;
 /// </summary>
 public partial class CodeMirror6Wrapper : ComponentBase
 {
-    /// <summary>
-    /// Gets or sets the unique identifier for the CodeMirror6 editor.
-    /// Defaults to CodeMirror6_Editor_{NewGuid}.
-    /// </summary>
-    [Parameter] public string Id { get; set; } = $"CodeMirror6_Editor_{Guid.NewGuid()}";
     /// <summary>
     /// The size of the tab character to use for the editor
     /// </summary>

From 80b1f5d9764af5c556bd716420a98bb9bfbf4fc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20James?= <gaeljames@gmail.com>
Date: Thu, 8 Feb 2024 19:45:47 +0100
Subject: [PATCH 7/9] =?UTF-8?q?=E2=9C=A8=20Implement=20optional=20persist?=
 =?UTF-8?q?=20/=20restore=20of=20document=20to=20local=20storage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CodeMirror6/CodeMirror6Wrapper.razor          |  1 +
 CodeMirror6/CodeMirror6Wrapper.razor.cs       |  4 ++
 .../CodeMirror6WrapperInternal.razor.cs       | 11 +++++-
 .../Commands/CMConfigurationSetters.cs        |  5 +++
 CodeMirror6/Models/CodeMirrorConfiguration.cs | 14 +++++--
 CodeMirror6/NodeLib/src/CmConfiguration.ts    |  1 +
 CodeMirror6/NodeLib/src/CmInstance.ts         |  1 +
 CodeMirror6/NodeLib/src/index.ts              | 38 +++++++++++++++++--
 8 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/CodeMirror6/CodeMirror6Wrapper.razor b/CodeMirror6/CodeMirror6Wrapper.razor
index d148e9f5..451ca467 100644
--- a/CodeMirror6/CodeMirror6Wrapper.razor
+++ b/CodeMirror6/CodeMirror6Wrapper.razor
@@ -34,6 +34,7 @@
             HighlightWhitespace="@HighlightWhitespace"
             HighlightTrailingWhitespace="@HighlightTrailingWhitespace"
             Visible="@Visible"
+            LocalStorageKey="@LocalStorageKey"
         />
     </ChildContent>
     <ErrorContent Context="c">
diff --git a/CodeMirror6/CodeMirror6Wrapper.razor.cs b/CodeMirror6/CodeMirror6Wrapper.razor.cs
index ca03e6b7..4762d40a 100644
--- a/CodeMirror6/CodeMirror6Wrapper.razor.cs
+++ b/CodeMirror6/CodeMirror6Wrapper.razor.cs
@@ -137,6 +137,10 @@ public partial class CodeMirror6Wrapper : ComponentBase
     /// </summary>
     [Parameter] public bool Visible { get; set; } = true;
     /// <summary>
+    /// Optional local storage key to use for saving the document
+    /// </summary>
+    [Parameter] public string? LocalStorageKey { get; set; }
+    /// <summary>
     /// Additional attributes to be applied to the container element
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }
diff --git a/CodeMirror6/CodeMirror6WrapperInternal.razor.cs b/CodeMirror6/CodeMirror6WrapperInternal.razor.cs
index 1b874808..affe9059 100644
--- a/CodeMirror6/CodeMirror6WrapperInternal.razor.cs
+++ b/CodeMirror6/CodeMirror6WrapperInternal.razor.cs
@@ -141,6 +141,10 @@ public partial class CodeMirror6WrapperInternal : ComponentBase, IAsyncDisposabl
     /// </summary>
     [Parameter] public bool Visible { get; set; } = true;
     /// <summary>
+    /// Optional local storage key to use for saving the document
+    /// </summary>
+    [Parameter] public string? LocalStorageKey { get; set; }
+    /// <summary>
     /// Additional attributes to be applied to the container element
     /// </summary>
     [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -188,7 +192,8 @@ protected override async Task OnInitializedAsync()
             MergeViewConfiguration,
             FileNameOrExtension,
             HighlightTrailingWhitespace,
-            HighlightWhitespace
+            HighlightWhitespace,
+            LocalStorageKey
         );
         try {
             if (IsWASM)
@@ -298,6 +303,10 @@ protected override async Task OnParametersSetAsync()
                 Config.HighlightWhitespace = HighlightWhitespace;
                 await CmJsInterop.PropertySetters.SetHighlightWhitespace();
             }
+            if (Config.LocalStorageKey != LocalStorageKey) {
+                Config.LocalStorageKey = LocalStorageKey;
+                await CmJsInterop.PropertySetters.SetLocalStorageKey();
+            }
         }
         catch (Exception ex) {
             Logger.LogError(ex, "Error setting CodeMirror6 properties");
diff --git a/CodeMirror6/Commands/CMConfigurationSetters.cs b/CodeMirror6/Commands/CMConfigurationSetters.cs
index 505dbd3d..0bd3bd25 100644
--- a/CodeMirror6/Commands/CMConfigurationSetters.cs
+++ b/CodeMirror6/Commands/CMConfigurationSetters.cs
@@ -147,4 +147,9 @@ internal Task SetHighlightWhitespace() => cmJsInterop.ModuleInvokeVoidAsync(
     internal Task<List<string>?> GetAllSupportedLanguageNames() => cmJsInterop.ModuleInvokeAsync<List<string>>(
         "getAllSupportedLanguageNames"
     );
+
+    internal Task SetLocalStorageKey() => cmJsInterop.ModuleInvokeVoidAsync(
+        "setLocalStorageKey",
+        config.LocalStorageKey
+    );
 }
diff --git a/CodeMirror6/Models/CodeMirrorConfiguration.cs b/CodeMirror6/Models/CodeMirrorConfiguration.cs
index 5af51a8d..480d6a86 100644
--- a/CodeMirror6/Models/CodeMirrorConfiguration.cs
+++ b/CodeMirror6/Models/CodeMirrorConfiguration.cs
@@ -23,6 +23,7 @@ namespace GaelJ.BlazorCodeMirror6.Models;
 /// <param name="fileNameOrExtension"></param>
 /// <param name="highlightTrailingWhitespace"></param>
 /// <param name="highlightWhitespace"></param>
+/// <param name="localStorageKey"></param>
 public class CodeMirrorConfiguration(
     string? doc,
     string? placeholder,
@@ -40,7 +41,8 @@ public class CodeMirrorConfiguration(
     UnifiedMergeConfig? mergeViewConfiguration,
     string? fileNameOrExtension,
     bool highlightTrailingWhitespace,
-    bool highlightWhitespace)
+    bool highlightWhitespace,
+    string? localStorageKey)
 {
 
     /// <summary>
@@ -110,14 +112,14 @@ public class CodeMirrorConfiguration(
     [JsonPropertyName("lineWrapping")] public bool LineWrapping { get; internal set; } = lineWrapping;
 
     /// <summary>
-    /// Did the user provide a linting callback (internal use)
+    /// Did the user provide a linting callback
     /// </summary>
-    [JsonPropertyName("lintingEnabled")] internal bool LintingEnabled { get; set; } = lintingEnabled;
+    [JsonPropertyName("lintingEnabled")] public bool LintingEnabled { get; internal set; } = lintingEnabled;
 
     /// <summary>
     /// Unified merged view configuration
     /// </summary>
-    [JsonPropertyName("mergeViewConfiguration")] internal UnifiedMergeConfig? MergeViewConfiguration { get; set; } = mergeViewConfiguration;
+    [JsonPropertyName("mergeViewConfiguration")] public UnifiedMergeConfig? MergeViewConfiguration { get; internal set; } = mergeViewConfiguration;
 
     /// <summary>
     /// Whether to highlight trailing whitespace
@@ -128,4 +130,8 @@ public class CodeMirrorConfiguration(
     /// Whether to highlight whitespace
     /// </summary>
     [JsonPropertyName("highlightWhitespace")] public bool HighlightWhitespace { get; internal set; } = highlightWhitespace;
+    /// <summary>
+    /// Optional local storage key to use for saving the document
+    /// </summary>
+    [JsonPropertyName("localStorageKey")] public string? LocalStorageKey { get; internal set; } = localStorageKey;
 }
diff --git a/CodeMirror6/NodeLib/src/CmConfiguration.ts b/CodeMirror6/NodeLib/src/CmConfiguration.ts
index 1e0360c7..50d13e86 100644
--- a/CodeMirror6/NodeLib/src/CmConfiguration.ts
+++ b/CodeMirror6/NodeLib/src/CmConfiguration.ts
@@ -21,6 +21,7 @@ export class CmConfiguration {
     public mergeViewConfiguration: UnifiedMergeConfig | null
     public highlightTrailingWhitespace: boolean
     public highlightWhitespace: boolean
+    public localStorageKey: string
 }
 
 export interface UnifiedMergeConfig {
diff --git a/CodeMirror6/NodeLib/src/CmInstance.ts b/CodeMirror6/NodeLib/src/CmInstance.ts
index 9126b1d4..750781b4 100644
--- a/CodeMirror6/NodeLib/src/CmInstance.ts
+++ b/CodeMirror6/NodeLib/src/CmInstance.ts
@@ -12,6 +12,7 @@ export class CmInstance
     public state: EditorState
     public view: EditorView
     public setup: CmSetup
+    public localStorageKey: string
     public languageCompartment: Compartment = new Compartment
     public markdownStylingCompartment: Compartment = new Compartment
     public tabSizeCompartment: Compartment = new Compartment
diff --git a/CodeMirror6/NodeLib/src/index.ts b/CodeMirror6/NodeLib/src/index.ts
index dc1298fd..31ae52e4 100644
--- a/CodeMirror6/NodeLib/src/index.ts
+++ b/CodeMirror6/NodeLib/src/index.ts
@@ -92,6 +92,7 @@ export async function initCodeMirror(
         CMInstances[id] = new CmInstance()
         CMInstances[id].dotNetHelper = dotnetHelper
         CMInstances[id].setup = setup
+        CMInstances[id].localStorageKey = initialConfig.localStorageKey
         const customKeyMap = getLanguageKeyMaps(initialConfig.languageName, initialConfig.fileNameOrExtension)
         if (initialConfig.languageName !== "CSV" && initialConfig.languageName !== "TSV")
             customKeyMap.push(indentWithTab)
@@ -182,8 +183,9 @@ export async function initCodeMirror(
         if (setup.scrollPastEnd === true) extensions.push(scrollPastEnd())
         if (setup.allowMultipleSelections === true) extensions.push(EditorState.allowMultipleSelections.of(true))
 
-        if (initialConfig.lintingEnabled === true || setup.bindValueMode == "OnDelayedInput")
+        if (initialConfig.lintingEnabled === true || setup.bindValueMode == "OnDelayedInput") {
             extensions.push(linter(async view => await externalLintSource(id, view, dotnetHelper), getExternalLinterConfig()))
+        }
         if (initialConfig.lintingEnabled === true)
             extensions.push(lintGutter())
 
@@ -191,13 +193,16 @@ export async function initCodeMirror(
 
         await minDelay
 
-        const scrollToEndEffect = EditorView.scrollIntoView(initialConfig.doc ? initialConfig.doc.length : 0, { y: 'end' })
-        const docLines = initialConfig.doc?.split(/\r\n|\r|\n/) ?? [initialConfig.doc]
+        const textInLocalStorage = localStorage.getItem(initialConfig.localStorageKey)
+        const initialDoc = textInLocalStorage ? textInLocalStorage : initialConfig.doc
+
+        const scrollToEndEffect = EditorView.scrollIntoView(initialDoc ? initialDoc.length : 0, { y: 'end' })
+        const docLines = initialDoc?.split(/\r\n|\r|\n/) ?? [initialDoc]
         const text = Text.of(docLines)
         const textLength = text?.length ?? 0
 
         CMInstances[id].state = EditorState.create({
-            doc: initialConfig.doc,
+            doc: initialDoc,
             extensions: extensions,
             selection: {
                 anchor: setup.scrollToEnd === true ? textLength : 0,
@@ -244,6 +249,7 @@ async function updateListenerExtension(id: string, update: ViewUpdate) {
     if (update.docChanged) {
         if (setup.bindValueMode === 'OnInput')
             await dotnetHelper.invokeMethodAsync("DocChangedFromJS", update.state.doc.toString())
+        saveToLocalStorage(id)
     }
     if (update.focusChanged) {
         await dotnetHelper.invokeMethodAsync("FocusChangedFromJS", update.view.hasFocus)
@@ -394,6 +400,30 @@ export function setDoc(id: string, text: string) {
     CMInstances[id].view.dispatch(transaction)
 }
 
+export function setLocalStorageKey(id: string, value: string) {
+    saveToLocalStorage(id)
+    CMInstances[id].localStorageKey = value
+    loadFromLocalStorage(id)
+}
+
+function loadFromLocalStorage(id: string) {
+    const localStorageKey = CMInstances[id].localStorageKey
+    if (localStorageKey) {
+        const value = localStorage.getItem(localStorageKey)
+        if (value) {
+            setDoc(id, value)
+        }
+    }
+}
+
+function saveToLocalStorage(id: string) {
+    const localStorageKey = CMInstances[id].localStorageKey
+    if (localStorageKey) {
+        const value = CMInstances[id].view.state.doc.toString()
+        localStorage.setItem(localStorageKey, value)
+    }
+}
+
 const autoFormatMarkdownExtensions = (id: string, autoFormatMarkdown: boolean = true) => [
     getDynamicHeaderStyling(autoFormatMarkdown),
     dynamicHrExtension(autoFormatMarkdown),

From 5bcbb8f775ed97d66a4036f12de2fdce8dad5054 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20James?= <gaeljames@gmail.com>
Date: Thu, 8 Feb 2024 19:46:33 +0100
Subject: [PATCH 8/9] =?UTF-8?q?=F0=9F=93=9D=20Update=20changelog=20for=200?=
 =?UTF-8?q?.3.7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md     | 27 +++++++++++++++++++++++++++
 NEW_CHANGELOG.md | 21 +++++++++++++++++----
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f674d9eb..e0fd2ebe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,32 @@
 # Changelog
 
+## 0.3.7 - 2024-02-08
+
+### ✨ Introduce new features
+
+- Implement optional persist / restore of document to local storage
+
+### 🎨 Improve structure / format of the code
+
+- Finish removing Id parameter
+
+### 🐛 Fix a bug
+
+- Automatically load inline component css
+- Fix browser refresh script url in example
+
+### 📝 Add or update documentation
+
+- Cleanup comments
+
+### 🔊 Add or update logs
+
+- Make all js loggings optional
+
+### 🥅 Catch errors
+
+- Catch js disconnected exceptions
+
 ## 0.3.6 - 2024-02-08
 
 ### 🐛 Fix a bug
diff --git a/NEW_CHANGELOG.md b/NEW_CHANGELOG.md
index 28b63853..7b60fda5 100644
--- a/NEW_CHANGELOG.md
+++ b/NEW_CHANGELOG.md
@@ -1,11 +1,24 @@
+### ✨ Introduce new features
+
+- Implement optional persist / restore of document to local storage
+
+### 🎨 Improve structure / format of the code
+
+- Finish removing Id parameter
+
 ### 🐛 Fix a bug
 
-- Try to fix random crash at startup
+- Automatically load inline component css
+- Fix browser refresh script url in example
 
-### 💥 Introduce breaking changes
+### 📝 Add or update documentation
 
-- Move Id from parameter to Setup, as it should never be changed
+- Cleanup comments
 
 ### 🔊 Add or update logs
 
-- Add DebugLogs setup parameter to print debug logs
+- Make all js loggings optional
+
+### 🥅 Catch errors
+
+- Catch js disconnected exceptions

From b49c2aa8723189de1897bd3d5c04eff4d24d2335 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20James?= <gaeljames@gmail.com>
Date: Thu, 8 Feb 2024 19:46:33 +0100
Subject: [PATCH 9/9] =?UTF-8?q?=F0=9F=94=96=20Bump=20version=20to=200.3.7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CodeMirror6/CodeMirror6.csproj                                  | 2 +-
 Examples.BlazorServer/Examples.BlazorServer.csproj              | 2 +-
 .../Examples.BlazorServerInteractive.csproj                     | 2 +-
 Examples.BlazorWasm/Examples.BlazorWasm.csproj                  | 2 +-
 Examples.Common/Examples.Common.csproj                          | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/CodeMirror6/CodeMirror6.csproj b/CodeMirror6/CodeMirror6.csproj
index 8d81be76..0641705c 100644
--- a/CodeMirror6/CodeMirror6.csproj
+++ b/CodeMirror6/CodeMirror6.csproj
@@ -9,7 +9,7 @@
     <AssemblyName>GaelJ.BlazorCodeMirror6</AssemblyName>
     <IsPackable>true</IsPackable>
     <PackageId>GaelJ.BlazorCodeMirror6</PackageId>
-    <Version>0.3.6</Version>
+    <Version>0.3.7</Version>
     <IncludeSymbols>true</IncludeSymbols>
     <SymbolPackageFormat>snupkg</SymbolPackageFormat>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
diff --git a/Examples.BlazorServer/Examples.BlazorServer.csproj b/Examples.BlazorServer/Examples.BlazorServer.csproj
index 4c2b7bd7..23b04752 100644
--- a/Examples.BlazorServer/Examples.BlazorServer.csproj
+++ b/Examples.BlazorServer/Examples.BlazorServer.csproj
@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <Version>0.3.6</Version>
+    <Version>0.3.7</Version>
   </PropertyGroup>
   <ItemGroup>
     <SupportedPlatform Include="browser" />
diff --git a/Examples.BlazorServerInteractive/Examples.BlazorServerInteractive.csproj b/Examples.BlazorServerInteractive/Examples.BlazorServerInteractive.csproj
index fc3f175a..874153b3 100644
--- a/Examples.BlazorServerInteractive/Examples.BlazorServerInteractive.csproj
+++ b/Examples.BlazorServerInteractive/Examples.BlazorServerInteractive.csproj
@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <IsPackable>false</IsPackable>
-    <Version>0.3.6</Version>
+    <Version>0.3.7</Version>
   </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="Sentry.AspNetCore" Version="3.41.4" />
diff --git a/Examples.BlazorWasm/Examples.BlazorWasm.csproj b/Examples.BlazorWasm/Examples.BlazorWasm.csproj
index a0c8b8e9..95937eff 100644
--- a/Examples.BlazorWasm/Examples.BlazorWasm.csproj
+++ b/Examples.BlazorWasm/Examples.BlazorWasm.csproj
@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <IsPackable>false</IsPackable>
-    <Version>0.3.6</Version>
+    <Version>0.3.7</Version>
   </PropertyGroup>
   <ItemGroup>
     <SupportedPlatform Include="browser-wasm" />
diff --git a/Examples.Common/Examples.Common.csproj b/Examples.Common/Examples.Common.csproj
index 1b964875..420f5e16 100644
--- a/Examples.Common/Examples.Common.csproj
+++ b/Examples.Common/Examples.Common.csproj
@@ -5,7 +5,7 @@
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
-    <Version>0.3.6</Version>
+    <Version>0.3.7</Version>
   </PropertyGroup>
   <ItemGroup>
     <SupportedPlatform Include="browser" />