From 823843ba8ccf27e3c6bd3f4006f3fb4878d2017b Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 23 Sep 2025 13:13:34 +1000 Subject: [PATCH 01/20] DOC-3223: TinyMCE 8.2.0 Documentation and Community Changelog. --- modules/ROOT/nav.adoc | 4 -- modules/ROOT/pages/8.2.0-release-notes.adoc | 80 +++++---------------- 2 files changed, 16 insertions(+), 68 deletions(-) diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 4cb12a6303..53cda02892 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -417,11 +417,7 @@ ** xref:release-notes.adoc[Release notes for {productname}] *** {productname} 8.2.0 **** xref:8.2.0-release-notes.adoc#overview[Overview] -**** xref:8.2.0-release-notes.adoc#new-premium-plugin[New Premium Plugin] -**** xref:8.2.0-release-notes.adoc#new-open-source-plugin[New Open Source Plugin] **** xref:8.2.0-release-notes.adoc#accompanying-premium-plugin-changes[Accompanying Premium Plugin changes] -**** xref:8.2.0-release-notes.adoc#accompanying-premium-plugin-end-of-life-announcement[Accompanying Premium Plugin end-of-life announcement] -**** xref:8.2.0-release-notes.adoc#accompanying-open-source-plugin-end-of-life-announcement[Accompanying Open Source Plugin end-of-life announcement] **** xref:8.2.0-release-notes.adoc#accompanying-enhanced-skins-and-icon-packs-changes[Accompanying Enhanced Skins & Icon Packs changes] **** xref:8.2.0-release-notes.adoc#improvements[Improvements] **** xref:8.2.0-release-notes.adoc#additions[Additions] diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 753c00f0ea..72151042b1 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -13,13 +13,7 @@ include::partial$misc/admon-releasenotes-for-stable.adoc[] {productname} 8.2.0 was released for {enterpriseversion} and {cloudname} on Wednesday, October 22^nd^, 2025. These release notes provide an overview of the changes for {productname} 8.2.0, including: -// Remove sections and section boilerplates as necessary. -// Pluralise as necessary or remove the placeholder plural marker. -* xref:new-premium-plugin[New Premium plugin] -* xref:new-open-source-plugin[New Open Source plugin] * xref:accompanying-premium-plugin-changes[Accompanying Premium plugin changes] -* xref:accompanying-premium-plugin-end-of-life-announcement[Accompanying Premium plugin end-of-life announcement] -* xref:accompanying-open-source-plugin-end-of-life-announcement[Accompanying open source plugin end-of-life-announcement] * xref:accompanying-enhanced-skins-and-icon-packs-changes[Accompanying Enhanced Skins & Icon Packs changes] * xref:improvements[Improvements] * xref:additions[Additions] @@ -30,66 +24,23 @@ include::partial$misc/admon-releasenotes-for-stable.adoc[] * xref:known-issues[Known issues] -[[new-premium-plugin]] -== New Premium plugin - -The following new Premium plugin was released alongside {productname} 8.2.0. - -=== - -The new Premium plugin, **** // description here. - -For information on the **** plugin, see xref:.adoc[]. - - -[[new-open-source-plugin]] -== New Open Source plugin - -The following new Open Source plugin was released alongside {productname} 8.2.0. - -=== - -The new open source plugin, **** // description here. - -For information on the **** plugin, see xref:.adoc[]. - - [[accompanying-premium-plugin-changes]] == Accompanying Premium plugin changes The following premium plugin updates were released alongside {productname} 8.2.0. -=== +// === -The {productname} 8.2.0 release includes an accompanying release of the **** premium plugin. +// The {productname} 8.2.0 release includes an accompanying release of the **** premium plugin. -**** includes the following . +// **** includes the following . -==== +// ==== +// #TINY-vwxyz1 // CCFR here. -For information on the **** plugin, see: xref:.adoc[]. - - -[[accompanying-premium-plugin-end-of-life-announcement]] -== Accompanying Premium plugin end-of-life announcement - -The following Premium plugin has been announced as reaching its end-of-life: - -=== - -{productname}'s xref:.adoc[] plugin will be deactivated on
, , and is no longer available for purchase. - - -[[accompanying-open-source-plugin-end-of-life-announcement]] -== Accompanying open source plugin end-of-life announcement - -The following open source plugin has been announced as reaching its end-of-life: - -=== - -{productname}'s xref:.adoc[] plugin will be deactivated on
, , and is no longer available for purchase. +// For information on the **** plugin, see: xref:.adoc[]. [[accompanying-enhanced-skins-and-icon-packs-changes]] @@ -111,7 +62,7 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a {productname} 8.2.0 also includes the following improvement: -=== +// === // #TINY-vwxyz1 // CCFR here. @@ -122,7 +73,7 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a {productname} 8.2.0 also includes the following addition: -=== +// === // #TINY-vwxyz1 // CCFR here. @@ -133,7 +84,7 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a {productname} 8.2.0 also includes the following change: -=== +// === // #TINY-vwxyz1 // CCFR here. @@ -144,7 +95,7 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a {productname} 8.2.0 also includes the following removal: -=== +// === // #TINY-vwxyz1 // CCFR here. @@ -155,7 +106,7 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a {productname} 8.2.0 also includes the following bug fix: -=== +// === // #TINY-vwxyz1 // CCFR here. @@ -166,7 +117,7 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a {productname} 8.2.0 includes : -=== +// === // #TINY-vwxyz1 // CCFR here. @@ -177,9 +128,10 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a {productname} 8.2.0 includes the following deprecation: -=== The `` configuration property, ``, has been deprecated +// === The `` configuration property, ``, has been deprecated +// #TINY-vwxyz1 -// placeholder here. +// CCFR here. [[known-issues]] @@ -189,7 +141,7 @@ This section describes issues that users of {productname} 8.2.0 may encounter an There known issue in {productname} 8.2.0. -=== +// === // #TINY-vwxyz1 // CCFR here. From 84b79a1650dc87c30833289c9fb001a918c67423 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 08:46:09 +1000 Subject: [PATCH 02/20] DOC-3223: Added support for loading web components into iframes. (#3888) * DOC-3223: Added support for loading web components into iframes. * DOC-3223: Add link to api docs for new getComponentUrls. --- modules/ROOT/pages/8.2.0-release-notes.adoc | 7 +++++ .../configuration/custom_elements.adoc | 26 +++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 72151042b1..c5fd127579 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -73,6 +73,13 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a {productname} 8.2.0 also includes the following addition: +=== Added support for loading web components into iframes +// #TINY-13006 + +Previously, there was no method to load web components into the editor iframe or preview iframes used by other plugins, which prevented these components from rendering correctly. This limitation impacted users who relied on custom web components for extended editor functionality or content visualization. In {release-version}, a new API link:https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.schema/#getComponentUrls[getComponentUrls] has been introduced that allows specifying a script URL for the web component within the custom element schema. This enhancement enables web components to be properly registered and rendered within the {productname} editor environment. + +For an example of using custom elements with block-level and inline-level components, see: xref:content-filtering.adoc#example-using-custom_elements-with-block-level-and-inline-level-components[Example using `+custom_elements+` with block-level and inline-level components]. + // === // #TINY-vwxyz1 diff --git a/modules/ROOT/partials/configuration/custom_elements.adoc b/modules/ROOT/partials/configuration/custom_elements.adoc index 03efb4ed24..582b22bb8a 100644 --- a/modules/ROOT/partials/configuration/custom_elements.adoc +++ b/modules/ROOT/partials/configuration/custom_elements.adoc @@ -19,6 +19,7 @@ tinymce.init({ * **Custom Element Structure:** The custom_elements option and the `addCustomElements` API supports more complex structures. This structure is defined by a record where the key represents the name of the element, and the value corresponds to a detailed specification. * **Attributes and Inheritance:** Elements inherit attributes and children from other specified elements using the `+extends: "div"+` property in the `custom_elements` spec. * **Attribute and Children Specifications:** The `custom_elements` spec includes properties such as `attributes` which lists attribute names, or `children` which lists valid child element names. The `children` property includes presets like `@global`, `@blocks`, `@phrasing`, and `@flow`. +* **Web Components Support:** Custom elements can specify a `+componentsUrl+` property to load web component scripts into the editor. HTML Element Sets: The exact element sets for each preset, depending on the schema set (html4, html5, or html5-strict), can be found in the below tables. @@ -96,4 +97,29 @@ tinymce.init({ }); }, }); +---- + +=== Example using `+custom_elements+` with block-level and inline-level components. + +[source, js] +---- +tinymce.init({ + selector: "textarea", + custom_elements: { + // Block-level custom element (behaves like a div) + "my-custom-block": { + extends: "div", + attributes: ["@global", "data-type", "data-id"], + children: ["@flow"], + componentsUrl: "/path/to/block-component.js" + }, + // Inline-level custom element (behaves like a span) + "my-custom-inline": { + extends: "span", + attributes: ["@global", "data-value"], + children: ["@phrasing"], + componentsUrl: "/path/to/inline-component.js" + } + } +}); ---- \ No newline at end of file From ca7d27ff14b0561885e12e563d903e5e7f8d6dd4 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 08:46:16 +1000 Subject: [PATCH 03/20] DOC-3223: Head element added to the same line as the meta element. (#3887) --- modules/ROOT/pages/8.2.0-release-notes.adoc | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index c5fd127579..9aabf3602a 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -42,6 +42,21 @@ The following premium plugin updates were released alongside {productname} 8.2.0 // For information on the **** plugin, see: xref:.adoc[]. +=== Full Page HTML + +The {productname} {release-version} release includes an accompanying release of the **Full Page HTML** premium plugin. + +**Full Page HTML** includes the following improvement. + +=== Head element added to the same line as the `meta` element +// #TINY-12859 + +Previously, the `+meta+` property within the Full Page HTML plugin was not properly treated as a block-level element. This caused the `++` element to be appended directly to the same line as the `+meta+` tag, leading to formatting inconsistencies in the generated HTML output. + +In {release-version}, the `+meta+` property has been updated to behave as a block element, ensuring proper separation and newline handling within the `` section. + +For information on the **Full Page HTML** plugin, see: xref:fullpagehtml.adoc[Full Page HTML]. + [[accompanying-enhanced-skins-and-icon-packs-changes]] == Accompanying Enhanced Skins & Icon Packs changes From 8d5e3e6a12363972debf20fdc021d4ca2dfe7201 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 08:46:35 +1000 Subject: [PATCH 04/20] DOC-3223: Some elements would be given an extra newline by the serializer when indented. (#3885) --- modules/ROOT/pages/8.2.0-release-notes.adoc | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 9aabf3602a..648ab1fa69 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -133,6 +133,11 @@ For an example of using custom elements with block-level and inline-level compon // CCFR here. +=== Some elements would be given an extra newline by the serializer when indented +// #TINY-12857 + +Previously, certain elements received an additional newline when indented due to the title not being correctly recognized as a block by the DOM Parser serializer. This caused unwanted whitespace to appear in the output. The issue was resolved by explicitly marking the title as a block within the code, ensuring that serialization no longer introduces unnecessary whitespace. + [[security-fixes]] == Security fixes From 0ad6e12cb031607e83cc079973985c1723f51cc3 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 09:02:10 +1000 Subject: [PATCH 05/20] DOC-3223: Tooltips on toolbar buttons sometimes remained visible if the button icon was updated while hovered. (#3873) --- modules/ROOT/pages/8.2.0-release-notes.adoc | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 648ab1fa69..37832bf71c 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -133,6 +133,13 @@ For an example of using custom elements with block-level and inline-level compon // CCFR here. +=== Tooltips on toolbar buttons sometimes remained visible if the button icon was updated while hovered +// #TINY-12289 + +Previously, button tooltips were not always dismissed correctly when icons were updated, because the element handling hover events was being replaced and the `mouseout` event never fired. This caused tooltips to remain visible after clicking a button, creating a confusing UI experience. + +{productname} {release-version} addresses this issue by adjusting the icon rendering logic so hover and tooltip behavior are attached to the button itself rather than the icon element. As a result, when the `setIcon` API updates icons, it no longer interferes with mouse events. + === Some elements would be given an extra newline by the serializer when indented // #TINY-12857 From 0c00c3f6462363781a4f680acfabcbdceb569c59 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 09:04:54 +1000 Subject: [PATCH 06/20] DOC-3223: UI elements like focus outlines and placeholders would be visible after printing. (#3877) --- modules/ROOT/pages/8.2.0-release-notes.adoc | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 37832bf71c..ce9ad88bc3 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -133,6 +133,11 @@ For an example of using custom elements with block-level and inline-level compon // CCFR here. +=== UI elements like focus outlines and placeholders would be visible after printing +// TINY-12584 + +Previously, UI elements such as focus outlines and placeholder text were rendered in printed versions of the editor content, resulting in unwanted visual artifacts in printed documents. This behavior caused confusion and reduced the professional appearance of printed materials. To address this issue, printing-specific styles were introduced to automatically hide all UI-related elements within the editor content during printing. As a result, printed output now includes only the intended content, ensuring clean and consistent presentation across all printouts. + === Tooltips on toolbar buttons sometimes remained visible if the button icon was updated while hovered // #TINY-12289 From 46024d394f061e412d5bdfe02444ab4b227cc055 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 09:07:47 +1000 Subject: [PATCH 07/20] DOC-3223: Empty captions for floating images were not rendered correctly. (#3878) --- modules/ROOT/pages/8.2.0-release-notes.adoc | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index ce9ad88bc3..897d0e4005 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -42,6 +42,21 @@ The following premium plugin updates were released alongside {productname} 8.2.0 // For information on the **** plugin, see: xref:.adoc[]. +=== Media Optimizer + +The {productname} 8.2.0 release includes an accompanying release of the **Media Optimizer** premium plugin. + +**Media Optimizer** includes the following fix. + +=== Empty captions for floating images were not rendered correctly. +// #TINY-12592 + +In previous versions of **Media Optimizer**, when figures were styled with `+display: table+`, a floated `++` could cause an empty `+
+` to render incorrectly alongside the image instead of below it. Deleting the caption text further disrupted the layout, causing the caption area to shift or disappear entirely. + +In {productname} {release-version}, this issue has been resolved by applying `+clear: both+` to `+
+` elements when the associated image is floated. This ensures captions always render below the image, even when empty, maintaining proper alignment and consistent visual structure. + +For information on the **Media Optimizer** plugin, see: xref:uploadcare.adoc[Media Optimizer]. + === Full Page HTML The {productname} {release-version} release includes an accompanying release of the **Full Page HTML** premium plugin. From 021ce31055e0b7e7e1dad940f7760d75f228b669 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 09:11:18 +1000 Subject: [PATCH 08/20] DOC-3223: The cursor could get stuck around an absolute CEF element when navigating using arrow keys (#3879) * DOC: The cursor could get stuck around an absolute CEF element when navigating using arrow keys. * Update modules/ROOT/pages/8.2.0-release-notes.adoc Co-authored-by: tiny-ben-tran * Update modules/ROOT/pages/8.2.0-release-notes.adoc Co-authored-by: tiny-ben-tran * Update modules/ROOT/pages/8.2.0-release-notes.adoc Co-authored-by: tiny-ben-tran --------- Co-authored-by: tiny-ben-tran --- modules/ROOT/pages/8.2.0-release-notes.adoc | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 897d0e4005..3d3f848dae 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -148,6 +148,13 @@ For an example of using custom elements with block-level and inline-level compon // CCFR here. +=== The cursor could get stuck around an absolutely positioned CEF element when navigating using arrow keys +// #TINY-10306 + +Previously, when using arrow keys to navigate content containing absolutely positioned non-editable elements, the cursor could become trapped near these elements. This issue disrupted caret movement and made it difficult for users to continue navigating around the editor's content. + +In {productname} {release-version}, the horizontal caret navigation logic has been updated to ensure that the caret movement is no longer disrupted when navigating around absolutely positioned elements. + === UI elements like focus outlines and placeholders would be visible after printing // TINY-12584 From d0eb290bae51d14c7347148b804dc16340604d51 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 09:27:40 +1000 Subject: [PATCH 09/20] DOC-3223: Encoding provided in the charset meta attribute would not be detected (#3882) * DOC-3223: Encoding provided in the charset meta attribute would not be detected. * Update modules/ROOT/pages/8.2.0-release-notes.adoc --- modules/ROOT/pages/8.2.0-release-notes.adoc | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 3d3f848dae..b033ac31c0 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -61,7 +61,14 @@ For information on the **Media Optimizer** plugin, see: xref:uploadcare.adoc[Med The {productname} {release-version} release includes an accompanying release of the **Full Page HTML** premium plugin. -**Full Page HTML** includes the following improvement. +**Full Page HTML** includes the following fix. + +=== Encoding provided in the charset meta attribute would not be detected +// #TINY-12860 + +The previous encoding detection logic did not recognize certain encodings defined using the charset `+meta+` attribute, which resulted in inconsistent or conflicting encodings within a single page and caused display or editing issues. + +{productname} {release-version} addresses this issue by adding support for the new encoding type, ensuring that both the original and new encoding formats are correctly detected and processed. As a result, pages using either encoding style are now handled consistently. When encoded content is edited, the output is normalized to the previously supported encoding format, ensuring consistent markup and preventing confusion that could occur if the original encoding style were retained. === Head element added to the same line as the `meta` element // #TINY-12859 From 0d8588acab38eaead59621ed4aa9bfa46a00ad77 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 10:10:47 +1000 Subject: [PATCH 10/20] DOC-3223: Some UI elements related to dragging elements were not properly filtered out when fetching content. (#3881) --- modules/ROOT/pages/8.2.0-release-notes.adoc | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index b033ac31c0..92e244ad7f 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -155,6 +155,13 @@ For an example of using custom elements with block-level and inline-level compon // CCFR here. +=== Some UI elements related to dragging elements were not properly filtered out when fetching content +// #TINY-12384 + +In {productname} {release-version}, an issue was resolved where elements used by the table resize feature were not flagged for removal by the serializer. When content was fetched via a `+getContent()+` call during an active table resize, these transient UI nodes could be included in the returned HTML, leading to extraneous markup and potentially corrupted data. + +The fix marks these elements with bogus attributes so the serializer reliably filters them out, ensuring clean, stable content retrieval and preventing unintended artifacts in saved or processed output. + === The cursor could get stuck around an absolutely positioned CEF element when navigating using arrow keys // #TINY-10306 From a4b34e66309026b4e9947e2300431c4dc2ccdb9f Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 10:23:42 +1000 Subject: [PATCH 11/20] DOC-3223: The editor would upon gaining focus scroll to the center of the editor on some browsers if the top of the editor was out of frame (#3883) * DOC-3223: The editor would upon gaining focus scroll to the center of the editor on some browsers if the top of the editor was out of frame. * DOC-3223: Update word phrasing. --- modules/ROOT/pages/8.2.0-release-notes.adoc | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 92e244ad7f..780064481c 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -155,6 +155,13 @@ For an example of using custom elements with block-level and inline-level compon // CCFR here. +=== The editor would upon gaining focus scroll to the center of the editor on some browsers if the top of the editor was out of frame +// #TINY-12626 + +A legacy workaround for a Chromium bug caused the page to scroll to the center of the editor when the editor gained focus while its top edge was outside the viewport; although unrelated, features like autoresize could frequently trigger this behavior and resulted in unexpected scrolling in some situations. + +As of {productname} {release-version}, the workaround has been removed now that the underlying Chromium issue has been fixed, allowing the browser to manage scrolling natively. + === Some UI elements related to dragging elements were not properly filtered out when fetching content // #TINY-12384 From 859f0cca2adfabac5828b562069e54b516191cce Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 10:27:47 +1000 Subject: [PATCH 12/20] DOC-3223: Pressing enter while focused on title input during category or template creation would submit even when the submit button was disabled. (#3884) --- modules/ROOT/pages/8.2.0-release-notes.adoc | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 780064481c..1f4735c910 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -42,6 +42,18 @@ The following premium plugin updates were released alongside {productname} 8.2.0 // For information on the **** plugin, see: xref:.adoc[]. +=== **Templates** + +The {productname} {release-version} release includes an accompanying release of the **Templates** premium plugin. + +**Templates** includes the following fix. + +==== Pressing enter while focused on title input during category or template creation would submit even when the submit button was disabled +// #TINY-12730 + +Previously, pressing **Enter** while focused on the title input during category or template creation would trigger form submission, even when the submit button was disabled. This occurred because the input handling logic did not validate the form state before submission. As a result, users could inadvertently attempt to create a category or template with an empty name, causing an error. + +{productname} {release-version} addresses this issue by updating the input handling logic to check the form's validity before allowing submission when **Enter** is pressed. Now, if the form is invalid or the submit button is disabled, pressing **Enter** will not trigger submission, preventing erroneous attempts to create categories or templates with empty names. === Media Optimizer The {productname} 8.2.0 release includes an accompanying release of the **Media Optimizer** premium plugin. From 5a677c7a16d17bf92665d618a8a10c7ff7d0ae50 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 20 Oct 2025 11:14:30 +1000 Subject: [PATCH 13/20] DOC-3223: The schema will now allow the RDFa attribute on elements. (#3886) * DOC-3223: The schema will now allow the RDFa attribute on elements. * Update modules/ROOT/pages/8.2.0-release-notes.adoc --- modules/ROOT/pages/8.2.0-release-notes.adoc | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 1f4735c910..9a2163d7a4 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -167,6 +167,13 @@ For an example of using custom elements with block-level and inline-level compon // CCFR here. +=== The schema will now allow the `property` RDFa attribute on `meta` elements +// #TINY-12858 + +Previously, the schema did not recognize the `property` RDFa attribute as valid for `meta` elements, causing it to be removed during content validation in features such as the {productname} `fullpagehtml` premium plugin. This behavior could strip essential metadata used for social media previews or structured data integrations, and required integrators to manually whitelist the attribute to retain it. + +In {release-version}, the schema has been updated to include `property` as a valid attribute for `meta` elements. This change ensures compatibility with common metadata standards. + === The editor would upon gaining focus scroll to the center of the editor on some browsers if the top of the editor was out of frame // #TINY-12626 @@ -205,7 +212,6 @@ Previously, button tooltips were not always dismissed correctly when icons were Previously, certain elements received an additional newline when indented due to the title not being correctly recognized as a block by the DOM Parser serializer. This caused unwanted whitespace to appear in the output. The issue was resolved by explicitly marking the title as a block within the code, ensuring that serialization no longer introduces unnecessary whitespace. - [[security-fixes]] == Security fixes From be3629822d2384e13498902c6e862429d0ba5787 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 21 Oct 2025 14:29:09 +1000 Subject: [PATCH 14/20] DOC-3223: New js/commerciallicensekeymanager.js file to lazyload majority of plugin after editor init. (#3880) --- modules/ROOT/pages/8.2.0-release-notes.adoc | 12 ++++++++++++ modules/ROOT/pages/license-key.adoc | 10 ++++++++++ 2 files changed, 22 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 9a2163d7a4..4b31d6f980 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -42,6 +42,17 @@ The following premium plugin updates were released alongside {productname} 8.2.0 // For information on the **** plugin, see: xref:.adoc[]. +=== License Key Manager + +The {productname} 8.2.0 release includes an accompanying release of the **License Key Manager**. + +==== New `+js/commerciallicensekeymanager.js+` file to lazyload majority of plugin after editor init. +// #TINY-12820 + +The **License Key Manager** has been reworked to include a new `+js/commerciallicensekeymanager.js+` file that is lazy-loaded when required. This change reduces the initialization time of the editor and time to first render. + +For information on the **License Key Manager** plugin, see: xref:license-key.adoc[License Key Manager]. + === **Templates** The {productname} {release-version} release includes an accompanying release of the **Templates** premium plugin. @@ -54,6 +65,7 @@ The {productname} {release-version} release includes an accompanying release of Previously, pressing **Enter** while focused on the title input during category or template creation would trigger form submission, even when the submit button was disabled. This occurred because the input handling logic did not validate the form state before submission. As a result, users could inadvertently attempt to create a category or template with an empty name, causing an error. {productname} {release-version} addresses this issue by updating the input handling logic to check the form's validity before allowing submission when **Enter** is pressed. Now, if the form is invalid or the submit button is disabled, pressing **Enter** will not trigger submission, preventing erroneous attempts to create categories or templates with empty names. + === Media Optimizer The {productname} 8.2.0 release includes an accompanying release of the **Media Optimizer** premium plugin. diff --git a/modules/ROOT/pages/license-key.adoc b/modules/ROOT/pages/license-key.adoc index fdb12b916a..8a630e6e10 100644 --- a/modules/ROOT/pages/license-key.adoc +++ b/modules/ROOT/pages/license-key.adoc @@ -316,6 +316,12 @@ a| * Check your internet connection a| * Verify that your API key is valid * Check if your subscription is active * Visit the link:https://support.tiny.cloud[Support Portal] if the issue persists + +| xref:resource-load-error[Resource Load Error] +| The editor is disabled because the {productname} license key could not be validated. +| The editor is disabled because the {productname} license key could not be validated. The {productname} Commercial License Key Manager plugin was unable to load additional required resources. +a| * If bundling, verify that you are using the `licensekeymanager/index.js` file that imports other required resources. +* If hosting, verify that a `js/commerciallicensekeymanager.js` file is also present in the `plugins/licensekeymanager` folder. |=== === Detailed Error Descriptions @@ -360,4 +366,8 @@ A server-side error occurred while validating the API key. The editor will attem ==== Online API Key Error (4xx - Disable) The API key validation failed due to an invalid key or inactive subscription. The editor will be disabled until a valid API key is provided. For API key issues, visit link:https://www.tiny.cloud/my-account[Tiny Cloud Account] or see the "<>" section for clarification. +[[resource-load-error]] +==== Resource Load Error +The TinyMCE Commercial License Key Manager plugin was unable to load additional required resources. This typically occurs when the `js/commerciallicensekeymanager.js` file is missing or not properly configured. For bundled applications, ensure you are using the `licensekeymanager/index.js` file that imports other required resources. For self-hosted installations, verify that a `js/commerciallicensekeymanager.js` file is present in the `plugins/licensekeymanager` folder. See the <> section for implementation details. + For additional assistance, visit our link:https://support.tiny.cloud[Support Portal] or contact your link:https://www.tiny.cloud/my-account[Tiny Cloud Account] manager. From acb376f63319ff35f845790c7d716a799ead4982 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 21 Oct 2025 14:49:57 +1000 Subject: [PATCH 15/20] DOC-3223: Suggestions now display the type of content that was changed (#3890) * DOC-3223: Operation descriptions now shows the type of content that was changed. * Update modules/ROOT/pages/8.2.0-release-notes.adoc Co-authored-by: Kim <45845989+kimwoodfield@users.noreply.github.com> * Update modules/ROOT/pages/8.2.0-release-notes.adoc Co-authored-by: Kim <45845989+kimwoodfield@users.noreply.github.com> * Apply suggestion from @kimwoodfield Co-authored-by: Kim <45845989+kimwoodfield@users.noreply.github.com> * Apply suggestion from @kimwoodfield Co-authored-by: Kim <45845989+kimwoodfield@users.noreply.github.com> * Apply suggestion from @kimwoodfield Co-authored-by: Kim <45845989+kimwoodfield@users.noreply.github.com> * Apply suggestion from @kimwoodfield Co-authored-by: Kim <45845989+kimwoodfield@users.noreply.github.com> * DOC-3223: Suggested edits and improvements to simpliy the context. * Update modules/ROOT/pages/8.2.0-release-notes.adoc Co-authored-by: Mitchell Crompton --------- Co-authored-by: Kim <45845989+kimwoodfield@users.noreply.github.com> Co-authored-by: Mitchell Crompton --- modules/ROOT/pages/8.2.0-release-notes.adoc | 15 +++++++++++++++ modules/ROOT/pages/suggestededits.adoc | 4 +++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 4b31d6f980..f4ebe6bdb8 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -42,6 +42,21 @@ The following premium plugin updates were released alongside {productname} 8.2.0 // For information on the **** plugin, see: xref:.adoc[]. +=== Suggested Edits + +The {productname} {release-version} release includes an accompanying release of the **Suggested Edits** premium plugin. + +**Suggested Edits** includes the following improvement. + +=== Suggestions now display the type of content that was changed +// #TINY-12598 + +Previously, the **Suggested Edits** plugin only displayed the word "content" in the suggestion card description, as a generalised context for each suggestion. + +In {release-version}, the **Suggested Edits** plugin displays the type of content as well as the type of edit in the card description, to provide more context for each suggestion. + +For information on the **Suggested Edits** plugin, see: xref:suggestededits.adoc[Suggested Edits]. + === License Key Manager The {productname} 8.2.0 release includes an accompanying release of the **License Key Manager**. diff --git a/modules/ROOT/pages/suggestededits.adoc b/modules/ROOT/pages/suggestededits.adoc index 1d5c8240e7..811aeecd29 100644 --- a/modules/ROOT/pages/suggestededits.adoc +++ b/modules/ROOT/pages/suggestededits.adoc @@ -55,7 +55,9 @@ Replaced content is represented as both added and removed content, and indicates === Sidebar -Each suggested edit is listed as a card in the sidebar and color coded by the type of change, along with the user who made the suggestion, when the edit was made, and any feedback provided on that suggestion. When selected, each suggestion can be handled in the following ways: +Each suggested edit is listed as a card in the sidebar and color coded by the type of change. Each card shows a contextual description of the content, along with the user who made the suggestion, when the edit was made, and any feedback provided on that suggestion. + +When selected, a suggestion can be handled in the following ways: * Accept: Resolves the suggestion, applying the edit to the document when the review is completed. * Reject: Resolves the suggestion, turning back the edit to the original state. From ebb11ec9a946ddc3716a6b25a82bb7f72ab1e977 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 21 Oct 2025 16:13:47 +1000 Subject: [PATCH 16/20] DOC-3296: Rename `Image Optimizer` to `Media Optimizer`, add new `uc-video` documentation with supporting demos. (#3872) * DOC-3296: Rename Image Optimizer to Media Optimizer, add new UC-Video Documentation with supporting demos. * DOC-3223: rename uploadcare_disable_video_resize to uploadcare_enable_video_resize and remove from demos. * DOC-3296: Update uc-video supported files.adoc, file structure changes and improvements. * DOC-3296: fix ifeval blocks * DOC-3296: add missing uploadcare-video toolbar element. * DOC-3223: Remove unwanted options, demo cleanup and improvements. * DOC-3223: Update toolbar buttons across all three pages. * Apply suggestion from @kemister85 * Update modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js Co-authored-by: tiny-ben-tran * DOC-3223: Add missing uploadcare_resources option, cleanup of unsupported video_props. --------- Co-authored-by: tiny-ben-tran --- antora.yml | 2 +- .../uploadcare-full-feature/example.js | 47 ++++ .../uploadcare-full-feature/index.html | 36 +++ .../uploadcare-full-feature/index.js | 46 ++++ .../live-demos/uploadcare-image/example.js | 34 +++ .../index.html | 13 +- .../{uploadcare => uploadcare-image}/index.js | 4 +- .../live-demos/uploadcare-video/example.js | 38 +++ .../live-demos/uploadcare-video/index.html | 34 +++ .../live-demos/uploadcare-video/index.js | 40 ++++ .../examples/live-demos/uploadcare/example.js | 34 --- modules/ROOT/nav.adoc | 4 +- modules/ROOT/pages/8.1.0-release-notes.adoc | 10 +- modules/ROOT/pages/8.2.0-release-notes.adoc | 19 ++ modules/ROOT/pages/uploadcare-image.adoc | 219 ++++++++++++++++++ modules/ROOT/pages/uploadcare-video.adoc | 143 ++++++++++++ modules/ROOT/pages/uploadcare.adoc | 209 ++++------------- .../configuration/a11y_advanced_options.adoc | 4 +- .../configuration/uploadcare_resources.adoc | 82 +++++++ .../uploadcare_video_properties.adoc | 52 +++++ .../uploadcare_video_resize.adoc | 35 +++ .../partials/index-pages/premium-plugins.adoc | 4 +- ...plugin-compatibility-uploadcare-image.adoc | 9 +- .../partials/misc/premium-plugin-list.adoc | 2 +- .../uploadcare_dashboard_configuration.adoc | 17 ++ .../uploadcare-toolbar-buttons.adoc | 22 +- 26 files changed, 940 insertions(+), 219 deletions(-) create mode 100644 modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js create mode 100644 modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html create mode 100644 modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js create mode 100644 modules/ROOT/examples/live-demos/uploadcare-image/example.js rename modules/ROOT/examples/live-demos/{uploadcare => uploadcare-image}/index.html (99%) rename modules/ROOT/examples/live-demos/{uploadcare => uploadcare-image}/index.js (91%) create mode 100644 modules/ROOT/examples/live-demos/uploadcare-video/example.js create mode 100644 modules/ROOT/examples/live-demos/uploadcare-video/index.html create mode 100644 modules/ROOT/examples/live-demos/uploadcare-video/index.js delete mode 100644 modules/ROOT/examples/live-demos/uploadcare/example.js create mode 100644 modules/ROOT/pages/uploadcare-image.adoc create mode 100644 modules/ROOT/pages/uploadcare-video.adoc create mode 100644 modules/ROOT/partials/configuration/uploadcare_resources.adoc create mode 100644 modules/ROOT/partials/configuration/uploadcare_video_properties.adoc create mode 100644 modules/ROOT/partials/configuration/uploadcare_video_resize.adoc create mode 100644 modules/ROOT/partials/misc/uploadcare_dashboard_configuration.adoc diff --git a/antora.yml b/antora.yml index 4b79d5d160..c68dff38d8 100644 --- a/antora.yml +++ b/antora.yml @@ -10,7 +10,7 @@ asciidoc: companyurl: https://www.tiny.cloud cdnurl: https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js tdcdnurl: https://cdn.tiny.cloud/1/_your_api_key_/tinydrive/8/tinydrive.min.js - tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js + tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8-dev/tinymce.min.js tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/8/tinydrive.min.js webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js new file mode 100644 index 0000000000..7f34993e1c --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js @@ -0,0 +1,47 @@ +tinymce.init({ + selector: "textarea#uploadcare-full-feature", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + uploadcare_filters: [ + { name: 'none' }, // No filter applied + { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' + { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' + { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' + { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' + { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' + { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' + { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' + { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' + { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' + { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' + { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' + ], + // Video configuration + uploadcare_video_properties: { + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + poster: 'https://placehold.co/600x400', + width: 640, + height: 360, + showLogo: false + }, + a11y_advanced_options: true, + toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { display: block; margin: 1rem 0; } + ` +}); \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html new file mode 100644 index 0000000000..49975197ab --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html @@ -0,0 +1,36 @@ + \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js new file mode 100644 index 0000000000..90d9ce8549 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js @@ -0,0 +1,46 @@ +tinymce.init({ + selector: "textarea#uploadcare-full-feature", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '630992ad50fe2291c406', + uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', + uploadcare_store_type: 'temporary', + uploadcare_filters: [ + { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' + { name: 'adaris', amount: -100, label: 'Vintage' }, // Adaris with inverted effect (amount -100), label reads 'Vintage' + { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' + { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' + { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' + { name: 'galen', amount: 80, label: 'Soft' }, // Galen with softening effect (amount 80), label reads 'Soft' + { name: 'carris', amount: 120, label: 'Sharp' }, // Carris with high contrast (amount 120), label reads 'Sharp' + { name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel with darkened effect (amount -50), label reads 'Night' + { name: 'none' }, // No filter applied + ], + // Video configuration + uploadcare_video_properties: { + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + // poster: 'https://placehold.co/600x400', // Optional poster image URL + width: 640, + height: 360, + showLogo: false + }, + a11y_advanced_options: true, + toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { display: block; margin: 1rem 0; } + ` +}); diff --git a/modules/ROOT/examples/live-demos/uploadcare-image/example.js b/modules/ROOT/examples/live-demos/uploadcare-image/example.js new file mode 100644 index 0000000000..7b341b467a --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-image/example.js @@ -0,0 +1,34 @@ +tinymce.init({ + selector: "textarea#uploadcare-image", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + uploadcare_filters: [ + { name: 'none' }, // No filter applied + { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' + { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' + { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' + { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' + { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' + { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' + { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' + { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' + { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' + { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' + { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' + ], + a11y_advanced_options: true, + toolbar: "undo redo | uploadcare | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + ` + }); diff --git a/modules/ROOT/examples/live-demos/uploadcare/index.html b/modules/ROOT/examples/live-demos/uploadcare-image/index.html similarity index 99% rename from modules/ROOT/examples/live-demos/uploadcare/index.html rename to modules/ROOT/examples/live-demos/uploadcare-image/index.html index 6fb2c2d2e2..94c511d821 100644 --- a/modules/ROOT/examples/live-demos/uploadcare/index.html +++ b/modules/ROOT/examples/live-demos/uploadcare-image/index.html @@ -1,17 +1,23 @@ - \ No newline at end of file + diff --git a/modules/ROOT/examples/live-demos/uploadcare/index.js b/modules/ROOT/examples/live-demos/uploadcare-image/index.js similarity index 91% rename from modules/ROOT/examples/live-demos/uploadcare/index.js rename to modules/ROOT/examples/live-demos/uploadcare-image/index.js index 40d7018930..bfd47021ff 100644 --- a/modules/ROOT/examples/live-demos/uploadcare/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-image/index.js @@ -1,5 +1,5 @@ tinymce.init({ - selector: "textarea", + selector: "textarea#uploadcare-image", plugins: [ "uploadcare", "code", "link", "preview", "lists" ], uploadcare_public_key: '630992ad50fe2291c406', uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', @@ -16,7 +16,7 @@ tinymce.init({ { name: 'none' }, // No filter applied ], a11y_advanced_options: true, - toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + toolbar: "undo redo | uploadcare | styles | bold italic underline | forecolor | bullist numlist| link | code preview", height: 700, content_style: ` body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/example.js b/modules/ROOT/examples/live-demos/uploadcare-video/example.js new file mode 100644 index 0000000000..2a9bad1c1f --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-video/example.js @@ -0,0 +1,38 @@ +tinymce.init({ + selector: "textarea#uploadcare-video", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + // Video configuration + uploadcare_video_properties: { + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + // poster: 'https://placehold.co/600x400', // Optional poster image URL + width: 640, + height: 360, + showLogo: false + }, + a11y_advanced_options: true, + toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { + display: block; + margin: 1rem 0; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + ` + }); diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.html b/modules/ROOT/examples/live-demos/uploadcare-video/index.html new file mode 100644 index 0000000000..6a82b95a54 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.html @@ -0,0 +1,34 @@ + diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.js b/modules/ROOT/examples/live-demos/uploadcare-video/index.js new file mode 100644 index 0000000000..ee7d6aea71 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.js @@ -0,0 +1,40 @@ +tinymce.init({ + selector: "textarea#uploadcare-video", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '630992ad50fe2291c406', + uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', + uploadcare_store_type: 'temporary', + // Video configuration + uploadcare_video_properties: { + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + // poster: 'https://placehold.co/600x400', // Optional poster image URL + width: 640, + height: 360, + showLogo: false + }, + a11y_advanced_options: true, + toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { + display: block; + margin: 1rem 0; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + ` +}); diff --git a/modules/ROOT/examples/live-demos/uploadcare/example.js b/modules/ROOT/examples/live-demos/uploadcare/example.js deleted file mode 100644 index 38bcb9f27a..0000000000 --- a/modules/ROOT/examples/live-demos/uploadcare/example.js +++ /dev/null @@ -1,34 +0,0 @@ -tinymce.init({ - selector: "textarea", - plugins: [ "uploadcare", "code", "link", "preview", "lists" ], - uploadcare_public_key: '', - uploadcare_filters: [ - { name: 'none' }, // No filter applied - { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' - { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' - { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' - { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' - { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' - { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' - { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' - { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' - { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' - { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' - { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' - ], - a11y_advanced_options: true, - toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", - height: 700, - content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } - h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } - h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } - p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } - p { line-height: 1.6; margin: 0; } - p + p { margin-top: 1rem; } - a { color: #2b70e3; } - blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } - figcaption {font-size: 0.875em;} - ` - }); \ No newline at end of file diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 53cda02892..c255dab1a1 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -324,7 +324,9 @@ ***** xref:import-from-word-with-jwt-authentication-nodejs.adoc[Node.js] ***** xref:import-from-word-with-jwt-authentication-php.adoc[PHP] *** xref:editimage.adoc[Image Editing] -*** xref:uploadcare.adoc[Image Optimizer Powered by Uploadcare] +*** xref:uploadcare.adoc[Media Optimizer] +**** xref:uploadcare-image.adoc[Image] +**** xref:uploadcare-video.adoc[Video] *** xref:inline-css.adoc[Inline CSS] *** xref:linkchecker.adoc[Link Checker] *** xref:math.adoc[Math] diff --git a/modules/ROOT/pages/8.1.0-release-notes.adoc b/modules/ROOT/pages/8.1.0-release-notes.adoc index 842703e846..607d9a2fcc 100644 --- a/modules/ROOT/pages/8.1.0-release-notes.adoc +++ b/modules/ROOT/pages/8.1.0-release-notes.adoc @@ -55,19 +55,19 @@ To resolve this, {productname} now inserts a temporary hidden element before the For information on the **Spell Checker** plugin, see: xref:introduction-to-tiny-spellchecker.adoc[Spell Checker]. -=== Image Optimizer (Powered by Uploadcare) +=== Media Optimizer (Powered by Uploadcare) -The {productname} {release-version} release includes an accompanying release of the **Image Optimizer (Powered by Uploadcare)** premium plugin. +The {productname} {release-version} release includes an accompanying release of the **Media Optimizer (Powered by Uploadcare)** premium plugin. -**Image Optimizer (Powered by Uploadcare)** includes the following fix. +**Media Optimizer (Powered by Uploadcare)** includes the following fix. ==== Image previews sometimes showed the wrong image from a `srcset`. -In previous versions of the Image Optimizer premium plugin, an issue where image effects were applied based on the main `src` instead of the active `srcset` URL, caused discrepancies when the displayed image was selected from `srcset`. This led to a mismatch in the adjustment preview (rendered from the main `src`) versus the image shown in the editor (rendered from the `srcset` URL), resulting in different visual outcomes for effects such as blur or resize. +In previous versions of the Media Optimizer premium plugin, an issue where image effects were applied based on the main `src` instead of the active `srcset` URL, caused discrepancies when the displayed image was selected from `srcset`. This led to a mismatch in the adjustment preview (rendered from the main `src`) versus the image shown in the editor (rendered from the `srcset` URL), resulting in different visual outcomes for effects such as blur or resize. {productname} {release-version} resolves this issue by using the `currentSrc` property to generate previews, ensuring the preview and the editor image reference the same resource. As a result, the preview image and the image in the editor are now consistent. -For information on the **Image Optimizer Powered by Uploadcare** plugin, see: xref:uploadcare.adoc[Image Optimizer (Powered by Uploadcare)]. +For information on the **Media Optimizer Powered by Uploadcare** plugin, see: xref:uploadcare.adoc[Media Optimizer (Powered by Uploadcare)]. === Accessibility Checker diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index f4ebe6bdb8..9ee249b081 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -29,6 +29,25 @@ include::partial$misc/admon-releasenotes-for-stable.adoc[] The following premium plugin updates were released alongside {productname} 8.2.0. +=== Media Optimizer + +The {productname} 8.2.0 release includes an accompanying release of the **Media Optimizer** premium plugin. + +**Media Optimizer** now includes comprehensive video handling capabilities. + +==== Video Upload Support + +The **Media Optimizer** plugin now supports video upload and processing, extending beyond its previous image-only functionality. Users can now upload videos directly within the editor through drag-and-drop, file selection, or URL input. + +The plugin now supports commonly available video formats including MP4, WebM, 3GPP, MPEG variants, QuickTime, Matroska, AVI, Flash Video, RealMedia, and other standard video formats. + +This new functionality is supported with the following configuration options: + +* **`uploadcare_video_properties`**: Comprehensive video player configuration including autoplay, controls, loop and more. +* **`uploadcare_video_resize`**: Option to control whether videos can be resized directly within the editor. + +For information on the **Media Optimizer** plugin, see: xref:uploadcare-video.adoc[Media Optimizer: Video]. + // === // The {productname} 8.2.0 release includes an accompanying release of the **** premium plugin. diff --git a/modules/ROOT/pages/uploadcare-image.adoc b/modules/ROOT/pages/uploadcare-image.adoc new file mode 100644 index 0000000000..2469666e4c --- /dev/null +++ b/modules/ROOT/pages/uploadcare-image.adoc @@ -0,0 +1,219 @@ += Media Optimizer (Image) +:navtitle: Image feature of the Media Optimizer plugin +:description: The Image feature of the Media Optimizer plugin allows you to optimize images in your content. +:description_short: optimize images in your content. +:plugincode: uploadcare +:pluginname: Media Optimizer's Image feature +:keywords: plugin, {plugincode}, image, align, transform, alt text, caption, adjust, filter +:plugincategory: premium + +include::partial$misc/admon-premium-plugin.adoc[] + +== Overview + +The **Image feature of the Media Optimizer plugin** offers a range of powerful features for image hosting, serving, and editing. These include responsive image delivery, automatic image format selection, automatic compression, and non-destructive image transformations and adjustments, all powered by link:https://uploadcare.com[Uploadcare^]. + +== Key benefits + +* Improve page loading speed and save on bandwidth by serving images in the optimal size, format, and compression based on the visitor's browser and device. +* Ditch the image editor and adjust images right inside {productname} with non-destructive transformations and adjustments. Change your mind any time! +* Stay safe and compliant with secure uploads, built in malware protection, and unsafe content detection +* Enterprise-ready scalable cloud storage provided by Uploadcare, delivered through its lightning-fast global CDN, and compliant with SOC2 and GDPR standards. + +== Interactive example + +liveDemo::uploadcare-image[] + +:includedSection: uploadcarePlugin +include::partial$misc/plugin-compatibility-uploadcare-image.adoc[] +:!includedSection: + +== Basic setup + +To add the {pluginname} plugin to the editor, include `{plugincode}` in the `plugins` option in the editor configuration. + +.Example +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', // Required for Uploadcare integration + // uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({ + // signature: 'sig', + // expire: 123 + // }), // Recommended option for secure uploads +}); +---- + +[NOTE] +==== +The {pluginname} plugin overrides the xref:quickbars.adoc[Quickbar] quickimage toolbar item. To ensure a better user experience and to avoid having two image buttons configure `quickbars_insert_toolbar` to omit the `quickimage` toolbar item. +==== + + +== Image Operations + +Below is an overview of the features provided by the {pluginname} plugin for image optimization: + +[cols="1,1,^1,3",options="header"] +|=== +| Feature | Operation | Icon | Description + +| Align +| +| image:icons/align-left.svg[align-left.svg] +| Provides alignment options for the image or element. + +| +| Align Left +| image:icons/align-left.svg[align-left.svg] +| Aligns the image to the left. + +| +| Align Centre +| image:icons/align-center.svg[align-center.svg] +| Centers the image. + +| +| Align Right +| image:icons/align-right.svg[align-right.svg] +| Aligns the image to the right. + +| Transform +| +| image:icons/transform-image.svg[transform-image.svg] +| Allows users to apply transformations to the image: + +| +| Rotate Left +| image:icons/rotate-left.svg[rotate-left.svg] +| Rotates the image counterclockwise (left). + +| +| Rotate Right +| image:icons/rotate-right.svg[rotate-right.svg] +| Rotates the image clockwise (right). + +| +| Flip Vertically +| image:icons/flip-vertically.svg[flip-vertically.svg] +| Flips the image vertically. + +| +| Flip Horizontally +| image:icons/flip-horizontally.svg[flip-horizontally.svg] +| Flips the image horizontally. + +| +| Resize +| image:icons/resize.svg[resize.svg] +| Changes the size of the image. + +| Adjust +| +| image:icons/adjustments.svg[adjustments.svg] +| Provides tools for adjusting image properties: + +| +| Brightness +| image:icons/brightness.svg[brightness.svg] +| Adjusts the image brightness. + +| +| Contrast +| image:icons/contrast.svg[contrast.svg] +| Adjusts the image contrast. + +| +| Exposure +| image:icons/exposure.svg[exposure.svg] +| Adjusts the image exposure. + +| +| Gamma +| image:icons/gamma.svg[gamma.svg] +| Adjusts the image gamma. + +| +| Vibrance +| image:icons/vibrance.svg[vibrance.svg] +| Adjusts the image vibrance. + +| +| Saturation +| image:icons/saturation.svg[saturation.svg] +| Adjusts the image saturation. + +| +| Warmth +| image:icons/warmth.svg[warmth.svg] +| Adjusts the image warmth. + +| +| Grayscale +| image:icons/grayscale.svg[grayscale.svg] +| Converts the image to grayscale. + +| +| Invert Colors +| image:icons/invert.svg[invert.svg] +| Inverts the image colors. + +| +| Sharpen +| image:icons/sharpen.svg[sharpen.svg] +| Sharpens the image. + +| +| Blur +| image:icons/blur.svg[blur.svg] +| Blurs the image. + +| Filters +| +| image:icons/auto-image-enhancement.svg[auto-image-enhancement.svg] +| Provides tools for applying filters to the image. + +| Alt Text +| +| image:icons/alt-text.svg[alt-text.svg] +| Adds alternative text to describe the image for accessibility purposes. + +| +| Decorative Image +| image:icons/image-decorative.svg[image-decorative.svg] +a| +Marks the image as decorative, indicating it doesn't require alternative text for accessibility. + +This icon will only appear when the `a11y_advanced_options` configuration option is enabled. + +| Caption +| +| image:icons/caption.svg[caption.svg] +| Adds a caption below the image for additional context. + +| Revert +| +| image:icons/revert.svg[revert.svg] +| Restores the image to its original state by undoing all edits. +|=== + +== Options + +The following configuration options affect the behavior of the {pluginname} plugin: + + +include::partial$configuration/uploadcare_srcset_steps.adoc[leveloffset=+1] + +include::partial$configuration/uploadcare_filters.adoc[leveloffset=+1] + +:includedSection: uploadcarePlugin +include::partial$configuration/a11y_advanced_options.adoc[leveloffset=+1] +:!includedSection: + +:pluginfeature: uc-image +include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[] + +include::partial$misc/plugin-menu-item-id-boilerplate.adoc[] diff --git a/modules/ROOT/pages/uploadcare-video.adoc b/modules/ROOT/pages/uploadcare-video.adoc new file mode 100644 index 0000000000..1c7e01b7c7 --- /dev/null +++ b/modules/ROOT/pages/uploadcare-video.adoc @@ -0,0 +1,143 @@ += Media Optimizer (Video) +:navtitle: Video feature of the Media Optimizer plugin +:description: The Video feature of the Media Optimizer plugin allows you to optimize videos in your content. +:description_short: optimize videos in your content. +:plugincode: uploadcare +:pluginname: Media Optimizer's Video feature +:keywords: plugin, {plugincode}, video, controls, autoplay, loop, poster, resize, upload, url, insert, edit, video +:plugincategory: premium + +The {pluginname} plugin allows {productname} users to upload, process, and embed both images and videos directly within the editor. + +== Overview + +The {pluginname} plugin extends {productname} with powerful video handling features that allow users to upload, process, and embed videos directly within the editor. The plugin leverages Uploadcare's infrastructure to provide video processing, custom video player functionality, and responsive video sizing. + +== Key benefits + +* Upload and optimize videos directly within the editor +* Custom video player with configurable properties +* Video poster image generation +* Responsive video sizing +* Support for MP4 and WebM formats +* Drag-and-drop video upload +* URL-based video insertion +* Video controls customization +* Accessibility features for videos + +== Interactive example + +liveDemo::uploadcare-video[] + +== Basic setup + +To add the {pluginname} plugin to the editor, include `uploadcare` in the `plugins` option in the editor configuration. + +.Example +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare uploadcare-video', + uploadcare_public_key: '', // Required for Uploadcare integration +}); +---- + +[NOTE] +==== +The {pluginname} plugin uses the same plugin code `+uploadcare+` as the Media Optimizer plugin. Video functionality is automatically enabled when video files are uploaded. + +When bundling {productname} with webpack or similar tools, the xref:uploadcare.adoc#uploadcare-resources[uploadcare_resources] option is required for video functionality to work properly, as it tells the plugin where to find the additional JavaScript resources needed for video playback. +==== + +== Video Operations + +Below is an overview of the features provided by the Video Optimizer plugin: + +[cols="1,1,4",options="header"] +|=== +| Feature | Icon | Description + +| Upload +| image:icons/folder.svg[folder.svg] +| Upload videos via drag-and-drop, file selection, or URL input + +| Upload from URL +| image:icons/link.svg[link.svg] +| Upload videos from a URL +|=== + +Below are the video player control options that are available to the video element: + +[cols="2,4",options="header"] +|=== +| Operation | Description + +| Play +| Customize video player controls and behavior + +| Mute +| Mute the video + +| Unmute +| Unmute the video + +| Slider +| Shows the progress of the video and allows users to move the slider to seek to a specific time in the video + +| Resize +| Changes the size of the video (when enabled) + +| Remaining Time +| Shows the remaining time of the video + +| Picture-in-Picture +| Enables picture-in-picture mode for the video + +| Settings +| Opens the video settings menu + +| Fullscreen +| Enables fullscreen mode for the video + +| UC Logo +| Shows the Uploadcare logo +|=== + +== Options + +The following configuration options affect the behavior of the {pluginname} plugin: + +include::partial$configuration/uploadcare_video_properties.adoc[leveloffset=+1] + +include::partial$configuration/uploadcare_video_resize.adoc[leveloffset=+1] + +== Custom Video Element + +The plugin creates a custom `++` element that replaces the standard HTML `+
` elements is now normalized to `open="open"` when the accordion plugin is enabled. +// #TINY-12862 -Previously, the schema did not recognize the `property` RDFa attribute as valid for `meta` elements, causing it to be removed during content validation in features such as the {productname} `fullpagehtml` premium plugin. This behavior could strip essential metadata used for social media previews or structured data integrations, and required integrators to manually whitelist the attribute to retain it. +// TBA was tagged as Task -In {release-version}, the schema has been updated to include `property` as a valid attribute for `meta` elements. This change ensures compatibility with common metadata standards. +=== Tooltips on toolbar buttons sometimes remained visible if the button icon was updated while hovered +// #TINY-12289 + +Previously, button tooltips were not always dismissed correctly when icons were updated, because the element handling hover events was being replaced and the `mouseout` event never fired. This caused tooltips to remain visible after clicking a button, creating a confusing UI experience. + +{productname} {release-version} addresses this issue by adjusting the icon rendering logic so hover and tooltip behavior are attached to the button itself rather than the icon element. As a result, when the `setIcon` API updates icons, it no longer interferes with mouse events. === The editor would upon gaining focus scroll to the center of the editor on some browsers if the top of the editor was out of frame // #TINY-12626 @@ -229,53 +173,31 @@ Previously, when using arrow keys to navigate content containing absolutely posi In {productname} {release-version}, the horizontal caret navigation logic has been updated to ensure that the caret movement is no longer disrupted when navigating around absolutely positioned elements. -=== UI elements like focus outlines and placeholders would be visible after printing -// TINY-12584 - -Previously, UI elements such as focus outlines and placeholder text were rendered in printed versions of the editor content, resulting in unwanted visual artifacts in printed documents. This behavior caused confusion and reduced the professional appearance of printed materials. To address this issue, printing-specific styles were introduced to automatically hide all UI-related elements within the editor content during printing. As a result, printed output now includes only the intended content, ensuring clean and consistent presentation across all printouts. - -=== Tooltips on toolbar buttons sometimes remained visible if the button icon was updated while hovered -// #TINY-12289 - -Previously, button tooltips were not always dismissed correctly when icons were updated, because the element handling hover events was being replaced and the `mouseout` event never fired. This caused tooltips to remain visible after clicking a button, creating a confusing UI experience. - -{productname} {release-version} addresses this issue by adjusting the icon rendering logic so hover and tooltip behavior are attached to the button itself rather than the icon element. As a result, when the `setIcon` API updates icons, it no longer interferes with mouse events. - -=== Some elements would be given an extra newline by the serializer when indented -// #TINY-12857 - -Previously, certain elements received an additional newline when indented due to the title not being correctly recognized as a block by the DOM Parser serializer. This caused unwanted whitespace to appear in the output. The issue was resolved by explicitly marking the title as a block within the code, ensuring that serialization no longer introduces unnecessary whitespace. - -[[security-fixes]] -== Security fixes - -{productname} 8.2.0 includes : - -// === -// #TINY-vwxyz1 - -// CCFR here. +=== The schema will now allow the `property` RDFa attribute on `meta` elements +// #TINY-12858 +Previously, the schema did not recognize the `property` RDFa attribute as valid for `meta` elements, causing it to be removed during content validation in features such as the {productname} `fullpagehtml` premium plugin. This behavior could strip essential metadata used for social media previews or structured data integrations, and required integrators to manually whitelist the attribute to retain it. -[[deprecated]] -== Deprecated +In {release-version}, the schema has been updated to include `property` as a valid attribute for `meta` elements. This change ensures compatibility with common metadata standards. -{productname} 8.2.0 includes the following deprecation: +=== Corrected type of `undoManager.add` method. The `event` parameter is type `EditorEvent` not `Event`. +// #TINY-12936 -// === The `` configuration property, ``, has been deprecated -// #TINY-vwxyz1 +// TBA was tagged as Task -// CCFR here. +=== Chromium browsers would in certain situations scroll the editor unexpectedly when dragging content over the editor. +// #INT-3373 +// TBA was missing target version -[[known-issues]] -== Known issues +=== Added support for loading web components into iframes +// #TINY-13006 -This section describes issues that users of {productname} 8.2.0 may encounter and possible workarounds for these issues. +Previously, there was no method to load web components into the editor iframe or preview iframes used by other plugins, which prevented these components from rendering correctly. This limitation impacted users who relied on custom web components for extended editor functionality or content visualization. In {release-version}, a new API link:https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.schema/#getComponentUrls[getComponentUrls] has been introduced that allows specifying a script URL for the web component within the custom element schema. This enhancement enables web components to be properly registered and rendered within the {productname} editor environment. -There known issue in {productname} 8.2.0. +For an example of using custom elements with block-level and inline-level components, see: xref:content-filtering.adoc#example-using-custom_elements-with-block-level-and-inline-level-components[Example using `+custom_elements+` with block-level and inline-level components]. -// === -// #TINY-vwxyz1 +=== Reverted toolbar button width to `auto`. +// #TINY-13097 -// CCFR here. +// TBA was merged last minute \ No newline at end of file diff --git a/modules/ROOT/pages/changelog.adoc b/modules/ROOT/pages/changelog.adoc index e5e3f30baa..89dc800eaf 100644 --- a/modules/ROOT/pages/changelog.adoc +++ b/modules/ROOT/pages/changelog.adoc @@ -6,7 +6,33 @@ NOTE: This is the {productname} Community version changelog. For information abo == xref:8.2.0-release-notes.adoc[8.2.0 - 2025-10-22] -//TODO +### Improved +* Some elements would be given an extra newline by the serializer when indented. +// #TINY-12857 + +### Fixed +* UI elements like focus outlines and placeholders would be visible after printing. +// #TINY-12584 +* The `open` attribute on `
` elements is now normalized to `open="open"` when the accordion plugin is enabled. +//#TINY-12862 +* Tooltips on toolbar buttons sometimes remained visible if the button icon was updated while hovered. +// #TINY-12289 +* The editor would upon gaining focus scroll to the center of the editor on some browsers if the top of the editor was out of frame. +// #TINY-12626 +* Some UI elements related to dragging elements were not properly filtered out when fetching content. +// #TINY-12384 +* The cursor could get stuck around an absolute CEF element when navigating using arrow keys. +// #TINY-10526 +* The schema will now allow the `property` RDFa attribute on `meta` elements. +// #TINY-12858 +* Corrected type of `undoManager.add` method. The `event` parameter is type `EditorEvent` not `Event`. +// #TINY-12936 +* Chromium browsers would in certain situations scroll the editor unexpectedly when dragging content over the editor. +// #INT-3373 +* Support for setting component urls for custom elements. +// #TINY-13006 +* Reverted toolbar button width to `auto`. +// #TINY-13097 == xref:8.1.2-release-notes.adoc[8.1.2 - 2025-09-18] From 28a8ed1bfca21bd56a63ae4c759765aaf1fb5c02 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 22 Oct 2025 15:04:32 +1000 Subject: [PATCH 18/20] DOC-3223: Add missing release note entries. --- modules/ROOT/pages/8.2.0-release-notes.adoc | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 41447e96e5..1086d1670d 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -143,7 +143,9 @@ Previously, UI elements such as focus outlines and placeholder text were rendere === The `open` attribute on `
` elements is now normalized to `open="open"` when the accordion plugin is enabled. // #TINY-12862 -// TBA was tagged as Task +Previously, the `open` attribute on `
` elements was inconsistently defined when used with the accordion plugin. In some cases, the attribute appeared as `+open="true"+`, while toggling through the plugin converted it to `+open="open"+`. This inconsistency caused issues when loading externally created content that contained multiple open accordions with different attribute values, leading to mismatched accordion states. + +In {productname} {release-version}, the behavior has been standardized: when the accordion plugin is enabled, the `open` attribute is normalized to `+open="open"+` on content load. === Tooltips on toolbar buttons sometimes remained visible if the button icon was updated while hovered // #TINY-12289 @@ -183,12 +185,18 @@ In {release-version}, the schema has been updated to include `property` as a val === Corrected type of `undoManager.add` method. The `event` parameter is type `EditorEvent` not `Event`. // #TINY-12936 -// TBA was tagged as Task +The `undoManager.add` method previously defined its `event` parameter as type `Event`, leading to inaccurate type inference and reduced developer clarity. This issue caused incomplete type validation and limited IDE assistance when working with `undo()` events. + +{productname} {release-version} addresses this issue by updating the `undoManager.add` method to use the `EditorEvent` type for the `event` parameter, ensuring consistency with other {productname} APIs. + +For more information on the `undoManager.add` method, see: xref:apis/tinymce.undomanager.adoc#add[undoManager.add()]. === Chromium browsers would in certain situations scroll the editor unexpectedly when dragging content over the editor. // #INT-3373 -// TBA was missing target version +Previously, in Chromium-based browsers starting with Chrome 141 (and some builds of 140), focusing the editor during a `dragover` event could trigger the browser's scroll-to-caret behavior. Because the caret initially sat at the start of the document, pages could jump to the top as users dragged content over the editor, disrupting drag-and-drop workflows. + +In {productname} {release-version}, dragover handling has been updated to move the caret to the intended drop position before the editor receives focus. This ensures Chrome's scroll-to-caret check finds the caret already in view, preventing unexpected scrolling and maintaining a smooth drag-and-drop experience. === Added support for loading web components into iframes // #TINY-13006 From 45487c1ff7294e9cd0f1018578b4f18792b15103 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 22 Oct 2025 16:26:53 +1000 Subject: [PATCH 19/20] DOC-3223: revert 8-dev changes to antora.yml. --- antora.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/antora.yml b/antora.yml index c68dff38d8..4b79d5d160 100644 --- a/antora.yml +++ b/antora.yml @@ -10,7 +10,7 @@ asciidoc: companyurl: https://www.tiny.cloud cdnurl: https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js tdcdnurl: https://cdn.tiny.cloud/1/_your_api_key_/tinydrive/8/tinydrive.min.js - tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8-dev/tinymce.min.js + tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/8/tinydrive.min.js webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js From 2dcf9a5f8fe8661eabaaeffc9ba8a25f6cbe0d5a Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Thu, 23 Oct 2025 11:27:47 +1000 Subject: [PATCH 20/20] DOC-3223: add missing changelog item and release note fix. --- modules/ROOT/pages/8.2.0-release-notes.adoc | 8 +++++--- modules/ROOT/pages/changelog.adoc | 2 ++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 1086d1670d..5414068491 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -205,7 +205,9 @@ Previously, there was no method to load web components into the editor iframe or For an example of using custom elements with block-level and inline-level components, see: xref:content-filtering.adoc#example-using-custom_elements-with-block-level-and-inline-level-components[Example using `+custom_elements+` with block-level and inline-level components]. -=== Reverted toolbar button width to `auto`. -// #TINY-13097 +=== Addressed split buttons rendering narrower than in TinyMCE 7, ensuring consistent sizing across the toolbar +// #TINY-13097 && #TINY-13111 -// TBA was merged last minute \ No newline at end of file +In {productname} {release-version}, an issue was resolved where split buttons rendered narrower than in {productname} 7 and other toolbar buttons. This occurred because the main portion of the split button used a CSS rule that caused it to collapse to the icon size during initialization, resulting in an incorrect fixed width. This made split buttons appear visually inconsistent, reduced their clickability, and could cause text labels to be truncated. + +{productname} {release-version} addresses this issue by adjusting the width behavior to inherit the correct `34px` for icons and auto for text—ensuring consistent sizing across the toolbar. \ No newline at end of file diff --git a/modules/ROOT/pages/changelog.adoc b/modules/ROOT/pages/changelog.adoc index 89dc800eaf..47970d7ee2 100644 --- a/modules/ROOT/pages/changelog.adoc +++ b/modules/ROOT/pages/changelog.adoc @@ -33,6 +33,8 @@ NOTE: This is the {productname} Community version changelog. For information abo // #TINY-13006 * Reverted toolbar button width to `auto`. // #TINY-13097 +* Addressed split buttons rendering narrower than in TinyMCE 7, ensuring consistent sizing across the toolbar. +// #TINY-13111 == xref:8.1.2-release-notes.adoc[8.1.2 - 2025-09-18]