Update docs (#353)

* Update docs * Clean up * Fix focus lost prosemirror
onlook-dev · Sep 14, 2024 · 2b7c30b · 2b7c30b
1 parent 1dc1e22
commit 2b7c30b
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 100 deletions.
diff --git a/app/src/lib/editor/engine/overlay/index.ts b/app/src/lib/editor/engine/overlay/index.ts
@@ -130,6 +130,7 @@ export class OverlayManager {
         isComponent?: boolean,
     ) => {
         this.editTextInput.render(rect, content, styles, onChange, onStop, isComponent);
+        this.editTextInput.enable();
     };
 
     updateTextInputSize = (rect: DOMRect) => {
@@ -162,6 +163,7 @@ export class OverlayManager {
     removeEditTextInput = () => {
         this.editTextInput.render({ width: 0, height: 0, top: 0, left: 0 });
         this.editTextInput.element.style.display = 'none';
+        this.editTextInput.disable();
     };
 
     clear = () => {

diff --git a/app/src/lib/editor/engine/overlay/textEdit.ts b/app/src/lib/editor/engine/overlay/textEdit.ts
@@ -13,6 +13,7 @@ export class EditTextInput {
     private editorView: EditorView;
     private onChange: ((content: string) => void) | null = null;
     private onStop: (() => void) | null = null;
+    private isDisabled: boolean = false;
 
     constructor() {
         this.element = document.createElement('div');
@@ -25,6 +26,7 @@ export class EditTextInput {
 
         this.editorView = this.initProseMirror();
         this.element.addEventListener('blur', this.handleBlur.bind(this), true);
+        this.disable();
     }
 
     render(
@@ -119,6 +121,7 @@ export class EditTextInput {
 
     stopEditor(): boolean {
         this.onStop && this.onStop();
+        this.disable();
         return true;
     }
 
@@ -127,4 +130,20 @@ export class EditTextInput {
             this.stopEditor();
         }
     }
+
+    disable() {
+        if (!this.isDisabled) {
+            this.isDisabled = true;
+            this.editorView.setProps({ editable: () => false });
+            this.element.style.pointerEvents = 'none';
+        }
+    }
+
+    enable() {
+        if (this.isDisabled) {
+            this.isDisabled = false;
+            this.editorView.setProps({ editable: () => true });
+            this.element.style.pointerEvents = 'auto';
+        }
+    }
 }
diff --git a/app/src/routes/project/EditPanel/ManualTab.tsx b/app/src/routes/project/EditPanel/ManualTab.tsx
@@ -66,9 +66,7 @@ const ManualTab = observer(() => {
                     <h2 className="text-xs font-semibold">{groupKey}</h2>
                 </AccordionTrigger>
                 <AccordionContent>
-                    {groupKey === 'Text' && (
-                        <TagDetails tagName={editorEngine.elements.selected[0].tagName} />
-                    )}
+                    {groupKey === 'Text' && <TagDetails />}
                     {Object.entries(subGroup).map(([subGroupKey, elementStyles]) => (
                         <div key={subGroupKey}>
                             {getNestedInput(elementStyles, subGroupKey as ElementStyleSubGroup)}

diff --git a/app/src/routes/project/EditPanel/inputs/TagDetails.tsx b/app/src/routes/project/EditPanel/inputs/TagDetails.tsx
@@ -1,13 +1,17 @@
 import { TAG_INFO } from '@/lib/editor/styles/tag';
 import { motion } from 'framer-motion';
+import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
+import { useEditorEngine } from '../..';
 
 type TagInfo = {
     title: string;
     description: string;
 };
 
-const TagDetails = ({ tagName }: { tagName: string }) => {
+const TagDetails = observer(() => {
+    const editorEngine = useEditorEngine();
+    const tagName = editorEngine.elements.selected[0].tagName;
     const [showMore, setShowMore] = useState<boolean>(false);
     const [tagInfo, setTagInfo] = useState<TagInfo>({
         title: '',
@@ -57,6 +61,6 @@ const TagDetails = ({ tagName }: { tagName: string }) => {
             </motion.div>
         </button>
     );
-};
+});
 
 export default TagDetails;
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -5,13 +5,12 @@ import { cn } from "@/lib/utils"
 import "@/styles/globals.css"
 import type { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
-
-const inter = Inter({ subsets: ["latin"] })
-
+const inter = Inter({
+  subsets: ["latin"],
+})
 interface RootLayoutProps {
   children: React.ReactNode
 }
-
 export const metadata: Metadata = {
   metadataBase: new URL(siteConfig.url.base),
   title: {
@@ -54,18 +53,22 @@ export const metadata: Metadata = {
     icon: "/icon.png",
   },
 }
-
 export const viewport: Viewport = {
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "white" },
-    { media: "(prefers-color-scheme: dark)", color: "black" },
+    {
+      media: "(prefers-color-scheme: light)",
+      color: "white",
+    },
+    {
+      media: "(prefers-color-scheme: dark)",
+      color: "black",
+    },
   ],
 }
-
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <head >
+      <head>
         <link rel="icon" href="/logo.ico" sizes="any" />
       </head>
       <body
@@ -83,7 +86,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
           <div className="h-full w-full flex flex-col">
             <Header />
             {children}
-
           </div>
         </ThemeProvider>
       </body>

diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
@@ -1,62 +1,5 @@
-import Link from "next/link"
-
-import Logo from "@/components/logo"
-import { ModeToggle } from "@/components/mode-toggle"
-import { buttonVariants } from "@/components/ui/button"
-import { siteConfig } from "@/config/site"
-import { cn } from "@/lib/utils"
+import { redirect } from 'next/navigation'
 
 export default function Home() {
-  return (
-    <main className="flex flex-col gap-[32px] h-screen items-center justify-center overflow-auto m-10">
-      <div className="container max-w-[64rem] flex-col items-center gap-4 text-center flex">
-        <Logo width={80} height={80} />
-        <h1 className="text-2xl font-semibold sm:text-5xl md:text-6xl lg:text-7xl">
-          {siteConfig.name}
-        </h1>
-        <p className="max-w-[42rem] text-muted-foreground text-xl">
-          {siteConfig.description}
-        </p>
-        <div className="flex gap-2">
-          <Link
-            href={siteConfig.links.quickstart}
-            className={cn(
-              buttonVariants({
-                size: "default",
-              })
-            )}
-          >
-            Get Started
-          </Link>
-          <ModeToggle />
-        </div>
-      </div>
-      <div className="w-full max-w-lg  flex flex-col gap-3">
-        <p className="m-0 p-0 text-left text-lg">What is Onlook?</p>
-        <p className="m-0 p-0 text-left flex">
-          Onlook is a browser extension that lets anyone edit any webpage, then
-          publish their edits to a codebase without writing any code themselves.
-          Designers can build directly on the website itself, and Developers can
-          focus on building more than User Interfaces.
-        </p>
-      </div>
-      <div className="w-full h-px"></div>
-      <div className="w-full max-w-lg flex flex-col gap-3">
-        <p className="m-0 p-0 text-left text-2xl">Quickstart</p>
-        <p className="m-0 p-0 text-left ">1. Download the extension</p>
-        <p className="m-0 p-0 text-left ">
-          2. Start a new project by inputting any url, or using our Demo
-          Project.
-        </p>
-        <p className="m-0 p-0 text-left ">
-          3. Use the Layers Panel and Styles Panel to select layers and change
-          them. Or you add your elements to the page.
-        </p>
-        <p className="m-0 p-0 text-left ">
-          4. Share your project with colleagues using the "Share" button in the
-          upper right corner, or review your edits in the Onlook Dashboard.
-        </p>
-      </div>
-    </main>
-  )
+  redirect('/quickstart')
 }
diff --git a/docs/src/app/quickstart/page.tsx b/docs/src/app/quickstart/page.tsx
@@ -1,3 +1,9 @@
 export default function DocumentationPage() {
-  return <div className="w-1/5 h-full">Hello</div>
+  return (
+    <div className="h-full w-full border-0">
+      <div className="flex justify-start pl-[10px] font-semibold h-full items-start border w-1/5">
+        <p className="w-full h-[40px] flex items-center">Quick Start</p>
+      </div>
+    </div>
+  )
 }
diff --git a/docs/src/components/header.tsx b/docs/src/components/header.tsx
@@ -4,32 +4,42 @@ import { Input } from "@/components/ui/input"
 import "@/styles/globals.css"
 import { Search } from "lucide-react"
 import Link from "next/link"
-
 export default function Header() {
-    return <header className="sticky top-0 z-50 flex w-full items-center border-b bg-white px-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
-        <Link className="flex items-center gap-4" href="#">
-            <Logo width={25} height={25} />
-            <span className="text-lg font-semibold">Onlook Docs</span>
+  return (
+    <header className="sticky top-0 z-50 flex w-full items-center border-b bg-white px-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
+      <Link className="flex items-center gap-4" href="#">
+        <Logo width={25} height={25} />
+        <span className="text-lg font-semibold">Onlook</span>
+      </Link>
+      <nav className="h-12 ml-auto flex items-center gap-4">
+        <ModeToggle />
+        <Link
+          className="text-sm font-medium hover:underline underline-offset-4"
+          href="#"
+        >
+          Docs
         </Link>
-        <nav className="h-12 ml-auto flex items-center gap-4">
-            <ModeToggle />
-            <Link className="text-sm font-medium hover:underline underline-offset-4" href="#">
-                Docs
-            </Link>
-            <Link className="text-sm font-medium hover:underline underline-offset-4" href="#">
-                Blog
-            </Link>
-            <Link className="text-sm font-medium hover:underline underline-offset-4" href="#">
-                Community
-            </Link>
-            <div className="relative">
-                <Input
-                    className="h-8 w-48 rounded-md border border-gray-200 bg-gray-100 px-3 text-sm focus:border-gray-300 focus:outline-none dark:border-gray-800 dark:bg-gray-900 dark:text-gray-50"
-                    placeholder="Search docs..."
-                    type="search"
-                />
-                <Search className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 dark:text-gray-500" />
-            </div>
-        </nav>
+        <Link
+          className="text-sm font-medium hover:underline underline-offset-4"
+          href="#"
+        >
+          Blog
+        </Link>
+        <Link
+          className="text-sm font-medium hover:underline underline-offset-4"
+          href="#"
+        >
+          Community
+        </Link>
+        <div className="relative">
+          <Input
+            className="h-8 w-48 rounded-md border border-gray-200 bg-gray-100 px-3 text-sm focus:border-gray-300 focus:outline-none dark:border-gray-800 dark:bg-gray-900 dark:text-gray-50"
+            placeholder="Search docs..."
+            type="search"
+          />
+          <Search className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+        </div>
+      </nav>
     </header>
+  )
 }