@sealcode/jdd-editor 0.2.15 → 0.2.17

package/dist/src/jdd-page.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/jdd-page.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/restrict-template-expressions */\nimport type { Readable } from \"node:stream\";\nimport type { Component, JDDContext, RawJDDocument } from \"@sealcode/jdd\";\nimport { documentContainerFromParsed, Registry } from \"@sealcode/jdd\";\nimport { JDD } from \"@sealcode/jdd\";\nimport { StatefulPage } from \"@sealcode/sealgen\";\nimport { hasFieldOfType, hasShape, predicates } from \"@sealcode/ts-predicates\";\nimport type { Context } from \"koa\";\nimport type { FlatTemplatable, Templatable } from \"tempstream\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInput } from \"./inputs/component-input.js\";\nimport { ComponentPreviewActions } from \"./component-preview-actions.js\";\nimport prettier from \"prettier\";\nimport hljs from \"highlight.js\";\n\nexport const actionName = \"Components\";\n\nexport type JDDPageState = {\n\tcomponents: RawJDDocument;\n\tpreview_size?: string;\n};\n\nexport default abstract class JDDPage extends StatefulPage<\n\tJDDPageState,\n\ttypeof ComponentPreviewActions\n> {\n\tactions = ComponentPreviewActions;\n\n\tpreviewSizes = [\"320\", \"600\", \"800\", \"1024\", \"1300\", \"1920\"];\n\tclasses: string[] = [];\n\n\tpublic registry: Registry;\n\tpublic makeJDDContext: (ctx: Context) => JDDContext;\n\tpublic html: (\n\t\targs: unknown\n\t) => string | Promise<string> | Readable | Promise<Readable>;\n\tpublic defaultHead: (\n\t\t...args: unknown[]\n\t) => string | Promise<string> | Readable | Promise<Readable>;\n\tpublic makeAssetURL: (asset: string) => string;\n\n\tconstructor(args: {\n\t\tregistry: Registry;\n\t\tmakeJDDContext: (ctx: Context) => JDDContext;\n\t\thtml: (\n\t\t\targs: unknown\n\t\t) => string | Promise<string> | Readable | Promise<Readable>;\n\t\tdefaultHead: (\n\t\t\t...args: unknown[]\n\t\t) => string | Promise<string> | Readable | Promise<Readable>;\n\t\tmakeAssetURL?: (asset: string) => string;\n\t}) {\n\t\tsuper();\n\t\tthis.registry = args.registry;\n\t\tthis.makeJDDContext = args.makeJDDContext;\n\t\tthis.defaultHead = args.defaultHead;\n\t\tthis.html = args.html;\n\t\tthis.makeAssetURL =\n\t\t\targs.makeAssetURL ||\n\t\t\t((str) =>\n\t\t\t\t`/dist/jdd-page/${str.startsWith(\"/\") ? str.slice(1) : str}`);\n\t}\n\n\tgetRegistryComponents() {\n\t\treturn this.registry.getAll();\n\t}\n\n\tasync getInitialState(ctx: Context): Promise<JDDPageState> {\n\t\tconst initial_state = {\n\t\t\tcomponents: [],\n\t\t};\n\t\treturn initial_state;\n\t}\n\n\twrapInLayout(\n\t\tctx: Context,\n\t\tcontent: Templatable,\n\t\tstate: JDDPageState\n\t): Templatable {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\tconst jdd = new JDD(\n\t\t\tthis.registry,\n\t\t\tjdd_context,\n\t\t\tdocumentContainerFromParsed(state.components)\n\t\t);\n\t\treturn this.html({\n\t\t\tctx,\n\t\t\ttitle: \"Components\",\n\t\t\tbody: content,\n\t\t\tdescription: \"\",\n\t\t\tcss_clumps: [\"jdd-page\", ...jdd.getAllCSSClumps()],\n\t\t\thtmlOptions: {\n\t\t\t\tmorphing: true,\n\t\t\t\tpreserveScroll: true,\n\t\t\t\tautoRefreshCSS: false,\n\t\t\t\tnavbar: () => ``,\n\t\t\t\tbodyClasses: [\"jdd-editor\"],\n\t\t\t\tshowBottomNavbar: false,\n\t\t\t\tshowBanner: false,\n\t\t\t\tshowFooter: false,\n\t\t\t\tloadHamburgerMenu: false,\n\t\t\t\tloadSearchModal: false,\n\t\t\t},\n\t\t\tmakeHead: (...args: unknown[]) =>\n\t\t\t\ttempstream /* HTML */ `${this.defaultHead(...args)}\n\t\t\t\t\t<link\n\t\t\t\t\t\thref=\"/dist/jdd-page.entrypoint.css\"\n\t\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\t\ttype=\"text/css\"\n\t\t\t\t\t/>\n\t\t\t\t\t${jdd.renderEarlyAssets()}`,\n\t\t});\n\t}\n\n\tasync preprocessOverrides(\n\t\t_ctx: Context,\n\t\tstate: JDDPageState,\n\t\toverrides: Record<string, unknown>\n\t) {\n\t\tconst jdd_context = this.makeJDDContext(_ctx);\n\t\tif (\n\t\t\t!hasFieldOfType(\n\t\t\t\t\"components\",\n\t\t\t\toverrides,\n\t\t\t\tpredicates.array(\n\t\t\t\t\tpredicates.shape({\n\t\t\t\t\t\targs: predicates.object,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t)\n\t\t) {\n\t\t\treturn {};\n\t\t}\n\t\tfor (const [component_index, { component_name }] of Object.entries(\n\t\t\tstate.components\n\t\t)) {\n\t\t\tconst component = this.registry.get(component_name);\n\t\t\tif (!component) {\n\t\t\t\tthrow new Error(`Unknown component: ${component_name}`);\n\t\t\t}\n\t\t\tconst overrides_for_component = overrides.components[\n\t\t\t\tparseInt(component_index)\n\t\t\t] || { args: {} };\n\t\t\tconst promises = Object.entries(component.getArguments()).map(\n\t\t\t\tasync ([arg_name, arg]) => {\n\t\t\t\t\tconst value = overrides_for_component.args[arg_name];\n\t\t\t\t\tif (value) {\n\t\t\t\t\t\tconst new_value = await arg.receivedToParsed(\n\t\t\t\t\t\t\tjdd_context,\n\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t);\n\t\t\t\t\t\toverrides_for_component.args[arg_name] = new_value;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t);\n\t\t\t// eslint-disable-next-line no-await-in-loop\n\t\t\tawait Promise.all(promises);\n\t\t}\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\treturn overrides;\n\t}\n\n\t// eslint-disable-next-line no-unused-vars\n\tabstract renderParameterButtons(_state: JDDPageState): FlatTemplatable;\n\n\tasync renderComponentArgs<C extends Component>(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tcomponent: C,\n\t\targs: Record<string, unknown>,\n\t\tindex: number\n\t): Promise<FlatTemplatable> {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\treturn tempstream /* HTML */ `<div\n\t\t\tclass=\"component-preview-parameters\"\n\t\t\tid=\"${`component-preview-parameters--${index}`}\"\n\t\t>\n\t\t\t${Object.entries(component.getArguments()).map(\n\t\t\t\tasync ([arg_name, arg]) =>\n\t\t\t\t\tComponentInput({\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\"components\",\n\t\t\t\t\t\t\tindex.toString(),\n\t\t\t\t\t\t\t\"args\",\n\t\t\t\t\t\t\targ_name,\n\t\t\t\t\t\t],\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\targ,\n\t\t\t\t\t\tvalue:\n\t\t\t\t\t\t\targs[arg_name] === undefined ||\n\t\t\t\t\t\t\tcomponent\n\t\t\t\t\t\t\t\t.getArguments()\n\t\t\t\t\t\t\t\t[arg_name]?.isEmpty(args[arg_name])\n\t\t\t\t\t\t\t\t? await arg.getExampleValue(jdd_context)\n\t\t\t\t\t\t\t\t: args[arg_name],\n\t\t\t\t\t\tpage: this,\n\t\t\t\t\t\tmakeJDDContext: this.makeJDDContext,\n\t\t\t\t\t\tmakeAssetURL: this.makeAssetURL,\n\t\t\t\t\t})\n\t\t\t)}\n\t\t</div>`;\n\t}\n\n\trenderComponentBlock(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\t{\n\t\t\tcomponent_name,\n\t\t\targs: component_args,\n\t\t}: {\n\t\t\tcomponent_name: string;\n\t\t\targs: Record<string, unknown>;\n\t\t},\n\t\tcomponent_index: number\n\t) {\n\t\tconst component = this.registry.get(component_name);\n\t\tif (!component) {\n\t\t\treturn null;\n\t\t}\n\t\treturn this.renderComponentArgs(\n\t\t\tctx,\n\t\t\tstate,\n\t\t\tcomponent,\n\t\t\tcomponent_args,\n\t\t\tcomponent_index\n\t\t);\n\t}\n\n\tasync serializeState(ctx: Context, state: JDDPageState, pretty = false) {\n\t\tconst serialized_components = await Promise.all(\n\t\t\tstate.components.map(async ({ component_name, args }) => {\n\t\t\t\tconst component = this.registry.get(component_name);\n\t\t\t\tconst single_result = {\n\t\t\t\t\tcomponent_name,\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n\t\t\t\t\targs: component\n\t\t\t\t\t\t? await component.convertParsedToStorage(\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx),\n\t\t\t\t\t\t\t\targs\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t: {},\n\t\t\t\t};\n\t\t\t\treturn single_result;\n\t\t\t})\n\t\t);\n\t\tconst serialized_state = JSON.stringify(\n\t\t\t{ ...state, components: serialized_components },\n\t\t\tnull,\n\t\t\tpretty ? 4 : \"\"\n\t\t);\n\t\treturn serialized_state;\n\t}\n\n\tasync deserializeState(ctx: Context, state_string: string) {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst raw = JSON.parse(state_string) as Record<string, unknown>;\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n\t\tconst components_storage = raw.components;\n\t\tif (!Array.isArray(components_storage)) {\n\t\t\tthrow new Error(\n\t\t\t\t\"'components' key is not an array, got ${components_storage}\"\n\t\t\t);\n\t\t}\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst components_parsed = await Promise.all(\n\t\t\tcomponents_storage.map(async (entry) => {\n\t\t\t\tif (\n\t\t\t\t\t!hasShape(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tcomponent_name: predicates.string,\n\t\t\t\t\t\t\targs: predicates.object,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tentry\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t`Expected components[] items to be objects with 'component_name' and 'args' keys, got ${entry}`\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tconst { component_name, args } = entry;\n\t\t\t\tconst component = this.registry.get(component_name);\n\t\t\t\tif (!component) {\n\t\t\t\t\tthrow new Error(\"Unknown component: ${component_name}\");\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\tcomponent_name,\n\t\t\t\t\targs: await component.convertStorageToParsed(\n\t\t\t\t\t\tjdd_context,\n\t\t\t\t\t\targs\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\t\tconst result = { ...raw, components: components_parsed };\n\t\treturn result;\n\t}\n\n\trenderPreParameterButtons(\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t_ctx: Context,\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t_state: JDDPageState\n\t): FlatTemplatable | Promise<FlatTemplatable> {\n\t\treturn \"\";\n\t}\n\n\tasync render(ctx: Context, state: JDDPageState): Promise<string> {\n\t\treturn tempstream /* HTML */ `<div\n\t\t\tclass=\"${[\"two-column\", \"component-debugger\", ...this.classes].join(\" \")}\"\n\t\t\tid=\"component-debugger\"\n\t\t\tstyle=\"${`--resizable-column-width: ${\n\t\t\t\tstate.preview_size ? state.preview_size + \"px\" : \"50vw\"\n\t\t\t}`}\"\n\t\t\tdata-controller=\"component-debugger\"\n\t\t>\n\t\t\t<div class=\"component-arguments\" id=\"component-arguments\">\n\t\t\t\t${this.renderPreParameterButtons(ctx, state)}\n\t\t\t\t${this.renderParameterButtons(state)}\n\t\t\t\t<ul\n\t\t\t\t\tid=\"jdd-editor-messages\"\n\t\t\t\t\tclass=\"jdd-editor__messages\"\n\t\t\t\t\tdata-controller=\"toast\"\n\t\t\t\t></ul>\n\t\t\t\t${state.components.map((component, component_index) =>\n\t\t\t\t\tthis.renderComponentBlock(\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\tcomponent,\n\t\t\t\t\t\tcomponent_index\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t\t<details\n\t\t\t\t\tclass=\"component-debugger__json\"\n\t\t\t\t\tdata-controller=\"exportable-textarea\"\n\t\t\t\t\tid=\"exportable-textarea\"\n\t\t\t\t\topen\n\t\t\t\t>\n\t\t\t\t\t<summary>Edit/Export raw JSON</summary>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tname=\"state_override\"\n\t\t\t\t\t\trows=\"40\"\n\t\t\t\t\t\tcols=\"40\"\n\t\t\t\t\t\tdata-controller=\"json-editor\"\n\t\t\t\t\t\tid=\"component-debugger-json-textarea\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t>\n\t\t\t\t\t\t${(await this.serializeState(ctx, state, true)).replaceAll(\"<\", \"&lt;\")}\n\t\t\t\t\t</textarea\n\t\t\t\t\t>\n\t\t\t\t\t${this.makeActionButton(state, {\n\t\t\t\t\t\taction: \"replace_state\",\n\t\t\t\t\t\tlabel: \"Apply\",\n\t\t\t\t\t})}\n\t\t\t\t\t<button data-action=\"exportable-textarea#copy\">Copy</button>\n\t\t\t\t\t<button data-action=\"exportable-textarea#download\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</button>\n\t\t\t\t\t<input type=\"file\" />${\" \"}\n\t\t\t\t\t<button data-action=\"exportable-textarea#import\">\n\t\t\t\t\t\tImport\n\t\t\t\t\t</button>\n\t\t\t\t</details>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tid=\"resize-gutter\"\n\t\t\t\tclass=\"resize-gutter\"\n\t\t\t\tdata-component-debugger-target=\"gutter\"\n\t\t\t></div>\n\t\t\t<div\n\t\t\t\tid=\"component-preview\"\n\t\t\t\tclass=\"component-preview\"\n\t\t\t\tdata-component-debugger-target=\"preview\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tid=\"component-preview__header\"\n\t\t\t\t\tclass=\"component-preview__header\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"component-preview__item\">\n\t\t\t\t\t\t<span>Window size</span>\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tname=\"$[preview_size]\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\tclass=\"component-preview-size-select\"\n\t\t\t\t\t\t\tdata-component-debugger-target=\"sizeSelect\"\n\t\t\t\t\t\t\tdata-action=\"change->component-debugger#handleWidthDropdown\"\n\t\t\t\t\t\t\tdata-turbo-permanent\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\tstate.preview_size\n\t\t\t\t\t\t\t\t\t? /* HTML */ `<option\n\t\t\t\t\t\t\t\t\t\t\tclass=\"dynamic\"\n\t\t\t\t\t\t\t\t\t\t\tvalue=\"${state.preview_size}\"\n\t\t\t\t\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t${state.preview_size} px\n\t\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t${this.previewSizes.map(\n\t\t\t\t\t\t\t\t(size) =>\n\t\t\t\t\t\t\t\t\t/* HTML */ `<option value=\"${size}\">\n\t\t\t\t\t\t\t\t\t\t${`${size} px`}\n\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<noscript>\n\t\t\t\t\t\t\t${this.makeActionButton(state, \"change_size\")}\n\t\t\t\t\t\t</noscript>\n\t\t\t\t\t</div>\n\t\t\t\t\t<style>\n\t\t\t\t\t\t.component-preview .component-raw-view {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview .jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.component-raw-view {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\t\t\t\t\t</style>\n\t\t\t\t\t<label class=\"component-preview__item\" for=\"show-html\">\n\t\t\t\t\t\tShow HTML\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tid=\"show-html\"\n\t\t\t\t\t\t\tclass=\"component-preview-checkbox\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t\t\t${(async () => {\n\t\t\t\t\t\t\tconst currentComponent = await JDD.render(\n\t\t\t\t\t\t\t\tthis.registry,\n\t\t\t\t\t\t\t\tdocumentContainerFromParsed(state.components),\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx)\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tlet currentComponentPrettified = currentComponent;\n\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\tcurrentComponentPrettified =\n\t\t\t\t\t\t\t\t\tawait prettier.format(currentComponent, {\n\t\t\t\t\t\t\t\t\t\tparser: \"html\",\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t\t\t\"JDD editor: couldn't format the html\"\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst highlightedHTML = hljs.highlight(\n\t\t\t\t\t\t\t\tcurrentComponentPrettified,\n\t\t\t\t\t\t\t\t{ language: \"html\" }\n\t\t\t\t\t\t\t).value;\n\t\t\t\t\t\t\treturn /* HTML */ ` <div\n\t\t\t\t\t\t\t\t\tclass=\"jdd-outer-container\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div class=\"jdd-container\">\n\t\t\t\t\t\t\t\t\t\t${currentComponent}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"component-raw-view\">\n\t\t\t\t\t\t\t\t\t<pre><code>${highlightedHTML}</code></pre>\n\t\t\t\t\t\t\t\t</div>`;\n\t\t\t\t\t\t})()}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>`;\n\t}\n\n\tasync renderWithMessages(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tmessages: { type: \"error\" | \"success\"; content: string }[]\n\t): Promise<string> {\n\t\treturn tempstream /* HTML */ `${this.render(ctx, state)}\n\t\t${messages\n\t\t\t.map(\n\t\t\t\t({ type, content }) =>\n\t\t\t\t\t/* HTML */ `<turbo-stream\n\t\t\t\t\t\taction=\"append\"\n\t\t\t\t\t\ttarget=\"jdd-editor-messages\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<template>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"jdd-editor__message jdd-editor__message--${type}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t${content}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</turbo-stream>`\n\t\t\t)\n\t\t\t.join(\"\")}`;\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/restrict-template-expressions */\nimport type { Readable } from \"node:stream\";\nimport type { Component, JDDContext, RawJDDocument } from \"@sealcode/jdd\";\nimport { documentContainerFromParsed, Registry } from \"@sealcode/jdd\";\nimport { JDD } from \"@sealcode/jdd\";\nimport { StatefulPage } from \"@sealcode/sealgen\";\nimport { hasFieldOfType, hasShape, predicates } from \"@sealcode/ts-predicates\";\nimport type { Context } from \"koa\";\nimport type { FlatTemplatable, Templatable } from \"tempstream\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInput } from \"./inputs/component-input.js\";\nimport { ComponentPreviewActions } from \"./component-preview-actions.js\";\nimport prettier from \"prettier\";\nimport hljs from \"highlight.js\";\n\nexport const actionName = \"Components\";\n\nexport type JDDPageState = {\n\tcomponents: RawJDDocument;\n\tpreview_size?: string;\n};\n\nexport default abstract class JDDPage extends StatefulPage<\n\tJDDPageState,\n\ttypeof ComponentPreviewActions\n> {\n\tactions = ComponentPreviewActions;\n\n\tpreviewSizes = [\"320\", \"600\", \"800\", \"1024\", \"1300\", \"1920\"];\n\tclasses: string[] = [];\n\n\tpublic registry: Registry;\n\tpublic makeJDDContext: (ctx: Context) => JDDContext;\n\tpublic html: (\n\t\targs: unknown\n\t) => string | Promise<string> | Readable | Promise<Readable>;\n\tpublic defaultHead: (\n\t\t...args: unknown[]\n\t) => string | Promise<string> | Readable | Promise<Readable>;\n\tpublic makeAssetURL: (asset: string) => string;\n\n\tconstructor(args: {\n\t\tregistry: Registry;\n\t\tmakeJDDContext: (ctx: Context) => JDDContext;\n\t\thtml: (\n\t\t\targs: unknown\n\t\t) => string | Promise<string> | Readable | Promise<Readable>;\n\t\tdefaultHead: (\n\t\t\t...args: unknown[]\n\t\t) => string | Promise<string> | Readable | Promise<Readable>;\n\t\tmakeAssetURL?: (asset: string) => string;\n\t}) {\n\t\tsuper();\n\t\tthis.registry = args.registry;\n\t\tthis.makeJDDContext = args.makeJDDContext;\n\t\tthis.defaultHead = args.defaultHead;\n\t\tthis.html = args.html;\n\t\tthis.makeAssetURL =\n\t\t\targs.makeAssetURL ||\n\t\t\t((str) =>\n\t\t\t\t`/dist/jdd-page/${str.startsWith(\"/\") ? str.slice(1) : str}`);\n\t}\n\n\tgetRegistryComponents() {\n\t\treturn this.registry.getAll();\n\t}\n\n\tasync getInitialState(ctx: Context): Promise<JDDPageState> {\n\t\tconst initial_state = {\n\t\t\tcomponents: [],\n\t\t};\n\t\treturn initial_state;\n\t}\n\n\twrapInLayout(\n\t\tctx: Context,\n\t\tcontent: Templatable,\n\t\tstate: JDDPageState\n\t): Templatable {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\tconst jdd = new JDD(\n\t\t\tthis.registry,\n\t\t\tjdd_context,\n\t\t\tdocumentContainerFromParsed(state.components)\n\t\t);\n\t\treturn this.html({\n\t\t\tctx,\n\t\t\ttitle: \"Components\",\n\t\t\tbody: content,\n\t\t\tdescription: \"\",\n\t\t\tcss_clumps: [\"jdd-page\", ...jdd.getAllCSSClumps()],\n\t\t\thtmlOptions: {\n\t\t\t\tmorphing: true,\n\t\t\t\tpreserveScroll: true,\n\t\t\t\tautoRefreshCSS: false,\n\t\t\t\tnavbar: () => ``,\n\t\t\t\tbodyClasses: [\"jdd-editor\"],\n\t\t\t\tshowBottomNavbar: false,\n\t\t\t\tshowBanner: false,\n\t\t\t\tshowFooter: false,\n\t\t\t\tloadHamburgerMenu: false,\n\t\t\t\tloadSearchModal: false,\n\t\t\t},\n\t\t\tmakeHead: (...args: unknown[]) =>\n\t\t\t\ttempstream /* HTML */ `${this.defaultHead(...args)}\n\t\t\t\t\t<link\n\t\t\t\t\t\thref=\"/dist/jdd-page.entrypoint.css\"\n\t\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\t\ttype=\"text/css\"\n\t\t\t\t\t/>\n\t\t\t\t\t${jdd.renderEarlyAssets()}`,\n\t\t});\n\t}\n\n\tasync preprocessOverrides(\n\t\t_ctx: Context,\n\t\tstate: JDDPageState,\n\t\toverrides: Record<string, unknown>\n\t) {\n\t\tconst jdd_context = this.makeJDDContext(_ctx);\n\t\tif (\n\t\t\t!hasFieldOfType(\n\t\t\t\t\"components\",\n\t\t\t\toverrides,\n\t\t\t\tpredicates.array(\n\t\t\t\t\tpredicates.shape({\n\t\t\t\t\t\targs: predicates.object,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t)\n\t\t) {\n\t\t\treturn {};\n\t\t}\n\t\tfor (const [component_index, { component_name }] of Object.entries(\n\t\t\tstate.components\n\t\t)) {\n\t\t\tconst component = this.registry.get(component_name);\n\t\t\tif (!component) {\n\t\t\t\tthrow new Error(`Unknown component: ${component_name}`);\n\t\t\t}\n\t\t\tconst overrides_for_component = overrides.components[\n\t\t\t\tparseInt(component_index)\n\t\t\t] || { args: {} };\n\t\t\tconst promises = Object.entries(component.getArguments()).map(\n\t\t\t\tasync ([arg_name, arg]) => {\n\t\t\t\t\tconst value = overrides_for_component.args[arg_name];\n\t\t\t\t\tif (value) {\n\t\t\t\t\t\tconst new_value = await arg.receivedToParsed(\n\t\t\t\t\t\t\tjdd_context,\n\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t);\n\t\t\t\t\t\toverrides_for_component.args[arg_name] = new_value;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t);\n\t\t\t// eslint-disable-next-line no-await-in-loop\n\t\t\tawait Promise.all(promises);\n\t\t}\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\treturn overrides;\n\t}\n\n\t// eslint-disable-next-line no-unused-vars\n\tabstract renderParameterButtons(_state: JDDPageState): FlatTemplatable;\n\n\tasync renderComponentArgs<C extends Component>(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tcomponent: C,\n\t\targs: Record<string, unknown>,\n\t\tindex: number\n\t): Promise<FlatTemplatable> {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\treturn tempstream /* HTML */ `<div\n\t\t\tclass=\"component-preview-parameters\"\n\t\t\tid=\"${`component-preview-parameters--${index}`}\"\n\t\t>\n\t\t\t${Object.entries(component.getArguments()).map(\n\t\t\t\tasync ([arg_name, arg]) =>\n\t\t\t\t\tComponentInput({\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\"components\",\n\t\t\t\t\t\t\tindex.toString(),\n\t\t\t\t\t\t\t\"args\",\n\t\t\t\t\t\t\targ_name,\n\t\t\t\t\t\t],\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\targ,\n\t\t\t\t\t\tvalue:\n\t\t\t\t\t\t\targs[arg_name] === undefined ||\n\t\t\t\t\t\t\tcomponent\n\t\t\t\t\t\t\t\t.getArguments()\n\t\t\t\t\t\t\t\t[arg_name]?.isEmpty(args[arg_name])\n\t\t\t\t\t\t\t\t? await arg.getExampleValue(jdd_context)\n\t\t\t\t\t\t\t\t: args[arg_name],\n\t\t\t\t\t\tpage: this,\n\t\t\t\t\t\tmakeJDDContext: this.makeJDDContext,\n\t\t\t\t\t\tmakeAssetURL: this.makeAssetURL,\n\t\t\t\t\t\tcomponent,\n\t\t\t\t\t})\n\t\t\t)}\n\t\t</div>`;\n\t}\n\n\trenderComponentBlock(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\t{\n\t\t\tcomponent_name,\n\t\t\targs: component_args,\n\t\t}: {\n\t\t\tcomponent_name: string;\n\t\t\targs: Record<string, unknown>;\n\t\t},\n\t\tcomponent_index: number\n\t) {\n\t\tconst component = this.registry.get(component_name);\n\t\tif (!component) {\n\t\t\treturn null;\n\t\t}\n\t\treturn this.renderComponentArgs(\n\t\t\tctx,\n\t\t\tstate,\n\t\t\tcomponent,\n\t\t\tcomponent_args,\n\t\t\tcomponent_index\n\t\t);\n\t}\n\n\tasync serializeState(ctx: Context, state: JDDPageState, pretty = false) {\n\t\tconst serialized_components = await Promise.all(\n\t\t\tstate.components.map(async ({ component_name, args }) => {\n\t\t\t\tconst component = this.registry.get(component_name);\n\t\t\t\tconst single_result = {\n\t\t\t\t\tcomponent_name,\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n\t\t\t\t\targs: component\n\t\t\t\t\t\t? await component.convertParsedToStorage(\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx),\n\t\t\t\t\t\t\t\targs\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t: {},\n\t\t\t\t};\n\t\t\t\treturn single_result;\n\t\t\t})\n\t\t);\n\t\tconst serialized_state = JSON.stringify(\n\t\t\t{ ...state, components: serialized_components },\n\t\t\tnull,\n\t\t\tpretty ? 4 : \"\"\n\t\t);\n\t\treturn serialized_state;\n\t}\n\n\tasync deserializeState(ctx: Context, state_string: string) {\n\t\tconst jdd_context = this.makeJDDContext(ctx);\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst raw = JSON.parse(state_string) as Record<string, unknown>;\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n\t\tconst components_storage = raw.components;\n\t\tif (!Array.isArray(components_storage)) {\n\t\t\tthrow new Error(\n\t\t\t\t\"'components' key is not an array, got ${components_storage}\"\n\t\t\t);\n\t\t}\n\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\tconst components_parsed = await Promise.all(\n\t\t\tcomponents_storage.map(async (entry) => {\n\t\t\t\tif (\n\t\t\t\t\t!hasShape(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tcomponent_name: predicates.string,\n\t\t\t\t\t\t\targs: predicates.object,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tentry\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t`Expected components[] items to be objects with 'component_name' and 'args' keys, got ${entry}`\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tconst { component_name, args } = entry;\n\t\t\t\tconst component = this.registry.get(component_name);\n\t\t\t\tif (!component) {\n\t\t\t\t\tthrow new Error(\"Unknown component: ${component_name}\");\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\tcomponent_name,\n\t\t\t\t\targs: await component.convertStorageToParsed(\n\t\t\t\t\t\tjdd_context,\n\t\t\t\t\t\targs\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\t\tconst result = { ...raw, components: components_parsed };\n\t\treturn result;\n\t}\n\n\trenderPreParameterButtons(\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t_ctx: Context,\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t_state: JDDPageState\n\t): FlatTemplatable | Promise<FlatTemplatable> {\n\t\treturn \"\";\n\t}\n\n\tasync render(ctx: Context, state: JDDPageState): Promise<string> {\n\t\treturn tempstream /* HTML */ `<div\n\t\t\tclass=\"${[\"two-column\", \"component-debugger\", ...this.classes].join(\" \")}\"\n\t\t\tid=\"component-debugger\"\n\t\t\tstyle=\"${`--resizable-column-width: ${\n\t\t\t\tstate.preview_size ? state.preview_size + \"px\" : \"50vw\"\n\t\t\t}`}\"\n\t\t\tdata-controller=\"component-debugger\"\n\t\t>\n\t\t\t<div class=\"component-arguments\" id=\"component-arguments\">\n\t\t\t\t${this.renderPreParameterButtons(ctx, state)}\n\t\t\t\t${this.renderParameterButtons(state)}\n\t\t\t\t<ul\n\t\t\t\t\tid=\"jdd-editor-messages\"\n\t\t\t\t\tclass=\"jdd-editor__messages\"\n\t\t\t\t\tdata-controller=\"toast\"\n\t\t\t\t></ul>\n\t\t\t\t${state.components.map((component, component_index) =>\n\t\t\t\t\tthis.renderComponentBlock(\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\tcomponent,\n\t\t\t\t\t\tcomponent_index\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t\t<details\n\t\t\t\t\tclass=\"component-debugger__json\"\n\t\t\t\t\tdata-controller=\"exportable-textarea\"\n\t\t\t\t\tid=\"exportable-textarea\"\n\t\t\t\t\topen\n\t\t\t\t>\n\t\t\t\t\t<summary>Edit/Export raw JSON</summary>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tname=\"state_override\"\n\t\t\t\t\t\trows=\"40\"\n\t\t\t\t\t\tcols=\"40\"\n\t\t\t\t\t\tdata-controller=\"json-editor\"\n\t\t\t\t\t\tid=\"component-debugger-json-textarea\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t>\n\t\t\t\t\t\t${(await this.serializeState(ctx, state, true)).replaceAll(\"<\", \"&lt;\")}\n\t\t\t\t\t</textarea\n\t\t\t\t\t>\n\t\t\t\t\t${this.makeActionButton(state, {\n\t\t\t\t\t\taction: \"replace_state\",\n\t\t\t\t\t\tlabel: \"Apply\",\n\t\t\t\t\t})}\n\t\t\t\t\t<button data-action=\"exportable-textarea#copy\">Copy</button>\n\t\t\t\t\t<button data-action=\"exportable-textarea#download\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</button>\n\t\t\t\t\t<input type=\"file\" />${\" \"}\n\t\t\t\t\t<button data-action=\"exportable-textarea#import\">\n\t\t\t\t\t\tImport\n\t\t\t\t\t</button>\n\t\t\t\t</details>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tid=\"resize-gutter\"\n\t\t\t\tclass=\"resize-gutter\"\n\t\t\t\tdata-component-debugger-target=\"gutter\"\n\t\t\t></div>\n\t\t\t<div\n\t\t\t\tid=\"component-preview\"\n\t\t\t\tclass=\"component-preview\"\n\t\t\t\tdata-component-debugger-target=\"preview\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tid=\"component-preview__header\"\n\t\t\t\t\tclass=\"component-preview__header\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"component-preview__item\">\n\t\t\t\t\t\t<span>Window size</span>\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tname=\"$[preview_size]\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\tclass=\"component-preview-size-select\"\n\t\t\t\t\t\t\tdata-component-debugger-target=\"sizeSelect\"\n\t\t\t\t\t\t\tdata-action=\"change->component-debugger#handleWidthDropdown\"\n\t\t\t\t\t\t\tdata-turbo-permanent\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\tstate.preview_size\n\t\t\t\t\t\t\t\t\t? /* HTML */ `<option\n\t\t\t\t\t\t\t\t\t\t\tclass=\"dynamic\"\n\t\t\t\t\t\t\t\t\t\t\tvalue=\"${state.preview_size}\"\n\t\t\t\t\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t${state.preview_size} px\n\t\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t${this.previewSizes.map(\n\t\t\t\t\t\t\t\t(size) =>\n\t\t\t\t\t\t\t\t\t/* HTML */ `<option value=\"${size}\">\n\t\t\t\t\t\t\t\t\t\t${`${size} px`}\n\t\t\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t\t<noscript>\n\t\t\t\t\t\t\t${this.makeActionButton(state, \"change_size\")}\n\t\t\t\t\t\t</noscript>\n\t\t\t\t\t</div>\n\t\t\t\t\t<style>\n\t\t\t\t\t\t.component-preview .component-raw-view {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview .jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.component-raw-view {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.component-preview:has(\n\t\t\t\t\t\t\t\t.component-preview-checkbox:checked\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.jdd-outer-container {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\t\t\t\t\t</style>\n\t\t\t\t\t<label class=\"component-preview__item\" for=\"show-html\">\n\t\t\t\t\t\tShow HTML\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tid=\"show-html\"\n\t\t\t\t\t\t\tclass=\"component-preview-checkbox\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t\t\t${(async () => {\n\t\t\t\t\t\t\tconst currentComponent = await JDD.render(\n\t\t\t\t\t\t\t\tthis.registry,\n\t\t\t\t\t\t\t\tdocumentContainerFromParsed(state.components),\n\t\t\t\t\t\t\t\tthis.makeJDDContext(ctx)\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tlet currentComponentPrettified = currentComponent;\n\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\tcurrentComponentPrettified =\n\t\t\t\t\t\t\t\t\tawait prettier.format(currentComponent, {\n\t\t\t\t\t\t\t\t\t\tparser: \"html\",\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t\t\t\"JDD editor: couldn't format the html\"\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst highlightedHTML = hljs.highlight(\n\t\t\t\t\t\t\t\tcurrentComponentPrettified,\n\t\t\t\t\t\t\t\t{ language: \"html\" }\n\t\t\t\t\t\t\t).value;\n\t\t\t\t\t\t\treturn /* HTML */ ` <div\n\t\t\t\t\t\t\t\t\tclass=\"jdd-outer-container\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div class=\"jdd-container\">\n\t\t\t\t\t\t\t\t\t\t${currentComponent}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"component-raw-view\">\n\t\t\t\t\t\t\t\t\t<pre><code>${highlightedHTML}</code></pre>\n\t\t\t\t\t\t\t\t</div>`;\n\t\t\t\t\t\t})()}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>`;\n\t}\n\n\tasync renderWithMessages(\n\t\tctx: Context,\n\t\tstate: JDDPageState,\n\t\tmessages: { type: \"error\" | \"success\"; content: string }[]\n\t): Promise<string> {\n\t\treturn tempstream /* HTML */ `${this.render(ctx, state)}\n\t\t${messages\n\t\t\t.map(\n\t\t\t\t({ type, content }) =>\n\t\t\t\t\t/* HTML */ `<turbo-stream\n\t\t\t\t\t\taction=\"append\"\n\t\t\t\t\t\ttarget=\"jdd-editor-messages\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<template>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"jdd-editor__message jdd-editor__message--${type}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t${content}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</turbo-stream>`\n\t\t\t)\n\t\t\t.join(\"\")}`;\n\t}\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/jdd-editor",
-	"version": "0.2.15",
+	"version": "0.2.17",
 	"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-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-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,8 @@ import {
 	SingleReference,
 	Structured,
 	Table,
+	CodeWithCustomLanguage,
+	Markdown,
 } from "@sealcode/jdd";
 import type { StatefulPage } from "@sealcode/sealgen";
 import { is, predicates } from "@sealcode/ts-predicates";
@@ -30,6 +37,9 @@ 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";
+
 export const actionName = "Components";
 const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
 
@@ -42,6 +52,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 	page,
 	makeJDDContext,
 	makeAssetURL,
+	component,
 }: {
 	state: State;
 	ctx: Context;
@@ -51,6 +62,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 +92,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 			page,
 			makeJDDContext,
 			makeAssetURL,
+			component,
 		});
 	}
 
@@ -92,6 +105,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 +132,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 			page,
 			makeJDDContext,
 			makeAssetURL,
+			component,
 		});
 	}
 
@@ -155,6 +185,7 @@ export async function ComponentInput<State extends JDDPageState, T>({
 			page,
 			makeJDDContext,
 			makeAssetURL,
+			component,
 		});
 	}
 
@@ -163,9 +194,14 @@ export async function ComponentInput<State extends JDDPageState, T>({
 			language: arg.language,
 			value: is(value, predicates.string) ? value : "",
 			arg_path,
+			component,
 		});
 	}
 
+	if (arg instanceof Markdown) {
+		return ComponentInputMarkdown({ arg_path, value, component });
+	}
+
 	const inputElement = () => {
 		if (arg instanceof ComponentArguments.Number) {
 			return tempstream /* HTML */ ` <input
@@ -196,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>`;
 }

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>`;