feat: add config for line numbers, minimap, and wordwrap

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;

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;

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;

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

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<CodeEditorLanguage>('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}>
 			</umb-code-editor>
 		`;