@bhsd/codemirror-css-color-picker 6.3.2 → 7.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -4,35 +4,26 @@
 
 A CodeMirror extension that adds a color picker input next to CSS color values. This is a fork of [@replit/codemirror-css-color-picker](https://www.npmjs.com/package/@replit/codemirror-css-color-picker).
 
-![preview](https://replit.com/cdn-cgi/image/width=3840,quality=80/https://storage.googleapis.com/replit/images/1632627522442_46320608eaa3f0c58bebd5fe4a10efc2.gif)
-
-### Usage
+## Usage
 
 ```ts
-import { basicSetup } from 'codemirror';
-import { EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { css } from '@codemirror/lang-css';
-import { colorPicker, wrapperClassName } from '@bhsd/codemirror-css-color-picker';
+import {EditorState} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {css} from '@codemirror/lang-css';
+import {colorPicker} from '@bhsd/codemirror-css-color-picker';
 
 new EditorView({
-  parent: document.querySelector('#editor'),
-  state: EditorState.create({
-    doc: '.wow {\n  color: #fff;\n}',
-    extensions: [
-      basicSetup,
-      css(),
-      colorPicker,
-      EditorView.theme({
-        [`.${wrapperClassName}`]: {
-          outlineColor: 'transparent',
-        },
-      }),
-    ],
-  }),
+	parent: document.body,
+	state: EditorState.create({
+		doc: '.wow {\n\tcolor: #fff;\n}',
+		extensions: [
+			css(),
+			colorPicker,
+		],
+	}),
 });
 ```
 
-### Todos
+## 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.
+- Investigate solutions for alpha values. `input[type="color"]` does not support alpha values. We could show another number input next to it for the alpha value.

package/dist/color.d.ts

@@ -0,0 +1,21 @@
+import 'color-space/hsl.js';
+import type { WidgetOptions, RGB, ColorData } from './types';
+/**
+ * Parses a CSS color function call expression (including `rgb()`, `rgba()`, `hsl()`, `hsla()`)
+ * @param callExp the full text of the call expression, including function name and parentheses
+ */
+export declare const parseCallExpression: (callExp: string) => ColorData | false | undefined;
+/**
+ * Parses a hex color literal (e.g. `#ff0000`, `#f00`, `#ff000080`, `#f008`)
+ * @param colorLiteral the hex color literal text
+ */
+export declare const parseColorLiteral: (colorLiteral: string) => ColorData | false;
+/**
+ * Parses a named color (e.g. `red`, `blue`, `rebeccapurple`)
+ * @param colorName the named color text
+ * @param colors an object mapping color names to RGB values
+ */
+export declare const parseNamedColor: (colorName: string, colors?: Record<string, RGB>) => ColorData | false;
+export declare const getDelimiter: (legacy: boolean, spaced: boolean) => string;
+export declare const alphaToString: (alpha: number, legacy: boolean, spaced: boolean) => string;
+export declare const colorToString: ({ color, alpha, colorType, legacy, spaced }: WidgetOptions, value: string, colors?: Record<string, RGB>) => string | false;

package/dist/css.d.ts

@@ -0,0 +1,6 @@
+import type { DiscoverColors } from './types';
+/**
+ * Discovers colors in CSS code
+ * @implements
+ */
+export declare const discoverColorsInCSS: DiscoverColors;

package/dist/index.d.ts

@@ -1,39 +1,14 @@
-import { ViewPlugin, DecorationSet, ViewUpdate } from '@codemirror/view';
-import { Text, Extension } from '@codemirror/state';
-import { Tree } from '@lezer/common';
-
-declare const namedColors: Map<string, string>;
-
-interface PickerState {
-    from: number;
-    to: number;
-    alpha: string;
-    colorType: ColorType;
-}
-interface WidgetOptions extends PickerState {
-    color: string;
-}
-type ColorData = Omit<WidgetOptions, 'from' | 'to'>;
-declare enum ColorType {
-    rgb = "RGB",
-    hex = "HEX",
-    named = "NAMED",
-    hsl = "HSL"
-}
-declare function discoverColorsInCSS(syntaxTree: Tree, from: number, to: number, typeName: string, doc: Text, language?: string): WidgetOptions | Array<WidgetOptions> | null;
-declare function parseCallExpression(callExp: string): ColorData | null;
-declare function parseColorLiteral(colorLiteral: string): ColorData | null;
-declare function parseNamedColor(colorName: string): ColorData | null;
-declare const wrapperClassName = "cm-css-color-picker-wrapper";
-declare const colorPickerTheme: Extension;
-interface IFactoryOptions {
-    discoverColors: typeof discoverColorsInCSS;
-    namedColors?: Map<string, string>;
-}
-declare const makeColorPicker: (options: IFactoryOptions) => ViewPlugin<{
-    decorations: DecorationSet;
-    update(update: ViewUpdate): void;
-}, undefined>;
-declare const colorPicker: Extension;
-
-export { ColorData, ColorType, WidgetOptions, colorPicker, colorPickerTheme, discoverColorsInCSS, makeColorPicker, namedColors, parseCallExpression, parseColorLiteral, parseNamedColor, wrapperClassName };
+import namedColors from 'color-name';
+import type { Extension } from '@codemirror/state';
+import type { DiscoverColors, WidgetOptions, RGB } from './types';
+export { namedColors };
+export type { DiscoverColors, WidgetOptions };
+export declare const wrapperClassName = "cm-css-color-picker-wrapper";
+/**
+ * Factory function to create a color picker plugin with the given options
+ * @param discoverColors the function to discover colors in a syntax node; return `false` to skip children
+ * @param colors an optional object of color names mapping to RGB values
+ */
+export declare const makeColorPicker: (discoverColors: DiscoverColors, colors?: Record<string, RGB>) => Extension;
+/** Default color picker plugin for CSS and HTML */
+export declare const colorPicker: Extension;