Add Panel to Display Props for DevTools Nodes

packages/lexical-devtools/src/panel/components/App/index.css

@@ -1,20 +1,26 @@
 .App {
+  display: grid;
+  grid-template-columns: auto 40em;
+  grid-template-areas:
+    'header header'
+    'tree-view inspected-element';
   text-align: center;
 }
 
 .App-header {
+  align-items: center;
   background-color: #282c34;
-  font-family: monospace;
+  color: white;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  font-family: monospace;
   font-size: 2em;
-  color: white;
+  grid-area: header;
+  justify-content: center;
 }
 
 .loading-view {
-  background: #222;
+  background: var(--main-dark-gray);
   color: #fff;
   font-size: 3em;
 }

packages/lexical-devtools/src/panel/components/App/index.tsx

@@ -7,15 +7,17 @@
  */
 import './index.css';
 
-import {DevToolsTree} from 'packages/lexical-devtools/types';
+import {DevToolsTree, NodeProperties} from 'packages/lexical-devtools/types';
 import * as React from 'react';
 import {useCallback, useEffect, useRef, useState} from 'react';
 
+import InspectedElementView from '../InspectedElementView';
 import TreeView from '../TreeView';
 
 function App(): JSX.Element {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [nodeMap, setNodeMap] = useState<DevToolsTree>({});
+  const [selectedNode, setSelectedNode] = useState<NodeProperties | null>(null);
   const port = useRef<chrome.runtime.Port | null>(null);
 
   const updateEditorState = (message: {
@@ -88,12 +90,16 @@ function App(): JSX.Element {
           <p>Loading...</p>
         </div>
       ) : (
-        <TreeView
-          deHighlightDOMNode={deHighlightDOMNode}
-          highlightDOMNode={highlightDOMNode}
-          viewClassName="tree-view-output"
-          nodeMap={nodeMap}
-        />
+        <>
+          <TreeView
+            deHighlightDOMNode={deHighlightDOMNode}
+            handleNodeClick={setSelectedNode}
+            highlightDOMNode={highlightDOMNode}
+            viewClassName="tree-view-output"
+            nodeMap={nodeMap}
+          />
+          <InspectedElementView nodeProps={selectedNode} />
+        </>
       )}
     </div>
   );

packages/lexical-devtools/src/panel/components/Chevron/index.css

@@ -1,5 +1,5 @@
 .chevron-button {
-  background: #222;
+  background: var(--main-dark-gray);
   border: none;
   color: #fff;
   cursor: pointer;
@@ -9,6 +9,6 @@
 }
 
 .tree-node:hover > .chevron-button {
-  background: #77b6ff;
-  color: #222;
+  background: var(--main-blue);
+  color: var(--main-dark-gray);
 }

packages/lexical-devtools/src/panel/components/InspectedElementRow/index.css

@@ -0,0 +1,3 @@
+.inspected-element-property-name {
+  color: var(--main-blue);
+}

packages/lexical-devtools/src/panel/components/InspectedElementRow/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './index.css';
+
+import {NodeProperty} from 'packages/lexical-devtools/types';
+import * as React from 'react';
+
+function InspectedElementRow({
+  propName,
+  property,
+}: {
+  propName: string;
+  property: NodeProperty;
+}): JSX.Element {
+  let propDisplay = property;
+
+  if (Array.isArray(property)) {
+    let arrayChildren = '';
+    property.forEach((element, index) => {
+      arrayChildren += element;
+      if (index !== property.length - 1) arrayChildren += ', ';
+    });
+    propDisplay = arrayChildren;
+  }
+
+  return (
+    <div>
+      <span className="inspected-element-property-name">{propName}:</span>{' '}
+      <span className="inspected-element-property">{propDisplay}</span>
+    </div>
+  );
+}
+
+export default InspectedElementRow;

packages/lexical-devtools/src/panel/components/InspectedElementView/index.css

@@ -0,0 +1,11 @@
+.inspected-element-view {
+  align-self: start;
+  border: 1px solid #282c34;
+  color: #fff;
+  grid-area: inspected-element;
+  height: 100vh;
+  padding: 1em 2em;
+  position: sticky;
+  text-align: left;
+  top: 0em;
+}

packages/lexical-devtools/src/panel/components/InspectedElementView/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './index.css';
+
+import {NodeProperties} from 'packages/lexical-devtools/types';
+import * as React from 'react';
+
+import InspectedElementRow from '../InspectedElementRow';
+
+function InspectedElementView({
+  nodeProps,
+}: {
+  nodeProps: NodeProperties | null;
+}): JSX.Element {
+  return (
+    <div className="inspected-element-view">
+      {nodeProps
+        ? Object.entries(nodeProps).map(([key, value]) => (
+            <InspectedElementRow propName={key} property={value} />
+          ))
+        : ''}
+    </div>
+  );
+}
+
+export default InspectedElementView;

packages/lexical-devtools/src/panel/components/TreeNode/index.css

@@ -1,16 +1,16 @@
 .indentation {
-  background: #222;
+  background: var(--main-dark-gray);
   border: none;
-  color: #222;
+  color: var(--main-dark-gray);
   margin: 0;
   padding: 0;
   text-decoration: none;
   user-select: none;
 }
 
 .tree-node:hover {
-  background: #77b6ff;
-  color: #222;
+  background: var(--main-blue);
+  color: var(--main-dark-gray);
 }
 
 .tree-node-wrapper {

packages/lexical-devtools/src/panel/components/TreeNode/index.tsx

@@ -7,7 +7,7 @@
  */
 import './index.css';
 
-import {DevToolsNode} from 'packages/lexical-devtools/types';
+import {DevToolsNode, NodeProperties} from 'packages/lexical-devtools/types';
 import * as React from 'react';
 import {useState} from 'react';
 
@@ -19,24 +19,34 @@ function TreeNode({
   children,
   deHighlightDOMNode,
   depth,
+  handleNodeClick,
   highlightDOMNode,
   lexicalKey,
   monospaceWidth,
+  ...rest
 }: DevToolsNode): JSX.Element {
   const [isExpanded, setIsExpanded] = useState(true);
 
   const handleChevronClick = () => {
     setIsExpanded(!isExpanded);
   };
 
-  const handleMouseEnter: React.MouseEventHandler = (event) => {
+  const handleMouseEnter: React.MouseEventHandler = () => {
     highlightDOMNode(lexicalKey);
   };
 
-  const handleMouseLeave: React.MouseEventHandler = (event) => {
+  const handleMouseLeave: React.MouseEventHandler = () => {
     deHighlightDOMNode(lexicalKey);
   };
 
+  const handleClick: React.MouseEventHandler = () => {
+    const nodeProps: NodeProperties = {__type, ...rest};
+    if (__text) {
+      nodeProps.__text = __text;
+    }
+    handleNodeClick(nodeProps);
+  };
+
   const nodeString = ` (${lexicalKey}) ${__type} ${
     __text ? '"' + __text + '"' : ''
   }`;
@@ -57,9 +67,12 @@ function TreeNode({
     <div className="tree-node-wrapper" key={lexicalKey}>
       <div
         className="tree-node"
+        onClick={handleClick}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
-        style={{paddingLeft: leftIndent}}>
+        role="menuitem"
+        style={{paddingLeft: leftIndent}}
+        tabIndex={0}>
         <span style={{width: 'var(--monospace-character-width)'}}>&nbsp;</span>
         {children.length > 0 ? (
           <Chevron handleClick={handleChevronClick} isExpanded={isExpanded} />

packages/lexical-devtools/src/panel/components/TreeView/index.css

@@ -1,13 +1,13 @@
 .tree-view-output {
-  line-height: 1.1;
-  background: #222;
+  background: var(--main-dark-gray);
   color: #fff;
+  font-size: 1.2em;
+  font-weight: 400;
+  grid-area: tree-view;
+  line-height: 1.1;
   margin: 0;
   padding: 1em 0;
-  font-size: 1.2em;
   overflow: auto;
   text-align: left;
   -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  width: max-content;
 }

packages/lexical-devtools/src/panel/components/TreeView/index.tsx

@@ -7,18 +7,24 @@
  */
 import './index.css';
 
-import {DevToolsNode, DevToolsTree} from 'packages/lexical-devtools/types';
+import {
+  DevToolsNode,
+  DevToolsTree,
+  NodeProperties,
+} from 'packages/lexical-devtools/types';
 import * as React from 'react';
 
 import TreeNode from '../TreeNode';
 
 function TreeView({
   deHighlightDOMNode,
+  handleNodeClick,
   highlightDOMNode,
   viewClassName,
   nodeMap,
 }: {
   deHighlightDOMNode: (lexicalKey: string) => void;
+  handleNodeClick: (props: NodeProperties) => void;
   highlightDOMNode: (lexicalKey: string) => void;
   viewClassName: string;
   nodeMap: DevToolsTree;
@@ -49,6 +55,7 @@ function TreeView({
       children,
       deHighlightDOMNode,
       depth,
+      handleNodeClick,
       highlightDOMNode,
       lexicalKey: node.__key,
       monospaceWidth,

packages/lexical-devtools/src/panel/components/main/index.css

@@ -1,11 +1,13 @@
 :root {
   --monospace-character-width: 1.2em;
+  --main-blue: #77b6ff;
+  --main-dark-gray: #222;
 }
 
 body {
   margin: 0;
   font-family: monospace;
-  background: #222;
+  background: var(--main-dark-gray);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

packages/lexical-devtools/types.ts

@@ -19,6 +19,7 @@ export interface DevToolsNode {
   children: Array<DevToolsNode>;
   deHighlightDOMNode: (lexicalKey: string) => void;
   depth: number;
+  handleNodeClick: (props: NodeProperties) => void;
   highlightDOMNode: (lexicalKey: string) => void;
   lexicalKey: string;
   monospaceWidth: string;
@@ -31,6 +32,10 @@ export interface LexicalHTMLElement extends HTMLElement {
   __lexicalEditor: LexicalEditor;
 }
 
+export type NodeProperties = Record<string, NodeProperty>;
+
+export type NodeProperty = string | number | boolean | Array<string | number>;
+
 export type CloneInto = (
   arg: {lexicalKey: string},
   arg2: Window,