refactor(editor): Improve linting for component and prop names (no-changelog) (#8169)
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™
committed by
GitHub
GitHub
parent
639afcd7a5
commit
68cff4c59e
@@ -249,8 +249,8 @@ onMounted(() => {
|
||||
<span
|
||||
v-show="prompt.length > 1"
|
||||
:class="$style.counter"
|
||||
v-text="`${prompt.length} / ${ASK_AI_MAX_PROMPT_LENGTH}`"
|
||||
data-test-id="ask-ai-prompt-counter"
|
||||
v-text="`${prompt.length} / ${ASK_AI_MAX_PROMPT_LENGTH}`"
|
||||
/>
|
||||
<a href="https://docs.n8n.io/code-examples/ai-code" target="_blank" :class="$style.help">
|
||||
<n8n-icon icon="question-circle" color="text-light" size="large" />{{
|
||||
@@ -260,29 +260,29 @@ onMounted(() => {
|
||||
</div>
|
||||
<N8nInput
|
||||
v-model="prompt"
|
||||
@input="onPromptInput"
|
||||
:class="$style.input"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
:maxlength="ASK_AI_MAX_PROMPT_LENGTH"
|
||||
:placeholder="i18n.baseText('codeNodeEditor.askAi.placeholder')"
|
||||
data-test-id="ask-ai-prompt-input"
|
||||
@input="onPromptInput"
|
||||
/>
|
||||
</div>
|
||||
<div :class="$style.controls">
|
||||
<div :class="$style.loader" v-if="isLoading">
|
||||
<div v-if="isLoading" :class="$style.loader">
|
||||
<transition name="text-fade-in-out" mode="out-in">
|
||||
<div v-text="loadingString" :key="loadingPhraseIndex" />
|
||||
<div :key="loadingPhraseIndex" v-text="loadingString" />
|
||||
</transition>
|
||||
<n8n-circle-loader :radius="8" :progress="loaderProgress" :stroke-width="3" />
|
||||
</div>
|
||||
<n8n-tooltip :disabled="isSubmitEnabled" v-else>
|
||||
<N8nTooltip v-else :disabled="isSubmitEnabled">
|
||||
<div>
|
||||
<N8nButton
|
||||
:disabled="!isSubmitEnabled"
|
||||
@click="onSubmit"
|
||||
size="small"
|
||||
data-test-id="ask-ai-cta"
|
||||
@click="onSubmit"
|
||||
>
|
||||
{{ i18n.baseText('codeNodeEditor.askAi.generateCode') }}
|
||||
</N8nButton>
|
||||
@@ -290,18 +290,18 @@ onMounted(() => {
|
||||
<template #content>
|
||||
<span
|
||||
v-if="!hasExecutionData"
|
||||
v-text="i18n.baseText('codeNodeEditor.askAi.noInputData')"
|
||||
data-test-id="ask-ai-cta-tooltip-no-input-data"
|
||||
v-text="i18n.baseText('codeNodeEditor.askAi.noInputData')"
|
||||
/>
|
||||
<span
|
||||
v-else-if="prompt.length === 0"
|
||||
v-text="i18n.baseText('codeNodeEditor.askAi.noPrompt')"
|
||||
data-test-id="ask-ai-cta-tooltip-no-prompt"
|
||||
v-text="i18n.baseText('codeNodeEditor.askAi.noPrompt')"
|
||||
/>
|
||||
<span
|
||||
v-else-if="isEachItemMode"
|
||||
v-text="i18n.baseText('codeNodeEditor.askAi.onlyAllItemsMode')"
|
||||
data-test-id="ask-ai-cta-tooltip-only-all-items-mode"
|
||||
v-text="i18n.baseText('codeNodeEditor.askAi.onlyAllItemsMode')"
|
||||
/>
|
||||
<span
|
||||
v-else-if="prompt.length < ASK_AI_MIN_PROMPT_LENGTH"
|
||||
@@ -313,7 +313,7 @@ onMounted(() => {
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</n8n-tooltip>
|
||||
</N8nTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user