n8n/packages/editor-ui/src/composables/useCodeEditor.ts

import {
	codeEditorTheme,
} from "@/components/CodeNodeEditor/theme";
import {
	editorKeymap
} from "@/plugins/codemirror/keymap";
import { typescript } from "@/plugins/codemirror/lsp/typescript";
import { closeCursorInfoBox } from "@/plugins/codemirror/tooltips/InfoBoxTooltip";
import { closeCompletion, completionStatus } from "@codemirror/autocomplete";
import {
	history
} from "@codemirror/commands";
import { javascript } from "@codemirror/lang-javascript";
import { json } from "@codemirror/lang-json";
import { python } from "@codemirror/lang-python";
import {
	bracketMatching,
	foldGutter,
	indentOnInput,
} from "@codemirror/language";
import { highlightSelectionMatches } from '@codemirror/search';
import {
	Compartment,
	EditorSelection,
	EditorState,
	Prec,
	type Extension,
	type SelectionRange,
} from "@codemirror/state";
import {
	drawSelection,
	dropCursor,
	EditorView,
	highlightActiveLineGutter,
	highlightSpecialChars,
	keymap,
	lineNumbers,
	type ViewUpdate
} from "@codemirror/view";
import { indentationMarkers } from '@replit/codemirror-indentation-markers';
import { html } from "codemirror-lang-html-n8n";
import { debounce } from "lodash-es";
import {
	onBeforeUnmount,
	onMounted,
	ref,
	toRef,
	toValue,
	watch,
	type MaybeRefOrGetter,
	type Ref,
} from "vue";

export type CodeEditorLanguage = "json" | "html" | "javaScript" | "python";


export const useCodeEditor = ({
	editorRef,
	editorValue,
	language,
	placeholder,
	extensions = [],
	isReadOnly = false,
	theme = {},
	onChange = () => {},
}: {
	editorRef: MaybeRefOrGetter<HTMLElement | undefined>;
	language: MaybeRefOrGetter<CodeEditorLanguage>;
	editorValue?: MaybeRefOrGetter<string>;
	placeholder?: MaybeRefOrGetter<string>;
	extensions?: MaybeRefOrGetter<Extension[]>;
	isReadOnly?: MaybeRefOrGetter<boolean>;
	theme?: MaybeRefOrGetter<{
		maxHeight?: string;
		minHeight?: string;
		rows?: number;
	}>;
	onChange?: (viewUpdate: ViewUpdate) => void;
}) => {
	const editor = ref<EditorView>();
	const hasFocus = ref(false);
	const hasChanges = ref(false);
	const selection = ref<SelectionRange>(
		EditorSelection.cursor(0),
	) as Ref<SelectionRange>;
	const customExtensions = ref<Compartment>(new Compartment());
	const readOnlyExtensions = ref<Compartment>(new Compartment());
	const telemetryExtensions = ref<Compartment>(new Compartment());
	const languageExtensions = ref<Compartment>(new Compartment());
	const themeExtensions = ref<Compartment>(new Compartment());
	const autocompleteStatus = ref<"pending" | "active" | null>(null);
	const dragging = ref(false);

	function getInitialLanguageExtensions(lang: CodeEditorLanguage): Extension[] {
		switch (lang) {
			case "javaScript":
				return [javascript()];
			default:
				return [];
		}
	}

	async function getFullLanguageExtensions(
		lang: CodeEditorLanguage,
	): Promise<Extension[]> {
		switch (lang) {
			case "javaScript":
				return [
					await typescript(readEditorValue()),
				];
			case "python":
				return [python()];
			case "json":
				return [json()];
			case "html":
				return [html()];
		}
	}

	function readEditorValue(): string {
		return editor.value?.state.doc.toString() ?? "";
	}

	function updateSelection(update: ViewUpdate) {
		const currentSelection = selection.value;
		const newSelection = update.state.selection.ranges[0];

		if (!currentSelection?.eq(newSelection)) {
			selection.value = newSelection;
		}
	}

	const emitChanges = debounce((update: ViewUpdate) => {
		onChange(update);
	}, 300);

	function onEditorUpdate(update: ViewUpdate) {
		autocompleteStatus.value = completionStatus(update.view.state);
		updateSelection(update);

		if (update.docChanged) {
			hasChanges.value = true;
			emitChanges(update);
		}
	}

	function blur() {
		if (editor.value) {
			editor.value.contentDOM.blur();
			closeCompletion(editor.value);
			closeCursorInfoBox(editor.value);
		}
	}

	function blurOnClickOutside(event: MouseEvent) {
		if (
			event.target &&
			!dragging.value &&
			!editor.value?.dom.contains(event.target as Node)
		) {
			blur();
		}
		dragging.value = false;
	}

	async function setLanguageExtensions() {
		if (!editor.value) return;
		const initialExtensions = getInitialLanguageExtensions(toValue(language));
		if (initialExtensions.length > 0) {
			editor.value.dispatch({
				effects: languageExtensions.value.reconfigure(initialExtensions),
			});
		}

		editor.value.dispatch({
			effects: languageExtensions.value.reconfigure(
				await getFullLanguageExtensions(toValue(language)),
			),
		});
	}

	function getReadOnlyExtensions() {
		return [
			EditorState.readOnly.of(toValue(isReadOnly)),
			EditorView.editable.of(!toValue(isReadOnly)),
			highlightSpecialChars(),
		];
	}

	function setReadOnlyExtensions() {
		if (!editor.value) return;
		editor.value.dispatch({
			effects: readOnlyExtensions.value.reconfigure([getReadOnlyExtensions()]),
		});
	}

	watch(toRef(editorRef), async () => {
		const parent = toValue(editorRef);

		if (!parent) return;

		const initialValue = toValue(editorValue)
			? toValue(editorValue)
			: toValue(placeholder);
		const state = EditorState.create({
			doc: initialValue,
			extensions: [
				customExtensions.value.of(toValue(extensions)),
				readOnlyExtensions.value.of(getReadOnlyExtensions()),
				telemetryExtensions.value.of([]),
				languageExtensions.value.of(
					getInitialLanguageExtensions(toValue(language)),
				),
				themeExtensions.value.of(codeEditorTheme(toValue(theme))),
				EditorView.updateListener.of(onEditorUpdate),
				EditorView.focusChangeEffect.of((_, newHasFocus) => {
					hasFocus.value = newHasFocus;
					selection.value = state.selection.ranges[0];
					if (!newHasFocus) {
						autocompleteStatus.value = null;
					}
					return null;
				}),
				EditorState.allowMultipleSelections.of(true),
				EditorView.contentAttributes.of({ "data-gramm": "false" }), // disable grammarly
				EditorView.domEventHandlers({
					mousedown: () => {
						dragging.value = true;
					},
				}),
				highlightSelectionMatches({highlightWordAroundCursor:true, minSelectionLength: 2 }),
				lineNumbers(),
				drawSelection(),
				foldGutter({
					markerDOM: (open) => {
						const svgNS = "http://www.w3.org/2000/svg";
						const wrapper = document.createElement("div");
						wrapper.classList.add("cm-fold-marker");
						const svgElement = document.createElementNS(svgNS, "svg");
						svgElement.setAttribute("viewBox", "0 0 10 10");
						svgElement.setAttribute("width", "10");
						svgElement.setAttribute("height", "10");
						const pathElement = document.createElementNS(svgNS, "path");
						const d = open ? "M1 3 L5 7 L9 3" : "M3 1 L7 5 L3 9"; // Chevron paths
						pathElement.setAttribute("d", d);
						pathElement.setAttribute("fill", "none");
						pathElement.setAttribute("stroke", "currentColor");
						pathElement.setAttribute("stroke-width", "1.5");
						pathElement.setAttribute("stroke-linecap", "round");
						svgElement.appendChild(pathElement);
						wrapper.appendChild(svgElement);
						return wrapper;
					},
				}),
				EditorView.lineWrapping,
				history(),
				dropCursor(),
				indentOnInput(),
				bracketMatching(),
				highlightActiveLineGutter(),
				indentationMarkers({
					highlightActiveBlock: true,
					markerType: 'fullScope',
					colors: {
						activeDark: 'var(--color-code-indentation-marker-active)',
						activeLight: 'var(--color-code-indentation-marker-active)',
						dark: 'var(--color-code-indentation-marker)',
						light: 'var(--color-code-indentation-marker)',
					},
				}),
				Prec.highest(
					keymap.of(editorKeymap),
				),
			],
		});

		if (editor.value) {
			editor.value.destroy();
		}
		editor.value = new EditorView({
			parent,
			state,
			scrollTo: EditorView.scrollIntoView(0),
		});

		editor.value.dispatch({
			effects: languageExtensions.value.reconfigure(
				await getFullLanguageExtensions(toValue(language)),
			),
		});
	});

	watch(extensions, () => {
		if (editor.value) {
			editor.value.dispatch({
				effects: customExtensions.value.reconfigure(toValue(extensions)),
			});
		}
	});

	watch(toRef(language), setLanguageExtensions);

	watch(toRef(isReadOnly), setReadOnlyExtensions);

	watch(toRef(theme), () => {
		if (editor.value) {
			editor.value.dispatch({
				effects: themeExtensions.value.reconfigure(
					codeEditorTheme(toValue(theme)),
				),
			});
		}
	});

	watch(toRef(editorValue), () => {
		if (!editor.value) return;

		const newValue = toValue(editorValue);
		const currentValue = readEditorValue();
		if (newValue === undefined || newValue === currentValue) return;

		editor.value.dispatch({
			changes: { from: 0, to: currentValue.length, insert: newValue },
		});
	});

	onMounted(() => {
		document.addEventListener("click", blurOnClickOutside);
	});

	onBeforeUnmount(() => {
		document.removeEventListener("click", blurOnClickOutside);
		editor.value?.destroy();
	});

	function setCursorPosition(pos: number | "end"): void {
		const finalPos =
			pos === "end" ? (editor.value?.state.doc.length ?? 0) : pos;

		editor.value?.dispatch({ selection: { head: finalPos, anchor: finalPos } });
	}

	function select(anchor: number, head: number | "end" = "end"): void {
		editor.value?.dispatch({
			selection: {
				anchor,
				head: head === "end" ? (editor.value?.state.doc.length ?? 0) : head,
			},
		});
	}

	function getLine(lineNumber: number | "last" | "first") {
		if (!editor.value) return;

		const { doc } = editor.value.state;
		switch (lineNumber) {
			case "first":
				return doc.lineAt(0);
			case "last":
				return doc.lineAt(doc.length - 1);
			default:
				return doc.line(lineNumber);
		}
	}

	function selectLine(lineNumber: number | "last" | "first"): void {
		if (!editor.value) return;

		const line = getLine(lineNumber);

		if (!line) return;

		editor.value.dispatch({
			selection: EditorSelection.range(line.from, line.to),
		});
	}

	function highlightLine(lineNumber: number | "last" | "first"): void {
		if (!editor.value) return;

		const line = getLine(lineNumber);

		if (!line) return;

		editor.value.dispatch({ selection: EditorSelection.cursor(line.from) });
	}

	const selectAll = () => select(0, "end");

	function focus(): void {
		if (hasFocus.value) return;
		editor.value?.focus();
	}

	return {
		editor,
		hasFocus,
		hasChanges,
		selection,
		readEditorValue,
		setCursorPosition,
		select,
		selectLine,
		selectAll,
		highlightLine,
		focus,
		blur,
	};
};