Skip to content

Commit 93fa9b1

Browse files
DOC-3411 - Update Svelte integration docs for tinymce-svelte 4.x / Svelte 5 (#4063)
* DOC-3411: Update Svelte integration docs for tinymce-svelte 4.x / Svelte 5 Update the Svelte technical reference to reflect breaking changes in @tinymce/tinymce-svelte 4.0.0 (Svelte 5 support): - Add supported versions table (4.x → Svelte 5+, 3.x → Svelte 4) - Update event binding: remove on: directive prefix (Svelte 5 syntax) - Add complete event binding example with handler signature - Fix mixed-case event names to lowercase (matching actual prop names) * Update modules/ROOT/partials/integrations/svelte-tech-ref.adoc Co-authored-by: tiny-ben-tran <ben.tran@tiny.cloud> * Update modules/ROOT/partials/integrations/svelte-tech-ref.adoc Co-authored-by: tiny-ben-tran <ben.tran@tiny.cloud> * Update modules/ROOT/partials/integrations/svelte-tech-ref.adoc Co-authored-by: tiny-ben-tran <ben.tran@tiny.cloud> --------- Co-authored-by: tiny-ben-tran <ben.tran@tiny.cloud>
1 parent a17deac commit 93fa9b1

1 file changed

Lines changed: 27 additions & 7 deletions

File tree

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

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
Covered in this section:
22

3+
* xref:supported-versions[Supported versions]
34
* xref:configuring-the-tinymce-svelte-integration[Configuring the {productname} Svelte integration]
45
** xref:apikey[apiKey]
56
** xref:licensekey[licenseKey]
@@ -13,6 +14,7 @@ Covered in this section:
1314
* xref:component-binding[Component binding]
1415
* xref:event-binding[Event binding]
1516
17+
1618
[[configuring-the-tinymce-svelte-integration]]
1719
== Configuring the {productname} Svelte integration
1820

@@ -254,9 +256,9 @@ let text = '';
254256

255257
Functions can be bound to editor events, such as:
256258

257-
[source,jsx]
259+
[source,svelte]
258260
----
259-
<Editor on:resizeeditor={this.handlerFunction} />
261+
<Editor resizeeditor={handlerFunction} />
260262
----
261263

262264
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
265267

266268
`+editor+`:: A reference to the editor.
267269

270+
=== Example of event binding
271+
272+
[source,svelte]
273+
----
274+
<script>
275+
import Editor from '@tinymce/tinymce-svelte';
276+
277+
function eventHandler(event, editor) {
278+
console.log('Editor event:', event);
279+
console.log('Editor instance:', editor);
280+
}
281+
</script>
282+
283+
<main>
284+
<Editor resizeeditor={this.eventHandler} />
285+
</main>
286+
----
287+
268288
[TIP]
269-
Ensure event names are specified in lower-case (event names are case-sensitive).
289+
Specify event names in lower-case (event names are case-sensitive).
270290

271291
The following events are available:
272292

@@ -282,10 +302,10 @@ The following events are available:
282302
* `+change+`
283303
* `+clearundos+`
284304
* `+click+`
285-
* `+CommentChange+`
286-
* `+CompositionEnd+`
287-
* `+CompositionStart+`
288-
* `+CompositionUpdate+`
305+
* `+commentchange+`
306+
* `+compositionend+`
307+
* `+compositionstart+`
308+
* `+compositionupdate+`
289309
* `+contextmenu+`
290310
* `+copy+`
291311
* `+cut+`

0 commit comments

Comments
 (0)