@sealcode/jdd-editor 0.1.0

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

@@ -0,0 +1,198 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Controller } from "stimulus";
+import type { default as simplemde } from "simplemde";
+
+const CSS_ID = "simplemde-css";
+const JS_ID = "simplemde-js";
+
+declare const SimpleMDE: simplemde;
+
+export default class MarkdownTextarea extends Controller<HTMLTextAreaElement> {
+	sm: simplemde;
+	checkboxHandler: (this: HTMLElement, ev: Event) => any;
+	resizeObserver: ResizeObserver;
+	intersectionObserver: IntersectionObserver;
+	mdeStarted = 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", "/dist/simplemde.min.css");
+			document.head.appendChild(link);
+		}
+	}
+
+	async addJS() {
+		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", "/dist/simplemde.min.js");
+					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);
+			}
+		});
+	}
+
+	handleResize() {
+		this.sm.codemirror.refresh();
+	}
+
+	async connect() {
+		console.log("Markdown connect!", this.element);
+		if (this.element.parentNode?.querySelector(".editor-toolbar")) {
+			//already loaded, quit;
+			return;
+		}
+		this.addCSS();
+		await this.addJS();
+		const component_block = this.isInsideComponentBlock();
+
+		// some offloading of starting the MDE, because it is slow on Chrome
+		if (component_block) {
+			if (this.isHiddenBlock()) {
+				const handler = () => {
+					this.getCheckboxThatShowsBlock()?.removeEventListener(
+						"change",
+						handler
+					);
+					setTimeout(() => this.init(), 1);
+				};
+				this.getCheckboxThatShowsBlock()?.addEventListener(
+					"change",
+					handler
+				);
+			} else {
+				await this.init();
+			}
+		} else {
+			await this.init();
+		}
+	}
+
+	async startMDE() {
+		if (this.mdeStarted) {
+			return;
+		}
+		this.sm = new (SimpleMDE as any)({
+			element: this.element,
+			autoDownloadFontAwesome: false,
+			spellChecker: false,
+			hideIcons: ["image", "preview", "side-by-side"],
+			status: ["words"],
+			autosave: { enabled: false },
+			forceSync: true, // for autosubmit to work
+			initialValue: this.element.value,
+		}) as simplemde;
+		// this.element.closest(".grow-wrap").setAttribute("data-turbo-permanent", "");
+		this.sm.codemirror.on("change", () => {
+			this.element.dispatchEvent(new Event("input"));
+		});
+		this.setupRefreshOnShow();
+		this.resizeObserver = new ResizeObserver(() => {
+			this.sm.codemirror.refresh();
+		});
+		const wrapper = (this.sm as any).element.closest(
+			".grow-wrap"
+		) as HTMLDivElement;
+		this.resizeObserver.observe(wrapper);
+		document.addEventListener(
+			"turbo:before-morph-element",
+			function (event: BeforeUnloadEvent) {
+				const target = event.target as HTMLDivElement;
+				// disallow morphing, but allow removing
+				if (
+					target == wrapper &&
+					(event as any).detail.newElement !== undefined
+				) {
+					event.preventDefault();
+				}
+			}
+		);
+		this.mdeStarted = true;
+	}
+
+	async init() {
+		this.intersectionObserver = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.intersectionRatio > 0.2) {
+						this.startMDE();
+					}
+				});
+			},
+			{
+				root: this.element.closest(".component-arguments"),
+				rootMargin: "0px",
+				threshold: 0.25,
+			}
+		);
+		this.intersectionObserver.observe(this.element);
+	}
+
+	isHiddenBlock() {
+		return !this.getCheckboxThatShowsBlock()?.checked;
+	}
+
+	isInsideComponentBlock(): false | HTMLDivElement {
+		return this.element.closest(".jdd-editor__component-block") as
+			| HTMLDivElement
+			| false;
+	}
+
+	getCheckboxThatShowsBlock(): HTMLInputElement | null {
+		const block = this.isInsideComponentBlock();
+		if (!block) {
+			return null;
+		}
+		return block.querySelector(".component-collapse-toggle");
+	}
+
+	setupRefreshOnShow() {
+		this.checkboxHandler = (e) => {
+			const target = e.target as HTMLInputElement;
+			if (target.checked) {
+				this.sm.codemirror.refresh();
+			}
+		};
+		this.getCheckboxThatShowsBlock()?.addEventListener(
+			"change",
+			this.checkboxHandler
+		);
+	}
+
+	disconnect() {
+		console.log("disconnecting", this.element);
+		this.getCheckboxThatShowsBlock()?.removeEventListener(
+			"change",
+			this.checkboxHandler
+		);
+		this.element
+			.closest(".grow-wrap")
+			?.removeAttribute("data-turbo-permanent");
+		this.resizeObserver?.unobserve((this.sm as any).element as HTMLElement);
+		this.sm.toTextArea();
+	}
+}

package/src/controllers/refresh-on-ts-changes.stimulus.ts

@@ -0,0 +1,112 @@
+import { Controller } from "stimulus";
+
+const APP_DOWN_ERROR_MESSAGE = "App is currently down";
+
+const sleep = (time: number) =>
+	new Promise((resolve) => {
+		setTimeout(resolve, time);
+	});
+
+async function get_status(): Promise<{ started_at: number; status: string }> {
+	const r = await fetch("/status.json");
+	// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+	return (await r.json()) as { started_at: number; status: string };
+}
+
+async function wait_for_run_id_to_change() {
+	let first_timestamp: number;
+	try {
+		const { started_at } = await get_status();
+		first_timestamp = started_at;
+	} catch (e) {
+		await wait_for_app_to_be_stable();
+		return;
+	}
+
+	if (!first_timestamp) {
+		throw new Error(APP_DOWN_ERROR_MESSAGE);
+	}
+
+	// eslint-disable-next-line no-constant-condition
+	while (true) {
+		// eslint-disable-next-line no-await-in-loop
+		const { started_at } = await get_status().catch(() => ({
+			started_at: first_timestamp,
+		}));
+		if (started_at !== first_timestamp) {
+			return;
+		}
+		// eslint-disable-next-line no-await-in-loop
+		await sleep(100);
+	}
+}
+
+async function wait_for_app_to_be_stable(n = 3) {
+	// eslint-disable-next-line no-console
+	console.log("Waiting for app to be stable....");
+	let counter = 0;
+	// eslint-disable-next-line no-constant-condition
+	while (true) {
+		// eslint-disable-next-line no-await-in-loop
+		const { status } = await get_status().catch(() => ({
+			status: "down",
+		}));
+		if (status == "running") {
+			// eslint-disable-next-line no-console
+			console.log(counter);
+			counter++;
+		} else {
+			counter = 0;
+		}
+		if (counter == n) {
+			return;
+		}
+		// eslint-disable-next-line no-await-in-loop
+		await sleep(100);
+	}
+}
+
+async function wait_for_app_restart() {
+	try {
+		await wait_for_run_id_to_change();
+	} catch (e) {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+		if (e.message !== APP_DOWN_ERROR_MESSAGE) {
+			throw e;
+		}
+	}
+	await wait_for_app_to_be_stable();
+}
+
+export default class RefreshOnTSChanges extends Controller {
+	socket: WebSocket;
+
+	async connect() {
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const { port, watch } = (await fetch("/dist/notifier.json").then((r) =>
+			r.json()
+		)) as { port: number; watch: boolean };
+		if (!watch) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				"Not running auto refresh on watch because the build process is not running in watch mode"
+			);
+			return;
+		}
+		const socket = new WebSocket(`ws://localhost:${port}`);
+		socket.onmessage = async (message) => {
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			const data = message.data as unknown;
+			if (typeof data === "string" && data.endsWith("-ts")) {
+				document.documentElement.classList.add("restarting");
+				await wait_for_app_restart();
+				document.documentElement.dispatchEvent(new Event("ts-rebuilt"));
+				document.documentElement.classList.remove("restarting");
+			}
+		};
+	}
+
+	async disconnect() {
+		this.socket.close();
+	}
+}

package/src/controllers/refresh-styles.stimulus.ts

@@ -0,0 +1,70 @@
+import { Controller } from "stimulus";
+
+function make_new_link(href: string) {
+	const new_link = document.createElement("link");
+	new_link.rel = "stylesheet";
+	new_link.href = href.split("?")[0] + `?${Math.random()}+${Math.random()}`;
+	new_link.type = "text/css";
+	return new_link;
+}
+
+function refresh_css() {
+	const actual_hrefs = new Set(
+		Array.from(document.querySelectorAll("head link[rel=stylesheet]")).map(
+			(e) => e?.getAttribute("href")?.split("?")[0]
+		)
+	);
+	return actual_hrefs.forEach((href: string) => {
+		const new_link = make_new_link(href);
+		const to_delete_after_load = Array.from(
+			document.querySelectorAll(
+				`head link[rel=stylesheet][href^="${href}"]`
+			)
+		);
+		new_link.onload = function () {
+			// delay to prevent flicker
+			setTimeout(() => {
+				to_delete_after_load.forEach((to_remove) => {
+					to_remove.remove();
+				});
+			}, 100);
+		};
+		document.querySelector("head")?.appendChild(new_link);
+	});
+}
+
+export default class RefreshStyles extends Controller {
+	socket: WebSocket;
+
+	async connect() {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		const { port } = await fetch("/dist/notifier.json").then((r) =>
+			r.json()
+		);
+		try {
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+
+			this.socket = new WebSocket(`ws://localhost:${port as number}`);
+		} catch (e) {
+			console.error(e);
+			// eslint-disable-next-line no-console
+			console.warn(
+				"Not enabling auto style refresh due to the above error"
+			);
+		}
+		this.socket.onmessage = async (message) => {
+			if (message.data === "css") {
+				refresh_css();
+			}
+		};
+		document.documentElement.addEventListener("turbo:morph", refresh_css);
+	}
+
+	async disconnect() {
+		this.socket.close();
+		document.documentElement.removeEventListener(
+			"turbo:morph",
+			refresh_css
+		);
+	}
+}

package/src/controllers/submit-on-input.stimulus.ts

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-unsafe-assignment */
+import { Controller } from "stimulus";
+import { throttle } from "throttle-debounce";
+
+export default class SubmitOnInput extends Controller<HTMLTextAreaElement> {
+	sendValues: () => void;
+
+	connect() {
+		this.sendValues = throttle(
+			500,
+			() => {
+				const component_index =
+					this.element
+						.closest(".jdd-editor__component-block")
+						?.getAttribute("data-component-index") || null;
+				if (component_index == null) {
+					// not an input within a JDD component editor
+					this.element.closest("form")?.requestSubmit();
+					return;
+				}
+
+				// During this automatic submit, we force idiomorph to only update the components edited by this input.
+				const updateOnlyPreview = (event: BeforeUnloadEvent) => {
+					const target = event.target as HTMLDivElement;
+					if (
+						[
+							"component-arguments",
+							"component-preview__header",
+						].includes(target.id) ||
+						(target.parentElement?.classList.contains(
+							"jdd-container"
+						) &&
+							!target.classList.contains(
+								"component-number-" + component_index
+							))
+					) {
+						event.preventDefault();
+					}
+				};
+				document.addEventListener(
+					"turbo:before-morph-element",
+					updateOnlyPreview
+				);
+				this.element.closest("form")?.requestSubmit();
+				const after_submit = () => {
+					document.removeEventListener(
+						"turbo:before-morph-element",
+						updateOnlyPreview
+					);
+					document.removeEventListener("turbo:morph", after_submit);
+				};
+				document.addEventListener("turbo:morph", after_submit);
+			},
+			{ noTrailing: false }
+		);
+	}
+
+	makePermanent() {
+		// this prevents morphing from overwriting the input value with previous half-dane values - https://github.com/hotwired/turbo/issues/1199
+		this.element.setAttribute("data-turbo-permanent", "");
+	}
+
+	makeNotPermanent() {
+		this.element.removeAttribute("data-turbo-permanent");
+	}
+}

package/src/controllers/toast.stimulus.ts

@@ -0,0 +1,15 @@
+import { Controller } from "stimulus";
+
+export default class Toast extends Controller {
+	connect() {
+		console.log("connect");
+		this.element.addEventListener(
+			"animationend",
+			({ animationName }: AnimationEvent) => {
+				if (animationName == "fade-out") {
+					this.element.parentElement?.removeChild(this.element);
+				}
+			}
+		);
+	}
+}

package/src/edit-jdd-field.ts

@@ -0,0 +1,127 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type Router from "@koa/router";
+import type { JDDocumentContainer, RawJDDocument } from "@sealcode/jdd";
+import {
+	documentContainerFromStorage,
+	documentToParsed,
+	documentToStorage,
+} from "@sealcode/jdd";
+import type { Context } from "koa";
+import type { Collection, CollectionItem, FieldNames } from "sealious";
+import JDDCreator from "./jdd-creator.js";
+import type { JDDPageState } from "./jdd-page.js";
+import { tempstream } from "tempstream";
+
+export abstract class EditJDDField<C extends Collection> extends JDDCreator {
+	async getID(ctx: Context): Promise<string> {
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-unsafe-member-access
+		const id = ctx.params["id"] as string;
+		if (!id) {
+			throw new Error("Missing URL  parameter: " + "id");
+		}
+		return id;
+	}
+
+	abstract getCollection(ctx: Context): C;
+
+	async getItem(ctx: Context): Promise<CollectionItem<C>> {
+		const {
+			items: [item],
+		} = await this.getCollection(ctx)
+			.list(ctx.$context)
+			.ids([await this.getID(ctx)])
+			.fetch();
+		if (!item) {
+			throw new Error(
+				"Couldn't get item of id " + (await this.getID(ctx))
+			);
+		}
+		return item;
+	}
+
+	abstract getJDDFieldName(): FieldNames<C["fields"]>;
+
+	mount(router: Router, path: string) {
+		super.mount(router, path);
+
+		router.post(path + "save/", async (ctx) => {
+			const { state } = await this.extractState(ctx);
+			const item = await this.getItem(ctx);
+
+			item.set(
+				this.getJDDFieldName(),
+				(
+					await documentToStorage(
+						this.registry,
+						this.makeJDDContext(ctx),
+						{
+							value: state.components,
+						} as unknown as JDDocumentContainer<"parsed">
+					)
+				).value as any
+			);
+			await item.save(ctx.$context);
+			ctx.type = "html";
+			ctx.status = 422;
+			if (!state.messages) {
+				state.messages = [];
+			}
+			state.messages.push("Saved!");
+			ctx.body = this.render(ctx, state);
+		});
+	}
+
+	async renderHeader(_ctx: Context, _item: CollectionItem<C>) {
+		return /* HTML */ `<h1>Edit JDD</h1>`;
+	}
+
+	async renderPreParameterButtons(ctx: Context) {
+		const item = await this.getItem(ctx);
+		return tempstream`<div>${this.renderHeader(ctx, item)}</div>`;
+	}
+
+	renderParameterButtons(state: JDDPageState) {
+		{
+			/*The below button has to be here in order for it to be the default behavior */
+		}
+		return `<div class="jdd-editor__toolbar">
+				<input type="submit" value="Preview" />
+				<select name="component">
+					${Object.keys(this.getRegistryComponents())
+						.map((cmp) => `<option value="${cmp}">${cmp}</option>`)
+						.join("")}
+				</select>
+				${this.makeActionButton(state, {
+					action: "add_component",
+					label: "Add component",
+				})}
+				<input type="submit" formaction="./save/" value="zapisz" />
+			</div>`;
+	}
+
+	async getInitialState(ctx: Context) {
+		const article = await this.getItem(ctx);
+		const parsed_document = await documentToParsed(
+			this.registry,
+			this.makeJDDContext(ctx),
+			documentContainerFromStorage(
+				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+				(article.get(this.getJDDFieldName()) as RawJDDocument) || []
+			)
+		);
+		return {
+			components: parsed_document.value.map((e) => ({
+				...e,
+				open: true,
+			})),
+		};
+	}
+
+	// uncomment to create whitelist of allowed components
+	// getAllowedComponents() {
+	// 	return ["nice-box"];
+	// }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./edit-jdd-field.js";
+export * from "./components.sreact.js";

package/src/inputs/component-input-enum.ts

@@ -0,0 +1,36 @@
+import type { Enum } from "@sealcode/jdd";
+import { printArgPath } from "./print-arg-path.js";
+
+export function ComponentInputEnum<State, S extends string, T extends Enum<S>>({
+	arg_path,
+	arg,
+	value,
+	onchange,
+}: {
+	state: State;
+	arg_path: string[];
+	arg: T;
+	value: string;
+	onchange?: string;
+}) {
+	return /* HTML */ `<div id=${`component-input-enum-${arg_path.join("-")}`}>
+		<label>
+			${arg_path.at(-1) || ""}
+			<select
+				name="${`$${printArgPath(arg_path)}`}"
+				onchange="${onchange || ""}"
+			>
+				${arg.values
+					.map(
+						(v: S) => /* HTML */ `<option
+							value="${v}"
+							${value == v ? "selected" : ""}
+						>
+							${v}
+						</option>`
+					)
+					.join("")}
+			</select>
+		</label>
+	</div>`;
+}

package/src/inputs/component-input-image.ts

@@ -0,0 +1,70 @@
+import type { Context } from "koa";
+import type { FilePointer } from "@sealcode/file-manager";
+import type { Image, JDDContext } from "@sealcode/jdd";
+import type { StatefulPage } from "@sealcode/sealgen";
+import type { ComponentPreviewActions } from "../component-preview-actions.js";
+import type { JDDPageState } from "../jdd-page.js";
+import { tempstream } from "tempstream";
+import { printArgPath } from "./print-arg-path.js";
+
+export function ComponentInputImage<State extends JDDPageState>({
+	arg_path,
+	arg,
+	value,
+	ctx,
+	page,
+	state,
+	makeJDDContext,
+}: {
+	state: State;
+	arg_path: string[];
+	arg: Image;
+	value: FilePointer | null;
+	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+	ctx: Context;
+	makeJDDContext: (ctx: Context) => JDDContext;
+}): JSX.Element {
+	const jdd_context = makeJDDContext(ctx);
+	return tempstream/* HTML */ `<div style="margin-bottom: 10px">
+		<label
+			style="display: flex; align-items: center; column-gap: 10px;"
+			data-controller="input-image-preview"
+		>
+			${arg_path.at(-1) || ""}
+			<div class="image-preview-container">
+				${value &&
+				jdd_context.render_image(value, {
+					container: {
+						width: 40,
+						height: 40,
+						objectFit: "cover",
+					},
+					crop: { width: 40, height: 40 },
+					style: "height: 40px; width: 40px;",
+					alt: "",
+				})}
+			</div>
+
+			<input
+				type="file"
+				name="${`$${printArgPath(arg_path)}.new`}"
+				value=""
+				autocomplete="off"
+				data-action="change->input-image-preview#handleChange"
+				${arg.hasParent("list") ? "multiple" : ""}
+			/>
+		</label>
+		<div>
+			<input type="hidden" name="${`$${printArgPath(arg_path)}.old`}"
+			value={value?.token || ""} autocomplete="off" />
+		</div>
+		${page.makeActionButton(
+			state,
+			{
+				action: "remove_file",
+				label: "❌",
+			},
+			arg_path
+		)}
+	</div>`;
+}