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.

[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]

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.

[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?

[techird]

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