@sealcode/jdd-editor 0.2.16 → 0.2.17

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

@@ -0,0 +1,49 @@
+import { printArgPath } from "./print-arg-path.js";
+import { is, predicates } from "@sealcode/ts-predicates";
+const buttons = [
+  { content: "<b>B</b>", data: { wrap: "**" } },
+  { content: "<i>I</i>", data: { prefix: "*" } },
+  { content: "H1", data: { prefix: "#" } },
+  { content: "\u275D", data: { prefix: ">" } },
+  { content: "\u2022 List", data: { prefix: "-" } },
+  { content: "1. List", data: { prefix: "1" } },
+  { content: "\u{1F517}", data: { "wrap-before": "[", "wrap-after": "]()" } }
+];
+function ComponentInputMarkdown({
+  arg_path,
+  value,
+  component
+}) {
+  return `<div
+		id="monaco__markdown__${arg_path.join("_")}__for__${component.name}"
+	>
+		${arg_path.at(-1) || ""}
+		<div class="monaco-wrapper monaco-wrapper--markdown">
+			<div data-controller="monaco" data-language="markdown">
+				<div class="toolbar">
+					${buttons.map(
+    (e) => `<button type="button" data-action="monaco#wrapSelection" ${Object.entries(
+      e.data
+    ).map(
+      ([key, value2]) => `data-${key}="${value2}"`
+    ).join(" ")}>${e.content}</button>`
+  ).join("")}
+				</div>
+				<div class="textarea-wrapper" data-monaco-target="wrapper">
+					<textarea
+						data-monaco-target="textarea"
+						name="${`$${printArgPath(arg_path)}`}"
+						style="display: none"
+					>
+${is(value, predicates.string) ? value : ""}
+            </textarea
+					>
+				</div>
+			</div>
+		</div>
+	</div>`;
+}
+export {
+  ComponentInputMarkdown as default
+};
+//# sourceMappingURL=component-input-markdown.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-markdown.ts"],
+  "sourcesContent": ["import { Component } from \"@sealcode/jdd\";\nimport { printArgPath } from \"./print-arg-path.js\";\nimport { is, predicates } from \"@sealcode/ts-predicates\";\n\nconst buttons: { content: string; data: Record<string, string> }[] = [\n\t{ content: \"<b>B</b>\", data: { wrap: \"**\" } },\n\t{ content: \"<i>I</i>\", data: { prefix: \"*\" } },\n\t{ content: \"H1\", data: { prefix: \"#\" } },\n\t{ content: \"\u275D\", data: { prefix: \">\" } },\n\t{ content: \"\u2022 List\", data: { prefix: \"-\" } },\n\t{ content: \"1. List\", data: { prefix: \"1\" } },\n\t{ content: \"\uD83D\uDD17\", data: { \"wrap-before\": \"[\", \"wrap-after\": \"]()\" } },\n];\n\nexport default function ComponentInputMarkdown({\n\targ_path,\n\tvalue,\n\tcomponent,\n}: {\n\targ_path: string[];\n\tvalue: unknown;\n\tcomponent: Component;\n}) {\n\treturn /* HTML */ `<div\n\t\tid=\"monaco__markdown__${arg_path.join(\"_\")}__for__${component.name}\"\n\t>\n\t\t${arg_path.at(-1) || \"\"}\n\t\t<div class=\"monaco-wrapper monaco-wrapper--markdown\">\n\t\t\t<div data-controller=\"monaco\" data-language=\"markdown\">\n\t\t\t\t<div class=\"toolbar\">\n\t\t\t\t\t${buttons\n\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t(e) =>\n\t\t\t\t\t\t\t\t`<button type=\"button\" data-action=\"monaco#wrapSelection\" ${Object.entries(\n\t\t\t\t\t\t\t\t\te.data\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t\t([key, value]) =>\n\t\t\t\t\t\t\t\t\t\t\t`data-${key}=\"${value}\"`\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t.join(\" \")}>${e.content}</button>`\n\t\t\t\t\t\t)\n\t\t\t\t\t\t.join(\"\")}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"textarea-wrapper\" data-monaco-target=\"wrapper\">\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tdata-monaco-target=\"textarea\"\n\t\t\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\t\t\tstyle=\"display: none\"\n\t\t\t\t\t>\n${is(value, predicates.string) ? value : \"\"}\n            </textarea\n\t\t\t\t\t>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>`;\n}\n"],
+  "mappings": "AACA,SAAS,oBAAoB;AAC7B,SAAS,IAAI,kBAAkB;AAE/B,MAAM,UAA+D;AAAA,EACpE,EAAE,SAAS,YAAY,MAAM,EAAE,MAAM,KAAK,EAAE;AAAA,EAC5C,EAAE,SAAS,YAAY,MAAM,EAAE,QAAQ,IAAI,EAAE;AAAA,EAC7C,EAAE,SAAS,MAAM,MAAM,EAAE,QAAQ,IAAI,EAAE;AAAA,EACvC,EAAE,SAAS,UAAK,MAAM,EAAE,QAAQ,IAAI,EAAE;AAAA,EACtC,EAAE,SAAS,eAAU,MAAM,EAAE,QAAQ,IAAI,EAAE;AAAA,EAC3C,EAAE,SAAS,WAAW,MAAM,EAAE,QAAQ,IAAI,EAAE;AAAA,EAC5C,EAAE,SAAS,aAAM,MAAM,EAAE,eAAe,KAAK,cAAc,MAAM,EAAE;AACpE;AAEe,SAAR,uBAAwC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,SAAkB;AAAA,0BACO,SAAS,KAAK,GAAG,WAAW,UAAU;AAAA;AAAA,IAE5D,SAAS,GAAG,EAAE,KAAK;AAAA;AAAA;AAAA;AAAA,OAIhB,QACA;AAAA,IACA,CAAC,MACA,4DAA4D,OAAO;AAAA,MAClE,EAAE;AAAA,IACH,EACE;AAAA,MACA,CAAC,CAAC,KAAKA,MAAK,MACX,QAAQ,QAAQA;AAAA,IAClB,EACC,KAAK,GAAG,KAAK,EAAE;AAAA,EACnB,EACC,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,cAKA,IAAI,aAAa,QAAQ;AAAA;AAAA;AAAA,EAGrC,GAAG,OAAO,WAAW,MAAM,IAAI,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC;",
+  "names": ["value"]
+}

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

@@ -9,7 +9,8 @@ import {
   SingleReference,
   Structured,
   Table,
-  CodeWithCustomLanguage
+  CodeWithCustomLanguage,
+  Markdown
 } from "@sealcode/jdd";
 import { is, predicates } from "@sealcode/ts-predicates";
 import { htmlEscape } from "escape-goat";
@@ -25,6 +26,7 @@ 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";
+import ComponentInputMarkdown from "./component-input-markdown.js";
 const actionName = "Components";
 const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
 async function ComponentInput({
@@ -147,6 +149,9 @@ async function ComponentInput({
       component
     });
   }
+  if (arg instanceof Markdown) {
+    return ComponentInputMarkdown({ arg_path, value, component });
+  }
   const inputElement = () => {
     if (arg instanceof ComponentArguments.Number) {
       return tempstream` <input
@@ -176,21 +181,7 @@ async function ComponentInput({
     }
   };
   return `<div>
-		<label>
-			${arg_path.at(-1) || ""}
-			${argType == "markdown" ? `<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>` : await inputElement()}
-		</label>
+		<label> ${arg_path.at(-1) || ""} ${await inputElement()} </label>
 	</div>`;
 }
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/inputs/component-input.ts"],
-  "sourcesContent": ["import type { FilePointer } from \"@sealcode/file-manager\";\nimport type {\n\tComponent,\n\tComponentArgument,\n\tJDDContext,\n\tTableData,\n} from \"@sealcode/jdd\";\nimport {\n\tCode,\n\tColor,\n\tComponentArguments,\n\tEnum,\n\tImage,\n\tList,\n\tNestedComponent,\n\tSingleReference,\n\tStructured,\n\tTable,\n\tCodeWithCustomLanguage,\n} from \"@sealcode/jdd\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport { is, predicates } from \"@sealcode/ts-predicates\";\nimport { htmlEscape } from \"escape-goat\";\nimport type { Context } from \"koa\";\nimport { tempstream } from \"tempstream\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport { ComponentCheckbox } from \"./component-input-boolean.js\";\nimport { ComponentInputCode } from \"./component-input-code.js\";\nimport { ComponentInputColor } from \"./component-input-color.js\";\nimport { ComponentInputEnum } from \"./component-input-enum.js\";\nimport { ComponentInputImage } from \"./component-input-image.js\";\nimport { ComponentInputList } from \"./component-input-list.js\";\nimport { ComponentInputSingleReference } from \"./component-input-single-reference.js\";\nimport { ComponentInputStructured } from \"./component-input-structured.js\";\nimport { ComponentInputTable } from \"./component-input-table.js\";\nimport { printArgPath } from \"./print-arg-path.js\";\n\nimport { ComponentInputCodeWithCustomLanguage } from \"./component-input-code-with-custom-language.js\";\n\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\tcomponent,\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\tcomponent: Component;\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\tcomponent,\n\t\t});\n\t}\n\n\tif (arg instanceof ComponentArguments.Boolean) {\n\t\treturn ComponentCheckbox({ arg_path, arg, value: value as boolean });\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 CodeWithCustomLanguage) {\n\t\tconst valueCasted = value as {\n\t\t\tlanguage: string;\n\t\t\tcode: string;\n\t\t};\n\n\t\treturn ComponentInputCodeWithCustomLanguage({\n\t\t\tlanguage: valueCasted.language,\n\t\t\tcode: is(valueCasted.code, predicates.string)\n\t\t\t\t? valueCasted.code\n\t\t\t\t: \"\",\n\t\t\targ_path,\n\t\t\tcomponent,\n\t\t});\n\t}\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\tcomponent,\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\tjdd_context: makeJDDContext(ctx),\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\tcomponent,\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\tcomponent,\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=\"${htmlEscape((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=\"${htmlEscape((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) ? htmlEscape(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\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 type { FilePointer } from \"@sealcode/file-manager\";\nimport type {\n\tComponent,\n\tComponentArgument,\n\tJDDContext,\n\tTableData,\n} from \"@sealcode/jdd\";\nimport {\n\tCode,\n\tColor,\n\tComponentArguments,\n\tEnum,\n\tImage,\n\tList,\n\tNestedComponent,\n\tSingleReference,\n\tStructured,\n\tTable,\n\tCodeWithCustomLanguage,\n\tMarkdown,\n} from \"@sealcode/jdd\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport { is, predicates } from \"@sealcode/ts-predicates\";\nimport { htmlEscape } from \"escape-goat\";\nimport type { Context } from \"koa\";\nimport { tempstream } from \"tempstream\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport { ComponentCheckbox } from \"./component-input-boolean.js\";\nimport { ComponentInputCode } from \"./component-input-code.js\";\nimport { ComponentInputColor } from \"./component-input-color.js\";\nimport { ComponentInputEnum } from \"./component-input-enum.js\";\nimport { ComponentInputImage } from \"./component-input-image.js\";\nimport { ComponentInputList } from \"./component-input-list.js\";\nimport { ComponentInputSingleReference } from \"./component-input-single-reference.js\";\nimport { ComponentInputStructured } from \"./component-input-structured.js\";\nimport { ComponentInputTable } from \"./component-input-table.js\";\nimport { printArgPath } from \"./print-arg-path.js\";\n\nimport { ComponentInputCodeWithCustomLanguage } from \"./component-input-code-with-custom-language.js\";\nimport ComponentInputMarkdown from \"./component-input-markdown.js\";\n\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\tcomponent,\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\tcomponent: Component;\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\tcomponent,\n\t\t});\n\t}\n\n\tif (arg instanceof ComponentArguments.Boolean) {\n\t\treturn ComponentCheckbox({ arg_path, arg, value: value as boolean });\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 CodeWithCustomLanguage) {\n\t\tconst valueCasted = value as {\n\t\t\tlanguage: string;\n\t\t\tcode: string;\n\t\t};\n\n\t\treturn ComponentInputCodeWithCustomLanguage({\n\t\t\tlanguage: valueCasted.language,\n\t\t\tcode: is(valueCasted.code, predicates.string)\n\t\t\t\t? valueCasted.code\n\t\t\t\t: \"\",\n\t\t\targ_path,\n\t\t\tcomponent,\n\t\t});\n\t}\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\tcomponent,\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\tjdd_context: makeJDDContext(ctx),\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\tcomponent,\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\tcomponent,\n\t\t});\n\t}\n\n\tif (arg instanceof Markdown) {\n\t\treturn ComponentInputMarkdown({ arg_path, value, component });\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=\"${htmlEscape((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=\"${htmlEscape((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) ? htmlEscape(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> ${arg_path.at(-1) || \"\"} ${await inputElement()} </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.16",
+	"version": "0.2.17",
 	"main": "dist/src/index.js",
 	"scripts": {
 		"build": "rm -rf dist && node ./esbuild.cjs",

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

@@ -0,0 +1,58 @@
+import { Component } from "@sealcode/jdd";
+import { printArgPath } from "./print-arg-path.js";
+import { is, predicates } from "@sealcode/ts-predicates";
+
+const buttons: { content: string; data: Record<string, string> }[] = [
+	{ content: "<b>B</b>", data: { wrap: "**" } },
+	{ content: "<i>I</i>", data: { prefix: "*" } },
+	{ content: "H1", data: { prefix: "#" } },
+	{ content: "❝", data: { prefix: ">" } },
+	{ content: "• List", data: { prefix: "-" } },
+	{ content: "1. List", data: { prefix: "1" } },
+	{ content: "🔗", data: { "wrap-before": "[", "wrap-after": "]()" } },
+];
+
+export default function ComponentInputMarkdown({
+	arg_path,
+	value,
+	component,
+}: {
+	arg_path: string[];
+	value: unknown;
+	component: Component;
+}) {
+	return /* HTML */ `<div
+		id="monaco__markdown__${arg_path.join("_")}__for__${component.name}"
+	>
+		${arg_path.at(-1) || ""}
+		<div class="monaco-wrapper monaco-wrapper--markdown">
+			<div data-controller="monaco" data-language="markdown">
+				<div class="toolbar">
+					${buttons
+						.map(
+							(e) =>
+								`<button type="button" data-action="monaco#wrapSelection" ${Object.entries(
+									e.data
+								)
+									.map(
+										([key, value]) =>
+											`data-${key}="${value}"`
+									)
+									.join(" ")}>${e.content}</button>`
+						)
+						.join("")}
+				</div>
+				<div class="textarea-wrapper" data-monaco-target="wrapper">
+					<textarea
+						data-monaco-target="textarea"
+						name="${`$${printArgPath(arg_path)}`}"
+						style="display: none"
+					>
+${is(value, predicates.string) ? value : ""}
+            </textarea
+					>
+				</div>
+			</div>
+		</div>
+	</div>`;
+}

package/src/inputs/component-input.ts

@@ -17,6 +17,7 @@ import {
 	Structured,
 	Table,
 	CodeWithCustomLanguage,
+	Markdown,
 } from "@sealcode/jdd";
 import type { StatefulPage } from "@sealcode/sealgen";
 import { is, predicates } from "@sealcode/ts-predicates";
@@ -37,6 +38,7 @@ import { ComponentInputTable } from "./component-input-table.js";
 import { printArgPath } from "./print-arg-path.js";
 
 import { ComponentInputCodeWithCustomLanguage } from "./component-input-code-with-custom-language.js";
+import ComponentInputMarkdown from "./component-input-markdown.js";
 
 export const actionName = "Components";
 const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
@@ -196,6 +198,10 @@ export async function ComponentInput<State extends JDDPageState, T>({
 		});
 	}
 
+	if (arg instanceof Markdown) {
+		return ComponentInputMarkdown({ arg_path, value, component });
+	}
+
 	const inputElement = () => {
 		if (arg instanceof ComponentArguments.Number) {
 			return tempstream /* HTML */ ` <input
@@ -226,22 +232,6 @@ export async function ComponentInput<State extends JDDPageState, T>({
 	};
 
 	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>`
-				: await inputElement()}
-		</label>
+		<label> ${arg_path.at(-1) || ""} ${await inputElement()} </label>
 	</div>`;
 }