quasarframework / quasar-ui-qmarkdown

A Quasar UI App Extension to display inline markdown
https://quasarframework.github.io/quasar-ui-qmarkdown/
MIT License
157 stars 29 forks source link

Specifying plugins with options #373

Closed jackm closed 2 years ago

jackm commented 2 years ago

What is the proper way to specify a plugin with options?

As an example, if I'd like to use the markdown-it-icons plugin but this plugin requires giving it a string as an option.

Passing the following plugin array to QMarkdown does not work:

plugins: [
  abbreviation,
  deflist,
  emoji,
  footnote,
  {icons, 'font-awesome'},
  insert,
  mark,
  subscript,
  superscript,
  taskLists
]
hawkeye64 commented 2 years ago

Create the plugin and then add it to the plugins list so it can be called. This allows you to give it whatever options could possibly be available.

jackm commented 2 years ago

The problem is I am unable to determine what format QMarkdown wants when passing it a list of imported plugins where some plugins require specific options to be passed in to them.

Most of the time you can just import the plugin and then add it to the list, but this particular plugin requires that you also pass it a string value as an option for when it is initialized. QMarkdown handles initializing the plugins by going through the plugins list, but I do not know how to pass along plugin options as well.

JacksonBowe commented 2 years ago

Also curious

JacksonBowe commented 2 years ago

@jackm This is working for me:

import admonition from 'markdown-it-admonition'

// inside your setup () { }

return {
    plugins: [ { plugin: admonition, options: { marker: '!' } } ]
}

Found in this section of the QMarkdown.js code

        if (allProps.value.plugins.length > 0) {
          allProps.value.plugins.forEach(plugin => {
            if (plugin instanceof Function) {
              md.use(plugin)
            }
            else {
              if (plugin.plugin instanceof Function && plugin.options) {
                md.use(plugin.plugin, plugin.options)
              }
            }
          })
        }
jackm commented 2 years ago

Confirmed that this does work. The correct form for specifying plugin options in the plugins array is by using an object:

{plugin: imported_plugin, options: <plugin options>}

Where <plugin options> can be whatever type the plugin expects for its options. In my case it was just a simple string value but it could also be an object like in @JacksonBowe example above.

So in my original example, the working code would be:

import abbreviation from 'markdown-it-abbr';
import deflist from 'markdown-it-deflist';
import emoji from 'markdown-it-emoji';
import footnote from 'markdown-it-footnote';
import icons from 'markdown-it-icons';
import insert from 'markdown-it-ins';
import mark from 'markdown-it-mark';
import subscript from 'markdown-it-sub';
import superscript from 'markdown-it-sup';
import taskLists from 'markdown-it-task-lists';

...

plugins: [
  abbreviation,
  deflist,
  emoji,
  footnote,
  {plugin: icons, options: 'font-awesome'},
  insert,
  mark,
  subscript,
  superscript,
  taskLists
]