Monaco spell checker

General
1

Hi There,

does anyone here have any idea how to add spellchecker functionality to the monaco editor in Node-RED?

I know that it might well be way off-topic for a editor that is used for code but I need it for documentation and for that it would be great to have a spell checker - even if its only the browser builtin spell checker.

I googled/duck-go'ed around the place and it seems that it's a non-trivial task to add spell checking to monaco in the first place but perhaps someone has done this anyway, perhaps for a closed source project and can't share the solution?

Any hints would be appreciate since it's a bearbug for a while now, i.e. I finally want a spellchecker! :-\

Cheers!

2

I found this one in npm

You could try integrating it with monaco

3

Haven't looked up how to add it though I'm afraid.

Brave's Leo AI gave me the following but could not tell me if it is possible to use this with Node-RED. :smiley:

To add a spell checker to the Monaco Editor, you can use the monaco-spellchecker library, which provides a straightforward approach for spellchecking words within the editor. First, install the required packages using npm:

npm install monaco-spellchecker
npm install typo-js

The typo-js library is needed to provide a dictionary for spellchecking, such as the English (US) dictionary. After installation, you can integrate the spell checker into your editor setup. Begin by creating a dictionary instance using the Typo class from typo-js and the dictionary files (en_US.aff and en_US.dic ).

import * as monaco from 'monaco-editor';
import Typo from 'typo-js';
import { getSpellchecker } from 'monaco-spellchecker';
import affData from 'typo-js/dictionaries/en_US/en_US.aff?raw';
import wordsData from 'typo-js/dictionaries/en_US/en_US.dic?raw';

const editor = monaco.editor.create(/* ...existing code... */);

// Create dictionary
const dictionary = new Typo("en_US", affData, wordsData);

// Get Spell Checker
const spellchecker = getSpellchecker(monaco, editor, {
  check: (word) => dictionary.check(word),
  suggest: (word) => dictionary.suggest(word),
  ignore: (word) => {
    console.log('Ignore word:', word);
  },
  addWord: (word) => {
    console.log('Add word:', word);
  }
});

// Process the editor content after it has been changed
const process = debounce(spellchecker.process, 500);
editor.onDidChangeModelContent(() => {
  process();
});

// Register code action provider
monaco.languages.registerCodeActionProvider('markdown', spellchecker.codeActionProvider);

The getSpellchecker function accepts the Monaco instance, the editor instance, and an options object that defines functions for checking spelling, suggesting corrections, and handling ignored or added words. The process() method re-scans the editor content for misspelled words, and dispose() cleans up the spellchecker when no longer needed. For better performance, especially with large documents, consider using hunspell-asm with a Web Worker instead of typo-js .