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 (
+
+ )
}
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 (
+
+ )
}