Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions modules/ROOT/nav.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -422,6 +422,14 @@
** xref:tinymce-and-cors.adoc[Cross-Origin Resource Sharing (CORS)]
* Release information
** xref:release-notes.adoc[Release notes for {productname}]
*** {productname} 8.9.0
**** xref:8.9.0-release-notes.adoc#overview[Overview]
**** xref:8.9.0-release-notes.adoc#accompanying-premium-plugin-changes[Accompanying Premium Plugin changes]
**** xref:8.9.0-release-notes.adoc#improvements[Improvements]
**** xref:8.9.0-release-notes.adoc#additions[Additions]
**** xref:8.9.0-release-notes.adoc#changes[Changes]
**** xref:8.9.0-release-notes.adoc#removed[Removed]
**** xref:8.9.0-release-notes.adoc#bug-fixes[Bug fixes]
*** {productname} 8.8.2
**** xref:8.8.2-release-notes.adoc#overview[Overview]
**** xref:8.8.2-release-notes.adoc#bug-fixes[Bug fixes]
Expand Down
239 changes: 239 additions & 0 deletions modules/ROOT/pages/8.9.0-release-notes.adoc

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions modules/ROOT/pages/changelog.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,22 @@

NOTE: This is the {productname} Community version changelog. For information about the latest {cloudname} or {enterpriseversion} Release, see: xref:release-notes.adoc[{productname} Release Notes].

== xref:8.9.0-release-notes.adoc[8.9.0 - 2026-08-31]

### Improved
* Sidebars can now be resized by dragging their edge, and their width can be configured with the new `sidebar_width` option.
// #TINYMCE-14527
* The Help dialog's Plugins tab now lists all active plugins, including custom plugins metadata provided by each plugin.
// #TINYMCE-14650
* The Help dialog's Plugins tab now lists plugins with invalid metadata as plain text.
// #TINYMCE-14730

### Fixed
* Image with empty alt text would add role='presentation' instead of adding alt text when updated.
// #TINYMCE-13738
* Opening or closing sidebars from the toolbar no longer causes the editor to scroll to the cursor.
// #TINYMCE-14765

== xref:8.8.2-release-notes.adoc[8.8.2 - 2026-07-27]

### Fixed
Expand Down
2 changes: 2 additions & 0 deletions modules/ROOT/pages/comments-callback-mode.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,8 @@ include::partial$configuration/fetch_users.adoc[leveloffset=+1]

include::partial$configuration/tinycomments_fetch_author_info.adoc[leveloffset=+1]

include::partial$configuration/tinycomments_always_show_highlights.adoc[leveloffset=+1]

include::partial$plugins/comments-open-sidebar.adoc[]

include::partial$plugins/comments-highlighting-css.adoc[]
2 changes: 2 additions & 0 deletions modules/ROOT/pages/comments-embedded-mode.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ include::partial$configuration/tinycomments_can_delete_comment.adoc[leveloffset=

include::partial$configuration/tinycomments_can_edit_comment.adoc[leveloffset=+1]

include::partial$configuration/tinycomments_always_show_highlights.adoc[leveloffset=+1]

include::partial$plugins/comments-open-sidebar.adoc[]

include::partial$plugins/comments-highlighting-css.adoc[]
117 changes: 117 additions & 0 deletions modules/ROOT/pages/customsidebar.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,19 @@ The `+icon+` specifies an icon for the sidebar toggle button. The icon should be

*Type:* `+String+`

[[resizable]]
==== `+resizable+`

The `+resizable+` specifies whether a user can resize the sidebar by dragging the edge of the sidebar. The default is `+false+`.

include::partial$misc/admon-requires-8.9v.adoc[]

When set to `+true+`, {productname} renders a resize handle and controls the width of the sidebar using the xref:customsidebar.adoc#sidebar_width[`+sidebar_width+`], xref:customsidebar.adoc#sidebar_min_width[`+sidebar_min_width+`], and xref:customsidebar.adoc#sidebar_max_width[`+sidebar_max_width+`] options. The content of a sidebar registered with `+resizable+` set to `+true+` needs to follow the width of the parent element. For information, see: xref:customsidebar.adoc#styling-a-resizable-sidebar[Styling a resizable sidebar].

When `+resizable+` is omitted or set to `+false+`, {productname} does not render a resize handle, ignores the three sidebar width options, and renders the sidebar at the width defined by the content styles of that sidebar.

*Type:* `+Boolean+`

[[onSetup]]
==== `+onSetup+`

Expand Down Expand Up @@ -62,13 +75,113 @@ The `+onHide+` specifies a function to be called when the panel is hidden. It pa

The `+element():HTMLElement+` function returns the root element of the sidebar panel.

[[resizable-sidebars]]
== Resizable sidebars

include::partial$misc/admon-requires-8.9v.adoc[]

A user can resize a sidebar by dragging the edge of the sidebar toward or away from the editable area. {productname} renders a resize handle only for sidebars registered with the xref:customsidebar.adoc#resizable[`+resizable+`] property set to `+true+`.

The sidebars registered by the xref:introduction-to-tiny-comments.adoc[Comments] and xref:tinymceai.adoc[{productname} AI] plugins are resizable by default. The {productname} AI sidebars are not resizable when xref:tinymceai.adoc#tinymceai_sidebar_type[`+tinymceai_sidebar_type+`] is set to `+'floating'+`. Sidebars registered through `+addSidebar+` are not resizable by default, so a custom sidebar created before {productname} 8.9 renders as it did previously.

The xref:customsidebar.adoc#sidebar_width[`+sidebar_width+`], xref:customsidebar.adoc#sidebar_min_width[`+sidebar_min_width+`], and xref:customsidebar.adoc#sidebar_max_width[`+sidebar_max_width+`] options apply to every resizable sidebar in an editor. {productname} cannot set a separate width for an individual sidebar.

[[styling-a-resizable-sidebar]]
=== Styling a resizable sidebar

The content styles of a sidebar that is not resizable determine how wide the sidebar renders.

[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
sidebar_show: 'mysidebar',
setup: (editor) => {
editor.ui.registry.addSidebar('mysidebar', {
tooltip: 'My sidebar',
icon: 'comment',
onShow: (api) => {
const container = document.createElement('div');
container.style.width = '600px';
api.element().appendChild(container);
},
});
}
});
----

{productname} sets the width of a resizable sidebar, so the content styles need to follow the width of the parent element rather than set a width. Set the width of the content to `+100%+` so that the content inherits the width from xref:customsidebar.adoc#element[`+api.element()+`].

[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
sidebar_show: 'mysidebar',
sidebar_width: 500,
setup: (editor) => {
editor.ui.registry.addSidebar('mysidebar', {
tooltip: 'My sidebar',
icon: 'comment',
resizable: true,
onShow: (api) => {
const container = document.createElement('div');
container.style.width = '100%';
api.element().appendChild(container);
},
});
}
});
----

IMPORTANT: A sidebar whose content styles set a fixed width does not render correctly when `+resizable+` is set to `+true+`. Update the content styles to `+100%+` before enabling the property.

[[persisting-the-sidebar-width]]
=== Persisting the sidebar width

{productname} does not store the width a user drags a sidebar to. To keep a width between editor loads, store the width reported by the xref:events.adoc#editor-core-events[`+SidebarResized+`] event and pass the stored value to xref:customsidebar.adoc#sidebar_width[`+sidebar_width+`] when the editor is next created.

[source,js]
----
const storedWidth = window.localStorage.getItem('sidebar-width');

tinymce.init({
selector: 'textarea', // change this value according to your HTML
sidebar_show: 'mysidebar',
sidebar_width: storedWidth ? parseInt(storedWidth, 10) : 440,
setup: (editor) => {
editor.ui.registry.addSidebar('mysidebar', {
tooltip: 'My sidebar',
icon: 'comment',
resizable: true,
onShow: (api) => {
const container = document.createElement('div');
container.style.width = '100%';
api.element().appendChild(container);
},
});

editor.on('SidebarResized', (e) => {
window.localStorage.setItem('sidebar-width', e.width);
});
}
});
----

== Options

include::partial$configuration/sidebar_max_width.adoc[leveloffset=+1]

include::partial$configuration/sidebar_min_width.adoc[leveloffset=+1]

include::partial$configuration/sidebar_show.adoc[leveloffset=+1]

include::partial$configuration/sidebar_width.adoc[leveloffset=+1]

[[example-inside-the-tinymceinit]]
== Example inside the tinymce.init

For information on creating a sidebar that a user can resize, see: xref:customsidebar.adoc#resizable-sidebars[Resizable sidebars].

[source,js]
----
tinymce.init({
Expand All @@ -78,6 +191,7 @@ tinymce.init({
editor.ui.registry.addSidebar('mysidebar', {
tooltip: 'My sidebar',
icon: 'comment',
resizable: true,
onSetup: (api) => {
console.log('Render panel', api.element());
return () => {
Expand All @@ -98,12 +212,15 @@ tinymce.init({

== Example inside a TinyMCE plugin

For information on creating a sidebar that a user can resize, see: xref:customsidebar.adoc#resizable-sidebars[Resizable sidebars].

[source,js]
----
tinymce.PluginManager.add('myplugin', (editor) => {
editor.ui.registry.addSidebar('mysidebar', {
tooltip: 'My sidebar',
icon: 'comment',
resizable: true,
onSetup: (api) => {
console.log('Render panel', api.element());
return () => {
Expand Down
2 changes: 2 additions & 0 deletions modules/ROOT/pages/events.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,8 @@ The following events are provided by the {productname} editor.
|LanguageLoadError |`+{ message: string }+` |Fired when the editor language pack fails to load.
|BeforeRenderUI |N/A |Fired before the theme UI is rendered.
|ToggleSidebar |N/A |Fired when a sidebar is toggled opened/closed.
|SidebarResizeStart |N/A |Fired when a user starts dragging the resize handle of a sidebar. This event requires the sidebar to be registered with the xref:customsidebar.adoc#resizable[`+resizable+`] property set to `+true+`.
|SidebarResized |`+{ width: number }+` |Fired when a user stops dragging the resize handle of a sidebar. The `+width+` is the width of the sidebar, in pixels, after the resize. This event requires the sidebar to be registered with the xref:customsidebar.adoc#resizable[`+resizable+`] property set to `+true+`.
|longpress |(Same data as the native https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event[touchstart event]) |Fired when a long press occurs on a touch device inside the editor.
|tap |(Same data as the native https://developer.mozilla.org/en-US/docs/Web/API/Document/touchend_event[touchend event]) |Fired when a tap occurs on a touch device inside the editor (simulated event similar to click).
|ScrollContent |(Same data as the native https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event[scroll event]) |(iframe mode only) Fired when the content inside an iframe window has been scrolled.
Expand Down
8 changes: 7 additions & 1 deletion modules/ROOT/pages/release-notes.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ This section lists the releases for {productname} {productmajorversion} and the

[cols="1,1"]
|===
a|
[.lead]
xref:8.9.0-release-notes.adoc#overview[{productname} 8.9.0]

Release notes for {productname} 8.9.0

a|
[.lead]
xref:8.8.2-release-notes.adoc#overview[{productname} 8.8.2]
Expand Down Expand Up @@ -128,5 +134,5 @@ xref:8.0-release-notes.adoc#overview[{productname} 8.0.0]
Release notes for {productname} 8.0.0

// Uncomment the dummy cell when the number of cells in the table is odd to ensure the table renders correctly.
// a|
a|
|===
6 changes: 4 additions & 2 deletions modules/ROOT/pages/tinymceai-chat.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,8 @@ To add custom external sources for users to select from, configure:

Full schemas, return types, and examples are documented under xref:tinymceai.adoc#tinymceai_chat_fetch_sources[Chat configuration options].

To apply a custom source to every new conversation without requiring users to select it, return an object from xref:tinymceai.adoc#tinymceai_chat_fetch_sources[`+tinymceai_chat_fetch_sources+`] and list the source ID in its `+defaults+` property.

[source,js]
----
tinymce.init({
Expand All @@ -176,9 +178,9 @@ tinymce.init({
}
],
tinymceai_chat_fetch_source: async (id) => {
const res = await fetch(`/api/documents/\$\{id\}`);
const res = await fetch(`/api/documents/${id}`);
const blob = await res.blob();
const filename = `\$\{id\}.pdf`;
const filename = `${id}.pdf`;
return { type: 'file', file: new File([blob], filename, { type: blob.type }) };
},
// Required for authentication
Expand Down
4 changes: 2 additions & 2 deletions modules/ROOT/pages/tinymceai.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,9 @@ tinymce.init({
}
],
tinymceai_chat_fetch_source: async (id) => {
const res = await fetch(`/api/documents/\$\{id\}`);
const res = await fetch(`/api/documents/${id}`);
const blob = await res.blob();
const filename = `\$\{id\}.pdf`;
const filename = `${id}.pdf`;
return { type: 'file', file: new File([blob], filename, { type: blob.type }) };
},
tinymceai_quickactions_custom: [
Expand Down
65 changes: 64 additions & 1 deletion modules/ROOT/partials/commands/tinymceai-cmds.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ NOTE: These commands work regardless of xref:tinymceai.adoc#tinymceai_sidebar_ty
[[tinymceai-plugin-commands]]
== TinyMCE AI plugin commands

The xref:tinymceai.adoc[`tinymceai`] plugin registers the following editor commands. They mirror the Quick Actions and related UI: each invocation returns immediately while the plugin performs any network and UI work asynchronously.
The xref:tinymceai.adoc[`tinymceai`] plugin registers the following editor commands. They mirror the Quick Actions, Chat, and Review user interface: each invocation returns immediately while the plugin performs any network and UI work asynchronously.

[cols="2,2,3",options="header"]
|===
Expand All @@ -46,8 +46,21 @@ The xref:tinymceai.adoc[`tinymceai`] plugin registers the following editor comma
|`+TinyMCEAIQuickActionsSummarize+` | |Opens Chat with the built-in **Summarize** prompt.
|`+TinyMCEAIQuickActionsHighlightKeyPoints+` | |Opens Chat with the built-in **Highlight key points** prompt.
|`+TinyMCEAIChatPrompt+` |`+{ prompt, displayedPrompt? }+` |Opens the Chat sidebar if needed, then sends `+prompt+` to the back end. Optional `+displayedPrompt+` controls the label shown in the chat UI when it differs from the text sent to the model.
|`+TinyMCEAIReviewProofread+` | |Runs the **Proofread** review.
|`+TinyMCEAIReviewClarity+` | |Runs the **Improve clarity** review.
|`+TinyMCEAIReviewReadability+` | |Runs the **Improve readability** review.
|`+TinyMCEAIReviewMakeLonger+` | |Runs the **Change length** review with the **Longer** option.
|`+TinyMCEAIReviewMakeShorter+` | |Runs the **Change length** review with the **Shorter** option.
|`+TinyMCEAIReviewToneCasual+` | |Runs the **Adjust tone and style** review with the **Casual** tone.
|`+TinyMCEAIReviewToneDirect+` | |Runs the **Adjust tone and style** review with the **Direct** tone.
|`+TinyMCEAIReviewToneFriendly+` | |Runs the **Adjust tone and style** review with the **Friendly** tone.
|`+TinyMCEAIReviewToneConfident+` | |Runs the **Adjust tone and style** review with the **Confident** tone.
|`+TinyMCEAIReviewToneProfessional+` | |Runs the **Adjust tone and style** review with the **Professional** tone.
|`+TinyMCEAIReviewCustom+` |`+String+`, `+{ prompt, model, name }+`, or `+{ id, value }+` |Runs a review from a custom prompt, or runs an xref:tinymceai.adoc#integrator-defined-reviews[integrator-defined review] by identifier. See <<tinymceai-review-custom-values,Values for `+TinyMCEAIReviewCustom+`>>.
|===

Each `+TinyMCEAIReview…+` command opens the Review sidebar and runs the review, with the same result as selecting that review in the sidebar. Running a review command while another review is in progress stops the earlier review and starts the requested one.

[NOTE]
====
Command names use the `+TinyMCEAIQuickActions…+` prefix (with an `+s+`) for **Explain**, **Summarize**, and **Highlight key points** — these map to the xref:tinymceai.adoc#tinymceai_quickactions_chat_prompts[chat prompts] submenu, not to standalone `+TinyMCEAIQuickAction…+` spellings.
Expand All @@ -72,3 +85,53 @@ tinymce.activeEditor.execCommand('TinyMCEAIChatPrompt', false, {
displayedPrompt: 'Explain'
});
----

.Example: running built-in reviews
[source,js]
----
tinymce.activeEditor.execCommand('TinyMCEAIReviewProofread');

tinymce.activeEditor.execCommand('TinyMCEAIReviewToneProfessional');
----

[[tinymceai-review-custom-values]]
=== Values for `+TinyMCEAIReviewCustom+`

The `+TinyMCEAIReviewCustom+` command accepts three forms of third argument.

A `+String+` runs a review from that prompt on the default model, titled **Custom review**:

[source,js]
----
tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, 'Check for passive voice');
----

An object with a `+prompt+` property runs a review from a custom prompt:

* `+prompt+` (`+String+`): The prompt sent to the model. This property is required.
* `+model+` (optional `+String+`): The model that runs the review. When omitted, the review runs on the model set by xref:tinymceai.adoc#tinymceai_default_model[`+tinymceai_default_model+`]. For the available model identifiers, see xref:tinymceai-models.adoc[AI Models].
* `+name+` (optional `+String+`): The title shown above the review. When omitted, the title is **Custom review**.

[source,js]
----
tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, {
prompt: 'Check the document for passive voice',
model: 'agent-1',
name: 'Passive voice'
});
----

An object with an `+id+` property runs an xref:tinymceai.adoc#integrator-defined-reviews[integrator-defined review] configured in xref:tinymceai.adoc#tinymceai_reviews[`+tinymceai_reviews+`]:

* `+id+` (`+String+`): The `+id+` of the integrator-defined review. This property is required.
* `+value+` (optional `+String+`): The value passed to the review. A `+simple+` review takes no value. For a `+list+` review, the value must match one of the review's `+options+` values; when omitted, the first option is used. For an `+input+` review, the value is the text substituted into the prompt, and it is required.

[source,js]
----
tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, {
id: 'integrator-list-review',
value: 'swedish'
});
----

When the value does not match any of these forms, {productname} logs an error to the browser console and runs no review. This also applies when the prompt or identifier is blank, when no integrator-defined review matches the identifier, when a `+list+` review value is not one of its options, and when an `+input+` review is run without a value.
Loading
Loading