Getting the value

[PaddiM8]

I might have missed something obvious, but I can't quite figure out how to get the value of the editor (eg. during a form submission). The lexical react examples uses the OnChange plugin, which doesn't exist here. Perhaps there should be some example showing this somewhere, if there is a good way to do it yet?

[umaranis]

Hi @PaddiM8 ,
Have a look at #45
Does this work for you?

[PaddiM8]

Ahh, that seems to work. Thanks! I assume there isn't some integrated way of converting editor state to HTML at this point in time? I need to store the editor state (as JSON) in a database and then turn that into HTML when rendering the page. Currently trying the regular lexical package for that.

[umaranis]

Hi @PaddiM8 ,
Wondering why do you want to convert to HTML.

If you want to load the state in the editor from database, you can simply call composer.getEditor().setEditorState(state).

Here is sample code for loading editor state from text (where text is a string fetched from the database):

let state = composer.getEditor().parseEditorState(text);
composer.getEditor().setEditorState(state);

Is this what you were looking for?

[PaddiM8]

I want to display the rich text content on a static page actually. It seems like I only need to import lexical/html though so that's fine I guess. Thanks for helping!

[ktecho]

Hey @PaddiM8

Could you tell me what are you doing to show HTML on a webpage without showing the editor?

I'm currently using this 0afbc90, which seems to work fine, but my problem is that the HTML is not the same than the one shown in the editor. What I'm seeing is that when showing the editor, both lexical.css and PlaygroundEditorTheme.css are used, but when showing the HTML text, I can only import lexical.css because PlaygroundEditorTheme.css classes don't match the standard html tags (<h1>, <p>, ...).

@umaranis Have you thought a better way to do this?

[umaranis]

Hi @ktecho ,

I have not explored displaying HTML without the editor. I can see that you have tried using the headless lexical package to achieve this.

If it works for you, I will appreciate if you could submit a PR. Thanks.

[PaddiM8]

I think I'm doing something similar and import the CSS in some way to get the same styling

[ktecho]

In my opinion, we should make something to fix the CSS mess. This are the problems I'm seeing:

1- Conflicts with other libraries (#71). I fixed this partially by nesting all the lexical.css classes inside another class:

.lexical-div {
    body {/**/}

    header {/**/}

    header a {/**/}

    header a {/**/}
}

In this way, I put the Lexical editor inside a lexical-div div, and classes in this file only affect the editor. If I don't add this, the lexical.css file is changing a lot of classes very used in apps, like body, dropdown, modal, switch, toolbar, etc.

But I still have the reverse problem: external libraries changing svelte-lexical behaviour by defining classes like modal, dropdown, etc.

2- Output of Lexical converted to HTML cannot be displayed in the same way as it's in the editor, because in PlaygroundEditorTheme.css, all the classes are defined with a prefix. So I'm thinking on just duplicating the PlaygroundEditorTheme.css file and removing the prefix, so it can be used in standard html... But that's ugly.

So, to fix both problems, I think we should do this:

1- In lexical.css, put lexical-specific class names, like it's done at the end of the file with Modal__content or ToolbarPlugin__dialogActions. In this way, external libraries cannot break this plugin, and this plugin doesn't break external components.

2- In PlaygroundEditorTheme.css, we remove the prefix (changes in code needed, of course) and wrap everything inside a super-class, so we don't have the problem we have in 1).

@umaranis what do you think?