feat: add prop enableSelectionOp and onDOMSelectionChangeThrottleTime

.changeset/lovely-penguins-begin.md

@@ -0,0 +1,6 @@
+---
+"slate-react": patch
+"slate": patch
+---
+
+add prop enableSelectionOp and onDOMSelectionChangeThrottleTime

docs/api/operations/README.md

@@ -20,6 +20,8 @@ type InsertNodeOperation = {
   type: 'insert_node'
   path: Path
   node: Node
+  // default value is true
+  enableSelectionOp: boolean
 }
 
 // merge two `Node` objects
@@ -28,20 +30,26 @@ type MergeNodeOperation = {
   path: Path
   position: number
   properties: Partial<Node>
+  // default value is true
+  enableSelectionOp: boolean
 }
 
 // move `Node` from one path to another
 type MoveNodeOperation = {
   type: 'move_node'
   path: Path
   newPath: Path
+  // default value is true
+  enableSelectionOp: boolean
 }
 
 // Remove a `Node`
 type RemoveNodeOperation = {
   type: 'remove_node'
   path: Path
   node: Node
+  // default value is true
+  enableSelectionOp: boolean
 }
 
 // Set properties of a `Node`
@@ -50,6 +58,8 @@ type SetNodeOperation = {
   path: Path
   properties: Partial<Node>
   newProperties: Partial<Node>
+  // default value is true
+  enableSelectionOp: boolean
 }
 
 // Split a node into two separate `Node` objects
@@ -58,6 +68,8 @@ type SplitNodeOperation = {
   path: Path
   position: number
   properties: Partial<Node>
+  // default value is true
+  enableSelectionOp: boolean
 }
 
 export type NodeOperation =
@@ -82,6 +94,8 @@ type InsertTextOperation = {
   path: Path
   offset: number
   text: string
+  // default value is true
+  enableSelectionOp: boolean
 }
 
 // remove text from an existing `Text` node
@@ -90,6 +104,8 @@ type RemoveTextOperation = {
   path: Path
   offset: number
   text: string
+  // default value is true
+  enableSelectionOp: boolean
 }
 
 export type TextOperation = InsertTextOperation | RemoveTextOperation

docs/libraries/slate-react/editable.md

@@ -22,6 +22,7 @@ type EditableProps = {
   scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void
   as?: React.ElementType
   disableDefaultStyles?: boolean
+  onDOMSelectionChangeThrottleTime?: number
 } & React.TextareaHTMLAttributes<HTMLDivElement>
 ```
 

packages/slate-react/src/components/editable.tsx

@@ -124,6 +124,7 @@ export type EditableProps = {
   style?: React.CSSProperties
   renderElement?: (props: RenderElementProps) => JSX.Element
   renderLeaf?: (props: RenderLeafProps) => JSX.Element
+  onDOMSelectionChangeThrottleTime?: number
   renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element
   scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void
   as?: React.ElementType
@@ -153,6 +154,7 @@ export const Editable = forwardRef(
       style: userStyle = {},
       as: Component = 'div',
       disableDefaultStyles = false,
+      onDOMSelectionChangeThrottleTime = 100,
       ...attributes
     } = props
     const editor = useSlate()
@@ -287,8 +289,8 @@ export const Editable = forwardRef(
               Transforms.deselect(editor)
             }
           }
-        }, 100),
-      [editor, readOnly, state]
+        }, onDOMSelectionChangeThrottleTime),
+      [editor, onDOMSelectionChangeThrottleTime, readOnly, state]
     )
 
     const scheduleOnDOMSelectionChange = useMemo(

packages/slate/src/interfaces/operation.ts

@@ -5,6 +5,7 @@ export type BaseInsertNodeOperation = {
   type: 'insert_node'
   path: Path
   node: Node
+  enableSelectionOp?: boolean
 }
 
 export type InsertNodeOperation = ExtendedType<
@@ -17,6 +18,7 @@ export type BaseInsertTextOperation = {
   path: Path
   offset: number
   text: string
+  enableSelectionOp?: boolean
 }
 
 export type InsertTextOperation = ExtendedType<
@@ -29,6 +31,7 @@ export type BaseMergeNodeOperation = {
   path: Path
   position: number
   properties: Partial<Node>
+  enableSelectionOp?: boolean
 }
 
 export type MergeNodeOperation = ExtendedType<
@@ -40,6 +43,7 @@ export type BaseMoveNodeOperation = {
   type: 'move_node'
   path: Path
   newPath: Path
+  enableSelectionOp?: boolean
 }
 
 export type MoveNodeOperation = ExtendedType<
@@ -51,6 +55,7 @@ export type BaseRemoveNodeOperation = {
   type: 'remove_node'
   path: Path
   node: Node
+  enableSelectionOp?: boolean
 }
 
 export type RemoveNodeOperation = ExtendedType<
@@ -63,6 +68,7 @@ export type BaseRemoveTextOperation = {
   path: Path
   offset: number
   text: string
+  enableSelectionOp?: boolean
 }
 
 export type RemoveTextOperation = ExtendedType<
@@ -75,6 +81,7 @@ export type BaseSetNodeOperation = {
   path: Path
   properties: Partial<Node>
   newProperties: Partial<Node>
+  enableSelectionOp?: boolean
 }
 
 export type SetNodeOperation = ExtendedType<
@@ -109,6 +116,7 @@ export type BaseSplitNodeOperation = {
   path: Path
   position: number
   properties: Partial<Node>
+  enableSelectionOp?: boolean
 }
 
 export type SplitNodeOperation = ExtendedType<

packages/slate/src/interfaces/transforms/general.ts

@@ -25,7 +25,7 @@ export interface GeneralTransforms {
 const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
   switch (op.type) {
     case 'insert_node': {
-      const { path, node } = op
+      const { path, node, enableSelectionOp = true } = op
       const parent = Node.parent(editor, path)
       const index = path[path.length - 1]
 
@@ -37,7 +37,7 @@ const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
 
       parent.children.splice(index, 0, node)
 
-      if (selection) {
+      if (selection && enableSelectionOp) {
         for (const [point, key] of Range.points(selection)) {
           selection[key] = Point.transform(point, op)!
         }
@@ -47,24 +47,23 @@ const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
     }
 
     case 'insert_text': {
-      const { path, offset, text } = op
+      const { path, offset, text, enableSelectionOp = true } = op
       if (text.length === 0) break
       const node = Node.leaf(editor, path)
       const before = node.text.slice(0, offset)
       const after = node.text.slice(offset)
       node.text = before + text + after
 
-      if (selection) {
+      if (selection && enableSelectionOp) {
         for (const [point, key] of Range.points(selection)) {
           selection[key] = Point.transform(point, op)!
         }
       }
-
       break
     }
 
     case 'merge_node': {
-      const { path } = op
+      const { path, enableSelectionOp = true } = op
       const node = Node.get(editor, path)
       const prevPath = Path.previous(path)
       const prev = Node.get(editor, prevPath)
@@ -85,7 +84,7 @@ const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
 
       parent.children.splice(index, 1)
 
-      if (selection) {
+      if (selection && enableSelectionOp) {
         for (const [point, key] of Range.points(selection)) {
           selection[key] = Point.transform(point, op)!
         }
@@ -95,7 +94,7 @@ const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
     }
 
     case 'move_node': {
-      const { path, newPath } = op
+      const { path, newPath, enableSelectionOp = true } = op
 
       if (Path.isAncestor(path, newPath)) {
         throw new Error(
@@ -120,7 +119,7 @@ const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
 
       newParent.children.splice(newIndex, 0, node)
 
-      if (selection) {
+      if (selection && enableSelectionOp) {
         for (const [point, key] of Range.points(selection)) {
           selection[key] = Point.transform(point, op)!
         }
@@ -130,14 +129,14 @@ const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
     }
 
     case 'remove_node': {
-      const { path } = op
+      const { path, enableSelectionOp = true } = op
       const index = path[path.length - 1]
       const parent = Node.parent(editor, path)
       parent.children.splice(index, 1)
 
       // Transform all the points in the value, but if the point was in the
       // node that was removed we need to update the range or remove it.
-      if (selection) {
+      if (selection && enableSelectionOp) {
         for (const [point, key] of Range.points(selection)) {
           const result = Point.transform(point, op)
 
@@ -184,14 +183,14 @@ const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
     }
 
     case 'remove_text': {
-      const { path, offset, text } = op
+      const { path, offset, text, enableSelectionOp = true } = op
       if (text.length === 0) break
       const node = Node.leaf(editor, path)
       const before = node.text.slice(0, offset)
       const after = node.text.slice(offset + text.length)
       node.text = before + after
 
-      if (selection) {
+      if (selection && enableSelectionOp) {
         for (const [point, key] of Range.points(selection)) {
           selection[key] = Point.transform(point, op)!
         }
@@ -270,7 +269,7 @@ const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
     }
 
     case 'split_node': {
-      const { path, position, properties } = op
+      const { path, position, properties, enableSelectionOp = true } = op
 
       if (path.length === 0) {
         throw new Error(
@@ -304,7 +303,7 @@ const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
 
       parent.children.splice(index + 1, 0, newNode)
 
-      if (selection) {
+      if (selection && enableSelectionOp) {
         for (const [point, key] of Range.points(selection)) {
           selection[key] = Point.transform(point, op)!
         }