lexical 0.3.11 → 0.4.0

package/Lexical.dev.js

@@ -196,9 +196,9 @@ function updateTimeStamp(event) {
   lastTextEntryTimeStamp = event.timeStamp;
 }
 
-function initTextEntryListener() {
+function initTextEntryListener(editor) {
   if (lastTextEntryTimeStamp === 0) {
-    window.addEventListener('textInput', updateTimeStamp, true);
+    getWindow(editor).addEventListener('textInput', updateTimeStamp, true);
   }
 }
 
@@ -394,7 +394,7 @@ function $flushMutations$1(editor, mutations, observer) {
           $setSelection(selection);
         }
 
-        if (IS_FIREFOX && isFirefoxClipboardEvents()) {
+        if (IS_FIREFOX && isFirefoxClipboardEvents(editor)) {
           selection.insertRawText(possibleTextForFirefoxPaste);
         }
       }
@@ -412,7 +412,7 @@ function flushRootMutations(editor) {
   }
 }
 function initMutationObserver(editor) {
-  initTextEntryListener();
+  initTextEntryListener(editor);
   editor._observer = new MutationObserver((mutations, observer) => {
     $flushMutations$1(editor, mutations, observer);
   });
@@ -444,13 +444,15 @@ const scheduleMicroTask = typeof queueMicrotask === 'function' ? queueMicrotask
   // No window prefix intended (#1400)
   Promise.resolve().then(fn);
 };
+function $isSelectionCapturedInDecorator(node) {
+  return $isDecoratorNode($getNearestNodeFromDOMNode(node));
+} // TODO change to $ function
 
 function isSelectionCapturedInDecoratorInput(anchorDOM) {
   const activeElement = document.activeElement;
   const nodeName = activeElement !== null ? activeElement.nodeName : null;
   return !$isDecoratorNode($getNearestNodeFromDOMNode(anchorDOM)) || nodeName !== 'INPUT' && nodeName !== 'TEXTAREA';
 }
-
 function isSelectionWithinEditor(editor, anchorDOM, focusDOM) {
   const rootElement = editor.getRootElement();
 
@@ -468,7 +470,7 @@ function getNearestEditorFromDOMNode(node) {
     // @ts-expect-error: internal field
     const editor = currentNode.__lexicalEditor;
 
-    if (editor != null && !editor.isReadOnly()) {
+    if (editor != null) {
       return editor;
     }
 
@@ -951,8 +953,8 @@ function $shouldPreventDefaultAndInsertText(selection, text) {
   const backingAnchorElement = getActiveEditor().getElementByKey(anchorKey);
   const textLength = text.length;
   return anchorKey !== focus.key || // If we're working with a non-text node.
-  !$isTextNode(anchorNode) || // If we are replacing a range with a single character, and not composing.
-  textLength < 2 && anchor.offset !== focus.offset && !anchorNode.isComposing() || // Any non standard text node.
+  !$isTextNode(anchorNode) || // If we are replacing a range with a single character or grapheme, and not composing.
+  (textLength < 2 || doesContainGrapheme(text)) && anchor.offset !== focus.offset && !anchorNode.isComposing() || // Any non standard text node.
   $isTokenOrInertOrSegmented(anchorNode) || // If the text length is more than a single character and we're either
   // dealing with this in "beforeinput" or where the node has already recently
   // been changed (thus is dirty).
@@ -1216,8 +1218,8 @@ function $getDecoratorNode(focus, isBackward) {
 
   return null;
 }
-function isFirefoxClipboardEvents() {
-  const event = window.event;
+function isFirefoxClipboardEvents(editor) {
+  const event = getWindow(editor).event;
   const inputType = event && event.inputType;
   return inputType === 'insertFromPaste' || inputType === 'insertFromPasteAsQuotation';
 }
@@ -1254,7 +1256,7 @@ function scrollIntoViewIfNeeded(editor, anchor, rootElement, tags) {
   if (element !== null) {
     const rect = element.getBoundingClientRect();
 
-    if (rect.bottom > window.innerHeight) {
+    if (rect.bottom > getWindow(editor).innerHeight) {
       element.scrollIntoView(false);
     } else if (rect.top < 0) {
       element.scrollIntoView();
@@ -1317,6 +1319,22 @@ function $hasAncestor(child, targetNode) {
   return false;
 }
 
+function getDefaultView(domElem) {
+  const ownerDoc = domElem.ownerDocument;
+  return ownerDoc && ownerDoc.defaultView || null;
+}
+function getWindow(editor) {
+  const windowObj = editor._window;
+
+  if (windowObj === null) {
+    {
+      throw Error(`window object not found`);
+    }
+  }
+
+  return windowObj;
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1925,9 +1943,6 @@ function reconcileNode(key, parentDOM) {
       if (decorator !== null) {
         reconcileDecorator(key, decorator);
       }
-
-      subTreeTextContent += text;
-      editorTextContent += text;
     } else if ($isTextNode(nextNode) && !nextNode.isDirectionless()) {
       // Handle text content, for LTR, LTR cases.
       subTreeDirectionedTextContent += text;
@@ -2119,7 +2134,7 @@ function getPrevElementByKeyOrThrow(key) {
  */
 const PASS_THROUGH_COMMAND = Object.freeze({});
 const ANDROID_COMPOSITION_LATENCY = 30;
-const rootElementEvents = [['keydown', onKeyDown], ['compositionstart', onCompositionStart], ['compositionend', onCompositionEnd], ['input', onInput], ['click', onClick], ['cut', PASS_THROUGH_COMMAND], ['copy', PASS_THROUGH_COMMAND], ['dragstart', PASS_THROUGH_COMMAND], ['dragover', PASS_THROUGH_COMMAND], ['dragend', PASS_THROUGH_COMMAND], ['paste', PASS_THROUGH_COMMAND], ['focus', PASS_THROUGH_COMMAND], ['blur', PASS_THROUGH_COMMAND], ['drop', PASS_THROUGH_COMMAND]];
+const rootElementEvents = [['keydown', onKeyDown], ['mousedown', onMouseDown], ['compositionstart', onCompositionStart], ['compositionend', onCompositionEnd], ['input', onInput], ['click', onClick], ['cut', PASS_THROUGH_COMMAND], ['copy', PASS_THROUGH_COMMAND], ['dragstart', PASS_THROUGH_COMMAND], ['dragover', PASS_THROUGH_COMMAND], ['dragend', PASS_THROUGH_COMMAND], ['paste', PASS_THROUGH_COMMAND], ['focus', PASS_THROUGH_COMMAND], ['blur', PASS_THROUGH_COMMAND], ['drop', PASS_THROUGH_COMMAND]];
 
 if (CAN_USE_BEFORE_INPUT) {
   rootElementEvents.push(['beforeinput', (event, editor) => onBeforeInput(event, editor)]);
@@ -2129,6 +2144,7 @@ let lastKeyDownTimeStamp = 0;
 let lastKeyCode = 0;
 let rootElementsRegistered = 0;
 let isSelectionChangeFromDOMUpdate = false;
+let isSelectionChangeFromMouseDown = false;
 let isInsertLineBreak = false;
 let isFirefoxEndingComposition = false;
 let collapsedSelectionFormat = [0, 0, 'root', 0];
@@ -2187,7 +2203,7 @@ function onSelectionChange(domSelection, editor, isActive) {
         // instead of getting the format from the anchor node.
 
 
-        const windowEvent = window.event;
+        const windowEvent = getWindow(editor).event;
         const currentTimeStamp = windowEvent ? windowEvent.timeStamp : performance.now();
         const [lastFormat, lastOffset, lastKey, timeStamp] = collapsedSelectionFormat;
 
@@ -2246,24 +2262,27 @@ function onClick(event, editor) {
         domSelection.removeAllRanges();
         selection.dirty = true;
       }
-    } else if (domSelection && $isNodeSelection(selection)) {
-      const domAnchor = domSelection.anchorNode; // If the user is attempting to click selection back onto text, then
-      // we should attempt create a range selection.
-      // When we click on an empty paragraph node or the end of a paragraph that ends
-      // with an image/poll, the nodeType will be ELEMENT_NODE
-
-      const allowedNodeType = [DOM_ELEMENT_TYPE, DOM_TEXT_TYPE];
-
-      if (domAnchor !== null && allowedNodeType.includes(domAnchor.nodeType)) {
-        const newSelection = internalCreateRangeSelection(lastSelection, domSelection, editor);
-        $setSelection(newSelection);
-      }
     }
 
     dispatchCommand(editor, CLICK_COMMAND, event);
   });
 }
 
+function onMouseDown(event, editor) {
+  // TODO implement text drag & drop
+  const target = event.target;
+
+  if (target instanceof Node) {
+    updateEditor(editor, () => {
+      // Drag & drop should not recompute selection until mouse up; otherwise the initially
+      // selected content is lost.
+      if (!$isSelectionCapturedInDecorator(target)) {
+        isSelectionChangeFromMouseDown = true;
+      }
+    });
+  }
+}
+
 function $applyTargetRange(selection, event) {
   if (event.getTargetRanges) {
     const targetRange = event.getTargetRanges()[0];
@@ -2290,7 +2309,7 @@ function onBeforeInput(event, editor) {
   // user has dom.event.clipboardevents.enabled disabled in
   // about:config. In that case, we need to process the
   // pasted content in the DOM mutation phase.
-  IS_FIREFOX && isFirefoxClipboardEvents()) {
+  IS_FIREFOX && isFirefoxClipboardEvents(editor)) {
     return;
   } else if (inputType === 'insertCompositionText') {
     return;
@@ -2330,7 +2349,7 @@ function onBeforeInput(event, editor) {
           }
         } else {
           event.preventDefault();
-          dispatchCommand(editor, DELETE_CHARACTER_COMMAND, false);
+          dispatchCommand(editor, DELETE_CHARACTER_COMMAND, true);
         }
 
         return;
@@ -2635,6 +2654,11 @@ function onCompositionEnd(event, editor) {
 }
 
 function onKeyDown(event, editor) {
+  if (hasStoppedLexicalPropagation(event)) {
+    return;
+  }
+
+  stopLexicalPropagation(event);
   lastKeyDownTimeStamp = event.timeStamp;
   lastKeyCode = event.keyCode;
 
@@ -2756,16 +2780,40 @@ function getRootElementRemoveHandles(rootElement) {
 const activeNestedEditorsMap = new Map();
 
 function onDocumentSelectionChange(event) {
-  const selection = getDOMSelection();
+  const domSelection = getDOMSelection();
 
-  if (!selection) {
+  if (domSelection === null) {
     return;
   }
 
-  const nextActiveEditor = getNearestEditorFromDOMNode(selection.anchorNode);
+  const nextActiveEditor = getNearestEditorFromDOMNode(domSelection.anchorNode);
 
   if (nextActiveEditor === null) {
     return;
+  }
+
+  if (isSelectionChangeFromMouseDown) {
+    isSelectionChangeFromMouseDown = false;
+    updateEditor(nextActiveEditor, () => {
+      const lastSelection = $getPreviousSelection();
+      const domAnchorNode = domSelection.anchorNode;
+
+      if (domAnchorNode === null) {
+        return;
+      }
+
+      const nodeType = domAnchorNode.nodeType; // If the user is attempting to click selection back onto text, then
+      // we should attempt create a range selection.
+      // When we click on an empty paragraph node or the end of a paragraph that ends
+      // with an image/poll, the nodeType will be ELEMENT_NODE
+
+      if (nodeType !== DOM_ELEMENT_TYPE && nodeType !== DOM_TEXT_TYPE) {
+        return;
+      }
+
+      const newSelection = internalCreateRangeSelection(lastSelection, domSelection, nextActiveEditor);
+      $setSelection(newSelection);
+    });
   } // When editor receives selection change event, we're checking if
   // it has any sibling editors (within same parent editor) that were active
   // before, and trigger selection change on it to nullify selection.
@@ -2778,10 +2826,10 @@ function onDocumentSelectionChange(event) {
   const prevActiveEditor = activeNestedEditor || rootEditor;
 
   if (prevActiveEditor !== nextActiveEditor) {
-    onSelectionChange(selection, prevActiveEditor, false);
+    onSelectionChange(domSelection, prevActiveEditor, false);
   }
 
-  onSelectionChange(selection, nextActiveEditor, true); // If newly selected editor is nested, then add it to the map, clean map otherwise
+  onSelectionChange(domSelection, nextActiveEditor, true); // If newly selected editor is nested, then add it to the map, clean map otherwise
 
   if (nextActiveEditor !== rootEditor) {
     activeNestedEditorsMap.set(rootEditorKey, nextActiveEditor);
@@ -2790,6 +2838,19 @@ function onDocumentSelectionChange(event) {
   }
 }
 
+function stopLexicalPropagation(event) {
+  // We attach a special property to ensure the same event doesn't re-fire
+  // for parent editors.
+  // @ts-ignore
+  event._lexicalHandled = true;
+}
+
+function hasStoppedLexicalPropagation(event) {
+  // @ts-ignore
+  const stopped = event._lexicalHandled === true;
+  return stopped;
+}
+
 function addRootElementEvents(rootElement, editor) {
   // We only want to have a single global selectionchange event handler, shared
   // between all editor instances.
@@ -2806,11 +2867,11 @@ function addRootElementEvents(rootElement, editor) {
   for (let i = 0; i < rootElementEvents.length; i++) {
     const [eventName, onEvent] = rootElementEvents[i];
     const eventHandler = typeof onEvent === 'function' ? event => {
-      if (!editor.isReadOnly()) {
+      if (editor.isEditable()) {
         onEvent(event, editor);
       }
     } : event => {
-      if (!editor.isReadOnly()) {
+      if (editor.isEditable()) {
         switch (eventName) {
           case 'cut':
             return dispatchCommand(editor, CUT_COMMAND, event);
@@ -4095,11 +4156,18 @@ class RangeSelection {
             target = target.insertAfter(node);
           }
         }
-      } else if (!$isElementNode(node) || $isElementNode(node) && node.isInline() || $isDecoratorNode(target) && target.isTopLevel() || $isLineBreakNode(target)) {
+      } else if (!$isElementNode(node) || $isElementNode(node) && node.isInline() || $isDecoratorNode(target) && target.isTopLevel()) {
         lastNode = node;
         target = target.insertAfter(node);
       } else {
-        target = node.getParentOrThrow(); // Re-try again with the target being the parent
+        const nextTarget = target.getParentOrThrow(); // if we're inserting an Element after a LineBreak, we want to move the target to the parent
+        // and remove the LineBreak so we don't have empty space.
+
+        if ($isLineBreakNode(target)) {
+          target.remove();
+        }
+
+        target = nextTarget; // Re-try again with the target being the parent
 
         i--;
         continue;
@@ -4125,7 +4193,7 @@ class RangeSelection {
     if ($isElementNode(target)) {
       // If the last node to be inserted was a text node,
       // then we should attempt to move selection to that.
-      const lastChild = $isTextNode(lastNode) ? lastNode : target.getLastDescendant();
+      const lastChild = $isTextNode(lastNode) ? lastNode : $isElementNode(lastNode) && lastNode.isInline() ? lastNode.getLastDescendant() : target.getLastDescendant();
 
       if (!selectStart) {
         // Handle moving selection to end for elements
@@ -4402,6 +4470,15 @@ class RangeSelection {
     const possibleNode = $getDecoratorNode(focus, isBackward);
 
     if ($isDecoratorNode(possibleNode) && !possibleNode.isIsolated()) {
+      // Make it possible to move selection from range selection to
+      // node selection on the node.
+      if (collapse) {
+        const nodeSelection = $createNodeSelection();
+        nodeSelection.add(possibleNode.__key);
+        $setSelection(nodeSelection);
+        return;
+      }
+
       const sibling = isBackward ? possibleNode.getPreviousSibling() : possibleNode.getNextSibling();
 
       if (!$isTextNode(sibling)) {
@@ -4890,7 +4967,11 @@ function internalCreateSelection(editor) {
   return internalCreateRangeSelection(lastSelection, domSelection, editor);
 }
 function internalCreateRangeSelection(lastSelection, domSelection, editor) {
-  // When we create a selection, we try to use the previous
+  const windowObj = editor._window;
+
+  if (windowObj === null) {
+    return null;
+  } // When we create a selection, we try to use the previous
   // selection where possible, unless an actual user selection
   // change has occurred. When we do need to create a new selection
   // we validate we can have text nodes for both anchor and focus
@@ -4903,7 +4984,9 @@ function internalCreateRangeSelection(lastSelection, domSelection, editor) {
   // we generally bail out of doing an update to selection during
   // reconciliation unless there are dirty nodes that need
   // reconciling.
-  const windowEvent = window.event;
+
+
+  const windowEvent = windowObj.event;
   const eventType = windowEvent ? windowEvent.type : undefined;
   const isSelectionChange = eventType === 'selectionchange';
   const useDOMSelection = !getIsProcesssingMutations() && (isSelectionChange || eventType === 'beforeinput' || eventType === 'compositionstart' || eventType === 'compositionend' || eventType === 'click' && windowEvent && windowEvent.detail === 3 || eventType === undefined);
@@ -5591,17 +5674,19 @@ function commitPendingUpdates(editor) {
     }
   }
 
-  pendingEditorState._readOnly = true;
+  if (!pendingEditorState._readOnly) {
+    pendingEditorState._readOnly = true;
 
-  {
-    handleDEVOnlyPendingUpdateGuarantees(pendingEditorState);
+    {
+      handleDEVOnlyPendingUpdateGuarantees(pendingEditorState);
 
-    if ($isRangeSelection(pendingSelection)) {
-      Object.freeze(pendingSelection.anchor);
-      Object.freeze(pendingSelection.focus);
-    }
+      if ($isRangeSelection(pendingSelection)) {
+        Object.freeze(pendingSelection.anchor);
+        Object.freeze(pendingSelection.focus);
+      }
 
-    Object.freeze(pendingSelection);
+      Object.freeze(pendingSelection);
+    }
   }
 
   const dirtyLeaves = editor._dirtyLeaves;
@@ -5629,7 +5714,7 @@ function commitPendingUpdates(editor) {
   const domSelection = headless ? null : getDOMSelection(); // Attempt to update the DOM selection, including focusing of the root element,
   // and scroll into view if needed.
 
-  if (!editor._readOnly && // domSelection will be null in headless
+  if (editor._editable && // domSelection will be null in headless
   domSelection !== null && (needsUpdate || pendingSelection === null || pendingSelection.dirty)) {
     activeEditor = editor;
     activeEditorState = pendingEditorState;
@@ -5836,7 +5921,7 @@ function beginUpdate(editor, updateFn, options) {
   let pendingEditorState = editor._pendingEditorState;
   let editorStateWasCloned = false;
 
-  if (pendingEditorState === null) {
+  if (pendingEditorState === null || pendingEditorState._readOnly) {
     pendingEditorState = editor._pendingEditorState = cloneEditorState(currentEditorState);
     editorStateWasCloned = true;
   }
@@ -6536,7 +6621,6 @@ class LexicalNode {
 
 
   remove(preserveEmptyParent) {
-    errorOnReadOnly();
     removeNode(this, true, preserveEmptyParent);
   }
 
@@ -6637,7 +6721,6 @@ class LexicalNode {
   }
 
   insertBefore(nodeToInsert) {
-    errorOnReadOnly();
     const writableSelf = this.getWritable();
     const writableNodeToInsert = nodeToInsert.getWritable();
     removeFromParent(writableNodeToInsert);
@@ -6735,6 +6818,8 @@ function errorOnTypeKlassMismatch(type, klass) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+/** @noInheritDoc */
+
 class DecoratorNode extends LexicalNode {
   constructor(key) {
     super(key);
@@ -6766,7 +6851,16 @@ function $isDecoratorNode(node) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+/** @noInheritDoc */
 class ElementNode extends LexicalNode {
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
   constructor(key) {
     super(key);
     this.__children = [];
@@ -7041,7 +7135,6 @@ class ElementNode extends LexicalNode {
   }
 
   clear() {
-    errorOnReadOnly();
     const writableSelf = this.getWritable();
     const children = this.getChildren();
     children.forEach(child => child.remove());
@@ -7049,33 +7142,28 @@ class ElementNode extends LexicalNode {
   }
 
   append(...nodesToAppend) {
-    errorOnReadOnly();
     return this.splice(this.getChildrenSize(), 0, nodesToAppend);
   }
 
   setDirection(direction) {
-    errorOnReadOnly();
     const self = this.getWritable();
     self.__dir = direction;
     return self;
   }
 
   setFormat(type) {
-    errorOnReadOnly();
     const self = this.getWritable();
     self.__format = type !== '' ? ELEMENT_TYPE_TO_FORMAT[type] : 0;
     return this;
   }
 
   setIndent(indentLevel) {
-    errorOnReadOnly();
     const self = this.getWritable();
     self.__indent = indentLevel;
     return this;
   }
 
   splice(start, deleteCount, nodesToInsert) {
-    errorOnReadOnly();
     const writableSelf = this.getWritable();
     const writableSelfKey = writableSelf.__key;
     const writableSelfChildren = writableSelf.__children;
@@ -7265,7 +7353,10 @@ function $isElementNode(node) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+/** @noInheritDoc */
 class RootNode extends ElementNode {
+  /** @internal */
   static getType() {
     return 'root';
   }
@@ -7468,6 +7559,8 @@ class EditorState {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+/** @noInheritDoc */
 class LineBreakNode extends LexicalNode {
   static getType() {
     return 'linebreak';
@@ -7688,6 +7781,8 @@ function createTextInnerDOM(innerDOM, node, innerTag, format, text, config) {
     setTextThemeClassNames(innerTag, 0, format, innerDOM, textClassNames);
   }
 }
+/** @noInheritDoc */
+
 
 class TextNode extends LexicalNode {
   static getType() {
@@ -7930,26 +8025,23 @@ class TextNode extends LexicalNode {
 
   selectionTransform(prevSelection, nextSelection) {
     return;
-  } // TODO 0.4 This should just be a `string`.
+  } // TODO 0.5 This should just be a `string`.
 
 
   setFormat(format) {
-    errorOnReadOnly();
     const self = this.getWritable();
     self.__format = typeof format === 'string' ? TEXT_TYPE_TO_FORMAT[format] : format;
     return self;
-  } // TODO 0.4 This should just be a `string`.
+  } // TODO 0.5 This should just be a `string`.
 
 
   setDetail(detail) {
-    errorOnReadOnly();
     const self = this.getWritable();
     self.__detail = typeof detail === 'string' ? DETAIL_TYPE_TO_DETAIL[detail] : detail;
     return self;
   }
 
   setStyle(style) {
-    errorOnReadOnly();
     const self = this.getWritable();
     self.__style = style;
     return self;
@@ -7961,21 +8053,18 @@ class TextNode extends LexicalNode {
   }
 
   toggleDirectionless() {
-    errorOnReadOnly();
     const self = this.getWritable();
     self.__detail ^= IS_DIRECTIONLESS;
     return self;
   }
 
   toggleUnmergeable() {
-    errorOnReadOnly();
     const self = this.getWritable();
     self.__detail ^= IS_UNMERGEABLE;
     return self;
   }
 
   setMode(type) {
-    errorOnReadOnly();
     const mode = TEXT_MODE_TO_TYPE[type];
     const self = this.getWritable();
     self.__mode = mode;
@@ -7983,7 +8072,6 @@ class TextNode extends LexicalNode {
   }
 
   setTextContent(text) {
-    errorOnReadOnly();
     const writableSelf = this.getWritable();
     writableSelf.__text = text;
     return writableSelf;
@@ -8028,7 +8116,6 @@ class TextNode extends LexicalNode {
   }
 
   spliceText(offset, delCount, newText, moveSelection) {
-    errorOnReadOnly();
     const writableSelf = this.getWritable();
     const text = writableSelf.__text;
     const handledTextLength = newText.length;
@@ -8358,6 +8445,8 @@ function $isTextNode(node) {
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+/** @noInheritDoc */
 class ParagraphNode extends ElementNode {
   static getType() {
     return 'paragraph';
@@ -8559,7 +8648,7 @@ function createEditor(editorConfig) {
   const initialEditorState = config.editorState;
   const nodes = [RootNode, TextNode, LineBreakNode, ParagraphNode, ...(config.nodes || [])];
   const onError = config.onError;
-  const isReadOnly = config.readOnly || false;
+  const isEditable = config.editable || true;
   let registeredNodes;
 
   if (editorConfig === undefined && activeEditor !== null) {
@@ -8619,7 +8708,7 @@ function createEditor(editorConfig) {
     disableEvents,
     namespace,
     theme
-  }, onError ? onError : console.error, initializeConversionCache(registeredNodes), isReadOnly);
+  }, onError ? onError : console.error, initializeConversionCache(registeredNodes), isEditable);
 
   if (initialEditorState !== undefined) {
     editor._pendingEditorState = initialEditorState;
@@ -8629,7 +8718,7 @@ function createEditor(editorConfig) {
   return editor;
 }
 class LexicalEditor {
-  constructor(editorState, parentEditor, nodes, config, onError, htmlConversions, readOnly) {
+  constructor(editorState, parentEditor, nodes, config, onError, htmlConversions, editable) {
     this._parentEditor = parentEditor; // The root element associated with this editor
 
     this._rootElement = null; // The current editor state
@@ -8647,8 +8736,8 @@ class LexicalEditor {
 
     this._listeners = {
       decorator: new Set(),
+      editable: new Set(),
       mutation: new Map(),
-      readonly: new Set(),
       root: new Set(),
       textcontent: new Set(),
       update: new Set()
@@ -8675,8 +8764,9 @@ class LexicalEditor {
     this._key = createUID();
     this._onError = onError;
     this._htmlConversions = htmlConversions;
-    this._readOnly = false;
+    this._editable = true;
     this._headless = false;
+    this._window = null;
   }
 
   isComposing() {
@@ -8691,8 +8781,8 @@ class LexicalEditor {
     };
   }
 
-  registerReadOnlyListener(listener) {
-    const listenerSetOrMap = this._listeners.readonly;
+  registerEditableListener(listener) {
+    const listenerSetOrMap = this._listeners.editable;
     listenerSetOrMap.add(listener);
     return () => {
       listenerSetOrMap.delete(listener);
@@ -8837,11 +8927,13 @@ class LexicalEditor {
       }
 
       if (nextRootElement !== null) {
+        const windowObj = getDefaultView(nextRootElement);
         const style = nextRootElement.style;
         style.userSelect = 'text';
         style.whiteSpace = 'pre-wrap';
         style.wordBreak = 'break-word';
         nextRootElement.setAttribute('data-lexical-editor', 'true');
+        this._window = windowObj;
         this._dirtyType = FULL_RECONCILE;
         initMutationObserver(this);
 
@@ -8852,6 +8944,8 @@ class LexicalEditor {
         if (!this._config.disableEvents) {
           addRootElementEvents(nextRootElement, this);
         }
+      } else {
+        this._window = null;
       }
 
       triggerListeners('root', this, false, nextRootElement, prevRootElement);
@@ -8937,7 +9031,12 @@ class LexicalEditor {
             callbackFn();
           }
         }
-      });
+      }); // In the case where onUpdate doesn't fire (due to the focus update not
+      // occuring).
+
+      if (this._pendingEditorState === null) {
+        rootElement.removeAttribute('autocapitalize');
+      }
     }
   }
 
@@ -8955,14 +9054,14 @@ class LexicalEditor {
     }
   }
 
-  isReadOnly() {
-    return this._readOnly;
+  isEditable() {
+    return this._editable;
   }
 
-  setReadOnly(readOnly) {
-    if (this._readOnly !== readOnly) {
-      this._readOnly = readOnly;
-      triggerListeners('readonly', this, true, readOnly);
+  setEditable(editable) {
+    if (this._editable !== editable) {
+      this._editable = editable;
+      triggerListeners('editable', this, true, editable);
     }
   }
 
@@ -8981,7 +9080,7 @@ class LexicalEditor {
  * LICENSE file in the root directory of this source tree.
  *
  */
-const VERSION = '0.3.11';
+const VERSION = '0.4.0';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -8990,7 +9089,10 @@ const VERSION = '0.3.11';
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+/** @noInheritDoc */
 class GridCellNode extends ElementNode {
+  /** @internal */
   constructor(colSpan, key) {
     super(key);
     this.__colSpan = colSpan;