Color

Type: Mark · Category: Style

Color allows users to apply custom text colors to selected content. Renders as a <span> element with an inline color CSS style in HTML output.

Demo

Installation

import { Color } from "@arkpad/extension-color";

Commands

The extension registers three commands for managing text color:

// Applies the specified color value (e.g. HEX, RGB, HSL) to the selected text range
editor.runCommand("setColor", "#e11d48");
editor.runCommand("setColor", "rgb(37, 99, 235)");

// Toggles the color on the selection
editor.runCommand("toggleColor", "#16a34a");

// Resets the text color of the selection back to the editor default
editor.runCommand("unsetColor");

Chaining Commands

You can chain commands to apply a color and immediately focus the editor:

editor.chain().focus().setColor("#ef4444").run();

Active State

Check if a specific color is active on the selection:

const isRedActive = editor.isActive("color", { color: "#ff0000" });

Configuration

Options

Name	Type	Default	Description
`HTMLAttributes`	`Record<string, any>`	`{}`	Key-value pairs of attributes to render on the generated `<span>` wrapper element.

Color.configure({
  HTMLAttributes: {
    class: "custom-color-wrapper",
  },
});