🎨

udecode · Oct 4, 2023 · 1fb5025 · 1fb5025
1 parent f84580a
commit 1fb5025
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 51 deletions.
diff --git a/packages/comments/src/components/useCommentsShowResolvedButton.ts b/packages/comments/src/components/useCommentsShowResolvedButton.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import { focusEditor, useEditorRef } from '@udecode/plate-common';
+import { useEditorRef } from '@udecode/plate-common';
 
 export const useCommentsShowResolvedButton = () => {
   const editor = useEditorRef();
@@ -11,13 +11,11 @@ export const useCommentsShowResolvedButton = () => {
   return {
     props: {
       pressed: isActive,
-      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+      onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
-        e.stopPropagation();
-
+      },
+      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
         setAnchorEl(e.currentTarget);
-
-        focusEditor(editor);
       },
     },
   };

diff --git a/packages/indent-list/src/hooks/useIndentListToolbarButton.ts b/packages/indent-list/src/hooks/useIndentListToolbarButton.ts
@@ -1,8 +1,4 @@
-import {
-  focusEditor,
-  useEditorRef,
-  useEditorState,
-} from '@udecode/plate-common';
+import { useEditorRef, useEditorState } from '@udecode/plate-common';
 
 import { ListStyleType, toggleIndentList } from '../index';
 import { someIndentList } from './someIndentList';
@@ -27,14 +23,13 @@ export const useIndentListToolbarButton = ({
   return {
     props: {
       pressed,
-      onClick: (e: any) => {
+      onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
-        e.stopPropagation();
-
+      },
+      onClick: () => {
         toggleIndentList(editor, {
           listStyleType: nodeType,
         });
-        focusEditor(editor);
       },
     },
   };

diff --git a/packages/indent/src/hooks/useIndentButton.ts b/packages/indent/src/hooks/useIndentButton.ts
@@ -1,4 +1,4 @@
-import { focusEditor, useEditorRef } from '@udecode/plate-common';
+import { useEditorRef } from '@udecode/plate-common';
 
 import { indent } from '../index';
 
@@ -7,11 +7,11 @@ export const useIndentButton = () => {
 
   return {
     props: {
-      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+      onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
-        e.stopPropagation();
+      },
+      onClick: () => {
         indent(editor);
-        focusEditor(editor);
       },
     },
   };

diff --git a/packages/indent/src/hooks/useOutdentButton.ts b/packages/indent/src/hooks/useOutdentButton.ts
@@ -1,4 +1,4 @@
-import { focusEditor, useEditorRef } from '@udecode/plate-common';
+import { useEditorRef } from '@udecode/plate-common';
 
 import { outdent } from '../index';
 
@@ -7,11 +7,11 @@ export const useOutdentButton = () => {
 
   return {
     props: {
-      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+      onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
-        e.stopPropagation();
+      },
+      onClick: () => {
         outdent(editor);
-        focusEditor(editor);
       },
     },
   };

diff --git a/packages/link/src/components/FloatingLink/useFloatingLinkEdit.ts b/packages/link/src/components/FloatingLink/useFloatingLinkEdit.ts
@@ -1,6 +1,5 @@
 import { useCallback, useEffect } from 'react';
 import {
-  focusEditor,
   getAboveNode,
   getEndPoint,
   getPluginOptions,
@@ -134,15 +133,17 @@ export const useFloatingLinkEdit = ({
       },
     },
     editButtonProps: {
-      onClick: useCallback(() => {
+      onClick: () => {
         triggerFloatingLinkEdit(editor);
-      }, [editor]),
+      },
     },
     unlinkButtonProps: {
-      onClick: useCallback(() => {
+      onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+      },
+      onClick: () => {
         unwrapLink(editor);
-        focusEditor(editor, editor.selection!);
-      }, [editor]),
+      },
     },
   };
 };
diff --git a/packages/link/src/components/useLinkToolbarButton.ts b/packages/link/src/components/useLinkToolbarButton.ts
@@ -26,10 +26,7 @@ export const useLinkToolbarButton = (
   return {
     props: {
       pressed: state.pressed,
-      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-
+      onClick: () => {
         triggerFloatingLink(editor, { focused: true });
       },
     },

diff --git a/packages/list/src/hooks/useListToolbarButton.ts b/packages/list/src/hooks/useListToolbarButton.ts
@@ -1,5 +1,4 @@
 import {
-  focusEditor,
   getPluginType,
   someNode,
   useEditorRef,
@@ -28,12 +27,11 @@ export const useListToolbarButton = (
   return {
     props: {
       pressed: state.pressed,
-      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+      onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
-        e.stopPropagation();
-
+      },
+      onClick: () => {
         toggleList(editor, { type: state.nodeType });
-        focusEditor(editor);
       },
     },
   };

diff --git a/packages/media/src/media/useMediaToolbarButton.ts b/packages/media/src/media/useMediaToolbarButton.ts
@@ -1,4 +1,4 @@
-import { focusEditor, useEditorRef } from '@udecode/plate-common';
+import { useEditorRef } from '@udecode/plate-common';
 
 import { insertMedia } from './insertMedia';
 
@@ -9,9 +9,11 @@ export const useMediaToolbarButton = ({
 
   return {
     props: {
+      onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+      },
       onClick: async () => {
         await insertMedia(editor, { type: nodeType });
-        focusEditor(editor);
       },
     },
   };

diff --git a/packages/plate-utils/src/hooks/useMarkToolbarButton.ts b/packages/plate-utils/src/hooks/useMarkToolbarButton.ts
@@ -1,5 +1,4 @@
 import { useEditorRef, useEditorState } from '@udecode/plate-core';
-import { focusEditor } from '@udecode/slate-react';
 import { isMarkActive, toggleMark } from '@udecode/slate-utils';
 
 export const useMarkToolbarButtonState = ({
@@ -27,12 +26,11 @@ export const useMarkToolbarButton = (
   return {
     props: {
       pressed: state.pressed,
-      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+      onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
-        e.stopPropagation();
-
+      },
+      onClick: () => {
         toggleMark(editor, { key: state.nodeType, clear: state.clear });
-        focusEditor(editor);
       },
     },
   };

diff --git a/packages/plate-utils/src/hooks/useRemoveNodeButton.ts b/packages/plate-utils/src/hooks/useRemoveNodeButton.ts
@@ -1,18 +1,19 @@
 import { useEditorRef } from '@udecode/plate-core';
 import { removeNodes, TElement } from '@udecode/slate';
-import { findNodePath, focusEditor } from '@udecode/slate-react';
+import { findNodePath } from '@udecode/slate-react';
 
 export const useRemoveNodeButton = ({ element }: { element: TElement }) => {
   const editor = useEditorRef();
 
   return {
     props: {
+      onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+      },
       onClick: () => {
         const path = findNodePath(editor, element);
 
         removeNodes(editor, { at: path });
-
-        focusEditor(editor, editor.selection!);
       },
     },
   };

diff --git a/packages/slate-react/src/react-editor/focusEditor.ts b/packages/slate-react/src/react-editor/focusEditor.ts
@@ -24,7 +24,7 @@ export const focusEditor = <V extends Value>(
   }
 
   // From slate-react 0.99.0, setTimeout is mandatory to focus the editor after a transform.
-  setTimeout(() => {
-    ReactEditor.focus(editor as any);
-  }, 0);
+  // setTimeout(() => {
+  ReactEditor.focus(editor as any);
+  // }, 0);
 };