diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts index 224cf316de..6623b0e216 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts @@ -2568,4 +2568,21 @@ export default { wordWrapConfigDescription: 'Slå ordbrydning til eller fra, så tekst automatisk brydes ved vinduets kant i stedet for at skabe en horisontal scrollbar.', }, + tiptap: { + extGroup_formatting: 'Text formattering', + extGroup_interactive: 'Inaktive elementer', + extGroup_media: 'Medier', + extGroup_structure: 'Indholds struktur', + extGroup_unknown: 'Ukategoriseret', + toobar_availableItems: 'Tilgængelige handlinger', + toobar_availableItemsEmpty: 'Ingen handler at vise', + toolbar_designer: 'Handlings designer', + toolbar_addRow: 'Tilføj række', + toolbar_addGroup: 'Tilføj gruppe', + toolbar_addItems: 'Tilføj handlinger', + toolbar_removeRow: 'Fjern række', + toolbar_removeGroup: 'Fjern gruppe', + toolbar_removeItem: 'Fjern handling', + toolbar_emptyGroup: 'Tom', + }, } as UmbLocalizationDictionary; diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index e5a5eeadc2..e5ef7bf49e 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -2654,14 +2654,15 @@ export default { extGroup_media: 'Embeds and media', extGroup_structure: 'Content structure', extGroup_unknown: 'Uncategorized', - toobar_availableItems: 'Available toolbar items', + toobar_availableItems: 'Available actions', toobar_availableItemsEmpty: 'There are no toolbar extensions to show', toolbar_designer: 'Toolbar designer', - toolbar_addRow: 'Add row configuration', + toolbar_addRow: 'Add row', toolbar_addGroup: 'Add group', - toolbar_addItems: 'Add items', + toolbar_addItems: 'Add actions', toolbar_removeRow: 'Remove row', toolbar_removeGroup: 'Remove group', - toolbar_removeItem: 'Remove item', + toolbar_removeItem: 'Remove action', + toolbar_emptyGroup: 'Empty', }, } as UmbLocalizationDictionary; 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 4743f758d1..359e84376d 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 @@ -12,9 +12,7 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/ import './tiptap-hover-menu.element.js'; import './tiptap-toolbar.element.js'; -const elementName = 'umb-input-tiptap'; - -@customElement(elementName) +@customElement('umb-input-tiptap') export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement) { readonly #requiredExtensions = [ StarterKit, @@ -58,7 +56,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin('dimensions'); - if (dimensions?.width) this.setAttribute('style', `max-width: ${dimensions.width}px;`); - if (dimensions?.height) element.setAttribute('style', `height: ${dimensions.height}px;`); + if (dimensions?.width) { + this.setAttribute('style', `max-width: ${dimensions.width}px;`); + } + if (dimensions?.height) { + element.setAttribute('style', `height: ${dimensions.height}px;`); + } this._toolbar = this.configuration?.getValueByAlias('toolbar') ?? [[[]]]; @@ -344,6 +346,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin +
this.#onClick(item)} - @dragstart=${(e: DragEvent) => this.#onDragStart(e, item.alias)} - @dragend=${this.#onDragEnd}> -
- ${when(item.icon, () => html``)} - ${this.localize.string(item.label)} -
- - `; + return inUse || forbidden + ? nothing + : html` + this.#onClick(item)} + @dragstart=${(e: DragEvent) => this.#onDragStart(e, item.alias)} + @dragend=${this.#onDragEnd}> +
+ ${when(item.icon, () => html``)} + ${this.localize.string(item.label)} +
+ + `; } #renderDesigner() { return html` - +
${repeat( this._toolbar, @@ -192,7 +193,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement look="placeholder" label=${this.localize.term('tiptap_toolbar_addRow')} @click=${() => this.#context.insertToolbarRow(this._toolbar.length)}> - +
`; } @@ -220,7 +221,6 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement () => html` this.#context?.removeToolbarRow(rowIndex)}> @@ -235,7 +235,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement #renderGroup(group?: UmbTiptapToolbarGroupViewModel, rowIndex = 0, groupIndex = 0) { if (!group) return nothing; - const hideActionBar = this._toolbar[rowIndex].data.length === 1 && group.data.length === 0; + const showActionBar = this._toolbar[rowIndex].data.length > 1 && group.data.length === 0; return html`
${when( group?.data.length === 0, - () => html`Add items`, + () => html`Empty`, () => html`${group!.data.map((alias, idx) => this.#renderItem(alias, rowIndex, groupIndex, idx))}`, )}
${when( - !hideActionBar, + showActionBar, () => html` this.#context?.removeToolbarGroup(rowIndex, groupIndex)}> @@ -298,11 +297,32 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement } static override readonly styles = [ + UmbTextStyles, css` :host { display: flex; flex-direction: column; - gap: var(--uui-size-1); + gap: var(--uui-size-space-4); + flex-grow: 1; + } + + @media (min-width: 1400px) { + :host { + flex-direction: row; + } + #toolbox { + width: 500px; + max-width: 33%; + flex-grow: 1; + } + + #toolbar { + flex-grow: 100; + } + } + + #toolbox { + border: 1px solid var(--uui-color-border); } uui-box.minimal { @@ -323,9 +343,6 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement display: flex; flex-wrap: wrap; gap: var(--uui-size-3); - background-color: var(--uui-color-surface-alt); - border-radius: var(--uui-border-radius); - padding: var(--uui-size-3); uui-button { --uui-button-font-weight: normal; @@ -347,7 +364,6 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement --color-contrast: var(--uui-color-danger); --uui-button-contrast-disabled: var(--uui-color-danger); --uui-button-border-color-disabled: var(--uui-color-danger); - opacity: 0.5; } div { @@ -357,6 +373,10 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement } } + uui-button-inline-create:not([vertical]) { + margin-bottom: -4px; + } + #rows { display: flex; flex-direction: column; @@ -367,12 +387,14 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement align-items: flex-start; justify-content: space-between; gap: var(--uui-size-3); - border: 1px solid var(--uui-color-border); - border-radius: var(--uui-border-radius); - padding: var(--uui-size-3) var(--uui-size-2); + &:not(:last-child) { + border-bottom: 1px solid var(--uui-color-border); + } + + &:focus-within, &:hover { - border-color: var(--uui-button-contrast-hover); + border-color: var(--uui-color-border-standalone); } .groups { @@ -385,7 +407,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement gap: var(--uui-size-1); uui-button-inline-create { - height: 40px; + height: 50px; } .group { @@ -395,12 +417,21 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement justify-content: space-between; gap: var(--uui-size-3); - border: 1px dashed var(--uui-color-border-standalone); + border: 1px dashed transparent; border-radius: var(--uui-border-radius); padding: var(--uui-size-3); + > uui-action-bar { + opacity: 0; + transition: opacity 120ms; + } + + &:focus-within, &:hover { - border-color: var(--uui-button-contrast-hover); + border-color: var(--uui-color-border-standalone); + > uui-action-bar { + opacity: 1; + } } .items { @@ -429,7 +460,6 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement --color-contrast: var(--uui-color-danger); --uui-button-contrast-disabled: var(--uui-color-danger); --uui-button-border-color-disabled: var(--uui-color-danger); - opacity: 0.5; } div { @@ -459,6 +489,6 @@ export { UmbPropertyEditorUiTiptapToolbarConfigurationElement as element }; declare global { interface HTMLElementTagNameMap { - [elementName]: UmbPropertyEditorUiTiptapToolbarConfigurationElement; + 'umb-property-editor-ui-tiptap-toolbar-configuration': UmbPropertyEditorUiTiptapToolbarConfigurationElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts index b0526ffd57..fe5df56382 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts @@ -16,18 +16,18 @@ export const manifests: Array = [ { alias: 'extensions', label: 'Capabilities', - description: `Enable extensions enhance the capabilities of the Tiptap editor. + description: `Choose which Tiptap extensions to enable -_Once enabled, the extensions will be available in the toolbar._`, +_Once enabled, the related actions will be available for the toolbar._`, propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ExtensionsConfiguration', weight: 10, }, { alias: 'toolbar', label: 'Toolbar', - description: `Configure the toolbar for the intended editing experience. + description: `Design the available actions -_Drag and drop the available items onto the toolbar designer._`, +_Drag and drop the available actions onto the toolbar._`, propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ToolbarConfiguration', weight: 15, },