yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Hide floating toolbar when dragging content (#5239)

Browse Source
This commit is contained in:
Tom Moor
2023-04-23 09:36:06 -04:00
committed by GitHub
parent 20d85e3d3a
commit 4134eced2c
1 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/editor/components/SelectionToolbar.tsx
View File

@@ -11,7 +11,9 @@ import isMarkActive from "@shared/editor/queries/isMarkActive";
import isNodeActive from "@shared/editor/queries/isNodeActive"; import isNodeActive from "@shared/editor/queries/isNodeActive";
import { MenuItem } from "@shared/editor/types"; import { MenuItem } from "@shared/editor/types";
import { creatingUrlPrefix } from "@shared/utils/urls"; import { creatingUrlPrefix } from "@shared/utils/urls";
import useBoolean from "~/hooks/useBoolean";
import useDictionary from "~/hooks/useDictionary"; import useDictionary from "~/hooks/useDictionary";
import useEventListener from "~/hooks/useEventListener";
import useMobile from "~/hooks/useMobile"; import useMobile from "~/hooks/useMobile";
import usePrevious from "~/hooks/usePrevious"; import usePrevious from "~/hooks/usePrevious";
import useToasts from "~/hooks/useToasts"; import useToasts from "~/hooks/useToasts";
@@ -73,6 +75,14 @@ function useIsActive(state: EditorState) {
return some(nodes, (n) => n.content.size); return some(nodes, (n) => n.content.size);
} }
function useIsDragging() {
const [isDragging, setDragging, setNotDragging] = useBoolean();
useEventListener("dragstart", setDragging);
useEventListener("dragend", setNotDragging);
useEventListener("drop", setNotDragging);
return isDragging;
}
export default function SelectionToolbar(props: Props) { export default function SelectionToolbar(props: Props) {
const { onClose, onOpen } = props; const { onClose, onOpen } = props;
const { view, commands } = useEditor(); const { view, commands } = useEditor();
@@ -80,6 +90,7 @@ export default function SelectionToolbar(props: Props) {
const dictionary = useDictionary(); const dictionary = useDictionary();
const menuRef = React.useRef<HTMLDivElement | null>(null); const menuRef = React.useRef<HTMLDivElement | null>(null);
const isActive = useIsActive(view.state); const isActive = useIsActive(view.state);
const isDragging = useIsDragging();
const previousIsActuve = usePrevious(isActive); const previousIsActuve = usePrevious(isActive);
const isMobile = useMobile(); const isMobile = useMobile();
@@ -182,7 +193,7 @@ export default function SelectionToolbar(props: Props) {
const isDividerSelection = isNodeActive(state.schema.nodes.hr)(state); const isDividerSelection = isNodeActive(state.schema.nodes.hr)(state);
// toolbar is disabled in code blocks, no bold / italic etc // toolbar is disabled in code blocks, no bold / italic etc
if (isCodeSelection) { if (isCodeSelection || isDragging) {
return null; return null;
} }