How to use custom components

[ewanwalk]

Hi,

In the documentation I see:

import { setCustomComponents } from 'markstream-vue'

setCustomComponents('docs', {
  CALLOUT: () => import('./components/Callout.vue'),
})

// Markdown: [[CALLOUT:warning title="Heads up" body="Details here"]]

However if I try to put a string such as [[my_component: name="test"]] and set the custom component:

setCustomComponents(props.message.id, {
  my_component: MyComponent,
})

I only get the string [[my_component: name="test"]] rendered. Is there another way to do this?

[Simon-He95]

The data structure [[CALLOUT:warning title="Heads up" body="Details here"]] cannot be specially processed by Markdown; it's just a regular text type. You need to use a special type, such as converting it to ```CALLOUT {type:warning,title:'',...}```. Then you can use

setCustomComponent({ 
code_block: props => { 
if(props.node.language ​​=== 'callout'){ 
  return h(customCALLOutComponent,props)
} 

return h(CodeBlockNode,props)
} })

Alternatively, you can use this method:

<callout type="warning" ...>

Then add custom-html-tags and configure:

callout: customCalloutComponent

})

<MarkdownRender :custom-html-tags="['callout']">

[ewanwalk]

Hmm, it seems like if I use html tags, rendering within a table breaks after the first custom component (which does render)

| Item| Value |
|--------|-------|
| A | <my_component label="Name"></my_component> |
| B | <my_component label="Name 2"></my_component> |
| C | domain.com |

[Simon-He95]

Hmm, it seems like if I use html tags, rendering within a table breaks after the first custom component (which does render)嗯，看来如果我在使用 HTML 标签时，在表格内的渲染会在第一个自定义组件（该组件确实会渲染）之后中断

| Item| Value |
|--------|-------|
| A | <my_component label="Name"></my_component> |
| B | <my_component label="Name 2"></my_component> |
| C | domain.com |

Your custom component is in a table, which might not be covered in this scenario. Could you provide a mini-repo for it to use, so I can check if the current parsing is adequate?

[Simon-He95]

@ewanwalk This issue should have been fixed in the latest version; you can try it.