DOC-3411 - Update Svelte integration docs for tinymce-svelte 4.x / Svelte 5

modules/ROOT/partials/integrations/svelte-tech-ref.adoc

@@ -1,5 +1,6 @@
 Covered in this section:
 
+* xref:supported-versions[Supported versions]
 * xref:configuring-the-tinymce-svelte-integration[Configuring the {productname} Svelte integration]
 ** xref:apikey[apiKey]
 ** xref:licensekey[licenseKey]
@@ -13,6 +14,7 @@ Covered in this section:
 * xref:component-binding[Component binding]
 * xref:event-binding[Event binding]
 
+
 [[configuring-the-tinymce-svelte-integration]]
 == Configuring the {productname} Svelte integration
 
@@ -254,9 +256,9 @@ let text = '';
 
 Functions can be bound to editor events, such as:
 
-[source,jsx]
+[source,svelte]
 ----
-<Editor on:resizeeditor={this.handlerFunction} />
+<Editor resizeeditor={handlerFunction} />
 ----
 
 When the handler is called (*handlerFunction* in this example), it is called with two arguments:
@@ -265,8 +267,26 @@ When the handler is called (*handlerFunction* in this example), it is called wit
 
 `+editor+`:: A reference to the editor.
 
+=== Example of event binding
+
+[source,svelte]
+----
+<script>
+import Editor from '@tinymce/tinymce-svelte';
+
+function eventHandler(event, editor) {
+  console.log('Editor event:', event);
+  console.log('Editor instance:', editor);
+}
+</script>
+
+<main>
+  <Editor resizeeditor={this.eventHandler} />
+</main>
+----
+
 [TIP]
-Ensure event names are specified in lower-case (event names are case-sensitive).
+Specify event names in lower-case (event names are case-sensitive).
 
 The following events are available:
 
@@ -282,10 +302,10 @@ The following events are available:
 * `+change+`
 * `+clearundos+`
 * `+click+`
-* `+CommentChange+`
-* `+CompositionEnd+`
-* `+CompositionStart+`
-* `+CompositionUpdate+`
+* `+commentchange+`
+* `+compositionend+`
+* `+compositionstart+`
+* `+compositionupdate+`
 * `+contextmenu+`
 * `+copy+`
 * `+cut+`