Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kommitters/editorjs-toggle-block
Toggle block tool for EditorJS
https://github.com/kommitters/editorjs-toggle-block
editorjs editorjs-tool hacktoberfest javascript toggle toggle-block
Last synced: 5 days ago
JSON representation
Toggle block tool for EditorJS
- Host: GitHub
- URL: https://github.com/kommitters/editorjs-toggle-block
- Owner: kommitters
- License: mit
- Created: 2022-01-13T23:00:43.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-07T12:48:49.000Z (12 days ago)
- Last Synced: 2025-02-08T08:07:37.514Z (12 days ago)
- Topics: editorjs, editorjs-tool, hacktoberfest, javascript, toggle, toggle-block
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/editorjs-toggle-block
- Size: 6.44 MB
- Stars: 49
- Watchers: 6
- Forks: 22
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-editorjs - editorjs-toggle-block - tool for nesting blocks in a toggleable element (Tools / Block Tools)
README
# EditorJS Toggle Block

[](https://coveralls.io/github/kommitters/editorjs-toggle-block)
[](https://bestpractices.coreinfrastructure.org/projects/6454)
[](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-toggle-block)Toggle block tool for [Editor.js](https://editorjs.io/)

## Installation
### Install via NPM
```shell
$ npm i --save-dev editorjs-toggle-block
```Include module at your application
```js
import ToggleBlock from 'editorjs-toggle-block';
```### Load from CDN
You can load a specific version of the package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/editorjs-toggle-block).
Require this script on a page with Editor.js.
```html
```
## Usage
Add a new tool to the `tools` property of the Editor.js initial config.
```js
const editor = EditorJS({
tools: {
toggle: {
class: ToggleBlock,
inlineToolbar: true,
},
},
});
```### Shortcuts
1. Type the `>` character followed by `Space` to create a new toggle.
2. Type `Shift` + `Tab` to extract a nested block.
3. Type `Tab` to insert an existing block into a toggle.## Development
### Development mode
```shell
$ npm run build:dev
```### Using the Playground
To test the functionality of the plugin, you can use the provided playground:
1. Navigate to the `playground` folder in the project directory.
2. Open the `index.html` file in your web browser.
3. Experiment the plugin's behavior.### Production release
1. Create a production bundle
```shell
$ npm run build
```
2. Commit `dist/bundle.js`### Run tests
```shell
$ npm run test
```## Code of conduct
We welcome everyone to contribute. Make sure you have read the [CODE_OF_CONDUCT][coc] before.
## Contributing
For information on how to contribute, please refer to our [CONTRIBUTING][contributing] guide.
## Changelog
Features and bug fixes are listed in the [CHANGELOG][changelog] file.
## License
This library is licensed under an MIT license. See [LICENSE][license] for details.
## Acknowledgements
Made with 💙 by [kommitters Open Source](https://kommit.co)
[license]: https://github.com/kommitters/editorjs-toggle-block/blob/main/LICENSE
[coc]: https://github.com/kommitters/editorjs-toggle-block/blob/main/CODE_OF_CONDUCT.md
[changelog]: https://github.com/kommitters/editorjs-toggle-block/blob/main/CHANGELOG.md
[contributing]: https://github.com/kommitters/editorjs-toggle-block/blob/main/CONTRIBUTING.md