@sealcode/jdd-editor 0.1.0

package/dist/src/jdd-page.js

@@ -0,0 +1,339 @@
+import { documentContainerFromParsed } from "@sealcode/jdd";
+import { JDD } from "@sealcode/jdd";
+import { StatefulPage } from "@sealcode/sealgen";
+import { hasFieldOfType, hasShape, predicates } from "@sealcode/ts-predicates";
+import { tempstream } from "tempstream";
+import { ComponentInput } from "./inputs/component-input.js";
+import { ComponentPreviewActions } from "./component-preview-actions.js";
+const actionName = "Components";
+class JDDPage extends StatefulPage {
+  constructor(args) {
+    super();
+    this.actions = ComponentPreviewActions;
+    this.previewSizes = ["320", "600", "800", "1024", "1300", "1920"];
+    this.classes = [];
+    this.registry = args.registry;
+    this.makeJDDContext = args.makeJDDContext;
+    this.defaultHead = args.defaultHead;
+    this.html = args.html;
+    this.makeAssetURL = args.makeAssetURL || ((str) => `/dist/jdd-page/${str.startsWith("/") ? str.slice(1) : str}`);
+  }
+  getRegistryComponents() {
+    return this.registry.getAll();
+  }
+  async getInitialState(ctx) {
+    const all_components = Object.entries(this.getRegistryComponents());
+    const first_component = all_components[0];
+    if (!first_component) {
+      throw new Error("No defined components!");
+    }
+    const [component_name, component] = first_component;
+    const initial_state = {
+      components: [
+        {
+          component_name,
+          args: await component.getExampleValues(
+            this.makeJDDContext(ctx)
+          )
+        }
+      ]
+    };
+    return initial_state;
+  }
+  wrapInLayout(ctx, content, state) {
+    const jdd = new JDD(
+      this.registry,
+      this.makeJDDContext(ctx),
+      documentContainerFromParsed(state.components)
+    );
+    return this.html({
+      ctx,
+      title: "Components",
+      body: content,
+      description: "",
+      css_clumps: ["jdd-page", ...jdd.getAllCSSClumps()],
+      htmlOptions: {
+        morphing: true,
+        preserveScroll: true,
+        autoRefreshCSS: false,
+        navbar: () => ``,
+        bodyClasses: ["jdd-editor"],
+        showBottomNavbar: false,
+        showBanner: false,
+        showFooter: false,
+        loadHamburgerMenu: false,
+        loadSearchModal: false
+      },
+      makeHead: (...args) => tempstream`${this.defaultHead(...args)}
+					<link
+						href="/dist/jdd-page.entrypoint.css"
+						rel="stylesheet"
+						type="text/css"
+					/>
+					${jdd.renderEarlyAssets()}`
+    });
+  }
+  async preprocessOverrides(_ctx, state, overrides) {
+    const jdd_context = this.makeJDDContext(_ctx);
+    if (!hasFieldOfType(
+      "components",
+      overrides,
+      predicates.array(
+        predicates.shape({
+          args: predicates.object
+        })
+      )
+    )) {
+      return {};
+    }
+    for (const [component_index, { component_name }] of Object.entries(
+      state.components
+    )) {
+      const component = this.registry.get(component_name);
+      if (!component) {
+        throw new Error(`Unknown component: ${component_name}`);
+      }
+      const overrides_for_component = overrides.components[parseInt(component_index)] || { args: {} };
+      const promises = Object.entries(component.getArguments()).map(
+        async ([arg_name, arg]) => {
+          const value = overrides_for_component.args[arg_name];
+          if (value) {
+            const new_value = await arg.receivedToParsed(
+              jdd_context,
+              value
+            );
+            overrides_for_component.args[arg_name] = new_value;
+          }
+        }
+      );
+      await Promise.all(promises);
+    }
+    return overrides;
+  }
+  renderComponentArgs(ctx, state, component, args, index) {
+    const jdd_context = this.makeJDDContext(ctx);
+    return tempstream`<div
+			class="component-preview-parameters"
+			id="${`component-preview-parameters--${index}`}"
+		>
+			${Object.entries(component.getArguments()).map(
+      async ([arg_name, arg]) => ComponentInput({
+        state,
+        arg_path: [
+          "components",
+          index.toString(),
+          "args",
+          arg_name
+        ],
+        ctx,
+        arg,
+        value: args[arg_name] === void 0 ? arg.getExampleValue(jdd_context) : args[arg_name],
+        page: this,
+        makeJDDContext: this.makeJDDContext,
+        makeAssetURL: this.makeAssetURL
+      })
+    )}
+		</div>`;
+  }
+  renderComponentBlock(ctx, state, {
+    component_name,
+    args: component_args
+  }, component_index) {
+    const component = this.registry.get(component_name);
+    if (!component) {
+      return null;
+    }
+    return this.renderComponentArgs(
+      ctx,
+      state,
+      component,
+      component_args,
+      component_index
+    );
+  }
+  async serializeState(ctx, state, pretty = false) {
+    console.time("serializing state");
+    const serialized_components = await Promise.all(
+      state.components.map(async ({ component_name, args }) => {
+        const component = this.registry.get(component_name);
+        const single_result = {
+          component_name,
+          args: component ? await component.convertParsedToStorage(
+            this.makeJDDContext(ctx),
+            args
+          ) : {}
+        };
+        return single_result;
+      })
+    );
+    const serialized_state = JSON.stringify(
+      { components: serialized_components },
+      null,
+      pretty ? 4 : ""
+    );
+    console.timeEnd("serializing state");
+    return serialized_state;
+  }
+  async deserializeState(ctx, state_string) {
+    const jdd_context = this.makeJDDContext(ctx);
+    const raw = JSON.parse(state_string);
+    const components_storage = raw.components;
+    if (!Array.isArray(components_storage)) {
+      throw new Error(
+        "'components' key is not an array, got ${components_storage}"
+      );
+    }
+    const components_parsed = await Promise.all(
+      components_storage.map(async (entry) => {
+        if (!hasShape(
+          {
+            component_name: predicates.string,
+            args: predicates.object
+          },
+          entry
+        )) {
+          throw new Error(
+            `Expected components[] items to be objects with 'component_name' and 'args' keys, got ${entry}`
+          );
+        }
+        const { component_name, args } = entry;
+        const component = this.registry.get(component_name);
+        if (!component) {
+          throw new Error("Unknown component: ${component_name}");
+        }
+        return {
+          component_name,
+          args: await component.convertStorageToParsed(
+            jdd_context,
+            args
+          )
+        };
+      })
+    );
+    const result = { components: components_parsed };
+    return result;
+  }
+  renderPreParameterButtons(_ctx, _state) {
+    return "";
+  }
+  renderMessages(_ctx, state) {
+    return `<ul
+			class="jdd-editor__messages"
+			data-controller="toast"
+		>
+			${(state.messages || []).map(
+      (e) => `<li class="jdd-editor__message">${e}</li>`
+    )}
+		</ul>`;
+  }
+  async render(ctx, state) {
+    return tempstream`<div
+			class="${["two-column", "component-debugger", ...this.classes].join(
+      " "
+    )}"
+			id="component-debugger"
+			style="${`--resizable-column-width: ${state.preview_size ? state.preview_size + "px" : "50vw"}`}"
+			data-controller="component-debugger"
+		>
+			<div class="component-arguments" id="component-arguments">
+				${this.renderPreParameterButtons(ctx, state)}
+				${this.renderParameterButtons(state)}
+				${this.renderMessages(ctx, state)}
+				${state.components.map(
+      (component, component_index) => this.renderComponentBlock(
+        ctx,
+        state,
+        component,
+        component_index
+      )
+    )}
+				<details
+					class="component-debugger__json"
+					data-controller="exportable-textarea"
+					id="exportable-textarea"
+					open
+				>
+					<summary>Edit/Export raw JSON</summary>
+					<textarea
+						name="state_override"
+						rows="40"
+						cols="40"
+						data-controller="json-editor"
+						id="component-debugger-json-textarea"
+						autocomplete="off"
+					>
+							${(await this.serializeState(ctx, state, true)).replaceAll("<", "&lt;")}
+						</textarea
+					>
+					${this.makeActionButton(state, {
+      action: "replace_state",
+      label: "Apply"
+    })}
+					<button data-action="exportable-textarea#copy">Copy</button>
+					<button data-action="exportable-textarea#download">
+						Download
+					</button>
+					<input type="file" />${" "}
+					<button data-action="exportable-textarea#import">
+						Import
+					</button>
+				</details>
+			</div>
+			<div
+				id="resize-gutter"
+				class="resize-gutter"
+				data-component-debugger-target="gutter"
+			></div>
+			<div
+				id="component-preview"
+				class="component-preview"
+				data-component-debugger-target="preview"
+			>
+				<div
+					id="component-preview__header"
+					class="component-preview__header"
+				>
+					<span>Preview</span>
+					<select
+						name="$[preview_size]"
+						autocomplete="off"
+						class="component-preview-size-select"
+						data-component-debugger-target="sizeSelect"
+						data-action="change->component-debugger#handleWidthDropdown"
+						data-turbo-data-turbo-permanent
+					>
+						${state.preview_size ? `<option
+									class="dynamic"
+									value="${state.preview_size}"
+									selected
+							  >
+									${state.preview_size} px
+							  </option>` : ""}
+						${this.previewSizes.map(
+      (size) => `<option value="${size}">
+								${`${size} px`}
+							</option>`
+    )}
+					</select>
+					<noscript>
+						${this.makeActionButton(state, "change_size")}
+					</noscript>
+				</div>
+				<div class="jdd-outer-container">
+					<div class="jdd-container">
+						${JDD.render(
+      this.registry,
+      documentContainerFromParsed(state.components),
+      this.makeJDDContext(ctx)
+    )}
+					</div>
+				</div>
+			</div>
+		</div>`;
+  }
+}
+export {
+  actionName,
+  JDDPage as default
+};
+//# sourceMappingURL=jdd-page.js.map

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

@@ -0,0 +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\";\n\nexport const actionName = \"Components\";\n\nexport type JDDPageState = {\n\tcomponents: RawJDDocument;\n\tpreview_size?: string;\n\tmessages?: 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) {\n\t\tconst all_components = Object.entries(this.getRegistryComponents());\n\t\tconst first_component = all_components[0];\n\t\tif (!first_component) {\n\t\t\tthrow new Error(\"No defined components!\");\n\t\t}\n\t\tconst [component_name, component] = first_component;\n\t\tconst initial_state = {\n\t\t\tcomponents: [\n\t\t\t\t{\n\t\t\t\t\tcomponent_name: component_name,\n\t\t\t\t\targs: await component.getExampleValues(\n\t\t\t\t\t\tthis.makeJDDContext(ctx)\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t],\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 = new JDD(\n\t\t\tthis.registry,\n\t\t\tthis.makeJDDContext(ctx),\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\trenderComponentArgs<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): 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\t\t? 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\tconsole.time(\"serializing state\");\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  )\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{ components: serialized_components },\n\t\t\tnull,\n\t\t\tpretty ? 4 : \"\"\n\t\t);\n\t\tconsole.timeEnd(\"serializing state\");\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);\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 = { 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\trenderMessages(_ctx: Context, state: JDDPageState) {\n\t\treturn /* HTML */ `<ul\n\t\t\tclass=\"jdd-editor__messages\"\n\t\t\tdata-controller=\"toast\"\n\t\t>\n\t\t\t${(state.messages || []).map(\n\t\t\t\t(e) => `<li class=\"jdd-editor__message\">${e}</li>`\n\t\t\t)}\n\t\t</ul>`;\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\t\t\" \"\n\t\t\t)}\"\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${this.renderMessages(ctx, state)}\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\t${(await this.serializeState(ctx, state, true)).replaceAll(\"<\", \"&lt;\")}\n\t\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<span>Preview</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tname=\"$[preview_size]\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\tclass=\"component-preview-size-select\"\n\t\t\t\t\t\tdata-component-debugger-target=\"sizeSelect\"\n\t\t\t\t\t\tdata-action=\"change->component-debugger#handleWidthDropdown\"\n\t\t\t\t\t\tdata-turbo-data-turbo-permanent\n\t\t\t\t\t>\n\t\t\t\t\t\t${state.preview_size\n\t\t\t\t\t\t\t? /* HTML */ `<option\n\t\t\t\t\t\t\t\t\tclass=\"dynamic\"\n\t\t\t\t\t\t\t\t\tvalue=\"${state.preview_size}\"\n\t\t\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t  >\n\t\t\t\t\t\t\t\t\t${state.preview_size} px\n\t\t\t\t\t\t\t  </option>`\n\t\t\t\t\t\t\t: \"\"}\n\t\t\t\t\t\t${this.previewSizes.map(\n\t\t\t\t\t\t\t(size) => /* HTML */ `<option value=\"${size}\">\n\t\t\t\t\t\t\t\t${`${size} px`}\n\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t)}\n\t\t\t\t\t</select>\n\t\t\t\t\t<noscript>\n\t\t\t\t\t\t${this.makeActionButton(state, \"change_size\")}\n\t\t\t\t\t</noscript>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"jdd-outer-container\">\n\t\t\t\t\t<div class=\"jdd-container\">\n\t\t\t\t\t\t${JDD.render(\n\t\t\t\t\t\t\tthis.registry,\n\t\t\t\t\t\t\tdocumentContainerFromParsed(state.components),\n\t\t\t\t\t\t\tthis.makeJDDContext(ctx)\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"],
+  "mappings": "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",
+  "names": []
+}

package/dist/src/jdd-table-paste.stimulus.js

@@ -0,0 +1,78 @@
+import { Controller } from "stimulus";
+import TurndownService from "turndown";
+import objectPath from "object-path";
+const turndownService = new TurndownService();
+class jdd_table_paste_stimulus_default extends Controller {
+  connect() {
+    this.element.addEventListener("click", async () => {
+      const clipboardContents = await navigator.clipboard.read();
+      for (const item of clipboardContents) {
+        if (!item.types.includes("text/html")) {
+          alert(
+            "Nie mo\u017Cna skopiowa\u0107 tabeli - nie znaleziono danych HTML"
+          );
+          return;
+        }
+        const blob = await item.getType("text/html");
+        const html = await blob.text();
+        const div = document.createElement("div");
+        div.innerHTML = html;
+        const table = div.querySelector("table");
+        if (!table) {
+          alert("No table in clipboard");
+        }
+        const rows = Array.from(
+          (table == null ? void 0 : table.querySelectorAll("tr")) || []
+        ).map((tr) => {
+          const cells = Array.from(tr.querySelectorAll("td"));
+          return {
+            type: "row",
+            cells: cells.map(
+              (cell) => turndownService.turndown(cell)
+            )
+          };
+        });
+        const form = this.element.closest("form");
+        const json_textarea = document.getElementById(
+          "component-debugger-json-textarea"
+        );
+        if (!json_textarea) {
+          console.error(
+            "Could not find json textarea with the jdd state"
+          );
+          return;
+        }
+        if (!form) {
+          throw new Error("Not inside a form");
+        }
+        const handler = () => {
+          document.removeEventListener("turbo:morph", handler);
+          const state = JSON.parse(json_textarea.value);
+          objectPath.set(state, this.argpathValue, {
+            rows
+          });
+          json_textarea.childNodes[0].textContent = JSON.stringify(state);
+          setTimeout(() => {
+            const submitter_button = document.createElement("button");
+            submitter_button.setAttribute(
+              "formaction",
+              "./?action=replace_state&action_args=W10="
+            );
+            form.appendChild(submitter_button);
+            form.requestSubmit(submitter_button);
+            submitter_button.remove();
+          }, 0);
+        };
+        document.addEventListener("turbo:morph", handler);
+        form.requestSubmit();
+      }
+    });
+  }
+}
+jdd_table_paste_stimulus_default.values = {
+  argpath: String
+};
+export {
+  jdd_table_paste_stimulus_default as default
+};
+//# sourceMappingURL=jdd-table-paste.stimulus.js.map

package/dist/src/jdd-table-paste.stimulus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/jdd-table-paste.stimulus.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\n/* eslint-disable @typescript-eslint/consistent-type-assertions */\n/* eslint-disable no-await-in-loop */\n/* eslint-disable @typescript-eslint/no-misused-promises */\nimport { Controller } from \"stimulus\";\nimport TurndownService from \"turndown\";\nimport objectPath from \"object-path\";\n\nconst turndownService = new TurndownService();\n\nexport default class extends Controller<HTMLButtonElement> {\n\tdeclare argpathValue: string;\n\tstatic values = {\n\t\targpath: String,\n\t};\n\n\tconnect() {\n\t\tthis.element.addEventListener(\"click\", async () => {\n\t\t\tconst clipboardContents = await navigator.clipboard.read();\n\t\t\tfor (const item of clipboardContents) {\n\t\t\t\tif (!item.types.includes(\"text/html\")) {\n\t\t\t\t\talert(\n\t\t\t\t\t\t\"Nie mo\u017Cna skopiowa\u0107 tabeli - nie znaleziono danych HTML\"\n\t\t\t\t\t);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst blob = await item.getType(\"text/html\");\n\t\t\t\tconst html = await blob.text();\n\t\t\t\tconst div = document.createElement(\"div\");\n\t\t\t\tdiv.innerHTML = html;\n\t\t\t\tconst table = div.querySelector(\"table\");\n\t\t\t\tif (!table) {\n\t\t\t\t\talert(\"No table in clipboard\");\n\t\t\t\t}\n\t\t\t\tconst rows = Array.from(\n\t\t\t\t\ttable?.querySelectorAll(\"tr\") || []\n\t\t\t\t).map((tr) => {\n\t\t\t\t\tconst cells = Array.from(tr.querySelectorAll(\"td\"));\n\t\t\t\t\treturn {\n\t\t\t\t\t\ttype: \"row\",\n\t\t\t\t\t\tcells: cells.map((cell) =>\n\t\t\t\t\t\t\tturndownService.turndown(cell)\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\t\t\t\t});\n\n\t\t\t\tconst form = this.element.closest(\"form\");\n\t\t\t\tconst json_textarea = document.getElementById(\n\t\t\t\t\t\"component-debugger-json-textarea\"\n\t\t\t\t) as HTMLTextAreaElement;\n\t\t\t\tif (!json_textarea) {\n\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\"Could not find json textarea with the jdd state\"\n\t\t\t\t\t);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!form) {\n\t\t\t\t\tthrow new Error(\"Not inside a form\");\n\t\t\t\t}\n\t\t\t\tconst handler = () => {\n\t\t\t\t\tdocument.removeEventListener(\"turbo:morph\", handler);\n\t\t\t\t\tconst state = JSON.parse(json_textarea.value) as unknown;\n\t\t\t\t\tobjectPath.set(state as object, this.argpathValue, {\n\t\t\t\t\t\trows,\n\t\t\t\t\t});\n\n\t\t\t\t\tjson_textarea.childNodes[0]!.textContent =\n\t\t\t\t\t\tJSON.stringify(state);\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t// async in order to give a chance for UI state to update after changing the iframe value\n\t\t\t\t\t\tconst submitter_button =\n\t\t\t\t\t\t\tdocument.createElement(\"button\");\n\t\t\t\t\t\tsubmitter_button.setAttribute(\n\t\t\t\t\t\t\t\"formaction\",\n\t\t\t\t\t\t\t\"./?action=replace_state&action_args=W10=\"\n\t\t\t\t\t\t);\n\t\t\t\t\t\tform.appendChild(submitter_button);\n\t\t\t\t\t\tform.requestSubmit(submitter_button);\n\t\t\t\t\t\tsubmitter_button.remove();\n\t\t\t\t\t}, 0);\n\t\t\t\t};\n\n\t\t\t\tdocument.addEventListener(\"turbo:morph\", handler);\n\t\t\t\tform.requestSubmit(); // to get the newest json first, there may be some\n\t\t\t\t// unsent changes\n\t\t\t}\n\t\t});\n\t}\n}\n"],
+  "mappings": "AAIA,SAAS,kBAAkB;AAC3B,OAAO,qBAAqB;AAC5B,OAAO,gBAAgB;AAEvB,MAAM,kBAAkB,IAAI,gBAAgB;AAE5C,MAAO,yCAAsB,WAA8B;AAAA,EAM1D,UAAU;AACT,SAAK,QAAQ,iBAAiB,SAAS,YAAY;AAClD,YAAM,oBAAoB,MAAM,UAAU,UAAU,KAAK;AACzD,iBAAW,QAAQ,mBAAmB;AACrC,YAAI,CAAC,KAAK,MAAM,SAAS,WAAW,GAAG;AACtC;AAAA,YACC;AAAA,UACD;AACA;AAAA,QACD;AACA,cAAM,OAAO,MAAM,KAAK,QAAQ,WAAW;AAC3C,cAAM,OAAO,MAAM,KAAK,KAAK;AAC7B,cAAM,MAAM,SAAS,cAAc,KAAK;AACxC,YAAI,YAAY;AAChB,cAAM,QAAQ,IAAI,cAAc,OAAO;AACvC,YAAI,CAAC,OAAO;AACX,gBAAM,uBAAuB;AAAA,QAC9B;AACA,cAAM,OAAO,MAAM;AAAA,WAClB,+BAAO,iBAAiB,UAAS,CAAC;AAAA,QACnC,EAAE,IAAI,CAAC,OAAO;AACb,gBAAM,QAAQ,MAAM,KAAK,GAAG,iBAAiB,IAAI,CAAC;AAClD,iBAAO;AAAA,YACN,MAAM;AAAA,YACN,OAAO,MAAM;AAAA,cAAI,CAAC,SACjB,gBAAgB,SAAS,IAAI;AAAA,YAC9B;AAAA,UACD;AAAA,QACD,CAAC;AAED,cAAM,OAAO,KAAK,QAAQ,QAAQ,MAAM;AACxC,cAAM,gBAAgB,SAAS;AAAA,UAC9B;AAAA,QACD;AACA,YAAI,CAAC,eAAe;AACnB,kBAAQ;AAAA,YACP;AAAA,UACD;AACA;AAAA,QACD;AACA,YAAI,CAAC,MAAM;AACV,gBAAM,IAAI,MAAM,mBAAmB;AAAA,QACpC;AACA,cAAM,UAAU,MAAM;AACrB,mBAAS,oBAAoB,eAAe,OAAO;AACnD,gBAAM,QAAQ,KAAK,MAAM,cAAc,KAAK;AAC5C,qBAAW,IAAI,OAAiB,KAAK,cAAc;AAAA,YAClD;AAAA,UACD,CAAC;AAED,wBAAc,WAAW,GAAI,cAC5B,KAAK,UAAU,KAAK;AACrB,qBAAW,MAAM;AAEhB,kBAAM,mBACL,SAAS,cAAc,QAAQ;AAChC,6BAAiB;AAAA,cAChB;AAAA,cACA;AAAA,YACD;AACA,iBAAK,YAAY,gBAAgB;AACjC,iBAAK,cAAc,gBAAgB;AACnC,6BAAiB,OAAO;AAAA,UACzB,GAAG,CAAC;AAAA,QACL;AAEA,iBAAS,iBAAiB,eAAe,OAAO;AAChD,aAAK,cAAc;AAAA,MAEpB;AAAA,IACD,CAAC;AAAA,EACF;AACD;AA9EO,iCAEC,SAAS;AAAA,EACf,SAAS;AACV;",
+  "names": []
+}

package/dist/src/json-editor.stimulus.js

@@ -0,0 +1,114 @@
+import { Controller } from "stimulus";
+const JS_ID = "codemirror-js";
+const JS_PATH = "/dist/codemirror.js";
+const JS_MODE_ID = "codemirror-js-mode-js";
+const JS_MODE_PATH = "/dist/codemirror-javascript-mode.js";
+const CSS_ID = "codemirror-css";
+const CSS_PATH = "/dist/codemirror.css";
+class JSONEditor extends Controller {
+  constructor() {
+    super(...arguments);
+    this.saving = false;
+  }
+  addCSS() {
+    const tag = document.querySelector(`head #${CSS_ID}`);
+    if (!tag) {
+      const link = document.createElement("link");
+      link.setAttribute("rel", "stylesheet");
+      link.setAttribute("type", "text/css");
+      link.setAttribute("id", CSS_ID);
+      link.setAttribute("href", CSS_PATH);
+      document.head.appendChild(link);
+    }
+  }
+  async addJS(js_id, js_path) {
+    return new Promise((resolve, reject) => {
+      const once_loaded = (e) => {
+        e.target.setAttribute("loaded", "true");
+        resolve();
+      };
+      try {
+        const tag = document.querySelector(`head #${js_id}`);
+        if (!tag) {
+          const script = document.createElement("script");
+          script.setAttribute("id", js_id);
+          script.setAttribute("src", js_path);
+          script.addEventListener("load", once_loaded);
+          document.head.appendChild(script);
+        } else {
+          if (tag.getAttribute("loaded") == "true") {
+            resolve();
+          } else {
+            tag.addEventListener("load", once_loaded);
+          }
+        }
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+  async connect() {
+    var _a, _b;
+    if ((_a = this.element.parentNode) == null ? void 0 : _a.querySelector(".CodeMirror")) {
+      return;
+    }
+    this.addCSS();
+    await this.addJS(JS_ID, JS_PATH);
+    await this.addJS(JS_MODE_ID, JS_MODE_PATH);
+    this.cm = CodeMirror.fromTextArea(this.element, {
+      mode: {
+        name: "javascript",
+        json: true
+      },
+      theme: "default",
+      addModeClass: true,
+      lineWrapping: true
+    });
+    this.cm.on("change", () => {
+      this.saving = true;
+      this.element.innerHTML = this.cm.getValue().replace("<", "&lt;");
+      this.saving = false;
+    });
+    this.cm.getWrapperElement().setAttribute("data-turbo-permanent", "");
+    const observer = new MutationObserver((mutation) => {
+      console.log("DETECTED TEXTAREA MUTATION CHANGE!", mutation);
+      if (!this.saving) {
+        if (this.cm.getValue() != this.element.innerHTML) {
+          console.log(
+            "SETTING CM VALUE TO",
+            this.element.innerHTML.slice(0, 100)
+          );
+          this.cm.setValue(this.element.innerHTML);
+        }
+      }
+    });
+    observer.observe(this.element, {
+      characterData: true,
+      subtree: true
+    });
+    this.element.addEventListener("change", () => {
+      console.log("DETECTED TEXTAREA CHANGE!");
+      if (!this.saving) {
+        if (this.cm.getValue() != this.element.innerHTML) {
+          console.log(
+            "SETTING CM VALUE TO",
+            this.element.innerHTML.slice(0, 100)
+          );
+          this.cm.setValue(this.element.innerHTML);
+        }
+      }
+    });
+    (_b = this.element.closest("details")) == null ? void 0 : _b.addEventListener("toggle", (event) => {
+      if (event.target.open) {
+        this.cm.refresh();
+      }
+    });
+  }
+  async disconnect() {
+    console.log("DISCONNECTING JSON EDITOR");
+  }
+}
+export {
+  JSONEditor as default
+};
+//# sourceMappingURL=json-editor.stimulus.js.map

package/dist/src/json-editor.stimulus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/json-editor.stimulus.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { Controller } from \"stimulus\";\n\nconst JS_ID = \"codemirror-js\";\nconst JS_PATH = \"/dist/codemirror.js\";\n\nconst JS_MODE_ID = \"codemirror-js-mode-js\";\nconst JS_MODE_PATH = \"/dist/codemirror-javascript-mode.js\";\n\nconst CSS_ID = \"codemirror-css\";\nconst CSS_PATH = \"/dist/codemirror.css\";\n\ndeclare const CodeMirror: any;\n\nexport default class JSONEditor extends Controller<HTMLTextAreaElement> {\n\tcm: any;\n\tsaving = false;\n\n\taddCSS() {\n\t\tconst tag = document.querySelector(`head #${CSS_ID}`);\n\t\tif (!tag) {\n\t\t\tconst link = document.createElement(\"link\");\n\t\t\tlink.setAttribute(\"rel\", \"stylesheet\");\n\t\t\tlink.setAttribute(\"type\", \"text/css\");\n\t\t\tlink.setAttribute(\"id\", CSS_ID);\n\t\t\tlink.setAttribute(\"href\", CSS_PATH);\n\t\t\tdocument.head.appendChild(link);\n\t\t}\n\t}\n\n\tasync addJS(js_id: string, js_path: string) {\n\t\treturn new Promise<void>((resolve, reject) => {\n\t\t\tconst once_loaded = (e: MouseEvent) => {\n\t\t\t\t(e.target as HTMLScriptElement).setAttribute(\"loaded\", \"true\");\n\t\t\t\tresolve();\n\t\t\t};\n\t\t\ttry {\n\t\t\t\tconst tag = document.querySelector(`head #${js_id}`);\n\t\t\t\tif (!tag) {\n\t\t\t\t\tconst script = document.createElement(\"script\");\n\t\t\t\t\tscript.setAttribute(\"id\", js_id);\n\t\t\t\t\tscript.setAttribute(\"src\", js_path);\n\t\t\t\t\tscript.addEventListener(\"load\", once_loaded);\n\t\t\t\t\tdocument.head.appendChild(script);\n\t\t\t\t} else {\n\t\t\t\t\tif (tag.getAttribute(\"loaded\") == \"true\") {\n\t\t\t\t\t\tresolve();\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttag.addEventListener(\"load\", once_loaded);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} catch (e) {\n\t\t\t\treject(e);\n\t\t\t}\n\t\t});\n\t}\n\n\tasync connect() {\n\t\tif (this.element.parentNode?.querySelector(\".CodeMirror\")) {\n\t\t\t//already loaded, quit;\n\t\t\treturn;\n\t\t}\n\t\tthis.addCSS();\n\t\tawait this.addJS(JS_ID, JS_PATH);\n\t\tawait this.addJS(JS_MODE_ID, JS_MODE_PATH);\n\t\tthis.cm = CodeMirror.fromTextArea(this.element, {\n\t\t\tmode: {\n\t\t\t\tname: \"javascript\",\n\t\t\t\tjson: true,\n\t\t\t},\n\t\t\ttheme: \"default\",\n\t\t\taddModeClass: true,\n\t\t\tlineWrapping: true,\n\t\t});\n\t\tthis.cm.on(\"change\", () => {\n\t\t\tthis.saving = true;\n\t\t\tthis.element.innerHTML = this.cm.getValue().replace(\"<\", \"&lt;\");\n\t\t\tthis.saving = false;\n\t\t});\n\t\t// to prevent morhping from removing the element\n\t\tthis.cm.getWrapperElement().setAttribute(\"data-turbo-permanent\", \"\");\n\t\tconst observer = new MutationObserver((mutation) => {\n\t\t\tconsole.log(\"DETECTED TEXTAREA MUTATION CHANGE!\", mutation);\n\t\t\tif (!this.saving) {\n\t\t\t\tif (this.cm.getValue() != this.element.innerHTML) {\n\t\t\t\t\tconsole.log(\n\t\t\t\t\t\t\"SETTING CM VALUE TO\",\n\t\t\t\t\t\tthis.element.innerHTML.slice(0, 100)\n\t\t\t\t\t);\n\t\t\t\t\tthis.cm.setValue(this.element.innerHTML);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tobserver.observe(this.element, {\n\t\t\tcharacterData: true,\n\t\t\tsubtree: true,\n\t\t});\n\n\t\tthis.element.addEventListener(\"change\", () => {\n\t\t\tconsole.log(\"DETECTED TEXTAREA CHANGE!\");\n\t\t\tif (!this.saving) {\n\t\t\t\tif (this.cm.getValue() != this.element.innerHTML) {\n\t\t\t\t\tconsole.log(\n\t\t\t\t\t\t\"SETTING CM VALUE TO\",\n\t\t\t\t\t\tthis.element.innerHTML.slice(0, 100)\n\t\t\t\t\t);\n\t\t\t\t\tthis.cm.setValue(this.element.innerHTML);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tthis.element\n\t\t\t.closest(\"details\")\n\t\t\t?.addEventListener(\"toggle\", (event: MouseEvent) => {\n\t\t\t\tif ((event.target as HTMLDetailsElement).open) {\n\t\t\t\t\tthis.cm.refresh();\n\t\t\t\t}\n\t\t\t});\n\t}\n\n\tasync disconnect() {\n\t\tconsole.log(\"DISCONNECTING JSON EDITOR\");\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}