@lexical/react 0.7.9 → 0.8.0

package/LexicalBlockWithAlignableContents.d.ts

@@ -9,7 +9,7 @@ import type { ElementFormatType, NodeKey } from 'lexical';
 import { ReactNode } from 'react';
 declare type Props = Readonly<{
     children: ReactNode;
-    format: ElementFormatType | null | undefined;
+    format?: ElementFormatType | null;
     nodeKey: NodeKey;
     className: Readonly<{
         base: string;

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.
@@ -57,8 +58,10 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
       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());

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/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

@@ -37,7 +37,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  *
  */
 function ContentEditable({
-  ariaActiveDescendantID,
+  ariaActiveDescendant,
   ariaAutoComplete,
   ariaControls,
   ariaDescribedBy,
@@ -45,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);
@@ -70,21 +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/LexicalListPlugin.dev.js

@@ -21,13 +21,7 @@ var lexical = require('lexical');
  */
 function useList(editor) {
   react.useEffect(() => {
-    return utils.mergeRegister(editor.registerCommand(lexical.INDENT_CONTENT_COMMAND, () => {
-      list.indentList();
-      return false;
-    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.OUTDENT_CONTENT_COMMAND, () => {
-      list.outdentList();
-      return false;
-    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(list.INSERT_ORDERED_LIST_COMMAND, () => {
+    return utils.mergeRegister(editor.registerCommand(list.INSERT_ORDERED_LIST_COMMAND, () => {
       list.insertList(editor, 'number');
       return true;
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(list.INSERT_UNORDERED_LIST_COMMAND, () => {

package/LexicalListPlugin.prod.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var b=require("@lexical/list"),c=require("@lexical/react/LexicalComposerContext"),d=require("react"),e=require("@lexical/utils"),f=require("lexical");
-function g(a){d.useEffect(()=>e.mergeRegister(a.registerCommand(f.INDENT_CONTENT_COMMAND,()=>{b.indentList();return!1},f.COMMAND_PRIORITY_LOW),a.registerCommand(f.OUTDENT_CONTENT_COMMAND,()=>{b.outdentList();return!1},f.COMMAND_PRIORITY_LOW),a.registerCommand(b.INSERT_ORDERED_LIST_COMMAND,()=>{b.insertList(a,"number");return!0},f.COMMAND_PRIORITY_LOW),a.registerCommand(b.INSERT_UNORDERED_LIST_COMMAND,()=>{b.insertList(a,"bullet");return!0},f.COMMAND_PRIORITY_LOW),a.registerCommand(b.REMOVE_LIST_COMMAND,
-()=>{b.removeList(a);return!0},f.COMMAND_PRIORITY_LOW),a.registerCommand(f.INSERT_PARAGRAPH_COMMAND,()=>b.$handleListInsertParagraph()?!0:!1,f.COMMAND_PRIORITY_LOW)),[a])}exports.ListPlugin=function(){let [a]=c.useLexicalComposerContext();d.useEffect(()=>{if(!a.hasNodes([b.ListNode,b.ListItemNode]))throw Error("ListPlugin: ListNode and/or ListItemNode not registered on editor");},[a]);g(a);return null}
+function g(a){d.useEffect(()=>e.mergeRegister(a.registerCommand(b.INSERT_ORDERED_LIST_COMMAND,()=>{b.insertList(a,"number");return!0},f.COMMAND_PRIORITY_LOW),a.registerCommand(b.INSERT_UNORDERED_LIST_COMMAND,()=>{b.insertList(a,"bullet");return!0},f.COMMAND_PRIORITY_LOW),a.registerCommand(b.REMOVE_LIST_COMMAND,()=>{b.removeList(a);return!0},f.COMMAND_PRIORITY_LOW),a.registerCommand(f.INSERT_PARAGRAPH_COMMAND,()=>b.$handleListInsertParagraph()?!0:!1,f.COMMAND_PRIORITY_LOW)),[a])}
+exports.ListPlugin=function(){let [a]=c.useLexicalComposerContext();d.useEffect(()=>{if(!a.hasNodes([b.ListNode,b.ListItemNode]))throw Error("ListPlugin: ListNode and/or ListItemNode not registered on editor");},[a]);g(a);return null}

package/LexicalNestedComposer.dev.js

@@ -47,6 +47,7 @@ function LexicalNestedComposer({
         initialEditor._nodes.set(type, {
           klass: entry.klass,
           replace: entry.replace,
+          replaceWithKlass: entry.replaceWithKlass,
           transforms: new Set()
         });
       }
@@ -56,6 +57,7 @@ function LexicalNestedComposer({
         initialEditor._nodes.set(type, {
           klass,
           replace: null,
+          replaceWithKlass: null,
           transforms: new Set()
         });
       }

package/LexicalNestedComposer.prod.js

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var c=require("@lexical/react/LexicalCollaborationContext"),f=require("@lexical/react/LexicalComposerContext"),n=require("react");
-exports.LexicalNestedComposer=function({initialEditor:a,children:p,initialNodes:k,initialTheme:q,skipCollabChecks:r}){let l=n.useRef(!1),g=n.useContext(f.LexicalComposerContext);if(null==g)throw Error("Minified Lexical error #9; visit https://lexical.dev/docs/error?code=9 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let [d,{getTheme:t}]=g,w=n.useMemo(()=>{var b=q||t()||void 0;const u=f.createLexicalComposerContext(g,b);void 0!==b&&
-(a._config.theme=b);a._parentEditor=d;if(k)for(var e of k)b=e.getType(),a._nodes.set(b,{klass:e,replace:null,transforms:new Set});else{e=a._nodes=new Map(d._nodes);for(const [v,m]of e)a._nodes.set(v,{klass:m.klass,replace:m.replace,transforms:new Set})}a._config.namespace=d._config.namespace;return[a,u]},[]),{isCollabActive:x,yjsDocMap:y}=c.useCollaborationContext(),h=r||l.current||y.has(a.getKey());n.useEffect(()=>{h&&(l.current=!0)},[h]);n.useEffect(()=>d.registerEditableListener(b=>{a.setEditable(b)}),
-[a,d]);return n.createElement(f.LexicalComposerContext.Provider,{value:w},!x||h?p:null)}
+exports.LexicalNestedComposer=function({initialEditor:a,children:p,initialNodes:l,initialTheme:q,skipCollabChecks:r}){let m=n.useRef(!1),g=n.useContext(f.LexicalComposerContext);if(null==g)throw Error("Minified Lexical error #9; visit https://lexical.dev/docs/error?code=9 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let [d,{getTheme:t}]=g,w=n.useMemo(()=>{var b=q||t()||void 0;const u=f.createLexicalComposerContext(g,b);void 0!==b&&
+(a._config.theme=b);a._parentEditor=d;if(l)for(var e of l)b=e.getType(),a._nodes.set(b,{klass:e,replace:null,replaceWithKlass:null,transforms:new Set});else{e=a._nodes=new Map(d._nodes);for(const [v,h]of e)a._nodes.set(v,{klass:h.klass,replace:h.replace,replaceWithKlass:h.replaceWithKlass,transforms:new Set})}a._config.namespace=d._config.namespace;return[a,u]},[]),{isCollabActive:x,yjsDocMap:y}=c.useCollaborationContext(),k=r||m.current||y.has(a.getKey());n.useEffect(()=>{k&&(m.current=!0)},[k]);
+n.useEffect(()=>d.registerEditableListener(b=>{a.setEditable(b)}),[a,d]);return n.createElement(f.LexicalComposerContext.Provider,{value:w},!x||k?p:null)}

package/LexicalTreeView.dev.js

@@ -208,7 +208,7 @@ function TreeView({
 function printRangeSelection(selection) {
   let res = '';
   const formatText = printFormatProperties(selection);
-  res += `: range ${formatText !== '' ? `{ ${formatText} }` : ''}`;
+  res += `: range ${formatText !== '' ? `{ ${formatText} }` : ''} ${selection.style !== '' ? `{ style: ${selection.style} } ` : ''}`;
   const anchor = selection.anchor;
   const focus = selection.focus;
   const anchorOffset = anchor.offset;

package/LexicalTreeView.prod.js

@@ -5,18 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var h=require("@lexical/link"),r=require("@lexical/mark"),v=require("@lexical/utils"),F=require("lexical"),I=require("react");let J=Object.freeze({"\t":"\\t","\n":"\\n"}),K=new RegExp(Object.keys(J).join("|"),"g"),L=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
-function M(a){let c="",e=P(a),l=a.anchor;a=a.focus;let f=l.offset,b=a.offset;c=c+`: range ${""!==e?`{ ${e} }`:""}`+`\n  \u251c anchor { key: ${l.key}, offset: ${null===f?"null":f}, type: ${l.type} }`;return c+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===b?"null":b}, type: ${a.type} }`}
-function Q(a,c,e,l){let f=" root\n";a=a.read(()=>{const b=F.$getSelection();R(F.$getRoot(),(d,n)=>{const y=`(${d.getKey()})`,t=d.getType()||"",q=d.isSelected(),z=r.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var m=f,w=q?L.selectedLine:" ",D=n.join(" ");if(F.$isTextNode(d)){var k=d.getTextContent();var p=0===k.length?"(empty)":`"${S(k)}"`;k=[P(d),T(d),U(d)].filter(Boolean).join(", ");k=[p,0!==k.length?`{ ${k} }`:null].filter(Boolean).join(" ").trim()}else if(h.$isLinkNode(d)){k=d.getURL();
-k=0===k.length?"(empty)":`"${S(k)}"`;p=d.getTarget();null!=p&&(p="target: "+p);var A=Boolean;let B=d.getRel();null!=B&&(B="rel: "+B);p=[p,B].filter(A).join(", ");k=[k,0!==p.length?`{ ${p} }`:null].filter(Boolean).join(" ").trim()}else k="";f=m+`${w} ${D} ${y} ${t} ${z} ${k}\n`;f+=V({indent:n,isSelected:q,node:d,nodeKeyDisplay:y,selection:b,typeDisplay:t})});return null===b?": null":F.$isRangeSelection(b)?M(b):F.DEPRECATED_$isGridSelection(b)?`: grid\n  \u2514 { grid: ${b.gridKey}, anchorCell: ${b.anchor.key}, focusCell: ${b.focus.key} }`:
-`: node\n  \u2514 [${Array.from(b._nodes).join(", ")}]`});f+="\n selection"+a;f+="\n\n editor:";f+=`\n  \u2514 namespace ${c.namespace}`;null!==e&&(f+=`\n  \u2514 compositionKey ${e}`);return f+=`\n  \u2514 editable ${String(l)}`}function R(a,c,e=[]){a=a.getChildren();let l=a.length;a.forEach((f,b)=>{c(f,e.concat(b===l-1?L.isLastChild:L.hasNextSibling));F.$isElementNode(f)&&R(f,c,e.concat(b===l-1?L.ancestorIsLastChild:L.ancestorHasNextSibling))})}
-function S(a){return Object.entries(J).reduce((c,[e,l])=>c.replace(new RegExp(e,"g"),String(l)),a)}
+function M(a){let c="";var d=P(a);c+=`: range ${""!==d?`{ ${d} }`:""} ${""!==a.style?`{ style: ${a.style} } `:""}`;d=a.anchor;a=a.focus;let l=d.offset,f=a.offset;c+=`\n  \u251c anchor { key: ${d.key}, offset: ${null===l?"null":l}, type: ${d.type} }`;return c+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===f?"null":f}, type: ${a.type} }`}
+function Q(a,c,d,l){let f=" root\n";a=a.read(()=>{const b=F.$getSelection();R(F.$getRoot(),(e,n)=>{const y=`(${e.getKey()})`,t=e.getType()||"",q=e.isSelected(),z=r.$isMarkNode(e)?` id: [ ${e.getIDs().join(", ")} ] `:"";var m=f,w=q?L.selectedLine:" ",D=n.join(" ");if(F.$isTextNode(e)){var k=e.getTextContent();var p=0===k.length?"(empty)":`"${S(k)}"`;k=[P(e),T(e),U(e)].filter(Boolean).join(", ");k=[p,0!==k.length?`{ ${k} }`:null].filter(Boolean).join(" ").trim()}else if(h.$isLinkNode(e)){k=e.getURL();
+k=0===k.length?"(empty)":`"${S(k)}"`;p=e.getTarget();null!=p&&(p="target: "+p);var A=Boolean;let B=e.getRel();null!=B&&(B="rel: "+B);p=[p,B].filter(A).join(", ");k=[k,0!==p.length?`{ ${p} }`:null].filter(Boolean).join(" ").trim()}else k="";f=m+`${w} ${D} ${y} ${t} ${z} ${k}\n`;f+=V({indent:n,isSelected:q,node:e,nodeKeyDisplay:y,selection:b,typeDisplay:t})});return null===b?": null":F.$isRangeSelection(b)?M(b):F.DEPRECATED_$isGridSelection(b)?`: grid\n  \u2514 { grid: ${b.gridKey}, anchorCell: ${b.anchor.key}, focusCell: ${b.focus.key} }`:
+`: node\n  \u2514 [${Array.from(b._nodes).join(", ")}]`});f+="\n selection"+a;f+="\n\n editor:";f+=`\n  \u2514 namespace ${c.namespace}`;null!==d&&(f+=`\n  \u2514 compositionKey ${d}`);return f+=`\n  \u2514 editable ${String(l)}`}function R(a,c,d=[]){a=a.getChildren();let l=a.length;a.forEach((f,b)=>{c(f,d.concat(b===l-1?L.isLastChild:L.hasNextSibling));F.$isElementNode(f)&&R(f,c,d.concat(b===l-1?L.ancestorIsLastChild:L.ancestorHasNextSibling))})}
+function S(a){return Object.entries(J).reduce((c,[d,l])=>c.replace(new RegExp(d,"g"),String(l)),a)}
 let W=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],X=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],Y=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
-function T(a){let c=X.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function U(a){let c=Y.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function P(a){let c=W.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
-function V({indent:a,isSelected:c,node:e,nodeKeyDisplay:l,selection:f,typeDisplay:b}){if(!F.$isTextNode(e)||!F.$isRangeSelection(f)||!c||F.$isElementNode(e))return"";c=f.anchor;var d=f.focus;if(""===e.getTextContent()||c.getNode()===f.focus.getNode()&&c.offset===d.offset)return"";d=f.anchor;let n=f.focus,y=e.getTextContent(),t=y.length;c=f=-1;if("text"===d.type&&"text"===n.type){let m=d.getNode(),w=n.getNode();m===w&&e===m&&d.offset!==n.offset?[f,c]=d.offset<n.offset?[d.offset,n.offset]:[n.offset,
-d.offset]:e===m?[f,c]=m.isBefore(w)?[d.offset,t]:[0,d.offset]:e===w?[f,c]=w.isBefore(m)?[n.offset,t]:[0,n.offset]:[f,c]=[0,t]}e=(y.slice(0,f).match(K)||[]).length;d=(y.slice(f,c).match(K)||[]).length;let [q,z]=[f+e,c+e+d];if(q===z)return"";e=a[a.length-1]===L.hasNextSibling?L.ancestorHasNextSibling:L.ancestorIsLastChild;a=[...a.slice(0,a.length-1),e];e=Array(q+1).fill(" ");f=Array(z-q).fill(L.selectedChar);l=Array(l.length+(b.length+3)).fill(" ");return[L.selectedLine,a.join(" "),[...l,...e,...f].join("")].join(" ")+
+function T(a){let c=X.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function U(a){let c=Y.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function P(a){let c=W.map(d=>d(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
+function V({indent:a,isSelected:c,node:d,nodeKeyDisplay:l,selection:f,typeDisplay:b}){if(!F.$isTextNode(d)||!F.$isRangeSelection(f)||!c||F.$isElementNode(d))return"";c=f.anchor;var e=f.focus;if(""===d.getTextContent()||c.getNode()===f.focus.getNode()&&c.offset===e.offset)return"";e=f.anchor;let n=f.focus,y=d.getTextContent(),t=y.length;c=f=-1;if("text"===e.type&&"text"===n.type){let m=e.getNode(),w=n.getNode();m===w&&d===m&&e.offset!==n.offset?[f,c]=e.offset<n.offset?[e.offset,n.offset]:[n.offset,
+e.offset]:d===m?[f,c]=m.isBefore(w)?[e.offset,t]:[0,e.offset]:d===w?[f,c]=w.isBefore(m)?[n.offset,t]:[0,n.offset]:[f,c]=[0,t]}d=(y.slice(0,f).match(K)||[]).length;e=(y.slice(f,c).match(K)||[]).length;let [q,z]=[f+d,c+d+e];if(q===z)return"";d=a[a.length-1]===L.hasNextSibling?L.ancestorHasNextSibling:L.ancestorIsLastChild;a=[...a.slice(0,a.length-1),d];d=Array(q+1).fill(" ");f=Array(z-q).fill(L.selectedChar);l=Array(l.length+(b.length+3)).fill(" ");return[L.selectedLine,a.join(" "),[...l,...d,...f].join("")].join(" ")+
 "\n"}
-exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:e,viewClassName:l,timeTravelPanelClassName:f,editor:b}){let [d,n]=I.useState([]),[y,t]=I.useState(""),[q,z]=I.useState(!1),m=I.useRef(0),w=I.useRef(null),D=I.useRef(null),[k,p]=I.useState(!1),[A,B]=I.useState(!1),[x,Z]=I.useState(!1),G=I.useRef(null),H=I.useCallback(g=>{const u=Q(b.getEditorState(),b._config,b._compositionKey,b._editable);t(u);q||n(E=>[...E,[Date.now(),g]])},[b,q]);
-I.useEffect(()=>{let g=b.getEditorState();!x&&1E3<g._nodeMap.size&&t(Q(g,b._config,b._compositionKey,b._editable))},[b,x]);I.useEffect(()=>v.mergeRegister(b.registerUpdateListener(({editorState:g})=>{if(!x&&1E3<g._nodeMap.size&&(G.current=g,B(!0),!x))return;H(g)}),b.registerEditableListener(()=>{let g=Q(b.getEditorState(),b._config,b._compositionKey,b._editable);t(g)})),[b,A,H,x]);let C=d.length;I.useEffect(()=>{if(k){let g,u=()=>{const E=m.current;E===C-1?p(!1):g=setTimeout(()=>{m.current++;const N=
-m.current,O=D.current;null!==O&&(O.value=String(N));b.setEditorState(d[N][1]);u()},d[E+1][0]-d[E][0])};u();return()=>{clearTimeout(g)}}},[d,k,b,C]);I.useEffect(()=>{let g=w.current;if(null!==g)return g.__lexicalEditor=b,()=>{g.__lexicalEditor=null}},[b]);return I.createElement("div",{className:l},!x&&A?I.createElement("div",{style:{padding:20}},I.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),I.createElement("button",{onClick:()=>
-{Z(!0);let g=G.current;null!==g&&(G.current=null,H(g))},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,!q&&(x||!A)&&2<C&&I.createElement("button",{onClick:()=>{let g=b.getRootElement();null!==g&&(g.contentEditable="false",m.current=C-1,z(!0))},className:a,type:"button"},"Time Travel"),(x||!A)&&I.createElement("pre",{ref:w},y),q&&(x||!A)&&I.createElement("div",{className:f},I.createElement("button",{className:e,onClick:()=>
-{m.current===C-1&&(m.current=1);p(!k)},type:"button"},k?"Pause":"Play"),I.createElement("input",{className:c,ref:D,onChange:g=>{g=Number(g.target.value);let u=d[g];u&&(m.current=g,b.setEditorState(u[1]))},type:"range",min:"1",max:C-1}),I.createElement("button",{className:e,onClick:()=>{var g=b.getRootElement();if(null!==g){g.contentEditable="true";g=d.length-1;b.setEditorState(d[g][1]);let u=D.current;null!==u&&(u.value=String(g));z(!1);p(!1)}},type:"button"},"Exit")))}
+exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:d,viewClassName:l,timeTravelPanelClassName:f,editor:b}){let [e,n]=I.useState([]),[y,t]=I.useState(""),[q,z]=I.useState(!1),m=I.useRef(0),w=I.useRef(null),D=I.useRef(null),[k,p]=I.useState(!1),[A,B]=I.useState(!1),[x,Z]=I.useState(!1),G=I.useRef(null),H=I.useCallback(g=>{const u=Q(b.getEditorState(),b._config,b._compositionKey,b._editable);t(u);q||n(E=>[...E,[Date.now(),g]])},[b,q]);
+I.useEffect(()=>{let g=b.getEditorState();!x&&1E3<g._nodeMap.size&&t(Q(g,b._config,b._compositionKey,b._editable))},[b,x]);I.useEffect(()=>v.mergeRegister(b.registerUpdateListener(({editorState:g})=>{if(!x&&1E3<g._nodeMap.size&&(G.current=g,B(!0),!x))return;H(g)}),b.registerEditableListener(()=>{let g=Q(b.getEditorState(),b._config,b._compositionKey,b._editable);t(g)})),[b,A,H,x]);let C=e.length;I.useEffect(()=>{if(k){let g,u=()=>{const E=m.current;E===C-1?p(!1):g=setTimeout(()=>{m.current++;const N=
+m.current,O=D.current;null!==O&&(O.value=String(N));b.setEditorState(e[N][1]);u()},e[E+1][0]-e[E][0])};u();return()=>{clearTimeout(g)}}},[e,k,b,C]);I.useEffect(()=>{let g=w.current;if(null!==g)return g.__lexicalEditor=b,()=>{g.__lexicalEditor=null}},[b]);return I.createElement("div",{className:l},!x&&A?I.createElement("div",{style:{padding:20}},I.createElement("span",{style:{marginRight:20}},"Detected large EditorState, this can impact debugging performance."),I.createElement("button",{onClick:()=>
+{Z(!0);let g=G.current;null!==g&&(G.current=null,H(g))},style:{background:"transparent",border:"1px solid white",color:"white",cursor:"pointer",padding:5}},"Show full tree")):null,!q&&(x||!A)&&2<C&&I.createElement("button",{onClick:()=>{let g=b.getRootElement();null!==g&&(g.contentEditable="false",m.current=C-1,z(!0))},className:a,type:"button"},"Time Travel"),(x||!A)&&I.createElement("pre",{ref:w},y),q&&(x||!A)&&I.createElement("div",{className:f},I.createElement("button",{className:d,onClick:()=>
+{m.current===C-1&&(m.current=1);p(!k)},type:"button"},k?"Pause":"Play"),I.createElement("input",{className:c,ref:D,onChange:g=>{g=Number(g.target.value);let u=e[g];u&&(m.current=g,b.setEditorState(u[1]))},type:"range",min:"1",max:C-1}),I.createElement("button",{className:d,onClick:()=>{var g=b.getRootElement();if(null!==g){g.contentEditable="true";g=e.length-1;b.setEditorState(e[g][1]);let u=D.current;null!==u&&(u.value=String(g));z(!1);p(!1)}},type:"button"},"Exit")))}

package/package.json

@@ -8,29 +8,29 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.7.9",
+  "version": "0.8.0",
   "dependencies": {
-    "@lexical/clipboard": "0.7.9",
-    "@lexical/code": "0.7.9",
-    "@lexical/dragon": "0.7.9",
-    "@lexical/hashtag": "0.7.9",
-    "@lexical/history": "0.7.9",
-    "@lexical/link": "0.7.9",
-    "@lexical/list": "0.7.9",
-    "@lexical/mark": "0.7.9",
-    "@lexical/markdown": "0.7.9",
-    "@lexical/overflow": "0.7.9",
-    "@lexical/plain-text": "0.7.9",
-    "@lexical/rich-text": "0.7.9",
-    "@lexical/selection": "0.7.9",
-    "@lexical/table": "0.7.9",
-    "@lexical/text": "0.7.9",
-    "@lexical/utils": "0.7.9",
-    "@lexical/yjs": "0.7.9",
+    "@lexical/clipboard": "0.8.0",
+    "@lexical/code": "0.8.0",
+    "@lexical/dragon": "0.8.0",
+    "@lexical/hashtag": "0.8.0",
+    "@lexical/history": "0.8.0",
+    "@lexical/link": "0.8.0",
+    "@lexical/list": "0.8.0",
+    "@lexical/mark": "0.8.0",
+    "@lexical/markdown": "0.8.0",
+    "@lexical/overflow": "0.8.0",
+    "@lexical/plain-text": "0.8.0",
+    "@lexical/rich-text": "0.8.0",
+    "@lexical/selection": "0.8.0",
+    "@lexical/table": "0.8.0",
+    "@lexical/text": "0.8.0",
+    "@lexical/utils": "0.8.0",
+    "@lexical/yjs": "0.8.0",
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
-    "lexical": "0.7.9",
+    "lexical": "0.8.0",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },

package/shared/useYjsCollaboration.d.ts

@@ -7,9 +7,9 @@
  */
 import type { Binding } from '@lexical/yjs';
 import type { LexicalEditor } from 'lexical';
-import type { Doc } from 'yjs';
 import * as React from 'react';
 import { WebsocketProvider } from 'y-websocket';
+import { Doc } from 'yjs';
 import { InitialEditorStateType } from '../LexicalComposer';
 export declare type CursorsContainerRef = React.MutableRefObject<HTMLElement | null>;
 export declare function useYjsCollaboration(editor: LexicalEditor, id: string, provider: WebsocketProvider, docMap: Map<string, Doc>, name: string, color: string, shouldBootstrap: boolean, cursorsContainerRef?: CursorsContainerRef, initialEditorState?: InitialEditorStateType): [JSX.Element, Binding];