Update Lexical to 0.5.0

package.json

@@ -90,22 +90,22 @@
   },
   "dependencies": {
     "@excalidraw/excalidraw": "0.11.0",
-    "@lexical/clipboard": "0.3.11",
-    "@lexical/code": "0.3.11",
-    "@lexical/file": "0.3.11",
-    "@lexical/hashtag": "0.3.11",
-    "@lexical/link": "0.3.11",
-    "@lexical/list": "0.3.11",
-    "@lexical/mark": "0.3.11",
-    "@lexical/overflow": "0.3.11",
-    "@lexical/plain-text": "0.3.11",
-    "@lexical/react": "0.3.11",
-    "@lexical/rich-text": "0.3.11",
-    "@lexical/selection": "0.3.11",
-    "@lexical/table": "0.3.11",
-    "@lexical/utils": "0.3.11",
+    "@lexical/clipboard": "^0.5.0",
+    "@lexical/code": "^0.5.0",
+    "@lexical/file": "^0.5.0",
+    "@lexical/hashtag": "^0.5.0",
+    "@lexical/link": "^0.5.0",
+    "@lexical/list": "^0.5.0",
+    "@lexical/mark": "^0.5.0",
+    "@lexical/overflow": "^0.5.0",
+    "@lexical/plain-text": "^0.5.0",
+    "@lexical/react": "^0.5.0",
+    "@lexical/rich-text": "^0.5.0",
+    "@lexical/selection": "^0.5.0",
+    "@lexical/table": "^0.5.0",
+    "@lexical/utils": "^0.5.0",
     "katex": "^0.15.2",
-    "lexical": "0.3.11",
+    "lexical": "^0.5.0",
     "use-child": "^1.0.0",
     "utility-types": "^3.10.0",
     "y-websocket": ">=1.3.x",

src/Editor.tsx

@@ -46,8 +46,7 @@ interface IEditorProps {
   actionsEnabled?: boolean;
   placeholder?: string;
   listMaxIndent?: number;
-  initialEditorState?: string;
-  isReadOnly?: boolean;
+  isEditable?: boolean;
   onChange?: (editorState: string, editorInstance?: LexicalEditor) => void;
 }
 
@@ -59,8 +58,7 @@ const Editor = ({
   actionsEnabled = false,
   listMaxIndent = 7,
   placeholder = '',
-  initialEditorState,
-  isReadOnly = false,
+  isEditable = true,
   onChange,
 }: IEditorProps) => {
   const [editor] = useLexicalComposerContext();
@@ -75,7 +73,7 @@ const Editor = ({
   const scrollRef = useRef(null);
 
   useEffect(() => {
-    editor.setReadOnly(isReadOnly);
+    editor.setEditable(isEditable);
   }, []);
 
   return (
@@ -97,10 +95,8 @@ const Editor = ({
           <RichTextPlugin
             contentEditable={<ContentEditable />}
             placeholder={placeholderComponent}
-            initialEditorState={initialEditorState}
           />
           <OnChangePlugin
-            ignoreInitialChange={false}
             onChange={(editorState) => {
               onChange?.(JSON.stringify(editorState), activeEditor);
               return (editorStateRef.current = editorState);

src/nodes/ExcalidrawNode/index.tsx

@@ -48,7 +48,7 @@ function ExcalidrawComponent({
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
   const [isModalOpen, setModalOpen] = useState<boolean>(
-    data === '[]' && !editor.isReadOnly()
+    data === '[]' && editor.isEditable()
   );
   const imageContainerRef = useRef<HTMLImageElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -77,9 +77,9 @@ function ExcalidrawComponent({
   // Set editor to readOnly if excalidraw is open to prevent unwanted changes
   useEffect(() => {
     if (isModalOpen) {
-      editor.setReadOnly(true);
+      editor.setEditable(false);
     } else {
-      editor.setReadOnly(false);
+      editor.setEditable(true);
     }
   }, [isModalOpen, editor]);
 
@@ -135,7 +135,7 @@ function ExcalidrawComponent({
   }, [editor, nodeKey]);
 
   const setData = (newData: ReadonlyArray<ExcalidrawElementFragment>) => {
-    if (editor.isReadOnly()) {
+    if (!editor.isEditable()) {
       return;
     }
     return editor.update(() => {
@@ -169,11 +169,11 @@ function ExcalidrawComponent({
         isShown={isModalOpen}
         onDelete={deleteNode}
         onHide={() => {
-          editor.setReadOnly(false);
+          editor.setEditable(true);
           setModalOpen(false);
         }}
         onSave={(newData) => {
-          editor.setReadOnly(false);
+          editor.setEditable(true);
           setData(newData);
           setModalOpen(false);
         }}

src/nodes/ImageNode.tsx

@@ -286,7 +286,6 @@ function ImageComponent({
                     Enter a caption...
                   </Placeholder>
                 }
-                initialEditorState={null}
               />
               {showNestedEditorTreeView === true ? <TreeViewPlugin /> : null}
             </LexicalNestedComposer>

src/nodes/StickyNode.tsx

@@ -268,7 +268,6 @@ function StickyComponent({
                 What's up?
               </Placeholder>
             }
-            initialEditorState={null}
           />
         </LexicalNestedComposer>
       </div>

src/nodes/TypeaheadNode.ts

@@ -54,5 +54,5 @@ export class TypeaheadNode extends TextNode {
 }
 
 export function $createTypeaheadNode(text: string): TypeaheadNode {
-  return new TypeaheadNode(text).setMode('inert');
+  return new TypeaheadNode(text).setMode('token');
 }

src/plugins/ActionsPlugin.tsx

@@ -42,7 +42,7 @@ export default function ActionsPlugin({
   isRichText: boolean;
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
-  const [isReadOnly, setIsReadyOnly] = useState(() => editor.isReadOnly());
+  const [isEditable, setIsEditable] = useState(() => editor.isEditable());
   const [isSpeechToText, setIsSpeechToText] = useState(false);
   const [connected, setConnected] = useState(false);
   const [isEditorEmpty, setIsEditorEmpty] = useState(true);
@@ -52,8 +52,8 @@ export default function ActionsPlugin({
 
   useEffect(() => {
     return mergeRegister(
-      editor.registerReadOnlyListener((readOnly) => {
-        setIsReadyOnly(readOnly);
+      editor.registerEditableListener((editable) => {
+        setIsEditable(editable);
       }),
       editor.registerCommand<boolean>(
         CONNECTED_COMMAND,
@@ -165,15 +165,15 @@ export default function ActionsPlugin({
         <i className="clear" />
       </button>
       <button
-        className={`action-button ${isReadOnly ? 'unlock' : 'lock'}`}
+        className={`action-button ${isEditable ? 'lock' : 'unlock'}`}
         onClick={() => {
-          editor.setReadOnly(!editor.isReadOnly());
+          editor.setEditable(!editor.isEditable());
         }}
         title="Read-Only Mode"
-        aria-label={`${isReadOnly ? 'Unlock' : 'Lock'} read-only mode`}
+        aria-label={`${isEditable ? 'Lock' : 'Unlock'} read-only mode`}
         type="button"
       >
-        <i className={isReadOnly ? 'unlock' : 'lock'} />
+        <i className={isEditable ? 'lock' : 'unlock'} />
       </button>
       <button
         className="action-button"

src/plugins/MarkdownTransformers.ts

@@ -22,6 +22,7 @@ import {
 import {
   $createHorizontalRuleNode,
   $isHorizontalRuleNode,
+  HorizontalRuleNode,
 } from '@lexical/react/LexicalHorizontalRuleNode';
 import {
   $createTableCellNode,
@@ -32,6 +33,7 @@ import {
   TableCellHeaderStates,
   TableCellNode,
   TableNode,
+  TableRowNode,
 } from '@lexical/table';
 import {
   $createParagraphNode,
@@ -41,11 +43,12 @@ import {
   $isTextNode,
 } from 'lexical';
 
-import { $createEquationNode, $isEquationNode } from '../nodes/EquationNode';
-import { $createImageNode, $isImageNode } from '../nodes/ImageNode';
-import { $createTweetNode, $isTweetNode } from '../nodes/TweetNode';
+import { $createEquationNode, $isEquationNode, EquationNode } from '../nodes/EquationNode';
+import { $createImageNode, $isImageNode, ImageNode } from '../nodes/ImageNode';
+import { $createTweetNode, $isTweetNode, TweetNode } from '../nodes/TweetNode';
 
 export const HR: ElementTransformer = {
+  dependencies: [HorizontalRuleNode],
   export: (node: LexicalNode) => {
     return $isHorizontalRuleNode(node) ? '***' : null;
   },
@@ -66,6 +69,7 @@ export const HR: ElementTransformer = {
 };
 
 export const IMAGE: TextMatchTransformer = {
+  dependencies: [ImageNode],
   export: (node, exportChildren, exportFormat) => {
     if (!$isImageNode(node)) {
       return null;
@@ -89,6 +93,7 @@ export const IMAGE: TextMatchTransformer = {
 };
 
 export const EQUATION: TextMatchTransformer = {
+  dependencies: [EquationNode],
   export: (node, exportChildren, exportFormat) => {
     if (!$isEquationNode(node)) {
       return null;
@@ -108,6 +113,7 @@ export const EQUATION: TextMatchTransformer = {
 };
 
 export const TWEET: ElementTransformer = {
+  dependencies: [TweetNode],
   export: (node) => {
     if (!$isTweetNode(node)) {
       return null;
@@ -128,6 +134,7 @@ export const TWEET: ElementTransformer = {
 const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
 
 export const TABLE: ElementTransformer = {
+  dependencies: [TableNode, TableRowNode, TableCellNode],
   export: (
     node: LexicalNode,
     exportChildren: (elementNode: ElementNode) => string

src/plugins/TableActionMenuPlugin.tsx

@@ -26,7 +26,7 @@ import {
 } from '@lexical/table';
 import {
   $getSelection,
-  $isGridSelection,
+  DEPRECATED_$isGridSelection,
   $isRangeSelection,
   $setSelection,
 } from 'lexical';
@@ -72,7 +72,7 @@ function TableActionMenu({
     editor.getEditorState().read(() => {
       const selection = $getSelection();
 
-      if ($isGridSelection(selection)) {
+      if (DEPRECATED_$isGridSelection(selection)) {
         const selectionShape = selection.getShape();
 
         updateSelectionCounts({
@@ -153,7 +153,7 @@ function TableActionMenu({
 
         let tableRowIndex;
 
-        if ($isGridSelection(selection)) {
+        if (DEPRECATED_$isGridSelection(selection)) {
           const selectionShape = selection.getShape();
           tableRowIndex = shouldInsertAfter
             ? selectionShape.toY
@@ -189,7 +189,7 @@ function TableActionMenu({
 
         let tableColumnIndex;
 
-        if ($isGridSelection(selection)) {
+        if (DEPRECATED_$isGridSelection(selection)) {
           const selectionShape = selection.getShape();
           tableColumnIndex = shouldInsertAfter
             ? selectionShape.toX
@@ -199,11 +199,14 @@ function TableActionMenu({
             $getTableColumnIndexFromTableCellNode(tableCellNode);
         }
 
+        const grid = $getElementGridForTableNode(editor, tableNode);
+
         $insertTableColumn(
           tableNode,
           tableColumnIndex,
           shouldInsertAfter,
-          selectionCounts.columns
+          selectionCounts.columns,
+          grid
         );
 
         clearTableSelection();

src/plugins/TableCellResizer.tsx

@@ -22,7 +22,7 @@ import {
 import {
   $getNearestNodeFromDOMNode,
   $getSelection,
-  $isGridSelection,
+  DEPRECATED_$isGridSelection,
   COMMAND_PRIORITY_HIGH,
   SELECTION_CHANGE_COMMAND,
 } from 'lexical';
@@ -66,7 +66,7 @@ function TableCellResizer({ editor }: { editor: LexicalEditor }): JSX.Element {
       SELECTION_CHANGE_COMMAND,
       (payload) => {
         const selection = $getSelection();
-        const isGridSelection = $isGridSelection(selection);
+        const isGridSelection = DEPRECATED_$isGridSelection(selection);
 
         if (isSelectingGrid !== isGridSelection) {
           updateIsSelectingGrid(isGridSelection);

src/plugins/ToolbarPlugin/components/BlockFormatDropdown.tsx

@@ -6,7 +6,7 @@ import {
   REMOVE_LIST_COMMAND,
 } from '@lexical/list';
 import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
-import { $wrapLeafNodesInElements } from '@lexical/selection';
+import { $wrapNodes } from '@lexical/selection';
 import {
   $createParagraphNode,
   $getSelection,
@@ -41,7 +41,7 @@ const BlockFormatDropdown = () => {
         const selection = $getSelection();
 
         if ($isRangeSelection(selection)) {
-          $wrapLeafNodesInElements(selection, () => $createParagraphNode());
+          $wrapNodes(selection, () => $createParagraphNode());
         }
       });
     }
@@ -53,7 +53,7 @@ const BlockFormatDropdown = () => {
         const selection = $getSelection();
 
         if ($isRangeSelection(selection)) {
-          $wrapLeafNodesInElements(selection, () =>
+          $wrapNodes(selection, () =>
             $createHeadingNode(headingSize)
           );
         }
@@ -91,7 +91,7 @@ const BlockFormatDropdown = () => {
         const selection = $getSelection();
 
         if ($isRangeSelection(selection)) {
-          $wrapLeafNodesInElements(selection, () => $createQuoteNode());
+          $wrapNodes(selection, () => $createQuoteNode());
         }
       });
     }
@@ -104,7 +104,7 @@ const BlockFormatDropdown = () => {
 
         if ($isRangeSelection(selection)) {
           if (selection.isCollapsed()) {
-            $wrapLeafNodesInElements(selection, () => $createCodeNode());
+            $wrapNodes(selection, () => $createCodeNode());
           } else {
             const textContent = selection.getTextContent();
             const codeNode = $createCodeNode();