6 ms·

I'm the author of Lexical and one of the many engineers working on Lexical full-time at Meta. If you'd like to know anything, or ask any questions, please do!

I'm the author of Lexical and one of the many engineers working on Lexical full-time at Meta. If you'd like to know anything, or ask any questions, please do! For those of you looking for the sourcecode for the playground, you can find it here: https://github.com/facebook/lexical/tree/main/packages/lexical-playground https://github.com/facebook/lexical/tree/main/packages/lexic... We also have a Discord channel you can check out: https://discord.gg/KmG4wQnnD9 https://discord.gg/KmG4wQnnD9

WhitneyLand 4y ago
A really nice project. A recruiter called me from your company recently, and I kind of cringed hearing him talk about the meta verse. I realize now they probably would be much more effective with engineers if they skipped that part and just focused on all the cool work that’s being done.
nehalem 4y ago
Thanks for the offer, let me take you up on this. Could you compare Lexical and Prosemirror from an architecture perspective? What motivated your decisions in that regard?
- trueadm 4y ago
  Sure thing. I actually wrote up a really detailed response to this on ProseMirror's discussion board: https://discuss.prosemirror.net/t/differences-between-prosemirror-and-lexical/4557 https://discuss.prosemirror.net/t/differences-between-prosem... Ultimately though, there are many similarities between the two – intentionally so. We were inspired by ProseMirror and some of its APIs and approaches. I think the biggest underlying differences are in how we tackle things from a DX perspective. We tried to bring a more composable API to making text editors work – from the plugin patterns, how updates and reads work, to how you listen for changes and react to them. Much of this was inspired by my prior work working on the React core team and from creating Inferno.
  - samwillis 4y ago
    Interesting you say DX is a large aspect of what you are going for. ProseMirror is awesome but the API can be somewhat complex for simple things (but at the same time incredibly powerful when you get to understand it). I absolutely love TipTap[0] which is providing a much more user friendly API on top of ProseMirror, along with a clean Plugin system. Going to have to have a play with Lexical, excited to see Yjs support! [0]: http://tiptap.dev http://tiptap.dev
    - chucky123 4y ago
      Fundamental problem with Tiptap is its horrendous docs. If lexical can put out better docs, it is better than Tiptap automatically.
    - singaporecode 4y ago
      ProseMirror has some of the worst developer experience possible. I wasted so much time figuring out it’s convoluted API and abandoned it soon after. It does apparently have the best live editing / collaboration features of all text editors out there.
      - samwillis 4y ago
        I would disagree on "worst developer experience possible", it has a very steep leaning curve, but once you grok it it makes a lot of sense.
pixel_tracing 4y ago
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
- trueadm 4y ago
  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.
  - jacobsimon 4y ago
    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!
    - trueadm 4y ago
      Lexical has markdown support via `@lexical/markdown`. See https://lexical.dev/docs/api/lexical-markdown https://lexical.dev/docs/api/lexical-markdown.
    - acywatson 4y ago
      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.
jjuliano 4y ago
Hi, I did (or somewhat invented/devised) a similar concept, but for visually programming UI design. See: https://jjuliano.github.io/markdown-ui/docs/container.html https://jjuliano.github.io/markdown-ui/docs/container.html
- jjuliano 4y ago
  sorry, I didn't realize this was a text editor. I was initially looking at the time-travel screen (the black box), and thought that is where to type things to be able to use it. Lexical is awesome!
hit8run 4y ago
- hemantv 4y ago
  Seriously wtf
hemantv 4y ago
Awesome work. I have been early user of Lexical building getstable.co. Thanks for great framework and design ;)
guessmyname 4y ago
What does “web text editor framework that powers Facebook” actually mean? I don’t use Facebook, but AFAIK, there are no “blog features” in the platform, are there? Other than a WYSIWYG editor [1], what other use cases do you intend this project for? [1] https://en.wikipedia.org/wiki/WYSIWYG https://en.wikipedia.org/wiki/WYSIWYG
- chii 4y ago
  see https://news.ycombinator.com/item?id=14838232 https://news.ycombinator.com/item?id=14838232 > The competition has no choice but to spend all their time porting and keeping up, time that they can’t spend writing new features. Look closely at the software landscape. The companies that do well are the ones who rely least on big companies and don’t have to spend all their cycles catching up and reimplementing and fixing bugs that crop up [only on Windows XP.] so it is the same with the modern day web frameworks as it is in the old days of windows and microsoft's dominance. Joel Spolsky was as right in early 2002 as he is right in 2022.
  - code_biologist 4y ago
    See also “nerd sniping”: https://xkcd.com/356/ https://xkcd.com/356/
  - groby_b 4y ago
    Joel Spolsky wasn't particularly right in 2002, and he hasn't gotten more relevant with age. As for this particular article, what is your criticism? That FB makes a rich text editor available as open source (under the MIT license)? How on earth does that mean "companies have to spend all their cycles catching up and reimplementing and fixing bugs"? You can always roll your own, or use one of the many others available if this one doesn't taste right? (Also: Who on earth gains a competitive advantage from having a text editor, in 2022?)
    - chii 4y ago
      > How on earth does that mean "companies have to spend all their cycles catching up and reimplementing and fixing bugs"? The fact that there's draft.js, and a myriad of other existing editor libraries out there already, all of which could've been contributed to instead. If a startup chose to base their technology on a library that is released by a major corporation, they face the risk of getting "rug pulled" (or the library updates incompatibly and now you're locked in either to using the old version, or painful upgrade to the new version). Of course, they don't have to choose to use such a library, but if they don't then there's a community of people who then questions them on why they are spending time replicating a technology. The point is, if a startup chose to use this library, they face the risk of having to expend time keeping up in pace (and associated cost of doing so) with facebook. This equivalent scenario exists in someone writing against libraries released by microsoft on windows, and that's what spolsky is complaining about.
tumultco 4y ago
Thanks for your work in developing this! Does Lexical have a feature to set arbitrary CSS on a particular selection range? I've been looking for a solution to do this since the WebKit's -[WebView applyStyle:] is deprecated as part of WebView Legacy. It isn't clear to me from glancing at the docs if RangeSelection.formatText() or other methods can handle anything or just a subset of styling code. Thanks!
- afd8856 4y ago
  Just mentioning SlateJS which has [decorations](https://docs.slatejs.org/concepts/09-rendering#decorations https://docs.slatejs.org/concepts/09-rendering#decorations) for this
- acywatson 4y ago
  Yes, we have something like this in @lexical/selection: https://github.com/facebook/lexical/blob/af099ffd9f464b523d66ae4e507e170e62e49860/packages/lexical-selection/README.md#patchstyletext https://github.com/facebook/lexical/blob/af099ffd9f464b523d6...
chx 4y ago
Does wordperfect 5.1 say anything to you :) ? You just remade it and I love you for that.
taf2 4y ago
Does it have vim keybindings? And does it need react or is there a standalone way to embed it?
- zwily 4y ago
  People have contributed bindings for Vue, Svelte, and Solid so far. I’m not sure what state they are in though. React is definitely the most mature binding.
kapravel 4y ago
> Prevent the DOM from being manipulated externally (i.e. extensions) to guarantee that the DOM always matches the EditorState. [1] Can you talk a bit more about how this is achieved? Is it DOM obfuscation? [1] https://discuss.prosemirror.net/t/differences-between-prosemirror-and-lexical/4557 https://discuss.prosemirror.net/t/differences-between-prosem...
bythckr 4y ago
Why not add a spell checker & word counter?

WhitneyLand 4y ago

A really nice project. A recruiter called me from your company recently, and I kind of cringed hearing him talk about the meta verse. I realize now they probably would be much more effective with engineers if they skipped that part and just focused on all the cool work that’s being done.

nehalem 4y ago

Thanks for the offer, let me take you up on this. Could you compare Lexical and Prosemirror from an architecture perspective? What motivated your decisions in that regard?

trueadm 4y ago
Sure thing. I actually wrote up a really detailed response to this on ProseMirror's discussion board: https://discuss.prosemirror.net/t/differences-between-prosemirror-and-lexical/4557 https://discuss.prosemirror.net/t/differences-between-prosem... Ultimately though, there are many similarities between the two – intentionally so. We were inspired by ProseMirror and some of its APIs and approaches. I think the biggest underlying differences are in how we tackle things from a DX perspective. We tried to bring a more composable API to making text editors work – from the plugin patterns, how updates and reads work, to how you listen for changes and react to them. Much of this was inspired by my prior work working on the React core team and from creating Inferno.
- samwillis 4y ago
  Interesting you say DX is a large aspect of what you are going for. ProseMirror is awesome but the API can be somewhat complex for simple things (but at the same time incredibly powerful when you get to understand it). I absolutely love TipTap[0] which is providing a much more user friendly API on top of ProseMirror, along with a clean Plugin system. Going to have to have a play with Lexical, excited to see Yjs support! [0]: http://tiptap.dev http://tiptap.dev
  - chucky123 4y ago
    Fundamental problem with Tiptap is its horrendous docs. If lexical can put out better docs, it is better than Tiptap automatically.
  - singaporecode 4y ago
    ProseMirror has some of the worst developer experience possible. I wasted so much time figuring out it’s convoluted API and abandoned it soon after. It does apparently have the best live editing / collaboration features of all text editors out there.
    - samwillis 4y ago
      I would disagree on "worst developer experience possible", it has a very steep leaning curve, but once you grok it it makes a lot of sense.

pixel_tracing 4y ago

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

trueadm 4y ago
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.
- jacobsimon 4y ago
  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!
  - trueadm 4y ago
    Lexical has markdown support via `@lexical/markdown`. See https://lexical.dev/docs/api/lexical-markdown https://lexical.dev/docs/api/lexical-markdown.
  - acywatson 4y ago
    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.

jjuliano 4y ago

Hi, I did (or somewhat invented/devised) a similar concept, but for visually programming UI design. See: https://jjuliano.github.io/markdown-ui/docs/container.html https://jjuliano.github.io/markdown-ui/docs/container.html

jjuliano 4y ago
sorry, I didn't realize this was a text editor. I was initially looking at the time-travel screen (the black box), and thought that is where to type things to be able to use it. Lexical is awesome!

hit8run 4y ago

hemantv 4y ago
Seriously wtf

hemantv 4y ago

Awesome work. I have been early user of Lexical building getstable.co. Thanks for great framework and design ;)

guessmyname 4y ago

What does “web text editor framework that powers Facebook” actually mean? I don’t use Facebook, but AFAIK, there are no “blog features” in the platform, are there? Other than a WYSIWYG editor [1], what other use cases do you intend this project for? [1] https://en.wikipedia.org/wiki/WYSIWYG https://en.wikipedia.org/wiki/WYSIWYG

chii 4y ago
see https://news.ycombinator.com/item?id=14838232 https://news.ycombinator.com/item?id=14838232 > The competition has no choice but to spend all their time porting and keeping up, time that they can’t spend writing new features. Look closely at the software landscape. The companies that do well are the ones who rely least on big companies and don’t have to spend all their cycles catching up and reimplementing and fixing bugs that crop up [only on Windows XP.] so it is the same with the modern day web frameworks as it is in the old days of windows and microsoft's dominance. Joel Spolsky was as right in early 2002 as he is right in 2022.
- code_biologist 4y ago
  See also “nerd sniping”: https://xkcd.com/356/ https://xkcd.com/356/
- groby_b 4y ago
  Joel Spolsky wasn't particularly right in 2002, and he hasn't gotten more relevant with age. As for this particular article, what is your criticism? That FB makes a rich text editor available as open source (under the MIT license)? How on earth does that mean "companies have to spend all their cycles catching up and reimplementing and fixing bugs"? You can always roll your own, or use one of the many others available if this one doesn't taste right? (Also: Who on earth gains a competitive advantage from having a text editor, in 2022?)
  - chii 4y ago
    > How on earth does that mean "companies have to spend all their cycles catching up and reimplementing and fixing bugs"? The fact that there's draft.js, and a myriad of other existing editor libraries out there already, all of which could've been contributed to instead. If a startup chose to base their technology on a library that is released by a major corporation, they face the risk of getting "rug pulled" (or the library updates incompatibly and now you're locked in either to using the old version, or painful upgrade to the new version). Of course, they don't have to choose to use such a library, but if they don't then there's a community of people who then questions them on why they are spending time replicating a technology. The point is, if a startup chose to use this library, they face the risk of having to expend time keeping up in pace (and associated cost of doing so) with facebook. This equivalent scenario exists in someone writing against libraries released by microsoft on windows, and that's what spolsky is complaining about.

tumultco 4y ago

Thanks for your work in developing this! Does Lexical have a feature to set arbitrary CSS on a particular selection range? I've been looking for a solution to do this since the WebKit's -[WebView applyStyle:] is deprecated as part of WebView Legacy. It isn't clear to me from glancing at the docs if RangeSelection.formatText() or other methods can handle anything or just a subset of styling code. Thanks!

afd8856 4y ago
Just mentioning SlateJS which has [decorations](https://docs.slatejs.org/concepts/09-rendering#decorations https://docs.slatejs.org/concepts/09-rendering#decorations) for this
acywatson 4y ago
Yes, we have something like this in @lexical/selection: https://github.com/facebook/lexical/blob/af099ffd9f464b523d66ae4e507e170e62e49860/packages/lexical-selection/README.md#patchstyletext https://github.com/facebook/lexical/blob/af099ffd9f464b523d6...

chx 4y ago

Does wordperfect 5.1 say anything to you :) ? You just remade it and I love you for that.

taf2 4y ago

Does it have vim keybindings? And does it need react or is there a standalone way to embed it?

zwily 4y ago
People have contributed bindings for Vue, Svelte, and Solid so far. I’m not sure what state they are in though. React is definitely the most mature binding.

kapravel 4y ago

> Prevent the DOM from being manipulated externally (i.e. extensions) to guarantee that the DOM always matches the EditorState. [1] Can you talk a bit more about how this is achieved? Is it DOM obfuscation? [1] https://discuss.prosemirror.net/t/differences-between-prosemirror-and-lexical/4557 https://discuss.prosemirror.net/t/differences-between-prosem...

bythckr 4y ago

Why not add a spell checker & word counter?