xdan / jodit

Jodit - Best WYSIWYG Editor for You
https://xdsoft.net/jodit/
MIT License
1.71k stars 354 forks source link

Popups in plugins like resizer and image-properties which should open popups do not work when in a Shadow DOM in LIT #1109

Open AltenDT opened 7 months ago

AltenDT commented 7 months ago

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

xdan commented 7 months ago

Hi, can you create a codesandbox example code? Because I can't reproduce this bug using a regular shadow DOM.

AltenDT commented 7 months ago

Sorry for the late answer. Yup, here is an example. https://stackblitz.com/edit/vitejs-vite-w96nqi?file=src%2Fmy-jodit-editor.ts

xdan commented 6 months ago

Hi, you use wrong type for allowResizeTags it should be Set

allowResizeTags: new Set(['img']),

https://xdsoft.net/jodit/docs/options.html#allowresizetags

xdan commented 6 months ago

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
AltenDT commented 6 months ago

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.