ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

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

Open Reinmar opened this issue 2 years ago • 4 comments

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.

Reinmar avatar Aug 03 '23 07:08 Reinmar

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' ) );
           } )()

Witoso avatar Aug 03 '23 07:08 Witoso

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>

LukaszGudel avatar Aug 03 '23 09:08 LukaszGudel

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.

filipsobol avatar Aug 16 '23 11:08 filipsobol

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 avatar Aug 16 '24 01:08 CKEditorBot

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).

CKEditorBot avatar Oct 01 '24 23:10 CKEditorBot