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',