mbeditor 0.13.0 → 0.14.0

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

@@ -239,12 +239,43 @@
   // Same-URI addExtraLib replaces content in place; that is how both layers
   // refresh.
   var PROGRAM_VISIBLE_KINDS = { 'var': 1, 'let': 1, 'const': 1, 'function': 1, 'class': 1 };
-  var programPaths = {}; // workspace-relative path -> true, for the filter above
+  // workspace-relative path -> { content, lib }, where lib is the addExtraLib
+  // disposable or null while the file is open. Presence is what the filter
+  // above reads: an open file is still in the program, supplied by its model.
+  var programPaths = {};
 
   function programUri(path) {
     return 'file:///' + String(path).replace(/^\/+/, '');
   }
 
+  // An open file reaches the program twice — as its live Monaco model and as
+  // this extraLib — and TypeScript reads that as two declarations of everything
+  // at its top level, so a lone `const x` in an open .jsx reports TS2451
+  // against itself. The model is the edited copy, so it wins and the extraLib
+  // stands down until the model is disposed.
+  function syncProgramLib(monaco, path) {
+    var entry = programPaths[path];
+    if (!entry) return;
+    var open = monaco.editor.getModels().some(function (m) {
+      return m._mbeditorPath === path && !m.isDisposed();
+    });
+    if (open && entry.lib) {
+      entry.lib.dispose();
+      entry.lib = null;
+    } else if (!open && !entry.lib) {
+      entry.lib = monaco.languages.typescript.javascriptDefaults
+        .addExtraLib(entry.content, programUri(path));
+    }
+  }
+
+  function setProgramFile(monaco, path, content) {
+    var entry = programPaths[path];
+    if (!entry) entry = programPaths[path] = { content: content, lib: null };
+    entry.content = content;
+    if (entry.lib) { entry.lib.dispose(); entry.lib = null; }
+    syncProgramLib(monaco, path);
+  }
+
   function loadWorkspaceProgram(monaco) {
     if (typeof FileService === 'undefined') return;
     var mts = monaco && monaco.languages && monaco.languages.typescript;
@@ -255,8 +286,7 @@
           if (!data || !data.ok || !data.files) return;
           data.files.forEach(function (f) {
             if (!f || typeof f.content !== 'string' || !f.path) return;
-            programPaths[f.path] = true;
-            mts.javascriptDefaults.addExtraLib(f.content, programUri(f.path));
+            setProgramFile(monaco, f.path, f.content);
           });
           if (data.skipped && data.skipped.length && window.console) {
             console.info('[mbeditor] ' + data.fileCount + ' source files (' +
@@ -322,8 +352,7 @@
     })).then(function (responses) {
       responses.forEach(function (data) {
         if (!data || !data.ok || !data.file) return;
-        programPaths[data.file.path] = true;
-        mts.javascriptDefaults.addExtraLib(data.file.content, programUri(data.file.path));
+        setProgramFile(monaco, data.file.path, data.file.content);
       });
     });
   }
@@ -413,6 +442,22 @@
   // 6s default: the server's own budget for them is 10s.
   var LSP_SLOW_METHODS = { diagnostics: 15000, formatting: 15000 };
 
+  // ruby-lsp's wire names are snake_case, the audit legend's are camelCase, and
+  // these two differ outright. code() answers 0 ("other") for anything the
+  // legend does not list, so a method added later still records.
+  function auditLspName(lspMethod) {
+    if (lspMethod === 'formatting') return 'format';
+    if (lspMethod === 'prepare_rename') return 'rename';
+    return lspMethod.replace(/_(\w)/g, function (m, c) { return c.toUpperCase(); });
+  }
+
+  function recLsp(lspMethod, startedAt, ok) {
+    var audit = window.MbeditorAudit;
+    if (!audit) return;
+    audit.rec(audit.EV.LSP, audit.code('lspMethod', auditLspName(lspMethod)),
+              Date.now() - startedAt, ok ? 1 : 0);
+  }
+
   // `token` is Monaco's CancellationToken, when the calling provider has one.
   // Every provider fires on a gesture the user can abandon — moving the cursor
   // off a word, typing another character — and Monaco cancels the outstanding
@@ -432,6 +477,7 @@
       if (model.getValueLength() === 0) return Promise.resolve(null);
       if (token && token.isCancellationRequested) return Promise.resolve(null);
 
+      var startedAt = Date.now();
       var config = LSP_SLOW_METHODS[lspMethod] ? { timeout: LSP_SLOW_METHODS[lspMethod] } : null;
       var controller = (token && typeof AbortController !== 'undefined') ? new AbortController() : null;
       var cancelSub = null;
@@ -443,6 +489,7 @@
       return FileService.rubyLspRequest(lspMethod, model._mbeditorPath, model.getValue(),
                                         position.lineNumber, position.column, config, extraBody)
         .then(function (data) {
+          recLsp(lspMethod, startedAt, (!data || data.fallback || data.error) ? 0 : 1);
           if (!data || data.fallback || data.error) {
             // A 200 can still carry lspState: 'failed' — the server answered,
             // the language server did not.
@@ -459,6 +506,9 @@
           return null;
         })
         .catch(function (err) {
+          // A cancelled request is Monaco changing its mind, not a failure —
+          // documentHighlight alone would otherwise log one per cursor move.
+          if (!(token && token.isCancellationRequested)) recLsp(lspMethod, startedAt, 0);
           noteLspFailure(err);
           return null;
         })
@@ -498,6 +548,37 @@
     }
   }
 
+  // True when a hover provider should actually run here: real buffer text,
+  // not a `#` comment. Route-hint decorations (EditorPanel.js) render their
+  // label via a zero-width decoration's `after.content` — text that is never
+  // part of the model — anchored at a column past the real end of the line.
+  // Monaco still resolves a mouse position over that rendered text, but the
+  // column it reports exceeds getLineMaxColumn, which a position over real
+  // content can never do. getWordAtPosition doesn't reject that
+  // out-of-range column — it just snaps to the nearest real word — so
+  // without this check hovering the decoration silently hovers whatever word
+  // precedes it. Comment membership comes from Monaco's own tokenizer
+  // (getLineTokens/StandardTokenType) rather than a `#` regex, so a `#`
+  // inside a string isn't misread as a comment opener. Exposed so both
+  // cases can be asserted directly in system tests.
+  function isRealHoverPosition(model, position) {
+    if (!model || !position) return false;
+    if (position.column > model.getLineMaxColumn(position.lineNumber)) return false;
+    // Standard token types: Other 0, Comment 1, String 2, RegEx 3. The enum
+    // object is not exported by this Monaco build, and getLineTokens lives on
+    // model.tokenization, not the model — both misses were swallowed by the
+    // catch below and made the guard a no-op.
+    var COMMENT = 1;
+    try {
+      var tk = model.tokenization || model;
+      if (tk.forceTokenization) tk.forceTokenization(position.lineNumber);
+      var lineTokens = tk.getLineTokens(position.lineNumber);
+      var idx = lineTokens.findTokenIndexAtOffset(position.column - 1);
+      if (idx >= 0 && lineTokens.getStandardTokenType(idx) === COMMENT) return false;
+    } catch (e) { /* tokenizer not ready — treat as real text */ }
+    return true;
+  }
+
   // Rails view helpers are defined inside the framework, not the workspace, so
   // looking them up from ERB only ever produces empty round-trips.
   var RAILS_VIEW_HELPERS = {
@@ -756,14 +837,16 @@
     var lineNumber = change.range.startLineNumber;
     var columnBeforeInsert = change.range.startColumn;
     var lineContent = model.getLineContent(lineNumber);
-    var textBefore = lineContent.substring(0, columnBeforeInsert - 1);
+    var textBefore = textBackTo(model, lineNumber, columnBeforeInsert - 1);
 
     if (/\/$/.test(textBefore)) return false;
 
-    var tagMatch = textBefore.match(/<([a-zA-Z][a-zA-Z0-9:\-_]*)(?:\s+[^>]*?)?$/);
-    if (!tagMatch) return false;
+    var tags = scanTags(textBefore);
+    var opener = tags[tags.length - 1];
+    if (!opener || opener.closing || opener.closed || opener.depth !== 0) return false;
+    if (opener.end !== textBefore.length) return false;
 
-    var tagName = tagMatch[1];
+    var tagName = opener.name;
     if (VOID_HTML_ELEMENTS[tagName.toLowerCase()]) return false;
 
     var closingTag = '</' + tagName + '>';
@@ -793,6 +876,164 @@
     return true;
   }
 
+  var TAG_SCAN_LINES = 200;
+  var TAG_SCAN_LINES_AFTER = 500;
+
+  // Tags in `text`, brace-aware so JSX attribute expressions like
+  // onClick={() => x > y} do not end a tag early.
+  function scanTags(text) {
+    var tags = [];
+    var re = /<(\/?)([A-Za-z][\w:.\-]*)/g;
+    var match;
+    while ((match = re.exec(text))) {
+      var i = re.lastIndex;
+      var depth = 0;
+      var quote = null;
+      var closed = false;
+      while (i < text.length) {
+        var c = text.charAt(i);
+        if (quote) {
+          if (c === '\\') { i += 2; continue; }
+          if (c === quote) quote = null;
+        } else if (c === '"' || c === "'" || c === '`') {
+          quote = c;
+        } else if (c === '{') {
+          depth++;
+        } else if (c === '}') {
+          if (depth > 0) depth--;
+        } else if (depth === 0) {
+          if (c === '>') { closed = true; break; }
+          if (c === '<') break;
+        }
+        i++;
+      }
+      tags.push({
+        name: match[2],
+        closing: !!match[1],
+        closed: closed,
+        selfClosing: closed && text.charAt(i - 1) === '/',
+        start: match.index,
+        end: i,
+        depth: depth
+      });
+      re.lastIndex = closed ? i + 1 : i;
+    }
+    return tags;
+  }
+
+  // Text from at most TAG_SCAN_LINES lines back up to `endIndex` on `lineNumber`.
+  function textBackTo(model, lineNumber, endIndex) {
+    var startLine = Math.max(1, lineNumber - TAG_SCAN_LINES);
+    return model.getValueInRange(new window.monaco.Range(startLine, 1, lineNumber, endIndex + 1));
+  }
+
+  // Nearest still-open tag before `endIndex` on `lineNumber`, scanning back at
+  // most TAG_SCAN_LINES lines. Void and self-closing tags never go on the stack.
+  function nearestUnclosedTag(model, lineNumber, endIndex) {
+    var stack = [];
+    scanTags(textBackTo(model, lineNumber, endIndex)).forEach(function (tag) {
+      if (tag.closing) {
+        for (var i = stack.length - 1; i >= 0; i--) {
+          if (stack[i] === tag.name) { stack.length = i; break; }
+        }
+      } else if (tag.closed && !tag.selfClosing && !VOID_HTML_ELEMENTS[tag.name.toLowerCase()]) {
+        stack.push(tag.name);
+      }
+    });
+    return stack.length ? stack[stack.length - 1] : null;
+  }
+
+  function tagNameRange(model, base, tag) {
+    var offset = base + tag.start + (tag.closing ? 2 : 1);
+    var start = model.getPositionAt(offset);
+    var end = model.getPositionAt(offset + tag.name.length);
+    return new window.monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column);
+  }
+
+  function linkedEditingRanges(model, position) {
+    if (!model || !position) return null;
+    if (model.getLanguageId && model.getLanguageId() === 'erb' && isInsideErbTag(model, position)) return null;
+
+    var startLine = Math.max(1, position.lineNumber - TAG_SCAN_LINES);
+    var endLine = Math.min(model.getLineCount(), position.lineNumber + TAG_SCAN_LINES_AFTER);
+    var base = model.getOffsetAt({ lineNumber: startLine, column: 1 });
+    var text = model.getValueInRange(new window.monaco.Range(startLine, 1, endLine, model.getLineMaxColumn(endLine)));
+    var tags = scanTags(text);
+    var cursor = model.getOffsetAt(position) - base;
+
+    var index = -1;
+    for (var i = 0; i < tags.length; i++) {
+      var nameStart = tags[i].start + (tags[i].closing ? 2 : 1);
+      if (cursor >= nameStart && cursor <= nameStart + tags[i].name.length) { index = i; break; }
+    }
+    if (index < 0) return null;
+
+    var tag = tags[index];
+    if (VOID_HTML_ELEMENTS[tag.name.toLowerCase()]) return null;
+
+    var match = null;
+    var depth = 0;
+    var j;
+    if (tag.closing) {
+      for (j = index - 1; j >= 0; j--) {
+        if (tags[j].name !== tag.name) continue;
+        if (tags[j].closing) depth++;
+        else if (tags[j].closed && !tags[j].selfClosing) {
+          if (depth === 0) { match = tags[j]; break; }
+          depth--;
+        }
+      }
+    } else {
+      if (!tag.closed || tag.selfClosing) return null;
+      for (j = index + 1; j < tags.length; j++) {
+        if (tags[j].name !== tag.name) continue;
+        if (tags[j].closing) {
+          if (depth === 0) { match = tags[j]; break; }
+          depth--;
+        } else if (tags[j].closed && !tags[j].selfClosing) depth++;
+      }
+    }
+    if (!match) return null;
+
+    return {
+      ranges: [
+        tagNameRange(model, base, tag.closing ? match : tag),
+        tagNameRange(model, base, tag.closing ? tag : match)
+      ],
+      wordPattern: /[\w:.\-]+/
+    };
+  }
+
+  function handleClosingTagAutoClose(editor, model, change) {
+    if (change.rangeLength !== 0 || change.text !== '/') return false;
+
+    var lineNumber = change.range.startLineNumber;
+    var slashColumn = change.range.startColumn;
+    var lineContent = model.getLineContent(lineNumber);
+    if (lineContent.charAt(slashColumn - 2) !== '<') return false;
+
+    var tagName = nearestUnclosedTag(model, lineNumber, slashColumn - 2);
+    if (!tagName) return false;
+
+    var insertAt = slashColumn + 1;
+    window.setTimeout(function () {
+      var activeModel = editor.getModel();
+      if (!activeModel || activeModel !== model) return;
+
+      editor.executeEdits('html-auto-close-end', [{
+        range: new window.monaco.Range(lineNumber, insertAt, lineNumber, insertAt),
+        text: tagName + '>'
+      }]);
+
+      window.setTimeout(function () {
+        editor.setPosition({ lineNumber: lineNumber, column: insertAt + tagName.length + 1 });
+        editor.focus();
+      }, 0);
+    }, 0);
+
+    return true;
+  }
+
   function attachEditorFeatures(editor, language) {
     var model = editor && editor.getModel ? editor.getModel() : null;
     if (!model) {
@@ -955,12 +1196,15 @@
 
       suppressInternalEdit = true;
       try {
-        if (language === 'html') {
-          handled = handleMarkupAutoClose(editor, model, change) || handled;
-        }
+        var isMarkup = language === 'html' || language === 'javascript' || language === 'typescript' ||
+          (language === 'erb' && !isInsideErbTag(model, {
+            lineNumber: change.range.startLineNumber,
+            column: change.range.startColumn
+          }));
 
-        if (language === 'javascript' || language === 'typescript') {
+        if (isMarkup) {
           handled = handleMarkupAutoClose(editor, model, change) || handled;
+          handled = handleClosingTagAutoClose(editor, model, change) || handled;
         }
       } finally {
         suppressInternalEdit = false;
@@ -1002,12 +1246,11 @@
     };
   }
 
-  function registerGlobalExtensions(monaco) {
-    if (globalsRegistered) return;
-    if (!monaco || !monaco.languages) return;
-
-    globalsRegistered = true;
-
+  // One-time Monaco registration, grouped by provider affinity rather than by
+  // scroll position. Each group is independent — no group's providers read
+  // state another group sets up — so the split only adds seams; nothing here
+  // was a pass-through.
+  function registerJsProviders(monaco) {
     // JavaScript: enable semantic checking (off by default in Monaco) and JSX support.
     // checkJs catches undefined variables, noUnusedLocals catches dead assignments.
     if (monaco.languages.typescript && monaco.languages.typescript.javascriptDefaults) {
@@ -1176,6 +1419,22 @@
       // supply, loaded once now.
       loadWorkspaceProgram(monaco);
 
+      // Opening or closing a file moves it between the two halves of the
+      // program — see syncProgramLib. Deferred a tick because _mbeditorPath is
+      // stamped on the model after createModel returns, and because a disposing
+      // model is still live when the event fires.
+      var _syncPending = false;
+      var syncProgram = function () {
+        if (_syncPending) return;
+        _syncPending = true;
+        setTimeout(function () {
+          _syncPending = false;
+          Object.keys(programPaths).forEach(function (p) { syncProgramLib(monaco, p); });
+        }, 0);
+      };
+      monaco.editor.onDidCreateModel(syncProgram);
+      monaco.editor.onWillDisposeModel(syncProgram);
+
       // On a change: refresh just the touched files' program entries, and
       // re-run the (cheap, cached) globals scan. The whole tree is never
       // re-sent — see refreshProgramPaths.
@@ -1220,16 +1479,29 @@
       //     Downgraded to Warning below and auto-resolved against the workspace,
       //     since host-app globals are invisible to the language service.
       //   • 6133 "declared but never read" — a lint. Downgraded to Warning.
+      //   • 2451 "Cannot redeclare block-scoped variable" and 2300 "Duplicate
+      //     identifier", but only when the file collides with itself — see
+      //     isSelfRedeclaration. Two `const`s or two `class`es of one name in
+      //     one file is a SyntaxError under every module system, so this is not
+      //     a guess about types at all.
       //   • anything below Error severity — hints and suggestions render faint
       //     and cost nothing, so they pass through untouched.
       //
-      // Deliberately dropped along with the type errors: 2300 "Duplicate
-      // identifier" and 2403 "Subsequent variable declarations…", which are
-      // structural false positives in the Sprockets model — every open file
-      // shares one global script context, so a component in file_a.jsx looks
-      // like a redeclaration once file_b.jsx is open, and the ambient
-      // `declare var Foo: any` from workspace-globals.d.ts collides with the
-      // real `function Foo()` when its defining file is open.
+      // Deliberately dropped along with the type errors: 2403 "Subsequent
+      // variable declarations…", the code TypeScript reaches for when a
+      // declaration collides with a `var`. Every ambient name this module
+      // synthesizes is a `declare var`, so it fires against our own `.d.ts`
+      // files: typing `function Foo()` into an open file collides with the
+      // `declare var Foo: any` that workspace-globals.d.ts still holds until
+      // the next save. That ambient collision reaches 2300 too, which is what
+      // the two-site rule below exists to tell apart — measured on the sample
+      // workspace after the extraLib suppression above, a real duplicate emits
+      // 2300 at both sites and the ambient one emits it at one.
+      //
+      // 2393 "Duplicate function implementation" is kept under the same rule.
+      // Redeclaring a plain `function` is legal JS and TypeScript rightly says
+      // nothing, but it does emit 2393 for a class that declares one method
+      // twice — where the second silently wins and the first is dead code.
       //
       // .ts/.tsx keeps full checking: there the types are hand-written, so a
       // type error is a statement about code the author actually wrote.
@@ -1253,7 +1525,8 @@
       // which is a working idiom. That is the arbitrary-inference category
       // this filter exists to keep out.
       var JS_CALL_CODES = { '2554': true, '2769': true, '2741': true, '2322': true };
-      var JS_KEEP_CODES  = { '2304': true, '6133': true, '2554': true, '2769': true, '2741': true, '2322': true };
+      var JS_KEEP_CODES  = { '2304': true, '6133': true, '2554': true, '2769': true, '2741': true, '2322': true, '2451': true, '2300': true, '2393': true };
+      var JS_DUP_CODES   = { '2451': true, '2300': true, '2393': true };
       var JS_SYNTAX_CODE = /^(?:1\d{3}|17\d{3})$/;
       var JS_WARN_CODES  = { '2304': true, '6133': true, '2554': true, '2769': true, '2741': true, '2322': true };
       var TS_WARN_CODES  = { '6133': true };
@@ -1265,9 +1538,12 @@
       // value of the wrong type flows straight into the component — both of
       // those break something, so they read as errors.
       //
-      // TypeScript folds all three JSX cases into 2769 ("No overload matches
-      // this call") once React's types are in play, so the distinction has to
-      // come from the message chain, which Monaco flattens into the marker.
+      // The code is not a reliable signal, so the distinction comes from the
+      // message chain, which Monaco flattens into the marker. TypeScript
+      // reports the precise 2322/2741 when the component is declared once, but
+      // folds both JSX cases into 2769 ("No overload matches this call") as
+      // soon as it sees two declarations of it — which is what an open file
+      // duplicated into the program as an extraLib used to produce.
       var JS_UNKNOWN_PROPERTY  = /does not exist on type/;
       var JS_MISSING_REQUIRED  = /is missing in type .* but required in type/;
       function callDiagnosticSeverity(code, message) {
@@ -1278,10 +1554,41 @@
         return monaco.MarkerSeverity.Error;
       }
 
-      function keepJsMarker(marker) {
+      // TypeScript flags every colliding declaration site, so a file that really
+      // does declare a name twice gets one marker per site — identical message,
+      // different position. A lone one means the other declaration is elsewhere:
+      // an ambient `.d.ts` this module synthesizes, or a workspace file that
+      // shares a top-level name and is never loaded alongside this one. Neither
+      // is the author's mistake, and neither is visible any other way — Monaco
+      // drops the relatedInformation naming the other file, because it resolves
+      // to no open model.
+      //
+      // The rule is under-inclusive for `function`, never wrong: redeclaring one
+      // is legal JS, so TypeScript says nothing unless the name ALSO has an
+      // ambient declaration, at which point it reports 2300 at both sites and
+      // this keeps them. `function Foo(){}` twice therefore underlines when Foo
+      // is a workspace global and stays quiet otherwise. Both are real
+      // duplicates; only the quiet half is missed.
+      //
+      // This is also the only thing keeping diff tabs quiet. DiffViewer builds
+      // two more javascript models per diff, and every javascript model joins
+      // the one program, so opening a diff of a file that is also open makes
+      // each side collide with the live model — measured, one raw 2451 on the
+      // live model per diff pane. One occurrence, so the rule drops it. Relaxing
+      // the two-site test, or adding a duplicate code to JS_KEEP_CODES without
+      // adding it to JS_DUP_CODES, lights every diff tab up with false errors.
+      function isSelfRedeclaration(marker, markers) {
+        var code = String(marker.code);
+        return markers.filter(function (m) {
+          return String(m.code) === code && m.message === marker.message;
+        }).length > 1;
+      }
+
+      function keepJsMarker(marker, markers) {
         if (marker.severity !== monaco.MarkerSeverity.Error) return true;
         var code = String(marker.code == null ? '' : marker.code);
-        return JS_KEEP_CODES[code] === true || JS_SYNTAX_CODE.test(code);
+        if (JS_KEEP_CODES[code] !== true && !JS_SYNTAX_CODE.test(code)) return false;
+        return !JS_DUP_CODES[code] || isSelfRedeclaration(marker, markers);
       }
 
       // A 2304 whose span is an assignment TARGET (`foo = 1` with no
@@ -1326,7 +1633,7 @@
               var markers = (entry.owner === 'javascript' && jsMarkers && jsMarkers[uri.toString()]) ||
                 monaco.editor.getModelMarkers({ resource: uri, owner: entry.owner });
               var patched = markers.filter(function(m) {
-                return entry.keep ? entry.keep(m) : true;
+                return entry.keep ? entry.keep(m, markers) : true;
               }).map(function(m) {
                 var code = String(m.code);
                 if (!entry.warn[code]) return m;
@@ -1444,6 +1751,218 @@
       });
     });
 
+    // ── ruby-lsp navigation ──────────────────────────────────────────────────
+
+    // Serves exactly one thing: the candidate list navigateToJsWord hands over
+    // when a name is declared at top level in several other files. It is empty
+    // the rest of the time, so the TypeScript worker remains the only voice on
+    // an ordinary jump and a local definition still goes straight there —
+    // Monaco merges providers without deduping, so a second opinion here would
+    // show a picker listing one definition twice.
+    monaco.languages.registerDefinitionProvider('javascript', {
+      provideDefinition: function (model, position) {
+        var pending = pendingJsDefinitionPeek;
+        pendingJsDefinitionPeek = null;
+        if (!pending) return null;
+        if (pending.uri !== model.uri.toString() ||
+            pending.lineNumber !== position.lineNumber ||
+            pending.column !== position.column) return null;
+        return pending.locations;
+      }
+    });
+
+    // JS/JSX hover provider: looks up workspace definitions for window globals.
+    // Fires for mixed-case identifiers and for any symbol already in discoveredJsGlobals.
+    var JS_HOVER_CACHE_TTL_MS = 60000;
+    monaco.languages.registerHoverProvider('javascript', {
+      provideHover: function(model, position, token) {
+        var wordInfo = model.getWordAtPosition(position);
+        if (!wordInfo || !wordInfo.word || wordInfo.word.length < 2) return null;
+        var word = wordInfo.word;
+        if (!discoveredJsGlobals[word] && !/[A-Z]/.test(word)) return null;
+        if (typeof FileService === 'undefined' || !FileService.getJsDefinition) return null;
+
+        // Build a position-specific range for this hover instance.
+        // The range must NOT be cached because the same symbol can appear on
+        // different lines; a stale cached lineNumber would highlight the wrong place.
+        function makeHoverRange() {
+          return new monaco.Range(position.lineNumber, wordInfo.startColumn, position.lineNumber, wordInfo.endColumn);
+        }
+
+        var parentCtx = extractJsParentContext(model, position.lineNumber, wordInfo);
+        // Parent-qualified hovers cache separately: Parent.myFunction and a
+        // bare myFunction can resolve to different definitions.
+        var cacheKey = (parentCtx ? parentCtx + '.' : '') + word;
+        var cached = jsHoverCache[cacheKey];
+        if (cached && (Date.now() - cached.ts) < JS_HOVER_CACHE_TTL_MS) {
+          if (!cached.contents) return null;
+          return { range: makeHoverRange(), contents: cached.contents };
+        }
+
+        var controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
+        if (controller && token && token.onCancellationRequested) {
+          token.onCancellationRequested(function() { controller.abort(); });
+        }
+        return FileService.getJsDefinition(word, controller ? { signal: controller.signal } : {}, parentCtx)
+          .then(function(data) {
+            if (token && token.isCancellationRequested) return null;
+            var results = data && data.results;
+            if (!results || !results.length) {
+              if (isRuntimeWindowGlobal(word)) {
+                addDiscoveredGlobal(word);
+                var kind = typeof window[word];
+                var rtContents = [{ value: '**' + word + '** — runtime global (`' + kind + '`)' }];
+                jsHoverCache[cacheKey] = { ts: Date.now(), contents: rtContents };
+                return { range: makeHoverRange(), contents: rtContents };
+              }
+              jsHoverCache[cacheKey] = { ts: Date.now(), contents: null };
+              return null;
+            }
+            // Same preference as Ctrl+click, so the file the hover names is
+            // the file the jump would take you to.
+            var r = preferCurrentFile(results, model._mbeditorPath) || results[0];
+            // Only declare as global when the definition is a top-level
+            // (Sprockets-global) declaration in a different file — nested and
+            // member definitions must not get a duplicate declare var.
+            if (r.topLevel && r.file !== model._mbeditorPath) addDiscoveredGlobal(word);
+            var fileRef = r.file + ':' + r.line;
+            var contents = [
+              { value: '```javascript\n' + r.snippet + '\n```', isTrusted: true },
+              { value: '<span style="opacity:0.55;font-size:0.9em;">' + fileRef + '</span>', isTrusted: true, supportHtml: true }
+            ];
+            jsHoverCache[cacheKey] = { ts: Date.now(), contents: contents };
+            return { range: makeHoverRange(), contents: contents };
+          }).catch(function() { return null; });
+      }
+    });
+
+    // JS/JSX member completion provider: suggests properties/methods of workspace globals after '.'.
+    // Only looks up PascalCase/mixed-case identifiers or previously discovered globals.
+    var JS_MEMBERS_CACHE_TTL_MS = 60000;
+    monaco.languages.registerCompletionItemProvider('javascript', {
+      triggerCharacters: ['.'],
+      provideCompletionItems: function(model, position) {
+        var line = model.getLineContent(position.lineNumber);
+        var col  = position.column - 2; // index of character just before the '.'
+        var end  = col;
+        while (col >= 0 && /[a-zA-Z0-9_$]/.test(line[col])) col--;
+        var symbol = line.slice(col + 1, end + 1);
+        if (!symbol || symbol.length < 2) return { suggestions: [] };
+        if (!discoveredJsGlobals[symbol] && !/^[A-Z]/.test(symbol)) return { suggestions: [] };
+        if (typeof FileService === 'undefined' || !FileService.getJsMembers) return { suggestions: [] };
+
+        // Only the raw member list is cached. Suggestions carry the insert
+        // `range`, which is where the completion is about to be written — the
+        // same trap the hover provider's makeHoverRange avoids. Cached
+        // suggestions inserted at the position of the invocation that filled
+        // the cache, so a hit anywhere else in the file was misapplied or
+        // silently dropped by Monaco.
+        function buildSuggestions(members) {
+          return members.map(function(m) {
+            return {
+              label: m.name,
+              kind: monaco.languages.CompletionItemKind.Method,
+              detail: symbol,
+              documentation: m.snippet,
+              insertText: m.name,
+              range: {
+                startLineNumber: position.lineNumber, endLineNumber: position.lineNumber,
+                startColumn: position.column, endColumn: position.column
+              }
+            };
+          });
+        }
+
+        var cached = jsMembersCache[symbol];
+        if (cached && (Date.now() - cached.ts) < JS_MEMBERS_CACHE_TTL_MS) {
+          return { suggestions: buildSuggestions(cached.members) };
+        }
+
+        return FileService.getJsMembers(symbol)
+          .then(function(data) {
+            var members = (data && data.members) || [];
+            jsMembersCache[symbol] = { ts: Date.now(), members: members };
+            return { suggestions: buildSuggestions(members) };
+          }).catch(function() { return { suggestions: [] }; });
+      }
+    });
+
+    monaco.languages.registerCompletionItemProvider('javascript', jsxPropsProvider);
+  }
+
+  // JSX attribute completion for components whose props are read as `props.x` /
+  // `this.props.x`, which the TS worker types as `any` and so completes nothing
+  // for. Destructured params are deliberately not scanned: the TS worker already
+  // completes those, and a second copy would double every row.
+  // Component name → prop-name list.
+  var jsxPropsProvider = {
+    triggerCharacters: [' '],
+    provideCompletionItems: function(model, position) {
+      var monaco = window.monaco;
+      var before = model.getValueInRange({
+        startLineNumber: position.lineNumber, startColumn: 1,
+        endLineNumber: position.lineNumber, endColumn: position.column
+      });
+      var tag = before.match(/<([A-Z][\w$]*)(?:\s+[^<>]*)?\s+[\w-]*$/);
+      if (!tag) return { suggestions: [] };
+
+      var used = {};
+      (before.slice(tag.index).match(/[\w-]+(?=\s*=)/g) || []).forEach(function(a) { used[a] = 1; });
+
+      var word = model.getWordUntilPosition(position);
+      var range = {
+        startLineNumber: position.lineNumber, endLineNumber: position.lineNumber,
+        startColumn: word.startColumn, endColumn: word.endColumn
+      };
+      return {
+        suggestions: collectComponentProps(monaco, model, tag[1])
+          .filter(function(p) { return !used[p]; })
+          .map(function(p) {
+            return {
+              label: p,
+              kind: monaco.languages.CompletionItemKind.Property,
+              insertText: p,
+              range: range
+            };
+          })
+      };
+    }
+  };
+
+  function collectComponentProps(monaco, model, name) {
+    var sources = [model.getValue()];
+    try {
+      var libs = monaco.languages.typescript.javascriptDefaults.getExtraLibs();
+      Object.keys(libs).forEach(function(uri) {
+        if (libs[uri] && libs[uri].content) sources.push(libs[uri].content);
+      });
+    } catch (e) { /* extraLibs unavailable */ }
+    monaco.editor.getModels().forEach(function(m) { if (m !== model) sources.push(m.getValue()); });
+
+    var decl = new RegExp('(?:function\\s+' + name + '\\s*\\(|(?:const|let|var)\\s+' + name + '\\s*=|class\\s+' + name + '\\b)');
+    var names = [];
+    var seen = {};
+    function add(candidate) {
+      if (/^[A-Za-z_$][\w$]*$/.test(candidate) && !seen[candidate]) { seen[candidate] = 1; names.push(candidate); }
+    }
+
+    for (var i = 0; i < sources.length; i++) {
+      var found = decl.exec(sources[i]);
+      if (!found) continue;
+
+      var body = sources[i].slice(found.index);
+      var end = body.slice(1).search(/\n(?:function |class |const |let |var )/);
+      if (end > 0) body = body.slice(0, end + 1);
+
+      var re = /\b(?:this\.)?props\.([A-Za-z_$][\w$]*)/g;
+      var read;
+      while ((read = re.exec(body))) add(read[1]);
+      break;
+    }
+    return names;
+  }
+
+  function registerRubyProviders(monaco) {
     monaco.languages.setLanguageConfiguration('ruby', {
       comments: { lineComment: '#', blockComment: ['=begin', '=end'] },
       brackets: [['(', ')'], ['{', '}'], ['[', ']']],
@@ -1484,7 +2003,13 @@
             cases: {
               '$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' },
+              // JSX rides the javascript tokenizer: Monaco registers no
+              // separate jsx language, and its TS-derived grammar lexes JSX
+              // bodies fine. The guard is anchored (^...$), so plain `JS`
+              // never matched `JSX` and it fell through to the generic
+              // heredoc — the whole block painted as one string.
+              '$2~(?i:JSX?|JAVASCRIPT)': { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'javascript' },
+              '$2~(?i:TSX?|TYPESCRIPT)': { token: 'string.heredoc.delimiter', next: '@heredocEmbedded.$2', nextEmbedded: 'typescript' },
               '$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' },
@@ -1721,49 +2246,6 @@
       }
     });
 
-    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);
-
     // RuboCop quick-fix code-action provider for Ruby files.
     // Only registers when RuboCop is available in the workspace.
     //
@@ -1869,52 +2351,6 @@
       TabManager.openTab(path, String(path).split('/').pop(), line || 1);
     });
 
-    // ── ruby-lsp navigation ──────────────────────────────────────────────────
-
-    // Serves exactly one thing: the candidate list navigateToJsWord hands over
-    // when a name is declared at top level in several other files. It is empty
-    // the rest of the time, so the TypeScript worker remains the only voice on
-    // an ordinary jump and a local definition still goes straight there —
-    // Monaco merges providers without deduping, so a second opinion here would
-    // show a picker listing one definition twice.
-    monaco.languages.registerDefinitionProvider('javascript', {
-      provideDefinition: function (model, position) {
-        var pending = pendingJsDefinitionPeek;
-        pendingJsDefinitionPeek = null;
-        if (!pending) return null;
-        if (pending.uri !== model.uri.toString() ||
-            pending.lineNumber !== position.lineNumber ||
-            pending.column !== position.column) return null;
-        return pending.locations;
-      }
-    });
-
-    // Teaches Monaco how to open a file:// resource in this editor. Without it
-    // every provider below can find a location but nothing can go there:
-    // peek-definition, the references widget and Ctrl+hover previews all route
-    // 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;
-
-        var pos = selectionOrPosition || {};
-        var line = pos.startLineNumber || pos.lineNumber || 1;
-        var col = pos.startColumn || pos.column || 1;
-        TabManager.openTab(path, path.split('/').pop(), line, null, false, col);
-        return true;
-      }
-    });
-
     // Words never worth a definition lookup: language keywords, core methods,
     // and (in ERB) Rails view helpers that live in the framework rather than
     // the workspace. Guarding here rather than in the request means Ctrl+hover
@@ -1936,11 +2372,24 @@
       var isErb = languageId === 'erb';
 
       monaco.languages.registerDefinitionProvider(languageId, {
-        provideDefinition: function provideDefinition(model, position) {
+        provideDefinition: function provideDefinition(model, position, token) {
           var word = rubyNavigableWord(model, position, isErb);
           if (!word) return null;
 
-          var lsp = isErb ? Promise.resolve(null) : tryRubyLsp('definition', model, position);
+          // Passing token lets tryRubyLsp abort the outstanding request (see
+          // its own comment) when this ctrl-click is abandoned — a second
+          // click before the first answers, most obviously — instead of
+          // leaving an abandoned axios request to run to completion unread.
+          var lsp = isErb ? Promise.resolve(null) : tryRubyLsp('definition', model, position, null, token);
+          // Started alongside ruby-lsp, not inside its .then(): when ruby-lsp
+          // is slow or times out (server-side budget is 3s by default — see
+          // Mbeditor.configuration.ruby_lsp_timeout), waiting for it to
+          // settle before even starting the Ripper-backed fallback tacked a
+          // full extra round trip onto an already-slow answer. The result is
+          // only used when ruby-lsp comes back empty, so a fast ruby-lsp
+          // answer is unaffected — this promise is simply left to resolve
+          // unused.
+          var legacy = legacyRubyDefinition(word);
           return lsp.then(function (data) {
             if (data && data.results && data.results.length) {
               return data.results.map(function (r) {
@@ -1951,7 +2400,7 @@
                 };
               });
             }
-            return legacyRubyDefinition(word);
+            return legacy;
           });
         }
       });
@@ -2102,82 +2551,6 @@
       }).catch(function () { return []; });
     }
 
-    // ── Prettier formatting providers ────────────────────────────────────────
-    //
-    // `formatOnPaste` has been on by default for a long time and did nothing
-    // outside Ruby: Monaco acts on a paste only through a *range* formatting
-    // provider, and none was registered. Registering one here is what makes
-    // pasted blocks land correctly indented, and what formats the whole thing
-    // when the paste fills an empty file (the pasted range is then the file).
-    //
-    // Prettier's own rangeStart/rangeEnd does the narrowing — it reprints the
-    // smallest enclosing statement and leaves the rest byte-identical, so a
-    // paste in the middle of a file does not reformat the file.
-    var PRETTIER_LANGUAGE_PARSERS = {
-      javascript: 'babel', json: 'json', css: 'css',
-      scss: 'scss', less: 'less', html: 'html', markdown: 'markdown'
-    };
-
-    // One edit spanning only what actually changed. A whole-document
-    // replacement would work but throws away the cursor position and collapses
-    // undo, which on every paste is very noticeable.
-    function minimalEdit(model, oldText, newText) {
-      if (oldText === newText) return [];
-      var start = 0;
-      var maxStart = Math.min(oldText.length, newText.length);
-      while (start < maxStart && oldText.charCodeAt(start) === newText.charCodeAt(start)) start++;
-      var oldEnd = oldText.length;
-      var newEnd = newText.length;
-      while (oldEnd > start && newEnd > start && oldText.charCodeAt(oldEnd - 1) === newText.charCodeAt(newEnd - 1)) {
-        oldEnd--;
-        newEnd--;
-      }
-      return [{
-        range: monaco.Range.fromPositions(model.getPositionAt(start), model.getPositionAt(oldEnd)),
-        text: newText.slice(start, newEnd)
-      }];
-    }
-
-    function prettierEdits(model, range) {
-      var parser = PRETTIER_LANGUAGE_PARSERS[model.getLanguageId()];
-      if (!parser || typeof runPrettier !== 'function') return Promise.resolve([]);
-
-      var text = model.getValue();
-      var prefs = (typeof EditorStore !== 'undefined' && EditorStore.getState().editorPrefs) || {};
-      var extra = null;
-      if (range) {
-        extra = {
-          rangeStart: model.getOffsetAt({ lineNumber: range.startLineNumber, column: range.startColumn }),
-          rangeEnd: model.getOffsetAt({ lineNumber: range.endLineNumber, column: range.endColumn })
-        };
-      }
-
-      return runPrettier(text, prefs, parser, extra)
-        .then(function (formatted) {
-          // The model can have moved on while Prettier was working.
-          if (model.isDisposed() || model.getValue() !== text) return [];
-          return minimalEdit(model, text, formatted);
-        })
-        // A paste of half an expression will not parse. Leaving it alone is the
-        // right answer — the diagnostics path reports the syntax error.
-        ["catch"](function () { return []; });
-    }
-
-    Object.keys(PRETTIER_LANGUAGE_PARSERS).forEach(function (languageId) {
-      monaco.languages.registerDocumentRangeFormattingEditProvider(languageId, {
-        displayName: 'Prettier',
-        provideDocumentRangeFormattingEdits: function (model, range) {
-          return prettierEdits(model, range);
-        }
-      });
-      monaco.languages.registerDocumentFormattingEditProvider(languageId, {
-        displayName: 'Prettier',
-        provideDocumentFormattingEdits: function (model) {
-          return prettierEdits(model, null);
-        }
-      });
-    });
-
     // Parameter hints while typing a call's arguments.
     monaco.languages.registerSignatureHelpProvider('ruby', {
       signatureHelpTriggerCharacters: ['(', ','],
@@ -2374,6 +2747,7 @@
       provideHover: function provideHover(model, position, token) {
         var isErb = lang === 'erb';
         if (isErb && !isInsideErbTag(model, position)) return null;
+        if (!isRealHoverPosition(model, position)) return null;
 
         var wordInfo = model.getWordAtPosition(position);
         if (!wordInfo) return null;
@@ -2628,121 +3002,117 @@
         }).catch(function() { return { suggestions: [] }; });
       }
     }
+  }
 
-    // JS/JSX hover provider: looks up workspace definitions for window globals.
-    // Fires for mixed-case identifiers and for any symbol already in discoveredJsGlobals.
-    var JS_HOVER_CACHE_TTL_MS = 60000;
-    monaco.languages.registerHoverProvider('javascript', {
-      provideHover: function(model, position, token) {
-        var wordInfo = model.getWordAtPosition(position);
-        if (!wordInfo || !wordInfo.word || wordInfo.word.length < 2) return null;
-        var word = wordInfo.word;
-        if (!discoveredJsGlobals[word] && !/[A-Z]/.test(word)) return null;
-        if (typeof FileService === 'undefined' || !FileService.getJsDefinition) return null;
+  // Cross-language providers: features registered once for several languages
+  // at once (linked editing, the file:// opener, Prettier formatting, vim fold
+  // markers) rather than owned by Ruby or JS specifically.
+  function registerGenericProviders(monaco) {
+    var linkedProvider = { provideLinkedEditingRanges: linkedEditingRanges };
+    ['html', 'erb', 'javascript', 'typescript', 'ruby'].forEach(function (lang) {
+      monaco.languages.registerLinkedEditingRangeProvider(lang, linkedProvider);
+    });
 
-        // Build a position-specific range for this hover instance.
-        // The range must NOT be cached because the same symbol can appear on
-        // different lines; a stale cached lineNumber would highlight the wrong place.
-        function makeHoverRange() {
-          return new monaco.Range(position.lineNumber, wordInfo.startColumn, position.lineNumber, wordInfo.endColumn);
-        }
+    // Teaches Monaco how to open a file:// resource in this editor. Without it
+    // every provider below can find a location but nothing can go there:
+    // peek-definition, the references widget and Ctrl+hover previews all route
+    // 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 parentCtx = extractJsParentContext(model, position.lineNumber, wordInfo);
-        // Parent-qualified hovers cache separately: Parent.myFunction and a
-        // bare myFunction can resolve to different definitions.
-        var cacheKey = (parentCtx ? parentCtx + '.' : '') + word;
-        var cached = jsHoverCache[cacheKey];
-        if (cached && (Date.now() - cached.ts) < JS_HOVER_CACHE_TTL_MS) {
-          if (!cached.contents) return null;
-          return { range: makeHoverRange(), contents: cached.contents };
-        }
+        var path = String(resource.path || '').replace(/^\/+/, '');
+        if (!path || typeof TabManager === 'undefined' || !TabManager.openTab) return false;
 
-        var controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
-        if (controller && token && token.onCancellationRequested) {
-          token.onCancellationRequested(function() { controller.abort(); });
-        }
-        return FileService.getJsDefinition(word, controller ? { signal: controller.signal } : {}, parentCtx)
-          .then(function(data) {
-            if (token && token.isCancellationRequested) return null;
-            var results = data && data.results;
-            if (!results || !results.length) {
-              if (isRuntimeWindowGlobal(word)) {
-                addDiscoveredGlobal(word);
-                var kind = typeof window[word];
-                var rtContents = [{ value: '**' + word + '** — runtime global (`' + kind + '`)' }];
-                jsHoverCache[cacheKey] = { ts: Date.now(), contents: rtContents };
-                return { range: makeHoverRange(), contents: rtContents };
-              }
-              jsHoverCache[cacheKey] = { ts: Date.now(), contents: null };
-              return null;
-            }
-            // Same preference as Ctrl+click, so the file the hover names is
-            // the file the jump would take you to.
-            var r = preferCurrentFile(results, model._mbeditorPath) || results[0];
-            // Only declare as global when the definition is a top-level
-            // (Sprockets-global) declaration in a different file — nested and
-            // member definitions must not get a duplicate declare var.
-            if (r.topLevel && r.file !== model._mbeditorPath) addDiscoveredGlobal(word);
-            var fileRef = r.file + ':' + r.line;
-            var contents = [
-              { value: '```javascript\n' + r.snippet + '\n```', isTrusted: true },
-              { value: '<span style="opacity:0.55;font-size:0.9em;">' + fileRef + '</span>', isTrusted: true, supportHtml: true }
-            ];
-            jsHoverCache[cacheKey] = { ts: Date.now(), contents: contents };
-            return { range: makeHoverRange(), contents: contents };
-          }).catch(function() { return null; });
+        var pos = selectionOrPosition || {};
+        var line = pos.startLineNumber || pos.lineNumber || 1;
+        var col = pos.startColumn || pos.column || 1;
+        TabManager.openTab(path, path.split('/').pop(), line, null, false, col);
+        return true;
       }
     });
 
-    // JS/JSX member completion provider: suggests properties/methods of workspace globals after '.'.
-    // Only looks up PascalCase/mixed-case identifiers or previously discovered globals.
-    var JS_MEMBERS_CACHE_TTL_MS = 60000;
-    monaco.languages.registerCompletionItemProvider('javascript', {
-      triggerCharacters: ['.'],
-      provideCompletionItems: function(model, position) {
-        var line = model.getLineContent(position.lineNumber);
-        var col  = position.column - 2; // index of character just before the '.'
-        var end  = col;
-        while (col >= 0 && /[a-zA-Z0-9_$]/.test(line[col])) col--;
-        var symbol = line.slice(col + 1, end + 1);
-        if (!symbol || symbol.length < 2) return { suggestions: [] };
-        if (!discoveredJsGlobals[symbol] && !/^[A-Z]/.test(symbol)) return { suggestions: [] };
-        if (typeof FileService === 'undefined' || !FileService.getJsMembers) return { suggestions: [] };
+    // ── Prettier formatting providers ────────────────────────────────────────
+    //
+    // `formatOnPaste` has been on by default for a long time and did nothing
+    // outside Ruby: Monaco acts on a paste only through a *range* formatting
+    // provider, and none was registered. Registering one here is what makes
+    // pasted blocks land correctly indented, and what formats the whole thing
+    // when the paste fills an empty file (the pasted range is then the file).
+    //
+    // Prettier's own rangeStart/rangeEnd does the narrowing — it reprints the
+    // smallest enclosing statement and leaves the rest byte-identical, so a
+    // paste in the middle of a file does not reformat the file.
+    var PRETTIER_LANGUAGE_PARSERS = {
+      javascript: 'babel', json: 'json', css: 'css',
+      scss: 'scss', less: 'less', html: 'html', markdown: 'markdown'
+    };
 
-        // Only the raw member list is cached. Suggestions carry the insert
-        // `range`, which is where the completion is about to be written — the
-        // same trap the hover provider's makeHoverRange avoids. Cached
-        // suggestions inserted at the position of the invocation that filled
-        // the cache, so a hit anywhere else in the file was misapplied or
-        // silently dropped by Monaco.
-        function buildSuggestions(members) {
-          return members.map(function(m) {
-            return {
-              label: m.name,
-              kind: monaco.languages.CompletionItemKind.Method,
-              detail: symbol,
-              documentation: m.snippet,
-              insertText: m.name,
-              range: {
-                startLineNumber: position.lineNumber, endLineNumber: position.lineNumber,
-                startColumn: position.column, endColumn: position.column
-              }
-            };
-          });
-        }
+    // One edit spanning only what actually changed. A whole-document
+    // replacement would work but throws away the cursor position and collapses
+    // undo, which on every paste is very noticeable.
+    function minimalEdit(model, oldText, newText) {
+      if (oldText === newText) return [];
+      var start = 0;
+      var maxStart = Math.min(oldText.length, newText.length);
+      while (start < maxStart && oldText.charCodeAt(start) === newText.charCodeAt(start)) start++;
+      var oldEnd = oldText.length;
+      var newEnd = newText.length;
+      while (oldEnd > start && newEnd > start && oldText.charCodeAt(oldEnd - 1) === newText.charCodeAt(newEnd - 1)) {
+        oldEnd--;
+        newEnd--;
+      }
+      return [{
+        range: monaco.Range.fromPositions(model.getPositionAt(start), model.getPositionAt(oldEnd)),
+        text: newText.slice(start, newEnd)
+      }];
+    }
 
-        var cached = jsMembersCache[symbol];
-        if (cached && (Date.now() - cached.ts) < JS_MEMBERS_CACHE_TTL_MS) {
-          return { suggestions: buildSuggestions(cached.members) };
-        }
+    function prettierEdits(model, range) {
+      var parser = PRETTIER_LANGUAGE_PARSERS[model.getLanguageId()];
+      if (!parser || typeof runPrettier !== 'function') return Promise.resolve([]);
 
-        return FileService.getJsMembers(symbol)
-          .then(function(data) {
-            var members = (data && data.members) || [];
-            jsMembersCache[symbol] = { ts: Date.now(), members: members };
-            return { suggestions: buildSuggestions(members) };
-          }).catch(function() { return { suggestions: [] }; });
+      var text = model.getValue();
+      var prefs = (typeof EditorStore !== 'undefined' && EditorStore.getState().editorPrefs) || {};
+      var extra = null;
+      if (range) {
+        extra = {
+          rangeStart: model.getOffsetAt({ lineNumber: range.startLineNumber, column: range.startColumn }),
+          rangeEnd: model.getOffsetAt({ lineNumber: range.endLineNumber, column: range.endColumn })
+        };
       }
+
+      return runPrettier(text, prefs, parser, extra)
+        .then(function (formatted) {
+          // The model can have moved on while Prettier was working.
+          if (model.isDisposed() || model.getValue() !== text) return [];
+          return minimalEdit(model, text, formatted);
+        })
+        // A paste of half an expression will not parse. Leaving it alone is the
+        // right answer — the diagnostics path reports the syntax error.
+        ["catch"](function () { return []; });
+    }
+
+    Object.keys(PRETTIER_LANGUAGE_PARSERS).forEach(function (languageId) {
+      monaco.languages.registerDocumentRangeFormattingEditProvider(languageId, {
+        displayName: 'Prettier',
+        provideDocumentRangeFormattingEdits: function (model, range) {
+          return prettierEdits(model, range);
+        }
+      });
+      monaco.languages.registerDocumentFormattingEditProvider(languageId, {
+        displayName: 'Prettier',
+        provideDocumentFormattingEdits: function (model) {
+          return prettierEdits(model, null);
+        }
+      });
     });
 
     // Vim-style fold-marker folding provider.
@@ -2774,6 +3144,17 @@
     });
   }
 
+  function registerGlobalExtensions(monaco) {
+    if (globalsRegistered) return;
+    if (!monaco || !monaco.languages) return;
+
+    globalsRegistered = true;
+
+    registerJsProviders(monaco);
+    registerRubyProviders(monaco);
+    registerGenericProviders(monaco);
+  }
+
   window.MbeditorEditorPlugins = {
     registerGlobalExtensions: registerGlobalExtensions,
     attachEditorFeatures: attachEditorFeatures,
@@ -2787,6 +3168,13 @@
     markerFixKey: markerFixKey,
     // Exposed so the ERB gating can be asserted directly in system tests.
     isInsideErbTag: isInsideErbTag,
+    // Exposed so the hover-provider comment/decoration guard can be asserted
+    // directly in system tests.
+    isRealHoverPosition: isRealHoverPosition,
+    // Exposed so JSX prop completion can be asserted without the suggest widget.
+    jsxPropsProvider: jsxPropsProvider,
+    // Exposed so tag-pair linking can be asserted without driving a rename.
+    linkedEditingRanges: linkedEditingRanges,
     runRubyEnter: function runRubyEnter(editor) {
       if (!editor || !editor.getModel) return false;
       return handleRubyEnter(editor, editor.getModel());