Tiptap RTE: Custom CSS Variables for min/max height/width

[leekelleher]

Description

Resolves #19588.

Whilst reviewing PR #19739 (that offered a fix for #19588), it added a new option to the Tiptap RTE data-type configuration for Minimum dimensions. This offered a way for an implementor to configure the RTE with both a minimum and maximum height.

The introduction of a new input field to the Tiptap RTE would add to an already complex set of configuration options.
After exploring alternative options, I decided to follow an approach that we've offered with styling other property-editors, by using CSS Variables.

This PR adds the following CSS Variables to the Tiptap RTE, (note that they are prefixed with a generic rte not tiptap):

• --umb-rte-width
• --umb-rte-min-width
• --umb-rte-max-width
• --umb-rte-height
• --umb-rte-min-height
• --umb-rte-max-height

This PR also updated the localization text for the "Dimensions" field description, as it previously said it was a "maximum" height/width, whereas it's actually a "fixed" height/width".

How to test?

In the data-type configuration of a Tiptap RTE, try with and without the "Dimensions" field being set, and seeing the rendered display on a document item.

If you're feeling adventurous, try adding a global custom CSS file to the backoffice, or via a custom theme extension, and setting the values of the custom CSS variables, e.g. --umb-rte-min-height: 200px;.

[Copilot]

Pull Request Overview

This PR implements custom CSS variables for controlling the dimensions of the Tiptap RTE, providing a more flexible alternative to hardcoded configuration options for minimum and maximum height/width constraints.

• Introduces six CSS variables (--umb-rte-width, --umb-rte-min-width, --umb-rte-max-width, --umb-rte-height, --umb-rte-min-height, --umb-rte-max-height) for styling control
• Refactors dimension handling from JavaScript-based style manipulation to CSS variable-based approach
• Updates localization text to clarify that dimensions are "fixed" rather than "maximum"

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

File	Description
property-editor-ui-tiptap.element.ts	Adds styleMap import and applies CSS variables to the input element
input-tiptap.element.ts	Removes hardcoded dimension handling and applies CSS variables in styles
rte-base.element.ts	Implements CSS variable generation from configuration dimensions
pt.ts, en.ts, da.ts	Updates localization text for dimension field descriptions

[AndyButland]

This looks to be working as expected. The "Dimensions" field still works to set a fixed size and when empty we see the default size.

I added a custom stylesheet with the following and found it adjusted the minimum height as expected:

umbraco-package.json

{
    "alias": "myProject",
    "name": "My Project",
    "version": "1.0.0",
    "extensions": [
        {
            "name": "Custom RTE EntryPoint",
            "alias": "myProject.entryPoint",
            "type": "backofficeEntryPoint",
            "js": "/App_Plugins/myProject/entrypoint.js"
        }
    ]
}

entrypoint.js

const rteCss = document.createElement('link');
rteCss.rel = 'stylesheet';
rteCss.href = '/App_Plugins/myProject/custom-rte.css';

document.head.appendChild(rteCss);

custom-rte.css

:root {
  --umb-rte-min-height: 200px;
}

[AndyButland]

@leekelleher - it would be good to add documentation for this I think please, Perhaps as a new section on and page linked from here and cross-referenced from here.