[w3c/selection-api] Proposal: `setCaretInlineOffset` API for adjusting caret visual representation (Issue #347)

mozesstumpf created an issue (w3c/selection-api#347)

## Problem
Rich text editors face challenges with caret positioning when text is broken into multiple line boxes due to responsive layouts, because a single boundary point can be visually rendered in 2 different places.

For example, a boundary-point like `{node: #text, offset: 5}` in the following HTML:
```html
<p style="word-break: break-all">loremipsum</p>
```

![Image](https://github.com/user-attachments/assets/2e447623-2482-46bb-a107-9bb0f4f556ed)

When we use the browser's default event to navigate, it uses its "internal state" to know where the caret should be placed. However,  if we want to implement the block-directional / inline-directional navigation manually, we have no control over the caret's visual placement.

## Proposal

I'd like to propose to extend the Selection API by adding a new method that allows developers to set an inline offset for the caret’s visual appearance.

```ts
interface Selection {
  setCaretInlineOffset: (offset: number) => void;
}
```

### How would it work?
It checks if the caret should be appeared, then
if the caret can be placed in 2 different places, then
if the diff between `offsetA` and `offset` is smaller than the diff between `offsetB` and `offset`, position the caret to the place A, otherwise position it to the place B.


### Example

```js
const textNode = document.createTextNode("loremipsum");

// We get the char's left and right pos
const getCharPos = (text, index) => {
 const range = new Range();

 range.setStart(text, index);
 range.setEnd(text, index + 1);

 const { left: charLeftPos, right: charRightPos } =
  range.getBoundingClientRect();

 return { charLeftPos, charRightPos };
};

// We select the char m (lore[m]ipsum)
const char_M_Pos = getCharPos(textNode, 4);

// We select the char i (lorem[i]psum)
const char_I_Pos = getCharPos(textNode, 5);

const sel = getSelection();

// Set the bp to lorem|ipsum
sel.setPosition(textNode, 5);

// If we want to adjust right after lorem
sel.setCaretInlineOffset(char_M_Pos.charRightPos);

// If we want to adjust right before ipsum
sel.setCaretInlineOffset(char_I_Pos.charLeftPos);
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3c/selection-api/issues/347
You are receiving this because you are subscribed to this thread.

Message ID: <w3c/selection-api/issues/347@github.com>