Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[lexical-react][lexical-dev-tools-core] Feature: Allow TreeView custom print output #6180

Merged
merged 3 commits into from
May 30, 2024
Merged

[lexical-react][lexical-dev-tools-core] Feature: Allow TreeView custom print output #6180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1257a93
feat(lexicaldevtools) Allow TreeView custom print output
irahopkinson May 27, 2024
9d1974c
- code review & rebase changes
irahopkinson May 28, 2024
1fb4dd6
- code review changes
irahopkinson May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 18 additions & 13 deletions packages/lexical-devtools-core/flow/LexicalDevtoolsCore.js.flow
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,31 @@
*/

import type {
LexicalEditor,
LexicalCommand
LexicalCommand,
LexicalEditor,
LexicalNode,
} from 'lexical';

export type LexicalCommandLog = $ReadOnlyArray<LexicalCommand<mixed> | {payload: mixed}>;
export type LexicalCommandLog = $ReadOnlyArray<
{index: number} | LexicalCommand<mixed> | {payload: mixed}
>;
export type CustomPrintNodeFn = (node: LexicalNode, obfuscateText?: boolean) => string;

declare export function generateContent(
editor: LexicalEditor,
commandsLog: $ReadOnlyArray<LexicalCommandLog>,
exportDOM: boolean,
obfuscateText?: boolean,
editor: LexicalEditor,
commandsLog: $ReadOnlyArray<LexicalCommandLog>,
exportDOM: boolean,
customPrintNode?: CustomPrintNodeFn,
obfuscateText?: boolean,
): string;

declare export function registerLexicalCommandLogger(
editor: LexicalEditor,
setLoggedCommands: (
v: (oldValue: LexicalCommandLog) => LexicalCommandLog,
) => void,
editor: LexicalEditor,
setLoggedCommands: (
v: (oldValue: LexicalCommandLog) => LexicalCommandLog,
) => void,
): () => void;

declare export function useLexicalCommandsLog(
editor: LexicalEditor,
): LexicalCommandLog;
editor: LexicalEditor,
): LexicalCommandLog;
28 changes: 22 additions & 6 deletions packages/lexical-devtools-core/src/generateContent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ import {

import {LexicalCommandLog} from './useLexicalCommandsLog';

export type CustomPrintNodeFn = (
node: LexicalNode,
obfuscateText?: boolean,
) => string;

const NON_SINGLE_WIDTH_CHARS_REPLACEMENT: Readonly<Record<string, string>> =
Object.freeze({
'\t': '\\t',
Expand Down Expand Up @@ -89,6 +94,7 @@ export function generateContent(
editor: LexicalEditor,
commandsLog: LexicalCommandLog,
exportDOM: boolean,
customPrintNode?: CustomPrintNodeFn,
obfuscateText: boolean = false,
): string {
const editorState = editor.getEditorState();
Expand All @@ -114,14 +120,12 @@ export function generateContent(
const nodeKeyDisplay = `(${nodeKey})`;
const typeDisplay = node.getType() || '';
const isSelected = node.isSelected();
const idsDisplay = $isMarkNode(node)
? ` id: [ ${node.getIDs().join(', ')} ] `
: '';

res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(
' ',
)} ${nodeKeyDisplay} ${typeDisplay} ${idsDisplay} ${printNode(
)} ${nodeKeyDisplay} ${typeDisplay} ${printNode(
node,
customPrintNode,
obfuscateText,
)}\n`;

Expand Down Expand Up @@ -246,8 +250,18 @@ function normalize(text: string, obfuscateText: boolean = false) {
return textToPrint;
}

// TODO Pass via props to allow customizability
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this comment may still be valid, perhaps we shouldnt delete it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR allows full customizability for the TreeView print output for any existing node or any custom node and it it does it by passing a function in through the props. Perhaps I'm missing something but what part of that comment still needs implementing?

function printNode(node: LexicalNode, obfuscateText: boolean = false) {
function printNode(
node: LexicalNode,
customPrintNode?: CustomPrintNodeFn,
obfuscateText: boolean = false,
) {
const customPrint: string | undefined = customPrintNode
? customPrintNode(node, obfuscateText)
: undefined;
if (customPrint !== undefined && customPrint.length > 0) {
return customPrint;
}

if ($isTextNode(node)) {
const text = node.getTextContent();
const title =
Expand All @@ -266,6 +280,8 @@ function printNode(node: LexicalNode, obfuscateText: boolean = false) {
.filter(Boolean)
.join(' ')
.trim();
} else if ($isMarkNode(node)) {
return `ids: [ ${node.getIDs().join(', ')} ]`;
} else if ($isParagraphNode(node)) {
const formatText = printTextFormatProperties(node);
return formatText !== '' ? `{ ${formatText} }` : '';
Expand Down
2 changes: 2 additions & 0 deletions packages/lexical-react/flow/LexicalTreeView.js.flow
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
* @flow strict
*/

import type {CustomPrintNodeFn} from '@lexical/devtools-core';
import type {LexicalEditor} from 'lexical';

declare export function TreeView(props: {
Expand All @@ -16,4 +17,5 @@ declare export function TreeView(props: {
timeTravelButtonClassName: string,
viewClassName: string,
editor: LexicalEditor,
customPrintNode?: CustomPrintNodeFn,
}): React$Node;
5 changes: 4 additions & 1 deletion packages/lexical-react/src/LexicalTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import type {EditorState, LexicalEditor} from 'lexical';

import {
CustomPrintNodeFn,
generateContent,
TreeView as TreeViewCore,
useLexicalCommandsLog,
Expand All @@ -25,6 +26,7 @@ export function TreeView({
viewClassName,
timeTravelPanelClassName,
editor,
customPrintNode,
}: {
editor: LexicalEditor;
treeTypeButtonClassName: string;
Expand All @@ -33,6 +35,7 @@ export function TreeView({
timeTravelPanelClassName: string;
timeTravelPanelSliderClassName: string;
viewClassName: string;
customPrintNode?: CustomPrintNodeFn;
}): JSX.Element {
const treeElementRef = React.createRef<HTMLPreElement>();
const [editorCurrentState, setEditorCurrentState] = useState<EditorState>(
Expand Down Expand Up @@ -87,7 +90,7 @@ export function TreeView({
editorState={editorCurrentState}
setEditorState={(state) => editor.setEditorState(state)}
generateContent={async function (exportDOM) {
return generateContent(editor, commandsLog, exportDOM);
return generateContent(editor, commandsLog, exportDOM, customPrintNode);
}}
ref={treeElementRef}
/>
Expand Down
Loading