jodit icon indicating copy to clipboard operation
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

Open AltenDT opened this issue 10 months ago • 5 comments

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

AltenDT avatar Apr 17 '24 14:04 AltenDT

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

xdan avatar Apr 22 '24 20:04 xdan

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

AltenDT avatar Apr 29 '24 13:04 AltenDT

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

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

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

xdan avatar May 10 '24 12:05 xdan

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

xdan avatar May 10 '24 12:05 xdan

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.

AltenDT avatar May 10 '24 12:05 AltenDT