mbeditor 0.5.3 → 0.7.1

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

@@ -36,9 +36,17 @@ var EditorPanel = function EditorPanel(_ref) {
   var monacoRef = useRef(null);
   var latestContentRef = useRef('');
   var lastAppliedExternalVersionRef = useRef(0);
+  var conflictDecorationsRef = React.useRef([]);
+  var conflictBlocksRef = React.useRef([]);
   var aviBaseRef = useRef(0);
   var aviMaxRef = useRef(0);
 
+  var _conflictState = React.useState(0);
+  var conflictCount = _conflictState[0];
+  var setConflictCount = _conflictState[1];
+
+  var currentConflictIndexRef = React.useRef(0);
+
   var _useState = useState('');
   var _useState2 = _slicedToArray(_useState, 2);
   var markup = _useState2[0];
@@ -464,7 +472,7 @@ var EditorPanel = function EditorPanel(_ref) {
         language = 'ruby';break;
       default:
         switch (extension) {
-      case 'rb':case 'ruby':case 'gemspec':
+      case 'rb':case 'ruby':case 'gemspec':case 'rake':
           language = 'ruby';break;
       case 'js':case 'jsx':
         language = 'javascript';break;
@@ -516,21 +524,22 @@ var EditorPanel = function EditorPanel(_ref) {
       // 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);
+      modelObj = window.monaco.editor.createModel(tab.content, language);
       window.__mbeditorModels[tab.path] = { model: modelObj, aviBase: null, aviMax: null, lastAccessed: Date.now(), cleanVersionId: null };
       _modelEntry = window.__mbeditorModels[tab.path];
     }
 
+    if (typeof HistoryService !== 'undefined') {
+      var _histBranch = EditorStore.getState().gitBranch || '';
+      if (_histBranch) {
+        if (_reusingModel) {
+          HistoryService.resumeTracking(_histBranch, tab.path);
+        } else {
+          HistoryService.beginTracking(_histBranch, tab.path, tab.content || '');
+        }
+      }
+    }
+
     // Sync latestContentRef from the actual model content so the onDidChangeContent
     // handler doesn't fire a spurious onContentChange call on the first keystroke.
     latestContentRef.current = _reusingModel ? modelObj.getValue() : (tab.content || '');
@@ -563,9 +572,9 @@ var EditorPanel = function EditorPanel(_ref) {
       formatOnPaste: editorPrefs.formatOnPaste !== false,
       formatOnType: editorPrefs.formatOnType !== false,
       quickSuggestions: editorPrefs.quickSuggestions !== false,
-      wordBasedSuggestions: editorPrefs.wordBasedSuggestions || 'matchingDocuments',
+      wordBasedSuggestions: editorPrefs.wordBasedSuggestions || 'currentDocument',
       acceptSuggestionOnEnter: editorPrefs.acceptSuggestionOnEnter || 'on',
-      linkedEditing: true,
+      linkedEditing: !!(editorPrefs.linkedEditing),
       fixedOverflowWidgets: true,
       hover: { above: false }
     });
@@ -698,6 +707,9 @@ var EditorPanel = function EditorPanel(_ref) {
     EditorStore.setState({ canUndo: avi > aviBaseRef.current, canRedo: avi < aviMaxRef.current });
 
     var contentDisposable = modelObj.onDidChangeContent(function (e) {
+      if (typeof HistoryService !== 'undefined') {
+        HistoryService.recordOps(tab.path, e.changes);
+      }
       var currentAvi = modelObj.getAlternativeVersionId();
       if (!e.isUndoing && !e.isRedoing) {
         // New edit: redo stack discarded at this point, so max resets here
@@ -705,7 +717,12 @@ var EditorPanel = function EditorPanel(_ref) {
       } else if (currentAvi > aviMaxRef.current) {
         aviMaxRef.current = currentAvi;
       }
-      EditorStore.setState({ canUndo: currentAvi > aviBaseRef.current, canRedo: currentAvi < aviMaxRef.current });
+      var newCanUndo = currentAvi > aviBaseRef.current;
+      var newCanRedo = currentAvi < aviMaxRef.current;
+      var _st = EditorStore.getState();
+      if (_st.canUndo !== newCanUndo || _st.canRedo !== newCanRedo) {
+        EditorStore.setState({ canUndo: newCanUndo, canRedo: newCanRedo });
+      }
 
       var val = editor.getValue();
 
@@ -735,6 +752,128 @@ var EditorPanel = function EditorPanel(_ref) {
       }
     });
 
+    // Phase 2: background undo-history replay.
+    // Only run for newly-created models (reused models already have their undo stack).
+    var _phase2CleanupFn = null;
+    if (!_reusingModel && typeof HistoryService !== 'undefined') {
+      var _phase2Branch  = EditorStore.getState().gitBranch || '';
+      var _phase2Path    = tab.path;
+      var _phase2Content = tab.content || '';
+      var _phase2Buf     = [];
+      var _phase2Active  = true;
+
+      var _phase2ModelA    = modelObj;
+      var _phase2Listener  = _phase2ModelA.onDidChangeContent(function (ev) {
+        if (!_phase2Active) return;
+        for (var _ci = 0; _ci < ev.changes.length; _ci++) {
+          var _c = ev.changes[_ci];
+          _phase2Buf.push([
+            _c.range.startLineNumber, _c.range.startColumn,
+            _c.range.endLineNumber,   _c.range.endColumn,
+            _c.text
+          ]);
+        }
+      });
+
+      var _runPhase2 = function () {
+        if (!_phase2Active || !_phase2Branch) return;
+        HistoryService.fetchHistory(_phase2Branch, _phase2Path).then(function (hist) {
+          if (!_phase2Active) return;
+          if (!hist || !hist.ops || hist.ops.length === 0) {
+            _phase2Listener.dispose();
+            return;
+          }
+
+          var _lang = modelObj.getLanguageId();
+          var modelB = window.monaco.editor.createModel(hist.base, _lang);
+
+          HistoryService.setReplayInProgress(_phase2Path, true);
+          try {
+            for (var _oi = 0; _oi < hist.ops.length; _oi++) {
+              var _op = hist.ops[_oi];
+              modelB.pushEditOperations([], [{
+                range: new window.monaco.Range(_op[0], _op[1], _op[2], _op[3]),
+                text:  _op[4] || ''
+              }], function () { return null; });
+            }
+          } catch (e) {
+            HistoryService.setReplayInProgress(_phase2Path, false);
+            _phase2Listener.dispose();
+            modelB.dispose();
+            return;
+          }
+          HistoryService.setReplayInProgress(_phase2Path, false);
+
+          var _expectedContent = _phase2ModelA.getValue();
+          if (modelB.getValue() !== _expectedContent) {
+            _phase2Listener.dispose();
+            modelB.dispose();
+            return;
+          }
+
+          if (_phase2Buf.length > 0) {
+            try {
+              for (var _bi = 0; _bi < _phase2Buf.length; _bi++) {
+                var _bop = _phase2Buf[_bi];
+                modelB.pushEditOperations([], [{
+                  range: new window.monaco.Range(_bop[0], _bop[1], _bop[2], _bop[3]),
+                  text:  _bop[4] || ''
+                }], function () { return null; });
+              }
+            } catch (e) {
+              _phase2Listener.dispose();
+              modelB.dispose();
+              return;
+            }
+          }
+
+          _phase2Listener.dispose();
+          if (!_phase2Active) { modelB.dispose(); return; }
+
+          if (modelB.getLanguageId() !== _lang) {
+            window.monaco.editor.setModelLanguage(modelB, _lang);
+          }
+          modelB._mbeditorPath = _phase2Path;
+
+          var _vs = editor.saveViewState();
+          editor.setModel(modelB);
+          if (_vs) editor.restoreViewState(_vs);
+
+          var _oldEntry = window.__mbeditorModels[_phase2Path];
+          if (_oldEntry && _oldEntry.model !== modelB) {
+            var _oldModel = _oldEntry.model;
+            window.__mbeditorModels[_phase2Path] = {
+              model:          modelB,
+              aviBase:        aviBaseRef.current,
+              aviMax:         modelB.getAlternativeVersionId(),
+              lastAccessed:   Date.now(),
+              cleanVersionId: _oldEntry.cleanVersionId
+            };
+            setTimeout(function () {
+              if (_oldModel && !_oldModel.isDisposed()) _oldModel.dispose();
+            }, 0);
+          }
+
+          // Re-attach the HistoryService content listener to modelB so ops recorded
+          // after the swap are captured without waiting for the next tab switch.
+          var _modelBListener = modelB.onDidChangeContent(function (ev) {
+            HistoryService.recordOps(_phase2Path, ev.changes);
+          });
+          _phase2CleanupFn = function () { _modelBListener.dispose(); };
+        }).catch(function () {
+          _phase2Listener.dispose();
+        });
+      };
+
+      if (typeof requestIdleCallback !== 'undefined') {
+        requestIdleCallback(_runPhase2, { timeout: 2000 });
+      } else {
+        setTimeout(_runPhase2, 200);
+      }
+
+      _phase2CleanupFn = function () { _phase2Active = false; _phase2Listener.dispose(); };
+    }
+
     return function () {
       blameDecorationsRef.current = editor.deltaDecorations(blameDecorationsRef.current, []);
       testDecorationIdsRef.current = editor.deltaDecorations(testDecorationIdsRef.current, []);
@@ -775,6 +914,7 @@ var EditorPanel = function EditorPanel(_ref) {
       columnSelectDisposable.dispose();
       contentDisposable.dispose();
       EditorStore.setState({ canUndo: false, canRedo: false });
+      if (_phase2CleanupFn) _phase2CleanupFn();
       // Detach the model before disposing the editor so the model (and its undo
       // history) survives for when the user returns to this tab.
       editor.setModel(null);
@@ -811,18 +951,7 @@ var EditorPanel = function EditorPanel(_ref) {
       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);
+      editor.setValue(tab.content);
       // 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();
@@ -848,6 +977,54 @@ var EditorPanel = function EditorPanel(_ref) {
     }
   }, [tab.content, tab.externalContentVersion]);
 
+  useEffect(function () {
+    var editor = monacoRef.current;
+    if (!editor || !window.monaco || typeof tab.content !== 'string') return;
+    var model = editor.getModel();
+    if (!model) return;
+
+    if (!ConflictParser.hasConflicts(tab.content)) {
+      conflictDecorationsRef.current = model.deltaDecorations(conflictDecorationsRef.current, []);
+      conflictBlocksRef.current = [];
+      setConflictCount(0);
+      return;
+    }
+
+    var blocks = ConflictParser.parse(tab.content);
+    conflictBlocksRef.current = blocks;
+    setConflictCount(blocks.length);
+
+    var decorations = [];
+    blocks.forEach(function (block) {
+      decorations.push({
+        range: new window.monaco.Range(block.startLine + 1, 1, block.startLine + 1, 1),
+        options: { isWholeLine: true, className: 'mb-conflict-marker-line' }
+      });
+      if (block.headEnd > block.startLine + 1) {
+        decorations.push({
+          range: new window.monaco.Range(block.startLine + 2, 1, block.headEnd, 1),
+          options: { isWholeLine: true, className: 'mb-conflict-head' }
+        });
+      }
+      decorations.push({
+        range: new window.monaco.Range(block.dividerLine + 1, 1, block.dividerLine + 1, 1),
+        options: { isWholeLine: true, className: 'mb-conflict-marker-line' }
+      });
+      if (block.endLine > block.dividerLine + 1) {
+        decorations.push({
+          range: new window.monaco.Range(block.dividerLine + 2, 1, block.endLine, 1),
+          options: { isWholeLine: true, className: 'mb-conflict-incoming' }
+        });
+      }
+      decorations.push({
+        range: new window.monaco.Range(block.endLine + 1, 1, block.endLine + 1, 1),
+        options: { isWholeLine: true, className: 'mb-conflict-marker-line' }
+      });
+    });
+
+    conflictDecorationsRef.current = model.deltaDecorations(conflictDecorationsRef.current, decorations);
+  }, [tab.content, tab.externalContentVersion]);
+
   // Apply editorPrefs changes to a running editor without remounting
   useEffect(function () {
     if (!window.monaco) return;
@@ -879,7 +1056,8 @@ var EditorPanel = function EditorPanel(_ref) {
         formatOnPaste: editorPrefs.formatOnPaste !== false,
         formatOnType: editorPrefs.formatOnType !== false,
         quickSuggestions: editorPrefs.quickSuggestions !== false,
-        wordBasedSuggestions: editorPrefs.wordBasedSuggestions || 'matchingDocuments',
+        wordBasedSuggestions: editorPrefs.wordBasedSuggestions || 'currentDocument',
+        linkedEditing: !!(editorPrefs.linkedEditing),
         acceptSuggestionOnEnter: editorPrefs.acceptSuggestionOnEnter || 'on'
       });
     }
@@ -914,6 +1092,20 @@ var EditorPanel = function EditorPanel(_ref) {
         });
         MonacoVim.VimMode.Vim.map('<C-p>', ':mbeditorquickopen<CR>', 'normal');
         MonacoVim.VimMode.Vim.map('<C-p>', ':mbeditorquickopen<CR>', 'visual');
+        // :split / :vsplit — open the current file in the other pane and focus it.
+        // Both map to the same behaviour since the editor always has exactly two panes.
+        var openInOtherPane = function() {
+          var model = monacoRef.current && monacoRef.current.getModel();
+          var filePath = model && model._mbeditorPath;
+          if (!filePath || typeof TabManager === 'undefined') return;
+          var otherPaneId = paneId === 1 ? 2 : 1;
+          // forcePaneId (4th arg) bypasses the "redirect empty pane 2 → pane 1" guard.
+          TabManager.openTab(filePath, filePath.split('/').pop(), null, otherPaneId);
+          TabManager.focusPane(otherPaneId);
+          window.dispatchEvent(new CustomEvent('mbeditor:focusPane', { detail: { paneId: otherPaneId } }));
+        };
+        MonacoVim.VimMode.Vim.defineEx('split', 'sp', openInOtherPane);
+        MonacoVim.VimMode.Vim.defineEx('vsplit', 'vs', openInOtherPane);
         vimModeObjRef.current = vimInstance;
       });
     } else {
@@ -931,6 +1123,18 @@ var EditorPanel = function EditorPanel(_ref) {
     };
   }, [editorPrefs.vimMode]);
 
+  // Focus this pane's Monaco editor when MbeditorApp dispatches mbeditor:focusPane
+  // (used by the vim Ctrl+W panel-switching handler to move keyboard focus).
+  useEffect(function() {
+    function onFocusPane(e) {
+      if (e.detail && e.detail.paneId === paneId && monacoRef.current) {
+        monacoRef.current.focus();
+      }
+    }
+    window.addEventListener('mbeditor:focusPane', onFocusPane);
+    return function() { window.removeEventListener('mbeditor:focusPane', onFocusPane); };
+  }, [paneId]);
+
   // Jump to line if specified
   useEffect(function () {
     if (tab.gotoLine && monacoRef.current) {
@@ -938,7 +1142,7 @@ var EditorPanel = function EditorPanel(_ref) {
         var editor = monacoRef.current;
         setTimeout(function () {
           editor.revealLineInCenter(tab.gotoLine);
-          editor.setPosition({ lineNumber: tab.gotoLine, column: 1 });
+          editor.setPosition({ lineNumber: tab.gotoLine, column: tab.gotoCol || 1 });
           editor.focus();
 
           TabManager.saveTabViewState(tab.id, editor.saveViewState());
@@ -1335,7 +1539,7 @@ var EditorPanel = function EditorPanel(_ref) {
   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' ||
+  var isRubyFile = ext === 'rb' || ext === 'ruby' || ext === 'gemspec' || ext === 'rake' ||
     fileBaseName === 'gemfile' || fileBaseName === 'gemfile.lock' || fileBaseName === 'rakefile';
 
   useEffect(function () {
@@ -1458,6 +1662,57 @@ var EditorPanel = function EditorPanel(_ref) {
     );
   }
 
+  function resolveConflict(blockIndex, resolution) {
+    var editor = monacoRef.current;
+    if (!editor || !window.monaco) return;
+    var blocks = conflictBlocksRef.current;
+    if (blockIndex < 0 || blockIndex >= blocks.length) return;
+    var block = blocks[blockIndex];
+    var model = editor.getModel();
+    if (!model) return;
+
+    var resolvedContent;
+    if (resolution === 'head') {
+      resolvedContent = block.headContent;
+    } else if (resolution === 'incoming') {
+      resolvedContent = block.incomingContent;
+    } else {
+      resolvedContent = block.headContent +
+        (block.headContent && block.incomingContent ? '\n' : '') +
+        block.incomingContent;
+    }
+
+    editor.pushUndoStop();
+    editor.executeEdits('conflict-resolve', [{
+      range: new window.monaco.Range(
+        block.startLine + 1, 1,
+        block.endLine + 1,
+        model.getLineMaxColumn(block.endLine + 1)
+      ),
+      text: resolvedContent
+    }]);
+    editor.pushUndoStop();
+
+    var newContent = editor.getValue();
+    EditorStore.setState({
+      panes: EditorStore.getState().panes.map(function (p) {
+        return Object.assign({}, p, {
+          tabs: p.tabs.map(function (t) {
+            if (t.path !== tab.path) return t;
+            return Object.assign({}, t, {
+              content: newContent,
+              dirty: true,
+              externalContentVersion: (t.externalContentVersion || 0) + 1
+            });
+          })
+        });
+      })
+    });
+
+    var remaining = conflictBlocksRef.current.length - 1;
+    currentConflictIndexRef.current = Math.min(currentConflictIndexRef.current, Math.max(0, remaining - 1));
+  }
+
   // 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.
@@ -1532,6 +1787,65 @@ var EditorPanel = function EditorPanel(_ref) {
         !editorPrefs.toolbarIconOnly && !testLoading && React.createElement('span', { className: 'ide-toolbar-label' }, 'Test')
       )
     ),
+    conflictCount > 0 && React.createElement(
+      'div', { className: 'mb-conflict-banner' },
+      React.createElement(
+        'span', { className: 'mb-conflict-count' },
+        React.createElement('i', { className: 'fas fa-code-merge' }),
+        ' ',
+        conflictCount,
+        ' merge conflict',
+        conflictCount !== 1 ? 's' : ''
+      ),
+      React.createElement(
+        'div', { className: 'mb-conflict-nav' },
+        React.createElement('button', {
+          className: 'mb-btn mb-btn-sm',
+          title: 'Previous conflict',
+          onClick: function () {
+            var idx = Math.max(0, currentConflictIndexRef.current - 1);
+            currentConflictIndexRef.current = idx;
+            var b = conflictBlocksRef.current[idx];
+            if (b && monacoRef.current) {
+              monacoRef.current.revealLineInCenter(b.startLine + 1);
+              monacoRef.current.setPosition({ lineNumber: b.startLine + 1, column: 1 });
+            }
+          }
+        }, '↑ Prev'),
+        React.createElement('button', {
+          className: 'mb-btn mb-btn-sm',
+          title: 'Next conflict',
+          onClick: function () {
+            var blocks = conflictBlocksRef.current;
+            var idx = Math.min(blocks.length - 1, currentConflictIndexRef.current + 1);
+            currentConflictIndexRef.current = idx;
+            var b = blocks[idx];
+            if (b && monacoRef.current) {
+              monacoRef.current.revealLineInCenter(b.startLine + 1);
+              monacoRef.current.setPosition({ lineNumber: b.startLine + 1, column: 1 });
+            }
+          }
+        }, '↓ Next')
+      ),
+      React.createElement(
+        'div', { className: 'mb-conflict-actions' },
+        React.createElement('button', {
+          className: 'mb-btn mb-btn-sm mb-btn-success',
+          title: 'Accept current (HEAD) — keep your local changes',
+          onClick: function () { resolveConflict(currentConflictIndexRef.current, 'head'); }
+        }, 'Accept Current'),
+        React.createElement('button', {
+          className: 'mb-btn mb-btn-sm mb-btn-incoming',
+          title: 'Accept incoming — take the changes being merged in',
+          onClick: function () { resolveConflict(currentConflictIndexRef.current, 'incoming'); }
+        }, 'Accept Incoming'),
+        React.createElement('button', {
+          className: 'mb-btn mb-btn-sm',
+          title: 'Accept both — keep current above incoming',
+          onClick: function () { resolveConflict(currentConflictIndexRef.current, 'both'); }
+        }, 'Accept Both')
+      )
+    ),
     tab.truncated && React.createElement(
       'div',
       {
@@ -1665,4 +1979,18 @@ var EditorPanel = function EditorPanel(_ref) {
   );
 };
 
-window.EditorPanel = EditorPanel;
+// treeData and all function props (onSave, onFormat, etc.) are intentionally
+// excluded — their references change every parent render but don't affect editor output.
+window.EditorPanel = React.memo(EditorPanel, function(prev, next) {
+  return prev.tab === next.tab &&
+    prev.paneId === next.paneId &&
+    (prev.markers === next.markers || (prev.markers.length === 0 && next.markers.length === 0)) &&
+    prev.gitAvailable === next.gitAvailable &&
+    prev.testAvailable === next.testAvailable &&
+    prev.testResult === next.testResult &&
+    prev.testPanelFile === next.testPanelFile &&
+    prev.testLoading === next.testLoading &&
+    prev.testInlineVisible === next.testInlineVisible &&
+    prev.editorPrefs === next.editorPrefs &&
+    prev.monacoReady === next.monacoReady;
+});