mbeditor 0.1.0

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

@@ -0,0 +1,142 @@
+'use strict';
+
+var DiffViewer = function DiffViewer(_ref) {
+  var path = _ref.path;
+  var original = _ref.original;
+  var modified = _ref.modified;
+  var isDark = _ref.isDark;
+  var onClose = _ref.onClose;
+  // If path is a diff:// URI (diff://baseSha..headSha/actual/file.rb), extract
+  // just the file path portion for display so the title bar shows a clean name.
+  var _rawDisplayPath = _ref.displayPath || path;
+  var displayPath = _rawDisplayPath;
+  if (!_ref.displayPath && _rawDisplayPath && _rawDisplayPath.indexOf('diff://') === 0) {
+    var _rest = _rawDisplayPath.slice(7); // strip 'diff://'
+    var _sep = _rest.indexOf('/');
+    if (_sep !== -1) displayPath = _rest.slice(_sep + 1);
+  }
+
+  var containerRef = React.useRef(null);
+  var editorRef = React.useRef(null);
+  var currentChangeRef = React.useRef(-1);
+
+  React.useEffect(function () {
+    if (!window.monaco || !containerRef.current) return;
+
+    var modelOriginal = window.monaco.editor.createModel(original, getLanguageForPath(displayPath));
+    var modelModified = window.monaco.editor.createModel(modified, getLanguageForPath(displayPath));
+
+    var diffEditor = window.monaco.editor.createDiffEditor(containerRef.current, {
+      theme: isDark ? 'vs-dark' : 'vs',
+      readOnly: true,
+      automaticLayout: true,
+      originalEditable: false,
+      renderSideBySide: true,
+      useInlineViewWhenSpaceIsLimited: false,
+      ignoreTrimWhitespace: false,
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      fontFamily: "'JetBrains Mono', 'Fira Code', 'Menlo', 'Consolas', monospace",
+      fontSize: 13
+    });
+
+    diffEditor.setModel({
+      original: modelOriginal,
+      modified: modelModified
+    });
+
+    editorRef.current = diffEditor;
+    currentChangeRef.current = -1;
+
+    diffEditor.onDidUpdateDiff(function () {
+      currentChangeRef.current = -1;
+    });
+
+    return function () {
+      if (editorRef.current) {
+        editorRef.current.dispose();
+        editorRef.current = null;
+      }
+      modelOriginal.dispose();
+      modelModified.dispose();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [original, modified, displayPath, isDark]);
+
+  var handleNextDiff = function handleNextDiff() {
+    if (!editorRef.current) return;
+    var changes = editorRef.current.getLineChanges() || [];
+    if (!changes.length) return;
+    currentChangeRef.current = (currentChangeRef.current + 1) % changes.length;
+    var change = changes[currentChangeRef.current];
+    editorRef.current.getModifiedEditor().revealLineInCenter(change.modifiedStartLineNumber);
+  };
+
+  var handlePrevDiff = function handlePrevDiff() {
+    if (!editorRef.current) return;
+    var changes = editorRef.current.getLineChanges() || [];
+    if (!changes.length) return;
+    currentChangeRef.current = (currentChangeRef.current - 1 + changes.length) % changes.length;
+    var change = changes[currentChangeRef.current];
+    editorRef.current.getModifiedEditor().revealLineInCenter(change.modifiedStartLineNumber);
+  };
+
+  function getLanguageForPath(filePath) {
+    if (!filePath) return 'plaintext';
+    var ext = filePath.split('.').pop().toLowerCase();
+    var map = {
+      'rb': 'ruby', 'js': 'javascript', 'jsx': 'javascript',
+      'ts': 'javascript', 'tsx': 'javascript',
+      'json': 'json', 'yml': 'yaml', 'yaml': 'yaml',
+      'css': 'css', 'scss': 'scss', 'html': 'html',
+      'xml': 'xml', 'md': 'markdown', 'sh': 'shell'
+    };
+    return map[ext] || 'plaintext';
+  }
+
+  var pathParts = (displayPath || '').split('/');
+  var fileName = pathParts.pop() || displayPath || '';
+  var fileDir = pathParts.join('/');
+
+  return React.createElement(
+    'div',
+    { className: 'ide-diff-viewer' },
+    React.createElement(
+      'div',
+      { className: 'ide-diff-toolbar' },
+      React.createElement(
+        'div',
+        { className: 'ide-diff-title' },
+        React.createElement('i', { className: 'fas fa-file-contract' }),
+          React.createElement(
+            'div',
+            { className: 'ide-diff-title-info', title: displayPath },
+            React.createElement('div', { className: 'ide-diff-title-name' }, fileName),
+            fileDir ? React.createElement('div', { className: 'ide-diff-title-dir' }, fileDir) : null
+          )
+      ),
+      React.createElement(
+        'div',
+        { className: 'ide-diff-actions' },
+        onClose && React.createElement(
+          'button',
+          { className: 'ide-diff-btn', onClick: onClose, title: 'Close diff (or click × on the tab)' },
+          React.createElement('i', { className: 'fas fa-times' })
+        ),
+        React.createElement(
+          'button',
+          { className: 'ide-diff-btn', onClick: handlePrevDiff, title: 'Previous Change' },
+          React.createElement('i', { className: 'fas fa-arrow-up' })
+        ),
+        React.createElement(
+          'button',
+          { className: 'ide-diff-btn', onClick: handleNextDiff, title: 'Next Change' },
+          React.createElement('i', { className: 'fas fa-arrow-down' })
+        )
+      )
+    ),
+    React.createElement('div', { className: 'ide-diff-editor-container', ref: containerRef })
+  );
+};
+
+window.DiffViewer = DiffViewer;

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

@@ -0,0 +1,363 @@
+'use strict';
+
+var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
+
+var _React = React;
+var useState = _React.useState;
+var useEffect = _React.useEffect;
+var useRef = _React.useRef;
+
+var IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'webp', 'bmp', 'avif'];
+
+var EditorPanel = function EditorPanel(_ref) {
+  var tab = _ref.tab;
+  var paneId = _ref.paneId;
+  var onContentChange = _ref.onContentChange;
+  var markers = _ref.markers;
+  var gitAvailable = _ref.gitAvailable === true;
+
+  var editorRef = useRef(null);
+  var monacoRef = useRef(null);
+
+  var _useState = useState('');
+  var _useState2 = _slicedToArray(_useState, 2);
+  var markup = _useState2[0];
+  var setMarkup = _useState2[1];
+
+  var _useState3 = useState(false);
+  var _useState4 = _slicedToArray(_useState3, 2);
+  var isBlameVisible = _useState4[0];
+  var setIsBlameVisible = _useState4[1];
+
+  var _useState5 = useState(null);
+  var _useState6 = _slicedToArray(_useState5, 2);
+  var blameData = _useState6[0];
+  var setBlameData = _useState6[1];
+
+  var _useState7 = useState(false);
+  var _useState8 = _slicedToArray(_useState7, 2);
+  var isBlameLoading = _useState8[0];
+  var setIsBlameLoading = _useState8[1];
+
+  var blameDecorationsRef = useRef([]);
+
+  var findTabByPath = function findTabByPath(path) {
+    if (!path) return null;
+    var state = EditorStore.getState();
+    for (var i = 0; i < state.panes.length; i += 1) {
+      var pane = state.panes[i];
+      var match = pane.tabs.find(function (t) {
+        return t.path === path;
+      });
+      if (match) return match;
+    }
+    return null;
+  };
+
+  useEffect(function () {
+    if (tab.isPreview) return;
+    if (!editorRef.current || !window.monaco) return;
+
+    if (window.MbeditorEditorPlugins && window.MbeditorEditorPlugins.registerGlobalExtensions) {
+      window.MbeditorEditorPlugins.registerGlobalExtensions(window.monaco);
+    }
+
+    var parts = tab.path.split('.');
+    var extension = parts.length > 1 ? parts.pop().toLowerCase() : '';
+    var language = 'plaintext';
+    switch (extension) {
+      case 'rb':case 'ruby':case 'gemspec':case 'rakefile':
+        language = 'ruby';break;
+      case 'js':case 'jsx':
+        language = 'javascript';break;
+      case 'ts':case 'tsx':
+        language = 'javascript';break;
+      case 'css':case 'scss':case 'sass':
+        language = 'css';break;
+      case 'html':case 'erb':
+        language = 'html';break;
+      case 'haml':
+        language = 'plaintext';break;
+      case 'json':
+        language = 'json';break;
+      case 'yaml':case 'yml':
+        language = 'yaml';break;
+      case 'md':case 'markdown':
+        language = 'markdown';break;
+      case 'sh':case 'bash':case 'zsh':
+        language = 'shell';break;
+      case 'png':case 'jpg':case 'jpeg':case 'gif':case 'svg':case 'ico':case 'webp':case 'bmp':case 'avif':
+        language = 'image';break;
+    }
+
+    if (language === 'image') return;
+
+    var editor = window.monaco.editor.create(editorRef.current, {
+      value: tab.content,
+      language: language,
+      theme: 'vs-dark',
+      automaticLayout: true,
+      minimap: { enabled: false },
+      renderLineHighlight: 'none',
+      bracketPairColorization: { enabled: true },
+      fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
+      fontSize: 13,
+      tabSize: 4,
+      insertSpaces: true,
+      wordWrap: 'on',
+      linkedEditing: true, // Enables Auto-Rename Tag natively!
+      fixedOverflowWidgets: true,
+      hover: { above: false },
+      autoClosingBrackets: 'always',
+      autoClosingQuotes: 'always',
+      autoIndent: 'full',
+      formatOnPaste: true,
+      formatOnType: true
+    });
+
+    if (tab.viewState) {
+      editor.restoreViewState(tab.viewState);
+    }
+
+    monacoRef.current = editor;
+    window.__mbeditorActiveEditor = editor;
+
+    var modelObj = editor.getModel();
+
+    var editorPluginDisposable = null;
+    if (window.MbeditorEditorPlugins && window.MbeditorEditorPlugins.attachEditorFeatures) {
+      editorPluginDisposable = window.MbeditorEditorPlugins.attachEditorFeatures(editor, language);
+    }
+
+    // Change listener
+    var contentDisposable = modelObj.onDidChangeContent(function (e) {
+      var val = editor.getValue();
+      var currentContent = monacoRef.current._latestContent || '';
+
+      // Normalize before comparing to prevent false positive dirty edits
+      var vNorm = val.replace(/\r\n/g, '\n');
+      var cNorm = currentContent.replace(/\r\n/g, '\n');
+      if (vNorm !== cNorm) {
+        onContentChange(val);
+      }
+    });
+
+    return function () {
+      TabManager.saveTabViewState(tab.id, editor.saveViewState());
+      if (window.__mbeditorActiveEditor === editor) {
+        window.__mbeditorActiveEditor = null;
+      }
+      if (editorPluginDisposable) editorPluginDisposable.dispose();
+      contentDisposable.dispose();
+      editor.dispose();
+    };
+  }, [tab.id, tab.isPreview]); // re-run ONLY on tab switch, not on content change (Monaco handles its own content state)
+
+  // Listen for external content changes (e.g. after Format/Save/Load)
+  useEffect(function () {
+    var editor = monacoRef.current;
+    if (editor) editor._latestContent = tab.content; // update ref for closure
+
+    if (editor && editor.getValue() !== tab.content) {
+      if (typeof tab.content !== 'string') return;
+      // Normalize before comparing to prevent false positive dirty edits
+      var vNorm = editor.getValue().replace(/\r\n/g, '\n');
+      var cNorm = tab.content.replace(/\r\n/g, '\n');
+      if (vNorm === cNorm) return;
+
+      var model = editor.getModel();
+      if (model) {
+        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);
+        } else {
+          // Keep undo stack for formats or replaces by using executeEdits
+          editor.pushUndoStop();
+          editor.executeEdits("external", [{
+            range: model.getFullModelRange(),
+            text: tab.content
+          }]);
+          editor.pushUndoStop();
+        }
+      }
+    }
+  }, [tab.content]);
+
+  // Jump to line if specified
+  useEffect(function () {
+    if (tab.gotoLine && monacoRef.current) {
+      (function () {
+        var editor = monacoRef.current;
+        setTimeout(function () {
+          editor.revealLineInCenter(tab.gotoLine);
+          editor.setPosition({ lineNumber: tab.gotoLine, column: 1 });
+          editor.focus();
+
+          TabManager.saveTabViewState(tab.id, editor.saveViewState());
+          TabManager.clearGotoLine(paneId, tab.path);
+        }, 50);
+      })();
+    }
+  }, [tab.gotoLine, tab.content]); // need tab.content in dep array so if it loads asynchronously, the jump happens AFTER content loads
+
+  // Apply RuboCop markers
+  useEffect(function () {
+    if (monacoRef.current && window.monaco) {
+      var model = monacoRef.current.getModel();
+      if (model) {
+        var monacoMarkers = markers.map(function (m) {
+          return {
+            severity: m.severity === 'error' ? window.monaco.MarkerSeverity.Error : window.monaco.MarkerSeverity.Warning,
+            message: m.message,
+            startLineNumber: m.startLine,
+            startColumn: m.startCol,
+            endLineNumber: m.endLine,
+            endColumn: m.endCol
+          };
+        });
+        window.monaco.editor.setModelMarkers(model, 'rubocop', monacoMarkers);
+      }
+    }
+  }, [markers, tab.id]);
+
+  // Reset blame state when file path changes
+  useEffect(function () {
+    setBlameData(null);
+    setIsBlameVisible(false);
+    setIsBlameLoading(false);
+  }, [tab.path]);
+
+  // Handle Blame data fetching
+  useEffect(function () {
+    if (!isBlameVisible) {
+      if (monacoRef.current && monacoRef.current.getModel()) {
+        blameDecorationsRef.current = monacoRef.current.deltaDecorations(blameDecorationsRef.current, []);
+      }
+      return;
+    }
+    
+    if (!blameData && !isBlameLoading) {
+      setIsBlameLoading(true);
+      GitService.fetchBlame(tab.path).then(function(data) {
+        setBlameData(data.lines || []);
+        setIsBlameLoading(false);
+      }).catch(function(err) {
+        var status = err.response && err.response.status;
+        var msg = status === 404
+          ? "File is not tracked by git"
+          : "Failed to load blame: " + ((err.response && err.response.data && err.response.data.error) || err.message);
+        EditorStore.setStatus(msg, "error");
+        setIsBlameLoading(false);
+        setIsBlameVisible(false);
+      });
+    }
+  }, [isBlameVisible, tab.path, blameData, isBlameLoading]);
+
+  // Render Blame decorations
+  useEffect(function () {
+    if (!monacoRef.current || !window.monaco || !isBlameVisible || !blameData) return;
+    var editor = monacoRef.current;
+    
+    var newDecorations = blameData.map(function(lineData) {
+      var ln = lineData.line;
+      var hash = lineData.sha && lineData.sha.substring(0, 8) || '';
+      var author = lineData.author || '';
+      // Exclude uncommitted changes from noisy blame
+      var isUncommitted = hash === '00000000';
+      var text = isUncommitted ? 'Not Committed' : author + ' \xB7 ' + hash;
+      
+      return {
+        range: new window.monaco.Range(ln, 1, ln, 1),
+        options: {
+          isWholeLine: false,
+          after: {
+            content: '\xA0\xA0\xA0\xA0' + text,
+            inlineClassName: isUncommitted ? 'ide-blame-annotation-uncommitted' : 'ide-blame-annotation'
+          }
+        }
+      };
+    });
+    
+    blameDecorationsRef.current = editor.deltaDecorations(blameDecorationsRef.current, newDecorations);
+  }, [blameData, isBlameVisible, tab.id, tab.content]);
+
+  var sourceTab = tab.isPreview ? findTabByPath(tab.previewFor) : null;
+  var markdownContent = tab.isPreview ? sourceTab && sourceTab.content || tab.content || '' : tab.content || '';
+
+  var sourcePath = tab.isPreview ? tab.previewFor || tab.path : tab.path;
+  var parts = sourcePath.split('.');
+  var ext = parts.length > 1 ? parts.pop().toLowerCase() : '';
+  var isImage = tab.isImage || IMAGE_EXTENSIONS.includes(ext);
+  var isMarkdown = ['md', 'markdown'].includes(ext);
+
+  useEffect(function () {
+    if (isMarkdown && window.marked) {
+      (function () {
+        var renderer = new window.marked.Renderer();
+        var escapeHtml = function escapeHtml(str) {
+          return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        };
+        renderer.html = function (token) {
+          return '<pre>' + escapeHtml(typeof token === 'object' ? token.text : token) + '</pre>';
+        };
+        setMarkup(window.marked.parse(markdownContent, { renderer: renderer }));
+      })();
+    }
+  }, [markdownContent, isMarkdown]);
+
+  if (tab.isDiff) {
+    var isDiffDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches || true;
+    return React.createElement(window.DiffViewer || DiffViewer, {
+      path: tab.repoPath || tab.path,
+      original: tab.diffOriginal || "",
+      modified: tab.diffModified || "",
+      isDark: isDiffDark
+    });
+  }
+
+  if (tab.isCombinedDiff) {
+    return React.createElement(window.CombinedDiffViewer, {
+      diffText: tab.combinedDiffText || '',
+      label: tab.combinedDiffLabel || 'All Changes',
+      isLoading: !tab.combinedDiffText && !tab.combinedDiffLoaded
+    });
+  }
+
+  if (isImage) {
+    var basePath = (window.MBEDITOR_BASE_PATH || '/mbeditor').replace(/\/$/, '');
+    return React.createElement(
+      'div',
+      { className: 'monaco-container', style: { display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#1e1e1e' } },
+      React.createElement('img', { src: basePath + '/raw?path=' + encodeURIComponent(tab.path), style: { maxWidth: '90%', maxHeight: '90%', objectFit: 'contain' }, alt: tab.name })
+    );
+  }
+
+  if (tab.isPreview && isMarkdown) {
+    return React.createElement('div', { className: 'markdown-preview markdown-preview-full', dangerouslySetInnerHTML: { __html: markup } });
+  }
+
+  return React.createElement(
+    'div',
+    { className: 'ide-editor-wrapper', style: { display: 'flex', flexDirection: 'column', height: '100%' } },
+    React.createElement(
+      'div',
+      { className: 'ide-editor-toolbar', style: { display: 'flex', justifyContent: 'flex-end', padding: '4px 8px', background: '#252526', borderBottom: '1px solid #3c3c3c' } },
+      React.createElement(
+        'button',
+        { 
+          className: 'ide-icon-btn ' + (isBlameVisible ? 'active' : ''), 
+          disabled: !gitAvailable,
+          onClick: gitAvailable ? function() { setIsBlameVisible(!isBlameVisible); } : undefined,
+          title: gitAvailable ? 'Toggle Git Blame' : 'Git not available in this workspace',
+          style: { fontSize: '12px', padding: '2px 6px', opacity: (gitAvailable && isBlameVisible) ? 1 : 0.6, background: isBlameVisible ? 'rgba(255,255,255,0.1)' : 'transparent', border: 'none', color: gitAvailable ? '#ccc' : '#666', cursor: gitAvailable ? 'pointer' : 'not-allowed', borderRadius: '3px' }
+        },
+        React.createElement('i', { className: 'fas fa-shoe-prints', style: { marginRight: '6px' } }),
+        isBlameLoading ? 'Loading...' : 'Blame'
+      )
+    ),
+    React.createElement('div', { ref: editorRef, className: 'monaco-container', style: { flex: 1, minHeight: 0 } })
+  );
+};
+
+window.EditorPanel = EditorPanel;

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

@@ -0,0 +1,112 @@
+'use strict';
+
+var FileHistoryPanel = function FileHistoryPanel(_ref) {
+  var path = _ref.path;
+  var onSelectCommit = _ref.onSelectCommit;
+  var onClose = _ref.onClose;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      commits = _React$useState2[0],
+      setCommits = _React$useState2[1];
+
+  var _React$useState3 = React.useState(true),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      loading = _React$useState4[0],
+      setLoading = _React$useState4[1];
+
+  var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      error = _React$useState6[0],
+      setError = _React$useState6[1];
+
+  React.useEffect(function () {
+    if (!path) return;
+    setLoading(true);
+    setError(null);
+
+    GitService.fetchFileHistory(path).then(function (data) {
+      setCommits(data.commits || []);
+      setLoading(false);
+    }).catch(function (err) {
+      setError(err.response && err.response.data && err.response.data.error || err.message);
+      setLoading(false);
+    });
+  }, [path]);
+
+  return React.createElement(
+    'div',
+    { className: 'ide-file-history' },
+    React.createElement(
+      'div',
+      { className: 'ide-file-history-header' },
+      React.createElement(
+        'div',
+        { className: 'ide-file-history-title' },
+        React.createElement('i', { className: 'fas fa-history' }),
+        React.createElement(
+          'span',
+          null,
+          'History: ',
+          path.split('/').pop()
+        )
+      ),
+      React.createElement(
+        'button',
+        { className: 'ide-icon-btn', onClick: onClose, title: 'Close History' },
+        React.createElement('i', { className: 'fas fa-times' })
+      )
+    ),
+    React.createElement(
+      'div',
+      { className: 'ide-file-history-content' },
+      loading ? React.createElement(
+        'div',
+        { className: 'ide-loading-state' },
+        React.createElement('i', { className: 'fas fa-spinner fa-spin' }),
+        ' Loading history...'
+      ) : error ? React.createElement(
+        'div',
+        { className: 'ide-error-state' },
+        error
+      ) : commits.length === 0 ? React.createElement(
+        'div',
+        { className: 'ide-empty-state' },
+        'No history found for this file.'
+      ) : React.createElement(
+        'div',
+        { className: 'git-list' },
+        commits.map(function (commit) {
+          var dateObj = new Date(commit.date);
+          var dateStr = !isNaN(dateObj) ? dateObj.toLocaleDateString() + ' ' + dateObj.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : commit.date;
+          return React.createElement(
+            'div',
+            { key: commit.hash, className: 'git-commit-item hoverable', onClick: function () {
+                return onSelectCommit && onSelectCommit(commit.hash, path);
+              } },
+            React.createElement(
+              'div',
+              { className: 'git-commit-title', title: commit.title },
+              commit.title
+            ),
+            React.createElement(
+              'div',
+              { className: 'git-commit-meta' },
+              React.createElement(
+                'span',
+                { className: 'commit-hash' },
+                commit.hash.slice(0, 7)
+              ),
+              ' \xB7 ',
+              commit.author,
+              ' \xB7 ',
+              dateStr
+            )
+          );
+        })
+      )
+    )
+  );
+};
+
+window.FileHistoryPanel = FileHistoryPanel;