Skip to content

Exception between Select and Anchor Operations in Collaboration  #5771

Open
@electroluxcode

Description

@electroluxcode

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

changed the title [-]Interference between Select and Anchor Operations in Collaboration[/-] [+]Exception between Select and Anchor Operations in Collaboration [/+] on Nov 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @electroluxcode

      Issue actions

        Exception between Select and Anchor Operations in Collaboration · Issue #5771 · ianstormtaylor/slate