list
list copied to clipboard
editor-js
Unable to delete a list item
When I try to delete a list item it doesn't work. I'm able to delete the text of the item, but the bullet remains.
https://github.com/editor-js/list/assets/9882819/cc1d58bf-7a28-487a-84e5-b689207e0a0a
Same here - Huge problem, cannot delete list items. Would love to see this merged. Is this project being maintained?
@donnfelker in my experience, they seem to maintain the editor, but not necessarily the blocks.
@sethaddison thats a real bummer. This has a ton of potential. Probably going to fork it, apply your change and then reference it in my package.json as a solution. Kind of sucks, but it is what it is.
I just referenced the PR found here to use in the meantime till the fix gets merged in:
export class CustomListPlugin extends List {
backspace(event) {
const items = this._elements.wrapper.querySelectorAll(`.${this.CSS.item}`);
const firstItem = items[0];
if (this.currentItem.textContent.trim() === '') {
const target = this.currentItem;
window.requestIdleCallback(() => {
target.parentElement.removeChild(target);
});
}
if (!firstItem) {
return;
}
/**
* Save the last one.
*/
if (items.length < 2 && !firstItem.innerHTML.replace('<br>', ' ').trim()) {
event.preventDefault();
}
}
}
Then just replace it with the List plugin you passed into the config and you'll be good to go 👍🏼
@uzair-ashraf thank you. I tried that, and it works, until you toggle the list type to the other type (ordered/unordered). Then the key event listeners are removed. I have put a PR that fixes it in #96
Here is my fix. This is basically whats in #96 right now. But you can pull it into your project as @uzair-ashraf did above. I put this into a patched_list.js file
import List from "@editorjs/list";
export default class PatchedList extends List {
/**
* Returns list tag with items
*
* @returns {Element}
* @public
*/
render() {
this._elements.wrapper = this.makeMainTag(this._data.style);
// fill with data
if (this._data.items.length) {
this._data.items.forEach((item) => {
this._elements.wrapper.appendChild(this._make('li', this.CSS.item, {
innerHTML: item,
}));
});
} else {
this._elements.wrapper.appendChild(this._make('li', this.CSS.item));
}
// The event listener attachment use to be inline here.
this.detectKeyEvents()
return this._elements.wrapper;
}
/**
* Settings
*
* @public
* @returns {Array}
*/
renderSettings() {
return this.settings.map(item => ({
...item,
isActive: this._data.style === item.name,
closeOnActivate: true,
onActivate: () => {
this.toggleTune(item.name)
// Reattach key event listeners now that we've toggled to a new list type (ol or ul)
this.detectKeyEvents()
}
}))
}
/**
* Add keydown listeners for escaping from a list and
* back space events.
*/
detectKeyEvents() {
if (!this.readOnly) {
// detect keydown on the last item to escape List
this._elements.wrapper.addEventListener('keydown', (event) => {
const [ENTER, BACKSPACE] = [13, 8]; // key codes
switch (event.keyCode) {
case ENTER:
this.getOutofList(event);
break;
case BACKSPACE:
this.backspace(event);
break;
}
}, false);
}
}
backspace(event) {
const items = this._elements.wrapper.querySelectorAll(`.${this.CSS.item}`);
const firstItem = items[0];
if (this.currentItem.textContent.trim() === '') {
const target = this.currentItem;
window.requestIdleCallback(() => {
target.parentElement.removeChild(target);
});
}
if (!firstItem) {
return;
}
/**
* Save the last one.
*/
if (items.length < 2 && !firstItem.innerHTML.replace('<br>', ' ').trim()) {
event.preventDefault();
}
}
}
Then just import wherever you need it:
import PatchedList from "./patched_list";
Use it:
list: {
class: PatchedList
}
Same problem here:
- I cannot delete the list items (only the text gets deleted, but not the bullet / number)
- moreover, clicking "enter" doesn't delete the last empty bullet (I would expect that "enter" deletes the empty bullet at the end of the list and moves the cursor to a paragraph)
Can someone please merge the fix?
Have you tried the new version of this tool? https://github.com/editor-js/nested-list The List repo will be archived after we'll update the nested list (including optional nesting)
@neSpecc thanks for the suggestion, unfortunately our app doesn't support nesting and we don't need that.
If you will make changes to the nested-list to make it backward compatible with this plugin that would be great. In this way we could move to that without breaking all existing data...