How to select parent node recursively up to `doc` node

1

I want to give a user opportunity to select the parent node of currently selected node (or current position) and bind it to Ctrl-A shortcut. So if user has a blockquote node with paragraph inside, then if he click Ctrl-A, the entire paragraph should be selected (and thanks to this a could style it and show some buttons for example for dragging, deleting and copying a node). Second Ctrl-A should choose the blockquote and the third one, the entire doc. What are the methods I could use? I tried to use selectParentNode command but it does not work inside tables and it does not select the entire doc (here is official example https://prosemirror.net/)

Second feature related to selection which I’d like to add is to display a tree of parent DOM nodes like TinyMCE do (https://www.tiny.cloud/)

image
image981×738 82.9 KB
. I guess here I should use domAtPos method to get the dom that corresponds to the current selection and then go up uing prentNode property?

EDIT I have the following:

  onSelectionUpdate() {
    const pos = this.editor.state.selection.$from;
    const depth = pos.depth;
    let nodes: any[] = [];
    for (let index = 1; index <= depth; index++) {
      nodes.push({ node: pos.node(index), pos: pos.before(index) });
    }
    this.editor.storage.ancestors = nodes;

    // Set DOM
    let dom: Node | null = this.editor.view.domAtPos(
      this.editor.state.selection.from
    ).node;
    let doms = [];
    while (dom) {
      if (!this.editor.view.dom.contains(dom)) break;
      doms.push(dom);
      dom = dom.parentElement;
    }
    this.editor.storage.doms = doms;

    let nodesFromDoms = [];
    for (let dom of doms) {
      let pos = this.editor.view.posAtDOM(dom, 0);
      nodesFromDoms.push(this.editor.state.doc.nodeAt(pos));
    }
    console.log(nodes);
    console.log(nodesFromDoms);
  },

Why pos.node() does not return TextNode while state.doc.nodeAt(pos) do it? I want to first select the TextNode before paragraph will be selected.

2

You cannot select text nodes as a node selection. Or the whole document. ResolvedPos.node only returns real nodes, not text nodes. Not sure why selectParentNode wouldn’t work in tables. Its implementation looks simple enough.

3

Here is a live demo: https://codesandbox.io/p/sandbox/floating-ui-bubble-context-menus-ldyjpy?file=%2Fsrc%2FApp.js%3A100%2C16

Click button to create a table, click a random cell, type sth and click “selectParent” button. Selection works only for paragraphs and not cells, rows and entire table. I added purple outline to highlight selected node.

Tiptap’s selectParendNode uses simply yours original command:

import { selectParentNode as originalSelectParentNode } from '@tiptap/pm/commands'

import { RawCommands } from '../types.js'

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    selectParentNode: {
      /**
       * Select the parent node.
       */
      selectParentNode: () => ReturnType
    }
  }
}

export const selectParentNode: RawCommands['selectParentNode'] = () => ({ state, dispatch }) => {
  return originalSelectParentNode(state, dispatch)
}
4

Any suggestions?