vantezzen / quill-languagetool

✒️ LanguageTool integration for Quill.js editors

quill-languagetool

LanguageTool integration for Quill.js editors

This library adds a LanguageTool integration to Quill.js editors. This allows adding spell checking and grammar checking to your editor.

Demo

A live demo can be found at https://vantezzen.github.io/quill-languagetool. The source code for a complete example with react-quill can be found in /example.

Features

• LanguageTool integration
• TypeScript typed
• Easy integration with Quill.js
• Custom server support
• Custom CSS support
• Server spam prevention

Install

npm install --save quill-languagetool

Usage

import Quill from "quill";
import registerQuillLanguageTool from "quill-languagetool";

registerQuillLanguageTool(Quill);

const quill = new Quill("#editor", {
  theme: "snow",
  modules: {
    languageTool: true,
    // OR
    languageTool: {
      // options here
    },
  },
});

Using this module will change the contents of the editor to add control elements for spell checking and grammar checking. Look at "Getting the contents of the editor" for information on how to use the contents of the editor.

registerQuillLanguageTool(Quill)

This package exports a default function to register the LanguageTool module to Quill.js.

import Quill from "quill";
import registerQuillLanguageTool from "quill-languagetool";

registerQuillLanguageTool(Quill);

This adds the LanguageTool module and the suggestion blot element to Quill.js so they can be used on any editor using that Quill import.

Options

Options can be provided into the languageTool option of the Quill module.

const quill = new Quill("#editor", {
  theme: "snow",
  modules: {
    languageTool: {
      // options here
    },
  },
});

Available options are:

• server (default "https://languagetool.org/api"): The URL of the LanguageTool server without /v2/check
• language (default "en-US"): The language to use for the LanguageTool server
• disableNativeSpellcheck (default true): Disable the native spellchecker on the editor to prevent two conflicting systems trying to underline the same words
• cooldownTime (default 3000): The time after a user stops typing before the LanguageTool server is queried
• showLoadingIndicator (default true): Show a loading indicator when the LanguageTool server is queried in the bottom right corner of the editor
• apiOptions (default {}): Options to pass to the LanguageTool server (e.g. API Key, disabled rules, picky level etc.). Take a look at https://languagetool.org/http-api/#!/default/post_check for all options.
  • Do not set text, data or language in the apiOptions as these are set automatically.

Server

By default, the official LanguageTool server is used. Please note that you may be rate-limited when using the server and you need to comply with LanguageTool's ProofReading API Terms.

If you plan on using the library for larger sites, please consider using your own server. Check out https://github.com/smarketer-de/languagetool-docker-compose for an easy-to-use LanguageTool setup for Docker and AWS Elastic Beanstalk.

cooldownTime

To prevent spamming the LanguageTool server, a cooldown time is used. By default, this is set to 3000 milliseconds so the server is queries only once the user stopped typing 3s ago.

Getting the contents of the editor

This library adds a custom blot element to the editor that is used to add formatting and click listeners. This transforms content like this:

<p>This text conatins typos,, that should get corrected by LanguageTool</p>

into this:

<p>
  This text
  <quill-lt-match
    data-offset="10"
    data-length="8"
    data-rule-id="MORFOLOGIK_RULE_EN_US"
  >
    conatins
  </quill-lt-match>
  typos
  <quill-lt-match
    data-offset="24"
    data-length="2"
    data-rule-id="DOUBLE_PUNCTUATION"
  >
    ,,
  </quill-lt-match>
  that should get corrected by LanguageTool
</p>

When getting the contents of the editor, the custom blot elements need to be removed. For this, the library exposes a getCleanedHtml method that removes the elements from an HTML string.

import { getCleanedHtml } from "quill-languagetool";

const dirtyContents = quill.root.innerHTML;
const cleanedContents = getCleanedHtml(quillHtml);

Alternatively, removeSuggestionBoxes can be used to remove the custom blot elements from the editor's content itself. Please note that this will trigger an update of the editor which will re-trigger the module to add them back again.

import { removeSuggestionBoxes } from "quill-languagetool";

const quill = new Quill(...);
removeSuggestionBoxes(quill);

Customizing design

By default, the library uses a simple, light-mode design for the suggestion boxes. By overriding the CSS classes used you can customize the design. Take a look at /src/QuillLanguageTool.css for all styles and classes used by the default design

Development

1. Clone this repository
2. Run npm install in the root directory and /example (npm i && cd example && npm i)
3. Run npm start in /example to start development using the example project

License

MIT © vantezzen

---

This project is created using create-react-hook.

quill-languagetool's Issues

Run spellcheck on defaultValue is broken

Just using this code, the spell checking is only done initially with a single "\n" (wherever that comes from) and then after the user changes the text.

The text initially supplied to <ReactQuill /> is never checked.

function App() {
  const [value, setValue] = useState('asdfasdf');

  return <ReactQuill theme="snow" value={value} onChange={setValue}
    modules={{
      languageTool: {
        server:
          'some server',
        language: 'de-DE',
        cooldownTime: 2000,
      }
    }}
  />;
}

I checked using a debugger and I think this line

quill-languagetool/src/index.ts

Line 55 in 1bc67ce

if (source === "user") {

is responsible. The value supplied in value={...} ends up in the onTextChange handler, but then ignored because the source is 'api'.

Looking at this constructor

quill-languagetool/src/index.ts

Lines 51 to 61 in 1bc67ce

	constructor(public quill: Quill, public params: QuillLanguageToolParams) {
	debug("Attaching QuillLanguageTool to Quill instance", quill);
	this.quill.on("text-change", (_delta, _oldDelta, source) => {
	if (source === "user") {
	this.onTextChange();
	}
	});
	this.checkSpelling();
	this.disableNativeSpellcheckIfSet();
	}

and specifically the call to this.checkSpelling() it seems to me that the default text is supposed to also be checked.

Quill formats feature blocking the LanguageTool

Setting the Quill formats feature breaks the LanguageTool. Is there any workaround for this problem?

@vantezzen

Using without react

Hello,

How could I use it as a standalone please without NodeJS as I want to use it on PHP?

Thanks!

Undo is broken

Using your demo page, I inserted text:

Write or paste your text here too have it checked continuously.

then I applied suggestion to change too have ⇾ to have - which works correctly

but if I try to undo the change with Ctrl+Z, it will result in text:

Write or paste your text here too haveto have it checked continuously.

the only workaround I found when using the plugin in our app was to disable history - but this is not always viable

module: {
  history: {
    maxStack: 0,
    userOnly: true,
  },
}

Replacing values with suggestions breaks following matches

Using your demo page, I inserted text:

Contributed to each project delivery phase (analysis,development,test,ops) in different roles.

which resulted in correct source code:

<p>Contributed to each project delivery phase (analysis<quill-lt-match data-offset="52" data-length="12" data-rule-id="COMMA_PARENTHESIS_WHITESPACE">,development</quill-lt-match>,test<quill-lt-match data-offset="69" data-length="4" data-rule-id="COMMA_PARENTHESIS_WHITESPACE">,ops</quill-lt-match>) in different roles.</p>

but after replacing ,development with suggested , development, the code will change to:

<p>Contributed to each project delivery phase (analysis, development,test<quill-lt-match data-offset="69" data-length="4" data-rule-id="COMMA_PARENTHESIS_WHITESPACE">,ops</quill-lt-match>) in different roles.</p>

since the check isn't run again - if I try to replace,ops with suggestion - the offset is outdated, and will result in wrong replacement:

Contributed to each project delivery phase (analysis, development,tes, opss) in different roles.