From a69608572705e438ad9120b5a3930354fec862be Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Tue, 30 Aug 2022 15:07:56 +0100
Subject: [PATCH 1/3] Remove read only mode API, make dit mode

---
 .../src/plugins/ActionsPlugin/index.tsx       | 20 +++++-----
 .../src/LexicalCheckListPlugin.tsx            |  4 +-
 .../lexical-react/src/LexicalComposer.tsx     |  8 ++--
 .../src/LexicalContentEditable.tsx            | 23 ++++++-----
 .../src/shared/useCanShowPlaceholder.ts       |  4 +-
 packages/lexical-text/src/index.ts            |  8 ++--
 .../concepts/{read-only.md => editable.md}    | 20 +++++-----
 .../docs/concepts/listeners.md                | 16 ++++----
 packages/lexical/flow/Lexical.js.flow         | 12 +++---
 packages/lexical/src/LexicalEditor.ts         | 38 +++++++++----------
 packages/lexical/src/LexicalEvents.ts         |  4 +-
 packages/lexical/src/LexicalUpdates.ts        |  4 +-
 .../src/__tests__/unit/LexicalEditor.test.tsx | 30 +++++++--------
 packages/lexical/src/index.ts                 |  2 +-
 14 files changed, 96 insertions(+), 97 deletions(-)
 rename packages/lexical-website/docs/concepts/{read-only.md => editable.md} (74%)

diff --git a/packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx
index b7bc4c4c11d..ac0b3863829 100644
--- a/packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx
@@ -80,7 +80,7 @@ export default function ActionsPlugin({
   isRichText: boolean;
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
-  const [isReadOnly, setIsReadOnly] = useState(() => editor.isReadOnly());
+  const [isEditable, setIsEditable] = useState(() => editor.isEditable());
   const [isSpeechToText, setIsSpeechToText] = useState(false);
   const [connected, setConnected] = useState(false);
   const [isEditorEmpty, setIsEditorEmpty] = useState(true);
@@ -89,8 +89,8 @@ export default function ActionsPlugin({
 
   useEffect(() => {
     return mergeRegister(
-      editor.registerReadOnlyListener((readOnly) => {
-        setIsReadOnly(readOnly);
+      editor.registerEditableListener((editable) => {
+        setIsEditable(editable);
       }),
       editor.registerCommand<boolean>(
         CONNECTED_COMMAND,
@@ -110,7 +110,7 @@ export default function ActionsPlugin({
         // If we are in read only mode, send the editor state
         // to server and ask for validation if possible.
         if (
-          isReadOnly &&
+          !isEditable &&
           dirtyElements.size > 0 &&
           !tags.has('historic') &&
           !tags.has('collaboration')
@@ -134,7 +134,7 @@ export default function ActionsPlugin({
         });
       },
     );
-  }, [editor, isReadOnly]);
+  }, [editor, isEditable]);
 
   const handleMarkdownToggle = useCallback(() => {
     editor.update(() => {
@@ -208,17 +208,17 @@ export default function ActionsPlugin({
         <i className="clear" />
       </button>
       <button
-        className={`action-button ${isReadOnly ? 'unlock' : 'lock'}`}
+        className={`action-button ${!isEditable ? 'unlock' : 'lock'}`}
         onClick={() => {
           // Send latest editor state to commenting validation server
-          if (!isReadOnly) {
+          if (isEditable) {
             sendEditorState(editor);
           }
-          editor.setReadOnly(!editor.isReadOnly());
+          editor.setEditable(!editor.isEditable());
         }}
         title="Read-Only Mode"
-        aria-label={`${isReadOnly ? 'Unlock' : 'Lock'} read-only mode`}>
-        <i className={isReadOnly ? 'unlock' : 'lock'} />
+        aria-label={`${!isEditable ? 'Unlock' : 'Lock'} read-only mode`}>
+        <i className={!isEditable ? 'unlock' : 'lock'} />
       </button>
       <button
         className="action-button"
diff --git a/packages/lexical-react/src/LexicalCheckListPlugin.tsx b/packages/lexical-react/src/LexicalCheckListPlugin.tsx
index e3c50d77aa0..d8ee70a8307 100644
--- a/packages/lexical-react/src/LexicalCheckListPlugin.tsx
+++ b/packages/lexical-react/src/LexicalCheckListPlugin.tsx
@@ -82,7 +82,7 @@ export function CheckListPlugin(): null {
         (event) => {
           const activeItem = getActiveCheckListItem();
 
-          if (activeItem != null && !editor.isReadOnly()) {
+          if (activeItem != null && editor.isEditable()) {
             editor.update(() => {
               const listItemNode = $getNearestNodeFromDOMNode(activeItem);
 
@@ -200,7 +200,7 @@ function handleClick(event: Event) {
     const domNode = event.target as HTMLElement;
     const editor = findEditor(domNode);
 
-    if (editor != null && !editor.isReadOnly()) {
+    if (editor != null && editor.isEditable()) {
       editor.update(() => {
         if (event.target) {
           const node = $getNearestNodeFromDOMNode(domNode);
diff --git a/packages/lexical-react/src/LexicalComposer.tsx b/packages/lexical-react/src/LexicalComposer.tsx
index 976faed7adb..7507ab30e7b 100644
--- a/packages/lexical-react/src/LexicalComposer.tsx
+++ b/packages/lexical-react/src/LexicalComposer.tsx
@@ -40,7 +40,7 @@ type Props = {
     namespace: string;
     nodes?: ReadonlyArray<Klass<LexicalNode>>;
     onError: (error: Error, editor: LexicalEditor) => void;
-    readOnly?: boolean;
+    editable?: boolean;
     theme?: EditorThemeClasses;
     editorState?: InitialEditorStateType;
   }>;
@@ -67,10 +67,10 @@ export function LexicalComposer({initialConfig, children}: Props): JSX.Element {
 
       if (editor === null) {
         const newEditor = createEditor({
+          editable: false,
           namespace,
           nodes,
           onError: (error) => onError(error, newEditor),
-          readOnly: true,
           theme,
         });
         initializeEditor(newEditor, initialEditorState);
@@ -87,9 +87,9 @@ export function LexicalComposer({initialConfig, children}: Props): JSX.Element {
   );
 
   useLayoutEffect(() => {
-    const isReadOnly = initialConfig.readOnly;
+    const isEditable = initialConfig.editable;
     const [editor] = composerContext;
-    editor.setReadOnly(isReadOnly || false);
+    editor.setEditable(isEditable || true);
 
     // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/lexical-react/src/LexicalContentEditable.tsx b/packages/lexical-react/src/LexicalContentEditable.tsx
index 96a1f68a8a1..a6931b0354e 100644
--- a/packages/lexical-react/src/LexicalContentEditable.tsx
+++ b/packages/lexical-react/src/LexicalContentEditable.tsx
@@ -58,8 +58,7 @@ export function ContentEditable({
   testid,
 }: Props): JSX.Element {
   const [editor] = useLexicalComposerContext();
-
-  const [isReadOnly, setReadOnly] = useState(true);
+  const [isEditable, setEditable] = useState(true);
 
   const ref = useCallback(
     (rootElement: null | HTMLElement) => {
@@ -69,25 +68,25 @@ export function ContentEditable({
   );
 
   useLayoutEffect(() => {
-    setReadOnly(editor.isReadOnly());
-    return editor.registerReadOnlyListener((currentIsReadOnly) => {
-      setReadOnly(currentIsReadOnly);
+    setEditable(editor.isEditable());
+    return editor.registerEditableListener((currentIsEditable) => {
+      setEditable(currentIsEditable);
     });
   }, [editor]);
 
   return (
     <div
-      aria-activedescendant={isReadOnly ? null : ariaActiveDescendantID}
-      aria-autocomplete={isReadOnly ? null : ariaAutoComplete}
-      aria-controls={isReadOnly ? null : ariaControls}
+      aria-activedescendant={!isEditable ? null : ariaActiveDescendantID}
+      aria-autocomplete={!isEditable ? null : ariaAutoComplete}
+      aria-controls={!isEditable ? null : ariaControls}
       aria-describedby={ariaDescribedBy}
       aria-expanded={
-        isReadOnly ? null : role === 'combobox' ? !!ariaExpanded : null
+        !isEditable ? null : role === 'combobox' ? !!ariaExpanded : null
       }
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       aria-multiline={ariaMultiline}
-      aria-owns={isReadOnly ? null : ariaOwneeID}
+      aria-owns={!isEditable ? null : ariaOwneeID}
       aria-required={ariaRequired}
       autoCapitalize={
         autoCapitalize !== undefined ? String(autoCapitalize) : undefined
@@ -96,11 +95,11 @@ export function ContentEditable({
       autoComplete={autoComplete}
       autoCorrect={autoCorrect !== undefined ? String(autoCorrect) : undefined}
       className={className}
-      contentEditable={!isReadOnly}
+      contentEditable={isEditable}
       data-testid={testid}
       id={id}
       ref={ref}
-      role={isReadOnly ? undefined : role}
+      role={!isEditable ? undefined : role}
       spellCheck={spellCheck}
       style={style}
       tabIndex={tabIndex}
diff --git a/packages/lexical-react/src/shared/useCanShowPlaceholder.ts b/packages/lexical-react/src/shared/useCanShowPlaceholder.ts
index d21393184a9..158149e8019 100644
--- a/packages/lexical-react/src/shared/useCanShowPlaceholder.ts
+++ b/packages/lexical-react/src/shared/useCanShowPlaceholder.ts
@@ -18,7 +18,7 @@ function canShowPlaceholderFromCurrentEditorState(
 ): boolean {
   const currentCanShowPlaceholder = editor
     .getEditorState()
-    .read($canShowPlaceholderCurry(editor.isComposing(), editor.isReadOnly()));
+    .read($canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
 
   return currentCanShowPlaceholder;
 }
@@ -39,7 +39,7 @@ export function useCanShowPlaceholder(editor: LexicalEditor): boolean {
       editor.registerUpdateListener(() => {
         resetCanShowPlaceholder();
       }),
-      editor.registerReadOnlyListener(() => {
+      editor.registerEditableListener(() => {
         resetCanShowPlaceholder();
       }),
     );
diff --git a/packages/lexical-text/src/index.ts b/packages/lexical-text/src/index.ts
index bd8d058cd22..51d3c7c6e66 100644
--- a/packages/lexical-text/src/index.ts
+++ b/packages/lexical-text/src/index.ts
@@ -212,9 +212,9 @@ export function $rootTextContent(): string {
 export function $canShowPlaceholder(
   isComposing: boolean,
   // TODO 0.4 make mandatory
-  isReadOnly = false,
+  isEditable = true,
 ): boolean {
-  if (isReadOnly || !$isRootTextContentEmpty(isComposing, false)) {
+  if (!isEditable || !$isRootTextContentEmpty(isComposing, false)) {
     return false;
   }
 
@@ -257,9 +257,9 @@ export function $canShowPlaceholder(
 export function $canShowPlaceholderCurry(
   isEditorComposing: boolean,
   // TODO 0.4 make mandatory
-  isReadOnly = false,
+  isEditable = true,
 ): () => boolean {
-  return () => $canShowPlaceholder(isEditorComposing, isReadOnly);
+  return () => $canShowPlaceholder(isEditorComposing, isEditable);
 }
 
 export type EntityMatch = {end: number; start: number};
diff --git a/packages/lexical-website/docs/concepts/read-only.md b/packages/lexical-website/docs/concepts/editable.md
similarity index 74%
rename from packages/lexical-website/docs/concepts/read-only.md
rename to packages/lexical-website/docs/concepts/editable.md
index 20d0f1876fa..246d64e7f8b 100644
--- a/packages/lexical-website/docs/concepts/read-only.md
+++ b/packages/lexical-website/docs/concepts/editable.md
@@ -2,7 +2,7 @@
 sidebar_position: 8
 ---
 
-# Read Only Mode
+# Read Model / Edit Mode
 
 Lexical supports two modes:
 
@@ -20,7 +20,7 @@ In order to set the mode, this can be done on creation of the editor:
 
 ```js
 const editor = createEditor({
-  readOnly: true,
+  editable: true,
   ...
 })
 ```
@@ -28,7 +28,7 @@ const editor = createEditor({
 If you're using `@lexical/react` this can be done on the `initialConfig` passed to `<LexicalComposer>`:
 
 ```jsx
-<LexicalComposer initialConfig={{readOnly: true}}>
+<LexicalComposer initialConfig={{editable: true}}>
   ...
 </LexicalComposer>
 ```
@@ -36,7 +36,7 @@ If you're using `@lexical/react` this can be done on the `initialConfig` passed
 After an editor is created, the mode can be changed imperatively:
 
 ```js
-editor.setReadOnly(true);
+editor.setEditable(true);
 ```
 
 ## Reading the mode
@@ -44,19 +44,19 @@ editor.setReadOnly(true);
 In order to find the current mode of the editor you can use:
 
 ```js
-const readOnly = editor.isReadOnly(); // Returns true or false
+const readOnly = editor.isEditable(); // Returns true or false
 ```
 
 You can also get notified when the editor's read only mode has changed:
 
 ```js
-const removeReadOnlyListener = editor.registerReadOnlyListener(
-  (readOnly) => {
-    // The editor's read only mode is passed in!
-    console.log(readOnly);
+const removeEditableListener = editor.registerEditableListener(
+  (isEditable) => {
+    // The editor's mode is passed in!
+    console.log(isEditable);
   },
 );
 
 // Do not forget to unregister the listener when no longer needed!
-removeReadOnlyListener();
+removeEditableListener();
 ```
\ No newline at end of file
diff --git a/packages/lexical-website/docs/concepts/listeners.md b/packages/lexical-website/docs/concepts/listeners.md
index 3cc3491fb33..4c2e121f4d8 100644
--- a/packages/lexical-website/docs/concepts/listeners.md
+++ b/packages/lexical-website/docs/concepts/listeners.md
@@ -98,21 +98,21 @@ const removeMutationListener = editor.registerMutationListener(
 removeMutationListener();
 ```
 
-## `registerReadOnlyListener`
+## `registerEditableListener`
 
-Get notified when the editor's read only mode has changed. The editor's read only mode can be changed
-via `editor.setReadOnly(boolean)`.
+Get notified when the editor's mode has changed. The editor's mode can be changed
+via `editor.setEditable(boolean)`.
 
 ```js
-const removeReadOnlyListener = editor.registerReadOnlyListener(
-  (readOnly) => {
-    // The editor's read only mode is passed in!
-    console.log(readOnly);
+const removeEditableListener = editor.registerEditableListener(
+  (editable) => {
+    // The editor's mode is passed in!
+    console.log(editable);
   },
 );
 
 // Do not forget to unregister the listener when no longer needed!
-removeReadOnlyListener();
+removeEditableListener();
 ```
 
 ## `registerDecoratorListener`
diff --git a/packages/lexical/flow/Lexical.js.flow b/packages/lexical/flow/Lexical.js.flow
index e02ee756d02..efbdc3a8f56 100644
--- a/packages/lexical/flow/Lexical.js.flow
+++ b/packages/lexical/flow/Lexical.js.flow
@@ -82,7 +82,7 @@ export type MutationListener = (
   nodes: Map<NodeKey, NodeMutation>,
   {updateTags: Set<string>, dirtyLeaves: Set<string>},
 ) => void;
-export type ReadOnlyListener = (readOnly: boolean) => void;
+export type EditableListener = (editable: boolean) => void;
 type Listeners = {
   decorator: Set<DecoratorListener>,
   mutation: MutationListeners,
@@ -135,7 +135,7 @@ declare export class LexicalEditor {
   _updateTags: Set<string>;
   _observer: null | MutationObserver;
   _key: string;
-  _readOnly: boolean;
+  _editable: boolean;
   _headless: boolean;
   isComposing(): boolean;
   registerUpdateListener(listener: UpdateListener): () => void;
@@ -147,7 +147,7 @@ declare export class LexicalEditor {
     listener: CommandListener<P>,
     priority: CommandListenerPriority,
   ): () => void;
-  registerReadOnlyListener(listener: ReadOnlyListener): () => void;
+  registerEditableListener(listener: EditableListener): () => void;
   registerMutationListener(
     klass: Class<LexicalNode>,
     listener: MutationListener,
@@ -174,8 +174,8 @@ declare export class LexicalEditor {
   update(updateFn: () => void, options?: EditorUpdateOptions): boolean;
   focus(callbackFn?: () => void, options?: EditorFocusOptions): void;
   blur(): void;
-  isReadOnly(): boolean;
-  setReadOnly(readOnly: boolean): void;
+  isEditable(): boolean;
+  setEditable(editable: boolean): void;
   toJSON(): SerializedEditor;
 }
 type EditorUpdateOptions = {
@@ -268,7 +268,7 @@ declare export function createEditor(editorConfig?: {
   nodes?: $ReadOnlyArray<Class<LexicalNode>>,
   onError: (error: Error) => void,
   disableEvents?: boolean,
-  readOnly?: boolean,
+  editable?: boolean,
 }): LexicalEditor;
 
 /**
diff --git a/packages/lexical/src/LexicalEditor.ts b/packages/lexical/src/LexicalEditor.ts
index 0069d1bf4af..a64246062c8 100644
--- a/packages/lexical/src/LexicalEditor.ts
+++ b/packages/lexical/src/LexicalEditor.ts
@@ -168,7 +168,7 @@ export type MutationListener = (
 
 export type CommandListener<P> = (payload: P, editor: LexicalEditor) => boolean;
 
-export type ReadOnlyListener = (readOnly: boolean) => void;
+export type EditableListener = (editable: boolean) => void;
 
 export type CommandListenerPriority = 0 | 1 | 2 | 3 | 4;
 
@@ -210,7 +210,7 @@ type Commands = Map<
 type Listeners = {
   decorator: Set<DecoratorListener>;
   mutation: MutationListeners;
-  readonly: Set<ReadOnlyListener>;
+  editable: Set<EditableListener>;
   root: Set<RootListener>;
   textcontent: Set<TextContentListener>;
   update: Set<UpdateListener>;
@@ -218,7 +218,7 @@ type Listeners = {
 
 export type Listener =
   | DecoratorListener
-  | ReadOnlyListener
+  | EditableListener
   | MutationListener
   | RootListener
   | TextContentListener
@@ -230,7 +230,7 @@ export type ListenerType =
   | 'decorator'
   | 'textcontent'
   | 'mutation'
-  | 'readonly';
+  | 'editable';
 
 export type TransformerType = 'text' | 'decorator' | 'element' | 'root';
 
@@ -320,7 +320,7 @@ export function createEditor(editorConfig?: {
   nodes?: ReadonlyArray<Klass<LexicalNode>>;
   onError?: ErrorHandler;
   parentEditor?: LexicalEditor;
-  readOnly?: boolean;
+  editable?: boolean;
   theme?: EditorThemeClasses;
 }): LexicalEditor {
   const config = editorConfig || {};
@@ -342,7 +342,7 @@ export function createEditor(editorConfig?: {
     ...(config.nodes || []),
   ];
   const onError = config.onError;
-  const isReadOnly = config.readOnly || false;
+  const isEditable = config.editable || true;
   let registeredNodes;
 
   if (editorConfig === undefined && activeEditor !== null) {
@@ -417,7 +417,7 @@ export function createEditor(editorConfig?: {
     },
     onError ? onError : console.error,
     initializeConversionCache(registeredNodes),
-    isReadOnly,
+    isEditable,
   );
 
   if (initialEditorState !== undefined) {
@@ -454,8 +454,8 @@ export class LexicalEditor {
   _key: string;
   _onError: ErrorHandler;
   _htmlConversions: DOMConversionCache;
-  _readOnly: boolean;
   _window: null | Window;
+  _editable: boolean;
 
   constructor(
     editorState: EditorState,
@@ -464,7 +464,7 @@ export class LexicalEditor {
     config: EditorConfig,
     onError: ErrorHandler,
     htmlConversions: DOMConversionCache,
-    readOnly: boolean,
+    editable: boolean,
   ) {
     this._parentEditor = parentEditor;
     // The root element associated with this editor
@@ -483,8 +483,8 @@ export class LexicalEditor {
     // Listeners
     this._listeners = {
       decorator: new Set(),
+      editable: new Set(),
       mutation: new Map(),
-      readonly: new Set(),
       root: new Set(),
       textcontent: new Set(),
       update: new Set(),
@@ -512,7 +512,7 @@ export class LexicalEditor {
 
     this._onError = onError;
     this._htmlConversions = htmlConversions;
-    this._readOnly = false;
+    this._editable = true;
     this._headless = false;
     this._window = null;
   }
@@ -529,8 +529,8 @@ export class LexicalEditor {
     };
   }
 
-  registerReadOnlyListener(listener: ReadOnlyListener): () => void {
-    const listenerSetOrMap = this._listeners.readonly;
+  registerEditableListener(listener: EditableListener): () => void {
+    const listenerSetOrMap = this._listeners.editable;
     listenerSetOrMap.add(listener);
     return () => {
       listenerSetOrMap.delete(listener);
@@ -838,14 +838,14 @@ export class LexicalEditor {
     }
   }
 
-  isReadOnly(): boolean {
-    return this._readOnly;
+  isEditable(): boolean {
+    return this._editable;
   }
 
-  setReadOnly(readOnly: boolean): void {
-    if (this._readOnly !== readOnly) {
-      this._readOnly = readOnly;
-      triggerListeners('readonly', this, true, readOnly);
+  setEditable(editable: boolean): void {
+    if (this._editable !== editable) {
+      this._editable = editable;
+      triggerListeners('editable', this, true, editable);
     }
   }
 
diff --git a/packages/lexical/src/LexicalEvents.ts b/packages/lexical/src/LexicalEvents.ts
index 1dce73c15f8..4256fa0b983 100644
--- a/packages/lexical/src/LexicalEvents.ts
+++ b/packages/lexical/src/LexicalEvents.ts
@@ -944,12 +944,12 @@ export function addRootElementEvents(
     const eventHandler =
       typeof onEvent === 'function'
         ? (event: Event) => {
-            if (!editor.isReadOnly()) {
+            if (editor.isEditable()) {
               onEvent(event, editor);
             }
           }
         : (event: Event) => {
-            if (!editor.isReadOnly()) {
+            if (editor.isEditable()) {
               switch (eventName) {
                 case 'cut':
                   return dispatchCommand(
diff --git a/packages/lexical/src/LexicalUpdates.ts b/packages/lexical/src/LexicalUpdates.ts
index 627cac76d98..47a41a65bd1 100644
--- a/packages/lexical/src/LexicalUpdates.ts
+++ b/packages/lexical/src/LexicalUpdates.ts
@@ -530,7 +530,7 @@ export function commitPendingUpdates(editor: LexicalEditor): void {
   // Attempt to update the DOM selection, including focusing of the root element,
   // and scroll into view if needed.
   if (
-    !editor._readOnly &&
+    editor._editable &&
     // domSelection will be null in headless
     domSelection !== null &&
     (needsUpdate || pendingSelection === null || pendingSelection.dirty)
@@ -619,7 +619,7 @@ function triggerMutationListeners(
 }
 
 export function triggerListeners(
-  type: 'update' | 'root' | 'decorator' | 'textcontent' | 'readonly',
+  type: 'update' | 'root' | 'decorator' | 'textcontent' | 'editable',
   editor: LexicalEditor,
   isCurrentlyEnqueuingUpdates: boolean,
   ...payload: unknown[]
diff --git a/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx b/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx
index 2e6420f4df7..e6fed76098b 100644
--- a/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx
+++ b/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx
@@ -2047,21 +2047,21 @@ describe('LexicalEditor tests', () => {
     expect(tableRowMutation2[0].get(tableRowKey)).toBe('updated');
   });
 
-  it('readonly listener', () => {
+  it('editable listener', () => {
     init();
 
-    const readOnlyFn = jest.fn();
-    editor.registerReadOnlyListener(readOnlyFn);
+    const editableFn = jest.fn();
+    editor.registerEditableListener(editableFn);
 
-    expect(editor.isReadOnly()).toBe(false);
+    expect(editor.isEditable()).toBe(true);
 
-    editor.setReadOnly(true);
+    editor.setEditable(false);
 
-    expect(editor.isReadOnly()).toBe(true);
+    expect(editor.isEditable()).toBe(false);
 
-    editor.setReadOnly(false);
+    editor.setEditable(true);
 
-    expect(readOnlyFn.mock.calls).toEqual([[true], [false]]);
+    expect(editableFn.mock.calls).toEqual([[false], [true]]);
   });
 
   it('does not add new listeners while triggering existing', async () => {
@@ -2069,7 +2069,7 @@ describe('LexicalEditor tests', () => {
     const mutationListener = jest.fn();
     const nodeTransformListener = jest.fn();
     const textContentListener = jest.fn();
-    const readOnlyListener = jest.fn();
+    const editableListener = jest.fn();
     const commandListener = jest.fn();
     const TEST_COMMAND = createCommand();
 
@@ -2097,10 +2097,10 @@ describe('LexicalEditor tests', () => {
       });
     });
 
-    editor.registerReadOnlyListener(() => {
-      readOnlyListener();
-      editor.registerReadOnlyListener(() => {
-        readOnlyListener();
+    editor.registerEditableListener(() => {
+      editableListener();
+      editor.registerEditableListener(() => {
+        editableListener();
       });
     });
 
@@ -2133,10 +2133,10 @@ describe('LexicalEditor tests', () => {
 
     editor.dispatchCommand(TEST_COMMAND, false);
 
-    editor.setReadOnly(true);
+    editor.setEditable(false);
 
     expect(updateListener).toHaveBeenCalledTimes(1);
-    expect(readOnlyListener).toHaveBeenCalledTimes(1);
+    expect(editableListener).toHaveBeenCalledTimes(1);
     expect(commandListener).toHaveBeenCalledTimes(1);
     expect(textContentListener).toHaveBeenCalledTimes(1);
     expect(nodeTransformListener).toHaveBeenCalledTimes(1);
diff --git a/packages/lexical/src/index.ts b/packages/lexical/src/index.ts
index 23a79a2355c..e34279ae459 100644
--- a/packages/lexical/src/index.ts
+++ b/packages/lexical/src/index.ts
@@ -10,6 +10,7 @@
 export type {
   CommandListenerPriority,
   CommandPayloadType,
+  EditableListener,
   EditorConfig,
   EditorThemeClasses,
   IntentionallyMarkedAsDirtyElement,
@@ -18,7 +19,6 @@ export type {
   LexicalEditor,
   MutationListener,
   NodeMutation,
-  ReadOnlyListener,
   SerializedEditor,
   Spread,
 } from './LexicalEditor';

From 6135179072462f635210ca33711f8c0ff57e6171 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Tue, 30 Aug 2022 15:42:16 +0100
Subject: [PATCH 2/3] Fix docs

---
 .../lexical-website/docs/concepts/{editable.md => read-only.md}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/lexical-website/docs/concepts/{editable.md => read-only.md} (100%)

diff --git a/packages/lexical-website/docs/concepts/editable.md b/packages/lexical-website/docs/concepts/read-only.md
similarity index 100%
rename from packages/lexical-website/docs/concepts/editable.md
rename to packages/lexical-website/docs/concepts/read-only.md

From 3c20e831ca60950db7e88cc7e21e8acdaca94829 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 31 Aug 2022 13:35:32 +0100
Subject: [PATCH 3/3] Fixes

---
 .../src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx
index 5d0a0219aa9..ac78e875932 100644
--- a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx
+++ b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx
@@ -38,7 +38,7 @@ export default function ExcalidrawComponent({
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
   const [isModalOpen, setModalOpen] = useState<boolean>(
-    data === '[]' && !editor.isReadOnly(),
+    data === '[]' && editor.isEditable(),
   );
   const imageContainerRef = useRef<HTMLImageElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -67,9 +67,9 @@ export default function ExcalidrawComponent({
   // Set editor to readOnly if excalidraw is open to prevent unwanted changes
   useEffect(() => {
     if (isModalOpen) {
-      editor.setReadOnly(true);
+      editor.setEditable(false);
     } else {
-      editor.setReadOnly(false);
+      editor.setEditable(true);
     }
   }, [isModalOpen, editor]);
 
@@ -124,7 +124,7 @@ export default function ExcalidrawComponent({
   }, [editor, nodeKey]);
 
   const setData = (newData: ReadonlyArray<ExcalidrawElementFragment>) => {
-    if (editor.isReadOnly()) {
+    if (!editor.isEditable()) {
       return;
     }
     return editor.update(() => {
@@ -158,7 +158,7 @@ export default function ExcalidrawComponent({
         isShown={isModalOpen}
         onDelete={deleteNode}
         onSave={(newData) => {
-          editor.setReadOnly(false);
+          editor.setEditable(true);
           setData(newData);
           setModalOpen(false);
         }}