@sealcode/jdd-editor 0.1.0

package/src/controllers/component-debugger.stimulus.ts

@@ -0,0 +1,247 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+import { Controller } from "stimulus";
+
+export default class ComponentDebugger extends Controller {
+	declare sizeSelectTarget: HTMLSelectElement;
+	declare gutterTarget: HTMLDivElement;
+	declare checkboxTarget: HTMLInputElement;
+	declare checkboxTargets: HTMLInputElement[];
+	declare previewTarget: HTMLDivElement;
+	declare componentBlockTargets: HTMLDivElement[];
+	static targets = [
+		"gutter",
+		"componentBlock",
+		"checkbox",
+		"preview",
+		"sizeSelect",
+	];
+
+	id: string;
+	main_form: HTMLFormElement;
+	origin_x: number;
+	origin_width: number;
+
+	connect() {
+		const main_form = document
+			.querySelector("#component-debugger")
+			?.closest("form");
+		if (!main_form) {
+			throw new Error("No main form");
+		}
+		this.main_form = main_form;
+		document.documentElement.addEventListener("ts-rebuilt", () => {
+			this.main_form.requestSubmit();
+		});
+		this.main_form.addEventListener("turbo:submit-end", () => {
+			// this clears the values of file inputs, so they don't get unecessarily
+			// re-uploaded on future submissions - the file is alreade there on the server
+			this.main_form
+				.querySelectorAll("input[type=file]")
+				.forEach((input: HTMLInputElement) => (input.value = ""));
+		});
+
+		window.addEventListener("load", () => {
+			this.update_width_display();
+		});
+		document.addEventListener("turbo:render", () => {
+			// not calling that to see if that improves performance
+			// console.log("UWD because of render event");
+			// this.update_width_display();
+		});
+
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const gutter = this.gutterTarget;
+		gutter.addEventListener("mousedown", (e) => {
+			this.origin_x = e.clientX;
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			const resizable = this.targets.find("preview") as HTMLSpanElement;
+			this.origin_width = resizable.getBoundingClientRect().width;
+			const handler = (e: MouseEvent) => this.resizeHandler(e);
+			document.addEventListener("mousemove", handler);
+			const remove_move_listener = () => {
+				document.removeEventListener("mousemove", handler);
+				document.removeEventListener("mouseup", remove_move_listener);
+				document.dispatchEvent(
+					new Event("component-debugger--resize-done")
+				);
+			};
+			document.addEventListener("mouseup", remove_move_listener);
+			e.preventDefault();
+		});
+	}
+
+	update_width_display() {
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		console.log("uwd");
+		const preview = this.targets.find("preview") as HTMLSpanElement;
+		const component_width = preview.offsetWidth;
+		this.sizeSelectTarget
+			.querySelectorAll("option")
+			.forEach((e) => e.removeAttribute("selected"));
+		let option: HTMLOptionElement | null =
+			this.sizeSelectTarget.querySelector("option.dynamic");
+		if (!option) {
+			option = document.createElement("option");
+			option.classList.add("dynamic");
+			option.setAttribute("selected", "");
+			this.sizeSelectTarget.insertBefore(
+				option,
+				this.sizeSelectTarget.childNodes[0]!
+			);
+		}
+		option.setAttribute("selected", "");
+		option.innerHTML = `${component_width} px`;
+		option.value = String(component_width);
+		this.sizeSelectTarget.value = String(component_width);
+	}
+
+	resizeHandler(e: MouseEvent) {
+		const width_offset = this.origin_x - e.clientX;
+		const new_width = Math.max(this.origin_width + width_offset, 1);
+		this.setPreviewWidth(new_width);
+		this.update_width_display();
+		document.dispatchEvent(new Event("component-debugger--resize"));
+	}
+
+	setPreviewWidth(width: number) {
+		document
+			.getElementById("component-debugger")
+			?.style.setProperty(
+				"--resizable-column-width",
+				width.toString() + "px"
+			);
+		this.update_width_display();
+	}
+
+	handleWidthDropdown() {
+		const value = this.sizeSelectTarget.value;
+		this.setPreviewWidth(parseInt(value));
+	}
+
+	handleBlockHover(e: MouseEvent) {
+		const index = parseInt(
+			(e.target as HTMLDivElement)
+				.closest(".jdd-editor__component-block")
+				?.getAttribute("data-component-index") || "0"
+		);
+		this.element
+			.querySelector(`.component-number-${index}`)
+			?.classList.add("highlighted");
+	}
+
+	handleBlockUnhover(e: MouseEvent) {
+		const index = parseInt(
+			(e.target as HTMLDivElement)
+				.closest(".jdd-editor__component-block")
+				?.getAttribute("data-component-index") || ""
+		);
+		this.element
+			.querySelectorAll(`.component-number-${index}.highlighted`)
+			.forEach((e) => e.classList.remove("highlighted"));
+	}
+
+	componentBlockTargetConnected(block_element: HTMLDivElement) {
+		const index = parseInt(
+			block_element.getAttribute("data-component-index") || "0"
+		);
+		block_element.addEventListener("focusin", () => {
+			this.scrollToComponentPreview(index);
+		});
+
+		const summary = block_element.querySelector("summary");
+		if (summary) {
+			summary.addEventListener(
+				"mouseenter",
+				this.handleBlockHover.bind(this)
+			);
+			summary.addEventListener(
+				"mouseleave",
+				this.handleBlockUnhover.bind(this)
+			);
+		}
+	}
+
+	previewTargetConnected(preview_element: HTMLDivElement) {
+		preview_element.addEventListener("click", ({ target }) => {
+			if (!(target instanceof HTMLElement)) {
+				return;
+			}
+			const closest = target.closest(".jdd-component");
+			if (!closest) {
+				return;
+			}
+			const index = parseInt(
+				String(
+					Array.from(closest.classList)
+						.find((c) => c.startsWith("component-number-"))
+						?.replace("component-number-", "")
+				)
+			);
+			if (isNaN(index)) {
+				return;
+			}
+			this.focusComponentBlock(index);
+		});
+	}
+
+	focusComponentBlock(index: number) {
+		const block = this.componentBlockTargets[index];
+		if (!block) {
+			return;
+		}
+		this.checkboxTargets[index]!.checked = true;
+		this.checkboxTargets[index]!.dispatchEvent(new Event("change")); // to help with refreshing markdown editor
+		block.scrollIntoView({ behavior: "smooth" });
+		(
+			block.querySelector(
+				".component-preview-parameters input"
+			) as HTMLInputElement
+		)?.focus();
+	}
+
+	getIndex(block_element: HTMLDivElement) {
+		const index = parseInt(
+			String(block_element.getAttribute("data-component-index"))
+		);
+		return index;
+	}
+
+	labelClicked(element: MouseEvent) {
+		const block_element = (element.target as HTMLDivElement).closest(
+			`[data-component-debugger-target="componentBlock"]`
+		) as HTMLDivElement;
+		const index = this.getIndex(block_element);
+		if (!this.checkboxTargets?.[index]?.checked) {
+			this.scrollToComponentPreview(index);
+		}
+	}
+
+	getPreviewElementForComponentIndex(index: number) {
+		const element = this.element.querySelector(
+			`.component-number-${index}`
+		) as HTMLDialogElement;
+		return element;
+	}
+
+	scrollToComponentPreview(index: number) {
+		const element = this.getPreviewElementForComponentIndex(index);
+		if (!element) {
+			return;
+		}
+		const preview_element =
+			this.element.querySelector(".component-preview");
+		if (!preview_element) {
+			throw new Error("Missing preview element!");
+		}
+		if (element.clientHeight > preview_element.clientHeight) {
+			preview_element.scrollTop = element.offsetTop - 44;
+		} else {
+			preview_element.scrollTop =
+				element.offsetTop -
+				(preview_element.clientHeight - element.clientHeight) / 2 -
+				44;
+		}
+	}
+}

package/src/controllers/exportable-textarea.stimulus.ts

@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { Controller } from "stimulus";
+
+function download(data: string, filename: string, type: string) {
+	const file = new Blob([data], { type: type });
+	const a = document.createElement("a"),
+		url = URL.createObjectURL(file);
+	a.href = url;
+	a.download = filename;
+	document.body.appendChild(a);
+	a.click();
+	setTimeout(function () {
+		document.body.removeChild(a);
+		window.URL.revokeObjectURL(url);
+	}, 0);
+}
+
+export default class ExportableTextarea extends Controller<HTMLDetailsElement> {
+	connect() {
+		console.log("exportable", this.element);
+		this.element.removeAttribute("open");
+		this.element.addEventListener(
+			"turbo:before-morph-attribute",
+			(event: CustomEvent<{ attributeName: string }>) => {
+				if (
+					event.target == this.element &&
+					event.detail.attributeName == "open"
+				) {
+					event.preventDefault();
+				}
+			}
+		);
+	}
+
+	async copy(e: MouseEvent) {
+		e.preventDefault();
+		const textarea = this.element.querySelector("textarea");
+		if (!textarea) {
+			throw new Error("Couldn't find the textarea");
+		}
+		await navigator.clipboard.writeText(textarea.value);
+		(e.target as HTMLButtonElement).textContent = "Copied";
+		await sleep(1000);
+		(e.target as HTMLButtonElement).textContent = "Copy";
+	}
+
+	async download(e: MouseEvent) {
+		e.preventDefault();
+		const textarea = this.element.querySelector("textarea");
+		if (!textarea) {
+			throw new Error("Couldn't find the textarea");
+		}
+		download(
+			textarea.value,
+			String(Date.now()) + ".json",
+			"application/json"
+		);
+	}
+
+	async import(e: MouseEvent) {
+		e.preventDefault();
+		const file_input = this.element.querySelector(
+			"input[type='file']"
+		) as HTMLInputElement;
+		const file = file_input.files?.[0];
+		if (file) {
+			const text = await file.text();
+			const textarea = this.element.querySelector("textarea");
+			textarea!.innerHTML = text.replaceAll("<", "&lt;");
+			textarea!.dispatchEvent(new Event("change"));
+		}
+	}
+}
+
+function sleep(n: number) {
+	return new Promise((resolve) => setTimeout(resolve, n));
+}

package/src/controllers/input-image-preview.stimulus.ts

@@ -0,0 +1,29 @@
+import { Controller } from "stimulus";
+
+export default class InputImagePreview extends Controller {
+	id: string;
+
+	handleChange() {
+		let img = this.element.querySelector("img");
+		if (!img) {
+			img = document.createElement("img");
+			img.setAttribute("style", "height: 40px; width: 40px");
+			this.element
+				.querySelector(".image-preview-container")
+				?.appendChild(img);
+		}
+		window.URL.revokeObjectURL(img.src);
+		const file = this.element.querySelector("input")?.files?.[0];
+		if (!file) {
+			console.warn("No file");
+			return;
+		}
+		const new_url = window.URL.createObjectURL(file);
+		img.src = new_url;
+		img.parentNode;
+		img.parentElement
+			?.querySelectorAll("source")
+			.forEach((e) => e.parentNode?.removeChild(e));
+		img.style.aspectRatio = "1";
+	}
+}

package/src/controllers/jdd-table-paste.stimulus.ts

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+/* eslint-disable no-await-in-loop */
+/* eslint-disable @typescript-eslint/no-misused-promises */
+import { Controller } from "stimulus";
+import TurndownService from "turndown";
+import objectPath from "object-path";
+
+const turndownService = new TurndownService();
+
+export default class extends Controller<HTMLButtonElement> {
+	declare argpathValue: string;
+	static values = {
+		argpath: String,
+	};
+
+	connect() {
+		this.element.addEventListener("click", async () => {
+			const clipboardContents = await navigator.clipboard.read();
+			for (const item of clipboardContents) {
+				if (!item.types.includes("text/html")) {
+					alert(
+						"Nie można skopiować tabeli - nie znaleziono danych HTML"
+					);
+					return;
+				}
+				const blob = await item.getType("text/html");
+				const html = await blob.text();
+				const div = document.createElement("div");
+				div.innerHTML = html;
+				const table = div.querySelector("table");
+				if (!table) {
+					alert("No table in clipboard");
+				}
+				const rows = Array.from(
+					table?.querySelectorAll("tr") || []
+				).map((tr) => {
+					const cells = Array.from(tr.querySelectorAll("td"));
+					return {
+						type: "row",
+						cells: cells.map((cell) =>
+							turndownService.turndown(cell)
+						),
+					};
+				});
+
+				const form = this.element.closest("form");
+				const json_textarea = document.getElementById(
+					"component-debugger-json-textarea"
+				) as HTMLTextAreaElement;
+				if (!json_textarea) {
+					console.error(
+						"Could not find json textarea with the jdd state"
+					);
+					return;
+				}
+				if (!form) {
+					throw new Error("Not inside a form");
+				}
+				const handler = () => {
+					document.removeEventListener("turbo:morph", handler);
+					const state = JSON.parse(json_textarea.value) as unknown;
+					objectPath.set(state as object, this.argpathValue, {
+						rows,
+					});
+
+					json_textarea.childNodes[0]!.textContent =
+						JSON.stringify(state);
+					setTimeout(() => {
+						// async in order to give a chance for UI state to update after changing the iframe value
+						const submitter_button =
+							document.createElement("button");
+						submitter_button.setAttribute(
+							"formaction",
+							"./?action=replace_state&action_args=W10="
+						);
+						form.appendChild(submitter_button);
+						form.requestSubmit(submitter_button);
+						submitter_button.remove();
+					}, 0);
+				};
+
+				document.addEventListener("turbo:morph", handler);
+				form.requestSubmit(); // to get the newest json first, there may be some
+				// unsent changes
+			}
+		});
+	}
+}

package/src/controllers/json-editor.stimulus.ts

@@ -0,0 +1,127 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { Controller } from "stimulus";
+
+const JS_ID = "codemirror-js";
+const JS_PATH = "/dist/codemirror.js";
+
+const JS_MODE_ID = "codemirror-js-mode-js";
+const JS_MODE_PATH = "/dist/codemirror-javascript-mode.js";
+
+const CSS_ID = "codemirror-css";
+const CSS_PATH = "/dist/codemirror.css";
+
+declare const CodeMirror: any;
+
+export default class JSONEditor extends Controller<HTMLTextAreaElement> {
+	cm: any;
+	saving = false;
+
+	addCSS() {
+		const tag = document.querySelector(`head #${CSS_ID}`);
+		if (!tag) {
+			const link = document.createElement("link");
+			link.setAttribute("rel", "stylesheet");
+			link.setAttribute("type", "text/css");
+			link.setAttribute("id", CSS_ID);
+			link.setAttribute("href", CSS_PATH);
+			document.head.appendChild(link);
+		}
+	}
+
+	async addJS(js_id: string, js_path: string) {
+		return new Promise<void>((resolve, reject) => {
+			const once_loaded = (e: MouseEvent) => {
+				(e.target as HTMLScriptElement).setAttribute("loaded", "true");
+				resolve();
+			};
+			try {
+				const tag = document.querySelector(`head #${js_id}`);
+				if (!tag) {
+					const script = document.createElement("script");
+					script.setAttribute("id", js_id);
+					script.setAttribute("src", js_path);
+					script.addEventListener("load", once_loaded);
+					document.head.appendChild(script);
+				} else {
+					if (tag.getAttribute("loaded") == "true") {
+						resolve();
+					} else {
+						tag.addEventListener("load", once_loaded);
+					}
+				}
+			} catch (e) {
+				reject(e);
+			}
+		});
+	}
+
+	async connect() {
+		if (this.element.parentNode?.querySelector(".CodeMirror")) {
+			//already loaded, quit;
+			return;
+		}
+		this.addCSS();
+		await this.addJS(JS_ID, JS_PATH);
+		await this.addJS(JS_MODE_ID, JS_MODE_PATH);
+		this.cm = CodeMirror.fromTextArea(this.element, {
+			mode: {
+				name: "javascript",
+				json: true,
+			},
+			theme: "default",
+			addModeClass: true,
+			lineWrapping: true,
+		});
+		this.cm.on("change", () => {
+			this.saving = true;
+			this.element.innerHTML = this.cm.getValue().replace("<", "&lt;");
+			this.saving = false;
+		});
+		// to prevent morhping from removing the element
+		this.cm.getWrapperElement().setAttribute("data-turbo-permanent", "");
+		const observer = new MutationObserver((mutation) => {
+			console.log("DETECTED TEXTAREA MUTATION CHANGE!", mutation);
+			if (!this.saving) {
+				if (this.cm.getValue() != this.element.innerHTML) {
+					console.log(
+						"SETTING CM VALUE TO",
+						this.element.innerHTML.slice(0, 100)
+					);
+					this.cm.setValue(this.element.innerHTML);
+				}
+			}
+		});
+		observer.observe(this.element, {
+			characterData: true,
+			subtree: true,
+		});
+
+		this.element.addEventListener("change", () => {
+			console.log("DETECTED TEXTAREA CHANGE!");
+			if (!this.saving) {
+				if (this.cm.getValue() != this.element.innerHTML) {
+					console.log(
+						"SETTING CM VALUE TO",
+						this.element.innerHTML.slice(0, 100)
+					);
+					this.cm.setValue(this.element.innerHTML);
+				}
+			}
+		});
+		this.element
+			.closest("details")
+			?.addEventListener("toggle", (event: MouseEvent) => {
+				if ((event.target as HTMLDetailsElement).open) {
+					this.cm.refresh();
+				}
+			});
+	}
+
+	async disconnect() {
+		console.log("DISCONNECTING JSON EDITOR");
+	}
+}