@hyperbook/markdown 0.17.1 → 0.19.0

package/dist/assets/directive-abc-music/client.js

@@ -0,0 +1,46 @@
+hyperbook.abc = (function () {
+  const els = document.querySelectorAll(".directive-abc-music");
+
+  for (let el of els) {
+    const tuneEl = el.getElementsByClassName("tune")[0];
+    const playerEl = el.getElementsByClassName("player")[0];
+
+    const tune = atob(el.getAttribute("data-tune"));
+    const editor = el.getAttribute("data-editor");
+
+    if (editor == "true") {
+      const editorEl = el.getElementsByClassName("editor")[0];
+      editorEl.value = tune;
+      let editor = new ABCJS.Editor(editorEl.id, {
+        canvas_id: tuneEl,
+        synth: {
+            el: playerEl,
+            options: {
+                displayRestart: true,
+                displayPlay: true,
+                displayProgress: true,
+            },
+        },
+        abcjsParams: {
+          responsive: "resize",
+        },
+      });
+    } else {
+      const visualObj = ABCJS.renderAbc(tuneEl, tune, {
+        responsive: "resize",
+      })[0];
+      if (ABCJS.synth.supportsAudio()) {
+        var synthControl = new ABCJS.synth.SynthController();
+        synthControl.load(playerEl, null, {
+          displayRestart: true,
+          displayPlay: true,
+          displayProgress: true,
+        });
+        synthControl.setTune(visualObj, false);
+      } else {
+        playerEl.innerHTML =
+          "<div class='audio-error'>Audio is not supported in this browser.</div>";
+      }
+    }
+  }
+})();

package/dist/assets/directive-abc-music/style.css

@@ -0,0 +1,193 @@
+.directive-abc-music .editor {
+    width: 100%;
+    margin-bottom: 8px;
+    font-family: hyperbook-code, monospace;
+    height: 150px;
+    line-height: 1.2;
+}
+
+.abcjs-inline-audio {
+	height: 26px;
+	padding: 0 5px;
+	border-radius: 3px;
+	background-color: #424242;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio.abcjs-disabled {
+	opacity: 0.5;
+}
+
+.abcjs-inline-audio .abcjs-btn {
+	display: block;
+	width: 28px;
+	height: 34px;
+	margin-right: 2px;
+	padding: 7px 4px;
+
+	background: none !important;
+	border: 1px solid transparent;
+	box-sizing: border-box;
+	line-height: 1;
+}
+
+.abcjs-btn g {
+	fill: #f4f4f4;
+	stroke: #f4f4f4;
+}
+
+.abcjs-inline-audio .abcjs-btn:hover g {
+	fill: #cccccc;
+	stroke: #cccccc;
+}
+
+.abcjs-inline-audio .abcjs-midi-selection.abcjs-pushed {
+	border: 1px solid #cccccc;
+	background-color: #666666;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-midi-loop.abcjs-pushed {
+	border: 1px solid #cccccc;
+	background-color: #666666;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-midi-reset.abcjs-pushed {
+	border: 1px solid #cccccc;
+	background-color: #666666;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-midi-start .abcjs-pause-svg {
+	display: none;
+}
+
+.abcjs-inline-audio .abcjs-midi-start .abcjs-loading-svg {
+	display: none;
+}
+
+.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-play-svg {
+	display: none;
+}
+
+.abcjs-inline-audio .abcjs-midi-start.abcjs-loading .abcjs-play-svg {
+	display: none;
+}
+
+.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-pause-svg {
+	display: block;
+}
+
+.abcjs-inline-audio .abcjs-midi-progress-background {
+	background-color: #424242;
+	height: 10px;
+	border-radius: 5px;
+	border: 2px solid #cccccc;
+	margin: 0 8px 0 15px;
+	position: relative;
+	flex: 1;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-midi-progress-indicator {
+	width: 20px;
+	margin-left: -10px; /* half of the width */
+	height: 14px;
+	background-color: #f4f4f4;
+	position: absolute;
+	display: inline-block;
+	border-radius: 6px;
+	top: -4px;
+	left: 0;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-midi-clock {
+	margin-left: 4px;
+	margin-top: 1px;
+	margin-right: 2px;
+	display: inline-block;
+	font-family: sans-serif;
+	font-size: 16px;
+	box-sizing: border-box;
+	color: #f4f4f4;
+}
+
+.abcjs-inline-audio .abcjs-tempo-wrapper {
+	font-size: 10px;
+	color: #f4f4f4;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+}
+
+.abcjs-inline-audio .abcjs-midi-tempo {
+	border-radius: 2px;
+	border: none;
+	margin: 0 2px 0 4px;
+	width: 42px;
+	padding-left: 2px;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-loading .abcjs-loading-svg {
+	display: inherit;
+}
+
+.abcjs-inline-audio .abcjs-loading {
+	outline: none;
+	animation-name: abcjs-spin;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+
+}
+.abcjs-inline-audio .abcjs-loading-svg circle {
+	stroke: #f4f4f4;
+}
+
+@keyframes abcjs-spin {
+	from {transform:rotate(0deg);}
+	to {transform:rotate(360deg);}
+}
+
+/* Adding the class "abcjs-large" will make the control easier on a touch device. */
+.abcjs-large .abcjs-inline-audio {
+	height: 52px;
+}
+.abcjs-large .abcjs-btn {
+	width: 56px;
+	height: 52px;
+	font-size: 28px;
+	padding: 6px 8px;
+}
+.abcjs-large .abcjs-midi-progress-background {
+	height: 20px;
+	border: 4px solid #cccccc;
+}
+.abcjs-large .abcjs-midi-progress-indicator {
+	height: 28px;
+	top: -8px;
+	width: 40px;
+}
+.abcjs-large .abcjs-midi-clock {
+	font-size: 32px;
+	margin-right: 10px;
+	margin-left: 10px;
+	margin-top: -1px;
+}
+.abcjs-large .abcjs-midi-tempo {
+	font-size: 20px;
+	width: 50px;
+}
+.abcjs-large .abcjs-tempo-wrapper {
+	font-size: 20px;
+}
+
+.abcjs-css-warning {
+	display: none;
+}

package/dist/index.js

@@ -63162,7 +63162,15 @@ var remarkDirectiveTabs_default = (ctx) => () => {
           let first = true;
           node3.children.filter(isDirective).forEach((node4) => {
             expectContainerDirective(node4, file, "tab");
-            let { title, id: tabId = hash(node4) } = node4.attributes || {};
+            let { title = "", id: tabId = hash(node4) } = node4.attributes || {};
+            let tree2 = remark(ctx).parse(title);
+            remarkGemoji()(tree2);
+            let hastTree = toHast(tree2);
+            if (hastTree.type === "root" && hastTree.children[0]?.type === "element" && hastTree.children[0]?.tagName === "p") {
+              hastTree = hastTree.children[0];
+              hastTree.tagName = "span";
+            }
+            console.log(JSON.stringify(hastTree, null, 2));
             tabTitleElements.push({
               type: "element",
               tagName: "button",
@@ -63171,12 +63179,7 @@ var remarkDirectiveTabs_default = (ctx) => () => {
                 "data-tabs-id": tabsId,
                 class: "tab" + (first ? " active" : "")
               },
-              children: [
-                {
-                  type: "text",
-                  value: title || ""
-                }
-              ]
+              children: hastTree.children || []
             });
             tabContentElements.push({
               type: "element",
@@ -72460,10 +72463,75 @@ var remarkDirectiveGeogebra_default = (ctx) => () => {
   };
 };
 
+// src/remarkDirectiveAbcMusic.ts
+var remarkDirectiveAbcMusic_default = (ctx) => () => {
+  const name = "abc-music";
+  return (tree, file) => {
+    visit(tree, function(node3) {
+      if (node3.type === "code" && node3.lang === "abcjs") {
+        const data = node3.data || (node3.data = {});
+        node3.type = "directive";
+        node3.lang = "";
+        expectContainerDirective(node3, file, name);
+        registerDirective(
+          file,
+          name,
+          ["abcjs-basic-min.js", "client.js"],
+          ["style.css"]
+        );
+        console.log(node3);
+        const value = node3.value || toString2(node3.children);
+        const editor = node3.meta?.includes("editor");
+        console.log(editor);
+        data.hName = "div";
+        data.hProperties = {
+          class: "directive-abc-music",
+          "data-tune": Buffer.from(value).toString("base64"),
+          "data-editor": editor ? "true" : "false"
+        };
+        data.hChildren = [
+          {
+            type: "element",
+            tagName: "div",
+            properties: {
+              class: "tune"
+            },
+            children: [
+              {
+                type: "text",
+                value
+              }
+            ]
+          },
+          ...editor ? [
+            {
+              type: "element",
+              tagName: "textarea",
+              properties: {
+                class: "editor",
+                id: hash(node3),
+                spellcheck: "false"
+              }
+            }
+          ] : [],
+          {
+            type: "element",
+            tagName: "div",
+            properties: {
+              class: "player"
+            }
+          }
+        ];
+      }
+    });
+  };
+};
+
 // src/process.ts
 var remark = (ctx) => {
   const remarkPlugins = [
     remarkRemoveComments,
+    remarkGemoji,
     remarkDirective,
     dist_default,
     remarkDirectivePagelist_default(ctx),
@@ -72490,12 +72558,12 @@ var remark = (ctx) => {
     remarkDirectiveSlideshow_default(ctx),
     remarkDirectiveScratchblock_default(ctx),
     remarkDirectiveMermaid_default(ctx),
+    remarkDirectiveAbcMusic_default(ctx),
     remarkDirectiveExcalidraw_default(ctx),
     remarkDirectiveStruktog_default(ctx),
     remarkDirectiveGeogebra_default(ctx),
     remarkCode_default(ctx),
     remarkMath,
-    remarkGemoji,
     remarkUnwrapImages,
     /* needs to be last directive */
     remarkDirectiveProtect_default(ctx),