Tiptap RTE: Custom CSS Variables for min/max height/width (#19841)

* Adds CSS variables to `umb-input-tiptap`

to set the min/max height/width of the RTE.

* Moves "dimensions" config to the base RTE element

so can be reused with other RTE-based property-editors.

* Sets the CSS variables in the Tiptap property-editor element

* Code tidyup for RTE base element imports

* Corrects localization text of RTE dimensions description

As it's a fixed height/width as opposed to a maximum height/width.

* The CSS variable fallback value 'unset' should not be quoted.

CSS keywords like 'unset' should be unquoted, while string values should be quoted.

Author: leekelleher

src/Umbraco.Web.UI.Client/src/assets/lang/da.ts

@@ -2705,7 +2705,7 @@ export default {
 		trainingDescription:
 			'\n        <p>Want to master Umbraco? Spend a couple of minutes learning some best practices by watching one of these videos about using Umbraco. And visit <a href="https://umbraco.tv" target="_blank" rel="noopener">umbraco.tv</a> for even more Umbraco videos</p>\n    ',
 		learningBaseDescription:
-  			'  <p>Vil du mestre Umbraco? Brug et par minutter på at lære nogle best practices ved at besøge <a class="btn-link -underline" href="https://www.youtube.com/c/UmbracoLearningBase" target="_blank" rel="noopener">Umbraco Learning Base YouTube-kanalen</a>. Her finder du en masse videoer, der dækker mange aspekter af Umbraco.</p> ',
+			'  <p>Vil du mestre Umbraco? Brug et par minutter på at lære nogle best practices ved at besøge <a class="btn-link -underline" href="https://www.youtube.com/c/UmbracoLearningBase" target="_blank" rel="noopener">Umbraco Learning Base YouTube-kanalen</a>. Her finder du en masse videoer, der dækker mange aspekter af Umbraco.</p> ',
 		getStarted: 'To get you started',
 	},
 	settingsDashboard: {
@@ -2790,9 +2790,8 @@ export default {
 	tiptap: {
 		anchor: 'Anker',
 		anchor_input: 'Indtast anker-ID',
-		config_dimensions_description: 'Sæt den maksimale bredde og højde på editoren. Dette ekskluderer værktøjslinjens højde.',
-		maxDimensions: 'Maksimale dimensioner',
-		minDimensions: 'Minimale dimensioner',
+		config_dimensions_description:
+			'Angiver en fast bredde og højde for editoren. Dette ekskluderer værktøjslinjens og statuslinjens højder.',
 		config_extensions: 'Funktioner',
 		config_statusbar: 'Statuslinje',
 		config_toolbar: 'Værktøjslinje',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -2781,7 +2781,8 @@ export default {
 	tiptap: {
 		anchor: 'Anchor',
 		anchor_input: 'Enter an anchor ID',
-		config_dimensions_description: 'Set the maximum width and height of the editor. This excludes the toolbar height.',
+		config_dimensions_description:
+			'Sets the fixed width and height of the editor. This excludes the toolbar and statusbar heights.',
 		config_extensions: 'Capabilities',
 		config_statusbar: 'Statusbar',
 		config_toolbar: 'Toolbar',

src/Umbraco.Web.UI.Client/src/assets/lang/pt.ts

@@ -2789,7 +2789,7 @@ export default {
 		anchor: 'Âncora',
 		anchor_input: 'Introduza um ID de âncora',
 		config_dimensions_description:
-			'Defina a largura e altura máximas do editor. Isto exclui a altura da barra de ferramentas.',
+			'Definir uma largura e altura fixas para o editor. Isso exclui as alturas da barra de ferramentas e da barra de estado.',
 		config_extensions: 'Capacidades',
 		config_statusbar: 'Barra de estado',
 		config_toolbar: 'Barra de ferramentas',

src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts

@@ -1,22 +1,23 @@
 import type { UmbPropertyEditorRteValueType } from '../types.js';
 import { UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../constants.js';
-import { property, state } from '@umbraco-cms/backoffice/external/lit';
 import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
+import { property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbBlockRteEntriesContext, UmbBlockRteManagerContext } from '@umbraco-cms/backoffice/block-rte';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import {
+	UmbFormControlMixin,
+	UmbValidationContext,
+	UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
+} from '@umbraco-cms/backoffice/validation';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_CONTENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content';
 import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import type { UmbBlockRteTypeModel } from '@umbraco-cms/backoffice/block-rte';
 import type {
 	UmbPropertyEditorUiElement,
 	UmbPropertyEditorConfigCollection,
 } from '@umbraco-cms/backoffice/property-editor';
-import {
-	UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
-	UmbFormControlMixin,
-	UmbValidationContext,
-} from '@umbraco-cms/backoffice/validation';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { UMB_CONTENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content';
+import type { StyleInfo } from '@umbraco-cms/backoffice/external/lit';
 
 export abstract class UmbPropertyEditorUiRteElementBase
 	extends UmbFormControlMixin<UmbPropertyEditorRteValueType | undefined, typeof UmbLitElement, undefined>(UmbLitElement)
@@ -31,6 +32,12 @@ export abstract class UmbPropertyEditorUiRteElementBase
 		this.#managerContext.setBlockTypes(blocks);
 
 		this.#managerContext.setEditorConfiguration(config);
+
+		const dimensions = config.getValueByAlias<{ width?: number; height?: number }>('dimensions');
+		this._css = {
+			'--umb-rte-max-width': dimensions?.width ? `${dimensions.width}px` : '100%',
+			'--umb-rte-height': dimensions?.height ? `${dimensions.height}px` : 'unset',
+		};
 	}
 
 	@property({
@@ -94,8 +101,12 @@ export abstract class UmbPropertyEditorUiRteElementBase
 	@state()
 	protected _config?: UmbPropertyEditorConfigCollection;
 
+	@state()
+	protected _css: StyleInfo = {};
+
 	/**
 	 * @deprecated _value is depreacated, use `super.value` instead.
+	 * @returns {UmbPropertyEditorRteValueType | undefined} The value of the property editor.
 	 */
 	@state()
 	protected get _value(): UmbPropertyEditorRteValueType | undefined {

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts

@@ -134,14 +134,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 		const element = this.shadowRoot?.querySelector('#editor');
 		if (!element) return;
 
-		const dimensions = this.configuration?.getValueByAlias<{ width?: number; height?: number }>('dimensions');
-		if (dimensions?.width) {
-			this.setAttribute('style', `max-width: ${dimensions.width}px;`);
-		}
-		if (dimensions?.height) {
-			element.setAttribute('style', `height: ${dimensions.height}px;`);
-		}
-
 		const stylesheets = this.configuration?.getValueByAlias<Array<string>>('stylesheets');
 		if (stylesheets?.length) {
 			stylesheets.forEach((stylesheet) => {
@@ -247,6 +239,10 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				display: block;
 				position: relative;
 				z-index: 0;
+
+				width: var(--umb-rte-width, unset);
+				min-width: var(--umb-rte-min-width, unset);
+				max-width: var(--umb-rte-max-width, 100%);
 			}
 
 			:host([readonly]) {
@@ -279,7 +275,11 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				border: 1px solid var(--umb-tiptap-edge-border-color, var(--uui-color-border));
 				padding: 1rem;
 				box-sizing: border-box;
-				height: 100%;
+
+				height: var(--umb-rte-height, 100%);
+				min-height: var(--umb-rte-min-height, 100%);
+				max-height: var(--umb-rte-max-height, 100%);
+
 				width: 100%;
 				max-width: 100%;
 

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts

@@ -1,6 +1,7 @@
 import type { UmbInputTiptapElement } from '../../components/input-tiptap/input-tiptap.element.js';
+import { css, customElement, html, styleMap } from '@umbraco-cms/backoffice/external/lit';
 import { UmbPropertyEditorUiRteElementBase } from '@umbraco-cms/backoffice/rte';
-import { css, customElement, html, type PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
+import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 
 import '../../components/input-tiptap/input-tiptap.element.js';
 
@@ -66,6 +67,7 @@ export class UmbPropertyEditorUiTiptapElement extends UmbPropertyEditorUiRteElem
 	override render() {
 		return html`
 			<umb-input-tiptap
+				style=${styleMap(this._css)}
 				.configuration=${this._config}
 				.requiredMessage=${this.mandatoryMessage}
 				.value=${this._markup}