@hyperbook/markdown 0.23.1 → 0.24.0

package/dist/assets/directive-mermaid/client.js

@@ -1,9 +1,19 @@
 hyperbook.mermaid = (function () {
   const elementCode = ".directive-mermaid";
 
-  const loadMermaid = function (theme) {
-    window.mermaid.initialize({ theme });
-    window.mermaid.init({ theme }, document.querySelectorAll(elementCode));
+  const loadMermaid = async function (theme) {
+    window.mermaid.initialize({ theme, startOnLoad: false });
+    let i = 0;
+    for (const el of document.querySelectorAll(elementCode)) {
+      if (el.getAttribute("data-processed")) return;
+
+      el.setAttribute("data-processed", true);
+      let id = `graph-` + Date.now() + i++;
+
+      mermaid.render(id, el.innerText).then(({ svg }) => {
+        el.innerHTML = svg;
+      });
+    }
   };
 
   const resetProcessed = function () {

package/dist/assets/directive-webide/client.js

@@ -0,0 +1,144 @@
+hyperbook.webide = (function () {
+  window.codeInput?.registerTemplate(
+    "webide-highlighted",
+    codeInput.templates.prism(window.Prism, [
+      new codeInput.plugins.AutoCloseBrackets(),
+      new codeInput.plugins.Indent(true, 2),
+    ])
+  );
+
+  const elems = document.getElementsByClassName("directive-webide");
+
+  for (let elem of elems) {
+    const title = elem.getElementsByClassName("container-title")[0];
+    /** @type {HTMLTextAreaElement | null} */
+    const editorHTML = elem.querySelector(".editor.html");
+    /** @type {HTMLTextAreaElement | null} */
+    const editorCSS = elem.querySelector(".editor.css");
+    /** @type {HTMLTextAreaElement | null} */
+    const editorJS = elem.querySelector(".editor.js");
+    /** @type {HTMLButtonElement | null} */
+    const btnHTML = elem.querySelector("button.html");
+    /** @type {HTMLButtonElement | null} */
+    const btnCSS = elem.querySelector("button.css");
+    /** @type {HTMLButtonElement | null} */
+    const btnJS = elem.querySelector("button.js");
+
+    const frame = elem.getElementsByTagName("iframe")[0];
+    const template = elem.getAttribute("data-template");
+    const id = elem.getAttribute("data-id");
+    /** @type {HTMLButtonElement} */
+    const resetEl = elem.querySelector("button.reset");
+    /** @type {HTMLButtonElement} */
+    const downloadEl = elem.querySelector("button.download");
+
+    resetEl?.addEventListener("click", () => {
+      if (window.confirm(i18n.get("webide-reset-prompt"))) {
+        store.webide.delete(id);
+        window.location.reload();
+      }
+    });
+
+    btnHTML?.addEventListener("click", () => {
+      btnHTML?.classList.add("active");
+      btnCSS?.classList.remove("active");
+      btnJS?.classList.remove("active");
+
+      editorHTML?.classList.add("active");
+      editorCSS?.classList.remove("active");
+      editorJS?.classList.remove("active");
+    });
+
+    btnCSS?.addEventListener("click", () => {
+      btnHTML?.classList.remove("active");
+      btnCSS?.classList.add("active");
+      btnJS?.classList.remove("active");
+
+      editorHTML?.classList.remove("active");
+      editorCSS?.classList.add("active");
+      editorJS?.classList.remove("active");
+    });
+
+    btnJS?.addEventListener("click", () => {
+      btnHTML?.classList.remove("active");
+      btnCSS?.classList.remove("active");
+      btnJS?.classList.add("active");
+
+      editorHTML?.classList.remove("active");
+      editorCSS?.classList.remove("active");
+      editorJS?.classList.add("active");
+    });
+
+    const load = async () => {
+      const result = await store.webide.get(id);
+      if (!result) return;
+      const website = template
+        .replace("###HTML###", result.html)
+        .replace("###CSS###", result.css)
+        .replace("###JS###", result.js);
+      frame.srcdoc = website;
+    };
+
+    load();
+
+    const update = () => {
+      store.webide.put({
+        id,
+        html: editorHTML?.value,
+        css: editorCSS?.value,
+        js: editorJS?.value,
+      });
+      const website = template
+        .replace("###HTML###", editorHTML?.value)
+        .replace("###CSS###", editorCSS?.value)
+        .replace("###JS###", editorJS?.value);
+      frame.srcdoc = website;
+    };
+    
+    frame.addEventListener("load", () => {
+      title.textContent = frame.contentDocument.title;
+    });
+
+    editorHTML?.addEventListener("code-input_load", async () => {
+      const result = await store.webide.get(id);
+      if (result) {
+        editorHTML.value = result.html;
+      }
+
+      editorHTML.addEventListener("input", () => {
+        update();
+      });
+    });
+
+    editorCSS?.addEventListener("code-input_load", async () => {
+      const result = await store.webide.get(id);
+      if (result) {
+        editorCSS.value = result.css;
+      }
+
+      editorCSS.addEventListener("input", () => {
+        update();
+      });
+    });
+
+    editorJS?.addEventListener("code-input_load", async () => {
+      const result = await store.webide.get(id);
+      if (result) {
+        editorJS.value = result.js;
+      }
+
+      editorJS.addEventListener("input", () => {
+        update();
+      });
+    });
+
+    downloadEl?.addEventListener("click", async () => {
+      const a = document.createElement("a");
+      const website = frame.srcdoc;
+      const blob = new Blob([website], { type: "text/html" });
+      a.href = URL.createObjectURL(blob);
+      a.download = `website-${id}.html`;
+      a.click();
+    });
+  }
+})();

package/dist/assets/directive-webide/style.css

@@ -0,0 +1,125 @@
+.directive-webide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 16px;
+  overflow: hidden;
+  gap: 8px;
+}
+
+code-input {
+  margin: 0;
+}
+
+.directive-webide .container {
+  width: 100%;
+  border: 1px solid var(--color-spacer);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.directive-webide .container-title {
+  border-bottom: 1px solid var(--color-spacer);
+  padding: 8px 16px;
+  padding-left: 0px;
+  overflow: hidden;
+  white-space:nowrap;
+  text-overflow: ellipsis;
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+.directive-webide .container-title::before {
+  content: "";
+  margin-right: 4.4rem;
+  display: inline-block;
+  aspect-ratio: 1 / 1;
+  height: 0.75rem;
+  border-radius: 9999px;
+  opacity: 0.3;
+  box-shadow:
+    0.8em 0,
+    2.2em 0,
+    3.6em 0;
+}
+
+.directive-webide .editor-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 400px;
+}
+
+.directive-webide .editor {
+  width: 100%;
+  border: 1px solid var(--color-spacer);
+  flex: 1;
+}
+
+.directive-webide .editor:not(.active) {
+  display: none;
+}
+
+.directive-webide .buttons {
+  display: flex;
+  border: 1px solid var(--color-spacer);
+  border-radius: 8px;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.directive-webide .buttons.bottom {
+  border: 1px solid var(--color-spacer);
+  border-radius: 8px;
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.directive-webide button {
+  flex: 1;
+  padding: 8px 16px;
+  border: none;
+  border-right: 1px solid var(--color-spacer);
+  background-color: var(--color--background);
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+.directive-webide button:not(.active) {
+  opacity: 0.6;
+}
+
+.directive-webide .buttons:last-child {
+  border-right: none;
+}
+
+.directive-webide button:hover {
+  background-color: var(--color-spacer);
+}
+
+.directive-webide iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+}
+
+@media screen and (min-width: 1024px) {
+  .directive-webide:not(.standalone) {
+    flex-direction: row;
+    height: calc(100dvh - 128px);
+    .container {
+      flex: 1;
+      height: 100% !important;
+    }
+
+    .editor-container {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}

package/dist/assets/store.js

@@ -23,6 +23,7 @@ store.version(1).stores({
   slideshow: `id,active`,
   tabs: `id,active`,
   excalidraw: `id,excalidrawElements,appState,files`,
+  webide: `id,html,css,js`
 });
 var sqlIdeDB = new Dexie("SQL-IDE");
 sqlIdeDB.version(0.1).stores({