@hyperbook/markdown 0.23.2 → 0.24.0

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({

package/dist/index.js

@@ -63922,7 +63922,15 @@ var en_default = {
   "slideshow-previous": "Previous",
   "slideshow-next": "Next",
   "slideshow-jump-to": "Jump to {{index}}",
-  "toggle-bookmark": "Toggle Bookmark"
+  "toggle-bookmark": "Toggle Bookmark",
+  "webide-code-preview": "Code Preview",
+  "webide-html": "HTML",
+  "webide-css": "CSS",
+  "webide-js": "JS",
+  "webide-reset": "Reset",
+  "webide-reset-prompt": "Are you sure you want to reset the code?",
+  "webide-copy": "Copy",
+  "webide-download": "Download"
 };
 
 // locales/de.json
@@ -63964,7 +63972,15 @@ var de_default = {
   "slideshow-previous": "Zur\xFCck",
   "slideshow-next": "Weiter",
   "slideshow-jump-to": "Springe zu {{index}}",
-  "toggle-bookmark": "Lesezeichen umschalten"
+  "toggle-bookmark": "Lesezeichen umschalten",
+  "webide-code-preview": "Code-Vorschau",
+  "webide-html": "HTML",
+  "webide-css": "CSS",
+  "webide-js": "JS",
+  "webide-reset": "Zur\xFCcksetzen",
+  "webide-reset-prompt": "Sind Sie sicher, dass Sie den Code zur\xFCcksetzen m\xF6chten?",
+  "webide-copy": "Kopieren",
+  "webide-download": "Herunterladen"
 };
 
 // src/i18n.ts
@@ -73259,9 +73275,6 @@ var rehypeDirectiveP5_default = (ctx) => () => {
     path4.posix.join("directive-p5", "p5.min.js"),
     "assets"
   );
-  const escape2 = (s3) => {
-    return s3.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  };
   const wrapSketch = (sketchCode) => {
     if (sketchCode !== "" && !sketchCode?.includes("setup")) {
       return `
@@ -73888,6 +73901,256 @@ var remarkDirectivePyide_default = (ctx) => () => {
   };
 };
 
+// src/remarkDirectiveWebide.ts
+var remarkDirectiveWebide_default = (ctx) => () => {
+  const name = "webide";
+  const makeWrapInMarkupTemplate = () => `<!DOCTYPE html>
+<head>
+<title>WebIDE</title>
+<meta charset="utf8" />
+<style type='text/css'>
+html, body {
+  margin: 0;
+  padding: 0;
+  background: white;
+}
+###CSS###
+</style>
+</head>
+<body>###HTML###</body>
+<script type="text/javascript">###JS###</script>
+`;
+  return (tree, file) => {
+    visit(tree, function(node3) {
+      if (isDirective(node3) && node3.name === name) {
+        const { height = 400, id = hash(node3) } = node3.attributes || {};
+        const data = node3.data || (node3.data = {});
+        expectContainerDirective(node3, file, name);
+        registerDirective(file, name, ["client.js"], ["style.css"]);
+        requestJS(file, ["code-input", "code-input.min.js"]);
+        requestCSS(file, ["code-input", "code-input.min.css"]);
+        requestJS(file, ["code-input", "auto-close-brackets.min.js"]);
+        requestJS(file, ["code-input", "indent.min.js"]);
+        let js = "";
+        let css = "";
+        let html11 = "";
+        let template = makeWrapInMarkupTemplate();
+        let jsNode = node3.children.find(
+          (n) => n.type === "code" && n.lang === "js"
+        );
+        let cssNode = node3.children.find(
+          (n) => n.type === "code" && n.lang === "css"
+        );
+        let htmlNode = node3.children.find(
+          (n) => n.type === "code" && n.lang === "html" && n.meta === null
+        );
+        let templateNode = node3.children.find(
+          (n) => n.type === "code" && n.lang === "html" && n.meta === "template"
+        );
+        const buttons = [];
+        const editors = [];
+        if (htmlNode) {
+          html11 = htmlNode.value;
+          buttons.push({
+            type: "element",
+            tagName: "button",
+            properties: {
+              class: "html"
+            },
+            children: [
+              {
+                type: "text",
+                value: i18n.get("webide-html")
+              }
+            ]
+          });
+          editors.push({
+            type: "element",
+            tagName: "code-input",
+            properties: {
+              class: "editor html line-numbers",
+              language: "html",
+              template: "webide-highlighted"
+            },
+            children: [
+              {
+                type: "raw",
+                value: html11
+              }
+            ]
+          });
+        }
+        if (cssNode) {
+          css = cssNode.value;
+          buttons.push({
+            type: "element",
+            tagName: "button",
+            properties: {
+              class: "css"
+            },
+            children: [
+              {
+                type: "text",
+                value: i18n.get("webide-css")
+              }
+            ]
+          });
+          editors.push({
+            type: "element",
+            tagName: "code-input",
+            properties: {
+              class: "editor css line-numbers",
+              language: "css",
+              template: "webide-highlighted"
+            },
+            children: [
+              {
+                type: "raw",
+                value: css
+              }
+            ]
+          });
+        }
+        if (jsNode) {
+          js = jsNode.value;
+          buttons.push({
+            type: "element",
+            tagName: "button",
+            properties: {
+              class: "js"
+            },
+            children: [
+              {
+                type: "text",
+                value: i18n.get("webide-js")
+              }
+            ]
+          });
+          editors.push({
+            type: "element",
+            tagName: "code-input",
+            properties: {
+              class: "editor js line-numbers",
+              language: "javascript",
+              template: "webide-highlighted"
+            },
+            children: [
+              {
+                type: "raw",
+                value: js
+              }
+            ]
+          });
+        }
+        if (buttons.length > 0) {
+          buttons[0].properties.class += " active";
+        }
+        if (editors.length > 0) {
+          editors[0].properties.class += " active";
+        }
+        if (templateNode) template = templateNode.value;
+        const srcdoc = template.replace("###JS###", js).replace("###HTML###", html11).replace("###CSS###", css).replace(/\u00A0/g, " ");
+        data.hName = "div";
+        data.hProperties = {
+          class: "directive-webide",
+          "data-template": template.replace(/\u00A0/g, " "),
+          "data-id": id
+        };
+        data.hChildren = [
+          {
+            type: "element",
+            tagName: "div",
+            properties: {
+              class: "container",
+              style: `height: ${height}px;`
+            },
+            children: [
+              {
+                type: "element",
+                tagName: "div",
+                properties: {
+                  class: "container-title"
+                },
+                children: [
+                  {
+                    type: "text",
+                    value: ""
+                  }
+                ]
+              },
+              {
+                type: "element",
+                tagName: "iframe",
+                properties: {
+                  srcdoc,
+                  loading: "eager",
+                  sandbox: "allow-scripts allow-popups allow-modals allow-forms allow-same-origin",
+                  "aria-label": i18n.get("webide-code-preview"),
+                  title: i18n.get("webide-code-preview")
+                },
+                children: []
+              }
+            ]
+          },
+          {
+            type: "element",
+            tagName: "div",
+            properties: {
+              class: "editor-container"
+            },
+            children: [
+              {
+                type: "element",
+                tagName: "div",
+                properties: {
+                  class: "buttons"
+                },
+                children: buttons
+              },
+              ...editors,
+              {
+                type: "element",
+                tagName: "div",
+                properties: {
+                  class: "buttons bottom"
+                },
+                children: [
+                  {
+                    type: "element",
+                    tagName: "button",
+                    properties: {
+                      class: "reset"
+                    },
+                    children: [
+                      {
+                        type: "text",
+                        value: i18n.get("webide-reset")
+                      }
+                    ]
+                  },
+                  {
+                    type: "element",
+                    tagName: "button",
+                    properties: {
+                      class: "download"
+                    },
+                    children: [
+                      {
+                        type: "text",
+                        value: i18n.get("webide-download")
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ];
+      }
+    });
+  };
+};
+
 // src/process.ts
 var remark = (ctx) => {
   const remarkPlugins = [
@@ -73924,6 +74187,7 @@ var remark = (ctx) => {
     remarkDirectiveExcalidraw_default(ctx),
     remarkDirectiveStruktog_default(ctx),
     remarkDirectiveGeogebra_default(ctx),
+    remarkDirectiveWebide_default(ctx),
     remarkCode_default(ctx),
     remarkMath,
     remarkUnwrapImages,