From ca356ad8bc9498e0523c125e7b304d769c279cf3 Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Mon, 25 Jul 2022 11:13:31 -0700 Subject: [PATCH 1/8] add onHover styles --- .../src/panel/components/Chevron/index.css | 5 +++ .../src/panel/components/TreeNode/index.css | 12 ++++--- .../src/panel/components/TreeNode/index.tsx | 34 ++++++++++++++----- .../src/panel/components/TreeView/index.css | 2 +- 4 files changed, 39 insertions(+), 14 deletions(-) diff --git a/packages/lexical-devtools/src/panel/components/Chevron/index.css b/packages/lexical-devtools/src/panel/components/Chevron/index.css index 472292495aa..31585298971 100644 --- a/packages/lexical-devtools/src/panel/components/Chevron/index.css +++ b/packages/lexical-devtools/src/panel/components/Chevron/index.css @@ -7,3 +7,8 @@ padding: 0; text-decoration: none; } + +.hover > .chevron-button { + background: #77b6ff; + color: #222; +} diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.css b/packages/lexical-devtools/src/panel/components/TreeNode/index.css index 68aaf412f7a..8ece681ed98 100644 --- a/packages/lexical-devtools/src/panel/components/TreeNode/index.css +++ b/packages/lexical-devtools/src/panel/components/TreeNode/index.css @@ -1,3 +1,8 @@ +.hover { + background: #77b6ff; + color: #222; +} + .indentation { background: #222; border: none; @@ -8,11 +13,8 @@ user-select: none; } -.tree-node { - padding-left: 1em; - width: 100%; -} - .tree-node-wrapper { + cursor: pointer; width: 100%; + white-space: nowrap; } diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx index fc7cc08803a..cee8d7265cf 100644 --- a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx +++ b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx @@ -21,11 +21,20 @@ function TreeNode({ lexicalKey, }: DevToolsNode): JSX.Element { const [isExpanded, setIsExpanded] = useState(true); + const [isHovered, setIsHovered] = useState(false); const handleChevronClick = () => { setIsExpanded(!isExpanded); }; + const handleMouseEnter: React.MouseEventHandler = (event) => { + setIsHovered(true); + }; + + const handleMouseLeave: React.MouseEventHandler = (event) => { + setIsHovered(false); + }; + const nodeString = ` (${lexicalKey}) ${__type} ${ __text ? '"' + __text + '"' : '' }`; @@ -40,15 +49,24 @@ function TreeNode({ '' ); + const hoverClassName = isHovered ? ' hover' : ''; + const treeNodeClassName = 'tree-node' + hoverClassName; + const leftIndent = depth * 1.2 + 'em'; + return ( -
- {children.length > 0 ? ( - - ) : ( - - )} - {nodeString} - {
} +
+
+ {children.length > 0 ? ( + + ) : ( +   // + )} + {nodeString} +
{isExpanded ? childNodes : ''}
); diff --git a/packages/lexical-devtools/src/panel/components/TreeView/index.css b/packages/lexical-devtools/src/panel/components/TreeView/index.css index d961176b396..627f7d4d049 100644 --- a/packages/lexical-devtools/src/panel/components/TreeView/index.css +++ b/packages/lexical-devtools/src/panel/components/TreeView/index.css @@ -3,7 +3,7 @@ background: #222; color: #fff; margin: 0; - padding: 1em; + padding: 1em 0; font-size: 1.2em; overflow: auto; text-align: left; From cc40d2586ba8111a84dbf3726399aa3ad95d71cf Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Tue, 26 Jul 2022 12:37:45 -0700 Subject: [PATCH 2/8] send highlight/dehighlight message to devtools --- .../lexical-devtools/src/devtools/index.ts | 20 +++++++++++ .../src/panel/components/App/index.tsx | 34 +++++++++++++++++-- .../src/panel/components/TreeNode/index.tsx | 4 +++ .../src/panel/components/TreeView/index.tsx | 6 ++++ packages/lexical-devtools/types.ts | 2 ++ 5 files changed, 64 insertions(+), 2 deletions(-) diff --git a/packages/lexical-devtools/src/devtools/index.ts b/packages/lexical-devtools/src/devtools/index.ts index 36182e253ae..43029297e93 100644 --- a/packages/lexical-devtools/src/devtools/index.ts +++ b/packages/lexical-devtools/src/devtools/index.ts @@ -16,6 +16,26 @@ chrome.devtools.panels.create( }, ); +// const port = chrome.runtime.connect(); + +// port.postMessage({ +// name: 'init', +// tabId: chrome.devtools.inspectedWindow.tabId, +// type: 'FROM_DEVTOOLS', +// }); + +chrome.runtime.onConnect.addListener((port) => { + port.onMessage.addListener((message) => { + if (message.name === 'highlight') { + // console.log(`highlight: ${message.lexicalKey}`); + } + + if (message.name === 'dehighlight') { + // console.log(`dehighlight: ${message.lexicalKey}`); + } + }); +}); + function handleShown() { // Use devtools.inspectedWindow.eval() to get editorState updates. For more info on security concerns: // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts diff --git a/packages/lexical-devtools/src/panel/components/App/index.tsx b/packages/lexical-devtools/src/panel/components/App/index.tsx index d948c6fc3b5..dc2e0b5d345 100644 --- a/packages/lexical-devtools/src/panel/components/App/index.tsx +++ b/packages/lexical-devtools/src/panel/components/App/index.tsx @@ -9,7 +9,7 @@ import './index.css'; import {DevToolsTree} from 'packages/lexical-devtools/types'; import * as React from 'react'; -import {useEffect, useRef, useState} from 'react'; +import {useCallback, useEffect, useRef, useState} from 'react'; import TreeView from '../TreeView'; @@ -26,6 +26,31 @@ function App(): JSX.Element { setNodeMap(newNodeMap); }; + // highlight & dehighlight the corresponding DOM nodes onHover of DevTools nodes + const highlightDOMNode = useCallback( + (lexicalKey: string) => { + port.current?.postMessage({ + lexicalKey, + name: 'highlight', + tabId: window.chrome.devtools.inspectedWindow.tabId, + type: 'FROM_APP', + }); + }, + [port], + ); + + const deHighlightDOMNode = useCallback( + (lexicalKey: string) => { + port.current?.postMessage({ + lexicalKey, + name: 'dehighlight', + tabId: window.chrome.devtools.inspectedWindow.tabId, + type: 'FROM_APP', + }); + }, + [port], + ); + useEffect(() => { // create and initialize the messaging port to receive editorState updates port.current = window.chrome.runtime.connect(); @@ -64,7 +89,12 @@ function App(): JSX.Element {

Loading...

) : ( - + )} ); diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx index cee8d7265cf..b960ae83880 100644 --- a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx +++ b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx @@ -17,7 +17,9 @@ function TreeNode({ __text, __type, children, + deHighlightDOMNode, depth, + highlightDOMNode, lexicalKey, }: DevToolsNode): JSX.Element { const [isExpanded, setIsExpanded] = useState(true); @@ -29,10 +31,12 @@ function TreeNode({ const handleMouseEnter: React.MouseEventHandler = (event) => { setIsHovered(true); + highlightDOMNode(lexicalKey); }; const handleMouseLeave: React.MouseEventHandler = (event) => { setIsHovered(false); + deHighlightDOMNode(lexicalKey); }; const nodeString = ` (${lexicalKey}) ${__type} ${ diff --git a/packages/lexical-devtools/src/panel/components/TreeView/index.tsx b/packages/lexical-devtools/src/panel/components/TreeView/index.tsx index 1baa73ea4ec..78617bc9a9c 100644 --- a/packages/lexical-devtools/src/panel/components/TreeView/index.tsx +++ b/packages/lexical-devtools/src/panel/components/TreeView/index.tsx @@ -13,9 +13,13 @@ import * as React from 'react'; import TreeNode from '../TreeNode'; function TreeView({ + deHighlightDOMNode, + highlightDOMNode, viewClassName, nodeMap, }: { + deHighlightDOMNode: (lexicalKey: string) => void; + highlightDOMNode: (lexicalKey: string) => void; viewClassName: string; nodeMap: DevToolsTree; }): JSX.Element { @@ -38,7 +42,9 @@ function TreeView({ ...node, __type: node.__type, children, + deHighlightDOMNode, depth, + highlightDOMNode, lexicalKey: node.__key, }; }; diff --git a/packages/lexical-devtools/types.ts b/packages/lexical-devtools/types.ts index bab39e15ff5..5260b8a40b4 100644 --- a/packages/lexical-devtools/types.ts +++ b/packages/lexical-devtools/types.ts @@ -15,6 +15,8 @@ export interface DevToolsNode { __text?: string; __type: string; children: Array; + deHighlightDOMNode: (lexicalKey: string) => void; depth: number; + highlightDOMNode: (lexicalKey: string) => void; lexicalKey: string; } From 8c7f84caaa51d84d8161405f172785f206739c45 Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Thu, 28 Jul 2022 18:10:31 -0700 Subject: [PATCH 3/8] highlight DOM nodes onHover of devtools nodes --- .../lexical-devtools/src/devtools/index.ts | 136 ++++++++++++------ .../src/panel/components/App/index.tsx | 1 - 2 files changed, 94 insertions(+), 43 deletions(-) diff --git a/packages/lexical-devtools/src/devtools/index.ts b/packages/lexical-devtools/src/devtools/index.ts index 43029297e93..4fdb42a4a86 100644 --- a/packages/lexical-devtools/src/devtools/index.ts +++ b/packages/lexical-devtools/src/devtools/index.ts @@ -16,66 +16,118 @@ chrome.devtools.panels.create( }, ); -// const port = chrome.runtime.connect(); - -// port.postMessage({ -// name: 'init', -// tabId: chrome.devtools.inspectedWindow.tabId, -// type: 'FROM_DEVTOOLS', -// }); - chrome.runtime.onConnect.addListener((port) => { port.onMessage.addListener((message) => { if (message.name === 'highlight') { - // console.log(`highlight: ${message.lexicalKey}`); + chrome.devtools.inspectedWindow.eval(` + highlight('${message.lexicalKey}'); + `); } if (message.name === 'dehighlight') { - // console.log(`dehighlight: ${message.lexicalKey}`); + chrome.devtools.inspectedWindow.eval(` + dehighlight(); + `); } }); }); function handleShown() { - // Use devtools.inspectedWindow.eval() to get editorState updates. For more info on security concerns: + // Security concerns related to chrome.devtools.inspectedWindow.eval(): // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/eval - chrome.devtools.inspectedWindow - // Attach a registerUpdateListener within the window to subscribe to changes in editorState. - // After the initial registration, all editorState updates are done via browser.runtime.onConnect & window.postMessage - .eval( - ` - const editor = document.querySelectorAll('div[data-lexical-editor]')[0] - .__lexicalEditor; - - const initialEditorState = editor.getEditorState(); - - // custom JSON serialization - // existing editorState.toJSON() does not contain Lexical ._key property - const serializeEditorState = (editorState) => { - const nodeMap = Object.fromEntries(editorState._nodeMap); - return {nodeMap}; - }; - + + // query document for Lexical editor instance. + // TODO: add support multiple Lexical editors within the same page + // lexicalKey is attached to each DOM node like so: DOMNode[__lexicalKey_{editorKey}] + chrome.devtools.inspectedWindow.eval(` + const editorDOMNode = document.querySelectorAll( + 'div[data-lexical-editor]', + )[0]; + const editor = editorDOMNode.__lexicalEditor; + const editorKey = editorDOMNode.__lexicalEditor._key; + const lexicalKey = '__lexicalKey_' + editorKey; + `); + + // depth first search to find DOM node with lexicalKey + chrome.devtools.inspectedWindow.eval(` + const findDOMNode = (node, targetKey) => { + if (targetKey === 'root') { + return editorDOMNode; + } + + if (node[lexicalKey] && node[lexicalKey] === targetKey) { + return node; + } + + for (let i = 0; i < node.childNodes.length; i++) { + const child = findDOMNode(node.childNodes[i], targetKey); + if (child) return child; + } + + return null; + }; + `); + + // functions to highlight/dehighlight DOM nodes onHover of DevTools nodes + chrome.devtools.inspectedWindow.eval(` + const highlight = (lexicalKey) => { + const node = findDOMNode(editorDOMNode, lexicalKey); + const {width, height, top, left} = node.getBoundingClientRect(); + highlightOverlay.style.width = width + 'px'; + highlightOverlay.style.height = height + 'px'; + highlightOverlay.style.top = top + window.scrollY + 'px'; + highlightOverlay.style.left = left + window.scrollX + 'px'; + highlightOverlay.style.display = 'block'; + }; + + const dehighlight = () => { + highlightOverlay.style.display = 'none'; + }; + `); + + // append highlight overlay
to document + chrome.devtools.inspectedWindow.eval(` + const highlightOverlay = document.createElement('div'); + highlightOverlay.style.position = 'absolute'; + highlightOverlay.style.background = 'rgba(119, 182, 255, 0.5)'; + highlightOverlay.style.border = '1px dashed #77b6ff'; + document.body.appendChild(highlightOverlay); + `); + + // send initial editorState to devtools app through window.postMessage. + // the existing editorState.toJSON() does not contain lexicalKey + // therefore, we have a custom serializeEditorState helper + chrome.devtools.inspectedWindow.eval(` + const initialEditorState = editor.getEditorState(); + + const serializeEditorState = (editorState) => { + const nodeMap = Object.fromEntries(editorState._nodeMap); + return {nodeMap}; + }; + + window.postMessage( + { + editorState: serializeEditorState(initialEditorState), + name: 'editor-update', + type: 'FROM_PAGE', + }, + '*', + ); + `); + + // Attach a registerUpdateListener within the window to subscribe to changes in editorState. + // After the initial registration, all editorState updates are done via browser.runtime.onConnect & window.postMessage + chrome.devtools.inspectedWindow.eval(` + editor.registerUpdateListener(({editorState}) => { window.postMessage( { - editorState: serializeEditorState(initialEditorState), + editorState: serializeEditorState(editorState), name: 'editor-update', type: 'FROM_PAGE', }, '*', ); - - editor.registerUpdateListener(({editorState}) => { - window.postMessage( - { - editorState: serializeEditorState(editorState), - name: 'editor-update', - type: 'FROM_PAGE', - }, - '*', - ); - }); - `, - ); // to do: add error handling eg. .then(handleError) + }); + `); } diff --git a/packages/lexical-devtools/src/panel/components/App/index.tsx b/packages/lexical-devtools/src/panel/components/App/index.tsx index dc2e0b5d345..81ae959f560 100644 --- a/packages/lexical-devtools/src/panel/components/App/index.tsx +++ b/packages/lexical-devtools/src/panel/components/App/index.tsx @@ -42,7 +42,6 @@ function App(): JSX.Element { const deHighlightDOMNode = useCallback( (lexicalKey: string) => { port.current?.postMessage({ - lexicalKey, name: 'dehighlight', tabId: window.chrome.devtools.inspectedWindow.tabId, type: 'FROM_APP', From ec0422d98822df66eb963b2aed5de20c5a47eff8 Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Thu, 28 Jul 2022 18:11:04 -0700 Subject: [PATCH 4/8] onHover styling --- .../lexical-devtools/src/panel/components/TreeNode/index.css | 4 ++++ .../lexical-devtools/src/panel/components/TreeView/index.css | 1 + 2 files changed, 5 insertions(+) diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.css b/packages/lexical-devtools/src/panel/components/TreeNode/index.css index 8ece681ed98..4fd98726277 100644 --- a/packages/lexical-devtools/src/panel/components/TreeNode/index.css +++ b/packages/lexical-devtools/src/panel/components/TreeNode/index.css @@ -18,3 +18,7 @@ width: 100%; white-space: nowrap; } + +.tree-node-wrapper:first-child { + width: 100vw; /* if root TreeNode is collapsed, width must take up viewport for maximum hover styling */ +} diff --git a/packages/lexical-devtools/src/panel/components/TreeView/index.css b/packages/lexical-devtools/src/panel/components/TreeView/index.css index 627f7d4d049..e1d70687698 100644 --- a/packages/lexical-devtools/src/panel/components/TreeView/index.css +++ b/packages/lexical-devtools/src/panel/components/TreeView/index.css @@ -10,4 +10,5 @@ -moz-osx-font-smoothing: grayscale; font-weight: 400; --indentation-size: 1em; + inline-size: max-content; } From 591f478ec6fcf2aea1c8839837ec6c45a2ce8c57 Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Thu, 28 Jul 2022 18:11:26 -0700 Subject: [PATCH 5/8] add additional indent before chevron --- .../lexical-devtools/src/panel/components/TreeNode/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx index b960ae83880..96a0617a751 100644 --- a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx +++ b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx @@ -64,10 +64,11 @@ function TreeNode({ onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{paddingLeft: leftIndent}}> +   {children.length > 0 ? ( ) : ( -   // +   )} {nodeString}
From d280ce0d8166a5339eb2a19e63f0f7e0dcadc126 Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Thu, 28 Jul 2022 20:10:19 -0700 Subject: [PATCH 6/8] more css tweaks --- .../lexical-devtools/src/panel/components/TreeNode/index.css | 4 ++-- .../lexical-devtools/src/panel/components/TreeView/index.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.css b/packages/lexical-devtools/src/panel/components/TreeNode/index.css index 4fd98726277..24955ff7876 100644 --- a/packages/lexical-devtools/src/panel/components/TreeNode/index.css +++ b/packages/lexical-devtools/src/panel/components/TreeNode/index.css @@ -15,10 +15,10 @@ .tree-node-wrapper { cursor: pointer; - width: 100%; white-space: nowrap; + width: 100%; } .tree-node-wrapper:first-child { - width: 100vw; /* if root TreeNode is collapsed, width must take up viewport for maximum hover styling */ + width: 100vw; } diff --git a/packages/lexical-devtools/src/panel/components/TreeView/index.css b/packages/lexical-devtools/src/panel/components/TreeView/index.css index e1d70687698..0c21b272ea0 100644 --- a/packages/lexical-devtools/src/panel/components/TreeView/index.css +++ b/packages/lexical-devtools/src/panel/components/TreeView/index.css @@ -10,5 +10,5 @@ -moz-osx-font-smoothing: grayscale; font-weight: 400; --indentation-size: 1em; - inline-size: max-content; + width: max-content; } From f87197f4a218a4bcb87ff543651b87a0143af1cc Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Tue, 2 Aug 2022 20:52:06 -0700 Subject: [PATCH 7/8] use :hover CSS selector --- .../src/panel/components/Chevron/index.css | 2 +- .../src/panel/components/TreeNode/index.css | 10 +++++----- .../src/panel/components/TreeNode/index.tsx | 7 +------ 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/lexical-devtools/src/panel/components/Chevron/index.css b/packages/lexical-devtools/src/panel/components/Chevron/index.css index 31585298971..11792339807 100644 --- a/packages/lexical-devtools/src/panel/components/Chevron/index.css +++ b/packages/lexical-devtools/src/panel/components/Chevron/index.css @@ -8,7 +8,7 @@ text-decoration: none; } -.hover > .chevron-button { +.tree-node:hover > .chevron-button { background: #77b6ff; color: #222; } diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.css b/packages/lexical-devtools/src/panel/components/TreeNode/index.css index 24955ff7876..831ed3d93a3 100644 --- a/packages/lexical-devtools/src/panel/components/TreeNode/index.css +++ b/packages/lexical-devtools/src/panel/components/TreeNode/index.css @@ -1,8 +1,3 @@ -.hover { - background: #77b6ff; - color: #222; -} - .indentation { background: #222; border: none; @@ -13,6 +8,11 @@ user-select: none; } +.tree-node:hover { + background: #77b6ff; + color: #222; +} + .tree-node-wrapper { cursor: pointer; white-space: nowrap; diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx index 96a0617a751..4d3eb34597b 100644 --- a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx +++ b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx @@ -23,19 +23,16 @@ function TreeNode({ lexicalKey, }: DevToolsNode): JSX.Element { const [isExpanded, setIsExpanded] = useState(true); - const [isHovered, setIsHovered] = useState(false); const handleChevronClick = () => { setIsExpanded(!isExpanded); }; const handleMouseEnter: React.MouseEventHandler = (event) => { - setIsHovered(true); highlightDOMNode(lexicalKey); }; const handleMouseLeave: React.MouseEventHandler = (event) => { - setIsHovered(false); deHighlightDOMNode(lexicalKey); }; @@ -53,14 +50,12 @@ function TreeNode({ '' ); - const hoverClassName = isHovered ? ' hover' : ''; - const treeNodeClassName = 'tree-node' + hoverClassName; const leftIndent = depth * 1.2 + 'em'; return (
From f29b06a01da2a070620adaf9339c24f88935cb9b Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Tue, 2 Aug 2022 21:41:56 -0700 Subject: [PATCH 8/8] use CSS variables for leftIndent --- .../src/panel/components/TreeNode/index.tsx | 9 ++++++--- .../src/panel/components/TreeView/index.css | 1 - .../src/panel/components/TreeView/index.tsx | 6 ++++++ .../lexical-devtools/src/panel/components/main/index.css | 4 ++++ packages/lexical-devtools/types.ts | 1 + 5 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx index 4d3eb34597b..961ab2899e0 100644 --- a/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx +++ b/packages/lexical-devtools/src/panel/components/TreeNode/index.tsx @@ -21,6 +21,7 @@ function TreeNode({ depth, highlightDOMNode, lexicalKey, + monospaceWidth, }: DevToolsNode): JSX.Element { const [isExpanded, setIsExpanded] = useState(true); @@ -50,7 +51,7 @@ function TreeNode({ '' ); - const leftIndent = depth * 1.2 + 'em'; + const leftIndent = depth * parseFloat(monospaceWidth) + 'em'; return (
@@ -59,11 +60,13 @@ function TreeNode({ onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{paddingLeft: leftIndent}}> -   +   {children.length > 0 ? ( ) : ( -   + +   + )} {nodeString}
diff --git a/packages/lexical-devtools/src/panel/components/TreeView/index.css b/packages/lexical-devtools/src/panel/components/TreeView/index.css index 0c21b272ea0..e8eb04a96c7 100644 --- a/packages/lexical-devtools/src/panel/components/TreeView/index.css +++ b/packages/lexical-devtools/src/panel/components/TreeView/index.css @@ -9,6 +9,5 @@ text-align: left; -moz-osx-font-smoothing: grayscale; font-weight: 400; - --indentation-size: 1em; width: max-content; } diff --git a/packages/lexical-devtools/src/panel/components/TreeView/index.tsx b/packages/lexical-devtools/src/panel/components/TreeView/index.tsx index 78617bc9a9c..9229f90b551 100644 --- a/packages/lexical-devtools/src/panel/components/TreeView/index.tsx +++ b/packages/lexical-devtools/src/panel/components/TreeView/index.tsx @@ -23,6 +23,11 @@ function TreeView({ viewClassName: string; nodeMap: DevToolsTree; }): JSX.Element { + // read CSS variable from the DOM in order to pass it to TreeNode + const monospaceWidth = getComputedStyle( + document.documentElement, + ).getPropertyValue('--monospace-character-width'); + // takes flat JSON structure, nests child comments inside parents const depthFirstSearch = ( map: DevToolsTree = nodeMap, @@ -46,6 +51,7 @@ function TreeView({ depth, highlightDOMNode, lexicalKey: node.__key, + monospaceWidth, }; }; diff --git a/packages/lexical-devtools/src/panel/components/main/index.css b/packages/lexical-devtools/src/panel/components/main/index.css index 75a1f0994f1..f27a0f62e1e 100644 --- a/packages/lexical-devtools/src/panel/components/main/index.css +++ b/packages/lexical-devtools/src/panel/components/main/index.css @@ -1,3 +1,7 @@ +:root { + --monospace-character-width: 1.2em; +} + body { margin: 0; font-family: monospace; diff --git a/packages/lexical-devtools/types.ts b/packages/lexical-devtools/types.ts index 5260b8a40b4..70766502e68 100644 --- a/packages/lexical-devtools/types.ts +++ b/packages/lexical-devtools/types.ts @@ -19,4 +19,5 @@ export interface DevToolsNode { depth: number; highlightDOMNode: (lexicalKey: string) => void; lexicalKey: string; + monospaceWidth: string; }