How to turn a bulletList node into a orderedList node?

1

I have a nested list like so:

Screen Shot 2022-05-01 at 3.37.44 PM
Screen Shot 2022-05-01 at 3.37.44 PM702×468 22.9 KB

From the selection, I successfully found its closest parent bulletList:

state.selection.$from.node(-2)

I simply want to take this node which is a bulletList and turn it into an orderedList - almost like I’m just going into the HTML and changing the <ul> into an <ol>.

How would I achieve this? I read through the APIs and feel it may not be as trivial as I hoped. Perhaps something with lifting and wrapping?

2

I got this going so far:

const nodeToSwap = editor.selection.$from.node(-2);

const pos = // somehow get position from the node above... It does not expose this info

editor.view.dispatch(
  editor.state.tr.setNodeMarkup(
    pos,
    getNodeType("orderedList", editor.schema)
  )
);

In the above, I’ve hard-coded the editor.selection.$from.node(-2), but in my actual code I’d programmatically be finding the closest bulletList parent to the selection which is text within a listItem.

Something I noticed that isn’t in the documentation is that the ResolvedPos has a path, but I don’t know what the values/numbers mean.

Screen Shot 2022-05-01 at 4.37.12 PM
Screen Shot 2022-05-01 at 4.37.12 PM810×202 21.9 KB

I feel like I’m going down the right path though and will soon be able to recursively turn nested bulletList nodes into orderedList nodes - just need to figure out how to get the position of the bulletList node once I find it.

3

I read through the docs and found all the methods on the ResolvedPos here

I can’t say I totally understand the descriptions, but I think this works…

const node = editor.state.selection.$from.node(-2);

const posOfNode = editor.state.selection.$from.before(-2);

const sameNodeAsAbove = editor.state.doc.nodeAt(posOfNode);

If the above is true and I did indeed find the same node, then I should have all the working blocks I need.

In testing, it seems to be the same node, but I’m not sure if I’m missing any gotchas.

4

That’s a private property that you don’t need to touch. All the relevant information in there is exposed through methods.

If you know the selection is inside a block in a list item, .before(-2) will indeed give you the position of the list.

5

Thanks so much.

Can that logic be extended to:

If you get any node with resolvedPos.node(depth), then you can get that node’s position with resolvedPos.before(depth) - at least in the case that depth < 0

6

Yes. that works in all cases where depth is a valid depth.

1 Like