@lexical/react 0.12.2 → 0.12.4

package/LexicalCollaborationPlugin.dev.js

@@ -32,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(() => {
@@ -42,48 +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) => {
       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(), awarenessData || {});
-
     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,
@@ -102,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);
@@ -116,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);
@@ -125,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!');
@@ -136,7 +125,6 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
           disconnect();
         }
       }
-
       return true;
     }, lexical.COMMAND_PRIORITY_EDITOR);
   }, [connect, disconnect, editor]);
@@ -159,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;
@@ -174,14 +160,14 @@ function useYjsHistory(editor, binding) {
   });
   const clearHistory = React.useCallback(() => {
     undoManager.clear();
-  }, [undoManager]); // Exposing undo and redo states
+  }, [undoManager]);
 
+  // Exposing undo and redo states
   React.useEffect(() => {
     const updateUndoRedoStates = () => {
       editor.dispatchCommand(lexical.CAN_UNDO_COMMAND, undoManager.undoStack.length > 0);
       editor.dispatchCommand(lexical.CAN_REDO_COMMAND, undoManager.redoStack.length > 0);
     };
-
     undoManager.on('stack-item-added', updateUndoRedoStates);
     undoManager.on('stack-item-popped', updateUndoRedoStates);
     undoManager.on('stack-cleared', updateUndoRedoStates);
@@ -193,11 +179,9 @@ function useYjsHistory(editor, binding) {
   }, [editor, undoManager]);
   return clearHistory;
 }
-
 function initializeEditor(editor, initialEditorState) {
   editor.update(() => {
     const root = lexical.$getRoot();
-
     if (root.isEmpty()) {
       if (initialEditorState) {
         switch (typeof initialEditorState) {
@@ -209,7 +193,6 @@ function initializeEditor(editor, initialEditorState) {
               });
               break;
             }
-
           case 'object':
             {
               editor.setEditorState(initialEditorState, {
@@ -217,12 +200,10 @@ function initializeEditor(editor, initialEditorState) {
               });
               break;
             }
-
           case 'function':
             {
               editor.update(() => {
                 const root1 = lexical.$getRoot();
-
                 if (root1.isEmpty()) {
                   initialEditorState(editor);
                 }
@@ -238,7 +219,6 @@ function initializeEditor(editor, initialEditorState) {
         const {
           activeElement
         } = document;
-
         if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
           paragraph.select();
         }
@@ -248,7 +228,6 @@ function initializeEditor(editor, initialEditorState) {
     tag: 'history-merge'
   });
 }
-
 function clearEditorSkipCollab(editor, binding) {
   // reset editor state
   editor.update(() => {
@@ -258,33 +237,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/LexicalComposer.d.ts

@@ -6,21 +6,17 @@
  *
  */
 /// <reference types="react" />
-import { EditorState, EditorThemeClasses, Klass, LexicalEditor, LexicalNode } from 'lexical';
+import { EditorState, EditorThemeClasses, HTMLConfig, Klass, LexicalEditor, LexicalNode, LexicalNodeReplacement } from 'lexical';
 export type InitialEditorStateType = null | string | EditorState | ((editor: LexicalEditor) => void);
 export type InitialConfigType = Readonly<{
     editor__DEPRECATED?: LexicalEditor | null;
     namespace: string;
-    nodes?: ReadonlyArray<Klass<LexicalNode> | {
-        replace: Klass<LexicalNode>;
-        with: <T extends {
-            new (...args: any): any;
-        }>(node: InstanceType<T>) => LexicalNode;
-    }>;
+    nodes?: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement>;
     onError: (error: Error, editor: LexicalEditor) => void;
     editable?: boolean;
     theme?: EditorThemeClasses;
     editorState?: InitialEditorStateType;
+    html?: HTMLConfig;
 }>;
 type Props = {
     children: JSX.Element | string | (JSX.Element | string)[];

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';
 
 /**
@@ -50,14 +51,15 @@ function LexicalComposer({
       editor__DEPRECATED: initialEditor,
       nodes,
       onError,
-      editorState: initialEditorState
+      editorState: initialEditorState,
+      html
     } = initialConfig;
     const context = LexicalComposerContext.createLexicalComposerContext(null, theme);
     let editor = initialEditor || null;
-
     if (editor === null) {
       const newEditor = lexical.createEditor({
         editable: initialConfig.editable,
+        html,
         namespace,
         nodes,
         onError: error => onError(error, newEditor),
@@ -66,34 +68,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 +108,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/LexicalComposer.js.flow

@@ -12,6 +12,8 @@ import type {
   LexicalEditor,
   LexicalNode,
   EditorState,
+  LexicalNodeReplacement,
+  HTMLConfig,
 } from 'lexical';
 
 export type InitialEditorStateType =
@@ -24,13 +26,11 @@ export type InitialConfigType = $ReadOnly<{
   editor__DEPRECATED?: LexicalEditor | null,
   editable?: boolean,
   namespace: string,
-  nodes?: $ReadOnlyArray<
-    | Class<LexicalNode>
-    | {replace: Class<LexicalNode>, with: (node: LexicalNode) => LexicalNode},
-  >,
+  nodes?: $ReadOnlyArray<Class<LexicalNode> | LexicalNodeReplacement>,
   theme?: EditorThemeClasses,
   editorState?: InitialEditorStateType,
   onError: (error: Error, editor: LexicalEditor) => void,
+  html?: HTMLConfig,
 }>;
 
 type Props = {

package/LexicalComposer.prod.js

@@ -6,4 +6,5 @@
  */
 'use strict';var e=require("@lexical/react/LexicalComposerContext"),f=require("lexical"),g=require("react");let m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement;var n=m?g.useLayoutEffect:g.useEffect;let p={tag:"history-merge"};
 function q(a,c){if(null!==c)if(void 0===c)a.update(()=>{var b=f.$getRoot();if(b.isEmpty()){let d=f.$createParagraphNode();b.append(d);b=m?document.activeElement:null;(null!==f.$getSelection()||null!==b&&b===a.getRootElement())&&d.select()}},p);else if(null!==c)switch(typeof c){case "string":let b=a.parseEditorState(c);a.setEditorState(b,p);break;case "object":a.setEditorState(c,p);break;case "function":a.update(()=>{f.$getRoot().isEmpty()&&c(a)},p)}}
-exports.LexicalComposer=function({initialConfig:a,children:c}){let b=g.useMemo(()=>{const {theme:d,namespace:h,editor__DEPRECATED:r,nodes:t,onError:u,editorState:v}=a,w=e.createLexicalComposerContext(null,d);let k=r||null;if(null===k){const l=f.createEditor({editable:a.editable,namespace:h,nodes:t,onError:x=>u(x,l),theme:d});q(l,v);k=l}return[k,w]},[]);n(()=>{let d=a.editable,[h]=b;h.setEditable(void 0!==d?d:!0)},[]);return g.createElement(e.LexicalComposerContext.Provider,{value:b},c)}
+exports.LexicalComposer=function({initialConfig:a,children:c}){let b=g.useMemo(()=>{const {theme:d,namespace:h,editor__DEPRECATED:r,nodes:t,onError:u,editorState:v,html:w}=a,x=e.createLexicalComposerContext(null,d);let k=r||null;if(null===k){const l=f.createEditor({editable:a.editable,html:w,namespace:h,nodes:t,onError:y=>u(y,l),theme:d});q(l,v);k=l}return[k,x]},[]);n(()=>{let d=a.editable,[h]=b;h.setEditable(void 0!==d?d:!0)},[]);return g.createElement(e.LexicalComposerContext.Provider,{value:b},
+c)}

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.dev.js

@@ -13,14 +13,12 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -33,6 +31,7 @@ function _extends() {
  * 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';
 
 /**

package/LexicalContextMenuPlugin.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import type { MenuRenderFn, MenuResolution } from './shared/LexicalMenu';
-import { LexicalNode } from 'lexical';
+import { CommandListenerPriority, LexicalNode } from 'lexical';
 import { MutableRefObject, ReactPortal } from 'react';
 import { MenuOption } from './shared/LexicalMenu';
 export type ContextMenuRenderFn<TOption extends MenuOption> = (anchorElementRef: MutableRefObject<HTMLElement | null>, itemProps: {
@@ -24,6 +24,7 @@ export type LexicalContextMenuPluginProps<TOption extends MenuOption> = {
     onOpen?: (resolution: MenuResolution) => void;
     menuRenderFn: ContextMenuRenderFn<TOption>;
     anchorClassName?: string;
+    commandPriority?: CommandListenerPriority;
 };
-export declare function LexicalContextMenuPlugin<TOption extends MenuOption>({ options, onClose, onOpen, onSelectOption, menuRenderFn: contextMenuRenderFn, anchorClassName, }: LexicalContextMenuPluginProps<TOption>): JSX.Element | null;
+export declare function LexicalContextMenuPlugin<TOption extends MenuOption>({ options, onClose, onOpen, onSelectOption, menuRenderFn: contextMenuRenderFn, anchorClassName, commandPriority, }: LexicalContextMenuPluginProps<TOption>): JSX.Element | null;
 export { MenuOption, MenuRenderFn, MenuResolution };