chore(release): publish

- @music163/tango-designer@1.4.4
 - @music163/tango-setting-form@1.2.13
 - @music163/tango-ui@1.4.3

apps/playground/src/helpers/prototypes.ts

@@ -132,6 +132,9 @@ export const nativeDomPrototypes = () => {
             title: '样式',
             group: 'style',
             setter: 'expressionSetter',
+            setterProps: {
+              expressionType: 'cssObject',
+            },
           },
           {
             name: 'className',

apps/storybook/src/setting-form.stories.tsx

@@ -69,6 +69,14 @@ const prototypeHasBasicProps: IComponentPrototype = {
       title: 'codeSetter',
       setter: 'codeSetter',
     },
+    {
+      name: 'style',
+      title: 'codeSetter(cssObject)',
+      setter: 'codeSetter',
+      setterProps: {
+        expressionType: 'cssObject',
+      },
+    },
     {
       name: 'text',
       title: 'textSetter',
@@ -268,6 +276,9 @@ export function InitValues() {
             name: 'style',
             title: 'codeSetter',
             setter: 'codeSetter',
+            setterProps: {
+              expressionType: 'cssObject',
+            },
           },
           {
             name: 'object',

apps/storybook/src/ui/input-code.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Action, InputCode } from '@music163/tango-ui';
+import { Action, InputCode, InputStyleCode } from '@music163/tango-ui';
 import { BlockOutlined } from '@ant-design/icons';
 
 export default {
@@ -28,6 +28,10 @@ export function Basic() {
   );
 }
 
+export function CSS() {
+  return <InputStyleCode enableESLint suffix={<Action icon={<BlockOutlined />} size="small" />} />;
+}
+
 const code = `
 function foo() {
   console.log("test");

packages/designer/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.4](https://github.com/netease/tango/compare/@music163/tango-designer@1.4.3...@music163/tango-designer@1.4.4) (2024-08-16)
+
+### Bug Fixes
+
+- CodeInput 支持 jsx css 代码补全 ([#198](https://github.com/netease/tango/issues/198)) ([6de5488](https://github.com/netease/tango/commit/6de54884b50d683c74d695a8c13184dc0ce8d3c4))
+
 ## [1.4.3](https://github.com/netease/tango/compare/@music163/tango-designer@1.4.2...@music163/tango-designer@1.4.3) (2024-08-09)
 
 ### Bug Fixes

packages/designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-designer",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "lowcode designer",
   "keywords": [
     "react"
@@ -37,8 +37,8 @@
     "@music163/tango-core": "^1.4.2",
     "@music163/tango-helpers": "^1.2.2",
     "@music163/tango-sandbox": "^1.0.11",
-    "@music163/tango-setting-form": "^1.2.12",
-    "@music163/tango-ui": "^1.4.2",
+    "@music163/tango-setting-form": "^1.2.13",
+    "@music163/tango-ui": "^1.4.3",
     "antd": "^4.24.2",
     "cash-dom": "^8.1.2",
     "classnames": "^2.5.1",

packages/designer/src/setters/expression-setter.tsx

@@ -4,7 +4,15 @@ import { Dropdown, Button } from 'antd';
 import { isValidExpressionCode } from '@music163/tango-core';
 import { getValue, IVariableTreeNode, noop } from '@music163/tango-helpers';
 import { CloseCircleFilled, MenuOutlined } from '@ant-design/icons';
-import { Panel, InputCode, Action, DragPanel, PopOutOutlined } from '@music163/tango-ui';
+import {
+  Panel,
+  InputCode,
+  Action,
+  DragPanel,
+  PopOutOutlined,
+  InputCodeProps,
+  InputStyleCode,
+} from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { useWorkspace, useWorkspaceData } from '@music163/tango-context';
 import { VariableTree } from '../components';
@@ -43,6 +51,10 @@ export interface ExpressionSetterProps extends FormItemComponentProps<string> {
   autoCompleteOptions?: string[];
   allowClear?: boolean;
   showOptionsDropDown?: boolean;
+  /**
+   * 表达式类型指定为 css object
+   */
+  expressionType?: 'cssObject';
 }
 
 export function ExpressionSetter(props: ExpressionSetterProps) {
@@ -51,12 +63,13 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
     modalTitle,
     modalTip,
     autoCompleteOptions,
-    placeholder = '在这里输入JS代码',
+    placeholder = '在这里输入代码',
     value: valueProp,
     status,
     allowClear = true,
     newStoreTemplate,
     showOptionsDropDown = true,
+    expressionType,
   } = props;
   // const codeValue = getCodeOfWrappedCode(valueProp);
   const [inputValue, setInputValue] = useState(valueProp);
@@ -79,10 +92,12 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
   const sandbox = useSandboxQuery();
   const evaluateContext = sandbox.window;
 
+  const InputCodeComponent = expressionType === 'cssObject' ? InputStyleCode : InputCode;
+
   return (
     <Box className="ExpressionSetter">
       {/* 同时支持下拉框展示 */}
-      <InputCode
+      <InputCodeComponent
         placeholder={placeholder}
         suffix={
           <Box css={suffixStyle}>
@@ -121,6 +136,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
               autoCompleteOptions={autoCompleteOptions}
               newStoreTemplate={newStoreTemplate}
               value={inputValue}
+              expressionType={expressionType}
               onOk={(value) => {
                 change(value);
               }}
@@ -141,7 +157,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
   );
 }
 
-export interface ExpressionPopoverProps {
+export interface ExpressionPopoverProps extends InputCodeProps {
   title?: string;
   subTitle?: string;
   placeholder?: string;
@@ -154,6 +170,10 @@ export interface ExpressionPopoverProps {
    * 新建 store 的模板代码
    */
   newStoreTemplate?: string;
+  /**
+   * 表达式类型指定为 css object
+   */
+  expressionType?: 'cssObject';
   children?: React.ReactNode;
 }
 
@@ -168,10 +188,12 @@ export function ExpressionPopover({
   autoCompleteOptions,
   newStoreTemplate = CODE_TEMPLATES.newStoreTemplate,
   children,
+  expressionType,
 }: ExpressionPopoverProps) {
   const [exp, setExp] = useState(value ?? defaultValue);
   const [error, setError] = useState('');
   const workspace = useWorkspace();
+  const InputCodeComponent = expressionType === 'cssObject' ? InputStyleCode : InputCode;
 
   const selectNodePath = workspace.selectSource.selected[0]?.codeId;
 
@@ -207,7 +229,7 @@ export function ExpressionPopover({
       body={
         <Box display="flex" flexDirection="column">
           <Box p="m">
-            <InputCode
+            <InputCodeComponent
               shape="inset"
               minHeight="56px"
               maxHeight="160px"

packages/setting-form/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.13](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.12...@music163/tango-setting-form@1.2.13) (2024-08-16)
+
+### Bug Fixes
+
+- CodeInput 支持 jsx css 代码补全 ([#198](https://github.com/netease/tango/issues/198)) ([6de5488](https://github.com/netease/tango/commit/6de54884b50d683c74d695a8c13184dc0ce8d3c4))
+
 ## [1.2.12](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.2.11...@music163/tango-setting-form@1.2.12) (2024-08-09)
 
 **Note:** Version bump only for package @music163/tango-setting-form

packages/setting-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-setting-form",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "description": "setting form of tango-apps",
   "author": "wwsun <ww.sun@outlook.com>",
   "homepage": "",
@@ -30,7 +30,7 @@
     "@ant-design/icons": "^4.8.0",
     "@music163/tango-core": "^1.4.2",
     "@music163/tango-helpers": "^1.2.2",
-    "@music163/tango-ui": "^1.4.2",
+    "@music163/tango-ui": "^1.4.3",
     "antd": "^4.24.2",
     "coral-system": "^1.0.5",
     "mobx": "6.12.3",

packages/setting-form/src/form-item.tsx

@@ -246,7 +246,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
     const CodeSetter = REGISTERED_FORM_ITEM_MAP['codeSetter']?.config?.component;
 
     const setterNode = isCodeSetter ? (
-      <CodeSetter {...expProps} {...baseComponentProps} />
+      <CodeSetter {...expProps} {...baseComponentProps} {...setterProps} />
     ) : (
       renderSetter({
         ...expProps,

packages/ui/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.3](https://github.com/netease/tango/compare/@music163/tango-ui@1.4.2...@music163/tango-ui@1.4.3) (2024-08-16)
+
+### Bug Fixes
+
+- CodeInput 支持 jsx css 代码补全 ([#198](https://github.com/netease/tango/issues/198)) ([6de5488](https://github.com/netease/tango/commit/6de54884b50d683c74d695a8c13184dc0ce8d3c4))
+
 ## [1.4.2](https://github.com/netease/tango/compare/@music163/tango-ui@1.4.1...@music163/tango-ui@1.4.2) (2024-08-09)
 
 ### Bug Fixes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-ui",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "ui widgets of tango",
   "keywords": [
     "react",

packages/ui/src/index.ts

@@ -13,6 +13,7 @@ export * from './menu';
 export * from './panel';
 export * from './toggle-button';
 export * from './input-code';
+export * from './input-style-code';
 export * from './input-list';
 export * from './search';
 export * from './json-view';

packages/ui/src/input-code.tsx

@@ -174,7 +174,7 @@ export function InputCode({
   );
 }
 
-function useInputCode({
+export function useInputCode({
   shape,
   status,
   showLineNumbers,

packages/ui/src/input-style-code.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Box } from 'coral-system';
+import CodeMirror from '@uiw/react-codemirror';
+import { javascript, javascriptLanguage, esLint } from '@codemirror/lang-javascript';
+import { CompletionContext } from '@codemirror/autocomplete';
+import { syntaxTree } from '@codemirror/language';
+import { linter, lintGutter } from '@codemirror/lint';
+import * as eslint from 'eslint-linter-browserify';
+import { jsxCSSproperties, jsxCSSvalues } from './lang/css-object';
+import type { Completion } from '@codemirror/autocomplete';
+import { InputCodeProps, useInputCode } from './input-code';
+
+const eslintConfig = {
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  env: {
+    browser: true,
+  },
+  rules: {},
+};
+
+function completeProperties(from: number, cssOptions: Completion[] | readonly Completion[]) {
+  return {
+    from,
+    options: cssOptions,
+    validFor: /^[\w$]*$/,
+  };
+}
+
+/**
+ *
+ * @param scope 预测 CSS 的补全上下文
+ * @param customOptions 自定义补全选项列表
+ * @returns
+ */
+function buildAutoComplete() {
+  /**
+   * @see context https://codemirror.net/docs/ref/#autocomplete.CompletionContext
+   */
+  return function (context: CompletionContext) {
+    const nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
+    if (nodeBefore.name === 'VariableName') {
+      // match css property name
+      return completeProperties(nodeBefore.from, jsxCSSproperties());
+    }
+    // match css property value
+    else if (nodeBefore.name === 'String') {
+      return completeProperties(nodeBefore.from + 1, jsxCSSvalues);
+    }
+    return null;
+  };
+}
+
+export type InputStyleCodeProps = Omit<
+  InputCodeProps,
+  'autoCompleteContext' | 'autoCompleteOptions'
+>;
+
+export function InputStyleCode({
+  shape = 'solid',
+  suffix,
+  status,
+  showLineNumbers,
+  showFoldGutter,
+  enableESLint = false,
+  ...rest
+}: InputStyleCodeProps) {
+  const extensions = [
+    javascript({ jsx: true }),
+    javascriptLanguage.data.of({
+      autocomplete: buildAutoComplete(),
+    }),
+  ];
+  if (enableESLint) {
+    extensions.push(lintGutter(), linter(esLint(new eslint.Linter(), eslintConfig)));
+  }
+  const { rootStyle, codeSetup } = useInputCode({
+    shape,
+    status,
+    showLineNumbers,
+    showFoldGutter,
+  });
+
+  return (
+    <Box className="InputCode" display="flex" alignItems="center" overflow="hidden" {...rootStyle}>
+      <Box flex="1" overflow="auto">
+        <CodeMirror
+          extensions={extensions}
+          basicSetup={codeSetup}
+          placeholder={'//输入 css 代码'}
+          {...rest}
+        />
+      </Box>
+      {suffix}
+    </Box>
+  );
+}

packages/ui/src/lang/css-object.ts

@@ -0,0 +1,602 @@
+/**
+ * @file: jsx css completion file
+ * @description: fork from https://github.com/codemirror/lang-css/blob/main/src/complete.ts
+ */
+
+import type { Completion } from '@codemirror/autocomplete';
+
+function toCamelCase(input: string): string {
+  return input.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+let _properties: readonly Completion[] | null = null;
+
+// inject global css properties
+export function jsxCSSproperties() {
+  if (!_properties && typeof document === 'object' && document.body) {
+    const { style } = document.body;
+    const names = [];
+    const seen = new Set();
+    for (let prop in style)
+      if (prop !== 'cssText' && prop !== 'cssFloat') {
+        if (typeof style[prop] === 'string') {
+          if (/[A-Z]/.test(prop)) prop = prop.replace(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
+          if (!seen.has(prop)) {
+            names.push(prop);
+            seen.add(prop);
+          }
+        }
+      }
+    _properties = names.sort().map((name) => ({ label: toCamelCase(name), type: 'variable' }));
+  }
+  return _properties || [];
+}
+
+export const jsxCSSvalues = [
+  'above',
+  'absolute',
+  'activeborder',
+  'additive',
+  'activecaption',
+  'after-white-space',
+  'ahead',
+  'alias',
+  'all',
+  'all-scroll',
+  'alphabetic',
+  'alternate',
+  'always',
+  'antialiased',
+  'appworkspace',
+  'asterisks',
+  'attr',
+  'auto',
+  'auto-flow',
+  'avoid',
+  'avoid-column',
+  'avoid-page',
+  'avoid-region',
+  'axis-pan',
+  'background',
+  'backwards',
+  'baseline',
+  'below',
+  'bidi-override',
+  'blink',
+  'block',
+  'block-axis',
+  'bold',
+  'bolder',
+  'border',
+  'border-box',
+  'both',
+  'bottom',
+  'break',
+  'break-all',
+  'break-word',
+  'bullets',
+  'button',
+  'button-bevel',
+  'buttonface',
+  'buttonhighlight',
+  'buttonshadow',
+  'buttontext',
+  'calc',
+  'capitalize',
+  'caps-lock-indicator',
+  'caption',
+  'captiontext',
+  'caret',
+  'cell',
+  'center',
+  'checkbox',
+  'circle',
+  'cjk-decimal',
+  'clear',
+  'clip',
+  'close-quote',
+  'col-resize',
+  'collapse',
+  'color',
+  'color-burn',
+  'color-dodge',
+  'column',
+  'column-reverse',
+  'compact',
+  'condensed',
+  'contain',
+  'content',
+  'contents',
+  'content-box',
+  'context-menu',
+  'continuous',
+  'copy',
+  'counter',
+  'counters',
+  'cover',
+  'crop',
+  'cross',
+  'crosshair',
+  'currentcolor',
+  'cursive',
+  'cyclic',
+  'darken',
+  'dashed',
+  'decimal',
+  'decimal-leading-zero',
+  'default',
+  'default-button',
+  'dense',
+  'destination-atop',
+  'destination-in',
+  'destination-out',
+  'destination-over',
+  'difference',
+  'disc',
+  'discard',
+  'disclosure-closed',
+  'disclosure-open',
+  'document',
+  'dot-dash',
+  'dot-dot-dash',
+  'dotted',
+  'double',
+  'down',
+  'e-resize',
+  'ease',
+  'ease-in',
+  'ease-in-out',
+  'ease-out',
+  'element',
+  'ellipse',
+  'ellipsis',
+  'embed',
+  'end',
+  'ethiopic-abegede-gez',
+  'ethiopic-halehame-aa-er',
+  'ethiopic-halehame-gez',
+  'ew-resize',
+  'exclusion',
+  'expanded',
+  'extends',
+  'extra-condensed',
+  'extra-expanded',
+  'fantasy',
+  'fast',
+  'fill',
+  'fill-box',
+  'fixed',
+  'flat',
+  'flex',
+  'flex-end',
+  'flex-start',
+  'footnotes',
+  'forwards',
+  'from',
+  'geometricPrecision',
+  'graytext',
+  'grid',
+  'groove',
+  'hand',
+  'hard-light',
+  'help',
+  'hidden',
+  'hide',
+  'higher',
+  'highlight',
+  'highlighttext',
+  'horizontal',
+  'hsl',
+  'hsla',
+  'hue',
+  'icon',
+  'ignore',
+  'inactiveborder',
+  'inactivecaption',
+  'inactivecaptiontext',
+  'infinite',
+  'infobackground',
+  'infotext',
+  'inherit',
+  'initial',
+  'inline',
+  'inline-axis',
+  'inline-block',
+  'inline-flex',
+  'inline-grid',
+  'inline-table',
+  'inset',
+  'inside',
+  'intrinsic',
+  'invert',
+  'italic',
+  'justify',
+  'keep-all',
+  'landscape',
+  'large',
+  'larger',
+  'left',
+  'level',
+  'lighter',
+  'lighten',
+  'line-through',
+  'linear',
+  'linear-gradient',
+  'lines',
+  'list-item',
+  'listbox',
+  'listitem',
+  'local',
+  'logical',
+  'loud',
+  'lower',
+  'lower-hexadecimal',
+  'lower-latin',
+  'lower-norwegian',
+  'lowercase',
+  'ltr',
+  'luminosity',
+  'manipulation',
+  'match',
+  'matrix',
+  'matrix3d',
+  'medium',
+  'menu',
+  'menutext',
+  'message-box',
+  'middle',
+  'min-intrinsic',
+  'mix',
+  'monospace',
+  'move',
+  'multiple',
+  'multiple_mask_images',
+  'multiply',
+  'n-resize',
+  'narrower',
+  'ne-resize',
+  'nesw-resize',
+  'no-close-quote',
+  'no-drop',
+  'no-open-quote',
+  'no-repeat',
+  'none',
+  'normal',
+  'not-allowed',
+  'nowrap',
+  'ns-resize',
+  'numbers',
+  'numeric',
+  'nw-resize',
+  'nwse-resize',
+  'oblique',
+  'opacity',
+  'open-quote',
+  'optimizeLegibility',
+  'optimizeSpeed',
+  'outset',
+  'outside',
+  'outside-shape',
+  'overlay',
+  'overline',
+  'padding',
+  'padding-box',
+  'painted',
+  'page',
+  'paused',
+  'perspective',
+  'pinch-zoom',
+  'plus-darker',
+  'plus-lighter',
+  'pointer',
+  'polygon',
+  'portrait',
+  'pre',
+  'pre-line',
+  'pre-wrap',
+  'preserve-3d',
+  'progress',
+  'push-button',
+  'radial-gradient',
+  'radio',
+  'read-only',
+  'read-write',
+  'read-write-plaintext-only',
+  'rectangle',
+  'region',
+  'relative',
+  'repeat',
+  'repeating-linear-gradient',
+  'repeating-radial-gradient',
+  'repeat-x',
+  'repeat-y',
+  'reset',
+  'reverse',
+  'rgb',
+  'rgba',
+  'ridge',
+  'right',
+  'rotate',
+  'rotate3d',
+  'rotateX',
+  'rotateY',
+  'rotateZ',
+  'round',
+  'row',
+  'row-resize',
+  'row-reverse',
+  'rtl',
+  'run-in',
+  'running',
+  's-resize',
+  'sans-serif',
+  'saturation',
+  'scale',
+  'scale3d',
+  'scaleX',
+  'scaleY',
+  'scaleZ',
+  'screen',
+  'scroll',
+  'scrollbar',
+  'scroll-position',
+  'se-resize',
+  'self-start',
+  'self-end',
+  'semi-condensed',
+  'semi-expanded',
+  'separate',
+  'serif',
+  'show',
+  'single',
+  'skew',
+  'skewX',
+  'skewY',
+  'skip-white-space',
+  'slide',
+  'slider-horizontal',
+  'slider-vertical',
+  'sliderthumb-horizontal',
+  'sliderthumb-vertical',
+  'slow',
+  'small',
+  'small-caps',
+  'small-caption',
+  'smaller',
+  'soft-light',
+  'solid',
+  'source-atop',
+  'source-in',
+  'source-out',
+  'source-over',
+  'space',
+  'space-around',
+  'space-between',
+  'space-evenly',
+  'spell-out',
+  'square',
+  'start',
+  'static',
+  'status-bar',
+  'stretch',
+  'stroke',
+  'stroke-box',
+  'sub',
+  'subpixel-antialiased',
+  'svg_masks',
+  'super',
+  'sw-resize',
+  'symbolic',
+  'symbols',
+  'system-ui',
+  'table',
+  'table-caption',
+  'table-cell',
+  'table-column',
+  'table-column-group',
+  'table-footer-group',
+  'table-header-group',
+  'table-row',
+  'table-row-group',
+  'text',
+  'text-bottom',
+  'text-top',
+  'textarea',
+  'textfield',
+  'thick',
+  'thin',
+  'threeddarkshadow',
+  'threedface',
+  'threedhighlight',
+  'threedlightshadow',
+  'threedshadow',
+  'to',
+  'top',
+  'transform',
+  'translate',
+  'translate3d',
+  'translateX',
+  'translateY',
+  'translateZ',
+  'transparent',
+  'ultra-condensed',
+  'ultra-expanded',
+  'underline',
+  'unidirectional-pan',
+  'unset',
+  'up',
+  'upper-latin',
+  'uppercase',
+  'url',
+  'var',
+  'vertical',
+  'vertical-text',
+  'view-box',
+  'visible',
+  'visibleFill',
+  'visiblePainted',
+  'visibleStroke',
+  'visual',
+  'w-resize',
+  'wait',
+  'wave',
+  'wider',
+  'window',
+  'windowframe',
+  'windowtext',
+  'words',
+  'wrap',
+  'wrap-reverse',
+  'x-large',
+  'x-small',
+  'xor',
+  'xx-large',
+  'xx-small',
+]
+  .map((name) => ({ label: name, type: 'text' }))
+  .concat(
+    [
+      'aliceblue',
+      'antiquewhite',
+      'aqua',
+      'aquamarine',
+      'azure',
+      'beige',
+      'bisque',
+      'black',
+      'blanchedalmond',
+      'blue',
+      'blueviolet',
+      'brown',
+      'burlywood',
+      'cadetblue',
+      'chartreuse',
+      'chocolate',
+      'coral',
+      'cornflowerblue',
+      'cornsilk',
+      'crimson',
+      'cyan',
+      'darkblue',
+      'darkcyan',
+      'darkgoldenrod',
+      'darkgray',
+      'darkgreen',
+      'darkkhaki',
+      'darkmagenta',
+      'darkolivegreen',
+      'darkorange',
+      'darkorchid',
+      'darkred',
+      'darksalmon',
+      'darkseagreen',
+      'darkslateblue',
+      'darkslategray',
+      'darkturquoise',
+      'darkviolet',
+      'deeppink',
+      'deepskyblue',
+      'dimgray',
+      'dodgerblue',
+      'firebrick',
+      'floralwhite',
+      'forestgreen',
+      'fuchsia',
+      'gainsboro',
+      'ghostwhite',
+      'gold',
+      'goldenrod',
+      'gray',
+      'grey',
+      'green',
+      'greenyellow',
+      'honeydew',
+      'hotpink',
+      'indianred',
+      'indigo',
+      'ivory',
+      'khaki',
+      'lavender',
+      'lavenderblush',
+      'lawngreen',
+      'lemonchiffon',
+      'lightblue',
+      'lightcoral',
+      'lightcyan',
+      'lightgoldenrodyellow',
+      'lightgray',
+      'lightgreen',
+      'lightpink',
+      'lightsalmon',
+      'lightseagreen',
+      'lightskyblue',
+      'lightslategray',
+      'lightsteelblue',
+      'lightyellow',
+      'lime',
+      'limegreen',
+      'linen',
+      'magenta',
+      'maroon',
+      'mediumaquamarine',
+      'mediumblue',
+      'mediumorchid',
+      'mediumpurple',
+      'mediumseagreen',
+      'mediumslateblue',
+      'mediumspringgreen',
+      'mediumturquoise',
+      'mediumvioletred',
+      'midnightblue',
+      'mintcream',
+      'mistyrose',
+      'moccasin',
+      'navajowhite',
+      'navy',
+      'oldlace',
+      'olive',
+      'olivedrab',
+      'orange',
+      'orangered',
+      'orchid',
+      'palegoldenrod',
+      'palegreen',
+      'paleturquoise',
+      'palevioletred',
+      'papayawhip',
+      'peachpuff',
+      'peru',
+      'pink',
+      'plum',
+      'powderblue',
+      'purple',
+      'rebeccapurple',
+      'red',
+      'rosybrown',
+      'royalblue',
+      'saddlebrown',
+      'salmon',
+      'sandybrown',
+      'seagreen',
+      'seashell',
+      'sienna',
+      'silver',
+      'skyblue',
+      'slateblue',
+      'slategray',
+      'snow',
+      'springgreen',
+      'steelblue',
+      'tan',
+      'teal',
+      'thistle',
+      'tomato',
+      'turquoise',
+      'violet',
+      'wheat',
+      'white',
+      'whitesmoke',
+      'yellow',
+      'yellowgreen',
+    ].map((name) => ({ label: name, type: 'text' })),
+  );

yarn.lock

@@ -17697,7 +17697,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -17810,7 +17819,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -17824,6 +17833,13 @@ strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz"
@@ -19360,7 +19376,7 @@ workerpool@^9.1.1:
   resolved "https://registry.npmmirror.com/workerpool/-/workerpool-9.1.1.tgz#9ba4d534a79a5517c1e1b9d1014151516829be8d"
   integrity sha512-EFoFTSEo9m4V4wNrwzVRjxnf/E/oBpOzcI/R5CIugJhl9RsCiq525rszo4AtqcjQQoqFdu2E3H82AnbtpaQHvg==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -19378,6 +19394,15 @@ wrap-ansi@^6.0.1:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz"