Merge branch 'main' into releases/0.0.24

onlook-dev · Sep 14, 2024 · c44ac49 · c44ac49
2 parents 82a1294 + 2b7c30b
commit c44ac49
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>
+ )
 }