yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tiptap RTE: Fixes embedded media spacing (#19878)

Browse Source 
* 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
This commit is contained in:
Lee Kelleher
2025-08-08 05:52:41 +01:00
committed by GitHub
parent e7da631ec2
commit ba8e1ae5dd
3 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-span.extension.ts vendored
View File

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

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

@@ -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() {

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

@@ -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;
}
}
}
`;
}