refactor(editor): Improve linting for component and prop names (no-changelog) (#8169)

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

@@ -1,15 +1,15 @@
 <template>
 	<div
+		ref="codeNodeEditorContainer"
 		:class="['code-node-editor', $style['code-node-editor-container'], language]"
 		@mouseover="onMouseOver"
 		@mouseout="onMouseOut"
-		ref="codeNodeEditorContainer"
 	>
 		<el-tabs
-			type="card"
+			v-if="aiEnabled"
 			ref="tabs"
 			v-model="activeTab"
-			v-if="aiEnabled"
+			type="card"
 			:before-leave="onBeforeTabLeave"
 		>
 			<el-tab-pane
@@ -26,9 +26,9 @@
 			>
 				<!-- Key the AskAI tab to make sure it re-mounts when changing tabs -->
 				<AskAI
-					@replaceCode="onReplaceCode"
-					:has-changes="hasChanges"
 					:key="activeTab"
+					:has-changes="hasChanges"
+					@replaceCode="onReplaceCode"
 					@started-loading="isLoadingAIResponse = true"
 					@finished-loading="isLoadingAIResponse = false"
 				/>
@@ -73,11 +73,11 @@ import { useMessage } from '@/composables/useMessage';
 import { useSettingsStore } from '@/stores/settings.store';
 
 export default defineComponent({
-	name: 'code-node-editor',
-	mixins: [linterExtension, completerExtension, workflowHelpers],
+	name: 'CodeNodeEditor',
 	components: {
 		AskAI,
 	},
+	mixins: [linterExtension, completerExtension, workflowHelpers],
 	props: {
 		aiButtonEnabled: {
 			type: Boolean,
@@ -184,6 +184,67 @@ export default defineComponent({
 			}
 		},
 	},
+	beforeUnmount() {
+		if (!this.isReadOnly) codeNodeEditorEventBus.off('error-line-number', this.highlightLine);
+	},
+	mounted() {
+		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
+
+		const { isReadOnly, language } = this;
+		const extensions: Extension[] = [
+			...readOnlyEditorExtensions,
+			EditorState.readOnly.of(isReadOnly),
+			EditorView.editable.of(!isReadOnly),
+			codeNodeEditorTheme({ isReadOnly, customMinHeight: this.rows }),
+		];
+
+		if (!isReadOnly) {
+			const linter = this.createLinter(language);
+			if (linter) {
+				extensions.push(this.linterCompartment.of(linter));
+			}
+
+			extensions.push(
+				...writableEditorExtensions,
+				EditorView.domEventHandlers({
+					focus: () => {
+						this.isEditorFocused = true;
+					},
+					blur: () => {
+						this.isEditorFocused = false;
+					},
+				}),
+
+				EditorView.updateListener.of((viewUpdate) => {
+					if (!viewUpdate.docChanged) return;
+
+					this.trackCompletion(viewUpdate);
+
+					this.$emit('update:modelValue', this.editor?.state.doc.toString());
+					this.hasChanges = true;
+				}),
+			);
+		}
+
+		const [languageSupport, ...otherExtensions] = this.languageExtensions;
+		extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
+
+		const state = EditorState.create({
+			doc: this.modelValue ?? this.placeholder,
+			extensions,
+		});
+
+		this.editor = new EditorView({
+			parent: this.$refs.codeNodeEditor as HTMLDivElement,
+			state,
+		});
+
+		// empty on first load, default param value
+		if (!this.modelValue) {
+			this.refreshPlaceholder();
+			this.$emit('update:modelValue', this.placeholder);
+		}
+	},
 	methods: {
 		getCurrentEditorContent() {
 			return this.editor?.state.doc.toString() ?? '';
@@ -311,67 +372,6 @@ export default defineComponent({
 			} catch {}
 		},
 	},
-	beforeUnmount() {
-		if (!this.isReadOnly) codeNodeEditorEventBus.off('error-line-number', this.highlightLine);
-	},
-	mounted() {
-		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
-
-		const { isReadOnly, language } = this;
-		const extensions: Extension[] = [
-			...readOnlyEditorExtensions,
-			EditorState.readOnly.of(isReadOnly),
-			EditorView.editable.of(!isReadOnly),
-			codeNodeEditorTheme({ isReadOnly, customMinHeight: this.rows }),
-		];
-
-		if (!isReadOnly) {
-			const linter = this.createLinter(language);
-			if (linter) {
-				extensions.push(this.linterCompartment.of(linter));
-			}
-
-			extensions.push(
-				...writableEditorExtensions,
-				EditorView.domEventHandlers({
-					focus: () => {
-						this.isEditorFocused = true;
-					},
-					blur: () => {
-						this.isEditorFocused = false;
-					},
-				}),
-
-				EditorView.updateListener.of((viewUpdate) => {
-					if (!viewUpdate.docChanged) return;
-
-					this.trackCompletion(viewUpdate);
-
-					this.$emit('update:modelValue', this.editor?.state.doc.toString());
-					this.hasChanges = true;
-				}),
-			);
-		}
-
-		const [languageSupport, ...otherExtensions] = this.languageExtensions;
-		extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
-
-		const state = EditorState.create({
-			doc: this.modelValue ?? this.placeholder,
-			extensions,
-		});
-
-		this.editor = new EditorView({
-			parent: this.$refs.codeNodeEditor as HTMLDivElement,
-			state,
-		});
-
-		// empty on first load, default param value
-		if (!this.modelValue) {
-			this.refreshPlaceholder();
-			this.$emit('update:modelValue', this.placeholder);
-		}
-	},
 });
 </script>