From aff67312cbfa7e45df5cf6abcaec9f4f7d5f1a89 Mon Sep 17 00:00:00 2001
From: yongzs <673262625@qq.com>
Date: Mon, 4 Apr 2022 00:09:03 +0800
Subject: [PATCH] Fixed Triple click selection and copy&paste in read-only mode
 (#4914)

* Fixed Triple click selection and copy&paste in read-only mode

* Create khaki-candles-serve.md

* Update editable.tsx

make sense

* fixed 3871

* Update .changeset/khaki-candles-serve.md

* Update .changeset/khaki-candles-serve.md

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>
---
 .changeset/khaki-candles-serve.md                |  6 ++++++
 packages/slate-react/src/components/editable.tsx | 14 ++++++++++++--
 packages/slate-react/src/utils/constants.ts      |  1 +
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/khaki-candles-serve.md
 create mode 100644 packages/slate-react/src/utils/constants.ts

diff --git a/.changeset/khaki-candles-serve.md b/.changeset/khaki-candles-serve.md
new file mode 100644
index 000000000..9be347c05
--- /dev/null
+++ b/.changeset/khaki-candles-serve.md
@@ -0,0 +1,6 @@
+---
+'slate-react': patch
+'slate': patch
+---
+
+Fixed Triple click selection and copy&paste in read-only mode
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index bcd958405..8596cc431 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -54,6 +54,7 @@ import {
   EDITOR_TO_WINDOW,
   EDITOR_TO_USER_SELECTION,
 } from '../utils/weak-maps'
+import { TRIPLE_CLICK } from '../utils/constants'
 
 type DeferredOperation = () => void
 
@@ -753,13 +754,23 @@ export const Editable = (props: EditableProps) => {
           onClick={useCallback(
             (event: React.MouseEvent<HTMLDivElement>) => {
               if (
-                !readOnly &&
                 hasTarget(editor, event.target) &&
                 !isEventHandled(event, attributes.onClick) &&
                 isDOMNode(event.target)
               ) {
                 const node = ReactEditor.toSlateNode(editor, event.target)
                 const path = ReactEditor.findPath(editor, node)
+                if (event.detail === TRIPLE_CLICK) {
+                  const start = Editor.start(editor, [path[0]])
+                  const end = Editor.end(editor, [path[0]])
+                  const range = Editor.range(editor, start, end)
+                  Transforms.select(editor, range)
+                  return
+                }
+
+                if (readOnly) {
+                  return
+                }
 
                 // At this time, the Slate document may be arbitrarily different,
                 // because onClick handlers can change the document before we get here.
@@ -770,7 +781,6 @@ export const Editable = (props: EditableProps) => {
                   if (lookupNode === node) {
                     const start = Editor.start(editor, path)
                     const end = Editor.end(editor, path)
-
                     const startVoid = Editor.void(editor, { at: start })
                     const endVoid = Editor.void(editor, { at: end })
 
diff --git a/packages/slate-react/src/utils/constants.ts b/packages/slate-react/src/utils/constants.ts
new file mode 100644
index 000000000..a8a13e355
--- /dev/null
+++ b/packages/slate-react/src/utils/constants.ts
@@ -0,0 +1 @@
+export const TRIPLE_CLICK = 3