Color Extensions

Color Extensions for CodeMirror6.

Install

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

Usage

import 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,
});

API

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.