Get previous node at cursor

[mationai]

I'm building an editor where inputs are mostly via buttons. Some entries depends on what the previous node is at the cursor. I have search through all Discussions and slack regarding this, but don't see any (they either don't work or doesn't provide enough info).

Please help, thank you.

[TheSohaibAhmed]

I know what you mean, and the docs aren't super clear, but two good things: 1) You haven't hit a block (this is certainly doable), && 2) I think I can help :D

You said the following: "Some entries depends on what the previous node is at the cursor.", which translates to:

1. Cursor --> which gives you the location, which gives you the current node that the selection is on

2. Somehow we get the prev. node from there.

3. Get cursor location: but it's tricky cz you need to account for collapsed vs. uncollapsed range:
   `let selection = null;

   if (editor?.selection !== null) {

   let isCollapsed = Range.isCollapsed(editor.selection);

   if (isCollpased) {

   // The anchor point and focus point are the same; doesn't matter -- choose one of them

   selection = editor.selection;

   } else {

   // Anchor and focus are diff., choose the one that's earlier.

   // compare selection.anchor.path to selection.focus.path --> choose the index that's sooner.

   // e.g. anchor: {path: [2, 3], offset: 0} & focus: {path: [0,2], offset: 0} --> clearly the focus comes sooner.

   function earlierPoint () {...}

   selection = earlierPoint();

   }
   }`

4. Great! Now that we have this, find the node you're at:
   The docs give you "Editor.node(editor: Editor, at: Location, options?)", which translates to:
   let n = Editor.node(editor, {at: selection.path})
   This will return an array to you: the first index is the node itself, and the second one is the path to that node. So more specifically, you can potentially write it as:
   const [currentNode, currNodePath]. = Editor.node(editor, {at: selection.path});

5. Get the prev. node's location. The docs give you:
   https://docs.slatejs.org/api/nodes/editor#editor.previous-less-than-t-extends-node-greater-than-editor-editor-options-greater-than-nodeentry-l
   i.e. const prevNode = Editor.previous(editor, {at: currNodePath})
   ^I think you're gonna get the same "Node Entry" format as the prev. step, so first index will be your node, and second path.
   So, const [prevNode, prevNodePath]. = Editor.node(editor, {at: currNodePath});

6. Do the matching:
   Now, you need to match up your conditions
   if (prevNode.type) {...}

---

P.S. Quick Note: I wrote this in a manner that's more understable even though it's more steps: you can technically do it in one or fewer lines surely, but if you're struggling to implement what you've said earlier, then it's likely because you (like I was) are confused about how each method is implemented, where, and what result it gives you.

Apart from reading the document, what helped me most was creating a simple editor, writing a line in it, and then literally, experimenting with each of these methods, but specifically learning how to navigate. Ask yourself:

1. How do I enter the nested tree?
2. How do I navigate?
3. How do I know the location my cursor is at?
4. What will mess my code up? e.g. one big thing is when the editor is unfocused the selection is null. So account for that. That can not only happen obv. happen if you click outside the editor, but if you have a hover bar or something too --> so find out what applies to you.

Hope that helps!
Cheers!