mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 08:46:07 +08:00
d18642fb3e
Summary:
This provides a new API for `ContenteditableExtension`s. Instead of
manually manipulating the raw DOM and `Selection` objects, there's a new
`Editor` interface that encapsulates it and provides helper methods.
You can now do:
editor.select(someNode).createLink("foo").collapseToEnd()
Now raw methods like `execCommand` ONLY show up in the `Editor` interface
as well as most of the raw `Selection` APIs.
There are also more integration tests :)
Another major goal was cleaning up the contenteditable file itself. To
that end:
1. The DOMNormalizer got pulled out into its own extension
1. The TabManager is now its own extension
1. Url wrangling got moved into the FloatingToolbar control
1. There is now the concept of a `ContenteditableService`, which are
tightly-couple blocks of code separated out into logical units. These are
dependent on the core state, innerState, and props and are not full
extensions.
1. `MouseService` now handles all the click event logic
1. `ClipboardService` was modified to the new service architecture
Test Plan: script/grunt run-integration-tests
Reviewers: drew, juan, bengotow
Reviewed By: juan, bengotow
Differential Revision: https://phab.nylas.com/D2367
131 lines
4.8 KiB
CoffeeScript
131 lines
4.8 KiB
CoffeeScript
{ComposerExtension, AccountStore, DOMUtils, NylasSpellchecker} = require 'nylas-exports'
|
||
_ = require 'underscore'
|
||
remote = require('remote')
|
||
MenuItem = remote.require('menu-item')
|
||
spellchecker = NylasSpellchecker
|
||
|
||
SpellcheckCache = {}
|
||
|
||
class SpellcheckComposerExtension extends ComposerExtension
|
||
|
||
@isMisspelled: (word) ->
|
||
SpellcheckCache[word] ?= spellchecker.isMisspelled(word)
|
||
SpellcheckCache[word]
|
||
|
||
@onInput: (editableNode) =>
|
||
@walkTree(editableNode)
|
||
|
||
@onShowContextMenu: (editor, event, menu) =>
|
||
selection = editor.currentSelection()
|
||
editableNode = editor.rootNode
|
||
range = DOMUtils.Mutating.getRangeAtAndSelectWord(selection, 0)
|
||
word = range.toString()
|
||
if @isMisspelled(word)
|
||
corrections = spellchecker.getCorrectionsForMisspelling(word)
|
||
if corrections.length > 0
|
||
corrections.forEach (correction) =>
|
||
menu.append(new MenuItem({
|
||
label: correction,
|
||
click: @applyCorrection.bind(@, editableNode, range, selection, 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.bind(@, editableNode, word)
|
||
}))
|
||
menu.append(new MenuItem({ type: 'separator' }))
|
||
|
||
@applyCorrection: (editableNode, range, selection, correction) =>
|
||
DOMUtils.Mutating.applyTextInRange(range, selection, correction)
|
||
@walkTree(editableNode)
|
||
|
||
@learnSpelling: (editableNode, word) =>
|
||
spellchecker.add(word)
|
||
delete SpellcheckCache[word]
|
||
@walkTree(editableNode)
|
||
|
||
@walkTree: (editableNode) =>
|
||
treeWalker = document.createTreeWalker(editableNode, NodeFilter.SHOW_TEXT)
|
||
|
||
nodeList = []
|
||
selection = document.getSelection()
|
||
selectionSnapshot =
|
||
anchorNode: selection.anchorNode
|
||
anchorOffset: selection.anchorOffset
|
||
focusNode: selection.focusNode
|
||
focusOffset: selection.focusOffset
|
||
selectionImpacted = false
|
||
|
||
while (treeWalker.nextNode())
|
||
nodeList.push(treeWalker.currentNode)
|
||
|
||
while (node = nodeList.pop())
|
||
str = node.textContent
|
||
|
||
# https://regex101.com/r/bG5yC4/1
|
||
wordRegexp = /(\w[\w'’-]*\w|\w)/g
|
||
|
||
while ((match = wordRegexp.exec(str)) isnt null)
|
||
spellingSpan = null
|
||
if node.parentNode and node.parentNode.nodeName is 'SPELLING'
|
||
if match[0] is str
|
||
spellingSpan = node.parentNode
|
||
else
|
||
node.parentNode.classList.remove('misspelled')
|
||
|
||
misspelled = @isMisspelled(match[0])
|
||
markedAsMisspelled = spellingSpan?.classList.contains('misspelled')
|
||
|
||
if misspelled and not markedAsMisspelled
|
||
# The insertion point is currently at the end of this misspelled word.
|
||
# Do not mark it until the user types a space or leaves.
|
||
if selectionSnapshot.focusNode is node and selectionSnapshot.focusOffset is match.index + match[0].length
|
||
continue
|
||
|
||
if spellingSpan
|
||
spellingSpan.classList.add('misspelled')
|
||
else
|
||
if match.index is 0
|
||
matchNode = node
|
||
else
|
||
matchNode = node.splitText(match.index)
|
||
afterMatchNode = matchNode.splitText(match[0].length)
|
||
|
||
spellingSpan = document.createElement('spelling')
|
||
spellingSpan.classList.add('misspelled')
|
||
spellingSpan.innerText = match[0]
|
||
matchNode.parentNode.replaceChild(spellingSpan, matchNode)
|
||
|
||
for prop in ['anchor', 'focus']
|
||
if selectionSnapshot["#{prop}Node"] is node
|
||
if selectionSnapshot["#{prop}Offset"] > match.index + match[0].length
|
||
selectionImpacted = true
|
||
selectionSnapshot["#{prop}Node"] = afterMatchNode
|
||
selectionSnapshot["#{prop}Offset"] -= match.index + match[0].length
|
||
else if selectionSnapshot["#{prop}Offset"] > match.index
|
||
selectionImpacted = true
|
||
selectionSnapshot["#{prop}Node"] = spellingSpan.childNodes[0]
|
||
selectionSnapshot["#{prop}Offset"] -= match.index
|
||
|
||
nodeList.unshift(afterMatchNode)
|
||
break
|
||
|
||
else if not misspelled and markedAsMisspelled
|
||
spellingSpan.classList.remove('misspelled')
|
||
|
||
if selectionImpacted
|
||
selection.setBaseAndExtent(selectionSnapshot.anchorNode, selectionSnapshot.anchorOffset, selectionSnapshot.focusNode, selectionSnapshot.focusOffset)
|
||
|
||
@finalizeSessionBeforeSending: (session) ->
|
||
body = session.draft().body
|
||
clean = body.replace(/<\/?spelling[^>]*>/g, '')
|
||
if body != clean
|
||
session.changes.add(body: clean)
|
||
|
||
SpellcheckComposerExtension.SpellcheckCache = SpellcheckCache
|
||
|
||
module.exports = SpellcheckComposerExtension
|