Move toasts to sonner (#6053)

app/editor/components/LinkEditor.tsx

@@ -9,6 +9,7 @@ import { Mark } from "prosemirror-model";
 import { Selection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import * as React from "react";
+import { toast } from "sonner";
 import styled from "styled-components";
 import { s, hideScrollbars } from "@shared/styles";
 import { isInternalUrl, sanitizeUrl } from "@shared/utils/urls";
@@ -16,7 +17,6 @@ import Flex from "~/components/Flex";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import Scrollable from "~/components/Scrollable";
 import { Dictionary } from "~/hooks/useDictionary";
-import { ToastOptions } from "~/types";
 import Logger from "~/utils/Logger";
 import Input from "./Input";
 import LinkSearchResult from "./LinkSearchResult";
@@ -47,7 +47,6 @@ type Props = {
     href: string,
     event: React.MouseEvent<HTMLButtonElement>
   ) => void;
-  onShowToast: (message: string, options?: ToastOptions) => void;
   view: EditorView;
 };
 
@@ -240,7 +239,7 @@ class LinkEditor extends React.Component<Props, State> {
     try {
       this.props.onClickLink(this.href, event);
     } catch (err) {
-      this.props.onShowToast(this.props.dictionary.openLinkError);
+      toast.error(this.props.dictionary.openLinkError);
     }
   };
 

app/editor/components/LinkToolbar.tsx

@@ -4,7 +4,6 @@ import createAndInsertLink from "@shared/editor/commands/createAndInsertLink";
 import { creatingUrlPrefix } from "@shared/utils/urls";
 import useDictionary from "~/hooks/useDictionary";
 import useEventListener from "~/hooks/useEventListener";
-import useToasts from "~/hooks/useToasts";
 import { useEditor } from "./EditorContext";
 import FloatingToolbar from "./FloatingToolbar";
 import LinkEditor, { SearchResult } from "./LinkEditor";
@@ -39,7 +38,6 @@ export default function LinkToolbar({
 }: Props) {
   const dictionary = useDictionary();
   const { view } = useEditor();
-  const { showToast } = useToasts();
   const menuRef = React.useRef<HTMLDivElement>(null);
 
   useEventListener("mousedown", (event: Event) => {
@@ -84,11 +82,10 @@ export default function LinkToolbar({
 
       return createAndInsertLink(view, title, href, {
         onCreateLink,
-        onShowToast: showToast,
         dictionary,
       });
     },
-    [onCreateLink, onClose, view, dictionary, showToast]
+    [onCreateLink, onClose, view, dictionary]
   );
 
   const handleOnSelectLink = React.useCallback(
@@ -137,7 +134,6 @@ export default function LinkToolbar({
           onCreateLink={onCreateLink ? handleOnCreateLink : undefined}
           onSelectLink={handleOnSelectLink}
           onRemoveLink={onClose}
-          onShowToast={showToast}
           onClickLink={onClickLink}
           onSearchLink={onSearchLink}
           dictionary={dictionary}

app/editor/components/SelectionToolbar.tsx

@@ -15,7 +15,6 @@ import useDictionary from "~/hooks/useDictionary";
 import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
-import useToasts from "~/hooks/useToasts";
 import getCodeMenuItems from "../menus/code";
 import getDividerMenuItems from "../menus/divider";
 import getFormattingMenuItems from "../menus/formatting";
@@ -97,7 +96,6 @@ function useIsDragging() {
 export default function SelectionToolbar(props: Props) {
   const { onClose, readOnly, onOpen } = props;
   const { view, commands } = useEditor();
-  const { showToast: onShowToast } = useToasts();
   const dictionary = useDictionary();
   const menuRef = React.useRef<HTMLDivElement | null>(null);
   const isActive = useIsActive(view.state);
@@ -175,7 +173,6 @@ export default function SelectionToolbar(props: Props) {
 
     return createAndInsertLink(view, title, href, {
       onCreateLink,
-      onShowToast,
       dictionary,
     });
   };
@@ -271,7 +268,6 @@ export default function SelectionToolbar(props: Props) {
           mark={range.mark}
           from={range.from}
           to={range.to}
-          onShowToast={onShowToast}
           onClickLink={props.onClickLink}
           onSearchLink={props.onSearchLink}
           onCreateLink={onCreateLink ? handleOnCreateLink : undefined}

app/editor/components/SuggestionsMenu.tsx

@@ -3,6 +3,7 @@ import capitalize from "lodash/capitalize";
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
+import { toast } from "sonner";
 import styled from "styled-components";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { EmbedDescriptor } from "@shared/editor/embeds";
@@ -15,7 +16,6 @@ import { AttachmentValidation } from "@shared/validations";
 import { Portal } from "~/components/Portal";
 import Scrollable from "~/components/Scrollable";
 import useDictionary from "~/hooks/useDictionary";
-import useToasts from "~/hooks/useToasts";
 import Logger from "~/utils/Logger";
 import { useEditor } from "./EditorContext";
 import Input from "./Input";
@@ -77,7 +77,6 @@ export type Props<T extends MenuItem = MenuItem> = {
 
 function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
   const { view, commands } = useEditor();
-  const { showToast: onShowToast } = useToasts();
   const dictionary = useDictionary();
   const hasActivated = React.useRef(false);
   const menuRef = React.useRef<HTMLDivElement>(null);
@@ -292,7 +291,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
       const matches = "matcher" in insertItem && insertItem.matcher(href);
 
       if (!matches) {
-        onShowToast(dictionary.embedInvalidLink);
+        toast.error(dictionary.embedInvalidLink);
         return;
       }
 
@@ -365,7 +364,6 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
         uploadFile,
         onFileUploadStart,
         onFileUploadStop,
-        onShowToast,
         dictionary,
         isAttachment: inputRef.current?.accept === "*",
       });