Add text fallbacks to YouTubeNode and TweetNode on conversion to Code…

…Block (facebook#2650) * Add getTextContent to decorator nodes * Add text content fallbacks
dosatross · Jul 21, 2022 · 5bce160 · 5bce160
1 parent c85d94d
commit 5bce160
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/packages/lexical-playground/src/nodes/YouTubeNode.tsx b/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 = {

diff --git a/packages/lexical-playground/src/plugins/ToolbarPlugin.tsx b/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]);