Merge branch 'feature/8.2.0/DOC-3223' into feature/8.2.0/DOC-3223_TINY-10306

kemister85 · web-flow · commit a1b09bb8f230 · 2025-10-20T09:08:53.000+10:00
diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc
@@ -42,6 +42,36 @@ The following premium plugin updates were released alongside {productname} 8.2.0
 
 // For information on the **<Premium plugin name 1>** plugin, see: xref:<plugincode>.adoc[<Premium plugin name 1>].
 
+=== 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 `+<img>+` could cause an empty `+<figcaption>+` 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 `+<figcaption>+` 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.
+
+**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 `+<head>+` 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 `<head>` 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
@@ -73,6 +103,13 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a
 
 {productname} 8.2.0 also includes the following addition<s>:
 
+=== 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-vwxyz 1 changelog entry>
 // #TINY-vwxyz1
 
@@ -118,6 +155,23 @@ 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
diff --git 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"
+    }
+  }
+});
 ----
