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>
ianstormtaylor · Apr 3, 2022 · aff6731 · aff6731
1 parent f6b7ca1
commit aff6731
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/.changeset/khaki-candles-serve.md 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
@@ -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
@@ -0,0 +1 @@
+export const TRIPLE_CLICK = 3