Closed Reinmar closed 1 month 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:
Fix could be too convoluted for new users? See below:
(async () => {
const editor = await ClassicEditor
.create( document.querySelector( '#editor' ) );
} )()
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>
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.
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.
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).
Our typical snippet looks like this:
I tried to transform it to:
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.