feat(@lexical/devtools): Added TreeView rendering instead of a simple…

… textarea
facebook · Apr 8, 2024 · 7cbbc71 · 7cbbc71
1 parent f151bcc
commit 7cbbc71
Show file tree

Hide file tree

Showing 24 changed files with 668 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lexical-devtools-core/src/TreeView.tsx b/packages/lexical-devtools-core/src/TreeView.tsx
@@ -23,7 +23,7 @@ export const TreeView = forwardRef<
     timeTravelPanelClassName: string;
     timeTravelPanelSliderClassName: string;
     viewClassName: string;
-    generateContent: (exportDOM: boolean) => string;
+    generateContent: (exportDOM: boolean) => Promise<string>;
     setEditorState: (state: EditorState, options?: EditorSetOptions) => void;
     setEditorReadOnly: (isReadonly: boolean) => void;
   }
@@ -53,13 +53,25 @@ export const TreeView = forwardRef<
   const [isPlaying, setIsPlaying] = useState(false);
   const [isLimited, setIsLimited] = useState(false);
   const [showLimited, setShowLimited] = useState(false);
-  const lastEditorStateRef = useRef<null | EditorState>(editorState);
+  const lastEditorStateRef = useRef<null | EditorState>();
+  const lastGenerationID = useRef(0);
 
   const generateTree = useCallback(
     (exportDOM: boolean) => {
-      const treeText = generateContent(exportDOM);
-
-      setContent(treeText);
+      const myID = ++lastGenerationID.current;
+      generateContent(exportDOM)
+        .then((treeText) => {
+          if (myID === lastGenerationID.current) {
+            setContent(treeText);
+          }
+        })
+        .catch((err) => {
+          if (myID === lastGenerationID.current) {
+            setContent(
+              `Error rendering tree: ${err.message}\n\nStack:\n${err.stack}`,
+            );
+          }
+        });
     },
     [generateContent],
   );

diff --git a/packages/lexical-devtools-core/src/useLexicalCommandsLog.ts b/packages/lexical-devtools-core/src/useLexicalCommandsLog.ts
@@ -8,7 +8,7 @@
 
 import type {LexicalEditor} from 'lexical';
 
-import {COMMAND_PRIORITY_HIGH, LexicalCommand} from 'lexical';
+import {COMMAND_PRIORITY_CRITICAL, LexicalCommand} from 'lexical';
 import {useEffect, useMemo, useState} from 'react';
 
 export type LexicalCommandLog = ReadonlyArray<
@@ -32,7 +32,7 @@ export function registerLexicalCommandLogger(
             const newState = [...state];
             newState.push({
               payload,
-              type: command.type ? command.type : 'UNKNOWN',
+              type: command.type ?? 'UNKNOWN',
             });
 
             if (newState.length > 10) {
@@ -44,7 +44,7 @@ export function registerLexicalCommandLogger(
 
           return false;
         },
-        COMMAND_PRIORITY_HIGH,
+        COMMAND_PRIORITY_CRITICAL,
       ),
     );
   }

diff --git a/packages/lexical-devtools/package.json b/packages/lexical-devtools/package.json
@@ -27,7 +27,9 @@
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.3.3",
     "lexical": "0.14.2",
+    "@lexical/devtools-core": "0.14.2",
     "wxt": "^0.17.0",
-    "vite": "^5.2.2"
+    "vite": "^5.2.2",
+    "@rollup/plugin-babel": "^6.0.4"
   }
 }
diff --git a/packages/lexical-devtools/src/entrypoints/content/index.ts b/packages/lexical-devtools/src/entrypoints/content/index.ts
@@ -5,21 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import {allowWindowMessaging, sendMessage} from 'webext-bridge/content-script';
+import {allowWindowMessaging} from 'webext-bridge/content-script';
 
 import useExtensionStore from '../../store';
 import storeReadyPromise from '../../store-sync/content-script';
 import injectScript from './injectScript';
 
 export default defineContentScript({
-  main(ctx) {
+  main(_ctx) {
     allowWindowMessaging('lexical-extension');
 
-    sendMessage('getTabID', null, 'background')
-      .then((tabID) => {
-        return storeReadyPromise(useExtensionStore).then(() => {
-          injectScript('/injected.js');
-        });
+    storeReadyPromise(useExtensionStore)
+      .then(() => {
+        injectScript('/injected.js');
       })
       .catch(console.error);
   },

diff --git a/packages/lexical-devtools/src/entrypoints/devtools-panel/App.css b/packages/lexical-devtools/src/entrypoints/devtools-panel/App.css
@@ -0,0 +1,80 @@
+pre {
+  line-height: 1.1;
+  background: #222;
+  color: #fff;
+  margin: 0;
+  padding: 10px;
+  font-size: 12px;
+  overflow: auto;
+  max-height: 400px;
+}
+
+.tree-view-output {
+  display: block;
+  background: #222;
+  color: #fff;
+  padding: 0;
+  font-size: 12px;
+  margin: 1px auto 10px auto;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+}
+
+.debug-timetravel-panel {
+  overflow: hidden;
+  padding: 0 0 10px 0;
+  margin: auto;
+  display: flex;
+}
+
+.debug-timetravel-panel-slider {
+  padding: 0;
+  flex: 8;
+}
+
+.debug-timetravel-panel-button {
+  padding: 0;
+  border: 0;
+  background: none;
+  flex: 1;
+  color: #fff;
+  font-size: 12px;
+}
+
+.debug-timetravel-panel-button:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.debug-timetravel-button {
+  border: 0;
+  padding: 0;
+  font-size: 12px;
+  top: 10px;
+  right: 15px;
+  position: absolute;
+  background: none;
+  color: #fff;
+}
+
+.debug-timetravel-button:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.debug-treetype-button {
+  border: 0;
+  padding: 0;
+  font-size: 12px;
+  top: 10px;
+  right: 85px;
+  position: absolute;
+  background: none;
+  color: #fff;
+}
+
+.debug-treetype-button:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
diff --git a/packages/lexical-devtools/src/entrypoints/devtools-panel/App.tsx b/packages/lexical-devtools/src/entrypoints/devtools-panel/App.tsx
@@ -6,6 +6,9 @@
  *
  */
 
+import './App.css';
+
+import {TreeView} from '@lexical/devtools-core';
 import * as React from 'react';
 import {useState} from 'react';
 import {sendMessage} from 'webext-bridge/devtools';
@@ -30,7 +33,12 @@ function App({tabID}: Props) {
     <>
       <div>
         <a href="https://lexical.dev" target="_blank">
-          <img src={lexicalLogo} className="logo" alt="Lexical logo" />
+          <img
+            src={lexicalLogo}
+            className="logo"
+            width={150}
+            alt="Lexical logo"
+          />
         </a>
       </div>
       {errorMessage !== '' ? (
@@ -42,7 +50,7 @@ function App({tabID}: Props) {
         ) : (
           <span>
             Found <b>{lexicalCount}</b> editor{lexicalCount > 1 ? 's' : ''} on
-            the page
+            the page.
           </span>
         )}
         <p>
@@ -54,17 +62,41 @@ function App({tabID}: Props) {
         </p>
       </div>
       {Object.entries(states).map(([key, state]) => (
-        <p key={key}>
+        <div key={key}>
           <b>ID: {key}</b>
           <br />
-          <textarea
-            readOnly={true}
-            value={JSON.stringify(state)}
-            rows={5}
-            cols={150}
+          <TreeView
+            viewClassName="tree-view-output"
+            treeTypeButtonClassName="debug-treetype-button"
+            timeTravelPanelClassName="debug-timetravel-panel"
+            timeTravelButtonClassName="debug-timetravel-button"
+            timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
+            timeTravelPanelButtonClassName="debug-timetravel-panel-button"
+            setEditorReadOnly={(isReadonly) =>
+              sendMessage(
+                'setEditorReadOnly',
+                {isReadonly, key},
+                `window@${tabID}`,
+              ).catch((e) => setErrorMessage(e.stack))
+            }
+            editorState={state}
+            setEditorState={(editorState) =>
+              sendMessage(
+                'setEditorState',
+                {key, state: editorState},
+                `window@${tabID}`,
+              ).catch((e) => setErrorMessage(e.stack))
+            }
+            generateContent={(exportDOM) =>
+              sendMessage(
+                'generateTreeViewContent',
+                {exportDOM, key},
+                `window@${tabID}`,
+              )
+            }
           />
           <hr />
-        </p>
+        </div>
       ))}
     </>
   );