Package Exports

@n8body/tiptap-spoiler
@n8body/tiptap-spoiler/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@n8body/tiptap-spoiler) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.