feat(blog-editor): improve Google Docs import and placeholder UI (#3384)

Author: ComputelessComputer

packages/tiptap/src/blog-editor/google-docs-import.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { SendIcon } from "lucide-react";
+import { FileTextIcon, SendIcon } from "lucide-react";
 import { useState } from "react";
 
 interface GoogleDocsImportProps {
@@ -30,34 +30,27 @@ export function GoogleDocsImport({
   };
 
   return (
-    <div
-      className={clsx([
-        "absolute inset-0 flex items-start justify-center pt-0",
-        "pointer-events-none",
-      ])}
-    >
+    <div className="border border-dashed border-neutral-200 rounded-lg p-4 bg-neutral-50/50">
       <form
         onSubmit={handleSubmit}
-        className={clsx([
-          "flex flex-col gap-3 w-full max-w-md",
-          "pointer-events-auto",
-        ])}
+        className="flex flex-col gap-2"
         onClick={(e) => e.stopPropagation()}
       >
-        <p className="text-sm text-neutral-400">
-          Paste a Google Docs link to import, or start typing...
-        </p>
+        <div className="flex items-center gap-2 text-neutral-400">
+          <FileTextIcon className="size-4" />
+          <span className="text-sm">Or import from Google Docs</span>
+        </div>
         <div className="flex gap-2">
           <input
             type="url"
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             onKeyDown={handleKeyDown}
-            placeholder="https://docs.google.com/document/d/..."
+            placeholder="Paste Google Docs link..."
             disabled={isLoading}
             className={clsx([
               "flex-1 px-3 py-2 text-sm",
-              "border border-neutral-200 rounded-lg",
+              "border border-neutral-200 rounded-lg bg-white",
               "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
               "placeholder:text-neutral-300",
               "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -68,8 +61,8 @@ export function GoogleDocsImport({
             disabled={!url.trim() || isLoading}
             className={clsx([
               "px-3 py-2 rounded-lg",
-              "bg-blue-600 text-white",
-              "hover:bg-blue-700",
+              "bg-neutral-900 text-white",
+              "hover:bg-neutral-800",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               "transition-colors",
               "flex items-center gap-2",

packages/tiptap/src/blog-editor/index.tsx

@@ -59,7 +59,12 @@ const BlogEditor = forwardRef<{ editor: TiptapEditor | null }, BlogEditorProps>(
     const extensions = useMemo(
       () => [
         ...shared.getExtensions(
-          undefined,
+          ({ node }) => {
+            if (node.type.name === "paragraph") {
+              return "Start typing...";
+            }
+            return "";
+          },
           onImageUpload
             ? {
                 onImageUpload,
@@ -178,10 +183,12 @@ const BlogEditor = forwardRef<{ editor: TiptapEditor | null }, BlogEditorProps>(
             role="textbox"
           />
           {showImportOverlay && (
-            <GoogleDocsImport
-              onImport={onGoogleDocsImport}
-              isLoading={isImporting}
-            />
+            <div className="mt-6">
+              <GoogleDocsImport
+                onImport={onGoogleDocsImport}
+                isLoading={isImporting}
+              />
+            </div>
           )}
         </div>
       </div>