mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Refactor code editors to composition API (no-changelog) (#9757)

Browse source
This commit is contained in:
Elias Meire 2024-06-20 14:17:12 +02:00 committed by GitHub
parent f4e2c695f2
commit 202124152c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 1217 additions and 1254 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

433
packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
View file

@ -1,6 +1,6 @@
<template>
<div
ref="codeNodeEditorContainer"
ref="codeNodeEditorContainerRef"
:class="['code-node-editor', $style['code-node-editor-container'], language]"
@mouseover="onMouseOver"
@mouseout="onMouseOut"
@ -18,7 +18,7 @@
data-test-id="code-node-tab-code"
>
<div
ref="codeNodeEditor"
ref="codeNodeEditorRef"
:class="['ph-no-capture', 'code-editor-tabs', $style.editorInput]"
/>
<slot name="suffix" />
@ -33,248 +33,239 @@
:key="activeTab"
:has-changes="hasChanges"
@replace-code="onReplaceCode"
@started-loading="isLoadingAIResponse = true"
@finished-loading="isLoadingAIResponse = false"
@started-loading="onAiLoadStart"
@finished-loading="onAiLoadEnd"
/>
</el-tab-pane>
</el-tabs>
<!-- If AskAi not enabled, there's no point in rendering tabs -->
<div v-else :class="$style.fillHeight">
<div ref="codeNodeEditor" :class="['ph-no-capture', $style.fillHeight]" />
<div ref="codeNodeEditorRef" :class="['ph-no-capture', $style.fillHeight]" />
<slot name="suffix" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';
import jsParser from 'prettier/plugins/babel';
import { format } from 'prettier';
import * as estree from 'prettier/plugins/estree';
import { mapStores } from 'pinia';
<script setup lang="ts">
import { javascript } from '@codemirror/lang-javascript';
import { python } from '@codemirror/lang-python';
import type { LanguageSupport } from '@codemirror/language';
import type { Extension, Line } from '@codemirror/state';
import { Compartment, EditorState } from '@codemirror/state';
import type { ViewUpdate } from '@codemirror/view';
import { EditorView } from '@codemirror/view';
import { javascript } from '@codemirror/lang-javascript';
import { python } from '@codemirror/lang-python';
import type { CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
import { CODE_EXECUTION_MODES, CODE_LANGUAGES } from 'n8n-workflow';
import { format } from 'prettier';
import jsParser from 'prettier/plugins/babel';
import * as estree from 'prettier/plugins/estree';
import { type Ref, computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { ASK_AI_EXPERIMENT, CODE_NODE_TYPE } from '@/constants';
import { codeNodeEditorEventBus } from '@/event-bus';
import { useRootStore } from '@/stores/root.store';
import { usePostHog } from '@/stores/posthog.store';
import { readOnlyEditorExtensions, writableEditorExtensions } from './baseExtensions';
import { CODE_PLACEHOLDERS } from './constants';
import { linterExtension } from './linter';
import { completerExtension } from './completer';
import { codeNodeEditorTheme } from './theme';
import AskAI from './AskAI/AskAI.vue';
import { useMessage } from '@/composables/useMessage';
import { useSettingsStore } from '@/stores/settings.store';
import AskAI from './AskAI/AskAI.vue';
import { readOnlyEditorExtensions, writableEditorExtensions } from './baseExtensions';
import { useCompleter } from './completer';
import { CODE_PLACEHOLDERS } from './constants';
import { useLinter } from './linter';
import { codeNodeEditorTheme } from './theme';
import { useI18n } from '@/composables/useI18n';
import { useTelemetry } from '@/composables/useTelemetry';
export default defineComponent({
name: 'CodeNodeEditor',
components: {
AskAI,
},
mixins: [linterExtension, completerExtension],
props: {
aiButtonEnabled: {
type: Boolean,
default: false,
},
fillParent: {
type: Boolean,
default: false,
},
mode: {
type: String as PropType<CodeExecutionMode>,
validator: (value: CodeExecutionMode): boolean => CODE_EXECUTION_MODES.includes(value),
required: true,
},
language: {
type: String as PropType<CodeNodeEditorLanguage>,
default: 'javaScript' as CodeNodeEditorLanguage,
validator: (value: CodeNodeEditorLanguage): boolean => CODE_LANGUAGES.includes(value),
},
isReadOnly: {
type: Boolean,
default: false,
},
rows: {
type: Number,
default: 4,
},
modelValue: {
type: String,
required: true,
},
},
setup() {
return {
...useMessage(),
type Props = {
mode: CodeExecutionMode;
modelValue: string;
aiButtonEnabled?: boolean;
fillParent?: boolean;
language?: CodeNodeEditorLanguage;
isReadOnly?: boolean;
rows?: number;
};
},
data() {
return {
editor: null as EditorView | null,
languageCompartment: new Compartment(),
linterCompartment: new Compartment(),
isEditorHovered: false,
isEditorFocused: false,
tabs: ['code', 'ask-ai'],
activeTab: 'code',
hasChanges: false,
isLoadingAIResponse: false,
};
},
watch: {
mode(_newMode, previousMode: CodeExecutionMode) {
this.reloadLinter();
if (
this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[this.language]?.[previousMode]
) {
this.refreshPlaceholder();
}
},
language(_newLanguage, previousLanguage: CodeNodeEditorLanguage) {
if (
this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode]
) {
this.refreshPlaceholder();
}
const [languageSupport] = this.languageExtensions;
this.editor?.dispatch({
effects: this.languageCompartment.reconfigure(languageSupport),
const props = withDefaults(defineProps<Props>(), {
aiButtonEnabled: false,
fillParent: false,
language: 'javaScript',
isReadOnly: false,
rows: 4,
});
},
aiEnabled: {
immediate: true,
async handler(isEnabled) {
if (isEnabled && !this.modelValue) {
this.$emit('update:modelValue', this.placeholder);
}
await this.$nextTick();
this.hasChanges = this.modelValue !== this.placeholder;
},
},
},
computed: {
...mapStores(useRootStore, usePostHog, useSettingsStore),
aiEnabled(): boolean {
const isAiExperimentEnabled = [ASK_AI_EXPERIMENT.gpt3, ASK_AI_EXPERIMENT.gpt4].includes(
(this.posthogStore.getVariant(ASK_AI_EXPERIMENT.name) ?? '') as string,
);
const emit = defineEmits<{
(event: 'update:modelValue', value: string): void;
}>();
return (
isAiExperimentEnabled &&
this.settingsStore.settings.ai.enabled &&
this.language === 'javaScript'
);
},
placeholder(): string {
return CODE_PLACEHOLDERS[this.language]?.[this.mode] ?? '';
},
// eslint-disable-next-line vue/return-in-computed-property
languageExtensions(): [LanguageSupport, ...Extension[]] {
switch (this.language) {
case 'javaScript':
return [javascript(), this.autocompletionExtension('javaScript')];
case 'python':
return [python(), this.autocompletionExtension('python')];
}
},
},
beforeUnmount() {
if (!this.isReadOnly) codeNodeEditorEventBus.off('error-line-number', this.highlightLine);
},
mounted() {
if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
const message = useMessage();
const editor = ref(null) as Ref<EditorView | null>;
const languageCompartment = ref(new Compartment());
const linterCompartment = ref(new Compartment());
const isEditorHovered = ref(false);
const isEditorFocused = ref(false);
const tabs = ref(['code', 'ask-ai']);
const activeTab = ref('code');
const hasChanges = ref(false);
const isLoadingAIResponse = ref(false);
const codeNodeEditorRef = ref<HTMLDivElement>();
const codeNodeEditorContainerRef = ref<HTMLDivElement>();
const { isReadOnly, language } = this;
const { autocompletionExtension } = useCompleter(() => props.mode, editor);
const { createLinter } = useLinter(() => props.mode, editor);
const rootStore = useRootStore();
const settingsStore = useSettingsStore();
const posthog = usePostHog();
const i18n = useI18n();
const telemetry = useTelemetry();
onMounted(() => {
if (!props.isReadOnly) codeNodeEditorEventBus.on('error-line-number', highlightLine);
const { isReadOnly, language } = props;
const extensions: Extension[] = [
...readOnlyEditorExtensions,
EditorState.readOnly.of(isReadOnly),
EditorView.editable.of(!isReadOnly),
codeNodeEditorTheme({
isReadOnly,
maxHeight: this.fillParent ? '100%' : '40vh',
maxHeight: props.fillParent ? '100%' : '40vh',
minHeight: '20vh',
rows: this.rows,
rows: props.rows,
}),
];
if (!isReadOnly) {
const linter = this.createLinter(language);
const linter = createLinter(language);
if (linter) {
extensions.push(this.linterCompartment.of(linter));
extensions.push(linterCompartment.value.of(linter));
}
extensions.push(
...writableEditorExtensions,
EditorView.domEventHandlers({
focus: () => {
this.isEditorFocused = true;
isEditorFocused.value = true;
},
blur: () => {
this.isEditorFocused = false;
isEditorFocused.value = false;
},
}),
EditorView.updateListener.of((viewUpdate) => {
if (!viewUpdate.docChanged) return;
this.trackCompletion(viewUpdate);
trackCompletion(viewUpdate);
this.$emit('update:modelValue', this.editor?.state.doc.toString());
this.hasChanges = true;
const value = editor.value?.state.doc.toString();
if (value) {
emit('update:modelValue', value);
}
hasChanges.value = true;
}),
);
}
const [languageSupport, ...otherExtensions] = this.languageExtensions;
extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
const [languageSupport, ...otherExtensions] = languageExtensions.value;
extensions.push(languageCompartment.value.of(languageSupport), ...otherExtensions);
const state = EditorState.create({
doc: this.modelValue ?? this.placeholder,
doc: props.modelValue ?? placeholder.value,
extensions,
});
this.editor = new EditorView({
parent: this.$refs.codeNodeEditor as HTMLDivElement,
editor.value = new EditorView({
parent: codeNodeEditorRef.value,
state,
});
// empty on first load, default param value
if (!this.modelValue) {
this.refreshPlaceholder();
this.$emit('update:modelValue', this.placeholder);
if (!props.modelValue) {
refreshPlaceholder();
emit('update:modelValue', placeholder.value);
}
});
onBeforeUnmount(() => {
if (!props.isReadOnly) codeNodeEditorEventBus.off('error-line-number', highlightLine);
});
const aiEnabled = computed(() => {
const isAiExperimentEnabled = [ASK_AI_EXPERIMENT.gpt3, ASK_AI_EXPERIMENT.gpt4].includes(
(posthog.getVariant(ASK_AI_EXPERIMENT.name) ?? '') as string,
);
return (
isAiExperimentEnabled && settingsStore.settings.ai.enabled && props.language === 'javaScript'
);
});
const placeholder = computed(() => {
return CODE_PLACEHOLDERS[props.language]?.[props.mode] ?? '';
});
// eslint-disable-next-line vue/return-in-computed-property
const languageExtensions = computed<[LanguageSupport, ...Extension[]]>(() => {
switch (props.language) {
case 'javaScript':
return [javascript(), autocompletionExtension('javaScript')];
case 'python':
return [python(), autocompletionExtension('python')];
}
});
watch(
() => props.mode,
(_newMode, previousMode: CodeExecutionMode) => {
reloadLinter();
if (getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[props.language]?.[previousMode]) {
refreshPlaceholder();
}
},
methods: {
getCurrentEditorContent() {
return this.editor?.state.doc.toString() ?? '';
},
async onBeforeTabLeave(_activeName: string, oldActiveName: string) {
// Confirm dialog if leaving ask-ai tab during loading
if (oldActiveName === 'ask-ai' && this.isLoadingAIResponse) {
const confirmModal = await this.alert(
this.$locale.baseText('codeNodeEditor.askAi.sureLeaveTab'),
{
title: this.$locale.baseText('codeNodeEditor.askAi.areYouSure'),
confirmButtonText: this.$locale.baseText('codeNodeEditor.askAi.switchTab'),
showClose: true,
showCancelButton: true,
);
watch(
() => props.language,
(_newLanguage, previousLanguage: CodeNodeEditorLanguage) => {
if (getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[previousLanguage]?.[props.mode]) {
refreshPlaceholder();
}
const [languageSupport] = languageExtensions.value;
editor.value?.dispatch({
effects: languageCompartment.value.reconfigure(languageSupport),
});
reloadLinter();
},
);
watch(
aiEnabled,
async (isEnabled) => {
if (isEnabled && !props.modelValue) {
emit('update:modelValue', placeholder.value);
}
await nextTick();
hasChanges.value = props.modelValue !== placeholder.value;
},
{ immediate: true },
);
function getCurrentEditorContent() {
return editor.value?.state.doc.toString() ?? '';
}
async function onBeforeTabLeave(_activeName: string, oldActiveName: string) {
// Confirm dialog if leaving ask-ai tab during loading
if (oldActiveName === 'ask-ai' && isLoadingAIResponse.value) {
const confirmModal = await message.alert(i18n.baseText('codeNodeEditor.askAi.sureLeaveTab'), {
title: i18n.baseText('codeNodeEditor.askAi.areYouSure'),
confirmButtonText: i18n.baseText('codeNodeEditor.askAi.switchTab'),
showClose: true,
showCancelButton: true,
});
if (confirmModal === 'confirm') {
return true;
}
@ -283,83 +274,91 @@ export default defineComponent({
}
return true;
},
async onReplaceCode(code: string) {
}
async function onReplaceCode(code: string) {
const formattedCode = await format(code, {
parser: 'babel',
plugins: [jsParser, estree],
});
this.editor?.dispatch({
changes: { from: 0, to: this.getCurrentEditorContent().length, insert: formattedCode },
editor.value?.dispatch({
changes: { from: 0, to: getCurrentEditorContent().length, insert: formattedCode },
});
this.activeTab = 'code';
this.hasChanges = false;
},
onMouseOver(event: MouseEvent) {
activeTab.value = 'code';
hasChanges.value = false;
}
function onMouseOver(event: MouseEvent) {
const fromElement = event.relatedTarget as HTMLElement;
const ref = this.$refs.codeNodeEditorContainer as HTMLDivElement | undefined;
const containerRef = codeNodeEditorContainerRef.value;
if (!ref?.contains(fromElement)) this.isEditorHovered = true;
},
onMouseOut(event: MouseEvent) {
if (!containerRef?.contains(fromElement)) isEditorHovered.value = true;
}
function onMouseOut(event: MouseEvent) {
const fromElement = event.relatedTarget as HTMLElement;
const ref = this.$refs.codeNodeEditorContainer as HTMLDivElement | undefined;
const containerRef = codeNodeEditorContainerRef.value;
if (!ref?.contains(fromElement)) this.isEditorHovered = false;
},
reloadLinter() {
if (!this.editor) return;
if (!containerRef?.contains(fromElement)) isEditorHovered.value = false;
}
const linter = this.createLinter(this.language);
function reloadLinter() {
if (!editor.value) return;
const linter = createLinter(props.language);
if (linter) {
this.editor.dispatch({
effects: this.linterCompartment.reconfigure(linter),
editor.value.dispatch({
effects: linterCompartment.value.reconfigure(linter),
});
}
},
refreshPlaceholder() {
if (!this.editor) return;
}
this.editor.dispatch({
changes: { from: 0, to: this.getCurrentEditorContent().length, insert: this.placeholder },
function refreshPlaceholder() {
if (!editor.value) return;
editor.value.dispatch({
changes: { from: 0, to: getCurrentEditorContent().length, insert: placeholder.value },
});
},
line(lineNumber: number): Line | null {
}
function getLine(lineNumber: number): Line | null {
try {
return this.editor?.state.doc.line(lineNumber) ?? null;
return editor.value?.state.doc.line(lineNumber) ?? null;
} catch {
return null;
}
},
highlightLine(lineNumber: number | 'final') {
if (!this.editor) return;
}
function highlightLine(lineNumber: number | 'final') {
if (!editor.value) return;
if (lineNumber === 'final') {
this.editor.dispatch({
selection: { anchor: (this.modelValue ?? this.getCurrentEditorContent()).length },
editor.value.dispatch({
selection: { anchor: (props.modelValue ?? getCurrentEditorContent()).length },
});
return;
}
const line = this.line(lineNumber);
const line = getLine(lineNumber);
if (!line) return;
this.editor.dispatch({
editor.value.dispatch({
selection: { anchor: line.from },
});
},
trackCompletion(viewUpdate: ViewUpdate) {
}
function trackCompletion(viewUpdate: ViewUpdate) {
const completionTx = viewUpdate.transactions.find((tx) => tx.isUserEvent('input.complete'));
if (!completionTx) return;
try {
// @ts-ignore - undocumented fields
// @ts-expect-error - undocumented fields
const { fromA, toB } = viewUpdate?.changedRanges[0];
const full = this.getCurrentEditorContent().slice(fromA, toB);
const full = getCurrentEditorContent().slice(fromA, toB);
const lastDotIndex = full.lastIndexOf('.');
let context = null;
@ -374,18 +373,24 @@ export default defineComponent({
}
// TODO: Still has to get updated for Python and JSON
this.$telemetry.track('User autocompleted code', {
instance_id: this.rootStore.instanceId,
telemetry.track('User autocompleted code', {
instance_id: rootStore.instanceId,
node_type: CODE_NODE_TYPE,
field_name: this.mode === 'runOnceForAllItems' ? 'jsCodeAllItems' : 'jsCodeEachItem',
field_name: props.mode === 'runOnceForAllItems' ? 'jsCodeAllItems' : 'jsCodeEachItem',
field_type: 'code',
context,
inserted_text: insertedText,
});
} catch {}
},
},
});
}
function onAiLoadStart() {
isLoadingAIResponse.value = true;
}
function onAiLoadEnd() {
isLoadingAIResponse.value = false;
}
</script>
<style scoped lang="scss">

95
packages/editor-ui/src/components/CodeNodeEditor/completer.ts
View file

@ -1,15 +1,15 @@
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import { autocompletion } from '@codemirror/autocomplete';
import { localCompletionSource } from '@codemirror/lang-javascript';
import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import type { Extension } from '@codemirror/state';
import type { MaybeRefOrGetter } from 'vue';
import { toValue } from 'vue';
import { useBaseCompletions } from './completions/base.completions';
import { jsSnippets } from './completions/js.snippets';
import type { EditorView } from '@codemirror/view';
import type { CodeExecutionMode } from 'n8n-workflow';
import { CODE_EXECUTION_MODES } from 'n8n-workflow';
import { useExecutionCompletions } from './completions/execution.completions';
import { useItemFieldCompletions } from './completions/itemField.completions';
import { useItemIndexCompletions } from './completions/itemIndex.completions';
@ -19,32 +19,20 @@ import { usePrevNodeCompletions } from './completions/prevNode.completions';
import { useRequireCompletions } from './completions/require.completions';
import { useVariablesCompletions } from './completions/variables.completions';
import { useWorkflowCompletions } from './completions/workflow.completions';
import type { EditorView } from '@codemirror/view';
export const completerExtension = defineComponent({
props: {
mode: {
type: String as PropType<CodeExecutionMode>,
validator: (value: CodeExecutionMode): boolean => CODE_EXECUTION_MODES.includes(value),
required: true,
},
},
data() {
return {
editor: null as EditorView | null,
};
},
methods: {
autocompletionExtension(language: 'javaScript' | 'python'): Extension {
export const useCompleter = (
mode: MaybeRefOrGetter<CodeExecutionMode>,
editor: MaybeRefOrGetter<EditorView | null>,
) => {
function autocompletionExtension(language: 'javaScript' | 'python'): Extension {
// Base completions
const { baseCompletions, itemCompletions, nodeSelectorCompletions } = useBaseCompletions(
this.mode,
toValue(mode),
language,
);
const { executionCompletions } = useExecutionCompletions();
const { inputMethodCompletions, selectorMethodCompletions } =
useItemFieldCompletions(language);
const { inputCompletions, selectorCompletions } = useItemIndexCompletions(this.mode);
const { inputMethodCompletions, selectorMethodCompletions } = useItemFieldCompletions(language);
const { inputCompletions, selectorCompletions } = useItemIndexCompletions(mode);
const { inputJsonFieldCompletions, selectorJsonFieldCompletions } = useJsonFieldCompletions();
const { dateTimeCompletions, nowCompletions, todayCompletions } = useLuxonCompletions();
const { prevNodeCompletions } = usePrevNodeCompletions();
@ -95,26 +83,27 @@ export const completerExtension = defineComponent({
selectorJsonFieldCompletions,
// multiline
this.multilineCompletions,
multilineCompletions,
],
});
},
}
/**
* Complete uses of variables to any of the supported completions.
*/
multilineCompletions(context: CompletionContext): CompletionResult | null {
if (!this.editor) return null;
function multilineCompletions(context: CompletionContext): CompletionResult | null {
const editorValue = toValue(editor);
if (!editorValue) return null;
let variablesToValues: Record<string, string> = {};
let variablesToValueMap: Record<string, string> = {};
try {
variablesToValues = this.variablesToValues();
variablesToValueMap = variablesToValues();
} catch {
return null;
}
if (Object.keys(variablesToValues).length === 0) return null;
if (Object.keys(variablesToValueMap).length === 0) return null;
/**
* Complete uses of extended variables, i.e. variables having
@ -125,22 +114,22 @@ export const completerExtension = defineComponent({
* x.first().json. -> .field
*/
const docLines = this.editor.state.doc.toString().split('\n');
const docLines = editorValue.state.doc.toString().split('\n');
const varNames = Object.keys(variablesToValues);
const varNames = Object.keys(variablesToValueMap);
const uses = this.extendedUses(docLines, varNames);
const uses = extendedUses(docLines, varNames);
const { matcherItemFieldCompletions } = useItemFieldCompletions('javaScript');
for (const use of uses.itemField) {
const matcher = use.replace(/\.$/, '');
const completions = matcherItemFieldCompletions(context, matcher, variablesToValues);
const completions = matcherItemFieldCompletions(context, matcher, variablesToValueMap);
if (completions) return completions;
}
for (const use of uses.jsonField) {
const matcher = use.replace(/(\.|\[)$/, '');
const completions = matcherItemFieldCompletions(context, matcher, variablesToValues);
const completions = matcherItemFieldCompletions(context, matcher, variablesToValueMap);
if (completions) return completions;
}
@ -190,13 +179,13 @@ export const completerExtension = defineComponent({
});
const { executionCompletions } = useExecutionCompletions();
const { inputCompletions, selectorCompletions } = useItemIndexCompletions(this.mode);
const { inputCompletions, selectorCompletions } = useItemIndexCompletions(mode);
const { matcherJsonFieldCompletions } = useJsonFieldCompletions();
const { dateTimeCompletions, nowCompletions, todayCompletions } = useLuxonCompletions();
const { variablesCompletions } = useVariablesCompletions();
const { workflowCompletions } = useWorkflowCompletions();
for (const [variable, value] of Object.entries(variablesToValues)) {
for (const [variable, value] of Object.entries(variablesToValueMap)) {
const { prevNodeCompletions } = usePrevNodeCompletions(variable);
if (value === '$execution') return executionCompletions(context, variable);
@ -222,7 +211,7 @@ export const completerExtension = defineComponent({
const selectorJsonMatched = SELECTOR_JSON_REGEXES.some((regex) => regex.test(value));
if (inputJsonMatched || selectorJsonMatched) {
return matcherJsonFieldCompletions(context, variable, variablesToValues);
return matcherJsonFieldCompletions(context, variable, variablesToValueMap);
}
// item field
@ -231,12 +220,12 @@ export const completerExtension = defineComponent({
const selectorMethodMatched = SELECTOR_METHOD_REGEXES.some((regex) => regex.test(value));
if (inputMethodMatched || selectorMethodMatched) {
return matcherItemFieldCompletions(context, variable, variablesToValues);
return matcherItemFieldCompletions(context, variable, variablesToValueMap);
}
}
return null;
},
}
// ----------------------------------
// helpers
@ -245,8 +234,8 @@ export const completerExtension = defineComponent({
/**
* Create a map of variables and the values they point to.
*/
variablesToValues() {
return this.variableDeclarationLines().reduce<Record<string, string>>((acc, line) => {
function variablesToValues() {
return variableDeclarationLines().reduce<Record<string, string>>((acc, line) => {
const [left, right] = line.split('=');
const varName = left.replace(/(var|let|const)/, '').trim();
@ -256,18 +245,19 @@ export const completerExtension = defineComponent({
return acc;
}, {});
},
}
variableDeclarationLines() {
if (!this.editor) return [];
function variableDeclarationLines() {
const editorValue = toValue(editor);
if (!editorValue) return [];
const docLines = this.editor.state.doc.toString().split('\n');
const docLines = editorValue.state.doc.toString().split('\n');
const isVariableDeclarationLine = (line: string) =>
['var', 'const', 'let'].some((varType) => line.startsWith(varType));
return docLines.filter(isVariableDeclarationLine);
},
}
/**
* Collect uses of variables pointing to n8n syntax if they have been extended.
@ -276,7 +266,7 @@ export const completerExtension = defineComponent({
* x.first().json.
* x.json.
*/
extendedUses(docLines: string[], varNames: string[]) {
function extendedUses(docLines: string[], varNames: string[]) {
return docLines.reduce<{ itemField: string[]; jsonField: string[] }>(
(acc, cur) => {
varNames.forEach((varName) => {
@ -305,6 +295,7 @@ export const completerExtension = defineComponent({
},
{ itemField: [], jsonField: [] },
);
},
},
});
}
return { autocompletionExtension };
};

16
packages/editor-ui/src/components/CodeNodeEditor/completions/itemIndex.completions.ts
View file

@ -1,8 +1,10 @@
import { escape } from '../utils';
import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import { useI18n } from '@/composables/useI18n';
import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import type { CodeExecutionMode } from 'n8n-workflow';
import { toValue, type MaybeRefOrGetter } from 'vue';
import { escape } from '../utils';
export function useItemIndexCompletions(mode: 'runOnceForEachItem' | 'runOnceForAllItems') {
export function useItemIndexCompletions(mode: MaybeRefOrGetter<CodeExecutionMode>) {
const i18n = useI18n();
/**
* - Complete `$input.` to `.first() .last() .all() .itemMatching()` in all-items mode.
@ -20,7 +22,7 @@ export function useItemIndexCompletions(mode: 'runOnceForEachItem' | 'runOnceFor
const options: Completion[] = [];
if (mode === 'runOnceForAllItems') {
if (toValue(mode) === 'runOnceForAllItems') {
options.push(
{
label: `${matcher}.first()`,
@ -45,7 +47,7 @@ export function useItemIndexCompletions(mode: 'runOnceForEachItem' | 'runOnceFor
);
}
if (mode === 'runOnceForEachItem') {
if (toValue(mode) === 'runOnceForEachItem') {
options.push({
label: `${matcher}.item`,
type: 'variable',
@ -97,7 +99,7 @@ export function useItemIndexCompletions(mode: 'runOnceForEachItem' | 'runOnceFor
},
];
if (mode === 'runOnceForAllItems') {
if (toValue(mode) === 'runOnceForAllItems') {
options.push(
{
label: `${replacementBase}.first()`,
@ -122,7 +124,7 @@ export function useItemIndexCompletions(mode: 'runOnceForEachItem' | 'runOnceFor
);
}
if (mode === 'runOnceForEachItem') {
if (toValue(mode) === 'runOnceForEachItem') {
options.push({
label: `${replacementBase}.item`,
type: 'variable',

146
packages/editor-ui/src/components/CodeNodeEditor/linter.ts
View file

@ -1,11 +1,12 @@
import type { Diagnostic } from '@codemirror/lint';
import { linter as createLinter } from '@codemirror/lint';
import { linter } from '@codemirror/lint';
import type { EditorView } from '@codemirror/view';
import * as esprima from 'esprima-next';
import type { Node } from 'estree';
import type { CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
import { type PropType, defineComponent } from 'vue';
import { toValue, type MaybeRefOrGetter } from 'vue';
import { useI18n } from '@/composables/useI18n';
import {
DEFAULT_LINTER_DELAY_IN_MS,
DEFAULT_LINTER_SEVERITY,
@ -14,24 +15,21 @@ import {
import type { RangeNode } from './types';
import { walk } from './utils';
export const linterExtension = defineComponent({
props: {
mode: {
type: String as PropType<CodeExecutionMode>,
required: true,
},
editor: { type: Object as PropType<EditorView | null>, default: null },
},
methods: {
createLinter(language: CodeNodeEditorLanguage) {
export const useLinter = (
mode: MaybeRefOrGetter<CodeExecutionMode>,
editor: MaybeRefOrGetter<EditorView | null>,
) => {
const i18n = useI18n();
function createLinter(language: CodeNodeEditorLanguage) {
switch (language) {
case 'javaScript':
return createLinter(this.lintSource, { delay: DEFAULT_LINTER_DELAY_IN_MS });
return linter(lintSource, { delay: DEFAULT_LINTER_DELAY_IN_MS });
}
return undefined;
},
}
lintSource(editorView: EditorView): Diagnostic[] {
function lintSource(editorView: EditorView): Diagnostic[] {
const doc = editorView.state.doc.toString();
const script = `module.exports = async function() {${doc}\n}()`;
@ -59,7 +57,7 @@ export const linterExtension = defineComponent({
from: line.from,
to: line.to,
severity: DEFAULT_LINTER_SEVERITY,
message: this.$locale.baseText('codeNodeEditor.linter.bothModes.syntaxError'),
message: i18n.baseText('codeNodeEditor.linter.bothModes.syntaxError'),
},
];
} catch {
@ -80,7 +78,7 @@ export const linterExtension = defineComponent({
* $input.item() -> $input.item
*/
if (this.mode === 'runOnceForEachItem') {
if (toValue(mode) === 'runOnceForEachItem') {
const isItemCall = (node: Node) =>
node.type === 'CallExpression' &&
node.callee.type === 'MemberExpression' &&
@ -88,13 +86,13 @@ export const linterExtension = defineComponent({
node.callee.property.name === 'item';
walk(ast, isItemCall).forEach((node) => {
const [start, end] = this.getRange(node);
const [start, end] = getRange(node);
lintings.push({
from: start,
to: end,
severity: DEFAULT_LINTER_SEVERITY,
message: this.$locale.baseText('codeNodeEditor.linter.allItems.itemCall'),
message: i18n.baseText('codeNodeEditor.linter.allItems.itemCall'),
actions: [
{
name: 'Fix',
@ -113,20 +111,20 @@ export const linterExtension = defineComponent({
* $json -> <removed>
*/
if (this.mode === 'runOnceForAllItems') {
if (toValue(mode) === 'runOnceForAllItems') {
const isUnavailableVarInAllItems = (node: Node) =>
node.type === 'Identifier' && ['$json', '$binary', '$itemIndex'].includes(node.name);
walk(ast, isUnavailableVarInAllItems).forEach((node) => {
const [start, end] = this.getRange(node);
const [start, end] = getRange(node);
const varName = this.getText(node);
const varName = getText(node);
if (!varName) return;
const message = [
`\`${varName}\``,
this.$locale.baseText('codeNodeEditor.linter.allItems.unavailableVar'),
i18n.baseText('codeNodeEditor.linter.allItems.unavailableVar'),
].join(' ');
lintings.push({
@ -152,7 +150,7 @@ export const linterExtension = defineComponent({
* $input.item -> <removed>
*/
if (this.mode === 'runOnceForAllItems') {
if (toValue(mode) === 'runOnceForAllItems') {
type TargetNode = RangeNode & { property: RangeNode };
const isUnavailableInputItemAccess = (node: Node) =>
@ -164,13 +162,13 @@ export const linterExtension = defineComponent({
node.property.name === 'item';
walk<TargetNode>(ast, isUnavailableInputItemAccess).forEach((node) => {
const [start, end] = this.getRange(node.property);
const [start, end] = getRange(node.property);
lintings.push({
from: start,
to: end,
severity: DEFAULT_LINTER_SEVERITY,
message: this.$locale.baseText('codeNodeEditor.linter.allItems.unavailableProperty'),
message: i18n.baseText('codeNodeEditor.linter.allItems.unavailableProperty'),
actions: [
{
name: 'Remove',
@ -189,20 +187,20 @@ export const linterExtension = defineComponent({
*
* items -> $input.item
*/
if (this.mode === 'runOnceForEachItem' && !/(let|const|var) items =/.test(script)) {
if (toValue(mode) === 'runOnceForEachItem' && !/(let|const|var) items =/.test(script)) {
type TargetNode = RangeNode & { object: RangeNode & { name: string } };
const isUnavailableLegacyItems = (node: Node) =>
node.type === 'Identifier' && node.name === 'items';
walk<TargetNode>(ast, isUnavailableLegacyItems).forEach((node) => {
const [start, end] = this.getRange(node);
const [start, end] = getRange(node);
lintings.push({
from: start,
to: end,
severity: DEFAULT_LINTER_SEVERITY,
message: this.$locale.baseText('codeNodeEditor.linter.eachItem.unavailableItems'),
message: i18n.baseText('codeNodeEditor.linter.eachItem.unavailableItems'),
actions: [
{
name: 'Fix',
@ -231,7 +229,7 @@ export const linterExtension = defineComponent({
* $input.itemMatching()
*/
if (this.mode === 'runOnceForEachItem') {
if (toValue(mode) === 'runOnceForEachItem') {
type TargetNode = RangeNode & { property: RangeNode & { name: string } };
const isUnavailableMethodinEachItem = (node: Node) =>
@ -243,9 +241,9 @@ export const linterExtension = defineComponent({
['first', 'last', 'all', 'itemMatching'].includes(node.property.name);
walk<TargetNode>(ast, isUnavailableMethodinEachItem).forEach((node) => {
const [start, end] = this.getRange(node.property);
const [start, end] = getRange(node.property);
const method = this.getText(node.property);
const method = getText(node.property);
if (!method) return;
@ -253,7 +251,7 @@ export const linterExtension = defineComponent({
from: start,
to: end,
severity: DEFAULT_LINTER_SEVERITY,
message: this.$locale.baseText('codeNodeEditor.linter.eachItem.unavailableMethod', {
message: i18n.baseText('codeNodeEditor.linter.eachItem.unavailableMethod', {
interpolate: { method },
}),
});
@ -266,7 +264,7 @@ export const linterExtension = defineComponent({
* $input.itemMatching()
*/
if (this.mode === 'runOnceForAllItems') {
if (toValue(mode) === 'runOnceForAllItems') {
type TargetNode = RangeNode & { callee: RangeNode & { property: RangeNode } };
const isItemMatchingCallWithoutArg = (node: Node) =>
@ -277,13 +275,13 @@ export const linterExtension = defineComponent({
node.arguments.length === 0;
walk<TargetNode>(ast, isItemMatchingCallWithoutArg).forEach((node) => {
const [start, end] = this.getRange(node.callee.property);
const [start, end] = getRange(node.callee.property);
lintings.push({
from: start,
to: end + '()'.length,
severity: DEFAULT_LINTER_SEVERITY,
message: this.$locale.baseText('codeNodeEditor.linter.allItems.itemMatchingNoArg'),
message: i18n.baseText('codeNodeEditor.linter.allItems.itemMatchingNoArg'),
});
});
}
@ -295,7 +293,7 @@ export const linterExtension = defineComponent({
* $input.last(arg) -> $input.last()
*/
if (this.mode === 'runOnceForAllItems') {
if (toValue(mode) === 'runOnceForAllItems') {
type TargetNode = RangeNode & {
callee: { property: { name: string } & RangeNode };
};
@ -311,11 +309,11 @@ export const linterExtension = defineComponent({
node.arguments.length !== 0;
walk<TargetNode>(ast, inputFirstOrLastCalledWithArg).forEach((node) => {
const [start, end] = this.getRange(node.callee.property);
const [start, end] = getRange(node.callee.property);
const message = [
`\`$input.${node.callee.property.name}()\``,
this.$locale.baseText('codeNodeEditor.linter.allItems.firstOrLastCalledWithArg'),
i18n.baseText('codeNodeEditor.linter.allItems.firstOrLastCalledWithArg'),
].join(' ');
lintings.push({
@ -333,13 +331,12 @@ export const linterExtension = defineComponent({
* return -> <no autofix>
*/
const isEmptyReturn = (node: Node) =>
node.type === 'ReturnStatement' && node.argument === null;
const isEmptyReturn = (node: Node) => node.type === 'ReturnStatement' && node.argument === null;
const emptyReturnMessage =
this.mode === 'runOnceForAllItems'
? this.$locale.baseText('codeNodeEditor.linter.allItems.emptyReturn')
: this.$locale.baseText('codeNodeEditor.linter.eachItem.emptyReturn');
toValue(mode) === 'runOnceForAllItems'
? i18n.baseText('codeNodeEditor.linter.allItems.emptyReturn')
: i18n.baseText('codeNodeEditor.linter.eachItem.emptyReturn');
walk<RangeNode>(ast, isEmptyReturn).forEach((node) => {
const [start, end] = node.range.map((loc) => loc - OFFSET_FOR_SCRIPT_WRAPPER);
@ -358,7 +355,7 @@ export const linterExtension = defineComponent({
* return [] -> <no autofix>
*/
if (this.mode === 'runOnceForEachItem') {
if (toValue(mode) === 'runOnceForEachItem') {
const isArrayReturn = (node: Node) =>
node.type === 'ReturnStatement' &&
node.argument !== null &&
@ -366,13 +363,13 @@ export const linterExtension = defineComponent({
node.argument.type === 'ArrayExpression';
walk<RangeNode>(ast, isArrayReturn).forEach((node) => {
const [start, end] = this.getRange(node);
const [start, end] = getRange(node);
lintings.push({
from: start,
to: end,
severity: DEFAULT_LINTER_SEVERITY,
message: this.$locale.baseText('codeNodeEditor.linter.eachItem.returnArray'),
message: i18n.baseText('codeNodeEditor.linter.eachItem.returnArray'),
});
});
}
@ -385,7 +382,7 @@ export const linterExtension = defineComponent({
* const a = item.myField -> const a = item.json.myField;
*/
if (this.mode === 'runOnceForAllItems') {
if (toValue(mode) === 'runOnceForAllItems') {
type TargetNode = RangeNode & {
left: { declarations: Array<{ id: { type: string; name: string } }> };
};
@ -424,7 +421,7 @@ export const linterExtension = defineComponent({
if (shadowFound.length > 0) {
const [shadow] = shadowFound;
const [_shadowStart] = this.getRange(shadow);
const [_shadowStart] = getRange(shadow);
shadowStart = _shadowStart;
}
@ -436,11 +433,11 @@ export const linterExtension = defineComponent({
!['json', 'binary'].includes(node.property.name);
walk(ast, isDirectAccessToItem).forEach((node) => {
const [start, end] = this.getRange(node);
const [start, end] = getRange(node);
if (shadowStart && start > shadowStart) return; // skip shadow item
const varName = this.getText(node);
const varName = getText(node);
if (!varName) return;
@ -448,9 +445,7 @@ export const linterExtension = defineComponent({
from: start,
to: end,
severity: DEFAULT_LINTER_SEVERITY,
message: this.$locale.baseText(
'codeNodeEditor.linter.bothModes.directAccess.itemProperty',
),
message: i18n.baseText('codeNodeEditor.linter.bothModes.directAccess.itemProperty'),
actions: [
{
name: 'Fix',
@ -475,7 +470,7 @@ export const linterExtension = defineComponent({
* const a = $input.item.myField -> const a = $input.item.json.myField;
*/
if (this.mode === 'runOnceForEachItem') {
if (toValue(mode) === 'runOnceForEachItem') {
type TargetNode = RangeNode & { object: { property: RangeNode } };
const isDirectAccessToItemSubproperty = (node: Node) =>
@ -487,21 +482,19 @@ export const linterExtension = defineComponent({
!['json', 'binary'].includes(node.property.name);
walk<TargetNode>(ast, isDirectAccessToItemSubproperty).forEach((node) => {
const varName = this.getText(node);
const varName = getText(node);
if (!varName) return;
const [start, end] = this.getRange(node);
const [start, end] = getRange(node);
const [_, fixEnd] = this.getRange(node.object.property);
const [, fixEnd] = getRange(node.object.property);
lintings.push({
from: start,
to: end,
severity: DEFAULT_LINTER_SEVERITY,
message: this.$locale.baseText(
'codeNodeEditor.linter.bothModes.directAccess.itemProperty',
),
message: i18n.baseText('codeNodeEditor.linter.bothModes.directAccess.itemProperty'),
actions: [
{
name: 'Fix',
@ -536,17 +529,15 @@ export const linterExtension = defineComponent({
['first', 'last'].includes(node.object.callee.property.name);
walk<TargetNode>(ast, isDirectAccessToFirstOrLastCall).forEach((node) => {
const [start, end] = this.getRange(node);
const [start, end] = getRange(node);
const [_, fixEnd] = this.getRange(node.object);
const [, fixEnd] = getRange(node.object);
lintings.push({
from: start,
to: end,
severity: DEFAULT_LINTER_SEVERITY,
message: this.$locale.baseText(
'codeNodeEditor.linter.bothModes.directAccess.firstOrLastCall',
),
message: i18n.baseText('codeNodeEditor.linter.bothModes.directAccess.firstOrLastCall'),
actions: [
{
name: 'Fix',
@ -562,22 +553,25 @@ export const linterExtension = defineComponent({
});
return lintings;
},
}
// ----------------------------------
// helpers
// ----------------------------------
getText(node: RangeNode) {
if (!this.editor) return null;
function getText(node: RangeNode) {
const editorValue = toValue(editor);
const [start, end] = this.getRange(node);
if (!editorValue) return null;
return this.editor.state.doc.toString().slice(start, end);
},
const [start, end] = getRange(node);
getRange(node: RangeNode) {
return editorValue.state.doc.toString().slice(start, end);
}
function getRange(node: RangeNode) {
return node.range.map((loc) => loc - OFFSET_FOR_SCRIPT_WRAPPER);
},
},
});
}
return { createLinter };
};

93
packages/editor-ui/src/components/JsEditor/JsEditor.vue
View file

@ -1,11 +1,11 @@
<template>
<div :class="$style.editor">
<div ref="jsEditor" class="ph-no-capture js-editor"></div>
<div ref="jsEditorRef" class="ph-no-capture js-editor"></div>
<slot name="suffix" />
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { history, toggleComment } from '@codemirror/commands';
import { javascript } from '@codemirror/lang-javascript';
import { foldGutter, indentOnInput } from '@codemirror/language';
@ -21,9 +21,8 @@ import {
keymap,
lineNumbers,
} from '@codemirror/view';
import { defineComponent } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
import {
autocompleteKeyMap,
enterKeyMap,
@ -31,54 +30,48 @@ import {
tabKeyMap,
} from '@/plugins/codemirror/keymap';
import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
export default defineComponent({
name: 'JsEditor',
props: {
modelValue: {
type: String,
required: true,
},
isReadOnly: {
type: Boolean,
default: false,
},
fillParent: {
type: Boolean,
default: false,
},
rows: {
type: Number,
default: 4,
},
},
data() {
return {
editor: null as EditorView | null,
editorState: null as EditorState | null,
type Props = {
modelValue: string;
isReadOnly?: boolean;
fillParent?: boolean;
rows?: number;
};
},
computed: {
doc(): string {
return this.editor?.state.doc.toString() ?? '';
},
extensions(): Extension[] {
const { isReadOnly } = this;
const extensions: Extension[] = [
const props = withDefaults(defineProps<Props>(), { fillParent: false, isReadOnly: false, rows: 4 });
const emit = defineEmits<{
(event: 'update:modelValue', value: string): void;
}>();
onMounted(() => {
const state = EditorState.create({ doc: props.modelValue, extensions: extensions.value });
const parent = jsEditorRef.value;
editor.value = new EditorView({ parent, state });
editorState.value = editor.value.state;
});
const jsEditorRef = ref<HTMLDivElement>();
const editor = ref<EditorView | null>(null);
const editorState = ref<EditorState | null>(null);
const extensions = computed(() => {
const extensionsToApply: Extension[] = [
javascript(),
lineNumbers(),
EditorView.lineWrapping,
EditorState.readOnly.of(isReadOnly),
EditorView.editable.of(!isReadOnly),
EditorState.readOnly.of(props.isReadOnly),
EditorView.editable.of(!props.isReadOnly),
codeNodeEditorTheme({
isReadOnly,
maxHeight: this.fillParent ? '100%' : '40vh',
isReadOnly: props.isReadOnly,
maxHeight: props.fillParent ? '100%' : '40vh',
minHeight: '20vh',
rows: this.rows,
rows: props.rows,
}),
];
if (!isReadOnly) {
extensions.push(
if (!props.isReadOnly) {
extensionsToApply.push(
history(),
Prec.highest(
keymap.of([
@ -97,20 +90,12 @@ export default defineComponent({
foldGutter(),
dropCursor(),
EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
if (!viewUpdate.docChanged || !this.editor) return;
this.$emit('update:modelValue', this.editor?.state.doc.toString());
if (!viewUpdate.docChanged || !editor.value) return;
emit('update:modelValue', editor.value?.state.doc.toString());
}),
);
}
return extensions;
},
},
mounted() {
const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
const parent = this.$refs.jsEditor as HTMLDivElement;
this.editor = new EditorView({ parent, state });
this.editorState = this.editor.state;
},
return extensionsToApply;
});
</script>

122
packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
View file

@ -1,11 +1,11 @@
<template>
<div :class="$style.editor">
<div ref="jsonEditor" class="ph-no-capture json-editor"></div>
<div ref="jsonEditorRef" class="ph-no-capture json-editor"></div>
<slot name="suffix" />
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { history } from '@codemirror/commands';
import { json, jsonParseLinter } from '@codemirror/lang-json';
import { bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
@ -21,7 +21,6 @@ import {
keymap,
lineNumbers,
} from '@codemirror/view';
import { defineComponent } from 'vue';
import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
import {
@ -31,54 +30,40 @@ import {
tabKeyMap,
} from '@/plugins/codemirror/keymap';
import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
import { computed, onMounted, ref, watch } from 'vue';
export default defineComponent({
name: 'JsonEditor',
props: {
modelValue: {
type: String,
required: true,
},
isReadOnly: {
type: Boolean,
default: false,
},
fillParent: {
type: Boolean,
default: false,
},
rows: {
type: Number,
default: 4,
},
},
data() {
return {
editor: null as EditorView | null,
editorState: null as EditorState | null,
type Props = {
modelValue: string;
isReadOnly?: boolean;
fillParent?: boolean;
rows?: number;
};
},
computed: {
doc(): string {
return this.editor?.state.doc.toString() ?? '';
},
extensions(): Extension[] {
const { isReadOnly } = this;
const extensions: Extension[] = [
const props = withDefaults(defineProps<Props>(), { fillParent: false, isReadOnly: false, rows: 4 });
const emit = defineEmits<{
(event: 'update:modelValue', value: string): void;
}>();
const jsonEditorRef = ref<HTMLDivElement>();
const editor = ref<EditorView | null>(null);
const editorState = ref<EditorState | null>(null);
const extensions = computed(() => {
const extensionsToApply: Extension[] = [
json(),
lineNumbers(),
EditorView.lineWrapping,
EditorState.readOnly.of(isReadOnly),
EditorView.editable.of(!isReadOnly),
EditorState.readOnly.of(props.isReadOnly),
EditorView.editable.of(!props.isReadOnly),
codeNodeEditorTheme({
isReadOnly,
maxHeight: this.fillParent ? '100%' : '40vh',
isReadOnly: props.isReadOnly,
maxHeight: props.fillParent ? '100%' : '40vh',
minHeight: '20vh',
rows: this.rows,
rows: props.rows,
}),
];
if (!isReadOnly) {
extensions.push(
if (!props.isReadOnly) {
extensionsToApply.push(
history(),
Prec.highest(
keymap.of([...tabKeyMap(), ...enterKeyMap, ...historyKeyMap, ...autocompleteKeyMap]),
@ -93,41 +78,42 @@ export default defineComponent({
dropCursor(),
bracketMatching(),
EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
if (!viewUpdate.docChanged || !this.editor) return;
this.$emit('update:modelValue', this.editor?.state.doc.toString());
if (!viewUpdate.docChanged || !editor.value) return;
emit('update:modelValue', editor.value?.state.doc.toString());
}),
);
}
return extensions;
},
},
watch: {
modelValue(newValue: string) {
const editorValue = this.editor?.state?.doc.toString();
return extensionsToApply;
});
onMounted(() => {
createEditor();
});
watch(
() => props.modelValue,
(newValue: string) => {
const editorValue = editor.value?.state?.doc.toString();
// If model value changes from outside the component
if (editorValue && editorValue.length !== newValue.length && editorValue !== newValue) {
this.destroyEditor();
this.createEditor();
destroyEditor();
createEditor();
}
},
},
mounted() {
this.createEditor();
},
methods: {
createEditor() {
const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
const parent = this.$refs.jsonEditor as HTMLDivElement;
);
this.editor = new EditorView({ parent, state });
this.editorState = this.editor.state;
},
destroyEditor() {
this.editor?.destroy();
},
},
});
function createEditor() {
const state = EditorState.create({ doc: props.modelValue, extensions: extensions.value });
const parent = jsonEditorRef.value;
editor.value = new EditorView({ parent, state });
editorState.value = editor.value.state;
}
function destroyEditor() {
editor.value?.destroy();
}
</script>
<style lang="scss" module>