Fixing selection across a void node (i.e. mention or image) with the mouse (#3649)

* Fixing selection across a void node (i.e. mention or image) with the mouse.

* Fixing selection across a void nodes via mouse

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

@@ -364,11 +364,21 @@ export const Editable = (props: EditableProps) => {
           IS_FOCUSED.delete(editor)
         }
 
-        if (
+        if (!domSelection) {
-          domSelection &&
+          return Transforms.deselect(editor)
-          hasEditableTarget(editor, domSelection.anchorNode) &&
+        }
-          hasEditableTarget(editor, domSelection.focusNode)
+
-        ) {
+        const { anchorNode, focusNode } = domSelection
+
+        const anchorNodeSelectable =
+          hasEditableTarget(editor, anchorNode) ||
+          isTargetInsideVoid(editor, anchorNode)
+
+        const focusNodeSelectable =
+          hasEditableTarget(editor, focusNode) ||
+          isTargetInsideVoid(editor, focusNode)
+
+        if (anchorNodeSelectable && focusNodeSelectable) {
           const range = ReactEditor.toSlateRange(editor, domSelection)
           Transforms.select(editor, range)
         } else {
@@ -977,6 +987,19 @@ const hasEditableTarget = (
   )
 }
 
+/**
+ * Check if the target is inside void and in the editor.
+ */
+
+const isTargetInsideVoid = (
+  editor: ReactEditor,
+  target: EventTarget | null
+): boolean => {
+  const slateNode =
+    hasTarget(editor, target) && ReactEditor.toSlateNode(editor, target)
+  return Editor.isVoid(editor, slateNode)
+}
+
 /**
  * Check if an event is overrided by a handler.
  */