import _ from 'underscore' import {DOMUtils, ComposerExtension, Spellchecker} from 'nylas-exports'; const recycled = []; const MAX_MISPELLINGS = 10 const provideHintText = _.debounce(Spellchecker.handler.provideHintText, 1000) function getSpellingNodeForText(text) { let node = recycled.pop(); if (!node) { node = document.createElement('spelling'); node.classList.add('misspelled'); } node.textContent = text; return node; } function recycleSpellingNode(node) { recycled.push(node); } function whileApplyingSelectionChanges(rootNode, cb) { const selection = document.getSelection(); const selectionSnapshot = { anchorNode: selection.anchorNode, anchorOffset: selection.anchorOffset, focusNode: selection.focusNode, focusOffset: selection.focusOffset, modified: false, }; rootNode.style.display = 'none' cb(selectionSnapshot); rootNode.style.display = 'block' if (selectionSnapshot.modified) { selection.setBaseAndExtent(selectionSnapshot.anchorNode, selectionSnapshot.anchorOffset, selectionSnapshot.focusNode, selectionSnapshot.focusOffset); } } // Removes all of the nodes found in the provided `editor`. // It normalizes the DOM after removing spelling nodes to ensure that words // are not split between text nodes. (ie: doesn, 't => doesn't) function unwrapWords(rootNode) { whileApplyingSelectionChanges(rootNode, (selectionSnapshot) => { const spellingNodes = rootNode.querySelectorAll('spelling'); for (let ii = 0; ii < spellingNodes.length; ii++) { const node = spellingNodes[ii]; if (selectionSnapshot.anchorNode === node) { selectionSnapshot.anchorNode = node.firstChild; } if (selectionSnapshot.focusNode === node) { selectionSnapshot.focusNode = node.firstChild; } selectionSnapshot.modified = true; while (node.firstChild) { node.parentNode.insertBefore(node.firstChild, node); } recycleSpellingNode(node); node.parentNode.removeChild(node); } }); rootNode.normalize(); } // Traverses all of the text nodes within the provided `editor`. If it finds a // text node with a misspelled word, it splits it, wraps the misspelled word // with a node and updates the selection to account for the change. function wrapMisspelledWords(rootNode) { whileApplyingSelectionChanges(rootNode, (selectionSnapshot) => { const treeWalker = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, { acceptNode: (node) => { // skip the entire subtree inside tags and tags... if ((node.nodeType === Node.ELEMENT_NODE) && (["CODE", "A", "PRE"].includes(node.tagName))) { return NodeFilter.FILTER_REJECT; } return (node.nodeType === Node.TEXT_NODE) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; }, }); const nodeList = []; while (treeWalker.nextNode()) { nodeList.push(treeWalker.currentNode); } // Note: As a performance optimization, we stop spellchecking after encountering // 10 misspelled words. This keeps the runtime of this method bounded! let nodeMisspellingsFound = 0; while (true) { const node = nodeList.shift(); if ((node === undefined) || (nodeMisspellingsFound > MAX_MISPELLINGS)) { break; } const nodeContent = node.textContent; const nodeWordRegexp = /(\w[\w'’-]*\w|\w)/g; // https://regex101.com/r/bG5yC4/1 while (true) { const match = nodeWordRegexp.exec(nodeContent); if ((match === null) || (nodeMisspellingsFound > MAX_MISPELLINGS)) { break; } if (Spellchecker.isMisspelled(match[0])) { // 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 === node) && (selectionSnapshot.focusOffset === match.index + match[0].length)) { continue; } const matchNode = (match.index === 0) ? node : node.splitText(match.index); const afterMatchNode = matchNode.splitText(match[0].length); const spellingSpan = getSpellingNodeForText(match[0]); matchNode.parentNode.replaceChild(spellingSpan, matchNode); for (const prop of ['anchor', 'focus']) { if (selectionSnapshot[`${prop}Node`] === node) { if (selectionSnapshot[`${prop}Offset`] > match.index + match[0].length) { selectionSnapshot[`${prop}Node`] = afterMatchNode; selectionSnapshot[`${prop}Offset`] -= match.index + match[0].length; selectionSnapshot.modified = true; } else if (selectionSnapshot[`${prop}Offset`] >= match.index) { selectionSnapshot[`${prop}Node`] = spellingSpan.childNodes[0]; selectionSnapshot[`${prop}Offset`] -= match.index; selectionSnapshot.modified = true; } } } nodeMisspellingsFound += 1; nodeList.unshift(afterMatchNode); break; } } } }); } export default class SpellcheckComposerExtension extends ComposerExtension { static onContentChanged({editor}) { const {rootNode} = editor unwrapWords(rootNode); provideHintText(rootNode.textContent) // This should technically be in a .then() clause of the promise returned by // provideHintText(), but that doesn't work for some reason. provideHintText() // currently runs fast enough, or wrapMisspelledWords() runs slow enough, // that just running wrapMisspelledWords() immediately works as intended. wrapMisspelledWords(rootNode) } static onShowContextMenu({editor, menu}) { const selection = editor.currentSelection(); const range = DOMUtils.Mutating.getRangeAtAndSelectWord(selection, 0); const word = range.toString(); Spellchecker.appendSpellingItemsToMenu({ menu, word, onCorrect: (correction) => { DOMUtils.Mutating.applyTextInRange(range, selection, correction); SpellcheckComposerExtension.update(editor); }, onDidLearn: () => { SpellcheckComposerExtension.update(editor); }, }); } static applyTransformsForSending({draftBodyRootNode}) { const spellingEls = draftBodyRootNode.querySelectorAll('spelling'); for (const spellingEl of Array.from(spellingEls)) { // move contents out of the spelling node, remove the node const parent = spellingEl.parentNode; while (spellingEl.firstChild) { parent.insertBefore(spellingEl.firstChild, spellingEl); } parent.removeChild(spellingEl); } } static unapplyTransformsForSending() { // no need to put spelling nodes back! } }