Docs Editor Model/Schema Cases Scenarios Tips Playground Coverage

formatRemove

How formatRemove inputType removes formatting from selected text and varies across browsers.

Overview

The formatRemove inputType is triggered when the user removes formatting from selected text (typically via a "Remove Formatting" command or toolbar button). The browser removes formatting elements (bold, italic, underline, etc.) from the selected content.

Basic Behavior

Scenario: Formatted text selected

Before (Formatted text selected)

HTML:
<p>Hello <strong><em>world</em></strong> text</p>

After formatRemove

HTML:
<p>Hello world text</p>
All formatting removed, plain text remains

What Formatting is Removed

formatRemove typically removes:

  • Text formatting: <strong>, <em>, <u>, <s>
  • Font styling: font-size, font-family, color
  • Inline styles applied via <span> elements
  • May or may not remove links (<a>) depending on browser

Browser-Specific Behavior

Chrome/Edge

  • Removes most inline formatting elements
  • May preserve block-level formatting (paragraphs, lists)
  • Links may or may not be removed depending on context

Firefox

  • Similar behavior to Chrome
  • May handle certain formatting elements differently

Safari

  • Formatting removal behavior may differ
  • May preserve more formatting than other browsers

Editor-Specific Handling

Different editor frameworks handle format removal differently. Here's how major editors implement formatRemove:

Slate.js

Format Removal

Slate removes all marks from selected text: 

    import { Editor, Transforms, Text } from 'slate';

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'formatRemove') {
    e.preventDefault();
    
    const { selection } = editor;
    if (selection) {
      // Remove all marks from selected text
      Transforms.unsetNodes(editor, Object.keys(Editor.marks(editor) || {}), {
        match: n => Text.isText(n),
        split: true,
      });
    }
  }
});
  • Transforms.unsetNodes: Removes all marks from text nodes in selection.
  • Mark removal: Clears all formatting marks (bold, italic, underline, etc.).
ProseMirror

Format Removal

ProseMirror removes all marks from selection: 

    import { removeMark } from 'prosemirror-commands';
import { schema } from './schema';

view.dom.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'formatRemove') {
    e.preventDefault();
    const { state, dispatch } = view;
    
    // Remove all marks from selection
    const { from, to } = state.selection;
    const tr = state.tr.removeMark(from, to);
    
    // Remove each mark type individually
    Object.values(schema.marks).forEach(mark => {
      tr.removeMark(from, to, mark);
    });
    
    dispatch(tr);
  }
});
  • removeMark: Removes marks from selection range.
  • All marks: Iterates through all mark types in schema to remove them.
Draft.js

Format Removal

Draft.js removes inline styles: 

    import { EditorState, RichUtils } from 'draft-js';

function handleFormatRemove(editorState) {
  // Remove all inline styles
  const contentState = editorState.getCurrentContent();
  const selection = editorState.getSelection();
  
  // Get all inline styles
  const inlineStyles = editorState.getCurrentInlineStyle();
  
  // Remove each style
  let newState = editorState;
  inlineStyles.forEach(style => {
    newState = RichUtils.toggleInlineStyle(newState, style);
  });
  
  return newState;
}

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'formatRemove') {
    e.preventDefault();
    const newState = handleFormatRemove(editorState);
    setEditorState(newState);
  }
});
  • RichUtils.toggleInlineStyle: Toggles each inline style off to remove formatting.
  • Style iteration: Iterates through all active inline styles to remove them.

Related resources