文档列表内容内无法取消或者增加子列表

[zhaoxuanHome]

version

1.0v（demo界面测试复现）

Link to minimal reproduction

No response

Steps to reproduce

步骤：
1、编写一段文字选中列表，回车自动增加序号
2、回车增加子列表时，列表序号/标识无法取消

What is expected?

预期效果：
1、换行列表内容内可以增加子列表（不同子类型图标）
2、换行列表内容换行或者断句，段落内可以取消列表

What is actually happening?

1、编写一段文字选中列表，回车自动增加序号
2、回车增加子列表时，列表序号/标识无法取消
3、列表序号重新排序，无法沿用之前序号
4、自列表也无法使用带有需要的列表，否则自动排序（无子父层级划分）

System Info

No response

Any additional comments?

No response

[Hufe921]

暂不支持子列表

[douglasmatheus]

Hello, I would like to pass on some considerations to @Hufe921 when implementing this feat. I once tried to implement this improvement and I didn't finish the work (I still have the changes). However, one thing I noticed is that before implementing nested lists with different types, it is necessary to make a change in how the editor positions the cursor at the beginning of the line when it has one or more tabs.

In other editors, such as Goolge docs, when you have a list regardless of whether it is normal or nested, the initial position of the cursor always respects the tabs added at the beginning of the line.

google.doc.mp4

In the case of canvas editor, the cursor will always go to the first position of the line, regardless of whether it has tabs or not.

canvas.editor.mp4

I didn't have more time to work on this, I had some problems when making the first change, the cursor position according to the key pressed (up, down, right, left, Enter...). If there is some time left, I will work again to send a PR, or I can also send the style as it is for someone else to work on.

[LovaVikasso]

Hello @Hufe921!

Just wanted to drop you a quick note to say a big thank you for creating such an awesome library! It's been a game-changer for me, and I'm super impressed with how everything works.

I'm especially excited about the idea of having nested lists in the library. It would be so cool to be able to organize things in a more detailed way. I know you've got a lot on your plate, but I'm really hoping this feature is on the horizon.

Thanks again for all your hard work!

[lehno]

@douglasmatheus have you ever opened the PR? I would need that for our project

[douglasmatheus]

Hello @Hufe921 , I would like your help. I am implementing sublists. I am dealing with the initial situation where there are no sublists yet, and the user adds a tab to the first element of the list. In other editors, the logic is to add a tab to all other elements in the sequence, without changing anything else.

tarefas.nova.versao.pedido.-.Google.Docs.Mozilla.Firefox.2024-09-25.10-25-18.mp4

I did the logic as follows: first, I check if rowIndex is 0 (first line of the list). If so, I get the second line to check if it contains a tab. If it does not, I go through the row list starting from the third position (second element); within the elementList of this line, I add the number of tabs according to the tab count in tabWidth (tabWidth / defaultTabWidth), starting from the second position of elementList. At the end, I call this.draw.spliceElementList(row.elementList, 1, 0, ...row.elementList) to apply it to the editor elements (I think maybe I don't need to call this).

        if (rowIndex === 0 && tabWidth > 0) {
          const secondList = rowList[2]
          if (secondList.elementList[1].type !== ElementType.TAB) {
            for (let o = 2; o < rowList.length; o++) {
              const row = rowList[o]
              const lastElement = row.elementList[row.elementList.length - 1]
              const tabElement: IRowElement = {
                "type": ElementType.TAB,
                "value": "",
                "listId": lastElement.listId,
                "listType": lastElement.listType,
                "listStyle": lastElement.listStyle,
                "metrics": {
                  "width": 32,
                  "height": 16,
                  "boundingBoxAscent": 16,
                  "boundingBoxDescent": 0
                },
                "left": 0,
                "style": lastElement.style
              }
              const totalTabs = (tabWidth / defaultTabWidth)
              for (let e = 0; e < totalTabs; e++) {
                row.elementList.splice(1, 0, tabElement)
              }
              this.draw.spliceElementList(row.elementList, 1, 0, ...row.elementList)
            }
          }
        }

This logic works and adds a tab to each line of the list, but it throws the following error, causing only the first line to contain a tab. In the following lines, only the markers are rendered with a tab, not the data itself.

My question is, does the error occur because I need to reprocess positionList, because a new element (tab) was added inside rowList? Or should I not proceed this way?

Another question, at first I am making the changes inside ListParticle.ts, in drawListStyle(). Should this verification and reprocessing to add a new tab be done right there, or would it be better to do it inside Draw.ts in drawRow() before calling this.listParticle.drawListStyle(...)?

[lehno]

#831