search

tldraw / tldraw-v1

A tiny little drawing app. This is the original 2021-2022 version, released under MIT.
https://old.tldraw.com
MIT License
64 stars 35 forks source link

[feature] Prototype a Code Editor and Preview Components using Sandpack #320

Closed seflless closed 9 months ago

seflless commented 2 years ago

Codesandbox just announced Sandpack a module for easily making embedded code editors and preview panes. It'd be fun to see what concepts/components could be built from Sandpack. A zoomable canvas for code editors and preview panes would be awesome. https://twitter.com/codesandbox/status/1466428912087576587?s=21

Obviously, Tldraw inside Tldraw would be the first demo

Proful commented 2 years ago

I am really excited about this integration.

Proful commented 2 years ago

I have started looking into it on next repo.

code3

Any suggestion or thoughts on this?

seflless commented 2 years ago

At this moment the bundler is hosted by code sandbox CDN. It can be self hosted in future. But feels bit messy.

Seems Codesandbox is going to have a HUGE incentive to do a good CDN implementation and have it never go down. They are really promoting people Sandpack.

Saving code in document json? or asset table like image?

Document would be my vote! But I don't know much about the asset table semantics. I'm pretty excited for this for the VS Code extension. This allows. you to check in Sandpack code and have it spread around a zoomable interface, that's my kind of jam.

Do we want it to work on multiplayer? How complicate it would be?

I'd vote yes on multiplayer. I believe at least with Liveblocks doesn't support multi-person simultaneous editing. So multiplayer would allow one person to edit at once. This is no different than Stickies or Text right now, but for code it's a little less ideal as code text is way larger and multiplayer coding tends to have multiple people with their cursors in the same code editor. At least supporting maintaining cursor position and scroll would be good, working around the limitations.

@steveruizok I'm correct-ish here?

seflless commented 2 years ago

@Proful Loving this! Multiplayer presence on which tab people are in and where their cursor/selection is would be a nice touch too.

steveruizok commented 2 years ago

We could use Y as a parallel engine for multiplayer text, or else use the presence api available from liveblocks. I don't know much about what data we need to be trading to support multiplayer.

A second question would be when do we make changes to the data model? At the moment we make those changes on every keystroke, which is safest for preventing data loss, but we could instead be updating the model only when the user stops editing, or on an interval. (In this case we would definitely need a dialog for when the user closes the tab during an editing session).

steveruizok commented 2 years ago

If we keep the code in the document, then yeah I don't think there's any need to use an asset table. (If I cloned an editor shape, I would expect to be able to edit them both independently.)