MDC Component "Editing itself"

[Rigo-m]

If I want to create an MDC component that displays it's state, but can also change it.

Think, for example:

• A kanban board component
• An editable task card
• A Mermaid component that can display a diagram but also change the diagram via AI prompting

What's the best way for an mdc component to tap into the studio/content pipeline so that it can change it's own markdown?

I don't know if this is somehow a good idea/approach on extending the concept of document-based website.

Also, don't know what are plans for upserting MDCs with TipTap Editor.

Thanks

[BenjaminOddou]

Hello @Rigo-m,

For tiptap it seems that @larbish is working hard on it #125

For mermaid, you can create a custom component that will be listed by nuxt studio, see nuxt/content#1866 (comment)

Hope it helps a little

[Rigo-m]

Thank you Benjamin!

I went through tiptap prs. What I am missing is the part were the mdc component can directly access it's markdown definition and edit it on the fly

[BenjaminOddou]

Hey @Rigo-m,

I am not sure to understand this :

The part were the mdc component can directly access it's markdown definition and edit it on the fly

Could you share an example ?

[Rigo-m]

Sure!

Example 1

Let's say I create a Kanban Board MDC component.

It's mdc code is something like this:

::kanban{sections='["Todo", "Doing", "Done"]' tasks='[{ title: 'Do something' , section='Todo'}]}
  #title my amazing kanban
::

Kanban board component will then have a draggable interface, so that when you drag and drop a task this will have to reflect onto the "source of truth" of the kanban (which is the markdown itself), so I need to have an accessible API that, from inside the Kanban.vue mdc component can change it's own reference in the markdown of the page where the component is inserted

Example 2

I have a mermaid component

::mermaid
Graph TD
A->B
::

This mermaid component convienently has a button that says "Generate with AI prompt". I want to read the page context where the mermaid component lives and prompt it like so "Please generate a mermaid graph diagram that encapsulates the concepts you can see in paragraph "Architecture" of this document". When the AI prompt then has the result, the mermaid diagram needs to be updated inside the markdown of the page. So, again, the component should in some way be able to access its own "MDC instantiation" code to be able to change itself at will.

Example 3

I can add an "AI summary" component at the bottom of the documentation page

::ai-summary 
This is a summary of this documentation page
::

This AI summary component has a button to regenerate the summary of the page. Of course, when the summarisation via AI has ended, in the md of the page the component will show

::ai-summary
The page now has a different summary
::

I could of course handle all these components data via a third-party database, but somehow this pattern of maintaining markdown as a single source of truth for the instance data inside the component sits right with me. And also makes generating pages with AI feasible (AI can generate the markdown of the page and the components and doesn't need to interact with an external database to do so. You can prompt "Generate a docs page with a mermaid diagram that.... use these MDC component: Mermaid.vue"

Am I missing something?
Would this be cool or an antipattern somehow?

[Rigo-m]

@larbish do you have any thoughts on this by chance?

[larbish]

Hey @Rigo-m, right now it's not possible and it’s not a trivial feature to add.

However, we are already exploring something that could help move forward it: syncing the host DOM with the editor.

The idea is to expose an API from Studio such as selectNode(nodeKey / xPath / uniqueId) to call it from user DOM and highlight or focus the corresponding node inside the Tiptap editor

If this works well, then exposing a safe API for components to update their own MDC representation would be also possible: updateTreeNode(nodeKey / xPath / uniqueId, nodeTree)

We need to test and ensure it works first but we’ll be able to think about this more concretely once that foundation is in place!