How can I toggle formatting and styling irrespective of what the particular node type or format type is?

[jsoneaday]

Please note I'm not referring to historical undo. I mean selecting some text putting a styling on it; continuing to work; and then some time later deciding to undo that prior format/style on the text.

Right now I'm able to set $createHeadingNode to make something a heading, is there an equivalent reverser or perhaps a $createPlainText or something like it? Here's some code where I attempt this but $isHeadingNode always returns false even after using $createHeadingNode to create the header.

export function Header1Plugin() {
  const [editor] = useLexicalComposerContext();

  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    editor.update(() => {
      const selection = $getSelection();
      if (selection && $isRangeSelection(selection)) {
        const isHeading = $isHeadingNode(selection as unknown as LexicalNode);
        console.log("is heading", isHeading);
        if (!isHeading) {
          $setBlocksType(selection, () => $createHeadingNode("h1"));
          console.log(
            "set header. is heading",
            $isHeadingNode(selection as unknown as LexicalNode)
          );
        } else {
          const txtNode = $createTextNode(selection.getTextContent());
          const elNode = new ElementNode();
          elNode.append(txtNode);
          $setBlocksType(selection, () => elNode);
          console.log("revert header");
        }
      }
    });
  };

  return (
    <button className="secondary-btn" onClick={onClick}>
      Header 1
    </button>
  );
}

[jsoneaday]

So I've updated the code a bit to view logs. In the headingNode log I can see that indeed it is of type HeadingNode. However when I immediately hit the same button again with the same text selected I get back that it is a TextNode. I'm not understanding why?

export function Header1Plugin() {
  const [editor] = useLexicalComposerContext();

  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    editor.update(() => {
      const selection = $getSelection();
      if (selection && $isRangeSelection(selection)) {
        const nodes = selection.getNodes();
        console.log("nodes", nodes);
        if (
          !nodes.find((node) => {
            console.log("finding node", node);
            $isHeadingNode(node);
          })
        ) {
          const headingNode = $createHeadingNode("h1");

          $setBlocksType(selection, () => headingNode);
          console.log("set header", headingNode);
        } else {
          const txtNode = $createTextNode(selection.getTextContent());
          const elNode = new ElementNode();
          elNode.append(txtNode);
          $setBlocksType(selection, () => elNode);
          console.log("revert header");
        }
      }
    });
  };

  return (
    <button className="secondary-btn" onClick={onClick}>
      Header 1
    </button>
  );
}

[section14]

Any progress on this post? I'm attempting the same functionality, but $isHeadingNode always returns false. Even when it's already formatted as H1, H2, etc.

[yismailuofa]

This worked for me.

import { $getNearestNodeOfType } from "@lexical/utils";

editor.update(() => {
  const selection = $getSelection();

  if ($isRangeSelection(selection)) {
    // This crawls up the nodes ancestor tree to find the HeadingNode.
    const isHeading = $getNearestNodeOfType(
      selection.getNodes()[0],
      HeadingNode
    );

    if (isHeading) {
      $setBlocksType(selection, () => $createParagraphNode());
    } else {
      $setBlocksType(selection, () => $createHeadingNode());
    }
  }
});