Improve the CSS situation

[ktecho]

(this comes from https://github.com/umaranis/svelte-lexical/issues/51#issuecomment-1941552464, which is a closed issue, so I opened a new one here so we can comment on this)

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

1- Conflicts with other libraries (https://github.com/umaranis/svelte-lexical/issues/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?

I could help with a PR if you think this is a good idea.