Doc: What does hanging mean?

[lcswillems]

Question

From the source code and the documentation, I can't understand what "hanging" means. Could somebody explain?

I think it would be nice to explain it somewhere in the documentation.

Edit: The answer is:

A range is hanging if it starts at the end of a node or ends at the start of a node.

[majelbstoat]

Hey @lcswillems, from the issue template:

If you have a question, ask it in our Slack channel instead:

https://slate-slack.herokuapp.com/

(Or, you could restructure this as a documentation request!)

[lcswillems]

I have updated the issue. Why not allowing Github Discussions on this repo? The big advantage is that they will be indexed by Google.

[majelbstoat]

That is a good suggestion. @CameronAckermanSEL, thoughts?

[cameracker]

Its a fair point, however this has been a long standing request by Ian and it's really up to him to change it.

That said, the request for documentation on what hanging means is a perfectly reasonable enhancement request for the documentation

[majelbstoat]

Perhaps you know this, but I think @lcswillems means the relatively new Discussions feature, like for example, https://github.com/zeit/next.js/discussions. The concept didn't exist in Github until recently.

They don't count as issues, and can be answered by anyone. Might help with some of the recurring questions we get in Slack about DOM selection, last focused position, how to match/nodes effectively etc.

(I definitely agree we shouldn't have questions as issues here.)

[cameracker]

Oh! I didn't know that feature was a thing!

[cymoo]

@lcswillems Maybe we can guess the meaning of hanging by reading some test cases: block-hanging

[lcswillems]

I don't get it either... Is somebody able to explain this concept with a sentence?

[Wulf]

Update

Feb 23, 2022

See this slack convo between ianstormtaylor and Jason: #4852

The TL;DR is that unhanging the range only affects the end of the range and not the start (and this is intended behaviour).

But for those who want to understand the problem more, continue reading below:

---

From my experience, hanging means that the selection is on a node but hasn't really selected anything in the node. For example:

Given this slate document:

[{text: 'one '}, {text: 'two', bold: true}, {text: ' three'}]

It would render like so:

one two three

Now if we selected the "two":

one |two| three

We don't really have a guarantee of the selection's path and offset for the anchor and focus points.

Let's go over the possible scenarios for editor.selection:

// 1 -- no hanging
{
  anchor: { path: [1], offset: 0 },
  focus: { path: [1], offset: 3 }
}

// 2 -- anchor hanging
{
  anchor: { path: [0], offset: 4 },
  focus: { path: [1], offset: 3 }
}

// 3 -- focus hanging
{
  anchor: { path: [1], offset: 0 },
  focus: { path: [2], offset: 0 }
}

// 4 -- both hanging
{
  anchor: { path: [0], offset: 4 },
  focus: { path: [2], offset: 0 }
}

If you use Editor.unhangRange(editor, editor.selection), it will always return the first scenario (no hanging).

Hehe, I came here looking for whether there was a bug with hanging selection and I ended up finding that someone has already created an issue and PR. Hope it gets merged soon!

[lcswillems]

Thank you for your answer! Now, I get it! A simple sentence would be:

A range is hanging if it starts at the end of a node or ends at the start of a node.

[cdx111]

I get it too.

[beorn]

Perhaps include a note about when/why this happens, why it matters, and when/why/how to fix it?

[tmikeschu]

// 1 -- no hanging
{
  anchor: { path: [1], offset: 0 },
  focus: { path: [1], offset: 3 }
}

// 2 -- anchor hanging
{
  anchor: { path: [0], offset: 4 },
  focus: { path: [1], offset: 3 }
}

// 3 -- focus hanging
{
  anchor: { path: [1], offset: 0 },
  focus: { path: [2], offset: 0 }
}

// 4 -- both hanging
{
  anchor: { path: [0], offset: 4 },
  focus: { path: [2], offset: 0 }
}

Hello! Wanted to point out that based on the implementation, neither offset can be non-zero. I think that means

A range is hanging if it starts at the end of a node AND ends at the start of a node.

?

If it should be an or, I think the the code has a bug and should be

    if ((start.offset !== 0 && end.offset !== 0) || Range.isCollapsed(range)) {

@ianstormtaylor does that sound right?

[VictorBaron]

Yes I was coming to the same conclusion.
So based on this, only the furthest point can be hanging - furthest being the focus in forward selection, and the anchor in backward - and thus be changed.
Not sure if this is intentional 🤔

[techird]

Also intrested here, does partially hanging (scenario 2 and 3) can defined as hanging?

[dlqqq]

Any information on how a hanging range can even be constructed? I can't replicate this behavior at all, although I now understand what a hanging range is.

[dsvgit]

It could be reproduced manually this way (probably it is not the only one case).
Let's say you have two paragraphs:

const value = [
  { children: [{ text: 'first paragraph' }] }
  { children: [{ text: 'second paragraph' }] }
]

If you do a triple click on the first paragraph you probably expect this selection:

{
  "anchor": { "path": [0, 0], "offset": 0 },
  "focus": { "path": [0, 0], "offset": 15 }
}

but you get this:

{
  "anchor": { "path": [0, 0], "offset": 0 },
  "focus": { "path": [1, 0], "offset": 0 }
}

So if you put the second selection to unhangRange function, it returns the first selection
And if you want to apply some transforms to the last selection you can probably get different result than you expect. Getting nodes Editor.nodes(editor) also returns different results with these ranges.

According to code it seems like it "unhangs" ranges only if both anchor and focus points have 0 offset.

I found the example here: udecode/plate#200

[kALLEBALIK]

Does this only happen on wrapped texts? Curious.

[dsvgit]

what do you mean by "wrapped" texts?

[k1w1]

I thought I understood "hanging", but I am confused when I read the slate code, e.g. in remove-nodes.ts there is:

if (!hanging && Range.isRange(at)) {
    at = Editor.unhangRange(editor, at, { voids })
}

I thought that unhangeRange was to fix a hanging range, but this code seems to do the opposite. It only unhangs it if it is not hanging. Perhaps the hanging option means the opposite of what I expected, but I am struggling to articulate what the documentation for that option would be (and I could not find it written anywhere).

[jss-less-step]

I thougth hanging option is used to decide wheather keep hanging state.