TINYDOC-3570 - TinyMCE 8.9 Release Documentation and Community Changelog

modules/ROOT/nav.adoc

@@ -424,20 +424,12 @@
 ** 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#new-premium-plugin<s>[New Premium Plugin<s>]
-**** xref:8.9.0-release-notes.adoc#new-open-source-plugin<s>[New Open Source Plugin<s>]
 **** xref:8.9.0-release-notes.adoc#accompanying-premium-plugin-changes[Accompanying Premium Plugin changes]
-**** xref:8.9.0-release-notes.adoc#accompanying-premium-plugin-end-of-life-announcement[Accompanying Premium Plugin end-of-life announcement]
-**** xref:8.9.0-release-notes.adoc#accompanying-open-source-plugin-end-of-life-announcement[Accompanying Open Source Plugin end-of-life announcement]
-**** xref:8.9.0-release-notes.adoc#accompanying-enhanced-skins-and-icon-packs-changes[Accompanying Enhanced Skins & Icon Packs 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]
-**** xref:8.9.0-release-notes.adoc#security-fixes[Security fixes]
-**** xref:8.9.0-release-notes.adoc#deprecated[Deprecated]
-**** xref:8.9.0-release-notes.adoc#known-issues[Known issues]
 *** {productname} 8.8.2
 **** xref:8.8.2-release-notes.adoc#overview[Overview]
 **** xref:8.8.2-release-notes.adoc#bug-fixes[Bug fixes]

modules/ROOT/pages/changelog.adoc

@@ -4,9 +4,21 @@
 
 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 - <YYYY-MM-DD>]
+== xref:8.9.0-release-notes.adoc[8.9.0 - 2026-08-31]
 
-//TODO
+### 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]
 

modules/ROOT/pages/comments-callback-mode.adoc

@@ -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[]

modules/ROOT/pages/comments-embedded-mode.adoc

@@ -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[]

modules/ROOT/pages/customsidebar.adoc

@@ -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+`
 
@@ -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({
@@ -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 () => {
@@ -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 () => {

modules/ROOT/pages/events.adoc

@@ -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.

modules/ROOT/pages/tinymceai-chat.adoc

@@ -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({
@@ -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

modules/ROOT/pages/tinymceai.adoc

@@ -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: [

modules/ROOT/partials/commands/tinymceai-cmds.adoc

@@ -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"]
 |===
@@ -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.
@@ -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.

modules/ROOT/partials/configuration/sidebar_max_width.adoc

@@ -0,0 +1,41 @@
+[[sidebar_max_width]]
+== `+sidebar_max_width+`
+
+This option sets the largest width, in pixels, that a user can drag the sidebar to.
+
+The option applies only to sidebars registered with the `+resizable+` property set to `+true+`. A user cannot resize a sidebar registered without that property, and {productname} ignores this option.
+
+This option restricts dragging only. This option does not restrict the width set by xref:customsidebar.adoc#sidebar_width[`+sidebar_width+`], so a sidebar can open wider than the value set here.
+
+include::partial$misc/admon-iframe-only.adoc[]
+
+*Type:* `+Number+`
+
+*Default value:* `+800+`
+
+=== Example: using `+sidebar_max_width+`
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea', // change this value according to your HTML
+  sidebar_show: 'mysidebar',
+  sidebar_max_width: 600,
+  setup: (editor) => {
+    editor.ui.registry.addSidebar('mysidebar', {
+      tooltip: 'My sidebar',
+      icon: 'comment',
+      resizable: true,
+      onShow: (api) => {
+        api.element().innerHTML = 'Hello world!';
+      },
+    });
+  }
+});
+----
+
+=== Limitations of the `+sidebar_max_width+` option
+
+The editable area cannot shrink below 280 pixels, and this limit takes precedence over `+sidebar_max_width+`. For information on this restriction, see: xref:customsidebar.adoc#limitations-of-the-sidebar-width-option[Limitations of the `+sidebar_width+` option].
+
+In a narrow editor, the width that remains beside a 280-pixel editable area can be smaller than the value set by `+sidebar_max_width+`. In that case, the remaining width becomes the effective maximum, and a user cannot drag the sidebar beyond that width.