tldraw/apps/docs/components/Mdx.tsx
CodeTorso 38c573aacc
Add editor notes to the docs (#3832)
People just don't know that they need to put the components using
useEditor inside the <tldraw> component as a children

Either it is defined somewhere else or not defined at all, so it will
really help those.

Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [X] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [X] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan [No need]

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes [No need]

- Add a brief release note for your PR here.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-06-04 12:01:10 +00:00

31 lines
771 B
TypeScript

import { MDXRemote } from 'next-mdx-remote/rsc'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeHighlight from 'rehype-highlight'
import rehypeSlug from 'rehype-slug-custom-id'
import remarkGfm from 'remark-gfm'
import { components } from './mdx-components'
interface MdxProps {
content: string
}
export function Mdx({ content }: MdxProps) {
return (
<MDXRemote
source={content}
components={components}
options={{
mdxOptions: {
remarkPlugins: [remarkGfm, {}],
rehypePlugins: [
[rehypeHighlight as any, {}],
[rehypeAutolinkHeadings, {}],
[rehypeSlug, { enableCustomId: true, maintainCase: true, removeAccents: true }],
],
format: 'mdx',
},
parseFrontmatter: true,
}}
/>
)
}