@hyperbook/markdown 0.37.2 → 0.38.0

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

@@ -0,0 +1,63 @@
+hyperbook.textinput = (function () {
+  // Debounce helper to reduce database writes
+  const debounce = (func, wait) => {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  };
+
+  const init = (root) => {
+    let allTextInputs = root.querySelectorAll(".directive-textinput textarea[data-id]");
+    
+    allTextInputs.forEach((textarea) => {
+      const id = textarea.getAttribute("data-id");
+      
+      // Load saved text from store
+      store.textinput.get(id).then((result) => {
+        if (result && result.text) {
+          textarea.value = result.text;
+        }
+      }).catch((error) => {
+        console.error("Failed to load textinput from store:", error);
+      });
+      
+      // Save text to store on input with debouncing
+      const saveToStore = debounce(() => {
+        store.textinput.put({
+          id: id,
+          text: textarea.value,
+        }).catch((error) => {
+          console.error("Failed to save textinput to store:", error);
+        });
+      }, 500);
+      
+      textarea.addEventListener("input", saveToStore);
+    });
+  };
+
+  init(document.body);
+
+  // Observe for new textinputs added to the DOM
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1) {
+          // Element node
+          init(node);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  return {
+    init,
+  };
+})();

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

@@ -0,0 +1,27 @@
+.directive-textinput {
+  margin: 1rem 0;
+}
+
+.directive-textinput textarea {
+  width: 100%;
+  padding: 0.75rem;
+  font-family: inherit;
+  font-size: 1rem;
+  border: 1px solid var(--color-nav-border, #ccc);
+  border-radius: 4px;
+  resize: vertical;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+  background-color: var(--color-background, white);
+  color: var(--color-text, black);
+}
+
+.directive-textinput textarea:focus {
+  outline: none;
+  border-color: var(--color-brand, #007864);
+}
+
+.directive-textinput textarea::placeholder {
+  color: var(--color-text-deactivated, #999);
+  opacity: 1;
+}

package/dist/assets/store.js

@@ -27,6 +27,7 @@ store.version(1).stores({
   h5p: `id,userData`,
   geogebra: `id,state`,
   learningmap: `id,nodes,x,y,zoom`,
+  textinput: `id,text`,
 });
 var sqlIdeDB = new Dexie("SQL-IDE");
 sqlIdeDB.version(0.1).stores({

package/dist/index.js

@@ -78652,6 +78652,44 @@ var remarkDirectiveLearningmap_default = (ctx) => () => {
   };
 };
 
+// src/remarkDirectiveTextinput.ts
+var remarkDirectiveTextinput_default = (ctx) => () => {
+  const name = "textinput";
+  return (tree, file) => {
+    visit(tree, function(node3) {
+      if (isDirective(node3)) {
+        if (node3.name !== name) return;
+        const data = node3.data || (node3.data = {});
+        expectLeafDirective(node3, file, name);
+        registerDirective(file, name, ["client.js"], ["style.css"], []);
+        const {
+          placeholder = "",
+          height = "200px",
+          id = hash(node3)
+        } = node3.attributes || {};
+        data.hName = "div";
+        data.hProperties = {
+          class: "directive-textinput",
+          "data-id": id
+        };
+        data.hChildren = [
+          {
+            type: "element",
+            tagName: "textarea",
+            properties: {
+              class: "textinput",
+              "data-id": id,
+              placeholder,
+              style: `height: ${height}`
+            },
+            children: []
+          }
+        ];
+      }
+    });
+  };
+};
+
 // src/process.ts
 var remark = (ctx) => {
   i18n.init(ctx.config.language || "en");
@@ -78695,6 +78733,7 @@ var remark = (ctx) => {
     remarkDirectiveJSXGraph_default(ctx),
     remarkDirectiveMultievent_default(ctx),
     remarkDirectiveLearningmap_default(ctx),
+    remarkDirectiveTextinput_default(ctx),
     remarkCode_default(ctx),
     remarkMath,
     /* needs to be last directive */