@uiw/codemirror-extensions-color
Advanced tools
@uiw/codemirror-extensions-color - npm Package Compare versions
Comparing version 4.12.4 to 4.13.0
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"]; | ||
| var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"]; | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -11,37 +9,20 @@ value: true | ||
| exports.colorView = exports.colorTheme = exports.color = exports.ColorType = void 0; | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
| var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); | ||
| var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); | ||
| var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized")); | ||
| var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); | ||
| var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper")); | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
| var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper")); | ||
| var _view = require("@codemirror/view"); | ||
| var _language = require("@codemirror/language"); | ||
| var _colorsNamed = _interopRequireDefault(require("colors-named")); | ||
| var _colorsNamedHex = _interopRequireDefault(require("colors-named-hex")); | ||
| var _hslMatcher = _interopRequireWildcard(require("hsl-matcher")); | ||
| var _utils = require("./utils"); | ||
| var _excluded = ["color", "colorRaw"]; | ||
| var ColorType; | ||
| exports.ColorType = ColorType; | ||
| (function (ColorType) { | ||
@@ -53,11 +34,7 @@ ColorType["rgb"] = "RGB"; | ||
| })(ColorType || (exports.ColorType = ColorType = {})); | ||
| var colorState = new WeakMap(); | ||
| function colorDecorations(view) { | ||
| var widgets = []; | ||
| var _iterator = (0, _createForOfIteratorHelper2["default"])(view.visibleRanges), | ||
| _step; | ||
| _step; | ||
| try { | ||
@@ -71,4 +48,4 @@ for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
| var type = _ref.type, | ||
| from = _ref.from, | ||
| to = _ref.to; | ||
| from = _ref.from, | ||
| to = _ref.to; | ||
| var callExp = view.state.doc.sliceString(from, to); | ||
@@ -93,16 +70,12 @@ /** | ||
| */ | ||
| if (type.name === 'CallExpression' && callExp.startsWith('rgb')) { | ||
| 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); | ||
| if (!match) return; | ||
| var _match = (0, _slicedToArray2["default"])(match, 5), | ||
| _ = _match[0], | ||
| r = _match[1], | ||
| g = _match[2], | ||
| b = _match[3], | ||
| a = _match[4]; | ||
| _ = _match[0], | ||
| r = _match[1], | ||
| g = _match[2], | ||
| b = _match[3], | ||
| a = _match[4]; | ||
| var hex = (0, _utils.rgbToHex)(Number(r), Number(g), Number(b)); | ||
| var widget = _view.Decoration.widget({ | ||
@@ -119,3 +92,2 @@ widget: new ColorWidget({ | ||
| }); | ||
| widgets.push(widget.range(from)); | ||
@@ -149,10 +121,7 @@ } else if (type.name === 'CallExpression' && (0, _hslMatcher["default"])(callExp)) { | ||
| var _match2 = (0, _hslMatcher.hlsStringToRGB)(callExp); | ||
| if (!_match2) return; | ||
| var _r = _match2.r, | ||
| _g = _match2.g, | ||
| _b = _match2.b; | ||
| _g = _match2.g, | ||
| _b = _match2.b; | ||
| var _hex = (0, _utils.rgbToHex)(Number(_r), Number(_g), Number(_b)); | ||
| var _widget = _view.Decoration.widget({ | ||
@@ -169,10 +138,8 @@ widget: new ColorWidget({ | ||
| }); | ||
| widgets.push(_widget.range(from)); | ||
| } else if (type.name === 'ColorLiteral') { | ||
| var _toFullHex = (0, _utils.toFullHex)(callExp), | ||
| _toFullHex2 = (0, _slicedToArray2["default"])(_toFullHex, 2), | ||
| _color = _toFullHex2[0], | ||
| alpha = _toFullHex2[1]; | ||
| _toFullHex2 = (0, _slicedToArray2["default"])(_toFullHex, 2), | ||
| _color = _toFullHex2[0], | ||
| alpha = _toFullHex2[1]; | ||
| var _widget2 = _view.Decoration.widget({ | ||
@@ -189,7 +156,5 @@ widget: new ColorWidget({ | ||
| }); | ||
| widgets.push(_widget2.range(from)); | ||
| } else if (type.name === 'ValueName') { | ||
| var name = callExp; | ||
| if (_colorsNamed["default"].includes(name)) { | ||
@@ -207,3 +172,2 @@ var _widget3 = _view.Decoration.widget({ | ||
| }); | ||
| widgets.push(_widget3.range(from)); | ||
@@ -220,17 +184,12 @@ } | ||
| } | ||
| return _view.Decoration.set(widgets); | ||
| } | ||
| var ColorWidget = /*#__PURE__*/function (_WidgetType) { | ||
| (0, _inherits2["default"])(ColorWidget, _WidgetType); | ||
| var _super = (0, _createSuper2["default"])(ColorWidget); | ||
| function ColorWidget(_ref2) { | ||
| var _this; | ||
| var color = _ref2.color, | ||
| colorRaw = _ref2.colorRaw, | ||
| state = (0, _objectWithoutProperties2["default"])(_ref2, _excluded); | ||
| colorRaw = _ref2.colorRaw, | ||
| state = (0, _objectWithoutProperties2["default"])(_ref2, _excluded); | ||
| (0, _classCallCheck2["default"])(this, ColorWidget); | ||
@@ -246,3 +205,2 @@ _this = _super.call(this); | ||
| } | ||
| (0, _createClass2["default"])(ColorWidget, [{ | ||
@@ -276,3 +234,2 @@ key: "eq", | ||
| }(_view.WidgetType); | ||
| var colorView = function colorView() { | ||
@@ -286,3 +243,2 @@ var showPicker = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; | ||
| } | ||
| (0, _createClass2["default"])(ColorView, [{ | ||
@@ -294,3 +250,2 @@ key: "update", | ||
| } | ||
| var readOnly = _update.view.contentDOM.ariaReadOnly === 'true'; | ||
@@ -330,6 +285,4 @@ var editable = _update.view.contentDOM.contentEditable === 'true'; | ||
| var converted = target.value; | ||
| if (data.colorType === ColorType.rgb) { | ||
| var funName = colorraw !== null && colorraw !== void 0 && colorraw.match(/^(rgba?)/) ? colorraw === null || colorraw === void 0 ? void 0 : colorraw.match(/^(rgba?)/)[0] : undefined; | ||
| if (comma) { | ||
@@ -344,13 +297,10 @@ converted = rgb ? "".concat(funName, "(").concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b).concat(data.alpha ? ', ' + data.alpha.trim() : '', ")") : value; | ||
| var _rgb = (0, _utils.hexToRgb)(value); | ||
| if (_rgb) { | ||
| 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), | ||
| h = _RGBToHSL.h, | ||
| s = _RGBToHSL.s, | ||
| l = _RGBToHSL.l; | ||
| h = _RGBToHSL.h, | ||
| s = _RGBToHSL.s, | ||
| l = _RGBToHSL.l; | ||
| converted = "hsl(".concat(h, "deg ").concat(s, "% ").concat(l, "%").concat(data.alpha ? ' / ' + data.alpha : '', ")"); | ||
| } | ||
| } | ||
| view.dispatch({ | ||
@@ -368,5 +318,3 @@ changes: { | ||
| }; | ||
| exports.colorView = colorView; | ||
| var colorTheme = _view.EditorView.baseTheme({ | ||
@@ -397,3 +345,2 @@ 'span[data-color]': { | ||
| }); | ||
| exports.colorTheme = colorTheme; | ||
@@ -400,0 +347,0 @@ var color = [colorView(), colorTheme]; |
@@ -10,3 +10,2 @@ "use strict"; | ||
| exports.toFullHex = toFullHex; | ||
| function toFullHex(color) { | ||
@@ -17,3 +16,2 @@ if (color.length === 4) { | ||
| } | ||
| if (color.length === 5) { | ||
@@ -23,3 +21,2 @@ // 4-char hex (alpha) | ||
| } | ||
| if (color.length === 9) { | ||
@@ -29,14 +26,10 @@ // 8-char hex (alpha) | ||
| } | ||
| return [color, '']; | ||
| } | ||
| /** https://stackoverflow.com/a/5624139/1334703 */ | ||
| function rgbToHex(r, g, b) { | ||
| return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); | ||
| } | ||
| /** https://stackoverflow.com/a/5624139/1334703 */ | ||
| function hexToRgb(hex) { | ||
@@ -50,13 +43,11 @@ var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); | ||
| } | ||
| /** https://css-tricks.com/converting-color-spaces-in-javascript/#aa-rgb-to-hsl */ | ||
| function RGBToHSL(r, g, b) { | ||
| r /= 255, g /= 255, b /= 255; | ||
| var max = Math.max(r, g, b), | ||
| min = Math.min(r, g, b); | ||
| min = Math.min(r, g, b); | ||
| var h = 0, | ||
| s, | ||
| l = (max + min) / 2; | ||
| s, | ||
| l = (max + min) / 2; | ||
| if (max == min) { | ||
@@ -67,3 +58,2 @@ h = s = 0; // achromatic | ||
| s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | ||
| switch (max) { | ||
@@ -73,7 +63,5 @@ case r: | ||
| break; | ||
| case g: | ||
| h = (b - r) / d + 2; | ||
| break; | ||
| case b: | ||
@@ -83,6 +71,4 @@ h = (r - g) / d + 4; | ||
| } | ||
| h /= 6; | ||
| } | ||
| return { | ||
@@ -89,0 +75,0 @@ h: Math.floor(h * 360), |
@@ -10,3 +10,2 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose"; | ||
| export var ColorType; | ||
| (function (ColorType) { | ||
@@ -18,8 +17,5 @@ ColorType["rgb"] = "RGB"; | ||
| })(ColorType || (ColorType = {})); | ||
| var colorState = new WeakMap(); | ||
| function colorDecorations(view) { | ||
| var widgets = []; | ||
| for (var range of view.visibleRanges) { | ||
@@ -54,3 +50,2 @@ syntaxTree(view.state).iterate({ | ||
| */ | ||
| if (type.name === 'CallExpression' && callExp.startsWith('rgb')) { | ||
@@ -100,3 +95,2 @@ 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); | ||
| var _match = hlsStringToRGB(callExp); | ||
| if (!_match) return; | ||
@@ -108,5 +102,3 @@ var { | ||
| } = _match; | ||
| var _hex = rgbToHex(Number(_r), Number(_g), Number(_b)); | ||
| var _widget = Decoration.widget({ | ||
@@ -123,7 +115,5 @@ widget: new ColorWidget({ | ||
| }); | ||
| widgets.push(_widget.range(from)); | ||
| } else if (type.name === 'ColorLiteral') { | ||
| var [_color, alpha] = toFullHex(callExp); | ||
| var _widget2 = Decoration.widget({ | ||
@@ -140,7 +130,5 @@ widget: new ColorWidget({ | ||
| }); | ||
| widgets.push(_widget2.range(from)); | ||
| } else if (type.name === 'ValueName') { | ||
| var name = callExp; | ||
| if (colors.includes(name)) { | ||
@@ -158,3 +146,2 @@ var _widget3 = Decoration.widget({ | ||
| }); | ||
| widgets.push(_widget3.range(from)); | ||
@@ -166,14 +153,11 @@ } | ||
| } | ||
| return Decoration.set(widgets); | ||
| } | ||
| class ColorWidget extends WidgetType { | ||
| constructor(_ref2) { | ||
| var { | ||
| color, | ||
| colorRaw | ||
| } = _ref2, | ||
| state = _objectWithoutPropertiesLoose(_ref2, _excluded); | ||
| color, | ||
| colorRaw | ||
| } = _ref2, | ||
| state = _objectWithoutPropertiesLoose(_ref2, _excluded); | ||
| super(); | ||
@@ -187,7 +171,5 @@ this.state = void 0; | ||
| } | ||
| eq(other) { | ||
| 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; | ||
| } | ||
| toDOM() { | ||
@@ -206,9 +188,6 @@ var picker = document.createElement('input'); | ||
| } | ||
| ignoreEvent() { | ||
| return false; | ||
| } | ||
| } | ||
| export var colorView = function colorView(showPicker) { | ||
@@ -218,3 +197,2 @@ if (showPicker === void 0) { | ||
| } | ||
| return ViewPlugin.fromClass(class ColorView { | ||
@@ -225,3 +203,2 @@ constructor(view) { | ||
| } | ||
| update(update) { | ||
@@ -231,3 +208,2 @@ if (update.docChanged || update.viewportChanged) { | ||
| } | ||
| var readOnly = update.view.contentDOM.ariaReadOnly === 'true'; | ||
@@ -238,3 +214,2 @@ var editable = update.view.contentDOM.contentEditable === 'true'; | ||
| } | ||
| changePicker(view, canBeEdited) { | ||
@@ -250,3 +225,2 @@ var doms = view.contentDOM.querySelectorAll('input[type=color]'); | ||
| } | ||
| }, { | ||
@@ -265,6 +239,4 @@ decorations: v => v.decorations, | ||
| var converted = target.value; | ||
| if (data.colorType === ColorType.rgb) { | ||
| var funName = colorraw != null && colorraw.match(/^(rgba?)/) ? colorraw == null ? void 0 : colorraw.match(/^(rgba?)/)[0] : undefined; | ||
| if (comma) { | ||
@@ -279,3 +251,2 @@ converted = rgb ? funName + "(" + rgb.r + ", " + rgb.g + ", " + rgb.b + (data.alpha ? ', ' + data.alpha.trim() : '') + ")" : value; | ||
| var _rgb = hexToRgb(value); | ||
| if (_rgb) { | ||
@@ -290,3 +261,2 @@ var { | ||
| } | ||
| view.dispatch({ | ||
@@ -293,0 +263,0 @@ changes: { |
@@ -6,3 +6,2 @@ export function toFullHex(color) { | ||
| } | ||
| if (color.length === 5) { | ||
@@ -12,3 +11,2 @@ // 4-char hex (alpha) | ||
| } | ||
| if (color.length === 9) { | ||
@@ -18,12 +16,10 @@ // 8-char hex (alpha) | ||
| } | ||
| return [color, '']; | ||
| } | ||
| /** https://stackoverflow.com/a/5624139/1334703 */ | ||
| export function rgbToHex(r, g, b) { | ||
| return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); | ||
| } | ||
| /** https://stackoverflow.com/a/5624139/1334703 */ | ||
| export function hexToRgb(hex) { | ||
@@ -37,12 +33,11 @@ var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); | ||
| } | ||
| /** https://css-tricks.com/converting-color-spaces-in-javascript/#aa-rgb-to-hsl */ | ||
| export function RGBToHSL(r, g, b) { | ||
| r /= 255, g /= 255, b /= 255; | ||
| var max = Math.max(r, g, b), | ||
| min = Math.min(r, g, b); | ||
| min = Math.min(r, g, b); | ||
| var h = 0, | ||
| s, | ||
| l = (max + min) / 2; | ||
| s, | ||
| l = (max + min) / 2; | ||
| if (max == min) { | ||
@@ -53,3 +48,2 @@ h = s = 0; // achromatic | ||
| s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | ||
| switch (max) { | ||
@@ -59,7 +53,5 @@ case r: | ||
| break; | ||
| case g: | ||
| h = (b - r) / d + 2; | ||
| break; | ||
| case b: | ||
@@ -69,6 +61,4 @@ h = (r - g) / d + 4; | ||
| } | ||
| h /= 6; | ||
| } | ||
| return { | ||
@@ -75,0 +65,0 @@ h: Math.floor(h * 360), |
| { | ||
| "name": "@uiw/codemirror-extensions-color", | ||
| "version": "4.12.4", | ||
| "version": "4.13.0", | ||
| "description": "Color Extensions for CodeMirror6.", | ||
@@ -5,0 +5,0 @@ "homepage": "https://uiwjs.github.io/react-codemirror/#/extensions/color", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Worsened metrics
- Total package byte prevSize
- decreased by-0.33%
101788