Merge pull request #5 from replit/extract-styling-logic

Remove styling options to let user style it directly

CHANGELOG.md

@@ -2,7 +2,4 @@
 
 ### Breaking Changes
 
-```diff
-- export const colorPicker: Extension;
-+ export const colorPicker = (options?: CSSColorPickerOptions) => Extension;
-```
+None.

dev/index.ts

@@ -1,7 +1,7 @@
 import { basicSetup, EditorState } from '@codemirror/basic-setup';
 import { css } from '@codemirror/lang-css';
 import { EditorView } from '@codemirror/view';
-import { colorPicker } from '../src/';
+import { colorPicker, wrapperClassName } from '../src/';
 
 const doc = `
 .wow {
@@ -39,15 +39,14 @@ new EditorView({
   state: EditorState.create({
     doc,
     extensions: [
-      colorPicker({
-        style: {
-          wrapper: {
-            outlineColor: '#000',
-          },
-        },
-      }),
+      colorPicker,
       basicSetup,
       css(),
+      EditorView.theme({
+        [`.${wrapperClassName}`]: {
+          outlineColor: '#000',
+        },
+      }),
     ],
   }),
   parent: document.querySelector('#editor'),

src/index.ts

@@ -6,25 +6,11 @@ import {
   DecorationSet,
   Decoration,
 } from '@codemirror/view';
-import type { StyleSpec } from 'style-mod';
 import { Extension } from '@codemirror/state';
 import { syntaxTree } from '@codemirror/language';
 import { Range } from '@codemirror/rangeset';
 import { namedColors } from './named-colors';
 
-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;
-  };
-}
-
 interface PickerState {
   from: number;
   to: number;
@@ -343,7 +329,6 @@ export const wrapperClassName = 'cm-css-color-picker-wrapper';
 class ColorPickerWidget extends WidgetType {
   private readonly state: PickerState;
   private readonly color: string;
-  private readonly options: CSSColorPickerOptions;
 
   constructor({
     color,
@@ -472,11 +457,4 @@ const colorPickerViewPlugin = ViewPlugin.fromClass(
   },
 );
 
-export const colorPicker = (options: CSSColorPickerOptions = {}): Extension => [
-  colorPickerViewPlugin,
-  colorPickerTheme,
-  EditorView.theme({
-    [`.${wrapperClassName}`]: options.style?.wrapper,
-    [`.${wrapperClassName} input[type="color"]`]: options.style?.input,
-  }),
-];
+export const colorPicker: Extension = [colorPickerViewPlugin, colorPickerTheme];