jodit
jodit copied to clipboard
Popups in plugins like resizer and image-properties which should open popups do not work when in a Shadow DOM in LIT
Jodit Version: 4.1.16
Browser: All OS: All Is React App: False
Code
<div>
<textarea id="jodit-editor"></textarea>
</div>
import * as JoditStyles from 'jodit/es2021/jodit.min.css';
....
static override get styles(): CSSResultGroup {
return [
sharedStyles,
styles,
JoditStyles.default
];
}
const editor = Jodit.make(
this.shadowRoot.querySelector('#jodit-editor') as HTMLElement,
{
shadowRoot: this.shadowRoot,
allowResizeTags: Jodit.atom(['img']),
resizer: {
showSize: true,
hideSizeTimeout: 2000,
useAspectRatio: false,
forImageChangeAttributes: true
},
...
}
Expected behavior: Plugins like resizer and image-properties work as intended and as demoed in the playground example. (click on an image opens the resizer border, double click opens image-properties etc).
Actual behavior: Clicking on a resizable element does not open anything, nor does the image-properties window open.
https://github.com/xdan/jodit/assets/166718043/71d5e421-cef9-4f74-bc04-d105d2ee4593
Hi, can you create a codesandbox example code? Because I can't reproduce this bug using a regular shadow DOM.
Sorry for the late answer. Yup, here is an example. https://stackblitz.com/edit/vitejs-vite-w96nqi?file=src%2Fmy-jodit-editor.ts
Hi, you use wrong type for allowResizeTags it should be Set
allowResizeTags: new Set(['img']),
https://xdsoft.net/jodit/docs/options.html#allowresizetags
And since you are using the ESM build (it doesn't include all plugins by default)
import 'jodit/esm/plugins/inline-popup/inline-popup.js';
import 'jodit/esm/plugins/resizer/resizer.js';
import 'jodit/esm/plugins/select/select.js'; // need for inline-popup
Great!!
Sorry, this is where I found the configuration I based myself on.
https://xdsoft.net/jodit/docs/modules/plugins_resizer.html
It's resolved now, it works by importing and using Set.
Thanks for your help.