static-cms icon indicating copy to clipboard operation
static-cms copied to clipboard

Shortcodes aliasing native .md syntax are only matched in preview

Open bojidar-bg opened this issue 4 months ago • 0 comments

Not sure if this is a bug or just a massive misuse of the feature on my part, but if I define a shortcode like so:

CMS.registerShortcode('shortcodename', {
  label: 'My shortcode',
  openTag: '<', // <--- !
  closeTag: '>',
  separator: ' ',
  toProps: () => ({}),
  toArgs: () => ['/'],
  control: () => {
    return h('div', {className: 'red-rectangle'}, [])
  },
  preview: () => {
    return h('div', {className: 'red-rectangle'}, [])
  }
  // ...
});

And use it on a document like so:

<shortcodename />

Then the shortcode will match in the preview, as evidenced by the preview component being visible in the result, but will remain visible as raw HTML in the widget.

As far as I can tell, the dissonance comes from the fact that the control first parses the value as markdown before applying shortcodes: https://github.com/StaticJsCMS/static-cms/blob/734cecd9b44e32b319621e141ae57b93cb6dc134/packages/core/src/widgets/markdown/plate/hooks/useMarkdownToSlate.ts#L36-L42 While the preview first replaces shortcodes (into MDX) and then parses markdown: https://github.com/StaticJsCMS/static-cms/blob/734cecd9b44e32b319621e141ae57b93cb6dc134/packages/core/src/widgets/markdown/MarkdownPreview.tsx#L58-L72

(Though I suppose for my particular issue, a call to processShortcodeConfigsToSlate around here would suffice:) https://github.com/StaticJsCMS/static-cms/blob/734cecd9b44e32b319621e141ae57b93cb6dc134/packages/core/src/widgets/markdown/plate/serialization/slate/deserializeMarkdown.ts#L264-L272

bojidar-bg avatar Mar 27 '24 23:03 bojidar-bg