diff --git a/packages/svelte-lexical/src/lib/core/plugins/TreeView/TreeView.svelte b/packages/svelte-lexical/src/lib/core/plugins/TreeView/TreeView.svelte index 0b2f127..9ff3f87 100644 --- a/packages/svelte-lexical/src/lib/core/plugins/TreeView/TreeView.svelte +++ b/packages/svelte-lexical/src/lib/core/plugins/TreeView/TreeView.svelte @@ -6,6 +6,7 @@ LexicalCommand, LexicalEditor, LexicalNode, + ParagraphNode, RangeSelection, TextNode, } from 'lexical'; @@ -21,6 +22,7 @@ $isRangeSelection as isRangeSelection, $isTextNode as isTextNode, $isNodeSelection as isNodeSelection, + $isParagraphNode as isParagraphNode, } from 'lexical'; import { $isTableSelection as isTableSelection, @@ -323,6 +325,9 @@ .filter(Boolean) .join(' ') .trim(); + } else if (isParagraphNode(node)) { + const formatText = printTextFormatProperties(node); + return formatText !== '' ? `{ ${formatText} }` : ''; } else { return ''; } @@ -342,6 +347,17 @@ node.hasFormat('underline') && 'Underline', ]; + const FORMAT_PREDICATES_PARAGRAPH = [ + (node: ParagraphNode) => node.hasTextFormat('bold') && 'Bold', + (node: ParagraphNode) => node.hasTextFormat('code') && 'Code', + (node: ParagraphNode) => node.hasTextFormat('italic') && 'Italic', + (node: ParagraphNode) => + node.hasTextFormat('strikethrough') && 'Strikethrough', + (node: ParagraphNode) => node.hasTextFormat('subscript') && 'Subscript', + (node: ParagraphNode) => node.hasTextFormat('superscript') && 'Superscript', + (node: ParagraphNode) => node.hasTextFormat('underline') && 'Underline', + ]; + const DETAIL_PREDICATES = [ (node: TextNode) => node.isDirectionless() && 'Directionless', (node: TextNode) => node.isUnmergeable() && 'Unmergeable', @@ -398,6 +414,21 @@ return str; } + function printTextFormatProperties(nodeOrSelection: ParagraphNode) { + let str = FORMAT_PREDICATES_PARAGRAPH.map((predicate) => + predicate(nodeOrSelection), + ) + .filter(Boolean) + .join(', ') + .toLocaleLowerCase(); + + if (str !== '') { + str = 'format: ' + str; + } + + return str; + } + function printFormatProperties(nodeOrSelection: TextNode | RangeSelection) { let str = FORMAT_PREDICATES.map((predicate) => predicate(nodeOrSelection)) .filter(Boolean)