mbeditor 0.13.1 → 0.14.1

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

@@ -527,12 +527,8 @@ var ModelGraph = (function () {
     var searchOpen = _searchOpen[0], setSearchOpen = _searchOpen[1];
     var _highlight = React.useState(0);
     var highlight = _highlight[0], setHighlight = _highlight[1];
-    var _focused = React.useState(null);
-    var focused = _focused[0], setFocused = _focused[1];
     var _hovered = React.useState(null);
     var hovered = _hovered[0], setHovered = _hovered[1];
-    var _pointer = React.useState({ x: 0, y: 0 });
-    var pointer = _pointer[0], setPointer = _pointer[1];
     var dragRef = React.useRef(null);
     var svgRef = React.useRef(null);
 
@@ -586,17 +582,56 @@ var ModelGraph = (function () {
       if (sceneRef.current) sceneRef.current.classList.remove('mg-focus-mode');
     }, []);
 
+    // The edge <g> elements touching each model, indexed once per scene
+    // instead of a querySelectorAll('[data-from=...],[data-to=...]') on every
+    // mouseenter — that scan walked the whole scene continuously as the
+    // pointer crossed a dense diagram. sceneChildrenRef is kept current just
+    // below sceneChildren's own memo, so a stale index is rebuilt exactly
+    // when the scene actually does.
+    var sceneChildrenRef = React.useRef(null);
+    var edgeIndexRef = React.useRef({ scene: null, map: {} });
+    var edgesFor = React.useCallback(function (name) {
+      var scene = sceneRef.current;
+      if (!scene) return [];
+      if (edgeIndexRef.current.scene !== sceneChildrenRef.current) {
+        var map = {};
+        Array.prototype.forEach.call(scene.querySelectorAll('[data-from]'), function (el) {
+          var from = el.getAttribute('data-from'), to = el.getAttribute('data-to');
+          (map[from] = map[from] || []).push(el);
+          if (to !== from) (map[to] = map[to] || []).push(el);
+        });
+        edgeIndexRef.current = { scene: sceneChildrenRef.current, map: map };
+      }
+      return edgeIndexRef.current.map[name] || [];
+    }, []);
+
+    // getBoundingClientRect forces a synchronous layout, and hovering has just
+    // written classes onto a <g> holding thousands of elements, so the layout
+    // it forces is the whole scene: measured at 10 ms a tick on a 420-model
+    // graph, against 0.9 ms when the style is clean. The pane's own rect moves
+    // only when the window or the panel layout does, so read it once a frame.
+    var rectRef = React.useRef(null);
+    var paneRect = React.useCallback(function () {
+      var el = svgRef.current;
+      if (!el) return null;
+      if (!rectRef.current) {
+        rectRef.current = el.getBoundingClientRect();
+        window.requestAnimationFrame(function () { rectRef.current = null; });
+      }
+      return rectRef.current;
+    }, []);
+
     var moveHoverCard = React.useCallback(function (ev) {
       var card = hoverCardRef.current;
       var el = svgRef.current;
       if (!card || !el) return;
-      var rect = el.getBoundingClientRect();
+      var rect = paneRect();
       var x = ev.clientX - rect.left;
       var y = ev.clientY - rect.top;
       // Flip before the card would run off the pane rather than after.
       card.style.left = (x > rect.width - 300 ? x - 290 : x + 18) + 'px';
       card.style.top = Math.min(y + 18, Math.max(0, rect.height - 240)) + 'px';
-    }, []);
+    }, [paneRect]);
 
     var enterModel = React.useCallback(function (name, ev) {
       if (dragRef.current) return;   // panning, not inspecting
@@ -604,19 +639,38 @@ var ModelGraph = (function () {
       var scene = sceneRef.current;
       if (scene) {
         scene.classList.add('mg-focus-mode');
-        var sel = '[data-from="' + name + '"],[data-to="' + name + '"]';
-        litRef.current = Array.prototype.slice.call(scene.querySelectorAll(sel));
+        litRef.current = edgesFor(name);
         litRef.current.forEach(function (el) { el.classList.add('mg-lit'); });
       }
       setModelHover(name);
       moveHoverCard(ev);
-    }, [clearLit, moveHoverCard]);
+    }, [clearLit, moveHoverCard, edgesFor]);
 
     var leaveModel = React.useCallback(function () {
       clearLit();
       setModelHover(null);
     }, [clearLit]);
 
+    // Position is written straight onto the tooltip's DOM node, the way
+    // moveHoverCard does for the model card — routing every mousemove over an
+    // edge through React state re-ran the whole component body per pointer
+    // tick. edgePosRef holds the latest point for the tooltip's own initial
+    // inline style (read once on the render its `hovered` turns true), without
+    // itself triggering a render.
+    var edgeTooltipRef = React.useRef(null);
+    var edgePosRef = React.useRef({ x: 0, y: 0 });
+    var moveEdgeTooltip = React.useCallback(function (ev) {
+      var rect = paneRect();
+      if (!rect) return;
+      var x = ev.clientX - rect.left;
+      var y = ev.clientY - rect.top;
+      edgePosRef.current = { x: x, y: y };
+      var card = edgeTooltipRef.current;
+      if (!card) return;
+      card.style.left = (x > rect.width - 260 ? x - 240 : x + 14) + 'px';
+      card.style.top = (y + 14) + 'px';
+    }, [paneRect]);
+
     // Frame the whole graph on load. Without this the view starts at the
     // top-left of a canvas much larger than the pane and the diagram looks
     // empty until you go looking for it.
@@ -652,6 +706,19 @@ var ModelGraph = (function () {
 
     React.useEffect(function () { fitToPane(); }, [fitToPane]);
 
+    // `focused` used to be React state read inside sceneChildren's className,
+    // but centring a model is also how a click and a search pick land, and
+    // that made every centre rebuild all ~3,500 SVG elements and their event
+    // closures. Applied to the mounted DOM instead, the same way
+    // enterModel/litRef apply the hover highlight above.
+    var focusedRef = React.useRef(null);
+    var applyFocus = React.useCallback(function (name) {
+      var scene = sceneRef.current;
+      if (focusedRef.current) focusedRef.current.classList.remove('mg-focused');
+      focusedRef.current = scene ? scene.querySelector('[data-model="' + name + '"]') : null;
+      if (focusedRef.current) focusedRef.current.classList.add('mg-focused');
+    }, []);
+
     // Bring one model to the middle of the pane at the current zoom, and mark
     // it so it's findable in a dense graph once it gets there.
     var centreOn = React.useCallback(function (name) {
@@ -660,7 +727,7 @@ var ModelGraph = (function () {
       if (!el || !pos) return;
       var rect = el.getBoundingClientRect();
       var h = nodeHeight(pos.model);
-      setFocused(name);
+      applyFocus(name);
       setView(function (v) {
         // Close half the distance to actual size, so a model found while
         // fitted (often ~0.3) lands readable. Never zooms out: if you were
@@ -672,7 +739,7 @@ var ModelGraph = (function () {
           y: rect.height / 2 - (pos.y + h / 2) * k
         };
       });
-    }, [placed]);
+    }, [placed, applyFocus]);
 
     // Same mounting problem as the wheel listener: the fit effect can run
     // before the SVG exists and not again afterwards. Kept current so the
@@ -707,22 +774,6 @@ var ModelGraph = (function () {
       svgRef.current = el;
       if (!el) return;
 
-      // getBoundingClientRect forces a synchronous layout, and we had just
-      // written a new transform onto a <g> holding thousands of elements — so
-      // reading it per wheel tick made the browser re-lay-out the entire scene
-      // before the handler could continue. Measured at 27 ms a tick on a
-      // 300-model graph. The pane's own rect only changes when the window or
-      // the panel layout does, so cache it and refresh once per frame.
-      var rectRef = { current: null };
-      var invalidateRect = function () { rectRef.current = null; };
-      var paneRect = function () {
-        if (!rectRef.current) {
-          rectRef.current = el.getBoundingClientRect();
-          window.requestAnimationFrame(invalidateRect);
-        }
-        return rectRef.current;
-      };
-
       var onWheel = function (e) {
         e.preventDefault();
         var rect = paneRect();
@@ -739,7 +790,7 @@ var ModelGraph = (function () {
 
       // After layout, so the pane has a measurable size to fit into.
       window.requestAnimationFrame(function () { fitRef.current(); });
-    }, []);
+    }, [paneRect]);
 
     // Memoised so hovering a model does not rebuild every box and edge.
     // The highlight itself is applied by toggling DOM classes; only the
@@ -790,10 +841,7 @@ var ModelGraph = (function () {
                   if (line) line.classList.add('mg-edge-hovered');
                   setHovered({ index: i, edge: e });
                 },
-                onMouseMove: function (ev) {
-                  var rect = svgRef.current.getBoundingClientRect();
-                  setPointer({ x: ev.clientX - rect.left, y: ev.clientY - rect.top });
-                },
+                onMouseMove: moveEdgeTooltip,
                 onMouseLeave: function (ev) {
                   var line = ev.currentTarget.nextElementSibling;
                   if (line) line.classList.remove('mg-edge-hovered');
@@ -818,7 +866,8 @@ var ModelGraph = (function () {
               'g',
               {
                 key: m.name,
-                className: 'mg-node' + (focused === m.name ? ' mg-focused' : ''),
+                'data-model': m.name,
+                className: 'mg-node',
                 transform: 'translate(' + pos.x + ',' + pos.y + ')',
                 onMouseEnter: function (ev) { enterModel(m.name, ev); },
                 onMouseMove: function (ev) { moveHoverCard(ev); },
@@ -887,7 +936,12 @@ var ModelGraph = (function () {
             );
           })
       ];
-    }, [placed, graph, focused]);
+    }, [placed, graph]);
+    // Kept current so edgesFor (declared earlier, used from enterModel) can
+    // detect a scene rebuild without itself listing sceneChildren as a
+    // dependency — that would rebuild enterModel, and everything closing
+    // over it, on every scene rebuild too.
+    sceneChildrenRef.current = sceneChildren;
 
     if (loading) {
       return React.createElement('div', { className: 'ide-model-graph-empty' }, 'Building the model graph…');
@@ -1058,12 +1112,15 @@ var ModelGraph = (function () {
       hovered && React.createElement(
         'div',
         {
+          ref: edgeTooltipRef,
           className: 'mg-tooltip',
           // Offset from the cursor, and flipped left near the right edge so
-          // the tooltip never runs off the pane.
+          // the tooltip never runs off the pane. Only the initial placement is
+          // computed here — moveEdgeTooltip writes the DOM node directly as
+          // the pointer moves, so this style is live for one frame at most.
           style: {
-            left: pointer.x + (svgRef.current && pointer.x > svgRef.current.clientWidth - 260 ? -240 : 14) + 'px',
-            top: (pointer.y + 14) + 'px'
+            left: edgePosRef.current.x + (svgRef.current && edgePosRef.current.x > svgRef.current.clientWidth - 260 ? -240 : 14) + 'px',
+            top: (edgePosRef.current.y + 14) + 'px'
           }
         },
         React.createElement('div', { className: 'mg-tooltip-title' },

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

@@ -0,0 +1,329 @@
+'use strict';
+
+// Paste & Place (Ruby). The user pastes one or more methods (optionally inside
+// their `class Foo ... end`); each is matched to the method it should replace,
+// or offered as a new method. Nothing is written to disk: Apply pushes undoable
+// edits into the live Monaco buffer, which marks the tab dirty.
+//
+// Line ranges come from POST /ruby_methods (Ripper), computed on the *buffer*
+// text, so they match what the editor holds rather than what is on disk.
+
+var PastePlaceModal = (function () {
+  var useState = React.useState;
+  var useRef = React.useRef;
+  var useMemo = React.useMemo;
+
+  var MAX_CANDIDATE_FILES = 10;
+
+  function indentOf(line) { return /^[ \t]*/.exec(line || '')[0]; }
+
+  function escapeRegex(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }
+
+  function activeRubyPath() {
+    var st = EditorStore.getState();
+    var pane = st.panes.find(function (p) { return p.id === st.focusedPaneId; }) || st.panes[0];
+    var tab = pane && pane.tabs.find(function (t) { return t.id === pane.activeTabId; });
+    return tab && tab.path && /\.rb$/.test(tab.path) && !/^[a-z-]+:\/\//.test(tab.path) ? tab.path : null;
+  }
+
+  // Live buffer when the file is open, disk otherwise.
+  function bufferText(path) {
+    var entry = window.__mbeditorModels && window.__mbeditorModels[path];
+    if (entry && entry.model && !entry.model.isDisposed()) return Promise.resolve(entry.model.getValue());
+    return FileService.getFile(path).then(function (d) {
+      if (!d || typeof d.content !== 'string') throw new Error('unreadable');
+      return d.content;
+    });
+  }
+
+  function ownerPath(owners, o) {
+    return owners.filter(function (x) {
+      return x.kind !== 'sclass' && x.start_line <= o.start_line && x.end_line >= o.end_line;
+    }).map(function (x) { return x.name; }).join('::');
+  }
+
+  function sameMethod(tm, m) {
+    return tm.name === m.name && tm.singleton === m.singleton &&
+      (!m.owner || tm.owner === m.owner || tm.owner.slice(-(m.owner.length + 2)) === '::' + m.owner);
+  }
+
+  // The class/module whose closing `end` receives a new method.
+  function insertionOwner(info, snippetOwner) {
+    var real = info.owners.filter(function (o) { return o.kind !== 'sclass'; });
+    if (snippetOwner) {
+      return real.filter(function (o) {
+        var full = ownerPath(info.owners, o);
+        return full === snippetOwner || full.slice(-(snippetOwner.length + 2)) === '::' + snippetOwner;
+      })[0] || null;
+    }
+    // ponytail: first top-level class/module; an owner-less snippet in a file with none is left unplaced.
+    return real.filter(function (o) { return o.kind === 'class'; })[0] || real[0] || null;
+  }
+
+  function reindent(snippetLines, base, target) {
+    return snippetLines.map(function (l) {
+      if (l.trim() === '') return '';
+      return target + (l.indexOf(base) === 0 ? l.slice(base.length) : l.replace(/^[ \t]+/, ''));
+    });
+  }
+
+  // Everything async: parse the snippet, then find targets for every method.
+  function findPlacement(code) {
+    var cache = {};
+    function rangesFor(path) {
+      if (!cache[path]) {
+        cache[path] = bufferText(path).then(function (text) {
+          return FileService.getRubyMethods(text).then(function (info) {
+            if (info.error) throw new Error(info.error);
+            return { text: text, info: info };
+          });
+        });
+      }
+      return cache[path];
+    }
+
+    return FileService.getRubyMethods(code).then(function (snip) {
+      if (snip.error) throw new Error('Snippet is not valid Ruby: ' + snip.error);
+      if (!snip.methods.length) throw new Error('No methods found in the pasted code.');
+      var lines = code.split('\n');
+      var active = activeRubyPath();
+
+      // One method at a time: /search supersedes (kills) a search still in flight.
+      var items = [];
+      return snip.methods.reduce(function (chain, m) { return chain.then(function () { return placeOne(m).then(function (item) { items.push(item); }); }); }, Promise.resolve())
+        .then(function () { return { items: items, texts: cache }; });
+
+      function placeOne(m) {
+        var item = {
+          m: m,
+          hasDoc: m.doc_start_line < m.start_line,
+          lines: lines.slice(m.doc_start_line - 1, m.end_line),
+          base: indentOf(lines[m.start_line - 1]),
+          options: []
+        };
+        var existing = [];
+        var step = Promise.resolve();
+        if (active) {
+          step = rangesFor(active).then(function (r) {
+            var t = r.info.methods.filter(function (tm) { return sameMethod(tm, m); })[0];
+            if (t) existing.push({ path: active, target: t });
+          }, function () {});
+        }
+        return step.then(function () {
+          if (existing.length || !m.name) return;
+          var q = 'def[[:space:]]+' + (m.singleton ? 'self\\.' : '') + escapeRegex(m.name);
+          return axios.get(window.mbeditorBasePath() + '/search', { params: { q: q, regex: 'true', limit: 50 } })
+            .then(function (res) {
+              var seen = {};
+              var files = ((res.data && res.data.results) || []).map(function (r) { return r.file; })
+                .filter(function (f) {
+                  if (!/\.rb$/.test(f) || f === active || seen[f]) return false;
+                  return (seen[f] = true);
+                }).slice(0, MAX_CANDIDATE_FILES);
+              return Promise.all(files.map(function (f) {
+                return rangesFor(f).then(function (r) {
+                  var t = r.info.methods.filter(function (tm) { return sameMethod(tm, m); })[0];
+                  if (t) existing.push({ path: f, target: t });
+                }, function () {});
+              }));
+            }, function () {});
+        }).then(function () {
+          item.options = existing.map(function (c) {
+            return { kind: 'replace', path: c.path, target: c.target, label: c.path + ':' + c.target.start_line };
+          });
+          var offerInsert = function (path) {
+            return rangesFor(path).then(function (r) {
+              var owner = insertionOwner(r.info, m.owner);
+              if (owner) item.options.push({ kind: 'insert', path: path, owner: owner, label: 'Insert as new method in ' + path });
+              return !!owner;
+            }, function () { return false; });
+          };
+          return (active ? offerInsert(active) : Promise.resolve(false)).then(function (placed) {
+            if (placed || !m.owner) return;
+            // A new method for a class that lives in another file goes into that file.
+            var q = '(class|module)[[:space:]]+' + escapeRegex(m.owner.split('::').pop()) + '([^A-Za-z0-9_]|$)';
+            return axios.get(window.mbeditorBasePath() + '/search', { params: { q: q, regex: 'true', limit: 20 } })
+              .then(function (res) {
+                var files = ((res.data && res.data.results) || []).map(function (r) { return r.file; })
+                  .filter(function (f, i, all) { return /\.rb$/.test(f) && f !== active && all.indexOf(f) === i; })
+                  .slice(0, MAX_CANDIDATE_FILES);
+                return Promise.all(files.map(offerInsert));
+              }, function () {});
+          });
+        }).then(function () {
+          item.options.push({ kind: 'skip', label: 'Skip' });
+          return item;
+        });
+      }
+    });
+  }
+
+  // Edits are expressed in 1-based line numbers against the text they were
+  // planned on: replace = lines start..end inclusive, insert = before line `at`.
+  function buildEdits(items, choices, texts) {
+    var byFile = {};
+    items.forEach(function (item, i) {
+      var opt = item.options[choices[i] == null ? 0 : choices[i]];
+      if (!opt || opt.kind === 'skip') return;
+      var entry = texts[opt.path];
+      var lines = entry.text.split('\n');
+      var f = byFile[opt.path] || (byFile[opt.path] = { text: entry.text, edits: [] });
+      if (opt.kind === 'replace') {
+        var t = opt.target;
+        f.edits.push({
+          start: item.hasDoc ? t.doc_start_line : t.start_line, end: t.end_line,
+          lines: reindent(item.lines, item.base, indentOf(lines[t.start_line - 1]))
+        });
+      } else {
+        var unit = /^\t/m.test(entry.text) ? '\t' : '  ';
+        var at = opt.owner.end_line;
+        var indent = indentOf(lines[at - 1]) + unit;
+        // Pasted methods are public: landing after `private` would hide a controller action.
+        for (var v = opt.owner.start_line; v < opt.owner.end_line - 1; v++) {
+          if (/^\s*(private|protected)\s*(#.*)?$/.test(lines[v])) { at = v + 1; indent = indentOf(lines[v]); break; }
+        }
+        var prev = lines[at - 2];
+        var body = reindent(item.lines, item.base, indent);
+        if (at !== opt.owner.end_line) body.push('');
+        if (at - 1 !== opt.owner.start_line && prev && prev.trim() !== '') body.unshift('');
+        f.edits.push({ start: at, end: at - 1, lines: body });
+      }
+    });
+    return byFile;
+  }
+
+  function applyToText(text, edits) {
+    var lines = text.split('\n');
+    edits.slice().sort(function (a, b) { return b.start - a.start; }).forEach(function (e) {
+      lines.splice.apply(lines, [e.start - 1, e.end - e.start + 1].concat(e.lines));
+    });
+    return lines.join('\n');
+  }
+
+  function waitForModel(path) {
+    var tries = 0;
+    return new Promise(function (resolve, reject) {
+      (function poll() {
+        var e = window.__mbeditorModels && window.__mbeditorModels[path];
+        if (e && e.model && !e.model.isDisposed() && e.cleanVersionId != null) return resolve(e.model);
+        if (++tries > 100) return reject(new Error('Could not open ' + path));
+        setTimeout(poll, 50);
+      })();
+    });
+  }
+
+  function applyEdits(byFile) {
+    var paths = Object.keys(byFile);
+    paths.forEach(function (p) { TabManager.openTab(p, p.split('/').pop()); });
+    return Promise.all(paths.map(waitForModel)).then(function (models) {
+      models.forEach(function (model, i) {
+        if (model.getValue().replace(/\r\n/g, '\n') !== byFile[paths[i]].text.replace(/\r\n/g, '\n')) {
+          throw new Error(paths[i] + ' changed since the preview. Run Find placement again.');
+        }
+      });
+      models.forEach(function (model, i) {
+        var eol = model.getEOL();
+        var ops = byFile[paths[i]].edits.map(function (e) {
+          var range = e.end < e.start
+            ? new window.monaco.Range(e.start, 1, e.start, 1)
+            : new window.monaco.Range(e.start, 1, e.end, model.getLineMaxColumn(e.end));
+          return { range: range, text: e.end < e.start ? e.lines.join(eol) + eol : e.lines.join(eol) };
+        });
+        model.pushStackElement();
+        model.pushEditOperations([], ops, function () { return null; });
+        model.pushStackElement();
+      });
+    });
+  }
+
+  var Modal = function PastePlaceModal(props) {
+    var modalRef = useRef(null);
+    var _c = useState('');
+    var code = _c[0]; var setCode = _c[1];
+    var _p = useState(null);
+    var plan = _p[0]; var setPlan = _p[1];
+    var _ch = useState({});
+    var choices = _ch[0]; var setChoices = _ch[1];
+    var _b = useState(false);
+    var busy = _b[0]; var setBusy = _b[1];
+    var _e = useState(null);
+    var error = _e[0]; var setError = _e[1];
+
+    window.useModalFocusTrap(modalRef, props.onClose);
+
+    var byFile = useMemo(function () {
+      return plan ? buildEdits(plan.items, choices, plan.texts) : {};
+    }, [plan, choices]);
+    var files = Object.keys(byFile);
+
+    var find = function () {
+      setBusy(true); setError(null);
+      findPlacement(code).then(function (p) {
+        // texts holds promises; settle them into { text, info } for synchronous use.
+        var paths = Object.keys(p.texts);
+        return Promise.all(paths.map(function (k) { return p.texts[k]; })).then(function (vals) {
+          var settled = {};
+          paths.forEach(function (k, i) { settled[k] = vals[i]; });
+          setPlan({ items: p.items, texts: settled });
+          setChoices({});
+        });
+      }).then(function () { setBusy(false); }, function (err) { setBusy(false); setError(err.message || 'Failed'); });
+    };
+
+    var apply = function () {
+      setBusy(true); setError(null);
+      applyEdits(Object.keys(byFile).reduce(function (acc, p) {
+        acc[p] = { text: byFile[p].text, edits: byFile[p].edits };
+        return acc;
+      }, {})).then(function () {
+        EditorStore.setStatus('Pasted into ' + files.length + ' file' + (files.length === 1 ? '' : 's') + ' (unsaved)', 'info');
+        props.onClose();
+      }, function (err) { setBusy(false); setError(err.message || 'Failed'); });
+    };
+
+    var h = React.createElement;
+    return h('div', { className: 'schema-modal-overlay', onClick: props.onClose },
+      h('div', {
+        ref: modalRef, className: 'schema-modal paste-place-modal', role: 'dialog', 'aria-modal': 'true',
+        'aria-label': 'Paste and place', tabIndex: -1, onClick: function (e) { e.stopPropagation(); }
+      },
+        h('div', { className: 'schema-modal-header' }, h('div', { className: 'schema-modal-title' }, 'Paste & Place')),
+        h('div', { className: 'schema-modal-body paste-place-body' },
+          !plan && h('textarea', {
+            className: 'paste-place-input', value: code, spellCheck: false, rows: 14,
+            placeholder: 'Paste Ruby methods here, or a class/module that wraps them.',
+            onChange: function (e) { setCode(e.target.value); }
+          }),
+          error && h('div', { className: 'paste-place-error' }, error),
+          plan && plan.items.map(function (item, i) {
+            return h('div', { key: i, className: 'paste-place-row' },
+              h('span', { className: 'paste-place-name' }, (item.m.owner ? item.m.owner : '') + (item.m.singleton ? '.' : '#') + item.m.name),
+              h('select', {
+                value: choices[i] == null ? 0 : choices[i],
+                onChange: function (e) { var v = +e.target.value; setChoices(function (prev) { var o = Object.assign({}, prev); o[i] = v; return o; }); }
+              }, item.options.map(function (o, k) { return h('option', { key: k, value: k }, o.label); }))
+            );
+          }),
+          plan && files.map(function (p) {
+            return h('div', { key: p, className: 'paste-place-diff' },
+              h(window.DiffViewer, {
+                path: p, original: byFile[p].text, modified: applyToText(byFile[p].text, byFile[p].edits),
+                isDark: props.isDark, editorPrefs: props.editorPrefs
+              }));
+          }),
+          plan && files.length === 0 && h('div', { className: 'combined-note' }, 'Nothing to apply.')
+        ),
+        h('div', { className: 'import-conflict-actions' },
+          h('button', { type: 'button', className: 'import-conflict-btn', onClick: plan ? function () { setPlan(null); setError(null); } : props.onClose }, plan ? 'Back' : 'Cancel'),
+          plan
+            ? h('button', { type: 'button', className: 'import-conflict-btn import-conflict-btn-primary', disabled: busy || files.length === 0, onClick: apply }, 'Apply to editor')
+            : h('button', { type: 'button', className: 'import-conflict-btn import-conflict-btn-primary', disabled: busy || !code.trim(), onClick: find }, busy ? 'Searching...' : 'Find placement')
+        )
+      )
+    );
+  };
+
+  return Modal;
+})();
+
+window.PastePlaceModal = PastePlaceModal;