Unable to delete a list item

[aacoelho]

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.

list_problem.mov

[Akash52]

I'm also facing the same issue

[elijadev]

Currently facing this issue as well

[sethaddison]

Same

[najib7]

Try https://github.com/editor-js/nested-list

[TheStu]

Also experiencing this, would love to see that PR merged!

[donnfelker]

Same here - Huge problem, cannot delete list items. Would love to see this merged. Is this project being maintained?

[sethaddison]

@donnfelker in my experience, they seem to maintain the editor, but not necessarily the blocks.

[donnfelker]

@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.

[uzair-ashraf]

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 👍🏼

[donnfelker]

@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

[donnfelker]

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
}

[collimarco]

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?