Color Extensions for CodeMirror6.
npm install @uiw/codemirror-extensions-color --saveimport CodeMirror from '@uiw/react-codemirror';
import { color, colorView, colorTheme } from '@uiw/codemirror-extensions-color';
function App() {
return (
<CodeMirror
value="body { color: #333; }"
extensions={[color]}
// ------ Or ------
// extensions={[colorView(false), colorTheme]}
height="200px"
/>
);
}
export default App;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,
});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;As always, thanks to our amazing contributors!
Made with action-contributors.
Licensed under the MIT License.