@sealcode/jdd-editor 0.1.0

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

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { Context } from "koa";
+import type { ComponentArgument, JDDContext, List } from "@sealcode/jdd";
+import type { JDDPageState } from "../jdd-page.js";
+import type { StatefulPage } from "@sealcode/sealgen";
+import { ComponentInput } from "./component-input.js";
+import type { ComponentPreviewActions } from "../component-preview-actions.js";
+import { tempstream } from "tempstream";
+
+export async function ComponentInputList<
+	State extends JDDPageState,
+	T extends ComponentArgument<unknown>
+>({
+	state,
+	ctx,
+	arg_path,
+	arg,
+	value,
+	page,
+	makeJDDContext,
+	...rest
+}: {
+	state: State;
+	ctx: Context;
+	arg_path: string[];
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	arg: List<T, any>;
+	value: T[];
+	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+	makeJDDContext: (ctx: Context) => JDDContext;
+	makeAssetURL: (asset: string) => string;
+}): Promise<string> {
+	if (!value) {
+		value = [];
+	}
+	return tempstream/* HTML */ `<fieldset
+		id="${`component-input-list-${arg_path.join("-")}`}"
+	>
+		<legend>${arg_path.at(-1)!}</legend>
+		${value.map(
+			(value, i, all_values) =>
+				tempstream`<div style="display: flex">
+					${ComponentInput({
+						...rest,
+						ctx,
+						state,
+						arg_path: [...arg_path, i.toString()],
+						arg: arg.item_type,
+						value,
+						page,
+						makeJDDContext,
+					})}
+					${page.makeActionButton(
+						state,
+						{
+							action: "move_array_item_down",
+							label: "↓",
+							disabled: i == all_values.length - 1,
+						},
+						arg_path,
+						i
+					)}
+					${page.makeActionButton(
+						state,
+						{
+							action: "move_array_item_up",
+							label: "↑",
+							disabled: i == 0,
+						},
+						arg_path,
+						i
+					)}
+
+					${page.makeActionButton(
+						state,
+						{ action: "remove_array_item", label: "❌" },
+						arg_path,
+						i
+					)}
+				</div>`
+		)}
+		${page.makeActionButton(
+			state,
+			{
+				action: "add_array_item",
+				label: "➕",
+			},
+			arg_path
+		)}
+	</fieldset>`;
+}

package/src/inputs/component-input-single-reference.ts

@@ -0,0 +1,45 @@
+import type { Context } from "koa";
+import type { JDDContext, SingleReference } from "@sealcode/jdd";
+import { printArgPath } from "./print-arg-path.js";
+
+export async function ComponentInputSingleReference<
+	State,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	T extends SingleReference<any>
+>({
+	ctx,
+	arg_path,
+	arg,
+	value,
+	onchange,
+	makeJDDContext,
+}: {
+	ctx: Context;
+	state: State;
+	arg_path: string[];
+	arg: T;
+	value: string;
+	onchange?: string;
+	makeJDDContext: (ctx: Context) => JDDContext;
+}): Promise<string> {
+	const values = await arg.getValues(makeJDDContext(ctx));
+	const ret = `<div>
+			<label>
+				${arg_path.at(-1) || ""}
+				<select name="${`$${printArgPath(arg_path)}`}" onchange="${onchange}">
+					${values
+						.sort((v1, v2) => (v1.label > v2.label ? 1 : -1))
+						.map(
+							(v) => /* HTML */ `<option
+								value="${v.value}"
+								${value == v.value ? "selected" : ""}
+							>
+								${v.label}
+							</option>`
+						)
+						.join("")}
+				</select>
+			</label>
+		</div>`;
+	return ret;
+}

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

@@ -0,0 +1,51 @@
+import type { Context } from "koa";
+import type { ComponentArgument, JDDContext, Structured } from "@sealcode/jdd";
+import type { StatefulPage } from "@sealcode/sealgen";
+import { ComponentInput } from "./component-input.js";
+import type { JDDPageState } from "../jdd-page.js";
+import type { ComponentPreviewActions } from "../component-preview-actions.js";
+
+export async function ComponentInputStructured<
+	T extends Structured<Record<string, ComponentArgument<unknown>>>
+>({
+	state,
+	ctx,
+	arg_path,
+	arg,
+	value,
+	page,
+	...rest
+}: {
+	state: JDDPageState;
+	ctx: Context;
+	arg_path: string[];
+	arg: T;
+	value: Record<string, unknown>;
+	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+	makeJDDContext: (ctx: Context) => JDDContext;
+	makeAssetURL: (asset: string) => string;
+}) {
+	return /* HTML */ `<fieldset
+		id="${`component-input-structured-${arg_path.join("-")}`}"
+	>
+		<legend>{arg_path.at(-1)}</legend>
+		${(
+			await Promise.all(
+				Object.entries(arg.structure).map(async ([arg_name, arg]) => {
+					const ret = `<div>
+						${await ComponentInput({
+							ctx,
+							state,
+							arg_path: [...arg_path, arg_name],
+							arg,
+							value: value[arg_name],
+							page,
+							...rest,
+						})}
+					</div>`;
+					return ret;
+				})
+			)
+		).join("")}
+	</fieldset>`;
+}

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

@@ -0,0 +1,262 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { JDDContext, Table, TableData } from "@sealcode/jdd";
+import { Markdown } from "@sealcode/jdd";
+import { isTableHeader } from "@sealcode/jdd";
+import type { StatefulPage } from "@sealcode/sealgen";
+import type { Context } from "koa";
+import { tempstream } from "tempstream";
+import { ComponentInput } from "./component-input.js";
+import type { ComponentPreviewActions } from "../component-preview-actions.js";
+import type { JDDPageState } from "../jdd-page.js";
+
+export async function ComponentInputTable<
+	State extends JDDPageState,
+	CellType,
+	HeaderType
+>({
+	state,
+	arg_path,
+	ctx,
+	arg,
+	value,
+	page,
+	makeJDDContext,
+	makeAssetURL,
+}: {
+	state: State;
+	ctx: Context;
+	arg_path: string[];
+	arg: Table<CellType, HeaderType>;
+	value: TableData<CellType, HeaderType>;
+	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+	makeJDDContext: (ctx: Context) => JDDContext;
+	makeAssetURL: (asset: string) => string;
+}): Promise<string> {
+	if (!value) {
+		value = await arg.getEmptyValue(makeJDDContext(ctx));
+	}
+
+	const show_paste =
+		arg.cell_type instanceof Markdown &&
+		arg.header_type instanceof Markdown;
+
+	return tempstream/* HTML */ `<fieldset>
+		<legend>${arg_path.at(-1)!}</legend>
+		<div>
+			${show_paste
+				? /* HTML */ `<input
+						type="button"
+						value="paste"
+						placeholder="paste table here"
+						data-jdd-table-paste-argpath-value="${arg_path.join(
+							"."
+						)}"
+						data-controller="jdd-table-paste"
+				  />`
+				: ""}
+			<table
+				class="jdd-component-input--table"
+				style="position: relative; /* necessary for sticky th*/"
+			>
+				<tbody>
+					<tr>
+						<td></td>
+						${[...Array(arg.getColumnsCount(value)).keys()]
+							.map(
+								(column_index) => /* HTML */ `<th
+									class="sticky sticky--top subdued"
+								>
+									${page.makeActionButton(
+										state,
+										{
+											action: "remove_table_column",
+											label: "Remove column",
+											content: /* HTML */ `<img
+												width="20"
+												height="20"
+												src="${makeAssetURL(
+													"icons/table-delete-column.svg"
+												)}"
+											/>`,
+										},
+										arg_path,
+										column_index
+									)}
+									${column_index >=
+									arg.getColumnsCount(value) - 1
+										? ""
+										: page.makeActionButton(
+												state,
+												{
+													action: "move_table_column_right",
+													label: "Move column to the right",
+													content: /* HTML */ `<img
+														width="20"
+														height="20"
+														src="${makeAssetURL(
+															"icons/table-move-column-right.svg"
+														)}"
+													/>`,
+												},
+												arg_path,
+												column_index
+										  )}
+								</th>`
+							)
+							.join("")}
+					</tr>
+					${value.rows.map(
+						(row, row_index) => tempstream/* HTML */ `<tr>
+							<td class="sticky sticky--left subdued">
+								<div
+									style="display: flex; flex-flow: column; row-gap: 5px;"
+								>
+									${page.makeActionButton(
+										state,
+										{
+											action: "remove_table_row",
+											label: "Remove row",
+											content: /* HTML */ `<img
+												width="20"
+												height="20"
+												src="${makeAssetURL(
+													"icons/table-delete-row.svg"
+												)}"
+											/>`,
+										},
+										arg_path,
+										row_index
+									)}
+									${page.makeActionButton(
+										state,
+										{
+											action: "move_table_row_down",
+											label: "Move this row down",
+											content: /* HTML */ `<img
+												width="20"
+												height="20"
+												src="${makeAssetURL(
+													"icons/table-move-row-down.svg"
+												)}"
+											/>`,
+										},
+										arg_path,
+										row_index
+									)}
+								</div>
+							</td>
+							${isTableHeader(row)
+								? /* HTML */ tempstream`<th
+										colspan="${arg.getColumnsCount(value).toString()}"
+								  >
+										${ComponentInput({
+											state,
+											ctx,
+											arg_path: [
+												...arg_path,
+												"rows",
+												row_index.toString(),
+												"header_content",
+											],
+											arg: arg.header_type,
+											value: row.header_content,
+											page,
+											makeJDDContext,
+											makeAssetURL,
+										})}
+								  </th>`
+								: row.cells.map(
+										(
+											cell,
+											cell_index
+										) => tempstream/* HTML */ `<td>
+											${ComponentInput({
+												ctx,
+												state,
+												arg_path: [
+													...arg_path,
+													"rows",
+													row_index.toString(),
+													"cells",
+													cell_index.toString(),
+												],
+												arg: arg.cell_type,
+												value: cell,
+												page,
+												makeJDDContext,
+												makeAssetURL,
+											})}
+										</td>`
+								  )}
+							${row_index == 0
+								? /* HTML */ `<td
+										class="subdued"
+										rowspan="${value.rows.length.toString()}"
+								  >
+										${page.makeActionButton(
+											state,
+											{
+												action: "add_table_column",
+												label: "Add column",
+												content: /* HTML */ `<img
+													width="20"
+													height="20"
+													src="${makeAssetURL(
+														"icons/table-add-column-right.svg"
+													)}"
+												/>`,
+											},
+											arg_path
+										)}
+								  </td>`
+								: ""}
+						</tr>`
+					)}
+					<tr>
+						<td
+							class="subdued"
+							colspan="{(arg.getColumnsCount(value)"
+							+
+							1).toString()}
+						>
+							${page.makeActionButton(
+								state,
+								{
+									action: "add_table_row",
+									label: "Add table row",
+									content: /* HTML */ `<img
+										width="20"
+										height="20"
+										src="${makeAssetURL(
+											"icons/table-add-row-below.svg"
+										)}"
+									/>`,
+								},
+								arg_path,
+								arg.getColumnsCount(value),
+								undefined
+							)}
+							${page.makeActionButton(
+								state,
+								{
+									action: "add_table_row",
+									label: "Add table header",
+									content: /* HTML */ `<img
+										width="20"
+										height="20"
+										src="${makeAssetURL(
+											"icons/table-add-column-header-below.svg"
+										)}"
+									/>`,
+								},
+								arg_path,
+								arg.getColumnsCount(value),
+								"header"
+							)}
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</fieldset>`;
+}

package/src/inputs/component-input.ts

@@ -0,0 +1,158 @@
+import { printArgPath } from "./print-arg-path.js";
+import type { Context } from "koa";
+import type { ComponentArgument, JDDContext, TableData } from "@sealcode/jdd";
+import { SingleReference } from "@sealcode/jdd";
+import {
+	ComponentArguments,
+	Enum,
+	Image,
+	List,
+	Structured,
+	Table,
+} from "@sealcode/jdd";
+import { ComponentInputStructured } from "./component-input-structured.js";
+import type { StatefulPage } from "@sealcode/sealgen";
+import type { ComponentPreviewActions } from "../component-preview-actions.js";
+import { ComponentInputList } from "./component-input-list.js";
+import type { JDDPageState } from "../jdd-page.js";
+import { ComponentInputEnum } from "./component-input-enum.js";
+import { ComponentInputImage } from "./component-input-image.js";
+import { ComponentInputTable } from "./component-input-table.js";
+import type { FilePointer } from "@sealcode/file-manager";
+import { ComponentInputSingleReference } from "./component-input-single-reference.js";
+import { is, predicates } from "@sealcode/ts-predicates";
+
+export const actionName = "Components";
+const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
+
+export async function ComponentInput<State extends JDDPageState, T>({
+	ctx,
+	state,
+	arg_path,
+	arg,
+	value,
+	page,
+	makeJDDContext,
+	makeAssetURL,
+}: {
+	state: State;
+	ctx: Context;
+	arg_path: string[];
+	arg: ComponentArgument<T>;
+	value: T;
+	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
+	makeJDDContext: (ctx: Context) => JDDContext;
+	makeAssetURL: (asset: string) => string;
+}): Promise<string> {
+	if (value === undefined) {
+		value = await arg.getEmptyValue(makeJDDContext(ctx));
+	}
+	if (arg instanceof List) {
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		return ComponentInputList({
+			ctx,
+			state,
+			arg_path,
+			arg,
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			value: value as T[],
+			page,
+			makeJDDContext,
+			makeAssetURL,
+		});
+	}
+
+	const argType = arg.getTypeName();
+	const isUrlAbsolute =
+		arg instanceof ComponentArguments.URL && arg.urlType === "absolute";
+	const inputType = isUrlAbsolute ? "url" : "text";
+
+	if (arg instanceof Structured) {
+		return ComponentInputStructured({
+			ctx,
+			state,
+			arg_path,
+			arg,
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			value: value as Record<string, unknown>,
+			page,
+			makeJDDContext,
+			makeAssetURL,
+		});
+	}
+
+	if (arg instanceof SingleReference) {
+		return ComponentInputSingleReference({
+			ctx,
+			state,
+			arg_path,
+			arg,
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			value: value as string,
+			onchange: page.rerender(),
+			makeJDDContext,
+		});
+	}
+
+	if (arg instanceof Enum) {
+		return ComponentInputEnum({
+			state,
+			arg_path,
+			arg,
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			value: value as string,
+			onchange: page.rerender(),
+		});
+	}
+
+	if (arg instanceof Image) {
+		return ComponentInputImage({
+			ctx,
+			state,
+			arg_path,
+			arg,
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			value: value as FilePointer,
+			page,
+			makeJDDContext,
+		});
+	}
+
+	if (arg instanceof Table) {
+		return ComponentInputTable({
+			ctx,
+			state,
+			arg_path,
+			arg,
+			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+			value: value as TableData<unknown, unknown>,
+			page,
+			makeJDDContext,
+			makeAssetURL,
+		});
+	}
+
+	return /* HTML */ `<div>
+		<label>
+			${arg_path.at(-1) || ""}
+			${argType == "markdown"
+				? /* HTML */ `<div class="grow-wrap">
+						<textarea
+							name="${`$${printArgPath(arg_path)}`}"
+							onblur="${page.rerender()}"
+							cols="40"
+							data-controller="markdown-textarea submit-on-input"
+							data-action="autogrow-textarea#autogrow blur->autogrow-textarea#autogrow resize->autogrow-textarea#autogrow submit-on-input#sendValues focus->submit-on-input#makePermanent blur->submit-on-input#makeNotPermanent"
+							autocomplete="off"
+						>
+							${is(value, predicates.string) ? value : ""}
+						</textarea
+						>
+				  </div>`
+				: /* HTML */ `<input type="${inputType}"
+				  name="${`$${printArgPath(arg_path)}`}"
+				  value="${is(value, predicates.string) ? value : ""}" size="40"
+				  ${isUrlAbsolute ? `pattern="${absoluteUrlPattern}"` : ""}" />`}
+		</label>
+	</div>`;
+}

package/src/inputs/print-arg-path.ts

@@ -0,0 +1,3 @@
+export function printArgPath(path: string[]): string {
+	return path.map((e) => `[${e}]`).join("");
+}