mbeditor 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 5b86f03d955c56bda4a7ea3d16c1a5081a04caa64719b563665cd0a07bdf0ed1
+  data.tar.gz: 51e529ef45dee7c1d39967dba058390f3f5b9c6f40b2cf559e9060709ccfeec6
+SHA512:
+  metadata.gz: c5377856d429e5790c17239332cd691dd127eeaca4c4cfdb932955067645fa7e6e3d47a5f79687672430221a19f3e6df5d5007608f54e326f7298d2089cc4bcb
+  data.tar.gz: 3302fbf02c588bcd41669abccbc0b809d23e9cb9b9e979b6291beb070cf4c92828379d6adfbc28c5e9d084170ee58f0d1bbf79fa3f6f16985ba5e83b68c0ecef

data/README.md

@@ -0,0 +1,127 @@
+# mbeditor
+
+Mbeditor (Mini Browser Editor) is a mountable Rails engine that adds a browser-based editor UI to a Rails app.
+
+## Features
+- Two-pane tabbed editor with drag-to-move tabs
+- File tree and project search
+- Git panel with working tree changes, unpushed file changes, and branch commit titles
+- Optional RuboCop lint and format endpoints (uses host app RuboCop)
+
+## Security Warning
+Mbeditor exposes read and write access to your Rails application directory over HTTP. It is intended only for local development.
+
+- Never install mbeditor in production or staging.
+- Never run it on infrastructure accessible to untrusted users.
+- Always keep it in the development group in your Gemfile.
+- The engine enforces environment restrictions at runtime, and Gemfile scoping is a second line of defense that keeps the gem out of deploy builds.
+
+## Installation
+1. Add the gem to the host app Gemfile in development only:
+
+```ruby
+gem 'mbeditor', group: :development
+```
+
+2. Install dependencies:
+
+```bash
+bundle install
+```
+
+3. Mount the engine in host app routes:
+
+```ruby
+mount Mbeditor::Engine, at: "/mbeditor"
+```
+
+4. Create `config/initializers/mbeditor.rb` using the configuration options below.
+
+5. Boot your app and open `/mbeditor`.
+
+## Configuration
+
+Use a single initializer to set the engine options you need:
+
+```ruby
+MBEditor.configure do |config|
+  config.allowed_environments = [:development]
+  # config.workspace_root = Rails.root
+  config.excluded_paths = %w[.git tmp log node_modules .bundle coverage vendor/bundle]
+  config.rubocop_command = "bundle exec rubocop"
+
+  # Optional Redmine integration
+  # config.redmine_enabled = true
+  # config.redmine_url = "https://redmine.example.com/"
+  # config.redmine_api_key = "optional_api_key_override"
+end
+```
+
+Available options:
+
+- `allowed_environments` controls which Rails environments can access the engine. Default: `[:development]`.
+- `workspace_root` sets the root directory exposed by Mbeditor. Default: `Rails.root` from the host app.
+- `excluded_paths` hides files and directories from the tree and path-based operations. Entries without `/` match names anywhere in the workspace path; entries with `/` match relative paths and their descendants. Default: `%w[.git tmp log node_modules .bundle coverage vendor/bundle]`.
+- `rubocop_command` sets the command used for inline Ruby linting and formatting. Default: `"rubocop"`.
+- `redmine_enabled` enables issue lookup integration. Default: `false`.
+- `redmine_url` sets the Redmine base URL. Required when `redmine_enabled` is `true`.
+- `redmine_api_key` sets the Redmine API key. Required when `redmine_enabled` is `true`.
+
+## Host Requirements (Optional)
+The gem keeps host/tooling responsibilities in the host app:
+- `rubocop` and `rubocop-rails` gems (optional, required for Ruby lint/format endpoints)
+- `haml_lint` gem (optional, required for HAML lint — add to your app's Gemfile if needed)
+- `git` installed in environment (for Git panel data)
+
+All lint tools are auto-detected at startup. The engine gracefully disables lint features if the tools are not available. Neither `rubocop` nor `haml_lint` are runtime dependencies of the gem itself — they are discovered from the host app's environment.
+
+### 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:
+
+**Web & Template Languages:**
+- **Ruby** (.rb, Gemfile, gemspec, Rakefile)
+- **HTML** 
+- **ERB** (.html.erb, .erb) — Handlebars-based template syntax
+- **HAML** (.haml) — plaintext syntax highlighting (no dedicated HAML grammar in Monaco; haml-lint provides inline error markers when available)
+- **CSS** and **SCSS** stylesheets
+
+**JavaScript & React:**
+- **JavaScript** (.js, .jsx)
+- **TypeScript** for JSX with full language server support
+
+**Configuration & Documentation:**
+- **YAML** (.yml, .yaml)
+- **Markdown** (.md)
+
+These language modules are packaged locally with the gem for true offline operation. No network fallback is needed—all highlighting works without internet connectivity.
+
+## Development
+
+A minimal dummy Rails app is included for local development and testing:
+
+```bash
+cd test/dummy && rails server
+```
+
+Then visit http://localhost:3000/mbeditor.
+
+## Testing
+
+The test suite uses Minitest via the dummy Rails app. Run all tests from the project root:
+
+```bash
+bundle exec rake test
+```
+
+Run a single test file:
+
+```bash
+bundle exec ruby -Itest test/controllers/mbeditor/editors_controller_test.rb
+```
+
+Run a single test by name:
+
+```bash
+bundle exec ruby -Itest test/controllers/mbeditor/editors_controller_test.rb -n test_ping_returns_ok
+```

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

@@ -0,0 +1,19 @@
+//= require mbeditor/editor_plugins
+//= require mbeditor/components/CollapsibleSection
+//= require mbeditor/components/ShortcutHelp
+//= require mbeditor/components/DiffViewer
+//= require mbeditor/components/CombinedDiffViewer
+//= require mbeditor/components/CommitGraph
+//= require mbeditor/components/FileHistoryPanel
+//= require mbeditor/components/CodeReviewPanel
+//= require mbeditor/components/EditorPanel
+//= require mbeditor/components/FileTree
+//= require mbeditor/components/GitPanel
+//= require mbeditor/components/QuickOpenDialog
+//= require mbeditor/components/TabBar
+//= require mbeditor/components/MbeditorApp
+//= require mbeditor/editor_store
+//= require mbeditor/file_service
+//= require mbeditor/git_service
+//= require mbeditor/search_service
+//= require mbeditor/tab_manager

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

@@ -0,0 +1,202 @@
+'use strict';
+
+var CodeReviewPanel = function CodeReviewPanel(_ref) {
+  var gitInfo = _ref.gitInfo;
+  var onClose = _ref.onClose;
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      redmineIssue = _React$useState2[0],
+      setRedmineIssue = _React$useState2[1];
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      redmineError = _React$useState4[0],
+      setRedmineError = _React$useState4[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isRedmineLoading = _React$useState6[0],
+      setIsRedmineLoading = _React$useState6[1];
+
+  var branchIdMatch = gitInfo && gitInfo.branch && gitInfo.branch.match(/(?:feature|bug|hotfix|task)\/(?:#)?(\d+)/i);
+  var issueId = branchIdMatch ? branchIdMatch[1] : null;
+
+  React.useEffect(function () {
+    if (!issueId) return;
+    setIsRedmineLoading(true);
+
+    // Call the redmine endpoint. It will 503 if disabled via config.
+    axios.get((window.MBEDITOR_BASE_PATH || '/mbeditor' ) + '/redmine/issue/' + issueId)
+      .then(function (res) {
+        setRedmineIssue(res.data);
+        setIsRedmineLoading(false);
+      })
+      .catch(function (err) {
+        if (err.response && err.response.status !== 503) {
+          setRedmineError(err.response.data.error || 'Failed to load Redmine issue.');
+        }
+        setIsRedmineLoading(false);
+      });
+  }, [issueId]);
+
+  var handleOpenDiff = function handleOpenDiff(path) {
+    var baseSha = gitInfo.upstreamBranch ? gitInfo.upstreamBranch : 'HEAD';
+    TabManager.openDiffTab(path, path.split('/').pop(), baseSha, 'WORKING', null);
+  };
+
+  var commits = gitInfo && gitInfo.branchCommits || [];
+  var unpushed = gitInfo && gitInfo.unpushedFiles || [];
+
+  return React.createElement(
+    'div',
+    { className: 'ide-code-review' },
+    React.createElement(
+      'div',
+      { className: 'ide-code-review-header' },
+      React.createElement(
+        'div',
+        { className: 'ide-code-review-title' },
+        React.createElement('i', { className: 'fas fa-clipboard-check' }),
+        ' Code Review: ',
+        gitInfo ? gitInfo.branch : 'Unknown Branch'
+      ),
+      React.createElement(
+        'button',
+        { className: 'ide-icon-btn', onClick: onClose, title: 'Close Review' },
+        React.createElement('i', { className: 'fas fa-times' })
+      )
+    ),
+    React.createElement(
+      'div',
+      { className: 'ide-code-review-content' },
+
+      // Redmine Issue Section
+      issueId && React.createElement(
+        'div',
+        { className: 'review-section' },
+        React.createElement(
+          'h3',
+          { className: 'review-section-title' },
+          'Redmine Issue #',
+          issueId
+        ),
+        isRedmineLoading ? React.createElement(
+          'div',
+          { className: 'ide-loading-state' },
+          'Loading issue details...'
+        ) : redmineError ? React.createElement(
+          'div',
+          { className: 'ide-error-state' },
+          redmineError
+        ) : redmineIssue ? React.createElement(
+          'div',
+          { className: 'redmine-card' },
+          React.createElement(
+            'div',
+            { className: 'redmine-card-header' },
+            React.createElement('strong', null, redmineIssue.title),
+            React.createElement(
+              'span',
+              { className: 'redmine-badge' },
+              redmineIssue.status
+            )
+          ),
+          React.createElement(
+            'div',
+            { className: 'redmine-meta' },
+            'Assigned to: ',
+            redmineIssue.author
+          ),
+          React.createElement(
+            'div',
+            { className: 'redmine-desc' },
+            redmineIssue.description
+          )
+        ) : null
+      ),
+
+      // Files to Review Section
+      React.createElement(
+        'div',
+        { className: 'review-section' },
+        React.createElement(
+          'h3',
+          { className: 'review-section-title' },
+          'Files Altered in Branch (',
+          unpushed.length,
+          ')'
+        ),
+        unpushed.length === 0 ? React.createElement(
+          'div',
+          { className: 'ide-empty-state' },
+          'No unpushed files to review.'
+        ) : React.createElement(
+          'div',
+          { className: 'git-list' },
+          unpushed.map(function (item) {
+            return React.createElement(
+              'div',
+              { key: item.path, className: 'git-commit-item hoverable', onClick: function () {
+                  return handleOpenDiff(item.path);
+                } },
+              React.createElement(
+                'div',
+                { className: 'git-commit-title' },
+                item.path
+              ),
+              React.createElement(
+                'div',
+                { className: 'git-commit-meta' },
+                'Status: ',
+                item.status,
+                ' \xB7 Click to view full diff against base branch'
+              )
+            );
+          })
+        )
+      ),
+
+      // Commits Section
+      React.createElement(
+        'div',
+        { className: 'review-section' },
+        React.createElement(
+          'h3',
+          { className: 'review-section-title' },
+          'Branch Commits (',
+          commits.length,
+          ')'
+        ),
+        commits.length === 0 ? React.createElement(
+          'div',
+          { className: 'ide-empty-state' },
+          'No local commits.'
+        ) : React.createElement(
+          'div',
+          { className: 'git-list' },
+          commits.map(function (commit) {
+            return React.createElement(
+              'div',
+              { key: commit.hash, className: 'git-commit-item' },
+              React.createElement(
+                'div',
+                { className: 'git-commit-title' },
+                commit.title
+              ),
+              React.createElement(
+                'div',
+                { className: 'git-commit-meta' },
+                commit.hash.slice(0, 7),
+                ' \xB7 ',
+                commit.author
+              )
+            );
+          })
+        )
+      )
+    )
+  );
+};
+
+window.CodeReviewPanel = CodeReviewPanel;

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

@@ -0,0 +1,71 @@
+"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 CollapsibleSection = function CollapsibleSection(_ref) {
+  var title = _ref.title;
+  var children = _ref.children;
+  var _ref$isCollapsed = _ref.isCollapsed;
+  var isCollapsed = _ref$isCollapsed === undefined ? false : _ref$isCollapsed;
+  var _ref$onToggle = _ref.onToggle;
+  var onToggle = _ref$onToggle === undefined ? null : _ref$onToggle;
+  var _ref$icon = _ref.icon;
+  var icon = _ref$icon === undefined ? null : _ref$icon;
+  var _ref$actions = _ref.actions;
+  var actions = _ref$actions === undefined ? null : _ref$actions;
+
+  var _useState = useState(isCollapsed);
+
+  var _useState2 = _slicedToArray(_useState, 2);
+
+  var localCollapsed = _useState2[0];
+  var setLocalCollapsed = _useState2[1];
+
+  // Sync parent isCollapsed prop to local state when it changes
+  useEffect(function () {
+    setLocalCollapsed(isCollapsed);
+  }, [isCollapsed]);
+
+  var toggleCollapsed = function toggleCollapsed(e) {
+    e.stopPropagation();
+    var newState = !localCollapsed;
+    setLocalCollapsed(newState);
+    if (onToggle) {
+      onToggle(newState);
+    }
+  };
+
+  return React.createElement(
+    "div",
+    { className: "collapsible-section" },
+    React.createElement(
+      "div",
+      { className: "collapsible-header", onClick: toggleCollapsed },
+      React.createElement("i", { className: "collapsible-toggle fas fa-chevron-" + (localCollapsed ? 'right' : 'down') }),
+      icon && React.createElement("i", { className: "collapsible-icon " + icon }),
+      React.createElement(
+        "span",
+        { className: "collapsible-title" },
+        title
+      ),
+      actions && React.createElement(
+        "div",
+        { className: "collapsible-actions", onClick: function (e) {
+            return e.stopPropagation();
+          } },
+        actions
+      )
+    ),
+    !localCollapsed && React.createElement(
+      "div",
+      { className: "collapsible-content" },
+      children
+    )
+  );
+};
+
+window.CollapsibleSection = CollapsibleSection;

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

@@ -0,0 +1,139 @@
+'use strict';
+
+// Renders the raw unified diff text produced by `git diff` for multiple files.
+// Each line is colored (green = addition, red = deletion, blue = hunk header,
+// dimmed = file header) giving a VS Code "Open Changes" style read-only view.
+var CombinedDiffViewer = function CombinedDiffViewer(_ref) {
+  var diffText = _ref.diffText;
+  var label    = _ref.label;
+  var isLoading = _ref.isLoading;
+
+  var containerRef = React.useRef(null);
+
+  // Track which file sections are collapsed.  Key = "diff --git …" header line.
+  var _us = React.useState({});
+  var collapsed = _us[0]; var setCollapsed = _us[1];
+
+  if (isLoading) {
+    return React.createElement(
+      'div',
+      { className: 'combined-diff-viewer combined-diff-loading-wrap' },
+      React.createElement('span', { className: 'combined-diff-loading-msg' }, 'Loading\u2026')
+    );
+  }
+
+  if (!diffText || !diffText.trim()) {
+    return React.createElement(
+      'div',
+      { className: 'combined-diff-viewer combined-diff-empty' },
+      React.createElement('i', { className: 'fas fa-check-circle', style: { marginRight: 8, color: '#89d185' } }),
+      'No changes.'
+    );
+  }
+
+  // Split the raw diff into per-file segments, each starting at "diff --git".
+  var segments = [];
+  var current = null;
+  diffText.split('\n').forEach(function (line) {
+    if (line.startsWith('diff --git ')) {
+      if (current) segments.push(current);
+      current = { header: line, lines: [line] };
+    } else if (current) {
+      current.lines.push(line);
+    }
+  });
+  if (current) segments.push(current);
+
+  // Extract a clean display path from the "diff --git a/foo b/foo" header
+  function extractPath(headerLine) {
+    var m = headerLine.match(/^diff --git a\/(.+) b\/(.+)$/);
+    return m ? m[2] : headerLine.replace('diff --git ', '');
+  }
+
+  function renderSegment(seg, si) {
+    var filePath = extractPath(seg.header);
+    var parts = filePath.split('/');
+    var fileName = parts.pop();
+    var fileDir = parts.join('/');
+
+    var isCollapsed = !!collapsed[si];
+
+    var lineNodes = [];
+    var inHunk = false;
+    seg.lines.forEach(function (line, li) {
+      // Skip the boring "diff --git / index / --- / +++" boilerplate at the top
+      if (li === 0) return; // "diff --git" — shown in header
+      if (line.startsWith('index ') || line.startsWith('old mode') || line.startsWith('new mode') || line.startsWith('new file') || line.startsWith('deleted file') || line.startsWith('Binary') || line.startsWith('rename ')) {
+        lineNodes.push(React.createElement('div', { key: li, className: 'cdiff-line cdiff-meta' }, line));
+        return;
+      }
+      if (line.startsWith('--- ') || line.startsWith('+++ ')) {
+        lineNodes.push(React.createElement('div', { key: li, className: 'cdiff-line cdiff-file-header' }, line));
+        inHunk = false;
+        return;
+      }
+      if (line.startsWith('@@')) {
+        inHunk = true;
+        lineNodes.push(React.createElement('div', { key: li, className: 'cdiff-line cdiff-hunk' }, line));
+        return;
+      }
+      if (!inHunk) return;
+      var cls = 'cdiff-line';
+      if (line.startsWith('+')) cls += ' cdiff-add';
+      else if (line.startsWith('-')) cls += ' cdiff-del';
+      else cls += ' cdiff-ctx';
+      lineNodes.push(React.createElement('div', { key: li, className: cls }, line || '\u00a0'));
+    });
+
+    return React.createElement(
+      'div',
+      { key: si, className: 'cdiff-file-segment' },
+      // File header bar
+      React.createElement(
+        'div',
+        {
+          className: 'cdiff-file-bar',
+          onClick: function () {
+            setCollapsed(function (prev) {
+              var next = Object.assign({}, prev);
+              next[si] = !prev[si];
+              return next;
+            });
+          }
+        },
+        React.createElement('i', {
+          className: 'fas ' + (isCollapsed ? 'fa-chevron-right' : 'fa-chevron-down') + ' cdiff-chevron'
+        }),
+        React.createElement('i', { className: 'fas fa-file-code cdiff-file-icon' }),
+        React.createElement('span', { className: 'cdiff-file-name' }, fileName),
+        fileDir ? React.createElement('span', { className: 'cdiff-file-dir' }, fileDir) : null
+      ),
+      !isCollapsed && React.createElement(
+        'div',
+        { className: 'cdiff-file-body' },
+        lineNodes
+      )
+    );
+  }
+
+  return React.createElement(
+    'div',
+    { className: 'combined-diff-viewer' },
+    // Toolbar
+    React.createElement(
+      'div',
+      { className: 'combined-diff-toolbar' },
+      React.createElement('i', { className: 'fas fa-exchange-alt', style: { color: '#569cd6', marginRight: 8 } }),
+      React.createElement('span', { className: 'combined-diff-label' }, label || 'All Changes'),
+      React.createElement('span', { className: 'combined-diff-file-count' }, segments.length + ' file' + (segments.length === 1 ? '' : 's'))
+    ),
+    // Body
+    React.createElement(
+      'div',
+      { className: 'combined-diff-body', ref: containerRef },
+      segments.map(function (seg, si) { return renderSegment(seg, si); })
+    )
+  );
+};
+
+window.CombinedDiffViewer = CombinedDiffViewer;

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

@@ -0,0 +1,65 @@
+'use strict';
+
+var CommitGraph = function CommitGraph(_ref) {
+  var commits = _ref.commits;
+  var onSelectCommit = _ref.onSelectCommit;
+
+  if (!commits || commits.length === 0) {
+    return React.createElement(
+      'div',
+      { className: 'git-empty' },
+      'No commit history available.'
+    );
+  }
+
+  // Very simplified graph rendering for a single branch view.
+  // Full cross-branch line rendering in a web UI is complex;
+  // here we render a vertical line with dots for each commit.
+  return React.createElement(
+    'div',
+    { className: 'ide-commit-graph' },
+    commits.map(function (commit, idx) {
+      var isFirst = idx === 0;
+      var isLast = idx === commits.length - 1;
+      var dateObj = new Date(commit.date);
+      var dateStr = !isNaN(dateObj) ? dateObj.toLocaleString() : commit.date;
+      var isLocal = commit.isLocal;
+
+      return React.createElement(
+        'div',
+        {
+          key: commit.hash,
+          className: 'commit-row ' + (isLocal ? 'commit-local' : ''),
+          onClick: function () { return onSelectCommit && onSelectCommit(commit); }
+        },
+        React.createElement(
+          'div',
+          { className: 'commit-graph-col' },
+          !isFirst && React.createElement('div', { className: 'commit-line-top' }),
+          React.createElement('div', { className: 'commit-dot ' + (isLocal ? 'dot-local' : 'dot-pushed') }),
+          !isLast && React.createElement('div', { className: 'commit-line-bottom' })
+        ),
+        React.createElement(
+          'div',
+          { className: 'commit-info-col' },
+          React.createElement(
+            'div',
+            { className: 'commit-title', title: commit.title },
+            commit.title
+          ),
+          React.createElement(
+            'div',
+            { className: 'commit-meta' },
+            React.createElement('span', { className: 'commit-hash' }, commit.hash.slice(0, 7)),
+            ' \xB7 ',
+            commit.author,
+            ' \xB7 ',
+            dateStr
+          )
+        )
+      );
+    })
+  );
+};
+
+window.CommitGraph = CommitGraph;