staxman-old/static/scripts/ace.mjs

import "../vendor/ace/ace.js";
import { findNearestParent } from "./node-utils.mjs";

export default class Editor {
	editor;

	/**
	 * Create a new editor
	 * @param {string} elementID ID of element to replace with the editor
	 * @param {boolean} [hookForm=true] Automatically add event to parent form (if any) to set the value on submit
	 */
	constructor(elementID, hookForm = true) {
		/** @type {string} */
		let originalElementName = null;

		/** @type {HTMLFormElement} */
		let parentForm = null;

		if (hookForm) {
			const el = document.getElementById(elementID);
			if (!el) {
				throw new Error("there is no element with the specified ID");
			}

			originalElementName = el.getAttribute("name");
			if (originalElementName) {
				// If it has a name it might have a form for a parent
				parentForm = findNearestParent(el, (parent) => parent.tagName == "FORM");
			}
		}

		// Create editor
		ace.config.set('basePath', '/static/vendor/ace')
		this.editor = ace.edit(elementID);

		// todo make this stuff customizable??
		this.editor.setTheme("ace/theme/dracula");
		this.editor.setOptions({
			fontFamily: "Iosevka Web",
			fontSize: "12pt",
		});
		this.editor.getSession().setUseWrapMode(true);
		this.editor.setKeyboardHandler("ace/keyboard/vim");
		this.editor.session.setMode("ace/mode/nix");

		if (parentForm !== null) {
			parentForm.addEventListener("formdata", (ev) => {
				ev.formData.set(originalElementName, this.editor.getValue());
			});
		}
	}
}