fix

udecode · Nov 17, 2024 · 80acd3b · 80acd3b
1 parent 986d836
commit 80acd3b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 22 deletions.
diff --git a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
@@ -15,7 +15,12 @@ import {
   FontColorPlugin,
 } from '@udecode/plate-font/react';
 import { ListStyleType } from '@udecode/plate-indent-list';
-import { ImagePlugin } from '@udecode/plate-media/react';
+import {
+  AudioPlugin,
+  FilePlugin,
+  ImagePlugin,
+  VideoPlugin,
+} from '@udecode/plate-media/react';
 import {
   BaselineIcon,
   BoldIcon,
@@ -127,10 +132,16 @@ export function FixedToolbarButtons() {
             <IndentToolbarButton />
           </ToolbarGroup>
 
+          <ToolbarGroup>
+            <MediaToolbarButton nodeType={ImagePlugin.key} />
+            <MediaToolbarButton nodeType={VideoPlugin.key} />
+            <MediaToolbarButton nodeType={AudioPlugin.key} />
+            <MediaToolbarButton nodeType={FilePlugin.key} />
+          </ToolbarGroup>
+
           <ToolbarGroup>
             <LinkToolbarButton />
             <ToggleToolbarButton />
-            <MediaToolbarButton nodeType={ImagePlugin.key} />
             <TableDropdownMenu />
             <EmojiDropdownMenu />
             <MoreDropdownMenu />

diff --git a/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx
@@ -170,26 +170,24 @@ export function MediaToolbarButton({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>
-            <AlertDialogDescription className="flex items-center gap-2">
-              <div className="group relative w-full">
-                <label
-                  className="text-muted-foreground/70 group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:text-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-1 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium"
-                  htmlFor="input-32"
-                >
-                  <span className="bg-background inline-flex px-2">URL</span>
-                </label>
-                <Input
-                  id="input-32"
-                  value={url}
-                  onChange={(e) => setUrl(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') embedMedia();
-                  }}
-                  placeholder=""
-                  type="email"
-                  autoFocus
-                />
-              </div>
+            <AlertDialogDescription className="group relative flex w-full items-center gap-2">
+              <label
+                className="text-muted-foreground/70 group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:text-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-1 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium"
+                htmlFor="input-32"
+              >
+                <span className="bg-background inline-flex px-2">URL</span>
+              </label>
+              <Input
+                id="input-32"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') embedMedia();
+                }}
+                placeholder=""
+                type="email"
+                autoFocus
+              />
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>