[markdown]: shortcodes in posts should not be wrapped in <p>

[thelevking]

Elder.js' Markdown plugin wraps any shortcode placed on its own line in <p></p>, including any Svelte component called via {{svelteComponent name='...' /}}. This creates invalid HTML if any non-inline tags are wrapped into <p>. Elder.js' Markdown parser should remove these

tags from the resulting HTML.

[markjaquith]

Here's how I've worked around this for now:

In shortcodes.js, I mark any shortcodes I want to be "block level" with block: true.

Then in hooks.js I have this:

  {
    hook: 'shortcodes',
    name: 'unwrapBlockShortcodes',
    description: 'Looks for block level shortcodes and remove their surrounding paragraph tags',
    priority: 99,
    run: async ({ layoutHtml, shortcodes }) => {
      const blockShortcodes = shortcodes.filter(shortcode => shortcode.block)
      let newHtml = layoutHtml
      blockShortcodes.forEach(({ shortcode }) => {
        newHtml = newHtml
          .replace(new RegExp(`<p>({{${shortcode}( .*)?/?}})(</p>)?`, 'g'), '$1')
          .replace(new RegExp(`({{/${shortcode}}})</p>`, 'g'), '$1')
      })

      return {
        layoutHtml: newHtml
      }
    },
  },