TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Lexical – a web text editor framework that powers Facebook

283 pointsby trueadmalmost 3 years ago

21 comments

trueadmalmost 3 years ago
I&#x27;m the author of Lexical and one of the many engineers working on Lexical full-time at Meta. If you&#x27;d like to know anything, or ask any questions, please do!<p>For those of you looking for the sourcecode for the playground, you can find it here:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;lexical&#x2F;tree&#x2F;main&#x2F;packages&#x2F;lexical-playground" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;lexical&#x2F;tree&#x2F;main&#x2F;packages&#x2F;lexic...</a><p>We also have a Discord channel you can check out:<p><a href="https:&#x2F;&#x2F;discord.gg&#x2F;KmG4wQnnD9" rel="nofollow">https:&#x2F;&#x2F;discord.gg&#x2F;KmG4wQnnD9</a>
评论 #31817849 未加载
评论 #31818828 未加载
评论 #31813839 未加载
评论 #31814884 未加载
评论 #31822844 未加载
评论 #31818263 未加载
评论 #31818649 未加载
评论 #31818827 未加载
评论 #31834602 未加载
评论 #31817691 未加载
评论 #31817214 未加载
评论 #31816289 未加载
euroderfalmost 3 years ago
Is it a LOT to ask? =&gt; Could the docs PLEASE link to a downloadable runnable self-contained HTML page containing one or two editor instances in Vanilla JS? Same ask for ProseMirror.<p>Maybe such a page would pull the JS from a CDN, maybe it would refer to filepaths on the server.<p>I don&#x27;t know how to form a working web page from the snippets in the docu because I do not know the relevant javascript. I would just like a working example, on my own computer, with a minimum number of moving parts, that I can play around with.
jitlalmost 3 years ago
How do you handle Android and multi-lingual input? Writing the state machine to deal with Chrome&#x2F;Android’s bananas selection bugs in Notion’s editor gave me a lot of headaches. Do you add extra DOM nodes on Android? Any key insights that help deal with IME on Android?
评论 #31814206 未加载
lawrencechenalmost 3 years ago
I put Lexical through Hog Bay&#x27;s Moby Dick test [0] (paste the entirety of Moby Dick, scroll to the middle, and try editing). It didn&#x27;t pass. AFAIK, only ProseMirror passes, albeit with some lag.<p>[0] <a href="https:&#x2F;&#x2F;www.hogbaysoftware.com&#x2F;posts&#x2F;moby-dick-workout&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.hogbaysoftware.com&#x2F;posts&#x2F;moby-dick-workout&#x2F;</a>
评论 #31823423 未加载
barbinbradalmost 3 years ago
We&#x27;re trying to choose between Lexical and Slate at work. Do you have any code examples that would be similar to this?<p>Example: <a href="https:&#x2F;&#x2F;www.slatejs.org&#x2F;examples&#x2F;richtext" rel="nofollow">https:&#x2F;&#x2F;www.slatejs.org&#x2F;examples&#x2F;richtext</a><p>Code: <a href="https:&#x2F;&#x2F;github.com&#x2F;ianstormtaylor&#x2F;slate&#x2F;blob&#x2F;main&#x2F;site&#x2F;examples&#x2F;richtext.tsx" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ianstormtaylor&#x2F;slate&#x2F;blob&#x2F;main&#x2F;site&#x2F;examp...</a>
评论 #31815209 未加载
评论 #31815098 未加载
评论 #31819146 未加载
saimiamalmost 3 years ago
A few days ago, I was looking to create an editable interface for an email composer for a project I’m working on (<a href="https:&#x2F;&#x2F;PretzelBox.cc" rel="nofollow">https:&#x2F;&#x2F;PretzelBox.cc</a>, since you asked).<p>I wanted to see if Lexical was a good fit. My app is plain javascript with a bit of Alpine and htmx. I just couldn’t figure out how to &lt;link&gt; to the appropriate js file in my html file. And I’m not a frontend dev so I have no idea how to browserify (or whatever the technical term is) the right npm modules.<p>I ended up using MediumEditor which is ancient in relative terms. Anyway, now composing email feels like writing a Medium post, fwiw.
pxeger1almost 3 years ago
In what sense does this &quot;power&quot; Facebook? Do you mean it&#x27;s used for most or some specific text editing components of Facebook?
评论 #31815008 未加载
laqq3almost 3 years ago
This looks great!<p>Curious whether the team is looking at improving the support of having images in tables cell? I played with the playground and it seems to work, but there seems to be some (relatively minor) glitches&#x2F;bugs (e.g. difficult to place an image in a cell, moving images across cells seems difficult, and cannot Ctrl-x an image and Ctrl-v to paste it).
评论 #31829887 未加载
latchkeyalmost 3 years ago
It is interesting (and cool) that this uses Typescript over Flow. It seems like Flow is still being developed too.<p>Just looking at the top level package.json [1], I wonder at which point you abstract all those copy&#x2F;pasted targets into a script that takes an argument.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;lexical&#x2F;blob&#x2F;main&#x2F;package.json#L33" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;lexical&#x2F;blob&#x2F;main&#x2F;package.json#L...</a>
评论 #31819730 未加载
评论 #31816623 未加载
chaoxualmost 3 years ago
Recently I have been testing vditor, vditor is a markdown editor that have a instant rendering feature [1]. If I&#x27;m creating my own editor, how hard is it to implement it using Lexical?<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;Vanessa219&#x2F;vditor&#x2F;blob&#x2F;master&#x2F;README_en_US.md#instant-rendering" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Vanessa219&#x2F;vditor&#x2F;blob&#x2F;master&#x2F;README_en_U...</a>
rsstackalmost 3 years ago
I&#x27;d love to use Lexical to replace what we&#x27;re using today. I&#x27;ve been checking in on the repository every few weeks. However, there are many features that are still pending <a href="https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;lexical&#x2F;projects&#x2F;1" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;lexical&#x2F;projects&#x2F;1</a> . We need several of the features that are &quot;V1.0&quot; and we obviously need the stability of a 1.0 SemVer release :)<p>Is there a general timeline goal for the V1.0 release?
评论 #31814575 未加载
mhdhnalmost 3 years ago
There do not seem to be text direction controls. I see it does basic heuristic text direction guessing, apparently based on first strong LTR or RTL character in a paragraph, but this is often not adequate for determining text direction correctly, hence the need for explicit control, at least at the paragraph level, ideally also at subparagraph level. Any plans to add such controls? There are about a billion users of bidirectional languages (Arabic, Hebrew, Farsi, Urdu, Yiddish, et al).
评论 #31823728 未加载
a-priorialmost 3 years ago
How does this compare to Draft.js, another rich text editor created by Facebook?<p><a href="https:&#x2F;&#x2F;draftjs.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;draftjs.org&#x2F;</a>
评论 #31814987 未加载
elvin_dalmost 3 years ago
I tried most of the existing editors and worked with some of them a lot. Lexical have a nice declarative API; so far, enjoying using it. Even without proper docs, I quickly got an idea of what it is and how to develop. React ecosystem lacked a proper text editor and lexical is really promising.
thorncoronaalmost 3 years ago
I realize this isn&#x27;t probably your product surface but do you have any idea why FB messenger still has issues with double texting using the text box?<p>Also, how do you guys design to reduce latency in Lexical? Esp considering the fluidity of modern chat clients ex. Telegram which are much more performant.
评论 #31817370 未加载
tester756almost 3 years ago
That&#x27;s really good<p>How do people search for jobs that work in this problem domains - parsers &#x2F; editors &#x2F; compilers?
评论 #31815028 未加载
chrismorganalmost 3 years ago
Hmm, just tried the playground in Firefox on Linux, it’s about as buggy as fancy things like this tend to be.<p>• Inserting emoji with my Compose key: some (e.g. U+1F641) get turned into image-backed emoji and then duplicated unless preceded by another image-backed emoji; some (e.g. U+1F928) get ignored and left as normal text.<p>• If I type an emoji that gets duplicated while inside a link (but not inside bold&#x2F;italic), one goes where the caret is, and the other goes immediately before the link, and it leaves the caret there.<p>• The image-backed emoji are incompatible with inline text formatting: if you type them in the middle of formatted text, instead of ending up with the likes of &lt;u&gt;text EMOJI text&lt;&#x2F;u&gt;, you end up with &lt;u&gt;text &lt;&#x2F;u&gt;EMOJI&lt;u&gt; text&lt;&#x2F;u&gt;, and although you can subsequently apply the formatting so that it shows in the debug tree, it doesn’t change the HTML markup (e.g. subscript&#x2F;superscript&#x2F;underline&#x2F;code should certainly be visible, and even italic and bold <i>can</i> change emoji rendering).<p>• If I select part of a link starting <i>outside</i> the end of a link (that is, go one character past the link and then press the Left arrow key—Firefox has valid caret positions for both inside and outside the start and end of an element, depending on which direction you came from, which my faint recollection was a major trouble point on WebKit many years ago, that you couldn’t do that and so literally couldn’t model various reasonable, kinda like multiple selection which is also Firefox-only and extremely useful on tables) and delete that, instead of just deleting the selected characters, it deletes the entire link. (As above, this seems to be specific to links, not affecting bold&#x2F;italic.)<p>• Very early on (before I had done any editing at all) when I tried the time travel feature, I somehow activated the autocomplete popup on the words “The playground” by clicking or something, even though autocomplete was not turned on (I only confirmed that that was what it was, and not a spelling corrector, by later enabling it and typing “the”) and it was supposed to be read-only.<p>• Resizing table rows and columns is <i>very</i> buggy, with things like the grippies easily getting lost, the table-cell-action-button not updating its position, and it sometimes failing to act on mouse up. (Props for including the functionality, though, as it’s normally overlooked.)<p>• Clicking in table cells always moves the caret to the start of the cell rather than where you clicked, meaning you <i>have</i> to use arrow keys to get to the right place, and can’t select properly by mouse either.<p>• Pop-up menus don’t scroll with the document while open.<p>• Autocomplete popup doesn’t close when you move the caret by mouse, though they will no longer work if you click on them.<p>• Incidentally, who thought it a good idea to apply `list-style-position: inside`?<p>And this was from a fairly <i>quick</i> test. I found most of this stuff immediately <i>and would expect to hit most of these issues in real life</i>.<p>I honestly wish people would try to be less fancy with WYSIWYG components, because the web platform just isn’t well-adapted to it.
评论 #31823472 未加载
canadiantimalmost 3 years ago
Does Lexical require react?
评论 #31821737 未加载
8organicbitsalmost 3 years ago
How is Facebook using this?
评论 #31814561 未加载
firecallalmost 3 years ago
Wow, that looks really nice!<p>I&#x27;m more excited about this than you&#x27;d expect LOL
nsonhaalmost 3 years ago
Clickbait title, what does that even mean for a text editor to &quot;power&quot; facebook