facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
17.5k stars 1.45k forks source link

[@lexical/website] Documentation: Added FAQ page around Lexical collaborative mode #5993

Closed StyleT closed 2 weeks ago

StyleT commented 2 weeks ago

Description

This adds FAQ page with to address common pitfalls around Yjs integration. This is a first PR in a series that shall improve documentation in this area.

Closes: #4442

Test plan

See Vercel bot preview

vercel[bot] commented 2 weeks ago

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 1, 2024 10:29pm
lexical-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 1, 2024 10:29pm
github-actions[bot] commented 2 weeks ago

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
packages/lexical/dist/Lexical.js 23.69 KB (0%) 474 ms (0%) 386 ms (+2.23% 🔺) 860 ms
packages/lexical-rich-text/dist/LexicalRichText.js 34 KB (0%) 680 ms (0%) 1.4 s (+46.73% 🔺) 2.1 s
packages/lexical-plain-text/dist/LexicalPlainText.js 33.94 KB (0%) 679 ms (0%) 974 ms (-7.98% 🔽) 1.7 s
acywatson commented 2 weeks ago

I think this is a great start. My overall feedback is to start even simpler when we write deeper docs about this, as the overall suggested architecture is unclear (what's the Yjs model vs the document, how does one map onto the other, etc)

etrepum commented 2 weeks ago

I think the best supplement for this kind of documentation would be a working example that shows best practices, e.g. persistent yjs truth + database for indexing/snapshots. Possibly even have two models of the headless collab support since it's likely that people will want to use a SaaS collab channel like liveblocks.io or reflect.net so they may want a sync example that is a headless client rather than being directly coupled to a y-websocket-server service.

The helper functions here also seem like a great candidate to be included in @lexical/yjs (which also simplifies the docs and examples). Since @lexical/headless is so small I doubt adding it as a dependency would be a problem?

StyleT commented 2 weeks ago

@acywatson @etrepum Thanks for feedback! I'm merging this as is for now and will do follow up later next week or sooner.

My plan is to make at least: