@vuu-ui/vuu-codemirror 0.7.5-debug → 0.7.6-debug

package/cjs/index.js

@@ -74,11 +74,6 @@ module.exports = __toCommonJS(src_exports);
 
 // ../../node_modules/@codemirror/state/dist/index.js
 var Text = class {
-  /**
-  @internal
-  */
-  constructor() {
-  }
   /**
   Get the line description around the given position.
   */
@@ -194,7 +189,8 @@ var Text = class {
     return new LineCursor(inner);
   }
   /**
-  @internal
+  Return the document as a string, using newline characters to
+  separate lines.
   */
   toString() {
     return this.sliceString(0);
@@ -209,6 +205,11 @@ var Text = class {
     return lines;
   }
   /**
+  @internal
+  */
+  constructor() {
+  }
+  /**
   Create a `Text` instance for the given array of lines.
   */
   static of(text) {
@@ -2026,7 +2027,10 @@ var StateEffect = class {
   }
   /**
   Define a new effect type. The type parameter indicates the type
-  of values that his effect holds.
+  of values that his effect holds. It should be a type that
+  doesn't include `undefined`, since that is used in
+  [mapping](https://codemirror.net/6/docs/ref/#state.StateEffect.map) to indicate that an effect is
+  removed.
   */
   static define(spec = {}) {
     return new StateEffectType(spec.map || ((v) => v));
@@ -2970,6 +2974,18 @@ function lazySort(ranges) {
 }
 RangeSet.empty.nextLayer = RangeSet.empty;
 var RangeSetBuilder = class {
+  finishChunk(newArrays) {
+    this.chunks.push(new Chunk(this.from, this.to, this.value, this.maxPoint));
+    this.chunkPos.push(this.chunkStart);
+    this.chunkStart = -1;
+    this.setMaxPoint = Math.max(this.setMaxPoint, this.maxPoint);
+    this.maxPoint = -1;
+    if (newArrays) {
+      this.from = [];
+      this.to = [];
+      this.value = [];
+    }
+  }
   /**
   Create an empty builder.
   */
@@ -2987,18 +3003,6 @@ var RangeSetBuilder = class {
     this.setMaxPoint = -1;
     this.nextLayer = null;
   }
-  finishChunk(newArrays) {
-    this.chunks.push(new Chunk(this.from, this.to, this.value, this.maxPoint));
-    this.chunkPos.push(this.chunkStart);
-    this.chunkStart = -1;
-    this.setMaxPoint = Math.max(this.setMaxPoint, this.maxPoint);
-    this.maxPoint = -1;
-    if (newArrays) {
-      this.from = [];
-      this.to = [];
-      this.value = [];
-    }
-  }
   /**
   Add a range. Ranges should be added in sorted (by `from` and
   `value.startSide`) order.
@@ -3349,7 +3353,7 @@ function compare(a, startA, b, startB, length2, comparator) {
     let diff = a.to + dPos - b.to || a.endSide - b.endSide;
     let end = diff < 0 ? a.to + dPos : b.to, clipEnd = Math.min(end, endB);
     if (a.point || b.point) {
-      if (!(a.point && b.point && (a.point == b.point || a.point.eq(b.point)) && sameValues(a.activeForPoint(a.to + dPos), b.activeForPoint(b.to))))
+      if (!(a.point && b.point && (a.point == b.point || a.point.eq(b.point)) && sameValues(a.activeForPoint(a.to), b.activeForPoint(b.to))))
         comparator.comparePoint(pos, clipEnd, a.point, b.point);
     } else {
       if (clipEnd > pos && !sameValues(a.active, b.active))
@@ -3489,19 +3493,21 @@ var StyleModule = class {
     (root[SET] || new StyleSet(root)).mount(Array.isArray(modules) ? modules : [modules]);
   }
 };
-var adoptedSet = null;
+var adoptedSet = /* @__PURE__ */ new Map();
 var StyleSet = class {
   constructor(root) {
-    if (!root.head && root.adoptedStyleSheets && typeof CSSStyleSheet != "undefined") {
-      if (adoptedSet) {
-        root.adoptedStyleSheets = [adoptedSet.sheet, ...root.adoptedStyleSheets];
-        return root[SET] = adoptedSet;
-      }
-      this.sheet = new CSSStyleSheet();
+    let doc2 = root.ownerDocument || root, win = doc2.defaultView;
+    if (!root.head && root.adoptedStyleSheets && win.CSSStyleSheet) {
+      let adopted = adoptedSet.get(doc2);
+      if (adopted) {
+        root.adoptedStyleSheets = [adopted.sheet, ...root.adoptedStyleSheets];
+        return root[SET] = adopted;
+      }
+      this.sheet = new win.CSSStyleSheet();
       root.adoptedStyleSheets = [this.sheet, ...root.adoptedStyleSheets];
-      adoptedSet = this;
+      adoptedSet.set(doc2, this);
     } else {
-      this.styleTag = (root.ownerDocument || root).createElement("style");
+      this.styleTag = doc2.createElement("style");
       let target = root.head || root;
       target.insertBefore(this.styleTag, target.firstChild);
     }
@@ -3539,7 +3545,7 @@ var StyleSet = class {
   }
 };
 
-// ../../node_modules/w3c-keyname/index.es.js
+// ../../node_modules/w3c-keyname/index.js
 var base = {
   8: "Backspace",
   9: "Tab",
@@ -3620,11 +3626,8 @@ var shift = {
   221: "}",
   222: '"'
 };
-var chrome = typeof navigator != "undefined" && /Chrome\/(\d+)/.exec(navigator.userAgent);
-var gecko = typeof navigator != "undefined" && /Gecko\/\d+/.test(navigator.userAgent);
 var mac = typeof navigator != "undefined" && /Mac/.test(navigator.platform);
 var ie = typeof navigator != "undefined" && /MSIE \d|Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
-var brokenModifierNames = mac || chrome && +chrome[1] < 57;
 for (i = 0; i < 10; i++)
   base[48 + i] = base[96 + i] = String(i);
 var i;
@@ -3641,7 +3644,7 @@ for (code in base)
     shift[code] = base[code];
 var code;
 function keyName(event) {
-  var ignoreKey = brokenModifierNames && (event.ctrlKey || event.altKey || event.metaKey) || ie && event.shiftKey && event.key && event.key.length == 1 || event.key == "Unidentified";
+  var ignoreKey = mac && event.metaKey && event.shiftKey && !event.ctrlKey && !event.altKey || ie && event.shiftKey && event.key && event.key.length == 1 || event.key == "Unidentified";
   var name = !ignoreKey && event.key || (event.shiftKey ? shift : base)[event.keyCode] || event.key || "Unidentified";
   if (name == "Esc")
     name = "Escape";
@@ -3729,7 +3732,6 @@ function scanFor(node, off, targetNode, targetOff, dir) {
 function maxOffset(node) {
   return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
 }
-var Rect0 = { left: 0, right: 0, top: 0, bottom: 0 };
 function flattenRect(rect, left) {
   let x = left ? rect.left : rect.right;
   return { left: x, right: x, top: rect.top, bottom: rect.bottom };
@@ -3857,7 +3859,8 @@ var DOMSelectionState = class {
     return this.anchorNode == domSel.anchorNode && this.anchorOffset == domSel.anchorOffset && this.focusNode == domSel.focusNode && this.focusOffset == domSel.focusOffset;
   }
   setRange(range) {
-    this.set(range.anchorNode, range.anchorOffset, range.focusNode, range.focusOffset);
+    let { anchorNode, focusNode } = range;
+    this.set(anchorNode, Math.min(range.anchorOffset, anchorNode ? maxOffset(anchorNode) : 0), focusNode, Math.min(range.focusOffset, focusNode ? maxOffset(focusNode) : 0));
   }
   set(anchorNode, anchorOffset, focusNode, focusOffset) {
     this.anchorNode = anchorNode;
@@ -3928,6 +3931,7 @@ function atElementStart(doc2, selection) {
   let node = selection.focusNode, offset = selection.focusOffset;
   if (!node || selection.anchorNode != node || selection.anchorOffset != offset)
     return false;
+  offset = Math.min(offset, maxOffset(node));
   for (; ; ) {
     if (offset) {
       if (node.nodeType != 1)
@@ -3988,12 +3992,6 @@ var ContentView = class {
   posAfter(view) {
     return this.posBefore(view) + view.length;
   }
-  // Will return a rectangle directly before (when side < 0), after
-  // (side > 0) or directly on (when the browser supports it) the
-  // given position.
-  coordsAt(_pos, _side) {
-    return null;
-  }
   sync(view, track) {
     if (this.dirty & 2) {
       let parent = this.dom;
@@ -4166,6 +4164,9 @@ var ContentView = class {
   get isWidget() {
     return false;
   }
+  get isHidden() {
+    return false;
+  }
   merge(from, to, source, hasStart, openStart, openEnd) {
     return false;
   }
@@ -4283,8 +4284,8 @@ var ie_edge = /* @__PURE__ */ /Edge\/(\d+)/.exec(nav.userAgent);
 var ie_upto10 = /* @__PURE__ */ /MSIE \d/.test(nav.userAgent);
 var ie_11up = /* @__PURE__ */ /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(nav.userAgent);
 var ie2 = !!(ie_upto10 || ie_11up || ie_edge);
-var gecko2 = !ie2 && /* @__PURE__ */ /gecko\/(\d+)/i.test(nav.userAgent);
-var chrome2 = !ie2 && /* @__PURE__ */ /Chrome\/(\d+)/.exec(nav.userAgent);
+var gecko = !ie2 && /* @__PURE__ */ /gecko\/(\d+)/i.test(nav.userAgent);
+var chrome = !ie2 && /* @__PURE__ */ /Chrome\/(\d+)/.exec(nav.userAgent);
 var webkit = "webkitFontSmoothing" in doc.documentElement.style;
 var safari = !ie2 && /* @__PURE__ */ /Apple Computer/.test(nav.vendor);
 var ios = safari && (/* @__PURE__ */ /Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2);
@@ -4294,10 +4295,10 @@ var browser = {
   linux: /* @__PURE__ */ /Linux|X11/.test(nav.platform),
   ie: ie2,
   ie_version: ie_upto10 ? doc.documentMode || 6 : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0,
-  gecko: gecko2,
-  gecko_version: gecko2 ? +(/* @__PURE__ */ /Firefox\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
-  chrome: !!chrome2,
-  chrome_version: chrome2 ? +chrome2[1] : 0,
+  gecko,
+  gecko_version: gecko ? +(/* @__PURE__ */ /Firefox\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
+  chrome: !!chrome,
+  chrome_version: chrome ? +chrome[1] : 0,
   ios,
   android: /* @__PURE__ */ /Android\b/.test(nav.userAgent),
   webkit,
@@ -4443,7 +4444,7 @@ function textCoords(text, pos, side) {
   }
   let rects = textRange(text, from, to).getClientRects();
   if (!rects.length)
-    return Rect0;
+    return null;
   let rect = rects[(flatten2 ? flatten2 < 0 : side >= 0) ? 0 : rects.length - 1];
   if (browser.safari && !flatten2 && rect.width == 0)
     rect = Array.prototype.find.call(rects, (r) => r.width) || rect;
@@ -4484,15 +4485,14 @@ var WidgetView = class extends ContentView {
     return true;
   }
   become(other) {
-    if (other.length == this.length && other instanceof WidgetView && other.side == this.side) {
-      if (this.widget.constructor == other.widget.constructor) {
-        if (!this.widget.eq(other.widget))
-          this.markDirty(true);
-        if (this.dom && !this.prevWidget)
-          this.prevWidget = this.widget;
-        this.widget = other.widget;
-        return true;
-      }
+    if (other instanceof WidgetView && other.side == this.side && this.widget.constructor == other.widget.constructor) {
+      if (!this.widget.compare(other.widget))
+        this.markDirty(true);
+      if (this.dom && !this.prevWidget)
+        this.prevWidget = this.widget;
+      this.widget = other.widget;
+      this.length = other.length;
+      return true;
     }
     return false;
   }
@@ -4512,21 +4512,25 @@ var WidgetView = class extends ContentView {
     return text ? text.slice(start, start + this.length) : Text.empty;
   }
   domAtPos(pos) {
-    return pos == 0 ? DOMPos.before(this.dom) : DOMPos.after(this.dom, pos == this.length);
+    return (this.length ? pos == 0 : this.side > 0) ? DOMPos.before(this.dom) : DOMPos.after(this.dom, pos == this.length);
   }
   domBoundsAround() {
     return null;
   }
   coordsAt(pos, side) {
+    let custom = this.widget.coordsAt(this.dom, pos, side);
+    if (custom)
+      return custom;
     let rects = this.dom.getClientRects(), rect = null;
     if (!rects.length)
-      return Rect0;
-    for (let i = pos > 0 ? rects.length - 1 : 0; ; i += pos > 0 ? -1 : 1) {
+      return null;
+    let fromBack = this.side ? this.side < 0 : pos > 0;
+    for (let i = fromBack ? rects.length - 1 : 0; ; i += fromBack ? -1 : 1) {
       rect = rects[i];
       if (pos > 0 ? i == 0 : i == rects.length - 1 || rect.top < rect.bottom)
         break;
     }
-    return this.length ? rect : flattenRect(rect, this.side > 0);
+    return this.length ? rect : flattenRect(rect, !fromBack);
   }
   get isEditable() {
     return false;
@@ -4534,6 +4538,9 @@ var WidgetView = class extends ContentView {
   get isWidget() {
     return true;
   }
+  get isHidden() {
+    return this.widget.isHidden;
+  }
   destroy() {
     super.destroy();
     if (this.dom)
@@ -4545,7 +4552,7 @@ var CompositionView = class extends WidgetView {
     let { topView, text } = this.widget;
     if (!topView)
       return new DOMPos(text, Math.min(pos, text.nodeValue.length));
-    return scanCompositionTree(pos, 0, topView, text, (v, p) => v.domAtPos(p), (p) => new DOMPos(text, Math.min(p, text.nodeValue.length)));
+    return scanCompositionTree(pos, 0, topView, text, this.length - topView.length, (v, p) => v.domAtPos(p), (text2, p) => new DOMPos(text2, Math.min(p, text2.nodeValue.length)));
   }
   sync() {
     this.setDOM(this.widget.toDOM());
@@ -4554,7 +4561,7 @@ var CompositionView = class extends WidgetView {
     let { topView, text } = this.widget;
     if (!topView)
       return Math.min(offset, this.length);
-    return posFromDOMInCompositionTree(node, offset, topView, text);
+    return posFromDOMInCompositionTree(node, offset, topView, text, this.length - topView.length);
   }
   ignoreMutation() {
     return false;
@@ -4566,7 +4573,7 @@ var CompositionView = class extends WidgetView {
     let { topView, text } = this.widget;
     if (!topView)
       return textCoords(text, pos, side);
-    return scanCompositionTree(pos, side, topView, text, (v, pos2, side2) => v.coordsAt(pos2, side2), (pos2, side2) => textCoords(text, pos2, side2));
+    return scanCompositionTree(pos, side, topView, text, this.length - topView.length, (v, pos2, side2) => v.coordsAt(pos2, side2), (text2, pos2, side2) => textCoords(text2, pos2, side2));
   }
   destroy() {
     var _a2;
@@ -4580,39 +4587,87 @@ var CompositionView = class extends WidgetView {
     return true;
   }
 };
-function scanCompositionTree(pos, side, view, text, enterView, fromText) {
+function scanCompositionTree(pos, side, view, text, dLen, enterView, fromText) {
   if (view instanceof MarkView) {
     for (let child = view.dom.firstChild; child; child = child.nextSibling) {
       let desc = ContentView.get(child);
-      if (!desc)
-        return fromText(pos, side);
-      let hasComp = contains(child, text);
-      let len = desc.length + (hasComp ? text.nodeValue.length : 0);
-      if (pos < len || pos == len && desc.getSide() <= 0)
-        return hasComp ? scanCompositionTree(pos, side, desc, text, enterView, fromText) : enterView(desc, pos, side);
-      pos -= len;
+      if (!desc) {
+        let inner = scanCompositionNode(pos, side, child, fromText);
+        if (typeof inner != "number")
+          return inner;
+        pos = inner;
+      } else {
+        let hasComp = contains(child, text);
+        let len = desc.length + (hasComp ? dLen : 0);
+        if (pos < len || pos == len && desc.getSide() <= 0)
+          return hasComp ? scanCompositionTree(pos, side, desc, text, dLen, enterView, fromText) : enterView(desc, pos, side);
+        pos -= len;
+      }
     }
     return enterView(view, view.length, -1);
   } else if (view.dom == text) {
-    return fromText(pos, side);
+    return fromText(text, pos, side);
   } else {
     return enterView(view, pos, side);
   }
 }
-function posFromDOMInCompositionTree(node, offset, view, text) {
+function scanCompositionNode(pos, side, node, fromText) {
+  if (node.nodeType == 3) {
+    let len = node.nodeValue.length;
+    if (pos <= len)
+      return fromText(node, pos, side);
+    pos -= len;
+  } else if (node.nodeType == 1 && node.contentEditable != "false") {
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+      let inner = scanCompositionNode(pos, side, child, fromText);
+      if (typeof inner != "number")
+        return inner;
+      pos = inner;
+    }
+  }
+  return pos;
+}
+function posFromDOMInCompositionTree(node, offset, view, text, dLen) {
   if (view instanceof MarkView) {
     let pos = 0;
-    for (let child of view.children) {
-      let hasComp = contains(child.dom, text);
-      if (contains(child.dom, node))
-        return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, child, text) : child.localPosFromDOM(node, offset));
-      pos += hasComp ? text.nodeValue.length : child.length;
+    for (let child = view.dom.firstChild; child; child = child.nextSibling) {
+      let childView = ContentView.get(child);
+      if (childView) {
+        let hasComp = contains(child, text);
+        if (contains(child, node))
+          return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, childView, text, dLen) : childView.localPosFromDOM(node, offset));
+        pos += childView.length + (hasComp ? dLen : 0);
+      } else {
+        let inner = posFromDOMInOpaqueNode(node, offset, child);
+        if (inner.result != null)
+          return pos + inner.result;
+        pos += inner.size;
+      }
     }
   } else if (view.dom == text) {
     return Math.min(offset, text.nodeValue.length);
   }
   return view.localPosFromDOM(node, offset);
 }
+function posFromDOMInOpaqueNode(node, offset, target) {
+  if (target.nodeType == 3) {
+    return node == target ? { result: offset } : { size: target.nodeValue.length };
+  } else if (target.nodeType == 1 && target.contentEditable != "false") {
+    let pos = 0;
+    for (let child = target.firstChild, i = 0; ; child = child.nextSibling, i++) {
+      if (node == target && i == offset)
+        return { result: pos };
+      if (!child)
+        return { size: pos };
+      let inner = posFromDOMInOpaqueNode(node, offset, child);
+      if (inner.result != null)
+        return { result: offset + inner.result };
+      pos += inner.size;
+    }
+  } else {
+    return target.contains(node) ? { result: 0 } : { size: 0 };
+  }
+}
 var WidgetBufferView = class extends ContentView {
   constructor(side) {
     super();
@@ -4651,38 +4706,16 @@ var WidgetBufferView = class extends ContentView {
     return null;
   }
   coordsAt(pos) {
-    let imgRect = this.dom.getBoundingClientRect();
-    let siblingRect = inlineSiblingRect(this, this.side > 0 ? -1 : 1);
-    return siblingRect && siblingRect.top < imgRect.bottom && siblingRect.bottom > imgRect.top ? { left: imgRect.left, right: imgRect.right, top: siblingRect.top, bottom: siblingRect.bottom } : imgRect;
+    return this.dom.getBoundingClientRect();
   }
   get overrideDOMText() {
     return Text.empty;
   }
+  get isHidden() {
+    return true;
+  }
 };
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
-function inlineSiblingRect(view, side) {
-  let parent = view.parent, index = parent ? parent.children.indexOf(view) : -1;
-  while (parent && index >= 0) {
-    if (side < 0 ? index > 0 : index < parent.children.length) {
-      let next = parent.children[index + side];
-      if (next instanceof TextView) {
-        let nextRect = next.coordsAt(side < 0 ? next.length : 0, side);
-        if (nextRect)
-          return nextRect;
-      }
-      index += side;
-    } else if (parent instanceof MarkView && parent.parent) {
-      index = parent.parent.children.indexOf(parent) + (side < 0 ? 0 : 1);
-      parent = parent.parent;
-    } else {
-      let last = parent.dom.lastChild;
-      if (last && last.nodeName == "BR")
-        return last.getClientRects()[0];
-      break;
-    }
-  }
-  return void 0;
-}
 function inlineDOMAtPos(parent, pos) {
   let dom = parent.dom, { children } = parent, i = 0;
   for (let off = 0; i < children.length; i++) {
@@ -4725,10 +4758,10 @@ function coordsInChildren(view, pos, side) {
       if (end >= pos2) {
         if (child.children.length) {
           scan(child, pos2 - off);
-        } else if (!after && (end > pos2 || off == end && child.getSide() > 0)) {
+        } else if ((!after || after.isHidden && side > 0) && (end > pos2 || off == end && child.getSide() > 0)) {
           after = child;
           afterPos = pos2 - off;
-        } else if (off < pos2 || off == end && child.getSide() < 0) {
+        } else if (off < pos2 || off == end && child.getSide() < 0 && !child.isHidden) {
           before = child;
           beforePos = pos2 - off;
         }
@@ -4827,6 +4860,15 @@ var WidgetType = class {
     return -1;
   }
   /**
+  For inline widgets that are displayed inline (as opposed to
+  `inline-block`) and introduce line breaks (through `<br>` tags
+  or textual newlines), this must indicate the amount of line
+  breaks they introduce. Defaults to 0.
+  */
+  get lineBreaks() {
+    return 0;
+  }
+  /**
   Can be used to configure which kinds of events inside the widget
   should be ignored by the editor. The default is to ignore all
   events.
@@ -4835,12 +4877,28 @@ var WidgetType = class {
     return true;
   }
   /**
+  Override the way screen coordinates for positions at/in the
+  widget are found. `pos` will be the offset into the widget, and
+  `side` the side of the position that is being queried—less than
+  zero for before, greater than zero for after, and zero for
+  directly at that position.
+  */
+  coordsAt(dom, pos, side) {
+    return null;
+  }
+  /**
   @internal
   */
   get customView() {
     return null;
   }
   /**
+  @internal
+  */
+  get isHidden() {
+    return false;
+  }
+  /**
   This is called when the an instance of the widget is removed
   from the editor view.
   */
@@ -4885,7 +4943,7 @@ var Decoration = class extends RangeValue {
   given position.
   */
   static widget(spec) {
-    let side = spec.side || 0, block = !!spec.block;
+    let side = Math.max(-1e4, Math.min(1e4, spec.side || 0)), block = !!spec.block;
     side += block ? side > 0 ? 3e8 : -4e8 : side > 0 ? 1e8 : -1e8;
     return new PointDecoration(spec, side, side, block, spec.widget || null, false);
   }
@@ -4973,7 +5031,7 @@ var PointDecoration = class extends Decoration {
     return this.startSide < this.endSide ? BlockType.WidgetRange : this.startSide <= 0 ? BlockType.WidgetBefore : BlockType.WidgetAfter;
   }
   get heightRelevant() {
-    return this.block || !!this.widget && this.widget.estimatedHeight >= 5;
+    return this.block || !!this.widget && (this.widget.estimatedHeight >= 5 || this.widget.lineBreaks > 0);
   }
   eq(other) {
     return other instanceof PointDecoration && widgetsEq(this.widget, other.widget) && this.block == other.block && this.startSide == other.startSide && this.endSide == other.endSide;
@@ -5205,13 +5263,14 @@ var BlockWidgetView = class extends ContentView {
     return null;
   }
   become(other) {
-    if (other instanceof BlockWidgetView && other.type == this.type && other.widget.constructor == this.widget.constructor) {
-      if (!other.widget.eq(this.widget))
+    if (other instanceof BlockWidgetView && other.widget.constructor == this.widget.constructor) {
+      if (!other.widget.compare(this.widget))
         this.markDirty(true);
       if (this.dom && !this.prevWidget)
         this.prevWidget = this.widget;
       this.widget = other.widget;
       this.length = other.length;
+      this.type = other.type;
       this.breakAfter = other.breakAfter;
       return true;
     }
@@ -5229,6 +5288,9 @@ var BlockWidgetView = class extends ContentView {
   get isWidget() {
     return true;
   }
+  coordsAt(pos, side) {
+    return this.widget.coordsAt(this.dom, pos, side);
+  }
   destroy() {
     super.destroy();
     if (this.dom)
@@ -5314,7 +5376,7 @@ var ContentBuilder = class {
         this.text.length - this.textOff,
         length2,
         512
-        /* T.Chunk */
+        /* Chunk */
       );
       this.flushBuffer(active.slice(active.length - openStart));
       this.getLine().append(wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
@@ -5349,7 +5411,7 @@ var ContentBuilder = class {
         let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
         let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
         let line = this.getLine();
-        if (this.pendingBuffer == 2 && !cursorBefore)
+        if (this.pendingBuffer == 2 && !cursorBefore && !view.isEditable)
           this.pendingBuffer = 0;
         this.flushBuffer(active);
         if (cursorBefore) {
@@ -5406,6 +5468,9 @@ var NullWidget = class extends WidgetType {
   updateDOM(elt) {
     return elt.nodeName.toLowerCase() == this.tag;
   }
+  get isHidden() {
+    return true;
+  }
 };
 var clickAddsSelectionRange = /* @__PURE__ */ Facet.define();
 var dragMovesSelection$1 = /* @__PURE__ */ Facet.define();
@@ -5534,6 +5599,23 @@ var contentAttributes = /* @__PURE__ */ Facet.define();
 var decorations = /* @__PURE__ */ Facet.define();
 var atomicRanges = /* @__PURE__ */ Facet.define();
 var scrollMargins = /* @__PURE__ */ Facet.define();
+function getScrollMargins(view) {
+  let left = 0, right = 0, top2 = 0, bottom = 0;
+  for (let source of view.state.facet(scrollMargins)) {
+    let m = source(view);
+    if (m) {
+      if (m.left != null)
+        left = Math.max(left, m.left);
+      if (m.right != null)
+        right = Math.max(right, m.right);
+      if (m.top != null)
+        top2 = Math.max(top2, m.top);
+      if (m.bottom != null)
+        bottom = Math.max(bottom, m.bottom);
+    }
+  }
+  return { left, right, top: top2, bottom };
+}
 var styleModule = /* @__PURE__ */ Facet.define();
 var ChangedRange = class {
   constructor(fromA, toA, fromB, toB) {
@@ -5893,12 +5975,13 @@ var DOMReader = class {
     let parent = start.parentNode;
     for (let cur2 = start; ; ) {
       this.findPointBefore(parent, cur2);
+      let oldLen = this.text.length;
       this.readNode(cur2);
       let next = cur2.nextSibling;
       if (next == end)
         break;
       let view = ContentView.get(cur2), nextView = ContentView.get(next);
-      if (view && nextView ? view.breakAfter : (view ? view.breakAfter : isBlockElement(cur2)) || isBlockElement(next) && (cur2.nodeName != "BR" || cur2.cmIgnore))
+      if (view && nextView ? view.breakAfter : (view ? view.breakAfter : isBlockElement(cur2)) || isBlockElement(next) && (cur2.nodeName != "BR" || cur2.cmIgnore) && this.text.length > oldLen)
         this.lineBreak();
       cur2 = next;
     }
@@ -5997,10 +6080,7 @@ var DocView = class extends ContentView {
   get length() {
     return this.view.state.doc.length;
   }
-  // Update the document view to a given state. scrollIntoView can be
-  // used as a hint to compute a new viewport that includes that
-  // position, if we know the editor is going to scroll that position
-  // into view.
+  // Update the document view to a given state.
   update(update) {
     let changedRanges = update.changedRanges;
     if (this.minWidth > 0 && changedRanges.length) {
@@ -6070,14 +6150,16 @@ var DocView = class extends ContentView {
   updateSelection(mustRead = false, fromPointer = false) {
     if (mustRead || !this.view.observer.selectionRange.focusNode)
       this.view.observer.readSelectionRange();
-    if (!(fromPointer || this.mayControlSelection()))
+    let activeElt = this.view.root.activeElement, focused = activeElt == this.dom;
+    let selectionNotFocus = !focused && hasSelection(this.dom, this.view.observer.selectionRange) && !(activeElt && this.dom.contains(activeElt));
+    if (!(focused || fromPointer || selectionNotFocus))
       return;
     let force = this.forceSelection;
     this.forceSelection = false;
     let main = this.view.state.selection.main;
     let anchor = this.domAtPos(main.anchor);
     let head = main.empty ? anchor : this.domAtPos(main.head);
-    if (browser.gecko && main.empty && betweenUneditable(anchor)) {
+    if (browser.gecko && main.empty && !this.compositionDeco.size && betweenUneditable(anchor)) {
       let dummy = document.createTextNode("");
       this.view.observer.ignore(() => anchor.node.insertBefore(dummy, anchor.node.childNodes[anchor.offset] || null));
       anchor = head = new DOMPos(dummy, 0);
@@ -6120,6 +6202,11 @@ var DocView = class extends ContentView {
           rawSel.removeAllRanges();
           rawSel.addRange(range);
         }
+        if (selectionNotFocus && this.view.root.activeElement == this.dom) {
+          this.dom.blur();
+          if (activeElt)
+            activeElt.focus();
+        }
       });
       this.view.observer.setSelectionRange(anchor, head);
     }
@@ -6151,10 +6238,6 @@ var DocView = class extends ContentView {
     if (view.docView.posFromDOM(newRange.anchorNode, newRange.anchorOffset) != cursor.from)
       sel.collapse(anchorNode, anchorOffset);
   }
-  mayControlSelection() {
-    let active = this.view.root.activeElement;
-    return active == this.dom || hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
-  }
   nearest(dom) {
     for (let cur2 = dom; cur2; ) {
       let domView = ContentView.get(cur2);
@@ -6298,24 +6381,12 @@ var DocView = class extends ContentView {
         right: Math.max(rect.right, other.right),
         bottom: Math.max(rect.bottom, other.bottom)
       };
-    let mLeft = 0, mRight = 0, mTop = 0, mBottom = 0;
-    for (let margins of this.view.state.facet(scrollMargins).map((f) => f(this.view)))
-      if (margins) {
-        let { left, right, top: top2, bottom } = margins;
-        if (left != null)
-          mLeft = Math.max(mLeft, left);
-        if (right != null)
-          mRight = Math.max(mRight, right);
-        if (top2 != null)
-          mTop = Math.max(mTop, top2);
-        if (bottom != null)
-          mBottom = Math.max(mBottom, bottom);
-      }
+    let margins = getScrollMargins(this.view);
     let targetRect = {
-      left: rect.left - mLeft,
-      top: rect.top - mTop,
-      right: rect.right + mRight,
-      bottom: rect.bottom + mBottom
+      left: rect.left - margins.left,
+      top: rect.top - margins.top,
+      right: rect.right + margins.right,
+      bottom: rect.bottom + margins.bottom
     };
     scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, target.xMargin, target.yMargin, this.view.textDirection == Direction.LTR);
   }
@@ -6380,15 +6451,22 @@ function computeCompositionDeco(view, changes) {
     return Decoration.none;
   let { from, to, node, text: textNode } = surrounding;
   let newFrom = changes.mapPos(from, 1), newTo = Math.max(newFrom, changes.mapPos(to, -1));
-  let { state } = view, text = node.nodeType == 3 ? node.nodeValue : new DOMReader([], state).readRange(node.firstChild, null).text;
+  let { state } = view, reader = new DOMReader([], state);
+  if (node.nodeType == 3)
+    reader.readTextNode(node);
+  else
+    reader.readRange(node.firstChild, null);
+  let { text } = reader;
+  if (text.indexOf(LineBreakPlaceholder) > -1)
+    return Decoration.none;
   if (newTo - newFrom < text.length) {
-    if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length), LineBreakPlaceholder) == text)
+    if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
       newTo = newFrom + text.length;
-    else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo, LineBreakPlaceholder) == text)
+    else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo) == text)
       newFrom = newTo - text.length;
     else
       return Decoration.none;
-  } else if (state.doc.sliceString(newFrom, newTo, LineBreakPlaceholder) != text) {
+  } else if (state.doc.sliceString(newFrom, newTo) != text) {
     return Decoration.none;
   }
   let topView = ContentView.get(node);
@@ -6699,9 +6777,18 @@ function isSuspiciousChromeCaretResult(node, offset, x) {
   let rect = node.nodeType == 1 ? node.getBoundingClientRect() : textRange(node, 0, Math.max(node.nodeValue.length, 1)).getBoundingClientRect();
   return x - rect.left > 5;
 }
+function blockAt(view, pos) {
+  let line = view.lineBlockAt(pos);
+  if (Array.isArray(line.type))
+    for (let l of line.type) {
+      if (l.to > pos || l.to == pos && (l.to == line.to || l.type == BlockType.Text))
+        return l;
+    }
+  return line;
+}
 function moveToLineBoundary(view, start, forward, includeWrap) {
-  let line = view.state.doc.lineAt(start.head);
-  let coords = !includeWrap || !view.lineWrapping ? null : view.coordsAtPos(start.assoc < 0 && start.head > line.from ? start.head - 1 : start.head);
+  let line = blockAt(view, start.head);
+  let coords = !includeWrap || line.type != BlockType.Text || !(view.lineWrapping || line.widgetLineBreaks) ? null : view.coordsAtPos(start.assoc < 0 && start.head > line.from ? start.head - 1 : start.head);
   if (coords) {
     let editorRect = view.dom.getBoundingClientRect();
     let direction = view.textDirectionAt(line.from);
@@ -6712,9 +6799,7 @@ function moveToLineBoundary(view, start, forward, includeWrap) {
     if (pos != null)
       return EditorSelection.cursor(pos, forward ? -1 : 1);
   }
-  let lineView = LineView.find(view.docView, start.head);
-  let end = lineView ? forward ? lineView.posAtEnd : lineView.posAtStart : forward ? line.to : line.from;
-  return EditorSelection.cursor(end, forward ? -1 : 1);
+  return EditorSelection.cursor(forward ? line.to : line.from, forward ? -1 : 1);
 }
 function moveByChar(view, start, forward, by) {
   let line = view.state.doc.lineAt(start.head), spans = view.bidiSpans(line);
@@ -6775,15 +6860,15 @@ function moveVertically(view, start, forward, distance) {
       return EditorSelection.cursor(pos, start.assoc, void 0, goal);
   }
 }
-function skipAtoms(view, oldPos, pos) {
-  let atoms = view.state.facet(atomicRanges).map((f) => f(view));
+function skipAtomicRanges(atoms, pos, bias) {
   for (; ; ) {
-    let moved = false;
+    let moved = 0;
     for (let set of atoms) {
-      set.between(pos.from - 1, pos.from + 1, (from, to, value) => {
-        if (pos.from > from && pos.from < to) {
-          pos = oldPos.head > pos.from ? EditorSelection.cursor(from, 1) : EditorSelection.cursor(to, -1);
-          moved = true;
+      set.between(pos - 1, pos + 1, (from, to, value) => {
+        if (pos > from && pos < to) {
+          let side = moved || bias || (pos - from < to - pos ? -1 : 1);
+          pos = side < 0 ? from : to;
+          moved = side;
         }
       });
     }
@@ -6791,6 +6876,10 @@ function skipAtoms(view, oldPos, pos) {
       return pos;
   }
 }
+function skipAtoms(view, oldPos, pos) {
+  let newPos = skipAtomicRanges(view.state.facet(atomicRanges).map((f) => f(view)), pos.from, oldPos.head > pos.from ? -1 : 1);
+  return newPos == pos.from ? pos : EditorSelection.cursor(newPos, newPos < pos.from ? 1 : -1);
+}
 var InputState = class {
   constructor(view) {
     this.lastKeyCode = 0;
@@ -6811,6 +6900,8 @@ var InputState = class {
     this.composing = -1;
     this.compositionFirstChange = null;
     this.compositionEndedAt = 0;
+    this.compositionPendingKey = false;
+    this.compositionPendingChange = false;
     this.mouseSelection = null;
     let handleEvent = (handler, event) => {
       if (this.ignoreDuringComposition(event))
@@ -6842,6 +6933,10 @@ var InputState = class {
         }
       }
     });
+    view.scrollDOM.addEventListener("drop", (event) => {
+      if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
+        handleEvent(handlers.drop, event);
+    });
     if (browser.chrome && browser.chrome_version == 102) {
       view.scrollDOM.addEventListener("wheel", () => {
         if (this.chromeScrollHack < 0)
@@ -6914,6 +7009,8 @@ var InputState = class {
     this.lastKeyTime = Date.now();
     if (event.keyCode == 9 && Date.now() < this.lastEscPress + 2e3)
       return true;
+    if (event.keyCode != 27 && modifierCodes.indexOf(event.keyCode) < 0)
+      view.inputState.lastEscPress = 0;
     if (browser.android && browser.chrome && !event.synthetic && (event.keyCode == 13 || event.keyCode == 8)) {
       view.observer.delayAndroidKey(event.key, event.keyCode);
       return true;
@@ -6938,8 +7035,8 @@ var InputState = class {
       return false;
     if (this.composing > 0)
       return true;
-    if (browser.safari && !browser.ios && Date.now() - this.compositionEndedAt < 100) {
-      this.compositionEndedAt = 0;
+    if (browser.safari && !browser.ios && this.compositionPendingKey && Date.now() - this.compositionEndedAt < 100) {
+      this.compositionPendingKey = false;
       return true;
     }
     return false;
@@ -6970,8 +7067,9 @@ var PendingKeys = [
 ];
 var EmacsyPendingKeys = "dthko";
 var modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+var dragScrollMargin = 6;
 function dragScrollSpeed(dist) {
-  return dist * 0.7 + 8;
+  return Math.max(0, dist) * 0.7 + 8;
 }
 var MouseSelection = class {
   constructor(view, startEvent, style, mustSelect) {
@@ -6982,6 +7080,7 @@ var MouseSelection = class {
     this.scrolling = -1;
     this.lastEvent = startEvent;
     this.scrollParent = scrollableParent(view.contentDOM);
+    this.atoms = view.state.facet(atomicRanges).map((f) => f(view));
     let doc2 = view.contentDOM.ownerDocument;
     doc2.addEventListener("mousemove", this.move = this.move.bind(this));
     doc2.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -7005,13 +7104,14 @@ var MouseSelection = class {
     this.select(this.lastEvent = event);
     let sx = 0, sy = 0;
     let rect = ((_a2 = this.scrollParent) === null || _a2 === void 0 ? void 0 : _a2.getBoundingClientRect()) || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
-    if (event.clientX <= rect.left)
+    let margins = getScrollMargins(this.view);
+    if (event.clientX - margins.left <= rect.left + dragScrollMargin)
       sx = -dragScrollSpeed(rect.left - event.clientX);
-    else if (event.clientX >= rect.right)
+    else if (event.clientX + margins.right >= rect.right - dragScrollMargin)
       sx = dragScrollSpeed(event.clientX - rect.right);
-    if (event.clientY <= rect.top)
+    if (event.clientY - margins.top <= rect.top + dragScrollMargin)
       sy = -dragScrollSpeed(rect.top - event.clientY);
-    else if (event.clientY >= rect.bottom)
+    else if (event.clientY + margins.bottom >= rect.bottom - dragScrollMargin)
       sy = dragScrollSpeed(event.clientY - rect.bottom);
     this.setScrollSpeed(sx, sy);
   }
@@ -7049,9 +7149,31 @@ var MouseSelection = class {
     if (this.dragging === false)
       this.select(this.lastEvent);
   }
+  skipAtoms(sel) {
+    let ranges = null;
+    for (let i = 0; i < sel.ranges.length; i++) {
+      let range = sel.ranges[i], updated = null;
+      if (range.empty) {
+        let pos = skipAtomicRanges(this.atoms, range.from, 0);
+        if (pos != range.from)
+          updated = EditorSelection.cursor(pos, -1);
+      } else {
+        let from = skipAtomicRanges(this.atoms, range.from, -1);
+        let to = skipAtomicRanges(this.atoms, range.to, 1);
+        if (from != range.from || to != range.to)
+          updated = EditorSelection.range(range.from == range.anchor ? from : to, range.from == range.head ? from : to);
+      }
+      if (updated) {
+        if (!ranges)
+          ranges = sel.ranges.slice();
+        ranges[i] = updated;
+      }
+    }
+    return ranges ? EditorSelection.create(ranges, sel.mainIndex) : sel;
+  }
   select(event) {
-    let selection = this.style.get(event, this.extend, this.multiple);
-    if (this.mustSelect || !selection.eq(this.view.state.selection) || selection.main.assoc != this.view.state.selection.main.assoc)
+    let { view } = this, selection = this.skipAtoms(this.style.get(event, this.extend, this.multiple));
+    if (this.mustSelect || !selection.eq(view.state.selection) || selection.main.assoc != view.state.selection.main.assoc)
       this.view.dispatch({
         selection,
         userEvent: "select.pointer"
@@ -7151,8 +7273,6 @@ handlers.keydown = (view, event) => {
   view.inputState.setSelectionOrigin("select");
   if (event.keyCode == 27)
     view.inputState.lastEscPress = Date.now();
-  else if (modifierCodes.indexOf(event.keyCode) < 0)
-    view.inputState.lastEscPress = 0;
 };
 handlers.touchstart = (view, e) => {
   view.inputState.lastTouchTime = Date.now();
@@ -7242,7 +7362,7 @@ function basicMouseSelection(view, event) {
       }
     },
     get(event2, extend2, multiple) {
-      let cur2 = queryPos(view, event2);
+      let cur2 = queryPos(view, event2), removed;
       let range = rangeForClick(view, cur2.pos, cur2.bias, type);
       if (start.pos != cur2.pos && !extend2) {
         let startRange = rangeForClick(view, start.pos, start.bias, type);
@@ -7251,8 +7371,8 @@ function basicMouseSelection(view, event) {
       }
       if (extend2)
         return startSel.replaceRange(startSel.main.extend(range.from, range.to));
-      else if (multiple && startSel.ranges.length > 1 && startSel.ranges.some((r) => r.eq(range)))
-        return removeRange(startSel, range);
+      else if (multiple && type == 1 && startSel.ranges.length > 1 && (removed = removeRangeAround(startSel, cur2.pos)))
+        return removed;
       else if (multiple)
         return startSel.addRange(range);
       else
@@ -7260,11 +7380,13 @@ function basicMouseSelection(view, event) {
     }
   };
 }
-function removeRange(sel, range) {
-  for (let i = 0; ; i++) {
-    if (sel.ranges[i].eq(range))
+function removeRangeAround(sel, pos) {
+  for (let i = 0; i < sel.ranges.length; i++) {
+    let { from, to } = sel.ranges[i];
+    if (from <= pos && to >= pos)
       return EditorSelection.create(sel.ranges.slice(0, i).concat(sel.ranges.slice(i + 1)), sel.mainIndex == i ? 0 : sel.mainIndex - (sel.mainIndex > i ? 1 : 0));
   }
+  return null;
 }
 handlers.dragstart = (view, event) => {
   let { selection: { main } } = view.state;
@@ -7432,13 +7554,19 @@ handlers.compositionstart = handlers.compositionupdate = (view) => {
 handlers.compositionend = (view) => {
   view.inputState.composing = -1;
   view.inputState.compositionEndedAt = Date.now();
+  view.inputState.compositionPendingKey = true;
+  view.inputState.compositionPendingChange = view.observer.pendingRecords().length > 0;
   view.inputState.compositionFirstChange = null;
-  if (browser.chrome && browser.android)
+  if (browser.chrome && browser.android) {
     view.observer.flushSoon();
-  setTimeout(() => {
-    if (view.inputState.composing < 0 && view.docView.compositionDeco.size)
-      view.update([]);
-  }, 50);
+  } else if (view.inputState.compositionPendingChange) {
+    Promise.resolve().then(() => view.observer.flush());
+  } else {
+    setTimeout(() => {
+      if (view.inputState.composing < 0 && view.docView.compositionDeco.size)
+        view.update([]);
+    }, 50);
+  }
 };
 handlers.contextmenu = (view) => {
   view.inputState.lastContextMenu = Date.now();
@@ -7539,12 +7667,19 @@ var BlockInfo = class {
   /**
   @internal
   */
-  constructor(from, length2, top2, height, type) {
+  constructor(from, length2, top2, height, _content) {
     this.from = from;
     this.length = length2;
     this.top = top2;
     this.height = height;
-    this.type = type;
+    this._content = _content;
+  }
+  /**
+  The type of element this is. When querying lines, this may be
+  an array of all the blocks that make up the line.
+  */
+  get type() {
+    return typeof this._content == "number" ? BlockType.Text : Array.isArray(this._content) ? this._content : this._content.type;
   }
   /**
   The end of the element as a document position.
@@ -7559,11 +7694,25 @@ var BlockInfo = class {
     return this.top + this.height;
   }
   /**
+  If this is a widget block, this will return the widget
+  associated with it.
+  */
+  get widget() {
+    return this._content instanceof PointDecoration ? this._content.widget : null;
+  }
+  /**
+  If this is a textblock, this holds the number of line breaks
+  that appear in widgets inside the block.
+  */
+  get widgetLineBreaks() {
+    return typeof this._content == "number" ? this._content : 0;
+  }
+  /**
   @internal
   */
   join(other) {
-    let detail = (Array.isArray(this.type) ? this.type : [this]).concat(Array.isArray(other.type) ? other.type : [other]);
-    return new BlockInfo(this.from, this.length + other.length, this.top, this.height + other.height, detail);
+    let content = (Array.isArray(this._content) ? this._content : [this]).concat(Array.isArray(other._content) ? other._content : [other]);
+    return new BlockInfo(this.from, this.length + other.length, this.top, this.height + other.height, content);
   }
 };
 var QueryType = /* @__PURE__ */ function(QueryType2) {
@@ -7682,12 +7831,12 @@ var HeightMap = class {
 };
 HeightMap.prototype.size = 1;
 var HeightMapBlock = class extends HeightMap {
-  constructor(length2, height, type) {
+  constructor(length2, height, deco) {
     super(length2, height);
-    this.type = type;
+    this.deco = deco;
   }
   blockAt(_height, _oracle, top2, offset) {
-    return new BlockInfo(offset, this.length, top2, this.height, this.type);
+    return new BlockInfo(offset, this.length, top2, this.height, this.deco || 0);
   }
   lineAt(_value, _type, oracle, top2, offset) {
     return this.blockAt(0, oracle, top2, offset);
@@ -7708,9 +7857,13 @@ var HeightMapBlock = class extends HeightMap {
 };
 var HeightMapText = class extends HeightMapBlock {
   constructor(length2, height) {
-    super(length2, height, BlockType.Text);
+    super(length2, height, null);
     this.collapsed = 0;
     this.widgetHeight = 0;
+    this.breaks = 0;
+  }
+  blockAt(_height, _oracle, top2, offset) {
+    return new BlockInfo(offset, this.length, top2, this.height, this.breaks);
   }
   replace(_from, _to, nodes) {
     let node = nodes[0];
@@ -7730,7 +7883,7 @@ var HeightMapText = class extends HeightMapBlock {
     if (measured && measured.from <= offset && measured.more)
       this.setHeight(oracle, measured.heights[measured.index++]);
     else if (force || this.outdated)
-      this.setHeight(oracle, Math.max(this.widgetHeight, oracle.heightForLine(this.length - this.collapsed)));
+      this.setHeight(oracle, Math.max(this.widgetHeight, oracle.heightForLine(this.length - this.collapsed)) + this.breaks * oracle.lineHeight);
     this.outdated = false;
     return this;
   }
@@ -7749,7 +7902,8 @@ var HeightMapGap = class extends HeightMap {
     if (oracle.lineWrapping) {
       let totalPerLine = Math.min(this.height, oracle.lineHeight * lines);
       perLine = totalPerLine / lines;
-      perChar = (this.height - totalPerLine) / (this.length - lines - 1);
+      if (this.length > lines + 1)
+        perChar = (this.height - totalPerLine) / (this.length - lines - 1);
     } else {
       perLine = this.height / lines;
     }
@@ -7761,11 +7915,11 @@ var HeightMapGap = class extends HeightMap {
       let guess = offset + Math.round(Math.max(0, Math.min(1, (height - top2) / this.height)) * this.length);
       let line = oracle.doc.lineAt(guess), lineHeight = perLine + line.length * perChar;
       let lineTop = Math.max(top2, height - lineHeight / 2);
-      return new BlockInfo(line.from, line.length, lineTop, lineHeight, BlockType.Text);
+      return new BlockInfo(line.from, line.length, lineTop, lineHeight, 0);
     } else {
       let line = Math.max(0, Math.min(lastLine - firstLine, Math.floor((height - top2) / perLine)));
       let { from, length: length2 } = oracle.doc.line(firstLine + line);
-      return new BlockInfo(from, length2, top2 + perLine * line, perLine, BlockType.Text);
+      return new BlockInfo(from, length2, top2 + perLine * line, perLine, 0);
     }
   }
   lineAt(value, type, oracle, top2, offset) {
@@ -7773,13 +7927,13 @@ var HeightMapGap = class extends HeightMap {
       return this.blockAt(value, oracle, top2, offset);
     if (type == QueryType.ByPosNoHeight) {
       let { from, to } = oracle.doc.lineAt(value);
-      return new BlockInfo(from, to - from, 0, 0, BlockType.Text);
+      return new BlockInfo(from, to - from, 0, 0, 0);
     }
     let { firstLine, perLine, perChar } = this.heightMetrics(oracle, offset);
     let line = oracle.doc.lineAt(value), lineHeight = perLine + line.length * perChar;
     let linesAbove = line.number - firstLine;
     let lineTop = top2 + perLine * linesAbove + perChar * (line.from - offset - linesAbove);
-    return new BlockInfo(line.from, line.length, Math.max(top2, Math.min(lineTop, top2 + this.height - lineHeight)), lineHeight, BlockType.Text);
+    return new BlockInfo(line.from, line.length, Math.max(top2, Math.min(lineTop, top2 + this.height - lineHeight)), lineHeight, 0);
   }
   forEachLine(from, to, oracle, top2, offset, f) {
     from = Math.max(from, offset);
@@ -7792,7 +7946,7 @@ var HeightMapGap = class extends HeightMap {
         lineTop += perLine * linesAbove + perChar * (from - offset - linesAbove);
       }
       let lineHeight = perLine + perChar * line.length;
-      f(new BlockInfo(line.from, line.length, lineTop, lineHeight, BlockType.Text));
+      f(new BlockInfo(line.from, line.length, lineTop, lineHeight, 0));
       lineTop += lineHeight;
       pos = line.to + 1;
     }
@@ -8013,13 +8167,14 @@ var NodeBuilder = class {
   point(from, to, deco) {
     if (from < to || deco.heightRelevant) {
       let height = deco.widget ? deco.widget.estimatedHeight : 0;
+      let breaks = deco.widget ? deco.widget.lineBreaks : 0;
       if (height < 0)
         height = this.oracle.lineHeight;
       let len = to - from;
       if (deco.block) {
-        this.addBlock(new HeightMapBlock(len, height, deco.type));
-      } else if (len || height >= relevantWidgetHeight) {
-        this.addLineDeco(height, len);
+        this.addBlock(new HeightMapBlock(len, height, deco));
+      } else if (len || breaks || height >= relevantWidgetHeight) {
+        this.addLineDeco(height, breaks, len);
       }
     } else if (to > from) {
       this.span(from, to);
@@ -8058,19 +8213,22 @@ var NodeBuilder = class {
     return line;
   }
   addBlock(block) {
+    var _a2;
     this.enterLine();
-    if (block.type == BlockType.WidgetAfter && !this.isCovered)
+    let type = (_a2 = block.deco) === null || _a2 === void 0 ? void 0 : _a2.type;
+    if (type == BlockType.WidgetAfter && !this.isCovered)
       this.ensureLine();
     this.nodes.push(block);
     this.writtenTo = this.pos = this.pos + block.length;
-    if (block.type != BlockType.WidgetBefore)
+    if (type != BlockType.WidgetBefore)
       this.covering = block;
   }
-  addLineDeco(height, length2) {
+  addLineDeco(height, breaks, length2) {
     let line = this.ensureLine();
     line.length += length2;
     line.collapsed += length2;
     line.widgetHeight = Math.max(line.widgetHeight, height);
+    line.breaks += breaks;
     this.writtenTo = this.pos = this.pos + length2;
   }
   finish(from) {
@@ -8208,6 +8366,10 @@ var ViewState = class {
     this.contentDOMHeight = 0;
     this.editorHeight = 0;
     this.editorWidth = 0;
+    this.scrollTop = 0;
+    this.scrolledToBottom = true;
+    this.scrollAnchorPos = 0;
+    this.scrollAnchorHeight = -1;
     this.scaler = IdScaler;
     this.scrollTarget = null;
     this.printing = false;
@@ -8251,9 +8413,17 @@ var ViewState = class {
     let contentChanges = update.changedRanges;
     let heightChanges = ChangedRange.extendWithRanges(contentChanges, heightRelevantDecoChanges(prevDeco, this.stateDeco, update ? update.changes : ChangeSet.empty(this.state.doc.length)));
     let prevHeight = this.heightMap.height;
+    let scrollAnchor = this.scrolledToBottom ? null : this.lineBlockAtHeight(this.scrollTop);
     this.heightMap = this.heightMap.applyChanges(this.stateDeco, update.startState.doc, this.heightOracle.setDoc(this.state.doc), heightChanges);
     if (this.heightMap.height != prevHeight)
       update.flags |= 2;
+    if (scrollAnchor) {
+      this.scrollAnchorPos = update.changes.mapPos(scrollAnchor.from, -1);
+      this.scrollAnchorHeight = scrollAnchor.top;
+    } else {
+      this.scrollAnchorPos = -1;
+      this.scrollAnchorHeight = this.heightMap.height;
+    }
     let viewport = heightChanges.length ? this.mapViewport(this.viewport, update.changes) : this.viewport;
     if (scrollTarget && (scrollTarget.range.head < viewport.from || scrollTarget.range.head > viewport.to) || !this.viewportIsAppropriate(viewport))
       viewport = this.getViewport(0, scrollTarget);
@@ -8293,6 +8463,11 @@ var ViewState = class {
       this.editorWidth = view.scrollDOM.clientWidth;
       result |= 8;
     }
+    if (this.scrollTop != view.scrollDOM.scrollTop) {
+      this.scrollAnchorHeight = -1;
+      this.scrollTop = view.scrollDOM.scrollTop;
+    }
+    this.scrolledToBottom = this.scrollTop > view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight - 4;
     let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
     let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
     this.pixelViewport = pixelViewport;
@@ -8391,11 +8566,11 @@ var ViewState = class {
     return (from == 0 || top2 <= visibleTop - Math.max(10, Math.min(
       -bias,
       250
-      /* VP.MaxCoverMargin */
+      /* MaxCoverMargin */
     ))) && (to == this.state.doc.length || bottom >= visibleBottom + Math.max(10, Math.min(
       bias,
       250
-      /* VP.MaxCoverMargin */
+      /* MaxCoverMargin */
     ))) && (top2 > visibleTop - 2 * 1e3 && bottom < visibleBottom + 2 * 1e3);
   }
   mapLineGaps(gaps, changes) {
@@ -8642,7 +8817,7 @@ function scaleBlock(block, scaler) {
   if (scaler.scale == 1)
     return block;
   let bTop = scaler.toDOM(block.top), bBottom = scaler.toDOM(block.bottom);
-  return new BlockInfo(block.from, block.length, bTop, bBottom - bTop, Array.isArray(block.type) ? block.type.map((b) => scaleBlock(b, scaler)) : block.type);
+  return new BlockInfo(block.from, block.length, bTop, bBottom - bTop, Array.isArray(block._content) ? block._content.map((b) => scaleBlock(b, scaler)) : block._content);
 }
 var theme = /* @__PURE__ */ Facet.define({ combine: (strs) => strs.join(" ") });
 var darkTheme = /* @__PURE__ */ Facet.define({ combine: (values) => values.indexOf(true) > -1 });
@@ -8733,16 +8908,16 @@ var baseTheme$1 = /* @__PURE__ */ buildTheme("." + baseThemeID, {
   "&dark .cm-selectionBackground": {
     background: "#222"
   },
-  "&light.cm-focused .cm-selectionBackground": {
+  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
     background: "#d7d4f0"
   },
-  "&dark.cm-focused .cm-selectionBackground": {
+  "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
     background: "#233"
   },
   ".cm-cursorLayer": {
     pointerEvents: "none"
   },
-  "&.cm-focused .cm-cursorLayer": {
+  "&.cm-focused > .cm-scroller > .cm-cursorLayer": {
     animation: "steps(1) cm-blink 1.2s infinite"
   },
   // Two animations defined so that we can switch between them to
@@ -8764,7 +8939,7 @@ var baseTheme$1 = /* @__PURE__ */ buildTheme("." + baseThemeID, {
   ".cm-dropCursor": {
     position: "absolute"
   },
-  "&.cm-focused .cm-cursor": {
+  "&.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor": {
     display: "block"
   },
   "&light .cm-activeLine": { backgroundColor: "#cceeff44" },
@@ -8923,16 +9098,17 @@ var DOMChange = class {
 function applyDOMChange(view, domChange) {
   let change;
   let { newSel } = domChange, sel = view.state.selection.main;
+  let lastKey = view.inputState.lastKeyTime > Date.now() - 100 ? view.inputState.lastKeyCode : -1;
   if (domChange.bounds) {
     let { from, to } = domChange.bounds;
     let preferredPos = sel.from, preferredSide = null;
-    if (view.inputState.lastKeyCode === 8 && view.inputState.lastKeyTime > Date.now() - 100 || browser.android && domChange.text.length < to - from) {
+    if (lastKey === 8 || browser.android && domChange.text.length < to - from) {
       preferredPos = sel.to;
       preferredSide = "end";
     }
     let diff = findDiff(view.state.doc.sliceString(from, to, LineBreakPlaceholder), domChange.text, preferredPos - from, preferredSide);
     if (diff) {
-      if (browser.chrome && view.inputState.lastKeyCode == 13 && diff.toB == diff.from + 2 && domChange.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
+      if (browser.chrome && lastKey == 13 && diff.toB == diff.from + 2 && domChange.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
         diff.toB--;
       change = {
         from: from + diff.from,
@@ -8966,7 +9142,7 @@ function applyDOMChange(view, domChange) {
     let startState = view.state;
     if (browser.ios && view.inputState.flushIOSKey(view))
       return true;
-    if (browser.android && (change.from == sel.from && change.to == sel.to && change.insert.length == 1 && change.insert.lines == 2 && dispatchKey(view.contentDOM, "Enter", 13) || change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 && dispatchKey(view.contentDOM, "Backspace", 8) || change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 && dispatchKey(view.contentDOM, "Delete", 46)))
+    if (browser.android && (change.from == sel.from && change.to == sel.to && change.insert.length == 1 && change.insert.lines == 2 && dispatchKey(view.contentDOM, "Enter", 13) || (change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 || lastKey == 8 && change.insert.length < change.to - change.from) && dispatchKey(view.contentDOM, "Backspace", 8) || change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 && dispatchKey(view.contentDOM, "Delete", 46)))
       return true;
     let text = change.insert.toString();
     if (view.state.facet(inputHandler).some((h) => h(view, change.from, change.to, text)))
@@ -8980,7 +9156,7 @@ function applyDOMChange(view, domChange) {
       tr = startState.replaceSelection(view.state.toText(before + change.insert.sliceString(0, void 0, view.state.lineBreak) + after));
     } else {
       let changes = startState.changes(change);
-      let mainSel = newSel && !startState.selection.main.eq(newSel.main) && newSel.main.to <= changes.newLength ? newSel.main : void 0;
+      let mainSel = newSel && newSel.main.to <= changes.newLength ? newSel.main : void 0;
       if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 && change.to <= sel.to && change.to >= sel.to - 10) {
         let replaced = view.state.sliceDoc(change.from, change.to);
         let compositionRange = compositionSurroundingNode(view) || view.state.doc.lineAt(sel.head);
@@ -9009,7 +9185,8 @@ function applyDOMChange(view, domChange) {
       }
     }
     let userEvent = "input.type";
-    if (view.composing) {
+    if (view.composing || view.inputState.compositionPendingChange && view.inputState.compositionEndedAt > Date.now() - 50) {
+      view.inputState.compositionPendingChange = false;
       userEvent += ".compose";
       if (view.inputState.compositionFirstChange) {
         userEvent += ".start";
@@ -9149,7 +9326,7 @@ var DOMObserver = class {
           if (this.intersecting != this.view.inView)
             this.onScrollChanged(document.createEvent("Event"));
         }
-      }, {});
+      }, { threshold: [0, 1e-3] });
       this.intersection.observe(this.dom);
       this.gapIntersection = new IntersectionObserver((entries) => {
         if (entries.length > 0 && entries[entries.length - 1].intersectionRatio > 0)
@@ -9309,7 +9486,10 @@ var DOMObserver = class {
         let key2 = this.delayedAndroidKey;
         if (key2) {
           this.clearDelayedAndroidKey();
-          if (!this.flush() && key2.force)
+          this.view.inputState.lastKeyCode = key2.keyCode;
+          this.view.inputState.lastKeyTime = Date.now();
+          let flushed = this.flush();
+          if (!flushed && key2.force)
             dispatchKey(this.dom, key2.key, key2.keyCode);
         }
       };
@@ -9345,10 +9525,13 @@ var DOMObserver = class {
     }
     this.flush();
   }
-  processRecords() {
-    let records = this.queue;
+  pendingRecords() {
     for (let mut of this.observer.takeRecords())
-      records.push(mut);
+      this.queue.push(mut);
+    return this.queue;
+  }
+  processRecords() {
+    let records = this.pendingRecords();
     if (records.length)
       this.queue = [];
     let from = -1, to = -1, typeOver = false;
@@ -9587,7 +9770,8 @@ var EditorView = class {
     return this.dom.ownerDocument.defaultView || window;
   }
   dispatch(...input) {
-    this._dispatch(input.length == 1 && input[0] instanceof Transaction ? input[0] : this.state.update(...input));
+    let tr = input.length == 1 && input[0] instanceof Transaction ? input[0] : this.state.update(...input);
+    this._dispatch(tr, this);
   }
   /**
   Update the view for the given array of transactions. This will
@@ -9755,13 +9939,22 @@ var EditorView = class {
     if (flush)
       this.observer.forceFlush();
     let updated = null;
-    let { scrollHeight, scrollTop, clientHeight } = this.scrollDOM;
-    let refHeight = scrollTop > scrollHeight - clientHeight - 4 ? scrollHeight : scrollTop;
+    let sDOM = this.scrollDOM, { scrollAnchorPos, scrollAnchorHeight } = this.viewState;
+    this.viewState.scrollAnchorHeight = -1;
+    if (scrollAnchorHeight < 0 || sDOM.scrollTop != this.viewState.scrollTop) {
+      if (sDOM.scrollTop > sDOM.scrollHeight - sDOM.clientHeight - 4) {
+        scrollAnchorPos = -1;
+        scrollAnchorHeight = this.viewState.heightMap.height;
+      } else {
+        let block = this.viewState.lineBlockAtHeight(sDOM.scrollTop);
+        scrollAnchorPos = block.from;
+        scrollAnchorHeight = block.top;
+      }
+    }
     try {
       for (let i = 0; ; i++) {
         this.updateState = 1;
         let oldViewport = this.viewport;
-        let refBlock = this.viewState.lineBlockAtHeight(refHeight);
         let changed = this.viewState.measure(this);
         if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
           break;
@@ -9808,10 +10001,11 @@ var EditorView = class {
             this.docView.scrollIntoView(this.viewState.scrollTarget);
             this.viewState.scrollTarget = null;
             scrolled = true;
-          } else {
-            let diff = this.viewState.lineBlockAt(refBlock.from).top - refBlock.top;
+          } else if (scrollAnchorHeight > -1) {
+            let newAnchorHeight = scrollAnchorPos < 0 ? this.viewState.heightMap.height : this.viewState.lineBlockAt(scrollAnchorPos).top;
+            let diff = newAnchorHeight - scrollAnchorHeight;
             if (diff > 1 || diff < -1) {
-              this.scrollDOM.scrollTop += diff;
+              sDOM.scrollTop += diff;
               scrolled = true;
             }
           }
@@ -9820,6 +10014,7 @@ var EditorView = class {
           this.docView.updateSelection(true);
         if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && !scrolled && this.measureRequests.length == 0)
           break;
+        scrollAnchorHeight = -1;
       }
     } finally {
       this.updateState = 0;
@@ -10529,15 +10724,6 @@ function wrappedLine(view, pos, inside2) {
     type: BlockType.Text
   };
 }
-function blockAt(view, pos) {
-  let line = view.lineBlockAt(pos);
-  if (Array.isArray(line.type))
-    for (let l of line.type) {
-      if (l.to > pos || l.to == pos && (l.to == line.to || l.type == BlockType.Text))
-        return l;
-    }
-  return line;
-}
 function rectanglesForRange(view, className, range) {
   if (range.to <= view.viewport.from || range.from >= view.viewport.to)
     return [];
@@ -10550,19 +10736,17 @@ function rectanglesForRange(view, className, range) {
   let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
   let visualStart = startBlock.type == BlockType.Text ? startBlock : null;
   let visualEnd = endBlock.type == BlockType.Text ? endBlock : null;
-  if (view.lineWrapping) {
-    if (visualStart)
-      visualStart = wrappedLine(view, from, visualStart);
-    if (visualEnd)
-      visualEnd = wrappedLine(view, to, visualEnd);
-  }
+  if (visualStart && (view.lineWrapping || startBlock.widgetLineBreaks))
+    visualStart = wrappedLine(view, from, visualStart);
+  if (visualEnd && (view.lineWrapping || endBlock.widgetLineBreaks))
+    visualEnd = wrappedLine(view, to, visualEnd);
   if (visualStart && visualEnd && visualStart.from == visualEnd.from) {
     return pieces(drawForLine(range.from, range.to, visualStart));
   } else {
     let top2 = visualStart ? drawForLine(range.from, null, visualStart) : drawForWidget(startBlock, false);
     let bottom = visualEnd ? drawForLine(null, range.to, visualEnd) : drawForWidget(endBlock, true);
     let between = [];
-    if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
+    if ((visualStart || startBlock).to < (visualEnd || endBlock).from - (visualStart && visualEnd ? 1 : 0) || startBlock.widgetLineBreaks > 1 && top2.bottom + view.defaultLineHeight / 2 < bottom.top)
       between.push(piece(leftSide, top2.bottom, rightSide, bottom.top));
     else if (top2.bottom < bottom.top && view.elementAtHeight((top2.bottom + bottom.top) / 2).type == BlockType.Text)
       top2.bottom = bottom.top = (top2.bottom + bottom.top) / 2;
@@ -10575,7 +10759,7 @@ function rectanglesForRange(view, className, range) {
       top2 - base2.top - 0.01,
       right - left,
       bottom - top2 + 0.01
-      /* C.Epsilon */
+      /* Epsilon */
     );
   }
   function pieces({ top: top2, bottom, horizontal }) {
@@ -10589,6 +10773,8 @@ function rectanglesForRange(view, className, range) {
     function addSpan(from3, fromOpen, to3, toOpen, dir) {
       let fromCoords = view.coordsAtPos(from3, from3 == line.to ? -2 : 2);
       let toCoords = view.coordsAtPos(to3, to3 == line.from ? 2 : -2);
+      if (!fromCoords || !toCoords)
+        return;
       top2 = Math.min(fromCoords.top, toCoords.top, top2);
       bottom = Math.max(fromCoords.bottom, toCoords.bottom, bottom);
       if (dir == Direction.LTR)
@@ -11519,6 +11705,9 @@ function ensureSyntaxTree(state, upto, timeout = 50) {
   return result;
 }
 var DocInput = class {
+  /**
+  Create an input object for the given document.
+  */
   constructor(doc2) {
     this.doc = doc2;
     this.cursorPos = 0;
@@ -12535,14 +12724,15 @@ function completeFromList(list) {
   };
 }
 var Option = class {
-  constructor(completion, source, match) {
+  constructor(completion, source, match, score2) {
     this.completion = completion;
     this.source = source;
     this.match = match;
+    this.score = score2;
   }
 };
 function cur(state) {
-  return state.selection.main.head;
+  return state.selection.main.from;
 }
 function ensureAnchor(expr, start) {
   var _a2;
@@ -12554,29 +12744,16 @@ function ensureAnchor(expr, start) {
 }
 var pickedCompletion = /* @__PURE__ */ Annotation.define();
 function insertCompletionText(state, text, from, to) {
+  let { main } = state.selection, fromOff = from - main.from, toOff = to - main.from;
   return Object.assign(Object.assign({}, state.changeByRange((range) => {
-    if (range == state.selection.main)
-      return {
-        changes: { from, to, insert: text },
-        range: EditorSelection.cursor(from + text.length)
-      };
-    let len = to - from;
-    if (!range.empty || len && state.sliceDoc(range.from - len, range.from) != state.sliceDoc(from, to))
+    if (range != main && from != to && state.sliceDoc(range.from + fromOff, range.from + toOff) != state.sliceDoc(from, to))
       return { range };
     return {
-      changes: { from: range.from - len, to: range.from, insert: text },
-      range: EditorSelection.cursor(range.from - len + text.length)
+      changes: { from: range.from + fromOff, to: to == main.from ? range.to : range.from + toOff, insert: text },
+      range: EditorSelection.cursor(range.from + fromOff + text.length)
     };
   })), { userEvent: "input.complete" });
 }
-function applyCompletion(view, option) {
-  const apply = option.completion.apply || option.completion.label;
-  let result = option.source;
-  if (typeof apply == "string")
-    view.dispatch(Object.assign(Object.assign({}, insertCompletionText(view.state, apply, result.from, result.to)), { annotations: pickedCompletion.of(option.completion) }));
-  else
-    apply(view, option.completion, result.from, result.to);
-}
 var SourceCache = /* @__PURE__ */ new WeakMap();
 function asSource(source) {
   if (!Array.isArray(source))
@@ -12586,6 +12763,8 @@ function asSource(source) {
     SourceCache.set(source, known = completeFromList(source));
   return known;
 }
+var startCompletionEffect = /* @__PURE__ */ StateEffect.define();
+var closeCompletionEffect = /* @__PURE__ */ StateEffect.define();
 var FuzzyMatcher = class {
   constructor(pattern) {
     this.pattern = pattern;
@@ -12612,7 +12791,10 @@ var FuzzyMatcher = class {
   // is. See `Penalty` above.
   match(word) {
     if (this.pattern.length == 0)
-      return [0];
+      return [
+        -100
+        /* Penalty.NotFull */
+      ];
     if (word.length < this.pattern.length)
       return null;
     let { chars, folded, any, precise, byWord } = this;
@@ -12711,6 +12893,7 @@ var completionConfig = /* @__PURE__ */ Facet.define({
       aboveCursor: false,
       icons: true,
       addToOptions: [],
+      positionInfo: defaultPositionInfo,
       compareCompletions: (a, b) => a.label.localeCompare(b.label),
       interactionDelay: 75
     }, {
@@ -12726,82 +12909,318 @@ var completionConfig = /* @__PURE__ */ Facet.define({
 function joinClass(a, b) {
   return a ? b ? a + " " + b : a : b;
 }
-function optionContent(config2) {
-  let content = config2.addToOptions.slice();
-  if (config2.icons)
-    content.push({
-      render(completion) {
-        let icon = document.createElement("div");
-        icon.classList.add("cm-completionIcon");
-        if (completion.type)
-          icon.classList.add(...completion.type.split(/\s+/g).map((cls) => "cm-completionIcon-" + cls));
-        icon.setAttribute("aria-hidden", "true");
-        return icon;
-      },
-      position: 20
-    });
-  content.push({
-    render(completion, _s, match) {
-      let labelElt = document.createElement("span");
-      labelElt.className = "cm-completionLabel";
-      let { label } = completion, off = 0;
-      for (let j = 1; j < match.length; ) {
-        let from = match[j++], to = match[j++];
-        if (from > off)
-          labelElt.appendChild(document.createTextNode(label.slice(off, from)));
-        let span = labelElt.appendChild(document.createElement("span"));
-        span.appendChild(document.createTextNode(label.slice(from, to)));
-        span.className = "cm-completionMatchedText";
-        off = to;
-      }
-      if (off < label.length)
-        labelElt.appendChild(document.createTextNode(label.slice(off)));
-      return labelElt;
-    },
-    position: 50
-  }, {
-    render(completion) {
-      if (!completion.detail)
-        return null;
-      let detailElt = document.createElement("span");
-      detailElt.className = "cm-completionDetail";
-      detailElt.textContent = completion.detail;
-      return detailElt;
-    },
-    position: 80
-  });
-  return content.sort((a, b) => a.position - b.position).map((a) => a.render);
-}
-function rangeAroundSelected(total, selected, max) {
-  if (total <= max)
-    return { from: 0, to: total };
-  if (selected < 0)
-    selected = 0;
-  if (selected <= total >> 1) {
-    let off2 = Math.floor(selected / max);
-    return { from: off2 * max, to: (off2 + 1) * max };
+function defaultPositionInfo(view, list, option, info, space) {
+  let rtl = view.textDirection == Direction.RTL, left = rtl, narrow = false;
+  let side = "top", offset, maxWidth;
+  let spaceLeft = list.left - space.left, spaceRight = space.right - list.right;
+  let infoWidth = info.right - info.left, infoHeight = info.bottom - info.top;
+  if (left && spaceLeft < Math.min(infoWidth, spaceRight))
+    left = false;
+  else if (!left && spaceRight < Math.min(infoWidth, spaceLeft))
+    left = true;
+  if (infoWidth <= (left ? spaceLeft : spaceRight)) {
+    offset = Math.max(space.top, Math.min(option.top, space.bottom - infoHeight)) - list.top;
+    maxWidth = Math.min(400, left ? spaceLeft : spaceRight);
+  } else {
+    narrow = true;
+    maxWidth = Math.min(
+      400,
+      (rtl ? list.right : space.right - list.left) - 30
+      /* Info.Margin */
+    );
+    let spaceBelow = space.bottom - list.bottom;
+    if (spaceBelow >= infoHeight || spaceBelow > list.top) {
+      offset = option.bottom - list.top;
+    } else {
+      side = "bottom";
+      offset = list.bottom - option.top;
+    }
   }
-  let off = Math.floor((total - selected) / max);
-  return { from: total - (off + 1) * max, to: total - off * max };
+  return {
+    style: `${side}: ${offset}px; max-width: ${maxWidth}px`,
+    class: "cm-completionInfo-" + (narrow ? rtl ? "left-narrow" : "right-narrow" : left ? "left" : "right")
+  };
 }
-var CompletionTooltip = class {
-  constructor(view, stateField) {
-    this.view = view;
-    this.stateField = stateField;
-    this.info = null;
-    this.placeInfo = {
-      read: () => this.measureInfo(),
-      write: (pos) => this.positionInfo(pos),
-      key: this
-    };
-    this.space = null;
-    this.currentClass = "";
-    let cState = view.state.field(stateField);
-    let { options, selected } = cState.open;
-    let config2 = view.state.facet(completionConfig);
-    this.optionContent = optionContent(config2);
-    this.optionClass = config2.optionClass;
-    this.tooltipClass = config2.tooltipClass;
+function moveCompletionSelection(forward, by = "option") {
+  return (view) => {
+    let cState = view.state.field(completionState, false);
+    if (!cState || !cState.open || cState.open.disabled || Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
+      return false;
+    let step = 1, tooltip;
+    if (by == "page" && (tooltip = getTooltip(view, cState.open.tooltip)))
+      step = Math.max(2, Math.floor(tooltip.dom.offsetHeight / tooltip.dom.querySelector("li").offsetHeight) - 1);
+    let { length: length2 } = cState.open.options;
+    let selected = cState.open.selected > -1 ? cState.open.selected + step * (forward ? 1 : -1) : forward ? 0 : length2 - 1;
+    if (selected < 0)
+      selected = by == "page" ? 0 : length2 - 1;
+    else if (selected >= length2)
+      selected = by == "page" ? length2 - 1 : 0;
+    view.dispatch({ effects: setSelectedEffect.of(selected) });
+    return true;
+  };
+}
+var acceptCompletion = (view) => {
+  let cState = view.state.field(completionState, false);
+  if (view.state.readOnly || !cState || !cState.open || cState.open.selected < 0 || Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
+    return false;
+  if (!cState.open.disabled)
+    return applyCompletion(view, cState.open.options[cState.open.selected]);
+  return true;
+};
+var startCompletion = (view) => {
+  let cState = view.state.field(completionState, false);
+  if (!cState)
+    return false;
+  view.dispatch({ effects: startCompletionEffect.of(true) });
+  return true;
+};
+var closeCompletion = (view) => {
+  let cState = view.state.field(completionState, false);
+  if (!cState || !cState.active.some(
+    (a) => a.state != 0
+    /* State.Inactive */
+  ))
+    return false;
+  view.dispatch({ effects: closeCompletionEffect.of(null) });
+  return true;
+};
+var RunningQuery = class {
+  constructor(active, context) {
+    this.active = active;
+    this.context = context;
+    this.time = Date.now();
+    this.updates = [];
+    this.done = void 0;
+  }
+};
+var DebounceTime = 50;
+var MaxUpdateCount = 50;
+var MinAbortTime = 1e3;
+var completionPlugin = /* @__PURE__ */ ViewPlugin.fromClass(class {
+  constructor(view) {
+    this.view = view;
+    this.debounceUpdate = -1;
+    this.running = [];
+    this.debounceAccept = -1;
+    this.composing = 0;
+    for (let active of view.state.field(completionState).active)
+      if (active.state == 1)
+        this.startQuery(active);
+  }
+  update(update) {
+    let cState = update.state.field(completionState);
+    if (!update.selectionSet && !update.docChanged && update.startState.field(completionState) == cState)
+      return;
+    let doesReset = update.transactions.some((tr) => {
+      return (tr.selection || tr.docChanged) && !getUserEvent(tr);
+    });
+    for (let i = 0; i < this.running.length; i++) {
+      let query = this.running[i];
+      if (doesReset || query.updates.length + update.transactions.length > MaxUpdateCount && Date.now() - query.time > MinAbortTime) {
+        for (let handler of query.context.abortListeners) {
+          try {
+            handler();
+          } catch (e) {
+            logException(this.view.state, e);
+          }
+        }
+        query.context.abortListeners = null;
+        this.running.splice(i--, 1);
+      } else {
+        query.updates.push(...update.transactions);
+      }
+    }
+    if (this.debounceUpdate > -1)
+      clearTimeout(this.debounceUpdate);
+    this.debounceUpdate = cState.active.some((a) => a.state == 1 && !this.running.some((q) => q.active.source == a.source)) ? setTimeout(() => this.startUpdate(), DebounceTime) : -1;
+    if (this.composing != 0)
+      for (let tr of update.transactions) {
+        if (getUserEvent(tr) == "input")
+          this.composing = 2;
+        else if (this.composing == 2 && tr.selection)
+          this.composing = 3;
+      }
+  }
+  startUpdate() {
+    this.debounceUpdate = -1;
+    let { state } = this.view, cState = state.field(completionState);
+    for (let active of cState.active) {
+      if (active.state == 1 && !this.running.some((r) => r.active.source == active.source))
+        this.startQuery(active);
+    }
+  }
+  startQuery(active) {
+    let { state } = this.view, pos = cur(state);
+    let context = new CompletionContext(state, pos, active.explicitPos == pos);
+    let pending = new RunningQuery(active, context);
+    this.running.push(pending);
+    Promise.resolve(active.source(context)).then((result) => {
+      if (!pending.context.aborted) {
+        pending.done = result || null;
+        this.scheduleAccept();
+      }
+    }, (err) => {
+      this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+      logException(this.view.state, err);
+    });
+  }
+  scheduleAccept() {
+    if (this.running.every((q) => q.done !== void 0))
+      this.accept();
+    else if (this.debounceAccept < 0)
+      this.debounceAccept = setTimeout(() => this.accept(), DebounceTime);
+  }
+  // For each finished query in this.running, try to create a result
+  // or, if appropriate, restart the query.
+  accept() {
+    var _a2;
+    if (this.debounceAccept > -1)
+      clearTimeout(this.debounceAccept);
+    this.debounceAccept = -1;
+    let updated = [];
+    let conf = this.view.state.facet(completionConfig);
+    for (let i = 0; i < this.running.length; i++) {
+      let query = this.running[i];
+      if (query.done === void 0)
+        continue;
+      this.running.splice(i--, 1);
+      if (query.done) {
+        let active = new ActiveResult(query.active.source, query.active.explicitPos, query.done, query.done.from, (_a2 = query.done.to) !== null && _a2 !== void 0 ? _a2 : cur(query.updates.length ? query.updates[0].startState : this.view.state));
+        for (let tr of query.updates)
+          active = active.update(tr, conf);
+        if (active.hasResult()) {
+          updated.push(active);
+          continue;
+        }
+      }
+      let current = this.view.state.field(completionState).active.find((a) => a.source == query.active.source);
+      if (current && current.state == 1) {
+        if (query.done == null) {
+          let active = new ActiveSource(
+            query.active.source,
+            0
+            /* State.Inactive */
+          );
+          for (let tr of query.updates)
+            active = active.update(tr, conf);
+          if (active.state != 1)
+            updated.push(active);
+        } else {
+          this.startQuery(current);
+        }
+      }
+    }
+    if (updated.length)
+      this.view.dispatch({ effects: setActiveEffect.of(updated) });
+  }
+}, {
+  eventHandlers: {
+    blur(event) {
+      let state = this.view.state.field(completionState, false);
+      if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur) {
+        let dialog = state.open && getTooltip(this.view, state.open.tooltip);
+        if (!dialog || !dialog.dom.contains(event.relatedTarget))
+          this.view.dispatch({ effects: closeCompletionEffect.of(null) });
+      }
+    },
+    compositionstart() {
+      this.composing = 1;
+    },
+    compositionend() {
+      if (this.composing == 3) {
+        setTimeout(() => this.view.dispatch({ effects: startCompletionEffect.of(false) }), 20);
+      }
+      this.composing = 0;
+    }
+  }
+});
+function applyCompletion(view, option) {
+  const apply = option.completion.apply || option.completion.label;
+  let result = view.state.field(completionState).active.find((a) => a.source == option.source);
+  if (!(result instanceof ActiveResult))
+    return false;
+  if (typeof apply == "string")
+    view.dispatch(Object.assign(Object.assign({}, insertCompletionText(view.state, apply, result.from, result.to)), { annotations: pickedCompletion.of(option.completion) }));
+  else
+    apply(view, option.completion, result.from, result.to);
+  return true;
+}
+function optionContent(config2) {
+  let content = config2.addToOptions.slice();
+  if (config2.icons)
+    content.push({
+      render(completion) {
+        let icon = document.createElement("div");
+        icon.classList.add("cm-completionIcon");
+        if (completion.type)
+          icon.classList.add(...completion.type.split(/\s+/g).map((cls) => "cm-completionIcon-" + cls));
+        icon.setAttribute("aria-hidden", "true");
+        return icon;
+      },
+      position: 20
+    });
+  content.push({
+    render(completion, _s, match) {
+      let labelElt = document.createElement("span");
+      labelElt.className = "cm-completionLabel";
+      let { label } = completion, off = 0;
+      for (let j = 1; j < match.length; ) {
+        let from = match[j++], to = match[j++];
+        if (from > off)
+          labelElt.appendChild(document.createTextNode(label.slice(off, from)));
+        let span = labelElt.appendChild(document.createElement("span"));
+        span.appendChild(document.createTextNode(label.slice(from, to)));
+        span.className = "cm-completionMatchedText";
+        off = to;
+      }
+      if (off < label.length)
+        labelElt.appendChild(document.createTextNode(label.slice(off)));
+      return labelElt;
+    },
+    position: 50
+  }, {
+    render(completion) {
+      if (!completion.detail)
+        return null;
+      let detailElt = document.createElement("span");
+      detailElt.className = "cm-completionDetail";
+      detailElt.textContent = completion.detail;
+      return detailElt;
+    },
+    position: 80
+  });
+  return content.sort((a, b) => a.position - b.position).map((a) => a.render);
+}
+function rangeAroundSelected(total, selected, max) {
+  if (total <= max)
+    return { from: 0, to: total };
+  if (selected < 0)
+    selected = 0;
+  if (selected <= total >> 1) {
+    let off2 = Math.floor(selected / max);
+    return { from: off2 * max, to: (off2 + 1) * max };
+  }
+  let off = Math.floor((total - selected) / max);
+  return { from: total - (off + 1) * max, to: total - off * max };
+}
+var CompletionTooltip = class {
+  constructor(view, stateField) {
+    this.view = view;
+    this.stateField = stateField;
+    this.info = null;
+    this.placeInfoReq = {
+      read: () => this.measureInfo(),
+      write: (pos) => this.placeInfo(pos),
+      key: this
+    };
+    this.space = null;
+    this.currentClass = "";
+    let cState = view.state.field(stateField);
+    let { options, selected } = cState.open;
+    let config2 = view.state.facet(completionConfig);
+    this.optionContent = optionContent(config2);
+    this.optionClass = config2.optionClass;
+    this.tooltipClass = config2.tooltipClass;
     this.range = rangeAroundSelected(options.length, selected, config2.maxRenderedOptions);
     this.dom = document.createElement("div");
     this.dom.className = "cm-tooltip-autocomplete";
@@ -12815,10 +13234,15 @@ var CompletionTooltip = class {
         }
       }
     });
+    this.dom.addEventListener("focusout", (e) => {
+      let state = view.state.field(this.stateField, false);
+      if (state && state.tooltip && view.state.facet(completionConfig).closeOnBlur && e.relatedTarget != view.contentDOM)
+        view.dispatch({ effects: closeCompletionEffect.of(null) });
+    });
     this.list = this.dom.appendChild(this.createListBox(options, cState.id, this.range));
     this.list.addEventListener("scroll", () => {
       if (this.info)
-        this.view.requestMeasure(this.placeInfo);
+        this.view.requestMeasure(this.placeInfoReq);
     });
   }
   mount() {
@@ -12850,7 +13274,7 @@ var CompletionTooltip = class {
   positioned(space) {
     this.space = space;
     if (this.info)
-      this.view.requestMeasure(this.placeInfo);
+      this.view.requestMeasure(this.placeInfoReq);
   }
   updateSel() {
     let cState = this.view.state.field(this.stateField), open = cState.open;
@@ -12860,7 +13284,7 @@ var CompletionTooltip = class {
       this.list = this.dom.appendChild(this.createListBox(open.options, cState.id, this.range));
       this.list.addEventListener("scroll", () => {
         if (this.info)
-          this.view.requestMeasure(this.placeInfo);
+          this.view.requestMeasure(this.placeInfoReq);
       });
     }
     if (this.updateSelectedOption(open.selected)) {
@@ -12890,12 +13314,14 @@ var CompletionTooltip = class {
     dom.className = "cm-tooltip cm-completionInfo";
     dom.appendChild(content);
     this.dom.appendChild(dom);
-    this.view.requestMeasure(this.placeInfo);
+    this.view.requestMeasure(this.placeInfoReq);
   }
   updateSelectedOption(selected) {
     let set = null;
     for (let opt = this.list.firstChild, i = this.range.from; opt; opt = opt.nextSibling, i++) {
-      if (i == selected) {
+      if (opt.nodeName != "LI" || !opt.id) {
+        i--;
+      } else if (i == selected) {
         if (!opt.hasAttribute("aria-selected")) {
           opt.setAttribute("aria-selected", "true");
           set = opt;
@@ -12923,45 +13349,16 @@ var CompletionTooltip = class {
     }
     if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 || selRect.bottom < Math.max(space.top, listRect.top) + 10)
       return null;
-    let rtl = this.view.textDirection == Direction.RTL, left = rtl, narrow = false, maxWidth;
-    let top2 = "", bottom = "";
-    let spaceLeft = listRect.left - space.left, spaceRight = space.right - listRect.right;
-    if (left && spaceLeft < Math.min(infoRect.width, spaceRight))
-      left = false;
-    else if (!left && spaceRight < Math.min(infoRect.width, spaceLeft))
-      left = true;
-    if (infoRect.width <= (left ? spaceLeft : spaceRight)) {
-      top2 = Math.max(space.top, Math.min(selRect.top, space.bottom - infoRect.height)) - listRect.top + "px";
-      maxWidth = Math.min(400, left ? spaceLeft : spaceRight) + "px";
-    } else {
-      narrow = true;
-      maxWidth = Math.min(
-        400,
-        (rtl ? listRect.right : space.right - listRect.left) - 30
-        /* Info.Margin */
-      ) + "px";
-      let spaceBelow = space.bottom - listRect.bottom;
-      if (spaceBelow >= infoRect.height || spaceBelow > listRect.top)
-        top2 = selRect.bottom - listRect.top + "px";
-      else
-        bottom = listRect.bottom - selRect.top + "px";
-    }
-    return {
-      top: top2,
-      bottom,
-      maxWidth,
-      class: narrow ? rtl ? "left-narrow" : "right-narrow" : left ? "left" : "right"
-    };
+    return this.view.state.facet(completionConfig).positionInfo(this.view, listRect, selRect, infoRect, space);
   }
-  positionInfo(pos) {
+  placeInfo(pos) {
     if (this.info) {
       if (pos) {
-        this.info.style.top = pos.top;
-        this.info.style.bottom = pos.bottom;
-        this.info.style.maxWidth = pos.maxWidth;
-        this.info.className = "cm-tooltip cm-completionInfo cm-completionInfo-" + pos.class;
+        if (pos.style)
+          this.info.style.cssText = pos.style;
+        this.info.className = "cm-tooltip cm-completionInfo " + (pos.class || "");
       } else {
-        this.info.style.top = "-1e6px";
+        this.info.style.cssText = "top: -1e6px";
       }
     }
   }
@@ -12971,8 +13368,21 @@ var CompletionTooltip = class {
     ul.setAttribute("role", "listbox");
     ul.setAttribute("aria-expanded", "true");
     ul.setAttribute("aria-label", this.view.state.phrase("Completions"));
+    let curSection = null;
     for (let i = range.from; i < range.to; i++) {
-      let { completion, match } = options[i];
+      let { completion, match } = options[i], { section } = completion;
+      if (section) {
+        let name = typeof section == "string" ? section : section.name;
+        if (name != curSection && (i > range.from || range.from == 0)) {
+          curSection = name;
+          if (typeof section != "string" && section.header) {
+            ul.appendChild(section.header(section));
+          } else {
+            let header = ul.appendChild(document.createElement("completion-section"));
+            header.textContent = name;
+          }
+        }
+      }
       const li = ul.appendChild(document.createElement("li"));
       li.id = id + "-" + i;
       li.setAttribute("role", "option");
@@ -13007,31 +13417,57 @@ function score(option) {
   return (option.boost || 0) * 100 + (option.apply ? 10 : 0) + (option.info ? 5 : 0) + (option.type ? 1 : 0);
 }
 function sortOptions(active, state) {
-  let options = [], i = 0;
+  let options = [];
+  let sections = null;
+  let addOption = (option) => {
+    options.push(option);
+    let { section } = option.completion;
+    if (section) {
+      if (!sections)
+        sections = [];
+      let name = typeof section == "string" ? section : section.name;
+      if (!sections.some((s) => s.name == name))
+        sections.push(typeof section == "string" ? { name } : section);
+    }
+  };
   for (let a of active)
     if (a.hasResult()) {
       if (a.result.filter === false) {
         let getMatch = a.result.getMatch;
         for (let option of a.result.options) {
-          let match = [1e9 - i++];
+          let match = [1e9 - options.length];
           if (getMatch)
             for (let n of getMatch(option))
               match.push(n);
-          options.push(new Option(option, a, match));
+          addOption(new Option(option, a.source, match, match[0]));
         }
       } else {
         let matcher = new FuzzyMatcher(state.sliceDoc(a.from, a.to)), match;
         for (let option of a.result.options)
           if (match = matcher.match(option.label)) {
-            if (option.boost != null)
-              match[0] += option.boost;
-            options.push(new Option(option, a, match));
+            addOption(new Option(option, a.source, match, match[0] + (option.boost || 0)));
           }
       }
     }
+  if (sections) {
+    let sectionOrder = /* @__PURE__ */ Object.create(null), pos = 0;
+    let cmp = (a, b) => {
+      var _a2, _b;
+      return ((_a2 = a.rank) !== null && _a2 !== void 0 ? _a2 : 1e9) - ((_b = b.rank) !== null && _b !== void 0 ? _b : 1e9) || (a.name < b.name ? -1 : 1);
+    };
+    for (let s of sections.sort(cmp)) {
+      pos -= 1e5;
+      sectionOrder[s.name] = pos;
+    }
+    for (let option of options) {
+      let { section } = option.completion;
+      if (section)
+        option.score += sectionOrder[typeof section == "string" ? section : section.name];
+    }
+  }
   let result = [], prev = null;
   let compare2 = state.facet(completionConfig).compareCompletions;
-  for (let opt of options.sort((a, b) => b.match[0] - a.match[0] || compare2(a.completion, b.completion))) {
+  for (let opt of options.sort((a, b) => b.score - a.score || compare2(a.completion, b.completion))) {
     if (!prev || prev.label != opt.completion.label || prev.detail != opt.completion.detail || prev.type != null && opt.completion.type != null && prev.type != opt.completion.type || prev.apply != opt.completion.apply)
       result.push(opt);
     else if (score(opt.completion) > score(prev))
@@ -13267,8 +13703,6 @@ function checkValid(validFor, state, from, to) {
   let text = state.sliceDoc(from, to);
   return typeof validFor == "function" ? validFor(text, from, to, state) : ensureAnchor(validFor, true).test(text);
 }
-var startCompletionEffect = /* @__PURE__ */ StateEffect.define();
-var closeCompletionEffect = /* @__PURE__ */ StateEffect.define();
 var setActiveEffect = /* @__PURE__ */ StateEffect.define({
   map(sources, mapping) {
     return sources.map((s) => s.map(mapping));
@@ -13287,196 +13721,6 @@ var completionState = /* @__PURE__ */ StateField.define({
     EditorView.contentAttributes.from(f, (state) => state.attrs)
   ]
 });
-function moveCompletionSelection(forward, by = "option") {
-  return (view) => {
-    let cState = view.state.field(completionState, false);
-    if (!cState || !cState.open || cState.open.disabled || Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
-      return false;
-    let step = 1, tooltip;
-    if (by == "page" && (tooltip = getTooltip(view, cState.open.tooltip)))
-      step = Math.max(2, Math.floor(tooltip.dom.offsetHeight / tooltip.dom.querySelector("li").offsetHeight) - 1);
-    let { length: length2 } = cState.open.options;
-    let selected = cState.open.selected > -1 ? cState.open.selected + step * (forward ? 1 : -1) : forward ? 0 : length2 - 1;
-    if (selected < 0)
-      selected = by == "page" ? 0 : length2 - 1;
-    else if (selected >= length2)
-      selected = by == "page" ? length2 - 1 : 0;
-    view.dispatch({ effects: setSelectedEffect.of(selected) });
-    return true;
-  };
-}
-var acceptCompletion = (view) => {
-  let cState = view.state.field(completionState, false);
-  if (view.state.readOnly || !cState || !cState.open || cState.open.selected < 0 || Date.now() - cState.open.timestamp < view.state.facet(completionConfig).interactionDelay)
-    return false;
-  if (!cState.open.disabled)
-    applyCompletion(view, cState.open.options[cState.open.selected]);
-  return true;
-};
-var startCompletion = (view) => {
-  let cState = view.state.field(completionState, false);
-  if (!cState)
-    return false;
-  view.dispatch({ effects: startCompletionEffect.of(true) });
-  return true;
-};
-var closeCompletion = (view) => {
-  let cState = view.state.field(completionState, false);
-  if (!cState || !cState.active.some(
-    (a) => a.state != 0
-    /* State.Inactive */
-  ))
-    return false;
-  view.dispatch({ effects: closeCompletionEffect.of(null) });
-  return true;
-};
-var RunningQuery = class {
-  constructor(active, context) {
-    this.active = active;
-    this.context = context;
-    this.time = Date.now();
-    this.updates = [];
-    this.done = void 0;
-  }
-};
-var DebounceTime = 50;
-var MaxUpdateCount = 50;
-var MinAbortTime = 1e3;
-var completionPlugin = /* @__PURE__ */ ViewPlugin.fromClass(class {
-  constructor(view) {
-    this.view = view;
-    this.debounceUpdate = -1;
-    this.running = [];
-    this.debounceAccept = -1;
-    this.composing = 0;
-    for (let active of view.state.field(completionState).active)
-      if (active.state == 1)
-        this.startQuery(active);
-  }
-  update(update) {
-    let cState = update.state.field(completionState);
-    if (!update.selectionSet && !update.docChanged && update.startState.field(completionState) == cState)
-      return;
-    let doesReset = update.transactions.some((tr) => {
-      return (tr.selection || tr.docChanged) && !getUserEvent(tr);
-    });
-    for (let i = 0; i < this.running.length; i++) {
-      let query = this.running[i];
-      if (doesReset || query.updates.length + update.transactions.length > MaxUpdateCount && Date.now() - query.time > MinAbortTime) {
-        for (let handler of query.context.abortListeners) {
-          try {
-            handler();
-          } catch (e) {
-            logException(this.view.state, e);
-          }
-        }
-        query.context.abortListeners = null;
-        this.running.splice(i--, 1);
-      } else {
-        query.updates.push(...update.transactions);
-      }
-    }
-    if (this.debounceUpdate > -1)
-      clearTimeout(this.debounceUpdate);
-    this.debounceUpdate = cState.active.some((a) => a.state == 1 && !this.running.some((q) => q.active.source == a.source)) ? setTimeout(() => this.startUpdate(), DebounceTime) : -1;
-    if (this.composing != 0)
-      for (let tr of update.transactions) {
-        if (getUserEvent(tr) == "input")
-          this.composing = 2;
-        else if (this.composing == 2 && tr.selection)
-          this.composing = 3;
-      }
-  }
-  startUpdate() {
-    this.debounceUpdate = -1;
-    let { state } = this.view, cState = state.field(completionState);
-    for (let active of cState.active) {
-      if (active.state == 1 && !this.running.some((r) => r.active.source == active.source))
-        this.startQuery(active);
-    }
-  }
-  startQuery(active) {
-    let { state } = this.view, pos = cur(state);
-    let context = new CompletionContext(state, pos, active.explicitPos == pos);
-    let pending = new RunningQuery(active, context);
-    this.running.push(pending);
-    Promise.resolve(active.source(context)).then((result) => {
-      if (!pending.context.aborted) {
-        pending.done = result || null;
-        this.scheduleAccept();
-      }
-    }, (err) => {
-      this.view.dispatch({ effects: closeCompletionEffect.of(null) });
-      logException(this.view.state, err);
-    });
-  }
-  scheduleAccept() {
-    if (this.running.every((q) => q.done !== void 0))
-      this.accept();
-    else if (this.debounceAccept < 0)
-      this.debounceAccept = setTimeout(() => this.accept(), DebounceTime);
-  }
-  // For each finished query in this.running, try to create a result
-  // or, if appropriate, restart the query.
-  accept() {
-    var _a2;
-    if (this.debounceAccept > -1)
-      clearTimeout(this.debounceAccept);
-    this.debounceAccept = -1;
-    let updated = [];
-    let conf = this.view.state.facet(completionConfig);
-    for (let i = 0; i < this.running.length; i++) {
-      let query = this.running[i];
-      if (query.done === void 0)
-        continue;
-      this.running.splice(i--, 1);
-      if (query.done) {
-        let active = new ActiveResult(query.active.source, query.active.explicitPos, query.done, query.done.from, (_a2 = query.done.to) !== null && _a2 !== void 0 ? _a2 : cur(query.updates.length ? query.updates[0].startState : this.view.state));
-        for (let tr of query.updates)
-          active = active.update(tr, conf);
-        if (active.hasResult()) {
-          updated.push(active);
-          continue;
-        }
-      }
-      let current = this.view.state.field(completionState).active.find((a) => a.source == query.active.source);
-      if (current && current.state == 1) {
-        if (query.done == null) {
-          let active = new ActiveSource(
-            query.active.source,
-            0
-            /* State.Inactive */
-          );
-          for (let tr of query.updates)
-            active = active.update(tr, conf);
-          if (active.state != 1)
-            updated.push(active);
-        } else {
-          this.startQuery(current);
-        }
-      }
-    }
-    if (updated.length)
-      this.view.dispatch({ effects: setActiveEffect.of(updated) });
-  }
-}, {
-  eventHandlers: {
-    blur() {
-      let state = this.view.state.field(completionState, false);
-      if (state && state.tooltip && this.view.state.facet(completionConfig).closeOnBlur)
-        this.view.dispatch({ effects: closeCompletionEffect.of(null) });
-    },
-    compositionstart() {
-      this.composing = 1;
-    },
-    compositionend() {
-      if (this.composing == 3) {
-        setTimeout(() => this.view.dispatch({ effects: startCompletionEffect.of(false) }), 20);
-      }
-      this.composing = 0;
-    }
-  }
-});
 var baseTheme2 = /* @__PURE__ */ EditorView.baseTheme({
   ".cm-tooltip.cm-tooltip-autocomplete": {
     "& > ul": {
@@ -13491,12 +13735,20 @@ var baseTheme2 = /* @__PURE__ */ EditorView.baseTheme({
       listStyle: "none",
       margin: 0,
       padding: 0,
+      "& > li, & > completion-section": {
+        padding: "1px 3px",
+        lineHeight: 1.2
+      },
       "& > li": {
         overflowX: "hidden",
         textOverflow: "ellipsis",
-        cursor: "pointer",
-        padding: "1px 3px",
-        lineHeight: 1.2
+        cursor: "pointer"
+      },
+      "& > completion-section": {
+        display: "list-item",
+        borderBottom: "1px solid silver",
+        paddingLeft: "0.5em",
+        opacity: 0.7
       }
     }
   },
@@ -13603,11 +13855,6 @@ var closeBracketEffect = /* @__PURE__ */ StateEffect.define({
     return mapped == null ? void 0 : mapped;
   }
 });
-var skipBracketEffect = /* @__PURE__ */ StateEffect.define({
-  map(value, mapping) {
-    return mapping.mapPos(value);
-  }
-});
 var closedBracket = /* @__PURE__ */ new class extends RangeValue {
 }();
 closedBracket.startSide = 1;
@@ -13624,12 +13871,9 @@ var bracketState = /* @__PURE__ */ StateField.define({
         value = RangeSet.empty;
     }
     value = value.map(tr.changes);
-    for (let effect of tr.effects) {
+    for (let effect of tr.effects)
       if (effect.is(closeBracketEffect))
         value = value.update({ add: [closedBracket.range(effect.value, effect.value + 1)] });
-      else if (effect.is(skipBracketEffect))
-        value = value.update({ filter: (from) => from != effect.value });
-    }
     return value;
   }
 });
@@ -13706,15 +13950,17 @@ function handleOpen(state, open, close, closeBefore) {
   });
 }
 function handleClose(state, _open, close) {
-  let dont = null, moved = state.selection.ranges.map((range) => {
+  let dont = null, changes = state.changeByRange((range) => {
     if (range.empty && nextChar(state.doc, range.head) == close)
-      return EditorSelection.cursor(range.head + close.length);
-    return dont = range;
+      return {
+        changes: { from: range.head, to: range.head + close.length, insert: close },
+        range: EditorSelection.cursor(range.head + close.length)
+      };
+    return dont = { range };
   });
-  return dont ? null : state.update({
-    selection: EditorSelection.create(moved, state.selection.mainIndex),
+  return dont ? null : state.update(changes, {
     scrollIntoView: true,
-    effects: state.selection.ranges.map(({ from }) => skipBracketEffect.of(from))
+    userEvent: "input.type"
   });
 }
 function handleSame(state, token, allowTriple, config2) {
@@ -13736,9 +13982,10 @@ function handleSame(state, token, allowTriple, config2) {
         };
       } else if (closedBracketAt(state, pos)) {
         let isTriple = allowTriple && state.sliceDoc(pos, pos + token.length * 3) == token + token + token;
+        let content = isTriple ? token + token + token : token;
         return {
-          range: EditorSelection.cursor(pos + token.length * (isTriple ? 3 : 1)),
-          effects: skipBracketEffect.of(pos)
+          changes: { from: pos, to: pos + content.length, insert: content },
+          range: EditorSelection.cursor(pos + content.length)
         };
       }
     } else if (allowTriple && state.sliceDoc(pos - 2 * token.length, pos) == token + token && (start = canStartStringAt(state, pos - 2 * token.length, stringPrefixes)) > -1 && nodeStart(state, start)) {
@@ -13822,7 +14069,7 @@ var completionKeymapExt = /* @__PURE__ */ Prec.highest(/* @__PURE__ */ keymap.co
 // ../../node_modules/@codemirror/commands/dist/index.js
 var import_common2 = require("@lezer/common");
 var toggleComment = (target) => {
-  let { state } = target, line = state.doc.lineAt(state.selection.main.head), config2 = getConfig(target.state, line.from);
+  let { state } = target, line = state.doc.lineAt(state.selection.main.from), config2 = getConfig(target.state, line.from);
   return config2.line ? toggleLineComment(target) : config2.block ? toggleBlockCommentByLine(target) : false;
 };
 function command(f, option) {
@@ -13899,7 +14146,7 @@ function selectedLineRanges(state) {
     if (last >= 0 && ranges[last].to > fromLine.from)
       ranges[last].to = toLine.to;
     else
-      ranges.push({ from: fromLine.from, to: toLine.to });
+      ranges.push({ from: fromLine.from + /^\s*/.exec(fromLine.text)[0].length, to: toLine.to });
   }
   return ranges;
 }
@@ -13930,13 +14177,13 @@ function changeLineComment(option, state, ranges = state.selection.ranges) {
   let prevLine = -1;
   for (let { from, to } of ranges) {
     let startI = lines.length, minIndent = 1e9;
+    let token = getConfig(state, from).line;
+    if (!token)
+      continue;
     for (let pos = from; pos <= to; ) {
       let line = state.doc.lineAt(pos);
       if (line.from > prevLine && (from == to || to > line.from)) {
         prevLine = line.from;
-        let token = getConfig(state, line.from).line;
-        if (!token)
-          continue;
         let indent = /^\s*/.exec(line.text)[0].length;
         let empty = indent == line.length;
         let comment = line.text.slice(indent, indent + token.length) == token ? indent : -1;