Repository: ianstormtaylor/slate
File: packages/slate-react/src/components/editable.tsx (TypeScript)

Code before:
                }
              }

              // COMPAT: Safari doesn't always remove the selection even if the content-
              // editable element no longer has focus. Refer to:
              // https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web
              if (IS_SAFARI) {
                const domSelection = root.getSelection()
                domSelection?.removeAllRanges()
              }

              IS_FOCUSED.delete(editor)
            },
            [readOnly, attributes.onBlur]
          )}
          onClick={useCallback(
            (event: React.MouseEvent<HTMLDivElement>) => {
              if (
                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 === 3 && readOnly) {
                  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.
                // Therefore we must check that this path actually exists,
                // and that it still refers to the same node.
                if (Editor.hasPath(editor, path)) {
                  const lookupNode = Node.get(editor, path)
                  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 })

                    if (
                      startVoid &&

Review comment (suggestion):
In general, I prefer an enum so I don't have to remember what 3 is... even if it's just the line before, e.g. `const TRIPLE_CLICK = 3` and then `if (event.detail === TRIPLE_CLICK ...`

Code after:
              // COMPAT: The event should be ignored if the focus is moving from
              // the editor to inside a void node's spacer element.
              if (
                isDOMElement(relatedTarget) &&
                relatedTarget.hasAttribute('data-slate-spacer')
              ) {
                return
              }

              // COMPAT: The event should be ignored if the focus is moving to a
              // non- editable section of an element that isn't a void node (eg.
              // a list item of the check list example).
              if (
                relatedTarget != null &&
                isDOMNode(relatedTarget) &&
                ReactEditor.hasDOMNode(editor, relatedTarget)
              ) {
                const node = ReactEditor.toSlateNode(editor, relatedTarget)

                if (Element.isElement(node) && !editor.isVoid(node)) {
                  return
                }
              }

              // COMPAT: Safari doesn't always remove the selection even if the content-
              // editable element no longer has focus. Refer to:
              // https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web
              if (IS_SAFARI) {
                const domSelection = root.getSelection()
                domSelection?.removeAllRanges()
              }

              IS_FOCUSED.delete(editor)
            },
            [readOnly, attributes.onBlur]
          )}
          onClick={useCallback(
            (event: React.MouseEvent<HTMLDivElement>) => {
              if (
                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