Skip to content

Commit f24901e

Browse files
committed
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)
1 parent a17deac commit f24901e

1 file changed

Lines changed: 41 additions & 7 deletions

File tree

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

Lines changed: 41 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,21 @@ Covered in this section:
1314
* xref:component-binding[Component binding]
1415
* xref:event-binding[Event binding]
1516
17+
[[supported-versions]]
18+
== Supported versions
19+
20+
[cols="1,1", options="header"]
21+
|===
22+
|`+@tinymce/tinymce-svelte+`
23+
|Svelte
24+
25+
|4.x
26+
|5 or later
27+
28+
|\<= 3.x
29+
|4 (also compatible with Svelte 5 in legacy mode)
30+
|===
31+
1632
[[configuring-the-tinymce-svelte-integration]]
1733
== Configuring the {productname} Svelte integration
1834

@@ -254,9 +270,9 @@ let text = '';
254270

255271
Functions can be bound to editor events, such as:
256272

257-
[source,jsx]
273+
[source,svelte]
258274
----
259-
<Editor on:resizeeditor={this.handlerFunction} />
275+
<Editor resizeeditor={handlerFunction} />
260276
----
261277

262278
When the handler is called (*handlerFunction* in this example), it is called with two arguments:
@@ -265,8 +281,26 @@ When the handler is called (*handlerFunction* in this example), it is called wit
265281

266282
`+editor+`:: A reference to the editor.
267283

284+
=== Example of event binding
285+
286+
[source,svelte]
287+
----
288+
<script>
289+
import Editor from '@tinymce/tinymce-svelte';
290+
291+
function handlerFunction(event, editor) {
292+
console.log('Editor event:', event);
293+
console.log('Editor instance:', editor);
294+
}
295+
</script>
296+
297+
<main>
298+
<Editor resizeeditor={handlerFunction} />
299+
</main>
300+
----
301+
268302
[TIP]
269-
Ensure event names are specified in lower-case (event names are case-sensitive).
303+
Specify event names in lower-case (event names are case-sensitive).
270304

271305
The following events are available:
272306

@@ -282,10 +316,10 @@ The following events are available:
282316
* `+change+`
283317
* `+clearundos+`
284318
* `+click+`
285-
* `+CommentChange+`
286-
* `+CompositionEnd+`
287-
* `+CompositionStart+`
288-
* `+CompositionUpdate+`
319+
* `+commentchange+`
320+
* `+compositionend+`
321+
* `+compositionstart+`
322+
* `+compositionupdate+`
289323
* `+contextmenu+`
290324
* `+copy+`
291325
* `+cut+`

0 commit comments

Comments
 (0)