kode-team / codemirror-colorpicker Goto Github PK
View Code? Open in Web Editor NEWcolorpicker with codemirror
Home Page: https://colorpicker.easylogic.studio/
License: MIT License
colorpicker with codemirror
Home Page: https://colorpicker.easylogic.studio/
License: MIT License
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 ?
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:
#address
css selector and a teal color picker instance will show upExpected 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)
Desktop (please complete the following information):
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 :(
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):
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😂
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
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
ColorPicker can be used without CodeMirror, but it still has a dependency on CodeMirror.
To Reproduce
Steps to reproduce the behavior:
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
Implement gradient scale
Color.gradient('red, black', 30)
개발문서를 업데이트 해봅시다.
문서 마스터가 되어 봅시다.
Describe the bug
picker closes as soon as it is clicked
To Reproduce
Expected behavior
picker should stay open
Screenshots
picker opens and immediately the 'onchange' handler gets called and closes it.
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
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:
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):
Smartphone (please complete the following information):
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.
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:
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):
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 shows next to css class. should only show next to CSS color properties.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Should only be shown next to CSS color properties
Desktop (please complete the following information):
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
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):
Hello. Nice looking plugin.
Is this for CodeMirror 6, 5, or something else, please?
It would help if the readme
answered this question
Thanks
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.
When "transparent" is set as a color it is not recognized as a "color".
Screenshot: http://i.imgur.com/wQGTXiA.png
Regards
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.
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! 👍
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:
tab
, it changes the mode and blurs the input :(Esc
and Enter
and use those to close dialog and return focus to CM.Thanks. :)
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 ? :)
컬리피커가 나오는 좌표값을 다시 설정해야할 듯 하다.
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
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.
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.
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?)
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.
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
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:
Expected behavior
Colorpicker should have have the correct alignment on the first click.
Desktop (please complete the following information):
Affected browser: Google Chrome
Works fine on: Mozilla Firefox
Steps to reproduce:
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
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:
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):
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.