
# clearInlineStyles

To remove the whole applied inline styles from the current selection you can
use the `clearInlineStyles` function.

## Usage

The `clearInlineStyles` utility will clear the inline styles from your selection.
Checkout the [customization](#customization) section if you are using custom inline
styles.

```ts
clearInlineStyles(
  state: State,
  stateHandler: StateHandler,
  customInlineStyles?: string[]
) => State
```

## Example

An example of `clearInlineStyles` usage:

```ts
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, clearInlineStyles, isBold, toggleBold } from 'contenido';


const Demo = () => {
  const [editorState, setEditorState] = useState(
    EditorState.createEmpty()
  );

  return (
    <>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        editorRef={editorRef}
      >
      <button
        onMouseDown={(e) => {
          e.preventDefault();
          toggleBold(editorState, setEditorState)
        }}
        style={{color: isBold(editorState) ? 'skyblue' : 'black'}}
      >
        Bold
      </button>
      <button
        onMouseDown={(e) => {
          e.preventDefault();

          clearInlineStyles(editorState, setEditorState)
        }}
      >
        Clear Inline Styles
      </button>
    </>
  )
}

export default Demo;
```

## Customization

The `clearInlineStyles` will only remove the default provided styles key like `BOLD`,
`ITALIC` and `UNDERLINE`. If you have used more inline styles in your editor you **have to**
pass your `customStyleMap` constant to the utility as the third argument.

```ts
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, clearInlineStyles, initialStyleMap } from 'contenido';

const CustomizedDemo = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const styleMap = {
    ...initialStyleMap,
    // other styles
  };

  return (
    <>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        customStyleMap={styleMap}
      >
      <button
        onMouseDown={(e) => {
          e.preventDefault();

          clearInlineStyles(editorState, setEditorState, styleMap)
        }}
      >
        Clear Inline Styles
      </button>
    </>
  )
}

export default CustomizedDemo;
```


Clear Inline Styles

overview

installation

getting-started

custom-styles

bold

italic

underline

line-through

overline

superscript

subscript

color

transform

inline-styles

custom-block-type

heading-1-to-6

paragraph

list

blockquote

text-alignment

block-types

link

decorators

custom-atomic-block

image-block

video-block

audio-block

file-block

atomic-count

image-count

video-count

audio-count

file-count

atomic-blocks

focus-on-editor

empty-raw-content-state

selected-blocks-map

clear-inline-styles

clear-block-types

soft-newline

clear-entities

clear

character-count

plain-text

word-array

word-count

find-entities

find-link-entities

entity-count

generate-key

helpers

shortcuts

shortcuts-map

clearInlineStyles

Usage #

Example #

Customization #