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

package/README.md

@@ -7,18 +7,16 @@ A CodeMirror extension that adds a color picker input next to CSS color values.
 ## Usage
 
 ```ts
-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'),
+	parent: document.body,
 	state: EditorState.create({
 		doc: '.wow {\n\tcolor: #fff;\n}',
 		extensions: [
-			basicSetup,
 			css(),
 			colorPicker,
 		],

package/dist/color.d.ts

@@ -1,5 +1,21 @@
 import 'color-space/hsl.js';
-import type { WidgetOptions, RGB } from './css';
+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

@@ -1,42 +1,6 @@
-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'>;
+import type { DiscoverColors } from './types';
 /**
  * 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,7 +1,6 @@
 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';
+import type { DiscoverColors, WidgetOptions, RGB } from './types';
 export { namedColors };
 export type { DiscoverColors, WidgetOptions };
 export declare const wrapperClassName = "cm-css-color-picker-wrapper";

package/dist/index.js

@@ -1,9 +1,52 @@
 import { EditorView, WidgetType, ViewPlugin, Decoration } from "@codemirror/view";
 import { syntaxTree } from "@codemirror/language";
-import namedColors2 from "color-name";
+import namedColors from "color-name";
 import { intToHex } from "@bhsd/common";
 
 import { NodeProp } from "@lezer/common";
+var discoverColorsInCSS = (tree, { from, to, name: typeName }, doc) => {
+  switch (typeName) {
+    case "UnquotedAttributeValue":
+    case "AttributeValue": {
+      const overlayTree = tree.resolveInner(from, 0).tree?.prop(NodeProp.mounted)?.tree;
+      if (overlayTree?.type.name !== "Styles") {
+        return false;
+      }
+      const ret = [], offset = from + (typeName === "AttributeValue" ? 1 : 0);
+      overlayTree.iterate({
+        from: 0,
+        to: overlayTree.length,
+        enter({ name, from: overlayFrom, to: overlayTo }) {
+          const widgetOptions = discoverColorsInCSS(
+            tree,
+            {
+              from: offset + overlayFrom,
+              to: offset + overlayTo,
+              name
+            },
+            doc
+          );
+          if (widgetOptions) {
+            if (Array.isArray(widgetOptions)) {
+              throw new Error("Unexpected nested overlays");
+            }
+            ret.push(widgetOptions);
+          }
+        }
+      });
+      return ret;
+    }
+    case "CallExpression":
+    case "ColorLiteral":
+    case "ValueName":
+      return { from, to };
+    default:
+      return void 0;
+  }
+};
+
+import rgb2 from "color-space/rgb.js";
+import "color-space/hsl.js";
 
 var names = {};
 var color_parse_default = parse;
@@ -16,7 +59,6 @@ var baseHues = {
   purple: 300
 };
 function parse(cstr) {
-  var _a, _b;
   var m, parts = [], alpha = 1, space;
   if (typeof cstr === "number") {
     return { space: "rgb", values: [cstr >>> 16, (cstr & 65280) >>> 8, cstr & 255], alpha: 1 };
@@ -93,7 +135,7 @@ function parse(cstr) {
     parts = cstr.match(/([0-9]+)/g).map(function(value) {
       return parseFloat(value);
     });
-    space = ((_b = (_a = cstr.match(/([a-z])/ig)) == null ? void 0 : _a.join("")) == null ? void 0 : _b.toLowerCase()) || "rgb";
+    space = cstr.match(/([a-z])/ig)?.join("")?.toLowerCase() || "rgb";
   }
   return {
     space,
@@ -123,59 +165,10 @@ function rgba(color) {
   return values;
 }
 
-import namedColors from "color-name";
-var rgbCallExpRegex = /^rgba?\(\s*\d+%?(?:\s|\s*,)\s*\d+%?(?:\s|\s*,)\s*\d+%?\s*(?:[,/]\s*0?\.?\d+%?\s*)?\)$/iu;
-var hslCallExpRegex = /^hsla?\(\s*\d+(?:deg|g?rad|turn)?(?:\s|\s*,)\s*\d+%?(?:\s|\s*,)\s*\d+%?\s*(?:[,/]\s*0?\.?\d+%?\s*)?\)$/iu;
+import { numToHex } from "@bhsd/common";
+var rgbCallExpRegex = /^rgba?\(\s*(?:\d*\.)?\d+%?(?:\s|\s*,)\s*(?:\d*\.)?\d+%?(?:\s|\s*,)\s*(?:\d*\.)?\d+%?\s*(?:[,/]\s*(?:\d*\.)?\d+%?\s*)?\)$/iu;
+var hslCallExpRegex = /^hsla?\(\s*(?:\d*\.)?\d+(?:deg|g?rad|turn)?(?:\s|\s*,)\s*(?:\d*\.)?\d+%?(?:\s|\s*,)\s*(?:\d*\.)?\d+%?\s*(?:[,/]\s*(?:\d*\.)?\d+%?\s*)?\)$/iu;
 var hexRegex = /^#(?:[\da-f]{3,4}|(?:[\da-f]{2}){3,4})$/iu;
-var discoverColorsInCSS = (tree, { from, to, name: typeName }, doc) => {
-  var _a, _b;
-  let parse2;
-  switch (typeName) {
-    case "UnquotedAttributeValue":
-    case "AttributeValue": {
-      const overlayTree = (_b = (_a = tree.resolveInner(from, 0).tree) == null ? void 0 : _a.prop(NodeProp.mounted)) == null ? void 0 : _b.tree;
-      if ((overlayTree == null ? void 0 : overlayTree.type.name) !== "Styles") {
-        return false;
-      }
-      const ret = [], offset = from + (typeName === "AttributeValue" ? 1 : 0);
-      overlayTree.iterate({
-        from: 0,
-        to: overlayTree.length,
-        enter({ name, from: overlayFrom, to: overlayTo }) {
-          const widgetOptions = discoverColorsInCSS(
-            tree,
-            {
-              from: offset + overlayFrom,
-              to: offset + overlayTo,
-              name
-            },
-            doc
-          );
-          if (widgetOptions) {
-            if (Array.isArray(widgetOptions)) {
-              throw new Error("Unexpected nested overlays");
-            }
-            ret.push(widgetOptions);
-          }
-        }
-      });
-      return ret;
-    }
-    case "CallExpression":
-      parse2 = parseCallExpression;
-      break;
-    case "ColorLiteral":
-      parse2 = parseColorLiteral;
-      break;
-    case "ValueName":
-      parse2 = parseNamedColor;
-      break;
-    default:
-      return void 0;
-  }
-  const result = parse2(doc.sliceString(from, to));
-  return result && Object.assign({ from, to }, result);
-};
 var parseCallExpression = (callExp) => {
   const fn = callExp.split("(", 1)[0].toLowerCase();
   switch (fn) {
@@ -216,12 +209,12 @@ var parseColorLiteral = (colorLiteral) => {
     spaced: false
   };
 };
-var parseNamedColor = (colorName) => {
+var parseNamedColor = (colorName, colors) => {
   const lcName = colorName.toLowerCase();
-  if (!Object.prototype.hasOwnProperty.call(namedColors, lcName)) {
+  if (!colors || !Object.hasOwn(colors, lcName)) {
     return false;
   }
-  const color = namedColors[lcName];
+  const color = colors[lcName];
   return {
     colorType: "named",
     color,
@@ -230,14 +223,9 @@ var parseNamedColor = (colorName) => {
     spaced: false
   };
 };
-
-import rgb2 from "color-space/rgb.js";
-import "color-space/hsl.js";
-import { numToHex } from "@bhsd/common";
 var getDelimiter = (legacy, spaced) => legacy ? `,${spaced ? " " : ""}` : " ";
 var alphaToString = (alpha, legacy, spaced) => alpha === 1 ? "" : (legacy ? `,${spaced ? " " : ""}` : " / ") + String(alpha === 0 ? alpha : Number(alpha.toFixed(2)));
 var colorToString = ({ color, alpha, colorType, legacy, spaced }, value, colors) => {
-  var _a;
   const currentColor = rgba(value).slice(0, 3);
   if (currentColor.every((c, i) => c === Math.round(color[i]))) {
     return false;
@@ -254,14 +242,16 @@ var colorToString = ({ color, alpha, colorType, legacy, spaced }, value, colors)
     }
     case "named":
       if (colors && alpha === 1) {
-        const colorName = (_a = Object.entries(colors).find(([, colorValues]) => colorValues.every((c, i) => c === currentColor[i]))) == null ? void 0 : _a[0];
+        const colorName = Object.entries(colors).find(([, colorValues]) => colorValues.every((c, i) => c === currentColor[i]))?.[0];
         if (colorName) {
           return colorName;
         }
       }
     // fall through
-    default:
+    case "hex":
       return value + (alpha === 1 ? "" : numToHex(alpha));
+    default:
+      throw new Error("Unknown color type");
   }
 };
 
@@ -283,7 +273,7 @@ var ColorPickerWidget = class extends WidgetType {
     const picker = document.createElement("input");
     picker.type = "color";
     picker.value = `#${this.state.color.map((c) => intToHex(c)).join("")}`;
-    if (this.readonly) {
+    if (this.readonly || this.state.colorType === "unknown") {
       picker.disabled = true;
     }
     pickerState.set(picker, this.state);
@@ -297,7 +287,7 @@ var ColorPickerWidget = class extends WidgetType {
     return e.type !== "change";
   }
 };
-var colorPickersDecorations = (view, discoverColors) => {
+var colorPickersDecorations = (view, discoverColors, colors) => {
   const widgets = [], { state, visibleRanges } = view, tree = syntaxTree(state);
   for (const { from, to } of visibleRanges) {
     tree.iterate({
@@ -309,6 +299,21 @@ var colorPickersDecorations = (view, discoverColors) => {
           return widgetOptions;
         }
         for (const wo of Array.isArray(widgetOptions) ? widgetOptions : [widgetOptions]) {
+          if (wo.colorType !== "unknown") {
+            const value = state.sliceDoc(wo.from, wo.to);
+            let data;
+            if (value.includes("(")) {
+              data = parseCallExpression(value);
+            } else if (value.startsWith("#")) {
+              data = parseColorLiteral(value);
+            } else {
+              data = parseNamedColor(value, colors);
+            }
+            if (!data) {
+              continue;
+            }
+            Object.assign(wo, data);
+          }
           widgets.push(
             Decoration.widget({
               widget: new ColorPickerWidget(wo, state.readOnly),
@@ -329,13 +334,15 @@ var colorPickerTheme = EditorView.baseTheme({
     marginRight: "0.6ch",
     height: "1em",
     width: "1em",
-    transform: "translateY(1px)",
-    '& input[type="color"]': {
+    transform: "translateY(0.1em)",
+    '&>input[type="color"]': {
       height: "100%",
       width: "100%",
       padding: 0,
+      appearance: "none",
       border: "none",
-      outline: "1px solid #eee",
+      borderRadius: 0,
+      outline: "1px solid #ddd",
       "&:enabled": {
         cursor: "pointer"
       },
@@ -343,10 +350,12 @@ var colorPickerTheme = EditorView.baseTheme({
         padding: 0
       },
       "&::-webkit-color-swatch": {
-        border: "none"
+        border: "none",
+        borderRadius: 0
       },
       "&::-moz-color-swatch": {
-        border: "none"
+        border: "none",
+        borderRadius: 0
       }
     }
   }
@@ -357,14 +366,14 @@ var makeColorPicker = (discoverColors, colors) => [
       /** @class */
       constructor(view) {
         this.readOnly = view.state.readOnly;
-        this.decorations = colorPickersDecorations(view, discoverColors);
+        this.decorations = colorPickersDecorations(view, discoverColors, colors);
       }
       /** @implements */
       update({ docChanged, viewportChanged, view }) {
         const { readOnly } = view.state;
         if (docChanged || viewportChanged || readOnly !== this.readOnly) {
           this.readOnly = readOnly;
-          this.decorations = colorPickersDecorations(view, discoverColors);
+          this.decorations = colorPickersDecorations(view, discoverColors, colors);
         }
       }
     },
@@ -374,9 +383,8 @@ var makeColorPicker = (discoverColors, colors) => [
       },
       eventHandlers: {
         change(e, view) {
-          var _a;
           const target = e.target;
-          if (target.nodeName !== "INPUT" || target.type !== "color" || !((_a = target.parentElement) == null ? void 0 : _a.classList.contains(wrapperClassName))) {
+          if (target.nodeName !== "INPUT" || target.type !== "color" || !target.parentElement?.classList.contains(wrapperClassName)) {
             return false;
           }
           const state = pickerState.get(target), insert = colorToString(state, target.value, colors);
@@ -393,13 +401,10 @@ var makeColorPicker = (discoverColors, colors) => [
   ),
   colorPickerTheme
 ];
-var colorPicker = /* @__PURE__ */ makeColorPicker(discoverColorsInCSS, namedColors2);
+var colorPicker = /* @__PURE__ */ makeColorPicker(discoverColorsInCSS, namedColors);
 export {
   colorPicker,
   makeColorPicker,
-  namedColors2 as namedColors,
-  parseCallExpression,
-  parseColorLiteral,
-  parseNamedColor,
+  namedColors,
   wrapperClassName
 };

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+import type { Text } from '@codemirror/state';
+import type { Tree, SyntaxNodeRef } from '@lezer/common';
+export type RGB = [number, number, number];
+export interface ColorData {
+    /** RGB component values, each in the range 0-255 */
+    color: RGB;
+    alpha: number;
+    colorType: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'named' | 'unknown';
+    legacy: boolean;
+    spaced: boolean;
+}
+export interface WidgetOptions extends ColorData {
+    from: number;
+    to: number;
+}
+export type ColorDiscovery = Pick<WidgetOptions, 'from' | 'to'> | WidgetOptions & {
+    colorType: 'unknown';
+};
+/**
+ * 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) => ColorDiscovery | ColorDiscovery[] | false | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bhsd/codemirror-css-color-picker",
-	"version": "7.0.0",
+	"version": "7.1.0",
 	"description": "Enables a color picker input next to CSS colors",
 	"homepage": "https://github.com/bhsd-harry/Codemirror-CSS-color-picker#readme",
 	"bugs": {
@@ -29,7 +29,7 @@
 		"lint:ts": "tsc --noEmit && eslint --cache .",
 		"lint:md": "markdownlint-cli2 '**/*.md'",
 		"lint": "npm run lint:ts && npm run lint:md",
-		"build": "tsc && node build.js && gsed '/^\\/\\/ /d' build/index.js > dist/index.js",
+		"build": "tsc && node build.js && gsed '/^\\/\\/ /d' build/index.js > dist/index.js && eslint --no-config-lookup -c eslint.dist.mjs dist/index.js",
 		"build:test": "tsc --project test/tsconfig.json && npm test",
 		"test": "mocha"
 	},
@@ -38,7 +38,7 @@
 		"@codemirror/language": "^6.12.3",
 		"@codemirror/state": "^6.6.0",
 		"@codemirror/view": "^6.41.0",
-		"color-name": "^2.1.0",
+		"color-name": "~2.0.2",
 		"color-space": "^2.3.2"
 	},
 	"devDependencies": {