If I understand correctly, the CodeBlock component from Docusaurus has been swizzled in our project. The CodeBlockString function has been modified to generate our desired output.
I needed to pass the url of the source Markdown file down from the CodeSample component. One of the ways to achieve this is to injecting data into the metastring prop. The metastring is based on the text that follows after inserting a code block, e.g.
```md title="Markdown.md" url="https://www.markdownguide.org/"
# Title
This is markdown, it's metastring contains a title and url
The metastring is already used to pass down data, I figured it made most sense to add support for url.
To achieve the injection, I have used the components={components} prop to override the default component used to render code. In my override, it extends the metastring with the url metadata.
In the CodeBlockString function, the metastring is parsed, I have added a new parsing method for url. If a url has been passed, a Link is rendered next to the copy button.
If there is a cleaner way to achieve this, please let me know.
What does this PR do?
Adds a Contribute button to all code blocks.
If I understand correctly, the
CodeBlockcomponent from Docusaurus has been swizzled in our project. TheCodeBlockStringfunction has been modified to generate our desired output.I needed to pass the
urlof the source Markdown file down from theCodeSamplecomponent. One of the ways to achieve this is to injecting data into themetastringprop. Themetastringis based on the text that follows after inserting a code block, e.g.The metastring is already used to pass down data, I figured it made most sense to add support for
url.To achieve the injection, I have used the
components={components}prop to override the default component used to rendercode. In my override, it extends the metastring with the url metadata.In the
CodeBlockStringfunction, the metastring is parsed, I have added a new parsing method for url. If a url has been passed, aLinkis rendered next to the copy button.If there is a cleaner way to achieve this, please let me know.
How do you test this PR?
Test link:
Checklist
Accessibility checklist