@shadospace/editor 1.0.4 → 1.0.5

package/app/api/uploadthing/core.ts

@@ -17,6 +17,35 @@ export const ourFileRouter = {
       maxFileSize: "4MB",
       maxFileCount: 1,
     },
+  })
+    .middleware(async ({ req }) => {
+      // This code runs on your server before upload
+      const user = await auth(req)
+
+      // If you throw, the user will not be able to upload
+      if (!user) throw new UploadThingError("Unauthorized")
+
+      // Whatever is returned here is accessible in onUploadComplete as `metadata`
+      return { userId: user.id }
+    })
+    .onUploadComplete(async ({ metadata, file }) => {
+      // This code RUNS ON YOUR SERVER after upload
+      console.log("Upload complete for userId:", metadata.userId)
+
+      console.log("file url", file.ufsUrl)
+
+      // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
+      return { uploadedBy: metadata.userId }
+    }),
+  coverImageUploader: f({
+    image: {
+      /**
+       * For full list of options and defaults, see the File Route API reference
+       * @see https://docs.uploadthing.com/file-routes#route-config
+       */
+      maxFileSize: "4MB",
+      maxFileCount: 1,
+    },
   })
     // Set permissions and file types for this FileRoute
     .middleware(async ({ req }) => {

package/components/editor/index.tsx

@@ -2,6 +2,7 @@
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Image from "@tiptap/extension-image"
+import Link from "@tiptap/extension-link"
 import { TableKit } from "@tiptap/extension-table"
 import { TextStyleKit } from "@tiptap/extension-text-style"
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight"
@@ -35,6 +36,7 @@ export default function Editor({
       TextStyleKit,
       Image,
       TableKit,
+      Link,
       CodeBlockLowlight.configure({ lowlight }),
     ],
     editorProps: {

package/components/editor/menu-bar.tsx

@@ -12,6 +12,7 @@ import {
   Heading3,
   ImageIcon,
   Italic,
+  Link,
   List,
   ListOrdered,
   Minus,
@@ -30,8 +31,20 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu"
-import { UploadButton } from "@/lib/uploadthing"
+import { UploadDropzone } from "@/lib/uploadthing"
 import { toast } from "sonner"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Label } from "../ui/label"
+import { Input } from "../ui/input"
 
 export const MenuBar = ({ editor }: { editor: Editor }) => {
   const editorState = useEditorState({
@@ -151,7 +164,59 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
           >
             <SquareCode />
           </Button>
-
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button type="button" variant={"ghost"} size={"icon"}>
+                <Link />
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Set Link</DialogTitle>
+                <DialogDescription>
+                  Set the link in full URL like https://example.com
+                </DialogDescription>
+              </DialogHeader>
+              <div className="flex flex-col gap-4">
+                <div className="grid flex-1 gap-2">
+                  <Label htmlFor="link-url">Link URL</Label>
+                  <Input
+                    placeholder="https://example.com"
+                    id="link-url"
+                    onChange={(e) =>
+                      editor
+                        .chain()
+                        .focus()
+                        .setLink({ href: e.target.value })
+                        .run()
+                    }
+                    value={editorState.href || ""}
+                  />
+                </div>
+              </div>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Cancel
+                  </Button>
+                </DialogClose>
+                <DialogClose asChild>
+                  <Button
+                    type="button"
+                    onClick={() =>
+                      editor
+                        .chain()
+                        .focus()
+                        .setLink({ href: editorState.href })
+                        .run()
+                    }
+                  >
+                    Set Link
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
           <Button
             type="button"
             variant={"ghost"}
@@ -161,20 +226,62 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
           >
             <Quote />
           </Button>
-          <UploadButton
-            endpoint="imageUploader"
-            onClientUploadComplete={(res) => {
-              res.forEach((item) => {
-                toast.success("Image uploaded successfully")
-                editor.chain().focus().setImage({ src: item.ufsUrl }).run()
-              })
-            }}
-            onUploadError={(error) => {
-              toast.error(`Upload failed: ${error.message}`)
-            }}
-            className="ml-2 ut-button:h-6 ut-button:w-6 ut-button:bg-card ut-button:outline-none ut-allowed-content:hidden"
-            content={{ button: <ImageIcon className="h-4 w-4" /> }}
-          />
+
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button type="button" variant={"ghost"} size={"icon"}>
+                <ImageIcon />
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-md">
+              <DialogHeader>
+                <DialogTitle>Set Image</DialogTitle>
+                <DialogDescription>
+                  Upload your image or provide a link.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="flex flex-col gap-4">
+                <div className="grid flex-1 gap-2">
+                  <Input
+                    placeholder="https://example.com"
+                    id="image-url"
+                    onChange={(e) =>
+                      editor
+                        .chain()
+                        .focus()
+                        .setImage({ src: e.target.value })
+                        .run()
+                    }
+                    value={editorState.image.src || ""}
+                  />
+                </div>
+                <div className="w-full cursor-pointer">
+                  <UploadDropzone
+                    className="h-48 w-full border-2 border-red-500/20 hover:border-red-500/30 ut-button:bg-red-500 ut-button:p-3 ut-button:text-sm ut-button:hover:bg-red-500 ut-allowed-content:hidden ut-label:text-sm ut-label:text-muted-foreground ut-upload-icon:size-40"
+                    endpoint="imageUploader"
+                    onClientUploadComplete={(res) => {
+                      res.forEach((item) => {
+                        toast.success("Image uploaded successfully")
+                        editor
+                          .chain()
+                          .focus()
+                          .setImage({ src: item.ufsUrl })
+                          .run()
+                      })
+                    }}
+                    onUploadError={(error) => {
+                      toast.error(`Upload failed: ${error.message}`)
+                    }}
+                  />
+                </div>
+              </div>
+              <DialogFooter className="justify-end">
+                <DialogClose asChild>
+                  <Button type="button">Insert Image</Button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
           <Button
             type="button"
             variant={"ghost"}

package/components/editor/menubar-state.tsx

@@ -1,10 +1,6 @@
 import type { Editor } from "@tiptap/core"
 import type { EditorStateSnapshot } from "@tiptap/react"
 
-/**
- * State selector for the MenuBar component.
- * Extracts the relevant editor state for rendering menu buttons.
- */
 export function menuBarStateSelector(ctx: EditorStateSnapshot<Editor>) {
   return {
     // Text formatting
@@ -27,6 +23,15 @@ export function menuBarStateSelector(ctx: EditorStateSnapshot<Editor>) {
     isHeading5: ctx.editor.isActive("heading", { level: 5 }) ?? false,
     isHeading6: ctx.editor.isActive("heading", { level: 6 }) ?? false,
 
+    // others
+    href: ctx.editor.isActive("link")
+      ? ctx.editor.getAttributes("link").href
+      : "",
+
+    image: ctx.editor.isActive("image")
+      ? ctx.editor.getAttributes("image").src
+      : "",
+
     // Lists and blocks
     isBulletList: ctx.editor.isActive("bulletList") ?? false,
     isOrderedList: ctx.editor.isActive("orderedList") ?? false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadospace/editor",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "private": false,
   "files": [