How to merge paragraphs to a single code block and remove text formatting? Also: weird issue with textContent not being detected when just 1 paragraph.

[peppies]

Almosted figured it out. I have a "code highlight" button that just highlights bits of text in a paragraph and a "code block" button that turns the entire paragraph into a code block. When I select two separate paragraphs and run $setBlocksType(selection, () => $createParagraphNode());, it creates two separate code blocks.

What I'm trying to do:
My goal is to convert multiple (or a single) paragraphs into a single, merged code block. At the same time, if there is bold, italic, code highlighting, etc. on the text, I wish to remove all formatting and just leave text. It sounds simple enough, but I worked on it for about 12 hours (following examples here and on Google) and it seems to be far more difficult than it should be, and there is some weird behavior as well - stuff I don't understand.

Here is what I have so far:

document.querySelector('#codeblock-button').addEventListener('click', () => {
  editor.update(() => {
    var selection = lex.$getSelection();
    if (lex.$isRangeSelection(selection)) {
     
      // check if selection is a code block. If so, return everything back into regular paragraphs and exit the function.

      const checkCodeNode = lex.$getNearestNodeOfType(selection.getNodes()[0], lex.CodeNode);
      if (checkCodeNode) { 
        lex.$setBlocksType(selection, () => lex.$createParagraphNode());
        return; // Exit function
      }
     
      // If text is not already in code blocks, continue and begin converting paragraphs to code blocks.
      // Test all the nodes of the selection just to observe any kind of text content. 
      // WEIRD RESULTS: If I have a single paragraph with formatting, such as bold, code highlight, etc. Only the text after the formattings is registered. Any text before that doesn't even show up in the console.

      selection.getNodes().forEach(node => { console.log('1 '+node.getTextContent()); // Try to print ANY kind of text from every node selected. Concatted '1' here so I know this happened before anything was even converted to code block.
        if(node.getType() == 'text') {
          node.setFormat(0); console.log(node.getTextContent()); // Attempt to remove text formatting (bold, italic, code highlighting) before converting paragraph to code block.
        }
      });


      // convert paragraphs to code nodes.

      lex.$setBlocksType(selection, () => lex.$createCodeNode());
	  

      // get updated version of selection after code blocks. If I don't do this, I get Minified Lexical error #275; $comparePointCaretNext: a (key 8) and b (key 1) do not have a common ancestor.

      selection = lex.$getSelection();


      // Get the text content of anything inside code nodes and concat it into single variable. This iteration only works when 2 paragraphs are selected. If only 1 paragraph, the code block doesn't even get found - EVEN AFTER IT JUST CONVERTED TO CODE BLOCKS FROM ABOVE!

      var allText = '';
      var count = 0;
      selection.getNodes().forEach(node => { console.log('search nodes');
      console.log(node.getType());
      if(node.getType() == 'code') { console.log('get text'); // For some reason, does not detect any "code" node if only one paragraph is turned into code block.
        allText += node.getTextContent()+'\n';
          count++;
        }
      });
      

      // If count is 0, this means no code nodes were found (weird behavior when only 1 paragraph node exists).

      if(count == 0) {
        selection.getNodes().forEach(node => { console.log(node.getTextContent());
          if(node.getType() == 'text') {
            node.setFormat(0); console.log(node.getTextContent());
           }
        });
      }
      else { // If multiple code blocks found, clear only the first code block node and insert any found text content - delete rest of code nodes.
        count = 0;
        selection.getNodes().forEach(node => {
          if(node.getType() == 'code') {
            if(count == 0) {
              node.clear(); 
              node.append(lex.$createTextNode(allText));
	      count++;
            }
            else {
              node.remove();
            }
          }
        });
      }
    }
  });
});

Everything seems to work as expected when two or more paragraphs are selected. They merge and all the text formatting is removed. However, I'm guessing I'm doing this in a non-standard way, so I'd like some advice on doing it a better way.

However, everything works weird when it's just one paragraph - particularly when I want to remove the text formatting. When I iterate through ALL nodes in the selection of the paragraph, it doesn't find all the text inside if any of it has formatting. Note in the console log, just the text after the formatting df and df is found on each line in the paragraph. Anything before that is cut off and not even registered!

Even when the entire paragraph block is converted to a code block, iterating through the selection nodes does not find any "code" node type (with the 1-paragraph problem). This is like right after it was just converted to a code node.

I'm pretty new to Lexical, so I'm probably doing something wrong. Is there a better way to do this, some kind of built in feature? I'm sure this has been done a million times before, but I'm pretty stuck right now.

[peppies]

Is there some kind of plugin or standard way to deal with the nodes when toggling Code Blocks? I'd like to remove and prevent all formatting from anything going into the code blocks, including links/autolinks.

I should add that I'm trying to build the editor in Vanilla JS, which is makes this a little trickier.