Describe the bug
The color picker is outside of the screen and not fully visible on the first click. On the 2nd click the color picker is aligned correctly

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codepen.io/anon/pen/xyLKvN
2. Click on in the first line on the green color field
3. Colorpicker is partly out of screen
4. Click 2nd time on the green color field
5. Colorpicker is now correct aligned

Expected behavior
Colorpicker should have have the correct alignment on the first click.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: chrome
• Version: 69

hello! Is there any hotkey to show the popup widget?
For Example:
when I write color: （here want hotkey to popup color picker）
how can i do this ?

I start create a textarea and initiate codemirror with:

<script type="text/javascript">
   CodeMirror.fromTextArea(document.getElementById("less-input"), {
 mode: "css",

   colorpicker : {
           mode : 'edit'
       }
});
 </script>

The textarea is pre-made with CSS inside like:

<textarea id="less-input" less-editor ng-model="lessInput" class="less-input">
   
    color: #000 !important;
  text-shadow: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
}

.form-control:focus {
border-color: grey;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
</textarea>

And colorview/coloredit don't work on the pre-made CSS, if I PASTE more CSS in the textarea it will work and pick up all the CSS with the color swatche.

I'm not sure if I'm clear enough in my description of the problem, if you don't understand just ask me for more information.

Regards

Describe the bug
Only the first selection inside of the colorpicker triggers a blur event. Further changes does not trigger the event. As i have the save method bound to the blur event i get not further change notifications

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codepen.io/anon/pen/xyLKvN
2. Open the colorpicker by clicking on a color
3. Change the color without closing the color picker
4. the blur event is triggert with the new color
5. Change the color again to a differnt color
6. no blur event is triggert
7. wait until the color picker closes or click outside of the codemirror area

Expected behavior
Colorpicker should trigger the blur event on codemirror to notify for changes or put the cursor back to the old position after auto closing.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: chrome
• Version: 69

refer to https://github.com/WICG/eyedropper-api

#42

In css mode, the color picker is being applied to named css selectors:

and inside of comments:

Is your feature request related to a problem? Please describe.
As described in #19 we are using redux to allow color selections. We have specific collections of color sets that we are using as palette. Currently there is no option in the API reference that would allow a change of the palette within an exisitng instance, as our redux state could constantly change, the palette would be outdated.

Describe the solution you'd like
A public method that allows to update the color palette.
I actually tried this:
https://github.com/easylogic/codemirror-colorpicker/blob/master/src/colorpicker/BaseColorPicker.js#L288-L290
But it did not appear to work as expected.

When "transparent" is set as a color it is not recognized as a "color".

Screenshot: http://i.imgur.com/wQGTXiA.png

Regards

Describe the bug
When giving a HSL or HSLA string for the color picker it is not correctly parsed.

To Reproduce
Steps to reproduce the behavior:
See the codepen: https://codepen.io/anon/pen/dqVvLG

Expected behavior
The HSL or HSLA string input should work.

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 68

Currently, the color picker closes when the user clicks or scrolls inside the CodeMirror.

The color picker should also close when user clicks anywhere in page outside color picker (and outside codemirror).

How does CodeMirror detect clicks outside its instance:
From what I see, CodeMirror does it by using an invisible textarea element. Whenever the user clicks anywhere in the CodeMirror, that textarea element gets the focus. When the user clicks anywhere outside, the textarea element loses focus and CodeMirror fires its 'blur' event. We can check it by logging document.activeElement. I believe the reason for this would be that browsers work well for .focus() and .blur() with input/textarea elements.

The code to detect outside clicks may not simply rely on detecting click on the page body, because some component may stop bubbling of click event. Using .blur() of an input/textarea element guarantees the detection of focus change even in those cases.

See here

You wrote
<link rel="stylesheet" href="/codemirror-colorpicker/dist/codemirror-colorpciker.css/>
but it should be
<link rel="stylesheet" href="/codemirror-colorpicker/dist/codemirror-colorpicker.css/>

Hope you can fix it soon😂

Describe the bug
As stated in the API reference:

// default value is 2000. color picker don't hide automatically when hideDelay is zero

With the fix for #17 the value 0 does now hide instantly.

Expected behavior
We want to have an option to display the show the color picker until a user action followed to hide it, like clicking on the overlay. Consider allow Infinity to be passed to the hideDelay option.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 68

Failed to compile.

./node_modules/_codemirror-colorpicker@1.9.46@codemirror-colorpicker/dist/codemirror-colorpicker.js
Module not found: Error: Can't resolve 'codemirror' in '/project/qcode/node_modules/_codemirror-colorpicker@1.9.46@codemirror-colorpicker/dist'

컬리피커가 나오는 좌표값을 다시 설정해야할 듯 하다.

Describe the bug
color picker shows next to css class. should only show next to CSS color properties.

To Reproduce
Steps to reproduce the behavior:

1. write any CSS class that includes CSS colors (red, blue, green...) and color picker selector will show up

Expected behavior
Should only be shown next to CSS color properties

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: All
• Version latest

Describe the bug
If the picker script is loaded before codemiror script, color picker does not appear in codemirror.
This is causes some issues if the scripts loaded on-demand for both codemiror and standalone usage.
On some cases standalone picker is loaded before codemiror requested for loading.

To Reproduce
Load picker script before codemiror script.

Additional context
A public method like "rebuildForCodemirror()" can solve the issue. Currently following section which is private, initiates picker for code mirror. A public wrapper method for this part can be triggered when needed by using the API

 if (CodeMirror) {
        CodeMirror.defineOption("colorpicker", false, function (cm, val, old) {
            if (old && old != CodeMirror.Init) {

                if (cm.state.colorpicker) {
                    cm.state.colorpicker.destroy();
                    cm.state.colorpicker = null;
                }
                // remove event listener
            }
            if (val) {
                cm.state.colorpicker = new ColorView(cm, val);
            }
        });
    }

Describe the bug
Even if you type invalid color code, it would still highlight it as a color in CodeMirror.
For example: Type "#000a" and it would show up as black color.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://colorpicker.easylogic.studio/#codemirror-colorpicker-addon
2. Click on the editor inside "CodeMirror ColorPicker Addon"
3. Type "#000a" (without quotes)
4. It would show up as a color

Expected behavior
Invalid hex codes should not be identified as colors.

Screenshots
This is the screenshot for my browser extension where I face the same issue:
https://user-images.githubusercontent.com/29383712/51375676-d0e60500-1b06-11e9-83b2-701de05752ac.png
Reference: webextensions/live-css-editor#23 (comment)

Desktop (please complete the following information):

• OS: Any
• Browser: Any
• Version: 1.9.49

Smartphone (please complete the following information):

• Device: Not tested
• OS: Not tested
• Browser: Not tested
• Version: Not tested

Additional context
I would recommend that if a hex code (or valid color) is immediately followed by a whitespace / single-quote / double-quote character / etc, then only it should be considered as a valid color. Otherwise, treat it as an invalid color and don't highlight it.

Is your feature request related to a problem? Please describe.
We have a redux store to control the colors being selected. In case the color does change we do obiously change it. The current callback and onChange property do trigger on each single change. Which does trigger a lot request.

Describe the solution you'd like
Having an option to get the color on close would be a solution, or an additional callback.
An alternative would be to change the callback that is passed to open().

Additional context
I am not sure if the current callback passed on open() and the property onChange does make sense, both trigger at the same time.

Implement gradient scale

Color.gradient('red, black', 30) 

Describe the bug
picker closes as soon as it is clicked

To Reproduce

• load codemirror+codemirror-colorpicker
• remove editor from DOM (v-if/ng-if...)
• reinit codemirror editor (reinsert to DOM)
• try to open codemirror-colorpicker
• issue happens

Expected behavior
picker should stay open

Screenshots
picker opens and immediately the 'onchange' handler gets called and closes it.

Potential Fix / Additional Context

fixed the issue by removing cm.state.colorpicker.close_color_picker(); in side the OnChange function

function onChange(cm, evt) {
    if (evt.origin == 'setValue') {
       //  cm.state.colorpicker.close_color_picker();  // <========= removed this line
        cm.state.colorpicker.init_color_update();
        cm.state.colorpicker.style_color_update();
    } else {
        cm.state.colorpicker.style_color_update(cm.getCursor().line);
    }
}

Desktop

• OS: Windows
• Browser: all
• Version: latest 1.9.71

개발문서를 업데이트 해봅시다.

문서 마스터가 되어 봅시다.

For example, there are tow pages, 1.html has colorpicker plugin and 2.html not
1.html
2.html

If paste a long text (more than 30000, for example, this file ), the 1.html will be "no response" in about 10 seconds. I use "Performance" tool in Chrome's devtools, it shows that most of the time is spent on "Layout"

If in a complex web page, the situation is more serious.

Here is Google's document

You can load my performance profile

(I did not delve into it, but maybe asynchronous initialization can solve the problem?)

If I bundle my browser-side code with browserify I have to change this addon's code to get it to work.

If I do npm install codemirror-colorpicker it gets installed in my node-modules. (CodeMirror is in node-modules too.)

Your code tries to load CM as such:

(function(mod) {
    if (typeof exports == "object" && typeof module == "object") // CommonJS
        mod(require("../../lib/codemirror"), require("./foldcode"));
    else if (typeof define == "function" && define.amd) // AMD
        define(["../../lib/codemirror", "./foldcode"], mod);
    else // Plain browser env
        mod(CodeMirror);
})(function(CodeMirror) {
...

But naturally ../../lib/codemirror doesn't point to anything, so browserify fails saying it can't find ../../lib/codemirror.

Since we're in a Common JS environment why not replace that line with:

mod(require("codemirror"), require("codemirror/addon/fold/foldcode"));

I did this change manually and was able to get the picker to work that way.

I'm guessing a similar issue occurs in AMD?

If I missed something obvious and I'm doing it all wrong please let me know.

Apart from that issue I'm really grateful for this slick color picker! 👍

Hello. Nice looking plugin.

Is this for CodeMirror 6, 5, or something else, please?

It would help if the readme answered this question

Thanks

Describe the bug
The color picker is closed after 2sec if the hideDelay ist set to 0.

To Reproduce
Steps to reproduce the behavior:

var cm = CodeMirror.fromTextArea(document.getElementById("sample_text_area"), {
    colorpicker : {
        mode : 'edit',
        hideDelay: 0
    }
});

The issue can be found here as in hideDelay: self.opt.hideDelay || 2000 hideDelay will be falsy if it is set to 0.

Expected behavior
The color picker should stay open with the hideDelay set to 0.

Hi,

I was looking for a color picker addon for Codemirror with support for Alpha channel too and I your colorpicker.

I was using previously https://github.com/enjalot/Inlet but it don't support Alpha channel transparency.

The bug: I was trying your demo at https://store.jui.io/v2/view.php?id=58930a1a94976c9b562541a6
and I pasted this LESS/CSS code inside to see what will happen:

// The main font color controls the color of the text and the icons (font icons)
@main-font-color: #CCCCCC; // e.g. rgb(255, 255, 255) or #ffffff

// The default color of control backgrounds is mostly black but with a little
// bit of blue so it can still be seen on all black video frames, which are
// common.
@control-bg-color: #07141E; // e.g. rgb(255, 255, 255) or #ffffff
@control-bg-alpha: 0.7; // 1.0 = 100% opacity, 0.0 = 0% opacity

// The slider bar color is used for the progress bar and the volume bar
@slider-bar-color: #66A8CC; // e.g. rgb(255, 255, 255) or #ffffff
// The background of the progress bar and volume bar have a lined pattern that
// is created from a base64 encoded image. You can generate your own pattern at
// http://www.patternify.com/ then replace the value in the quotes with your own
@slider-bar-pattern: ~'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC';
// The color of the slider background
@slider-background-color: #333333;
@slider-background-alpha: 0.9; // 1.0 = 100% opacity, 0.0 = 0% opacity

The problem is that when I paste the code inside the editor the "code" is NOT processed so there is no swatch beside the color to edit them.

But if I put my cursor near a color code and I enter a space it will be parsed for this line and add the color swatch.

Sometime it did not work when I was editing/writing by hand the color code pasted.

Here's a Screencast to show you the bug since english is not my first language and look carefully at the last 25 seconds it will show that even when I input the color code "by hand" with the keyboard inside the pasted code it did not work,

SCREENCAST: http://screencast-o-matic.com/watch/cbeqFi6pgD

Best Regards

First, thank you for your great work.

Describe the bug
When using CodeMirror in Scss mode with variables, this happen if you choose a color name as variable name :

Seems we need to add to the exluded token the "variable" token.
https://github.com/easylogic/codemirror-colorpicker/blob/main/src/extension/codemirror/colorview.js#L7

Is it enough ? :)

Affected browser: Google Chrome
Works fine on: Mozilla Firefox

Steps to reproduce:

• In Chrome, go to https://store.jui.io/v2/code/58930a1a94976c9b562541a6/sample/colorpicker.html
• You would see the color picker demo loaded
• Reduce the height of the browser window (for example 225px), so that the page body also gets a scrollbar
• Scroll down a little through the page body's scroll bar
• Select any color to open the color picker
• Now try to select/drag inside the color picker
• We can see that the color picker is missing the color by as many pixels as we scrolled in the body

Where the issue lies:
At line 581 in https://github.com/easylogic/codemirror-colorpicker/blob/master/addon/colorpicker/colorpicker.js#L581 we use:

var x = e.clientX - offset.left;
var y = e.clientY - offset.top;

Now, if we change it to:

var x = e.pageX - offset.left;
var y = e.pageY - offset.top;

It would start working fine in Chrome but start showing up the same issue in Firefox.

I'm not sure if it should be fixed using browser detection or some other better fix.

Describe the bug
In case of an existing 8 char hexcolor value in the editor containing the alpha value, changing the alpha value in the colorpicker leads to not fully replacing the hexstring in the editor but inserting it so that in the editor a 10 char invalid hexcolor code appears.

To Reproduce
Steps to reproduce the behavior:

1. Have a 8 char hexcode containing a two char alpha value in the editor
2. click on the color picker square
3. change alpha value
4. leave color picker

Expected behavior
Full hexstring in codemirror editor is replaced with string from color picker

Screenshots
Editor 8char hex value

color picker: change alpha value

now editor has a 10 char hex value

Desktop (please complete the following information):

• Windows
• Chrome version 81.0.4044.129 (Official Build) (64-bit)

Now that we can open with Ctrl-K it would be nice if the whole component could be usable with just the keyboard.

I suggest:

• make it possible to tab between inputs. (currently, if I'm in RGB mode and press tab, it changes the mode and blurs the input :(
• make the sliders focusable and use arrow keys to change value. Maybe even shift+arrow for fine adjustment
• make the gradient focusable and editable with keyboard.
• listen for Esc and Enter and use those to close dialog and return focus to CM.

Thanks. :)

Without loading codemirror, color picker cannot be initiated

//include colorpicker js file and css file then=>

var ColorPicker = CodeMirrorColorPicker.ColorPicker;
var colorpicker = new ColorPicker({
    color: 'blue', // init color code 
    type : 'palette' // or 'sketch',  default type is 'chromedevtool'
})

this throws an error "Uncaught ReferenceError: CodeMirrorColorPicker is not defined"

To make it accessible I added one line to the end of ColorPicker method in the js file.

var index = _extends({}, Util, ColorPicker);
// added this line -->
window.CMColorPicker=ColorPicker.ColorPicker;
//--
return index;

and then tried

 var colorpicker = new CMColorPicker({
        color: 'blue',  
        position: 'inline',   
        container : $('color-container'),
        type : 'ring'
    });

This makes it work, But some types displayed distorted.
please see attached file. This is how "ring" type is displayed.

By the way I think this is one of the best color picker tool on the web. Great job!

Describe the bug
ColorPicker can be used without CodeMirror, but it still has a dependency on CodeMirror.

To Reproduce
Steps to reproduce the behavior:

1. Use it as ES6 style.
2. Run webpack.
3. Error occurs.

Expected behavior
Can be used without CodeMirror installation

Additional context
Webpack warning message:

WARNING in ./node_modules/codemirror-colorpicker/dist/codemirror-colorpicker.js
Module not found: Error: Can't resolve 'codemirror' in '/Users/lqez/Dev/veryslide/veryslide/node_modules/codemirror-colorpicker/dist'
 @ ./node_modules/codemirror-colorpicker/dist/codemirror-colorpicker.js

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
Is it possible to select a color that is outside the picker window? Sometimes it's helpful to grab a starting color from outside the picker.

Describe alternatives you've considered
Using Sketch or SIP to grab the color. Currently, the color has to be pasted into the codemirror color picker, which is a bit inefficient.

Additional context

Colorpicker only has one callback for selecting colors. I need to distinguish mouseup and mousedown events.

While dragging the picker – this means “I'm choosing a color, not finished.”
When I picked a color from the palette or released the picker – this means “I'm finished to choose.”

I'm building a web-based content editor and I would like to push an undo history only when a user has finished choosing a color. Currently, tons of history had been pushed while choosing a color :(

Hi @easylogic

thanks for this great project, looks very promising!

I am running into an issue, which was reported in the past multiple times, see eg. #24, #28, #29, #32

My problem: I cannot get the color picker up and running, my webpack compile always fails with:

Module build failed: Module not found:
./node_modules/codemirror-colorpicker/dist/codemirror-colorpicker.js contains a reference to the file codemirror.
This file can not be found, please check it for typos or update it if the file got moved.

I assume you use it always in a larger context and the complete frontend stack is your normal working environment.
But I am failing currently and wonder if you could have a look at the documentation.

Some of the linked jsfiddles link to a codemirror.js file, so I assume I have to require/import more files.

Can you give me a hint what to do?

Describe the bug
color picker appears inside a css selector when wirting #address inside a codemiror code editor

To Reproduce
Steps to reproduce the behavior:

• write #address css selector and a teal color picker instance will show up

Expected behavior
color picker should not show inside any CSS selector ( I saw the same issue with other CSS selectors but I can't remember them exactly)

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome Version 92.0.4515.131 (Latest)
• Version ^1.9.72 (Latest)