fix(mdxish): properly parse embed magic blocks

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

@@ -69,22 +69,22 @@ ${JSON.stringify(
 
     it('should convert html content inside table cells as nodes in the ast', () => {
       const md = `
-[block:parameters]
-${JSON.stringify(
-  {
-    data: {
-      'h-0': 'Header 0',
-      'h-1': 'Header 1',
-      '0-0': '<h1>this should be a h1 element node</h1>',
-      '0-1': '<strong>this should be a strong element node</strong>',
+  [block:parameters]
+  ${JSON.stringify(
+    {
+      data: {
+        'h-0': 'Header 0',
+        'h-1': 'Header 1',
+        '0-0': '<h1>this should be a h1 element node</h1>',
+        '0-1': '<strong>this should be a strong element node</strong>',
+      },
+      cols: 2,
+      rows: 1,
     },
-    cols: 2,
-    rows: 1,
-  },
-  null,
-  2,
-)}
-[/block]`;
+    null,
+    2,
+  )}
+  [/block]`;
 
       const ast = mdxish(md);
       // Some extra children are added to the AST by the mdxish wrapper
@@ -108,22 +108,22 @@ ${JSON.stringify(
 
     it('should restore markdown content inside table cells', () => {
       const md = `
-[block:parameters]
-${JSON.stringify(
-  {
-    data: {
-      'h-0': 'Header 0',
-      'h-1': 'Header 1',
-      '0-0': '**Bold**',
-      '0-1': '*Italic*',
+  [block:parameters]
+  ${JSON.stringify(
+    {
+      data: {
+        'h-0': 'Header 0',
+        'h-1': 'Header 1',
+        '0-0': '**Bold**',
+        '0-1': '*Italic*',
+      },
+      cols: 2,
+      rows: 1,
     },
-    cols: 2,
-    rows: 1,
-  },
-  null,
-  2,
-)}
-[/block]`;
+    null,
+    2,
+  )}
+  [/block]`;
 
       const ast = mdxish(md);
       // Some extra children are added to the AST by the mdxish wrapper
@@ -144,4 +144,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,20 @@ const htmlBlockHandler: Handler = (_state, node) => {
   };
 };
 
+// Convert embed magic blocks to Embed components
+const embedHandler: Handler = (state, node) => {
+  const { data } = node as { data?: { hName?: string; hProperties?: Properties } };
+
+  return {
+    type: 'element',
+    tagName: data?.hName === NodeTypes.embedBlock ? 'Embed' : 'embed',
+    properties: (data?.hProperties || {}) as Properties,
+    children: state.all(node),
+  };
+};
+
 export const mdxComponentHandlers: Handlers = {
+  embed: embedHandler,
   mdxFlowExpression: mdxExpressionHandler,
   mdxJsxFlowElement: mdxJsxElementHandler,
   mdxJsxTextElement: mdxJsxElementHandler,

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

@@ -332,7 +332,7 @@ 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 } },
             type: 'embed',