Eraser Tool

Type: Tool · Category: Tools

The Eraser Tool is a powerful "remove formatting" painting mode. When active, clicking and dragging to select text automatically strips styling and highlight marks instantly.

Demo

Installation

import { EraserTool } from "@arkpad/extension-eraser";

Commands

The extension registers two commands for controlling the eraser drawing brush:

// Toggles the eraser mode active state on and off
editor.runCommand("toggleEraserTool");

// Explicitly sets the eraser mode active state
editor.runCommand("setEraserTool", { active: true });

Chaining Commands

You can chain commands to activate the eraser mode and focus the editor:

editor.chain().focus().toggleEraserTool().run();

Interaction & Appended Transactions

When the eraser tool is activated, the editor is decorated with unique attributes and visual indicators:

• Classes: The editor container is appended with the ark-eraser-mode class.
• Attributes: The editor view element is set with data-ark-mode="eraser".
• Appended Transactions: A custom ProseMirror plugin monitors selection changes. Any non-empty selection made by the user while the tool is active immediately triggers an appended transaction that strips all highlight marks (or formatting marks) within the selected range, providing a smooth "drawing" feel.

Storage (Reactivity)

You can reactively query or bind UI elements to the tool's active state:

// Check if the eraser tool is currently active
const isEraserActive = editor.storage.eraserTool.active; // returns boolean

Configuration

Options

EraserTool.configure({
  activeClass: "custom-eraser-active",
});