Invisible Characters

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

#Installation

Once done, you can install the extension from our private registry:

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 {
  // …
}

#Usage