yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add a height option to the code editor

Browse Source
This commit is contained in:
Jacob Overgaard
2024-07-19 11:56:01 +02:00
parent 9b73d368b1
commit 5dd97bd305
3 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
View File

@@ -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;

10
src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/manifests.ts
View File

@@ -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 },
],
},
],
},
},

8
src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.element.ts
View File

@@ -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<CodeEditorLanguage>('language') ?? 'html';
this._height = config?.getValueByAlias<number>('height') ?? 400;
}
#onChange(e: UmbInputEvent) {
@@ -34,6 +38,7 @@ export class UmbPropertyEditorUICodeEditorElement extends UmbLitElement implemen
override render() {
return html`<umb-code-editor
style=${styleMap({ height: `${this._height}px` })}
.language=${this._language ?? 'html'}
.code=${this.value ?? ''}
@input=${this.#onChange}></umb-code-editor>`;
@@ -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);
}