Description
Description
Hello, I've noticed that there seem to be several issues in the user collaboration. So I'd like to discuss and communicate about them with you.
Issue One: Suppose there are two users, namely me and him. We are currently editing the same section of a document normally. He edits at a very fast speed, specifically at 50 QPS. Then I find that during this process, my anchor will be preempted and my selection doesn't take effect immediately. I believe this is not in line with what was expected.
Issue Two: When we are collaborating on a section of text simultaneously, when I select the whole text, in my view, this text shouldn't continue to expand. However, when he continues to edit this text, the whole code block will still be fully selected.
it will reproduction when click click me trigger
button, it mock 50 qps
The video reproduction and the relevant code are as follows. You can notice that in the video,
if you don't edit the same code block(with slate
area), there will be no situation of the selection being occupied. However, when you are editing the same code block(33333333333333
area, and the selection can be made successfully when entering the same code block for the first time.), the situation where the selection can't be made properly will occur.
and you can notice that I double-clicked on the code block, but the code block of the collaborating party remains in the fully selected state all the time.
Recording
video
issue.slate.mp4
code
import React, { useMemo, useCallback } from 'react'
import {
Slate,
Editable,
withReact,
} from 'slate-react'
import {
createEditor,
Descendant,
} from 'slate'
import { withHistory } from 'slate-history'
const initialValue: Descendant[] = [
{
type: 'paragraph',
children: [
{
text: 'With Slater',
},
],
},
{
type: 'paragraph',
children: [{ text: '' }],
},
]
const CheckListsExample = () => {
const renderElement = useCallback(props => <Element {...props} />, [])
const editor = useMemo(
() => withHistory(withReact(createEditor())),
[]
)
window.editor = editor
let offset = 0
const onClick = ()=>{
setInterval(() => {
window.editor.apply({
type: 'insert_text',
path: [1, 0],
enableSelectionOp: true,
offset,
text: '3',
})
offset++
}, 20);
}
return (
<>
<button onClick={onClick}>click me trigger</button>
<Slate editor={editor} initialValue={initialValue}>
<Editable
scrollSelectionIntoView={()=>{
console.log('scrollSelectionIntoView')
}}
renderElement={renderElement}
placeholder="Get to work…"
spellCheck
autoFocus
/>
</Slate>
</>
)
}
const Element = props => {
const { attributes, children, element } = props
switch (element.type) {
default:
return <p {...attributes}>{children}</p>
}
}
export default CheckListsExample
Finally, I debugged the code and am going to submit a PR later to try to solve these problems,Looking forward to your reply
Activity
[-]Interference between Select and Anchor Operations in Collaboration[/-][+]Exception between Select and Anchor Operations in Collaboration [/+]