Live data from Hacker News

Lexical – a web text editor framework that powers Facebook

playground.lexical.dev

21–30 of 107 posts

Re: Lexical – a web text editor framework that powers Facebook

#21
post #15

In what sense does this "power" Facebook? Do you mean it's used for most or some specific text editing components of Facebook?

It's replacing any previous web text editor UX components that we had in the past (likely DraftJS). We're also building Lexical for iOS which is slowly rolling out across iOS devices too.

Re: Lexical – a web text editor framework that powers Facebook

#22

That's really good How do people search for jobs that work in this problem domains - parsers / editors / compilers?

For Meta, or in general? For Meta, there are plenty of teams that require some infra knowledge around these common concepts. It's been fairly straightforward to find a team as a front-end engineer that allows you to excel in these areas at Meta (once you're successful in the interview loops).

Re: Lexical – a web text editor framework that powers Facebook

#23

We're trying to choose between Lexical and Slate at work. Do you have any code examples that would be similar to this? Example: https://www.slatejs.org/examples/richtext Code: https://github.com/ianstormtaylor/slate/blob/main/site/examp...

The Lexical playground is one giant kitchen-sink example all written in React. You could check out the code for it locally and `npm run start` and play around with removing/adding plugins. You can also check out some examples on Codesandbox: https://codesandbox.io/s/lexical-rich-text-example-5tncvy

Re: Lexical – a web text editor framework that powers Facebook

#24
post #18

Earlier quoted context omitted.

Hey since you work at Meta can you find when code support / markdown will be added to text editing components? It’s so frustrating posting code snippets to friends threads on FB

Lexical supports code support / markdown. We actually use it a lot for Workplace, which is a kind of Facebook-like website for companies. It's really down to the product surfaces what features from Lexical they choose to use.

Hey on my business’s website we currently use draft.js for our user discussion product and we convert the user input to markdown for storing in our db. How hard would it be to switch to Lexical and does it support rendering from markdown syntax? Do you recommend any other approaches for safe storage and rendering of rich text? Thanks!

Re: Lexical – a web text editor framework that powers Facebook

#25

We're trying to choose between Lexical and Slate at work. Do you have any code examples that would be similar to this? Example: https://www.slatejs.org/examples/richtext Code: https://github.com/ianstormtaylor/slate/blob/main/site/examp...

If you are planning to build a Notion competitor, I recommend Slate. Seriously though, if you need to support Android or CJK, you should understand Slate’s limitations before you buy into it. I think ProseMirror is the best choice today because it has been around for a long time and has battle-tested MutationObserver logic. Lexical is worth considering depending on your risk appetite. It also uses MutationObserver and appears to approach Android correctly. I haven’t read enough of the code to recommend it yet. In Slate, Android is a second-class citizen with an extremely bare-bones MutationObserver reconciler. The main codebase only uses beforeInput.preventDefault which doesn’t work on Android.

Re: Lexical – a web text editor framework that powers Facebook

#26
post #18

Earlier quoted context omitted.

Lexical supports code support / markdown. We actually use it a lot for Workplace, which is a kind of Facebook-like website for companies. It's really down to the product surfaces what features from Lexical they choose to use.

Hey on my business’s website we currently use draft.js for our user discussion product and we convert the user input to markdown for storing in our db. How hard would it be to switch to Lexical and does it support rendering from markdown syntax? Do you recommend any other approaches for safe storage and rendering of rich text? Thanks!

Lexical has markdown support via `@lexical/markdown`. See https://lexical.dev/docs/api/lexical-markdown.

Re: Lexical – a web text editor framework that powers Facebook

#27
post #25

We're trying to choose between Lexical and Slate at work. Do you have any code examples that would be similar to this? Example: https://www.slatejs.org/examples/richtext Code: https://github.com/ianstormtaylor/slate/blob/main/site/examp...

If you are planning to build a Notion competitor, I recommend Slate . Seriously though, if you need to support Android or CJK, you should understand Slate’s limitations before you buy into it. I think ProseMirror is the best choice today because it has been around for a long time and has battle-tested MutationObserver logic. Lexical is worth considering depending on your risk appetite. It also uses MutationObserver a…

ProseMirror is a great choice. Lexical might offer you more mileage if you're working with React (especially React 18 and the new concurrency features) and are happy to invest into a project that is still pre 1.0.

Re: Lexical – a web text editor framework that powers Facebook

#28
post #18

Earlier quoted context omitted.

Lexical supports code support / markdown. We actually use it a lot for Workplace, which is a kind of Facebook-like website for companies. It's really down to the product surfaces what features from Lexical they choose to use.

Hey on my business’s website we currently use draft.js for our user discussion product and we convert the user input to markdown for storing in our db. How hard would it be to switch to Lexical and does it support rendering from markdown syntax? Do you recommend any other approaches for safe storage and rendering of rich text? Thanks!

I work at Meta on the Lexical team - yes, Lexical supports markdown and rendering from markdown syntax. Lexical isn't a drop-in replacement for Draft, but we're migrating all of our surfaces internally and it isn't particularly difficult, especially if you aren't storing in the DraftJS-specific format. As for alternatives, you can also consider storing it as JSON, which Lexical supports.

Re: Lexical – a web text editor framework that powers Facebook

#29
post #17
post #9

Earlier quoted context omitted.

> event.timeStamp I tried so hard to avoid adding timeouts/timestamp logic for Android because it feels like a nondeterministic hack. In the end I gave up and did something similar. I also found beforeInput doesn’t offer much solace on Android or with CJK language, because messing around with preventDefault or the DOM during composition disturbs the user. One weird thing I never figured out is that if the user puts t…

Yeah, I really wanted to avoid them too. There doesn't seem a good way. The issue you describe with selection jumping is a well known issue with GBoard. Here's the logic for the mutation handling: https://github.com/facebook/lexical/blob/main/packages/lexic...

https://github.com/facebook/lexical/blob/5802651c24d88b2f7d2...

> // Check for any random auto-added
elements, and remove them.

> // These get added by the browser when we undo the above mutations

> // and this can lead to a broken UI.

This made me laugh out loud. Browsers!

Until here our approach looked quite similar. Leave the observer connected during reverts and avoiding double-peocessing using .takeRecords never occurred to me, I always disconnect it. Maybe some of these brs are causing chaos…

Re: Lexical – a web text editor framework that powers Facebook

#30
post #29
post #17

Earlier quoted context omitted.

Yeah, I really wanted to avoid them too. There doesn't seem a good way. The issue you describe with selection jumping is a well known issue with GBoard. Here's the logic for the mutation handling: https://github.com/facebook/lexical/blob/main/packages/lexic...

https://github.com/facebook/lexical/blob/5802651c24d88b2f7d2... > // Check for any random auto-added elements, and remove them. > // These get added by the browser when we undo the above mutations > // and this can lead to a broken UI. This made me laugh out loud. Browsers! Until here our approach looked quite similar. Leave the observer connected during reverts and avoiding double-peocessing using .takeRecords never…

Now thinking about it, I don't know why we didn't just do that. There must have been a reason, but I really can't recall what it was. If you're ever interested in contributing, this would be an epic contribution! :D
Post reply on HN