make sure to load rte-content.css

src/css/rte-content.css

@@ -0,0 +1,49 @@
+.umb-macro-holder {
+	border: 3px dotted red;
+	padding: 7px;
+	margin: 3px;
+	display: block;
+	position: relative;
+}
+
+.umb-macro-holder::after {
+	content: 'Macros are no longer supported. Please use the block picker instead.';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: white;
+	background-color: rgba(0, 0, 0, 0.7);
+	padding: 10px;
+	border-radius: 5px;
+}
+
+.umb-embed-holder {
+	position: relative;
+}
+
+.umb-embed-holder > * {
+	user-select: none;
+	pointer-events: none;
+}
+
+.umb-embed-holder[data-mce-selected] {
+	outline: 2px solid var(--uui-palette-spanish-pink-light);
+}
+
+.umb-embed-holder::before {
+	z-index: 1000;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	content: ' ';
+}
+
+.umb-embed-holder[data-mce-selected]::before {
+	background: rgba(0, 0, 0, 0.025);
+}
+
+*[data-mce-selected='inline-boundary'] {
+	background: rgba(0, 0, 0, 0.025);
+	outline: 2px solid var(--uui-palette-spanish-pink-light);
+}

src/mocks/data/data-type/data-type.data.ts

@@ -762,7 +762,7 @@ export const data: Array<UmbMockDataTypeModel> = [
 					'+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],-strike[class|style],-s[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],small[class|style],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],figure,figcaption,video[*],audio[*],picture[*],source[*],canvas[*]',
 			},
 			{ alias: 'invalidElements', value: 'font' },
-			// { alias: 'stylesheets', value: ['/css/rte-content.css'] },
+			{ alias: 'stylesheets', value: [] },
 			{
 				alias: 'toolbar',
 				value: [

src/mocks/data/document.data.ts

@@ -40,6 +40,9 @@ export const data: Array<DocumentResponseModel> = [
 							Some value for the RTE with an <a href="https://google.com">external link</a> and an <a href="/{localLink:umb://document/c05da24d7740447b9cdcbd8ce2172e38}">internal link</a> foo foo
 						</p>
 						<div class="umb-macro-holder TestMacro umb-macro-mce_1 mceNonEditable"><!-- <?UMBRACO_MACRO macroAlias="TestMacro" /> --><ins>Macro alias: <strong>TestMacro</strong></ins></div>
+						<p>The following tests the embed plugin:</p>
+						<div class="mceNonEditable umb-embed-holder" data-embed-height="240" data-embed-width="360" data-embed-constrain="false"><iframe width="360" height="240" src="https://www.youtube.com/embed/QRIWz9SotY4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" title="Sleep Token - The Summoning"></iframe></div>
+						<p>End of test content</p>
 					`,
 				},
 			},

src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts

@@ -16,6 +16,7 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
 import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import { UmbStylesheetDetailRepository, UmbStylesheetRuleManager } from '@umbraco-cms/backoffice/stylesheet';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import rteContentUrl from './css/rte_content.css?url';
 
 @customElement('umb-input-tiny-mce')
 export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
@@ -179,6 +180,8 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 				(stylesheetPath: string) => `${this.#serverUrl}/css/${stylesheetPath.replace(/\\/g, '/')}`,
 			) ?? [];
 
+		stylesheets.push('/umbraco/backoffice/css/rte-content.css');
+
 		// create an object by merging the configuration onto the fallback config
 		const configurationOptions: RawEditorOptions = {
 			...defaultFallbackConfig,
@@ -218,7 +221,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 			autoresize_bottom_margin: 10,
 			body_class: 'umb-rte',
 			contextMenu: false,
-			inline_boundaries_selector: 'a[href],code,.mce-annotation,.umb-embed-holder',
+			inline_boundaries_selector: 'a[href],code,.mce-annotation,.umb-embed-holder,.umb-macro-holder',
 			menubar: false,
 			paste_remove_styles_if_webkit: true,
 			paste_preprocess: pastePreProcessHandler,