kommitters / editorjs-toggle-block Goto Github PK
View Code? Open in Web Editor NEWToggle block tool for EditorJS
Home Page: https://www.npmjs.com/package/editorjs-toggle-block
License: MIT License
Toggle block tool for EditorJS
Home Page: https://www.npmjs.com/package/editorjs-toggle-block
License: MIT License
Crypto.randomUUID error
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)
ℹ️ This issue is part of the Epic #7
For a toggle to be distinguished from a paragraph, the icon must be clickable:
When a toggle is created must be have the following behavior with its icon:
ℹ️ This issue is part of the Epic #7
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.
It's required to deprecate the buttons to insert and delete paragraphs from toggle settings to give a better user experience.
ℹ️ This issue is part of the Epic #7
There's currently no restriction on making a contribution.
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.
ℹ️ This issue is part of the Epic #7
To create a toggle is required to click the main toolbar and select the toggle icon.
When >
is typed in the default block and after is pressed space
, a toggle should be created.
A toggle block can be created with the >
character and the Space
key.
It's required to focus the toggle when the shortcut is used.
A clear and concise description of what the bug is.
I'm getting an error that ToggleBlock isn't defined.
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
})
ToggleBlock should exist when using the CDN link?
ℹ️ This issue is part of the Epic #7
When a toggle is created it starts with a closed status and its content isn't visible
A toggle should be created with open status and display its initial content
ℹ️ This issue is part of the Epic #7
Currently, the method to save data inserts the nested blocks inside the toggle through a query with the foreignKey
property as an argument.
It's required to change the behavior of the save method to avoid the toggle items being saved as separate blocks again.
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.
ℹ️ This issue is part of the Epic #7
Currently, the toggle icon color is black, independent of its status and content
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.
ℹ️ This issue is part of the Epic #7
Currently, the toggle plugin is only available to create text in a document.
It's required to implement the support for read-only mode, in this way the plugin can be used in non-editable documents.
ℹ️ This issue is part of Epic #48
The EditorJS Undo Plugin allows undoing and redoing actions on EditorJS blocks.
It's required to adjust the behavior of the toggle to do it compatible with the plugin.
The save
method saves the toggle and its nested blocks, these last are cleaned, and after their content is restored.
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.
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
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>
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
I expect when dragging an item into the toggle block that it will match the indent and close with the toggle
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.
ℹ️ This issue is part of the Epic #7
To add a block that is inside a toggle is required to keep pressing enter
to write its content.
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.
When trying to create a toggle into another toggle using the toolbar or shortcut (">" + space). This doesn't work.
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.
Here is a GIF showing that I am not able to create a nested toggle:
ℹ️ This issue is part of the Epic #7
When the paragraphs are created within a toggle, they look similar to a toggle (including its indent).
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).
ℹ️ This issue is part of the Epic #7
To implement a block tool in Editor.js, several methods are compulsory:
render()
constructor()
save()
validate()
_createToggle()
render
methodAlso is required:
To implement the tool initially these methods are required
ℹ️ 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.
ℹ️ 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:
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.
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.
Code changes should be validated running the test suite every time a pull request is opened
Hello, and first, thanks for your work!
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.
"editorjs-toggle-block": "^0.3.5"
2.23.2
"@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",
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
...
Any toggle block should have a unique foreign key
Used in Strapi admin with https://github.com/melishev/strapi-plugin-react-editorjs
Thanks for your time!
Add the information in the Readme file about the implemented features in epic #7, and the instructions to install and use the plugin.
Relative to #57
When a drag and drop action is done, if we undo the action (ctrl+z) the page gets freeze
When we drag and drop a toggle block, and try to undo that action, the page gets freeze
A proper implementation from undo and redo actions where we can undo drag and drop actions
It is happening with children too
When the toggle root is dragged and dropped inside itself, the functionality crashes
To reproduce this error:
The root toggle shouldn't be able to be moved inside itself
ℹ️ This issue is an Epic
editorjs-toggle-block
is a plugin implemented to be used in Editor.js. The plugin was developed according to the Editor.js guides.
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
ℹ️ This issue is part of the Epic #7
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
The idea is that the paragraphs will be created with enter
and will be removed with backspace
ℹ️ This issue is part of Epic #48
When the toolbar icon, click to tune
, is clicked the current block is selected.
It's required that when the toolbar icon is clicked on a toggle block, the nested blocks in it are also selected.
ℹ️ This issue is part of the Epic #7
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
:
ℹ️ This issue is part of the Epic #7
When the toggle root is destroyed, its items remain.
It's required to add a method that detects when the toggle root is destroyed so that it destroys its items as well.
Currently, the publishing process to the NPM library hub is done manually.
Add workflow for automatic publishing in npm when the release on Github is created.
https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
ℹ️ This issue is part of the Epic #7
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.
A toggle, even if it's empty will have an element waiting to be clicked to create a paragraph
ℹ️ This issue is part of Epic #48
The EditorJS Drag/Drop Plugin allows moving a block.
It's required to adjust the behavior of the toggle when the toolbar is open to be compatible with drag and drop actions.
When a toggle has nested blocks in it the default content is visible.
It's required to hide the default content when the toggle has nested blocks in it.
ℹ️ This issue is an Epic
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.
Develop the block tool
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.
https://codepen.io/megazoll/pen/VwxzMQx
Editorjs should render toggle block
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.
See https://codesandbox.io/s/editorjs-toggle-block-test-case-bz2e4r for reproducible steps.
In the above case, we should expect to see the caret moved to the first paragraph with the toggle set to having 2 items.
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.
ℹ️ This issue is part of Epic #48
Currently, the toggle can nest blocks of paragraph type, and they're stored in the items
property
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.
ℹ️ This issue is part of the Epic #7
To remove a block that is inside a toggle is required to keep pressing backspace
and the content is definitely lost.
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.
ℹ️ This issue is part of the Epic #7
Currently, the toggle can nest its paragraphs, and they're stored in the items
property
It's required to change the toggle structure and behavior to store in it EditorJS blocks
ℹ️ This issue is part of the Epic #7
Currently, when the icon arrow
is clicked, it hides or displays the blocks inside the toggle, the action is realized without delays or transitions.
It's required to display the blocks inside the toggle with a transition to improve the user experience.
ℹ️ This issue is part of Epic #48
The default toolbar has three buttons, to move up a block, delete a block, and move down the block.
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.