@sealcode/jdd-editor 0.2.1 → 0.2.4

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

@@ -20,6 +20,11 @@ export default class JSONEditor extends Controller<HTMLTextAreaElement> {
 	cm: any;
 	saving = false;
 
+	getSessionStorageKey() {
+		const page_url = document.location.pathname;
+		return `jdd-editor-autosave__${page_url}`;
+	}
+
 	addCSS() {
 		const tag = document.querySelector(`head #${CSS_ID}`);
 		if (!tag) {
@@ -32,6 +37,18 @@ export default class JSONEditor extends Controller<HTMLTextAreaElement> {
 		}
 	}
 
+	resetValue() {
+		sessionStorage.setItem(
+			this.getSessionStorageKey(),
+			this.element.innerHTML
+		);
+		if (!this.saving) {
+			if (this.cm.getValue() != this.element.innerHTML) {
+				this.cm.setValue(this.element.innerHTML);
+			}
+		}
+	}
+
 	async addJS(js_id: string, js_path: string) {
 		return new Promise<void>((resolve, reject) => {
 			const once_loaded = (e: MouseEvent) => {
@@ -60,6 +77,20 @@ export default class JSONEditor extends Controller<HTMLTextAreaElement> {
 	}
 
 	async connect() {
+		const autosave = sessionStorage.getItem(this.getSessionStorageKey());
+		if (autosave) {
+			this.element.innerHTML = autosave;
+			const action = this.element.form?.getAttribute("action");
+			if (!action) return;
+
+			this.element.form?.setAttribute(
+				"action",
+				"./?action=replace_state&action_args=W10%3D"
+			);
+			this.element.form?.requestSubmit();
+			this.element.form?.setAttribute("action", action);
+		}
+
 		if (this.element.parentNode?.querySelector(".CodeMirror")) {
 			//already loaded, quit;
 			return;
@@ -84,16 +115,7 @@ export default class JSONEditor extends Controller<HTMLTextAreaElement> {
 		// 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);
-				}
-			}
+			this.resetValue();
 		});
 		observer.observe(this.element, {
 			characterData: true,
@@ -101,16 +123,7 @@ export default class JSONEditor extends Controller<HTMLTextAreaElement> {
 		});
 
 		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.resetValue();
 		});
 		this.element
 			.closest("details")

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

@@ -0,0 +1,38 @@
+import type { Context } from "koa";
+import type { Color, 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";
+import { htmlEscape } from "escape-goat";
+
+export function ComponentInputColor<State extends JDDPageState>({
+	arg_path,
+	value,
+	onchange,
+}: {
+	state: State;
+	arg_path: string[];
+	arg: Color;
+	value: string | null;
+	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+	ctx: Context;
+	onchange?: string;
+	makeJDDContext: (ctx: Context) => JDDContext;
+}): JSX.Element {
+	return tempstream/* HTML */ `<div style="margin-bottom: 10px">
+		<div>
+			<label>
+				${arg_path.at(-1) || ""}
+				<input
+					type="color"
+					name="${`$${printArgPath(arg_path)}`}"
+					value="${htmlEscape(value || "#000000")}"
+					autocomplete="off"
+					onchange="${onchange || ""}"
+				/>
+			</label>
+		</div>
+	</div>`;
+}

package/src/inputs/component-input.ts

@@ -1,7 +1,7 @@
 import { printArgPath } from "./print-arg-path.js";
 import type { Context } from "koa";
 import type { ComponentArgument, JDDContext, TableData } from "@sealcode/jdd";
-import { NestedComponent, SingleReference } from "@sealcode/jdd";
+import { NestedComponent, Color, SingleReference } from "@sealcode/jdd";
 import {
 	ComponentArguments,
 	Enum,
@@ -22,7 +22,7 @@ import type { FilePointer } from "@sealcode/file-manager";
 import { ComponentInputSingleReference } from "./component-input-single-reference.js";
 import { is, predicates } from "@sealcode/ts-predicates";
 import { tempstream } from "tempstream";
-
+import { ComponentInputColor } from "./component-input-color.js";
 export const actionName = "Components";
 const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
 
@@ -48,6 +48,19 @@ export async function ComponentInput<State extends JDDPageState, T>({
 	if (value === undefined) {
 		value = await arg.getEmptyValue(makeJDDContext(ctx));
 	}
+	if (arg instanceof Color) {
+		return ComponentInputColor({
+			ctx,
+			state,
+			arg_path,
+			arg,
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			value: value as string,
+			page,
+			onchange: page.rerender(),
+			makeJDDContext,
+		});
+	}
 	if (arg instanceof List) {
 		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 		return ComponentInputList({

package/src/jdd-page.ts

@@ -65,22 +65,9 @@ export default abstract class JDDPage extends StatefulPage<
 		return this.registry.getAll();
 	}
 
-	async getInitialState(ctx: Context) {
-		const all_components = Object.entries(this.getRegistryComponents());
-		const first_component = all_components[0];
-		if (!first_component) {
-			throw new Error("No defined components!");
-		}
-		const [component_name, component] = first_component;
+	async getInitialState(ctx: Context): Promise<JDDPageState> {
 		const initial_state = {
-			components: [
-				{
-					component_name: component_name,
-					args: await component.getExampleValues(
-						this.makeJDDContext(ctx)
-					),
-				},
-			],
+			components: [],
 		};
 		return initial_state;
 	}

package/.nyc_output/2ad4e34c-cebb-4299-9698-08eccbbe71f7.json

@@ -1 +0,0 @@
-{}

package/.nyc_output/71f2685b-e2c9-4db2-9f31-0dbdcacfcea1.json

@@ -1 +0,0 @@
-{}