text selection blink when cursor move over the inline-block

zunsthy commented

2025-11-27 14:42:25 +01:00

(Migrated from github.com)

text selection blink when cursor from the paragraph begin to text, after add Decoration.widget zero-width space between cursor and inline-block node.

Decoration.widget(
  sel.head,
  () => document.createTextNode('\u200b'),
  { side: isParagraphEnd ? -1 : 1 }
)

https://github.com/user-attachments/assets/a0bedc37-1e26-40dd-b878-f1928312745a

it only happens on the structure:

| <node><text>

other stituations are not:

| <node><node><text>
<text><node> |
<node>| <node>

text selection blink when cursor from the paragraph begin to text, after add `Decoration.widget` zero-width space between cursor and `inline-block` node. ```js Decoration.widget( sel.head, () => document.createTextNode('\u200b'), { side: isParagraphEnd ? -1 : 1 } ) ``` https://github.com/user-attachments/assets/a0bedc37-1e26-40dd-b878-f1928312745a it only happens on the structure: \| \<node>\<text> other stituations are not: \| \<node>\<node>\<text> \<text>\<node> \| \<node>\| \<node>

marijnh commented

2025-11-28 15:37:18 +01:00

(Migrated from github.com)

Which browser does this happen in? How are you selecting? Shift-arrow? Mouse? Can you set up a small script that reproduces this, because I don't see it happen when I try to do what you are describing.

Akarinx commented

2025-12-01 04:28:39 +01:00

(Migrated from github.com)

Which browser does this happen in? How are you selecting? Shift-arrow? Mouse? Can you set up a small script that reproduces this, because I don't see it happen when I try to do what you are describing.

@marijnh Hello, I'm using the mouse to select from the left side of the inline block, using chrome 142.0.7444.176

Here is the minimal demo:

> Which browser does this happen in? How are you selecting? Shift-arrow? Mouse? Can you set up a small script that reproduces this, because I don't see it happen when I try to do what you are describing. @marijnh Hello, I'm using the mouse to select from the left side of the inline block, using chrome 142.0.7444.176 Here is the minimal [demo:](https://codesandbox.io/p/sandbox/prosemirror-demo-forked-7gkdqs)

zunsthy commented

2025-12-01 04:49:37 +01:00

(Migrated from github.com)

@marijnh it can re-produce on macos chrome 142

demo page: https://4z4y.top/pm/bk-sel/

zero-width space code in here

@marijnh it can re-produce on macos chrome 142 demo page: https://4z4y.top/pm/bk-sel/ zero-width space code in [here](https://github.com/zunsthy/prosemirror-playground/blob/feature/bug-cursor-size-2/src/zwsp.ts)

marijnh commented

2025-12-01 16:23:01 +01:00

(Migrated from github.com)

The issue appears to be that Chrome puts the start of the selection inside the widget (since it's the only text near the cursor), and then refuses to create a selection that starts in an uneditable node and ends in editable content. You can set a raw: true property on your widget config (next to relaxedSide: true) to leave the widget editable and sidestep this issue.

(I'd also recommend you either add a key to the widget config or make sure your widget drawing function is created only once and reused, or ProseMirror will keep redrawing the widget because it cannot tell that it's the same widget.)

The issue appears to be that Chrome puts the start of the selection _inside_ the widget (since it's the only text near the cursor), and then refuses to create a selection that starts in an uneditable node and ends in editable content. You can set a `raw: true` property on your widget config (next to `relaxedSide: true`) to leave the widget editable and sidestep this issue. (I'd also recommend you either add a `key` to the widget config or make sure your widget drawing function is created only once and reused, or ProseMirror will keep redrawing the widget because it cannot tell that it's the same widget.)

zunsthy commented

2025-12-02 08:38:31 +01:00

(Migrated from github.com)

The issue appears to be that Chrome puts the start of the selection inside the widget (since it's the only text near the cursor), and then refuses to create a selection that starts in an uneditable node and ends in editable content. You can set a raw: true property on your widget config (next to relaxedSide: true) to leave the widget editable and sidestep this issue.

set raw: true will break default edit behavior if input text from the position. i think i can't solve it. :(

> The issue appears to be that Chrome puts the start of the selection _inside_ the widget (since it's the only text near the cursor), and then refuses to create a selection that starts in an uneditable node and ends in editable content. You can set a `raw: true` property on your widget config (next to `relaxedSide: true`) to leave the widget editable and sidestep this issue. set `raw: true` will break default edit behavior if input text from the position. i think i can't solve it. :(

zunsthy commented

2025-12-02 10:25:25 +01:00

(Migrated from github.com)

@marijnh very thanks, and need more help.

if set raw: true, text input behavior is incorrect and the text disappears after cursor leaving.

https://github.com/user-attachments/assets/5b8ee490-affb-440b-82bc-57afc3d1b8dd

after input text the dom like this:

it's the same behavior if not span wrapped.

@marijnh very thanks, and need more help. if set `raw: true`, text input behavior is incorrect and the text disappears after cursor leaving. https://github.com/user-attachments/assets/5b8ee490-affb-440b-82bc-57afc3d1b8dd after input text the dom like this: <img width="251" height="102" alt="Image" src="https://github.com/user-attachments/assets/185b8c4d-a703-4281-a9fe-43016e156a6b" /> it's the same behavior if not `span` wrapped.

marijnh commented

2025-12-09 11:19:20 +01:00

(Migrated from github.com)

Oh indeed, that is annoying. Can you say a bit more about what this widget is trying to do? If you're just trying to create a barrier between the cursor and the node after, maybe try an <img> element without src, those are also invisible and treated like text, but don't have the issue that if you make them editable the cursor can go inside of them.

Oh indeed, that is annoying. Can you say a bit more about what this widget is trying to do? If you're just trying to create a barrier between the cursor and the node after, maybe try an `<img>` element without `src`, those are also invisible and treated like text, but don't have the issue that if you make them editable the cursor can go inside of them.

zunsthy commented

2025-12-09 12:09:02 +01:00

(Migrated from github.com)

Can you say a bit more about what this widget is trying to do?

i try to fix cursor size by adding zwsp between cursor and inline-block element. but many attempts failed.

> Can you say a bit more about what this widget is trying to do? i try to fix cursor size by adding zwsp between cursor and inline-block element. but many attempts failed.

rayzhi1130 commented

2026-01-29 16:34:50 +01:00

(Migrated from github.com)

Windows Chorme 144.0.7559.59 also happend this issue!

Here is more infomation maybe you can use:
**when you let mouse focus at the right of the IMG and select to go left, it's OK, that mean this issue only happend when you select image from left to right, not right to left. **

Windows Chorme 144.0.7559.59 also happend this issue! Here is more infomation maybe you can use: **when you let mouse focus at the right of the IMG and select to go left, it's OK, that mean this issue only happend when you select image from left to right, not right to left. **

Rows
Columns

text selection blink when cursor move over the inline-block #1554