Issues with ESM

[julianpoemp]

Jodit Version: 4.0.0-beta.89

Browser: all
OS: all
Is React App: False

Code: See https://github.com/julianpoemp/jodit-ts-import-bug/blob/main/src/app/app.component.ts . You can clone the repository and call npm start to run local web server.

Expected behavior:
Jodit Editor generated by ESM build should have the same functionality like that one from the other builds (e.g. es2021). For example if I set two buttons "bold" and "underline" I expect Jodit to show the buttons with icons.

Actual behavior:

For both editors the exact same configurations were set. As you can see there are three visible points missing:

1. Missing icons.
2. Missing status bar.
3. Missing placeholder.

[xdan]

Hello, thanks for the problem
1 This is an error
2.3 Since not all plugins are included in the esm build, you should enable all required plugins yourself https://github.com/xdan/jodit#esm-modules

[julianpoemp]

Hello @xdan,

thank you for your response. I was able to inject the "stat" and "placeholder" plugins so these features are working now. Only one further question: Do Angular/react users need to import autobind-decorator? I didn't import it to my example app and Jodit still works:

import {Component, OnInit} from '@angular/core';
import {Config} from 'jodit/esm/config';
import "jodit/esm/plugins/stat/stat.js"
import "jodit/esm/plugins/placeholder/placeholder.js"
import {Jodit} from 'jodit';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  ngOnInit(){
    Jodit.make('#editor', {
      width: 600,
      height: 400,
      buttons: ["bold", "underline"],
      textIcons: false
    } as Config);
  }
}

[xdan]

Because autobind-decorator is the only non-dev dependency and it comes with Jodit https://github.com/xdan/jodit/blob/main/package.json#L50

I've added "stat" and "placeholder" to the basic list so you don't have to include them yourself.

[julianpoemp]

Still issue with v4 beta 98. I debugged it and found out, that somehow the ESM JS files from affected plugins like "bold" or "underline" are not injected. For example "bold": a breakpoint here:

jodit/src/plugins/bold/bold.ts

Line 113 in f9fd995

pluginSystem.add('bold', bold);

does not trigger. If I do the same with "font" (which icon is visible) the breakpoint triggers. So I think bold.js is not imported correctly.

Further more it seems that Jodit can't set the icon because the name is empty ("") in makeIcon from

jodit/src/core/ui/icon.ts

Line 79 in f9fd995

const clearName = name.replace(/[^a-zA-Z0-9]/g, '_');

For now I debugged the ESM build itself. Perhaps I find time to dive in this repository.

[julianpoemp]

the issue with missing icons for "bold" and "underline" still exists in beta 105. Perhaps there is a missing "bold" item in array here:

jodit/tools/utils/resolve-alias-imports.ts

Line 59 in 73f06b6

const allowPluginsInESM = new Set(

I would have tested it myself but I didn't get an environment running that allows me to test the newly built esm version.

[xdan]

Hi, yes, just add bold in your build

import "jodit/esm/plugins/bold/bold.js"

[julianpoemp]

Hi @xdan, it works, thank you!