meteorlxy / vue-showdown

:page_with_curl: Use showdown as a vue component
https://vue-showdown.js.org
MIT License
129 stars 23 forks source link

[Feature request] Handle template error when vueTemplate is active #52

Open NtchPlayer opened 11 months ago

NtchPlayer commented 11 months ago

Clear and concise description of the problem

When we use vueTemplate, if an incorrect syntaxe is provide to the compiler, the render disappear from the page and an error is throw in the console.

You can easily reproduce it here: https://vue-showdown.js.org/playground/. Just active vueTemplate and add <mycustomelement> into the input to throw the error.

Noticed that, the error is throwing only when the project is run in production mode. In dev mode, the render don't crash and warnings are display into the console.

Suggested solution

Add a try catch to the render function. If vueTemplate can't render the let showdown render it without vueTemplate option.

// vue-showdown.ts
return () => {
  try {
    return props.vueTemplate
      ? h({
          setup: () => props.vueTemplateData,
          template: `<${props.tag}>${outputHtml.value}</${props.tag}>`,
          components: props.vueTemplateComponents,
        })
      : h(props.tag, {
          innerHTML: outputHtml.value,
        });
  } catch (renderError) {
    // Handle the exception and return only showdown render without vueTemplate
    return h(props.tag, {
      innerHTML: outputHtml.value,
    });
  }
}

Alternative

No response

Additional context

No response

NtchPlayer commented 11 months ago

Hi ! I don't know if you have take time to see my PR to resolve this issue ? :)

NtchPlayer commented 10 months ago

I update my PR, to solve the problem ! It's work in production 👍

dword-design commented 3 months ago

Any updates on this?

NtchPlayer commented 3 months ago

Nop, I don't take time to try another fix sorry o/ If you want I publish a version of the package with the MR that a create to fix this problem. But I warn, it's not the best solution for performance. I use it for my personal project, but you can use it two if you want :)

https://www.npmjs.com/package/vue-showdown-ntchplayer

dword-design commented 3 months ago

Ok np I switched to @nuxtjs/mdc for now which also supports components in Markdown.