codemirror · A-312 · Mar 10, 2020 · Mar 8, 2020 · Mar 10, 2020 · Mar 8, 2020
diff --git a/demo/abc.html b/demo/abc.html
@@ -0,0 +1,49 @@
+<!doctype html>
+
+<title>CodeMirror: Native Spellchecker Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<link rel="stylesheet" href="../addon/hint/show-hint.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/hint/show-hint.js"></script>
+<script src="../addon/hint/anyword-hint.js"></script>
+<script src="../mode/javascript/javascript.js"></script>
+<div id=nav>
+ <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
+
+ <ul>
+ <li><a href="../index.html">Home</a>
+ <li><a href="../doc/manual.html">Manual</a>
+ <li><a href="https:/codemirror/codemirror">Code</a>
+ </ul>
+ <ul>
+ <li><a class=active href="#">Native Spellchecker Demo</a>
+ </ul>
+</div>
+
+<article>
+<h2>Native Spellchecker Demo</h2>
+<p>This editor uses <code>Codemirror.inputStyle: 'contenteditable'</code> and <code>spellcheck: true</code>.</p>
+<form><textarea id="code" name="code">
+Native abc tesst with contenteditableInput editor
+</textarea></form>
+
+<h2>Default Editor Mode</h2>
+<p>The native spellchecker (of the browser) does not run with <code>Codemirror.inputStyle: 'textarea'</code> (default value).</p>
+<form><textarea id="code2" name="code2">
+No spellchecker in a textareaInput editor
+</textarea></form>
+
+<script>
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+ inputStyle: "contenteditable",
+ spellcheck: true
+})
+
+editor.focus()
+
+var editor2 = CodeMirror.fromTextArea(document.getElementById("code2"), {})
+</script>
+</article>
diff --git a/doc/manual.html b/doc/manual.html
@@ -1419,6 +1419,8 @@ <h3 id="api_selection">Cursor and selection methods</h3>
  based on the relative position of the old selection—the editor
  will try to move further away from that, to prevent getting
  stuck.</dd>
+ <dt id="selection_bias"><code><strong>forceFocus</strong>: boolean</code></dt>
+ <dd>Give the editor focus after selection.</dd>
  </dl></dd>
 
  <dt id="setSelections"><code><strong>doc.setSelections</strong>(ranges: array&lt;{anchor, head}&gt;, ?primary: integer, ?options: object)</code></dt>

diff --git a/src/display/operations.js b/src/display/operations.js
@@ -1,8 +1,8 @@
 import { clipPos } from "../line/pos.js"
 import { findMaxLine } from "../line/spans.js"
 import { displayWidth, measureChar, scrollGap } from "../measurement/position_measurement.js"
-import { signal } from "../util/event.js"
 import { activeElt } from "../util/dom.js"
+import { signal } from "../util/event.js"
 import { finishOperation, pushOperation } from "../util/operation_group.js"
 
 import { ensureFocus } from "./focus.js"
@@ -32,10 +32,10 @@ export function startOperation(cm) {
  cursorActivityHandlers: null, // Set of handlers to fire cursorActivity on
  cursorActivityCalled: 0, // Tracks which cursorActivity handlers have been called already
  selectionChanged: false, // Whether the selection needs to be redrawn
+ forceFocus: false, // Force focus after selection changed
  updateMaxLine: false, // Set when the widest line needs to be determined anew
  scrollLeft: null, scrollTop: null, // Intermediate scroll position, not pushed to DOM yet
  scrollToPos: null, // Used to scroll to a specific position
- focus: false,
  id: ++nextOpId // Unique ID
  }
  pushOperation(cm.curOp)
@@ -78,6 +78,8 @@ function endOperation_R1(op) {
  display.maxLineChanged && cm.options.lineWrapping
  op.update = op.mustUpdate &&
  new DisplayUpdate(cm, op.mustUpdate && {top: op.scrollTop, ensure: op.scrollToPos}, op.forceUpdate)
+
+ op.extActiveElt = (!cm.state.focused) ? activeElt() : false
 }
 
 function endOperation_W1(op) {
@@ -115,9 +117,8 @@ function endOperation_W2(op) {
  cm.display.maxLineChanged = false
  }
 
- let takeFocus = op.focus && op.focus == activeElt()
  if (op.preparedSelection)
- cm.display.input.showSelection(op.preparedSelection, takeFocus)
+ cm.display.input.showSelection(op.preparedSelection)
  if (op.updatedDisplay || op.startHeight != cm.doc.height)
  updateScrollbars(cm, op.barMeasure)
  if (op.updatedDisplay)
@@ -127,7 +128,12 @@ function endOperation_W2(op) {
 
  if (cm.state.focused && op.updateInput)
  cm.display.input.reset(op.typing)
- if (takeFocus) ensureFocus(op.cm)
+
+ if (!op.extActiveElt || op.forceFocus) {
+ ensureFocus(cm)
+ } else {
+ op.extActiveElt.focus()
+ }
 }
 
 function endOperation_finish(op) {

diff --git a/src/input/ContentEditableInput.js b/src/input/ContentEditableInput.js
@@ -100,14 +100,14 @@ export default class ContentEditableInput {
  }
 
  prepareSelection() {
- let result = prepareSelection(this.cm, false)
- result.focus = this.cm.state.focused
- return result
+ // Redraw the selection and/or cursor
+ return prepareSelection(this.cm, false)
  }
 
- showSelection(info, takeFocus) {
+ showSelection(info) {
  if (!info || !this.cm.display.view.length) return
- if (info.focus || takeFocus) this.showPrimarySelection()
+
+ this.showPrimarySelection(info)
  this.showMultipleSelections(info)
  }
 

diff --git a/src/model/selection_updates.js b/src/model/selection_updates.js
@@ -108,6 +108,9 @@ export function setSelectionNoUndo(doc, sel, options) {
 
  if (!(options && options.scroll === false) && doc.cm)
  ensureCursorVisible(doc.cm)
+
+ if ((options && options.forceFocus === true) && doc.cm)
+ doc.cm.curOp.forceFocus = true
 }
 
 function setSelectionInner(doc, sel) {