How to: Draggable widgets / blocks

[cp-bwg]

Thanks for building this @kyoshino - I found you after being disappointed in the media handling of keystatic.

I have been searching but cant find it here in issues. I see that the list widget can be added and dragged around. I was hoping to be able to insert widgets, reorder them. Those widget could be placeholder for my [...page].astro to parse and build into vue components at build time.

Think of it like wanting to insert a toc block, or a cta. I want to put that between two markdown sections.

Short of a draggable widgets, I thought to look at your 0.64 release with the registereditorcomponent. I guess I just dont understand - does this give us items to pick from, in the insert drop down menu in the markdown, where we could put something like "CTA 1", which outputs a string into the markdown? I don't care right now about rendering in the preview, I just want to give shortcuts to my editors to input a CTA element, for example.

It would be even better if adding those custom editor widgets gives me the ability to collect an object of data, with options like color, etc. Similar to how keystatic does it. But I would need to not have this be a single field on the editor, but in a drag/drop and add/remove block type arrangement.

I just wanted to see if this is available and get some context.

[kyoshino]

Glad you found Sveltia CMS! Yes, custom editor components allow you to insert any string into Markdown. And it would be possible to implement draggable components. Sveltia uses the Lexical framework, and when I see the playground, paragraphs and components are draggable/rearrangeable. I’ll check out Keystatic and figure out what’s needed in our Lexical implementation.

[cp-bwg]

Awesome, I appreciate that. In keystatic, we can create components that can be inserted with the "+" button. When inserting, there are fields configured in that which will configure the output, and that provides the context the component during build.

If you have any example of how to do something like this with the custom editor component, I would really appreciate seeing one. Just something basic like a way to drop in something that lets me set 2-3 fields, and it ends up with those fields output in the markdown (mdx) as a component.

Here's a vid: https://app.screencast.com/Y8B4pzfySkaoE

Dropping in that CTA results in this:

---
title: Test Blog Entry
---
Blah Blah Blah

<CtaCard variant="secondary" heading="Find your stuff" text="Enter your ZIP code">

</CtaCard>

[kyoshino]

Not really MDX, but the Decap CMS doc has an example, and my client site has a few more use cases.

MDX (preview) support is actually the most-voted feature of Netlify/Decap CMS. Will dive into it after Sveltia CMS 1.0.

• [Feature Request] MDX Support decaporg/decap-cms#1776
• MDX Support Requirements decaporg/decap-cms#2064
• Support for the .mdx format decaporg/decap-cms#7158
• Enable React Components Rendering in Preview for MDX with Next.js decaporg/decap-cms#7259