diff --git a/__tests__/lib/mdxish/magic-blocks.test.ts b/__tests__/lib/mdxish/magic-blocks.test.ts index 30596908e..9ca6f9d0e 100644 --- a/__tests__/lib/mdxish/magic-blocks.test.ts +++ b/__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': '

this should be a h1 element node

', - '0-1': 'this should be a strong element node', + [block:parameters] + ${JSON.stringify( + { + data: { + 'h-0': 'Header 0', + 'h-1': 'Header 1', + '0-0': '

this should be a h1 element node

', + '0-1': 'this should be a strong element node', + }, + 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'); }); }); -}); \ No newline at end of file + + 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'); + }); + }); +}); diff --git a/processor/plugin/mdxish-handlers.ts b/processor/plugin/mdxish-handlers.ts index 3fff1c73c..841628ab8 100644 --- a/processor/plugin/mdxish-handlers.ts +++ b/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, diff --git a/processor/transform/mdxish/mdxish-magic-blocks.ts b/processor/transform/mdxish/mdxish-magic-blocks.ts index 4a28a4d6c..bef34c0af 100644 --- a/processor/transform/mdxish/mdxish-magic-blocks.ts +++ b/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',