TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Facebook open sources Lexical, an extensible text editor library

379 点作者 crousto大约 3 年前

34 条评论

lewisjoe大约 3 年前
Hi Dominic, thanks for open sourcing the library. I have quite a few questions though:<p>1. Marijn has built an awesome open source richtext library (<a href="https:&#x2F;&#x2F;prosemirror.net&#x2F;" rel="nofollow">https:&#x2F;&#x2F;prosemirror.net&#x2F;</a>) which has a huge plugin ecosystem and bindings with a bunch of front-end frameworks (including React). Is there any specific motivation behind building one from scratch?<p>2. How is this different from Facebook&#x27;s own DraftJS lib?<p>3. What&#x27;s the story of realtime collaboration support with OT&#x2F;CRDT? Prosemirror had this in mind when designing its state model and delta model, so it comes with out of the box support for realtime collaborations. Can we expect the same with Lexical?<p>4. What&#x27;s the cross platform strategy for Lexical? If I store the editor&#x27;s state as JSON on the server, how will I render it on devices and native desktop apps?<p>We&#x27;ve built our own library on top of Prosemirror to power the comments and feedback sections of Zoho Writer - <a href="https:&#x2F;&#x2F;writer.zoho.com" rel="nofollow">https:&#x2F;&#x2F;writer.zoho.com</a><p>I&#x27;m always looking out for better approaches&#x2F;alternatives in this space and I&#x27;m curious how different Lexical is. Thanks!
评论 #31023832 未加载
评论 #31023725 未加载
andygcook大约 3 年前
One of the big frustrations with DraftJS is that Facebook moved on (which is understandable), but the core repo wasn’t given control to the community, so patches and updates couldn’t be pulled in. Obviously it’s open source and could be hard forked, but that’s not ideal.<p>I’d be curious if there are plans internally to make sure Lexical continues to be supported by Facebook and doesn’t end up with the same fate.
评论 #31022515 未加载
petilon大约 3 年前
The examples shown on the site are code editing. Which puts it in direct competition with the more established Monaco from Microsoft [1].<p>Competition is welcome, but the description sounds like this is more of a library than a finished product (which Monaco isn&#x27;t), and if so, some examples showing how to take advantage of that would have been helpful.<p>[1] <a href="https:&#x2F;&#x2F;microsoft.github.io&#x2F;monaco-editor&#x2F;" rel="nofollow">https:&#x2F;&#x2F;microsoft.github.io&#x2F;monaco-editor&#x2F;</a>
评论 #31022598 未加载
cetra3大约 3 年前
Is this in production on Facebook? I have not had the greatest experiences with their rich text editor, from not being able to remove styling on subsequent lines, to getting a nice little note saying that you can&#x27;t edit rich text posts on mobile. Hoping lexical brings some improvements here.
评论 #31022502 未加载
dang大约 3 年前
Related:<p><i>Lexical is now open-source (web text-editor)</i> - <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=31017943" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=31017943</a> - April 2022 (13 comments)
评论 #31023597 未加载
评论 #31024565 未加载
petepete大约 3 年前
From a company that intentionally broke text editing on mobile to force people to install the Messenger app, I wouldn&#x27;t use it even if it was great.
评论 #31024416 未加载
评论 #31024373 未加载
评论 #31026543 未加载
manigandham大约 3 年前
Updated list of rich&#x2F;html text editors: <a href="https:&#x2F;&#x2F;gist.github.com&#x2F;manigandham&#x2F;65543a0bc2bf7006a487" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;manigandham&#x2F;65543a0bc2bf7006a487</a>
asxd大约 3 年前
It crashed after I created a code block, converted it to a quote block, and the hit ctrl+z to undo (something about a history node not being found, I think. Sorry, should have saved the output).
评论 #31024330 未加载
mlajtos大约 3 年前
WAT?<p><a href="https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;lexical&#x2F;blob&#x2F;4e57eb8d7e0ca00fe998f02b9dd3efaaef858a2e&#x2F;packages&#x2F;lexical-react&#x2F;src&#x2F;LexicalCollaborationPlugin.js#L49" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;lexical&#x2F;blob&#x2F;4e57eb8d7e0ca00fe99...</a>
评论 #31028665 未加载
eyelidlessness大约 3 年前
Here I was ready to be crabby about yet another web based rich text editor, but after reading so many comments about how it’s not a good code editor—which it’s not, it’s not one at all atm—I’m kind of just crabby about the discussion being completely about something other than the topic. Y’all, I know it’s a thing in software to curmudgeon everything but can we at least curmudgeon the actual thing it actually is? Or maybe just suspend curmudgeon-ness and see if the thing is deserving of that in the first place?
dabedee大约 3 年前
The code examples seem to not be working for me on Firefox 100.0b5 (64-bit) on Windows. I only see black rectangles.
compiotr大约 3 年前
I understand the API will change, but will the JSON representation in such a way that it&#x27;s not safe to use currently? I don&#x27;t mind a bug here and there, but it would be quite serious not to be able to use old content with a new version of the editor.
Vivtek大约 3 年前
This has exactly the same maddening maladaptations that forced me to switch browsers for a reasonably adequate Facebook &quot;experience&quot;. JavaScript that breaks in older or less popular browsers is not something I think needs to be promulgated even <i>outside</i> Facebook.<p>Disappointing.
alephnan大约 3 年前
This feels half baked and confusing.<p>More than half docs page are blank:<p>- <a href="https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;concepts&#x2F;commands" rel="nofollow">https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;concepts&#x2F;commands</a><p>- <a href="https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;getting-started&#x2F;quick-start" rel="nofollow">https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;getting-started&#x2F;quick-start</a><p>- <a href="https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;concepts&#x2F;extending-nodes" rel="nofollow">https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;concepts&#x2F;extending-nodes</a><p>- <a href="https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;concepts&#x2F;editor-state" rel="nofollow">https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;concepts&#x2F;editor-state</a><p>- <a href="https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;api&#x2F;lexical" rel="nofollow">https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;api&#x2F;lexical</a><p>- <a href="https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;api&#x2F;lexical-selection" rel="nofollow">https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;api&#x2F;lexical-selection</a><p>- <a href="https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;api&#x2F;lexical-text" rel="nofollow">https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;api&#x2F;lexical-text</a><p>- <a href="https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;api&#x2F;lexical-offset" rel="nofollow">https:&#x2F;&#x2F;lexical.dev&#x2F;docs&#x2F;api&#x2F;lexical-offset</a><p>&gt; An extensible text editor library<p>&gt; Lexical is an extensible JavaScript web text-editor framework<p>The terminology is also confusing. In some places its called a library. In other places it&#x27;s called a framework. Then other commenters mentioned that the demo gives the impression that it is a full package editor, but is just pegging onto CodeMirror. That&#x27;s clarified here?<p>&gt; It doesn&#x27;t directly concern itself with UI components<p>&gt; core of Lexical is ... a DOM reconciler that takes a set of editor states, diffs the changes, and updates the DOM according to their state.<p>&gt; Lexical is designed for everyone. It follows best practices established in WCAG<p>These are weird and conflated set of buzzwords. Why should something that isn&#x27;t concerned with UI components be concerned with accessibility best practices?<p>I&#x27;m building my own text editor and I thought VSCode was impressive enough. See this well written article about their text buffer reimplementation: <a href="https:&#x2F;&#x2F;code.visualstudio.com&#x2F;blogs&#x2F;2018&#x2F;03&#x2F;23&#x2F;text-buffer-reimplementation" rel="nofollow">https:&#x2F;&#x2F;code.visualstudio.com&#x2F;blogs&#x2F;2018&#x2F;03&#x2F;23&#x2F;text-buffer-r...</a>. Then I realized Ace.js has some even crazy magic implementation that can handle millions of LoC files without lag. Can Lexical handle 100k+ LoC? Normally I&#x27;d benchmark myself, but in this case I don&#x27;t see other compelling reasons too. The author mentioned the 22kB bundle size is less than Draft.js by Facebook, but Slate.js is 10kB and much more mature.<p>Some features that could make Lexical have &quot;powerful features&quot; as claimed: UNDO&#x2F;REDO manager (without storing the entire state on the stack, which is just not scalable on memory), possibly implementing the Command pattern, then make easy consumption of collaborative editing such as with Operational Transform.
评论 #31024117 未加载
评论 #31023308 未加载
评论 #31023286 未加载
johnny35大约 3 年前
How does this fit in with Draft.js? Is it a successor? Seems like it has to connect in some way...
评论 #31022152 未加载
shubham_sinha大约 3 年前
How hard it’ll be to build a notion like UX using lexical ? Have been using editorjs for same
评论 #31023974 未加载
评论 #31023884 未加载
philfreo大约 3 年前
Is this meant to be a good drop-in rich-text&#x2F;WYSIWYG editor?<p>What is the format that it creates that you could then persist in a database? Does it just save its state in HTML or some JSON format or what?
评论 #31023243 未加载
vsroy大约 3 年前
Let&#x27;s say I&#x27;m building a stack overflow style editor (you type markdown and it gets rendered in a preview tab) -- would there be any reason to use lexical?
评论 #31022367 未加载
jasonshen大约 3 年前
Got to work briefly on this project and really excited to see it reach the public! Congrats to trueadm and the whole team on this.
zaptheimpaler大约 3 年前
Why did Facebook need to build a text editor? Is this used somewhere in their products?
评论 #31022253 未加载
评论 #31022231 未加载
melony大约 3 年前
Do you have any support for collaborative editing such as with Yjs or Automerge?
评论 #31022521 未加载
rattray大约 3 年前
How does this compare to others like Monaco, Ace, etc?
评论 #31022040 未加载
Thexyman大约 3 年前
How does Lexical compare to Slate.js?
jzer0cool大约 3 年前
Where might I find docs on the output document persisted to the db? Also, reading back this data back into the editor.
评论 #31024080 未加载
rvnx大约 3 年前
Really great work! Especially the time travel functionality feels very innovative. Thank you for it.
vbezhenar大约 3 年前
Cool but I’ve found two bugs in the first few seconds of using it. Not ready for production IMO.
评论 #31023678 未加载
评论 #31023675 未加载
endisneigh大约 3 年前
It&#x27;s worth mentioning that it seems like you need to use react with this.
评论 #31022083 未加载
tvararu大约 3 年前
Great job Dominic and team! :)<p>Really neat that it has no dependencies and works with anything.
Rodeoclash大约 3 年前
How does it compare with DraftJS?
评论 #31022157 未加载
shashanoid大约 3 年前
Wish this had LaTex support
jbverschoor大约 3 年前
So when do we get fbide?
评论 #31024356 未加载
slappy7大约 3 年前
Does it work on Android?
评论 #31020734 未加载
mdoms大约 3 年前
Is this the text editor used in products like Facebook (Blue), Messenger and Instagram? Because if it is it&#x27;s buggy and terrible but thanks anyway I guess.
graycat大约 3 年前
&gt; Lexical is comprised of editor instances that each attach to a single content editable element.<p>Now if I only knew what was meant by <i>attach</i>, <i>content editable</i>, and <i>element</i>. Then I suspect I don&#x27;t know what is meant even by <i>comprised</i> or <i>editor</i>.<p>To me: A <i>bit</i> is a 0 or a 1. A <i>byte</i> is 8 bits in a <i>sequence</i> where by <i>sequence</i> we mean the order of the bits matters. Or in terms of pure math, a <i>byte</i> is not a set but is an 8-tuple.<p>A <i>file</i> is a sequence of bytes in a <i>file system</i> on a computer. A leading example of such a file system is Microsoft&#x27;s NTFS -- New Technology File System.<p>Each byte can be regarded as a character in the Roman alphabet plus the digits 0-9, some punctuation symbols, and a little more, all as in the common, old definition called ASCII (American Standard Code for Information Interchange).<p>An <i>editor</i> is a computer program that reads a file, displays the bytes as in the ASCII definition, permits a user of the program to modify the bytes and then writes the sequence of bytes to a file again on the file system.<p>Uh, what is <i>WCAG</i>?<p>In what sense &quot;minimal&quot;?<p>For &quot;rich-text features and markdown&quot;, by <i>rich-text</i> is meant Unicode, some technique in Microsoft&#x27;s program Word, D. Knuth&#x27;s word processing program TeX? For &quot;markdown&quot;, I looked that up at Google and found<p>&quot;Markdown is a text-to-HTML conversion tool for web writers.&quot;<p>So, in particular Markdown is a computer program. Okay.<p>Again, from Google, apparently React is a JavaScript library for building user interfaces.<p>I&#x27;ve been a heavy user of text editors for years. The editor Kedit is my most important tool. Macros? Sure, I&#x27;ve written about 300 of them.<p>Text? I&#x27;ve got good experience with Knuth&#x27;s TeX: Wrote about 50 macros for TeX and have published applied math I wrote with TeX.<p>Uh, for a new Web site, I have written code, 100,000 lines of text in Microsoft&#x27;s Visual Basic .NET using ASP.NET and ADO.NET and some for their &quot;platform invoke&quot;. The 100,000 lines of code runs, apparently as intended. To type in the code, I just used Kedit -- worked great.<p>But I did nothing with React or JavaScript.<p>After reading the OP and more, I still have no idea what Lexical is, what it is for, what it can do as an editor, why anyone would use it, etc.<p>I write this post because in my work far and away the biggest obstacle is getting meaningful information from the available documentation. E.g., I spent all of yesterday on the question, what is a video adapter card? Such cards go for $15, $65, or $500, but what the cards are and the differences are not made at all clear. Before that, I wasted several days working with Microsoft&#x27;s programs COMP and FC, intended to compare files. I gave up and wrote my own program to compare files. Before that I wasted 1+ weeks mud wrestling trying to get an HP laptop and Windows 10 to write some DVDs -- after wasting several supplies of DVDs, DVD-R, DVD+R, DVD+RW, I concluded that somehow HP or Microsoft just doesn&#x27;t want people writing DVDs -- millions of bytes of documentation and several YouTube videos didn&#x27;t contradict that conclusion.<p>Another problem, Microsoft&#x27;s Outlook 2003, that I used successfully for years, now won&#x27;t read my email from my ISP (Internet Service Provider). I wrestled with that problem for some days and finally decided to use Thunderbird. Reading email should not be difficult -- for some years I used my own email software I&#x27;d written just with the scripting language Rexx and its way to use TCP&#x2F;IP.<p>I mention these problems because they are, in the <i>world</i> of computing, simple, trivial, old, etc., should be taken for granted but all of them remain.<p>The real, original, core creative work, with some pure and applied math, for my Web site has been fast, fun, and easy, but the real problem that has nearly ruined my effort is bad documentation of the tools I must use.<p>Now along comes Lexical where I can get no idea at all what the heck they are talking about -- to me that is an example of a big problem in computing.
评论 #31023870 未加载