@uiw/codemirror-extensions-color 4.12.4 → 4.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.js +18 -71
- package/cjs/index.js.map +1 -1
- package/cjs/utils.js +5 -19
- package/cjs/utils.js.map +1 -1
- package/esm/index.js +4 -34
- package/esm/index.js.map +1 -1
- package/esm/utils.js +5 -15
- package/esm/utils.js.map +1 -1
- package/package.json +1 -1
package/cjs/index.js
CHANGED
|
@@ -1,63 +1,40 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
-
|
|
5
4
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.colorView = exports.colorTheme = exports.color = exports.ColorType = void 0;
|
|
11
|
-
|
|
12
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
-
|
|
14
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
15
|
-
|
|
16
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
17
|
-
|
|
18
12
|
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
19
|
-
|
|
20
13
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
21
|
-
|
|
22
14
|
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
23
|
-
|
|
24
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
25
|
-
|
|
26
16
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
27
|
-
|
|
28
17
|
var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
|
|
29
|
-
|
|
30
18
|
var _view = require("@codemirror/view");
|
|
31
|
-
|
|
32
19
|
var _language = require("@codemirror/language");
|
|
33
|
-
|
|
34
20
|
var _colorsNamed = _interopRequireDefault(require("colors-named"));
|
|
35
|
-
|
|
36
21
|
var _colorsNamedHex = _interopRequireDefault(require("colors-named-hex"));
|
|
37
|
-
|
|
38
22
|
var _hslMatcher = _interopRequireWildcard(require("hsl-matcher"));
|
|
39
|
-
|
|
40
23
|
var _utils = require("./utils");
|
|
41
|
-
|
|
42
24
|
var _excluded = ["color", "colorRaw"];
|
|
43
25
|
var ColorType;
|
|
44
26
|
exports.ColorType = ColorType;
|
|
45
|
-
|
|
46
27
|
(function (ColorType) {
|
|
47
28
|
ColorType["rgb"] = "RGB";
|
|
48
29
|
ColorType["hex"] = "HEX";
|
|
49
30
|
ColorType["named"] = "NAMED";
|
|
50
31
|
ColorType["hsl"] = "HSL";
|
|
51
32
|
})(ColorType || (exports.ColorType = ColorType = {}));
|
|
52
|
-
|
|
53
33
|
var colorState = new WeakMap();
|
|
54
|
-
|
|
55
34
|
function colorDecorations(view) {
|
|
56
35
|
var widgets = [];
|
|
57
|
-
|
|
58
36
|
var _iterator = (0, _createForOfIteratorHelper2["default"])(view.visibleRanges),
|
|
59
|
-
|
|
60
|
-
|
|
37
|
+
_step;
|
|
61
38
|
try {
|
|
62
39
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
63
40
|
var range = _step.value;
|
|
@@ -66,8 +43,8 @@ function colorDecorations(view) {
|
|
|
66
43
|
to: range.to,
|
|
67
44
|
enter: function enter(_ref) {
|
|
68
45
|
var type = _ref.type,
|
|
69
|
-
|
|
70
|
-
|
|
46
|
+
from = _ref.from,
|
|
47
|
+
to = _ref.to;
|
|
71
48
|
var callExp = view.state.doc.sliceString(from, to);
|
|
72
49
|
/**
|
|
73
50
|
* ```
|
|
@@ -87,20 +64,16 @@ function colorDecorations(view) {
|
|
|
87
64
|
* rgba( 255 255 255 / ); ❌ ❌ ❌
|
|
88
65
|
* ```
|
|
89
66
|
*/
|
|
90
|
-
|
|
91
67
|
if (type.name === 'CallExpression' && callExp.startsWith('rgb')) {
|
|
92
68
|
var match = /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,?\s*(\d{1,3})\s*(,\s*\d*\.\d*\s*)?\)/i.exec(callExp) || /rgba?\(\s*(\d{1,3})\s*(\d{1,3})\s*(\d{1,3})\s*(\/?\s*\d+%)?(\/\s*\d+\.\d\s*)?\)/i.exec(callExp);
|
|
93
69
|
if (!match) return;
|
|
94
|
-
|
|
95
70
|
var _match = (0, _slicedToArray2["default"])(match, 5),
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
71
|
+
_ = _match[0],
|
|
72
|
+
r = _match[1],
|
|
73
|
+
g = _match[2],
|
|
74
|
+
b = _match[3],
|
|
75
|
+
a = _match[4];
|
|
102
76
|
var hex = (0, _utils.rgbToHex)(Number(r), Number(g), Number(b));
|
|
103
|
-
|
|
104
77
|
var widget = _view.Decoration.widget({
|
|
105
78
|
widget: new ColorWidget({
|
|
106
79
|
colorType: ColorType.rgb,
|
|
@@ -112,7 +85,6 @@ function colorDecorations(view) {
|
|
|
112
85
|
}),
|
|
113
86
|
side: 0
|
|
114
87
|
});
|
|
115
|
-
|
|
116
88
|
widgets.push(widget.range(from));
|
|
117
89
|
} else if (type.name === 'CallExpression' && (0, _hslMatcher["default"])(callExp)) {
|
|
118
90
|
/**
|
|
@@ -141,14 +113,11 @@ function colorDecorations(view) {
|
|
|
141
113
|
* HSL(240Deg, 100%, 50%) // ✅ case insensitive
|
|
142
114
|
*/
|
|
143
115
|
var _match2 = (0, _hslMatcher.hlsStringToRGB)(callExp);
|
|
144
|
-
|
|
145
116
|
if (!_match2) return;
|
|
146
117
|
var _r = _match2.r,
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
118
|
+
_g = _match2.g,
|
|
119
|
+
_b = _match2.b;
|
|
150
120
|
var _hex = (0, _utils.rgbToHex)(Number(_r), Number(_g), Number(_b));
|
|
151
|
-
|
|
152
121
|
var _widget = _view.Decoration.widget({
|
|
153
122
|
widget: new ColorWidget({
|
|
154
123
|
colorType: ColorType.hsl,
|
|
@@ -160,14 +129,12 @@ function colorDecorations(view) {
|
|
|
160
129
|
}),
|
|
161
130
|
side: 0
|
|
162
131
|
});
|
|
163
|
-
|
|
164
132
|
widgets.push(_widget.range(from));
|
|
165
133
|
} else if (type.name === 'ColorLiteral') {
|
|
166
134
|
var _toFullHex = (0, _utils.toFullHex)(callExp),
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
135
|
+
_toFullHex2 = (0, _slicedToArray2["default"])(_toFullHex, 2),
|
|
136
|
+
_color = _toFullHex2[0],
|
|
137
|
+
alpha = _toFullHex2[1];
|
|
171
138
|
var _widget2 = _view.Decoration.widget({
|
|
172
139
|
widget: new ColorWidget({
|
|
173
140
|
colorType: ColorType.hex,
|
|
@@ -179,11 +146,9 @@ function colorDecorations(view) {
|
|
|
179
146
|
}),
|
|
180
147
|
side: 0
|
|
181
148
|
});
|
|
182
|
-
|
|
183
149
|
widgets.push(_widget2.range(from));
|
|
184
150
|
} else if (type.name === 'ValueName') {
|
|
185
151
|
var name = callExp;
|
|
186
|
-
|
|
187
152
|
if (_colorsNamed["default"].includes(name)) {
|
|
188
153
|
var _widget3 = _view.Decoration.widget({
|
|
189
154
|
widget: new ColorWidget({
|
|
@@ -196,7 +161,6 @@ function colorDecorations(view) {
|
|
|
196
161
|
}),
|
|
197
162
|
side: 0
|
|
198
163
|
});
|
|
199
|
-
|
|
200
164
|
widgets.push(_widget3.range(from));
|
|
201
165
|
}
|
|
202
166
|
}
|
|
@@ -208,21 +172,16 @@ function colorDecorations(view) {
|
|
|
208
172
|
} finally {
|
|
209
173
|
_iterator.f();
|
|
210
174
|
}
|
|
211
|
-
|
|
212
175
|
return _view.Decoration.set(widgets);
|
|
213
176
|
}
|
|
214
|
-
|
|
215
177
|
var ColorWidget = /*#__PURE__*/function (_WidgetType) {
|
|
216
178
|
(0, _inherits2["default"])(ColorWidget, _WidgetType);
|
|
217
|
-
|
|
218
179
|
var _super = (0, _createSuper2["default"])(ColorWidget);
|
|
219
|
-
|
|
220
180
|
function ColorWidget(_ref2) {
|
|
221
181
|
var _this;
|
|
222
|
-
|
|
223
182
|
var color = _ref2.color,
|
|
224
|
-
|
|
225
|
-
|
|
183
|
+
colorRaw = _ref2.colorRaw,
|
|
184
|
+
state = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
|
|
226
185
|
(0, _classCallCheck2["default"])(this, ColorWidget);
|
|
227
186
|
_this = _super.call(this);
|
|
228
187
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", void 0);
|
|
@@ -233,7 +192,6 @@ var ColorWidget = /*#__PURE__*/function (_WidgetType) {
|
|
|
233
192
|
_this.colorRaw = colorRaw;
|
|
234
193
|
return _this;
|
|
235
194
|
}
|
|
236
|
-
|
|
237
195
|
(0, _createClass2["default"])(ColorWidget, [{
|
|
238
196
|
key: "eq",
|
|
239
197
|
value: function eq(other) {
|
|
@@ -262,7 +220,6 @@ var ColorWidget = /*#__PURE__*/function (_WidgetType) {
|
|
|
262
220
|
}]);
|
|
263
221
|
return ColorWidget;
|
|
264
222
|
}(_view.WidgetType);
|
|
265
|
-
|
|
266
223
|
var colorView = function colorView() {
|
|
267
224
|
var showPicker = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
268
225
|
return _view.ViewPlugin.fromClass( /*#__PURE__*/function () {
|
|
@@ -271,14 +228,12 @@ var colorView = function colorView() {
|
|
|
271
228
|
(0, _defineProperty2["default"])(this, "decorations", void 0);
|
|
272
229
|
this.decorations = colorDecorations(view);
|
|
273
230
|
}
|
|
274
|
-
|
|
275
231
|
(0, _createClass2["default"])(ColorView, [{
|
|
276
232
|
key: "update",
|
|
277
233
|
value: function update(_update) {
|
|
278
234
|
if (_update.docChanged || _update.viewportChanged) {
|
|
279
235
|
this.decorations = colorDecorations(_update.view);
|
|
280
236
|
}
|
|
281
|
-
|
|
282
237
|
var readOnly = _update.view.contentDOM.ariaReadOnly === 'true';
|
|
283
238
|
var editable = _update.view.contentDOM.contentEditable === 'true';
|
|
284
239
|
var canBeEdited = readOnly === false && editable;
|
|
@@ -313,10 +268,8 @@ var colorView = function colorView() {
|
|
|
313
268
|
var slash = (target.dataset.colorraw || '').indexOf('/') > 4;
|
|
314
269
|
var comma = (target.dataset.colorraw || '').indexOf(',') > 4;
|
|
315
270
|
var converted = target.value;
|
|
316
|
-
|
|
317
271
|
if (data.colorType === ColorType.rgb) {
|
|
318
272
|
var funName = colorraw !== null && colorraw !== void 0 && colorraw.match(/^(rgba?)/) ? colorraw === null || colorraw === void 0 ? void 0 : colorraw.match(/^(rgba?)/)[0] : undefined;
|
|
319
|
-
|
|
320
273
|
if (comma) {
|
|
321
274
|
converted = rgb ? "".concat(funName, "(").concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b).concat(data.alpha ? ', ' + data.alpha.trim() : '', ")") : value;
|
|
322
275
|
} else if (slash) {
|
|
@@ -326,17 +279,14 @@ var colorView = function colorView() {
|
|
|
326
279
|
}
|
|
327
280
|
} else if (data.colorType === ColorType.hsl) {
|
|
328
281
|
var _rgb = (0, _utils.hexToRgb)(value);
|
|
329
|
-
|
|
330
282
|
if (_rgb) {
|
|
331
283
|
var _RGBToHSL = (0, _utils.RGBToHSL)(_rgb === null || _rgb === void 0 ? void 0 : _rgb.r, _rgb === null || _rgb === void 0 ? void 0 : _rgb.g, _rgb === null || _rgb === void 0 ? void 0 : _rgb.b),
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
284
|
+
h = _RGBToHSL.h,
|
|
285
|
+
s = _RGBToHSL.s,
|
|
286
|
+
l = _RGBToHSL.l;
|
|
336
287
|
converted = "hsl(".concat(h, "deg ").concat(s, "% ").concat(l, "%").concat(data.alpha ? ' / ' + data.alpha : '', ")");
|
|
337
288
|
}
|
|
338
289
|
}
|
|
339
|
-
|
|
340
290
|
view.dispatch({
|
|
341
291
|
changes: {
|
|
342
292
|
from: data.from,
|
|
@@ -349,9 +299,7 @@ var colorView = function colorView() {
|
|
|
349
299
|
}
|
|
350
300
|
});
|
|
351
301
|
};
|
|
352
|
-
|
|
353
302
|
exports.colorView = colorView;
|
|
354
|
-
|
|
355
303
|
var colorTheme = _view.EditorView.baseTheme({
|
|
356
304
|
'span[data-color]': {
|
|
357
305
|
width: '12px',
|
|
@@ -377,7 +325,6 @@ var colorTheme = _view.EditorView.baseTheme({
|
|
|
377
325
|
paddingLeft: '24px'
|
|
378
326
|
}
|
|
379
327
|
});
|
|
380
|
-
|
|
381
328
|
exports.colorTheme = colorTheme;
|
|
382
329
|
var color = [colorView(), colorTheme];
|
|
383
330
|
exports.color = color;
|
package/cjs/index.js.map
CHANGED
|
@@ -131,5 +131,5 @@
|
|
|
131
131
|
"sourcesContent": [
|
|
132
132
|
"import { ViewPlugin, EditorView, ViewUpdate, WidgetType, Decoration, DecorationSet } from '@codemirror/view';\nimport { Extension, Range } from '@codemirror/state';\nimport { syntaxTree } from '@codemirror/language';\nimport colors from 'colors-named';\nimport hexs from 'colors-named-hex';\nimport hslMatcher, { hlsStringToRGB, RGBAColor } from 'hsl-matcher';\nimport { toFullHex, rgbToHex, hexToRgb, RGBToHSL } from './utils';\n\nexport enum ColorType {\n rgb = 'RGB',\n hex = 'HEX',\n named = 'NAMED',\n hsl = 'HSL',\n}\n\nexport interface ColorState {\n from: number;\n to: number;\n alpha: string;\n colorType: ColorType;\n}\n\nconst colorState = new WeakMap<HTMLInputElement, ColorState>();\n\ntype GetArrayElementType<T extends readonly any[]> = T extends readonly (infer U)[] ? U : never;\n\nfunction colorDecorations(view: EditorView) {\n const widgets: Array<Range<Decoration>> = [];\n for (const range of view.visibleRanges) {\n syntaxTree(view.state).iterate({\n from: range.from,\n to: range.to,\n enter: ({ type, from, to }) => {\n const callExp: string = view.state.doc.sliceString(from, to);\n /**\n * ```\n * rgb(0 107 128, .5); ❌ ❌ ❌\n * rgb( 0 107 128 ); ✅ ✅ ✅\n * RGB( 0 107 128 ); ✅ ✅ ✅\n * Rgb( 0 107 128 ); ✅ ✅ ✅\n * rgb( 0 107 128 / ); ❌ ❌ ❌\n * rgb( 0 107 128 / 60%); ✅ ✅ ✅\n * rgb(0,107,128 / 60%); ❌ ❌ ❌\n * rgb( 255, 255, 255 ) ✅ ✅ ✅\n * rgba( 255, 255, 255 ) ✅ ✅ ✅\n * rgba( 255, 255 , 255, ) ❌ ❌ ❌\n * rgba( 255, 255 , 255, .5 ) ✅ ✅ ✅\n * rgba( 255 255 255 / 0.5 ); ✅ ✅ ✅\n * rgba( 255 255 255 0.5 ); ❌ ❌ ❌\n * rgba( 255 255 255 / ); ❌ ❌ ❌\n * ```\n */\n if (type.name === 'CallExpression' && callExp.startsWith('rgb')) {\n const match =\n /rgba?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,?\\s*(\\d{1,3})\\s*(,\\s*\\d*\\.\\d*\\s*)?\\)/i.exec(callExp) ||\n /rgba?\\(\\s*(\\d{1,3})\\s*(\\d{1,3})\\s*(\\d{1,3})\\s*(\\/?\\s*\\d+%)?(\\/\\s*\\d+\\.\\d\\s*)?\\)/i.exec(callExp);\n if (!match) return;\n const [_, r, g, b, a] = match;\n const hex = rgbToHex(Number(r), Number(g), Number(b));\n const widget = Decoration.widget({\n widget: new ColorWidget({\n colorType: ColorType.rgb,\n color: hex,\n colorRaw: callExp,\n from,\n to,\n alpha: a ? a.replace(/(\\/|,)/g, '') : '',\n }),\n side: 0,\n });\n widgets.push(widget.range(from));\n } else if (type.name === 'CallExpression' && hslMatcher(callExp)) {\n /**\n * # valid\n * hsl(240, 100%, 50%) // ✅ comma separated\n * hsl(240, 100%, 50%, 0.1) // ✅ comma separated with opacity\n * hsl(240, 100%, 50%, 10%) // ✅ comma separated with % opacity\n * hsl(240,100%,50%,0.1) // ✅ comma separated without spaces\n * hsl(180deg, 100%, 50%, 0.1) // ✅ hue with 'deg'\n * hsl(3.14rad, 100%, 50%, 0.1) // ✅ hue with 'rad'\n * hsl(200grad, 100%, 50%, 0.1) // ✅ hue with 'grad'\n * hsl(0.5turn, 100%, 50%, 0.1) // ✅ hue with 'turn'\n * hsl(-240, -100%, -50%, -0.1) // ✅ negative values\n * hsl(+240, +100%, +50%, +0.1) // ✅ explicit positive sign\n * hsl(240.5, 99.99%, 49.999%, 0.9999) // ✅ non-integer values\n * hsl(.9, .99%, .999%, .9999) // ✅ fraction w/o leading zero\n * hsl(0240, 0100%, 0050%, 01) // ✅ leading zeros\n * hsl(240.0, 100.00%, 50.000%, 1.0000) // ✅ trailing decimal zeros\n * hsl(2400, 1000%, 1000%, 10) // ✅ out of range values\n * hsl(-2400.01deg, -1000.5%, -1000.05%, -100) // ✅ combination of above\n * hsl(2.40e+2, 1.00e+2%, 5.00e+1%, 1E-3) // ✅ scientific notation\n * hsl(240 100% 50%) // ✅ space separated (CSS Color Level 4)\n * hsl(240 100% 50% / 0.1) // ✅ space separated with opacity\n * hsla(240, 100%, 50%) // ✅ hsla() alias\n * hsla(240, 100%, 50%, 0.1) // ✅ hsla() with opacity\n * HSL(240Deg, 100%, 50%) // ✅ case insensitive\n */\n const match = hlsStringToRGB(callExp) as RGBAColor;\n if (!match) return;\n const { r, g, b } = match;\n const hex = rgbToHex(Number(r), Number(g), Number(b));\n const widget = Decoration.widget({\n widget: new ColorWidget({\n colorType: ColorType.hsl,\n color: hex,\n colorRaw: callExp,\n from,\n to,\n alpha: match.a ? match.a.toString() : '',\n }),\n side: 0,\n });\n widgets.push(widget.range(from));\n } else if (type.name === 'ColorLiteral') {\n const [color, alpha] = toFullHex(callExp);\n const widget = Decoration.widget({\n widget: new ColorWidget({\n colorType: ColorType.hex,\n color,\n colorRaw: callExp,\n from,\n to,\n alpha,\n }),\n side: 0,\n });\n widgets.push(widget.range(from));\n } else if (type.name === 'ValueName') {\n const name = callExp as unknown as GetArrayElementType<typeof colors>;\n if (colors.includes(name)) {\n const widget = Decoration.widget({\n widget: new ColorWidget({\n colorType: ColorType.named,\n color: hexs[colors.indexOf(name)],\n colorRaw: callExp,\n from,\n to,\n alpha: '',\n }),\n side: 0,\n });\n widgets.push(widget.range(from));\n }\n }\n },\n });\n }\n return Decoration.set(widgets);\n}\n\nclass ColorWidget extends WidgetType {\n private readonly state: ColorState;\n private readonly color: string;\n private readonly colorRaw: string;\n\n constructor({\n color,\n colorRaw,\n ...state\n }: ColorState & {\n color: string;\n colorRaw: string;\n }) {\n super();\n this.state = state;\n this.color = color;\n this.colorRaw = colorRaw;\n }\n eq(other: ColorWidget) {\n return (\n other.state.colorType === this.state.colorType &&\n other.color === this.color &&\n other.state.from === this.state.from &&\n other.state.to === this.state.to &&\n other.state.alpha === this.state.alpha\n );\n }\n toDOM() {\n const picker = document.createElement('input');\n colorState.set(picker, this.state);\n picker.type = 'color';\n picker.value = this.color;\n picker.dataset['color'] = this.color;\n picker.dataset['colorraw'] = this.colorRaw;\n const wrapper = document.createElement('span');\n wrapper.appendChild(picker);\n wrapper.dataset['color'] = this.color;\n wrapper.style.backgroundColor = this.colorRaw;\n return wrapper;\n }\n ignoreEvent() {\n return false;\n }\n}\n\nexport const colorView = (showPicker: boolean = true) =>\n ViewPlugin.fromClass(\n class ColorView {\n decorations: DecorationSet;\n constructor(view: EditorView) {\n this.decorations = colorDecorations(view);\n }\n update(update: ViewUpdate) {\n if (update.docChanged || update.viewportChanged) {\n this.decorations = colorDecorations(update.view);\n }\n const readOnly = update.view.contentDOM.ariaReadOnly === 'true';\n const editable = update.view.contentDOM.contentEditable === 'true';\n\n const canBeEdited = readOnly === false && editable;\n this.changePicker(update.view, canBeEdited);\n }\n changePicker(view: EditorView, canBeEdited: boolean) {\n const doms = view.contentDOM.querySelectorAll('input[type=color]');\n doms.forEach((inp) => {\n if (!showPicker) {\n inp.setAttribute('disabled', '');\n } else {\n canBeEdited ? inp.removeAttribute('disabled') : inp.setAttribute('disabled', '');\n }\n });\n }\n },\n {\n decorations: (v) => v.decorations,\n eventHandlers: {\n change: (e, view) => {\n const target = e.target as HTMLInputElement;\n if (\n target.nodeName !== 'INPUT' ||\n !target.parentElement ||\n (!target.dataset.color && !target.dataset.colorraw)\n )\n return false;\n const data = colorState.get(target)!;\n const value = target.value;\n const rgb = hexToRgb(value);\n const colorraw = target.dataset.colorraw;\n const slash = (target.dataset.colorraw || '').indexOf('/') > 4;\n const comma = (target.dataset.colorraw || '').indexOf(',') > 4;\n let converted = target.value;\n if (data.colorType === ColorType.rgb) {\n let funName = colorraw?.match(/^(rgba?)/) ? colorraw?.match(/^(rgba?)/)![0] : undefined;\n if (comma) {\n converted = rgb\n ? `${funName}(${rgb.r}, ${rgb.g}, ${rgb.b}${data.alpha ? ', ' + data.alpha.trim() : ''})`\n : value;\n } else if (slash) {\n converted = rgb\n ? `${funName}(${rgb.r} ${rgb.g} ${rgb.b}${data.alpha ? ' / ' + data.alpha.trim() : ''})`\n : value;\n } else {\n converted = rgb ? `${funName}(${rgb.r} ${rgb.g} ${rgb.b})` : value;\n }\n } else if (data.colorType === ColorType.hsl) {\n const rgb = hexToRgb(value);\n if (rgb) {\n const { h, s, l } = RGBToHSL(rgb?.r, rgb?.g, rgb?.b);\n converted = `hsl(${h}deg ${s}% ${l}%${data.alpha ? ' / ' + data.alpha : ''})`;\n }\n }\n view.dispatch({\n changes: {\n from: data.from,\n to: data.to,\n insert: converted,\n },\n });\n return true;\n },\n },\n },\n );\n\nexport const colorTheme = EditorView.baseTheme({\n 'span[data-color]': {\n width: '12px',\n height: '12px',\n display: 'inline-block',\n borderRadius: '2px',\n marginRight: '0.5ch',\n outline: '1px solid #00000040',\n overflow: 'hidden',\n verticalAlign: 'middle',\n marginTop: '-2px',\n },\n 'span[data-color] input[type=\"color\"]': {\n background: 'transparent',\n display: 'block',\n border: 'none',\n outline: '0',\n paddingLeft: '24px',\n height: '12px',\n },\n 'span[data-color] input[type=\"color\"]::-webkit-color-swatch': {\n border: 'none',\n paddingLeft: '24px',\n },\n});\n\nexport const color: Extension = [colorView(), colorTheme];\n"
|
|
133
133
|
],
|
|
134
|
-
"mappings": "
|
|
134
|
+
"mappings": "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"
|
|
135
135
|
}
|
package/cjs/utils.js
CHANGED
|
@@ -7,34 +7,27 @@ exports.RGBToHSL = RGBToHSL;
|
|
|
7
7
|
exports.hexToRgb = hexToRgb;
|
|
8
8
|
exports.rgbToHex = rgbToHex;
|
|
9
9
|
exports.toFullHex = toFullHex;
|
|
10
|
-
|
|
11
10
|
function toFullHex(color) {
|
|
12
11
|
if (color.length === 4) {
|
|
13
12
|
// 3-char hex
|
|
14
13
|
return ["#".concat(color[1].repeat(2)).concat(color[2].repeat(2)).concat(color[3].repeat(2)), ''];
|
|
15
14
|
}
|
|
16
|
-
|
|
17
15
|
if (color.length === 5) {
|
|
18
16
|
// 4-char hex (alpha)
|
|
19
17
|
return ["#".concat(color[1].repeat(2)).concat(color[2].repeat(2)).concat(color[3].repeat(2)), color[4].repeat(2)];
|
|
20
18
|
}
|
|
21
|
-
|
|
22
19
|
if (color.length === 9) {
|
|
23
20
|
// 8-char hex (alpha)
|
|
24
21
|
return ["#".concat(color.slice(1, -2)), color.slice(-2)];
|
|
25
22
|
}
|
|
26
|
-
|
|
27
23
|
return [color, ''];
|
|
28
24
|
}
|
|
29
25
|
/** https://stackoverflow.com/a/5624139/1334703 */
|
|
30
|
-
|
|
31
|
-
|
|
32
26
|
function rgbToHex(r, g, b) {
|
|
33
27
|
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
34
28
|
}
|
|
35
|
-
/** https://stackoverflow.com/a/5624139/1334703 */
|
|
36
|
-
|
|
37
29
|
|
|
30
|
+
/** https://stackoverflow.com/a/5624139/1334703 */
|
|
38
31
|
function hexToRgb(hex) {
|
|
39
32
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
40
33
|
return result ? {
|
|
@@ -43,40 +36,33 @@ function hexToRgb(hex) {
|
|
|
43
36
|
b: parseInt(result[3], 16)
|
|
44
37
|
} : null;
|
|
45
38
|
}
|
|
46
|
-
/** https://css-tricks.com/converting-color-spaces-in-javascript/#aa-rgb-to-hsl */
|
|
47
|
-
|
|
48
39
|
|
|
40
|
+
/** https://css-tricks.com/converting-color-spaces-in-javascript/#aa-rgb-to-hsl */
|
|
49
41
|
function RGBToHSL(r, g, b) {
|
|
50
42
|
r /= 255, g /= 255, b /= 255;
|
|
51
43
|
var max = Math.max(r, g, b),
|
|
52
|
-
|
|
44
|
+
min = Math.min(r, g, b);
|
|
53
45
|
var h = 0,
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
46
|
+
s,
|
|
47
|
+
l = (max + min) / 2;
|
|
57
48
|
if (max == min) {
|
|
58
49
|
h = s = 0; // achromatic
|
|
59
50
|
} else {
|
|
60
51
|
var d = max - min;
|
|
61
52
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
62
|
-
|
|
63
53
|
switch (max) {
|
|
64
54
|
case r:
|
|
65
55
|
h = (g - b) / d + (g < b ? 6 : 0);
|
|
66
56
|
break;
|
|
67
|
-
|
|
68
57
|
case g:
|
|
69
58
|
h = (b - r) / d + 2;
|
|
70
59
|
break;
|
|
71
|
-
|
|
72
60
|
case b:
|
|
73
61
|
h = (r - g) / d + 4;
|
|
74
62
|
break;
|
|
75
63
|
}
|
|
76
|
-
|
|
77
64
|
h /= 6;
|
|
78
65
|
}
|
|
79
|
-
|
|
80
66
|
return {
|
|
81
67
|
h: Math.floor(h * 360),
|
|
82
68
|
s: Math.floor(s * 100),
|
package/cjs/utils.js.map
CHANGED
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"sourcesContent": [
|
|
33
33
|
"export function toFullHex(color: string): string[] {\n if (color.length === 4) {\n // 3-char hex\n return [`#${color[1].repeat(2)}${color[2].repeat(2)}${color[3].repeat(2)}`, ''];\n }\n\n if (color.length === 5) {\n // 4-char hex (alpha)\n return [`#${color[1].repeat(2)}${color[2].repeat(2)}${color[3].repeat(2)}`, color[4].repeat(2)];\n }\n\n if (color.length === 9) {\n // 8-char hex (alpha)\n return [`#${color.slice(1, -2)}`, color.slice(-2)];\n }\n\n return [color, ''];\n}\n/** https://stackoverflow.com/a/5624139/1334703 */\nexport function rgbToHex(r: number, g: number, b: number) {\n return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);\n}\n\n/** https://stackoverflow.com/a/5624139/1334703 */\nexport function hexToRgb(hex: string) {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : null;\n}\n\n/** https://css-tricks.com/converting-color-spaces-in-javascript/#aa-rgb-to-hsl */\nexport function RGBToHSL(r: number, g: number, b: number) {\n (r /= 255), (g /= 255), (b /= 255);\n const max = Math.max(r, g, b),\n min = Math.min(r, g, b);\n let h = 0,\n s,\n l = (max + min) / 2;\n\n if (max == min) {\n h = s = 0; // achromatic\n } else {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n return { h: Math.floor(h * 360), s: Math.floor(s * 100), l: Math.floor(l * 100) };\n}\n"
|
|
34
34
|
],
|
|
35
|
-
"mappings": "
|
|
35
|
+
"mappings": "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"
|
|
36
36
|
}
|
package/esm/index.js
CHANGED
|
@@ -7,19 +7,15 @@ import hexs from 'colors-named-hex';
|
|
|
7
7
|
import hslMatcher, { hlsStringToRGB } from 'hsl-matcher';
|
|
8
8
|
import { toFullHex, rgbToHex, hexToRgb, RGBToHSL } from './utils';
|
|
9
9
|
export var ColorType;
|
|
10
|
-
|
|
11
10
|
(function (ColorType) {
|
|
12
11
|
ColorType["rgb"] = "RGB";
|
|
13
12
|
ColorType["hex"] = "HEX";
|
|
14
13
|
ColorType["named"] = "NAMED";
|
|
15
14
|
ColorType["hsl"] = "HSL";
|
|
16
15
|
})(ColorType || (ColorType = {}));
|
|
17
|
-
|
|
18
16
|
var colorState = new WeakMap();
|
|
19
|
-
|
|
20
17
|
function colorDecorations(view) {
|
|
21
18
|
var widgets = [];
|
|
22
|
-
|
|
23
19
|
for (var range of view.visibleRanges) {
|
|
24
20
|
syntaxTree(view.state).iterate({
|
|
25
21
|
from: range.from,
|
|
@@ -49,7 +45,6 @@ function colorDecorations(view) {
|
|
|
49
45
|
* rgba( 255 255 255 / ); ❌ ❌ ❌
|
|
50
46
|
* ```
|
|
51
47
|
*/
|
|
52
|
-
|
|
53
48
|
if (type.name === 'CallExpression' && callExp.startsWith('rgb')) {
|
|
54
49
|
var match = /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,?\s*(\d{1,3})\s*(,\s*\d*\.\d*\s*)?\)/i.exec(callExp) || /rgba?\(\s*(\d{1,3})\s*(\d{1,3})\s*(\d{1,3})\s*(\/?\s*\d+%)?(\/\s*\d+\.\d\s*)?\)/i.exec(callExp);
|
|
55
50
|
if (!match) return;
|
|
@@ -94,16 +89,13 @@ function colorDecorations(view) {
|
|
|
94
89
|
* HSL(240Deg, 100%, 50%) // ✅ case insensitive
|
|
95
90
|
*/
|
|
96
91
|
var _match = hlsStringToRGB(callExp);
|
|
97
|
-
|
|
98
92
|
if (!_match) return;
|
|
99
93
|
var {
|
|
100
94
|
r: _r,
|
|
101
95
|
g: _g,
|
|
102
96
|
b: _b
|
|
103
97
|
} = _match;
|
|
104
|
-
|
|
105
98
|
var _hex = rgbToHex(Number(_r), Number(_g), Number(_b));
|
|
106
|
-
|
|
107
99
|
var _widget = Decoration.widget({
|
|
108
100
|
widget: new ColorWidget({
|
|
109
101
|
colorType: ColorType.hsl,
|
|
@@ -115,11 +107,9 @@ function colorDecorations(view) {
|
|
|
115
107
|
}),
|
|
116
108
|
side: 0
|
|
117
109
|
});
|
|
118
|
-
|
|
119
110
|
widgets.push(_widget.range(from));
|
|
120
111
|
} else if (type.name === 'ColorLiteral') {
|
|
121
112
|
var [_color, alpha] = toFullHex(callExp);
|
|
122
|
-
|
|
123
113
|
var _widget2 = Decoration.widget({
|
|
124
114
|
widget: new ColorWidget({
|
|
125
115
|
colorType: ColorType.hex,
|
|
@@ -131,11 +121,9 @@ function colorDecorations(view) {
|
|
|
131
121
|
}),
|
|
132
122
|
side: 0
|
|
133
123
|
});
|
|
134
|
-
|
|
135
124
|
widgets.push(_widget2.range(from));
|
|
136
125
|
} else if (type.name === 'ValueName') {
|
|
137
126
|
var name = callExp;
|
|
138
|
-
|
|
139
127
|
if (colors.includes(name)) {
|
|
140
128
|
var _widget3 = Decoration.widget({
|
|
141
129
|
widget: new ColorWidget({
|
|
@@ -148,25 +136,21 @@ function colorDecorations(view) {
|
|
|
148
136
|
}),
|
|
149
137
|
side: 0
|
|
150
138
|
});
|
|
151
|
-
|
|
152
139
|
widgets.push(_widget3.range(from));
|
|
153
140
|
}
|
|
154
141
|
}
|
|
155
142
|
}
|
|
156
143
|
});
|
|
157
144
|
}
|
|
158
|
-
|
|
159
145
|
return Decoration.set(widgets);
|
|
160
146
|
}
|
|
161
|
-
|
|
162
147
|
class ColorWidget extends WidgetType {
|
|
163
148
|
constructor(_ref2) {
|
|
164
149
|
var {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
150
|
+
color,
|
|
151
|
+
colorRaw
|
|
152
|
+
} = _ref2,
|
|
153
|
+
state = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
170
154
|
super();
|
|
171
155
|
this.state = void 0;
|
|
172
156
|
this.color = void 0;
|
|
@@ -175,11 +159,9 @@ class ColorWidget extends WidgetType {
|
|
|
175
159
|
this.color = color;
|
|
176
160
|
this.colorRaw = colorRaw;
|
|
177
161
|
}
|
|
178
|
-
|
|
179
162
|
eq(other) {
|
|
180
163
|
return other.state.colorType === this.state.colorType && other.color === this.color && other.state.from === this.state.from && other.state.to === this.state.to && other.state.alpha === this.state.alpha;
|
|
181
164
|
}
|
|
182
|
-
|
|
183
165
|
toDOM() {
|
|
184
166
|
var picker = document.createElement('input');
|
|
185
167
|
colorState.set(picker, this.state);
|
|
@@ -193,35 +175,28 @@ class ColorWidget extends WidgetType {
|
|
|
193
175
|
wrapper.style.backgroundColor = this.colorRaw;
|
|
194
176
|
return wrapper;
|
|
195
177
|
}
|
|
196
|
-
|
|
197
178
|
ignoreEvent() {
|
|
198
179
|
return false;
|
|
199
180
|
}
|
|
200
|
-
|
|
201
181
|
}
|
|
202
|
-
|
|
203
182
|
export var colorView = function colorView(showPicker) {
|
|
204
183
|
if (showPicker === void 0) {
|
|
205
184
|
showPicker = true;
|
|
206
185
|
}
|
|
207
|
-
|
|
208
186
|
return ViewPlugin.fromClass(class ColorView {
|
|
209
187
|
constructor(view) {
|
|
210
188
|
this.decorations = void 0;
|
|
211
189
|
this.decorations = colorDecorations(view);
|
|
212
190
|
}
|
|
213
|
-
|
|
214
191
|
update(update) {
|
|
215
192
|
if (update.docChanged || update.viewportChanged) {
|
|
216
193
|
this.decorations = colorDecorations(update.view);
|
|
217
194
|
}
|
|
218
|
-
|
|
219
195
|
var readOnly = update.view.contentDOM.ariaReadOnly === 'true';
|
|
220
196
|
var editable = update.view.contentDOM.contentEditable === 'true';
|
|
221
197
|
var canBeEdited = readOnly === false && editable;
|
|
222
198
|
this.changePicker(update.view, canBeEdited);
|
|
223
199
|
}
|
|
224
|
-
|
|
225
200
|
changePicker(view, canBeEdited) {
|
|
226
201
|
var doms = view.contentDOM.querySelectorAll('input[type=color]');
|
|
227
202
|
doms.forEach(inp => {
|
|
@@ -232,7 +207,6 @@ export var colorView = function colorView(showPicker) {
|
|
|
232
207
|
}
|
|
233
208
|
});
|
|
234
209
|
}
|
|
235
|
-
|
|
236
210
|
}, {
|
|
237
211
|
decorations: v => v.decorations,
|
|
238
212
|
eventHandlers: {
|
|
@@ -246,10 +220,8 @@ export var colorView = function colorView(showPicker) {
|
|
|
246
220
|
var slash = (target.dataset.colorraw || '').indexOf('/') > 4;
|
|
247
221
|
var comma = (target.dataset.colorraw || '').indexOf(',') > 4;
|
|
248
222
|
var converted = target.value;
|
|
249
|
-
|
|
250
223
|
if (data.colorType === ColorType.rgb) {
|
|
251
224
|
var funName = colorraw != null && colorraw.match(/^(rgba?)/) ? colorraw == null ? void 0 : colorraw.match(/^(rgba?)/)[0] : undefined;
|
|
252
|
-
|
|
253
225
|
if (comma) {
|
|
254
226
|
converted = rgb ? funName + "(" + rgb.r + ", " + rgb.g + ", " + rgb.b + (data.alpha ? ', ' + data.alpha.trim() : '') + ")" : value;
|
|
255
227
|
} else if (slash) {
|
|
@@ -259,7 +231,6 @@ export var colorView = function colorView(showPicker) {
|
|
|
259
231
|
}
|
|
260
232
|
} else if (data.colorType === ColorType.hsl) {
|
|
261
233
|
var _rgb = hexToRgb(value);
|
|
262
|
-
|
|
263
234
|
if (_rgb) {
|
|
264
235
|
var {
|
|
265
236
|
h,
|
|
@@ -269,7 +240,6 @@ export var colorView = function colorView(showPicker) {
|
|
|
269
240
|
converted = "hsl(" + h + "deg " + s + "% " + l + "%" + (data.alpha ? ' / ' + data.alpha : '') + ")";
|
|
270
241
|
}
|
|
271
242
|
}
|
|
272
|
-
|
|
273
243
|
view.dispatch({
|
|
274
244
|
changes: {
|
|
275
245
|
from: data.from,
|
package/esm/index.js.map
CHANGED
|
@@ -136,5 +136,5 @@
|
|
|
136
136
|
"sourcesContent": [
|
|
137
137
|
"import { ViewPlugin, EditorView, ViewUpdate, WidgetType, Decoration, DecorationSet } from '@codemirror/view';\nimport { Extension, Range } from '@codemirror/state';\nimport { syntaxTree } from '@codemirror/language';\nimport colors from 'colors-named';\nimport hexs from 'colors-named-hex';\nimport hslMatcher, { hlsStringToRGB, RGBAColor } from 'hsl-matcher';\nimport { toFullHex, rgbToHex, hexToRgb, RGBToHSL } from './utils';\n\nexport enum ColorType {\n rgb = 'RGB',\n hex = 'HEX',\n named = 'NAMED',\n hsl = 'HSL',\n}\n\nexport interface ColorState {\n from: number;\n to: number;\n alpha: string;\n colorType: ColorType;\n}\n\nconst colorState = new WeakMap<HTMLInputElement, ColorState>();\n\ntype GetArrayElementType<T extends readonly any[]> = T extends readonly (infer U)[] ? U : never;\n\nfunction colorDecorations(view: EditorView) {\n const widgets: Array<Range<Decoration>> = [];\n for (const range of view.visibleRanges) {\n syntaxTree(view.state).iterate({\n from: range.from,\n to: range.to,\n enter: ({ type, from, to }) => {\n const callExp: string = view.state.doc.sliceString(from, to);\n /**\n * ```\n * rgb(0 107 128, .5); ❌ ❌ ❌\n * rgb( 0 107 128 ); ✅ ✅ ✅\n * RGB( 0 107 128 ); ✅ ✅ ✅\n * Rgb( 0 107 128 ); ✅ ✅ ✅\n * rgb( 0 107 128 / ); ❌ ❌ ❌\n * rgb( 0 107 128 / 60%); ✅ ✅ ✅\n * rgb(0,107,128 / 60%); ❌ ❌ ❌\n * rgb( 255, 255, 255 ) ✅ ✅ ✅\n * rgba( 255, 255, 255 ) ✅ ✅ ✅\n * rgba( 255, 255 , 255, ) ❌ ❌ ❌\n * rgba( 255, 255 , 255, .5 ) ✅ ✅ ✅\n * rgba( 255 255 255 / 0.5 ); ✅ ✅ ✅\n * rgba( 255 255 255 0.5 ); ❌ ❌ ❌\n * rgba( 255 255 255 / ); ❌ ❌ ❌\n * ```\n */\n if (type.name === 'CallExpression' && callExp.startsWith('rgb')) {\n const match =\n /rgba?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,?\\s*(\\d{1,3})\\s*(,\\s*\\d*\\.\\d*\\s*)?\\)/i.exec(callExp) ||\n /rgba?\\(\\s*(\\d{1,3})\\s*(\\d{1,3})\\s*(\\d{1,3})\\s*(\\/?\\s*\\d+%)?(\\/\\s*\\d+\\.\\d\\s*)?\\)/i.exec(callExp);\n if (!match) return;\n const [_, r, g, b, a] = match;\n const hex = rgbToHex(Number(r), Number(g), Number(b));\n const widget = Decoration.widget({\n widget: new ColorWidget({\n colorType: ColorType.rgb,\n color: hex,\n colorRaw: callExp,\n from,\n to,\n alpha: a ? a.replace(/(\\/|,)/g, '') : '',\n }),\n side: 0,\n });\n widgets.push(widget.range(from));\n } else if (type.name === 'CallExpression' && hslMatcher(callExp)) {\n /**\n * # valid\n * hsl(240, 100%, 50%) // ✅ comma separated\n * hsl(240, 100%, 50%, 0.1) // ✅ comma separated with opacity\n * hsl(240, 100%, 50%, 10%) // ✅ comma separated with % opacity\n * hsl(240,100%,50%,0.1) // ✅ comma separated without spaces\n * hsl(180deg, 100%, 50%, 0.1) // ✅ hue with 'deg'\n * hsl(3.14rad, 100%, 50%, 0.1) // ✅ hue with 'rad'\n * hsl(200grad, 100%, 50%, 0.1) // ✅ hue with 'grad'\n * hsl(0.5turn, 100%, 50%, 0.1) // ✅ hue with 'turn'\n * hsl(-240, -100%, -50%, -0.1) // ✅ negative values\n * hsl(+240, +100%, +50%, +0.1) // ✅ explicit positive sign\n * hsl(240.5, 99.99%, 49.999%, 0.9999) // ✅ non-integer values\n * hsl(.9, .99%, .999%, .9999) // ✅ fraction w/o leading zero\n * hsl(0240, 0100%, 0050%, 01) // ✅ leading zeros\n * hsl(240.0, 100.00%, 50.000%, 1.0000) // ✅ trailing decimal zeros\n * hsl(2400, 1000%, 1000%, 10) // ✅ out of range values\n * hsl(-2400.01deg, -1000.5%, -1000.05%, -100) // ✅ combination of above\n * hsl(2.40e+2, 1.00e+2%, 5.00e+1%, 1E-3) // ✅ scientific notation\n * hsl(240 100% 50%) // ✅ space separated (CSS Color Level 4)\n * hsl(240 100% 50% / 0.1) // ✅ space separated with opacity\n * hsla(240, 100%, 50%) // ✅ hsla() alias\n * hsla(240, 100%, 50%, 0.1) // ✅ hsla() with opacity\n * HSL(240Deg, 100%, 50%) // ✅ case insensitive\n */\n const match = hlsStringToRGB(callExp) as RGBAColor;\n if (!match) return;\n const { r, g, b } = match;\n const hex = rgbToHex(Number(r), Number(g), Number(b));\n const widget = Decoration.widget({\n widget: new ColorWidget({\n colorType: ColorType.hsl,\n color: hex,\n colorRaw: callExp,\n from,\n to,\n alpha: match.a ? match.a.toString() : '',\n }),\n side: 0,\n });\n widgets.push(widget.range(from));\n } else if (type.name === 'ColorLiteral') {\n const [color, alpha] = toFullHex(callExp);\n const widget = Decoration.widget({\n widget: new ColorWidget({\n colorType: ColorType.hex,\n color,\n colorRaw: callExp,\n from,\n to,\n alpha,\n }),\n side: 0,\n });\n widgets.push(widget.range(from));\n } else if (type.name === 'ValueName') {\n const name = callExp as unknown as GetArrayElementType<typeof colors>;\n if (colors.includes(name)) {\n const widget = Decoration.widget({\n widget: new ColorWidget({\n colorType: ColorType.named,\n color: hexs[colors.indexOf(name)],\n colorRaw: callExp,\n from,\n to,\n alpha: '',\n }),\n side: 0,\n });\n widgets.push(widget.range(from));\n }\n }\n },\n });\n }\n return Decoration.set(widgets);\n}\n\nclass ColorWidget extends WidgetType {\n private readonly state: ColorState;\n private readonly color: string;\n private readonly colorRaw: string;\n\n constructor({\n color,\n colorRaw,\n ...state\n }: ColorState & {\n color: string;\n colorRaw: string;\n }) {\n super();\n this.state = state;\n this.color = color;\n this.colorRaw = colorRaw;\n }\n eq(other: ColorWidget) {\n return (\n other.state.colorType === this.state.colorType &&\n other.color === this.color &&\n other.state.from === this.state.from &&\n other.state.to === this.state.to &&\n other.state.alpha === this.state.alpha\n );\n }\n toDOM() {\n const picker = document.createElement('input');\n colorState.set(picker, this.state);\n picker.type = 'color';\n picker.value = this.color;\n picker.dataset['color'] = this.color;\n picker.dataset['colorraw'] = this.colorRaw;\n const wrapper = document.createElement('span');\n wrapper.appendChild(picker);\n wrapper.dataset['color'] = this.color;\n wrapper.style.backgroundColor = this.colorRaw;\n return wrapper;\n }\n ignoreEvent() {\n return false;\n }\n}\n\nexport const colorView = (showPicker: boolean = true) =>\n ViewPlugin.fromClass(\n class ColorView {\n decorations: DecorationSet;\n constructor(view: EditorView) {\n this.decorations = colorDecorations(view);\n }\n update(update: ViewUpdate) {\n if (update.docChanged || update.viewportChanged) {\n this.decorations = colorDecorations(update.view);\n }\n const readOnly = update.view.contentDOM.ariaReadOnly === 'true';\n const editable = update.view.contentDOM.contentEditable === 'true';\n\n const canBeEdited = readOnly === false && editable;\n this.changePicker(update.view, canBeEdited);\n }\n changePicker(view: EditorView, canBeEdited: boolean) {\n const doms = view.contentDOM.querySelectorAll('input[type=color]');\n doms.forEach((inp) => {\n if (!showPicker) {\n inp.setAttribute('disabled', '');\n } else {\n canBeEdited ? inp.removeAttribute('disabled') : inp.setAttribute('disabled', '');\n }\n });\n }\n },\n {\n decorations: (v) => v.decorations,\n eventHandlers: {\n change: (e, view) => {\n const target = e.target as HTMLInputElement;\n if (\n target.nodeName !== 'INPUT' ||\n !target.parentElement ||\n (!target.dataset.color && !target.dataset.colorraw)\n )\n return false;\n const data = colorState.get(target)!;\n const value = target.value;\n const rgb = hexToRgb(value);\n const colorraw = target.dataset.colorraw;\n const slash = (target.dataset.colorraw || '').indexOf('/') > 4;\n const comma = (target.dataset.colorraw || '').indexOf(',') > 4;\n let converted = target.value;\n if (data.colorType === ColorType.rgb) {\n let funName = colorraw?.match(/^(rgba?)/) ? colorraw?.match(/^(rgba?)/)![0] : undefined;\n if (comma) {\n converted = rgb\n ? `${funName}(${rgb.r}, ${rgb.g}, ${rgb.b}${data.alpha ? ', ' + data.alpha.trim() : ''})`\n : value;\n } else if (slash) {\n converted = rgb\n ? `${funName}(${rgb.r} ${rgb.g} ${rgb.b}${data.alpha ? ' / ' + data.alpha.trim() : ''})`\n : value;\n } else {\n converted = rgb ? `${funName}(${rgb.r} ${rgb.g} ${rgb.b})` : value;\n }\n } else if (data.colorType === ColorType.hsl) {\n const rgb = hexToRgb(value);\n if (rgb) {\n const { h, s, l } = RGBToHSL(rgb?.r, rgb?.g, rgb?.b);\n converted = `hsl(${h}deg ${s}% ${l}%${data.alpha ? ' / ' + data.alpha : ''})`;\n }\n }\n view.dispatch({\n changes: {\n from: data.from,\n to: data.to,\n insert: converted,\n },\n });\n return true;\n },\n },\n },\n );\n\nexport const colorTheme = EditorView.baseTheme({\n 'span[data-color]': {\n width: '12px',\n height: '12px',\n display: 'inline-block',\n borderRadius: '2px',\n marginRight: '0.5ch',\n outline: '1px solid #00000040',\n overflow: 'hidden',\n verticalAlign: 'middle',\n marginTop: '-2px',\n },\n 'span[data-color] input[type=\"color\"]': {\n background: 'transparent',\n display: 'block',\n border: 'none',\n outline: '0',\n paddingLeft: '24px',\n height: '12px',\n },\n 'span[data-color] input[type=\"color\"]::-webkit-color-swatch': {\n border: 'none',\n paddingLeft: '24px',\n },\n});\n\nexport const color: Extension = [colorView(), colorTheme];\n"
|
|
138
138
|
],
|
|
139
|
-
"mappings": ";;AAAA,SAASA,
|
|
139
|
+
"mappings": "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"
|
|
140
140
|
}
|
package/esm/utils.js
CHANGED
|
@@ -3,26 +3,22 @@ export function toFullHex(color) {
|
|
|
3
3
|
// 3-char hex
|
|
4
4
|
return ["#" + color[1].repeat(2) + color[2].repeat(2) + color[3].repeat(2), ''];
|
|
5
5
|
}
|
|
6
|
-
|
|
7
6
|
if (color.length === 5) {
|
|
8
7
|
// 4-char hex (alpha)
|
|
9
8
|
return ["#" + color[1].repeat(2) + color[2].repeat(2) + color[3].repeat(2), color[4].repeat(2)];
|
|
10
9
|
}
|
|
11
|
-
|
|
12
10
|
if (color.length === 9) {
|
|
13
11
|
// 8-char hex (alpha)
|
|
14
12
|
return ["#" + color.slice(1, -2), color.slice(-2)];
|
|
15
13
|
}
|
|
16
|
-
|
|
17
14
|
return [color, ''];
|
|
18
15
|
}
|
|
19
16
|
/** https://stackoverflow.com/a/5624139/1334703 */
|
|
20
|
-
|
|
21
17
|
export function rgbToHex(r, g, b) {
|
|
22
18
|
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
23
19
|
}
|
|
24
|
-
/** https://stackoverflow.com/a/5624139/1334703 */
|
|
25
20
|
|
|
21
|
+
/** https://stackoverflow.com/a/5624139/1334703 */
|
|
26
22
|
export function hexToRgb(hex) {
|
|
27
23
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
28
24
|
return result ? {
|
|
@@ -31,39 +27,33 @@ export function hexToRgb(hex) {
|
|
|
31
27
|
b: parseInt(result[3], 16)
|
|
32
28
|
} : null;
|
|
33
29
|
}
|
|
34
|
-
/** https://css-tricks.com/converting-color-spaces-in-javascript/#aa-rgb-to-hsl */
|
|
35
30
|
|
|
31
|
+
/** https://css-tricks.com/converting-color-spaces-in-javascript/#aa-rgb-to-hsl */
|
|
36
32
|
export function RGBToHSL(r, g, b) {
|
|
37
33
|
r /= 255, g /= 255, b /= 255;
|
|
38
34
|
var max = Math.max(r, g, b),
|
|
39
|
-
|
|
35
|
+
min = Math.min(r, g, b);
|
|
40
36
|
var h = 0,
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
s,
|
|
38
|
+
l = (max + min) / 2;
|
|
44
39
|
if (max == min) {
|
|
45
40
|
h = s = 0; // achromatic
|
|
46
41
|
} else {
|
|
47
42
|
var d = max - min;
|
|
48
43
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
49
|
-
|
|
50
44
|
switch (max) {
|
|
51
45
|
case r:
|
|
52
46
|
h = (g - b) / d + (g < b ? 6 : 0);
|
|
53
47
|
break;
|
|
54
|
-
|
|
55
48
|
case g:
|
|
56
49
|
h = (b - r) / d + 2;
|
|
57
50
|
break;
|
|
58
|
-
|
|
59
51
|
case b:
|
|
60
52
|
h = (r - g) / d + 4;
|
|
61
53
|
break;
|
|
62
54
|
}
|
|
63
|
-
|
|
64
55
|
h /= 6;
|
|
65
56
|
}
|
|
66
|
-
|
|
67
57
|
return {
|
|
68
58
|
h: Math.floor(h * 360),
|
|
69
59
|
s: Math.floor(s * 100),
|
package/esm/utils.js.map
CHANGED
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"sourcesContent": [
|
|
33
33
|
"export function toFullHex(color: string): string[] {\n if (color.length === 4) {\n // 3-char hex\n return [`#${color[1].repeat(2)}${color[2].repeat(2)}${color[3].repeat(2)}`, ''];\n }\n\n if (color.length === 5) {\n // 4-char hex (alpha)\n return [`#${color[1].repeat(2)}${color[2].repeat(2)}${color[3].repeat(2)}`, color[4].repeat(2)];\n }\n\n if (color.length === 9) {\n // 8-char hex (alpha)\n return [`#${color.slice(1, -2)}`, color.slice(-2)];\n }\n\n return [color, ''];\n}\n/** https://stackoverflow.com/a/5624139/1334703 */\nexport function rgbToHex(r: number, g: number, b: number) {\n return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);\n}\n\n/** https://stackoverflow.com/a/5624139/1334703 */\nexport function hexToRgb(hex: string) {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : null;\n}\n\n/** https://css-tricks.com/converting-color-spaces-in-javascript/#aa-rgb-to-hsl */\nexport function RGBToHSL(r: number, g: number, b: number) {\n (r /= 255), (g /= 255), (b /= 255);\n const max = Math.max(r, g, b),\n min = Math.min(r, g, b);\n let h = 0,\n s,\n l = (max + min) / 2;\n\n if (max == min) {\n h = s = 0; // achromatic\n } else {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n return { h: Math.floor(h * 360), s: Math.floor(s * 100), l: Math.floor(l * 100) };\n}\n"
|
|
34
34
|
],
|
|
35
|
-
"mappings": "AAAA,OAAO,SAASA,
|
|
35
|
+
"mappings": "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"
|
|
36
36
|
}
|
package/package.json
CHANGED