editor-js/nested-list

Multi-leveled lists for the Editor.js.

nested-list's Issues

Documentation Lacks Information on Localizing "Unordered" and "Ordered"

Hi there,

I'm currently using the nested list plugin of EditorJs and I'm trying to translate the words "Unordered" and "Ordered" for my application's localization. However, I can't seem to find any documentation or guide on how to do this.

Is there a recommended way to translate these terms? If so, could you please provide some directions or add this information to the documentation? This would be very beneficial for developers working on applications that need to support multiple languages.

Problem with copy/paste from word.

Hello,

When we copy a nested list form the editor to word it works correctly. But if we copy back the list from word to the editor, the nested element are not working (this can be tester on the demo of editor js).

After some digging, this is because the HTML paste into the editor is incorrect. It looks like this :

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <ul>
    <li>Black tea</li>
  </ul>
</ul>

Instead of this :

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
    </ul>
  </li>
</ul>

The problem is that the sub ul tag is not inside the li tag. For now I discovered the problem only with Word but there might be the problem with other copy paste. I think fixing this might be a good idea to make the copy/paste more resilient.

To fix this we can a code that fixes the HTML before calling the pasteHandler.

I'll make a pull request/

Paste not working because of sanitize

Just add this:

static get sanitize() {
        return {
            ol: {},
            ul: {},
            li: {}
        };
    }

Backspace at beginning of first list item

Expected behaviour: Hitting Backspace at the beginning of the first item of a list turns the list items into a paragraph block.

Actual behaviour: Hitting Backspace lets the cursor jump to the end of the previous block.

Workaround: Cut and past first list item, then return the empty list item.

Reasoning: Turning the first list items into the default block (usually a paragraph) is default behaviour of both Google Docs, Microsoft Word, and Dropbox Paper. It allows users to turn an item into a paragraph. This is often needed as list items might grow too long and users decide to turn them into paragraphs.

Support inline tool, such as bold, italic, etc.

Is it possible to extend this plugin and use it in EditorJS?

Hello,

Is it possible to extend this plugin and use it in EditorJS?

Example create:
class Test extends NestedList {
..code
}

Add ability to select multiple list items at a time for formatting or deletion

Current behaviour: As of now you can only select on list item at a time, this can make formatting and deleting items tedious

Expected behaviour: Add ability to select multiple list items at a time and apply styles and formatting to all at once or delete all

Mix unordered and ordered list

I have the following HTML:

<ol>
  <li>
    list
    <ul>
      <li>1st</li>
      <li>2nd</li>
    </ul>
  </li>
  <li>
    let'see
    <ol>
      <li>if this works</li>
    </ol>
  </li>
</ol>

and have to renderFromHTML to convert the nested lists, if it is not mixed it works, but when i have a nested unordered list in an ordered list, the list items disappear:

Duplicate input issue in NestedList plugin when using Japanese input

Hello,

I've been experiencing an issue with the NestedList plugin in EditorJS on specific browsers (Google Chrome and Brave). This issue seems to occur only when using Japanese input.

Describe the bug:

When typing in Japanese in a NestedList block and pressing Enter, the previously inputted text gets duplicated to the new line.

Steps to reproduce:

Open EditorJS with NestedList plugin on Google Chrome or Brave browser.
Switch to Japanese input.
Type some text in a NestedList block.
Press Enter to create a new line.
The previously inputted text is duplicated in the new line.

Expected behavior:

When pressing Enter, a new line should be created without duplicating the previous input.

Environment:

OS: MacOS Ventura 13.1
Browser: Google Chrome and Brave
Editor.js version:2.27
NestedList version: 1.3.0

Nested checklist support

The list is amazing. It would be really nice to do a module with nested checklists

Outdenting item moves the item

Expected behavior: Outdenting an indented item should outdent the item and make the following items children of the now outdented item. Example:

1. abc
  1. def
  2. ghi <-- Outdent by hitting SHIFT+TAB
  3. jkl 

1. abc
  1. def
2. ghi <-- Outdented and numbered according to level
  1. jkl <-- Remains indented but now as child of outdented item 'ghi'

Actual behavior: Outdenting an indented item moves the item below the indented items and leaves the children untouched. Example (before state as above)

1. abc
  1. def
  2. jkl
2. ghi <-- Outdented but moved to the bottom 

Reasoning: Outdenting as described "Expected behaviour" is the default for all major text editors.

Turning paragraph into list item by hitting backspace at the beginning

Expected behavior: Hitting backspace at the beginning of a non-empty paragraph that is located behind a list attaches the paragraph's text to the last list item.

* This
* is a
* list

|Some paragraph…. <- Cursor at the beginning of the paragraph, hit backspace

turns into

* This
* is a 
* listSome paragraph….  <- Paragraph attached to the last list item

Actual behavior: Hitting backspace moves cursor to the end of the last list item and leaves the paragraph unchanged.

Reasoning: Users use this behaviour to turn paragraphs they have written into list items. Similarly, see also #27, #30. Attaching a paragraph the the last list items as described above is standard behaviour of Word, Google Docs and Notion.

Unable to exit list on Enter key press for content that has only links

Hi, thanks for the the plugin works! It works well for most scenarios.

I noticed this weird behaviour happens when the user has content which is fully inline edited, like wrapped with bold, or wrapped with link. In this case the line breaks like pressing enter twice to exit from the list, does not happen

Hope to be able to nest any block

e.g Notion

Split list on enter in empty item

Expected behaviour: Hitting Enter in an empty list item of level 1 (no indentation) removes the item, splits the list and inserts a paragraph.

1. First item
2. Second item
3. | <-- Cursor, hit Enter here
4. Fourth item
5. Fifth item

1. First item
2. Second item

| <-- Cursor now in new paragraph

4. Fourth item
5. Fifth item

Actual behaviour: Hitting Enter in an empty list item adds another empty list item below and moves the cursor to the new empty list item.

Reasoning: Splitting the list is standard behavior of Google Docs and Microsoft Word.

Note: The behavior in Google Docs is slightly different: Google Docs actually adds a non-indented paragraph in the list item so that the list stays intact.

If implemented, the reverse should also be implemented: Deleting a paragraph block between two lists should merge the lists.

Feature request: Convert group of elements or single element to list

Right now, I can't seem to convert existing content to a list format. First getting a single element to a list is good, but ultimately I should be able to select multiple elements and convert to a list with conversionConfig https://github.com/codex-team/editor.js/blob/next/docs/tools.md#internal-tool-settings

Ability to support creating list items on paste

Similar to the list variant (https://github.com/editor-js/list/blob/master/src/index.js#L469) it would be great to handle the onPaste event and create list items.

[Feature request] Allow line breaks inside list items

Description
It is currently not possible to insert line breaks (<br>) in list items with Shift + Enter. This behavior differs from @editorjs/list, which allows it:

Enabling line breaks would make the tool much more versatile. Now it is really only usable for lists with short text items.

Delete in empty list item

Expected behaviour: Hitting Delete in an empty list item deletes the list item and moves the cursor to the beginning of the subsequent list item (if any) or to the beginning of the next block.

Actual behaviour: Hitting delete has no effect.

Workaround: Hit Backspace to delete empty list item, then move cursor manually.

Reasoning: Delete in an empty list item is default behaviour of Google Docs, Microsoft Word and Dropbox Paper. Not implementing it confuses the user.

Tools Icon

The default list style is unordered, but the icon (returned from get toolbox) is IconListNumbered. Should:

• the icon returned from get toolbox default to IconListBulleted?
• match the defined defaultStyle?

[Bug] Can not delete first item

Enter behaviour has bug with HTML tags at the end

Expected behaviour: If cursor located at the end of list item with link or another HTML tag, hitting Enter, empty new item are created.

 * List item with a <a href="#">link at end</a>| <- Cursor here...

After Enter hitting...

 * List item with a <a href="#">link at end</a>
 * |

New empty list item created.

Actual behaviour: Hitting Enter new list item are created with an empty tag at the end.

 * List item with a <a href="#">link at end</a>
 * | <a href="#"></a>

New list item with the empty tag at the end are created.

Line breaking behaving weird for CJK language

Explain the issue

When I try to press enter to break the line, it behaves weird for CJK language.

Expected behavior

A new empty line should be created.

How to reproduce

1. Start typing any CJK language. (for here, Korean.)
2. At the end of the word, (you'll see the underline below the word) press enter.
3. Two rows are created one with the end of the word.
   

Shift + Tab incorrectly moves middle item to next item

Reproducible steps

3. List
   3.1 sub item
   3.2 <- untab here
   3.3.
4. List 3.2 moves here
5. 4 moved

Expected Result

3. parent item
   3.1 sub item
4. <- result of untabing
   4.1.sub item 3
5. item

[Feature Request] start ordered list by a different number

I would like to continue an order later in the editor. This would be a "new" list, but I want to start with a different number to continue my order.

For example, if you have this:

block:{
  type: list
    1. Something
    2. Something
block:{
different stuff: eg a video and table}
block:{
  type: list
   3. Something

Style type

Hello,
Can I create a new style type in addition to ordered and unordered? If yes then how?

I can't load plugin (Uncaught Error: Module parse failed: Unexpected token )

Hello guys

I come with one issue, I installed this plugin, It's working well until today
I don't know why

If someone can help me

Thanx

My error bellow

EDIT:
I fork @editor-js/nested-list

when I build with yarn build:dev and copy content of nested-list/dist/nested-list.js in my project here node_modules/@editorjs/nested-list/dist/nested-list.js
IT'S WORK

but when i build with yarn build and copy build production in node_modules/@editorjs/nested-list/dist/nested-list.js
IT'S STILL DOES'NT WORKS

Need help 😢

EDIT AGAIN

After many hour to debug
this bug occur here

const getPastedItems = (parent) => { // get first level li elements. const children = Array.from(parent.querySelectorAll(:scope > li`));

  return children.map((child) => {
    // get subitems if they exist.
    const subItemsWrapper = child.querySelector(`:scope > ${tagToSearch}`);
    // get subitems.
    const subItems = subItemsWrapper ? getPastedItems(subItemsWrapper) : [];
    // get text content of the li element.
    const content = child?.firstChild?.textContent || ''; // bug here with '?' 

    return {
      content,
      items: subItems,
    };
  });
};`

I don't know why

yarn: 1.22.19
editorjs: 2.26.4
nested-list: 1.2.0
react: 17

How to store description for each list item

hey everyone so i am trying to do something like this

1. item 1
   description
   1.1 nested item
   description for the nested Item
   2- description

it would be like a content or description for each item

How to store data for nested-list tool

it looks almost the same as for list tool, but all elements now are objects. strings has type "string", nested lists has type "list" (a recursion). this way you can use any nesting level as you need.

{
        "type" : "list",
        "data" : {
            "style" : "unordered",
            "items" : [
                {
                    "type": "string",
                    "value": "This is a block-styled editor"
                },
                {
                    "type": "string",
                    "value": "Clean output data"
                },
                {
                    "type" : "list",
                    "data" : {
                        "style" : "ordered",
                        "items" : [
                            {
                                "type": "string",
                                "value": "This is a block-styled editor"
                            },
                            {
                                "type": "string",
                                "value": "Clean output data"
                            },
                            {
                                "type": "string",
                                "value": "Simple and powerful API"
                            }
                        ]
                    }
                }
            ]
        }
    }

Make it compatible with @editorjs/list

update Line 106 in the constructor:

        //this.data = data && Object.keys(data).length ? data : initialData;
        this.data = initialData;
        if(data && data.items && data.items.length > 0){
            this.data.style = data.style;
            const item0 = data.items[0];
            if(typeof item0 === "object")
                this.data.items = data.items;
            else { // compatible with @editorjs/list
                const items = [];
                data.items.forEach(di => {
                    items.push({
                        content: di,
                        items: []
                    });
                });
                this.data.items = items;
            }
        }