@replit/codemirror-css-color-picker
TypeScript icon, indicating that this package has built-in type declarations

6.1.1 • Public • Published

CodeMirror Color Picker

Run on Replit badge NPM version badge

A CodeMirror extension that adds a color picker input next to CSS color values.

preview

Usage

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',
          },
        },
      }),
    ],
  }),
});
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 `<div>` container */
    wrapper?: StyleSpec;
    /** Style spec for the color picker `<input>` 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.

Readme

Keywords

none

Package Sidebar

Install

npm i @replit/codemirror-css-color-picker

Weekly Downloads

37,175

Version

6.1.1

License

MIT

Unpacked Size

64.9 kB

Total Files

13

Last publish

Collaborators

  • mikewesthad
  • motzyball
  • juan.replit
  • ahulbert-replit
  • james-addison-replit
  • replitdstewart
  • ryanweingast
  • harryatreplit
  • theflowingsky
  • jonesit-replit
  • szymon_k
  • cdmistman
  • jackyzha0
  • jamesaustinreplit
  • lopezhoracio
  • bradymaddenreplit
  • ryantm
  • alexisreplit
  • ink404
  • brianpool
  • tobyho
  • brenoafb
  • masad-frost
  • lincolnreplit
  • stkenned
  • replitmatt
  • cbrewster
  • ltazmin_replit
  • moudy
  • schestakov
  • lhchavez
  • slmjkdbtl
  • lunaroyster