fix(mdxish): properly parse embed magic blocks

__tests__/lib/mdxish/magic-blocks.test.ts

@@ -68,8 +68,7 @@ ${JSON.stringify(
     });
 
     it('should convert html content inside table cells as nodes in the ast', () => {
-      const md = `
-[block:parameters]
+      const md = `[block:parameters]
 ${JSON.stringify(
   {
     data: {
@@ -107,8 +106,7 @@ ${JSON.stringify(
     });
 
     it('should restore markdown content inside table cells', () => {
-      const md = `
-[block:parameters]
+      const md = `[block:parameters]
 ${JSON.stringify(
   {
     data: {
@@ -144,4 +142,33 @@ ${JSON.stringify(
       expect((cell1.children[0] as Element).tagName).toBe('em');
     });
   });
-});
+
+  describe('embed block', () => {
+    it('should restore embed block', () => {
+      const md = `[block:embed]
+{
+  "url": "https://www.youtube.com/watch?v=FVikHLyW500&list=RD3-9V38W00CM&index=4",
+  "provider": "youtube.com",
+  "href": "https://www.youtube.com/watch?v=FVikHLyW500&list=RD3-9V38W00CM&index=4",
+  "typeOfEmbed": "youtube"
+}
+[/block]`;
+
+      const ast = mdxish(md);
+
+      // Embed is wrapped in a paragraph, so we need to get the first child
+      const embedElement = (ast.children[0] as Element).children[0] as Element;
+
+      expect(embedElement.type).toBe('element');
+      expect(embedElement.tagName).toBe('embed');
+      expect(embedElement.properties.url).toBe(
+        'https://www.youtube.com/watch?v=FVikHLyW500&list=RD3-9V38W00CM&index=4',
+      );
+      expect(embedElement.properties.provider).toBe('youtube.com');
+      expect(embedElement.properties.href).toBe(
+        'https://www.youtube.com/watch?v=FVikHLyW500&list=RD3-9V38W00CM&index=4',
+      );
+      expect(embedElement.properties.typeOfEmbed).toBe('youtube');
+    });
+  });
+});

processor/plugin/mdxish-handlers.ts

@@ -49,7 +49,23 @@ const htmlBlockHandler: Handler = (_state, node) => {
   };
 };
 
+// Convert embed magic blocks to Embed components
+const embedHandler: Handler = (state, node) => {
+  // Assert to get the minimum properties we need
+  const { data } = node as { data?: { hName?: string; hProperties?: Properties } };
+
+  return {
+    type: 'element',
+    // To differentiate between regular embeds and magic block embeds,
+    // magic block embeds have a certain hName
+    tagName: data?.hName === NodeTypes.embedBlock ? 'Embed' : 'embed',
+    properties: data?.hProperties,
+    children: state.all(node),
+  };
+};
+
 export const mdxComponentHandlers: Handlers = {
+  embed: embedHandler,
   mdxFlowExpression: mdxExpressionHandler,
   mdxJsxFlowElement: mdxJsxElementHandler,
   mdxJsxTextElement: mdxJsxElementHandler,

processor/transform/mdxish/mdxish-magic-blocks.ts

@@ -332,9 +332,9 @@ function parseMagicBlock(raw: string, options: ParseMagicBlockOptions = {}): Mda
         wrapPinnedBlocks(
           {
             children: [
-              { children: [{ type: 'text', value: title || null }], title: embedJson.provider, type: 'link', url },
+              { children: [{ type: 'text', value: title || '' }], title: embedJson.provider, type: 'link', url },
             ],
-            data: { hName: 'rdme-embed', hProperties: { ...embedJson, href: url, html, title, url } },
+            data: { hName: 'embed-block', hProperties: { ...embedJson, href: url, html, title, url } },
             type: 'embed',
           },
           json,