From a94fead29ef50dcea7ffa45088f5563a786d8166 Mon Sep 17 00:00:00 2001
From: Aleh Makaranka <29537473+cpoftea@users.noreply.github.com>
Date: Mon, 23 Mar 2026 13:03:16 +0400
Subject: [PATCH 1/2] [RTE] Render default and plugin nodes through
 PlateElement / PlateLeaf

* Switched headings and default paragraph to `PlateElement` with `as`, and bold/code/italic/superscript/underline to `PlateLeaf` with `as`
* Refactored `AttachmentBlock`, `IframeBlock`, and `PlaceholderBlock` to `PlateElement` with `PlateElementProps` / `useElement` instead of manual `attributes` / `element` typing
* Updated `quotePlugin` quote renderer, `linkPlugin` anchor override, `listPlugin` `LI` component, `paragraphPlugin` default paragraph override, `NotePluginBlock`, and `Separator` to use `PlateElement` (merged `className` / styles where needed; `Separator` no longer uses `forwardRef` and applies `contentEditable={ false }` on the element)
* Replaced nested span wrappers in `baseMarksPlugin` (bold/italic/underline) with `PlateLeaf`
* Replaced inline code span in `inlineCodePlugin` with `PlateLeaf` and `PlateLeafProps`
* Wrapped `ToDoItem` in `PlateElement` with `asChild` around `FlexRow` so Slate attributes compose with the layout row
* Added `types.ts` with `TPlaceholderElement` and used `satisfies` when inserting placeholder nodes
---
 changelog.md                                  |  1 +
 uui-editor/src/components.tsx                 | 50 +++++++++++-----
 .../attachmentPlugin/AttachmentBlock.tsx      | 17 ++----
 .../baseMarksPlugin/baseMarksPlugin.tsx       | 31 ++--------
 .../src/plugins/iframePlugin/IframeBlock.tsx  | 15 ++---
 .../inlineCodePlugin/inlineCodePlugin.tsx     | 11 ++--
 .../src/plugins/linkPlugin/linkPlugin.tsx     | 11 ++--
 .../src/plugins/listPlugin/listPlugin.tsx     |  8 +--
 .../plugins/notePlugin/NotePluginBlock.tsx    | 28 +++++----
 .../paragraphPlugin/paragraphPlugin.tsx       | 10 ++--
 .../placeholderPlugin/PlaceholderBlock.tsx    | 15 +++--
 .../placeholderPlugin/placeholderPlugin.tsx   |  3 +-
 .../src/plugins/placeholderPlugin/types.ts    |  8 +++
 .../src/plugins/quotePlugin/quotePlugin.tsx   | 18 +++---
 .../src/plugins/separatorPlugin/Separator.tsx | 20 +++----
 .../src/plugins/toDoListPlugin/ToDoItem.tsx   | 57 ++++++++++---------
 16 files changed, 150 insertions(+), 153 deletions(-)
 create mode 100644 uui-editor/src/plugins/placeholderPlugin/types.ts

diff --git a/changelog.md b/changelog.md
index fb2ab09f68..438ac63c7b 100644
--- a/changelog.md
+++ b/changelog.md
@@ -12,6 +12,7 @@
 * [DataRowOptions]: Added `reserveSpace` property to checkbox configuration
   - When set and `checkbox.isVisible` is `false`, reserves space for the checkbox in the row
   - Automatically calculated for tree-like data structures to maintain consistent alignment
+* [RTE]: default block and mark components render through `PlateElement` / `PlateLeaf` (with `asChild` where a semantic tag is used) so custom Plate plugins that wrap nodes (e.g. `inject.aboveComponent`) compose correctly ([#3062](https://github.com/epam/UUI/issues/3062)).
 
 
 **What's Fixed**
diff --git a/uui-editor/src/components.tsx b/uui-editor/src/components.tsx
index e6d718c0af..349b681986 100644
--- a/uui-editor/src/components.tsx
+++ b/uui-editor/src/components.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MARK_BOLD, MARK_CODE, MARK_ITALIC, MARK_SUPERSCRIPT, MARK_UNDERLINE } from '@udecode/plate-basic-marks';
-import { PlatePluginComponent } from '@udecode/plate-common';
+import { PlateElement, PlateLeaf, PlatePluginComponent } from '@udecode/plate-common';
 import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6 } from '@udecode/plate-heading';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 
@@ -24,18 +24,42 @@ export const createPlateUI = <T extends string = string>(
     >,
 ) => {
     const components: { [key: string]: PlatePluginComponent } = {
-        [ELEMENT_H1]: (props) => <h1 { ...props.attributes }>{ props.children }</h1>,
-        [ELEMENT_H2]: (props) => <h2 { ...props.attributes }>{ props.children }</h2>,
-        [ELEMENT_H3]: (props) => <h3 { ...props.attributes }>{ props.children }</h3>,
-        [ELEMENT_H4]: (props) => <h4 { ...props.attributes }>{ props.children }</h4>,
-        [ELEMENT_H5]: (props) => <h5 { ...props.attributes }>{ props.children }</h5>,
-        [ELEMENT_H6]: (props) => <h6 { ...props.attributes }>{ props.children }</h6>,
-        [ELEMENT_PARAGRAPH]: (props) => <p { ...props.attributes }>{ props.children }</p>,
-        [MARK_BOLD]: (props) => <strong { ...props.attributes }>{ props.children }</strong>,
-        [MARK_CODE]: (props) => <code { ...props.attributes }>{ props.children }</code>,
-        [MARK_ITALIC]: (props) => <em { ...props.attributes }>{ props.children }</em>,
-        [MARK_SUPERSCRIPT]: (props) => <sup { ...props.attributes }>{ props.children }</sup>,
-        [MARK_UNDERLINE]: (props) => <u { ...props.attributes }>{ props.children }</u>,
+        [ELEMENT_H1]: (props) => (
+            <PlateElement as="h1" { ...props } />
+        ),
+        [ELEMENT_H2]: (props) => (
+            <PlateElement as="h2" { ...props } />
+        ),
+        [ELEMENT_H3]: (props) => (
+            <PlateElement as="h3" { ...props } />
+        ),
+        [ELEMENT_H4]: (props) => (
+            <PlateElement as="h4" { ...props } />
+        ),
+        [ELEMENT_H5]: (props) => (
+            <PlateElement as="h5" { ...props } />
+        ),
+        [ELEMENT_H6]: (props) => (
+            <PlateElement as="h6" { ...props } />
+        ),
+        [ELEMENT_PARAGRAPH]: (props) => (
+            <PlateElement as="p" { ...props } />
+        ),
+        [MARK_BOLD]: (props) => (
+            <PlateLeaf as="strong" { ...props } />
+        ),
+        [MARK_CODE]: (props) => (
+            <PlateLeaf as="code" { ...props } />
+        ),
+        [MARK_ITALIC]: (props) => (
+            <PlateLeaf as="em" { ...props } />
+        ),
+        [MARK_SUPERSCRIPT]: (props) => (
+            <PlateLeaf as="sup" { ...props } />
+        ),
+        [MARK_UNDERLINE]: (props) => (
+            <PlateLeaf as="u" { ...props } />
+        ),
     };
 
     if (overrideByKey) {
diff --git a/uui-editor/src/plugins/attachmentPlugin/AttachmentBlock.tsx b/uui-editor/src/plugins/attachmentPlugin/AttachmentBlock.tsx
index 142bfe91a6..e299540a3d 100644
--- a/uui-editor/src/plugins/attachmentPlugin/AttachmentBlock.tsx
+++ b/uui-editor/src/plugins/attachmentPlugin/AttachmentBlock.tsx
@@ -15,25 +15,20 @@ import { ReactComponent as TextIcon } from '../../icons/file-file_text-24.svg';
 import { ReactComponent as MailIcon } from '../../icons/file-file_eml-24.svg';
 
 import css from './AttachmentBlock.module.scss';
-import { AnyObject, PlateEditor, PlatePluginComponent, setElements } from '@udecode/plate-common';
+import { PlateElement, PlateElementProps, setElements, useElement } from '@udecode/plate-common';
 import { useFocused, useReadOnly, useSelected } from 'slate-react';
 import { TAttachmentElement } from './types';
 
-export const AttachmentBlock: PlatePluginComponent<{
-    editor: PlateEditor,
-    attributes: AnyObject,
-    children: React.ReactNode,
-    element: TAttachmentElement
-}> = function AttachmentComp(props) {
+export const AttachmentBlock = function AttachmentComp({ children, ...props }: PlateElementProps) {
+    const element = useElement<TAttachmentElement>();
     const isFocused = useFocused();
     const isSelected = useSelected() && isFocused;
     const isReadonly = useReadOnly();
 
-    const { element, editor, children } = props;
     const [fileName, setFileName] = useState(element.data.fileName || '');
 
     const changeName = (name: string) => {
-        setElements(editor, {
+        setElements(props.editor, {
             ...element,
             data: {
                 ...element.data,
@@ -100,7 +95,7 @@ export const AttachmentBlock: PlatePluginComponent<{
     };
 
     return (
-        <div { ...props.attributes }>
+        <PlateElement as="div" { ...props }>
             <FlexRow
                 rawProps={ {
                     contentEditable: false,
@@ -146,6 +141,6 @@ export const AttachmentBlock: PlatePluginComponent<{
                 </FlexCell>
             </FlexRow>
             { children }
-        </div>
+        </PlateElement>
     );
 };
diff --git a/uui-editor/src/plugins/baseMarksPlugin/baseMarksPlugin.tsx b/uui-editor/src/plugins/baseMarksPlugin/baseMarksPlugin.tsx
index ba7e599940..f0306e7cb6 100644
--- a/uui-editor/src/plugins/baseMarksPlugin/baseMarksPlugin.tsx
+++ b/uui-editor/src/plugins/baseMarksPlugin/baseMarksPlugin.tsx
@@ -1,5 +1,5 @@
 import {
-    PlateEditor, PlatePluginComponent, isMarkActive, PlatePlugin,
+    PlateEditor, PlateLeaf, PlateLeafProps, isMarkActive, PlatePlugin,
 } from '@udecode/plate-common';
 import React from 'react';
 
@@ -17,32 +17,9 @@ import { ReactComponent as UnderlineIcon } from '../../icons/underline.svg';
 import { handleMarkButtonClick } from '../../utils/handleMarkButtonClick';
 import { BOLD_KEY, ITALIC_KEY, UNDERLINE_KEY } from './constants';
 
-// eslint-disable-next-line react/function-component-definition
-const Bold: PlatePluginComponent = (props) => {
-    const { attributes, children } = props;
-
-    return (
-        <span { ...attributes }><strong>{ children }</strong></span>
-    );
-};
-
-// eslint-disable-next-line react/function-component-definition
-const Italic: PlatePluginComponent = (props) => {
-    const { attributes, children } = props;
-
-    return (
-        <span { ...attributes }><i>{ children }</i></span>
-    );
-};
-
-// eslint-disable-next-line react/function-component-definition
-const Underline: PlatePluginComponent = (props) => {
-    const { attributes, children } = props;
-
-    return (
-        <span { ...attributes }><u>{ children }</u></span>
-    );
-};
+const Bold = (props: PlateLeafProps) => <PlateLeaf as="strong" { ...props } />;
+const Italic = (props: PlateLeafProps) => <PlateLeaf as="i" { ...props } />;
+const Underline = (props: PlateLeafProps) => <PlateLeaf as="u" { ...props } />;
 
 export const boldPlugin = (): PlatePlugin => createBoldPlugin<WithToolbarButton>({
     type: BOLD_KEY,
diff --git a/uui-editor/src/plugins/iframePlugin/IframeBlock.tsx b/uui-editor/src/plugins/iframePlugin/IframeBlock.tsx
index ed10c8796b..0e391293b1 100644
--- a/uui-editor/src/plugins/iframePlugin/IframeBlock.tsx
+++ b/uui-editor/src/plugins/iframePlugin/IframeBlock.tsx
@@ -4,18 +4,14 @@ import { uuiMod } from '@epam/uui-core';
 import cx from 'classnames';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import { useSelected } from 'slate-react';
-import { AnyObject, PlatePluginComponent } from '@udecode/plate-common';
+import { PlateElement, PlateElementProps, useElement } from '@udecode/plate-common';
 import { TIframeElement } from './types';
 
 const IFRAME_GLOBAL_CLASS = 'uui-rte-iframe';
 const PDF_GLOBAL_CLASS = 'uui-rte-iframe-pdf';
 
-export const IframeBlock: PlatePluginComponent<{
-    attributes: AnyObject,
-    children: React.ReactNode,
-    element: TIframeElement
-}> = function IframeComp(props) {
-    const { attributes, children, element } = props;
+export const IframeBlock = function IframeComp({ children, ...props }: PlateElementProps) {
+    const element = useElement<TIframeElement>();
     const isSelected = useSelected();
 
     const isPdf = element.data?.extension === 'pdf';
@@ -24,8 +20,7 @@ export const IframeBlock: PlatePluginComponent<{
     const url: string = element.url || element.src as string; // element.src it's previous editor format structure
 
     return (
-        // style attr needed for serialization
-        <div { ...attributes }>
+        <PlateElement as="div" { ...props }>
             <iframe
                 title={ url }
                 allowFullScreen={ true }
@@ -34,6 +29,6 @@ export const IframeBlock: PlatePluginComponent<{
                 className={ cx(css.content, isSelected && uuiMod.focus, IFRAME_GLOBAL_CLASS, isPdf && PDF_GLOBAL_CLASS) }
             />
             { children }
-        </div>
+        </PlateElement>
     );
 };
diff --git a/uui-editor/src/plugins/inlineCodePlugin/inlineCodePlugin.tsx b/uui-editor/src/plugins/inlineCodePlugin/inlineCodePlugin.tsx
index 05c378e1d7..41ac53ca88 100644
--- a/uui-editor/src/plugins/inlineCodePlugin/inlineCodePlugin.tsx
+++ b/uui-editor/src/plugins/inlineCodePlugin/inlineCodePlugin.tsx
@@ -1,6 +1,6 @@
 import { createCodePlugin } from '@udecode/plate-basic-marks';
 import {
-    PlateEditor, PlateElementProps, isMarkActive, PlatePlugin,
+    PlateEditor, PlateLeaf, PlateLeafProps, isMarkActive, PlatePlugin,
 } from '@udecode/plate-common';
 import React from 'react';
 
@@ -11,12 +11,9 @@ import { handleMarkButtonClick } from '../../utils/handleMarkButtonClick';
 import { WithToolbarButton } from '../../implementation/Toolbars';
 import { INLINE_CODE_KEY, INLINE_CODE_TYPE } from './constants';
 
-function Code(props: PlateElementProps) {
-    const { attributes, children } = props;
-    return (
-        <span { ...attributes }><code>{ children }</code></span>
-    );
-}
+const Code = (props: PlateLeafProps) => (
+    <PlateLeaf as="code" { ...props } />
+);
 
 export const codeBlockPlugin = (): PlatePlugin => createCodePlugin<WithToolbarButton>({
     key: INLINE_CODE_KEY,
diff --git a/uui-editor/src/plugins/linkPlugin/linkPlugin.tsx b/uui-editor/src/plugins/linkPlugin/linkPlugin.tsx
index 03a03c7191..a2bd781695 100644
--- a/uui-editor/src/plugins/linkPlugin/linkPlugin.tsx
+++ b/uui-editor/src/plugins/linkPlugin/linkPlugin.tsx
@@ -3,7 +3,7 @@ import { useUuiContext } from '@epam/uui-core';
 
 import { ToolbarButton } from '../../implementation/ToolbarButton';
 
-import { isElement, PlateEditor, PlatePlugin, someNode } from '@udecode/plate-common';
+import { isElement, PlateEditor, PlateElement, PlatePlugin, someNode } from '@udecode/plate-common';
 import { ELEMENT_LINK, LinkPlugin, createLinkPlugin, withLink } from '@udecode/plate-link';
 import { useIsPluginActive } from '../../helpers';
 import { ReactComponent as LinkIcon } from '../../icons/link.svg';
@@ -17,15 +17,14 @@ export const linkPlugin = (): PlatePlugin => createLinkPlugin<WithToolbarButton
     overrideByKey: {
         [ELEMENT_LINK]: {
             component: (props) => (
-                <a
-                    { ...props.attributes }
+                <PlateElement
+                    as="a"
+                    { ...props }
                     style={ { display: 'inline' } }
                     target="_blank"
                     rel="noopener noreferrer"
                     href={ props.element.url }
-                >
-                    { props.children }
-                </a>
+                />
             ),
         },
     },
diff --git a/uui-editor/src/plugins/listPlugin/listPlugin.tsx b/uui-editor/src/plugins/listPlugin/listPlugin.tsx
index 66396877eb..73465a86ec 100644
--- a/uui-editor/src/plugins/listPlugin/listPlugin.tsx
+++ b/uui-editor/src/plugins/listPlugin/listPlugin.tsx
@@ -1,5 +1,5 @@
 import {
-    PlateEditor, PlateElementProps, focusEditor, PlatePlugin,
+    PlateEditor, PlateElement, PlateElementProps, focusEditor, PlatePlugin,
     KEY_DESERIALIZE_HTML,
     traverseHtmlElements,
     isHtmlBlockElement,
@@ -36,9 +36,9 @@ export const listPlugin = (): PlatePlugin => createListPlugin<WithToolbarButton>
         [ELEMENT_LI]: {
             type: LI_TYPE,
             isElement: true,
-            component: ({ children, attributes }: PlateElementProps) => {
-                return <li { ...attributes }>{children}</li>;
-            },
+            component: (props: PlateElementProps) => (
+                <PlateElement as="li" { ...props } />
+            ),
             deserializeHtml: { rules: [{ validNodeName: 'LI' }] },
         },
         [ELEMENT_LIC]: {
diff --git a/uui-editor/src/plugins/notePlugin/NotePluginBlock.tsx b/uui-editor/src/plugins/notePlugin/NotePluginBlock.tsx
index 419145d1c9..bf2f8ec5ce 100644
--- a/uui-editor/src/plugins/notePlugin/NotePluginBlock.tsx
+++ b/uui-editor/src/plugins/notePlugin/NotePluginBlock.tsx
@@ -2,22 +2,20 @@ import cx from 'classnames';
 import * as React from 'react';
 
 import css from './NotePluginBlock.module.scss';
-import { PlateElementProps } from '@udecode/plate-common';
-import { NoteNodeProps } from './types';
-
-export function NotePluginBlock({ attributes, children, nodeProps }: PlateElementProps) {
-    let style;
-    if (nodeProps) {
-        const { borderColor, backgroundColor } = nodeProps as NoteNodeProps;
-        style = {
-            borderColor,
-            backgroundColor,
-        };
-    }
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
 
+export function NotePluginBlock({ className, nodeProps, ...rest }: PlateElementProps) {
     return (
-        <div { ...attributes } style={ style } className={ cx(css.wrapper) }>
-            { children }
-        </div>
+        <PlateElement
+            as="div"
+            { ...rest }
+            style={ {
+                ...(nodeProps && {
+                    borderColor: nodeProps.borderColor,
+                    backgroundColor: nodeProps.backgroundColor,
+                }),
+            } }
+            className={ cx(className, css.wrapper) }
+        />
     );
 }
diff --git a/uui-editor/src/plugins/paragraphPlugin/paragraphPlugin.tsx b/uui-editor/src/plugins/paragraphPlugin/paragraphPlugin.tsx
index 0463a2aad1..a2efae8bd5 100644
--- a/uui-editor/src/plugins/paragraphPlugin/paragraphPlugin.tsx
+++ b/uui-editor/src/plugins/paragraphPlugin/paragraphPlugin.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ELEMENT_DEFAULT, PlatePlugin } from '@udecode/plate-common';
+import { ELEMENT_DEFAULT, PlateElement, PlatePlugin } from '@udecode/plate-common';
 import { createParagraphPlugin } from '@udecode/plate-paragraph';
 import { PARAGRAPH_TYPE } from './constants';
 
@@ -10,11 +10,9 @@ export const paragraphPlugin = (): PlatePlugin => {
         type: PARAGRAPH_TYPE,
         overrideByKey: {
             [ELEMENT_DEFAULT]: {
-                component: (props): JSX.Element => {
-                    const { attributes, children } = props;
-
-                    return <p { ...attributes }>{ children }</p>;
-                },
+                component: (props): JSX.Element => (
+                    <PlateElement as="p" { ...props } />
+                ),
                 type: PARAGRAPH_TYPE,
             },
         },
diff --git a/uui-editor/src/plugins/placeholderPlugin/PlaceholderBlock.tsx b/uui-editor/src/plugins/placeholderPlugin/PlaceholderBlock.tsx
index 0511c7c186..f97dd21fc6 100644
--- a/uui-editor/src/plugins/placeholderPlugin/PlaceholderBlock.tsx
+++ b/uui-editor/src/plugins/placeholderPlugin/PlaceholderBlock.tsx
@@ -3,19 +3,22 @@ import css from './PlaceholderPlugin.module.scss';
 import cx from 'classnames';
 import { useSelected } from 'slate-react';
 import { uuiMod } from '@epam/uui-core';
+import { PlateElement, PlateElementProps, useElement } from '@udecode/plate-common';
+import { TPlaceholderElement } from './types';
 
-export function PlaceholderBlock(props: any) {
-    const { attributes, element, children } = props;
+export function PlaceholderBlock({ className, children, ...props }: PlateElementProps) {
+    const element = useElement<TPlaceholderElement>();
     const selected = useSelected();
     const src = element.data.name;
 
     return (
-        <span
-            { ...attributes }
-            className={ cx(css.placeholderBlock, selected && uuiMod.focus) }
+        <PlateElement
+            as="span"
+            className={ cx(className, css.placeholderBlock, selected && uuiMod.focus) }
+            { ...props }
         >
             { src }
             { children }
-        </span>
+        </PlateElement>
     );
 }
diff --git a/uui-editor/src/plugins/placeholderPlugin/placeholderPlugin.tsx b/uui-editor/src/plugins/placeholderPlugin/placeholderPlugin.tsx
index 181aaf5ca3..09ebae8e2e 100644
--- a/uui-editor/src/plugins/placeholderPlugin/placeholderPlugin.tsx
+++ b/uui-editor/src/plugins/placeholderPlugin/placeholderPlugin.tsx
@@ -11,6 +11,7 @@ import {
 import { PLACEHOLDER_PLUGIN_KEY } from './constants';
 import { WithToolbarButton } from '../../implementation/Toolbars';
 import css from './PlaceholderPlugin.module.scss';
+import { TPlaceholderElement } from './types';
 
 export interface PlaceholderPluginParams {
     /** Placeholder items */
@@ -62,7 +63,7 @@ export function PlaceholderButton({ editor }: IPlaceholderButton): any {
                                         data: i,
                                         type: 'placeholder',
                                         children: [{ text: '' }],
-                                    },
+                                    } satisfies TPlaceholderElement,
                                 );
                             } }
                         >
diff --git a/uui-editor/src/plugins/placeholderPlugin/types.ts b/uui-editor/src/plugins/placeholderPlugin/types.ts
new file mode 100644
index 0000000000..8433da25a3
--- /dev/null
+++ b/uui-editor/src/plugins/placeholderPlugin/types.ts
@@ -0,0 +1,8 @@
+import { TElement } from '@udecode/plate-common';
+
+export interface TPlaceholderElement extends TElement {
+    data: {
+        name: string;
+        [key: string]: any;
+    };
+}
diff --git a/uui-editor/src/plugins/quotePlugin/quotePlugin.tsx b/uui-editor/src/plugins/quotePlugin/quotePlugin.tsx
index 20924b2071..5cf843bdfe 100644
--- a/uui-editor/src/plugins/quotePlugin/quotePlugin.tsx
+++ b/uui-editor/src/plugins/quotePlugin/quotePlugin.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 import { ELEMENT_BLOCKQUOTE, createBlockquotePlugin } from '@udecode/plate-block-quote';
 import {
-    PlateEditor, PlatePluginComponent, focusEditor, toggleNodeType, PlatePlugin, getBlockAbove,
+    PlateEditor, PlateElement, focusEditor, toggleNodeType, PlatePlugin, getBlockAbove,
+    PlateElementProps,
 } from '@udecode/plate-common';
-
+import cx from 'classnames';
 import { useIsPluginActive } from '../../helpers';
 import { ReactComponent as QuoteIcon } from '../../icons/quote.svg';
 import { ToolbarButton } from '../../implementation/ToolbarButton';
@@ -12,14 +13,13 @@ import css from './quote.module.scss';
 import { WithToolbarButton } from '../../implementation/Toolbars';
 import { QUOTE_PLUGIN_KEY, QUOTE_TYPE } from './constants';
 
-const Quote: PlatePluginComponent = function QuoteComponent(props) {
+const Quote = function QuoteComponent({ className, ...props }: PlateElementProps) {
     return (
-        <blockquote
-            { ...props.attributes }
-            className={ css.quote }
-        >
-            { props.children }
-        </blockquote>
+        <PlateElement
+            as="blockquote"
+            className={ cx(className, css.quote) }
+            { ...props }
+        />
     );
 };
 
diff --git a/uui-editor/src/plugins/separatorPlugin/Separator.tsx b/uui-editor/src/plugins/separatorPlugin/Separator.tsx
index da2958bef0..65da1e6e49 100644
--- a/uui-editor/src/plugins/separatorPlugin/Separator.tsx
+++ b/uui-editor/src/plugins/separatorPlugin/Separator.tsx
@@ -6,21 +6,17 @@ import { uuiMod } from '@epam/uui-core';
 
 import css from './Separator.module.scss';
 
-const Separator = React.forwardRef<React.ElementRef<typeof PlateElement>, PlateElementProps>(({ className, ...props }, ref) => {
-    const { children } = props;
-
+const Separator = function SeparatorComponent({ className, ...props }: PlateElementProps) {
     const selected = useSelected();
 
     return (
-        <PlateElement ref={ ref } { ...props }>
-            <div
-                contentEditable={ false }
-                className={ cx(css.separator, selected && uuiMod.focus) }
-            >
-            </div>
-            { children }
-        </PlateElement>
+        <PlateElement
+            as="div"
+            { ...props }
+            contentEditable={ false }
+            className={ cx(css.separator, selected && uuiMod.focus) }
+        />
     );
-});
+};
 
 export { Separator };
diff --git a/uui-editor/src/plugins/toDoListPlugin/ToDoItem.tsx b/uui-editor/src/plugins/toDoListPlugin/ToDoItem.tsx
index 7666b2d126..1e7c37f920 100644
--- a/uui-editor/src/plugins/toDoListPlugin/ToDoItem.tsx
+++ b/uui-editor/src/plugins/toDoListPlugin/ToDoItem.tsx
@@ -4,38 +4,43 @@ import { FlexRow, Checkbox } from '@epam/uui';
 import css from './ToDoItem.module.scss';
 import { useReadOnly } from 'slate-react';
 import { TTodoListItemElement } from '@udecode/plate-list';
-import { setNodes, findNodePath } from '@udecode/plate-common';
+import { PlateElement, PlateElementProps, setNodes, findNodePath, Value, useElement } from '@udecode/plate-common';
 
-export function ToDoItem(props: any): any {
+export function ToDoItem(props: PlateElementProps<Value, TTodoListItemElement>) {
+    const element = useElement<TTodoListItemElement>();
     const isReadonly = useReadOnly();
-    const { element, editor, attributes, children } = props;
+    const {
+        className, editor, attributes, children,
+    } = props;
 
     const checked = element.data?.checked || false;
 
     return (
-        <FlexRow rawProps={ attributes }>
-            <div className={ css.checkboxContainer } style={ { userSelect: 'none' } }>
-                <Checkbox
-                    isReadonly={ isReadonly }
-                    isDisabled={ false }
-                    value={ checked }
-                    rawProps={ { contentEditable: false } }
-                    onValueChange={ (value) => {
-                        if (isReadonly) return;
-                        const path = findNodePath(editor, element);
-                        if (!path) return;
+        <PlateElement asChild { ...{ ...props, rawProps: attributes } }>
+            <FlexRow cx={ className }>
+                <div className={ css.checkboxContainer } style={ { userSelect: 'none' } }>
+                    <Checkbox
+                        isReadonly={ isReadonly }
+                        isDisabled={ false }
+                        value={ checked }
+                        rawProps={ { contentEditable: false } }
+                        onValueChange={ (value) => {
+                            if (isReadonly) return;
+                            const path = findNodePath(editor, element);
+                            if (!path) return;
 
-                        setNodes<TTodoListItemElement>(
-                            editor,
-                            { data: { checked: value } },
-                            { at: path },
-                        );
-                    } }
-                />
-            </div>
-            <div className={ css.textContainer }>
-                { children }
-            </div>
-        </FlexRow>
+                            setNodes<TTodoListItemElement>(
+                                editor,
+                                { data: { checked: value } },
+                                { at: path },
+                            );
+                        } }
+                    />
+                </div>
+                <div className={ css.textContainer }>
+                    { children }
+                </div>
+            </FlexRow>
+        </PlateElement>
     );
 }

From f4c90ea238e50e8f94c83ab56993987907c5ebd7 Mon Sep 17 00:00:00 2001
From: Aleh Makaranka <29537473+cpoftea@users.noreply.github.com>
Date: Mon, 23 Mar 2026 16:39:09 +0400
Subject: [PATCH 2/2] [RTE] Align todo and iframe nodes migrations

* Todo list plugin:
  * Moved `checked` from `data` to the element root for todo items; updated `ToDoItem` to read and toggle `checked` there
  * Added `DeprecatedTTodoListItemElement`, `isLegacyTodoListItemElement`, and `migrateCheckedPropertyIfNeeded` to lift legacy `data.checked` onto the node
  * Added `withTodoList` and `normalizeTodoListElement` and registered them on the todo list plugin
* Iframe plugin:
  * Updated `normalizeIframeElement` to set `url` from `url` or legacy `data.src` and to persist remaining `data` without `src`
  * Stopped falling back to `element.src` in `IframeBlock`; rendering uses `element.url` only
  * Extracted iframe `normalizeNode` wiring into `withIframe` and used it from the iframe plugin
---
 changelog.md                                  |  1 +
 uui-docs/src/demoData/slateInitialValue.ts    |  4 +-
 .../__snapshots__/normalizers.test.ts.snap    | 16 ++++++--
 .../src/__tests__/data/plate-migration.ts     | 12 ++++++
 uui-editor/src/migrations/normalizers.ts      | 37 ++++++++++++++++++-
 uui-editor/src/migrations/types.ts            |  7 ++++
 uui-editor/src/migrations/utils.ts            |  8 +++-
 .../src/plugins/iframePlugin/IframeBlock.tsx  |  2 +-
 .../src/plugins/iframePlugin/iframePlugin.tsx | 21 ++---------
 .../src/plugins/iframePlugin/withIframe.ts    | 19 ++++++++++
 .../src/plugins/toDoListPlugin/ToDoItem.tsx   |  4 +-
 .../src/plugins/toDoListPlugin/normalizers.ts | 26 +++++++++++++
 .../plugins/toDoListPlugin/toDoListPlugin.tsx |  2 +
 .../plugins/toDoListPlugin/withTodoList.ts    |  9 +++++
 14 files changed, 137 insertions(+), 31 deletions(-)
 create mode 100644 uui-editor/src/plugins/iframePlugin/withIframe.ts
 create mode 100644 uui-editor/src/plugins/toDoListPlugin/normalizers.ts
 create mode 100644 uui-editor/src/plugins/toDoListPlugin/withTodoList.ts

diff --git a/changelog.md b/changelog.md
index 438ac63c7b..f60951a443 100644
--- a/changelog.md
+++ b/changelog.md
@@ -30,6 +30,7 @@
     * Fixed Property Explorer by providing values for properties that are not automatically resolved ([#2832](https://github.com/epam/UUI/issues/2832))
     * Fixed tree table indentation when child rows have no checkbox: child rows now reserve consistent checkbox space for alignment ([#2844](https://github.com/epam/UUI/issues/2844))
 * [Tooltip]: fixed tooltip not showing on keyboard focus for complex elements with focusable children (e.g. Switch) ([#2959](https://github.com/epam/UUI/issues/2959))
+* [RTE]: Todo list items migrate legacy `element.data.checked` to `element.checked`. Iframe nodes normalize `url` from `url` or legacy `data.src`.
 
 
 # 6.4.3 - 04.02.2026
diff --git a/uui-docs/src/demoData/slateInitialValue.ts b/uui-docs/src/demoData/slateInitialValue.ts
index f58f77ca4b..c372b8312d 100644
--- a/uui-docs/src/demoData/slateInitialValue.ts
+++ b/uui-docs/src/demoData/slateInitialValue.ts
@@ -79,9 +79,7 @@ export const slateInitialValue = [
     },
     {
         type: 'toDoItem',
-        data: {
-            checked: false,
-        },
+        checked: true,
         children: [
             {
                 text: ' An item',
diff --git a/uui-editor/src/__tests__/__snapshots__/normalizers.test.ts.snap b/uui-editor/src/__tests__/__snapshots__/normalizers.test.ts.snap
index 1c7eb3f356..67a6e50793 100644
--- a/uui-editor/src/__tests__/__snapshots__/normalizers.test.ts.snap
+++ b/uui-editor/src/__tests__/__snapshots__/normalizers.test.ts.snap
@@ -73,15 +73,14 @@ Array [
     "type": "paragraph",
   },
   Object {
+    "checked": false,
     "children": Array [
       Object {
         "text": " An item",
         "uui-richTextEditor-span-mark": true,
       },
     ],
-    "data": Object {
-      "checked": false,
-    },
+    "data": Object {},
     "type": "toDoItem",
   },
   Object {
@@ -417,6 +416,17 @@ Array [
     "type": "iframe",
     "url": "https://www.youtube.com/embed/5qap5aO4i9A",
   },
+  Object {
+    "children": Array [
+      Object {
+        "text": "",
+        "uui-richTextEditor-span-mark": true,
+      },
+    ],
+    "data": Object {},
+    "type": "iframe",
+    "url": "https://www.youtube.com/embed/5qap5aO4i9A",
+  },
   Object {
     "children": Array [
       Object {
diff --git a/uui-editor/src/__tests__/data/plate-migration.ts b/uui-editor/src/__tests__/data/plate-migration.ts
index 848fb39af4..bd071abbf1 100644
--- a/uui-editor/src/__tests__/data/plate-migration.ts
+++ b/uui-editor/src/__tests__/data/plate-migration.ts
@@ -424,6 +424,18 @@ export const initialValue = [
         ],
         url: 'https://www.youtube.com/embed/5qap5aO4i9A',
     },
+    {
+        data: {
+            src: 'https://www.youtube.com/embed/5qap5aO4i9A',
+        },
+        type: 'iframe',
+        children: [
+            {
+                text: '',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+    },
     {
         data: {
             checked: false,
diff --git a/uui-editor/src/migrations/normalizers.ts b/uui-editor/src/migrations/normalizers.ts
index 2290d691d1..769942c0f4 100644
--- a/uui-editor/src/migrations/normalizers.ts
+++ b/uui-editor/src/migrations/normalizers.ts
@@ -1,4 +1,5 @@
 import { Value, setNodes, PlateEditor, TNodeEntry } from '@udecode/plate-common';
+import { TTodoListItemElement } from '@udecode/plate-list';
 import { TLinkElement } from '@udecode/plate-link';
 import { TTableCellElement, TTableElement } from '@udecode/plate-table';
 import { TAttachmentElement } from '../plugins/attachmentPlugin/types';
@@ -6,6 +7,7 @@ import { TIframeElement } from '../plugins/iframePlugin/types';
 import { TImageElement } from '../plugins/imagePlugin/types';
 import { toNewAlign } from './legacy_migrations';
 import { DepreactedTTableElement, DeprecatedImageElement, DeprecatedTAttachmentElement, DeprecatedTIframeElement, DeprecatedTLinkElement, DeprecatedTTableCellElement } from './types';
+import { isLegacyTodoListItemElement } from './utils';
 
 /**
  * Migration property functions
@@ -116,14 +118,20 @@ export const normalizeIframeElement = (editor: PlateEditor<Value>, entry: TNodeE
     const iframeNode = node as DeprecatedTIframeElement;
 
     if (iframeNode.data) {
-        const { src, ...otherData } = iframeNode.data;
+        const { data: { src, ...otherData }, url } = iframeNode;
 
         // removing props
         if (!src) {
             return;
         }
 
-        const iframe: TIframeElement = { ...iframeNode, data: { ...otherData } };
+        const newUrl = url || src;
+
+        const iframe: TIframeElement = {
+            ...iframeNode,
+            url: newUrl,
+            data: { ...otherData },
+        };
 
         setNodes<TTableCellElement>(
             editor,
@@ -175,3 +183,28 @@ export const normaizeColoredText = (editor: PlateEditor<Value>, entry: TNodeEntr
         );
     }
 };
+
+/** migrate checked property if needed */
+export const migrateCheckedPropertyIfNeeded = <V extends Value>(
+    editor: PlateEditor<V>,
+    entry: TNodeEntry<TTodoListItemElement>,
+) => {
+    const [node, path] = entry;
+
+    if (isLegacyTodoListItemElement(node)) {
+        const { data: { checked, ...otherData }, ...otherNodeData } = node;
+        const updatedNode: TTodoListItemElement = {
+            ...otherNodeData,
+            data: {
+                ...otherData,
+            },
+            checked: checked,
+        };
+
+        setNodes<TTodoListItemElement>(
+            editor,
+            updatedNode,
+            { at: path },
+        );
+    }
+};
diff --git a/uui-editor/src/migrations/types.ts b/uui-editor/src/migrations/types.ts
index 994a6cabcd..89d3cce3ac 100644
--- a/uui-editor/src/migrations/types.ts
+++ b/uui-editor/src/migrations/types.ts
@@ -1,5 +1,6 @@
 import { TLinkElement } from '@udecode/plate-link';
 import { TTableCellElement, TTableElement } from '@udecode/plate-table';
+import { TTodoListItemElement } from '@udecode/plate-list';
 import { TAttachmentElement } from '../plugins/attachmentPlugin/types';
 import { TIframeElement } from '../plugins/iframePlugin/types';
 import { TImageElement } from '../plugins/imagePlugin/types';
@@ -51,6 +52,12 @@ export type DeprecatedTAttachmentElement = TAttachmentElement & {
     }
 };
 
+export type DeprecatedTTodoListItemElement = TTodoListItemElement & {
+    data?: TTodoListItemElement['data'] & {
+        checked?: boolean; // removed
+    }
+};
+
 /**
  * Legacy slate schema types
  */
diff --git a/uui-editor/src/migrations/utils.ts b/uui-editor/src/migrations/utils.ts
index e64ccc4e9f..f40d7e59ca 100644
--- a/uui-editor/src/migrations/utils.ts
+++ b/uui-editor/src/migrations/utils.ts
@@ -1,7 +1,7 @@
-import { Value } from '@udecode/plate-common';
+import { TElement, Value } from '@udecode/plate-common';
 import { EditorValue } from '../types';
 import { migrateLegacySchema } from './legacy_migrations';
-import { SlateSchema } from './types';
+import { DeprecatedTTodoListItemElement, SlateSchema } from './types';
 
 /** type guard to distinct slate format */
 export const isSlateSchema = (value: EditorValue): value is SlateSchema => {
@@ -21,3 +21,7 @@ export const getMigratedPlateValue = (value: EditorValue): Value | undefined =>
 export const isPlateValue = (value: EditorValue): value is Value => {
     return Array.isArray(value);
 };
+
+export const isLegacyTodoListItemElement = (element: TElement): element is DeprecatedTTodoListItemElement =>
+    element.data !== undefined
+    && 'checked' in (element.data as Record<string, unknown>);
diff --git a/uui-editor/src/plugins/iframePlugin/IframeBlock.tsx b/uui-editor/src/plugins/iframePlugin/IframeBlock.tsx
index 0e391293b1..a47ab989b7 100644
--- a/uui-editor/src/plugins/iframePlugin/IframeBlock.tsx
+++ b/uui-editor/src/plugins/iframePlugin/IframeBlock.tsx
@@ -17,7 +17,7 @@ export const IframeBlock = function IframeComp({ children, ...props }: PlateElem
     const isPdf = element.data?.extension === 'pdf';
     const style = element.data?.style;
 
-    const url: string = element.url || element.src as string; // element.src it's previous editor format structure
+    const url: string = element.url;
 
     return (
         <PlateElement as="div" { ...props }>
diff --git a/uui-editor/src/plugins/iframePlugin/iframePlugin.tsx b/uui-editor/src/plugins/iframePlugin/iframePlugin.tsx
index 7e8b468d18..50cb4786c5 100644
--- a/uui-editor/src/plugins/iframePlugin/iframePlugin.tsx
+++ b/uui-editor/src/plugins/iframePlugin/iframePlugin.tsx
@@ -1,5 +1,5 @@
 import {
-    PlateEditor, createPluginFactory, getBlockAbove, getEndPoint, getPluginType, insertEmptyElement, selectEditor, PlatePlugin, isElement,
+    PlateEditor, createPluginFactory, getBlockAbove, getEndPoint, getPluginType, insertEmptyElement, selectEditor, PlatePlugin,
 } from '@udecode/plate-common';
 import React from 'react';
 
@@ -14,7 +14,7 @@ import { WithToolbarButton } from '../../implementation/Toolbars';
 import { IFRAME_PLUGIN_KEY, IFRAME_TYPE } from './constants';
 import { useFilesUploader } from '../uploadFilePlugin/file_uploader';
 import { PARAGRAPH_TYPE } from '../paragraphPlugin/constants';
-import { normalizeIframeElement } from '../../migrations';
+import { withIframe } from './withIframe';
 
 // TODO: implement iframe resize
 export const iframePlugin = (): PlatePlugin => {
@@ -66,22 +66,7 @@ export const iframePlugin = (): PlatePlugin => {
         options: {
             bottomBarButton: IframeButton,
         },
-        // move to common function / plugin
-        withOverrides: (editor) => {
-            const { normalizeNode } = editor;
-
-            editor.normalizeNode = (entry) => {
-                const [node] = entry;
-
-                if (isElement(node) && node.type === IFRAME_TYPE) {
-                    normalizeIframeElement(editor, entry);
-                }
-
-                normalizeNode(entry);
-            };
-
-            return editor;
-        },
+        withOverrides: withIframe,
     });
 
     return createIframePlugin();
diff --git a/uui-editor/src/plugins/iframePlugin/withIframe.ts b/uui-editor/src/plugins/iframePlugin/withIframe.ts
new file mode 100644
index 0000000000..d15bb5a8ad
--- /dev/null
+++ b/uui-editor/src/plugins/iframePlugin/withIframe.ts
@@ -0,0 +1,19 @@
+import { isElement, Value, PlateEditor } from '@udecode/plate-common';
+import { normalizeIframeElement } from '../../migrations';
+import { IFRAME_TYPE } from './constants';
+
+export const withIframe = (editor: PlateEditor<Value>) => {
+    const { normalizeNode } = editor;
+
+    editor.normalizeNode = (entry) => {
+        const [node] = entry;
+
+        if (isElement(node) && node.type === IFRAME_TYPE) {
+            normalizeIframeElement(editor, entry);
+        }
+
+        normalizeNode(entry);
+    };
+
+    return editor;
+};
diff --git a/uui-editor/src/plugins/toDoListPlugin/ToDoItem.tsx b/uui-editor/src/plugins/toDoListPlugin/ToDoItem.tsx
index 1e7c37f920..812a3a4fed 100644
--- a/uui-editor/src/plugins/toDoListPlugin/ToDoItem.tsx
+++ b/uui-editor/src/plugins/toDoListPlugin/ToDoItem.tsx
@@ -13,7 +13,7 @@ export function ToDoItem(props: PlateElementProps<Value, TTodoListItemElement>)
         className, editor, attributes, children,
     } = props;
 
-    const checked = element.data?.checked || false;
+    const checked = element?.checked || false;
 
     return (
         <PlateElement asChild { ...{ ...props, rawProps: attributes } }>
@@ -31,7 +31,7 @@ export function ToDoItem(props: PlateElementProps<Value, TTodoListItemElement>)
 
                             setNodes<TTodoListItemElement>(
                                 editor,
-                                { data: { checked: value } },
+                                { checked: value },
                                 { at: path },
                             );
                         } }
diff --git a/uui-editor/src/plugins/toDoListPlugin/normalizers.ts b/uui-editor/src/plugins/toDoListPlugin/normalizers.ts
new file mode 100644
index 0000000000..46fad1b6ef
--- /dev/null
+++ b/uui-editor/src/plugins/toDoListPlugin/normalizers.ts
@@ -0,0 +1,26 @@
+import {
+    isElement,
+    PlateEditor,
+    TNodeEntry,
+    Value,
+} from '@udecode/plate-common';
+import { TTodoListItemElement } from '@udecode/plate-list';
+import { migrateCheckedPropertyIfNeeded } from '../../migrations/normalizers';
+import { TODO_TYPE } from './constants';
+
+const isTodoListItemElementEntry = (entry: TNodeEntry): entry is TNodeEntry<TTodoListItemElement> =>
+    isElement(entry[0]) && entry[0].type === TODO_TYPE;
+
+export const normalizeTodoListElement = <V extends Value>(
+    editor: PlateEditor<V>,
+) => {
+    const { normalizeNode } = editor;
+
+    return (entry: TNodeEntry) => {
+        if (isTodoListItemElementEntry(entry)) {
+            migrateCheckedPropertyIfNeeded(editor, entry);
+        }
+
+        normalizeNode(entry);
+    };
+};
diff --git a/uui-editor/src/plugins/toDoListPlugin/toDoListPlugin.tsx b/uui-editor/src/plugins/toDoListPlugin/toDoListPlugin.tsx
index f13bd0df92..abdbbebb49 100644
--- a/uui-editor/src/plugins/toDoListPlugin/toDoListPlugin.tsx
+++ b/uui-editor/src/plugins/toDoListPlugin/toDoListPlugin.tsx
@@ -12,6 +12,7 @@ import { ELEMENT_TODO_LI, createTodoListPlugin } from '@udecode/plate-list';
 import { ToDoItem } from './ToDoItem';
 import { WithToolbarButton } from '../../implementation/Toolbars';
 import { TODO_PLUGIN_KEY, TODO_TYPE } from './constants';
+import { withTodoList } from './withTodoList';
 
 export const toDoListPlugin = (): PlatePlugin<WithToolbarButton> => {
     // TODO: implement withOverrides for toggling between lists and todo lists
@@ -23,6 +24,7 @@ export const toDoListPlugin = (): PlatePlugin<WithToolbarButton> => {
                 component: ToDoItem,
             },
         },
+        withOverrides: withTodoList,
         options: {
             bottomBarButton: ToDoListButton,
         },
diff --git a/uui-editor/src/plugins/toDoListPlugin/withTodoList.ts b/uui-editor/src/plugins/toDoListPlugin/withTodoList.ts
new file mode 100644
index 0000000000..3f536fd130
--- /dev/null
+++ b/uui-editor/src/plugins/toDoListPlugin/withTodoList.ts
@@ -0,0 +1,9 @@
+import { PlateEditor } from '@udecode/plate-core';
+import { Value } from '@udecode/plate-common';
+import { normalizeTodoListElement } from './normalizers';
+
+export const withTodoList = (editor: PlateEditor<Value>) => {
+    editor.normalizeNode = normalizeTodoListElement(editor);
+
+    return editor;
+};