mbeditor 0.12.7 → 0.12.9

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

@@ -96,6 +96,34 @@ var ProblemsPanel = (function () {
     var _filter = React.useState('');
     var filter = _filter[0], setFilter = _filter[1];
 
+    // Which severities the list shows. Multi-select rather than a single
+    // dropdown: "errors and warnings, but not the convention noise" is the
+    // view people actually want, and a one-of-three picker can't express it.
+    // Persisted, because a filter you have to re-set every time you open the
+    // panel is one you stop using.
+    var _severities = React.useState(function () {
+      try {
+        var saved = JSON.parse(window.localStorage.getItem('mbeditorProblemsSeverities'));
+        if (saved && typeof saved === 'object') {
+          return { error: saved.error !== false, warning: saved.warning !== false, info: saved.info !== false };
+        }
+      } catch (e) { /* unparseable or storage blocked — fall through to the default */ }
+      return { error: true, warning: true, info: true };
+    });
+    var severities = _severities[0], setSeverities = _severities[1];
+
+    var toggleSeverity = function (kind) {
+      setSeverities(function (prev) {
+        var next = Object.assign({}, prev);
+        next[kind] = !next[kind];
+        // Turning the last one off would show an empty panel with no hint as
+        // to why, so the final active severity stays latched on.
+        if (!next.error && !next.warning && !next.info) return prev;
+        try { window.localStorage.setItem('mbeditorProblemsSeverities', JSON.stringify(next)); } catch (e) {}
+        return next;
+      });
+    };
+
     // Exceptions raised by the host app. Unlike markers these are not per-model
     // — a runtime failure isn't a property of a file you happen to have open —
     // so they live in their own section above the marker list.
@@ -165,11 +193,14 @@ var ProblemsPanel = (function () {
     }, []);
 
     var needle = filter.trim().toLowerCase();
-    var shown = needle
+    var allSeverities = severities.error && severities.warning && severities.info;
+    var shown = (needle || !allSeverities)
       ? problems.byFile.map(function (entry) {
           return {
             path: entry.path,
             markers: entry.markers.filter(function (item) {
+              if (!severities[SEVERITY_KIND[item.marker.severity] || 'info']) return false;
+              if (!needle) return true;
               return (item.marker.message + ' ' + item.code + ' ' + entry.path)
                 .toLowerCase().indexOf(needle) !== -1;
             })
@@ -192,13 +223,31 @@ var ProblemsPanel = (function () {
         { className: 'ide-problems-header' },
         React.createElement('i', { className: 'fas fa-bug' }),
         React.createElement('span', { className: 'ide-problems-title' }, 'Problems'),
+        // No prose summary: the severity chips below carry the same three
+        // counts, and restating them was the longest thing in the header.
         React.createElement(
-          'span',
-          { className: 'ide-problems-summary' },
-          problems.errors.length + ' error' + (problems.errors.length === 1 ? '' : 's') +
-            ', ' + problems.warnings.length + ' warning' + (problems.warnings.length === 1 ? '' : 's') +
-            ', ' + problems.infos.length + ' info' +
-            ' in open files'
+          'div',
+          { className: 'ide-problems-severity-filter' },
+          [
+            { kind: 'error', count: problems.errors.length },
+            { kind: 'warning', count: problems.warnings.length },
+            { kind: 'info', count: problems.infos.length }
+          ].map(function (s) {
+            var on = severities[s.kind];
+            return React.createElement(
+              'button',
+              {
+                key: s.kind,
+                type: 'button',
+                className: 'ide-problems-sev-chip ide-problems-sev-' + s.kind + (on ? ' is-on' : ''),
+                title: (on ? 'Hide' : 'Show') + ' ' + SEVERITY_LABEL[s.kind].toLowerCase() + 's',
+                'aria-pressed': on ? 'true' : 'false',
+                onClick: function () { toggleSeverity(s.kind); }
+              },
+              React.createElement('i', { className: 'fas ' + SEVERITY_ICON[s.kind] }),
+              React.createElement('span', null, s.count)
+            );
+          })
         ),
         React.createElement('input', {
           className: 'ide-problems-filter',

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

@@ -816,48 +816,37 @@
       return handled;
     });
 
-    // ── Format on paste ──────────────────────────────────────────────────────
+    // ── Indent on paste ──────────────────────────────────────────────────────
     //
-    // Driven from onDidPaste rather than Monaco's own `formatOnPaste` option.
-    // That option has been on by default all along and never did anything here:
-    // its contribution is present and the event fires, but it declines to run
-    // the formatter, so pasted code kept whatever indentation it was copied
-    // with. onDidPaste is public API, fires reliably, and hands over the exact
-    // pasted range — which is also what makes the two cases distinguishable:
+    // Pasted code is re-indented to match where it landed, and nothing else is
+    // touched. This deliberately does NOT run the formatter: routing paste
+    // through Prettier reprinted the whole enclosing statement (and, for a
+    // paste that filled the document, every line of it), so pasting a snippet
+    // rewrote code the user never touched and buried the paste in an unrelated
+    // diff.
     //
-    //   * paste that fills the whole document (a blank file, or replacing all
-    //     of it) is formatted as a document
-    //   * a paste in the middle is formatted as a range, so Prettier reprints
-    //     the smallest enclosing statement and the rest of the file is left
-    //     byte-identical
-    //
-    // Either way the result comes back at the editor's own tab/space setting,
-    // which is the point: code copied in from a spaces project lands as tabs.
+    // `editor.action.reindentselectedlines` is Monaco's own re-indenter — it
+    // uses the language's indentation rules, the same ones that already run
+    // when you press Enter, and it only ever changes leading whitespace.
+    // Monaco's `formatOnPaste` option stays off (EditorPanel passes false):
+    // its contribution declines to run here anyway.
     var pasteDisposable = editor.onDidPaste(function (e) {
       var prefs = (typeof EditorStore !== 'undefined' && EditorStore.getState().editorPrefs) || {};
-      if (prefs.formatOnPaste === false) return;
+      if (prefs.indentOnPaste === false) return;
 
       var pasteModel = editor.getModel();
       if (!pasteModel || pasteModel.isDisposed()) return;
 
-      var full = pasteModel.getFullModelRange();
-      var wholeDocument = e.range.startLineNumber <= full.startLineNumber &&
-                          e.range.endLineNumber >= full.endLineNumber;
-
-      var action = editor.getAction(wholeDocument ? 'editor.action.formatDocument' : 'editor.action.formatSelection');
+      var action = editor.getAction('editor.action.reindentselectedlines');
       if (!action) return;
 
-      if (wholeDocument) {
-        action.run()["catch"](function () { /* no formatter, or unparseable — leave it */ });
-        return;
-      }
-
-      // formatSelection works on the selection, so point it at the pasted range
-      // and put the cursor back where the paste left it.
+      // The action works on the selection, so point it at the pasted range and
+      // put the cursor back where the paste left it.
       var restore = editor.getSelections();
       editor.setSelection(e.range);
       action.run()["catch"](function () {})["finally"](function () {
-        if (restore && restore.length && !editor.getModel().isDisposed()) editor.setSelections(restore);
+        var m = editor.getModel();
+        if (restore && restore.length && m && !m.isDisposed()) editor.setSelections(restore);
       });
     });
 
@@ -1188,6 +1177,20 @@
       });
     }
 
+    // Monaco ships no indentationRules for JavaScript, which makes
+    // `editor.action.reindentselectedlines` — what indent-on-paste runs — a
+    // silent no-op in JS/JSX files. These are VS Code's own JS rules.
+    // setLanguageConfiguration merges, so this adds indentation without
+    // disturbing the brackets/comments config the bundle already registers.
+    ['javascript', 'typescript'].forEach(function (langId) {
+      monaco.languages.setLanguageConfiguration(langId, {
+        indentationRules: {
+          increaseIndentPattern: /^((?!\/\/).)*(\{[^}"'`]*|\([^)"'`]*|\[[^\]"'`]*)$/,
+          decreaseIndentPattern: /^((?!.*?\/\*).*\*\/)?\s*[})\]].*$/
+        }
+      });
+    });
+
     monaco.languages.setLanguageConfiguration('ruby', {
       comments: { lineComment: '#', blockComment: ['=begin', '=end'] },
       brackets: [['(', ')'], ['{', '}'], ['[', ']']],
@@ -1220,13 +1223,24 @@
           // Single-line comments
           [/#.*$/, 'comment'],
 
-          // Heredoc start — capture the terminator word; route to specialized state by delimiter name
+          // Heredoc start — capture the terminator word. A tag naming a
+          // language hands the body to Monaco's own tokenizer for that
+          // language via nextEmbedded, so <<~JS is highlighted as real
+          // JavaScript, not an imitation.
           [/<<[-~]?(['"]?)(\w+)\1/, {
             cases: {
-              '$2~(?i:SQL)':        { token: 'string.heredoc.delimiter', next: '@heredocSQL.$2' },
-              '$2~(?i:HTML?)':      { token: 'string.heredoc.delimiter', next: '@heredocHTML.$2' },
-              '$2~(?i:JS|JAVASCRIPT)': { token: 'string.heredoc.delimiter', next: '@heredocJS.$2' },
-              '@default':           { token: 'string.heredoc.delimiter', next: '@heredoc.$2' }
+              '$2~(?i:SQL)':            { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'sql' },
+              '$2~(?i:HTML?|ERB)':      { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'html' },
+              '$2~(?i:JS|JAVASCRIPT)':  { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'javascript' },
+              '$2~(?i:CSS)':            { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'css' },
+              '$2~(?i:SCSS)':           { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'scss' },
+              '$2~(?i:JSON)':           { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'json' },
+              '$2~(?i:XML|SVG)':        { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'xml' },
+              '$2~(?i:YAML|YML)':       { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'yaml' },
+              '$2~(?i:SH|BASH|SHELL)':  { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'shell' },
+              '$2~(?i:GRAPHQL|GQL)':    { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'graphql' },
+              '$2~(?i:RUBY)':           { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'ruby' },
+              '@default':               { token: 'string.heredoc.delimiter', next: '@heredoc.$2' }
             }
           }],
 
@@ -1360,9 +1374,12 @@
           [/\s+/, '']
         ],
 
-        // Generic heredoc — all content is string.heredoc
+        // Generic heredoc — all content is string.heredoc. The terminator may
+        // be indented: that is the whole point of <<~ (and <<-), and the old
+        // /^(\w+)$/ rule missed it, leaving the rest of the file painted as a
+        // string.
         heredoc: [
-          [/^(\w+)\s*$/, {
+          [/^\s*(\w+)\s*$/, {
             cases: {
               '$1==$S2': { token: 'string.heredoc.delimiter', next: '@pop' },
               '@default': 'string.heredoc'
@@ -1371,67 +1388,23 @@
           [/.+/, 'string.heredoc']
         ],
 
-        // SQL heredoc — keyword/string/number/comment tokenization
-        heredocSQL: [
-          [/^(\w+)\s*$/, {
-            cases: {
-              '$1==$S2': { token: 'string.heredoc.delimiter', next: '@pop' },
-              '@default': { token: '@rematch', next: '@heredocSQLLine' }
-            }
-          }],
-          [/.+/, { token: '@rematch', next: '@heredocSQLLine' }]
-        ],
-
-        heredocSQLLine: [
-          [/--.*$/, { token: 'comment.sql', next: '@pop' }],
-          [/'[^']*'/, 'string.sql'],
-          [/\b\d+(?:\.\d+)?\b/, 'number.sql'],
-          [/\b(?:SELECT|FROM|WHERE|INSERT|UPDATE|DELETE|JOIN|LEFT|RIGHT|INNER|OUTER|ON|GROUP|ORDER|BY|HAVING|LIMIT|OFFSET|CREATE|DROP|ALTER|TABLE|INDEX|INTO|VALUES|SET|AS|AND|OR|NOT|NULL|IS|IN|LIKE|BETWEEN|DISTINCT|COUNT|SUM|AVG|MIN|MAX)\b/i, 'keyword.sql'],
-          [/[^\s\w'"-]+/, 'string.heredoc'],
-          [/\w+/, 'string.heredoc'],
-          [/$/, { token: '', next: '@pop' }]
-        ],
-
-        // HTML heredoc — tag/attribute tokenization
-        heredocHTML: [
-          [/^(\w+)\s*$/, {
+        // Language-tagged heredoc body. While embedded, Monarch only consults
+        // this state to find the leaving rule; everything before it is
+        // tokenized by the embedded language. @rematch + switchTo hands the
+        // terminator line to @heredocEnd so it gets the delimiter colour
+        // rather than being re-lexed as Ruby.
+        heredocEmbedded: [
+          [/^\s*(\w+)\s*$/, {
             cases: {
-              '$1==$S2': { token: 'string.heredoc.delimiter', next: '@pop' },
-              '@default': { token: '@rematch', next: '@heredocHTMLLine' }
+              '$1==$S2': { token: '@rematch', switchTo: '@heredocEnd.$S2', nextEmbedded: '@pop' },
+              '@default': { token: '' }
             }
           }],
-          [/.+/, { token: '@rematch', next: '@heredocHTMLLine' }]
+          [/.*/, { token: '' }]
         ],
 
-        heredocHTMLLine: [
-          [/<\/?[a-zA-Z][a-zA-Z0-9]*/, 'tag.html'],
-          [/[a-zA-Z_:][a-zA-Z0-9_:\-\.]*(?=\s*=)/, 'attribute.name.html'],
-          [/\/?>/, 'tag.html'],
-          [/[^<>]+/, 'string.heredoc'],
-          [/$/, { token: '', next: '@pop' }]
-        ],
-
-        // JS heredoc — keyword/string/number/comment tokenization
-        heredocJS: [
-          [/^(\w+)\s*$/, {
-            cases: {
-              '$1==$S2': { token: 'string.heredoc.delimiter', next: '@pop' },
-              '@default': { token: '@rematch', next: '@heredocJSLine' }
-            }
-          }],
-          [/.+/, { token: '@rematch', next: '@heredocJSLine' }]
-        ],
-
-        heredocJSLine: [
-          [/\/\/.*$/, { token: 'comment', next: '@pop' }],
-          [/"(?:[^"\\]|\\.)*"/, 'string'],
-          [/'(?:[^'\\]|\\.)*'/, 'string'],
-          [/`(?:[^`\\]|\\.)*`/, 'string'],
-          [/\b\d+(?:\.\d+)?\b/, 'number'],
-          [/\b(?:var|let|const|function|return|if|else|for|while|do|switch|case|break|continue|new|delete|typeof|instanceof|in|of|class|extends|import|export|default|null|undefined|true|false|this|super|async|await|try|catch|finally|throw|void|yield)\b/, 'keyword'],
-          [/[^\s\w'"`;\/]+/, 'string.heredoc'],
-          [/\w+/, 'string.heredoc'],
-          [/$/, { token: '', next: '@pop' }]
+        heredocEnd: [
+          [/^\s*\w+\s*$/, { token: 'string.heredoc.delimiter', next: '@pop' }]
         ],
 
         // %w[] %W[] word arrays
@@ -1646,6 +1619,15 @@
     // their "open this" through here.
     monaco.editor.registerEditorOpener({
       openCodeEditor: function (_source, resource, selectionOrPosition) {
+        // Only file:// resources name a workspace file. Models are created
+        // without an explicit URI, so Monaco gives each one an
+        // `inmemory://model/N` identity — and the TS worker returns exactly
+        // that when a JS definition resolves inside the file you are already
+        // in. Stripping it to a path opened a phantom tab called "57".
+        // Handing those back to Monaco lets it reveal the position in the
+        // current editor, which is what the gesture meant.
+        if (String(resource.scheme || '') !== 'file') return false;
+
         var path = String(resource.path || '').replace(/^\/+/, '');
         if (!path || typeof TabManager === 'undefined' || !TabManager.openTab) return false;
 

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

@@ -650,8 +650,42 @@ var TabManager = (function () {
     _updateTab(paneId, path, { gotoLine: null, gotoCol: null });
   }
 
+  // VS Code-style scratch buffer: a tab with no file behind it. Nothing is
+  // written anywhere until the user saves, at which point the save flow asks
+  // for a real path and converts the tab.
+  function openUntitledTab(forcePaneId) {
+    var state = EditorStore.getState();
+    var paneId = forcePaneId || state.focusedPaneId;
+    var pane = state.panes.find(function (p) { return p.id === paneId; });
+    if (!pane) return;
+
+    var used = {};
+    state.panes.forEach(function (p) {
+      p.tabs.forEach(function (t) { if (t.isUntitled) used[t.name] = true; });
+    });
+    var n = 1;
+    while (used['Untitled-' + n]) n++;
+    var name = 'Untitled-' + n;
+    var path = 'untitled://' + name;
+
+    var newTab = {
+      id: path, path: path, name: name,
+      dirty: false, content: '', cleanContent: '',
+      viewState: null, isUntitled: true, loading: false,
+      externalContentVersion: 1
+    };
+    var newPanes = state.panes.map(function (p) {
+      if (p.id === paneId) {
+        return Object.assign({}, p, { tabs: p.tabs.concat(newTab), activeTabId: path });
+      }
+      return p;
+    });
+    EditorStore.setState({ panes: newPanes, focusedPaneId: paneId, activeTabId: path });
+  }
+
   return {
     openTab: openTab,
+    openUntitledTab: openUntitledTab,
     getRecentFiles: getRecentFiles,
     openDiffTab: openDiffTab,
     openCombinedDiffTab: openCombinedDiffTab,

data/app/assets/stylesheets/mbeditor/editor.css

@@ -2998,9 +2998,41 @@ button:not(.pico-btn) { margin-bottom: 0; }
   color: var(--ide-fg-muted, #ccc);
 }
 .ide-problems-title { font-weight: 600; }
-.ide-problems-summary { color: var(--ide-text-muted, #858585); font-size: 11px; }
-.ide-problems-filter {
+/* Severity toggles. Pushed to the right of the summary; the text filter that
+   follows keeps its own left margin off `auto` so the two sit together. */
+.ide-problems-severity-filter {
   margin-left: auto;
+  display: flex;
+  gap: 4px;
+}
+.ide-problems-sev-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 1px 6px;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  /* Off is legible but clearly recessive — a disabled-looking chip reads as
+     "broken" rather than "toggled off". */
+  color: var(--ide-text-muted, #858585);
+  opacity: 0.55;
+}
+.ide-problems-sev-chip:hover { opacity: 0.85; }
+.ide-problems-sev-chip.is-on {
+  opacity: 1;
+  border-color: var(--ide-border, #333);
+  background: var(--ide-input-bg, #2d2d2d);
+}
+.ide-problems-sev-chip.is-on.ide-problems-sev-error { color: var(--ide-error, #f14c4c); }
+.ide-problems-sev-chip.is-on.ide-problems-sev-warning { color: var(--ide-warning, #cca700); }
+.ide-problems-sev-chip.is-on.ide-problems-sev-info { color: var(--ide-info, #3794ff); }
+
+.ide-problems-filter {
+  margin-left: 8px;
   background: var(--ide-input-bg, #2d2d2d);
   color: var(--ide-fg, #eee);
   border: 1px solid var(--ide-border, #333);

data/app/controllers/mbeditor/editors_controller.rb

@@ -931,7 +931,20 @@ module Mbeditor
             startLine: line, startCol: col, endLine: line, endCol: col + 1
           }]
         else
-          []
+          # Only when the file parses: the scope lint would re-hit the same
+          # parse error and report nothing useful on top of the marker above.
+          JsSyntaxCheckService.scope_lint(workspace_root, code).map do |w|
+            line = w["line"] || 1
+            col  = (w["column"] || 0) + 1
+            {
+              severity: "warning",
+              copName: "BabelScope",
+              correctable: false,
+              message: "[babel] #{w['message']}",
+              startLine: line, startCol: col,
+              endLine: line, endCol: col + [w["name"].to_s.length, 1].max
+            }
+          end
         end
         return render json: { markers: markers }
       end