Tiptap Docs

InvisibleCharacters extensions

Pro Extension

This extension adds decorators to show non-printable characters and help you increase accessibility.

Install

Set up access to Tiptap's private repository

Integrate this pro extension by registering for a free Tiptap account and following our access guide to Tiptap’s private repository.

npm install @tiptap-pro/extension-invisible-characters

Settings

visible

Define default visibility.

Default: true

InvisibleCharacters.configure({
  visible: false,
})

builders

An array of invisible characters – by default it contains: spaces, hard breaks and paragraphs.

Default: [new SpaceCharacter(), new HardBreakNode(), new ParagraphNode()]

import InvisibleCharacters, { SpaceCharacter } from '@tiptap-pro/extension-invisible-characters'

// [...]

InvisibleCharacters.configure({
  builders: [new SpaceCharacter(), new YourCustomInvisibleCharacter()],
})

injectCSS

By default, the extension injects some CSS. With injectCSS you can disable that.

Default: true

InvisibleCharacters.configure({
  injectCSS: false,
})

injectNonce

When you use a Content-Security-Policy with nonce, you can specify a nonce to be added to dynamically created elements. Here is an example:

Default: undefined

InvisibleCharacters.configure({
  injectCSS: false,
  injectNonce: 'your-nonce-here',
})

Storage

visibility()

Find out whether the visibility of invisible characters is active or not.

editor.storage.invisibleCharacters.visibility()

Commands

showInvisibleCharacters()

Show invisible characters. You can also pass false to use the same command to hide them.

editor.commands.showInvisibleCharacters()

hideInvisibleCharacters()

Hide invisible characters.

editor.commands.hideInvisibleCharacters()

toggleInvisibleCharacters()

Toggle visibility of invisible characters.

editor.commands.toggleInvisibleCharacters()

Custom invisible characters

To create a custom invisible characters, you can extend the classes provided by the package.

InvisibleCharacter 

import InvisibleCharacters, { InvisibleCharacter } from '@tiptap-pro/extension-invisible-characters'

class MyInvisibleCharacter extends InvisibleCharacter {
  constructor() {
    super({
      type: 'my-invisible-character',
      predicate: (value) => value === '+',
    })
  }
}

// … use it like this
new Editor({
  extensions: [InvisibleCharacters.configure({ builders: [new MyInvisibleCharacter()] })],
})

To select the decoration within CSS, we can use the following selector:

.Tiptap-invisible-character.Tiptap-invisible-character--my-invisible-character {
  // …
}

InvisibleNode 

import InvisibleCharacters, { InvisibleNode } from '@tiptap-pro/extension-invisible-characters'

class MyInvisibleNode extends InvisibleNode {
  constructor() {
    super({
      type: 'my-invisible-node',
      predicate: (node) => node.type === node.type.schema.nodes.listItem,
    })
  }
}

// … use it like this
new Editor({
  extensions: [InvisibleCharacters.configure({ builders: [new MyInvisibleNode()] })],
})

To select the decoration within CSS, we can use the following selector:

.Tiptap-invisible-character.Tiptap-invisible-character--my-invisible-node {
  // …
}