[docs] Update multiple test (#1685)

This PR adds a bit of content to the multiple editor test so that we can
also test scrolling.

### Change Type

- [x] `documentation`
This commit is contained in:
Steve Ruiz 2023-06-30 14:30:06 +01:00 committed by GitHub
parent f07b915716
commit b96d207f5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -5,23 +5,68 @@ export default function MultipleExample() {
return ( return (
<div <div
style={{ style={{
width: '120vw', backgroundColor: '#fff',
height: '150vh', padding: 32,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundImage: 'url(https://source.unsplash.com/random/2000x2000)',
}} }}
> >
<div style={{ width: '60vw', height: '80vh' }}> <h2>First Example</h2>
<p>This is the second example.</p>
<div style={{ width: '100%', height: '600px', padding: 32 }} tabIndex={-1}>
<Tldraw persistenceKey="steve" autoFocus /> <Tldraw persistenceKey="steve" autoFocus />
</div> </div>
<textarea defaultValue="type in me" style={{ margin: 10 }}></textarea> <textarea defaultValue="type in me" style={{ margin: 10 }}></textarea>
<div style={{ width: '60vw', height: '80vh' }}> <h2>Second Example</h2>
<p>This is the second example.</p>
<div style={{ width: '100%', height: '600px' }} tabIndex={-1}>
<Tldraw persistenceKey="david" autoFocus={false} /> <Tldraw persistenceKey="david" autoFocus={false} />
</div> </div>
<div
style={{ width: '100%', display: 'flex', alignItems: 'center', flexDirection: 'column' }}
>
<article style={{ maxWidth: 600 }}>
<h1>White Board</h1>
<h2>Chapter 1: The First Strokes</h2>
<p>
The fluorescent lights flickered overhead as John sat hunched over his desk, his fingers
tapping rhythmically on the keyboard. He was a software developer, and tonight, he had a
peculiar mission. A mission that would take him deep into the labyrinthine world of web
development. John had stumbled upon a new whiteboard library called "tldraw," a
seemingly simple tool that promised to revolutionize collaborative drawing on the web.
Little did he know that this discovery would set off a chain of events that would
challenge his skills, test his perseverance, and blur the line between reality and
imagination.
</p>
<p>
With a newfound sense of excitement, John began integrating "tldraw" into his latest
project. As lines of code danced across his screen, he imagined the possibilities that
lay ahead. The potential to create virtual spaces where ideas could be shared, concepts
could be visualized, and teams could collaborate seamlessly from different corners of
the world. It was a dream that seemed within reach, a vision of a future where
creativity and technology merged into a harmonious symphony.
</p>
<p>
As the night wore on, John's mind became consumed with the whiteboard library. He
couldn't help but marvel at its elegance and simplicity. With each stroke of his
keyboard, he felt a surge of inspiration, a connection to something greater than
himself. It was as if the lines of code he was writing were transforming into a digital
canvas, waiting to be filled with the strokes of imagination. In that moment, John
realized that he was not just building a tool, but breathing life into a new form of
expression. The whiteboard was no longer just a blank slate; it had become a portal to a
world where ideas could flourish and dreams could take shape.
</p>
<p>
Little did John know, this integration of "tldraw" was only the beginning. It would lead
him down a path filled with unforeseen challenges, where he would confront his own
limitations and question the very nature of creation. The journey ahead would test his
resolve, pushing him to the edge of his sanity. And as he embarked on this perilous
adventure, he could not shake the feeling that the whiteboard held secrets far beyond
his understanding. Secrets that would unfold before his eyes, one stroke at a time.
</p>
</article>
</div>
</div> </div>
) )
} }