[lexical-playground][file] Feature: Playground link sharing

[etrepum]

trafficstars

Description

Adds a share button to the playground's ActionToolbar which will create a #doc= URL that includes a compressed and serialized document. The plugin also has an effect that will set the editor state from this document and clear history on initial load. It changes the URL when the share button is clicked as well, I just copied the typescript playground UX for this, I think it's done as a fallback for if the clipboard.writeText fails.

I added the following new exports to @lexical/file to support this feature:

• type SerializedDocument
• serializedDocumentFromEditorState
• editorStateFromSerializedDocument

Here's an example link with #doc= in the preview

Test plan

• Change some content from the editor's default state
• Click the share button
• Expect the URL to change with a #doc=... hash, the URL to be on the clipboard, and the "URL copied to clipboard" flash message to show
• Paste it into another browser (or make some changes and reload) and expect that the previously shared state to be restored (only the state, no history)

There's some unit tests that ensure round-trip of the doc<->hash and an e2e test that runs the above test plan

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 5, 2024 8:20pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 5, 2024 8:20pm

[etrepum]

@zurfyx any thoughts on this before I finish up the UI and tests?

[acywatson]

this is pretty cool - I'm not sure how useful it will be for real-life debugging, but I might be wrong and there's certainly no harm. Curious if you had particular use cases/debugging friction points in mind.

Another area of exploration might be the test generator - I think it's defunct and never worked super-well, but the idea was to be able to start "recording mode" and it would generate an e2e test for you as you interacted with the playground editor.

[etrepum]

@acywatson I picked it off the roadmap 🤷‍♂️ Thinking about debugging use cases I think it is actually pretty useful because you can make a link to the playground from an issue with the state required to repro an issue (so long as history isn't involved in the bug). You can also use it to demonstrate a playground state that shows off a new node or feature. It's also in just about every other playground site.

[acywatson]

@acywatson I picked it off the roadmap 🤷‍♂️ Thinking about debugging use cases I think it is actually pretty useful because you can make a link to the playground from an issue with the state required to repro an issue (so long as history isn't involved in the bug). You can also use it to demonstrate a playground state that shows off a new node or feature. It's also in just about every other playground site.

Makes sense!

so long as history isn't involved in the bug

I suspect most issues actually involve a sequence of interactions against a particular initial state, but at least it gets us that initial state.

Once again, no objections to this at all, more just thinking about what could be a next step to making it even easier to create shareable repros and further reduce triage/maintenance overhead.