Tiptap RTE: Added data-mark attributes (#18689)

Tiptap: adds `data-mark` attributes to RTE, toolbar and toolbar items.
This commit is contained in:
Lee Kelleher
2025-03-18 04:22:20 +00:00
committed by GitHub
parent 2f9d58fc68
commit 81e63e7fa9
3 changed files with 11 additions and 2 deletions

View File

@@ -179,7 +179,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
</umb-tiptap-toolbar>
`,
)}
<div id="editor"></div>
<div id="editor" data-mark="input:tiptap-rte"></div>
`;
}

View File

@@ -30,6 +30,8 @@ export class UmbTiptapToolbarElement extends UmbLitElement {
override connectedCallback(): void {
super.connectedCallback();
this.setAttribute('data-mark', 'tiptap-toolbar');
this.#attached = true;
this.#observeExtensions();
}
@@ -51,7 +53,12 @@ export class UmbTiptapToolbarElement extends UmbLitElement {
[],
(manifest) => this.toolbar.flat(2).includes(manifest.alias),
(extensionControllers) => {
this._lookup = new Map(extensionControllers.map((ext) => [ext.alias, ext.component]));
this._lookup = new Map(
extensionControllers.map((ext) => {
(ext.component as HTMLElement)?.setAttribute('data-mark', `action:tiptap-toolbar:${ext.alias}`);
return [ext.alias, ext.component];
}),
);
},
undefined,
undefined,

View File

@@ -165,6 +165,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
<uui-button
compact
class=${forbidden ? 'forbidden' : ''}
data-mark="tiptap-toolbar-item:${item.alias}"
draggable="true"
look=${forbidden ? 'placeholder' : 'outline'}
?disabled=${forbidden || inUse}
@@ -303,6 +304,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
<uui-button
compact
class=${forbidden ? 'forbidden' : ''}
data-mark="tiptap-toolbar-item:${item.alias}"
draggable="true"
look=${forbidden ? 'placeholder' : 'outline'}
title=${this.localize.string(item.label)}