@hyperbook/markdown 0.23.1 → 0.24.0

package/dist/index.js

@@ -63702,11 +63702,19 @@ function hash(object) {
 }
 
 // src/remarkDirectiveTabs.ts
-var remarkDirectiveTabs_default = (ctx) => () => {
-  return (tree, file) => {
-    visit(tree, function(node3) {
-      if (isDirective(node3)) {
-        if (node3.name !== "tabs") return;
+function remarkDirectiveTabs_default(ctx) {
+  return function() {
+    const self2 = this;
+    return async (tree, file) => {
+      const tabsNodes = [];
+      visit(tree, function(node3) {
+        if (isDirective(node3)) {
+          if (node3.name !== "tabs") return;
+          tabsNodes.push(node3);
+          return;
+        }
+      });
+      for (const node3 of tabsNodes) {
         const data = node3.data || (node3.data = {});
         if (node3.name === "tabs") {
           expectContainerDirective(node3, file, "tabs");
@@ -63722,9 +63730,9 @@ var remarkDirectiveTabs_default = (ctx) => () => {
           const tabContentElements = [];
           const tabTitleElements = [];
           let first = true;
-          node3.children.filter(isDirective).forEach((node4) => {
-            expectContainerDirective(node4, file, "tab");
-            let { title = "", id: tabId = hash(node4) } = node4.attributes || {};
+          for (const tabNode of node3.children.filter(isDirective)) {
+            expectContainerDirective(tabNode, file, "tab");
+            let { title = "", id: tabId = hash(tabNode) } = tabNode.attributes || {};
             let tree2 = remark(ctx).parse(title);
             remarkGemoji()(tree2);
             let hastTree = toHast(tree2);
@@ -63742,6 +63750,7 @@ var remarkDirectiveTabs_default = (ctx) => () => {
               },
               children: hastTree.children || []
             });
+            const tabContent = await remark(ctx).run(tabNode);
             tabContentElements.push({
               type: "element",
               tagName: "div",
@@ -63750,10 +63759,10 @@ var remarkDirectiveTabs_default = (ctx) => () => {
                 "data-tab-id": tabId,
                 "data-tabs-id": tabsId
               },
-              children: toHast(node4)?.children
+              children: [tabContent]
             });
             first = false;
-          });
+          }
           data.hChildren = [
             {
               type: "element",
@@ -63768,9 +63777,9 @@ var remarkDirectiveTabs_default = (ctx) => () => {
           ];
         }
       }
-    });
+    };
   };
-};
+}
 
 // src/remarkDirectiveSqlIde.ts
 var remarkDirectiveSqlIde_default = (ctx) => () => {
@@ -63913,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
@@ -63955,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
@@ -66656,48 +66681,55 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
     }
     return [element5];
   };
-  return (tree, file) => {
+  const collapsibleNodes = [];
+  return async (tree, file) => {
     visit(tree, function(node3) {
       if (isDirective(node3)) {
         if (node3.name !== name) return;
-        const data = node3.data || (node3.data = {});
-        const { title = "", id } = node3.data.hProperties || {};
-        expectContainerDirective(node3, file, name);
-        registerDirective(file, name, [], ["style.css"]);
-        node3.attributes = {};
-        data.hName = "div";
-        data.hProperties = {
-          class: "directive-collapsible",
-          "data-id": id
-        };
-        const children = toHast(node3)?.children.flatMap(
-          transformCollapsible
-        );
-        data.hChildren = [
-          {
-            type: "element",
-            tagName: "button",
-            properties: {
-              class: "collapsible"
-            },
-            children: [
-              {
-                type: "text",
-                value: title
-              }
-            ]
-          },
-          {
-            type: "element",
-            tagName: "div",
-            properties: {
-              class: "collapsible-content"
-            },
-            children
-          }
-        ];
+        collapsibleNodes.push(node3);
+        return;
       }
     });
+    for (const node3 of collapsibleNodes) {
+      const data = node3.data || (node3.data = {});
+      const { title = "", id } = node3.data.hProperties || {};
+      expectContainerDirective(node3, file, name);
+      registerDirective(file, name, [], ["style.css"]);
+      node3.attributes = {};
+      data.hName = "div";
+      data.hProperties = {
+        class: "directive-collapsible",
+        "data-id": id
+      };
+      const collapsibleContent = [];
+      for (const child of node3.children) {
+        collapsibleContent.push(await remark(ctx).run(child));
+      }
+      console.log(collapsibleContent);
+      data.hChildren = [
+        {
+          type: "element",
+          tagName: "button",
+          properties: {
+            class: "collapsible"
+          },
+          children: [
+            {
+              type: "text",
+              value: title
+            }
+          ]
+        },
+        {
+          type: "element",
+          tagName: "div",
+          properties: {
+            class: "collapsible-content"
+          },
+          children: collapsibleContent
+        }
+      ];
+    }
   };
 };
 
@@ -73243,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 `
@@ -73872,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 = [
@@ -73908,6 +74187,7 @@ var remark = (ctx) => {
     remarkDirectiveExcalidraw_default(ctx),
     remarkDirectiveStruktog_default(ctx),
     remarkDirectiveGeogebra_default(ctx),
+    remarkDirectiveWebide_default(ctx),
     remarkCode_default(ctx),
     remarkMath,
     remarkUnwrapImages,
@@ -73916,6 +74196,12 @@ var remark = (ctx) => {
     remarkCollectHeadings_default(ctx),
     remarkCollectSearchDocuments_default(ctx)
   ];
+  return unified().use(remarkParse).use(remarkPlugins).use(remarkRehype, {
+    allowDangerousHtml: ctx.config.allowDangerousHtml || false
+  });
+};
+var process2 = (md, ctx) => {
+  i18n.init(ctx.config.language || "en");
   const rehypePlugins = [
     rehypeTableOfContents_default(ctx),
     rehypeQrCode_default(ctx),
@@ -73939,13 +74225,7 @@ var remark = (ctx) => {
     ],
     rehypeFormat
   ];
-  return unified().use(remarkParse).use(remarkPlugins).use(remarkRehype, {
-    allowDangerousHtml: ctx.config.allowDangerousHtml || false
-  }).use(rehypePlugins);
-};
-var process2 = (md, ctx) => {
-  i18n.init(ctx.config.language || "en");
-  return remark(ctx).use(rehypeShell_default(ctx)).use(rehypeHtmlStructure_default(ctx)).use(rehypeStringify, {
+  return remark(ctx).use(rehypePlugins).use(rehypeShell_default(ctx)).use(rehypeHtmlStructure_default(ctx)).use(rehypeStringify, {
     allowDangerousCharacters: true,
     allowDangerousHtml: ctx.config.allowDangerousHtml || false
   }).process(md);