^{Using my app is also a way to support me:}

Color Extensions


Color Extensions for CodeMirror6.


Install

``bash
npm install @uiw/codemirror-extensions-color --save
`

Usage

`jsx
import CodeMirror from '@uiw/react-codemirror';
import { color, colorView, colorTheme } from '@uiw/codemirror-extensions-color';

function App() {
return (
value="body { color: #333; }"
extensions={[color]}
// ------ Or ------
// extensions={[colorView(false), colorTheme]}
height="200px"
/>
);
}
export default App;
`

`js
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { color } from '@uiw/codemirror-extensions-color';

const state = EditorState.create({
doc: 'body { color: #333; }',
extensions: [color],
});

const view = new EditorView({
parent: document.querySelector('#editor'),
state,
});
`

API

`ts
import { ViewPlugin, EditorView, ViewUpdate, DecorationSet } from '@codemirror/view';
import { Extension } from '@codemirror/state';
export declare enum ColorType {
rgb = 'RGB',
hex = 'HEX',
named = 'NAMED',
hsl = 'HSL',
}
export interface ColorState {
from: number;
to: number;
alpha: string;
colorType: ColorType;
}
export declare const colorView: (showPicker?: boolean) => ViewPlugin<{
decorations: DecorationSet;
update(update: ViewUpdate): void;
changePicker(view: EditorView, canBeEdited: boolean): void;
}>;
export declare const colorTheme: Extension;
export declare const color: Extension;
``

Contributors

As always, thanks to our amazing contributors!

Made with action-contributors.

License

Licensed under the MIT License.