@shadospace/editor 1.0.4 → 1.0.6

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.6",
   "type": "module",
   "private": false,
   "files": [

package/scripts/init.js

@@ -1,132 +1,149 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import fs from "fs"
+import path from "path"
+import { fileURLToPath } from "url"
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 // Target directory (where the user is installing the package)
 // INIT_CWD is set by npm/yarn/pnpm/bun during postinstall
-const targetDir = process.env.INIT_CWD || process.cwd();
+const targetDir = process.env.INIT_CWD || process.cwd()
 
-console.log(`[tiptap-starter] Initializing in ${targetDir}`);
+console.log(`[tiptap-starter] Initializing in ${targetDir}`)
 
 // Verify that the target directory is a Next.js project with shadcn installed
-const targetPackageJsonPath = path.join(targetDir, 'package.json');
+const targetPackageJsonPath = path.join(targetDir, "package.json")
 
 if (!fs.existsSync(targetPackageJsonPath)) {
-  console.error(`[tiptap-starter] Error: package.json not found in ${targetDir}. Please run this in the root of your project.`);
-  process.exit(1);
+  console.error(
+    `[tiptap-starter] Error: package.json not found in ${targetDir}. Please run this in the root of your project.`
+  )
+  process.exit(1)
 }
 
-let pkg;
+let pkg
 try {
-  pkg = JSON.parse(fs.readFileSync(targetPackageJsonPath, 'utf8'));
-} catch (e) {
-  console.error(`[tiptap-starter] Error: Failed to parse package.json in ${targetDir}`);
-  process.exit(1);
+  pkg = JSON.parse(fs.readFileSync(targetPackageJsonPath, "utf8"))
+} catch {
+  console.error(
+    `[tiptap-starter] Error: Failed to parse package.json in ${targetDir}`
+  )
+  process.exit(1)
 }
 
-const hasNext = pkg.dependencies?.next || pkg.devDependencies?.next;
-const hasShadcn = fs.existsSync(path.join(targetDir, 'components.json'));
+const hasNext = pkg.dependencies?.next || pkg.devDependencies?.next
+const hasShadcn = fs.existsSync(path.join(targetDir, "components.json"))
 
 if (!hasNext) {
-  console.error(`[tiptap-starter] Error: Next.js is not detected. This package is designed for Next.js projects.`);
-  process.exit(1);
+  console.error(
+    `[tiptap-starter] Error: Next.js is not detected. This package is designed for Next.js projects.`
+  )
+  process.exit(1)
 }
 
 if (!hasShadcn) {
-  console.error(`[tiptap-starter] Error: shadcn/ui is not detected (components.json not found). Please initialize shadcn first.`);
-  process.exit(1);
+  console.error(
+    `[tiptap-starter] Error: shadcn/ui is not detected (components.json not found). Please initialize shadcn first.`
+  )
+  process.exit(1)
 }
 
-const sourceEditorDir = path.join(__dirname, '../components/editor');
+const sourceEditorDir = path.join(__dirname, "../components/editor")
 
 // Detect if target project uses src directory
-const hasSrc = fs.existsSync(path.join(targetDir, 'src'));
-const baseTargetDir = hasSrc ? path.join(targetDir, 'src') : targetDir;
+const hasSrc = fs.existsSync(path.join(targetDir, "src"))
+const baseTargetDir = hasSrc ? path.join(targetDir, "src") : targetDir
 
-const targetEditorDir = path.join(baseTargetDir, 'components/editor');
+const targetEditorDir = path.join(baseTargetDir, "components/editor")
 
 // Function to copy files
 function copyFile(src, dest) {
   if (fs.existsSync(dest)) {
-    console.log(`[tiptap-starter] ${path.basename(dest)} already exists, skipping.`);
-    return;
+    console.log(
+      `[tiptap-starter] ${path.basename(dest)} already exists, skipping.`
+    )
+    return
   }
-  fs.mkdirSync(path.dirname(dest), { recursive: true });
-  fs.copyFileSync(src, dest);
-  console.log(`[tiptap-starter] Created ${dest}`);
+  fs.mkdirSync(path.dirname(dest), { recursive: true })
+  fs.copyFileSync(src, dest)
+  console.log(`[tiptap-starter] Created ${dest}`)
 }
 
 // Files to copy
-const files = [
-  'index.tsx',
-  'menu-bar.tsx',
-  'menubar-state.tsx',
-  'styles.css'
-];
+const files = ["index.tsx", "menu-bar.tsx", "menubar-state.tsx", "styles.css"]
 
 try {
   // Check if source files exist
-  files.forEach(file => {
-    const src = path.join(sourceEditorDir, file);
-    const dest = path.join(targetEditorDir, file);
+  files.forEach((file) => {
+    const src = path.join(sourceEditorDir, file)
+    const dest = path.join(targetEditorDir, file)
     if (fs.existsSync(src)) {
-      copyFile(src, dest);
+      copyFile(src, dest)
     } else {
-      console.error(`[tiptap-starter] Source file missing: ${src}`);
+      console.error(`[tiptap-starter] Source file missing: ${src}`)
     }
-  });
+  })
 
   // 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 => {
+    {
+      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);
+      copyFile(file.src, file.dest)
     } else {
-      console.error(`[tiptap-starter] Source file missing: ${file.src}`);
+      console.error(`[tiptap-starter] Source file missing: ${file.src}`)
     }
-  });
+  })
 
   // Update globals.css
   const possiblePaths = [
-    path.join(targetDir, 'app/globals.css'),
-    path.join(targetDir, 'src/app/globals.css'),
-    path.join(targetDir, 'styles/globals.css')
-  ];
+    path.join(targetDir, "app/globals.css"),
+    path.join(targetDir, "src/app/globals.css"),
+    path.join(targetDir, "styles/globals.css"),
+  ]
 
-  let globalsCssPath = possiblePaths.find(p => fs.existsSync(p));
+  let globalsCssPath = possiblePaths.find((p) => fs.existsSync(p))
 
   if (globalsCssPath) {
-    const content = fs.readFileSync(globalsCssPath, 'utf8');
-    const importStatement = `@import "../components/editor/styles.css";`;
-    
+    const content = fs.readFileSync(globalsCssPath, "utf8")
+    const importStatement = `@import "../components/editor/styles.css";`
+
     if (!content.includes(importStatement)) {
-      const lines = content.split('\n');
-      let insertIndex = 0;
+      const lines = content.split("\n")
+      let insertIndex = 0
       for (let i = 0; i < lines.length; i++) {
-        if (lines[i].startsWith('@import')) {
-          insertIndex = i + 1;
-        } else if (lines[i].trim() !== '') {
-          break;
+        if (lines[i].startsWith("@import")) {
+          insertIndex = i + 1
+        } else if (lines[i].trim() !== "") {
+          break
         }
       }
-      lines.splice(insertIndex, 0, importStatement);
-      fs.writeFileSync(globalsCssPath, lines.join('\n'));
-      console.log(`[tiptap-starter] Referenced styles in ${globalsCssPath}`);
+      lines.splice(insertIndex, 0, importStatement)
+      fs.writeFileSync(globalsCssPath, lines.join("\n"))
+      console.log(`[tiptap-starter] Referenced styles in ${globalsCssPath}`)
     } else {
-      console.log(`[tiptap-starter] Styles already referenced in ${globalsCssPath}`);
+      console.log(
+        `[tiptap-starter] Styles already referenced in ${globalsCssPath}`
+      )
     }
   } else {
-    console.warn(`[tiptap-starter] globals.css not found. Please add \`@import "../components/editor/styles.css";\` manually to your CSS file.`);
+    console.warn(
+      `[tiptap-starter] globals.css not found. Please add \`@import "../components/editor/styles.css";\` manually to your CSS file.`
+    )
   }
-
 } catch (error) {
-  console.error(`[tiptap-starter] Error during initialization:`, error);
+  console.error(`[tiptap-starter] Error during initialization:`, error)
 }