From 24f13de37b784bd111b16da49ad3669d9aa54b57 Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Fri, 15 Nov 2024 10:17:04 +0800 Subject: [PATCH] toast --- apps/www/src/lib/plate/create-plate-ui.ts | 1 + .../editor/plugins/media-plugins.tsx | 7 ++ .../default/example/playground-demo.tsx | 2 - .../src/registry/default/plate-ui/editor.tsx | 4 -- .../plate-ui/media-placeholder-element.tsx | 61 ---------------- .../default/plate-ui/media-upload-toast.tsx | 69 +++++++++++++++++++ .../default/plate-ui/undo-toolbar-button.tsx | 32 --------- .../src/react/media/MediaEmbedPlugin.tsx | 14 +--- 8 files changed, 80 insertions(+), 110 deletions(-) create mode 100644 apps/www/src/registry/default/plate-ui/media-upload-toast.tsx delete mode 100644 apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts index fdb37aa1c2..510dbe80a7 100644 --- 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 index d90023081e..cb023ce018 100644 --- 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: () => , + }, + }), ] as const; diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index da1e9ab0ea..fd5f3d76ba 100644 --- 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 index 8825c1fb12..c17d66e8de 100644 --- 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 (
{ - 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 new file mode 100644 index 0000000000..9ac3d1faea --- /dev/null +++ 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 deleted file mode 100644 index 80b01bd137..0000000000 --- a/apps/www/src/registry/default/plate-ui/undo-toolbar-button.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; - -import { useEditorRef, useEditorSelector } from '@udecode/plate-core/react'; -import { withRef } from '@udecode/react-utils'; -import { focusEditor } from '@udecode/slate-react'; -import { Undo2 } from 'lucide-react'; - -import { ToolbarButton } from './toolbar'; - -export const UndoToolbarButton = withRef((props, ref) => { - const editor = useEditorRef(); - const undoAble = useEditorSelector( - (editor) => editor.history.undos.length > 0, - [] - ); - - return ( - { - e.preventDefault(); - editor.undo(); - focusEditor(editor); - }} - tooltip="Undo" - {...props} - > - - - ); -}); diff --git a/packages/media/src/react/media/MediaEmbedPlugin.tsx b/packages/media/src/react/media/MediaEmbedPlugin.tsx index 3ebe9e15a6..054e89b66b 100644 --- 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( BaseMediaEmbedPlugin, { @@ -34,7 +26,7 @@ export const MediaEmbedPlugin = toTPlatePlugin( 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( insertImage(editor, url); - api.media_embed.hideFloating(); + focusEditor(editor); }, }));