{"id":22227433,"url":"https://github.com/Matergi/editorjs-color-picker","last_synced_at":"2025-07-27T19:31:02.029Z","repository":{"id":260108806,"uuid":"867608970","full_name":"Matergi/editorjs-color-picker","owner":"Matergi","description":"Text Color Picker Tool for Editor.js 2.0","archived":false,"fork":false,"pushed_at":"2025-05-08T08:56:21.000Z","size":62,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-08T09:37:19.271Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Matergi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-04T11:41:36.000Z","updated_at":"2025-05-08T08:54:53.000Z","dependencies_parsed_at":"2025-01-13T12:22:33.117Z","dependency_job_id":"b998fbd1-ad30-4258-9759-278c54ab4e72","html_url":"https://github.com/Matergi/editorjs-color-picker","commit_stats":null,"previous_names":["matergi/editorjs-color-picker"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/Matergi/editorjs-color-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matergi%2Feditorjs-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matergi%2Feditorjs-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matergi%2Feditorjs-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matergi%2Feditorjs-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Matergi","download_url":"https://codeload.github.com/Matergi/editorjs-color-picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matergi%2Feditorjs-color-picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267413386,"owners_count":24083425,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-03T01:01:41.795Z","updated_at":"2025-07-27T19:31:02.024Z","avatar_url":"https://github.com/Matergi.png","language":"TypeScript","funding_links":[],"categories":["Tools"],"sub_categories":["Block Tools"],"readme":"# Color Picker Tool for Editor.js\n\nhttps://github.com/user-attachments/assets/c22b0e96-a0a2-4187-ba7a-0e8be3cfe9d1\n\n## Installation\n\nYou can install the package via npm or yarn:\n\n```shell\nyarn add editorjs-color-picker\n```\n\nAlternatively, you can use the CDN version.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/editorjs-color-picker@1.0.8/dist/index.umd.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Using with a Package\n\nAdd a new Tool to the `tools` property of the Editor.js initial config.\n\n```javascript\nimport ColorPicker from 'editorjs-color-picker';\n\nconst editor = new EditorJS({\n  ...\n\n  tools: {\n    ...\n    ColorPicker: {\n      class: ColorPicker,\n    },\n  }\n\n  ...\n});\n```\n\nIf you don't want the text to retain its colors every time you copy and paste it into the editor, you can use the `ColorPickerWithoutSanitize` class.\n\n```javascript\nimport { ColorPickerWithoutSanitize } from 'editorjs-color-picker';\n\nconst editor = new EditorJS({\n  ...\n\n  tools: {\n    ...\n    ColorPicker: {\n      class: ColorPickerWithoutSanitize,\n    },\n  }\n\n  ...\n});\n```\n\n### Using with CDN\n\nIf you're using the CDN, you can access the tool via `window.ColorPicker.default` or `window.ColorPicker.ColorPickerWithoutSanitize`.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/editorjs-color-picker@1.0.8/dist/index.umd.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n\tconst { ColorPicker } = window;\n\tconst editor = new EditorJS({\n\t  ...\n\n\t  tools: {\n\t    ...\n\t    ColorPicker: {\n\t      class: ColorPicker.default,  // or ColorPicker.ColorPickerWithoutSanitize\n\t    },\n\t  }\n\n\t  ...\n\t});\n\u003c/script\u003e\n```\n\n## Config Params\n\nThe Paragraph Tool supports these configuration parameters:\n\n| Field   | Type       | Description                                         |\n| ------- | ---------- | --------------------------------------------------- |\n| colors  | `string[]` | (there are default colors) Array of colors you want |\n| columns | `number`   | (default: `7`) Number of columns to display         |\n\n## Issues with Copy and Paste\n\nIf you copy and paste text with a different background color, it adopts the style of the `\u003cspan\u003e`.  \nThe only solution I’ve found so far, without modifying the paragraph component and its onPaste handler, is to apply this style.  \nFor now, I’m only attaching it here without adding it to the library, as it might interfere with other plugins.  \nSo, anyone interested should try applying this style:\n\n```css\n.ce-paragraph span {\n\tbackground-color: unset !important;\n}\n```\n\nIf anyone finds a more elegant solution, can open a PR, and we’ll fix it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMatergi%2Feditorjs-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMatergi%2Feditorjs-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMatergi%2Feditorjs-color-picker/lists"}