Merge pull request #1227 from bjarnef/feature/code-editor

Feature: Code Editor

Author: iOvergaard

package-lock.json

@@ -22,7 +22,7 @@
 		"./block-rte": "./dist-cms/packages/block/block-rte/index.js",
 		"./block-type": "./dist-cms/packages/block/block-type/index.js",
 		"./block": "./dist-cms/packages/block/block/index.js",
-		"./code-editor": "./dist-cms/packages/templating/code-editor/index.js",
+		"./code-editor": "./dist-cms/packages/code-editor/index.js",
 		"./collection": "./dist-cms/packages/core/collection/index.js",
 		"./components": "./dist-cms/packages/core/components/index.js",
 		"./content-type": "./dist-cms/packages/core/content-type/index.js",
@@ -130,6 +130,7 @@
 	},
 	"workspaces": [
 		"./src/packages/block",
+		"./src/packages/code-editor",
 		"./src/packages/core",
 		"./src/packages/data-type",
 		"./src/packages/dictionary",

package.json

@@ -13,6 +13,7 @@ import './components/index.js';
 
 const CORE_PACKAGES = [
 	import('../../packages/block/umbraco-package.js'),
+	import('../../packages/code-editor/umbraco-package.js'),
 	import('../../packages/data-type/umbraco-package.js'),
 	import('../../packages/dictionary/umbraco-package.js'),
 	import('../../packages/documents/umbraco-package.js'),

src/apps/backoffice/backoffice.element.ts

@@ -2532,4 +2532,18 @@ export default {
 		routeNotFoundTitle: 'Ikke fundet',
 		routeNotFoundDescription: 'Den side du leder efter kunne ikke findes. Kontroller adressen og prøv igen.',
 	},
+	codeEditor: {
+		label: 'Code editor',
+		languageConfigLabel: 'Sprog',
+		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/assets/lang/da-dk.ts

@@ -2533,4 +2533,17 @@ export default {
 		routeNotFoundTitle: 'Not found',
 		routeNotFoundDescription: 'The requested route could not be found. Please check the URL and try again.',
 	},
+	codeEditor: {
+		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.',
+		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/assets/lang/en-us.ts

@@ -2604,4 +2604,17 @@ export default {
 		routeNotFoundTitle: 'Not found',
 		routeNotFoundDescription: 'The requested route could not be found. Please check the URL and try again.',
 	},
+	codeEditor: {
+		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.',
+		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/assets/lang/en.ts

@@ -493,6 +493,23 @@ export const data: Array<UmbMockDataTypeModel> = [
 			},
 		],
 	},
+	{
+		name: 'Code Editor',
+		id: 'dt-codeEditor',
+		parent: null,
+		editorAlias: 'Umbraco.Plain.String',
+		editorUiAlias: 'Umb.PropertyEditorUi.CodeEditor',
+		hasChildren: false,
+		isFolder: false,
+		canIgnoreStartNodes: false,
+		isDeletable: true,
+		values: [
+			{
+				alias: 'language',
+				value: 'html',
+			},
+		],
+	},
 	{
 		name: 'Markdown Editor',
 		id: 'dt-markdownEditor',

src/mocks/data/data-type/data-type.data.ts

@@ -713,6 +713,30 @@ export const data: Array<UmbMockDocumentTypeModel> = [
 					labelOnTop: false,
 				},
 			},
+			{
+				id: '34',
+				container: {
+					id: 'all-properties-group-key',
+				},
+				alias: 'codeEditor',
+				name: 'Code Editor',
+				description: 'umb-code-editor configured with the `html` language.',
+				dataType: {
+					id: 'dt-codeEditor',
+				},
+				variesByCulture: false,
+				variesBySegment: false,
+				sortOrder: 0,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
 		],
 		containers: [
 			{

src/mocks/data/document-type/document-type.data.ts

@@ -82,6 +82,36 @@ export const data: Array<UmbMockDocumentModel> = [
 					`,
 				},
 			},
+			{
+				alias: 'codeEditor',
+				culture: null,
+				segment: null,
+				value: `<h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit</h1>
+<ul>
+	<li>Lorem ipsum dolor sit amet consectetuer.</li>
+	<li>Aenean commodo ligula eget dolor.</li>
+	<li>Aenean massa cum sociis natoque penatibus.</li>
+</ul>
+<p>
+	Lorem ipsum dolor sit amet, consectetuer adipiscing 
+	elit. Aenean commodo ligula eget dolor.
+</p>
+<p>
+	<blockquote>
+		Lorem ipsum dolor sit amet, consectetuer 
+		adipiscing elit. Aenean commodo ligula eget dolor. 
+		Aenean massa <strong>strong</strong>. Cum sociis 
+		natoque penatibus et magnis dis parturient montes, 
+		nascetur ridiculus mus. Donec quam felis, ultricies 
+		nec, pellentesque eu, pretium quis, sem. Nulla consequat 
+		massa quis enim. Donec pede justo, fringilla vel, 
+		aliquet nec, vulputate eget, arcu. In <em>em</em> 
+		enim justo, rhoncus ut, imperdiet a, venenatis vitae, 
+		justo. Nullam <a class="external ext" href="#">link</a>
+		dictum felis eu pede mollis pretium.
+	</blockquote>
+</p>`,
+			},
 			{
 				alias: 'email',
 				culture: null,

src/mocks/data/document/document.data.ts

@@ -8,10 +8,11 @@ import type {
 	UmbCodeEditorHost,
 	UmbCodeEditorRange,
 	UmbCodeEditorSelection,
-} from './code-editor.model.js';
+} from './models/code-editor.model.js';
 import { themes } from './themes/index.js';
 import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
 import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/event';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 
 //TODO - consider firing change event on blur
 
@@ -27,9 +28,11 @@ import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/event';
  * @export
  * @class UmbCodeEditor
  */
-export class UmbCodeEditorController {
+export class UmbCodeEditorController extends UmbControllerBase {
 	#host: UmbCodeEditorHost;
+
 	#editor?: monaco.editor.IStandaloneCodeEditor;
+
 	/**
 	 * The monaco editor object. This is the actual monaco editor object. It is exposed for advanced usage, but mind the fact that editor might be swapped in the future for a different library, so use on your own responsibility. For more information see [monaco editor API](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneCodeEditor.html).
 	 *
@@ -41,6 +44,7 @@ export class UmbCodeEditorController {
 	}
 
 	#options: CodeEditorConstructorOptions = {};
+
 	/**
 	 * The options used to create the editor.
 	 *
@@ -63,6 +67,7 @@ export class UmbCodeEditorController {
 	};
 
 	#position: UmbCodeEditorCursorPosition | null = null;
+
 	/**
 	 * Provides the current position of the cursor.
 	 *
@@ -72,7 +77,9 @@ export class UmbCodeEditorController {
 	get position() {
 		return this.#position;
 	}
+
 	#secondaryPositions: UmbCodeEditorCursorPosition[] = [];
+
 	/**
 	 * Provides positions of all the secondary cursors.
 	 *
@@ -102,6 +109,7 @@ export class UmbCodeEditorController {
 			this.#editor.setValue(newValue ?? '');
 		}
 	}
+
 	/**
 	 * Provides the current model of the editor. For advanced usage. Bare in mind that in case of the monaco library being swapped in the future, this might not be available. For more information see [monaco editor model API](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.ITextModel.html).
 	 *
@@ -112,13 +120,15 @@ export class UmbCodeEditorController {
 		if (!this.#editor) return null;
 		return this.#editor.getModel();
 	}
+
 	/**
 	 * Creates an instance of UmbCodeEditor. You should instantiate this class through the `UmbCodeEditorHost` interface and that should happen when inside DOM nodes of the host container are available, otherwise the editor will not be able to initialize, for example in lit `firstUpdated` lifecycle hook. It will make host emit change and input events when the value of the editor changes.
 	 * @param {UmbCodeEditorHost} host
 	 * @param {CodeEditorConstructorOptions} [options]
 	 * @memberof UmbCodeEditor
 	 */
 	constructor(host: UmbCodeEditorHost, options?: CodeEditorConstructorOptions) {
+		super(host);
 		this.#options = { ...options };
 		this.#host = host;
 		this.#registerThemes();
@@ -185,14 +195,7 @@ export class UmbCodeEditorController {
 
 		const mergedOptions = { ...this.#defaultMonacoOptions, ...this.#mapOptions(options) };
 
-		this.#editor = monaco.editor.create(this.#host.container, {
-			...mergedOptions,
-			value: this.#host.code ?? '',
-			language: this.#host.language,
-			theme: this.#host.theme,
-			readOnly: this.#host.readonly,
-			ariaLabel: this.#host.label,
-		});
+		this.#editor = monaco.editor.create(this.#host.container, mergedOptions);
 
 		this.#initiateEvents();
 	}
@@ -378,5 +381,3 @@ export class UmbCodeEditorController {
 		});
 	}
 }
-
-export default UmbCodeEditorController;