remirror/remirror

View on GitHub
packages/remirror__extension-text-color/src/text-color-utils.ts

Summary

Maintainability
A
0 mins
Test Coverage
F
26%
import { range } from '@remirror/core';
import { I18n, MessageDescriptor } from '@remirror/i18n';
import { ExtensionTextColorMessages as Messages } from '@remirror/messages';
import { getThemeVar } from '@remirror/theme';

import {
  ColorPalette,
  ColorWithLabel,
  ColorWithLabelTuple,
  HuePalette,
  HuePaletteMap,
} from './text-color-types';

export const setTextColorOptions: Remirror.CommandDecoratorOptions = {
  icon: 'fontColor',
  description: ({ t }) => t(Messages.SET_COLOR_DESCRIPTION),
  label: ({ t }) => t(Messages.SET_COLOR_LABEL),
};

const hueRange = range([10]);

interface CreateHuePaletteProps {
  t: I18n['_'];
  name: keyof Remirror.ThemeHue;
  labelDescriptor: MessageDescriptor;
  hueDescriptor: MessageDescriptor;
}

function createHuePalette(props: CreateHuePaletteProps): HuePalette {
  const { t, name, labelDescriptor, hueDescriptor } = props;
  const label = t(labelDescriptor);
  const hues = hueRange.map((hue) => ({
    label: t({
      ...hueDescriptor,
      values: {
        hue,
      },
    }),
    color: getThemeVar('hue', name, hue),
  })) as ColorWithLabelTuple;

  return { label, hues };
}

/**
 * The default color palette which uses css properties to update the colors.
 */
export function palette(t: I18n['_']): ColorPalette {
  const black: ColorWithLabel = {
    label: t(Messages.BLACK),
    color: '#000',
  };
  const white: ColorWithLabel = {
    label: t(Messages.WHITE),
    color: '#fff',
  };
  const transparent: ColorWithLabel = {
    label: t(Messages.TRANSPARENT),
    color: 'transparent',
  };
  const hues: HuePaletteMap = {
    gray: createHuePalette({
      t,
      name: 'gray',
      labelDescriptor: Messages.GRAY,
      hueDescriptor: Messages.GRAY_HUE,
    }),
    blue: createHuePalette({
      t,
      name: 'blue',
      labelDescriptor: Messages.BLUE,
      hueDescriptor: Messages.BLUE_HUE,
    }),
    cyan: createHuePalette({
      t,
      name: 'cyan',
      labelDescriptor: Messages.CYAN,
      hueDescriptor: Messages.CYAN_HUE,
    }),
    grape: createHuePalette({
      t,
      name: 'grape',
      labelDescriptor: Messages.GRAPE,
      hueDescriptor: Messages.GRAPE_HUE,
    }),
    green: createHuePalette({
      t,
      name: 'green',
      labelDescriptor: Messages.GREEN,
      hueDescriptor: Messages.GREEN_HUE,
    }),
    indigo: createHuePalette({
      t,
      name: 'indigo',
      labelDescriptor: Messages.INDIGO,
      hueDescriptor: Messages.INDIGO_HUE,
    }),
    lime: createHuePalette({
      t,
      name: 'lime',
      labelDescriptor: Messages.LIME,
      hueDescriptor: Messages.LIME_HUE,
    }),
    orange: createHuePalette({
      t,
      name: 'orange',
      labelDescriptor: Messages.ORANGE,
      hueDescriptor: Messages.ORANGE_HUE,
    }),
    pink: createHuePalette({
      t,
      name: 'pink',
      labelDescriptor: Messages.PINK,
      hueDescriptor: Messages.PINK_HUE,
    }),
    red: createHuePalette({
      t,
      name: 'red',
      labelDescriptor: Messages.RED,
      hueDescriptor: Messages.RED_HUE,
    }),
    teal: createHuePalette({
      t,
      name: 'teal',
      labelDescriptor: Messages.TEAL,
      hueDescriptor: Messages.TEAL_HUE,
    }),
    violet: createHuePalette({
      t,
      name: 'violet',
      labelDescriptor: Messages.VIOLET,
      hueDescriptor: Messages.VIOLET_HUE,
    }),
    yellow: createHuePalette({
      t,
      name: 'yellow',
      labelDescriptor: Messages.YELLOW,
      hueDescriptor: Messages.YELLOW_HUE,
    }),
  };

  return { black, hues, transparent, white };
}

export const CSS_VAR_REGEX = /^var\((--[A-Za-z-]+)\);?/;
export const TEXT_COLOR_ATTRIBUTE = 'data-text-color-mark';