(core) Add color options to choice config UI

Summary:
Includes overhauled choice configuration UI for choice and choice list
columns based on the TokenField library. Features include rich copy
and paste support, keyboard shortcuts for token manipulation, and
drag-and-drop support for arrangement.

Configured choice colors are visible throughout the application, such
as in the autocomplete window for both choice and choice list cells, and
in table cells directly.

Choice cells in particular are now styled closer to choice list cells,
and render their contents as colored tokens. Choice cells now also
use the improved autocomplete component that choice lists use, with
some room for future improvement (e.g. allowing new choice items to be
added inline like in choice list's autocomplete).

Also includes a minor fix for choice list cells where right align
was not working.

Test Plan: Browser tests updated.

Reviewers: jarek, dsagal

Reviewed By: jarek, dsagal

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D2890

app/client/widgets/ChoiceEditor.js

@@ -2,7 +2,14 @@ var _ = require('underscore');
 var dispose = require('../lib/dispose');
 var TextEditor = require('./TextEditor');
 
-const {autocomplete} = require('app/client/ui2018/menus');
+const {Autocomplete} = require('app/client/lib/autocomplete');
+const {ACIndexImpl, buildHighlightedDom} = require('app/client/lib/ACIndex');
+const {ChoiceItem, cssChoiceList, cssItem, cssItemLabel, cssMatchText} = require('app/client/widgets/ChoiceListEditor');
+const {cssRefList} = require('app/client/widgets/ReferenceEditor');
+const {getFillColor, getTextColor} = require('app/client/widgets/ChoiceTextBox');
+const {menuCssClass} = require('app/client/ui2018/menus');
+const {testId} = require('app/client/ui2018/cssVars');
+const {dom} = require('grainjs');
 
 /**
  * ChoiceEditor - TextEditor with a dropdown for possible choices.
@@ -11,17 +18,52 @@ function ChoiceEditor(options) {
   TextEditor.call(this, options);
 
   this.choices = options.field.widgetOptionsJson.peek().choices || [];
-
-  // Add autocomplete if there are any choices to select from
-  if (this.choices.length > 0 && !options.readonly) {
-
-    autocomplete(this.textInput, this.choices, {
-      allowNothingSelected: true,
-      onClick: () => this.options.commands.fieldEditSave(),
-    });
-  }
+  this.choiceOptions = options.field.widgetOptionsJson.peek().choiceOptions || {};
 }
+
 dispose.makeDisposable(ChoiceEditor);
 _.extend(ChoiceEditor.prototype, TextEditor.prototype);
 
+ChoiceEditor.prototype.getCellValue = function() {
+  const selectedItem = this.autocomplete && this.autocomplete.getSelectedItem();
+  return selectedItem ? selectedItem.label : TextEditor.prototype.getCellValue.call(this);
+}
+
+ChoiceEditor.prototype.renderACItem = function(item, highlightFunc) {
+  const options = this.choiceOptions[item.label];
+  const fillColor = getFillColor(options);
+  const textColor = getTextColor(options);
+
+  return cssItem(
+    cssItemLabel(
+      buildHighlightedDom(item.label, highlightFunc, cssMatchText),
+      dom.style('background-color', fillColor),
+      dom.style('color', textColor),
+      testId('choice-editor-item-label')
+    ),
+    testId('choice-editor-item'),
+  );
+}
+
+ChoiceEditor.prototype.attach = function(cellElem) {
+  TextEditor.prototype.attach.call(this, cellElem);
+  // Don't create autocomplete if readonly, or if there are no choices.
+  if (this.options.readonly || this.choices.length === 0) { return; }
+
+  const acItems = this.choices.map(c => new ChoiceItem(c, false));
+  const acIndex = new ACIndexImpl(acItems);
+  const acOptions = {
+    popperOptions: {
+      placement: 'bottom'
+    },
+    menuCssClass: menuCssClass + ' ' + cssRefList.className + ' ' + cssChoiceList.className + ' test-autocomplete',
+    search: (term) => acIndex.search(term),
+    renderItem: (item, highlightFunc) => this.renderACItem(item, highlightFunc),
+    getItemText: (item) => item.label,
+    onClick: () => this.options.commands.fieldEditSave(),
+  };
+
+  this.autocomplete = Autocomplete.create(this, this.textInput, acOptions);
+}
+
 module.exports = ChoiceEditor;

app/client/widgets/ChoiceListCell.ts

@@ -1,6 +1,11 @@
 import {DataRowModel} from 'app/client/models/DataRowModel';
-import {colors} from 'app/client/ui2018/cssVars';
-import {ChoiceTextBox} from 'app/client/widgets/ChoiceTextBox';
+import {colors, testId} from 'app/client/ui2018/cssVars';
+import {
+  ChoiceOptionsByName,
+  ChoiceTextBox,
+  getFillColor,
+  getTextColor
+} from 'app/client/widgets/ChoiceTextBox';
 import {CellValue} from 'app/common/DocActions';
 import {decodeObject} from 'app/plugin/objtypes';
 import {Computed, dom, styled} from 'grainjs';
@@ -17,21 +22,28 @@ export class ChoiceListCell extends ChoiceTextBox {
     return cssChoiceList(
       dom.cls('field_clip'),
       cssChoiceList.cls('-wrap', this.wrapping),
-      dom.style('justify-content', this.alignment),
+      dom.style('justify-content', use => use(this.alignment) === 'right' ? 'flex-end' : use(this.alignment)),
       dom.domComputed((use) => {
-        return use(row._isAddRow) ? null : [use(value), use(this._choiceSet)] as [CellValue, Set<string>];
+        return use(row._isAddRow) ? null :
+          [
+            use(value), use(this._choiceSet),
+            use(this.getChoiceOptions())
+          ] as [CellValue, Set<string>, ChoiceOptionsByName];
       }, (input) => {
         if (!input) { return null; }
-        const [rawValue, choiceSet] = input;
+        const [rawValue, choiceSet, choiceOptionsByName] = input;
         const val = decodeObject(rawValue);
         if (!val) { return null; }
         // Handle any unexpected values we might get (non-array, or array with non-strings).
         const tokens: unknown[] = Array.isArray(val) ? val : [val];
         return tokens.map(token =>
-          cssToken(
-            String(token),
-            cssInvalidToken.cls('-invalid', !choiceSet.has(token as string))
-          )
+            cssToken(
+              String(token),
+              cssInvalidToken.cls('-invalid', !choiceSet.has(token as string)),
+              dom.style('background-color', getFillColor(choiceOptionsByName.get(String(token)))),
+              dom.style('color', getTextColor(choiceOptionsByName.get(String(token)))),
+              testId('choice-list-cell-token')
+            ),
         );
       }),
     );
@@ -57,7 +69,6 @@ const cssToken = styled('div', `
   min-width: 0px;
   overflow: hidden;
   border-radius: 3px;
-  background-color: ${colors.mediumGreyOpaque};
   padding: 1px 4px;
   margin: 2px;
   line-height: 16px;
@@ -69,7 +80,4 @@ export const cssInvalidToken = styled('div', `
     box-shadow: inset 0 0 0 1px var(--grist-color-error);
     color: ${colors.slate};
   }
-  &-invalid.selected {
-    background-color: ${colors.lightGrey} !important;
-  }
 `);

app/client/widgets/ChoiceListEditor.ts

@@ -1,20 +1,21 @@
 import {createGroup} from 'app/client/components/commands';
-import {ACIndexImpl, ACItem, ACResults} from 'app/client/lib/ACIndex';
+import {ACIndexImpl, ACItem, ACResults, buildHighlightedDom, HighlightFunc} from 'app/client/lib/ACIndex';
 import {IAutocompleteOptions} from 'app/client/lib/autocomplete';
 import {IToken, TokenField, tokenFieldStyles} from 'app/client/lib/TokenField';
-import {colors, testId} from 'app/client/ui2018/cssVars';
+import {colors, testId, vars} from 'app/client/ui2018/cssVars';
 import {menuCssClass} from 'app/client/ui2018/menus';
 import {cssInvalidToken} from 'app/client/widgets/ChoiceListCell';
 import {createMobileButtons, getButtonMargins} from 'app/client/widgets/EditorButtons';
 import {EditorPlacement} from 'app/client/widgets/EditorPlacement';
 import {NewBaseEditor, Options} from 'app/client/widgets/NewBaseEditor';
-import {cssRefList, renderACItem} from 'app/client/widgets/ReferenceEditor';
+import {cssPlusButton, cssPlusIcon, cssRefList} from 'app/client/widgets/ReferenceEditor';
 import {csvEncodeRow} from 'app/common/csvFormat';
 import {CellValue} from "app/common/DocActions";
 import {decodeObject, encodeObject} from 'app/plugin/objtypes';
 import {dom, styled} from 'grainjs';
+import {ChoiceOptions, getFillColor, getTextColor} from 'app/client/widgets/ChoiceTextBox';
 
-class ChoiceItem implements ACItem, IToken {
+export class ChoiceItem implements ACItem, IToken {
   public cleanText: string = this.label.toLowerCase().trim();
   constructor(
     public label: string,
@@ -27,7 +28,7 @@ export class ChoiceListEditor extends NewBaseEditor {
   protected cellEditorDiv: HTMLElement;
   protected commandGroup: any;
 
-  private _tokenField: TokenField;
+  private _tokenField: TokenField<ChoiceItem>;
   private _textInput: HTMLInputElement;
   private _dom: HTMLElement;
   private _editorPlacement: EditorPlacement;
@@ -40,10 +41,14 @@ export class ChoiceListEditor extends NewBaseEditor {
   private _enableAddNew: boolean = true;
   private _showAddNew: boolean = false;
 
+  private _choiceOptionsByName: ChoiceOptions;
+
   constructor(options: Options) {
     super(options);
 
     const choices: string[] = options.field.widgetOptionsJson.peek().choices || [];
+    this._choiceOptionsByName = options.field.widgetOptionsJson
+      .peek().choiceOptions || {};
     const acItems = choices.map(c => new ChoiceItem(c, false));
     const choiceSet = new Set(choices);
 
@@ -51,8 +56,7 @@ export class ChoiceListEditor extends NewBaseEditor {
     const acOptions: IAutocompleteOptions<ChoiceItem> = {
       menuCssClass: menuCssClass + ' ' + cssRefList.className + ' ' + cssChoiceList.className + ' test-autocomplete',
       search: async (term: string) => this._maybeShowAddNew(acIndex.search(term), term),
-      renderItem: (item: ChoiceItem, highlightFunc) =>
-        renderACItem(item.label, highlightFunc, item.isNew || false, this._showAddNew),
+      renderItem: (item, highlightFunc) => this._renderACItem(item, highlightFunc),
       getItemText: (item) => item.label,
     };
 
@@ -64,9 +68,14 @@ export class ChoiceListEditor extends NewBaseEditor {
     const startLabels: unknown[] = options.editValue || !Array.isArray(cellValue) ? [] : cellValue;
     const startTokens = startLabels.map(label => new ChoiceItem(String(label), !choiceSet.has(String(label))));
 
-    this._tokenField = TokenField.create(this, {
+    this._tokenField = TokenField.ctor<ChoiceItem>().create(this, {
       initialValue: startTokens,
-      renderToken: item => [item.label, cssInvalidToken.cls('-invalid', (item as ChoiceItem).isInvalid)],
+      renderToken: item => [
+        item.label,
+        dom.style('background-color', getFillColor(this._choiceOptionsByName[item.label])),
+        dom.style('color', getTextColor(this._choiceOptionsByName[item.label])),
+        cssInvalidToken.cls('-invalid', item.isInvalid)
+      ],
       createToken: label => new ChoiceItem(label, !choiceSet.has(label)),
       acOptions,
       openAutocompleteOnFocus: true,
@@ -138,7 +147,7 @@ export class ChoiceListEditor extends NewBaseEditor {
   }
 
   public async prepForSave() {
-    const tokens = this._tokenField.tokensObs.get() as ChoiceItem[];
+    const tokens = this._tokenField.tokensObs.get();
     const newChoices = tokens.filter(t => t.isNew).map(t => t.label);
     if (newChoices.length > 0) {
       const choices = this.options.field.widgetOptionsJson.prop('choices');
@@ -205,6 +214,27 @@ export class ChoiceListEditor extends NewBaseEditor {
     }
     return result;
   }
+
+  private _renderACItem(item: ChoiceItem, highlightFunc: HighlightFunc) {
+    const options = this._choiceOptionsByName[item.label];
+    const fillColor = getFillColor(options);
+    const textColor = getTextColor(options);
+
+    return cssItem(
+      (item.isNew ?
+        [cssItem.cls('-new'), cssPlusButton(cssPlusIcon('Plus'))] :
+        [cssItem.cls('-with-new', this._showAddNew)]
+      ),
+      cssItemLabel(
+        buildHighlightedDom(item.label, highlightFunc, cssMatchText),
+        dom.style('background-color', fillColor),
+        dom.style('color', textColor),
+        testId('choice-list-editor-item-label')
+      ),
+      testId('choice-list-editor-item'),
+      item.isNew ? testId('choice-list-editor-new-item') : null,
+    );
+  }
 }
 
 const cssCellEditor = styled('div', `
@@ -228,6 +258,10 @@ const cssToken = styled(tokenFieldStyles.cssToken, `
   padding: 1px 4px;
   margin: 2px;
   line-height: 16px;
+
+  &.selected {
+    box-shadow: inset 0 0 0 1px ${colors.lightGreen};
+  }
 `);
 
 const cssDeleteButton = styled(tokenFieldStyles.cssDeleteButton, `
@@ -280,7 +314,7 @@ const cssInputSizer = styled('div', `
 `);
 
 // Set z-index to be higher than the 1000 set for .cell_editor.
-const cssChoiceList = styled('div', `
+export const cssChoiceList = styled('div', `
   z-index: 1001;
   box-shadow: 0 0px 8px 0 rgba(38,38,51,0.6)
 `);
@@ -289,3 +323,49 @@ const cssReadonlyStyle = styled('div', `
   padding-left: 16px;
   background: white;
 `);
+
+// We need to know the height of the sticky "+" element.
+const addNewHeight = '37px';
+
+export const cssItem = styled('li', `
+  display: block;
+  font-family: ${vars.fontFamily};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  outline: none;
+  padding: var(--weaseljs-menu-item-padding, 8px 24px);
+  cursor: pointer;
+
+  &.selected {
+    background-color: ${colors.mediumGreyOpaque};
+    color: ${colors.dark};
+  }
+  &-with-new {
+    scroll-margin-bottom: ${addNewHeight};
+  }
+  &-new {
+    display: flex;
+    align-items: center;
+    color: ${colors.slate};
+    position: sticky;
+    bottom: 0px;
+    height: ${addNewHeight};
+    background-color: white;
+    border-top: 1px solid ${colors.mediumGreyOpaque};
+    scroll-margin-bottom: initial;
+  }
+  &-new.selected {
+    color: ${colors.lightGrey};
+  }
+`);
+
+export const cssItemLabel = styled('div', `
+  display: inline-block;
+  padding: 1px 4px;
+  border-radius: 3px;
+`);
+
+export const cssMatchText = styled('span', `
+  text-decoration: underline;
+`);

app/client/widgets/ChoiceListEntry.ts

@@ -0,0 +1,411 @@
+import {basicButton, primaryButton} from 'app/client/ui2018/buttons';
+import {colors, testId} from 'app/client/ui2018/cssVars';
+import {Computed, Disposable, dom, DomContents, DomElementArg, Holder, Observable, styled} from 'grainjs';
+import {icon} from 'app/client/ui2018/icons';
+import isEqual = require('lodash/isEqual');
+import uniqBy = require('lodash/uniqBy');
+import {IToken, TokenField} from '../lib/TokenField';
+import {ChoiceOptionsByName, DEFAULT_TEXT_COLOR, IChoiceOptions} from 'app/client/widgets/ChoiceTextBox';
+import {colorButton} from 'app/client/ui2018/ColorSelect';
+import {createCheckers, iface, ITypeSuite, opt} from 'ts-interface-checker';
+
+class ChoiceItem implements IToken {
+  constructor(
+    public label: string,
+    public options?: IChoiceOptions,
+  ) {}
+}
+
+const ChoiceItemType = iface([], {
+  label: "string",
+  options: opt("ChoiceOptionsType"),
+});
+
+const ChoiceOptionsType = iface([], {
+  textColor: "string",
+  fillColor: "string",
+});
+
+const choiceTypes: ITypeSuite = {
+  ChoiceItemType,
+  ChoiceOptionsType,
+};
+
+const {ChoiceItemType: ChoiceItemChecker} = createCheckers(choiceTypes);
+
+const UNSET_COLOR = '#ffffff';
+
+/**
+ * ChoiceListEntry - Editor for choices and choice colors.
+ *
+ * The ChoiceListEntry can be in one of two modes: edit or view (default).
+ *
+ * When in edit mode, it displays a custom, vertical TokenField that allows for entry
+ * of new choice values. Once changes are saved, the new values become valid choices,
+ * and can be used in Choice and Choice List columns. Each choice in the TokenField
+ * also includes a color picker button to customize the fill/text color of the choice.
+ * The same capabilities of TokenField, such as undo/redo and rich copy/paste support,
+ * are present in ChoiceListEntry as well.
+ *
+ * When in view mode, it looks similar to edit mode, but hides the bottom input and the
+ * color picker dropdown buttons. Past 6 choices, it stops rendering individual choices
+ * and only shows the total number of additional choices that are hidden, and can be
+ * seen when edit mode is activated.
+ *
+ * Usage:
+ * > dom.create(ChoiceListEntry, values, options, (vals, options) => {});
+ */
+export class ChoiceListEntry extends Disposable {
+  private _isEditing: Observable<boolean> = Observable.create(this, false);
+  private _tokenFieldHolder: Holder<TokenField<ChoiceItem>> = Holder.create(this);
+
+  constructor(
+    private _values: Observable<string[]>,
+    private _choiceOptionsByName: Observable<ChoiceOptionsByName>,
+    private _onSave: (values: string[], choiceOptions: ChoiceOptionsByName) => void
+  ) {
+    super();
+
+    // Since the saved values can be modified outside the ChoiceListEntry (via undo/redo),
+    // add a listener to update edit status on changes.
+    this.autoDispose(this._values.addListener(() => {
+      this._cancel();
+    }));
+  }
+
+  // Arg maxRows indicates the number of rows to display when the editor is inactive.
+  public buildDom(maxRows: number = 6): DomContents {
+    return dom.domComputed(this._isEditing, (editMode) => {
+      if (editMode) {
+        const tokenField = TokenField.ctor<ChoiceItem>().create(this._tokenFieldHolder, {
+          initialValue: this._values.get().map(label => {
+            return new ChoiceItem(label, this._choiceOptionsByName.get().get(label));
+          }),
+          renderToken: token => this._renderToken(token),
+          createToken: label => label.trim() !== '' ? new ChoiceItem(label.trim()) : undefined,
+          clipboardToTokens: clipboardToChoices,
+          tokensToClipboard: (tokens, clipboard) => {
+            // Save tokens as JSON for parts of the UI that support deserializing it properly (e.g. ChoiceListEntry).
+            clipboard.setData('application/json', JSON.stringify(tokens));
+            // Save token labels as newline-separated text, for general use (e.g. pasting into cells).
+            clipboard.setData('text/plain', tokens.map(t => t.label).join('\n'));
+          },
+          openAutocompleteOnFocus: false,
+          styles: {cssTokenField, cssToken, cssTokenInput, cssInputWrapper, cssDeleteButton, cssDeleteIcon},
+          keyBindings: {
+            previous: 'ArrowUp',
+            next: 'ArrowDown'
+          }
+        });
+
+        return cssVerticalFlex(
+          cssListBox(
+            elem => {
+              tokenField.attach(elem);
+              this._focusOnOpen(tokenField.getTextInput());
+            },
+            testId('choice-list-entry')
+          ),
+          cssButtonRow(
+            primaryButton('Save',
+              dom.on('click', () => this._save() ),
+              testId('choice-list-entry-save')
+            ),
+            basicButton('Cancel',
+              dom.on('click', () => this._cancel()),
+              testId('choice-list-entry-cancel')
+            )
+          ),
+          dom.onKeyDown({Escape$: () => this._save()}),
+        );
+      } else {
+        const someValues = Computed.create(null, this._values, (_use, values) =>
+          values.length <= maxRows ? values : values.slice(0, maxRows - 1));
+
+        return cssVerticalFlex(
+          cssListBoxInactive(
+            dom.autoDispose(someValues),
+            dom.maybe(use => use(someValues).length === 0, () =>
+              row('No choices configured')
+            ),
+            dom.domComputed(this._choiceOptionsByName, (choiceOptions) =>
+              dom.forEach(someValues, val => {
+                return row(
+                  cssTokenColorInactive(
+                    dom.style('background-color', getFillColor(choiceOptions.get(val))),
+                    testId('choice-list-entry-color')
+                  ),
+                  cssTokenLabel(val)
+                );
+              }),
+            ),
+            // Show description row for any remaining rows
+            dom.maybe(use => use(this._values).length > maxRows, () =>
+              row(
+                dom.text((use) => `+${use(this._values).length - (maxRows - 1)} more`)
+              )
+            ),
+            dom.on('click', () => this._startEditing()),
+            testId('choice-list-entry')
+          ),
+          cssButtonRow(
+            primaryButton('Edit',
+              dom.on('click', () => this._startEditing()),
+              testId('choice-list-entry-edit')
+            )
+          )
+        );
+      }
+    });
+  }
+
+  private _startEditing(): void {
+    this._isEditing.set(true);
+  }
+
+  private _save(): void {
+    const tokenField = this._tokenFieldHolder.get();
+    if (!tokenField) { return; }
+
+    const tokens = tokenField.tokensObs.get();
+    const tokenInputVal = tokenField.getTextInput().value.trim();
+    if (tokenInputVal !== '') {
+      tokens.push(new ChoiceItem(tokenInputVal));
+    }
+
+    const newTokens = uniqBy(tokens, t => t.label);
+    const newValues = newTokens.map(t => t.label);
+    const newOptions: ChoiceOptionsByName = new Map();
+    for (const t of newTokens) {
+      if (t.options) {
+        newOptions.set(t.label, {
+          fillColor: t.options.fillColor,
+          textColor: t.options.textColor
+        });
+      }
+    }
+
+    // Call user save function if the values and/or options have changed.
+    if (!isEqual(this._values.get(), newValues)
+      || !isEqual(this._choiceOptionsByName.get(), newOptions)) {
+      // Because of the listener on this._values, editing will stop if values are updated.
+      this._onSave(newValues, newOptions);
+    } else {
+      this._cancel();
+    }
+  }
+
+  private _cancel(): void {
+    this._isEditing.set(false);
+  }
+
+  private _focusOnOpen(elem: HTMLInputElement): void {
+    setTimeout(() => focus(elem), 0);
+  }
+
+  private _renderToken(token: ChoiceItem) {
+    const fillColorObs = Observable.create(null, getFillColor(token.options));
+    const textColorObs = Observable.create(null, getTextColor(token.options));
+
+    return cssColorAndLabel(
+      dom.autoDispose(fillColorObs),
+      dom.autoDispose(textColorObs),
+      colorButton(textColorObs,
+        fillColorObs,
+        async () => {
+          const tokenField = this._tokenFieldHolder.get();
+          if (!tokenField) { return; }
+
+          const fillColor = fillColorObs.get();
+          const textColor = textColorObs.get();
+          tokenField.replaceToken(token.label, new ChoiceItem(token.label, {fillColor, textColor}));
+        }
+      ),
+      cssTokenLabel(token.label)
+    );
+  }
+}
+
+// Helper to focus on the token input and select/scroll to the bottom
+function focus(elem: HTMLInputElement) {
+  elem.focus();
+  elem.setSelectionRange(elem.value.length, elem.value.length);
+  elem.scrollTo(0, elem.scrollHeight);
+}
+
+// Build a display row with the given DOM arguments
+function row(...domArgs: DomElementArg[]): Element {
+  return cssListRow(
+    ...domArgs,
+    testId('choice-list-entry-row')
+  );
+}
+
+function getTextColor(choiceOptions?: IChoiceOptions) {
+  return choiceOptions?.textColor ?? DEFAULT_TEXT_COLOR;
+}
+
+function getFillColor(choiceOptions?: IChoiceOptions) {
+  return choiceOptions?.fillColor ?? UNSET_COLOR;
+}
+
+/**
+ * Converts clipboard contents (if any) to choices.
+ *
+ * Attempts to convert from JSON first, if clipboard contains valid JSON.
+ * If conversion is not possible, falls back to converting from newline-separated plaintext.
+ */
+function clipboardToChoices(clipboard: DataTransfer): ChoiceItem[] {
+  const maybeTokens = clipboard.getData('application/json');
+  if (maybeTokens && isJSON(maybeTokens)) {
+    const tokens = JSON.parse(maybeTokens);
+    if (Array.isArray(tokens) && tokens.every((t): t is ChoiceItem => ChoiceItemChecker.test(t))) {
+      return tokens;
+    }
+  }
+
+  const maybeText = clipboard.getData('text/plain');
+  if (maybeText) {
+    return maybeText.split('\n').filter(t => t.trim() !== '').map(label => new ChoiceItem(label));
+  }
+
+  return [];
+}
+
+function isJSON(string: string) {
+  try {
+    JSON.parse(string);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+const cssListBox = styled('div', `
+  width: 100%;
+  padding: 1px;
+  line-height: 1.5;
+  padding-left: 4px;
+  padding-right: 4px;
+  border: 1px solid ${colors.hover};
+  border-radius: 4px;
+  background-color: white;
+`);
+
+const cssListBoxInactive = styled(cssListBox, `
+  cursor: pointer;
+  border: 1px solid ${colors.darkGrey};
+
+  &:hover {
+    border: 1px solid ${colors.hover};
+  }
+`);
+
+const cssListRow = styled('div', `
+  display: flex;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  padding: 4px 8px;
+  color: ${colors.dark};
+  background-color: ${colors.mediumGrey};
+  border-radius: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`);
+
+const cssTokenField = styled('div', `
+  &.token-dragactive {
+    cursor: grabbing;
+  }
+`);
+
+const cssToken = styled(cssListRow, `
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  user-select: none;
+  cursor: grab;
+
+  &.selected {
+    background-color: ${colors.darkGrey};
+  }
+  &.token-dragging {
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0.7;
+  }
+  .${cssTokenField.className}.token-dragactive & {
+    cursor: unset;
+  }
+`);
+
+const cssTokenColorInactive = styled('div', `
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+`);
+
+const cssTokenLabel = styled('span', `
+  margin-left: 6px;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`);
+
+const cssTokenInput = styled('input', `
+  padding-top: 4px;
+  padding-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: auto;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  outline: none;
+`);
+
+const cssInputWrapper = styled('div', `
+  margin-top: 4px;
+  margin-bottom: 4px;
+  position: relative;
+  flex: auto;
+  display: flex;
+`);
+
+const cssFlex = styled('div', `
+  display: flex;
+`);
+
+const cssColorAndLabel = styled(cssFlex, `
+  max-width: calc(100% - 16px);
+`);
+
+const cssVerticalFlex = styled('div', `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`);
+
+const cssButtonRow = styled('div', `
+  gap: 8px;
+  display: flex;
+  margin-top: 8px;
+  margin-bottom: 16px;
+`);
+
+const cssDeleteButton = styled('div', `
+  display: inline;
+  float:right;
+  cursor: pointer;
+  .${cssTokenField.className}.token-dragactive & {
+    cursor: unset;
+  }
+`);
+
+ const cssDeleteIcon = styled(icon, `
+   --icon-color: ${colors.slate};
+   &:hover {
+     --icon-color: ${colors.dark};
+   }
+ `);

app/client/widgets/ChoiceTextBox.ts

@@ -1,5 +1,5 @@
 import * as commands from 'app/client/components/commands';
-import {ListEntry} from 'app/client/lib/listEntry';
+import {ChoiceListEntry} from 'app/client/widgets/ChoiceListEntry';
 import {DataRowModel} from 'app/client/models/DataRowModel';
 import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
 import {KoSaveableObservable} from 'app/client/models/modelUtil';
@@ -10,25 +10,61 @@ import {menu, menuItem} from 'app/client/ui2018/menus';
 import {NTextBox} from 'app/client/widgets/NTextBox';
 import {Computed, dom, styled} from 'grainjs';
 
+export interface IChoiceOptions {
+  textColor: string;
+  fillColor: string;
+}
+
+export type ChoiceOptions = Record<string, IChoiceOptions | undefined>;
+export type ChoiceOptionsByName = Map<string, IChoiceOptions | undefined>;
+
+const DEFAULT_FILL_COLOR = colors.mediumGreyOpaque.value;
+export const DEFAULT_TEXT_COLOR = '#000000';
+
+export function getFillColor(choiceOptions?: IChoiceOptions) {
+  return choiceOptions?.fillColor ?? DEFAULT_FILL_COLOR;
+}
+
+export function getTextColor(choiceOptions?: IChoiceOptions) {
+  return choiceOptions?.textColor ?? DEFAULT_TEXT_COLOR;
+}
+
 /**
  * ChoiceTextBox - A textbox for choice values.
  */
 export class ChoiceTextBox extends NTextBox {
   private _choices: KoSaveableObservable<string[]>;
   private _choiceValues: Computed<string[]>;
+  private _choiceOptions: KoSaveableObservable<ChoiceOptions | null | undefined>;
+  private _choiceOptionsByName: Computed<ChoiceOptionsByName>
 
   constructor(field: ViewFieldRec) {
     super(field);
     this._choices = this.options.prop('choices');
+    this._choiceOptions = this.options.prop('choiceOptions');
     this._choiceValues = Computed.create(this, (use) => use(this._choices) || []);
+    this._choiceOptionsByName = Computed.create(this, (use) => toMap(use(this._choiceOptions)));
   }
 
   public buildDom(row: DataRowModel) {
     const value = row.cells[this.field.colId()];
     return cssChoiceField(
-      cssChoiceText(
-        dom.style('text-align', this.alignment),
-        dom.text((use) => use(row._isAddRow) ? '' : use(this.valueFormatter).format(use(value))),
+      cssChoiceTextWrapper(
+        dom.style('justify-content', (use) => use(this.alignment) === 'right' ? 'flex-end' : use(this.alignment)),
+        dom.domComputed((use) => {
+          if (use(row._isAddRow)) { return cssChoiceText(''); }
+
+          const formattedValue = use(this.valueFormatter).format(use(value));
+          if (formattedValue === '') { return cssChoiceText(''); }
+
+          const choiceOptions = use(this._choiceOptionsByName).get(formattedValue);
+          return cssChoiceText(
+            dom.style('background-color', getFillColor(choiceOptions)),
+            dom.style('color', getTextColor(choiceOptions)),
+            formattedValue,
+            testId('choice-text')
+          );
+        }),
       ),
       this.buildDropdownMenu(),
     );
@@ -37,9 +73,20 @@ export class ChoiceTextBox extends NTextBox {
   public buildConfigDom() {
     return [
       super.buildConfigDom(),
-      cssLabel('OPTIONS'),
+      cssLabel('CHOICES'),
       cssRow(
-        dom.create(ListEntry, this._choiceValues, (values) => this._choices.saveOnly(values))
+        dom.create(
+          ChoiceListEntry,
+          this._choiceValues,
+          this._choiceOptionsByName,
+          (choices, choiceOptions) => {
+            return this.options.setAndSave({
+              ...this.options.peek(),
+              choices,
+              choiceOptions: toObject(choiceOptions)
+            });
+          }
+        )
       )
     ];
   }
@@ -52,6 +99,10 @@ export class ChoiceTextBox extends NTextBox {
     return this._choiceValues;
   }
 
+  protected getChoiceOptions(): Computed<ChoiceOptionsByName> {
+    return this._choiceOptionsByName;
+  }
+
   protected buildDropdownMenu() {
     return cssDropdownIcon('Dropdown',
       // When choices exist, click dropdown icon to open edit autocomplete.
@@ -74,14 +125,43 @@ export class ChoiceTextBox extends NTextBox {
   }
 }
 
+// Converts a POJO containing choice options to an ES6 Map
+function toMap(choiceOptions?: ChoiceOptions | null): ChoiceOptionsByName {
+  if (!choiceOptions) { return new Map(); }
+
+  return new Map(Object.entries(choiceOptions));
+}
+
+// Converts an ES6 Map containing choice options to a POJO
+function toObject(choiceOptions: ChoiceOptionsByName): ChoiceOptions {
+  const object: ChoiceOptions = {};
+  for (const [choice, options] of choiceOptions.entries()) {
+    object[choice] = options;
+  }
+  return object;
+}
+
 const cssChoiceField = styled('div.field_clip', `
   display: flex;
+  align-items: center;
+  padding: 0 3px;
+`);
+
+const cssChoiceTextWrapper = styled('div', `
+  display: flex;
+  width: 100%;
+  min-width: 0px;
+  overflow: hidden;
 `);
 
 const cssChoiceText = styled('div', `
-  width: 100%;
+  border-radius: 3px;
+  padding: 1px 4px;
+  margin: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
+  height: min-content;
+  line-height: 16px;
 `);
 
 const cssDropdownIcon = styled(icon, `

app/client/widgets/ReferenceEditor.ts

@@ -227,7 +227,7 @@ const cssRefItem = styled('li', `
   }
 `);
 
-const cssPlusButton = styled('div', `
+export const cssPlusButton = styled('div', `
   display: inline-block;
   width: 20px;
   height: 20px;
@@ -242,7 +242,7 @@ const cssPlusButton = styled('div', `
   }
 `);
 
-const cssPlusIcon = styled(icon, `
+export const cssPlusIcon = styled(icon, `
   background-color: ${colors.light};
 `);
 

app/client/widgets/UserType.js

@@ -198,7 +198,8 @@ var typeDefs = {
         icon: 'FieldTextbox',
         options: {
           alignment: 'left',
-          choices: null
+          choices: null,
+          choiceOptions: null
         }
       }
     },
@@ -214,7 +215,8 @@ var typeDefs = {
         icon: 'FieldTextbox',
         options: {
           alignment: 'left',
-          choices: null
+          choices: null,
+          choiceOptions: null
         }
       }
     },