search

facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
17.5k stars 1.45k forks source link

VanillaJS Codesandbox #1845

Closed zurfyx closed 1 month ago

zurfyx commented 2 years ago

Discussed in https://github.com/facebook/lexical/discussions/1751

Originally posted by **MustafaEminn** April 15, 2022 This will be good for developers and contributors.

We currently have Plain Text and Rich Text React examples. We could potentially create a third one for a simple VanillaJS plain text app.

sereneinserenade commented 2 years ago

@zurfyx I'd love to work on this! How should I proceed, do we want something like https://lexical-playground.vercel.app/ in VanillaJS or just a raw implementation ?

zurfyx commented 2 years ago

Thanks! Sort of, yeah, what I had in mind was even simpler than that - just a codesandbox like https://codesandbox.io/s/lexical-plain-text-example-g932e

Benbinbin commented 10 months ago

Thanks! Sort of, yeah, what I had in mind was even simpler than that - just a codesandbox like https://codesandbox.io/s/lexical-plain-text-example-g932e

Thanks for the plain text example! Any codesandbox about the rich text editor example?

shivajivarma commented 10 months ago

Hi Everyone,

Is vanilla JS example available? That would really be helpful. Thanks.

lacroixdavid1 commented 10 months ago

@sereneinserenade I wish the whole playground was in vanilla JS

vadimkantorov commented 5 months ago

I think this is extremely important for users without webdev background (like me) who wish to roll something quick without first having to understand npm/esm/amd/packaging ecosystem and installing tons of stuffs.

Does anybody have such an example? https://github.com/facebook/lexical/discussions/5367

Thank yoU!

vadimkantorov commented 5 months ago

Basically, I'm looking to download a release from https://github.com/facebook/lexical/releases, somehow convert typescript files into javascript files (and skipping react-related stuff) and being able to import lexical from HTML/JS somehow to be served by browser using file:/// protocol

Having self-contained instructions would help tremendously folks without webdev-background (like me) who are struggling to get npm do what is needed to have the simplest example running in-browser

vadimkantorov commented 5 months ago

Would be nice to have sth like https://github.com/quilljs/quill#quickstart - a small, self-contained vanilla HTML/JS snippet loading the editor from CDN + also a way to grab the release tar and serve the JS contents from a static hosting (such as GitHub Pages).

vadimkantorov commented 5 months ago

Somehow such index.html opened in Chrome via file:/// shows Hello World!

However, it seems that this jsdelivr package is not published by Lexical and does not have in mind in-browser experience (e.g. the Lexical.min.js relies on process.env.NODE_ENV and require, the Lexical.prod.js assumes exports variable is available).

<html>
    <body>
        <script>exports = {};</script>
        <script src="https://cdn.jsdelivr.net/npm/lexical@0.12.5/Lexical.prod.js"></script>
        <div id="editor"></div>

        <script>
            const {createEditor, $getRoot, $getSelection, $createParagraphNode, $createTextNode} = exports;

            const config = {
              namespace: 'MyEditor',
              onError: console.error
            };

            const editor = createEditor(config);
            const contentEditableElement = document.getElementById('editor');

            editor.setRootElement(contentEditableElement);

            editor.update(() => {
              const root = $getRoot();// Get the RootNode from the EditorState
              const selection = $getSelection();// Get the selection from the EditorState
              const paragraphNode = $createParagraphNode();// Create a new ParagraphNode
              const textNode = $createTextNode('Hello world');// Create a new TextNode
              paragraphNode.append(textNode);// Append the text node to the paragraph
              root.append(paragraphNode);// Finally, append the paragraph to the root
            });
        </script>
    </body>
</html>

Is it possible to get some basic toolbars without React? (even better would be the full https://playground.lexical.dev/ - like experience) https://lexical.dev/docs/getting-started/quick-start does not have a complete example yet :(

Also, is it possible to have a React-based playground example which does not depend on having a local npm environment?

etrepum commented 5 months ago

The exports mess is because you are trying to use a commonjs module, you can import it as an ecmascript module and it will be a lot more natural. Toolbars are just buttons that do stuff with the editor (usually dispatching commands, but could be editor.update directly).

HTML example with esm import and buttons ```html
```

If it takes a long time to fetch packages from npm locally maybe it would be better to use a cloud hosted development environment? I doubt the team has time to support this use case when it's more of a toolkit for building editors, not something off-the-shelf that you would use directly in a project.

Xananax commented 4 months ago

I still use a build system (Parcel), but I've worked out how to initialize and set up lexical without React by looking at the tests and the react code.

Some code here: https://gitlab.com/Xananax/supabase-comments/-/blob/main/src/framework/bindLexical.ts

I use it in a web component here: https://gitlab.com/Xananax/supabase-comments/-/blob/main/src/elements/RichTextEditor.ts

It's not vanilla JS, but I believe it still helps by showing how to load some plugins, how to preload markdown, and how to get markdown out. It's a longer and more convoluted example, but more real-life than what @etrepum posted.

StyleT commented 2 months ago

This was already fixed in https://github.com/facebook/lexical/pull/5668 👍

vadimkantorov commented 2 months ago

This was already fixed in #5668 👍

What I think will be great is a true vanilla JS example, i.e. no TypeScript / React / npm - just some tarball/zip release file with ts-precompiled-into-js and an HTML/JS example (this precompilation may be a script runnable as a GitHub Action which will precompile all this), ideally requiring no web server runnable from file:/// in the browser - similar to quill

StyleT commented 2 months ago

This was already fixed in #5668 👍

What I think will be great is a true vanilla JS example, i.e. no TypeScript / React / npm - just some tarball/zip release file with ts-precompiled-into-js and an HTML/JS example (this precompilation may be a script runnable as a GitHub Action which will precompile all this), ideally requiring no web server runnable from file:/// in the browser - similar to quill

So how we have vite in the example for 2 reasons: HMR (to simplify UX when doing edits to the example) and TS compilation (type safety catches silly bugs). Additionally you don’t even need to download anything, VSCode is available right in your browser. Dunno if your suggestion is really simpler for the end user.

However, I would recommend you playing with vite build, it shall be able to generate code you’re looking for in non-minified mode. I think this is the right direction in this matter, then we can even run it from GitHub actions and attach as asset to release.

Try to solve it ;)

vadimkantorov commented 2 months ago

I hacked it and somewhat solved it in my repo https://github.com/vadimkantorov/lexical-playground-only, but I had to ask for assistance of a frontender friend to help me out with some details of npm/vite as comprehending the various module systems in JS is a quite non-trivial pre-requisite if someone without webdev background tries to hack something up (myself being ML dev). So my suggestion is toward someone comfortable writing up some HTML/CSS code, but not necessarily knowledgeable/comfortable with all the modern tooling for webdev. This would also simplify showcasing Lexical in various html/js in-browser shareable playgrounds (much faster round-trip than the need of rolling full vm / npm / vite).

I agree that vite build at the end solves it, what I'm proposing is to have it as GitHub Actions pushing the vite-produced artifacts as a release tarball + have a true vanilla HTML/JS example using these bits (as I did in https://github.com/vadimkantorov/lexical-playground-only and usage example in https://github.com/vadimkantorov/moncms - you can also see that in the assets dir I so far have not found a way to embed all the fonts/image resources)

StyleT commented 1 month ago

Closing this in favor of #5840 (reduced scope) as codesandbox is available now https://github.com/facebook/lexical/pull/5668