Overlapping of code block and editor toolbar

[Arash1381-y]

I have tried to use this code block but when i want to use options something like this happens

is there any way to fix it?

[yiwanbaimifan]

.codeflask.codeflask--has-line-numbers:before, .codeflask__lines{
z-index: 0!important;
}

[asevarik]

it's half working

[calumk]

Sorry i dont have time to look into this at this moment - if you find a fix please raise a PR or comment here, and i can try to impliment it

[calumk]

looks like adding

 .ce-toolbar{
    z-index: 1000;
  }

resolves this, but its a change to the css of the editorjs not the plugin, so its not a great fix - ill look for a better one

[CKylinMC]

and also...

the language select drop down maybe should have a larger space to show?

[calumk]

I agree - the issue is that editorjs doesnt expose any native dropdown tool, it only provides buttons - so this is a extra dependancy in the project.
Ideally editorjs would provide a native dropdown, or i may depreciate it in favour of a non-styled dropdown, that is not as pretty, but more lightweight.

I dont have time to do this at the moment, someone is welcome to PR

[CKylinMC]

I tried to add two lines of styles to solve the overlapping issue:

.editorjs-codeFlask_Wrapper{
    /* ... */
    z-index: 0;
    position: inherit;
}

And due to built-in filtering function works correctly, I flat all languages selects into the menu.

CKylinMC@0fd8d13

(currently selected state not working properly)

[calumk]

Important

This repo will be archived soon. Please upgrade to @calumk/editorjs-codecup

This new repo fixes this (any other issues), and removes dependancy on codeflask, instead using codecup