在 Tiptap 中启用拼写检查

<div id="editor"></div>

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
  content: '<p>This sentense has a spelling mistake.</p>',
  editorProps: {
    // Apply these attributes to the editable element.
    attributes: {
      // Ask the browser to check spelling.
      spellcheck: 'true',
      // Declare the text's language. Browser dictionary settings still apply.
      lang: 'en-US',
    },
  },
})

function setSpellcheck(enabled) {
  const editorProps = editor.options.editorProps

  editor.setOptions({
    editorProps: {
      // Keep existing event handlers and other editor props.
      ...editorProps,
      attributes: {
        // Keep attributes such as class, role, and lang.
        ...editorProps.attributes,
        // DOM attribute values are strings.
        spellcheck: enabled ? 'true' : 'false',
      },
    },
  })
}

setSpellcheck(false)

import { EditorView } from 'prosemirror-view'

// state is your existing EditorState, including its schema and plugins.
const view = new EditorView(document.querySelector('#editor'), {
  state,
  // ProseMirror applies these attributes to its editable element.
  attributes: {
    // Request native spelling checks for English text.
    spellcheck: 'true',
    lang: 'en-US',
  },
})

import { Decoration, Extension } from '@tiptap/core'

const Spellcheck = Extension.create({
  name: 'spellcheck',

  addStorage() {
    // Keep checker results outside the saved document.
    return { checkedDoc: null, errors: [] }
  },

  addDecorations() {
    return {
      // Rebuild after edits so results for the old document disappear.
      update: 'document',
      create: ({ state }) => {
        // Show results only for the document snapshot the checker used.
        if (this.storage.checkedDoc !== state.doc) return []

        // Underline each error's document range without changing its text.
        return this.storage.errors.map(({ from, to }) =>
          Decoration.Inline(from, to, { class: 'spellcheck-error' }),
        )
      },
    }
  },
})

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit, Spellcheck],
  content: '<p>This sentense has a spelling mistake.</p>',
  editorProps: {
    attributes: { spellcheck: 'false', lang: 'en-US' },
  },
})

function showSpellcheckResults(checkedDoc, errors) {
  // Ignore results if the editor closed or the document changed during the check.
  if (editor.isDestroyed || editor.state.doc !== checkedDoc) return

  // Store the checked snapshot and the errors that belong to it.
  editor.storage.spellcheck.checkedDoc = checkedDoc
  editor.storage.spellcheck.errors = errors
  // Storage changes need an explicit decoration refresh.
  editor.commands.updateDecorations('spellcheck')
}

.spellcheck-error {
  /* Draw a red, wavy underline beneath each error. */
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #c62828;
}

npm install nspell dictionary-en

mkdir -p public/dictionaries
cp node_modules/dictionary-en/index.aff public/dictionaries/en.aff
cp node_modules/dictionary-en/index.dic public/dictionaries/en.dic

import nspell from 'nspell'

async function createEnglishSpellchecker() {
  // Fetch the affix rules and word list from your app's static assets.
  const [aff, dic] = await Promise.all(
    ['/dictionaries/en.aff', '/dictionaries/en.dic'].map(async (url) => {
      const response = await fetch(url)
      if (!response.ok) throw new Error(`Failed to load dictionary: ${url}`)
      return response.text()
    }),
  )

  // nspell accepts dictionary data as strings.
  return nspell({ aff, dic })
}

const spell = await createEnglishSpellchecker()

function findSpellingErrors(doc, spell) {
  const errors = []

  doc.descendants((block, blockPos) => {
    // Skip code blocks, including their descendants.
    if (block.type.spec.code) return false
    if (!block.isTextblock) return

    let text = ''

    block.forEach((child) => {
      const isCode = child.marks.some((mark) => mark.type.spec.code)

      // Text node sizes equal their JavaScript string lengths.
      // Spaces keep offsets aligned for code, hard breaks, and inline nodes.
      text += child.isText && !isCode ? child.text : ' '.repeat(child.nodeSize)
    })

    // nspell checks words. This tokenizer includes letters and contractions.
    for (const match of text.matchAll(/[\p{L}\p{M}]+(?:['’][\p{L}\p{M}]+)*/gu)) {
      const checkedWord = match[0]
      // Normalize curly apostrophes only for the dictionary lookup.
      const word = checkedWord.replaceAll('’', "'")
      if (spell.correct(word)) continue

      // Add one for the text block's opening token.
      const from = blockPos + 1 + match.index
      errors.push({
        from,
        to: from + checkedWord.length,
        checkedWord,
        suggestions: spell.suggest(word),
      })
    }

    // We already checked this block. Don't visit its children again.
    return false
  })

  return errors
}

function checkEnglishDocument() {
  if (editor.isDestroyed) return

  // Check one snapshot, then save results and refresh its decorations.
  const checkedDoc = editor.state.doc
  const errors = findSpellingErrors(checkedDoc, spell)
  showSpellcheckResults(checkedDoc, errors)
}

checkEnglishDocument()

let spellcheckTimer

editor.on('update', () => {
  // Restart the timer on each document change.
  clearTimeout(spellcheckTimer)
  spellcheckTimer = setTimeout(checkEnglishDocument, 300)
})

editor.on('destroy', () => {
  // Cancel a scheduled check when the editor closes.
  clearTimeout(spellcheckTimer)
})

function applySpellingSuggestion(error, replacement) {
  if (editor.isDestroyed) return
  const { state, view } = editor
  const { from, to, checkedWord } = error

  // Ignore suggestions from an older version of the document.
  if (editor.storage.spellcheck.checkedDoc !== state.doc) return

  // Confirm that the range still contains the checked word.
  if (state.doc.textBetween(from, to, '') === checkedWord) {
    // A transaction lets history and collaboration track the replacement.
    view.dispatch(state.tr.insertText(replacement, from, to))
  }
}