tiptap-spoiler

Just a simple React extension (actually two extensions) for TipTap to add spoilers to the editor.

Installing

Via npm:

npm i @n8body/tiptap-spoiler

What's in there

The extensions are - SpoilerEditor and SpoilerOutput. The names are pretty self-descriptive...

You can provide the following options to them: | SpoilerEditor Options | Type | Optional | Description | | ------ | ------ | ----- | ----- | | spoilerClass | string | No | Class name for the spoiler in the editor | | inputRegex | RegExp | Yes | Input regular expression, the default one matches \|\| text \|\| | | pasteRegex | RegExp | Yes | Same as the previous one, but for pasting | | inline | boolean | Yes | Sets extension's inline and group properties. Default: true | | inclusive | boolean | Yes | Sets extension's inclusive property. Default: false |

and

| SpoilerOutput Options | Type | Optional | Description | | ------ | ------ | ----- | ----- | | spoilerClass | string | No | Main spoiler class | | spoilerOpenClass | string | No | Open spoiler class | | spoilerCloseClass | string | No | Closed spoiler class | | as | ElementType | Yes | Tag to be rendered. Default: 'span' | | inline | boolean | Yes | Sets extension's inline and group properties. Default: true | | content | string | Yes | Sets extension's content property. Default: 'inline*' |

To be said: you can omit some of the classes, depending on your CSS - just be sure, that it works properly.

Also there is a function cleanSpoilersHTML that removes class atrtributes from spoiler tags.

Example

Exemplary TipTap instance for editing:

const editor = useEditor({
  extensions: [
    SpoilerEditor.configure({
      spoilerClass: 'beautiful-spoiler',
      inputRegex: /(?:^|\s)((?:\[spoiler\])((?:[^||]+))(?:\[\/spoiler\]))$/, // to match [spoiler]text[/spoiler]
      pasteRegex: /(?:^|\s)((?:\[spoiler\])((?:[^||]+))(?:\[\/spoiler\]))/g, // same here
      inclusive: true,
    })
  ],
  content: '',
  editable: true,
})

...and for output:

const editor = useEditor({
  extensions: [
    SpoilerOutput.configure({
      spoilerClass: 'beautiful-spoiler',
      spoilerOpenClass: 'open-spoiler',
      spoilerCloseClass: 'closed-spoiler',
      as: 'code',
      inline: false,
    })
  ],
  content: '<p>The best website for manga is <spoiler>manga.ovh</spoiler></p>',
  editable: false,
})

And to get clean HTML from your editor:

cleanSpoilersHTML(editor.getHTML())

That's it!

If you have any questions, don't hesitate to contact me or open an issue.