Open tysian opened 7 months ago
Hey!
I've done some research and debugging in Markdoc integration. I have found the possible reason why this is happening.
The Renderer.astro
component is using Markdoc.transform()
function and probably this is why render
property is overriden by transform()
(this requires some deep dive into Markdoc codebase, and I didn't have much time to do this right now).
render
property is a string in Markdoc. In Astro it is an object, that contains information about component that has to be rendered.
I was trying to fix it by using Markdoc.transform()
twice. Firstly, I set render
property to undefined to run transform()
function. Then for the second time, without transform()
, but reverting render
property from original config.
Unfortunately, this can't be done, because Markdoc.transform()
returns a renderable node tree, that can't be transformed for the second time.
Also this is probably not the best solution, because we would run this twice, especially that this code runs on runtime.
Maybe there is some way to do this with using different Markdoc methods, but I'm not that familiar with this package.
Hi @tysian! Thanks for reporting. First, I agree that spreading nodes.fence
and nodes.code
according to the documentation. We should add a check for when render
and transform()
are used together to ensure the render
attribute wins out.
As for running transform and render simultaneously, I don't think this would be possible. render
uses a Markdoc transform under-the-hood as you described. Since you cannot transform a node twice, you would need to either use a transform
or a render
property. Luckily, it's possible to render an Astro component from a transform
function manually without using render
. This is a more advanced use case for when children need to be transformed before being passed to a component. Our image component uses this capability.
Astro Info
If this issue only occurs in one browser, which browser is a problem?
N/A
Describe the Bug
If
transform()
function is used inside Markdoc config, it is rendered instead of custom component provided inrender
property.I found out that custom component does not work with
fence
andcode
nodes.I have followed this guide, but if I pass
...nodes.fence
or...nodes.code
- it doesn't work, because they havetransform()
function inside.Also when I pass my own transform function, it overrides custom component too, no matter if I return html using
unescapeHTML
function or MarkdocTag
instance.What's the expected result?
Render Astro custom component with transformed data inside.
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-r2tgyt?file=markdoc.config.mjs
Participation