Colors sub menu no longer show up

[Joseph-Azzam]

I just upgraded Editorjs from 2.25.0 to 2.29.0 On 2.25.0 I have the issue where the "A" on the menu does not show up I fixed it by changing the current css line. #color-btn-text {\n width: 18px;\n height: 15px;\n}\n\n #color-btn-text > svg {\n display: block; \n}\n\n

On 2.29.0 the colors submenu does not show up I am using my PC, the latest google chrome version that updated today, and I also tried it on firefox. No errors in the console. No matter what I select or how many times I click on the color square the submenu does not open, however the selected colors does apply to selected text.

[ophilbert]

Hi,

just started integrating editorjs in my app. From what I tried:

Your issue with the "A" not showing up was fixed in 2.26.0 The color submenu seems to fail in 2.29.0 indeed. I downgraded to 2.25.0 and went all the way up to 2.29.0

The issue appeared with 2.29.0. Works fine in 2.28.2

[nealamo]

Thanks @ophilbert , solved once I changed to 2.28.2 version

[killernova]

I downgraded to 2.28.2, no helps... Is there any other fixes?

[collimarco]

Same problem here. No errors displayed in console. It only applies the default color, but you cannot change it...

Tested on MacOS / Chrome (latest versions)

[collimarco]

@Joseph-Azzam What CSS you added exactly to fix this issue?

[giiska]

I found the source of this problem.

The tryToShow function refactor https://github.com/codex-team/editor.js/compare/v2.28.2...v2.29.0#diff-e55ad4bb9846bb8d75e77413ab3e49c30e75f6bb8b58833d2b539cebb8186b10R141

When I tried to revert some of these changes, the problem disapeared.

[giiska]

I found the source of this problem.

The tryToShow function refactor codex-team/[email protected]#diff-e55ad4bb9846bb8d75e77413ab3e49c30e75f6bb8b58833d2b539cebb8186b10R141

When I tried to revert some of these changes, the problem disapeared.

And also this cod modification is needed: https://stackoverflow.com/a/70422489/1252528

[giiska]

The code should be reverted in editor.js is here https://github.com/codex-team/editor.js/compare/next...giiska:editor.js:patch-1

[collimarco]

@giiska

If you believe that this is a bug in Editor.js, you need to open the issue here: https://github.com/codex-team/editor.js

Otherwise, if this is a bug of this plugin, you need to change only the code of this plugin and not the code of Editor.js.

[giiska]

This plugin indeed need to be improved by adding transform: scale(1); to color-section class which is described here https://stackoverflow.com/a/70422489/1252528

For editorjs, I don't know if it is a bug yet. The changes in src/components/modules/toolbar/inline.ts maybe is intended.

Actually I was try to add a bug report there, but the bug report form was so complex... So instead I commented here to wait your response here.

@giiska

If you believe that this is a bug in Editor.js, you need to open the issue here: https://github.com/codex-team/editor.js

Otherwise, if this is a bug of this plugin, you need to change only the code of this plugin and not the code of Editor.js.

[collimarco]

@giiska I am not a maintainer of this repo, my comment was just a suggestion. I am also hoping to see this issue fixed. I would like to use this plugin, but I am waiting due to this major bug.

This plugin indeed need to be improved by adding transform: scale(1); to color-section class which is described here https://stackoverflow.com/a/70422489/1252528

@flaming-cl Is there any change to see that small change merged to fix this issue?

[tomgny]

As a temporary workaround, i managed to fix it by add transform: scale(1); to the .ce-inline-toolbar class.

version: "editorjs-text-color-plugin": "1.13.1", "@editorjs/editorjs": "^2.28.2"

[chf-gh]

I'm using 2.30, how do I fix this? I added a comment and found that clicking on the button reconstructs the component, and clicking on other inline components reinstantiates it. Is it restructured so that pop doesn't show up? Is there a solution?

[chf-gh]

我用的editor.js版本为最新版2.30.xx。我将源码的show方法阻止事件冒泡后可以解决组件被重构的问题，但是组件的位置不正确，需要重新设置组件的位置，父元素popover设置position:relative, 子元素popcon元素设置position:absolute;top:35px;left:220px; 这样组件就能正常显示了。具体问题原因还没有深究。

[laishere]

This plugin indeed need to be improved by adding transform: scale(1); to color-section class which is described here https://stackoverflow.com/a/70422489/1252528

For editorjs, I don't know if it is a bug yet. The changes in src/components/modules/toolbar/inline.ts maybe is intended.

Actually I was try to add a bug report there, but the bug report form was so complex... So instead I commented here to wait your response here.

@giiska If you believe that this is a bug in Editor.js, you need to open the issue here: https://github.com/codex-team/editor.js Otherwise, if this is a bug of this plugin, you need to change only the code of this plugin and not the code of Editor.js.

It's not a bug of the editorjs. I think it maybe caused by misunderstanding of fixed position in shadow dom. Acutally the fixed position inside a shadow root will still respect to viewport not the parent element.

BUT NOT ALWAYS

But, it will NOT always be relative to the document. When any element has transform, filter or perspective property, it acts as a containing block for all its descendants, including the elements whose position is set to fixed. Reference

So, when the developer developed the popover, the editorjs's inline toolbar happens to have transform: xxx styles applied.

But the newer one just dosn't have these styles anymore. So fixed position will respect to viewport again.

Simplest solution

Edit these lines: https://github.com/flaming-cl/editorjs-text-color-plugin/blob/d47a953be6f3b6e4490e380243b908c3dc423ffc/src/picker/index.js#L75-L81

From:

        xy-popover{
            display:block;
        }
        xy-popcon{
            position: fixed;
            min-width:100%;
        }

To:

        xy-popover{
            display:block;
            position: static;
        }
        xy-popcon{
            min-width:100%;
        }

[vdhcode]

I am also facing an issue with the color picker. The color picker popup closes immediately after opening. I get the following error when selecting text or clicking the color picker.

Error Message : Uncaught TypeError: Cannot read properties of undefined (reading 'colorCollections')

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", customPicker: true, // add a button to allow selecting any colour }, },

Following dependencies, I am using. "dependencies": { "@editorjs/header": "^2.8.7", "@editorjs/inline-code": "^1.5.0", "@editorjs/list": "^1.9.0", "@editorjs/paragraph": "^2.11.6", "@editorjs/quote": "^2.6.0", "@editorjs/simple-image": "^1.6.0", "@editorjs/underline": "^1.1.0", "@react-editor-js/core": "^2.1.0", "editorjs-text-color-plugin": "^2.0.4", "react": "^18.3.1", "react-dom": "^18.3.1", "react-editor-js": "^2.1.0" },

Surprisingly when text is unselected, the color picker opens without any error

[SisuKah]

Is this solve yet? I am having a similar problem.

[SisuKah]