[feature] tldraw plugin for Docusaurus

[TheKnarf]

I would like to use .tldr files directly in Docusaurus without having to manually convert them to PNG or SVG files. This would be the perfect case for a Docusaurus Plugin.

[TheKnarf]

Docusaurus support MDX documents where one can embed React components, so it might not be needed to make an actual plugin.

The following code renderes the TLDraw editor inside the documentation:

import { ColorStyle, TDShapeType, Tldraw, TldrawApp } from '@tldraw/tldraw';

# Architecture

<Tldraw />

Three problems still remain:

• The scaling becomes wrong, the <Tldraw /> component seems to use 100% size of the browser, instead of available size inside the app. How do we set its size properly?

• How do load inn the .tldr file? I can easily read the content from disk, but then how do I send the string containing the .tldr file to the <Tldraw /> component?

• The last problem is the least important, but I would like to turn of editing. Supporting pan & zoom in the documentation is nice, but I don't really need to support editing diagrams that are in the docs. Still even if I can't turn it off as long as I can find a solution for the two other problems then its usable.

[TheKnarf]

I managed to solve my two last problems using this example:

import { ColorStyle, TDShapeType, Tldraw, TldrawApp } from '@tldraw/tldraw';
import TLDRDocument from '!!raw-loader!./arcitecture.tldr';

# Architecture

<Tldraw readOnly document={JSON.parse(TLDRDocument).document} />

This required me to add the following two packages to my setup:

yarn add -D raw-loader
yarn add @tldraw/tldraw

Now I just need to solve the issue that it takes up to much of the screen and we're all set.

[TheKnarf]

And there we go with a working solution (inspired by this example):

import { ColorStyle, TDShapeType, Tldraw, TldrawApp } from '@tldraw/tldraw';
import TLDRDocument from '!!raw-loader!./arcitecture.tldr';

# Architecture

<div style={{
    position: 'relative',
    width: '100%',
    height: '500px',
    overflow: 'hidden',
}}>
    <Tldraw readOnly document={JSON.parse(TLDRDocument).document} />
</div>