@sealcode/jdd-editor 0.2.4 → 0.2.7

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

@@ -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

@@ -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,4 +1,4 @@
-import type { Enum } from "@sealcode/jdd";
+import type { Enum, JDDContext } from "@sealcode/jdd";
 import { printArgPath } from "./print-arg-path.js";
 
 export function ComponentInputEnum<State, S extends string, T extends Enum<S>>({
@@ -6,12 +6,14 @@ export function ComponentInputEnum<State, S extends string, T extends Enum<S>>({
 	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 +22,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="${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

@@ -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,6 +23,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 { 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-_]+)";
@@ -116,6 +118,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),
 		});
 	}
 
@@ -146,9 +149,17 @@ 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
+			return tempstream /* HTML */ ` <input
 				type="number"
 				name="${`$${printArgPath(arg_path)}`}"
 				value="${(value || "").toString()}"
@@ -157,7 +168,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 				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()}"
@@ -165,7 +176,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 				${isUrlAbsolute ? `pattern="${absoluteUrlPattern}"` : ""}
 			/>`;
 		} else {
-			return tempstream/* HTML */ ` <input
+			return tempstream /* HTML */ ` <input
 				type="${inputType}"
 				name="${`$${printArgPath(arg_path)}`}"
 				value="${is(value, predicates.string) ? value : ""}"
@@ -190,7 +201,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"

package/src/jdd-page.ts

@@ -10,7 +10,8 @@ import type { FlatTemplatable, Templatable } from "tempstream";
 import { tempstream } from "tempstream";
 import { ComponentInput } from "./inputs/component-input.js";
 import { ComponentPreviewActions } from "./component-preview-actions.js";
-import { htmlEscape } from "escape-goat";
+import prettier from "prettier";
+import hljs from "highlight.js";
 
 export const actionName = "Components";
 
@@ -102,7 +103,7 @@ export default abstract class JDDPage extends StatefulPage<
 				loadSearchModal: false,
 			},
 			makeHead: (...args: unknown[]) =>
-				tempstream/* HTML */ `${this.defaultHead(...args)}
+				tempstream /* HTML */ `${this.defaultHead(...args)}
 					<link
 						href="/dist/jdd-page.entrypoint.css"
 						rel="stylesheet"
@@ -171,7 +172,7 @@ export default abstract class JDDPage extends StatefulPage<
 		index: number
 	): Promise<FlatTemplatable> {
 		const jdd_context = this.makeJDDContext(ctx);
-		return tempstream/* HTML */ `<div
+		return tempstream /* HTML */ `<div
 			class="component-preview-parameters"
 			id="${`component-preview-parameters--${index}`}"
 		>
@@ -238,7 +239,7 @@ export default abstract class JDDPage extends StatefulPage<
 						? await component.convertParsedToStorage(
 								this.makeJDDContext(ctx),
 								args
-						  )
+							)
 						: {},
 				};
 				return single_result;
@@ -318,7 +319,7 @@ export default abstract class JDDPage extends StatefulPage<
 	}
 
 	async render(ctx: Context, state: JDDPageState): Promise<string> {
-		return tempstream/* HTML */ `<div
+		return tempstream /* HTML */ `<div
 			class="${["two-column", "component-debugger", ...this.classes].join(" ")}"
 			id="component-debugger"
 			style="${`--resizable-column-width: ${
@@ -400,15 +401,16 @@ export default abstract class JDDPage extends StatefulPage<
 											class="dynamic"
 											value="${state.preview_size}"
 											selected
-									  >
+										>
 											${state.preview_size} px
-									  </option>`
+										</option>`
 									: ""
 							}
 							${this.previewSizes.map(
-								(size) => /* HTML */ `<option value="${size}">
-									${`${size} px`}
-								</option>`
+								(size) =>
+									/* HTML */ `<option value="${size}">
+										${`${size} px`}
+									</option>`
 							)}
 						</select>
 						<noscript>
@@ -454,6 +456,15 @@ export default abstract class JDDPage extends StatefulPage<
 								documentContainerFromParsed(state.components),
 								this.makeJDDContext(ctx)
 							);
+
+							const currentComponentPrettified =
+								await prettier.format(currentComponent, {
+									parser: "html",
+								});
+							const highlightedHTML = hljs.highlight(
+								currentComponentPrettified,
+								{ language: "html" }
+							).value;
 							return /* HTML */ ` <div
 									class="jdd-outer-container"
 								>
@@ -462,9 +473,7 @@ export default abstract class JDDPage extends StatefulPage<
 									</div>
 								</div>
 								<div class="component-raw-view">
-									<pre><code>${htmlEscape(
-										currentComponent
-									)}</code></pre>
+									<pre><code>${highlightedHTML}</code></pre>
 								</div>`;
 						})()}
 					</div>