hyperbook 0.94.0 → 0.95.1

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 = () => {
@@ -1784,22 +1776,31 @@ hyperbook.python = (function () {
         }
       }
 
+      let lastStdinPrompt = "";
+      pyodide.setStdout({
+        write: (msg) => {
+          const text = typeof msg === "string" ? msg : decoder.decode(msg);
+          if (text.endsWith("\n")) {
+            lastStdinPrompt = "";
+          } else {
+            lastStdinPrompt += text;
+          }
+          appendOutputLine(id, text);
+          return msg?.length ?? text.length;
+        },
+      });
       pyodide.setStdin({
         stdin: () => {
-          const value = window.prompt(hyperbook.i18n.get("pyide-input-prompt"));
+          const promptText =
+            lastStdinPrompt || hyperbook.i18n.get("pyide-input-prompt");
+          lastStdinPrompt = "";
+          const value = window.prompt(promptText);
           if (value === null) {
             return "";
           }
           return value;
         },
       });
-      pyodide.setStdout({
-        write: (msg) => {
-          const text = typeof msg === "string" ? msg : decoder.decode(msg);
-          appendOutputLine(id, text);
-          return msg?.length ?? text.length;
-        },
-      });
       pyodide.setStderr({
         write: (msg) => {
           const text = typeof msg === "string" ? msg : decoder.decode(msg);
@@ -1899,7 +1900,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 +1918,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 +1967,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 +2157,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 +2197,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 +2363,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 +2390,7 @@ if _pg:
         }
       };
 
-      editor.addEventListener("code-input_load", restoreEditorState);
-      if (editor.querySelector("textarea")) {
-        void restoreEditorState();
-      }
+      void restoreEditorState();
 
       window.addEventListener("resize", () => {
         applyCanvasOutputLayout();
@@ -2397,10 +2398,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;
 }