From e9aade1c46745928f9002563a085a2ba0cf89b14 Mon Sep 17 00:00:00 2001 From: electroluxcode <3451613934@qq.com> Date: Sat, 30 Nov 2024 02:39:40 +0800 Subject: [PATCH 1/7] feat(slate-react): add props onDOMSelectionChangeThrottleTime --- packages/slate-react/src/components/editable.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 701b7c7b8e..319d544e04 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/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( From be20bfd13e9a07b8b2e6b1389f70c5ba16153889 Mon Sep 17 00:00:00 2001 From: electroluxcode <3451613934@qq.com> Date: Sat, 30 Nov 2024 02:42:10 +0800 Subject: [PATCH 2/7] feat(slate): add props enableSelectionOp to op-type --- packages/slate/src/interfaces/operation.ts | 8 +++++ .../src/interfaces/transforms/general.ts | 29 +++++++++---------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/packages/slate/src/interfaces/operation.ts b/packages/slate/src/interfaces/operation.ts index 0b2a6cd3f1..855112416b 100644 --- a/packages/slate/src/interfaces/operation.ts +++ b/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 + 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 newProperties: Partial + enableSelectionOp?: boolean } export type SetNodeOperation = ExtendedType< @@ -109,6 +116,7 @@ export type BaseSplitNodeOperation = { path: Path position: number properties: Partial + enableSelectionOp?: boolean } export type SplitNodeOperation = ExtendedType< diff --git a/packages/slate/src/interfaces/transforms/general.ts b/packages/slate/src/interfaces/transforms/general.ts index 63f9d87e65..930d87fe56 100644 --- a/packages/slate/src/interfaces/transforms/general.ts +++ b/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)! } From 389495cd7f6256dbfa669433d363a40bb5843993 Mon Sep 17 00:00:00 2001 From: electroluxcode <3451613934@qq.com> Date: Sat, 30 Nov 2024 02:51:23 +0800 Subject: [PATCH 3/7] docs(slate & slate-react): add description about enableSelectionOp and onDOMSelectionChangeThrottleTime --- docs/api/operations/README.md | 16 ++++++++++++++++ docs/libraries/slate-react/editable.md | 1 + 2 files changed, 17 insertions(+) diff --git a/docs/api/operations/README.md b/docs/api/operations/README.md index 33bfce75ae..1a617f78d1 100644 --- a/docs/api/operations/README.md +++ b/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,6 +30,8 @@ type MergeNodeOperation = { path: Path position: number properties: Partial + // default value is true + enableSelectionOp: boolean } // move `Node` from one path to another @@ -35,6 +39,8 @@ type MoveNodeOperation = { type: 'move_node' path: Path newPath: Path + // default value is true + enableSelectionOp: boolean } // Remove a `Node` @@ -42,6 +48,8 @@ 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 newProperties: Partial + // 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 + // 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 diff --git a/docs/libraries/slate-react/editable.md b/docs/libraries/slate-react/editable.md index 514c964fd6..08fed4366f 100644 --- a/docs/libraries/slate-react/editable.md +++ b/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 ``` From e9c3442291aff9b878c4392089de3a023c8040e4 Mon Sep 17 00:00:00 2001 From: Electrolux <59329360+electroluxcode@users.noreply.github.com> Date: Sat, 30 Nov 2024 05:07:01 +0800 Subject: [PATCH 4/7] Create lovely-penguins-begin.md --- .changeset/lovely-penguins-begin.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/lovely-penguins-begin.md diff --git a/.changeset/lovely-penguins-begin.md b/.changeset/lovely-penguins-begin.md new file mode 100644 index 0000000000..0fbb196678 --- /dev/null +++ b/.changeset/lovely-penguins-begin.md @@ -0,0 +1,6 @@ +--- +"slate-react": minor +"slate": minor +--- + +feat: add prop enableSelectionOp and onDOMSelectionChangeThrottleTime From d611fc0f4e742f253993bb21d6e3bc7352d312fd Mon Sep 17 00:00:00 2001 From: Electrolux <3451613934@qq.com> Date: Sat, 30 Nov 2024 05:11:55 +0800 Subject: [PATCH 5/7] update changelog --- .changeset/lovely-penguins-begin.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/lovely-penguins-begin.md b/.changeset/lovely-penguins-begin.md index 0fbb196678..1d41c7fc32 100644 --- a/.changeset/lovely-penguins-begin.md +++ b/.changeset/lovely-penguins-begin.md @@ -1,6 +1,6 @@ --- -"slate-react": minor -"slate": minor +"slate-react": patch +"slate": patch --- -feat: add prop enableSelectionOp and onDOMSelectionChangeThrottleTime +add prop enableSelectionOp and onDOMSelectionChangeThrottleTime From 50241944151fd6a700c9a73b13affba785a558f2 Mon Sep 17 00:00:00 2001 From: Dylan Schiemann Date: Sat, 7 Dec 2024 00:21:49 -0700 Subject: [PATCH 6/7] Update .changeset/lovely-penguins-begin.md --- .changeset/lovely-penguins-begin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/lovely-penguins-begin.md b/.changeset/lovely-penguins-begin.md index 1d41c7fc32..8a962efa8f 100644 --- a/.changeset/lovely-penguins-begin.md +++ b/.changeset/lovely-penguins-begin.md @@ -1,6 +1,6 @@ --- "slate-react": patch -"slate": patch +'slate': patch --- add prop enableSelectionOp and onDOMSelectionChangeThrottleTime From acda47a227cb288cf34f37d713b93edfe6d9452d Mon Sep 17 00:00:00 2001 From: Dylan Schiemann Date: Sat, 7 Dec 2024 00:21:56 -0700 Subject: [PATCH 7/7] Update .changeset/lovely-penguins-begin.md --- .changeset/lovely-penguins-begin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/lovely-penguins-begin.md b/.changeset/lovely-penguins-begin.md index 8a962efa8f..f97446d096 100644 --- a/.changeset/lovely-penguins-begin.md +++ b/.changeset/lovely-penguins-begin.md @@ -1,5 +1,5 @@ --- -"slate-react": patch +'slate-react': patch 'slate': patch ---