From 2b7c30be6273c9c05c3b5db02c6862a69267d8ba Mon Sep 17 00:00:00 2001 From: Kiet <31864905+Kitenite@users.noreply.github.com> Date: Sat, 14 Sep 2024 16:53:43 -0400 Subject: [PATCH] Update docs (#353) * Update docs * Clean up * Fix focus lost prosemirror --- app/src/lib/editor/engine/overlay/index.ts | 2 + app/src/lib/editor/engine/overlay/textEdit.ts | 19 ++++++ .../routes/project/EditPanel/ManualTab.tsx | 4 +- .../project/EditPanel/inputs/TagDetails.tsx | 8 ++- docs/src/app/layout.tsx | 22 ++++--- docs/src/app/page.tsx | 61 +------------------ docs/src/app/quickstart/page.tsx | 8 ++- docs/src/components/header.tsx | 60 ++++++++++-------- 8 files changed, 84 insertions(+), 100 deletions(-) diff --git a/app/src/lib/editor/engine/overlay/index.ts b/app/src/lib/editor/engine/overlay/index.ts index dc77ea39..293346e6 100644 --- 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 index bbe1a06c..33b8815c 100644 --- 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 index 4f258540..7de08670 100644 --- a/app/src/routes/project/EditPanel/ManualTab.tsx +++ b/app/src/routes/project/EditPanel/ManualTab.tsx @@ -66,9 +66,7 @@ const ManualTab = observer(() => {

{groupKey}

- {groupKey === 'Text' && ( - - )} + {groupKey === 'Text' && } {Object.entries(subGroup).map(([subGroupKey, elementStyles]) => (
{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 index d614ad62..d14d67bb 100644 --- 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(false); const [tagInfo, setTagInfo] = useState({ title: '', @@ -57,6 +61,6 @@ const TagDetails = ({ tagName }: { tagName: string }) => { ); -}; +}); export default TagDetails; diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx index bf6b3e86..81c84bd8 100644 --- 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 ( - +
{children} -
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx index 3193feb5..e95ea30b 100644 --- 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 ( -
-
- -

- {siteConfig.name} -

-

- {siteConfig.description} -

-
- - Get Started - - -
-
-
-

What is Onlook?

-

- 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. -

-
-
-
-

Quickstart

-

1. Download the extension

-

- 2. Start a new project by inputting any url, or using our Demo - Project. -

-

- 3. Use the Layers Panel and Styles Panel to select layers and change - them. Or you add your elements to the page. -

-

- 4. Share your project with colleagues using the "Share" button in the - upper right corner, or review your edits in the Onlook Dashboard. -

-
-
- ) + redirect('/quickstart') } diff --git a/docs/src/app/quickstart/page.tsx b/docs/src/app/quickstart/page.tsx index 5680fe94..0714833e 100644 --- a/docs/src/app/quickstart/page.tsx +++ b/docs/src/app/quickstart/page.tsx @@ -1,3 +1,9 @@ export default function DocumentationPage() { - return
Hello
+ return ( +
+
+

Quick Start

+
+
+ ) } diff --git a/docs/src/components/header.tsx b/docs/src/components/header.tsx index 5d4ee315..9df148db 100644 --- 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
- - - Onlook Docs + return ( +
+ + + Onlook + +
+ ) }