From 2c58da4048613406e12c41eb745e4ebe5ef0e065 Mon Sep 17 00:00:00 2001
From: Aponia <brianmv@uci.edu>
Date: Mon, 14 Oct 2024 06:31:04 -0700
Subject: [PATCH 1/2] refactor: update isEditable implementation

---
 .../src/lib/components/toolbar/Toolbar.svelte   | 12 ++----------
 .../src/lib/core/composerContext.ts             | 17 +++++++++++++++--
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/svelte-lexical/src/lib/components/toolbar/Toolbar.svelte b/packages/svelte-lexical/src/lib/components/toolbar/Toolbar.svelte
index 20e90621..a1edc47e 100644
--- a/packages/svelte-lexical/src/lib/components/toolbar/Toolbar.svelte
+++ b/packages/svelte-lexical/src/lib/components/toolbar/Toolbar.svelte
@@ -3,14 +3,12 @@
 
   import StateStoreRichTextUpdator from './StateStoreRichTextUpdator.svelte';
   import {setContext} from 'svelte';
-  import {getEditor} from '$lib/core/composerContext.js';
-  import {onMount} from 'svelte';
+  import {getEditor, setIsEditable} from '$lib/core/composerContext.js';
   import type {NodeKey} from 'lexical';
 
   const editor = getEditor();
 
-  const isEditable = writable(editor.isEditable());
-  setContext('isEditable', isEditable);
+  setIsEditable(editor)
 
   const activeEditor = writable(editor);
   setContext('activeEditor', activeEditor);
@@ -36,12 +34,6 @@
   setContext('codeLanguage', writable(''));
   setContext('isLink', writable(false));
   setContext('isImageCaption', writable(false));
-
-  onMount(() => {
-    return editor.registerEditableListener((editable) => {
-      $isEditable = editable;
-    });
-  });
 </script>
 
 <StateStoreRichTextUpdator />
diff --git a/packages/svelte-lexical/src/lib/core/composerContext.ts b/packages/svelte-lexical/src/lib/core/composerContext.ts
index 7ae58034..95fb0671 100644
--- a/packages/svelte-lexical/src/lib/core/composerContext.ts
+++ b/packages/svelte-lexical/src/lib/core/composerContext.ts
@@ -1,7 +1,7 @@
 import type {HistoryState} from '@lexical/history';
 import type {LexicalEditor} from 'lexical';
 import {SvelteComponent, getContext, setContext} from 'svelte';
-import type {Writable} from 'svelte/store';
+import {readable, type Readable,type Writable} from 'svelte/store';
 
 export function getEditor(): LexicalEditor {
   return getContext('editor');
@@ -13,10 +13,23 @@ export function setEditor(editor: LexicalEditor): void {
   setContext('editor', editor);
 }
 
-export function getIsEditable(): Writable<boolean> {
+export function getIsEditable(): Readable <boolean> {
   return getContext('isEditable');
 }
 
+/**
+ * Readable store that subscribes to the {@link LexicalEditor._editable} state.
+ */
+export function setIsEditable(editor: LexicalEditor): Readable<boolean> {
+  const isEditable = readable(editor.isEditable(), (set) => {
+    const unsubscribe = editor.registerEditableListener((editable) => {
+      set(editable)
+    })
+    return unsubscribe
+  });
+  return setContext('isEditable', isEditable)
+}
+
 export function getActiveEditor(): Writable<LexicalEditor> {
   return getContext('activeEditor');
 }

From 0f290f20ebf9ba838899de98b0020fd563f65383 Mon Sep 17 00:00:00 2001
From: Aponia <brianmv@uci.edu>
Date: Mon, 14 Oct 2024 06:36:55 -0700
Subject: [PATCH 2/2] feat: make store writable and also update editor state

---
 .../src/lib/core/composerContext.ts             | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/svelte-lexical/src/lib/core/composerContext.ts b/packages/svelte-lexical/src/lib/core/composerContext.ts
index 95fb0671..309af176 100644
--- a/packages/svelte-lexical/src/lib/core/composerContext.ts
+++ b/packages/svelte-lexical/src/lib/core/composerContext.ts
@@ -1,7 +1,7 @@
 import type {HistoryState} from '@lexical/history';
 import type {LexicalEditor} from 'lexical';
 import {SvelteComponent, getContext, setContext} from 'svelte';
-import {readable, type Readable,type Writable} from 'svelte/store';
+import {writable,type Writable} from 'svelte/store';
 
 export function getEditor(): LexicalEditor {
   return getContext('editor');
@@ -13,20 +13,27 @@ export function setEditor(editor: LexicalEditor): void {
   setContext('editor', editor);
 }
 
-export function getIsEditable(): Readable <boolean> {
+export function getIsEditable(): Writable<boolean> {
   return getContext('isEditable');
 }
 
 /**
- * Readable store that subscribes to the {@link LexicalEditor._editable} state.
+ * Writable store that abstracts {@link LexicalEditor.isEditable} and {@link LexicalEditor.setEditable}.
  */
-export function setIsEditable(editor: LexicalEditor): Readable<boolean> {
-  const isEditable = readable(editor.isEditable(), (set) => {
+export function setIsEditable(editor: LexicalEditor): Writable<boolean> {
+  const isEditable = writable(editor.isEditable(), (set) => {
     const unsubscribe = editor.registerEditableListener((editable) => {
       set(editable)
     })
     return unsubscribe
   });
+
+  // The overridden `set` method will __not__ update the store's state.
+  // Assume that the editor will emit an update to the store's callback at `registerEditableListener.
+  isEditable.set = (editable) => {
+    editor.setEditable(editable)
+  }
+
   return setContext('isEditable', isEditable)
 }