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 4bfefd9482..a7acb52fe6 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 @@ -2538,5 +2538,12 @@ export default { languageConfigDescription: 'Vælg sprog til syntax highlighting og IntelliSense.', heightConfigLabel: 'Højde', heightConfigDescription: 'Indstil højden på editorvinduet i pixels.', + lineNumbersConfigLabel: 'Linjenumre', + lineNumbersConfigDescription: 'Vis linjenumre i editorvinduet.', + minimapConfigLabel: 'Minimap', + minimapConfigDescription: 'Vis en minimap i editorvinduet.', + wordWrapConfigLabel: 'Ordbrydning', + wordWrapConfigDescription: + 'Slå ordbrydning til eller fra, så tekst automatisk brydes ved vinduets kant i stedet for at skabe en horisontal scrollbar.', }, } as UmbLocalizationDictionary; diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts index 919583fd05..9c255d3190 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts @@ -2539,5 +2539,11 @@ export default { languageConfigDescription: 'Select the language for syntax highlighting and IntelliSense.', heightConfigLabel: 'Height', heightConfigDescription: 'Set the height of the code editor in pixels.', + lineNumbersConfigLabel: 'Line numbers', + lineNumbersConfigDescription: 'Show line numbers in the code editor.', + minimapConfigLabel: 'Minimap', + minimapConfigDescription: 'Show a minimap in the code editor.', + wordWrapConfigLabel: 'Word wrap', + wordWrapConfigDescription: 'Enable word wrapping in the code editor.', }, } 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 bdfcfc7af3..ba84fd225c 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -2610,5 +2610,11 @@ export default { languageConfigDescription: 'Select the language for syntax highlighting and IntelliSense.', heightConfigLabel: 'Height', heightConfigDescription: 'Set the height of the code editor in pixels.', + lineNumbersConfigLabel: 'Line numbers', + lineNumbersConfigDescription: 'Show line numbers in the code editor.', + minimapConfigLabel: 'Minimap', + minimapConfigDescription: 'Show a minimap in the code editor.', + wordWrapConfigLabel: 'Word wrap', + wordWrapConfigDescription: 'Enable word wrapping in the code editor.', }, } 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 1409181c2d..5e6142daa1 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 @@ -40,10 +40,31 @@ export const manifest: ManifestPropertyEditorUi = { propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer', config: [{ alias: 'min', value: 0 }], }, + { + alias: 'lineNumbers', + label: '#codeEditor_lineNumbersConfigLabel', + description: '{#codeEditor_lineNumbersConfigDescription}', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle', + }, + { + alias: 'minimap', + label: '#codeEditor_minimapConfigLabel', + description: '{#codeEditor_minimapConfigDescription}', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle', + }, + { + alias: 'wordWrap', + label: '#codeEditor_wordWrapConfigLabel', + description: '{#codeEditor_wordWrapConfigDescription}', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle', + }, ], defaultData: [ { alias: 'language', value: 'javascript' }, { alias: 'height', value: 400 }, + { alias: 'lineNumbers', value: true }, + { alias: 'minimap', value: true }, + { alias: 'wordWrap', value: false }, ], }, }, 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 fccfbcd0b8..971ed1111a 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 @@ -21,6 +21,15 @@ export class UmbPropertyEditorUICodeEditorElement extends UmbLitElement implemen @state() private _height = 400; + @state() + private _lineNumbers = true; + + @state() + private _minimap = true; + + @state() + private _wordWrap = false; + @property() value = ''; @@ -30,6 +39,9 @@ export class UmbPropertyEditorUICodeEditorElement extends UmbLitElement implemen this._language = config?.getValueByAlias('language') ?? this.#defaultLanguage; this._height = Number(config?.getValueByAlias('height')) || 400; + this._lineNumbers = config?.getValueByAlias('lineNumbers') ?? false; + this._minimap = config?.getValueByAlias('minimap') ?? false; + this._wordWrap = config?.getValueByAlias('wordWrap') ?? false; } #onChange(event: UmbInputEvent & { target: UmbCodeEditorElement }) { @@ -44,6 +56,9 @@ export class UmbPropertyEditorUICodeEditorElement extends UmbLitElement implemen style=${styleMap({ height: `${this._height}px` })} .language=${this._language ?? this.#defaultLanguage} .code=${this.value ?? ''} + ?disable-line-numbers=${!this._lineNumbers} + ?disable-minimap=${!this._minimap} + ?word-wrap=${this._wordWrap} @input=${this.#onChange}> `;