Spellcheck

While someone edits a text box, misspelled words get a red wavy underline, and a right-click on one offers suggestions, Add to dictionary and Ignore. Spellcheck is on by default with a US English dictionary that ships with the library, so an app gets spellcheck with no code. You can give the library a Hunspell dictionary of your own, or turn spellcheck off.

How it works

• Spellcheck runs only in the box being edited. When editing starts, the library checks the whole box; when editing ends, the underlines go. Boxes that are not being edited never show them, so they never appear in an exported image or a print.
• While someone types, the underlines are hidden. The box is checked again one second after typing stops.
• The check runs in small pieces between frames, so checking a long text does not hold up typing.
• The dictionary downloads in the background, once per page. On Konva the download starts when you call enableRichText; on a plain canvas, the first time a box is edited. Until it arrives, no words are marked.

Suggestions, Add to dictionary and Ignore

A right-click on an underlined word opens the library's menu with up to five suggestions, then Add to dictionary and Ignore, then Cut, Copy and Paste.

• A suggestion replaces the word, in the word's own style, as one undo step.
• Add to dictionary and Ignore both stop marking the word, in every text box. The browser remembers the word for your site (in localStorage), so it stays unmarked on the next visit in that browser.

On Konva the menu works with no code. On a plain canvas, forward the browser's contextmenu event so the menu can open:

canvas.addEventListener("contextmenu", (e) => {
  if (rt.contextMenu(rt.fromEvent(e, canvas, sceneToCanvas), { x: e.clientX, y: e.clientY }).handled) e.preventDefault();
});

The underlines still show with enableContextMenu: false, but the library's menu does not open, so suggestions are not offered.

Use your own dictionary

Point the library at the two files of a Hunspell dictionary, the .aff and the .dic, with configureRichText. The library fetches them from your site instead of using its US English dictionary:

import { configureRichText } from "@mycreativeshop/rich-text"; // on Konva: "@mycreativeshop/rich-text/konva"

configureRichText({
  spellcheck: { aff: "/dictionaries/en-GB.aff", dic: "/dictionaries/en-GB.dic" },
});

Call it before you create the surface: the dictionary is loaded once per page, and a setting made after it has loaded is not used. The files are fetched with fetch, so serve them from your own site or from a host that allows cross-origin reads. If they can't be fetched, no words are marked, and the library tries again the next time a box is edited.

Turn it off

Pass enableSpellcheck: false. No dictionary is downloaded, no words are marked, and the right-click menu shows only Cut, Copy and Paste.

// Konva
const rt = enableRichText(stage, { enableSpellcheck: false });

// Plain canvas
const rt = createCanvasRichText({ onChange: render, enableSpellcheck: false });

The setting is fixed when the surface is created. To switch spellcheck on or off later, call rt.destroy() and create the surface again with the new setting. On Konva the text boxes stay on the stage and are picked up again by the new enableRichText call.

Options

Limits

Limit: Only words written with the letters A to Z (and apostrophes) are checked. Words with any other letter, such as an accented letter (café, señor) or a letter from another script, always count as correct. A dictionary for a language that uses accented letters marks only its unaccented misspellings.

Limit: One-letter words, and letters that come right after a digit (the "th" in "4th"), are not checked.

Limit: The library has no call to list or remove the words added with Add to dictionary or Ignore. They are kept per browser, not per user account.

In the API reference

• RichTextSettings: the spellcheck setting of configureRichText
• EnableRichTextOptions: enableSpellcheck and enableContextMenu on Konva
• CanvasRichTextOptions: enableSpellcheck and enableContextMenu on a plain canvas
• CanvasRichText: contextMenu, for the right-click on a plain canvas