Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to delete a list item #90

Open
aacoelho opened this issue Nov 8, 2023 · 16 comments
Open

Unable to delete a list item #90

aacoelho opened this issue Nov 8, 2023 · 16 comments

Comments

@aacoelho
Copy link

aacoelho commented Nov 8, 2023

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
Copy link

Akash52 commented Nov 23, 2023

I'm also facing the same issue

@elijadev
Copy link

elijadev commented Dec 4, 2023

Currently facing this issue as well

@sethaddison
Copy link

Same

@najib7
Copy link

najib7 commented Jan 17, 2024

@TheStu
Copy link

TheStu commented Apr 4, 2024

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

@donnfelker
Copy link

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

@sethaddison
Copy link

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

@donnfelker
Copy link

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

@shadorki
Copy link

shadorki commented Apr 7, 2024

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
Copy link

donnfelker commented Apr 14, 2024

@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
Copy link

donnfelker commented Apr 14, 2024

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
Copy link

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?

@collimarco
Copy link

This major issue is still there... Is this project still maintained??

@neSpecc
Copy link
Contributor

neSpecc commented Aug 6, 2024

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)

@collimarco
Copy link

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

@neSpecc
Copy link
Contributor

neSpecc commented Aug 6, 2024

The nesting will be optional and backward capability preserved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants