22698f3a383f78267eb85060678f3cb203ffd14c8a3e18877126dc22dff9bb9de9015a859cdf10d81b496984dea7a7e1e7e7a02f5b5a0c03cb52b7461507bd 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. import { operation, runInOp } from "../display/operations.js"
  2. import { prepareSelection } from "../display/selection.js"
  3. import { applyTextInput, copyableRanges, handlePaste, hiddenTextarea, disableBrowserMagic, setLastCopied } from "./input.js"
  4. import { cursorCoords, posFromMouse } from "../measurement/position_measurement.js"
  5. import { eventInWidget } from "../measurement/widgets.js"
  6. import { simpleSelection } from "../model/selection.js"
  7. import { selectAll, setSelection } from "../model/selection_updates.js"
  8. import { captureRightClick, ie, ie_version, ios, mac, mobile, presto, webkit } from "../util/browser.js"
  9. import { activeElt, removeChildrenAndAdd, selectInput, rootNode } from "../util/dom.js"
  10. import { e_preventDefault, e_stop, off, on, signalDOMEvent } from "../util/event.js"
  11. import { hasSelection } from "../util/feature_detection.js"
  12. import { Delayed, sel_dontScroll } from "../util/misc.js"
  13. // TEXTAREA INPUT STYLE
  14. export default class TextareaInput {
  15. constructor(cm) {
  16. this.cm = cm
  17. // See input.poll and input.reset
  18. this.prevInput = ""
  19. // Flag that indicates whether we expect input to appear real soon
  20. // now (after some event like 'keypress' or 'input') and are
  21. // polling intensively.
  22. this.pollingFast = false
  23. // Self-resetting timeout for the poller
  24. this.polling = new Delayed()
  25. // Used to work around IE issue with selection being forgotten when focus moves away from textarea
  26. this.hasSelection = false
  27. this.composing = null
  28. this.resetting = false
  29. }
  30. init(display) {
  31. let input = this, cm = this.cm
  32. this.createField(display)
  33. const te = this.textarea
  34. display.wrapper.insertBefore(this.wrapper, display.wrapper.firstChild)
  35. // Needed to hide big blue blinking cursor on Mobile Safari (doesn't seem to work in iOS 8 anymore)
  36. if (ios) te.style.width = "0px"
  37. on(te, "input", () => {
  38. if (ie && ie_version >= 9 && this.hasSelection) this.hasSelection = null
  39. input.poll()
  40. })
  41. on(te, "paste", e => {
  42. if (signalDOMEvent(cm, e) || handlePaste(e, cm)) return
  43. cm.state.pasteIncoming = +new Date
  44. input.fastPoll()
  45. })
  46. function prepareCopyCut(e) {
  47. if (signalDOMEvent(cm, e)) return
  48. if (cm.somethingSelected()) {
  49. setLastCopied({lineWise: false, text: cm.getSelections()})
  50. } else if (!cm.options.lineWiseCopyCut) {
  51. return
  52. } else {
  53. let ranges = copyableRanges(cm)
  54. setLastCopied({lineWise: true, text: ranges.text})
  55. if (e.type == "cut") {
  56. cm.setSelections(ranges.ranges, null, sel_dontScroll)
  57. } else {
  58. input.prevInput = ""
  59. te.value = ranges.text.join("\n")
  60. selectInput(te)
  61. }
  62. }
  63. if (e.type == "cut") cm.state.cutIncoming = +new Date
  64. }
  65. on(te, "cut", prepareCopyCut)
  66. on(te, "copy", prepareCopyCut)
  67. on(display.scroller, "paste", e => {
  68. if (eventInWidget(display, e) || signalDOMEvent(cm, e)) return
  69. if (!te.dispatchEvent) {
  70. cm.state.pasteIncoming = +new Date
  71. input.focus()
  72. return
  73. }
  74. // Pass the `paste` event to the textarea so it's handled by its event listener.
  75. const event = new Event("paste")
  76. event.clipboardData = e.clipboardData
  77. te.dispatchEvent(event)
  78. })
  79. // Prevent normal selection in the editor (we handle our own)
  80. on(display.lineSpace, "selectstart", e => {
  81. if (!eventInWidget(display, e)) e_preventDefault(e)
  82. })
  83. on(te, "compositionstart", () => {
  84. let start = cm.getCursor("from")
  85. if (input.composing) input.composing.range.clear()
  86. input.composing = {
  87. start: start,
  88. range: cm.markText(start, cm.getCursor("to"), {className: "CodeMirror-composing"})
  89. }
  90. })
  91. on(te, "compositionend", () => {
  92. if (input.composing) {
  93. input.poll()
  94. input.composing.range.clear()
  95. input.composing = null
  96. }
  97. })
  98. }
  99. createField(_display) {
  100. // Wraps and hides input textarea
  101. this.wrapper = hiddenTextarea()
  102. // The semihidden textarea that is focused when the editor is
  103. // focused, and receives input.
  104. this.textarea = this.wrapper.firstChild
  105. let opts = this.cm.options
  106. disableBrowserMagic(this.textarea, opts.spellcheck, opts.autocorrect, opts.autocapitalize)
  107. }
  108. screenReaderLabelChanged(label) {
  109. // Label for screenreaders, accessibility
  110. if(label) {
  111. this.textarea.setAttribute('aria-label', label)
  112. } else {
  113. this.textarea.removeAttribute('aria-label')
  114. }
  115. }
  116. prepareSelection() {
  117. // Redraw the selection and/or cursor
  118. let cm = this.cm, display = cm.display, doc = cm.doc
  119. let result = prepareSelection(cm)
  120. // Move the hidden textarea near the cursor to prevent scrolling artifacts
  121. if (cm.options.moveInputWithCursor) {
  122. let headPos = cursorCoords(cm, doc.sel.primary().head, "div")
  123. let wrapOff = display.wrapper.getBoundingClientRect(), lineOff = display.lineDiv.getBoundingClientRect()
  124. result.teTop = Math.max(0, Math.min(display.wrapper.clientHeight - 10,
  125. headPos.top + lineOff.top - wrapOff.top))
  126. result.teLeft = Math.max(0, Math.min(display.wrapper.clientWidth - 10,
  127. headPos.left + lineOff.left - wrapOff.left))
  128. }
  129. return result
  130. }
  131. showSelection(drawn) {
  132. let cm = this.cm, display = cm.display
  133. removeChildrenAndAdd(display.cursorDiv, drawn.cursors)
  134. removeChildrenAndAdd(display.selectionDiv, drawn.selection)
  135. if (drawn.teTop != null) {
  136. this.wrapper.style.top = drawn.teTop + "px"
  137. this.wrapper.style.left = drawn.teLeft + "px"
  138. }
  139. }
  140. // Reset the input to correspond to the selection (or to be empty,
  141. // when not typing and nothing is selected)
  142. reset(typing) {
  143. if (this.contextMenuPending || this.composing && typing) return
  144. let cm = this.cm
  145. this.resetting = true
  146. if (cm.somethingSelected()) {
  147. this.prevInput = ""
  148. let content = cm.getSelection()
  149. this.textarea.value = content
  150. if (cm.state.focused) selectInput(this.textarea)
  151. if (ie && ie_version >= 9) this.hasSelection = content
  152. } else if (!typing) {
  153. this.prevInput = this.textarea.value = ""
  154. if (ie && ie_version >= 9) this.hasSelection = null
  155. }
  156. this.resetting = false
  157. }
  158. getField() { return this.textarea }
  159. supportsTouch() { return false }
  160. focus() {
  161. if (this.cm.options.readOnly != "nocursor" && (!mobile || activeElt(rootNode(this.textarea)) != this.textarea)) {
  162. try { this.textarea.focus() }
  163. catch (e) {} // IE8 will throw if the textarea is display: none or not in DOM
  164. }
  165. }
  166. blur() { this.textarea.blur() }
  167. resetPosition() {
  168. this.wrapper.style.top = this.wrapper.style.left = 0
  169. }
  170. receivedFocus() { this.slowPoll() }
  171. // Poll for input changes, using the normal rate of polling. This
  172. // runs as long as the editor is focused.
  173. slowPoll() {
  174. if (this.pollingFast) return
  175. this.polling.set(this.cm.options.pollInterval, () => {
  176. this.poll()
  177. if (this.cm.state.focused) this.slowPoll()
  178. })
  179. }
  180. // When an event has just come in that is likely to add or change
  181. // something in the input textarea, we poll faster, to ensure that
  182. // the change appears on the screen quickly.
  183. fastPoll() {
  184. let missed = false, input = this
  185. input.pollingFast = true
  186. function p() {
  187. let changed = input.poll()
  188. if (!changed && !missed) {missed = true; input.polling.set(60, p)}
  189. else {input.pollingFast = false; input.slowPoll()}
  190. }
  191. input.polling.set(20, p)
  192. }
  193. // Read input from the textarea, and update the document to match.
  194. // When something is selected, it is present in the textarea, and
  195. // selected (unless it is huge, in which case a placeholder is
  196. // used). When nothing is selected, the cursor sits after previously
  197. // seen text (can be empty), which is stored in prevInput (we must
  198. // not reset the textarea when typing, because that breaks IME).
  199. poll() {
  200. let cm = this.cm, input = this.textarea, prevInput = this.prevInput
  201. // Since this is called a *lot*, try to bail out as cheaply as
  202. // possible when it is clear that nothing happened. hasSelection
  203. // will be the case when there is a lot of text in the textarea,
  204. // in which case reading its value would be expensive.
  205. if (this.contextMenuPending || this.resetting || !cm.state.focused ||
  206. (hasSelection(input) && !prevInput && !this.composing) ||
  207. cm.isReadOnly() || cm.options.disableInput || cm.state.keySeq)
  208. return false
  209. let text = input.value
  210. // If nothing changed, bail.
  211. if (text == prevInput && !cm.somethingSelected()) return false
  212. // Work around nonsensical selection resetting in IE9/10, and
  213. // inexplicable appearance of private area unicode characters on
  214. // some key combos in Mac (#2689).
  215. if (ie && ie_version >= 9 && this.hasSelection === text ||
  216. mac && /[\uf700-\uf7ff]/.test(text)) {
  217. cm.display.input.reset()
  218. return false
  219. }
  220. if (cm.doc.sel == cm.display.selForContextMenu) {
  221. let first = text.charCodeAt(0)
  222. if (first == 0x200b && !prevInput) prevInput = "\u200b"
  223. if (first == 0x21da) { this.reset(); return this.cm.execCommand("undo") }
  224. }
  225. // Find the part of the input that is actually new
  226. let same = 0, l = Math.min(prevInput.length, text.length)
  227. while (same < l && prevInput.charCodeAt(same) == text.charCodeAt(same)) ++same
  228. runInOp(cm, () => {
  229. applyTextInput(cm, text.slice(same), prevInput.length - same,
  230. null, this.composing ? "*compose" : null)
  231. // Don't leave long text in the textarea, since it makes further polling slow
  232. if (text.length > 1000 || text.indexOf("\n") > -1) input.value = this.prevInput = ""
  233. else this.prevInput = text
  234. if (this.composing) {
  235. this.composing.range.clear()
  236. this.composing.range = cm.markText(this.composing.start, cm.getCursor("to"),
  237. {className: "CodeMirror-composing"})
  238. }
  239. })
  240. return true
  241. }
  242. ensurePolled() {
  243. if (this.pollingFast && this.poll()) this.pollingFast = false
  244. }
  245. onKeyPress() {
  246. if (ie && ie_version >= 9) this.hasSelection = null
  247. this.fastPoll()
  248. }
  249. onContextMenu(e) {
  250. let input = this, cm = input.cm, display = cm.display, te = input.textarea
  251. if (input.contextMenuPending) input.contextMenuPending()
  252. let pos = posFromMouse(cm, e), scrollPos = display.scroller.scrollTop
  253. if (!pos || presto) return // Opera is difficult.
  254. // Reset the current text selection only if the click is done outside of the selection
  255. // and 'resetSelectionOnContextMenu' option is true.
  256. let reset = cm.options.resetSelectionOnContextMenu
  257. if (reset && cm.doc.sel.contains(pos) == -1)
  258. operation(cm, setSelection)(cm.doc, simpleSelection(pos), sel_dontScroll)
  259. let oldCSS = te.style.cssText, oldWrapperCSS = input.wrapper.style.cssText
  260. let wrapperBox = input.wrapper.offsetParent.getBoundingClientRect()
  261. input.wrapper.style.cssText = "position: static"
  262. te.style.cssText = `position: absolute; width: 30px; height: 30px;
  263. top: ${e.clientY - wrapperBox.top - 5}px; left: ${e.clientX - wrapperBox.left - 5}px;
  264. z-index: 1000; background: ${ie ? "rgba(255, 255, 255, .05)" : "transparent"};
  265. outline: none; border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);`
  266. let oldScrollY
  267. if (webkit) oldScrollY = te.ownerDocument.defaultView.scrollY // Work around Chrome issue (#2712)
  268. display.input.focus()
  269. if (webkit) te.ownerDocument.defaultView.scrollTo(null, oldScrollY)
  270. display.input.reset()
  271. // Adds "Select all" to context menu in FF
  272. if (!cm.somethingSelected()) te.value = input.prevInput = " "
  273. input.contextMenuPending = rehide
  274. display.selForContextMenu = cm.doc.sel
  275. clearTimeout(display.detectingSelectAll)
  276. // Select-all will be greyed out if there's nothing to select, so
  277. // this adds a zero-width space so that we can later check whether
  278. // it got selected.
  279. function prepareSelectAllHack() {
  280. if (te.selectionStart != null) {
  281. let selected = cm.somethingSelected()
  282. let extval = "\u200b" + (selected ? te.value : "")
  283. te.value = "\u21da" // Used to catch context-menu undo
  284. te.value = extval
  285. input.prevInput = selected ? "" : "\u200b"
  286. te.selectionStart = 1; te.selectionEnd = extval.length
  287. // Re-set this, in case some other handler touched the
  288. // selection in the meantime.
  289. display.selForContextMenu = cm.doc.sel
  290. }
  291. }
  292. function rehide() {
  293. if (input.contextMenuPending != rehide) return
  294. input.contextMenuPending = false
  295. input.wrapper.style.cssText = oldWrapperCSS
  296. te.style.cssText = oldCSS
  297. if (ie && ie_version < 9) display.scrollbars.setScrollTop(display.scroller.scrollTop = scrollPos)
  298. // Try to detect the user choosing select-all
  299. if (te.selectionStart != null) {
  300. if (!ie || (ie && ie_version < 9)) prepareSelectAllHack()
  301. let i = 0, poll = () => {
  302. if (display.selForContextMenu == cm.doc.sel && te.selectionStart == 0 &&
  303. te.selectionEnd > 0 && input.prevInput == "\u200b") {
  304. operation(cm, selectAll)(cm)
  305. } else if (i++ < 10) {
  306. display.detectingSelectAll = setTimeout(poll, 500)
  307. } else {
  308. display.selForContextMenu = null
  309. display.input.reset()
  310. }
  311. }
  312. display.detectingSelectAll = setTimeout(poll, 200)
  313. }
  314. }
  315. if (ie && ie_version >= 9) prepareSelectAllHack()
  316. if (captureRightClick) {
  317. e_stop(e)
  318. let mouseup = () => {
  319. off(window, "mouseup", mouseup)
  320. setTimeout(rehide, 20)
  321. }
  322. on(window, "mouseup", mouseup)
  323. } else {
  324. setTimeout(rehide, 50)
  325. }
  326. }
  327. readOnlyChanged(val) {
  328. if (!val) this.reset()
  329. this.textarea.disabled = val == "nocursor"
  330. this.textarea.readOnly = !!val
  331. }
  332. setUneditable() {}
  333. }
  334. TextareaInput.prototype.needsContentAttribute = false