隐形字符扩展

此扩展添加装饰器以显示不可打印字符，帮助您提升无障碍性。

安装

npm install @tiptap/extension-invisible-characters

设置

visible

定义默认的可见性。

默认值: true

InvisibleCharacters.configure({
  visible: false,
})

builders

一个隐形字符数组 – 默认包括：空格、硬换行和段落。

默认值: [new SpaceCharacter(), new HardBreakNode(), new ParagraphNode()]

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

// [...]

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

injectCSS

默认情况下，此扩展会注入一些 CSS。您可以通过 injectCSS 禁用此功能。

默认值: true

InvisibleCharacters.configure({
  injectCSS: false,
})

injectNonce

当您使用带有 nonce 的内容安全策略时，可以指定一个 nonce，以添加到动态创建的元素中。示例如下：

默认值: undefined

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

存储

visibility()

确定隐形字符的可见性是否处于激活状态。

editor.storage.invisibleCharacters.visibility()

命令

showInvisibleCharacters()

显示隐形字符。您也可以传递 false 来使用同一命令隐藏它们。

editor.commands.showInvisibleCharacters()

hideInvisibleCharacters()

隐藏隐形字符。

editor.commands.hideInvisibleCharacters()

toggleInvisibleCharacters()

切换隐形字符的可见性。

editor.commands.toggleInvisibleCharacters()

自定义隐形字符

要创建自定义隐形字符，您可以扩展包中提供的类。

InvisibleCharacter

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

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

// … 使用方式如下
new Editor({
  extensions: [InvisibleCharacters.configure({ builders: [new MyInvisibleCharacter()] })],
})

在 CSS 中选择装饰时，可以使用以下选择器：

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

InvisibleNode

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

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

// … 使用方式如下
new Editor({
  extensions: [InvisibleCharacters.configure({ builders: [new MyInvisibleNode()] })],
})

在 CSS 中选择装饰时，可以使用以下选择器：

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