@sealcode/jdd-editor 0.2.15 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/jdd-editor",
-	"version": "0.2.15",
+	"version": "0.2.16",
 	"main": "dist/src/index.js",
 	"scripts": {
 		"build": "rm -rf dist && node ./esbuild.cjs",
@@ -47,7 +47,7 @@
 	"types": "./@types/index.d.ts",
 	"dependencies": {
 		"@koa/router": "^13.1.0",
-		"@sealcode/jdd": "^0.8.5",
+		"@sealcode/jdd": "^0.8.6",
 		"@sealcode/monaco-wrapper": "^0.0.3",
 		"@sealcode/sealcodemirror": "^5.70.0-beta5",
 		"@sealcode/sealgen": "^0.19.6",

package/src/controllers/code-snippet.stimulus.ts

@@ -0,0 +1,12 @@
+import { Controller } from "stimulus";
+
+export default class CodeSnippet extends Controller {
+	declare codeTarget: HTMLElement;
+
+	static targets = ["code"];
+
+	copyCode() {
+		const value = this.codeTarget.textContent || "";
+		void navigator.clipboard.writeText(value);
+	}
+}

package/src/controllers/exportable-textarea.stimulus.ts

@@ -17,7 +17,6 @@ function download(data: string, filename: string, type: string) {
 
 export default class ExportableTextarea extends Controller<HTMLDetailsElement> {
 	connect() {
-		console.log("exportable", this.element);
 		this.element.removeAttribute("open");
 		this.element.addEventListener(
 			"turbo:before-morph-attribute",

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

@@ -133,8 +133,4 @@ export default class JSONEditor extends Controller<HTMLTextAreaElement> {
 				}
 			});
 	}
-
-	async disconnect() {
-		console.log("DISCONNECTING JSON EDITOR");
-	}
 }

package/src/inputs/component-input-code-with-custom-language.ts

@@ -0,0 +1,44 @@
+import { tempstream } from "tempstream";
+import { printArgPath } from "./print-arg-path.js";
+import { is, predicates } from "@sealcode/ts-predicates";
+import { Component } from "@sealcode/jdd";
+
+export function ComponentInputCodeWithCustomLanguage({
+	language,
+	code,
+	arg_path,
+	component,
+}: {
+	code: string;
+	language: string;
+	arg_path: string[];
+	component: Component;
+}): JSX.Element {
+	return tempstream /* HTML */ `<div
+		id="monaco__${arg_path.join("_")}__for__${component.name}"
+	>
+		<div data-controller="monaco" data-turbo-permanent="true">
+			<input
+				data-monaco-target="languageInput"
+				data-action="monaco#languageChange"
+				type="text"
+				name="${`$${printArgPath(arg_path)}`}[language]"
+				value="${is(language, predicates.string) ? language : ""}"
+				size="40"
+			/>
+			<div class="monaco-wrapper">
+				<textarea
+					data-monaco-target="textarea"
+					name="$${printArgPath(arg_path)}[code]"
+					style="display: none"
+				>
+${code}</textarea
+				>
+				<div
+					data-monaco-target="wrapper"
+					data-language="${language}"
+				></div>
+			</div>
+		</div>
+	</div>`;
+}

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

@@ -1,24 +1,37 @@
 import { tempstream } from "tempstream";
 import { printArgPath } from "./print-arg-path.js";
+import { Component } from "@sealcode/jdd";
 
 export function ComponentInputCode({
 	language,
 	value,
 	arg_path,
+	component,
 }: {
 	value: string;
 	language: string;
 	arg_path: string[];
+	component: Component;
 }): 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>
+	return tempstream /* HTML */ `<div
+		id="monaco__${arg_path.join("_")}__for__${component.name}"
+	>
+		<div data-controller="monaco">
+			<div class="monaco-wrapper">
+				<textarea
+					data-monaco-target="textarea"
+					name="$${printArgPath(arg_path)}"
+					style="display: none"
+				>
+${value}</textarea
+				>
+				<div
+					data-monaco-target="wrapper"
+					data-language="${language}"
+					data-turbo-permanent="true"
+					id="${arg_path.join("_")}"
+				></div>
+			</div>
 		</div>
-	</div>`;
+	</div> `;
 }

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

@@ -1,6 +1,11 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type { Context } from "koa";
-import type { ComponentArgument, JDDContext, List } from "@sealcode/jdd";
+import type {
+	Component,
+	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";
@@ -18,6 +23,7 @@ export async function ComponentInputList<
 	value,
 	page,
 	makeJDDContext,
+	component,
 	...rest
 }: {
 	state: State;
@@ -29,6 +35,7 @@ export async function ComponentInputList<
 	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
 	makeJDDContext: (ctx: Context) => JDDContext;
 	makeAssetURL: (asset: string) => string;
+	component: Component;
 }): Promise<string> {
 	if (!value) {
 		value = [];
@@ -49,6 +56,7 @@ export async function ComponentInputList<
 						value,
 						page,
 						makeJDDContext,
+						component,
 					})}
 					${page.makeActionButton(
 						state,

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

@@ -1,5 +1,6 @@
 import type { Context } from "koa";
 import {
+	Component,
 	Structured,
 	type ComponentArgument,
 	type JDDContext,
@@ -22,6 +23,7 @@ export async function ComponentInputStructured<
 	value,
 	page,
 	makeJDDContext,
+	component,
 	...rest
 }: {
 	state: JDDPageState;
@@ -32,6 +34,7 @@ export async function ComponentInputStructured<
 	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
 	makeJDDContext: (ctx: Context) => JDDContext;
 	makeAssetURL: (asset: string) => string;
+	component: Component;
 }) {
 	const structure =
 		arg instanceof Structured
@@ -61,6 +64,7 @@ export async function ComponentInputStructured<
 							value: value[inner_arg_name],
 							page,
 							makeJDDContext,
+							component,
 							...rest,
 						})}
 					</div>`;

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import type { JDDContext, Table, TableData } from "@sealcode/jdd";
+import type { Component, JDDContext, Table, TableData } from "@sealcode/jdd";
 import { Markdown } from "@sealcode/jdd";
 import { isTableHeader } from "@sealcode/jdd";
 import type { StatefulPage } from "@sealcode/sealgen";
@@ -22,6 +22,7 @@ export async function ComponentInputTable<
 	page,
 	makeJDDContext,
 	makeAssetURL,
+	component,
 }: {
 	state: State;
 	ctx: Context;
@@ -31,6 +32,7 @@ export async function ComponentInputTable<
 	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
 	makeJDDContext: (ctx: Context) => JDDContext;
 	makeAssetURL: (asset: string) => string;
+	component: Component;
 }): Promise<string> {
 	if (!value) {
 		value = await arg.getEmptyValue(makeJDDContext(ctx));
@@ -165,6 +167,7 @@ export async function ComponentInputTable<
 											page,
 											makeJDDContext,
 											makeAssetURL,
+											component,
 										})}
 								  </th>`
 									: row.cells.map(
@@ -185,6 +188,7 @@ export async function ComponentInputTable<
 														page,
 														makeJDDContext,
 														makeAssetURL,
+														component,
 													})}
 												</td>`
 										)}

package/src/inputs/component-input.ts

@@ -1,5 +1,10 @@
 import type { FilePointer } from "@sealcode/file-manager";
-import type { ComponentArgument, JDDContext, TableData } from "@sealcode/jdd";
+import type {
+	Component,
+	ComponentArgument,
+	JDDContext,
+	TableData,
+} from "@sealcode/jdd";
 import {
 	Code,
 	Color,
@@ -11,6 +16,7 @@ import {
 	SingleReference,
 	Structured,
 	Table,
+	CodeWithCustomLanguage,
 } from "@sealcode/jdd";
 import type { StatefulPage } from "@sealcode/sealgen";
 import { is, predicates } from "@sealcode/ts-predicates";
@@ -30,6 +36,8 @@ import { ComponentInputStructured } from "./component-input-structured.js";
 import { ComponentInputTable } from "./component-input-table.js";
 import { printArgPath } from "./print-arg-path.js";
 
+import { ComponentInputCodeWithCustomLanguage } from "./component-input-code-with-custom-language.js";
+
 export const actionName = "Components";
 const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
 
@@ -42,6 +50,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 	page,
 	makeJDDContext,
 	makeAssetURL,
+	component,
 }: {
 	state: State;
 	ctx: Context;
@@ -51,6 +60,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
 	makeJDDContext: (ctx: Context) => JDDContext;
 	makeAssetURL: (asset: string) => string;
+	component: Component;
 }): Promise<string> {
 	if (value === undefined) {
 		value = await arg.getEmptyValue(makeJDDContext(ctx));
@@ -80,6 +90,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 			page,
 			makeJDDContext,
 			makeAssetURL,
+			component,
 		});
 	}
 
@@ -92,6 +103,22 @@ export async function ComponentInput<State extends JDDPageState, T>({
 		arg instanceof ComponentArguments.URL && arg.urlType === "absolute";
 	const inputType = isUrlAbsolute ? "url" : "text";
 
+	if (arg instanceof CodeWithCustomLanguage) {
+		const valueCasted = value as {
+			language: string;
+			code: string;
+		};
+
+		return ComponentInputCodeWithCustomLanguage({
+			language: valueCasted.language,
+			code: is(valueCasted.code, predicates.string)
+				? valueCasted.code
+				: "",
+			arg_path,
+			component,
+		});
+	}
+
 	if (arg instanceof Structured || arg instanceof NestedComponent) {
 		return ComponentInputStructured({
 			ctx,
@@ -103,6 +130,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 			page,
 			makeJDDContext,
 			makeAssetURL,
+			component,
 		});
 	}
 
@@ -155,6 +183,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 			page,
 			makeJDDContext,
 			makeAssetURL,
+			component,
 		});
 	}
 
@@ -163,6 +192,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 			language: arg.language,
 			value: is(value, predicates.string) ? value : "",
 			arg_path,
+			component,
 		});
 	}
 

package/src/jdd-page.ts

@@ -197,6 +197,7 @@ export default abstract class JDDPage extends StatefulPage<
 						page: this,
 						makeJDDContext: this.makeJDDContext,
 						makeAssetURL: this.makeAssetURL,
+						component,
 					})
 			)}
 		</div>`;