Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/replit/Codemirror-CSS-color-picker
A codemirror extension that adds a color picker input next to CSS color values. Development happens on Replit, just fork and hit run! https://replit.com/@util/Codemirror-CSS-color-picker
https://github.com/replit/Codemirror-CSS-color-picker
Last synced: 4 months ago
JSON representation
A codemirror extension that adds a color picker input next to CSS color values. Development happens on Replit, just fork and hit run! https://replit.com/@util/Codemirror-CSS-color-picker
- Host: GitHub
- URL: https://github.com/replit/Codemirror-CSS-color-picker
- Owner: replit
- Created: 2021-12-02T22:32:25.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-06T01:45:39.000Z (7 months ago)
- Last Synced: 2023-12-19T08:57:50.216Z (6 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@replit/codemirror-css-color-picker
- Size: 248 KB
- Stars: 29
- Watchers: 35
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Lists
- awesome-stars - replit/Codemirror-CSS-color-picker - A codemirror extension that adds a color picker input next to CSS color values. Development happens on Replit, just fork and hit run! https://replit.com/@util/Codemirror-CSS-color-picker (TypeScript)
README
# CodeMirror Color Picker
A CodeMirror extension that adds a color picker input next to CSS color values.
### Usage
```ts
import { basicSetup } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { css } from '@codemirror/lang-css';
import { colorPicker } from '@replit/codemirror-css-color-picker';
new EditorView({
parent: document.querySelector('#editor'),
state: EditorState.create({
doc: '.wow {\n color: #fff;\n}',
extensions: [
basicSetup,
css(),
colorPicker({
style: {
wrapper: {
outlineColor: 'transparent',
},
},
}),
],
}),
});
```
```ts
interface CSSColorPickerOptions {
/**
* Additional [`style-mod`](https://github.com/marijnh/style-mod#documentation)
* style spec providing theme for the color picker.
*/
style?: {
/** Style spec for the color picker `
` container */
wrapper?: StyleSpec;
/** Style spec for the color picker `` element */
input?: StyleSpec;
};
}
```
### Todos
- Investigate solutions for alpha values. `input[type="color"]` doesn't support alpha values, we could show another number input next to it for the alpha value.