Adds a Inline Spoiler Marker for Editor.js. This plugins styling is easily customizeable (see further below).
Get the package
npm install editorjs-inline-spoiler
Include module at your application
import EditorJSInlineSpoiler from "editorjs-inline-spoiler"
Add the plugin to your EditorJS instance:
const editor = new EditorJS({
holder: "your-holder",
tools : {
InlineSpoiler: EditorJSInlineSpoiler
}
});
or in React with react-editor-js.
export const ReactEditor = () => {
const ReactEditorJS = createReactEditorJS()
return (
<ReactEditorJS
defaultValue={....}
tools ={{
InlineSpoiler: EditorJSInlineSpoiler
}}
/>
)
}
You can customize the spoiler style by overwriting the editorjs-inline-spoiler
class. The plugin uses data-attributes to manage state. You can hook into these via CSS and style the show/hide styles too! Here is an example:
.editorjs-inline-spoiler {
border-radius: 0px !important;
}
/* Show State */
.editorjs-inline-spoiler[data-show="true"] {
color : hsla(35, 100%, 70%, 1) !important;
background-color: hsla(35, 100%, 6%, 1) !important;
}
/* Hide State */
.editorjs-inline-spoiler[data-show="false"] {
background-color: hsla(35, 100%, 70%, 1) !important;
color : hsla(35, 100%, 70%, 0) !important;
}
npm run install
npm run watch
Open a pull request if you spot any bugs!
This plugin is licensed under an MIT license.
Made with 💛 by Kaan Aksu