p5 (#897)

add p5js element

.changeset/sour-stingrays-whisper.md

@@ -0,0 +1,7 @@
+---
+"@hyperbook/markdown": minor
+"hyperbook": minor
+"@hyperbook/web-component-excalidraw": patch
+---
+
+Add p5 element

.gitignore

@@ -6,6 +6,7 @@ vdirectory.public.json
 vfiles.json
 
 packages/markdown/index.html
+packages/markdown/public
 
 *.zip
 

packages/markdown/assets/code.css

@@ -178,3 +178,8 @@ code[data-line-numbers-max-digits="3"]>[data-line]::before {
 code[data-line-numbers-max-digits="4"]>[data-line]::before {
   width: 2.25rem;
 }
+
+
+code-input:not(.code-input_registered)::before {
+  content: "..."!important;
+}

packages/markdown/assets/directive-abc-music/client.js

@@ -1,5 +1,11 @@
 hyperbook.abc = (function () {
   const els = document.querySelectorAll(".directive-abc-music");
+  window.codeInput?.registerTemplate(
+    "abc-highlighted",
+    codeInput.templates.prism(window.Prism, [
+      new codeInput.plugins.Indent(true, 2),
+    ])
+  );
 
   for (let el of els) {
     const tuneEl = el.getElementsByClassName("tune")[0];
@@ -10,21 +16,33 @@ hyperbook.abc = (function () {
 
     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: {
+
+      const setupEditor = () => {
+        try {
+          new ABCJS.Editor(editorEl.id, {
+            canvas_id: tuneEl,
+            synth: {
+              el: playerEl,
+              options: {
                 displayRestart: true,
                 displayPlay: true,
                 displayProgress: true,
+              },
+            },
+            abcjsParams: {
+              responsive: "resize",
+              selectTypes: false,
+              selectionColor: "currentColor"
             },
-        },
-        abcjsParams: {
-          responsive: "resize",
-        },
-      });
+          });
+        } catch (e) {
+          setTimeout(() => {
+            setupEditor();
+          }, 1000);
+        }
+      };
+
+      setupEditor();
     } else {
       const visualObj = ABCJS.renderAbc(tuneEl, tune, {
         responsive: "resize",

packages/markdown/assets/directive-abc-music/style.css

@@ -1,16 +1,15 @@
 .directive-abc-music .editor {
-    width: 100%;
     margin-bottom: 8px;
-    font-family: hyperbook-code, monospace;
-    height: 150px;
-    line-height: 1.2;
+    height: 400px;
+  	border: 1px solid var(--color-spacer);
+  	border-radius: 8px;
 }
 
 .abcjs-inline-audio {
 	height: 26px;
 	padding: 0 5px;
-	border-radius: 3px;
-	background-color: #424242;
+	border-radius: 8px;
+	background-color: var(--color-spacer);
 	display: flex;
 	align-items: center;
 	box-sizing: border-box;

packages/markdown/assets/directive-p5/client.js

@@ -0,0 +1,35 @@
+hyperbook.p5 = (function () {
+  window.codeInput?.registerTemplate(
+    "p5-highlighted",
+    codeInput.templates.prism(window.Prism, [
+      new codeInput.plugins.AutoCloseBrackets(),
+      new codeInput.plugins.Indent(true, 2),
+    ])
+  );
+
+  const elems = document.getElementsByClassName("directive-p5");
+
+  const wrapSketch = (sketchCode) => {
+    if (sketchCode !== "" && !sketchCode?.includes("setup")) {
+      return `
+      function setup() {
+        createCanvas(100, 100);
+        background(200);
+        ${sketchCode}
+      }`;
+    }
+    return sketchCode;
+  };
+
+  for (let elem of elems) {
+    const editor = elem.getElementsByClassName("editor")[0];
+    const update = elem.getElementsByClassName("update")[0];
+    const frame = elem.getElementsByTagName("iframe")[0];
+    const template = elem.getAttribute("data-template");
+
+    update?.addEventListener("click", () => {
+      const code = editor.value;
+      frame.srcdoc = template.replace("###SLOT###", wrapSketch(code));
+    });
+  }
+})();

packages/markdown/assets/directive-p5/style.css

@@ -0,0 +1,79 @@
+.directive-p5 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 16px;
+  overflow: hidden;
+  gap: 8px;
+}
+
+code-input {
+  margin: 0;
+}
+
+.directive-p5 .container {
+  width: 100%;
+  border: 1px solid var(--color-spacer);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.directive-p5 .editor-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 400px;
+}
+
+.directive-p5 .editor {
+  width: 100%;
+  border: 1px solid var(--color-spacer);
+  border-radius: 8px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  flex: 1;
+}
+
+.directive-p5 button {
+  padding: 8px 16px;
+  border: 1px solid var(--color-spacer);
+  border-radius: 8px;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: var(--color--background);
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+.directive-p5 button:hover {
+  background-color: var(--color-spacer);
+}
+
+.directive-p5 iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+
+.directive-p5 iframe canvas {
+  margin: 0 auto;
+}
+
+@media screen and (min-width: 1024px) {
+  .directive-p5:not(.standalone) {
+    flex-direction: row;
+    height: calc(100dvh - 128px);
+    .container {
+      flex: 1;
+      height: 100% !important;
+    }
+
+    .editor-container {
+      flex: 2;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}

packages/markdown/assets/directive-protect/client.js

@@ -70,7 +70,6 @@ hyperbook.protect = (function () {
       onUpdateToast(inputEl, el, hiddenEL);
       inputEl.addEventListener("input", () => onInputToast(inputEl, el));
       inputEl.addEventListener("check", () => {
-        console.log("update");
         onUpdateToast(inputEl, el, hiddenEL);
       });
     }

packages/markdown/assets/prism/prism-theme-github-dark.css

@@ -0,0 +1,133 @@
+/**
+ * Github Dark theme for Prism.js
+ * Based on Github: https://github.com
+ * @author Katorly
+ */
+/* General */
+pre[class*="language-"],
+code[class*="language-"] {
+  color: #c9d1d9;
+  font-size: 13px;
+  text-shadow: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*="language-"]::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"]::mozselection,
+code[class*="language-"]::mozselection {
+  text-shadow: none;
+  background: #234879;
+}
+@media print {
+  pre[class*="language-"],
+  code[class*="language-"] {
+    text-shadow: none;
+  }
+}
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  background: #161b22;
+}
+:not(pre) > code[class*="language-"] {
+  padding: .1em .3em;
+  border-radius: .3em;
+  color: #c9d1d9;
+  background: #343942;
+}
+/* Line highlighting */
+pre[data-line] {
+  position: relative;
+}
+pre[class*="language-"] > code[class*="language-"] {
+  position: relative;
+  z-index: 1;
+}
+.line-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
+  margin-top: 1em;
+  background: #2f2a1e;
+  box-shadow: inset 5px 0 0 #674c16;
+  z-index: 0;
+  pointer-events: none;
+  line-height: inherit;
+  white-space: pre;
+}
+/* Tokens */
+.namespace {
+  opacity: .7;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #8b949e;
+}
+.token.punctuation {
+  color: #c9d1d9;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #79c0ff;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #a5d6ff;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #a5d6ff;
+  background: #161b22;
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #a5d6ff;
+}
+.token.function {
+  color: #d2a8ff;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #a8daff;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}