Override cross-line replacements when the line after has a widget

FIX: Avoid an issue where on Chrome and Safari, typing over a cross-line selection
can replace widgets on the line after the selection with their plain text content.

Issue codemirror/dev#1630

Author: marijnh

src/docview.ts

@@ -1,7 +1,7 @@
 import {ChangeSet, RangeSet, findClusterBreak, SelectionRange} from "@codemirror/state"
 import {ContentView, ChildCursor, ViewFlag, DOMPos, replaceRange} from "./contentview"
 import {BlockView, LineView, BlockWidgetView, BlockGapWidget} from "./blockview"
-import {TextView, MarkView} from "./inlineview"
+import {TextView, MarkView, WidgetView} from "./inlineview"
 import {ContentBuilder} from "./buildview"
 import browser from "./browser"
 import {Decoration, DecorationSet, addRange, MarkDecoration} from "./decoration"
@@ -571,6 +571,13 @@ export class DocView extends ContentView {
                        this.view.textDirection == Direction.LTR)
   }
 
+  lineHasWidget(pos: number) {
+    let {i} = this.childCursor().findPos(pos)
+    if (i == this.children.length) return false
+    let scan = (child: ContentView) => child instanceof WidgetView || child.children.some(scan)
+    return scan(this.children[i])
+  }
+
   // Will never be called but needs to be present
   declare split: () => ContentView
 }

src/domchange.ts

@@ -109,6 +109,17 @@ export function applyDOMChange(view: EditorView, domChange: DOMChange): boolean
       from: sel.from, to: sel.to,
       insert: view.state.doc.slice(sel.from, change.from).append(change.insert).append(view.state.doc.slice(change.to, sel.to))
     }
+  } else if (view.state.doc.lineAt(sel.from).to < sel.to && view.docView.lineHasWidget(sel.to) &&
+             view.inputState.insertingTextAt > Date.now() - 50) {
+    // For a cross-line insertion, Chrome and Safari will crudely take
+    // the text of the line after the selection, flattening any
+    // widgets, and move it into the joined line. This tries to detect
+    // such a situation, and replaces the change with a selection
+    // replace of the text provided by the beforeinput event.
+    change = {
+      from: sel.from, to: sel.to,
+      insert: view.state.toText(view.inputState.insertingText)
+    }
   } else if (browser.chrome && change && change.from == change.to && change.from == sel.head &&
              change.insert.toString() == "\n " && view.lineWrapping) {
     // In Chrome, if you insert a space at the start of a wrapped

src/input.ts

@@ -60,6 +60,10 @@ export class InputState {
   // the mutation events fire shortly after the compositionend event
   compositionPendingChange = false
 
+  // Set by beforeinput, used in DOM change reader
+  insertingText = ""
+  insertingTextAt = 0
+
   mouseSelection: MouseSelection | null = null
   // When a drag from the editor is active, this points at the range
   // being dragged.
@@ -857,6 +861,11 @@ observers.contextmenu = view => {
 }
 
 handlers.beforeinput = (view, event: InputEvent) => {
+  if (event.inputType == "insertText" || event.inputType == "insertCompositionText") {
+    view.inputState.insertingText = event.data!
+    view.inputState.insertingTextAt = Date.now()
+  }
+
   // In EditContext mode, we must handle insertReplacementText events
   // directly, to make spell checking corrections work
   if (event.inputType == "insertReplacementText" && view.observer.editContext) {