staxman-old/static/scripts/components/editor/script.ts

import "/static/vendor/ace/ace.js";
import { $el } from "/static/vendor/domutil/domutil.js";

class Editor extends HTMLElement {
	private editor: AceAjax.Editor;
	private tabEl: HTMLDivElement;
	private files: Record<string, AceAjax.IEditSession>;
	private root: ShadowRoot;
	private addTabButton: HTMLDivElement;

	constructor() {
		super();
		this.files = {};
		this.root = this.attachShadow({ mode: "open" });
	}

	connectedCallback() {
		this.addTabButton = $el("div", { className: "tab" }, "+");
		this.tabEl = $el("div", { className: "tab-container" }, this.addTabButton);
		this.root.append(this.tabEl);

		const style = $el("style");
		style.textContent = `
		.tab-container {
			display: flex;
			margin-bottom: -2px;

			& .tab {
				border: 2px solid var(--table-border-color);
				padding: 0.5ch 0.8ch;
				background-color: var(--button-bg);
				cursor: pointer;
				&.active {
					background-color: var(--table-border-color);
				}
				&:not(:first-child) {
					margin-left: -2px;
				}
			}
		}
		`;
		const slot = $el("slot", { name: "body" });
		this.root.append(style, slot);

		const editorEl = $el("div", { slot: "body" });
		this.append(editorEl);

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

		// 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");
	}

	/**
	 * Add a file editing session
	 * @param name File name
	 * @param content File contents
	 */
	addFile(name: string, content: string) {
		// Add to session list
		this.files[name] = ace.createEditSession(content);

		// TODO replace this with auto-detection
		this.files[name].setMode("ace/mode/nix");

		// Create tab and set as active
		const tab = this.#addTab(name);
		tab.click();
	}

	setCurrent(name: string) {
		this.editor.setSession(this.files[name]);
		this.tabEl.querySelectorAll<HTMLDivElement>(".tab").forEach(el => {
			if (el.dataset.name === name) el.classList.add("active");
			else el.classList.remove("active");
		});
	}

	/**
	 * Create a new tab
	 * @param name Tab name
	 * @returns Tab element
	 */
	#addTab(name: string) {
		const tab = $el("div", {
			className: "tab",
			dataset: { name },
			"@click": () => this.setCurrent(name)
		}, name);
		this.tabEl.insertBefore(tab, this.addTabButton);
		return tab;
	}
}

customElements.define("file-editor", Editor);