@sealcode/jdd-editor 0.1.0

package/assets/icons/table-move-column-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" aria-hidden="true" viewBox="0 0 14 14"><path d="M.525.002C.235.002 0 .171 0 .381v13.242c0 .21.235.379.525.379h4.791c.29 0 .524-.169.524-.379V.381c0-.21-.234-.379-.524-.379zm.684 1.059h3.42v3.214h-3.42zm0 4.283h3.42v3.215h-3.42zm0 4.283h3.42v3.217h-3.42z"/><path fill="green" d="M9.97 11.034q-.265 0-.466-.192l-.388-.388q-.197-.197-.197-.471 0-.28.197-.466l1.516-1.521H6.989q-.27 0-.437-.194-.168-.195-.168-.469v-.662q0-.275.168-.469t.437-.194h3.643L9.116 4.487q-.197-.187-.197-.466 0-.28.197-.466l.388-.388q.196-.197.465-.197.274 0 .471.197l3.368 3.369q.192.181.192.466 0 .28-.192.47l-3.368 3.37q-.202.192-.47.192" style="fill:#0086be;fill-opacity:1"/></svg>

package/assets/icons/table-move-row-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" aria-hidden="true" viewBox="0 0 14 14"><path d="M0 .525C0 .235.169 0 .379 0H13.62c.21 0 .379.235.379.525v4.791c0 .29-.169.524-.379.524H.38C.169 5.84 0 5.606 0 5.316Zm1.059.684v3.42h3.214v-3.42Zm4.283 0v3.42h3.215v-3.42Zm4.283 0v3.42h3.217v-3.42Z"/><path fill="green" d="M11.032 9.97q0-.265-.192-.466l-.388-.388q-.197-.197-.471-.197-.28 0-.466.197l-1.521 1.516V6.989q0-.27-.194-.437-.195-.168-.469-.168H6.67q-.275 0-.469.168t-.194.437v3.643L4.485 9.116q-.187-.197-.466-.197-.28 0-.466.197l-.388.388q-.197.196-.197.465 0 .274.197.471l3.369 3.368Q6.715 14 7 14q.28 0 .47-.192l3.37-3.368q.192-.202.192-.47" style="fill:#0086be;fill-opacity:1"/></svg>

package/assets/icons/table-move-row-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" aria-hidden="true" viewBox="0 0 14 14"><path d="M14 13.475c0 .29-.169.525-.379.525H.38C.169 14 0 13.765 0 13.475V8.684c0-.29.169-.524.379-.524H13.62c.21 0 .379.234.379.524zm-1.059-.684v-3.42H9.727v3.42zm-4.283 0v-3.42H5.443v3.42zm-4.283 0v-3.42H1.158v3.42z"/><path fill="green" d="M2.968 4.03q0 .265.192.466l.388.388q.197.197.471.197.28 0 .466-.197l1.521-1.516v3.643q0 .27.194.437.195.168.469.168h.662q.275 0 .469-.168t.194-.437V3.368l1.521 1.516q.187.197.466.197.28 0 .466-.197l.388-.388q.197-.196.197-.465 0-.274-.197-.471L7.466.192Q7.285 0 7 0q-.28 0-.47.192L3.16 3.56q-.192.202-.192.47" style="fill:#0086be;fill-opacity:1"/></svg>

package/assets/styles/component-admin-table.jdd-page.css

@@ -0,0 +1,11 @@
+.jdd-component-input--table {
+	.editor-toolbar,
+	.editor-statusbar {
+		display: none !important;
+	}
+
+	.CodeMirror {
+		min-width: 180px;
+		max-height: 200px;
+	}
+}

package/assets/styles/component-debugger.jdd-page.css

@@ -0,0 +1,71 @@
+.component-debugger {
+	.component-debugger__json {
+		margin-top: 16px;
+		display: block;
+		overflow: hidden;
+		font-size: 13px;
+		color: #a8a8a8;
+
+		summary {
+			cursor: pointer;
+		}
+
+		&[open] summary {
+			color: black;
+		}
+
+		.CodeMirror {
+			max-height: calc(100vh - 80px);
+		}
+
+		.cm-m-javascript.cm-string {
+			color: green;
+		}
+
+		.cm-m-javascript.cm-string.cm-property {
+			color: purple;
+		}
+
+		@media (scripting: enabled) {
+			& > textarea {
+				display: none;
+			}
+		}
+	}
+
+	.jdd-component {
+		& {
+			transition: all 50ms;
+		}
+
+		&:after {
+			transition: all 200ms;
+		}
+
+		&.highlighted {
+			outline: 2px solid blue;
+			&:after {
+				display: block;
+				height: 100%;
+				content: " ";
+				background-color: transparent;
+				top: 0;
+				position: absolute;
+				width: 100%;
+				z-index: 10;
+				pointer-events: none;
+				background-color: #00f6;
+			}
+		}
+	}
+
+	.jdd-editor__component-block__title {
+		display: flex;
+		flex-flow: column;
+
+		.jdd-editor__component-block__title__secondary {
+			font-style: italic;
+			font-size: 10px;
+		}
+	}
+}

package/assets/styles/components.jdd-page.css

@@ -0,0 +1,286 @@
+body.jdd-editor {
+	max-width: none;
+
+	.two-column {
+		display: grid;
+		grid-template-columns: 1fr 10px min-content;
+	}
+
+	.resize-gutter {
+		background-color: #d9d9d9;
+		cursor: ew-resize;
+		height: 100%;
+		transition: background-color 200ms;
+
+		&:hover {
+			background-color: gray;
+		}
+	}
+
+	.resizable {
+		overflow-x: auto;
+	}
+
+	transition: transform 200ms, opacity 200ms;
+	&.restarting {
+		transform: scale(0.99);
+		opacity: 0.6;
+	}
+
+	#component-debugger {
+		height: 100vh;
+	}
+
+	.component-preview {
+		width: var(--resizable-column-width);
+
+		min-width: 0; /* default is min-content and that causes overflow*/
+		overflow-x: auto;
+		max-height: 100dvh;
+		scroll-behavior: smooth;
+	}
+
+	.component-arguments {
+		max-height: 100dvh;
+		overflow-y: auto;
+		scroll-behavior: smooth;
+		padding: 0px;
+		padding-top: 0;
+		& > *:first-child {
+			margin-top: 8px;
+		}
+
+		& > * {
+			margin-left: 8px;
+			margin-left: 8px;
+		}
+
+		background-color: #ededed;
+		position: relative;
+
+		box-shadow: inset -5px 0px 27px 0px #0000002b;
+
+		input {
+			max-width: 100%;
+		}
+
+		& > .jdd-editor__component-block + .jdd-editor__component-block {
+			margin-top: 1rem;
+		}
+
+		.jdd-editor__toolbar {
+			position: sticky;
+			top: -1px;
+			left: 0;
+			padding: 8px 0;
+			-webkit-backdrop-filter: blur(13px);
+			backdrop-filter: blur(13px);
+			z-index: 3;
+			border-bottom: 1px solid #cacaca;
+			background-color: #ededed96;
+			box-shadow: 0px 10px 12px -16px black;
+			min-height: 40px;
+		}
+
+		.jdd-editor__messages {
+			position: fixed;
+			top: 60px;
+			left: 0;
+			width: 100%;
+			display: flex;
+			flex-flow: column;
+			align-items: center;
+			z-index: 5;
+			padding-left: 0;
+
+			.jdd-editor__message {
+				--color: green;
+				list-style: none;
+				border: 1px solid color-mix(in srgb, var(--color) 90%, black);
+				border-radius: 5px;
+				padding: 10px;
+				background-color: color-mix(in srgb, var(--color) 10%, white);
+				color: color-mix(in srgb, var(--color) 31%, black);
+				animation: notification-pop 400ms, fade-out 800ms;
+				animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55), linear;
+				animation-delay: 0ms, 2000ms;
+				animation-fill-mode: forwards, both;
+				box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px,
+					rgba(0, 0, 0, 0.23) 0px 3px 6px;
+			}
+		}
+
+		.jdd-editor__component-block {
+			background-color: white;
+			border: 1px solid #5c5c5c;
+			border-radius: 4px;
+
+			.jdd-editor__component-block__inner {
+				display: none;
+				padding: 8px;
+			}
+
+			&:has(.component-collapse-toggle:checked) {
+				.jdd-editor__component-block__inner {
+					display: block;
+				}
+
+				.jdd-editor__component-block__chevron {
+					transform: rotate(90deg);
+				}
+			}
+
+			.jdd-editor__component-block__top_bar {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				padding: 8px;
+
+				label {
+					cursor: pointer;
+					/*  https://stripesgenerator.com/ */
+					--stripe-color: #fafafa;
+					background-image: linear-gradient(
+						128deg,
+						#ffffff 25%,
+						var(--stripe-color) 25%,
+						var(--stripe-color) 50%,
+						#ffffff 50%,
+						#ffffff 75%,
+						var(--stripe-color) 75%,
+						var(--stripe-color) 100%
+					);
+					background-size: 30.46px 38.98px;
+
+					&:hover {
+						--stripe-color: #eee;
+					}
+				}
+
+				button {
+					height: 24px;
+					width: 24px;
+					opacity: 50%;
+
+					&:has(img) {
+						padding: 0;
+					}
+
+					img {
+						height: 20px;
+						width: 20px;
+					}
+
+					&:hover {
+						opacity: 100%;
+					}
+				}
+
+				&:hover {
+					button {
+						opacity: 80%;
+					}
+				}
+			}
+
+			.jdd-editor__component-block__chevron {
+				font-size: 20px;
+				transition: transform 200ms;
+				user-select: none;
+				display: inline-block;
+			}
+		}
+	}
+}
+
+.component-preview-parameters {
+	display: flex;
+	flex-flow: column;
+	gap: 16px;
+
+	label {
+		display: flex;
+		flex-flow: row wrap;
+		gap: 8px;
+	}
+
+	fieldset {
+		background-color: #80808024;
+		min-inline-size: 0;
+		width: calc(100% - 10px);
+
+		& > div {
+			overflow-x: auto;
+			overflow-y: hidden;
+		}
+
+		table {
+			td,
+			th {
+				outline: 0.5px solid #0000006b;
+
+				&.subdued > * {
+					opacity: 50%;
+				}
+
+				&.subdued:hover > * {
+					opacity: 100%;
+				}
+
+				&.sticky {
+					position: sticky;
+					background-color: #ececec;
+					z-index: 2;
+				}
+
+				&.sticky--left {
+					left: 0;
+					box-shadow: 5px 0px 10px -4px #00000047;
+				}
+
+				&.sticky--top {
+					top: 0;
+					box-shadow: 0px 5px 10px -4px #00000047;
+				}
+			}
+		}
+	}
+
+	textarea {
+		display: block;
+		width: 100%;
+	}
+}
+
+.component-preview {
+	container-type: inline-size;
+
+	* {
+		transition: all 150ms, outline 0ms;
+	}
+
+	fieldset {
+		min-width: 0px;
+	}
+	container-type: inline-size;
+
+	.component-preview__header {
+		display: flex;
+		justify-content: center;
+		padding: 8px;
+		margin-bottom: 8px;
+		color: gray;
+		border-bottom: 1px solid #cacaca;
+		background-color: #f4f4f4;
+		position: sticky;
+		top: 0;
+		z-index: 100;
+		gap: 8px;
+	}
+}
+
+@media (scripting: none) {
+	body {
+		min-width: max-content;
+	}
+}

package/assets/styles/grow-wrap.css

@@ -0,0 +1,33 @@
+/* https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/ */
+
+.grow-wrap {
+	/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
+	display: grid;
+}
+.grow-wrap::after {
+	/* Note the weird space! Needed to preventy jumpy behavior */
+	content: attr(data-replicated-value) " ";
+
+	/* This is how textarea text behaves */
+	white-space: pre-wrap;
+
+	/* Hidden from view, clicks, and screen readers */
+	visibility: hidden;
+}
+.grow-wrap > textarea {
+	/* You could leave this, but after a user resizes, then it ruins the auto sizing */
+	resize: none;
+
+	/* Firefox shows scrollbar on growth, you can hide like this. */
+	overflow: hidden;
+}
+.grow-wrap > textarea,
+.grow-wrap::after {
+	/* Identical styling required!! */
+	border: 1px solid black;
+	padding: 0.5rem;
+	font: inherit;
+
+	/* Place on top of each other */
+	grid-area: 1 / 1 / 2 / 2;
+}

package/assets/styles/markdown-editor.css

@@ -0,0 +1,42 @@
+.editor-toolbar {
+	display: flex;
+	flex-flow: row wrap;
+}
+
+.grow-wrap {
+	display: block !important; /* the default grid display value makes it have some unwanted vertical space*/
+	width: 100%;
+}
+
+.CodeMirror,
+.CodeMirror-scroll {
+	min-height: 100px !important;
+}
+
+@keyframes cm-fullscreen {
+	from {
+		transform: scale(0);
+	}
+
+	to {
+		transform: (scale1);
+	}
+}
+
+.CodeMirror-fullscreen {
+	animation: cm-fullscreen 200ms;
+}
+
+@keyframes cm-toolbar-fullscreen {
+	from {
+		transform: translateY(-40px);
+	}
+
+	to {
+		transform: translateY(0px);
+	}
+}
+
+.editor-toolbar.fullscreen {
+	animation: cm-toolbar-fullscreen 200ms;
+}

package/dist/src/autogrow-textarea.stimulus.js

@@ -0,0 +1,13 @@
+import { Controller } from "stimulus";
+class AutogrowTextarea extends Controller {
+  connect() {
+    this.autogrow();
+  }
+  autogrow() {
+    this.element.parentNode.dataset.replicatedValue = this.element.value;
+  }
+}
+export {
+  AutogrowTextarea as default
+};
+//# sourceMappingURL=autogrow-textarea.stimulus.js.map

package/dist/src/autogrow-textarea.stimulus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/autogrow-textarea.stimulus.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-unsafe-assignment */\nimport { Controller } from \"stimulus\";\n\nexport default class AutogrowTextarea extends Controller<HTMLTextAreaElement> {\n\tconnect() {\n\t\tthis.autogrow();\n\t}\n\n\tautogrow() {\n\t\t// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access\n\t\t(this.element.parentNode as any).dataset.replicatedValue = this.element.value;\n\t}\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAE3B,MAAO,yBAAuC,WAAgC;AAAA,EAC7E,UAAU;AACT,SAAK,SAAS;AAAA,EACf;AAAA,EAEA,WAAW;AAEV,IAAC,KAAK,QAAQ,WAAmB,QAAQ,kBAAkB,KAAK,QAAQ;AAAA,EACzE;AACD;",
+  "names": []
+}

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

@@ -0,0 +1,190 @@
+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");
+    }
+    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() {
+    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);
+  }
+  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