@sealcode/jdd-editor 0.1.0

package/dist/src/controllers/component-debugger.stimulus.js

@@ -0,0 +1,193 @@
+import { Controller } from "stimulus";
+class ComponentDebugger extends Controller {
+  connect() {
+    var _a;
+    const main_form = (_a = document.querySelector("#component-debugger")) == null ? void 0 : _a.closest("form");
+    if (!main_form) {
+      throw new Error("No main form");
+    }
+    this.main_form = main_form;
+    document.documentElement.addEventListener("ts-rebuilt", () => {
+      this.main_form.requestSubmit();
+    });
+    this.main_form.addEventListener("turbo:submit-end", () => {
+      this.main_form.querySelectorAll("input[type=file]").forEach((input) => input.value = "");
+    });
+    window.addEventListener("load", () => {
+      this.update_width_display();
+    });
+    document.addEventListener("turbo:render", () => {
+    });
+    const gutter = this.gutterTarget;
+    gutter.addEventListener("mousedown", (e) => {
+      this.origin_x = e.clientX;
+      const resizable = this.targets.find("preview");
+      this.origin_width = resizable.getBoundingClientRect().width;
+      const handler = (e2) => this.resizeHandler(e2);
+      document.addEventListener("mousemove", handler);
+      const remove_move_listener = () => {
+        document.removeEventListener("mousemove", handler);
+        document.removeEventListener("mouseup", remove_move_listener);
+        document.dispatchEvent(
+          new Event("component-debugger--resize-done")
+        );
+      };
+      document.addEventListener("mouseup", remove_move_listener);
+      e.preventDefault();
+    });
+  }
+  update_width_display() {
+    console.log("uwd");
+    const preview = this.targets.find("preview");
+    const component_width = preview.offsetWidth;
+    this.sizeSelectTarget.querySelectorAll("option").forEach((e) => e.removeAttribute("selected"));
+    let option = this.sizeSelectTarget.querySelector("option.dynamic");
+    if (!option) {
+      option = document.createElement("option");
+      option.classList.add("dynamic");
+      option.setAttribute("selected", "");
+      this.sizeSelectTarget.insertBefore(
+        option,
+        this.sizeSelectTarget.childNodes[0]
+      );
+    }
+    option.setAttribute("selected", "");
+    option.innerHTML = `${component_width} px`;
+    option.value = String(component_width);
+    this.sizeSelectTarget.value = String(component_width);
+  }
+  resizeHandler(e) {
+    const width_offset = this.origin_x - e.clientX;
+    const new_width = Math.max(this.origin_width + width_offset, 1);
+    this.setPreviewWidth(new_width);
+    this.update_width_display();
+    document.dispatchEvent(new Event("component-debugger--resize"));
+  }
+  setPreviewWidth(width) {
+    var _a;
+    (_a = document.getElementById("component-debugger")) == null ? void 0 : _a.style.setProperty(
+      "--resizable-column-width",
+      width.toString() + "px"
+    );
+    this.update_width_display();
+  }
+  handleWidthDropdown() {
+    const value = this.sizeSelectTarget.value;
+    this.setPreviewWidth(parseInt(value));
+  }
+  handleBlockHover(e) {
+    var _a, _b;
+    const index = parseInt(
+      ((_a = e.target.closest(".jdd-editor__component-block")) == null ? void 0 : _a.getAttribute("data-component-index")) || "0"
+    );
+    (_b = this.element.querySelector(`.component-number-${index}`)) == null ? void 0 : _b.classList.add("highlighted");
+  }
+  handleBlockUnhover(e) {
+    var _a;
+    const index = parseInt(
+      ((_a = e.target.closest(".jdd-editor__component-block")) == null ? void 0 : _a.getAttribute("data-component-index")) || ""
+    );
+    this.element.querySelectorAll(`.component-number-${index}.highlighted`).forEach((e2) => e2.classList.remove("highlighted"));
+  }
+  componentBlockTargetConnected(block_element) {
+    const index = parseInt(
+      block_element.getAttribute("data-component-index") || "0"
+    );
+    block_element.addEventListener("focusin", () => {
+      this.scrollToComponentPreview(index);
+    });
+    const summary = block_element.querySelector("summary");
+    if (summary) {
+      summary.addEventListener(
+        "mouseenter",
+        this.handleBlockHover.bind(this)
+      );
+      summary.addEventListener(
+        "mouseleave",
+        this.handleBlockUnhover.bind(this)
+      );
+    }
+  }
+  previewTargetConnected(preview_element) {
+    preview_element.addEventListener("click", ({ target }) => {
+      var _a;
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      const closest = target.closest(".jdd-component");
+      if (!closest) {
+        return;
+      }
+      const index = parseInt(
+        String(
+          (_a = Array.from(closest.classList).find((c) => c.startsWith("component-number-"))) == null ? void 0 : _a.replace("component-number-", "")
+        )
+      );
+      if (isNaN(index)) {
+        return;
+      }
+      this.focusComponentBlock(index);
+    });
+  }
+  focusComponentBlock(index) {
+    var _a;
+    const block = this.componentBlockTargets[index];
+    if (!block) {
+      return;
+    }
+    this.checkboxTargets[index].checked = true;
+    this.checkboxTargets[index].dispatchEvent(new Event("change"));
+    block.scrollIntoView({ behavior: "smooth" });
+    (_a = block.querySelector(
+      ".component-preview-parameters input"
+    )) == null ? void 0 : _a.focus();
+  }
+  getIndex(block_element) {
+    const index = parseInt(
+      String(block_element.getAttribute("data-component-index"))
+    );
+    return index;
+  }
+  labelClicked(element) {
+    var _a, _b;
+    const block_element = element.target.closest(
+      `[data-component-debugger-target="componentBlock"]`
+    );
+    const index = this.getIndex(block_element);
+    if (!((_b = (_a = this.checkboxTargets) == null ? void 0 : _a[index]) == null ? void 0 : _b.checked)) {
+      this.scrollToComponentPreview(index);
+    }
+  }
+  getPreviewElementForComponentIndex(index) {
+    const element = this.element.querySelector(
+      `.component-number-${index}`
+    );
+    return element;
+  }
+  scrollToComponentPreview(index) {
+    const element = this.getPreviewElementForComponentIndex(index);
+    if (!element) {
+      return;
+    }
+    const preview_element = this.element.querySelector(".component-preview");
+    if (!preview_element) {
+      throw new Error("Missing preview element!");
+    }
+    if (element.clientHeight > preview_element.clientHeight) {
+      preview_element.scrollTop = element.offsetTop - 44;
+    } else {
+      preview_element.scrollTop = element.offsetTop - (preview_element.clientHeight - element.clientHeight) / 2 - 44;
+    }
+  }
+}
+ComponentDebugger.targets = [
+  "gutter",
+  "componentBlock",
+  "checkbox",
+  "preview",
+  "sizeSelect"
+];
+export {
+  ComponentDebugger as default
+};
+//# sourceMappingURL=component-debugger.stimulus.js.map

package/dist/src/controllers/component-debugger.stimulus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/controllers/component-debugger.stimulus.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\n/* eslint-disable @typescript-eslint/consistent-type-assertions */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport { Controller } from \"stimulus\";\n\nexport default class ComponentDebugger extends Controller {\n\tdeclare sizeSelectTarget: HTMLSelectElement;\n\tdeclare gutterTarget: HTMLDivElement;\n\tdeclare checkboxTarget: HTMLInputElement;\n\tdeclare checkboxTargets: HTMLInputElement[];\n\tdeclare previewTarget: HTMLDivElement;\n\tdeclare componentBlockTargets: HTMLDivElement[];\n\tstatic targets = [\n\t\t\"gutter\",\n\t\t\"componentBlock\",\n\t\t\"checkbox\",\n\t\t\"preview\",\n\t\t\"sizeSelect\",\n\t];\n\n\tid: string;\n\tmain_form: HTMLFormElement;\n\torigin_x: number;\n\torigin_width: number;\n\n\tconnect() {\n\t\tconst main_form = document\n\t\t\t.querySelector(\"#component-debugger\")\n\t\t\t?.closest(\"form\");\n\t\tif (!main_form) {\n\t\t\tthrow new Error(\"No main form\");\n\t\t}\n\t\tthis.main_form = main_form;\n\t\tdocument.documentElement.addEventListener(\"ts-rebuilt\", () => {\n\t\t\tthis.main_form.requestSubmit();\n\t\t});\n\t\tthis.main_form.addEventListener(\"turbo:submit-end\", () => {\n\t\t\t// this clears the values of file inputs, so they don't get unecessarily\n\t\t\t// re-uploaded on future submissions - the file is alreade there on the server\n\t\t\tthis.main_form\n\t\t\t\t.querySelectorAll(\"input[type=file]\")\n\t\t\t\t.forEach((input: HTMLInputElement) => (input.value = \"\"));\n\t\t});\n\n\t\twindow.addEventListener(\"load\", () => {\n\t\t\tthis.update_width_display();\n\t\t});\n\t\tdocument.addEventListener(\"turbo:render\", () => {\n\t\t\t// not calling that to see if that improves performance\n\t\t\t// console.log(\"UWD because of render event\");\n\t\t\t// this.update_width_display();\n\t\t});\n\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconst gutter = this.gutterTarget;\n\t\tgutter.addEventListener(\"mousedown\", (e) => {\n\t\t\tthis.origin_x = e.clientX;\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tconst resizable = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\t\tthis.origin_width = resizable.getBoundingClientRect().width;\n\t\t\tconst handler = (e: MouseEvent) => this.resizeHandler(e);\n\t\t\tdocument.addEventListener(\"mousemove\", handler);\n\t\t\tconst remove_move_listener = () => {\n\t\t\t\tdocument.removeEventListener(\"mousemove\", handler);\n\t\t\t\tdocument.removeEventListener(\"mouseup\", remove_move_listener);\n\t\t\t\tdocument.dispatchEvent(\n\t\t\t\t\tnew Event(\"component-debugger--resize-done\")\n\t\t\t\t);\n\t\t\t};\n\t\t\tdocument.addEventListener(\"mouseup\", remove_move_listener);\n\t\t\te.preventDefault();\n\t\t});\n\t}\n\n\tupdate_width_display() {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\tconsole.log(\"uwd\");\n\t\tconst preview = this.targets.find(\"preview\") as HTMLSpanElement;\n\t\tconst component_width = preview.offsetWidth;\n\t\tthis.sizeSelectTarget\n\t\t\t.querySelectorAll(\"option\")\n\t\t\t.forEach((e) => e.removeAttribute(\"selected\"));\n\t\tlet option: HTMLOptionElement | null =\n\t\t\tthis.sizeSelectTarget.querySelector(\"option.dynamic\");\n\t\tif (!option) {\n\t\t\toption = document.createElement(\"option\");\n\t\t\toption.classList.add(\"dynamic\");\n\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\tthis.sizeSelectTarget.insertBefore(\n\t\t\t\toption,\n\t\t\t\tthis.sizeSelectTarget.childNodes[0]!\n\t\t\t);\n\t\t}\n\t\toption.setAttribute(\"selected\", \"\");\n\t\toption.innerHTML = `${component_width} px`;\n\t\toption.value = String(component_width);\n\t\tthis.sizeSelectTarget.value = String(component_width);\n\t}\n\n\tresizeHandler(e: MouseEvent) {\n\t\tconst width_offset = this.origin_x - e.clientX;\n\t\tconst new_width = Math.max(this.origin_width + width_offset, 1);\n\t\tthis.setPreviewWidth(new_width);\n\t\tthis.update_width_display();\n\t\tdocument.dispatchEvent(new Event(\"component-debugger--resize\"));\n\t}\n\n\tsetPreviewWidth(width: number) {\n\t\tdocument\n\t\t\t.getElementById(\"component-debugger\")\n\t\t\t?.style.setProperty(\n\t\t\t\t\"--resizable-column-width\",\n\t\t\t\twidth.toString() + \"px\"\n\t\t\t);\n\t\tthis.update_width_display();\n\t}\n\n\thandleWidthDropdown() {\n\t\tconst value = this.sizeSelectTarget.value;\n\t\tthis.setPreviewWidth(parseInt(value));\n\t}\n\n\thandleBlockHover(e: MouseEvent) {\n\t\tconst index = parseInt(\n\t\t\t(e.target as HTMLDivElement)\n\t\t\t\t.closest(\".jdd-editor__component-block\")\n\t\t\t\t?.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tthis.element\n\t\t\t.querySelector(`.component-number-${index}`)\n\t\t\t?.classList.add(\"highlighted\");\n\t}\n\n\thandleBlockUnhover(e: MouseEvent) {\n\t\tconst index = parseInt(\n\t\t\t(e.target as HTMLDivElement)\n\t\t\t\t.closest(\".jdd-editor__component-block\")\n\t\t\t\t?.getAttribute(\"data-component-index\") || \"\"\n\t\t);\n\t\tthis.element\n\t\t\t.querySelectorAll(`.component-number-${index}.highlighted`)\n\t\t\t.forEach((e) => e.classList.remove(\"highlighted\"));\n\t}\n\n\tcomponentBlockTargetConnected(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tblock_element.getAttribute(\"data-component-index\") || \"0\"\n\t\t);\n\t\tblock_element.addEventListener(\"focusin\", () => {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t});\n\n\t\tconst summary = block_element.querySelector(\"summary\");\n\t\tif (summary) {\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseenter\",\n\t\t\t\tthis.handleBlockHover.bind(this)\n\t\t\t);\n\t\t\tsummary.addEventListener(\n\t\t\t\t\"mouseleave\",\n\t\t\t\tthis.handleBlockUnhover.bind(this)\n\t\t\t);\n\t\t}\n\t}\n\n\tpreviewTargetConnected(preview_element: HTMLDivElement) {\n\t\tpreview_element.addEventListener(\"click\", ({ target }) => {\n\t\t\tif (!(target instanceof HTMLElement)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst closest = target.closest(\".jdd-component\");\n\t\t\tif (!closest) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst index = parseInt(\n\t\t\t\tString(\n\t\t\t\t\tArray.from(closest.classList)\n\t\t\t\t\t\t.find((c) => c.startsWith(\"component-number-\"))\n\t\t\t\t\t\t?.replace(\"component-number-\", \"\")\n\t\t\t\t)\n\t\t\t);\n\t\t\tif (isNaN(index)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.focusComponentBlock(index);\n\t\t});\n\t}\n\n\tfocusComponentBlock(index: number) {\n\t\tconst block = this.componentBlockTargets[index];\n\t\tif (!block) {\n\t\t\treturn;\n\t\t}\n\t\tthis.checkboxTargets[index]!.checked = true;\n\t\tthis.checkboxTargets[index]!.dispatchEvent(new Event(\"change\")); // to help with refreshing markdown editor\n\t\tblock.scrollIntoView({ behavior: \"smooth\" });\n\t\t(\n\t\t\tblock.querySelector(\n\t\t\t\t\".component-preview-parameters input\"\n\t\t\t) as HTMLInputElement\n\t\t)?.focus();\n\t}\n\n\tgetIndex(block_element: HTMLDivElement) {\n\t\tconst index = parseInt(\n\t\t\tString(block_element.getAttribute(\"data-component-index\"))\n\t\t);\n\t\treturn index;\n\t}\n\n\tlabelClicked(element: MouseEvent) {\n\t\tconst block_element = (element.target as HTMLDivElement).closest(\n\t\t\t`[data-component-debugger-target=\"componentBlock\"]`\n\t\t) as HTMLDivElement;\n\t\tconst index = this.getIndex(block_element);\n\t\tif (!this.checkboxTargets?.[index]?.checked) {\n\t\t\tthis.scrollToComponentPreview(index);\n\t\t}\n\t}\n\n\tgetPreviewElementForComponentIndex(index: number) {\n\t\tconst element = this.element.querySelector(\n\t\t\t`.component-number-${index}`\n\t\t) as HTMLDialogElement;\n\t\treturn element;\n\t}\n\n\tscrollToComponentPreview(index: number) {\n\t\tconst element = this.getPreviewElementForComponentIndex(index);\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\t\tconst preview_element =\n\t\t\tthis.element.querySelector(\".component-preview\");\n\t\tif (!preview_element) {\n\t\t\tthrow new Error(\"Missing preview element!\");\n\t\t}\n\t\tif (element.clientHeight > preview_element.clientHeight) {\n\t\t\tpreview_element.scrollTop = element.offsetTop - 44;\n\t\t} else {\n\t\t\tpreview_element.scrollTop =\n\t\t\t\telement.offsetTop -\n\t\t\t\t(preview_element.clientHeight - element.clientHeight) / 2 -\n\t\t\t\t44;\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
+  "names": ["e"]
+}

package/dist/src/controllers/exportable-textarea.stimulus.js

@@ -0,0 +1,71 @@
+import { Controller } from "stimulus";
+function download(data, filename, type) {
+  const file = new Blob([data], { type });
+  const a = document.createElement("a"), url = URL.createObjectURL(file);
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(function() {
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  }, 0);
+}
+class ExportableTextarea extends Controller {
+  connect() {
+    console.log("exportable", this.element);
+    this.element.removeAttribute("open");
+    this.element.addEventListener(
+      "turbo:before-morph-attribute",
+      (event) => {
+        if (event.target == this.element && event.detail.attributeName == "open") {
+          event.preventDefault();
+        }
+      }
+    );
+  }
+  async copy(e) {
+    e.preventDefault();
+    const textarea = this.element.querySelector("textarea");
+    if (!textarea) {
+      throw new Error("Couldn't find the textarea");
+    }
+    await navigator.clipboard.writeText(textarea.value);
+    e.target.textContent = "Copied";
+    await sleep(1e3);
+    e.target.textContent = "Copy";
+  }
+  async download(e) {
+    e.preventDefault();
+    const textarea = this.element.querySelector("textarea");
+    if (!textarea) {
+      throw new Error("Couldn't find the textarea");
+    }
+    download(
+      textarea.value,
+      String(Date.now()) + ".json",
+      "application/json"
+    );
+  }
+  async import(e) {
+    var _a;
+    e.preventDefault();
+    const file_input = this.element.querySelector(
+      "input[type='file']"
+    );
+    const file = (_a = file_input.files) == null ? void 0 : _a[0];
+    if (file) {
+      const text = await file.text();
+      const textarea = this.element.querySelector("textarea");
+      textarea.innerHTML = text.replaceAll("<", "&lt;");
+      textarea.dispatchEvent(new Event("change"));
+    }
+  }
+}
+function sleep(n) {
+  return new Promise((resolve) => setTimeout(resolve, n));
+}
+export {
+  ExportableTextarea as default
+};
+//# sourceMappingURL=exportable-textarea.stimulus.js.map

package/dist/src/controllers/exportable-textarea.stimulus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/controllers/exportable-textarea.stimulus.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport { Controller } from \"stimulus\";\n\nfunction download(data: string, filename: string, type: string) {\n\tconst file = new Blob([data], { type: type });\n\tconst a = document.createElement(\"a\"),\n\t\turl = URL.createObjectURL(file);\n\ta.href = url;\n\ta.download = filename;\n\tdocument.body.appendChild(a);\n\ta.click();\n\tsetTimeout(function () {\n\t\tdocument.body.removeChild(a);\n\t\twindow.URL.revokeObjectURL(url);\n\t}, 0);\n}\n\nexport default class ExportableTextarea extends Controller<HTMLDetailsElement> {\n\tconnect() {\n\t\tconsole.log(\"exportable\", this.element);\n\t\tthis.element.removeAttribute(\"open\");\n\t\tthis.element.addEventListener(\n\t\t\t\"turbo:before-morph-attribute\",\n\t\t\t(event: CustomEvent<{ attributeName: string }>) => {\n\t\t\t\tif (\n\t\t\t\t\tevent.target == this.element &&\n\t\t\t\t\tevent.detail.attributeName == \"open\"\n\t\t\t\t) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}\n\n\tasync copy(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tconst textarea = this.element.querySelector(\"textarea\");\n\t\tif (!textarea) {\n\t\t\tthrow new Error(\"Couldn't find the textarea\");\n\t\t}\n\t\tawait navigator.clipboard.writeText(textarea.value);\n\t\t(e.target as HTMLButtonElement).textContent = \"Copied\";\n\t\tawait sleep(1000);\n\t\t(e.target as HTMLButtonElement).textContent = \"Copy\";\n\t}\n\n\tasync download(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tconst textarea = this.element.querySelector(\"textarea\");\n\t\tif (!textarea) {\n\t\t\tthrow new Error(\"Couldn't find the textarea\");\n\t\t}\n\t\tdownload(\n\t\t\ttextarea.value,\n\t\t\tString(Date.now()) + \".json\",\n\t\t\t\"application/json\"\n\t\t);\n\t}\n\n\tasync import(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tconst file_input = this.element.querySelector(\n\t\t\t\"input[type='file']\"\n\t\t) as HTMLInputElement;\n\t\tconst file = file_input.files?.[0];\n\t\tif (file) {\n\t\t\tconst text = await file.text();\n\t\t\tconst textarea = this.element.querySelector(\"textarea\");\n\t\t\ttextarea!.innerHTML = text.replaceAll(\"<\", \"&lt;\");\n\t\t\ttextarea!.dispatchEvent(new Event(\"change\"));\n\t\t}\n\t}\n}\n\nfunction sleep(n: number) {\n\treturn new Promise((resolve) => setTimeout(resolve, n));\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAE3B,SAAS,SAAS,MAAc,UAAkB,MAAc;AAC/D,QAAM,OAAO,IAAI,KAAK,CAAC,IAAI,GAAG,EAAE,KAAW,CAAC;AAC5C,QAAM,IAAI,SAAS,cAAc,GAAG,GACnC,MAAM,IAAI,gBAAgB,IAAI;AAC/B,IAAE,OAAO;AACT,IAAE,WAAW;AACb,WAAS,KAAK,YAAY,CAAC;AAC3B,IAAE,MAAM;AACR,aAAW,WAAY;AACtB,aAAS,KAAK,YAAY,CAAC;AAC3B,WAAO,IAAI,gBAAgB,GAAG;AAAA,EAC/B,GAAG,CAAC;AACL;AAEA,MAAO,2BAAyC,WAA+B;AAAA,EAC9E,UAAU;AACT,YAAQ,IAAI,cAAc,KAAK,OAAO;AACtC,SAAK,QAAQ,gBAAgB,MAAM;AACnC,SAAK,QAAQ;AAAA,MACZ;AAAA,MACA,CAAC,UAAkD;AAClD,YACC,MAAM,UAAU,KAAK,WACrB,MAAM,OAAO,iBAAiB,QAC7B;AACD,gBAAM,eAAe;AAAA,QACtB;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAAA,EAEA,MAAM,KAAK,GAAe;AACzB,MAAE,eAAe;AACjB,UAAM,WAAW,KAAK,QAAQ,cAAc,UAAU;AACtD,QAAI,CAAC,UAAU;AACd,YAAM,IAAI,MAAM,4BAA4B;AAAA,IAC7C;AACA,UAAM,UAAU,UAAU,UAAU,SAAS,KAAK;AAClD,IAAC,EAAE,OAA6B,cAAc;AAC9C,UAAM,MAAM,GAAI;AAChB,IAAC,EAAE,OAA6B,cAAc;AAAA,EAC/C;AAAA,EAEA,MAAM,SAAS,GAAe;AAC7B,MAAE,eAAe;AACjB,UAAM,WAAW,KAAK,QAAQ,cAAc,UAAU;AACtD,QAAI,CAAC,UAAU;AACd,YAAM,IAAI,MAAM,4BAA4B;AAAA,IAC7C;AACA;AAAA,MACC,SAAS;AAAA,MACT,OAAO,KAAK,IAAI,CAAC,IAAI;AAAA,MACrB;AAAA,IACD;AAAA,EACD;AAAA,EAEA,MAAM,OAAO,GAAe;AA3D7B;AA4DE,MAAE,eAAe;AACjB,UAAM,aAAa,KAAK,QAAQ;AAAA,MAC/B;AAAA,IACD;AACA,UAAM,QAAO,gBAAW,UAAX,mBAAmB;AAChC,QAAI,MAAM;AACT,YAAM,OAAO,MAAM,KAAK,KAAK;AAC7B,YAAM,WAAW,KAAK,QAAQ,cAAc,UAAU;AACtD,eAAU,YAAY,KAAK,WAAW,KAAK,MAAM;AACjD,eAAU,cAAc,IAAI,MAAM,QAAQ,CAAC;AAAA,IAC5C;AAAA,EACD;AACD;AAEA,SAAS,MAAM,GAAW;AACzB,SAAO,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,CAAC,CAAC;AACvD;",
+  "names": []
+}

package/dist/src/controllers/input-image-preview.stimulus.js

@@ -0,0 +1,30 @@
+import { Controller } from "stimulus";
+class InputImagePreview extends Controller {
+  handleChange() {
+    var _a, _b, _c, _d;
+    let img = this.element.querySelector("img");
+    if (!img) {
+      img = document.createElement("img");
+      img.setAttribute("style", "height: 40px; width: 40px");
+      (_a = this.element.querySelector(".image-preview-container")) == null ? void 0 : _a.appendChild(img);
+    }
+    window.URL.revokeObjectURL(img.src);
+    const file = (_c = (_b = this.element.querySelector("input")) == null ? void 0 : _b.files) == null ? void 0 : _c[0];
+    if (!file) {
+      console.warn("No file");
+      return;
+    }
+    const new_url = window.URL.createObjectURL(file);
+    img.src = new_url;
+    img.parentNode;
+    (_d = img.parentElement) == null ? void 0 : _d.querySelectorAll("source").forEach((e) => {
+      var _a2;
+      return (_a2 = e.parentNode) == null ? void 0 : _a2.removeChild(e);
+    });
+    img.style.aspectRatio = "1";
+  }
+}
+export {
+  InputImagePreview as default
+};
+//# sourceMappingURL=input-image-preview.stimulus.js.map

package/dist/src/controllers/input-image-preview.stimulus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/controllers/input-image-preview.stimulus.ts"],
+  "sourcesContent": ["import { Controller } from \"stimulus\";\n\nexport default class InputImagePreview extends Controller {\n\tid: string;\n\n\thandleChange() {\n\t\tlet img = this.element.querySelector(\"img\");\n\t\tif (!img) {\n\t\t\timg = document.createElement(\"img\");\n\t\t\timg.setAttribute(\"style\", \"height: 40px; width: 40px\");\n\t\t\tthis.element\n\t\t\t\t.querySelector(\".image-preview-container\")\n\t\t\t\t?.appendChild(img);\n\t\t}\n\t\twindow.URL.revokeObjectURL(img.src);\n\t\tconst file = this.element.querySelector(\"input\")?.files?.[0];\n\t\tif (!file) {\n\t\t\tconsole.warn(\"No file\");\n\t\t\treturn;\n\t\t}\n\t\tconst new_url = window.URL.createObjectURL(file);\n\t\timg.src = new_url;\n\t\timg.parentNode;\n\t\timg.parentElement\n\t\t\t?.querySelectorAll(\"source\")\n\t\t\t.forEach((e) => e.parentNode?.removeChild(e));\n\t\timg.style.aspectRatio = \"1\";\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,MAAO,0BAAwC,WAAW;AAAA,EAGzD,eAAe;AALhB;AAME,QAAI,MAAM,KAAK,QAAQ,cAAc,KAAK;AAC1C,QAAI,CAAC,KAAK;AACT,YAAM,SAAS,cAAc,KAAK;AAClC,UAAI,aAAa,SAAS,2BAA2B;AACrD,iBAAK,QACH,cAAc,0BAA0B,MAD1C,mBAEG,YAAY;AAAA,IAChB;AACA,WAAO,IAAI,gBAAgB,IAAI,GAAG;AAClC,UAAM,QAAO,gBAAK,QAAQ,cAAc,OAAO,MAAlC,mBAAqC,UAArC,mBAA6C;AAC1D,QAAI,CAAC,MAAM;AACV,cAAQ,KAAK,SAAS;AACtB;AAAA,IACD;AACA,UAAM,UAAU,OAAO,IAAI,gBAAgB,IAAI;AAC/C,QAAI,MAAM;AACV,QAAI;AACJ,cAAI,kBAAJ,mBACG,iBAAiB,UAClB,QAAQ,CAAC,MAAG;AAzBhB,UAAAA;AAyBmB,cAAAA,MAAA,EAAE,eAAF,gBAAAA,IAAc,YAAY;AAAA;AAC3C,QAAI,MAAM,cAAc;AAAA,EACzB;AACD;",
+  "names": ["_a"]
+}

package/dist/src/controllers/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/controllers/jdd-table-paste.stimulus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/controllers/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/controllers/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/controllers/json-editor.stimulus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/controllers/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": []
+}