@bhsd/codemirror-css-color-picker 6.3.2 → 7.0.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,28 @@
 
 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 {basicSetup} from 'codemirror';
+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.querySelector('#editor'),
+	state: EditorState.create({
+		doc: '.wow {\n\tcolor: #fff;\n}',
+		extensions: [
+			basicSetup,
+			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,5 @@
+import 'color-space/hsl.js';
+import type { WidgetOptions, RGB } from './css';
+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,42 @@
+import type { Text } from '@codemirror/state';
+import type { Tree, SyntaxNodeRef } from '@lezer/common';
+export type RGB = [number, number, number];
+export interface WidgetOptions {
+    from: number;
+    to: number;
+    /** RGB component values, each in the range 0-255 */
+    color: RGB;
+    alpha: number;
+    colorType: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'named';
+    legacy: boolean;
+    spaced: boolean;
+}
+/**
+ * Discovers colors in the syntax node, returning the options for the color picker widgets if colors are found,
+ * or `false` if the children of the syntax node can be skipped.
+ * @param tree Lezer syntax tree
+ * @param node the syntax node to check for colors
+ * @param doc the editor document
+ */
+export type DiscoverColors = (tree: Tree, node: SyntaxNodeRef, doc: Text) => WidgetOptions | WidgetOptions[] | false | undefined;
+export type ColorData = Omit<WidgetOptions, 'from' | 'to'>;
+/**
+ * Discovers colors in CSS code
+ * @implements
+ */
+export declare const discoverColorsInCSS: DiscoverColors;
+/**
+ * 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
+ */
+export declare const parseNamedColor: (colorName: string) => ColorData | false;

package/dist/index.d.ts

@@ -1,39 +1,15 @@
-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 './css';
+export { parseCallExpression, parseColorLiteral, parseNamedColor } from './css.js';
+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;