@sealcode/jdd-editor 0.2.5 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/jdd-editor",
-	"version": "0.2.5",
+	"version": "0.2.8",
 	"main": "dist/src/index.js",
 	"scripts": {
 		"build": "rm -rf dist && node ./esbuild.cjs",
@@ -29,7 +29,7 @@
 		"esbuild": "^0.14.10",
 		"eslint": "^8.38.0",
 		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-prettier": "^5.5.4",
 		"eslint-plugin-with-tsc-error": "^0.0.8",
 		"fs": "^0.0.1-security",
 		"husky": "^9.1.7",
@@ -37,7 +37,7 @@
 		"mri": "^1.2.0",
 		"nyc": "^15.1.0",
 		"path": "^0.12.7",
-		"prettier": "^2.8.7",
+		"prettier": "^3.6.2",
 		"source-map-support": "^0.5.21",
 		"tiny-glob": "^0.2.9",
 		"ts-node": "^10.9.1",
@@ -47,13 +47,14 @@
 	"types": "./@types/index.d.ts",
 	"dependencies": {
 		"@koa/router": "^13.1.0",
-		"@sealcode/jdd": "^0.8.2",
+		"@sealcode/jdd": "^0.8.3",
 		"@sealcode/monaco-wrapper": "^0.0.3",
 		"@sealcode/sealcodemirror": "^5.70.0-beta5",
 		"@sealcode/sealgen": "^0.19.6",
 		"@types/object-path": "^0.11.4",
 		"@types/throttle-debounce": "^5.0.2",
 		"@types/turndown": "^5.0.5",
+		"highlight.js": "^11.11.1",
 		"object-path": "^0.11.8",
 		"sealious": "^0.21.0",
 		"stimulus": "^3.2.2",

package/src/component-preview-actions.ts

@@ -241,9 +241,8 @@ export const ComponentPreviewActions = (<const>{
 			row = {
 				type: "header",
 				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-				header_content: await argument.header_type.getExampleValue(
-					jdd_context
-				),
+				header_content:
+					await argument.header_type.getExampleValue(jdd_context),
 			};
 		} else {
 			const cells = [];

package/src/components.sreact.ts

@@ -22,14 +22,15 @@ export class JDDDebugger extends JDDPage {
 			>
 				${Object.entries(all_components)
 					.map(
-						([name]) => /* HTML */ `<option
-							value="${name}"
-							${name == state.components[0]?.component_name
-								? "selected"
-								: ""}
-						>
-							${name}
-						</option>`
+						([name]) =>
+							/* HTML */ `<option
+								value="${name}"
+								${name == state.components[0]?.component_name
+									? "selected"
+									: ""}
+							>
+								${name}
+							</option>`
 					)
 					.join("")}
 			</select>

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

@@ -10,7 +10,7 @@ export function ComponentInputCode({
 	language: string;
 	arg_path: string[];
 }): JSX.Element {
-	return tempstream/* HTML */ `<div class="monaco-wrapper">
+	return tempstream /* HTML */ `<div class="monaco-wrapper">
 		<div data-controller="monaco" data-language="${language}">
 			<textarea
 				data-monaco-target="textarea"

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

@@ -21,7 +21,7 @@ export function ComponentInputColor<State extends JDDPageState>({
 	onchange?: string;
 	makeJDDContext: (ctx: Context) => JDDContext;
 }): JSX.Element {
-	return tempstream/* HTML */ `<div style="margin-bottom: 10px">
+	return tempstream /* HTML */ `<div style="margin-bottom: 10px">
 		<div>
 			<label>
 				${arg_path.at(-1) || ""}

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

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

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

@@ -26,7 +26,7 @@ export function ComponentInputImage<State extends JDDPageState>({
 	makeJDDContext: (ctx: Context) => JDDContext;
 }): JSX.Element {
 	const jdd_context = makeJDDContext(ctx);
-	return tempstream/* HTML */ `<div style="margin-bottom: 10px">
+	return tempstream /* HTML */ `<div style="margin-bottom: 10px">
 		<label
 			style="display: flex; align-items: center; column-gap: 10px;"
 			data-controller="input-image-preview"

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

@@ -9,7 +9,7 @@ import { tempstream } from "tempstream";
 
 export async function ComponentInputList<
 	State extends JDDPageState,
-	T extends ComponentArgument<unknown>
+	T extends ComponentArgument<unknown>,
 >({
 	state,
 	ctx,
@@ -33,7 +33,7 @@ export async function ComponentInputList<
 	if (!value) {
 		value = [];
 	}
-	return tempstream/* HTML */ `<fieldset
+	return tempstream /* HTML */ `<fieldset
 		id="${`component-input-list-${arg_path.join("-")}`}"
 	>
 		<legend>${arg_path.at(-1)!}</legend>

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

@@ -5,7 +5,7 @@ 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>
+	T extends SingleReference<any>,
 >({
 	ctx,
 	arg_path,
@@ -30,12 +30,13 @@ export async function ComponentInputSingleReference<
 					${values
 						.sort((v1, v2) => (v1.label > v2.label ? 1 : -1))
 						.map(
-							(v) => /* HTML */ `<option
-								value="${v.value}"
-								${value == v.value ? "selected" : ""}
-							>
-								${v.label}
-							</option>`
+							(v) =>
+								/* HTML */ `<option
+									value="${v.value}"
+									${value == v.value ? "selected" : ""}
+								>
+									${v.label}
+								</option>`
 						)
 						.join("")}
 				</select>

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

@@ -13,7 +13,7 @@ import type { ComponentPreviewActions } from "../component-preview-actions.js";
 export async function ComponentInputStructured<
 	T extends
 		| Structured<Record<string, ComponentArgument<unknown>>>
-		| NestedComponent
+		| NestedComponent,
 >({
 	state,
 	ctx,
@@ -42,7 +42,7 @@ export async function ComponentInputStructured<
 						(Object.keys(
 							makeJDDContext(ctx).registry.getAll()
 						)[0] as string)
-			  );
+				);
 
 	return /* HTML */ `<fieldset
 		id="${`component-input-structured-${arg_path.join("-")}`}"

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

@@ -12,7 +12,7 @@ import type { JDDPageState } from "../jdd-page.js";
 export async function ComponentInputTable<
 	State extends JDDPageState,
 	CellType,
-	HeaderType
+	HeaderType,
 >({
 	state,
 	arg_path,
@@ -40,7 +40,7 @@ export async function ComponentInputTable<
 		arg.cell_type instanceof Markdown &&
 		arg.header_type instanceof Markdown;
 
-	return tempstream/* HTML */ `<fieldset>
+	return tempstream /* HTML */ `<fieldset>
 		<legend>${arg_path.at(-1)!}</legend>
 		<div>
 			${show_paste
@@ -52,7 +52,7 @@ export async function ComponentInputTable<
 							"."
 						)}"
 						data-controller="jdd-table-paste"
-				  />`
+					/>`
 				: ""}
 			<table
 				class="jdd-component-input--table"
@@ -63,90 +63,92 @@ export async function ComponentInputTable<
 						<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>`
+								(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
+						(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({
@@ -165,52 +167,50 @@ export async function ComponentInputTable<
 											makeAssetURL,
 										})}
 								  </th>`
-								: row.cells.map(
-										(
-											cell,
-											cell_index
-										) => tempstream/* HTML */ `<td>
-											${ComponentInput({
-												ctx,
+									: 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,
-												arg_path: [
-													...arg_path,
-													"rows",
-													row_index.toString(),
-													"cells",
-													cell_index.toString(),
-												],
-												arg: arg.cell_type,
-												value: cell,
-												page,
-												makeJDDContext,
-												makeAssetURL,
-											})}
+												{
+													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>`
-								  )}
-							${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>`
 					)}
 					<tr>
 						<td

package/src/inputs/component-input.ts

@@ -1,30 +1,33 @@
-import { printArgPath } from "./print-arg-path.js";
-import type { Context } from "koa";
+import type { FilePointer } from "@sealcode/file-manager";
 import type { ComponentArgument, JDDContext, TableData } from "@sealcode/jdd";
-import { NestedComponent, Color, SingleReference } from "@sealcode/jdd";
 import {
+	Code,
+	Color,
 	ComponentArguments,
 	Enum,
 	Image,
 	List,
+	NestedComponent,
+	SingleReference,
 	Structured,
 	Table,
-	Code,
 } from "@sealcode/jdd";
-import { ComponentInputStructured } from "./component-input-structured.js";
 import type { StatefulPage } from "@sealcode/sealgen";
+import { is, predicates } from "@sealcode/ts-predicates";
+import { htmlEscape } from "escape-goat";
+import type { Context } from "koa";
+import { tempstream } from "tempstream";
 import type { ComponentPreviewActions } from "../component-preview-actions.js";
-import { ComponentInputList } from "./component-input-list.js";
 import type { JDDPageState } from "../jdd-page.js";
+import { ComponentInputCode } from "./component-input-code.js";
+import { ComponentInputColor } from "./component-input-color.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 { ComponentInputList } from "./component-input-list.js";
 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";
+import { ComponentInputStructured } from "./component-input-structured.js";
+import { ComponentInputTable } from "./component-input-table.js";
+import { printArgPath } from "./print-arg-path.js";
 export const actionName = "Components";
 const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
 
@@ -118,6 +121,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 			// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 			value: value as string,
 			onchange: page.rerender(),
+			jdd_context: makeJDDContext(ctx),
 		});
 	}
 
@@ -158,27 +162,27 @@ export async function ComponentInput<State extends JDDPageState, T>({
 
 	const inputElement = () => {
 		if (arg instanceof ComponentArguments.Number) {
-			return tempstream/* HTML */ ` <input
+			return tempstream /* HTML */ ` <input
 				type="number"
 				name="${`$${printArgPath(arg_path)}`}"
-				value="${(value || "").toString()}"
+				value="${htmlEscape((value || "").toString())}"
 				min="${arg.min || ""}"
 				max="${arg.max || ""}"
 				step="${arg.step || ""}"
 			/>`;
 		} else if (arg instanceof ComponentArguments.URL) {
-			return tempstream/* HTML */ ` <input
+			return tempstream /* HTML */ ` <input
 				type="${isUrlAbsolute ? "url" : "text"}"
 				name="${`$${printArgPath(arg_path)}`}"
-				value="${(value || "").toString()}"
+				value="${htmlEscape((value || "").toString())}"
 				size="40"
 				${isUrlAbsolute ? `pattern="${absoluteUrlPattern}"` : ""}
 			/>`;
 		} else {
-			return tempstream/* HTML */ ` <input
+			return tempstream /* HTML */ ` <input
 				type="${inputType}"
 				name="${`$${printArgPath(arg_path)}`}"
-				value="${is(value, predicates.string) ? value : ""}"
+				value="${is(value, predicates.string) ? htmlEscape(value) : ""}"
 				size="40"
 				${isUrlAbsolute ? `pattern="${absoluteUrlPattern}"` : ""}
 			/>`;
@@ -200,7 +204,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 						>
 ${is(value, predicates.string) ? value : ""}</textarea
 						>
-				  </div>`
+					</div>`
 				: await inputElement()}
 		</label>
 	</div>`;

package/src/jdd-creator.ts

@@ -64,7 +64,7 @@ export default abstract class JDDCreator extends JDDPage {
 		const component =
 			this.getRegistryComponents()[component_data.component_name];
 		const checkbox_id = `component_${component_index}_open`;
-		return tempstream/* HTML */ `<div
+		return tempstream /* HTML */ `<div
 			class="jdd-editor__component-block jdd-editor__component-block--number-${component_index}"
 			id="${`jdd-editor__component-block--${component_data.component_name}-${component_index}`}"
 			data-component-debugger-target="componentBlock"