ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.57k stars 3.7k forks source link

Could we replace all .then() use in the docs with await? #14729

Closed Reinmar closed 1 month ago

Reinmar commented 1 year ago

Our typical snippet looks like this:

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

I tried to transform it to:

<script>
    await ClassicEditor
        .create( document.querySelector( '#editor' ) );
</script>

But it yields an error.

Example: https://jsfiddle.net/cu5jx3hr/

Is there a way to use await in our examples? I'd make them so much nicer, especially when someone needs to store the editor instance.

Witoso commented 1 year ago

This is something that @filipsobol planned to show in the new tutorial https://github.com/ckeditor/ckeditor5/blob/ck/14583-add-tutorial-for-new-users/docs/tutorial/editor.md#creating-an-editor :) 

But there we have a benefit of Vite and top level await. As you noticed:

You can use the await keyword on its own (outside of an async function) at the top level of a module. This means that modules with child modules that use await will wait for the child modules to execute before they themselves run, all while not blocking other child modules from loading.

Fix could be too convoluted for new users? See below:

       (async () => {
            const editor = await ClassicEditor
            .create( document.querySelector( '#editor' ) );
           } )()
LukaszGudel commented 1 year ago

Top level awaits can be used in the browsers in modules. The following should work:

<script type="module">
        const editor = await ClassicEditor
            .create( document.querySelector( '#editor' ) );
</script>
filipsobol commented 1 year ago

I think it's worth pointing out that the top-level await only works in ESM. That's why to use it (as @LukaszGudel mentioned) we need to use <script type="module"> in the browser or "type": "module" in the package.json file in the Node project.

In the tutorial @Witoso mentioned above, I allowed myself to use top-level await because the repository I created for it uses ESM ("type":"module"). However, it may not work in other projects.

This is not a simple syntax change. We should make an informed decision and test this format in starter projects (e.g. from the online builder) before changing the documentation.

CKEditorBot commented 2 months ago

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

CKEditorBot commented 1 month ago

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).