Move toasts to sonner (#6053)

shared/editor/commands/createAndInsertLink.ts

@@ -1,5 +1,6 @@
 import { Node } from "prosemirror-model";
 import { EditorView } from "prosemirror-view";
+import { toast } from "sonner";
 
 function findPlaceholderLink(doc: Node, href: string) {
   let result: { pos: number; node: Node } | undefined;
@@ -38,11 +39,10 @@ const createAndInsertLink = async function (
   options: {
     dictionary: any;
     onCreateLink: (title: string) => Promise<string>;
-    onShowToast: (message: string) => void;
   }
 ) {
   const { dispatch, state } = view;
-  const { onCreateLink, onShowToast } = options;
+  const { onCreateLink } = options;
 
   try {
     const url = await onCreateLink(title);
@@ -79,7 +79,7 @@ const createAndInsertLink = async function (
       )
     );
 
-    onShowToast(options.dictionary.createLinkError);
+    toast.error(options.dictionary.createLinkError);
   }
 };
 

shared/editor/commands/insertFiles.ts

@@ -1,5 +1,6 @@
 import * as Sentry from "@sentry/react";
 import { EditorView } from "prosemirror-view";
+import { toast } from "sonner";
 import { v4 as uuidv4 } from "uuid";
 import FileHelper from "../lib/FileHelper";
 import uploadPlaceholderPlugin, {
@@ -19,8 +20,6 @@ export type Options = {
   onFileUploadStart?: () => void;
   /** Callback fired when the user completes a file upload */
   onFileUploadStop?: () => void;
-  /** Callback fired when a toast needs to be displayed */
-  onShowToast: (message: string) => void;
   /** Attributes to overwrite */
   attrs?: {
     /** Width to use when inserting image */
@@ -40,13 +39,8 @@ const insertFiles = function (
   files: File[],
   options: Options
 ): void {
-  const {
-    dictionary,
-    uploadFile,
-    onFileUploadStart,
-    onFileUploadStop,
-    onShowToast,
-  } = options;
+  const { dictionary, uploadFile, onFileUploadStart, onFileUploadStop } =
+    options;
 
   // okay, we have some dropped files and a handler – lets stop this
   // event going any further up the stack
@@ -172,7 +166,7 @@ const insertFiles = function (
           })
         );
 
-        onShowToast(error.message || dictionary.fileUploadError);
+        toast.error(error.message || dictionary.fileUploadError);
       })
       .finally(() => {
         complete++;

shared/editor/marks/Link.tsx

@@ -13,6 +13,7 @@ import { Command, EditorState, Plugin } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
 import * as React from "react";
 import ReactDOM from "react-dom";
+import { toast } from "sonner";
 import { isExternalUrl, sanitizeUrl } from "../../utils/urls";
 import findLinkNodes from "../queries/findLinkNodes";
 import getMarkRange from "../queries/getMarkRange";
@@ -138,9 +139,7 @@ export default class Link extends Mark {
                 event
               );
             } catch (err) {
-              this.editor.props.onShowToast(
-                this.options.dictionary.openLinkError
-              );
+              toast.error(this.options.dictionary.openLinkError);
             }
             return true;
           }
@@ -177,9 +176,7 @@ export default class Link extends Mark {
                       );
                     }
                   } catch (err) {
-                    this.editor.props.onShowToast(
-                      this.options.dictionary.openLinkError
-                    );
+                    toast.error(this.options.dictionary.openLinkError);
                   }
                 });
                 return cloned;
@@ -246,9 +243,7 @@ export default class Link extends Mark {
                   this.options.onClickLink(sanitizeUrl(href), event);
                 }
               } catch (err) {
-                this.editor.props.onShowToast(
-                  this.options.dictionary.openLinkError
-                );
+                toast.error(this.options.dictionary.openLinkError);
               }
 
               return true;

shared/editor/nodes/CodeFence.ts

@@ -56,6 +56,7 @@ import visualbasic from "refractor/lang/visual-basic";
 import yaml from "refractor/lang/yaml";
 import zig from "refractor/lang/zig";
 
+import { toast } from "sonner";
 import { Primitive } from "utility-types";
 import { Dictionary } from "~/hooks/useDictionary";
 import { UserPreferences } from "../../types";
@@ -130,7 +131,6 @@ export default class CodeFence extends Node {
   constructor(options: {
     dictionary: Dictionary;
     userPreferences?: UserPreferences | null;
-    onShowToast: (message: string) => void;
   }) {
     super(options);
   }
@@ -197,7 +197,7 @@ export default class CodeFence extends Node {
         }
 
         copy(codeBlock.node.textContent);
-        this.options.onShowToast(this.options.dictionary.codeCopied);
+        toast.message(this.options.dictionary.codeCopied);
         return true;
       },
     };

shared/editor/nodes/Heading.ts

@@ -8,6 +8,7 @@ import {
 } from "prosemirror-model";
 import { Command, Plugin, Selection } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { toast } from "sonner";
 import { Primitive } from "utility-types";
 import Storage from "../../utils/Storage";
 import backspaceToParagraph from "../commands/backspaceToParagraph";
@@ -188,7 +189,7 @@ export default class Heading extends Node {
       .replace("/edit", "");
     copy(normalizedUrl + hash);
 
-    this.options.onShowToast(this.options.dictionary.linkCopied);
+    toast.message(this.options.dictionary.linkCopied);
   };
 
   keys({ type, schema }: { type: NodeType; schema: Schema }) {

shared/editor/nodes/SimpleImage.tsx

@@ -125,7 +125,7 @@ export default class SimpleImage extends Node {
         }
         const { view } = this.editor;
         const { node } = state.selection;
-        const { uploadFile, onFileUploadStart, onFileUploadStop, onShowToast } =
+        const { uploadFile, onFileUploadStart, onFileUploadStop } =
           this.editor.props;
 
         if (!uploadFile) {
@@ -146,7 +146,6 @@ export default class SimpleImage extends Node {
             uploadFile,
             onFileUploadStart,
             onFileUploadStop,
-            onShowToast,
             dictionary: this.options.dictionary,
             replaceExisting: true,
             attrs: {