Update lexical to 0.7.5

ozanyurtsever · Jan 10, 2023 · 76be87f · 76be87f
1 parent 0be4ef6
commit 76be87f
Show file tree

Hide file tree

Showing 7 changed files with 558 additions and 530 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -90,24 +90,24 @@
   },
   "dependencies": {
     "@excalidraw/excalidraw": "0.11.0",
-    "@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",
+    "@lexical/clipboard": "^0.7.5",
+    "@lexical/code": "^0.7.5",
+    "@lexical/file": "^0.7.5",
+    "@lexical/hashtag": "^0.7.5",
+    "@lexical/link": "^0.7.5",
+    "@lexical/list": "^0.7.5",
+    "@lexical/mark": "^0.7.5",
+    "@lexical/overflow": "^0.7.5",
+    "@lexical/plain-text": "^0.7.5",
+    "@lexical/react": "^0.7.5",
+    "@lexical/rich-text": "^0.7.5",
+    "@lexical/selection": "^0.7.5",
+    "@lexical/table": "^0.7.5",
+    "@lexical/utils": "^0.7.5",
     "i18next": "^22.0.3",
     "i18next-browser-languagedetector": "^7.0.0",
     "katex": "^0.15.2",
-    "lexical": "^0.5.0",
+    "lexical": "^0.7.5",
     "react-i18next": "^12.0.0",
     "use-child": "^1.0.0",
     "utility-types": "^3.10.0",

diff --git a/src/Editor.tsx b/src/Editor.tsx
@@ -7,14 +7,14 @@
  */
 
 import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { AutoScrollPlugin } from '@lexical/react/LexicalAutoScrollPlugin';
 import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
 import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { useRef } from 'react';
 
@@ -73,7 +73,6 @@ const Editor = ({
     settings: { isRichText },
   } = useSettings();
   const placeholderComponent = <Placeholder>{placeholder}</Placeholder>;
-  const scrollRef = useRef(null);
 
   useEffect(() => {
     editor.setEditable(isEditable);
@@ -86,20 +85,20 @@ const Editor = ({
       value={{ initialEditor: editor, activeEditor, setActiveEditor }}
     >
       {children}
-      <div className={`editor-container`} ref={scrollRef}>
+      <div className={`editor-container`}>
         <AutoFocusPlugin />
         <ClearEditorPlugin />
         {hashtagsEnabled && <HashtagPlugin />}
         {emojisEnabled && <EmojisPlugin />}
         <KeywordsPlugin />
         <SpeechToTextPlugin />
         {autoLinkEnabled && <AutoLinkPlugin />}
-        <AutoScrollPlugin scrollRef={scrollRef} />
 
         <>
           <RichTextPlugin
             contentEditable={<ContentEditable />}
             placeholder={placeholderComponent}
+            ErrorBoundary={LexicalErrorBoundary}
           />
           <OnChangePlugin
             onChange={(editorState) => {

diff --git a/src/nodes/ImageNode.tsx b/src/nodes/ImageNode.tsx
@@ -27,6 +27,7 @@ import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import { mergeRegister } from '@lexical/utils';
 import {
   $getNodeByKey,
@@ -286,6 +287,7 @@ function ImageComponent({
                     Enter a caption...
                   </Placeholder>
                 }
+                ErrorBoundary={LexicalErrorBoundary}
               />
               {showNestedEditorTreeView === true ? <TreeViewPlugin /> : null}
             </LexicalNestedComposer>

diff --git a/src/nodes/StickyNode.tsx b/src/nodes/StickyNode.tsx
@@ -23,6 +23,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import {
   $getNodeByKey,
   $setSelection,
@@ -268,6 +269,7 @@ function StickyComponent({
                 What's up?
               </Placeholder>
             }
+            ErrorBoundary={LexicalErrorBoundary}
           />
         </LexicalNestedComposer>
       </div>

diff --git a/src/plugins/CommentPlugin.tsx b/src/plugins/CommentPlugin.tsx
@@ -39,6 +39,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import { createDOMRange, createRectsFromDOMRange } from '@lexical/selection';
 import { $isRootTextContentEmpty, $rootTextContent } from '@lexical/text';
 import { mergeRegister, registerNestedElementResolver } from '@lexical/utils';
@@ -186,6 +187,7 @@ function PlainTextEditor({
         <PlainTextPlugin
           contentEditable={<ContentEditable className={className} />}
           placeholder={<Placeholder>{placeholder}</Placeholder>}
+          ErrorBoundary={LexicalErrorBoundary}
         />
         <OnChangePlugin onChange={onChange} />
         <HistoryPlugin />
@@ -217,15 +219,15 @@ function CommentInputBox({
   editor,
   cancelAddComment,
   submitAddComment,
-  t
+  t,
 }: {
   cancelAddComment: () => void;
   editor: LexicalEditor;
   submitAddComment: (
     commentOrThread: Comment | Thread,
     isInlineComment: boolean
   ) => void;
-  t: TFunction
+  t: TFunction;
 }) {
   const [content, setContent] = useState('');
   const [canSubmit, setCanSubmit] = useState(false);
@@ -431,11 +433,13 @@ function ShowDeleteCommentOrThreadDialog({
   ) => void;
   onClose: () => void;
   thread?: Thread;
-  t: TFunction
+  t: TFunction;
 }): JSX.Element {
   return (
     <>
-      {`${t('toolbar:commentPlugin.Delete_Comment_Description')} ${commentOrThread.type}?`}
+      {`${t('toolbar:commentPlugin.Delete_Comment_Description')} ${
+        commentOrThread.type
+      }?`}
       <div className="Modal__content">
         <Button
           onClick={() => {
@@ -462,7 +466,7 @@ function CommentsPanelListComment({
   deleteComment,
   thread,
   rtf,
-  t
+  t,
 }: {
   comment: Comment;
   deleteComment: (
@@ -509,7 +513,8 @@ function CommentsPanelListComment({
                     onClose={onClose}
                     t={t}
                   />
-                ));
+                )
+              );
             }}
             className="CommentPlugin_CommentsPanel_List_DeleteButton"
           >
@@ -542,9 +547,9 @@ function CommentsPanelList({
   submitAddComment: (
     commentOrThread: Comment | Thread,
     isInlineComment: boolean,
-    thread?: Thread,
+    thread?: Thread
   ) => void;
-  t: TFunction
+  t: TFunction;
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
   const [counter, setCounter] = useState(0);
@@ -610,8 +615,9 @@ function CommentsPanelList({
             <li
               key={id}
               onClick={handleClickThread}
-              className={`CommentPlugin_CommentsPanel_List_Thread ${markNodeMap.has(id) ? 'interactive' : ''
-                } ${activeIDs.indexOf(id) === -1 ? '' : 'active'}`}
+              className={`CommentPlugin_CommentsPanel_List_Thread ${
+                markNodeMap.has(id) ? 'interactive' : ''
+              } ${activeIDs.indexOf(id) === -1 ? '' : 'active'}`}
             >
               <div className="CommentPlugin_CommentsPanel_List_Thread_QuoteBox">
                 <blockquote className="CommentPlugin_CommentsPanel_List_Thread_Quote">
@@ -630,7 +636,8 @@ function CommentsPanelList({
                           onClose={onClose}
                           t={t}
                         />
-                      ));
+                      )
+                    );
                   }}
                   className="CommentPlugin_CommentsPanel_List_DeleteButton"
                 >
@@ -694,7 +701,7 @@ function CommentsPanel({
     isInlineComment: boolean,
     thread?: Thread
   ) => void;
-  t: TFunction
+  t: TFunction;
 }): JSX.Element {
   const listRef = useRef<HTMLUListElement>(null);
   const isEmpty = comments.length === 0;
@@ -998,10 +1005,15 @@ export default function CommentPlugin({
         )}
       {createPortal(
         <Button
-          className={`CommentPlugin_ShowCommentsButton ${showComments ? 'active' : ''
-            }`}
+          className={`CommentPlugin_ShowCommentsButton ${
+            showComments ? 'active' : ''
+          }`}
           onClick={() => setShowComments(!showComments)}
-          title={showComments ? t('toolbar:commentPlugin.Hide_Comments') : t('toolbar:commentPlugin.Show_Comments')}
+          title={
+            showComments
+              ? t('toolbar:commentPlugin.Hide_Comments')
+              : t('toolbar:commentPlugin.Show_Comments')
+          }
         >
           <i className="comments" />
         </Button>,