toast

udecode · Nov 15, 2024 · 24f13de · 24f13de
1 parent 302eed8
commit 24f13de
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 110 deletions.
diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts
@@ -45,6 +45,7 @@ import {
   FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
+  PlaceholderPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
 import {

diff --git a/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/media-plugins.tsx
@@ -6,11 +6,13 @@ import {
   FilePlugin,
   ImagePlugin,
   MediaEmbedPlugin,
+  PlaceholderPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
 
 import { ImagePreview } from '@/registry/default/plate-ui/image-preview';
 import { MediaFloatingToolbar } from '@/registry/default/plate-ui/media-floating-toolbar';
+import { MediaUploadToast } from '@/registry/default/plate-ui/media-upload-toast';
 
 export const mediaPlugins = [
   ImagePlugin.extend({
@@ -28,4 +30,9 @@ export const mediaPlugins = [
   CaptionPlugin.configure({
     options: { plugins: [ImagePlugin, MediaEmbedPlugin] },
   }),
+  PlaceholderPlugin.configure({
+    render: {
+      afterEditable: () => <MediaUploadToast />,
+    },
+  }),
 ] as const;
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -10,7 +10,6 @@ import { Plate, usePlateEditor } from '@udecode/plate-common/react';
 import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';
 import { HEADING_KEYS } from '@udecode/plate-heading';
 import { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';
-import { PlaceholderPlugin } from '@udecode/plate-media/react';
 import { NormalizeTypesPlugin } from '@udecode/plate-normalizers';
 import { PlaywrightPlugin } from '@udecode/plate-playwright';
 import { TablePlugin } from '@udecode/plate-table/react';
@@ -59,7 +58,6 @@ export const usePlaygroundEditor = (id: any = '') => {
       },
     }),
     SingleLinePlugin,
-    PlaceholderPlugin,
     // Testing
     PlaywrightPlugin.configure({
       enabled: process.env.NODE_ENV !== 'production',

diff --git a/apps/www/src/registry/default/plate-ui/editor.tsx b/apps/www/src/registry/default/plate-ui/editor.tsx
@@ -13,8 +13,6 @@ import {
 } from '@udecode/plate-common/react';
 import { cva } from 'class-variance-authority';
 
-import { useUploadErrorToast } from './media-placeholder-element';
-
 const editorContainerVariants = cva(
   'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',
   {
@@ -39,8 +37,6 @@ export const EditorContainer = ({
   const editor = useEditorRef();
   const containerRef = useEditorContainerRef();
 
-  useUploadErrorToast();
-
   return (
     <div
       id={editor.uid}

diff --git a/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx b/apps/www/src/registry/default/plate-ui/media-placeholder-element.tsx
@@ -9,7 +9,6 @@ import { cn } from '@udecode/cn';
 import {
   findNodePath,
   useEditorPlugin,
-  useEditorRef,
   withHOC,
   withRef,
 } from '@udecode/plate-common/react';
@@ -19,13 +18,11 @@ import {
   ImagePlugin,
   PlaceholderPlugin,
   PlaceholderProvider,
-  UploadErrorCode,
   VideoPlugin,
   updateUploadHistory,
 } from '@udecode/plate-media/react';
 import { insertNodes, removeNodes, withoutSavingHistory } from '@udecode/slate';
 import { AudioLines, FileUp, Film, ImageIcon } from 'lucide-react';
-import { toast } from 'sonner';
 import { useFilePicker } from 'use-file-picker';
 
 import { useUploadFile } from '../lib/uploadthing';
@@ -268,61 +265,3 @@ export function formatBytes(
       : (sizes[i] ?? 'Bytes')
   }`;
 }
-
-export const useUploadErrorToast = () => {
-  const editor = useEditorRef();
-
-  const uploadError = editor.useOption(PlaceholderPlugin, 'error');
-
-  useEffect(() => {
-    if (!uploadError) return;
-
-    const { code, data } = uploadError;
-
-    switch (code) {
-      case UploadErrorCode.INVALID_FILE_SIZE: {
-        toast.error(
-          `The size of files ${data.files
-            .map((f) => f.name)
-            .join(', ')} is invalid`
-        );
-
-        break;
-      }
-      case UploadErrorCode.INVALID_FILE_TYPE: {
-        toast.error(
-          `The type of files ${data.files
-            .map((f) => f.name)
-            .join(', ')} is invalid`
-        );
-
-        break;
-      }
-      case UploadErrorCode.TOO_LARGE: {
-        toast.error(
-          `The size of files ${data.files
-            .map((f) => f.name)
-            .join(', ')} is too large than ${data.maxFileSize}`
-        );
-
-        break;
-      }
-      case UploadErrorCode.TOO_LESS_FILES: {
-        toast.error(
-          `The mini um number of files is ${data.minFileCount} for ${data.fileType}`
-        );
-
-        break;
-      }
-      case UploadErrorCode.TOO_MANY_FILES: {
-        toast.error(
-          `The maximum number of files is ${data.maxFileCount} ${
-            data.fileType ? `for ${data.fileType}` : ''
-          }`
-        );
-
-        break;
-      }
-    }
-  }, [uploadError]);
-};
diff --git a/apps/www/src/registry/default/plate-ui/media-upload-toast.tsx b/apps/www/src/registry/default/plate-ui/media-upload-toast.tsx
@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+
+import { useEditorRef } from '@udecode/plate-core/react';
+import { PlaceholderPlugin, UploadErrorCode } from '@udecode/plate-media/react';
+import { toast } from 'sonner';
+
+export const useUploadErrorToast = () => {
+  const editor = useEditorRef();
+
+  const uploadError = editor.useOption(PlaceholderPlugin, 'error');
+
+  useEffect(() => {
+    if (!uploadError) return;
+
+    const { code, data } = uploadError;
+
+    switch (code) {
+      case UploadErrorCode.INVALID_FILE_SIZE: {
+        toast.error(
+          `The size of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is invalid`
+        );
+
+        break;
+      }
+      case UploadErrorCode.INVALID_FILE_TYPE: {
+        toast.error(
+          `The type of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is invalid`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_LARGE: {
+        toast.error(
+          `The size of files ${data.files
+            .map((f) => f.name)
+            .join(', ')} is too large than ${data.maxFileSize}`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_LESS_FILES: {
+        toast.error(
+          `The mini um number of files is ${data.minFileCount} for ${data.fileType}`
+        );
+
+        break;
+      }
+      case UploadErrorCode.TOO_MANY_FILES: {
+        toast.error(
+          `The maximum number of files is ${data.maxFileCount} ${
+            data.fileType ? `for ${data.fileType}` : ''
+          }`
+        );
+
+        break;
+      }
+    }
+  }, [uploadError]);
+};
+
+export const MediaUploadToast = () => {
+  useUploadErrorToast();
+
+  return null;
+};
diff --git a/apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx
diff --git a/packages/media/src/react/media/MediaEmbedPlugin.tsx b/packages/media/src/react/media/MediaEmbedPlugin.tsx
@@ -1,6 +1,6 @@
 import type { ExtendConfig } from '@udecode/plate-common';
 
-import { toTPlatePlugin } from '@udecode/plate-common/react';
+import { focusEditor, toTPlatePlugin } from '@udecode/plate-common/react';
 
 import {
   type BaseMediaEmbedConfig,
@@ -14,17 +14,9 @@ type MediaEmbedConfig = ExtendConfig<
     isFloatingOpen?: boolean;
     mediaType?: string | null;
     url?: string;
-  },
-  {
-    media_embed: MediaEmbedApi;
   }
 >;
 
-export type MediaEmbedApi = {
-  hideFloating: () => void;
-  openFloating: (mediaType: string) => void;
-};
-
 export const MediaEmbedPlugin = toTPlatePlugin<MediaEmbedConfig>(
   BaseMediaEmbedPlugin,
   {
@@ -34,7 +26,7 @@ export const MediaEmbedPlugin = toTPlatePlugin<MediaEmbedConfig>(
       url: '',
     },
   }
-).extendTransforms(({ api, editor, getOptions, setOptions }) => ({
+).extendTransforms(({ editor, getOptions, setOptions }) => ({
   embed: (url: string) => {
     setOptions({ isFloatingOpen: false, url });
 
@@ -44,6 +36,6 @@ export const MediaEmbedPlugin = toTPlatePlugin<MediaEmbedConfig>(
 
     insertImage(editor, url);
 
-    api.media_embed.hideFloating();
+    focusEditor(editor);
   },
 }));