@lexical/react 0.7.8 → 0.8.0

package/LexicalCollaborationPlugin.dev.js

@@ -13,6 +13,7 @@ var utils = require('@lexical/utils');
 var yjs = require('@lexical/yjs');
 var lexical = require('lexical');
 var reactDom = require('react-dom');
+var yjs$1 = require('yjs');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -31,7 +32,8 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
   const disconnect = React.useCallback(() => {
     try {
       provider.disconnect();
-    } catch (e) {// Do nothing
+    } catch (e) {
+      // Do nothing
     }
   }, [provider]);
   React.useEffect(() => {
@@ -41,45 +43,39 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
     const {
       awareness
     } = provider;
-
     const onStatus = ({
       status
     }) => {
       editor.dispatchCommand(yjs.CONNECTED_COMMAND, status === 'connected');
     };
-
     const onSync = isSynced => {
       if (shouldBootstrap && isSynced && root.isEmpty() && root._xmlText._length === 0 && isReloadingDoc.current === false) {
         initializeEditor(editor, initialEditorState);
       }
-
       isReloadingDoc.current = false;
     };
-
     const onAwarenessUpdate = () => {
       yjs.syncCursorPositions(binding, provider);
     };
-
     const onYjsTreeChanges = (events, transaction) => {
-      if (transaction.origin !== binding) {
-        yjs.syncYjsChangesToLexical(binding, provider, events);
+      const origin = transaction.origin;
+      if (origin !== binding) {
+        const isFromUndoManger = origin instanceof yjs$1.UndoManager;
+        yjs.syncYjsChangesToLexical(binding, provider, events, isFromUndoManger);
       }
     };
-
     yjs.initLocalState(provider, name, color, document.activeElement === editor.getRootElement());
-
     const onProviderDocReload = ydoc => {
       clearEditorSkipCollab(editor, binding);
       setDoc(ydoc);
       docMap.set(id, ydoc);
       isReloadingDoc.current = true;
     };
-
     provider.on('reload', onProviderDocReload);
     provider.on('status', onStatus);
     provider.on('sync', onSync);
-    awareness.on('update', onAwarenessUpdate); // This updates the local editor state when we recieve updates from other clients
-
+    awareness.on('update', onAwarenessUpdate);
+    // This updates the local editor state when we recieve updates from other clients
     root.getSharedType().observeDeep(onYjsTreeChanges);
     const removeListener = editor.registerUpdateListener(({
       prevEditorState,
@@ -98,7 +94,6 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
       if (isReloadingDoc.current === false) {
         disconnect();
       }
-
       provider.off('sync', onSync);
       provider.off('status', onStatus);
       provider.off('reload', onProviderDocReload);
@@ -112,7 +107,6 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
     const ref = element => {
       binding.cursorsContainer = element;
     };
-
     return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement("div", {
       ref: ref
     }), cursorsContainerRef && cursorsContainerRef.current || document.body);
@@ -121,7 +115,6 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
     return editor.registerCommand(yjs.TOGGLE_CONNECT_COMMAND, payload => {
       if (connect !== undefined && disconnect !== undefined) {
         const shouldConnect = payload;
-
         if (shouldConnect) {
           // eslint-disable-next-line no-console
           console.log('Collaboration connected!');
@@ -132,7 +125,6 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
           disconnect();
         }
       }
-
       return true;
     }, lexical.COMMAND_PRIORITY_EDITOR);
   }, [connect, disconnect, editor]);
@@ -155,11 +147,9 @@ function useYjsHistory(editor, binding) {
     const undo = () => {
       undoManager.undo();
     };
-
     const redo = () => {
       undoManager.redo();
     };
-
     return utils.mergeRegister(editor.registerCommand(lexical.UNDO_COMMAND, () => {
       undo();
       return true;
@@ -173,11 +163,9 @@ function useYjsHistory(editor, binding) {
   }, [undoManager]);
   return clearHistory;
 }
-
 function initializeEditor(editor, initialEditorState) {
   editor.update(() => {
     const root = lexical.$getRoot();
-
     if (root.isEmpty()) {
       if (initialEditorState) {
         switch (typeof initialEditorState) {
@@ -189,7 +177,6 @@ function initializeEditor(editor, initialEditorState) {
               });
               break;
             }
-
           case 'object':
             {
               editor.setEditorState(initialEditorState, {
@@ -197,12 +184,10 @@ function initializeEditor(editor, initialEditorState) {
               });
               break;
             }
-
           case 'function':
             {
               editor.update(() => {
                 const root1 = lexical.$getRoot();
-
                 if (root1.isEmpty()) {
                   initialEditorState(editor);
                 }
@@ -218,7 +203,6 @@ function initializeEditor(editor, initialEditorState) {
         const {
           activeElement
         } = document;
-
         if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
           paragraph.select();
         }
@@ -228,7 +212,6 @@ function initializeEditor(editor, initialEditorState) {
     tag: 'history-merge'
   });
 }
-
 function clearEditorSkipCollab(editor, binding) {
   // reset editor state
   editor.update(() => {
@@ -238,33 +221,25 @@ function clearEditorSkipCollab(editor, binding) {
   }, {
     tag: 'skip-collab'
   });
-
   if (binding.cursors == null) {
     return;
   }
-
   const cursors = binding.cursors;
-
   if (cursors == null) {
     return;
   }
-
   const cursorsContainer = binding.cursorsContainer;
-
   if (cursorsContainer == null) {
     return;
-  } // reset cursors in dom
-
+  }
 
+  // reset cursors in dom
   const cursorsArr = Array.from(cursors.values());
-
   for (let i = 0; i < cursorsArr.length; i++) {
     const cursor = cursorsArr[i];
     const selection = cursor.selection;
-
     if (selection && selection.selections != null) {
       const selections = selection.selections;
-
       for (let j = 0; j < selections.length; j++) {
         cursorsContainer.removeChild(selections[i]);
       }

package/LexicalCollaborationPlugin.prod.js

@@ -4,12 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var e=require("@lexical/react/LexicalCollaborationContext"),f=require("@lexical/react/LexicalComposerContext"),h=require("react"),z=require("@lexical/utils"),H=require("@lexical/yjs"),I=require("lexical"),J=require("react-dom");
-function K(b,c,a,d,p,w,x,l,t){let q=h.useRef(!1),[u,r]=h.useState(d.get(c)),g=h.useMemo(()=>H.createBinding(b,a,c,u,d),[b,a,c,d,u]),n=h.useCallback(()=>{a.connect()},[a]),v=h.useCallback(()=>{try{a.disconnect()}catch(m){}},[a]);h.useEffect(()=>{let {root:m}=g,{awareness:A}=a,B=({status:k})=>{b.dispatchCommand(H.CONNECTED_COMMAND,"connected"===k)},C=k=>{x&&k&&m.isEmpty()&&0===m._xmlText._length&&!1===q.current&&L(b,t);q.current=!1},D=()=>{H.syncCursorPositions(g,a)},E=(k,y)=>{y.origin!==g&&H.syncYjsChangesToLexical(g,
-a,k)};H.initLocalState(a,p,w,document.activeElement===b.getRootElement());let F=k=>{M(b,g);r(k);d.set(c,k);q.current=!0};a.on("reload",F);a.on("status",B);a.on("sync",C);A.on("update",D);m.getSharedType().observeDeep(E);let Q=b.registerUpdateListener(({prevEditorState:k,editorState:y,dirtyLeaves:N,dirtyElements:O,normalizedNodes:P,tags:G})=>{!1===G.has("skip-collab")&&H.syncLexicalUpdateToYjs(g,a,k,y,O,N,P,G)});n();return()=>{!1===q.current&&v();a.off("sync",C);a.off("status",B);a.off("reload",F);
-A.off("update",D);m.getSharedType().unobserveDeep(E);d.delete(c);Q()}},[g,w,n,v,d,b,c,t,p,a,x]);let R=h.useMemo(()=>J.createPortal(h.createElement("div",{ref:m=>{g.cursorsContainer=m}}),l&&l.current||document.body),[g,l]);h.useEffect(()=>b.registerCommand(H.TOGGLE_CONNECT_COMMAND,m=>{void 0!==n&&void 0!==v&&(m?(console.log("Collaboration connected!"),n()):(console.log("Collaboration disconnected!"),v()));return!0},I.COMMAND_PRIORITY_EDITOR),[n,v,b]);return[R,g]}
-function S(b,c,a,d){h.useEffect(()=>z.mergeRegister(b.registerCommand(I.FOCUS_COMMAND,()=>{H.setLocalStateFocus(c,a,d,!0);return!1},I.COMMAND_PRIORITY_EDITOR),b.registerCommand(I.BLUR_COMMAND,()=>{H.setLocalStateFocus(c,a,d,!1);return!1},I.COMMAND_PRIORITY_EDITOR)),[d,b,a,c])}
-function T(b,c){let a=h.useMemo(()=>H.createUndoManager(c,c.root.getSharedType()),[c]);h.useEffect(()=>z.mergeRegister(b.registerCommand(I.UNDO_COMMAND,()=>{a.undo();return!0},I.COMMAND_PRIORITY_EDITOR),b.registerCommand(I.REDO_COMMAND,()=>{a.redo();return!0},I.COMMAND_PRIORITY_EDITOR)));return h.useCallback(()=>{a.clear()},[a])}
-function L(b,c){b.update(()=>{var a=I.$getRoot();if(a.isEmpty())if(c)switch(typeof c){case "string":var d=b.parseEditorState(c);b.setEditorState(d,{tag:"history-merge"});break;case "object":b.setEditorState(c,{tag:"history-merge"});break;case "function":b.update(()=>{I.$getRoot().isEmpty()&&c(b)},{tag:"history-merge"})}else d=I.$createParagraphNode(),a.append(d),{activeElement:a}=document,(null!==I.$getSelection()||null!==a&&a===b.getRootElement())&&d.select()},{tag:"history-merge"})}
-function M(b,c){b.update(()=>{let d=I.$getRoot();d.clear();d.select()},{tag:"skip-collab"});if(null!=c.cursors&&(b=c.cursors,null!=b&&(c=c.cursorsContainer,null!=c))){b=Array.from(b.values());for(let d=0;d<b.length;d++){var a=b[d].selection;if(a&&null!=a.selections){a=a.selections;for(let p=0;p<a.length;p++)c.removeChild(a[d])}}}}
-exports.CollaborationPlugin=function({id:b,providerFactory:c,shouldBootstrap:a,username:d,cursorColor:p,cursorsContainerRef:w,initialEditorState:x}){let l=e.useCollaborationContext(d,p),{yjsDocMap:t,name:q,color:u}=l,[r]=f.useLexicalComposerContext();h.useEffect(()=>{l.isCollabActive=!0;return()=>{null==r._parentEditor&&(l.isCollabActive=!1)}},[l,r]);d=h.useMemo(()=>c(b,t),[b,c,t]);let [g,n]=K(r,b,d,t,q,u,a,w,x);l.clientID=n.clientID;T(r,n);S(r,d,q,u);return g}
+'use strict';var e=require("@lexical/react/LexicalCollaborationContext"),f=require("@lexical/react/LexicalComposerContext"),h=require("react"),z=require("@lexical/utils"),H=require("@lexical/yjs"),I=require("lexical"),J=require("react-dom"),K=require("yjs");
+function L(b,c,a,d,p,x,y,l,t){let q=h.useRef(!1),[v,r]=h.useState(d.get(c)),g=h.useMemo(()=>H.createBinding(b,a,c,v,d),[b,a,c,d,v]),n=h.useCallback(()=>{a.connect()},[a]),w=h.useCallback(()=>{try{a.disconnect()}catch(m){}},[a]);h.useEffect(()=>{let {root:m}=g,{awareness:A}=a,B=({status:k})=>{b.dispatchCommand(H.CONNECTED_COMMAND,"connected"===k)},C=k=>{y&&k&&m.isEmpty()&&0===m._xmlText._length&&!1===q.current&&M(b,t);q.current=!1},D=()=>{H.syncCursorPositions(g,a)},E=(k,u)=>{u=u.origin;u!==g&&H.syncYjsChangesToLexical(g,
+a,k,u instanceof K.UndoManager)};H.initLocalState(a,p,x,document.activeElement===b.getRootElement());let F=k=>{N(b,g);r(k);d.set(c,k);q.current=!0};a.on("reload",F);a.on("status",B);a.on("sync",C);A.on("update",D);m.getSharedType().observeDeep(E);let R=b.registerUpdateListener(({prevEditorState:k,editorState:u,dirtyLeaves:O,dirtyElements:P,normalizedNodes:Q,tags:G})=>{!1===G.has("skip-collab")&&H.syncLexicalUpdateToYjs(g,a,k,u,P,O,Q,G)});n();return()=>{!1===q.current&&w();a.off("sync",C);a.off("status",
+B);a.off("reload",F);A.off("update",D);m.getSharedType().unobserveDeep(E);d.delete(c);R()}},[g,x,n,w,d,b,c,t,p,a,y]);let S=h.useMemo(()=>J.createPortal(h.createElement("div",{ref:m=>{g.cursorsContainer=m}}),l&&l.current||document.body),[g,l]);h.useEffect(()=>b.registerCommand(H.TOGGLE_CONNECT_COMMAND,m=>{void 0!==n&&void 0!==w&&(m?(console.log("Collaboration connected!"),n()):(console.log("Collaboration disconnected!"),w()));return!0},I.COMMAND_PRIORITY_EDITOR),[n,w,b]);return[S,g]}
+function T(b,c,a,d){h.useEffect(()=>z.mergeRegister(b.registerCommand(I.FOCUS_COMMAND,()=>{H.setLocalStateFocus(c,a,d,!0);return!1},I.COMMAND_PRIORITY_EDITOR),b.registerCommand(I.BLUR_COMMAND,()=>{H.setLocalStateFocus(c,a,d,!1);return!1},I.COMMAND_PRIORITY_EDITOR)),[d,b,a,c])}
+function U(b,c){let a=h.useMemo(()=>H.createUndoManager(c,c.root.getSharedType()),[c]);h.useEffect(()=>z.mergeRegister(b.registerCommand(I.UNDO_COMMAND,()=>{a.undo();return!0},I.COMMAND_PRIORITY_EDITOR),b.registerCommand(I.REDO_COMMAND,()=>{a.redo();return!0},I.COMMAND_PRIORITY_EDITOR)));return h.useCallback(()=>{a.clear()},[a])}
+function M(b,c){b.update(()=>{var a=I.$getRoot();if(a.isEmpty())if(c)switch(typeof c){case "string":var d=b.parseEditorState(c);b.setEditorState(d,{tag:"history-merge"});break;case "object":b.setEditorState(c,{tag:"history-merge"});break;case "function":b.update(()=>{I.$getRoot().isEmpty()&&c(b)},{tag:"history-merge"})}else d=I.$createParagraphNode(),a.append(d),{activeElement:a}=document,(null!==I.$getSelection()||null!==a&&a===b.getRootElement())&&d.select()},{tag:"history-merge"})}
+function N(b,c){b.update(()=>{let d=I.$getRoot();d.clear();d.select()},{tag:"skip-collab"});if(null!=c.cursors&&(b=c.cursors,null!=b&&(c=c.cursorsContainer,null!=c))){b=Array.from(b.values());for(let d=0;d<b.length;d++){var a=b[d].selection;if(a&&null!=a.selections){a=a.selections;for(let p=0;p<a.length;p++)c.removeChild(a[d])}}}}
+exports.CollaborationPlugin=function({id:b,providerFactory:c,shouldBootstrap:a,username:d,cursorColor:p,cursorsContainerRef:x,initialEditorState:y}){let l=e.useCollaborationContext(d,p),{yjsDocMap:t,name:q,color:v}=l,[r]=f.useLexicalComposerContext();h.useEffect(()=>{l.isCollabActive=!0;return()=>{null==r._parentEditor&&(l.isCollabActive=!1)}},[l,r]);d=h.useMemo(()=>c(b,t),[b,c,t]);let [g,n]=L(r,b,d,t,q,v,a,x,y);l.clientID=n.clientID;U(r,n);T(r,d,q,v);return g}

package/LexicalComposer.dev.js

@@ -17,6 +17,7 @@ var React = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
 /**
@@ -54,7 +55,6 @@ function LexicalComposer({
     } = initialConfig;
     const context = LexicalComposerContext.createLexicalComposerContext(null, theme);
     let editor = initialEditor || null;
-
     if (editor === null) {
       const newEditor = lexical.createEditor({
         editable: false,
@@ -66,34 +66,33 @@ function LexicalComposer({
       initializeEditor(newEditor, initialEditorState);
       editor = newEditor;
     }
-
     return [editor, context];
-  }, // We only do this for init
+  },
+  // We only do this for init
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   useLayoutEffect(() => {
     const isEditable = initialConfig.editable;
     const [editor] = composerContext;
-    editor.setEditable(isEditable !== undefined ? isEditable : true); // We only do this for init
+    editor.setEditable(isEditable !== undefined ? isEditable : true);
+
+    // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(LexicalComposerContext.LexicalComposerContext.Provider, {
     value: composerContext
   }, children);
 }
-
 function initializeEditor(editor, initialEditorState) {
   if (initialEditorState === null) {
     return;
   } else if (initialEditorState === undefined) {
     editor.update(() => {
       const root = lexical.$getRoot();
-
       if (root.isEmpty()) {
         const paragraph = lexical.$createParagraphNode();
         root.append(paragraph);
         const activeElement = CAN_USE_DOM ? document.activeElement : null;
-
         if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
           paragraph.select();
         }
@@ -107,18 +106,15 @@ function initializeEditor(editor, initialEditorState) {
           editor.setEditorState(parsedEditorState, HISTORY_MERGE_OPTIONS);
           break;
         }
-
       case 'object':
         {
           editor.setEditorState(initialEditorState, HISTORY_MERGE_OPTIONS);
           break;
         }
-
       case 'function':
         {
           editor.update(() => {
             const root = lexical.$getRoot();
-
             if (root.isEmpty()) {
               initialEditorState(editor);
             }

package/LexicalComposerContext.dev.js

@@ -18,32 +18,26 @@ var react = require('react');
 const LexicalComposerContext = /*#__PURE__*/react.createContext(null);
 function createLexicalComposerContext(parent, theme) {
   let parentContext = null;
-
   if (parent != null) {
     parentContext = parent[1];
   }
-
   function getTheme() {
     if (theme != null) {
       return theme;
     }
-
     return parentContext != null ? parentContext.getTheme() : null;
   }
-
   return {
     getTheme
   };
 }
 function useLexicalComposerContext() {
   const composerContext = react.useContext(LexicalComposerContext);
-
   if (composerContext == null) {
     {
       throw Error(`LexicalComposerContext.useLexicalComposerContext: cannot find a LexicalComposerContext`);
     }
   }
-
   return composerContext;
 }
 

package/LexicalContentEditable.d.ts

@@ -5,28 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { CSSProperties } from 'react';
-export declare type Props = Readonly<{
-    ariaActiveDescendantID?: string;
-    ariaAutoComplete?: string;
-    ariaControls?: string;
-    ariaDescribedBy?: string;
-    ariaExpanded?: boolean;
-    ariaLabel?: string;
-    ariaLabelledBy?: string;
-    ariaMultiline?: boolean;
-    ariaOwneeID?: string;
-    ariaRequired?: string;
-    autoCapitalize?: boolean;
-    autoComplete?: boolean;
-    autoCorrect?: boolean;
-    className?: string;
-    id?: string;
-    readOnly?: boolean;
-    role?: string;
-    spellCheck?: boolean;
-    style?: CSSProperties;
-    tabIndex?: number;
-    testid?: string;
-}>;
-export declare function ContentEditable({ ariaActiveDescendantID, ariaAutoComplete, ariaControls, ariaDescribedBy, ariaExpanded, ariaLabel, ariaLabelledBy, ariaMultiline, ariaOwneeID, ariaRequired, autoCapitalize, autoComplete, autoCorrect, className, id, role, spellCheck, style, tabIndex, testid, }: Props): JSX.Element;
+import * as React from 'react';
+export declare type Props = {
+    ariaActiveDescendant?: React.AriaAttributes['aria-activedescendant'];
+    ariaAutoComplete?: React.AriaAttributes['aria-autocomplete'];
+    ariaControls?: React.AriaAttributes['aria-controls'];
+    ariaDescribedBy?: React.AriaAttributes['aria-describedby'];
+    ariaExpanded?: React.AriaAttributes['aria-expanded'];
+    ariaLabel?: React.AriaAttributes['aria-label'];
+    ariaLabelledBy?: React.AriaAttributes['aria-labelledby'];
+    ariaMultiline?: React.AriaAttributes['aria-multiline'];
+    ariaOwns?: React.AriaAttributes['aria-owns'];
+    ariaRequired?: React.AriaAttributes['aria-required'];
+    autoCapitalize?: HTMLDivElement['autocapitalize'];
+    'data-testid'?: string | null | undefined;
+} & React.AllHTMLAttributes<HTMLDivElement>;
+export declare function ContentEditable({ ariaActiveDescendant, ariaAutoComplete, ariaControls, ariaDescribedBy, ariaExpanded, ariaLabel, ariaLabelledBy, ariaMultiline, ariaOwns, ariaRequired, autoCapitalize, className, id, role, spellCheck, style, tabIndex, 'data-testid': testid, }: Props): JSX.Element;

package/LexicalContentEditable.dev.js

@@ -16,6 +16,7 @@ var React = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
 /**
@@ -36,7 +37,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  *
  */
 function ContentEditable({
-  ariaActiveDescendantID,
+  ariaActiveDescendant,
   ariaAutoComplete,
   ariaControls,
   ariaDescribedBy,
@@ -44,18 +45,16 @@ function ContentEditable({
   ariaLabel,
   ariaLabelledBy,
   ariaMultiline,
-  ariaOwneeID,
+  ariaOwns,
   ariaRequired,
   autoCapitalize,
-  autoComplete,
-  autoCorrect,
   className,
   id,
   role = 'textbox',
   spellCheck = true,
   style,
   tabIndex,
-  testid
+  'data-testid': testid
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [isEditable, setEditable] = React.useState(false);
@@ -69,20 +68,17 @@ function ContentEditable({
     });
   }, [editor]);
   return /*#__PURE__*/React.createElement("div", {
-    "aria-activedescendant": !isEditable ? null : ariaActiveDescendantID,
-    "aria-autocomplete": !isEditable ? null : ariaAutoComplete,
-    "aria-controls": !isEditable ? null : ariaControls,
+    "aria-activedescendant": !isEditable ? undefined : ariaActiveDescendant,
+    "aria-autocomplete": !isEditable ? 'none' : ariaAutoComplete,
+    "aria-controls": !isEditable ? undefined : ariaControls,
     "aria-describedby": ariaDescribedBy,
-    "aria-expanded": !isEditable ? null : role === 'combobox' ? !!ariaExpanded : null,
+    "aria-expanded": !isEditable ? undefined : role === 'combobox' ? !!ariaExpanded : undefined,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-multiline": ariaMultiline,
-    "aria-owns": !isEditable ? null : ariaOwneeID,
+    "aria-owns": !isEditable ? undefined : ariaOwns,
     "aria-required": ariaRequired,
-    autoCapitalize: autoCapitalize !== undefined ? String(autoCapitalize) : undefined // @ts-ignore This is a valid attribute
-    ,
-    autoComplete: autoComplete,
-    autoCorrect: autoCorrect !== undefined ? String(autoCorrect) : undefined,
+    autoCapitalize: autoCapitalize,
     className: className,
     contentEditable: isEditable,
     "data-testid": testid,

package/LexicalContentEditable.js.flow

@@ -7,27 +7,22 @@
  * @flow strict
  */
 
+import * as React from 'react';
+
 export type Props = $ReadOnly<{
-  ariaActiveDescendantID?: string,
-  ariaAutoComplete?: string,
-  ariaControls?: string,
-  ariaDescribedBy?: string,
-  ariaExpanded?: boolean,
-  ariaLabel?: string,
-  ariaLabelledBy?: string,
-  ariaMultiline?: boolean,
-  ariaOwneeID?: string,
-  ariaRequired?: string,
-  autoCapitalize?: boolean,
-  autoComplete?: boolean,
-  autoCorrect?: boolean,
-  className?: string,
-  readOnly?: boolean,
-  role?: string,
-  style?: $Shape<{[string]: string | number}>,
-  spellCheck?: boolean,
-  tabIndex?: number,
-  testid?: string,
+  ...$Partial<HTMLDivElement>,
+  ariaActiveDescendant?: HTMLDivElement['aria-activedescendant'],
+  ariaAutoComplete?: HTMLDivElement['aria-autocomplete'],
+  ariaControls?: HTMLDivElement['aria-controls'],
+  ariaDescribedBy?: HTMLDivElement['aria-describedby'],
+  ariaExpanded?: HTMLDivElement['aria-expanded'],
+  ariaLabel?: HTMLDivElement['aria-label'],
+  ariaLabelledBy?: HTMLDivElement['aria-labelledby'],
+  ariaMultiline?: HTMLDivElement['aria-multiline'],
+  ariaOwns?: HTMLDivElement['aria-owns'],
+  ariaRequired?: HTMLDivElement['aria-required'],
+  autoCapitalize?: HTMLDivElement['autocapitalize'],
+  'data-testid'?: string | null,
 }>;
 
 declare export function ContentEditable(props: Props): React$Node;

package/LexicalContentEditable.prod.js

@@ -4,6 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var b=require("@lexical/react/LexicalComposerContext"),k=require("react"),l="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?k.useLayoutEffect:k.useEffect;
-exports.ContentEditable=function({ariaActiveDescendantID:m,ariaAutoComplete:n,ariaControls:p,ariaDescribedBy:q,ariaExpanded:r,ariaLabel:t,ariaLabelledBy:u,ariaMultiline:v,ariaOwneeID:w,ariaRequired:x,autoCapitalize:e,autoComplete:y,autoCorrect:f,className:z,id:A,role:g="textbox",spellCheck:B=!0,style:C,tabIndex:D,testid:E}){let [c]=b.useLexicalComposerContext(),[a,h]=k.useState(!1),F=k.useCallback(d=>{c.setRootElement(d)},[c]);l(()=>{h(c.isEditable());return c.registerEditableListener(d=>{h(d)})},
-[c]);return k.createElement("div",{"aria-activedescendant":a?m:null,"aria-autocomplete":a?n:null,"aria-controls":a?p:null,"aria-describedby":q,"aria-expanded":a?"combobox"===g?!!r:null:null,"aria-label":t,"aria-labelledby":u,"aria-multiline":v,"aria-owns":a?w:null,"aria-required":x,autoCapitalize:void 0!==e?String(e):void 0,autoComplete:y,autoCorrect:void 0!==f?String(f):void 0,className:z,contentEditable:a,"data-testid":E,id:A,ref:F,role:a?g:void 0,spellCheck:B,style:C,tabIndex:D})}
+'use strict';var b=require("@lexical/react/LexicalComposerContext"),g=require("react"),h="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?g.useLayoutEffect:g.useEffect;
+exports.ContentEditable=function({ariaActiveDescendant:k,ariaAutoComplete:l,ariaControls:m,ariaDescribedBy:n,ariaExpanded:p,ariaLabel:q,ariaLabelledBy:r,ariaMultiline:t,ariaOwns:u,ariaRequired:v,autoCapitalize:w,className:x,id:y,role:e="textbox",spellCheck:z=!0,style:A,tabIndex:B,"data-testid":C}){let [c]=b.useLexicalComposerContext(),[a,f]=g.useState(!1),D=g.useCallback(d=>{c.setRootElement(d)},[c]);h(()=>{f(c.isEditable());return c.registerEditableListener(d=>{f(d)})},[c]);return g.createElement("div",
+{"aria-activedescendant":a?k:void 0,"aria-autocomplete":a?l:"none","aria-controls":a?m:void 0,"aria-describedby":n,"aria-expanded":a?"combobox"===e?!!p:void 0:void 0,"aria-label":q,"aria-labelledby":r,"aria-multiline":t,"aria-owns":a?u:void 0,"aria-required":v,autoCapitalize:w,className:x,contentEditable:a,"data-testid":C,id:y,ref:D,role:a?e:void 0,spellCheck:z,style:A,tabIndex:B})}

package/LexicalDecoratorBlockNode.dev.js

@@ -20,7 +20,6 @@ class DecoratorBlockNode extends lexical.DecoratorNode {
     super(key);
     this.__format = format || '';
   }
-
   exportJSON() {
     return {
       format: this.__format || '',
@@ -28,20 +27,16 @@ class DecoratorBlockNode extends lexical.DecoratorNode {
       version: 1
     };
   }
-
   createDOM() {
     return document.createElement('div');
   }
-
   updateDOM() {
     return false;
   }
-
   setFormat(format) {
     const self = this.getWritable();
     self.__format = format;
   }
-
 }
 function $isDecoratorBlockNode(node) {
   return node instanceof DecoratorBlockNode;