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 7f0c53c79b..bdfcfc7af3 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -2608,5 +2608,7 @@ export default { label: 'Code editor', languageConfigLabel: 'Language', languageConfigDescription: 'Select the language for syntax highlighting and IntelliSense.', + heightConfigLabel: 'Height', + heightConfigDescription: 'Set the height of the code editor in pixels.', }, } as UmbLocalizationDictionary; diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/manifests.ts index fa69239cda..b04f01a695 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/manifests.ts @@ -33,6 +33,16 @@ export const manifest: ManifestPropertyEditorUi = { }, ], }, + { + alias: 'height', + label: '#codeEditor_heightConfigLabel', + description: '{#codeEditor_heightConfigDescription}', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer', + config: [ + { alias: 'defaultValue', value: 400 }, + { alias: 'min', value: 0 }, + ], + }, ], }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.element.ts index 349853c0b7..d1d67b8336 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.element.ts @@ -1,6 +1,6 @@ import type { UmbCodeEditorElement } from '../components/code-editor.element.js'; import type { CodeEditorLanguage } from '../models/index.js'; -import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state, css, styleMap } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { @@ -21,9 +21,13 @@ export class UmbPropertyEditorUICodeEditorElement extends UmbLitElement implemen @state() private _language?: CodeEditorLanguage = 'html'; + @state() + private _height = 400; + @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { this._language = config?.getValueByAlias('language') ?? 'html'; + this._height = config?.getValueByAlias('height') ?? 400; } #onChange(e: UmbInputEvent) { @@ -34,6 +38,7 @@ export class UmbPropertyEditorUICodeEditorElement extends UmbLitElement implemen override render() { return html``; @@ -42,7 +47,6 @@ export class UmbPropertyEditorUICodeEditorElement extends UmbLitElement implemen static override styles = [ css` umb-code-editor { - --editor-height: 400px; border-radius: var(--uui-border-radius); border: 1px solid var(--uui-color-divider-emphasis); }