jodit | Jodit - Best WYSIWYG Editor | Editor library

1. onBlur is not called because inside jodit a separate textarea is used to display the code, this is either a bug in jodit-react or in jodit itself
2. Inside jodit-react callbacks for textarea are added inside useEffect which is called only when the config is changed.
   For the correct display of the logs you need to fix the way of saving the logs to the state

Add below in the config object

The following line will always target the first element with the editor class:

The JoditAngularModule should be added to the imports of the shared module for your shared component to 'know' the element 'jodit-editor'.

This is the import statement.

The jodit module exports the Jodit constructor, so your component would import it like this:

Ok there is no good clean way of doing this, however, I did find a way to make it work.

Since I don't want any validation from another library's files I decided just to add // @ts-nocheck to the files that were trowing warnings.

Now, you have to go into the node_modules folder and find the library, and add that comment to the first line of all the .ts files that are causing you problems.

After that you want to use the https://github.com/ds300/patch-package#readme module to patch the library, so you don't have to make these changes manually every time you install the library.

And the last step, if you feel up for it is to go fix the bugs in the library and submit a pull request.

So:

1. Add the ignore comment to the files causing errors in the node_modules folder
2. Patch the package
3. Enjoy!

The problem was that the editor was in an ag-grid cell. The different selections in the dialog box when pasting from MS Word into the editor lay outside of the ag-grid cell, and therefore clicking in the dialog ended the ag-grid session mid-edit! As the behavior I was looking for is to keep the formatting, I simply turned off the dialog box (askBeforePasteFromWord: false, askBeforePasteFromHTML: false). To still handle the pasting from MS Word (because MS Word), added in Jodit's author's code to auto-handle (https://github.com/xdan/jodit/issues/197):

In your .spec.ts file, you have to import Jodit and bundle it the same way you have in your jodit.component.ts. Maybe the imports array of TestBed.configureTestingModule needs it as well.

Add a typescript library to angular

Check that out but in your tests you have to import it as well.

I would use the Angular wrapper though if I were you: https://github.com/jodit/jodit-angular

You'll have to use npm audit and actually read the audit log. In there will be advice on which versions can be installed to fix vulnerabilities.See https://docs.npmjs.com/cli/audit for more information on npm audit.

You can get a report of all vulnerabilities using npm audit. In that report for each vulnerability you will also see a way to fix it. When you use npm audit fix you are telling npm to execute those fixes. Npm however will not automatically install fixes that might break your project, such as major versions changes. You'll have to manually execute the npm install commands for those if you decide the vulnerability is more important than having to deal with the possible breaking change.

Another common warning are peer dependency warnings. Peer dependencies specify not dependency, but compatibility. Check out this post for a way better explanation on peer dependencies: https://stackoverflow.com/a/34645112/1016004

You can see a peer dependency warning for 2 reasons: the specified peer dependency is missing, or the peer dependency is of the wrong version. In both cases you will have to figure out the correct response yourself. The core question to answer is whether you can install the dependency in your project:

• Do you use any deprecated features that will be removed in an update, do any breaking changes apply to your code, ...?
• Do you have to revert to a version with a known vulnerability that you use in such a way that it might endanger user data, ... ?

The simple solution, not recommended for production, is to just manually try to run npm install for both the vulnerabilities and peer dependencies with the proposed versions. Be sure to have version control or backups so that you can revert if you end up with more errors than you started with.

If the simple solution doesn't cut it you'll have to look for other versions of packages that are part of the unsolvable constraints. Maybe previous versions of any of those packages can work together?