Add text fallbacks to YouTubeNode and TweetNode on conversion to CodeBlock (#2650)

* Add getTextContent to decorator nodes

* Add text content fallbacks

Author: thegreatercurve

packages/lexical-playground/src/nodes/YouTubeNode.tsx

@@ -100,6 +100,10 @@ export class YouTubeNode extends DecoratorBlockNode {
     return false;
   }
 
+  getId(): string {
+    return this.__id;
+  }
+
   decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element {
     const embedBlockTheme = config.theme.embedBlock || {};
     const className = {

packages/lexical-playground/src/plugins/ToolbarPlugin.tsx

@@ -56,6 +56,7 @@ import {
 } from '@lexical/utils';
 import {
   $createParagraphNode,
+  $createTextNode,
   $getNodeByKey,
   $getRoot,
   $getSelection,
@@ -85,6 +86,8 @@ import useModal from '../hooks/useModal';
 import catTypingGif from '../images/cat-typing.gif';
 import yellowFlowerImage from '../images/yellow-flower.jpg';
 import {$createStickyNode} from '../nodes/StickyNode';
+import {$isTweetNode} from '../nodes/TweetNode';
+import {$isYouTubeNode} from '../nodes/YouTubeNode';
 import Button from '../ui/Button';
 import ColorPicker from '../ui/ColorPicker';
 import DropDown, {DropDownItem} from '../ui/DropDown';
@@ -699,6 +702,23 @@ function BlockFormatDropDown({
           if (selection.isCollapsed()) {
             $wrapLeafNodesInElements(selection, () => $createCodeNode());
           } else {
+            selection.getNodes().forEach((node) => {
+              // Explicity set fallback text content for some decorators nodes.
+              if ($isTweetNode(node)) {
+                node.replace(
+                  $createTextNode(
+                    `https://twitter.com/i/web/status/${node.getId()}`,
+                  ),
+                );
+              } else if ($isYouTubeNode(node)) {
+                node.replace(
+                  $createTextNode(
+                    `https://www.youtube.com/watch?v=${node.getId()}`,
+                  ),
+                );
+              }
+            });
+
             const textContent = selection.getTextContent();
             const codeNode = $createCodeNode();
             selection.insertNodes([codeNode]);