feat(editor): Adjust HTML editor component for use in params (#5285)

* ✨ Adjust HTML editor component

* ♻️ Apply feedback

* ♻️ Apply feedback

* 🔥 Remove unused ndv store refs

packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue

@@ -36,11 +36,20 @@ export default mixins(expressionManager).extend({
 	props: {
 		html: {
 			type: String,
+			required: true,
 		},
 		isReadOnly: {
 			type: Boolean,
 			default: false,
 		},
+		rows: {
+			type: Number,
+			default: -1,
+		},
+		disableExpressionColoring: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -72,8 +81,8 @@ export default mixins(expressionManager).extend({
 				EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
 					if (!viewUpdate.docChanged) return;
 
-					highlighter.removeColor(this.editor, this.htmlSegments);
-					highlighter.addColor(this.editor, this.resolvableSegments);
+					this.getHighlighter()?.removeColor(this.editor, this.htmlSegments);
+					this.getHighlighter()?.addColor(this.editor, this.resolvableSegments);
 
 					this.$emit('valueChanged', this.doc);
 				}),
@@ -144,7 +153,31 @@ export default mixins(expressionManager).extend({
 			return root;
 		},
 
+		isMissingHtmlTags() {
+			const zerothSection = this.sections.at(0);
+
+			return (
+				!zerothSection?.content.trim().startsWith('<html') &&
+				!zerothSection?.content.trim().endsWith('</html>')
+			);
+		},
+
 		format() {
+			if (this.sections.length === 1 && this.isMissingHtmlTags()) {
+				const zerothSection = this.sections.at(0) as Section;
+
+				const formatted = prettier
+					.format(zerothSection.content, {
+						parser: 'html',
+						plugins: [htmlParser],
+					})
+					.trim();
+
+				return this.editor.dispatch({
+					changes: { from: 0, to: this.doc.length, insert: formatted },
+				});
+			}
+
 			const formatted = [];
 
 			for (const { kind, content } of this.sections) {
@@ -185,20 +218,34 @@ export default mixins(expressionManager).extend({
 				}
 			}
 
+			if (formatted.length === 0) return;
+
 			this.editor.dispatch({
 				changes: { from: 0, to: this.doc.length, insert: formatted.join('\n\n') },
 			});
 		},
+
+		getHighlighter() {
+			if (this.disableExpressionColoring) return;
+
+			return highlighter;
+		},
 	},
 
 	mounted() {
 		htmlEditorEventBus.$on('format-html', this.format);
 
-		const state = EditorState.create({ doc: this.html, extensions: this.extensions });
+		let doc = this.html;
+
+		if (this.html === '' && this.rows > 0) {
+			doc = '\n'.repeat(this.rows - 1);
+		}
+
+		const state = EditorState.create({ doc, extensions: this.extensions });
 
 		this.editor = new EditorView({ parent: this.root(), state });
 
-		highlighter.addColor(this.editor, this.resolvableSegments);
+		this.getHighlighter()?.addColor(this.editor, this.resolvableSegments);
 	},
 
 	destroyed() {