Removing an horizontal list item that contains another list

1

Hi,

We want to use nested horizontal lists. Our application has an issue when the user tries to remove a horizontal list item that contains another “nested” horizontal list.

Here is how we try to remove a horizontal list item (column):

  public removeColumn() {
    const { view } = this.editor;
    const { state, dispatch } = view;
    const {
      tr,
      selection: { $from }
    } = state;
    let start = $from.before(-1);
    let end = $from.after(-1);

    // check if we are the last list item ?
    // if it is the case remove the whole container
    if ($from.node(-2).content.content.length === 1) {
      start = $from.before(-3);
      end = $from.after(-3);
      delete this.nodes[this.currentNode.id];
    }
    tr.delete(start, end);
    if (this.nodes[this.currentNode.id]) {
      this.nodes[this.currentNode.id].columnsCount -= 1;
    }
    dispatch(tr);
  }

The issue we have is that the before method from resolvedpos.js (prosemirror model) throws a RangeError because depth == 0

See method definition below:

  before(depth) {
    depth = this.resolveDepth(depth);
    if (!depth) throw new RangeError('There is no position before the top-level node');
    return depth == this.depth + 1 ? this.pos : this.path[depth * 3 - 1];
  }

Please can someone provide guidance or help ?

2

You’re making a query that has no reasonable answer (there is no position before the top node). I didn’t debug your code, but I guess the solution would be to figure out why it does that and adjust it to avoid the issue.