### Text Color and Highlight Plugins

One (or actually Two) of the most basic features in text editing!
Modify text color or highlight the important stuff.

#### Usage

##### Editor

```tsx widget
import { fromPlainText, pluginTextColor, pluginTextHighlight, RicosEditor } from '@wix/ricos';
import React from 'react';

export default () => {
  return (
    // @essential-start
    <RicosEditor
      placeholder={'Add text...'}
      content={fromPlainText('Color & Highlight text as you please!')}
      plugins={[pluginTextColor(), pluginTextHighlight()]}
    />
    // @essential-end
  );
};
```

##### Viewer

```tsx widget
import '@wix/ricos/css/ricos-viewer.global.css';
import type { RichContent } from '@wix/ricos';
import { pluginTextColorViewer, pluginTextHighlightViewer, RicosViewer } from '@wix/ricos';
import React from 'react';

export default () => {
  return (
    // @essential-start
    <RicosViewer
      content={content}
      plugins={[pluginTextColorViewer(), pluginTextHighlightViewer()]}
    />
    // @essential-end
  );
};

const content = {
  nodes: [
    {
      type: 'PARAGRAPH',
      id: 'y549n1',
      nodes: [
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: 'Fun',
            decorations: [
              {
                type: 'BOLD',
                fontWeightValue: 700,
              },
            ],
          },
        },
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: ' ',
          },
        },
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: 'text',
            decorations: [
              {
                type: 'ITALIC',
                italicData: true,
              },
            ],
          },
        },
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: ' ',
          },
        },
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: 'with',
            decorations: [
              {
                type: 'UNDERLINE',
              },
            ],
          },
        },
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: ' ',
          },
        },
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: 'decorations',
            decorations: [
              {
                type: 'COLOR',
                colorData: {
                  background: '#0141AA',
                  foreground: '#bf695c',
                },
              },
            ],
          },
        },
        {
          type: 'TEXT',
          id: '',
          textData: {
            text: '!',
          },
        },
      ],
    },
  ],
} as RichContent;
```

#### Config

Text Color and Text Highlight have exactly the same config but both require it to be passed to them separately for flexibility.

| setting key               | description                                                                            | default value                             | is required? | editor/viewer config |
| ------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------- | ------------ | -------------------- |
| `colorScheme`             | custom-style to hex-color map: `{ color1: { color: '#fff', index: 0 }, ... }`          | none (DEFAULT_PALETTE is used by default) | No           | editor               |
| `styleSelectionPredicate` | a function that tells the plugin which inline styles are relevant: `string => boolean` | `style => isHexColor(style)`              | No           | both                 |
| `customStyleFn` (1)       | a function that converts an inline-style to CSS style: `DraftInlineStyle => object`    | DEFAULT_STYLE_FN_DRAFT                    | No           | editor               |
| `customStyleFn` (2)       | a function that converts an inline-style to CSS style: `string => object`              | DEFAULT_STYLE_FN                          | No           | viewer               |
| `onColorAdded`            | a handler called when a custom color is added                                          | none                                      | No           | editor               |
| `getUserColors`           | a function that returns user-defined custom colors                                     | none                                      | No           | editor               |
