@sealcode/jdd-editor 0.2.4 → 0.2.5

package/dist/src/inputs/component-input-code.js

@@ -0,0 +1,23 @@
+import { tempstream } from "tempstream";
+import { printArgPath } from "./print-arg-path.js";
+function ComponentInputCode({
+  language,
+  value,
+  arg_path
+}) {
+  return tempstream`<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>`;
+}
+export {
+  ComponentInputCode
+};
+//# sourceMappingURL=component-input-code.js.map

package/dist/src/inputs/component-input-code.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-code.ts"],
+  "sourcesContent": ["import { tempstream } from \"tempstream\";\nimport { printArgPath } from \"./print-arg-path.js\";\n\nexport function ComponentInputCode({\n\tlanguage,\n\tvalue,\n\targ_path,\n}: {\n\tvalue: string;\n\tlanguage: string;\n\targ_path: string[];\n}): JSX.Element {\n\treturn tempstream/* HTML */ `<div class=\"monaco-wrapper\">\n\t\t<div data-controller=\"monaco\" data-language=\"${language}\">\n\t\t\t<textarea\n\t\t\t\tdata-monaco-target=\"textarea\"\n\t\t\t\tname=\"$${printArgPath(arg_path)}\"\n\t\t\t\tstyle=\"display: none\"\n\t\t\t>\n${value}\n        </textarea>\n\t\t</div>\n\t</div>`;\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAEtB,SAAS,mBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACD,GAIgB;AACf,SAAO;AAAA,iDACyC;AAAA;AAAA;AAAA,aAGpC,aAAa,QAAQ;AAAA;AAAA;AAAA,EAGhC;AAAA;AAAA;AAAA;AAIF;",
+  "names": []
+}

package/dist/src/inputs/component-input.js

@@ -6,7 +6,8 @@ import {
   Image,
   List,
   Structured,
-  Table
+  Table,
+  Code
 } from "@sealcode/jdd";
 import { ComponentInputStructured } from "./component-input-structured.js";
 import { ComponentInputList } from "./component-input-list.js";
@@ -16,6 +17,7 @@ import { ComponentInputTable } from "./component-input-table.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";
 const actionName = "Components";
 const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
@@ -114,6 +116,13 @@ async function ComponentInput({
       makeAssetURL
     });
   }
+  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` <input

package/dist/src/inputs/component-input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/component-input.ts"],
-  "sourcesContent": ["import { printArgPath } from \"./print-arg-path.js\";\nimport type { Context } from \"koa\";\nimport type { ComponentArgument, JDDContext, TableData } from \"@sealcode/jdd\";\nimport { NestedComponent, Color, SingleReference } from \"@sealcode/jdd\";\nimport {\n\tComponentArguments,\n\tEnum,\n\tImage,\n\tList,\n\tStructured,\n\tTable,\n} from \"@sealcode/jdd\";\nimport { ComponentInputStructured } from \"./component-input-structured.js\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport { ComponentInputList } from \"./component-input-list.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport { ComponentInputEnum } from \"./component-input-enum.js\";\nimport { ComponentInputImage } from \"./component-input-image.js\";\nimport { ComponentInputTable } from \"./component-input-table.js\";\nimport type { FilePointer } from \"@sealcode/file-manager\";\nimport { ComponentInputSingleReference } from \"./component-input-single-reference.js\";\nimport { is, predicates } from \"@sealcode/ts-predicates\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInputColor } from \"./component-input-color.js\";\nexport const actionName = \"Components\";\nconst absoluteUrlPattern = \"http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)\";\n\nexport async function ComponentInput<State extends JDDPageState, T>({\n\tctx,\n\tstate,\n\targ_path,\n\targ,\n\tvalue,\n\tpage,\n\tmakeJDDContext,\n\tmakeAssetURL,\n}: {\n\tstate: State;\n\tctx: Context;\n\targ_path: string[];\n\targ: ComponentArgument<T>;\n\tvalue: T;\n\tpage: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n\tmakeAssetURL: (asset: string) => string;\n}): Promise<string> {\n\tif (value === undefined) {\n\t\tvalue = await arg.getEmptyValue(makeJDDContext(ctx));\n\t}\n\tif (arg instanceof Color) {\n\t\treturn ComponentInputColor({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tpage,\n\t\t\tonchange: page.rerender(),\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\tif (arg instanceof List) {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\treturn ComponentInputList({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as T[],\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tconst argType = arg.getTypeName();\n\tconst isUrlAbsolute =\n\t\targ instanceof ComponentArguments.URL && arg.urlType === \"absolute\";\n\tconst inputType = isUrlAbsolute ? \"url\" : \"text\";\n\n\tif (arg instanceof Structured || arg instanceof NestedComponent) {\n\t\treturn ComponentInputStructured({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as Record<string, unknown>,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tif (arg instanceof SingleReference) {\n\t\treturn ComponentInputSingleReference({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tonchange: page.rerender(),\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\n\tif (arg instanceof Enum) {\n\t\treturn ComponentInputEnum({\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tonchange: page.rerender(),\n\t\t});\n\t}\n\n\tif (arg instanceof Image) {\n\t\treturn ComponentInputImage({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as FilePointer,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\n\tif (arg instanceof Table) {\n\t\treturn ComponentInputTable({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as TableData<unknown, unknown>,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tconst inputElement = () => {\n\t\tif (arg instanceof ComponentArguments.Number) {\n\t\t\treturn tempstream/* HTML */ ` <input\n\t\t\t\ttype=\"number\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${(value || \"\").toString()}\"\n\t\t\t\tmin=\"${arg.min || \"\"}\"\n\t\t\t\tmax=\"${arg.max || \"\"}\"\n\t\t\t\tstep=\"${arg.step || \"\"}\"\n\t\t\t/>`;\n\t\t} else if (arg instanceof ComponentArguments.URL) {\n\t\t\treturn tempstream/* HTML */ ` <input\n\t\t\t\ttype=\"${isUrlAbsolute ? \"url\" : \"text\"}\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${(value || \"\").toString()}\"\n\t\t\t\tsize=\"40\"\n\t\t\t\t${isUrlAbsolute ? `pattern=\"${absoluteUrlPattern}\"` : \"\"}\n\t\t\t/>`;\n\t\t} else {\n\t\t\treturn tempstream/* HTML */ ` <input\n\t\t\t\ttype=\"${inputType}\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${is(value, predicates.string) ? value : \"\"}\"\n\t\t\t\tsize=\"40\"\n\t\t\t\t${isUrlAbsolute ? `pattern=\"${absoluteUrlPattern}\"` : \"\"}\n\t\t\t/>`;\n\t\t}\n\t};\n\n\treturn /* HTML */ `<div>\n\t\t<label>\n\t\t\t${arg_path.at(-1) || \"\"}\n\t\t\t${argType == \"markdown\"\n\t\t\t\t? /* HTML */ `<div class=\"grow-wrap\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\t\t\t\tonblur=\"${page.rerender()}\"\n\t\t\t\t\t\t\tcols=\"40\"\n\t\t\t\t\t\t\tdata-controller=\"markdown-textarea submit-on-input\"\n\t\t\t\t\t\t\tdata-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\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t>\n${is(value, predicates.string) ? value : \"\"}</textarea\n\t\t\t\t\t\t>\n\t\t\t\t  </div>`\n\t\t\t\t: await inputElement()}\n\t\t</label>\n\t</div>`;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { printArgPath } from \"./print-arg-path.js\";\nimport type { Context } from \"koa\";\nimport type { ComponentArgument, JDDContext, TableData } from \"@sealcode/jdd\";\nimport { NestedComponent, Color, SingleReference } from \"@sealcode/jdd\";\nimport {\n\tComponentArguments,\n\tEnum,\n\tImage,\n\tList,\n\tStructured,\n\tTable,\n\tCode,\n} from \"@sealcode/jdd\";\nimport { ComponentInputStructured } from \"./component-input-structured.js\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport { ComponentInputList } from \"./component-input-list.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport { ComponentInputEnum } from \"./component-input-enum.js\";\nimport { ComponentInputImage } from \"./component-input-image.js\";\nimport { ComponentInputTable } from \"./component-input-table.js\";\nimport type { FilePointer } from \"@sealcode/file-manager\";\nimport { ComponentInputSingleReference } from \"./component-input-single-reference.js\";\nimport { is, predicates } from \"@sealcode/ts-predicates\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInputCode } from \"./component-input-code.js\";\nimport { ComponentInputColor } from \"./component-input-color.js\";\nexport const actionName = \"Components\";\nconst absoluteUrlPattern = \"http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)\";\n\nexport async function ComponentInput<State extends JDDPageState, T>({\n\tctx,\n\tstate,\n\targ_path,\n\targ,\n\tvalue,\n\tpage,\n\tmakeJDDContext,\n\tmakeAssetURL,\n}: {\n\tstate: State;\n\tctx: Context;\n\targ_path: string[];\n\targ: ComponentArgument<T>;\n\tvalue: T;\n\tpage: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n\tmakeAssetURL: (asset: string) => string;\n}): Promise<string> {\n\tif (value === undefined) {\n\t\tvalue = await arg.getEmptyValue(makeJDDContext(ctx));\n\t}\n\tif (arg instanceof Color) {\n\t\treturn ComponentInputColor({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tpage,\n\t\t\tonchange: page.rerender(),\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\tif (arg instanceof List) {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\treturn ComponentInputList({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as T[],\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tconst argType = arg.getTypeName();\n\tconst isUrlAbsolute =\n\t\targ instanceof ComponentArguments.URL && arg.urlType === \"absolute\";\n\tconst inputType = isUrlAbsolute ? \"url\" : \"text\";\n\n\tif (arg instanceof Structured || arg instanceof NestedComponent) {\n\t\treturn ComponentInputStructured({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as Record<string, unknown>,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tif (arg instanceof SingleReference) {\n\t\treturn ComponentInputSingleReference({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tonchange: page.rerender(),\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\n\tif (arg instanceof Enum) {\n\t\treturn ComponentInputEnum({\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tonchange: page.rerender(),\n\t\t});\n\t}\n\n\tif (arg instanceof Image) {\n\t\treturn ComponentInputImage({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as FilePointer,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\n\tif (arg instanceof Table) {\n\t\treturn ComponentInputTable({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as TableData<unknown, unknown>,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tif (arg instanceof Code) {\n\t\treturn ComponentInputCode({\n\t\t\tlanguage: arg.language,\n\t\t\tvalue: is(value, predicates.string) ? value : \"\",\n\t\t\targ_path,\n\t\t});\n\t}\n\n\tconst inputElement = () => {\n\t\tif (arg instanceof ComponentArguments.Number) {\n\t\t\treturn tempstream/* HTML */ ` <input\n\t\t\t\ttype=\"number\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${(value || \"\").toString()}\"\n\t\t\t\tmin=\"${arg.min || \"\"}\"\n\t\t\t\tmax=\"${arg.max || \"\"}\"\n\t\t\t\tstep=\"${arg.step || \"\"}\"\n\t\t\t/>`;\n\t\t} else if (arg instanceof ComponentArguments.URL) {\n\t\t\treturn tempstream/* HTML */ ` <input\n\t\t\t\ttype=\"${isUrlAbsolute ? \"url\" : \"text\"}\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${(value || \"\").toString()}\"\n\t\t\t\tsize=\"40\"\n\t\t\t\t${isUrlAbsolute ? `pattern=\"${absoluteUrlPattern}\"` : \"\"}\n\t\t\t/>`;\n\t\t} else {\n\t\t\treturn tempstream/* HTML */ ` <input\n\t\t\t\ttype=\"${inputType}\"\n\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\tvalue=\"${is(value, predicates.string) ? value : \"\"}\"\n\t\t\t\tsize=\"40\"\n\t\t\t\t${isUrlAbsolute ? `pattern=\"${absoluteUrlPattern}\"` : \"\"}\n\t\t\t/>`;\n\t\t}\n\t};\n\n\treturn /* HTML */ `<div>\n\t\t<label>\n\t\t\t${arg_path.at(-1) || \"\"}\n\t\t\t${argType == \"markdown\"\n\t\t\t\t? /* HTML */ `<div class=\"grow-wrap\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\t\t\t\tonblur=\"${page.rerender()}\"\n\t\t\t\t\t\t\tcols=\"40\"\n\t\t\t\t\t\t\tdata-controller=\"markdown-textarea submit-on-input\"\n\t\t\t\t\t\t\tdata-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\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t>\n${is(value, predicates.string) ? value : \"\"}</textarea\n\t\t\t\t\t\t>\n\t\t\t\t  </div>`\n\t\t\t\t: await inputElement()}\n\t\t</label>\n\t</div>`;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/jdd-editor",
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"main": "dist/src/index.js",
 	"scripts": {
 		"build": "rm -rf dist && node ./esbuild.cjs",
@@ -47,7 +47,8 @@
 	"types": "./@types/index.d.ts",
 	"dependencies": {
 		"@koa/router": "^13.1.0",
-		"@sealcode/jdd": "^0.8.1",
+		"@sealcode/jdd": "^0.8.2",
+		"@sealcode/monaco-wrapper": "^0.0.3",
 		"@sealcode/sealcodemirror": "^5.70.0-beta5",
 		"@sealcode/sealgen": "^0.19.6",
 		"@types/object-path": "^0.11.4",

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.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-_]+)";
@@ -146,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