mbeditor 0.1.0

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

@@ -0,0 +1,282 @@
+'use strict';
+
+(function () {
+  var RUBY_BLOCK_START = /^\s*(def|class|module|if|unless|case|while|until|for|begin)\b.*$/;
+  var RUBY_DO_BLOCK_START = /\bdo(\s*\|.*\|)?\s*$/;
+  var RUBY_END_LINE = /^end\b/;
+  var VOID_HTML_ELEMENTS = {
+    area: true,
+    base: true,
+    br: true,
+    col: true,
+    embed: true,
+    hr: true,
+    img: true,
+    input: true,
+    link: true,
+    meta: true,
+    param: true,
+    source: true,
+    track: true,
+    wbr: true
+  };
+
+  var globalsRegistered = false;
+
+  function leadingWhitespace(line) {
+    var match = line.match(/^\s*/);
+    return match ? match[0] : '';
+  }
+
+  function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  function rubyIndentUnit(model) {
+    var options = model.getOptions ? model.getOptions() : null;
+    var tabSize = options && options.tabSize ? options.tabSize : 4;
+    return new Array(tabSize + 1).join(' ');
+  }
+
+  function rubyClosingIndent(model, cursorLineNumber, openerLine) {
+    var cursorIndent = leadingWhitespace(model.getLineContent(cursorLineNumber));
+    var indentUnit = rubyIndentUnit(model);
+
+    if (cursorIndent.length >= indentUnit.length) {
+      return cursorIndent.slice(0, cursorIndent.length - indentUnit.length);
+    }
+
+    return leadingWhitespace(openerLine);
+  }
+
+  function isRubyBlockStart(line) {
+    var trimmed = line.trim();
+    if (!trimmed || trimmed[0] === '#') return false;
+    return RUBY_BLOCK_START.test(line) || RUBY_DO_BLOCK_START.test(trimmed);
+  }
+
+  function hasMatchingRubyEnd(model, openerLineNumber, openerIndent) {
+    var lineCount = model.getLineCount();
+    var openerIndentLength = openerIndent.length;
+
+    for (var lineNumber = openerLineNumber + 1; lineNumber <= lineCount; lineNumber += 1) {
+      var line = model.getLineContent(lineNumber);
+      var trimmed = line.trim();
+      if (!trimmed || trimmed[0] === '#') continue;
+
+      var lineIndent = leadingWhitespace(line);
+      var lineIndentLength = lineIndent.length;
+
+      if (RUBY_END_LINE.test(trimmed)) {
+        if (lineIndentLength === openerIndentLength) return true;
+        if (lineIndentLength < openerIndentLength) return false;
+      }
+    }
+
+    return false;
+  }
+
+  function rubyEnterContext(editor, model) {
+    var selection = editor.getSelection();
+    if (!selection || !selection.isEmpty()) return null;
+
+    var cursorPosition = editor.getPosition();
+    if (!cursorPosition) return null;
+
+    var openerLine = model.getLineContent(cursorPosition.lineNumber);
+    var beforeCursor = openerLine.substring(0, cursorPosition.column - 1);
+    var afterCursor = openerLine.substring(cursorPosition.column - 1);
+
+    if (afterCursor.trim() !== '') return null;
+    if (!isRubyBlockStart(beforeCursor)) return null;
+
+    return {
+      cursorPosition: cursorPosition,
+      openerIndent: leadingWhitespace(openerLine),
+      hasExistingEnd: hasMatchingRubyEnd(model, cursorPosition.lineNumber, leadingWhitespace(openerLine))
+    };
+  }
+
+  function handleRubyEnter(editor, model) {
+    var context = rubyEnterContext(editor, model);
+    if (!context) return false;
+
+    var innerIndent = context.openerIndent + rubyIndentUnit(model);
+    var insertedText = '\n' + innerIndent;
+    if (!context.hasExistingEnd) {
+      insertedText += '\n' + context.openerIndent + 'end';
+    }
+
+    editor.executeEdits('ruby-auto-end', [{
+      range: new window.monaco.Range(context.cursorPosition.lineNumber, context.cursorPosition.column, context.cursorPosition.lineNumber, context.cursorPosition.column),
+      text: insertedText
+    }]);
+
+    editor.setPosition({
+      lineNumber: context.cursorPosition.lineNumber + 1,
+      column: innerIndent.length + 1
+    });
+    editor.focus();
+    return true;
+  }
+
+  function handleMarkupAutoClose(editor, model, change) {
+    if (change.rangeLength !== 0 || change.text !== '>') return false;
+
+    var lineNumber = change.range.startLineNumber;
+    var columnBeforeInsert = change.range.startColumn;
+    var lineContent = model.getLineContent(lineNumber);
+    var textBefore = lineContent.substring(0, columnBeforeInsert - 1);
+
+    if (/\/$/.test(textBefore)) return false;
+
+    var tagMatch = textBefore.match(/<([a-zA-Z][a-zA-Z0-9:\-_]*)(?:\s+[^>]*?)?$/);
+    if (!tagMatch) return false;
+
+    var tagName = tagMatch[1];
+    if (VOID_HTML_ELEMENTS[tagName.toLowerCase()]) return false;
+
+    var closingTag = '</' + tagName + '>';
+    var afterCursor = lineContent.substring(columnBeforeInsert);
+    var existingClosePattern = new RegExp('^\\s*' + escapeRegExp(closingTag));
+    if (existingClosePattern.test(afterCursor)) return false;
+
+    window.setTimeout(function () {
+      var activeModel = editor.getModel();
+      if (!activeModel || activeModel !== model) return;
+
+      var latestLineContent = model.getLineContent(lineNumber);
+      var latestAfterCursor = latestLineContent.substring(columnBeforeInsert);
+      if (existingClosePattern.test(latestAfterCursor)) return;
+
+      editor.executeEdits('html-auto-close', [{
+        range: new window.monaco.Range(lineNumber, columnBeforeInsert + 1, lineNumber, columnBeforeInsert + 1),
+        text: closingTag
+      }]);
+
+      window.setTimeout(function () {
+        editor.setPosition({ lineNumber: lineNumber, column: columnBeforeInsert + 1 });
+        editor.focus();
+      }, 0);
+    }, 0);
+
+    return true;
+  }
+
+  function attachEditorFeatures(editor, language) {
+    var model = editor && editor.getModel ? editor.getModel() : null;
+    if (!model) {
+      return { dispose: function dispose() {} };
+    }
+
+    var suppressInternalEdit = false;
+    var keydownDisposable = null;
+
+    if (language === 'ruby') {
+      keydownDisposable = editor.onKeyDown(function (event) {
+        if (event.keyCode !== window.monaco.KeyCode.Enter) return;
+        if (!handleRubyEnter(editor, model)) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+      });
+    }
+
+    var contentDisposable = model.onDidChangeContent(function (event) {
+      if (suppressInternalEdit) return;
+      if (event.isUndoing || event.isRedoing) return;
+      if (!event.changes || event.changes.length !== 1) return;
+
+      var change = event.changes[0];
+      var handled = false;
+
+      suppressInternalEdit = true;
+      try {
+        if (language === 'html') {
+          handled = handleMarkupAutoClose(editor, model, change) || handled;
+        }
+
+        if (language === 'javascript' || language === 'typescript') {
+          handled = handleMarkupAutoClose(editor, model, change) || handled;
+        }
+      } finally {
+        suppressInternalEdit = false;
+      }
+
+      return handled;
+    });
+
+    return {
+      dispose: function dispose() {
+        if (keydownDisposable) keydownDisposable.dispose();
+        contentDisposable.dispose();
+      }
+    };
+  }
+
+  function registerGlobalExtensions(monaco) {
+    if (globalsRegistered) return;
+    if (!monaco || !monaco.languages) return;
+
+    globalsRegistered = true;
+
+    monaco.languages.setLanguageConfiguration('ruby', {
+      indentationRules: {
+        increaseIndentPattern: /^\s*(def|class|module|if|unless|case|while|until|for|begin|elsif|else|rescue|ensure|when)\b/,
+        decreaseIndentPattern: /^\s*(end|elsif|else|rescue|ensure|when)\b/
+      }
+    });
+
+    var genericLinkedProvider = {
+      provideLinkedEditingRanges: function provideLinkedEditingRanges(model, position) {
+        var line = model.getLineContent(position.lineNumber);
+        var wordInfo = model.getWordAtPosition(position);
+        if (!wordInfo) return null;
+
+        var word = wordInfo.word;
+        var startCol = wordInfo.startColumn;
+        var endCol = wordInfo.endColumn;
+
+        if (line[startCol - 2] === '<') {
+          var closeTagStr = '</' + word + '>';
+          var closeIdx = line.indexOf(closeTagStr, endCol - 1);
+          if (closeIdx !== -1) {
+            return {
+              ranges: [new monaco.Range(position.lineNumber, startCol, position.lineNumber, endCol), new monaco.Range(position.lineNumber, closeIdx + 3, position.lineNumber, closeIdx + 3 + word.length)],
+              wordPattern: /[a-zA-Z0-9:\-_]+/
+            };
+          }
+        }
+
+        if (line[startCol - 3] === '<' && line[startCol - 2] === '/') {
+          var openTagRegex = new RegExp('<' + word + '(?:\\s|>)');
+          var match = line.match(openTagRegex);
+          if (match) {
+            var openStart = match.index + 2;
+            if (openStart < startCol) {
+              return {
+                ranges: [new monaco.Range(position.lineNumber, openStart, position.lineNumber, openStart + word.length), new monaco.Range(position.lineNumber, startCol, position.lineNumber, endCol)],
+                wordPattern: /[a-zA-Z0-9:\-_]+/
+              };
+            }
+          }
+        }
+
+        return null;
+      }
+    };
+
+    monaco.languages.registerLinkedEditingRangeProvider('javascript', genericLinkedProvider);
+    monaco.languages.registerLinkedEditingRangeProvider('typescript', genericLinkedProvider);
+    monaco.languages.registerLinkedEditingRangeProvider('ruby', genericLinkedProvider);
+  }
+
+  window.MbeditorEditorPlugins = {
+    registerGlobalExtensions: registerGlobalExtensions,
+    attachEditorFeatures: attachEditorFeatures,
+    runRubyEnter: function runRubyEnter(editor) {
+      if (!editor || !editor.getModel) return false;
+      return handleRubyEnter(editor, editor.getModel());
+    }
+  };
+})();

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

@@ -0,0 +1,53 @@
+// EditorStore — central state store for the browser IDE
+// All state lives here; UI subscribes via listeners.
+var EditorStore = (function () {
+  var _state = {
+    panes: [
+      { id: 1, tabs: [], activeTabId: null },
+      { id: 2, tabs: [], activeTabId: null }
+    ],
+    focusedPaneId: 1, // which pane currently has focus
+    activeTabId: null, // alias for backwards compat/easy access to the currently focused tab in the focused pane
+    gitFiles:      [],   // [{ status, path }]
+    gitBranch:     "",
+    gitInfo:       null,
+    gitInfoError:  null,
+    searchResults: [],
+    statusMessage: { text: "", kind: "info" },
+  };
+
+  var _listeners = [];
+
+  function getState() { return _state; }
+
+  function subscribe(fn) {
+    _listeners.push(fn);
+    return function unsubscribe() {
+      _listeners = _listeners.filter(function (l) { return l !== fn; });
+    };
+  }
+
+  function emit() {
+    _listeners.forEach(function (fn) { fn(_state); });
+  }
+
+  function setState(patch) {
+    _state = Object.assign({}, _state, patch);
+    emit();
+  }
+
+  function setStatus(text, kind) {
+    kind = kind || "info";
+    setState({ statusMessage: { text: text, kind: kind } });
+    // Auto-clear after 4s for non-error messages
+    if (kind !== "error") {
+      setTimeout(function () {
+        if (_state.statusMessage.text === text) {
+          setState({ statusMessage: { text: "", kind: "info" } });
+        }
+      }, 4000);
+    }
+  }
+
+  return { getState: getState, subscribe: subscribe, setState: setState, setStatus: setStatus };
+})();

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

@@ -0,0 +1,77 @@
+// Identify all requests as coming from the mbeditor client.
+// The server checks this header on every non-GET request as a CSRF guard.
+axios.defaults.headers.common['X-Mbeditor-Client'] = '1';
+
+var FileService = (function () {
+  function basePath() {
+    return (window.MBEDITOR_BASE_PATH || '/mbeditor').replace(/\/$/, '');
+  }
+
+  function getWorkspace() {
+    return axios.get(basePath() + '/workspace').then(function(res) { return res.data; });
+  }
+
+  function getTree() {
+    return axios.get(basePath() + '/files').then(function(res) { return res.data; });
+  }
+
+  function getFile(path) {
+    return axios.get(basePath() + '/file', { params: { path: path } }).then(function(res) { return res.data; });
+  }
+
+  function saveFile(path, code) {
+    return axios.post(basePath() + '/file', { path: path, code: code }).then(function(res) { return res.data; });
+  }
+
+  function createFile(path, code) {
+    return axios.post(basePath() + '/create_file', { path: path, code: code || '' }).then(function(res) { return res.data; });
+  }
+
+  function createDir(path) {
+    return axios.post(basePath() + '/create_dir', { path: path }).then(function(res) { return res.data; });
+  }
+
+  function renamePath(path, newPath) {
+    return axios.patch(basePath() + '/rename', { path: path, new_path: newPath }).then(function(res) { return res.data; });
+  }
+
+  function deletePath(path) {
+    return axios.delete(basePath() + '/delete', { data: { path: path } }).then(function(res) { return res.data; });
+  }
+
+  function lintFile(path, code) {
+    return axios.post(basePath() + '/lint', { path: path, code: code }).then(function(res) { return res.data; });
+  }
+
+  function formatFile(path) {
+    return axios.post(basePath() + '/format', { path: path }).then(function(res) { return res.data; });
+  }
+
+  function ping() {
+    return axios.get(basePath() + '/ping', { timeout: 4000 }).then(function(res) { return res.data; });
+  }
+
+  function getState() {
+    return axios.get(basePath() + '/state').then(function(res) { return res.data; });
+  }
+
+  function saveState(state) {
+    return axios.post(basePath() + '/state', { state: state }).then(function(res) { return res.data; });
+  }
+
+  return {
+    getWorkspace: getWorkspace,
+    getTree: getTree,
+    getFile: getFile,
+    saveFile: saveFile,
+    createFile: createFile,
+    createDir: createDir,
+    renamePath: renamePath,
+    deletePath: deletePath,
+    lintFile: lintFile,
+    formatFile: formatFile,
+    ping: ping,
+    getState: getState,
+    saveState: saveState
+  };
+})();

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

@@ -0,0 +1,104 @@
+var GitService = (function () {
+  function basePath() {
+    return (window.MBEDITOR_BASE_PATH || '/mbeditor').replace(/\/$/, '');
+  }
+
+  function applyGitInfo(data) {
+    var files = data.workingTree || data.files || [];
+    EditorStore.setState({
+      gitFiles: files,
+      gitBranch: data.branch || "",
+      gitInfo: data,
+      gitInfoError: null
+    });
+  }
+
+  function fetchInfo() {
+    return axios.get(basePath() + '/git_info')
+      .then(function(res) {
+        if (res.data && res.data.ok) {
+          applyGitInfo(res.data);
+        } else {
+          EditorStore.setState({ gitInfoError: (res.data && res.data.error) || 'Failed to load git info' });
+        }
+        return res.data;
+      })
+      .catch(function(err) {
+        EditorStore.setState({ gitInfoError: err.message || 'Failed to load git info' });
+        EditorStore.setStatus("Failed to fetch git info: " + err.message, "error");
+      });
+  }
+
+  function fetchStatus() {
+    return fetchInfo().then(function(data) {
+      if (data && data.ok) return data;
+
+      return axios.get(basePath() + '/git_status')
+      .then(function(res) {
+        if (res.data.ok) {
+          EditorStore.setState({
+            gitFiles: res.data.files,
+            gitBranch: res.data.branch || "",
+            gitInfo: {
+              ok: true,
+              branch: res.data.branch || "",
+              workingTree: res.data.files || [],
+              unpushedFiles: [],
+              unpushedCommits: [],
+              branchCommits: []
+            },
+            gitInfoError: null
+          });
+        }
+        return res.data;
+      })
+      .catch(function(err) {
+        EditorStore.setStatus("Failed to fetch git status: " + err.message, "error");
+      });
+    });
+  }
+
+  function fetchDiff(path, baseSha, headSha) {
+    var query = '?file=' + encodeURIComponent(path);
+    if (baseSha) query += '&base=' + encodeURIComponent(baseSha);
+    if (headSha) query += '&head=' + encodeURIComponent(headSha);
+    
+    return axios.get(basePath() + '/git/diff' + query).then(function(res) {
+      return res.data;
+    });
+  }
+
+  function fetchBlame(path) {
+    return axios.get(basePath() + '/git/blame?file=' + encodeURIComponent(path)).then(function(res) {
+      return res.data;
+    });
+  }
+
+  function fetchFileHistory(path) {
+    return axios.get(basePath() + '/git/file_history?file=' + encodeURIComponent(path)).then(function(res) {
+      return res.data;
+    });
+  }
+
+  function fetchCommitGraph() {
+    return axios.get(basePath() + '/git/commit_graph').then(function(res) {
+      return res.data;
+    });
+  }
+
+  function fetchCommitDetail(sha) {
+    return axios.get(basePath() + '/git/commit_detail?sha=' + encodeURIComponent(sha)).then(function(res) {
+      return res.data;
+    });
+  }
+
+  return {
+    fetchStatus: fetchStatus,
+    fetchInfo: fetchInfo,
+    fetchDiff: fetchDiff,
+    fetchBlame: fetchBlame,
+    fetchFileHistory: fetchFileHistory,
+    fetchCommitGraph: fetchCommitGraph,
+    fetchCommitDetail: fetchCommitDetail
+  };
+})();

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

@@ -0,0 +1,53 @@
+var SearchService = (function () {
+  function basePath() {
+    return (window.MBEDITOR_BASE_PATH || '/mbeditor').replace(/\/$/, '');
+  }
+
+  var _miniSearch = new MiniSearch({
+    fields: ['path', 'name'], // indexed fields
+    storeFields: ['path', 'name'] // returned fields
+  });
+
+  function buildIndex(treeData) {
+    var docs = [];
+    var idCounter = 1;
+
+    function traverse(nodes) {
+      nodes.forEach(function(n) {
+        if (n.type === 'file') {
+          docs.push({ id: idCounter++, path: n.path, name: n.name });
+        } else if (n.children) {
+          traverse(n.children);
+        }
+      });
+    }
+
+    traverse(treeData);
+    _miniSearch.removeAll();
+    _miniSearch.addAll(docs);
+  }
+
+  function searchFiles(query) {
+    if (!query) return [];
+    return _miniSearch.search(query, { prefix: true, fuzzy: 0.2 });
+  }
+
+  function projectSearch(query) {
+    if (!query) return Promise.resolve([]);
+    return axios.get(basePath() + '/search', { params: { q: query } })
+      .then(function(res) {
+        EditorStore.setState({ searchResults: res.data });
+        return res.data;
+      })
+      .catch(function(err) {
+        EditorStore.setStatus("Search failed: " + err.message, "error");
+        return [];
+      });
+  }
+
+  return {
+    buildIndex: buildIndex,
+    searchFiles: searchFiles,
+    projectSearch: projectSearch
+  };
+})();