@sealcode/jdd-editor 0.2.5 → 0.2.8

package/src/jdd-page.ts

@@ -10,7 +10,8 @@ import type { FlatTemplatable, Templatable } from "tempstream";
 import { tempstream } from "tempstream";
 import { ComponentInput } from "./inputs/component-input.js";
 import { ComponentPreviewActions } from "./component-preview-actions.js";
-import { htmlEscape } from "escape-goat";
+import prettier from "prettier";
+import hljs from "highlight.js";
 
 export const actionName = "Components";
 
@@ -102,7 +103,7 @@ export default abstract class JDDPage extends StatefulPage<
 				loadSearchModal: false,
 			},
 			makeHead: (...args: unknown[]) =>
-				tempstream/* HTML */ `${this.defaultHead(...args)}
+				tempstream /* HTML */ `${this.defaultHead(...args)}
 					<link
 						href="/dist/jdd-page.entrypoint.css"
 						rel="stylesheet"
@@ -171,7 +172,7 @@ export default abstract class JDDPage extends StatefulPage<
 		index: number
 	): Promise<FlatTemplatable> {
 		const jdd_context = this.makeJDDContext(ctx);
-		return tempstream/* HTML */ `<div
+		return tempstream /* HTML */ `<div
 			class="component-preview-parameters"
 			id="${`component-preview-parameters--${index}`}"
 		>
@@ -238,7 +239,7 @@ export default abstract class JDDPage extends StatefulPage<
 						? await component.convertParsedToStorage(
 								this.makeJDDContext(ctx),
 								args
-						  )
+							)
 						: {},
 				};
 				return single_result;
@@ -318,7 +319,7 @@ export default abstract class JDDPage extends StatefulPage<
 	}
 
 	async render(ctx: Context, state: JDDPageState): Promise<string> {
-		return tempstream/* HTML */ `<div
+		return tempstream /* HTML */ `<div
 			class="${["two-column", "component-debugger", ...this.classes].join(" ")}"
 			id="component-debugger"
 			style="${`--resizable-column-width: ${
@@ -400,15 +401,16 @@ export default abstract class JDDPage extends StatefulPage<
 											class="dynamic"
 											value="${state.preview_size}"
 											selected
-									  >
+										>
 											${state.preview_size} px
-									  </option>`
+										</option>`
 									: ""
 							}
 							${this.previewSizes.map(
-								(size) => /* HTML */ `<option value="${size}">
-									${`${size} px`}
-								</option>`
+								(size) =>
+									/* HTML */ `<option value="${size}">
+										${`${size} px`}
+									</option>`
 							)}
 						</select>
 						<noscript>
@@ -454,6 +456,15 @@ export default abstract class JDDPage extends StatefulPage<
 								documentContainerFromParsed(state.components),
 								this.makeJDDContext(ctx)
 							);
+
+							const currentComponentPrettified =
+								await prettier.format(currentComponent, {
+									parser: "html",
+								});
+							const highlightedHTML = hljs.highlight(
+								currentComponentPrettified,
+								{ language: "html" }
+							).value;
 							return /* HTML */ ` <div
 									class="jdd-outer-container"
 								>
@@ -462,9 +473,7 @@ export default abstract class JDDPage extends StatefulPage<
 									</div>
 								</div>
 								<div class="component-raw-view">
-									<pre><code>${htmlEscape(
-										currentComponent
-									)}</code></pre>
+									<pre><code>${highlightedHTML}</code></pre>
 								</div>`;
 						})()}
 					</div>