Shortcodes aliasing native .md syntax are only matched in preview

[bojidar-bg]

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:

static-cms/packages/core/src/widgets/markdown/plate/hooks/useMarkdownToSlate.ts

Lines 36 to 42 in 734cecd

	unified()
	.use(markdown)
	.use(gfm)
	// eslint-disable-next-line @typescript-eslint/no-empty-function
	.use(useMdx ? mdx : () => {})
	.use(toSlatePlugin({ shortcodeConfigs: shortcodeConfigs ?? getShortcodes(), useMdx }))
	.process(markdownValue, callback);

While the preview first replaces shortcodes (into MDX) and then parses markdown:

static-cms/packages/core/src/widgets/markdown/MarkdownPreview.tsx

Lines 58 to 72 in 734cecd

	const [state, setValue] = useMdx(`editor-${id}.mdx`, value ?? '');
	const [prevValue, setPrevValue] = useState<string | null>(null);
	useEffect(() => {
	if (prevValue !== value) {
	const parsedValue = processShortcodeConfigToMdx(getShortcodes(), value ?? '');
	setPrevValue(parsedValue);
	setValue(parsedValue);
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [value]);
	return (
	<div key="markdown-preview" className={classes.root}>
	<MDXProvider components={components}>
	<MdxComponent state={state} />{' '}

(Though I suppose for my particular issue, a call to processShortcodeConfigsToSlate around here would suffice:)

static-cms/packages/core/src/widgets/markdown/plate/serialization/slate/deserializeMarkdown.ts

Lines 264 to 272 in 734cecd

	case 'html':
	if (node.value?.includes('<br>')) {
	return {
	break: true,
	type: NodeTypes.paragraph,
	children: [{ text: node.value?.replace(/<br>/g, '') || '' }],
	} as ParagraphNode;
	}
	return { type: 'p', children: [{ text: node.value ?? '' }] };