{"id":14384470,"url":"https://github.com/kode-team/codemirror-colorpicker","last_synced_at":"2025-12-12T03:59:27.657Z","repository":{"id":45484468,"uuid":"80295303","full_name":"kode-team/codemirror-colorpicker","owner":"kode-team","description":"colorpicker  with codemirror ","archived":false,"fork":false,"pushed_at":"2022-10-02T11:34:13.000Z","size":4119,"stargazers_count":131,"open_issues_count":3,"forks_count":13,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-04-13T21:50:19.986Z","etag":null,"topics":["addon","chrome-devtools","codemirror","colorpicker","palette","style"],"latest_commit_sha":null,"homepage":"https://colorpicker.easylogic.studio/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kode-team.png","metadata":{"files":{"readme":"README.md","changelog":"ChangeLogs.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-28T16:29:58.000Z","updated_at":"2024-04-02T13:53:50.000Z","dependencies_parsed_at":"2022-07-18T23:17:55.872Z","dependency_job_id":null,"html_url":"https://github.com/kode-team/codemirror-colorpicker","commit_stats":null,"previous_names":["easylogic/codemirror-colorpicker"],"tags_count":70,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Fcodemirror-colorpicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Fcodemirror-colorpicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Fcodemirror-colorpicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Fcodemirror-colorpicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kode-team","download_url":"https://codeload.github.com/kode-team/codemirror-colorpicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238861535,"owners_count":19542973,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","chrome-devtools","codemirror","colorpicker","palette","style"],"created_at":"2024-08-28T18:01:24.750Z","updated_at":"2025-12-12T03:59:27.609Z","avatar_url":"https://github.com/kode-team.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Colorpicker for CodeMirror\n\nThis project was created to implement a color picker for CodeMirror 5. It implements basic functions for color and for image filters.\n\nhttps://colorpicker.easylogic.studio/\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n[![](https://data.jsdelivr.com/v1/package/npm/codemirror-colorpicker/badge)](https://www.jsdelivr.com/package/npm/codemirror-colorpicker)\n\n[![NPM](https://nodei.co/npm/codemirror-colorpicker.png)](https://npmjs.org/package/codemirror-colorpicker)\n\n\n\n# Sample Image \n\n\u003cimg width=\"500px\" src=\"https://cdn.jsdelivr.net/gh/easylogic/codemirror-colorpicker/resources/image/screen-shot.png\" /\u003e\n\n\n\n\n# Install \n\n## npm \n\n```bash\nnpm install codemirror-colorpicker\n```\n\n## bower \n\n```bash\nbower install codemirror-colorpicker \n```   \n   \n# How to use (for browsers) \n\n```html\n\u003clink rel=\"stylesheet\" href=\"/codemirror-colorpicker/dist/codemirror-colorpicker.css/\u003e\n\u003cscript src=\"/codemirror-colorpicker/dist/codemirror-colorpicker.min.js\"\u003e\u003c/script\u003e\n```\n\n# How to use (for `require`, `nodejs`) \n\nafter npm install \n\n## script \n\n```javascript\nrequire( 'codemirror-colorpicker' );\n```\n\nor \n\n```javascript\n// es6\nimport 'codemirror-colorpicker/dist/codemirror-colorpicker.css'\nimport 'codemirror-colorpicker' \n```\n\n## style \n\n```\n\u003clink rel=\"stylesheet\" href=\"/node_modules/codemirror-colorpicker/dist/codemirror-colorpicker.css\"\u003e\n```\n\n# ColorPicker Options for CodeMirror\n\n## Set option - View mode \n\n```javascript\n{\n  colorpicker : true\n}\n```\n\n## Set option - Edit mode (open color picker)\n\n```javascript\n{\n  colorpicker : {\n      mode : 'edit'\n  }\n}\n```\n\n## Support short cuts (for color pickers in popup windows)\n\nThis is how to open a color picker at the current cursor location.\n\n```javascript\n{\n  colorpicker : {\n      mode : 'edit'\n  },\n  extraKeys : {\n        // when ctrl+k  keys pressed, color picker is able to open. \n        'Ctrl-K' : function (cm, event) {\n            cm.state.colorpicker.popup_color_picker();\n       }\n  }\n}\n```\n\n## Support custom color palettes (since v1.5)\n\nYou can set custom color palettes (ex : material, ...)\n\n```javascript\n{\n  colorpicker : {\n      mode : 'edit',\n      colorSets: [\n        { name : 'Material', colors : [ '#ffff', 'rgba(255, 255, 0, 0.5)' ] },\n        { name : 'My Colors', colors : [ 'red', 'blue', 'white' ] },\n        { name : 'Input Colors', edit: true  },   // editable \n      ]\n  }\n}\n```\n\n\u003cimg width=\"235px\" src=\"https://cdn.jsdelivr.net/gh/easylogic/codemirror-colorpicker/resources/image/colorpicker.png\" align=\"absmiddle\" /\u003e\n\n\u003cimg width=\"235px\" src=\"https://cdn.jsdelivr.net/gh/easylogic/codemirror-colorpicker/resources/image/colorpaletts.png\" align=\"absmiddle\" /\u003e\n\n## Support color scale for palette \n\n```javascript\n{\n  colorpicker : {\n      mode : 'edit',\n      colorSets: [\n        { name : 'Scale Colors', scale: ['red', 'yellow', 'black'], count : 5  }, \n      ]\n  }\n}\n\n```\n\n\u003cimg width=\"235px\"   src=\"https://cdn.jsdelivr.net/gh/easylogic/codemirror-colorpicker/resources/image/scalecolors-title.png\" align=\"absmiddle\" /\u003e\n\n\u003cimg width=\"235px\"  src=\"https://cdn.jsdelivr.net/gh/easylogic/codemirror-colorpicker/resources/image/scalecolors.png\" align=\"absmiddle\" /\u003e\n\n## Support Sketch Style \n\n```javascript\n{\n  colorpicker : {\n      mode : 'edit',\n      type: 'sketch'\n  }\n}\n\n```\n\n\u003cimg width=\"235px\"  src=\"https://cdn.jsdelivr.net/gh/easylogic/codemirror-colorpicker/resources/image/sketch-type.png\" align=\"absmiddle\" /\u003e\n\n## Support Box Style \n\n```javascript\n{\n  colorpicker : {\n      mode : 'edit',\n      type: 'box'\n  }\n}\n\n```\n\n## Support only Palette Style \n\n```javascript\n{\n  colorpicker : {\n      mode : 'edit',\n      type: 'palette'\n  }\n}\n\n```\n\n\u003cimg width=\"235px\"  src=\"https://cdn.jsdelivr.net/gh/easylogic/codemirror-colorpicker/resources/image/palette-type.png\" align=\"absmiddle\" /\u003e\n\n# Development\n\n## local dev \n\n```\ngit clone https://github.com/easylogic/codemirror-colorpicker\ncd codemirror-colorpicker\nnpm install \nnpm run dev \nopen localhost:10001 \n```\n\n## build \n\n```\nnpm run build \n```\n\n# License: MIT \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkode-team%2Fcodemirror-colorpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkode-team%2Fcodemirror-colorpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkode-team%2Fcodemirror-colorpicker/lists"}