@sealcode/jdd-editor 0.2.1 → 0.2.5

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

@@ -0,0 +1,24 @@
+import { tempstream } from "tempstream";
+import { printArgPath } from "./print-arg-path.js";
+
+export function ComponentInputCode({
+	language,
+	value,
+	arg_path,
+}: {
+	value: string;
+	language: string;
+	arg_path: string[];
+}): JSX.Element {
+	return tempstream/* HTML */ `<div class="monaco-wrapper">
+		<div data-controller="monaco" data-language="${language}">
+			<textarea
+				data-monaco-target="textarea"
+				name="$${printArgPath(arg_path)}"
+				style="display: none"
+			>
+${value}
+        </textarea>
+		</div>
+	</div>`;
+}

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,
@@ -9,6 +9,7 @@ import {
 	List,
 	Structured,
 	Table,
+	Code,
 } from "@sealcode/jdd";
 import { ComponentInputStructured } from "./component-input-structured.js";
 import type { StatefulPage } from "@sealcode/sealgen";
@@ -22,7 +23,8 @@ 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 { ComponentInputCode } from "./component-input-code.js";
+import { ComponentInputColor } from "./component-input-color.js";
 export const actionName = "Components";
 const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
 
@@ -48,6 +50,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({
@@ -133,6 +148,14 @@ export async function ComponentInput<State extends JDDPageState, T>({
 		});
 	}
 
+	if (arg instanceof Code) {
+		return ComponentInputCode({
+			language: arg.language,
+			value: is(value, predicates.string) ? value : "",
+			arg_path,
+		});
+	}
+
 	const inputElement = () => {
 		if (arg instanceof ComponentArguments.Number) {
 			return tempstream/* HTML */ ` <input

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;
 	}