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

Chore: Tiptap code sweep 2 (#18579)

Browse Source 
* Updates "rte-content.css" to share the Macro Holder style

* Tiptap toolbar menu padding

* Removed unnecessary `isActive` for Embedded Media toolbar button

* Adds scroll container to available toolbar item selection

* Toolbar config: adds style for "menu" items

* Adds missing mappings for the TinyMCE toolbar conversion

* Updates toolbar "menu" styling
This commit is contained in:
Lee Kelleher
2025-03-06 10:41:51 +00:00
committed by GitHub
parent 29b4056f68
commit a939f8ee1c
6 changed files with 123 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/Umbraco.Web.UI.Client/src/css/rte-content.css
View File

@@ -1,24 +1,5 @@
/* TinyMCE specific styles */
#tinymce {
.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;
}
@@ -49,3 +30,25 @@
outline: 2px solid var(--uui-palette-spanish-pink-light);
}
}
/* General styles (that apply to both TinyMCE and Tiptap RTEs) */
.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;
}

7
src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-menu.element.ts
View File

@@ -129,7 +129,7 @@ export class UmbTiptapToolbarMenuElement extends UmbLitElement {
</uui-button>
`,
() => html`
<uui-button compact look="secondary" label=${ifDefined(label)} popovertarget="popover-menu">
<uui-button compact label=${ifDefined(label)} popovertarget="popover-menu">
<span>${label}</span>
<uui-symbol-expand slot="extra" open></uui-symbol-expand>
</uui-button>
@@ -146,11 +146,12 @@ export class UmbTiptapToolbarMenuElement extends UmbLitElement {
--uui-button-font-weight: normal;
--uui-menu-item-flat-structure: 1;
margin-inline-start: var(--uui-size-space-1);
margin-left: var(--uui-size-space-1);
margin-bottom: var(--uui-size-space-1);
}
uui-button > uui-symbol-expand {
margin-left: var(--uui-size-space-4);
margin-left: var(--uui-size-space-2);
}
`,
];

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

@@ -5,8 +5,6 @@ import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
export default class UmbTiptapToolbarEmbeddedMediaExtensionApi extends UmbTiptapToolbarElementApiBase {
override isActive = (editor: Editor) => editor.isActive(umbEmbeddedMedia.name) === true;
override async execute(editor?: Editor) {
const data = {
constrain: false,

130
src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts
View File

@@ -141,16 +141,18 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
</div>
</uui-input>
</div>
<div class="available-items" dropzone="move" @drop=${this.#onDrop} @dragover=${this.#onDragOver}>
${when(
this._availableExtensions.length === 0,
() =>
html`<umb-localize key="tiptap_toobar_availableItemsEmpty"
>There are no toolbar extensions to show</umb-localize
>`,
() => repeat(this._availableExtensions, (item) => this.#renderAvailableItem(item)),
)}
</div>
<uui-scroll-container>
<div class="available-items" dropzone="move" @drop=${this.#onDrop} @dragover=${this.#onDragOver}>
${when(
this._availableExtensions.length === 0,
() =>
html`<umb-localize key="tiptap_toobar_availableItemsEmpty"
>There are no toolbar extensions to show</umb-localize
>`,
() => repeat(this._availableExtensions, (item) => this.#renderAvailableItem(item)),
)}
</div>
</uui-scroll-container>
</uui-box>
`;
}
@@ -158,24 +160,23 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
#renderAvailableItem(item: UmbTiptapToolbarExtension) {
const forbidden = !this.#context.isExtensionEnabled(item.alias);
const inUse = this.#context.isExtensionInUse(item.alias);
return inUse || forbidden
? nothing
: html`
<uui-button
compact
class=${forbidden ? 'forbidden' : ''}
draggable="true"
look=${forbidden ? 'placeholder' : 'outline'}
?disabled=${forbidden || inUse}
@click=${() => this.#onClick(item)}
@dragstart=${(e: DragEvent) => this.#onDragStart(e, item.alias)}
@dragend=${this.#onDragEnd}>
<div class="inner">
${when(item.icon, () => html`<umb-icon .name=${item.icon}></umb-icon>`)}
<span>${this.localize.string(item.label)}</span>
</div>
</uui-button>
`;
if (inUse || forbidden) return nothing;
return html`
<uui-button
compact
class=${forbidden ? 'forbidden' : ''}
draggable="true"
look=${forbidden ? 'placeholder' : 'outline'}
?disabled=${forbidden || inUse}
@click=${() => this.#onClick(item)}
@dragstart=${(e: DragEvent) => this.#onDragStart(e, item.alias)}
@dragend=${this.#onDragEnd}>
<div class="inner">
${when(item.icon, () => html`<umb-icon .name=${item.icon}></umb-icon>`)}
<span>${this.localize.string(item.label)}</span>
</div>
</uui-button>
`;
}
#renderDesigner() {
@@ -273,27 +274,52 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
#renderItem(alias: string, rowIndex = 0, groupIndex = 0, itemIndex = 0) {
const item = this.#context?.getExtensionByAlias(alias);
if (!item) return nothing;
const forbidden = !this.#context?.isExtensionEnabled(item.alias);
return html`
<uui-button
compact
class=${forbidden ? 'forbidden' : ''}
draggable="true"
look=${forbidden ? 'placeholder' : 'outline'}
title=${this.localize.string(item.label)}
?disabled=${forbidden}
@click=${() => this.#context.removeToolbarItem([rowIndex, groupIndex, itemIndex])}
@dragend=${this.#onDragEnd}
@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [rowIndex, groupIndex, itemIndex])}>
<div class="inner">
${when(
item.icon,
() => html`<umb-icon .name=${item.icon}></umb-icon>`,
() => html`<span>${this.localize.string(item.label)}</span>`,
)}
</div>
</uui-button>
`;
switch (item.kind) {
case 'menu':
return html`
<uui-button
compact
class=${forbidden ? 'forbidden' : ''}
draggable="true"
look=${forbidden ? 'placeholder' : 'outline'}
title=${this.localize.string(item.label)}
?disabled=${forbidden}
@click=${() => this.#context.removeToolbarItem([rowIndex, groupIndex, itemIndex])}
@dragend=${this.#onDragEnd}
@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [rowIndex, groupIndex, itemIndex])}>
<div class="inner">
<span>${this.localize.string(item.label)}</span>
</div>
<uui-symbol-expand slot="extra" open></uui-symbol-expand>
</uui-button>
`;
case 'button':
default:
return html`
<uui-button
compact
class=${forbidden ? 'forbidden' : ''}
draggable="true"
look=${forbidden ? 'placeholder' : 'outline'}
title=${this.localize.string(item.label)}
?disabled=${forbidden}
@click=${() => this.#context.removeToolbarItem([rowIndex, groupIndex, itemIndex])}
@dragend=${this.#onDragEnd}
@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [rowIndex, groupIndex, itemIndex])}>
<div class="inner">
${when(
item.icon,
() => html`<umb-icon .name=${item.icon}></umb-icon>`,
() => html`<span>${this.localize.string(item.label)}</span>`,
)}
</div>
</uui-button>
`;
}
}
static override readonly styles = [
@@ -339,6 +365,10 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
}
}
uui-scroll-container {
max-height: 350px;
}
.available-items {
display: flex;
flex-wrap: wrap;
@@ -466,6 +496,10 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
display: flex;
gap: var(--uui-size-1);
}
uui-symbol-expand {
margin-left: var(--uui-size-space-2);
}
}
}
}

23
src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/contexts/tiptap-toolbar-configuration.context.ts
View File

@@ -39,8 +39,8 @@ export class UmbTiptapToolbarConfigurationContext extends UmbContextBase<UmbTipt
fontname: 'Umb.Tiptap.Toolbar.FontFamily',
fontfamily: 'Umb.Tiptap.Toolbar.FontFamily',
fontsize: 'Umb.Tiptap.Toolbar.FontSize',
forecolor: null,
backcolor: null,
forecolor: 'Umb.Tiptap.Toolbar.TextColorForeground',
backcolor: 'Umb.Tiptap.Toolbar.TextColorBackground',
blockquote: 'Umb.Tiptap.Toolbar.Blockquote',
formatblock: null,
removeformat: 'Umb.Tiptap.Toolbar.ClearFormatting',
@@ -62,8 +62,8 @@ export class UmbTiptapToolbarConfigurationContext extends UmbContextBase<UmbTipt
subscript: 'Umb.Tiptap.Toolbar.Subscript',
superscript: 'Umb.Tiptap.Toolbar.Superscript',
charmap: null,
rtl: null,
ltr: null,
rtl: 'Umb.Tiptap.Toolbar.TextDirectionRtl',
ltr: 'Umb.Tiptap.Toolbar.TextDirectionLtr',
link: 'Umb.Tiptap.Toolbar.Link',
unlink: 'Umb.Tiptap.Toolbar.Unlink',
sourcecode: 'Umb.Tiptap.Toolbar.SourceEditor',
@@ -76,12 +76,15 @@ export class UmbTiptapToolbarConfigurationContext extends UmbContextBase<UmbTipt
super(host, UMB_TIPTAP_TOOLBAR_CONFIGURATION_CONTEXT);
this.observe(umbExtensionsRegistry.byType('tiptapToolbarExtension'), (extensions) => {
const _extensions = extensions.map((ext) => ({
alias: ext.alias,
label: ext.meta.label,
icon: ext.meta.icon,
dependencies: ext.forExtensions,
}));
const _extensions = extensions
.sort((a, b) => a.alias.localeCompare(b.alias))
.map((ext) => ({
kind: (ext.kind as string) ?? 'button',
alias: ext.alias,
label: ext.meta.label,
icon: ext.meta.icon,
dependencies: ext.forExtensions,
}));
this.#extensions.setValue(_extensions);

1
src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/types.ts
View File

@@ -1,4 +1,5 @@
export type UmbTiptapToolbarExtension = {
kind?: string;
alias: string;
label: string;
icon: string;