feat: show empty paragraph formatting in dev tool treeview

umaranis · May 7, 2024 · 3dd164f · 3dd164f
1 parent 53f8ebd
commit 3dd164f
Showing 1 changed file with 31 additions and 0 deletions.
diff --git 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)