pi-studio 0.9.61 → 0.9.62

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.9.62] — 2026-10-08
+
+### Fixed
+- With syntax highlighting on, the cursor could end up several characters away from the text being typed, mostly in Safari and other WebKit browsers such as Muxy and cmux. It happened when an edit let a word move back up a line. The editor now re-lays out its text after each edit, so the cursor and text stay together. A line that is exactly full can still show a brief mismatch, which corrects itself on the next key.
+
+### Added
+- `Ctrl+Shift+H` toggles syntax highlighting without leaving the editor.
+
 ## [0.9.61] — 2026-09-30
 
 ### Fixed

package/client/studio-client.js

@@ -2587,6 +2587,7 @@
       let pendingResponseScrollReset = false;
       let editorMetaUpdateRaf = null;
       let editorHighlightEnabled = false;
+      let editorWrapCompositionActive = false;
       let editorLanguage = "markdown";
       let responseHighlightEnabled = false;
       let completionSuggestionState = null;
@@ -17999,6 +18000,40 @@
         return EXT_TO_LANG[ext] || "";
       }
 
+      function repairEditorTextareaWrap(event) {
+        if (!editorHighlightEnabled || editorView !== "markdown" || editorWrapCompositionActive || event?.isComposing) return false;
+        // WebKit can keep the previous soft-wrap layout after a native edit,
+        // while the rebuilt overlay has already moved a word onto its prior line.
+        // Force both layouts without replacing text or touching native undo/IME.
+        const width = sourceTextEl.style.width;
+        const priority = sourceTextEl.style.getPropertyPriority("width");
+        const top = sourceTextEl.scrollTop, left = sourceTextEl.scrollLeft;
+        try {
+          sourceTextEl.style.setProperty("width", "calc(" + (width || "100%") + " - 1px)", priority);
+          void sourceTextEl.offsetWidth;
+        } finally {
+          if (width) sourceTextEl.style.setProperty("width", width, priority);
+          else sourceTextEl.style.removeProperty("width");
+          void sourceTextEl.offsetWidth;
+          sourceTextEl.scrollTop = top; sourceTextEl.scrollLeft = left;
+        }
+        syncEditorHighlightScroll();
+        return true;
+      }
+
+      function handleEditorHighlightShortcut(event) {
+        if (!event || event.defaultPrevented || event.isComposing || editorWrapCompositionActive || event.target !== sourceTextEl
+            || editorView !== "markdown" || sourceTextEl.disabled || sourceTextEl.readOnly || studioModalBlocksDraftAction()
+            || !event.ctrlKey || !event.shiftKey || event.metaKey || event.altKey
+            || !(event.code === "KeyH" || String(event.key || "").toLowerCase() === "h")) return false;
+        event.preventDefault(); event.stopPropagation();
+        if (!event.repeat) {
+          setEditorHighlightEnabled(!editorHighlightEnabled);
+          repairEditorTextareaWrap();
+        }
+        return true;
+      }
+
       function renderEditorHighlightNow() {
         if (!sourceHighlightEl) return;
         if (!editorHighlightEnabled || editorView !== "markdown") {
@@ -24944,8 +24979,15 @@
       });
 
       sourceTextEl.addEventListener("keydown", handleSourceTextTabKey);
+      sourceTextEl.addEventListener("keydown", handleEditorHighlightShortcut);
+      sourceTextEl.addEventListener("compositionstart", () => { editorWrapCompositionActive = true; });
+      sourceTextEl.addEventListener("compositionend", () => {
+        editorWrapCompositionActive = false;
+        repairEditorTextareaWrap();
+      });
 
-      sourceTextEl.addEventListener("input", () => {
+      sourceTextEl.addEventListener("input", event => {
+        repairEditorTextareaWrap(event);
         if (completionSuggestionState && sourceTextEl.value !== completionSuggestionState.baseText) {
           hideCompletionSuggestion();
         }

package/index.ts

@@ -12515,7 +12515,7 @@ ${cssVarsBlock}
               <button id="showMeResponseBtn" type="button" hidden title="Explain the response displayed in the right pane using the smallest useful visual or structural representation.">Explain displayed response</button>
               <button id="askAsideBtn" type="button" title="Open a separate side-question thread without adding it to the main Pi conversation.">Side question</button>
               <button id="quizBtn" type="button" title="Open an active quiz for the current editor selection or document.">Quiz me</button>
-              <select id="highlightSelect" class="studio-flat-select" aria-label="Editor syntax highlighting">
+              <select id="highlightSelect" class="studio-flat-select" aria-label="Editor syntax highlighting" aria-keyshortcuts="Control+Shift+H">
                 <option value="off">Syntax highlight: Off</option>
                 <option value="bash">Syntax highlight: Bash</option>
                 <option value="c">Syntax highlight: C</option>
@@ -12806,6 +12806,7 @@ ${cssVarsBlock}
             <div><dt>Tab</dt><dd>Insert a visible completion suggestion; otherwise indent selected editor text</dd></div>
             <div><dt>Esc</dt><dd>Dismiss a visible completion suggestion, close overlays, exit pane focus, or stop an active request</dd></div>
             <div><dt>Shift+Tab</dt><dd>Unindent selected editor text</dd></div>
+            <div><dt>Ctrl+Shift+H</dt><dd>Toggle editor syntax highlighting</dd></div>
           </dl>
         </section>
         <section class="shortcuts-group shortcuts-full-only">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.9.61",
+  "version": "0.9.62",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, active quiz, prompt/response history, live previews, and tmux-backed REPL/literate REPL workflows",
   "type": "module",
   "license": "MIT",