mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
b50d488f2e
Summary: Fixes T3510 Fixes T3509 Fixes T3508 Fixes T3549 Extracted clipboard service Remove unused style prop Begin extracting quoted text from composer. Spec for clipboard service Fix contenteditable specs Begin to extract floating toolbar Extract out DOMUtils and further extract floating toolbar Further extracting domutils and floating toolbar composer floating toolbar extracted Fixes to hover and link states Collapse adjacent ul lists Fix outdent when deleting on a bulleted list Fix bullet controls Fixes to list creation and deletion Add underline keyboard shortcut Test Plan: manual :( Reviewers: dillon, bengotow Reviewed By: bengotow Maniphest Tasks: T3508, T3509, T3510, T3549 Differential Revision: https://phab.nylas.com/D2036
864 lines
31 KiB
CoffeeScript
864 lines
31 KiB
CoffeeScript
_ = require 'underscore'
|
|
React = require 'react'
|
|
|
|
{Utils,
|
|
DOMUtils,
|
|
DraftStore} = require 'nylas-exports'
|
|
|
|
ClipboardService = require './clipboard-service'
|
|
FloatingToolbarContainer = require './floating-toolbar-container'
|
|
|
|
class ContenteditableComponent extends React.Component
|
|
@displayName: "ContenteditableComponent"
|
|
@propTypes:
|
|
html: React.PropTypes.string
|
|
initialSelectionSnapshot: React.PropTypes.object
|
|
|
|
filters: React.PropTypes.object
|
|
footerElements: React.PropTypes.node
|
|
|
|
# Passes an absolute top coordinate to scroll to.
|
|
onChange: React.PropTypes.func.isRequired
|
|
onFilePaste: React.PropTypes.func
|
|
onScrollTo: React.PropTypes.func
|
|
onScrollToBottom: React.PropTypes.func
|
|
|
|
@defaultProps:
|
|
filters: []
|
|
|
|
constructor: (@props) ->
|
|
@innerState = {}
|
|
@_setupServices(@props)
|
|
|
|
_setupServices: (props) ->
|
|
@clipboardService = new ClipboardService
|
|
onFilePaste: props.onFilePaste
|
|
|
|
setInnerState: (innerState={}) ->
|
|
@innerState = _.extend @innerState, innerState
|
|
@refs["toolbarController"]?.componentWillReceiveInnerProps(innerState)
|
|
|
|
componentDidMount: =>
|
|
@_editableNode().addEventListener('contextmenu', @_onShowContextualMenu)
|
|
@_setupSelectionListeners()
|
|
@_setupGlobalMouseListener()
|
|
|
|
@_disposable = atom.commands.add '.contenteditable-container *', {
|
|
'core:focus-next': (event) =>
|
|
editableNode = @_editableNode()
|
|
range = DOMUtils.getRangeInScope(editableNode)
|
|
for extension in DraftStore.extensions()
|
|
extension.onFocusNext(editableNode, range, event) if extension.onFocusNext
|
|
|
|
'core:focus-previous': (event) =>
|
|
editableNode = @_editableNode()
|
|
range = DOMUtils.getRangeInScope(editableNode)
|
|
for extension in DraftStore.extensions()
|
|
extension.onFocusPrevious(editableNode, range, event) if extension.onFocusPrevious
|
|
}
|
|
|
|
@_cleanHTML()
|
|
|
|
@setInnerState editableNode: @_editableNode()
|
|
|
|
shouldComponentUpdate: (nextProps, nextState) ->
|
|
not Utils.isEqualReact(nextProps, @props) or
|
|
not Utils.isEqualReact(nextState, @state)
|
|
|
|
componentWillUnmount: =>
|
|
@_editableNode().removeEventListener('contextmenu', @_onShowContextualMenu)
|
|
@_teardownSelectionListeners()
|
|
@_teardownGlobalMouseListener()
|
|
@_disposable.dispose()
|
|
|
|
componentWillReceiveProps: (nextProps) =>
|
|
@_setupServices(nextProps)
|
|
if nextProps.initialSelectionSnapshot?
|
|
@_setSelectionSnapshot(nextProps.initialSelectionSnapshot)
|
|
|
|
componentDidUpdate: =>
|
|
@_cleanHTML()
|
|
|
|
@_restoreSelection()
|
|
|
|
editableNode = @_editableNode()
|
|
for extension in DraftStore.extensions()
|
|
extension.onComponentDidUpdate(@_editableNode()) if extension.onComponentDidUpdate
|
|
|
|
@setInnerState
|
|
links: editableNode.querySelectorAll("*[href]")
|
|
editableNode: editableNode
|
|
|
|
render: =>
|
|
<div className="contenteditable-container">
|
|
<FloatingToolbarContainer
|
|
ref="toolbarController"
|
|
onSaveUrl={@_onSaveUrl}
|
|
onDomMutator={@_onDomMutator} />
|
|
|
|
<div id="contenteditable"
|
|
ref="contenteditable"
|
|
contentEditable
|
|
spellCheck={false}
|
|
onBlur={@_onBlur}
|
|
onFocus={@_onFocus}
|
|
onClick={@_onClick}
|
|
onPaste={@clipboardService.onPaste}
|
|
onInput={@_onInput}
|
|
onKeyDown={@_onKeyDown}
|
|
dangerouslySetInnerHTML={@_dangerouslySetInnerHTML()}></div>
|
|
{@props.footerElements}
|
|
</div>
|
|
|
|
focus: =>
|
|
@_editableNode().focus()
|
|
|
|
selectEnd: =>
|
|
range = document.createRange()
|
|
range.selectNodeContents(@_editableNode())
|
|
range.collapse(false)
|
|
@_editableNode().focus()
|
|
selection = window.getSelection()
|
|
selection.removeAllRanges()
|
|
selection.addRange(range)
|
|
|
|
# When some other component (like the `FloatingToolbar` or some
|
|
# `DraftStoreExtension`) wants to mutate the DOM, it declares a
|
|
# `mutator` function. That mutator expects to be passed the latest DOM
|
|
# object (the `_editableNode()`) and will do mutations to it. Once those
|
|
# mutations are done, we need to be sure to notify that changes
|
|
# happened.
|
|
_onDomMutator: (mutator) =>
|
|
@_teardownSelectionListeners()
|
|
mutator(@_editableNode())
|
|
@_setupSelectionListeners()
|
|
@_onInput()
|
|
|
|
_onClick: (event) ->
|
|
# We handle mouseDown, mouseMove, mouseUp, but we want to stop propagation
|
|
# of `click` to make it clear that we've handled the event.
|
|
# Note: Related to composer-view#_onClickComposeBody
|
|
event.stopPropagation()
|
|
|
|
_onKeyDown: (event) =>
|
|
if event.key is "Tab"
|
|
@_onTabDown(event)
|
|
if event.key is "Backspace"
|
|
@_onBackspaceDown(event)
|
|
U = 85
|
|
if event.which is U and (event.metaKey or event.ctrlKey)
|
|
event.preventDefault()
|
|
document.execCommand("underline")
|
|
return
|
|
|
|
_onInput: (event) =>
|
|
return if @_ignoreInputChanges
|
|
@_ignoreInputChanges = true
|
|
|
|
@_resetInnerStateOnInput()
|
|
|
|
@_runCoreFilters()
|
|
|
|
@_runExtensionFilters(event)
|
|
|
|
@_normalize()
|
|
|
|
@_saveSelectionState()
|
|
|
|
@_saveNewHtml()
|
|
|
|
@_ignoreInputChanges = false
|
|
return
|
|
|
|
_resetInnerStateOnInput: ->
|
|
@_justCreatedList = false
|
|
@setInnerState dragging: false if @innerState.dragging
|
|
@setInnerState doubleDown: false if @innerState.doubleDown
|
|
|
|
_runCoreFilters: ->
|
|
@_createLists()
|
|
|
|
_runExtensionFilters: (event) ->
|
|
for extension in DraftStore.extensions()
|
|
extension.onInput(@_editableNode(), event) if extension.onInput
|
|
|
|
_saveNewHtml: ->
|
|
html = @_editableNode().innerHTML
|
|
for filter in @props.filters
|
|
html = filter.afterDisplay(html)
|
|
@props.onChange(target: {value: html})
|
|
|
|
# Determines if the user wants to add an ordered or unordered list.
|
|
_createLists: ->
|
|
# The `execCommand` will update the DOM and move the cursor. Since
|
|
# this is happening in the middle of an `_onInput` callback, we want
|
|
# the whole operation to look "atomic". As such we'll do any necessary
|
|
# DOM cleanup and fire the `exec` command with the listeners off, then
|
|
# re-enable at the end.
|
|
if @_resetListToText
|
|
@_resetListToText = false
|
|
return
|
|
|
|
updateDOM = (command) =>
|
|
@_teardownSelectionListeners()
|
|
document.execCommand(command)
|
|
selection = document.getSelection()
|
|
selection.anchorNode.parentElement.innerHTML = ""
|
|
@_setupSelectionListeners()
|
|
|
|
text = @_textContentAtCursor()
|
|
if (/^\d\.\s$/).test text
|
|
@_justCreatedList = text
|
|
updateDOM("insertOrderedList")
|
|
else if (/^[*-]\s$/).test text
|
|
@_justCreatedList = text
|
|
updateDOM("insertUnorderedList")
|
|
|
|
_onBackspaceDown: (event) ->
|
|
if document.getSelection()?.isCollapsed
|
|
if @_atStartOfList()
|
|
li = @_closestAtCursor("li")
|
|
list = @_closestAtCursor("ul, ol")
|
|
return unless li and list
|
|
event.preventDefault()
|
|
if list.querySelectorAll('li')?[0] is li # We're in first li
|
|
if @_justCreatedList
|
|
@_resetListToText = true
|
|
@_replaceFirstListItem(li, @_justCreatedList)
|
|
else
|
|
@_replaceFirstListItem(li, "")
|
|
else
|
|
document.execCommand("outdent")
|
|
|
|
_closestAtCursor: (selector) ->
|
|
selection = document.getSelection()
|
|
return unless selection?.isCollapsed
|
|
return selection.anchorNode?.closest(selector)
|
|
|
|
_replaceFirstListItem: (li, replaceWith) ->
|
|
@_teardownSelectionListeners()
|
|
list = li.closest("ul, ol")
|
|
|
|
if replaceWith.length is 0
|
|
replaceWith = replaceWith.replace /\s/g, " "
|
|
text = document.createElement("div")
|
|
text.innerHTML = "<br>"
|
|
else
|
|
replaceWith = replaceWith.replace /\s/g, " "
|
|
text = document.createElement("span")
|
|
text.innerHTML = "#{replaceWith}"
|
|
|
|
if list.querySelectorAll('li').length <= 1
|
|
# Delete the whole list and replace with text
|
|
list.parentNode.replaceChild(text, list)
|
|
else
|
|
# Delete the list item and prepend the text before the rest of the
|
|
# list
|
|
li.parentNode.removeChild(li)
|
|
list.parentNode.insertBefore(text, list)
|
|
|
|
child = text.childNodes[0] ? text
|
|
index = Math.max(replaceWith.length - 1, 0)
|
|
selection = document.getSelection()
|
|
selection.setBaseAndExtent(child, index, child, index)
|
|
|
|
@_setupSelectionListeners()
|
|
@_onInput()
|
|
|
|
_onTabDown: (event) ->
|
|
event.preventDefault()
|
|
selection = document.getSelection()
|
|
if selection?.isCollapsed
|
|
# https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
|
|
if selection.anchorNode instanceof HTMLElement
|
|
anchorElement = selection.anchorNode
|
|
else
|
|
anchorElement = selection.anchorNode.parentElement
|
|
|
|
# Only Elements (not Text nodes) have the `closest` method
|
|
if anchorElement.closest("li")
|
|
if event.shiftKey
|
|
document.execCommand("outdent")
|
|
else
|
|
document.execCommand("indent")
|
|
return
|
|
else if event.shiftKey
|
|
if @_atTabChar()
|
|
@_removeLastCharacter()
|
|
else if @_atBeginning()
|
|
return # Don't stop propagation
|
|
else
|
|
document.execCommand("insertText", false, "\t")
|
|
else
|
|
if event.shiftKey
|
|
document.execCommand("insertText", false, "")
|
|
else
|
|
document.execCommand("insertText", false, "\t")
|
|
event.stopPropagation()
|
|
|
|
_selectionInText: (selection) ->
|
|
return false unless selection
|
|
return selection.isCollapsed and selection.anchorNode.nodeType is Node.TEXT_NODE and selection.anchorOffset > 0
|
|
|
|
_atTabChar: ->
|
|
selection = document.getSelection()
|
|
if @_selectionInText(selection)
|
|
return selection.anchorNode.textContent[selection.anchorOffset - 1] is "\t"
|
|
else return false
|
|
|
|
_atStartOfList: ->
|
|
selection = document.getSelection()
|
|
anchor = selection.anchorNode
|
|
return false if not selection.isCollapsed
|
|
return true if anchor?.nodeName is "LI"
|
|
return false if selection.anchorOffset > 0
|
|
li = anchor.closest("li")
|
|
return unless li
|
|
return DOMUtils.isFirstChild(li, anchor)
|
|
|
|
_atBeginning: ->
|
|
selection = document.getSelection()
|
|
return false if not selection.isCollapsed
|
|
return false if selection.anchorOffset > 0
|
|
el = @_editableNode()
|
|
return true if el.childNodes.length is 0
|
|
return true if selection.anchorNode is el
|
|
firstChild = el.childNodes[0]
|
|
return selection.anchorNode is firstChild
|
|
|
|
_removeLastCharacter: ->
|
|
selection = document.getSelection()
|
|
if @_selectionInText(selection)
|
|
node = selection.anchorNode
|
|
offset = selection.anchorOffset
|
|
@_teardownSelectionListeners()
|
|
selection.setBaseAndExtent(node, offset - 1, node, offset)
|
|
document.execCommand("delete")
|
|
@_setupSelectionListeners()
|
|
|
|
_textContentAtCursor: ->
|
|
selection = document.getSelection()
|
|
if selection.isCollapsed
|
|
return selection.anchorNode?.textContent
|
|
else return null
|
|
|
|
# This component works by re-rendering on every change and restoring the
|
|
# selection. This is also how standard React controlled inputs work too.
|
|
#
|
|
# Since the contents of the contenteditable are complex, nested DOM
|
|
# structures, a simple replacement of the DOM is not easy. There are a
|
|
# variety of edge cases that we need to correct for and prepare both the
|
|
# HTML and the selection to be serialized without error.
|
|
_normalize: ->
|
|
@_cleanHTML()
|
|
@_cleanSelection()
|
|
|
|
# We need to clean the HTML on input to fix several edge cases that
|
|
# arise when we go to save the selection state and restore it on the
|
|
# next render.
|
|
_cleanHTML: ->
|
|
return unless @_editableNode()
|
|
|
|
# One issue is that we need to pre-normalize the HTML so it looks the
|
|
# same after it gets re-inserted. If we key selection markers off of an
|
|
# non normalized DOM, then they won't match up when the HTML gets reset.
|
|
#
|
|
# The Node.normalize() method puts the specified node and all of its
|
|
# sub-tree into a "normalized" form. In a normalized sub-tree, no text
|
|
# nodes in the sub-tree are empty and there are no adjacent text
|
|
# nodes.
|
|
@_editableNode().normalize()
|
|
|
|
@_collapseAdjacentLists()
|
|
|
|
@_fixLeadingBRCondition()
|
|
|
|
# An issue arises from <br/> tags immediately inside of divs. In this
|
|
# case the cursor's anchor node will not be the <br/> tag, but rather
|
|
# the entire enclosing element. Sometimes, that enclosing element is the
|
|
# container wrapping all of the content. The browser has a native
|
|
# built-in feature that will automatically scroll the page to the bottom
|
|
# of the current element that the cursor is in if the cursor is off the
|
|
# screen. In the given case, that element is the whole div. The net
|
|
# effect is that the browser will scroll erroneously to the bottom of
|
|
# the whole content div, which is likely NOT where the cursor is or the
|
|
# user wants. The solution to this is to replace this particular case
|
|
# with <span></span> tags and place the cursor in there.
|
|
_fixLeadingBRCondition: ->
|
|
treeWalker = document.createTreeWalker @_editableNode()
|
|
while treeWalker.nextNode()
|
|
currentNode = treeWalker.currentNode
|
|
if @_hasLeadingBRCondition(currentNode)
|
|
newNode = document.createElement("div")
|
|
newNode.appendChild(document.createElement("br"))
|
|
currentNode.replaceChild(newNode, currentNode.childNodes[0])
|
|
return
|
|
|
|
_hasLeadingBRCondition: (node) ->
|
|
childNodes = node.childNodes
|
|
return childNodes.length >= 2 and childNodes[0].nodeName is "BR"
|
|
|
|
# If users ended up with two <ul> lists adjacent to each other, we
|
|
# collapse them into one. We leave adjacent <ol> lists intact in case
|
|
# the user wanted to restart the numbering sequence
|
|
_collapseAdjacentLists: ->
|
|
els = @_editableNode().querySelectorAll('ul')
|
|
|
|
# This mutates the DOM in place.
|
|
DOMUtils.collapseAdjacentElements(els)
|
|
|
|
# After an input, the selection can sometimes get itself into a state
|
|
# that either can't be restored properly, or will cause undersirable
|
|
# native behavior. This method, in combination with `_cleanHTML`, fixes
|
|
# each of those scenarios before we save and later restore the
|
|
# selection.
|
|
_cleanSelection: ->
|
|
selection = document.getSelection()
|
|
return unless selection.anchorNode? and selection.focusNode?
|
|
|
|
# The _unselectableNode case only is valid when it's at the very top
|
|
# (offset 0) of the node. If the offsets are > 0 that means we're
|
|
# trying to select somewhere within some sort of containing element.
|
|
# This is okay to do. The odd case only arises at the top of
|
|
# unselectable elements.
|
|
return if selection.anchorOffset > 0 or selection.focusOffset > 0
|
|
|
|
if selection.isCollapsed and @_unselectableNode(selection.focusNode)
|
|
@_teardownSelectionListeners()
|
|
treeWalker = document.createTreeWalker(selection.focusNode)
|
|
while treeWalker.nextNode()
|
|
currentNode = treeWalker.currentNode
|
|
if @_unselectableNode(currentNode)
|
|
selection.setBaseAndExtent(currentNode, 0, currentNode, 0)
|
|
break
|
|
@_setupSelectionListeners()
|
|
return
|
|
|
|
_unselectableNode: (node) ->
|
|
return true if not node
|
|
if node.nodeType is Node.TEXT_NODE and DOMUtils.isBlankTextNode(node)
|
|
return true
|
|
else if node.nodeType is Node.ELEMENT_NODE
|
|
child = node.firstChild
|
|
return true if not child
|
|
hasText = (child.nodeType is Node.TEXT_NODE and not DOMUtils.isBlankTextNode(node))
|
|
hasBr = (child.nodeType is Node.ELEMENT_NODE and node.nodeName is "BR")
|
|
return not hasText and not hasBr
|
|
|
|
else return false
|
|
|
|
_onBlur: (event) =>
|
|
# console.log "On Blur Contenteditable"
|
|
@setInnerState dragging: false
|
|
# The delay here is necessary to see if the blur was caused by us
|
|
# navigating to the toolbar and focusing on the set-url input.
|
|
_.delay =>
|
|
@setInnerState editableFocused: false
|
|
, 50
|
|
|
|
_onFocus: (event) =>
|
|
@setInnerState editableFocused: true
|
|
@props.onFocus?(event)
|
|
|
|
_editableNode: =>
|
|
React.findDOMNode(@refs.contenteditable)
|
|
|
|
_dangerouslySetInnerHTML: =>
|
|
html = @props.html
|
|
for filter in @props.filters
|
|
html = filter.beforeDisplay(html)
|
|
return __html: html
|
|
|
|
######### SELECTION MANAGEMENT ##########
|
|
#
|
|
# Saving and restoring a selection is difficult with React.
|
|
#
|
|
# React only handles Input and Textarea elements:
|
|
# https://github.com/facebook/react/blob/master/src/browser/ui/ReactInputSelection.js
|
|
# This is because they expose a very convenient `selectionStart` and
|
|
# `selectionEnd` integer.
|
|
#
|
|
# Contenteditable regions are trickier. They require the more
|
|
# sophisticated `Range` and `Selection` APIs.
|
|
#
|
|
# Range docs:
|
|
# http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
|
|
#
|
|
# Selection API docs:
|
|
# http://www.w3.org/TR/selection-api/#dfn-range
|
|
#
|
|
# A Contenteditable region can have arbitrary html inside of it. This
|
|
# means that a selection start point can be some node (the `anchorNode`)
|
|
# and its end point can be a completely different node (the `focusNode`)
|
|
#
|
|
# When React re-renders, all of the DOM nodes may change. They may
|
|
# look exactly the same, but have different object references.
|
|
#
|
|
# This means that your old references to `anchorNode` and `focusNode`
|
|
# may be bad and no longer in scope or painted.
|
|
#
|
|
# In order to restore the selection properly we need to re-find the
|
|
# equivalent `anchorNode` and `focusNode`. Luckily we can use the
|
|
# `isEqualNode` method to get a shallow comparison of the nodes.
|
|
#
|
|
# Unfortunately it's possible for `isEqualNode` to match more than one
|
|
# node since two nodes may look very similar.
|
|
#
|
|
# To fix this we need to keep track of the original indices to determine
|
|
# which node is most likely the matching one.
|
|
|
|
# http://www.w3.org/TR/selection-api/#selectstart-event
|
|
_setupSelectionListeners: =>
|
|
@_ignoreInputChanges = false
|
|
document.addEventListener("selectionchange", @_saveSelectionState)
|
|
|
|
_teardownSelectionListeners: =>
|
|
document.removeEventListener("selectionchange", @_saveSelectionState)
|
|
@_ignoreInputChanges = true
|
|
|
|
getCurrentSelection: => _.clone(@_selection ? {})
|
|
getPreviousSelection: => _.clone(@_previousSelection ? {})
|
|
|
|
# Every time the cursor changes we need to preserve its location and
|
|
# state.
|
|
#
|
|
# We can't use React's `state` variable because cursor position is not
|
|
# naturally supported in the virtual DOM.
|
|
#
|
|
# We also need to make sure that node references are cloned so they
|
|
# don't change out from underneath us.
|
|
#
|
|
# We also need to keep references to the previous selection state in
|
|
# order for undo/redo to work properly.
|
|
#
|
|
# We need to be sure to deeply `cloneNode`. This is because sometimes
|
|
# our anchorNodes are divs with nested <br> tags. If we don't do a deep
|
|
# clone then when `isEqualNode` is run it will erroneously return false
|
|
# and our selection restoration will fail.
|
|
#
|
|
# The Selection API has the concept of an `anchorNode` and a
|
|
# `focusNode`. The `anchorNode` is where the selection started from and
|
|
# does not move. The `focusNode` is where the end of the selection
|
|
# currently is and may move. A "caret" is simply a selection whose
|
|
# anchorNode == focusNode and anchorOffset == focusOffset.
|
|
#
|
|
# An `anchorNode` is also known as a `startNode`, or `baseNode`. We use
|
|
# the alias `startNode` since I think it makes more intuitive sense.
|
|
#
|
|
# A `focusNode` is also known as an `endNode` or `focusNode`. I use the
|
|
# `endNode` alias since it makes more inuitive sense.
|
|
#
|
|
# When we restore the selection later, we need to find a node that looks
|
|
# the same as the one we saved (since they're different object
|
|
# references). Unfortunately there many be many nodes that "look" the
|
|
# same (match the `isEqualNode`) test. For example, say I have a bunch
|
|
# of lines with the TEXT_NODE "Foo". All of those will match
|
|
# `isEqualNode`. To fix this we assume there will be multiple matches
|
|
# and keep track of the index of the match. e.g. all "Foo" TEXT_NODEs
|
|
# may look alike, but I know I want the Nth "Foo" TEXT_NODE. We store
|
|
# this information in the `startNodeIndex` and `endNodeIndex` fields via
|
|
# the `DOMUtils.getNodeIndex` method.
|
|
_saveSelectionState: =>
|
|
selection = document.getSelection()
|
|
context = @_editableNode()
|
|
return if DOMUtils.isSameSelection(selection, @_selection, context)
|
|
return unless selection.anchorNode? and selection.focusNode?
|
|
return unless DOMUtils.selectionInScope(selection, context)
|
|
|
|
@_previousSelection = @_selection
|
|
|
|
@_selection =
|
|
startNode: selection.anchorNode.cloneNode(true)
|
|
startOffset: selection.anchorOffset
|
|
startNodeIndex: DOMUtils.getNodeIndex(context, selection.anchorNode)
|
|
endNode: selection.focusNode.cloneNode(true)
|
|
endOffset: selection.focusOffset
|
|
endNodeIndex: DOMUtils.getNodeIndex(context, selection.focusNode)
|
|
isCollapsed: selection.isCollapsed
|
|
|
|
@_ensureSelectionVisible(selection)
|
|
|
|
@setInnerState
|
|
selection: @_selection
|
|
editableFocused: true
|
|
|
|
return @_selection
|
|
|
|
_setSelectionSnapshot: (selection) =>
|
|
@_previousSelection = @_selection
|
|
@_selection = selection
|
|
@setInnerState
|
|
selection: @_selection
|
|
editableFocused: true
|
|
|
|
# When the selectionState gets set by a parent (e.g. undo-ing and
|
|
# redo-ing) we need to make sure it's visible to the user.
|
|
#
|
|
# Unfortunately, we can't use the native `scrollIntoView` because it
|
|
# naively scrolls the whole window and doesn't know not to scroll if
|
|
# it's already in view. There's a new native method called
|
|
# `scrollIntoViewIfNeeded`, but this only works when the scroll
|
|
# container is a direct parent of the requested element. In this case
|
|
# the scroll container may be many levels up.
|
|
_ensureSelectionVisible: (selection) ->
|
|
# If our parent supports scroll to bottom, check for that
|
|
if @props.onScrollToBottom and DOMUtils.atEndOfContent(selection, @_editableNode())
|
|
@props.onScrollToBottom()
|
|
|
|
# Don't bother computing client rects if no scroll method has been provided
|
|
else if @props.onScrollTo
|
|
rangeInScope = DOMUtils.getRangeInScope(@_editableNode())
|
|
return unless rangeInScope
|
|
|
|
rect = rangeInScope.getBoundingClientRect()
|
|
if DOMUtils.isEmptyBoudingRect(rect)
|
|
rect = @_getSelectionRectFromDOM(selection)
|
|
|
|
if rect
|
|
@props.onScrollTo({rect})
|
|
|
|
# The bounding client rect has changed
|
|
@setInnerState editableNode: @_editableNode()
|
|
|
|
_getSelectionRectFromDOM: (selection) ->
|
|
node = selection.anchorNode
|
|
if node.nodeType is Node.TEXT_NODE
|
|
r = document.createRange()
|
|
r.selectNodeContents(node)
|
|
return r.getBoundingClientRect()
|
|
else if node.nodeType is Node.ELEMENT_NODE
|
|
return node.getBoundingClientRect()
|
|
else
|
|
return null
|
|
|
|
# We use global listeners to determine whether or not dragging is
|
|
# happening. This is because dragging may stop outside the scope of
|
|
# this element. Note that the `dragstart` and `dragend` events don't
|
|
# detect text selection. They are for drag & drop.
|
|
_setupGlobalMouseListener: =>
|
|
@__onMouseDown = _.bind(@_onMouseDown, @)
|
|
@__onMouseMove = _.bind(@_onMouseMove, @)
|
|
@__onMouseUp = _.bind(@_onMouseUp, @)
|
|
window.addEventListener("mousedown", @__onMouseDown)
|
|
window.addEventListener("mouseup", @__onMouseUp)
|
|
|
|
_teardownGlobalMouseListener: =>
|
|
window.removeEventListener("mousedown", @__onMouseDown)
|
|
window.removeEventListener("mouseup", @__onMouseUp)
|
|
|
|
_onShowContextualMenu: (event) =>
|
|
@refs["toolbarController"]?.forceClose()
|
|
event.preventDefault()
|
|
|
|
selection = document.getSelection()
|
|
range = selection.getRangeAt(0)
|
|
|
|
# On Windows, right-clicking a word does not select it at the OS-level.
|
|
# We need to implement this behavior locally for the rest of the logic here.
|
|
if range.collapsed
|
|
DOMUtils.selectWordContainingRange(range)
|
|
range = selection.getRangeAt(0)
|
|
|
|
text = range.toString()
|
|
|
|
remote = require('remote')
|
|
clipboard = require('clipboard')
|
|
Menu = remote.require('menu')
|
|
MenuItem = remote.require('menu-item')
|
|
spellchecker = require('spellchecker')
|
|
|
|
apply = (newtext) =>
|
|
range.deleteContents()
|
|
node = document.createTextNode(newtext)
|
|
range.insertNode(node)
|
|
range.selectNode(node)
|
|
selection.removeAllRanges()
|
|
selection.addRange(range)
|
|
for extension in DraftStore.extensions()
|
|
if extension.onSubstitutionPerformed
|
|
extension.onSubstitutionPerformed(@_editableNode())
|
|
|
|
learnSpelling = =>
|
|
spellchecker.add(text)
|
|
for extension in DraftStore.extensions()
|
|
if extension.onLearnSpelling
|
|
extension.onLearnSpelling(@_editableNode(), text)
|
|
|
|
cut = =>
|
|
clipboard.writeText(text)
|
|
apply('')
|
|
|
|
copy = =>
|
|
clipboard.writeText(text)
|
|
|
|
paste = =>
|
|
apply(clipboard.readText())
|
|
|
|
menu = new Menu()
|
|
|
|
if spellchecker.isMisspelled(text)
|
|
corrections = spellchecker.getCorrectionsForMisspelling(text)
|
|
if corrections.length > 0
|
|
corrections.forEach (correction) ->
|
|
menu.append(new MenuItem({ label: correction, click:( -> apply(correction))}))
|
|
else
|
|
menu.append(new MenuItem({ label: 'No Guesses Found', enabled: false}))
|
|
|
|
menu.append(new MenuItem({ type: 'separator' }))
|
|
menu.append(new MenuItem({ label: 'Learn Spelling', click: learnSpelling}))
|
|
menu.append(new MenuItem({ type: 'separator' }))
|
|
|
|
menu.append(new MenuItem({ label: 'Cut', click:cut}))
|
|
menu.append(new MenuItem({ label: 'Copy', click:copy}))
|
|
menu.append(new MenuItem({ label: 'Paste', click:paste}))
|
|
menu.popup(remote.getCurrentWindow())
|
|
|
|
_onMouseDown: (event) =>
|
|
@_mouseDownEvent = event
|
|
@_mouseHasMoved = false
|
|
window.addEventListener("mousemove", @__onMouseMove)
|
|
|
|
# We can't use the native double click event because that only fires
|
|
# on the second up-stroke
|
|
if Date.now() - (@_lastMouseDown ? 0) < 250
|
|
@_onDoubleDown(event)
|
|
@_lastMouseDown = 0 # to prevent triple down
|
|
else
|
|
@_lastMouseDown = Date.now()
|
|
|
|
_onDoubleDown: (event) =>
|
|
editable = @_editableNode()
|
|
return unless editable?
|
|
if editable is event.target or editable.contains(event.target)
|
|
@setInnerState doubleDown: true
|
|
|
|
_onMouseMove: (event) =>
|
|
if not @_mouseHasMoved
|
|
@_onDragStart(@_mouseDownEvent)
|
|
@_mouseHasMoved = true
|
|
|
|
_onMouseUp: (event) =>
|
|
window.removeEventListener("mousemove", @__onMouseMove)
|
|
|
|
if @innerState.doubleDown
|
|
@setInnerState doubleDown: false
|
|
|
|
if @_mouseHasMoved
|
|
@_mouseHasMoved = false
|
|
@_onDragEnd(event)
|
|
|
|
editableNode = @_editableNode()
|
|
selection = document.getSelection()
|
|
return event unless DOMUtils.selectionInScope(selection, editableNode)
|
|
|
|
range = DOMUtils.getRangeInScope(editableNode)
|
|
if range
|
|
try
|
|
for extension in DraftStore.extensions()
|
|
extension.onMouseUp(editableNode, range, event) if extension.onMouseUp
|
|
catch e
|
|
console.log('DraftStore extension raised an error: '+e.toString())
|
|
|
|
event
|
|
|
|
_onDragStart: (event) =>
|
|
editable = @_editableNode()
|
|
return unless editable?
|
|
if editable is event.target or editable.contains(event.target)
|
|
@setInnerState dragging: true
|
|
|
|
_onDragEnd: (event) =>
|
|
if @innerState.dragging
|
|
@setInnerState dragging: false
|
|
return event
|
|
|
|
# We restore the Selection via the `setBaseAndExtent` property of the
|
|
# `Selection` API
|
|
#
|
|
# See http://w3c.github.io/selection-api/#widl-Selection-setBaseAndExtent-void-Node-anchorNode-unsigned-long-anchorOffset-Node-focusNode-unsigned-long-focusOffset
|
|
#
|
|
# Since the last time we saved the `@_selection`, the DOM may have
|
|
# completely changed due to a re-render. To the user it may look
|
|
# identical, but the newly rendered region may be comprised of
|
|
# completely new DOM nodes. Our old node references may not exist
|
|
# anymore. As such, we have the task of re-finding the nodes again and
|
|
# creating a new selection that matches as accurately as possible.
|
|
#
|
|
# There are multiple ways of setting a new selection with the Selection
|
|
# API. One very common one is to create a new Range object and then call
|
|
# `addRange` on a selection instance. This does NOT work for us because
|
|
# `Range` objects are direction-less. A Selection's start node (aka
|
|
# anchor node aka base node) can be "after" a selection's end node (aka
|
|
# focus node aka extent node).
|
|
#
|
|
# force - when set to true it will not care whether or not the selection
|
|
# is already in the box. Normally we only restore when the
|
|
# contenteditable is in focus
|
|
# collapse - Can either be "end" or "start". When we reset the
|
|
# selection, we'll collapse the range into a single caret
|
|
# position
|
|
_restoreSelection: ({force, collapse}={}) =>
|
|
return if @innerState.dragging
|
|
return if not @_selection?
|
|
return if document.activeElement isnt @_editableNode() and not force
|
|
return if not @_selection.startNode? or not @_selection.endNode?
|
|
|
|
editable = @_editableNode()
|
|
newStartNode = DOMUtils.findSimilarNodes(editable, @_selection.startNode)[@_selection.startNodeIndex]
|
|
newEndNode = DOMUtils.findSimilarNodes(editable, @_selection.endNode)[@_selection.endNodeIndex]
|
|
return if not newStartNode? or not newEndNode?
|
|
|
|
@_teardownSelectionListeners()
|
|
selection = document.getSelection()
|
|
selection.setBaseAndExtent(newStartNode,
|
|
@_selection.startOffset,
|
|
newEndNode,
|
|
@_selection.endOffset)
|
|
|
|
@_ensureSelectionVisible(selection)
|
|
@_setupSelectionListeners()
|
|
|
|
_getNodeIndex: (nodeToFind) =>
|
|
DOMUtils.findSimilarNodes(@_editableNode(), nodeToFind).indexOf nodeToFind
|
|
|
|
# This needs to be in the contenteditable area because we need to first
|
|
# restore the selection before calling the `execCommand`
|
|
#
|
|
# If the url is empty, that means we want to remove the url.
|
|
_onSaveUrl: (url, linkToModify) =>
|
|
if linkToModify?
|
|
linkToModify = DOMUtils.findSimilarNodes(@_editableNode(), linkToModify)?[0]?.childNodes[0]
|
|
|
|
return unless linkToModify?
|
|
return if linkToModify.getAttribute?('href').trim() is url.trim()
|
|
|
|
range =
|
|
anchorNode: linkToModify
|
|
anchorOffset: 0
|
|
focusNode: linkToModify
|
|
focusOffset: linkToModify.length
|
|
|
|
if url.trim().length is 0
|
|
@_execCommand ["unlink", false], range
|
|
else @_execCommand ["createLink", false, url], range
|
|
|
|
else
|
|
@_restoreSelection(force: true)
|
|
if not document.getSelection().isCollapsed
|
|
if url.trim().length is 0
|
|
@_execCommand ["unlink", false]
|
|
else @_execCommand ["createLink", false, url]
|
|
@_restoreSelection(force: true, collapse: "end")
|
|
|
|
_execCommand: (commandArgs=[], selectionRange={}) =>
|
|
{anchorNode, anchorOffset, focusNode, focusOffset} = selectionRange
|
|
@_teardownSelectionListeners()
|
|
if anchorNode and focusNode
|
|
selection = document.getSelection()
|
|
selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)
|
|
document.execCommand.apply(document, commandArgs)
|
|
@_setupSelectionListeners()
|
|
@_onInput()
|
|
|
|
module.exports = ContenteditableComponent
|