flaming-cl / editorjs-text-color-plugin Goto Github PK

Editorjs Version

2.25

Issue Title

Popovers: Popover change type blocks don't hide when we click on color/marker select block

Device

PC

Operating System

Ubuntu 22.04 LTS

Browser

Chrome/Firefox

How To Reproduce

Steps to reproduce the behavior:

Go to 'https://flaming-cl.github.io/editorPlugin/'
Click on 'Convert to'
Click on 'Change text/marker color'

Actual Result with Screenshot

Popover doesn't hide

Expected result

Popover "Convert to" hide, like a color/marker popover select

The markup produced by this plugin for inline font color is the <font> tag. This feels semantically correct, but <font> as a tag is deprecated and all official advice states that this should not be used.

While potentially unlikely due to its historic prevalence, there could be a situation in the future where it is removed from browsers. All you're doing here is adding some inline CSS. Is there a reason a <span> element shouldn't be used instead?

I upgraded editorjs-text-color-plugin from 1.13.1 to 2.0.3 version and I have a new problem. How to fix it?

It seems that in versions 2.x the colour changing code changed from document.execCommand to wrapping the selection in <font> elements. As a result text that is broken up by other elements e.g. links won't change colour.

Steps to reproduce:

• Go to https://jsfiddle.net/37e948xw/25/
• Select all text
• Try to change the colour

Expected behaviour

• The colour of everything in the selection changes to the colour intended

Actual behaviour

• No change is visible

When I downgraded to v1.13.1 it works as expected.

Thanks!

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",
    },
  },

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.

When set #fff for fonts work fine (color style just remove and text inherit default color page), but on marker it doesn't for like that (on marker just set bg-color: #fff)

I guess in this tool need reset button for clear style (font setting have that mechanics, but not bg) or, at least, styles should reset on repeat click on same color

Using config:

...
Marker: {
class: TextColorPicker,
config: {
colorCollections: [
'#ffffff', '#000000', '#e60000', '#ff9900',
'#ffff00', '#008a00', '#0066cc', '#9933ff',
'#bbbbbb', '#f06666', '#ffc266', '#ffff66',
'#66b966', '#66a3e0', '#c285ff', '#888888',
'#a10000', '#b26b00', '#b2b200', '#006100',
'#0047b2', '#6b24b2', '#444444', '#5c0000',
'#663d00', '#666600', '#003700', '#002966',
'#3d1466'
],
defaultColor: '',
type: 'marker'
}
},
Color: {
class: TextColorPicker,
config: {
/* TODO: #ffffff - значение по умолчанию, не конфликтует
* темной и светлой темой
* */
colorCollections: [
'#ffffff', '#000000', '#e60000', '#ff9900',
'#ffff00', '#008a00', '#0066cc', '#9933ff',
'#bbbbbb', '#f06666', '#ffc266', '#ffff66',
'#66b966', '#66a3e0', '#c285ff', '#888888',
'#a10000', '#b26b00', '#b2b200', '#006100',
'#0047b2', '#6b24b2', '#444444', '#5c0000',
'#663d00', '#666600', '#003700', '#002966',
'#3d1466'
],
.....

This is nice:

colorCollections: [
  '#FF1300',
  '#EC7878'
]

But it would be great if CSS variables were supported too:

colorCollections: [
  '#FF1300',
  'var(--colorPrimary)'
]

i'm import bundle.js in index.html

const editor = new EditorJS({
tools: {
Color: {
class: Color,
config: {
  colorCollections:['#FF1300','#EC7878','#9C27B0','#673AB7','#3F51B5','#0070FF','#03A9F4','#00BCD4','#4CAF50','#8BC34A','#CDDC39', '#FFF'],
 defaultColor: '#FF1300',
 type: 'text', 
}     
}
}
});

I get
ReferenceError: Color is not defined

Current Behaviour

For text color once color is applied you can change the color to another color provided by the tool but you can not remove the applied styles to let the text inherit the CSS color property again.

Similar for the marker once a background is applied there is no way to fully remove it, current solution is often to set the background to white or whatever the parent element's background is.

Desired Behaviour

Allow ability to toggle these styles by clicking their icon on the toolbar to allow the text to return to their default styles. Similar to how the default Bold inline tool works

I am trying to add color plugin to editorjs config but when I select a text block I get this error.

  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  
      }     
    },

Hi, if you are encountering some issues with this plugin, please take a look at this template and add it in your issue.
This helps us to better understand your issue, thanks.

Editorjs Version

2.25

Other unofficial Editorjs plugins you are using

If not, leave this blank

Device

PC

Operating System

Ubuntu / Windows / Mac

Browser

Chrome 114?

How to reproduce the issue

Expected outcome

The output:

" should be escaped as \ "

Is this possible? ... I'm using your CDN version

Editorjs Version
2.28.2

editorjs-text-color-plugin Version
2.0.3

Device
PC

Operating System
Windows
Browser
115.0.5790.110 (Official build), (64 bit)

How to reproduce the issue
changing color text
save editor js
color attribute missing and ouput just <font>text</text>

Expectation: output will be with color attribute
Reality: color attribute missing

As shown in the image below, if you access the demo page and check it, you can see that the selected area is broken. please fix the bug.

First, thank you very much for participating to the editorJs community!

About the issue, the tooltip action button is composer of a letter "A" and a color dot.
When the cursor hover the "A", the cursor icon is not a "pointer" but it is still clickable.
When the cursor hover the "dot", the cursor icon is a "pointer" and shows the color picker.

I feel that it could be a better experience to have only one behavior:

• The cursor should be a pointer is either case
• The color picker should open in either case

What do you think?

Have you considered using the browser's native colour picker, to allow selection of any colour?

i.e. if enabled, an extra item could appear in the list of colours in the picker. When clicked it opens the native colour picker:

The icon on the extra item could explain it's for "any colour" by having a rainbow effect e.g.

If you don't like the idea of the native picker, it could even provide just a text box to provide a custom colour.

Versions:.
[email protected]
node v12.18.2
"@editorjs/editorjs": "^2.23.2",

Html :
////////////
<div class="ce-paragraph cdx-block" data-placeholder="Start typing here ... Press Tab button for options" contenteditable="true">Testing <font color="red">font color</font> in editor js</div>
//////////////

Say I am using the quote tool, can I disable coloring of the quotes in a simple manner?
Of course I want to keep it for the normal text/heading ..

Regards!

Editorjs Version

2.6.4

editorjs-text-color-plugin Version

2.0.3

Device

PC

Operating System

Windows

Browser

115.0.5790.110 (Official build), (64 bit)

How to reproduce the issue

1. Go to https://flaming-cl.github.io/editorPlugin/
2. Select word demos
3. Change its color be click on marker
4. Select whole string
5. Click on marker

Expectation: selected string will change color
Reality: Selection diminish to one word (demos)

This plugin renders a <font> tag, which is no longer considered valid/current HTML markup.

See here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font

Was this an oversight?

I am using the latest version of EditorJS within a React application, and I have encountered an issue where the color palette does not open when I try to use the ColorPlugin. I have tested this issue on Mozilla Firefox, Google Chrome, Opera, and Microsoft Edge browsers.

Interestingly, I am able to set the defaultColor successfully, but unfortunately, the color palette itself does not open when I attempt to choose a custom color.

I kindly request your assistance in resolving this issue within the context of a React environment. If there are any suggestions or solutions you can provide, it would be greatly appreciated.

React Version 18
editorjs - 2.29.0
editorjs-text-color-plugin 2.0.4
im useing tailwind

Thank you for your attention to this matter.

Best regards,

Ugur Gulsen

Versions:
"core-js": "~3.6.4",
"editorjs-inline-font-family-tool": "^1.0.4",
"editorjs-inline-font-size-tool": "^1.0.1",
"editorjs-text-color-plugin": "^1.12.1",
Issue:
When Font size And Font Family Plugins are active then Font color is not passing color to json array during saving/storing process ,