mbeditor 0.3.9 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3e496861ff75f2bb3c09388afbc609c07230ad8a914de28040b867ccb922a04d
-  data.tar.gz: f5825193b830cca72f626a86a15483eb46ccb4cd335388a6ccaed088841ff313
+  metadata.gz: cf6000382b991d7d35aa850c38fc80c743089c60f4a2277310f552e5a3b85477
+  data.tar.gz: 4d9c42bc71a9db592172eb09a601b134628f3c7f4d619a271349dda9b675c5ac
 SHA512:
-  metadata.gz: dd1ed23cefc9609ca7d99d77410104b63107dc0e72f80e72279adc4a01cba1a6da3fe2d6e0467ec23b7db1166d3ccbdfcf380d4057c5644008ab4a9fa87e5092
-  data.tar.gz: 0b6bc8dcec6f206fc3867c19bc7ffe028230b8503109dc8473e10997abe41c56db0fd3970f88c23bbf6fd69873c1d905cc0ce11a2010c6205cccc891ee511982
+  metadata.gz: 9e4b14f3d506a23c1f157a7dd91d4c522a568623fd555b3ef10e6e83e561b4bdcaf040b822ea1c2ec86ca1eed8f47992f7fa1060cb18a9600ee2f43b10de4730
+  data.tar.gz: '0911b0a22050d16d96a1e841ae16e73673fd0579549efd5590d538efe405ca66e7f1470597680e0102954b4d4ce6ef9337d02a22dc736c487998f990808ff34f'

data/CHANGELOG.md

@@ -5,6 +5,44 @@ 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.4.3] - 2026-04-22
+
+### Added
+- Documented optional Action Cable host-app setup and fallback behavior for realtime editor updates.
+
+### Changed
+- `bundle exec rake test` now includes `test/lib/**/*_test.rb` so release validation covers library-level regression tests.
+
+### Fixed
+- Action Cable availability detection now respects whether `/cable` is actually mounted, and websocket handshake failures fall back to polling without noisy console errors.
+- Circular loading indicators keep animating even when global reduced-motion styles are active in production.
+- `CableLogFilter` now remains compatible with untagged logger stacks used outside full Action Cable setups.
+
+## [0.4.2] - 2026-04-22
+
+### Fixed
+- Updated sidebar search system test selectors to match the current UI loading and clear controls, resolving CI matrix failures in GitHub Actions.
+
+## [0.4.1] - 2026-04-22
+
+### Added
+- Real-time file update integration via Action Cable to improve collaborative and live-refresh editing workflows.
+
+### Changed
+- Search functionality enhancements for improved result handling and responsiveness.
+
+## [0.4.0] - 2026-04-22
+
+### Added
+- **Draft auto-save and restore** — unsaved edits are written to `localStorage` every 500 ms per file. On reconnect after a server outage, a dialog offers to restore any drafts that diverged from the in-memory tab content.
+- **Tab bar layout setting** — new "Tab bar layout" preference (Scroll / Wrap multi-row) stored in editor prefs; `TabBar` receives a `tabDisplayMode` prop and applies the appropriate CSS class; horizontal wheel scroll is disabled in wrap mode.
+
+### Fixed
+- **Drag-to-split** — pane 2 drop zone is now only shown when the cursor actively hovers over the right-half content area, preventing the tab bar from collapsing during a drag. Dropping onto a tab bar element is no longer intercepted by the cross-pane drop handler, preserving same-pane reordering.
+- **Quick Open sorting** — files consistently rank above directories; within the same priority tier results are sorted by match relevance (exact basename > prefix match > substring > other).
+- **Search total count** — the count thread is joined with a 100 ms timeout; `total_count` is omitted from the response when the thread has not finished, so the first page is never blocked by the counting subprocess.
+- **Status bar message colour** — removed `color-mix` transparency that was dimming the accent-text colour.
+
 ## [0.3.9] - 2026-04-21
 
 ### Added

data/README.md

@@ -121,9 +121,27 @@ The gem keeps host/tooling responsibilities in the host app:
 - `haml_lint` gem (optional, required for HAML lint — add to your app's Gemfile if needed)
 - `git` installed in environment (for Git panel data)
 - `minitest` or `rspec` in the host app's bundle (required for the test runner)
+- `actioncable` framework/gem (optional, required only for realtime file-change push + websocket state saves)
 
 All lint and test tools are auto-detected at runtime. The engine gracefully disables features if the tools are not available. Neither `rubocop`, `haml_lint`, nor any test framework are runtime dependencies of the gem itself — they are discovered from the host app's environment.
 
+### Realtime via Action Cable (Optional)
+
+Mbeditor works without Action Cable. If Action Cable is unavailable, unreachable, or returns transient errors, the editor automatically falls back to polling.
+
+To enable realtime features in a host app:
+
+1. Ensure Action Cable is enabled in the host app (for apps that do not load it by default, add the framework/gem explicitly).
+2. Mount cable in host routes:
+
+```ruby
+mount ActionCable.server => '/cable'
+```
+
+3. Make Action Cable JavaScript available to the page (for asset-pipeline apps, `actioncable.js` is typically sufficient).
+
+If any of these are missing, mbeditor still runs in polling mode.
+
 ### Syntax Highlighting Support
 Monaco runtime assets are served from the engine route namespace (`/mbeditor/monaco-editor/*` and `/mbeditor/monaco_worker.js`).
 The gem includes syntax highlighting for common Rails and React development file types:

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

@@ -2,6 +2,7 @@
 //= require mbeditor/editor_store
 //= require mbeditor/file_icon
 //= require mbeditor/file_service
+//= require mbeditor/websocket_service
 //= require mbeditor/git_service
 //= require mbeditor/search_service
 //= require mbeditor/tab_manager

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

@@ -68,6 +68,23 @@ var EditorPanel = function EditorPanel(_ref) {
   var editorReady = _useState10[0];
   var setEditorReady = _useState10[1];
 
+  var _useState11 = useState(false);
+  var _useState12 = _slicedToArray(_useState11, 2);
+  var methodsOpen = _useState12[0];
+  var setMethodsOpen = _useState12[1];
+
+  var _useState13 = useState([]);
+  var _useState14 = _slicedToArray(_useState13, 2);
+  var methodsList = _useState14[0];
+  var setMethodsList = _useState14[1];
+
+  var _useState15 = useState(null);
+  var _useState16 = _slicedToArray(_useState15, 2);
+  var methodsDropdownPos = _useState16[0];
+  var setMethodsDropdownPos = _useState16[1];
+
+  var methodsBtnRef = useRef(null);
+
   var onFormatRef = useRef(onFormat);
   onFormatRef.current = onFormat;
 
@@ -514,6 +531,46 @@ var EditorPanel = function EditorPanel(_ref) {
       editor.restoreViewState(tab.viewState);
     }
 
+    // Restore the find widget state from the previous editor (when persistFindState is on).
+    if (editorPrefs.persistFindState !== false && window.__mbeditorFindState && window.__mbeditorFindState.searchString) {
+      var _savedFind = window.__mbeditorFindState;
+      if (_savedFind.isRevealed) {
+        // Open the widget first (setTimeout so layout is ready), then re-apply the
+        // saved query — actions.find may seed from the selection and overwrite it.
+        setTimeout(function() {
+          try {
+            editor.trigger('', 'actions.find', null);
+            setTimeout(function() {
+              try {
+                var _fc0 = editor.getContribution('editor.contrib.findController');
+                if (_fc0 && _fc0.getState) {
+                  _fc0.getState().change({
+                    searchString: _savedFind.searchString,
+                    isRegex: !!_savedFind.isRegex,
+                    matchCase: !!_savedFind.matchCase,
+                    wholeWord: !!_savedFind.wholeWord
+                  }, false);
+                }
+              } catch (e) {}
+            }, 0);
+          } catch (e) {}
+        }, 0);
+      } else {
+        // Widget was closed — just seed the state silently so Ctrl+F pre-fills it.
+        try {
+          var _fc0 = editor.getContribution('editor.contrib.findController');
+          if (_fc0 && _fc0.getState) {
+            _fc0.getState().change({
+              searchString: _savedFind.searchString,
+              isRegex: !!_savedFind.isRegex,
+              matchCase: !!_savedFind.matchCase,
+              wholeWord: !!_savedFind.wholeWord
+            }, false);
+          }
+        } catch (e) {}
+      }
+    }
+
     monacoRef.current = editor;
     window.__mbeditorActiveEditor = editor;
     setEditorReady(true);
@@ -644,6 +701,26 @@ var EditorPanel = function EditorPanel(_ref) {
         _me.aviBase = aviBaseRef.current;
         _me.aviMax = aviMaxRef.current;
       }
+      // Save the current find widget state so it can be restored on next tab switch.
+      // Only overwrite the global state when there is an actual search string — this
+      // prevents a blank/fresh editor from clobbering the shared query.
+      if (editorPrefs.persistFindState !== false) {
+        try {
+          var _fc = editor.getContribution('editor.contrib.findController');
+          if (_fc && _fc.getState) {
+            var _fs = _fc.getState();
+            if (_fs.searchString) {
+              window.__mbeditorFindState = {
+                searchString: _fs.searchString,
+                isRegex: _fs.isRegex,
+                matchCase: _fs.matchCase,
+                wholeWord: _fs.wholeWord,
+                isRevealed: _fs.isRevealed
+              };
+            }
+          }
+        } catch (e) {}
+      }
       if (window.__mbeditorActiveEditor === editor) {
         window.__mbeditorActiveEditor = null;
       }
@@ -1172,6 +1249,9 @@ var EditorPanel = function EditorPanel(_ref) {
   var ext = parts.length > 1 ? parts.pop().toLowerCase() : '';
   var isImage = tab.isImage || IMAGE_EXTENSIONS.includes(ext);
   var isMarkdown = ['md', 'markdown'].includes(ext);
+  var fileBaseName = (tab.path || '').split('/').pop().toLowerCase();
+  var isRubyFile = ext === 'rb' || ext === 'ruby' || ext === 'gemspec' ||
+    fileBaseName === 'gemfile' || fileBaseName === 'gemfile.lock' || fileBaseName === 'rakefile';
 
   useEffect(function () {
     if (isMarkdown && window.marked) {
@@ -1204,6 +1284,36 @@ var EditorPanel = function EditorPanel(_ref) {
     }
   }, [markdownContent, isMarkdown]);
 
+  // Click-outside handler to close the methods dropdown
+  useEffect(function() {
+    if (!methodsOpen) return;
+    function handleClickOutside(e) {
+      var btn = methodsBtnRef.current;
+      // Close if click is not on the button (the dropdown uses onMouseDown with preventDefault)
+      if (btn && !btn.contains(e.target)) {
+        setMethodsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return function() { document.removeEventListener('mousedown', handleClickOutside); };
+  }, [methodsOpen]);
+
+  // Parse all method definitions from the current Monaco model
+  function parseRubyMethods(model) {
+    var methods = [];
+    var lineCount = model.getLineCount();
+    var DEF_RE = /^\s*def\s+(self\.)?([a-zA-Z_][a-zA-Z0-9_?!=]*)/;
+    for (var i = 1; i <= lineCount; i++) {
+      var line = model.getLineContent(i);
+      var m = DEF_RE.exec(line);
+      if (m) {
+        var selfPrefix = m[1] ? 'self.' : '';
+        methods.push({ line: i, name: selfPrefix + m[2] });
+      }
+    }
+    return methods;
+  }
+
   if (tab.fileNotFound) {
     return React.createElement(
       'div',
@@ -1282,6 +1392,28 @@ var EditorPanel = function EditorPanel(_ref) {
         React.createElement('i', { className: 'fas fa-history', style: { marginRight: editorPrefs.toolbarIconOnly ? 0 : '5px', flexShrink: 0 } }),
         !editorPrefs.toolbarIconOnly && React.createElement('span', { className: 'ide-toolbar-label' }, 'History')
       ),
+      isRubyFile && React.createElement(
+        'button',
+        {
+          ref: methodsBtnRef,
+          className: 'ide-icon-btn' + (methodsOpen ? ' active' : ''),
+          onClick: function() {
+            var nextOpen = !methodsOpen;
+            if (nextOpen) {
+              var model = monacoRef.current && monacoRef.current.getModel();
+              setMethodsList(model ? parseRubyMethods(model) : []);
+              if (methodsBtnRef.current) {
+                var rect = methodsBtnRef.current.getBoundingClientRect();
+                setMethodsDropdownPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
+              }
+            }
+            setMethodsOpen(nextOpen);
+          },
+          title: 'Jump to Method'
+        },
+        React.createElement('i', { className: 'fas fa-list-ul', style: { marginRight: editorPrefs.toolbarIconOnly ? 0 : '5px', flexShrink: 0 } }),
+        !editorPrefs.toolbarIconOnly && React.createElement('span', { className: 'ide-toolbar-label' }, 'Methods')
+      ),
       gitAvailable && React.createElement(
         'button',
         {
@@ -1306,6 +1438,35 @@ var EditorPanel = function EditorPanel(_ref) {
       )
     ),
     React.createElement('div', { ref: editorRef, className: 'monaco-container', style: { flex: 1, minHeight: 0 } }),
+    methodsOpen && methodsDropdownPos && React.createElement(
+      'div',
+      {
+        className: 'ide-methods-dropdown',
+        style: { position: 'fixed', top: methodsDropdownPos.top + 'px', right: methodsDropdownPos.right + 'px', left: 'auto', zIndex: 9900 }
+      },
+      methodsList.length === 0
+        ? React.createElement('div', { className: 'ide-methods-dropdown-empty' }, 'No methods found')
+        : methodsList.map(function(m) {
+            return React.createElement(
+              'div',
+              {
+                key: m.line,
+                className: 'ide-methods-dropdown-item',
+                onMouseDown: function(e) {
+                  e.preventDefault();
+                  setMethodsOpen(false);
+                  if (monacoRef.current) {
+                    monacoRef.current.revealLineInCenter(m.line);
+                    monacoRef.current.setPosition({ lineNumber: m.line, column: 1 });
+                    monacoRef.current.focus();
+                  }
+                }
+              },
+              React.createElement('span', { className: 'ide-methods-dropdown-line' }, m.line),
+              m.name
+            );
+          })
+    ),
     React.createElement('div', { ref: vimStatusRef, className: 'vim-statusbar', style: { display: editorPrefs.vimMode ? 'flex' : 'none', height: '22px', alignItems: 'center', padding: '0 10px', fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, monospace", fontSize: '12px', background: 'var(--ide-statusbar-bg, #1e1e2e)', color: 'var(--ide-statusbar-fg, #9cdcfe)', borderTop: '1px solid var(--ide-border, #3e3e3e)', flexShrink: 0, userSelect: 'none', letterSpacing: '0.02em' } })
   );
 };