Tiptap RTE: Fixes embedded media spacing (#19878)

* Tiptap RTE: Makes embedded-media truly inline

by using a `<span>` instead of a `<div>`.

* Cosmetically aligns the selection styles

* Adds `UmbEmbeddedMediaOptions` to strongly-type the `inline` option

Author: leekelleher

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-span.extension.ts

@@ -37,6 +37,8 @@ function serializeStyles(items: Record<string, string>): string {
 export const Span = Mark.create<SpanOptions>({
 	name: 'span',
 
+	priority: 50,
+
 	addOptions() {
 		return { HTMLAttributes: {} };
 	},

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-umb-embedded-media.extension.ts

@@ -1,6 +1,10 @@
 import { mergeAttributes, Node } from '@tiptap/core';
 
-export const umbEmbeddedMedia = Node.create({
+export interface UmbEmbeddedMediaOptions {
+	inline: boolean;
+}
+
+export const umbEmbeddedMedia = Node.create<UmbEmbeddedMediaOptions>({
 	name: 'umbEmbeddedMedia',
 	group() {
 		return this.options.inline ? 'inline' : 'block';
@@ -25,19 +29,13 @@ export const umbEmbeddedMedia = Node.create({
 	},
 
 	parseHTML() {
-		return [
-			{
-				tag: 'div',
-				priority: 100,
-				getAttrs: (dom) => dom.classList.contains('umb-embed-holder') && null,
-			},
-		];
+		return [{ tag: '.umb-embed-holder', priority: 100 }];
 	},
 
 	renderHTML({ HTMLAttributes }) {
 		const { markup, ...attrs } = HTMLAttributes;
 		const embed = document.createRange().createContextualFragment(markup);
-		return ['div', mergeAttributes({ class: 'umb-embed-holder' }, attrs), embed];
+		return [this.options.inline ? 'span' : 'div', mergeAttributes({ class: 'umb-embed-holder' }, attrs), embed];
 	},
 
 	addCommands() {

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/embedded-media.tiptap-api.ts

@@ -9,27 +9,27 @@ export default class UmbTiptapEmbeddedMediaExtensionApi extends UmbTiptapExtensi
 		.umb-embed-holder {
 			display: inline-block;
 			position: relative;
-		}
 
-		.umb-embed-holder > * {
-			user-select: none;
-			pointer-events: none;
-		}
+			&::before {
+				z-index: 1000;
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				content: ' ';
+			}
 
-		.umb-embed-holder.ProseMirror-selectednode {
-			outline: 2px solid var(--uui-palette-spanish-pink-light);
-		}
+			&.ProseMirror-selectednode {
+				outline: 3px solid var(--uui-color-focus);
 
-		.umb-embed-holder::before {
-			z-index: 1000;
-			width: 100%;
-			height: 100%;
-			position: absolute;
-			content: ' ';
-		}
+				&::before {
+					background: rgba(0, 0, 0, 0.1);
+				}
 
-		.umb-embed-holder.ProseMirror-selectednode::before {
-			background: rgba(0, 0, 0, 0.025);
+				> * {
+					user-select: none;
+					pointer-events: none;
+				}
+			}
 		}
 	`;
 }