kommitters / editorjs-toggle-block

Toggle block tool for EditorJS

EditorJS Toggle Block

Toggle block tool for Editor.js

Installation

Install via NPM

$ npm i --save-dev editorjs-toggle-block

Include module at your application

import ToggleBlock from 'editorjs-toggle-block';

Load from CDN

You can load a specific version of the package from jsDelivr CDN.

Require this script on a page with Editor.js.

<script src="https://cdn.jsdelivr.net/npm/editorjs-toggle-block"></script>

Usage

Add a new tool to the tools property of the Editor.js initial config.

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

$ 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

   $ npm run build

2. Commit dist/bundle.js

Run tests

$ npm run test

Code of conduct

We welcome everyone to contribute. Make sure you have read the CODE_OF_CONDUCT before.

Contributing

For information on how to contribute, please refer to our CONTRIBUTING guide.

Changelog

Features and bug fixes are listed in the CHANGELOG file.

License

This library is licensed under an MIT license. See LICENSE for details.

Acknowledgements

Made with 💙 by kommitters Open Source

editorjs-toggle-block's Issues

Destroy full toggle

ℹ️ This issue is part of the Epic #7

Context

When the toggle root is destroyed, its items remain.

Description

It's required to add a method that detects when the toggle root is destroyed so that it destroys its items as well.

Implement the first version to the basic methods

ℹ️ This issue is part of the Epic #7

Context

To implement a block tool in Editor.js, several methods are compulsory:

• render()
• adjust the constructor()
• save()
• validate()
• _createToggle() → The method purpose is satisfied within the render method

Also is required:

• adjust the tool icon to align it with the introduced text

Description

To implement the tool initially these methods are required

Block tool development

ℹ️ This issue is an Epic

Context

editorjs-toggle-block will be a block tool implemented in editor.js. The development can be implemented in several issues, some of them according to the Editor.js guides.

Objective

Develop the block tool

Checklist

• #1
• #2
• #3
• #11
• #10
• #4
• #18
• #5
• #22
• #21
• #26
• #24
• #25
• #27
• #34
• #37
• #33
• #36
• #28
• #29
• #42

Error when the toggle root is dragged and dropped between its children

Description

When the toggle root is dragged and dropped inside itself, the functionality crashes

bugDragNDrop.mp4

Environment

• Editor.js version: 2.24.3
• Plugins:
  toggle-block version: 0.2.0
• Device, Browser, OS:
  Chrome Browser, Linux Mint

Current behavior

To reproduce this error:

1. Create a toggle block
2. Add items to the toggle (more than two)
3. Open the toggle block if you close it
4. Drag the toggle root and drop it between its children (See how the items change their order)
5. Open and close the toggle (The root and some items get hidden)

Expected behavior

The root toggle shouldn't be able to be moved inside itself

Security Policy violation SECURITY.md

This issue was automatically created by Allstar.

Security Policy Violation
Security policy not enabled.
A SECURITY.md file can give users information about what constitutes a vulnerability and how to report one securely so that information about a bug is not publicly visible. Examples of secure reporting methods include using an issue tracker with private issue support, or encrypted email with a published key.

To fix this, add a SECURITY.md file that explains how to handle vulnerabilities found in your repository. Go to https://github.com/kommitters/editorjs-toggle-block/security/policy to enable.

For more information, see https://docs.github.com/en/code-security/getting-started/adding-a-security-policy-to-your-repository.

---

This issue will auto resolve when the policy is in compliance.

Issue created by Allstar. See https://github.com/ossf/allstar/ for more information. For questions specific to the repository, please contact the owner or maintainer.

Create nested toggles using the toolbar or shortcut

When trying to create a toggle into another toggle using the toolbar or shortcut (">" + space). This doesn't work.

Describe

When the caret is into a block which is a Toggle child, using the toolbar or the shortcut to create a toggle, this new toggle should be a nested toggle.

Additional context

Here is a GIF showing that I am not able to create a nested toggle:

CI setup with Github Actions

Context

Code changes should be validated running the test suite every time a pull request is opened

Objective

• To implement a CI server with Github actions

The default content is always visible (React)

Context

When a toggle has nested blocks in it the default content is visible.

Description

It's required to hide the default content when the toggle has nested blocks in it.

Install and set the dependencies in the project

ℹ️ This issue is part of the Epic #7

Given that It's a block tool in Editor.js, the following dependencies have to be installed and set:

Checklist

• Webpack
• Jest
• Babel
• ESLint
• svg-inline-loader
• testing-library/jest-dom
• css-loader

Adjust the methods to save and validate

ℹ️ This issue is part of the Epic #7

Context

Currently, the method to save data inserts the nested blocks inside the toggle through a query with the foreignKey property as an argument.

Description

It's required to change the behavior of the save method to avoid the toggle items being saved as separate blocks again.

Implement the block extraction

ℹ️ This issue is part of the Epic #7

Context

To remove a block that is inside a toggle is required to keep pressing backspace and the content is definitely lost.

Description

To avoid the lost content, sometimes needed elsewhere, it's required to implement something similar to a shortcut Shift+Tab to extract a block from the toggle.

Implement the block insertion

ℹ️ This issue is part of the Epic #7

Context

To add a block that is inside a toggle is required to keep pressing enter to write its content.

Description

To avoid the lost content, written in a block external to the toggle, it's required to implement a shortcut Tab to insert a block inside the toggle.

Change toggle color icon

ℹ️ This issue is part of the Epic #7

Context

Currently, the toggle icon color is black, independent of its status and content

Description

The toggle icon color should be changed depending on its content. If a toggle is empty (don't have nested blocks) its icon color should be gray, otherwise should be black.

Empty toggle:

Toggle with content:

Test the toggle second version

ℹ️ This issue is part of the Epic #7

To test the #4 functionality its latest features must be tested

Extend blocks supported in the toggle

ℹ️ This issue is part of Epic #48

Context

Currently, the toggle can nest blocks of paragraph type, and they're stored in the items property

Description

It's required to extend its operation to support other types of EditorJS blocks. Additionally, it's necessary to detect the event that transforms a new (empty) block with + into a block of any type.

dropping block into toggle drops it into correct place but not part of toggle

Precheck

• Do a quick search and make sure the bug has not been reported yet.
• Please disclose security vulnerabilities privately at [email protected].
• Finally, be nice and have fun!.

Description

dropping block into toggle drops it into correct place but not part of toggle - the indent is different than toggle items plus closing toggle does not hide item

Environment

• Editor.js version: latest
• Device, Browser, OS: windows local browser test

plugins:

<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>

<script src="https://cdn.jsdelivr.net/npm/editorjs-drag-drop"></script>
<script src="https://cdn.jsdelivr.net/npm/editorjs-undo"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/editorjs-toggle-block"></script>

Current behavior

to reproduce:
add a toggle block, click and add several text items
using shift tab, add another text item below the block
drag the outside block into the toggle
observe indent
try to close toggle

dragging items out works ok

Expected behavior

I expect when dragging an item into the toggle block that it will match the indent and close with the toggle

Adjust the save method

Context

The save method saves the toggle and its nested blocks, these last are cleaned, and after their content is restored.

Description

It's required to change the way in the nested blocks data is saved to avoid an infinite loop when the EditorJS Undo Plugin is enabled.

Implementing toggle behavior

ℹ️ This issue is part of the Epic #7

Context

For a toggle to be distinguished from a paragraph, the icon must be clickable:

• implement a method that captures clicks on the icon
• create a second svg element to the tool

Description

When a toggle is created must be have the following behavior with its icon:

• right arrow in its initial state (the toggle is closed).
• down arrow when clicked and the toggle was closed (the toggle is now open)

Editor js freezes when trying to render toggle block

Precheck

• Do a quick search and make sure the bug has not been reported yet.
• Please disclose security vulnerabilities privately at [email protected].
• Finally, be nice and have fun!.

Description

When adding toggle block to editor, saving data and then trying to render data back, editor js breaks down. Looks like an infinite loop somewhere in plugin.

Environment

• Editor.js version: 2.25.0
• Plugins you use with their versions: toggle-block
• Device, Browser, OS: any (Chrome 105)

Current behavior

https://codepen.io/megazoll/pen/VwxzMQx

Expected behavior

Editorjs should render toggle block

Adjust the behavior of the toolbar icon

ℹ️ This issue is part of Epic #48

Context

When the toolbar icon, click to tune, is clicked the current block is selected.

Description

It's required that when the toolbar icon is clicked on a toggle block, the nested blocks in it are also selected.

Security Policy violation Branch Protection

This issue was automatically created by Allstar.

Security Policy Violation
Dismiss stale reviews not configured for branch main

---

This issue will auto resolve when the policy is in compliance.

Issue created by Allstar. See https://github.com/ossf/allstar/ for more information. For questions specific to the repository, please contact the owner or maintainer.

Implement the second version to the basic methods

ℹ️ This issue is part of the Epic #7

Context

To have a better working in the block tool is required to implement an improvement over the basic methods in #3. Additionally, is required almost a method to insert paragraphs into a toggle:

• adjust the render()
• adjust the constructor()
• adjust the save()
• adjust the validate()
• adjust the _createToggle()
• renderSettings() or insertParagraph()
• update the tests

Lost focus using the shortcut to create a toggle

Context

A toggle block can be created with the > character and the Space key.

Description

It's required to focus the toggle when the shortcut is used.

Add transition to display the blocks inside the toggle

ℹ️ This issue is part of the Epic #7

Context

Currently, when the icon arrow is clicked, it hides or displays the blocks inside the toggle, the action is realized without delays or transitions.

Description

It's required to display the blocks inside the toggle with a transition to improve the user experience.

Deprecate the buttons to insert and remove paragraphs and their methods

ℹ️ This issue is part of the Epic #7

Context

To add and delete paragraphs you could go to the toggle settings and click on the first button to insert a paragraph at the end or click on the second button to delete the last paragraph. #5 adds ways to create paragraphs by pressing enter and removing them by pressing backspace anywhere within the toggle.

Description

It's required to deprecate the buttons to insert and delete paragraphs from toggle settings to give a better user experience.

Adjusting the CSS styles for the toggle input and its children

ℹ️ This issue is part of the Epic #7

Context

When the paragraphs are created within a toggle, they look similar to a toggle (including its indent).

Description

The idea is to implement CSS styles to recognize the toggle children. Also is required the toggle and its children have the same style that a paragraph (style text, font family, size text, and others).

Update the test suite

ℹ️ This issue is part of the Epic #7

To test the latest toggle features in #22 it's required adjusted the current test suite

Implement support for read-only mode

ℹ️ This issue is part of the Epic #7

Context

Currently, the toggle plugin is only available to create text in a document.

Description

It's required to implement the support for read-only mode, in this way the plugin can be used in non-editable documents.

Add Hooks and adjust GitHub actions

ℹ️ This issue is part of the Epic #7

Context

There's currently no restriction on making a contribution.

Description

It's required to add hooks to execute before creating a commit and adjusting the GitHub actions, in both cases to execute the linter and the tests.

Extend the plugin support

ℹ️ This issue is an Epic

Context

editorjs-toggle-block is a plugin implemented to be used in Editor.js. The plugin was developed according to the Editor.js guides.

Objective

It's required to extend the functionality of the plugin so that more block types are supported within a toggle, and also to be compatible with the EditorJS Drag/Drop Plugin

Checklist

• #57
• #50
• #49
• #51
• #32

Change toggle icon behavior

ℹ️ This issue is part of the Epic #7

Context

When a toggle is created it starts with a closed status and its content isn't visible

Description

A toggle should be created with open status and display its initial content

Copy / paste toggles share the same foreign key and should be unique, so that lead to bugs and wrong behaviours

Hello, and first, thanks for your work!

Description

When you copy / paste a toggle, the pasted block is created with the same foreign key (fk), so is not unique, and that's leading to wrong behaviours, like wrong child items count, and toggling both of the blocks when you click on one of them.

Environment

• Plugin version : "editorjs-toggle-block": "^0.3.5"
• Editor.js version: 2.23.2
• Plugins you use with their versions: "@editorjs/checklist": "1.3.0", "@editorjs/code": "2.7.0", "@editorjs/delimiter": "1.2.0", "@editorjs/editorjs": "2.23.2", "@editorjs/embed": "^2.5.3", "@editorjs/header": "2.6.2", "@editorjs/image": "2.6.2", "@editorjs/inline-code": "1.3.1", "@editorjs/link": "2.5.0", "@editorjs/link-autocomplete": "^0.0.0", "@editorjs/list": "1.6.2", "@editorjs/marker": "1.2.2", "@editorjs/paragraph": "2.8.0", "@editorjs/quote": "2.4.0", "@editorjs/raw": "2.3.0", "@editorjs/table": "2.0.1", "@editorjs/warning": "1.2.0",
• Device, Browser, OS: Chrome Windows

Current behavior

As you can see, copy/pasted toggle blocks dont have unique foreign keys:
(so when I click on the first toggle, it open both of the toggles...)

But the biggest problem is for the items count, it seems to sum all the fk items, but as they are not unique, the count is wrong.

So here for example I have two toggles with one block inside (a paragraph), so the items count should be 1.
But because the toggles share the samed fk, the items count is 2...

Expected behavior

Any toggle block should have a unique foreign key

Additional context

Used in Strapi admin with https://github.com/melishev/strapi-plugin-react-editorjs

Thanks for your time!

Do you have a compiled version hosted on a CDN?

I was looking to integrate this plugin into our editor.
However, since we are still using older javascript, I was looking for a a compiled version of the plugin.

Like with other plugins of editorsjs, all of them provide a CDN version for direct usage.

Let me know if this is something which is already available.

Bug for undo and redo actions

Precheck

• Do a quick search and make sure the bug has not been reported yet.
• Please disclose security vulnerabilities privately at [email protected].
• Finally, be nice and have fun!.

Description

Relative to #57
When a drag and drop action is done, if we undo the action (ctrl+z) the page gets freeze

Environment

• Editor.js version: 2.24.3
• Plugins you use with their versions:
  * editor.js undo - v0.2.1
  * editorjs toggle block - v0.1.2
• Device, Browser, OS: brave

Current behaviour

When we drag and drop a toggle block, and try to undo that action, the page gets freeze

Expected behaviour

A proper implementation from undo and redo actions where we can undo drag and drop actions

Additional context

It is happening with children too

Create the svg element to the tool

ℹ️ This issue is part of the Epic #7

The tool needs an icon to insert in its respective button. It is necessary to choose and implement the icon as an SVG element.

Not working

Precheck

• [ x] Do a quick search and make sure the bug has not been reported yet.
• [ x] Please disclose security vulnerabilities privately at [email protected].
• [ x] Finally, be nice and have fun!.

Description

A clear and concise description of what the bug is.
I'm getting an error that ToggleBlock isn't defined.

Environment

• Editor.js version: 2.26.5
• Plugins you use with their versions: none
• Device, Browser, OS: PC, Brave, Win10

Current behavior

It says that ToggleBlock isn't defined, means that there is something wrong with ToggleBlock itself.
I'm using your CDN link.

const editor = new EditorJS({
    holder: "editor",
    onReady: () => {
        editor.blocks.renderFromHTML("<h1>Hello there xD</h1>")
    },
    tools: {
        toggle: {
            class: ToggleBlock,
            inlineToolbar: true
        }
    },
    autofocus: true
})

Expected behavior

ToggleBlock should exist when using the CDN link?

Additional context

Support for drag and drop actions

ℹ️ This issue is part of Epic #48

Context

The EditorJS Drag/Drop Plugin allows moving a block.

Description

It's required to adjust the behavior of the toggle when the toolbar is open to be compatible with drag and drop actions.

Test the toggle first version

ℹ️ This issue is part of the Epic #7

To test the #3 functionality its features must be tested

Add shortcut to create a toggle

ℹ️ This issue is part of the Epic #7

Context

To create a toggle is required to click the main toolbar and select the toggle icon.

Description

When > is typed in the default block and after is pressed space, a toggle should be created.

Implement shortcuts to create and delete toggle paragraphs

ℹ️ This issue is part of the Epic #7

Context

At this moment, to add a toggle paragraph or remove it, it's necessary to insert it from the toggle settings. Also is required to simplify the methods to insert and to remove paragraphs

Description

The idea is that the paragraphs will be created with enter and will be removed with backspace

Support for undo and redo actions

ℹ️ This issue is part of Epic #48

Context

The EditorJS Undo Plugin allows undoing and redoing actions on EditorJS blocks.

Description

It's required to adjust the behavior of the toggle to do it compatible with the plugin.

Settings popover broken from editor.js v2.26 and up

With the update to editor.js v2.26 the settings popover does not open anymore.

Expected behavior:

On click of the ce-toolbar__settings-btn button the settings popover opens.

Current behavior:

On click of the ce-toolbar__settings-btn button nothing happens.

Error in console:

editorjs-toggle-block@latest:7 Uncaught TypeError: Cannot read properties of undefined (reading 'lastChild') at I.renderSettings

Looks like the whole ce-settings div in ce-toolbox is missing.

TypeError: crypto.randomUUID is not a function. (In 'crypto.randomUUID()', 'crypto.randomUUID' is undefined)

Description

Crypto.randomUUID error

Environment

• Editor.js version: 2.24.3
• Plugins you use with their versions: @editorjs/header 2.6.2
• Device, Browser, OS: MacBook 2018 15 inch, Safari 15.2, Mac OS 12.1

Current behavior

When click plus icon (Add) and then click toggle icon nothing happens and this error appear.
TypeError: crypto.randomUUID is not a function. (In 'crypto.randomUUID()', 'crypto.randomUUID' is undefined)

Add workflow for automatic publishing in npm

Is your feature request related to a problem? Please describe.

Currently, the publishing process to the NPM library hub is done manually.

Describe the solution you'd like

Add workflow for automatic publishing in npm when the release on Github is created.

Describe alternatives you've considered

https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages

Is there a way to change toggle section placeholder

I'm trying to use this feature in my editor but, the contents are not in English. Like other tools, I have tested some config but it doesn't work and the default "toggle" and "Empty toggle ..." remain.

is there any way to change this default text for the toggle?

Implement block nesting inside the toggle

ℹ️ This issue is part of the Epic #7

Context

Currently, the toggle can nest its paragraphs, and they're stored in the items property

Description

It's required to change the toggle structure and behavior to store in it EditorJS blocks

Infinite loop with non-editable block inside toggle

Precheck

• Do a quick search and make sure the bug has not been reported yet.
• Please disclose security vulnerabilities privately at [email protected].
• Finally, be nice and have fun!.

Description

Pressing shift+tab to remove a block from inside a toggle will result in an infinite loop when a non-editable block (e.g. delimiter) is present inside the toggle.

Environment

• Editor.js version: 2.25.0

Current behavior

See https://codesandbox.io/s/editorjs-toggle-block-test-case-bz2e4r for reproducible steps.

Expected behavior

In the above case, we should expect to see the caret moved to the first paragraph with the toggle set to having 2 items.

Additional context

Seems the offending line is https://github.com/kommitters/editorjs-toggle-block/blob/v0.3.2/src/index.js#L367; there's no check that the index hasn't changed inside the loop.

Update the Readme file

Description

Add the information in the Readme file about the implemented features in epic #7, and the instructions to install and use the plugin.

Set the minimum toggle content

ℹ️ This issue is part of the Epic #7

Context

When a toggle is created it doesn't have blocks inside it. If paragraphs are created and next are deleted the toggle can be without content.

Description

A toggle, even if it's empty will have an element waiting to be clicked to create a paragraph

Adjust the behavior of buttons in the toolbar

ℹ️ This issue is part of Epic #48

Context

The default toolbar has three buttons, to move up a block, delete a block, and move down the block.

Description

It's required to update the button behavior so that when a toggle wants to be moved (up or down), it does so with its nested blocks as well.