@shadospace/editor 1.0.3 → 1.0.4

package/app/api/uploadthing/core.ts

@@ -0,0 +1,43 @@
+import { createUploadthing, type FileRouter } from "uploadthing/next"
+import { UploadThingError } from "uploadthing/server"
+
+const f = createUploadthing()
+
+const auth = (req: Request) => ({ id: "fakeId" }) // Fake auth function
+
+// FileRouter for your app, can contain multiple FileRoutes
+export const ourFileRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
+  imageUploader: 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 }) => {
+      // 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 }
+    }),
+} satisfies FileRouter
+
+export type OurFileRouter = typeof ourFileRouter

package/app/api/uploadthing/route.ts

@@ -0,0 +1,11 @@
+import { createRouteHandler } from "uploadthing/next"
+
+import { ourFileRouter } from "./core"
+
+// Export routes for Next App Router
+export const { GET, POST } = createRouteHandler({
+  router: ourFileRouter,
+ 
+  // Apply an (optional) custom config:
+  // config: { ... },
+})

package/components/editor/menu-bar.tsx

@@ -4,10 +4,13 @@ import { useEditorState } from "@tiptap/react"
 import { menuBarStateSelector } from "./menubar-state"
 import {
   Bold,
-  Code,
+  ChevronDown,
+  CodeXml,
+  Heading,
   Heading1,
   Heading2,
   Heading3,
+  ImageIcon,
   Italic,
   List,
   ListOrdered,
@@ -21,6 +24,14 @@ import {
   Undo2,
 } from "lucide-react"
 import { Button } from "../ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu"
+import { UploadButton } from "@/lib/uploadthing"
+import { toast } from "sonner"
 
 export const MenuBar = ({ editor }: { editor: Editor }) => {
   const editorState = useEditorState({
@@ -32,41 +43,41 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
     <div>
       <div className="overflow-x-auto border bg-card">
         <div className="flex w-max items-center p-2">
-          <Button
-            type="button"
-            variant={"ghost"}
-            size={"icon"}
-            aria-label="Toggle H1"
-            onClick={() =>
-              editor.chain().focus().toggleHeading({ level: 1 }).run()
-            }
-            disabled={editorState.isHeading1}
-          >
-            <Heading1 />
-          </Button>
-          <Button
-            type="button"
-            variant={"ghost"}
-            size={"icon"}
-            aria-label="Toggle H2"
-            onClick={() =>
-              editor.chain().focus().toggleHeading({ level: 2 }).run()
-            }
-            disabled={editorState.isHeading2}
-          >
-            <Heading2 />
-          </Button>
-          <Button
-            type="button"
-            variant={"ghost"}
-            size={"icon"}
-            onClick={() =>
-              editor.chain().focus().toggleHeading({ level: 3 }).run()
-            }
-            disabled={editorState.isHeading3}
-          >
-            <Heading3 />
-          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button type="button" variant={"ghost"} aria-label="Toggle H1">
+                <Heading />
+                <ChevronDown size={0.5} />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem
+                onClick={() =>
+                  editor.chain().focus().toggleHeading({ level: 1 }).run()
+                }
+              >
+                <Heading1 />
+                Heading 1
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() =>
+                  editor.chain().focus().toggleHeading({ level: 2 }).run()
+                }
+              >
+                <Heading2 />
+                Heading 2
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() =>
+                  editor.chain().focus().toggleHeading({ level: 3 }).run()
+                }
+              >
+                <Heading3 />
+                Heading 3
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
           <Button
             type="button"
             variant={"ghost"}
@@ -101,7 +112,7 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
             onClick={() => editor.chain().focus().toggleCode().run()}
             disabled={!editorState.canCode}
           >
-            <Code />
+            <CodeXml />
           </Button>
           <Button
             type="button"
@@ -140,6 +151,7 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
           >
             <SquareCode />
           </Button>
+
           <Button
             type="button"
             variant={"ghost"}
@@ -149,6 +161,20 @@ 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" /> }}
+          />
           <Button
             type="button"
             variant={"ghost"}

package/lib/uploadthing.ts

@@ -0,0 +1,11 @@
+import {
+  generateUploadButton,
+  generateUploadDropzone,
+  generateUploader,
+} from "@uploadthing/react"
+
+import type { OurFileRouter } from "@/app/api/uploadthing/core"
+
+export const UploadButton = generateUploadButton<OurFileRouter>()
+export const UploadDropzone = generateUploadDropzone<OurFileRouter>()
+export const useUploadThing = generateUploader<OurFileRouter>()

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@shadospace/editor",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "private": false,
   "files": [
     "scripts/init.js",
-    "components/editor"
+    "components/editor",
+    "lib/uploadthing.ts",
+    "app/api/uploadthing"
   ],
   "publishConfig": {
     "access": "public"
@@ -20,20 +22,35 @@
     "postinstall": "node scripts/init.js"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.19",
     "@hookform/resolvers": "^5.2.2",
     "@neondatabase/serverless": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@tiptap/core": "^3.23.1",
     "@tiptap/extension-code-block-lowlight": "^3.23.1",
+    "@tiptap/extension-file-handler": "^3.23.1",
+    "@tiptap/extension-highlight": "^3.23.1",
+    "@tiptap/extension-horizontal-rule": "^3.23.1",
     "@tiptap/extension-image": "^3.23.1",
+    "@tiptap/extension-list": "^3.23.1",
+    "@tiptap/extension-subscript": "^3.23.1",
+    "@tiptap/extension-superscript": "^3.23.1",
     "@tiptap/extension-table": "^3.23.1",
+    "@tiptap/extension-text-align": "^3.23.1",
     "@tiptap/extension-text-style": "^3.23.1",
+    "@tiptap/extension-typography": "^3.23.1",
+    "@tiptap/extensions": "^3.23.1",
     "@tiptap/pm": "^3.23.1",
     "@tiptap/react": "^3.23.1",
     "@tiptap/starter-kit": "^3.23.1",
+    "@uploadthing/react": "^7.3.3",
     "better-auth": "^1.6.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dotenv": "^17.4.2",
     "drizzle-orm": "^0.45.2",
+    "lodash.throttle": "^4.1.1",
     "lucide-react": "^1.14.0",
     "next": "16.1.7",
     "next-themes": "^0.4.6",
@@ -42,15 +59,19 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.75.0",
+    "react-hotkeys-hook": "^5.3.2",
     "shadcn": "^4.7.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",
+    "uploadthing": "^7.7.4",
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@base-ui/react": "^1.4.1",
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4.2.1",
+    "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^25.5.0",
     "@types/pg": "^8.20.0",
     "@types/react": "^19.2.14",
@@ -61,6 +82,7 @@
     "postcss": "^8",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
+    "sass": "^1.99.0",
     "tailwindcss": "^4.2.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3"

package/scripts/init.js

@@ -79,6 +79,21 @@ try {
     }
   });
 
+  // Copy UploadThing setup files
+  const uploadthingFiles = [
+    { src: path.join(__dirname, '../lib/uploadthing.ts'), dest: path.join(baseTargetDir, 'lib/uploadthing.ts') },
+    { src: path.join(__dirname, '../app/api/uploadthing/core.ts'), dest: path.join(baseTargetDir, 'app/api/uploadthing/core.ts') },
+    { src: path.join(__dirname, '../app/api/uploadthing/route.ts'), dest: path.join(baseTargetDir, 'app/api/uploadthing/route.ts') }
+  ];
+
+  uploadthingFiles.forEach(file => {
+    if (fs.existsSync(file.src)) {
+      copyFile(file.src, file.dest);
+    } else {
+      console.error(`[tiptap-starter] Source file missing: ${file.src}`);
+    }
+  });
+
   // Update globals.css
   const possiblePaths = [
     path.join(targetDir, 'app/globals.css'),