Accessing Frontmatter Individual Field

[arung-agamani]

First of all, thank you for making MDX Editor. It's been a long time that I tried to find a solution for WYSIWYG editor that incorporates markdown when writing, and this is just one of the best one out there. Everything so far has been great, but still always have room for improvements.

That being said, currently I'm using the Frontmatter plugin and although it works fine, I want to find a way to expose the individual fields to React, so there could be like an additional view outside the MDX editor context where I can show the current frontmatter fields. As I've read the docs and source code, the current implementation stores the state directly in the editor buffer, and for now possibly the only way to extract those outside MDX context is by getting the raw text data, take the frontmatter part, and parse it by ourselves. My question to this are:

1. Is there a much "cleaner" approach where we don't need to process the entire data, and let us have access to the current frontmatter part directly?
2. I would like to receive callback/attach hook when the frontmatter data has been updated. Lets say that I want to call an API to check if a certain field (lets say title) doesn't have the same data in the database. Any way to accomplish this?

I am trying to fiddle with the source myself to see if I can extend the plugin, by lets say adding some hooks to the plugin init params. Might gonna take a while since Gurx is a little bit hard to grasp (no offense).

[petyosi]

No offense taken. Making such editor is a specific task, and it needed some less than common patterns.

Pulling the frontmatter management out of the Lexical state is theoretically possible but far too complicated - you will have two concurrent sources for the construction of the final markdown output.

I don't understand your technical constraints or goals, so I can't comment on the reasons behind them, but you can certainly make an editor that is visually located above or besides the editor without having to pull it out of the MDX context. In general, I would recommend that you reconsider your approach and take the current frontmatter plugin as the base for your custom plugin.

[arung-agamani]

Thank you for the reply! Sorry I just have the time to make reply.

So what I'm trying to do is to be able to get/set the frontmatter data by not using the modal that comes with the plugin. I want to create a content editor where there are title and description and probably some other metadata, that are editable through other form field. Using the current plugin with the modal is not ideal for my case as it's not easily noticeable whether the values are set or not, let alone seeing what the values are. The need to open the modal just to check is currently not a good user experience on this case, so I want to extend it outside the MDX editor.

Currently I'm trying to find a proper way of calling the publishers that's available from the plugin and see if I can hook custom UI component into MDX, but if you think there is a better approach, then I'm all ears!

[petyosi]

I think that the simplest thing you can do is just manage the frontmatter with your UI and the rest of the markdown with the Editor and stitch the two together with simple string concatenation.