diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts index 367d2c6edc..130d8aee6f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts @@ -209,7 +209,10 @@ export class UmbInputTiptapElement extends UmbFormControlMixin p { + margin: 0; + padding: 0; + } + } + .umb-embed-holder { display: inline-block; position: relative; diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/tiptap-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/tiptap-toolbar.element.ts index a799d05907..58095402bc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/tiptap-toolbar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/tiptap-toolbar.element.ts @@ -62,24 +62,19 @@ export class UmbTiptapToolbarElement extends UmbLitElement { } override render() { - return html`${map(this.toolbar, (row, rowIndex) => - map( - row, - (group, groupIndex) => html` - ${map(group, (alias, aliasIndex) => { - const newRow = rowIndex !== 0 && groupIndex === 0 && aliasIndex === 0; - const component = this._lookup?.get(alias); - if (!component) return nothing; - return html` -
- ${component} -
- `; - })} -
+ return html` + ${map( + this.toolbar, + (row) => html` +
+ ${map( + row, + (group) => html`
${map(group, (alias) => this._lookup?.get(alias) ?? nothing)}
`, + )} +
`, - ), - )} `; + )} + `; } static override readonly styles = css` @@ -95,30 +90,35 @@ export class UmbTiptapToolbarElement extends UmbLitElement { border-bottom-right-radius: 0; background-color: var(--uui-color-surface); color: var(--color-text); - display: grid; - grid-template-columns: repeat(auto-fill, 10px); - grid-auto-flow: row; + + display: flex; + flex-direction: column; + position: sticky; top: -25px; left: 0px; right: 0px; - padding: var(--uui-size-space-3); + padding: var(--uui-size-3); z-index: 9999999; } - .item { - grid-column: span 3; - } + .row { + display: flex; + flex-direction: row; - .separator { - background-color: var(--uui-color-border); - width: 1px; - place-self: center; - height: 22px; - } - .separator:last-child, - .separator:has(+ [data-new-row]) { - display: none; + .group { + display: inline-flex; + align-items: stretch; + + &:not(:last-child)::after { + content: ''; + background-color: var(--uui-color-border); + width: 1px; + place-self: center; + height: 22px; + margin: 0 var(--uui-size-3); + } + } } `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-extensions-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-extensions-configuration.element.ts index 3762eae369..40fabc53e4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-extensions-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-extensions-configuration.element.ts @@ -109,7 +109,7 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement label: 'Rich Text Essentials', icon: 'icon-browser-window', group: '#tiptap_extGroup_formatting', - description: 'This is a core extension, it must be enabled', + description: 'This is a core extension, it is always enabled by default.', }); if (!this.value) {