API REFERENCE · RICH TEXT PLUGINS

`@dojo-ng/rich-text-color`

Text color and highlight color for <dj-rich-text>.

@dojo-ng/rich-text-color · v0.1.1 · A plugin for <dj-rich-text>, not a custom element

npm install @dojo-ng/rich-text-color

Compose the color plugins with the default set. createColorPlugin customizes the style property, label, or swatches.

<dj-rich-text id="editor" label="Article"></dj-rich-text>
<script type="module">
  import "@dojo-ng/rich-text";
  import { defaultPlugins } from "@dojo-ng/rich-text";
  import { colorPlugin, backgroundColorPlugin } from "@dojo-ng/rich-text-color";
  document.getElementById("editor").plugins = [...defaultPlugins, colorPlugin, backgroundColorPlugin];
</script>

Setup

Exports colorPlugin (text color), backgroundColorPlugin, and createColorPlugin({ styleProperty, label, swatches }).
Color is an inline style on the text, so the plugin adds no node types.
Setting plugins replaces the default set, so spread ...defaultPlugins to keep bold, italic, underline, undo, and redo.

Using it

The toolbar button shows the current color as a swatch. Clicking it opens a dj-color-picker and a Remove color button.
The picker applies the color live while you drag, without moving focus.
The popup closes on a click outside or on Escape, and focus returns to the editor.

Pasting

The default paste cleaning removes inline styles, so pasted colored text loses its color.
Color is kept through value, which is not cleaned. A trusted app can set its own pasteSanitizer.

Functions

`applyColor`

function applyColor(ctx: RichTextContext, styleProperty: StyleProperty, value: string | null): void;

`colorStyleImportMap`

function colorStyleImportMap(): DOMConversionMap;

`createColorPlugin`

function createColorPlugin(options?: ColorPluginOptions): RichTextPlugin;

`currentColor`

function currentColor(ctx: RichTextContext, styleProperty: StyleProperty): string;

Values

`backgroundColorPlugin`

const backgroundColorPlugin: RichTextPlugin;

`colorPlugin`

const colorPlugin: RichTextPlugin;

Types

`ColorPluginOptions`

interface ColorPluginOptions {
  styleProperty?: StyleProperty;
  label?: string;
  swatches?: ColorSwatch[];
}

`ColorSwatch`

type ColorSwatch = string | {
  value: string;
  label?: string;
};

`StyleProperty`

type StyleProperty = "color" | "background-color";