Nagging Penguin Matriarchs

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

    0.20.0 • 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, EditorState } from '@codemirror/basic-setup';
    import { EditorView } from '@codemirror/view';
    import { css } from '@codemirror/lang-css';
    import { cssColorPicker } from '@replit/codemirror-css-color-picker';
    
    new EditorView({
      parent: document.querySelector('#editor'),
      state: EditorState.create({
        doc: '.wow {\n  color: #fff;\n}',
        extensions: [
          basicSetup,
          css(),
          cssColorPicker({
            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.

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    792

    Version

    0.20.0

    License

    MIT

    Unpacked Size

    59.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • masad-frost
    • lincolnreplit
    • stkenned
    • jnnnthnn-at-replit
    • alex-jungle-cat
    • replitmatt
    • cbrewster
    • wadeatreplit
    • ltazmin_replit
    • jeremypress
    • moudy
    • schestakov
    • lhchavez
    • slmjkdbtl
    • frantic
    • lunaroyster