[Safari] Crash when using select-all with horizontal line in the editor

[mateuszzagorski]

📝 Provide detailed reproduction steps (if any)

1. Open 'Horizontal line' feature page http://127.0.0.1:8080/ckeditor5/latest/features/horizontal-line.html
2. Delete everything, and add single horizontal line.
3. Select all.

✔️ Expected result

Horizontal line is selected.

❌ Actual result

CKEditorError: extend() requires a Range to be added to the Selection
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-extend() requires a Range to be added to the Selection

CKEditorError: cannot-change-view-tree
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-cannot-change-view-tree

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

• Browser: Safari
• This can also be replicated in our docs: https://ckeditor.com/docs/ckeditor5/latest/features/horizontal-line.html

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[jswiderski]

Confirmed. Tested in Safari 15.4 and the issue is still present. Chrome and Firefox work fine though.

[neongreen]

I'm hitting CKEditorError: extend() requires a Range to be added to the Selection in a different scenario — when doing setData in Safari (and similarly, the issue is not present in Chrome). No self-contained example, unfortunately.

I don't even know if it's the same issue or not, but I'm leaving a comment just in case. If the OP issue gets fixed, I'll check if by chance the same fix also applies in my scenario.

[gmartpad]

@neongreen Having the same error as you. When trying to setData on React in Safari, I'm hitting CKEditorError: extend() requires a Range to be added to the Selection

Bug only happens on Safari.

Error log:

CKEditorError: extend() requires a Range to be added to the Selection Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-extend() requires a Range to be added to the Selection

[Wallethub]

We are getting too, only in Safari iOS. Our case is similar, but with angular where after initialization of the editor we invoke SetData() to populate the editable area with existing content.

[wtakayama-chwy]

Same here, we're getting this error randomly with react using real-time-collaboration on Safari iOS and MacOS with chrome. Mainly, our users get the error when trying to make a selection, but is not consistent, so in other words is hard to replicate..

My guess is this code: https://github1s.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/renderer.ts#L861-L862

[wukong1995]

i get same error when editor.focus(). in repo: if ( !this._domSelectionNeedsUpdate( domSelection ) ) {, domSelection.anchorNode, domSelection.focusNode is null, so get error. in safari, window.getSelection().anchorNode is null because default of user-select is none. so add follow code and fix my error.

[contenteditable] {
    -webkit-user-select: auto;
    user-select: all;
}

[dufipl]

Alternatively, the issue reproduces for HTML Embed:

Steps

1. Open: https://ckeditor.com/docs/ckeditor5/latest/features/html/html-embed.html on Safari
2. Clear editable and insert HTML Embed
3. Select all (e.g. cmd + a)