Tool box is badly formatted

[ngmiduc]

Screenshot:

Info

I running the latest version of editorJs. Somehow the Marker and Colol toolbox are not so well aligned anymore. I added the plugin like explained in the docs with:

  Color: {
    class: ColorPlugin, // if load from CDN, please try: window.ColorPlugin
    config: {
      colorCollections: [
        "#EC7878",
        "#9C27B0",
        "#673AB7",
        "#3F51B5",
        "#0070FF",
        "#03A9F4",
        "#00BCD4",
        "#4CAF50",
        "#8BC34A",
        "#CDDC39",
        "#FFF",
      ],
      defaultColor: "#FF1300",
      type: "text",
    },
  },
  Marker: {
    class: ColorPlugin, // if load from CDN, please try: window.ColorPlugin
    config: {
      defaultColor: "#FFBF00",
      type: "marker",
    },
  },

[ConnectGrid]

If you remove the Marker configuration, does it work properly for you? I wasn't able to have both type configurations at once, although that may have been my own wrapper library. With just type: "text", the inline tools were working correctly.

[ngmiduc]

I tried to use only one Tool but they align always badly inside the toolbox. I also tried to use them without configuration but it ends up to the same.

I use it with:

// packages
import ReactEditor from "@stfy/react-editor.js"

but there shouldn't be a problem since it is just a wrapper.

[abumurasaki]

same thing on macOS, running safari and chrome, it is not only in react, I'm using [email protected]

[abumurasaki]

same thing on macOS, running safari and chrome, it is not only in react, I'm using [email protected]

Update about how you can handled this situation. First update webpack to 5'th version (I used vue upgrade), after that update editorjs-text-color-plugin to version 2.0.4. You can try just update to 2.x.x version without updating webpack, but in my case it was not enough to handle popover issue.