mbeditor 0.4.5 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 75e7d28ba5664e0aeae526a954b2032c040d6ac2f20ed327bef9507a29bc3e21
-  data.tar.gz: 34b2ba82856f0fef274049050a55e95a465b9d9bdb7e86e3a2299c30ce0e00c4
+  metadata.gz: a6e34c84c4c7e3a0ef9d4382dd49c29ac3bd13fdc42f8b38d50666cdd30439b6
+  data.tar.gz: 07a9658a8d2faa837969d7c8b05556eaba59afeb48af63b9c8482d7693805b64
 SHA512:
-  metadata.gz: ba333da50a99c900136a52832821b7a2d939f7836b5aa05d2bdaedb259167c3c8a32f7ec3e13e854501c51a7686dd354973b3ff9a299c87af2b0e41cfaa8a649
-  data.tar.gz: 9fd083956de7ac0c3443715ba15fe63af069822043ab9e4113b8ab9af4096e5ac582e29d8377cd63f1c681b9fbcca5097dbc7f1d20592f937df6bb208fe91988
+  metadata.gz: 4506a5f5c0e7d7c5b111f9e6cb665cf5d95b7a2e9be5c140948c49f3fbb3a7ee9c13e78d1924d891522131cb85d512242074202298172a10915ea57e6e48f71a
+  data.tar.gz: c7b06da62965639c18f0531a9459da9ddcfeb14ba29ecceadeb600aeec8eb28197657c3dcca4dec5311978fef1397dc610cc2d9f27ead2513ec2e768daceda62

data/CHANGELOG.md

@@ -5,6 +5,29 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.1] - 2026-04-30
+
+### Added
+- **Large file pagination** — files over 5 MB now open in read-only paginated mode (500 lines per page) instead of showing an error. A bar below the toolbar shows the current line range, total line count, and file size, with Prev/Next navigation. The backend streams only the requested line slice via `File.foreach` so arbitrarily large files never load fully into memory.
+- **JSON auto pretty-print** — `.json` files are automatically formatted with 2-space indentation when opened. Invalid JSON falls back to raw display with Monaco's built-in error markers. The formatted content is set as the editor baseline so the file does not appear dirty after opening.
+
+## [0.5.0] - 2026-04-30
+
+### Added
+- **Zen / focus mode** — `Cmd+Shift+Z` hides the sidebar and git panel for a distraction-free editing experience.
+- **Bulk find-and-replace** — search and replace across all workspace files in one operation.
+- **File content prefetch on hover** — opening a file from the tree is now instant; content is fetched while hovering the row.
+- **Client-side search cache** — search results are cached client-side for 30 s and invalidated automatically on save.
+- **Monaco model cache with LRU eviction** — in-memory Monaco models are capped at 15 and evicted in LRU order to keep memory use bounded.
+
+### Changed
+- **Faster initial render** — Monaco startup is now decoupled from the React mount lifecycle, cutting time-to-first-edit.
+- **Robust dirty-state tracking** — dirty state is now driven by Monaco's `alternativeVersionId`; `cleanVersionId` is reset correctly on save-on-close so re-opened tabs start clean.
+
+### Fixed
+- ActionCable reconnect logic hardened; regression tests added to confirm websocket lifecycle log filtering still works after reconnect.
+- Bulk replace: fixed a security issue and a correctness bug in the replacement pipeline; added covering tests.
+
 ## [0.4.5] - 2026-04-23
 
 ### Fixed

data/app/assets/javascripts/mbeditor/application_iife_tail.js

@@ -1,3 +1,4 @@
 window.SearchService = SearchService;
 window.GitService = GitService;
+window.FileService = FileService;
 })(window.MbeditorRuntime.React, window.MbeditorRuntime.ReactDOM);

data/app/assets/javascripts/mbeditor/components/EditorPanel.js

@@ -30,6 +30,7 @@ var EditorPanel = function EditorPanel(_ref) {
   var testLoading = _ref.testLoading;
   var testInlineVisible = _ref.testInlineVisible;
   var editorPrefs = _ref.editorPrefs || {};
+  var monacoReady = _ref.monacoReady !== false; // undefined means Monaco already loaded (legacy callers)
 
   var editorRef = useRef(null);
   var monacoRef = useRef(null);
@@ -85,6 +86,27 @@ var EditorPanel = function EditorPanel(_ref) {
 
   var methodsBtnRef = useRef(null);
 
+  // Local pagination state — initialized from tab props; updated on page navigation
+  var _useState17 = useState(tab.startLine || 0);
+  var _useState18 = _slicedToArray(_useState17, 2);
+  var pageStartLine = _useState18[0];
+  var setPageStartLine = _useState18[1];
+
+  var _useState19 = useState(tab.lineCount || 0);
+  var _useState20 = _slicedToArray(_useState19, 2);
+  var pageLineCount = _useState20[0];
+  var setPageLineCount = _useState20[1];
+
+  var _useState21 = useState(tab.totalLines || 0);
+  var _useState22 = _slicedToArray(_useState21, 2);
+  var pageTotalLines = _useState22[0];
+  var setPageTotalLines = _useState22[1];
+
+  var _useState23 = useState(tab.totalBytes || 0);
+  var _useState24 = _slicedToArray(_useState23, 2);
+  var pageTotalBytes = _useState24[0];
+  var setPageTotalBytes = _useState24[1];
+
   var onFormatRef = useRef(onFormat);
   onFormatRef.current = onFormat;
 
@@ -94,6 +116,12 @@ var EditorPanel = function EditorPanel(_ref) {
   var vimStatusRef = useRef(null);
   var vimModeObjRef = useRef(null);
 
+  function humanSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  }
+
   var clearTestZones = function clearTestZones(editor) {
     if (!editor) return;
     if (testZoneIdsRef.current.length === 0) return;
@@ -132,7 +160,7 @@ var EditorPanel = function EditorPanel(_ref) {
 
   useEffect(function () {
     if (tab.isPreview) return;
-    if (!editorRef.current || !window.monaco) return;
+    if (!monacoReady || !editorRef.current || !window.monaco) return;
 
     if (window.MbeditorEditorPlugins && window.MbeditorEditorPlugins.registerGlobalExtensions) {
       window.MbeditorEditorPlugins.registerGlobalExtensions(window.monaco);
@@ -478,13 +506,28 @@ var EditorPanel = function EditorPanel(_ref) {
     if (_modelEntry && _modelEntry.model && !_modelEntry.model.isDisposed()) {
       modelObj = _modelEntry.model;
       _reusingModel = true;
+      // Update access timestamp so LRU eviction knows this model was recently used.
+      _modelEntry.lastAccessed = Date.now();
       // Re-apply language in case it changed (e.g. file renamed)
       if (modelObj.getLanguageId() !== language) {
         window.monaco.editor.setModelLanguage(modelObj, language);
       }
     } else {
-      modelObj = window.monaco.editor.createModel(tab.content, language);
-      window.__mbeditorModels[tab.path] = { model: modelObj, aviBase: null, aviMax: null };
+      // Evict the LRU model if the cache is at capacity before creating a new one.
+      TabManager.evictLruModel();
+
+      // Pretty-print JSON content before initial load
+      var contentForModel = tab.content;
+      if (language === 'json' && contentForModel) {
+        try {
+          contentForModel = JSON.stringify(JSON.parse(contentForModel), null, 2);
+        } catch (_) {
+          // invalid JSON — use raw content; Monaco will show error markers
+        }
+      }
+
+      modelObj = window.monaco.editor.createModel(contentForModel, language);
+      window.__mbeditorModels[tab.path] = { model: modelObj, aviBase: null, aviMax: null, lastAccessed: Date.now(), cleanVersionId: null };
       _modelEntry = window.__mbeditorModels[tab.path];
     }
 
@@ -573,6 +616,10 @@ var EditorPanel = function EditorPanel(_ref) {
 
     monacoRef.current = editor;
     window.__mbeditorActiveEditor = editor;
+    // Apply read-only for paginated (truncated) files
+    if (tab.truncated) {
+      editor.updateOptions({ readOnly: true });
+    }
     setEditorReady(true);
 
     // Stash the workspace-relative path on the model so code-action providers
@@ -645,6 +692,8 @@ var EditorPanel = function EditorPanel(_ref) {
     } else {
       aviBaseRef.current = avi;
       aviMaxRef.current = avi;
+      // Record the clean baseline for dirty-state tracking on initial model creation.
+      _modelEntry.cleanVersionId = avi;
     }
     EditorStore.setState({ canUndo: avi > aviBaseRef.current, canRedo: avi < aviMaxRef.current });
 
@@ -660,19 +709,16 @@ var EditorPanel = function EditorPanel(_ref) {
 
       var val = editor.getValue();
 
-      // Belt-and-suspenders: when undoing, directly check if content matches the
-      // saved clean state. This guarantees the dirty flag clears on full undo even
-      // if the latestContentRef comparison path misses an event.
-      if (e.isUndoing) {
-        var _st = EditorStore.getState();
-        var _pane = _st.panes.find(function(p) { return p.id === paneId; });
-        var _tab = _pane && _pane.tabs.find(function(t) { return t.id === tab.id; });
-        if (_tab && _tab.dirty) {
-          var _cleanNorm = ((_tab.cleanContent) || '').replace(/\r\n/g, '\n');
-          var _valNorm = val.replace(/\r\n/g, '\n');
-          if (_valNorm === _cleanNorm) {
-            TabManager.markClean(paneId, tab.id, val);
-          }
+      // Dirty-state tracking via alternativeVersionId — O(1), no string comparison.
+      // AVI decrements on undo so it returns to cleanVersionId after a full undo.
+      // Skip entirely when cleanVersionId is null — file is mid-load, not yet settled.
+      var _entry = window.__mbeditorModels && window.__mbeditorModels[tab.path];
+      var _cleanAvi = _entry && _entry.cleanVersionId;
+      if (_cleanAvi !== null && _cleanAvi !== undefined) {
+        if (currentAvi !== _cleanAvi) {
+          TabManager.markDirty(paneId, tab.id, val);
+        } else {
+          TabManager.markClean(paneId, tab.id, val);
         }
       }
 
@@ -734,7 +780,7 @@ var EditorPanel = function EditorPanel(_ref) {
       editor.setModel(null);
       editor.dispose();
     };
-  }, [tab.id, tab.isPreview]); // re-run ONLY on tab switch, not on content change (Monaco handles its own content state)
+  }, [tab.id, tab.isPreview, monacoReady]); // re-run on tab switch or when Monaco becomes ready
 
   // Listen for external content changes (e.g. after Format/Load)
   // Only applies when externalContentVersion advances — prevents stale typing-originated
@@ -760,12 +806,29 @@ var EditorPanel = function EditorPanel(_ref) {
     if (!vNorm) {
       // If the editor is currently completely empty, treat it as an initial load.
       // setValue clears the undo stack which is correct for initial load.
-      editor.setValue(tab.content);
+      // Null cleanVersionId before setValue so the synchronous onDidChangeContent
+      // fires during setValue and skips the dirty check (cleanVersionId is null).
+      var _initEntry = window.__mbeditorModels && window.__mbeditorModels[tab.path];
+      if (_initEntry) _initEntry.cleanVersionId = null;
+
+      // Pretty-print JSON content before initial load
+      var contentToSet = tab.content;
+      var modelLang = model.getLanguageId();
+      if (modelLang === 'json' && contentToSet) {
+        try {
+          contentToSet = JSON.stringify(JSON.parse(contentToSet), null, 2);
+        } catch (_) {
+          // invalid JSON — use raw content; Monaco will show error markers
+        }
+      }
+
+      editor.setValue(contentToSet);
       // Reset the AVI baseline: setValue clears the undo stack so anything before
       // this point is no longer reachable. Also clear the canUndo/canRedo display.
       var newBase = model.getAlternativeVersionId();
       aviBaseRef.current = newBase;
       aviMaxRef.current = newBase;
+      if (_initEntry) _initEntry.cleanVersionId = newBase;
       EditorStore.setState({ canUndo: false, canRedo: false });
     } else {
       // Keep undo stack for formats or replaces by using executeEdits
@@ -908,6 +971,21 @@ var EditorPanel = function EditorPanel(_ref) {
     }
   }, [markers, tab.id]);
 
+  // Sync pagination state when tab changes (different file or fresh load)
+  useEffect(function () {
+    setPageStartLine(tab.startLine || 0);
+    setPageLineCount(tab.lineCount || 0);
+    setPageTotalLines(tab.totalLines || 0);
+    setPageTotalBytes(tab.totalBytes || 0);
+  }, [tab.id]);
+
+  // Apply read-only mode based on tab.truncated whenever the editor or truncated flag changes
+  useEffect(function () {
+    if (monacoRef.current) {
+      monacoRef.current.updateOptions({ readOnly: !!tab.truncated });
+    }
+  }, [tab.truncated, editorReady]);
+
   // Reset blame + test decorations when file path changes
   useEffect(function () {
     setBlameData(null);
@@ -1363,6 +1441,16 @@ var EditorPanel = function EditorPanel(_ref) {
     return '\u2026/' + parts.slice(-2).join('/');
   }
 
+  // While Monaco is still loading, show a lightweight skeleton so the UI is
+  // visible immediately without calling monaco.editor.create() too early.
+  if (!monacoReady) {
+    return React.createElement(
+      'div',
+      { className: 'monaco-container monaco-loading-skeleton', style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#888', fontSize: '13px' } },
+      'Loading editor…'
+    );
+  }
+
   // Always render the same wrapper structure so the editorRef div is never
   // unmounted when gitAvailable changes (e.g. loaded async after workspace
   // call returns). The toolbar is conditionally included inside the wrapper.
@@ -1437,6 +1525,105 @@ var EditorPanel = function EditorPanel(_ref) {
         !editorPrefs.toolbarIconOnly && !testLoading && React.createElement('span', { className: 'ide-toolbar-label' }, 'Test')
       )
     ),
+    tab.truncated && React.createElement(
+      'div',
+      {
+        className: 'ide-pagination-bar',
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          padding: '4px 10px',
+          background: 'var(--ide-toolbar-bg, #252526)',
+          borderBottom: '1px solid var(--ide-border, #3e3e3e)',
+          fontSize: '12px',
+          color: 'var(--ide-toolbar-fg, #ccc)',
+          flexShrink: 0,
+          userSelect: 'none'
+        }
+      },
+      React.createElement(
+        'button',
+        {
+          className: 'ide-icon-btn',
+          style: { padding: '2px 8px', fontSize: '12px' },
+          disabled: pageStartLine === 0,
+          onClick: function() {
+            var newStart = Math.max(0, pageStartLine - 500);
+            FileService.getFileChunk(tab.path, newStart, 500).then(function(data) {
+              var sl = data.start_line || 0;
+              var lc = data.line_count || 0;
+              var tl = data.total_lines || pageTotalLines;
+              var tb = data.total_bytes || pageTotalBytes;
+              setPageStartLine(sl);
+              setPageLineCount(lc);
+              setPageTotalLines(tl);
+              setPageTotalBytes(tb);
+              if (monacoRef.current) {
+                monacoRef.current.setValue(data.content || '');
+                var _paginatedEntry = window.__mbeditorModels && window.__mbeditorModels[tab.path];
+                if (_paginatedEntry) {
+                  var _newBase = monacoRef.current.getModel().getAlternativeVersionId();
+                  aviBaseRef.current = _newBase;
+                  aviMaxRef.current  = _newBase;
+                  _paginatedEntry.cleanVersionId = _newBase;
+                  _paginatedEntry.aviBase = _newBase;
+                  _paginatedEntry.aviMax  = _newBase;
+                }
+                EditorStore.setState({ canUndo: false, canRedo: false });
+                monacoRef.current.updateOptions({ readOnly: true });
+              }
+            }).catch(function(err) {
+              EditorStore.setStatus('Failed to load page: ' + (err && err.message || 'Unknown error'), 'error');
+            });
+          }
+        },
+        '← Prev'
+      ),
+      React.createElement(
+        'span',
+        { style: { flex: 1, textAlign: 'center' } },
+        'Lines ' + (pageStartLine + 1) + '–' + (pageStartLine + pageLineCount) + ' of ' + pageTotalLines + ' (' + humanSize(pageTotalBytes) + ')'
+      ),
+      React.createElement(
+        'button',
+        {
+          className: 'ide-icon-btn',
+          style: { padding: '2px 8px', fontSize: '12px' },
+          disabled: pageStartLine + pageLineCount >= pageTotalLines,
+          onClick: function() {
+            var newStart = pageStartLine + pageLineCount;
+            FileService.getFileChunk(tab.path, newStart, 500).then(function(data) {
+              var sl = data.start_line || 0;
+              var lc = data.line_count || 0;
+              var tl = data.total_lines || pageTotalLines;
+              var tb = data.total_bytes || pageTotalBytes;
+              setPageStartLine(sl);
+              setPageLineCount(lc);
+              setPageTotalLines(tl);
+              setPageTotalBytes(tb);
+              if (monacoRef.current) {
+                monacoRef.current.setValue(data.content || '');
+                var _paginatedEntry = window.__mbeditorModels && window.__mbeditorModels[tab.path];
+                if (_paginatedEntry) {
+                  var _newBase = monacoRef.current.getModel().getAlternativeVersionId();
+                  aviBaseRef.current = _newBase;
+                  aviMaxRef.current  = _newBase;
+                  _paginatedEntry.cleanVersionId = _newBase;
+                  _paginatedEntry.aviBase = _newBase;
+                  _paginatedEntry.aviMax  = _newBase;
+                }
+                EditorStore.setState({ canUndo: false, canRedo: false });
+                monacoRef.current.updateOptions({ readOnly: true });
+              }
+            }).catch(function(err) {
+              EditorStore.setStatus('Failed to load page: ' + (err && err.message || 'Unknown error'), 'error');
+            });
+          }
+        },
+        'Next →'
+      )
+    ),
     React.createElement('div', { ref: editorRef, className: 'monaco-container', style: { flex: 1, minHeight: 0 } }),
     methodsOpen && methodsDropdownPos && React.createElement(
       'div',

data/app/assets/javascripts/mbeditor/components/FileTree.js

@@ -51,6 +51,8 @@ var FileTree = function FileTree(_ref) {
   var containerRef = useRef(null);
   var typeaheadBufferRef = useRef('');
   var typeaheadTimerRef = useRef(null);
+  var hoverTimerRef = useRef(null);
+  var hoverPathRef = useRef(null);
   // Ref that always points to the latest onNodeSelect prop, avoiding stale closures in the effect.
   var onNodeSelectRef = useRef(onNodeSelect);
   onNodeSelectRef.current = onNodeSelect;
@@ -131,6 +133,12 @@ var FileTree = function FileTree(_ref) {
     }
   }, [pendingCreate, pendingRename]);
 
+  // Clear any pending hover timer when the component unmounts to prevent
+  // a prefetch from firing against an unmounted component.
+  useEffect(function() {
+    return function() { clearTimeout(hoverTimerRef.current); };
+  }, []);
+
   var toggleFolder = function toggleFolder(path, e) {
     e.stopPropagation();
     var next = !(expandedDirs && expandedDirs[path]);
@@ -441,6 +449,20 @@ var FileTree = function FileTree(_ref) {
                 onFileDoubleClick(node.path, node.name);
               }
             },
+            onMouseEnter: function () {
+              if (isFolder) return;
+              clearTimeout(hoverTimerRef.current);
+              hoverTimerRef.current = setTimeout(function () {
+                hoverPathRef.current = node.path;
+                FileService.prefetch(node.path);
+              }, 200);
+            },
+            onMouseLeave: function () {
+              if (isFolder) return;
+              clearTimeout(hoverTimerRef.current);
+              FileService.cancelPrefetch(hoverPathRef.current);
+              hoverPathRef.current = null;
+            },
             onContextMenu: function (e) {
               e.preventDefault();
               e.stopPropagation();
@@ -498,7 +520,7 @@ var FileTreeMemo = React.memo(FileTree, function(prev, next) {
     prev.activePath === next.activePath &&
     prev.selectedPaths === next.selectedPaths &&
     prev.anchorPath === next.anchorPath &&
-    prev.gitFiles === next.gitFiles &&
+    JSON.stringify(prev.gitFiles) === JSON.stringify(next.gitFiles) &&
     prev.expandedDirs === next.expandedDirs &&
     prev.pendingCreate === next.pendingCreate &&
     prev.pendingRename === next.pendingRename;