hyperbook 0.93.1 → 0.95.0

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

@@ -7,14 +7,6 @@
  * @see hyperbook.store
  */
 hyperbook.p5 = (function () {
-  window.codeInput?.registerTemplate(
-    "p5-highlighted",
-    codeInput.templates.prism(window.Prism, [
-      new codeInput.plugins.AutoCloseBrackets(),
-      new codeInput.plugins.Indent(true, 2),
-    ]),
-  );
-
   const wrapSketch = (sketchCode) => {
     if (sketchCode !== "" && !sketchCode?.includes("setup")) {
       return `
@@ -128,7 +120,7 @@ hyperbook.p5 = (function () {
     const container = elem.querySelector(".container");
     const editorContainer = elem.querySelector(".editor-container");
     const splitter = elem.querySelector(".splitter");
-    const editor = elem.getElementsByClassName("editor")[0];
+    const editorDiv = elem.getElementsByClassName("editor")[0];
     /** @type {HTMLButtonElement} */
     const update = elem.getElementsByClassName("update")[0];
     const frame = elem.getElementsByTagName("iframe")[0];
@@ -139,6 +131,20 @@ hyperbook.p5 = (function () {
     const downloadEl = elem.getElementsByClassName("download")[0];
     const fullscreenEl = elem.getElementsByClassName("fullscreen")[0];
 
+    // Initialize CodeMirror editor (only in editor mode)
+    let cm = null;
+    if (editorDiv) {
+      const initialSource = editorDiv.textContent;
+      editorDiv.textContent = "";
+      cm = HyperbookCM.create(editorDiv, {
+        lang: editorDiv.dataset.lang,
+        value: initialSource,
+        onChange: (code) => {
+          if (id) hyperbook.store.db.p5.put({ id, sketch: code });
+        },
+      });
+    }
+
     setupSplitter(elem, container, editorContainer, splitter);
 
     fullscreenEl?.addEventListener("click", async () => {
@@ -159,7 +165,7 @@ hyperbook.p5 = (function () {
 
     copyEl?.addEventListener("click", async () => {
       try {
-        await navigator.clipboard.writeText(editor.value);
+        await navigator.clipboard.writeText(cm?.getValue() ?? "");
       } catch (error) {
         console.error(error.message);
       }
@@ -172,35 +178,30 @@ hyperbook.p5 = (function () {
 
     downloadEl?.addEventListener("click", () => {
       const a = document.createElement("a");
-      const blob = new Blob([editor.value], { type: "text/plain" });
+      const blob = new Blob([cm?.getValue() ?? ""], { type: "text/plain" });
       a.href = URL.createObjectURL(blob);
       a.download = `sketch-${id}.js`;
       a.click();
     });
 
-    editor?.addEventListener("code-input_load", async () => {
-      if (id) {
-        const result = await hyperbook.store.db.p5.get(id);
+    if (id && cm) {
+      hyperbook.store.db.p5.get(id).then((result) => {
         if (result) {
-          editor.value = result.sketch;
+          cm.setValue(result.sketch);
           const code = result.sketch;
           frame.srcdoc = template
             .replace("###SLOT###", wrapSketch(code))
             .replaceAll("###ORIGIN###", window.location.origin)
             .replace(/\u00A0/g, " ");
         }
-
-        editor.addEventListener("input", () => {
-          hyperbook.store.db.p5.put({ id, sketch: editor.value });
-        });
-      }
-
-      update?.addEventListener("click", () => {
-        const code = editor.value;
-        frame.srcdoc = template
-          .replace("###SLOT###", wrapSketch(code))
-          .replaceAll("###ORIGIN###", window.location.origin);
       });
+    }
+
+    update?.addEventListener("click", () => {
+      const code = cm?.getValue() ?? "";
+      frame.srcdoc = template
+        .replace("###SLOT###", wrapSketch(code))
+        .replaceAll("###ORIGIN###", window.location.origin);
     });
   }
 

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

@@ -11,6 +11,18 @@ code-input {
   margin: 0;
 }
 
+.directive-p5 .editor {
+  width: 100%;
+  border: 1px solid var(--color-spacer);
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.directive-p5 .editor .cm-editor {
+  height: 100%;
+}
+
 .directive-p5 .container {
   width: 100%;
   min-height: 120px;
@@ -70,12 +82,6 @@ code-input {
   opacity: 0.75;
 }
 
-.directive-p5 .editor {
-  width: 100%;
-  border: 1px solid var(--color-spacer);
-  flex: 1;
-}
-
 .directive-p5 .buttons {
   display: flex;
   border: 1px solid var(--color-spacer);

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

@@ -8,14 +8,6 @@
  * @see hyperbook.i18n
  */
 hyperbook.python = (function () {
-  window.codeInput?.registerTemplate(
-    "pyide-highlighted",
-    codeInput.templates.prism(window.Prism, [
-      new codeInput.plugins.AutoCloseBrackets(),
-      new codeInput.plugins.Indent(true, 2),
-    ])
-  );
-
   const PYODIDE_CDN = "https://cdn.jsdelivr.net/pyodide/v0.29.4/full/pyodide.js";
 
   const loadPyodideScript = () => {
@@ -1899,7 +1891,7 @@ if _pg:
       const test = elem.getElementsByClassName("test")[0];
       const stop = elem.getElementsByClassName("stop")[0];
       const editor = elem.getElementsByClassName("editor")[0];
-      const editorTextarea = editor?.querySelector("textarea");
+      const editorCm = editor?._cm;
       const state = getExecutionState(elem.id);
       const hasRuntime = runtimes.has(elem.id);
       const hasInterrupt = interruptBuffers.has(elem.id);
@@ -1917,11 +1909,8 @@ if _pg:
       elem.classList.toggle("locked-by-other", lockedByOther);
 
       if (state.running || lockedByOther) {
-        editor?.setAttribute("disabled", "");
         editor?.classList.add("running");
-        if (editorTextarea) {
-          editorTextarea.readOnly = true;
-        }
+        editorCm?.setReadOnly(true);
         if (state.running && state.type === "run") {
           run.textContent = hyperbook.i18n.get("pyide-running");
           run.disabled = true;
@@ -1969,11 +1958,8 @@ if _pg:
           stop.classList.toggle("stopping", state.stopping);
         }
       } else {
-        editor?.removeAttribute("disabled");
         editor?.classList.remove("running");
-        if (editorTextarea) {
-          editorTextarea.readOnly = false;
-        }
+        editorCm?.setReadOnly(false);
         run.classList.remove("stopping");
         run.classList.remove("running");
         run.textContent = hyperbook.i18n.get("pyide-run");
@@ -2162,7 +2148,7 @@ if _pg:
       if (elem.getAttribute("data-pyide-initialized") === "true") continue;
       elem.setAttribute("data-pyide-initialized", "true");
 
-      const editor = elem.getElementsByClassName("editor")[0];
+      const editorDiv = elem.getElementsByClassName("editor")[0];
       const container = elem.getElementsByClassName("container")[0];
       const editorContainer = elem.getElementsByClassName("editor-container")[0];
       const splitter = elem.getElementsByClassName("splitter")[0];
@@ -2202,11 +2188,20 @@ if _pg:
       };
       let pyideState = { id };
 
-      const getEditorValue = () => {
-        const textarea = editor?.querySelector("textarea");
-        if (textarea) return textarea.value;
-        return typeof editor?.textContent === "string" ? editor.textContent : "";
-      };
+      // Initialize CodeMirror
+      const initialSource = editorDiv ? editorDiv.textContent : "";
+      if (editorDiv) editorDiv.textContent = "";
+      const cm = editorDiv ? HyperbookCM.create(editorDiv, {
+        lang: editorDiv.dataset.lang || "python",
+        value: initialSource,
+        onChange: (code) => {
+          void persistPyideState({ script: code });
+        },
+      }) : null;
+      // Store CM on the element so updateRunning() can toggle readOnly
+      if (editorDiv && cm) editorDiv._cm = cm;
+
+      const getEditorValue = () => cm?.getValue() ?? "";
 
       pyideState = { ...pyideState, script: getEditorValue() };
 
@@ -2359,7 +2354,7 @@ if _pg:
         if (result) {
           pyideState = { ...pyideState, ...result };
           if (typeof result.script === "string") {
-            editor.value = result.script;
+            cm?.setValue(result.script);
           }
           if (
             Number.isFinite(result.splitHorizontal) &&
@@ -2386,10 +2381,7 @@ if _pg:
         }
       };
 
-      editor.addEventListener("code-input_load", restoreEditorState);
-      if (editor.querySelector("textarea")) {
-        void restoreEditorState();
-      }
+      void restoreEditorState();
 
       window.addEventListener("resize", () => {
         applyCanvasOutputLayout();
@@ -2397,10 +2389,6 @@ if _pg:
       });
       applyCanvasOutputLayout();
 
-      editor.addEventListener("input", () => {
-        void persistPyideState({ script: getEditorValue() });
-      });
-
       test?.addEventListener("click", async () => {
         showOutput();
         const state = getExecutionState(id);

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

@@ -12,6 +12,18 @@
   margin: 0;
 }
 
+.directive-pyide .editor {
+  width: 100%;
+  border: 1px solid var(--color-spacer);
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.directive-pyide .editor .cm-editor {
+  height: 100%;
+}
+
 .directive-pyide .container {
   width: 100%;
   overflow: hidden;
@@ -135,12 +147,6 @@
   opacity: 0.75;
 }
 
-.directive-pyide .editor {
-  width: 100%;
-  border: 1px solid var(--color-spacer);
-  flex: 1;
-}
-
 .directive-pyide .editor.running {
   pointer-events: none;
   opacity: 0.7;

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

@@ -88,21 +88,6 @@ hyperbook.typst = (function () {
   // INITIALIZATION
   // ============================================================================
 
-  /**
-   * Initialize code-input template for Typst syntax highlighting
-   */
-  const initializeCodeInput = () => {
-    if (!window.codeInput) return;
-
-    window.codeInput.registerTemplate(
-      "typst-highlighted",
-      window.codeInput.templates.prism(window.Prism, [
-        new window.codeInput.plugins.AutoCloseBrackets(),
-        new window.codeInput.plugins.Indent(true, 2),
-      ])
-    );
-  };
-
   // ============================================================================
   // TYPST LOADER
   // ============================================================================
@@ -1269,6 +1254,7 @@ hyperbook.typst = (function () {
       this.sourceTextarea = elem.querySelector('.typst-source');
       this.fullscreenBtn = elem.querySelector('.fullscreen');
       this.editorInitialized = false;
+      this.cm = null;
 
       setupSplitter(this.elem, this.previewContainer, this.editorContainer, this.splitter);
 
@@ -1320,28 +1306,26 @@ hyperbook.typst = (function () {
      */
     async initialize() {
       if (this.editor) {
-        const initializeEditor = async () => {
-          if (this.editorInitialized) return;
-          this.editorInitialized = true;
-          await this.restoreState();
-          this.uiManager.updateTabs();
-          this.uiManager.updateBinaryFilesList();
-          this.rerender();
-
-          // Create debounced rerender for input events
-          const debouncedRerender = debounce(() => this.rerender(), CONFIG.DEBOUNCE_DELAY);
-
-          this.editor.addEventListener('input', () => {
+        if (this.editorInitialized) return;
+        this.editorInitialized = true;
+
+        // Create CodeMirror editor
+        const initialSource = this.editor.textContent;
+        this.editor.textContent = "";
+        const debouncedRerender = debounce(() => this.rerender(), CONFIG.DEBOUNCE_DELAY);
+        this.cm = HyperbookCM.create(this.editor, {
+          lang: "typst",
+          value: initialSource,
+          onChange: () => {
             this.saveState();
             debouncedRerender();
-          });
-        };
+          },
+        });
 
-        // Edit mode - wait for code-input to load (or initialize immediately if already ready)
-        this.editor.addEventListener('code-input_load', initializeEditor);
-        if (this.editor.querySelector('textarea')) {
-          await initializeEditor();
-        }
+        await this.restoreState();
+        this.uiManager.updateTabs();
+        this.uiManager.updateBinaryFilesList();
+        this.rerender();
       } else if (this.sourceTextarea) {
         // Preview mode
         const initialCode = this.sourceTextarea.value;
@@ -1606,28 +1590,12 @@ hyperbook.typst = (function () {
 
     getEditorValue() {
       if (!this.editor) return '';
-      const textarea = this.editor.querySelector('textarea');
-      if (textarea) return textarea.value;
-      try {
-        if (typeof this.editor.value === 'string') {
-          return this.editor.value;
-        }
-      } catch (e) {}
-      return this.editor.textContent || '';
+      return this.cm?.getValue() ?? '';
     }
 
     setEditorValue(value) {
       if (!this.editor) return;
-      const normalizedValue = value ?? '';
-      const textarea = this.editor.querySelector('textarea');
-      if (textarea) {
-        textarea.value = normalizedValue;
-      }
-      try {
-        this.editor.value = normalizedValue;
-      } catch (e) {
-        this.editor.textContent = normalizedValue;
-      }
+      this.cm?.setValue(value ?? '');
     }
   }
 
@@ -1635,9 +1603,6 @@ hyperbook.typst = (function () {
   // MAIN INITIALIZATION
   // ============================================================================
 
-  // Initialize code-input
-  initializeCodeInput();
-
   // Get all Typst directive elements
   const elements = document.getElementsByClassName('directive-typst');
 

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

@@ -12,6 +12,18 @@ code-input {
   margin: 0;
 }
 
+.directive-typst .editor {
+  width: 100%;
+  border: 1px solid var(--color-spacer);
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.directive-typst .editor .cm-editor {
+  height: 100%;
+}
+
 .directive-typst .preview-container {
   width: 100%;
   min-height: 120px;
@@ -419,12 +431,6 @@ code-input {
   color: #dc2626;
 }
 
-.directive-typst .editor {
-  width: 100%;
-  border: 1px solid var(--color-spacer);
-  flex: 1;
-}
-
 .directive-typst .editor:not(.active) {
   display: none;
 }

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

@@ -8,14 +8,6 @@
  * @see hyperbook.i18n
  */
 hyperbook.webide = (function () {
-  window.codeInput?.registerTemplate(
-    "webide-highlighted",
-    codeInput.templates.prism(window.Prism, [
-      new codeInput.plugins.AutoCloseBrackets(),
-      new codeInput.plugins.Indent(true, 2),
-    ]),
-  );
-
   function setupSplitter(elem, container, editorContainer, splitter) {
     if (!container || !editorContainer || !splitter) return;
 
@@ -118,12 +110,9 @@ hyperbook.webide = (function () {
     const editorContainer = elem.querySelector(".editor-container");
     const splitter = elem.querySelector(".splitter");
     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");
+    const editorHTMLDiv = elem.querySelector(".editor.html");
+    const editorCSSDiv = elem.querySelector(".editor.css");
+    const editorJSDiv = elem.querySelector(".editor.js");
     /** @type {HTMLButtonElement | null} */
     const btnHTML = elem.querySelector("button.html");
     /** @type {HTMLButtonElement | null} */
@@ -131,6 +120,23 @@ hyperbook.webide = (function () {
     /** @type {HTMLButtonElement | null} */
     const btnJS = elem.querySelector("button.js");
 
+    // Initialize CodeMirror instances
+    const cmHTML = editorHTMLDiv ? (() => {
+      const src = editorHTMLDiv.textContent;
+      editorHTMLDiv.textContent = "";
+      return HyperbookCM.create(editorHTMLDiv, { lang: "html", value: src, onChange: () => update() });
+    })() : null;
+    const cmCSS = editorCSSDiv ? (() => {
+      const src = editorCSSDiv.textContent;
+      editorCSSDiv.textContent = "";
+      return HyperbookCM.create(editorCSSDiv, { lang: "css", value: src, onChange: () => update() });
+    })() : null;
+    const cmJS = editorJSDiv ? (() => {
+      const src = editorJSDiv.textContent;
+      editorJSDiv.textContent = "";
+      return HyperbookCM.create(editorJSDiv, { lang: "javascript", value: src, onChange: () => update() });
+    })() : null;
+
     const frame = elem.getElementsByTagName("iframe")[0];
     const template = elem.getAttribute("data-template");
     const id = elem.getAttribute("data-id");
@@ -164,9 +170,9 @@ hyperbook.webide = (function () {
       btnCSS?.classList.remove("active");
       btnJS?.classList.remove("active");
 
-      editorHTML?.classList.add("active");
-      editorCSS?.classList.remove("active");
-      editorJS?.classList.remove("active");
+      editorHTMLDiv?.classList.add("active");
+      editorCSSDiv?.classList.remove("active");
+      editorJSDiv?.classList.remove("active");
     });
 
     btnCSS?.addEventListener("click", () => {
@@ -174,9 +180,9 @@ hyperbook.webide = (function () {
       btnCSS?.classList.add("active");
       btnJS?.classList.remove("active");
 
-      editorHTML?.classList.remove("active");
-      editorCSS?.classList.add("active");
-      editorJS?.classList.remove("active");
+      editorHTMLDiv?.classList.remove("active");
+      editorCSSDiv?.classList.add("active");
+      editorJSDiv?.classList.remove("active");
     });
 
     btnJS?.addEventListener("click", () => {
@@ -184,80 +190,40 @@ hyperbook.webide = (function () {
       btnCSS?.classList.remove("active");
       btnJS?.classList.add("active");
 
-      editorHTML?.classList.remove("active");
-      editorCSS?.classList.remove("active");
-      editorJS?.classList.add("active");
+      editorHTMLDiv?.classList.remove("active");
+      editorCSSDiv?.classList.remove("active");
+      editorJSDiv?.classList.add("active");
     });
 
-    const load = async () => {
-      const result = await hyperbook.store.db.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 = () => {
+      const htmlVal = cmHTML?.getValue() ?? "";
+      const cssVal = cmCSS?.getValue() ?? "";
+      const jsVal = cmJS?.getValue() ?? "";
       hyperbook.store.db.webide.put({
         id,
-        html: editorHTML?.value,
-        css: editorCSS?.value,
-        js: editorJS?.value,
+        html: htmlVal,
+        css: cssVal,
+        js: jsVal,
       });
       const website = template
-        .replace("###HTML###", editorHTML?.value)
-        .replace("###CSS###", editorCSS?.value)
-        .replace("###JS###", editorJS?.value);
+        .replace("###HTML###", htmlVal)
+        .replace("###CSS###", cssVal)
+        .replace("###JS###", jsVal);
       frame.srcdoc = website;
     };
 
-    frame.addEventListener("load", () => {
-      title.textContent = frame.contentDocument.title;
-    });
-
-    editorHTML?.addEventListener("code-input_load", async () => {
-      const result = await hyperbook.store.db.webide.get(id);
-      if (result) {
-        editorHTML.value = result.html;
-      }
-
-      update();
-
-      editorHTML.addEventListener("input", () => {
-        update();
-      });
-    });
-
-    editorCSS?.addEventListener("code-input_load", async () => {
-      const result = await hyperbook.store.db.webide.get(id);
+    // Restore saved state on init
+    hyperbook.store.db.webide.get(id).then((result) => {
       if (result) {
-        editorCSS.value = result.css;
+        if (cmHTML && result.html != null) cmHTML.setValue(result.html);
+        if (cmCSS && result.css != null) cmCSS.setValue(result.css);
+        if (cmJS && result.js != null) cmJS.setValue(result.js);
       }
-
       update();
-
-      editorCSS.addEventListener("input", () => {
-        update();
-      });
     });
 
-    editorJS?.addEventListener("code-input_load", async () => {
-      const result = await hyperbook.store.db.webide.get(id);
-      if (result) {
-        editorJS.value = result.js;
-      }
-
-      update();
-
-      editorJS.addEventListener("input", () => {
-        update();
-      });
+    frame.addEventListener("load", () => {
+      title.textContent = frame.contentDocument.title;
     });
 
     downloadEl?.addEventListener("click", async () => {

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

@@ -12,6 +12,18 @@ code-input {
   margin: 0;
 }
 
+.directive-webide .editor {
+  width: 100%;
+  border: 1px solid var(--color-spacer);
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.directive-webide .editor .cm-editor {
+  height: 100%;
+}
+
 .directive-webide .container {
   width: 100%;
   min-height: 120px;
@@ -89,12 +101,6 @@ code-input {
   opacity: 0.75;
 }
 
-.directive-webide .editor {
-  width: 100%;
-  border: 1px solid var(--color-spacer);
-  flex: 1;
-}
-
 .directive-webide .editor:not(.active) {
   display: none;
 }