From 63414b72218e72df4e8231c0a21e724d03a40797 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Mon, 20 Nov 2023 18:10:47 +0100
Subject: [PATCH 01/30] Add monaco editor and show it on click.

---
 app/PreviewShape/PreviewShape.tsx | 183 ++++++++++++++++++++++--------
 package-lock.json                 |  36 ++++++
 package.json                      |   1 +
 3 files changed, 175 insertions(+), 45 deletions(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index a8626607..e2de5367 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -1,16 +1,20 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import { Editor as MonacoEditor, OnChange } from '@monaco-editor/react'
 import {
-	TLBaseShape,
 	BaseBoxShapeUtil,
-	useIsEditing,
+	DefaultSpinner,
+	Editor,
 	HTMLContainer,
-	toDomPrecision,
 	Icon,
-	useToasts,
-	DefaultSpinner,
-	stopEventPropagation,
+	TLBaseShape,
 	Vec2d,
+	stopEventPropagation,
+	toDomPrecision,
+	useIsDarkMode,
+	useIsEditing,
+	useToasts,
 } from '@tldraw/tldraw'
+import { useCallback, useState } from 'react'
 
 export type PreviewShape = TLBaseShape<
 	'preview',
@@ -22,6 +26,74 @@ export type PreviewShape = TLBaseShape<
 	}
 >
 
+export function ShowResult({
+	boxShadow,
+	editor,
+	html,
+	isEditing,
+	isShowingEditor,
+	shape,
+}: {
+	boxShadow: string
+	editor: Editor
+	html: string
+	isEditing: boolean
+	isShowingEditor: boolean
+	shape: PreviewShape
+}) {
+	const dark = useIsDarkMode()
+
+	const handleOnChange: OnChange = useCallback(
+		(value, _event) => {
+			editor.updateShape({
+				id: shape.id,
+				type: shape.type,
+				props: {
+					html: value,
+				},
+			})
+		},
+		[editor, shape.id, shape.type]
+	)
+
+	return (
+		<>
+			{isShowingEditor && (
+				<div style={{ width: '2000px', height: '100%' }}>
+					<MonacoEditor
+						defaultLanguage="html"
+						defaultValue={html}
+						onChange={handleOnChange}
+						theme={dark ? 'vs-dark' : 'vs-light'}
+						options={{
+							minimap: {
+								enabled: false,
+							},
+							lineNumbers: 'off',
+							wordWrap: 'wordWrapColumn',
+							wordWrapColumn: 80,
+							fontSize: 13,
+						}}
+					/>
+				</div>
+			)}
+			<iframe
+				srcDoc={html}
+				width={toDomPrecision(shape.props.w)}
+				height={toDomPrecision(shape.props.h)}
+				draggable={false}
+				style={{
+					pointerEvents: isEditing ? 'auto' : 'none',
+					boxShadow,
+					border: '1px solid var(--color-panel-contrast)',
+					borderRadius: 'var(--radius-2)',
+				}}
+			/>
+			)
+		</>
+	)
+}
+
 export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 	static override type = 'preview' as const
 
@@ -42,6 +114,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 
 	override component(shape: PreviewShape) {
 		const isEditing = useIsEditing(shape.id)
+		const [isShowingEditor, setIsShowingEditor] = useState(false)
 		const toast = useToasts()
 
 		const pageRotation = this.editor.getShapePageTransform(shape)!.rotation()
@@ -59,17 +132,13 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 		return (
 			<HTMLContainer className="tl-embed-container" id={shape.id}>
 				{htmlToUse ? (
-					<iframe
-						srcDoc={htmlToUse}
-						width={toDomPrecision(shape.props.w)}
-						height={toDomPrecision(shape.props.h)}
-						draggable={false}
-						style={{
-							pointerEvents: isEditing ? 'auto' : 'none',
-							boxShadow,
-							border: '1px solid var(--color-panel-contrast)',
-							borderRadius: 'var(--radius-2)',
-						}}
+					<ShowResult
+						boxShadow={boxShadow}
+						editor={this.editor}
+						html={htmlToUse}
+						isEditing={isEditing}
+						isShowingEditor={isShowingEditor}
+						shape={shape}
 					/>
 				) : (
 					<div
@@ -89,34 +158,58 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 					</div>
 				)}
 				{htmlToUse && (
-					<button
-						style={{
-							all: 'unset',
-							position: 'absolute',
-							top: 0,
-							right: -40,
-							height: 40,
-							width: 40,
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'center',
-							cursor: 'pointer',
-							pointerEvents: 'all',
-						}}
-						onClick={() => {
-							if (navigator && navigator.clipboard) {
-								navigator.clipboard.writeText(shape.props.html)
-								toast.addToast({
-									icon: 'code',
-									title: 'Copied to clipboard',
-								})
-							}
-						}}
-						onPointerDown={stopEventPropagation}
-						title="Copy code to clipboard"
-					>
-						<Icon icon="code" />
-					</button>
+					<>
+						<button
+							style={{
+								all: 'unset',
+								position: 'absolute',
+								top: 0,
+								right: -40,
+								height: 40,
+								width: 40,
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+								cursor: 'pointer',
+								pointerEvents: 'all',
+							}}
+							onClick={() => {
+								if (navigator && navigator.clipboard) {
+									navigator.clipboard.writeText(shape.props.html)
+									toast.addToast({
+										icon: 'code',
+										title: 'Copied to clipboard',
+									})
+								}
+							}}
+							onPointerDown={stopEventPropagation}
+							title="Copy code to clipboard"
+						>
+							<Icon icon="code" />
+						</button>
+						<button
+							style={{
+								all: 'unset',
+								position: 'absolute',
+								top: 30,
+								right: -40,
+								height: 40,
+								width: 40,
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+								cursor: 'pointer',
+								pointerEvents: 'all',
+							}}
+							onClick={() => {
+								setIsShowingEditor(!isShowingEditor)
+							}}
+							onPointerDown={stopEventPropagation}
+							title="Show code"
+						>
+							<Icon icon="follow" />
+						</button>
+					</>
 				)}
 				{htmlToUse && (
 					<div
diff --git a/package-lock.json b/package-lock.json
index c8181e32..5efca767 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "draw-a-ui",
 			"version": "0.1.0",
 			"dependencies": {
+				"@monaco-editor/react": "^4.6.0",
 				"@tldraw/tldraw": "^2.0.0-canary.ba4091c59418",
 				"@vercel/analytics": "^1.1.1",
 				"canvas-size": "^1.2.6",
@@ -249,6 +250,30 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@monaco-editor/loader": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+			"integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+			"dependencies": {
+				"state-local": "^1.0.6"
+			},
+			"peerDependencies": {
+				"monaco-editor": ">= 0.21.0 < 1"
+			}
+		},
+		"node_modules/@monaco-editor/react": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+			"integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+			"dependencies": {
+				"@monaco-editor/loader": "^1.4.0"
+			},
+			"peerDependencies": {
+				"monaco-editor": ">= 0.25.0 < 1",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
 		"node_modules/@next/env": {
 			"version": "14.0.1",
 			"resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.1.tgz",
@@ -4313,6 +4338,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/monaco-editor": {
+			"version": "0.44.0",
+			"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.44.0.tgz",
+			"integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==",
+			"peer": true
+		},
 		"node_modules/ms": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -5360,6 +5391,11 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/state-local": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+			"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+		},
 		"node_modules/streamsearch": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
diff --git a/package.json b/package.json
index d5113c7b..56032d0a 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
+		"@monaco-editor/react": "^4.6.0",
 		"@tldraw/tldraw": "^2.0.0-canary.ba4091c59418",
 		"@vercel/analytics": "^1.1.1",
 		"canvas-size": "^1.2.6",

From 88e81e8954476fa804a7b47f77e43d01382d9073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Tue, 21 Nov 2023 09:53:11 +0100
Subject: [PATCH 02/30] Refactor.

---
 app/PreviewShape/PreviewShape.tsx        | 83 +++++-------------------
 app/components/CopyToClipboardButton.tsx | 33 ++++++++++
 app/components/Hint.tsx                  | 31 +++++++++
 app/components/ShowEditorButton.tsx      |  3 -
 app/components/UrlLinkButton.tsx         |  4 --
 5 files changed, 82 insertions(+), 72 deletions(-)
 create mode 100644 app/components/CopyToClipboardButton.tsx
 create mode 100644 app/components/Hint.tsx

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 95ae808c..ce2d6240 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -3,15 +3,14 @@ import {
 	BaseBoxShapeUtil,
 	DefaultSpinner,
 	HTMLContainer,
-	Icon,
 	TLBaseShape,
 	Vec2d,
-	stopEventPropagation,
 	useIsEditing,
-	useToasts,
 	useValue,
 } from '@tldraw/tldraw'
 import { useState } from 'react'
+import { CopyToClipboardButton } from '../components/CopyToClipboardButton'
+import { Hint } from '../components/Hint'
 import { ShowEditorButton } from '../components/ShowEditorButton'
 import { ShowResult } from '../components/ShowResult'
 import { UrlLinkButton } from '../components/UrlLinkButton'
@@ -47,7 +46,6 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 	override component(shape: PreviewShape) {
 		const isEditing = useIsEditing(shape.id)
 		const [isShowingEditor, setIsShowingEditor] = useState(false)
-		const toast = useToasts()
 
 		const boxShadow = useValue(
 			'box shadow',
@@ -98,70 +96,25 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 					</div>
 				)}
 				{htmlToUse && (
-					<button
-						style={{
-							all: 'unset',
-							position: 'absolute',
-							top: 0,
-							right: -40,
-							height: 40,
-							width: 40,
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'center',
-							cursor: 'pointer',
-							pointerEvents: 'all',
-						}}
-						onClick={() => {
-							if (navigator && navigator.clipboard) {
-								navigator.clipboard.writeText(shape.props.html)
-								toast.addToast({
-									icon: 'code',
-									title: 'Copied html to clipboard',
-								})
-							}
-						}}
-						onPointerDown={stopEventPropagation}
-						title="Copy code to clipboard"
-					>
-						<Icon icon="code" />
-					</button>
-				)}
-				{htmlToUse && <UrlLinkButton shape={shape} />}
-				{htmlToUse && (
-					<ShowEditorButton
-						isShowingEditor={isShowingEditor}
-						setIsShowingEditor={setIsShowingEditor}
-					/>
-				)}
-				{htmlToUse && (
-					<div
-						style={{
-							textAlign: 'center',
-							position: 'absolute',
-							bottom: isEditing ? -40 : 0,
-							padding: 4,
-							fontFamily: 'inherit',
-							fontSize: 12,
-							left: 0,
-							width: '100%',
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'center',
-							pointerEvents: 'none',
-						}}
-					>
-						<span
+					<>
+						<div
 							style={{
-								background: 'var(--color-panel)',
-								padding: '4px 12px',
-								borderRadius: 99,
-								border: '1px solid var(--color-muted-1)',
+								position: 'absolute',
+								top: 0,
+								right: -40,
+								display: 'flex',
+								flexDirection: 'column',
 							}}
 						>
-							{isEditing ? 'Click the canvas to exit' : 'Double click to interact'}
-						</span>
-					</div>
+							<CopyToClipboardButton shape={shape} />
+							<UrlLinkButton shape={shape} />
+							<ShowEditorButton
+								isShowingEditor={isShowingEditor}
+								setIsShowingEditor={setIsShowingEditor}
+							/>
+						</div>
+						<Hint isEditing={isEditing} />
+					</>
 				)}
 			</HTMLContainer>
 		)
diff --git a/app/components/CopyToClipboardButton.tsx b/app/components/CopyToClipboardButton.tsx
new file mode 100644
index 00000000..34bb8ea3
--- /dev/null
+++ b/app/components/CopyToClipboardButton.tsx
@@ -0,0 +1,33 @@
+import { Icon, stopEventPropagation, useToasts } from '@tldraw/tldraw'
+import { PreviewShape } from '../PreviewShape/PreviewShape'
+
+export function CopyToClipboardButton({ shape }: { shape: PreviewShape }) {
+	const toast = useToasts()
+	return (
+		<button
+			style={{
+				all: 'unset',
+				height: 40,
+				width: 40,
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				cursor: 'pointer',
+				pointerEvents: 'all',
+			}}
+			onClick={() => {
+				if (navigator && navigator.clipboard) {
+					navigator.clipboard.writeText(shape.props.html)
+					toast.addToast({
+						icon: 'code',
+						title: 'Copied html to clipboard',
+					})
+				}
+			}}
+			onPointerDown={stopEventPropagation}
+			title="Copy code to clipboard"
+		>
+			<Icon icon="code" />
+		</button>
+	)
+}
diff --git a/app/components/Hint.tsx b/app/components/Hint.tsx
new file mode 100644
index 00000000..13295099
--- /dev/null
+++ b/app/components/Hint.tsx
@@ -0,0 +1,31 @@
+export function Hint({ isEditing }: { isEditing: boolean }) {
+	return (
+		<div
+			style={{
+				textAlign: 'center',
+				position: 'absolute',
+				bottom: isEditing ? -40 : 0,
+				padding: 4,
+				fontFamily: 'inherit',
+				fontSize: 12,
+				left: 0,
+				width: '100%',
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				pointerEvents: 'none',
+			}}
+		>
+			<span
+				style={{
+					background: 'var(--color-panel)',
+					padding: '4px 12px',
+					borderRadius: 99,
+					border: '1px solid var(--color-muted-1)',
+				}}
+			>
+				{isEditing ? 'Click the canvas to exit' : 'Double click to interact'}
+			</span>
+		</div>
+	)
+}
diff --git a/app/components/ShowEditorButton.tsx b/app/components/ShowEditorButton.tsx
index 7888ddd3..05438f97 100644
--- a/app/components/ShowEditorButton.tsx
+++ b/app/components/ShowEditorButton.tsx
@@ -11,9 +11,6 @@ export function ShowEditorButton({
 		<button
 			style={{
 				all: 'unset',
-				position: 'absolute',
-				top: 30,
-				right: -40,
 				height: 40,
 				width: 40,
 				display: 'flex',
diff --git a/app/components/UrlLinkButton.tsx b/app/components/UrlLinkButton.tsx
index dd94e03f..b5138f22 100644
--- a/app/components/UrlLinkButton.tsx
+++ b/app/components/UrlLinkButton.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { Icon, stopEventPropagation, useToasts } from '@tldraw/tldraw'
-import { usePathname } from 'next/navigation'
 import { PreviewShape } from '../PreviewShape/PreviewShape'
 
 export function UrlLinkButton({ shape }: { shape: PreviewShape }) {
@@ -11,9 +10,6 @@ export function UrlLinkButton({ shape }: { shape: PreviewShape }) {
 		<button
 			style={{
 				all: 'unset',
-				position: 'absolute',
-				top: 40,
-				right: -40,
 				height: 40,
 				width: 40,
 				display: 'flex',

From 3856c72d6ce17def6adb521695c0b54d74cc829b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Tue, 21 Nov 2023 10:01:52 +0100
Subject: [PATCH 03/30] Fix merge conflict.

---
 package-lock.json | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d30a3741..62c0d72a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -479,7 +479,6 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
-<<<<<<< HEAD
 		"node_modules/@monaco-editor/loader": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
@@ -502,14 +501,14 @@
 				"monaco-editor": ">= 0.25.0 < 1",
 				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
 				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-=======
+			}
+		},
 		"node_modules/@neondatabase/serverless": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@neondatabase/serverless/-/serverless-0.6.0.tgz",
 			"integrity": "sha512-qXxBRYN0m2v8kVQBfMxbzNGn2xFAhTXFibzQlE++NfJ56Shz3m7+MyBBtXDlEH+3Wfa6lToDXf1MElocY4sJ3w==",
 			"dependencies": {
 				"@types/pg": "8.6.6"
->>>>>>> main
 			}
 		},
 		"node_modules/@next/env": {
@@ -1934,9 +1933,9 @@
 			"integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA=="
 		},
 		"node_modules/@types/yargs": {
-			"version": "17.0.31",
-			"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.31.tgz",
-			"integrity": "sha512-bocYSx4DI8TmdlvxqGpVNXOgCNR1Jj0gNPhhAY+iz1rgKDAaYrAYdFYnhDV1IFuiuVc9HkOwyDcFxaTElF3/wg==",
+			"version": "17.0.32",
+			"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
+			"integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
 			"dependencies": {
 				"@types/yargs-parser": "*"
 			}
@@ -6290,12 +6289,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-<<<<<<< HEAD
-		"node_modules/state-local": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
-			"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
-=======
 		"node_modules/stack-utils": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
@@ -6314,7 +6307,11 @@
 			"engines": {
 				"node": ">=8"
 			}
->>>>>>> main
+		},
+		"node_modules/state-local": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+			"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
 		},
 		"node_modules/streamsearch": {
 			"version": "1.1.0",

From ff3c6e0a61d4e766c15bd0bdefb65e8149d6a420 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Tue, 21 Nov 2023 10:11:10 +0100
Subject: [PATCH 04/30] Remove stray paren.

---
 app/components/ShowResult.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/ShowResult.tsx b/app/components/ShowResult.tsx
index 8b8473ac..68bf07cb 100644
--- a/app/components/ShowResult.tsx
+++ b/app/components/ShowResult.tsx
@@ -66,7 +66,6 @@ export function ShowResult({
 					borderRadius: 'var(--radius-2)',
 				}}
 			/>
-			)
 		</>
 	)
 }

From 2cab2baf9ebda67297212b3866ea4f6872fa8d2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Tue, 21 Nov 2023 13:43:19 +0100
Subject: [PATCH 05/30] Only add the hack once.

---
 app/PreviewShape/PreviewShape.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index ce2d6240..626427f0 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -25,6 +25,24 @@ export type PreviewShape = TLBaseShape<
 	}
 >
 
+function getHtmlToUse(html: string) {
+	if (!html) return null
+
+	if (
+		html.includes(
+			"<script>document.body.addEventListener('wheel', e => { if (!e.ctrlKey) return; e.preventDefault(); return }, { passive: false })</script>"
+		)
+	) {
+		return html
+	}
+
+	return html.replace(
+		`</body>`,
+		`<script>document.body.addEventListener('wheel', e => { if (!e.ctrlKey) return; e.preventDefault(); return }, { passive: false })</script>
+</body>`
+	)
+}
+
 export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 	static override type = 'preview' as const
 
@@ -59,13 +77,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 		const { html } = shape.props
 
 		// Kind of a hack—we're preventing user's from pinching-zooming into the iframe
-		const htmlToUse = html
-			? html.replace(
-					`</body>`,
-					`<script>document.body.addEventListener('wheel', e => { if (!e.ctrlKey) return; e.preventDefault(); return }, { passive: false })</script>
-</body>`
-			  )
-			: null
+		const htmlToUse = getHtmlToUse(html)
 
 		return (
 			<HTMLContainer className="tl-embed-container" id={shape.id}>

From bd990245f9d3d86687eb42e90e5edd0b2de59589 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Tue, 21 Nov 2023 13:43:41 +0100
Subject: [PATCH 06/30] Add the editor below.

---
 app/components/ShowResult.tsx | 36 ++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/components/ShowResult.tsx b/app/components/ShowResult.tsx
index 68bf07cb..0267f452 100644
--- a/app/components/ShowResult.tsx
+++ b/app/components/ShowResult.tsx
@@ -34,9 +34,27 @@ export function ShowResult({
 	)
 
 	return (
-		<>
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<iframe
+				srcDoc={html}
+				width={toDomPrecision(shape.props.w)}
+				height={isShowingEditor ? toDomPrecision(shape.props.h / 2) : toDomPrecision(shape.props.h)}
+				draggable={false}
+				style={{
+					flexShrink: 1,
+					pointerEvents: isEditing ? 'auto' : 'none',
+					boxShadow,
+					border: '1px solid var(--color-panel-contrast)',
+					borderRadius: 'var(--radius-2)',
+				}}
+			/>
 			{isShowingEditor && (
-				<div style={{ width: '2000px', height: '100%' }}>
+				<div style={{ width: '100%', height: toDomPrecision(shape.props.h / 2) }}>
 					<MonacoEditor
 						defaultLanguage="html"
 						defaultValue={html}
@@ -54,18 +72,6 @@ export function ShowResult({
 					/>
 				</div>
 			)}
-			<iframe
-				srcDoc={html}
-				width={toDomPrecision(shape.props.w)}
-				height={toDomPrecision(shape.props.h)}
-				draggable={false}
-				style={{
-					pointerEvents: isEditing ? 'auto' : 'none',
-					boxShadow,
-					border: '1px solid var(--color-panel-contrast)',
-					borderRadius: 'var(--radius-2)',
-				}}
-			/>
-		</>
+		</div>
 	)
 }

From 8cee627617d30a56c50496da1f2f5d23465c74b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Tue, 21 Nov 2023 15:21:56 +0100
Subject: [PATCH 07/30] Show the editor to the right.

---
 app/PreviewShape/PreviewShape.tsx   |  8 +++-----
 app/components/ShowEditorButton.tsx | 32 +++++++++++++++++++++--------
 app/components/ShowResult.tsx       | 19 +++++++----------
 3 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 626427f0..7d26d03d 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -22,6 +22,7 @@ export type PreviewShape = TLBaseShape<
 		source: string
 		w: number
 		h: number
+		isShowingEditor: boolean
 	}
 >
 
@@ -52,6 +53,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 			source: '',
 			w: (960 * 2) / 3,
 			h: (540 * 2) / 3,
+			isShowingEditor: false,
 		}
 	}
 
@@ -87,7 +89,6 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 						editor={this.editor}
 						html={htmlToUse}
 						isEditing={isEditing}
-						isShowingEditor={isShowingEditor}
 						shape={shape}
 					/>
 				) : (
@@ -120,10 +121,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 						>
 							<CopyToClipboardButton shape={shape} />
 							<UrlLinkButton shape={shape} />
-							<ShowEditorButton
-								isShowingEditor={isShowingEditor}
-								setIsShowingEditor={setIsShowingEditor}
-							/>
+							<ShowEditorButton shape={shape} editor={this.editor} />
 						</div>
 						<Hint isEditing={isEditing} />
 					</>
diff --git a/app/components/ShowEditorButton.tsx b/app/components/ShowEditorButton.tsx
index 05438f97..e5a5f8a7 100644
--- a/app/components/ShowEditorButton.tsx
+++ b/app/components/ShowEditorButton.tsx
@@ -1,12 +1,8 @@
-import { Icon, stopEventPropagation } from '@tldraw/tldraw'
+import { Editor, Icon, stopEventPropagation } from '@tldraw/tldraw'
 
-export function ShowEditorButton({
-	isShowingEditor,
-	setIsShowingEditor,
-}: {
-	isShowingEditor: boolean
-	setIsShowingEditor: (isShowingEditor: boolean) => void
-}) {
+export const EDITOR_WIDTH = 1000
+
+export function ShowEditorButton({ shape, editor }: { shape: PreviewShape; editor: Editor }) {
 	return (
 		<button
 			style={{
@@ -20,7 +16,25 @@ export function ShowEditorButton({
 				pointerEvents: 'all',
 			}}
 			onClick={() => {
-				setIsShowingEditor(!isShowingEditor)
+				if (shape.props.isShowingEditor) {
+					editor.updateShape({
+						id: shape.id,
+						type: shape.type,
+						props: {
+							isShowingEditor: false,
+							w: shape.props.w - EDITOR_WIDTH,
+						},
+					})
+				} else {
+					editor.updateShape({
+						id: shape.id,
+						type: shape.type,
+						props: {
+							isShowingEditor: true,
+							w: shape.props.w + EDITOR_WIDTH,
+						},
+					})
+				}
 			}}
 			onPointerDown={stopEventPropagation}
 			title="Show code"
diff --git a/app/components/ShowResult.tsx b/app/components/ShowResult.tsx
index 0267f452..a4704c4a 100644
--- a/app/components/ShowResult.tsx
+++ b/app/components/ShowResult.tsx
@@ -2,23 +2,23 @@ import { Editor as MonacoEditor, OnChange } from '@monaco-editor/react'
 import { Editor, toDomPrecision, useIsDarkMode } from '@tldraw/tldraw'
 import { useCallback } from 'react'
 import { PreviewShape } from '../PreviewShape/PreviewShape'
+import { EDITOR_WIDTH } from './ShowEditorButton'
 
 export function ShowResult({
 	boxShadow,
 	editor,
 	html,
 	isEditing,
-	isShowingEditor,
 	shape,
 }: {
 	boxShadow: string
 	editor: Editor
 	html: string
 	isEditing: boolean
-	isShowingEditor: boolean
 	shape: PreviewShape
 }) {
 	const dark = useIsDarkMode()
+	const { isShowingEditor } = shape.props
 
 	const handleOnChange: OnChange = useCallback(
 		(value, _event) => {
@@ -34,16 +34,11 @@ export function ShowResult({
 	)
 
 	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
+		<>
 			<iframe
 				srcDoc={html}
-				width={toDomPrecision(shape.props.w)}
-				height={isShowingEditor ? toDomPrecision(shape.props.h / 2) : toDomPrecision(shape.props.h)}
+				width={toDomPrecision(shape.props.w - (shape.props.isShowingEditor ? EDITOR_WIDTH : 0))}
+				height={toDomPrecision(shape.props.h)}
 				draggable={false}
 				style={{
 					flexShrink: 1,
@@ -54,7 +49,7 @@ export function ShowResult({
 				}}
 			/>
 			{isShowingEditor && (
-				<div style={{ width: '100%', height: toDomPrecision(shape.props.h / 2) }}>
+				<div style={{ width: EDITOR_WIDTH, height: '100%' }}>
 					<MonacoEditor
 						defaultLanguage="html"
 						defaultValue={html}
@@ -72,6 +67,6 @@ export function ShowResult({
 					/>
 				</div>
 			)}
-		</div>
+		</>
 	)
 }

From ce253f6fcfb6c76c5c84deda0fd06a390548238e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 12:59:53 +0100
Subject: [PATCH 08/30] Add editor infront of canvas.

---
 app/CodeEditor/CodeEditor.tsx       | 60 +++++++++++++++++++++++
 app/PreviewShape/PreviewShape.tsx   | 10 +---
 app/components/ShowEditorButton.tsx | 45 ------------------
 app/components/ShowResult.tsx       | 74 +++++++----------------------
 app/page.tsx                        | 15 ++++--
 5 files changed, 89 insertions(+), 115 deletions(-)
 create mode 100644 app/CodeEditor/CodeEditor.tsx
 delete mode 100644 app/components/ShowEditorButton.tsx

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
new file mode 100644
index 00000000..16f34bd9
--- /dev/null
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -0,0 +1,60 @@
+import { OnChange } from '@monaco-editor/react'
+import { track, useEditor, useIsDarkMode, stopEventPropagation } from '@tldraw/tldraw'
+import { useCallback } from 'react'
+import { Editor as MonacoEditor } from '@monaco-editor/react'
+
+export const CodeEditor = track(() => {
+	const editor = useEditor()
+	const dark = useIsDarkMode()
+	const bounds = editor.getViewportPageBounds()
+	const shape = editor.getOnlySelectedShape()
+	const previewShape = shape?.type === 'preview' ? shape : undefined
+
+	const handleOnChange: OnChange = useCallback(
+		(value, _event) => {
+			editor.updateShape({
+				id: previewShape.id,
+				type: previewShape.type,
+				props: {
+					html: value,
+				},
+			})
+		},
+		[editor, previewShape?.id, previewShape?.type]
+	)
+	if (!bounds || !previewShape || previewShape.type !== 'preview') return null
+
+	const pageCoordinates = editor.pageToScreen(bounds.point)
+
+	return (
+		<div
+			style={{
+				position: 'absolute',
+				top: Math.max(64, pageCoordinates.y - 64),
+				left: 20,
+				border: '1px solid #eee',
+				pointerEvents: 'all',
+			}}
+			onClick={() => console.log('click')}
+			onPointerDown={(e) => stopEventPropagation(e)}
+		>
+			<div style={{ width: 700, height: 700 }}>
+				<MonacoEditor
+					defaultLanguage="html"
+					value={previewShape.props.html}
+					onChange={handleOnChange}
+					theme={dark ? 'vs-dark' : 'vs-light'}
+					options={{
+						minimap: {
+							enabled: false,
+						},
+						lineNumbers: 'on',
+						wordWrap: 'wordWrapColumn',
+						wordWrapColumn: 80,
+						fontSize: 13,
+					}}
+				/>
+			</div>
+		</div>
+	)
+})
diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 7d26d03d..1b8f8c95 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -11,7 +11,6 @@ import {
 import { useState } from 'react'
 import { CopyToClipboardButton } from '../components/CopyToClipboardButton'
 import { Hint } from '../components/Hint'
-import { ShowEditorButton } from '../components/ShowEditorButton'
 import { ShowResult } from '../components/ShowResult'
 import { UrlLinkButton } from '../components/UrlLinkButton'
 
@@ -84,13 +83,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 		return (
 			<HTMLContainer className="tl-embed-container" id={shape.id}>
 				{htmlToUse ? (
-					<ShowResult
-						boxShadow={boxShadow}
-						editor={this.editor}
-						html={htmlToUse}
-						isEditing={isEditing}
-						shape={shape}
-					/>
+					<ShowResult boxShadow={boxShadow} html={htmlToUse} isEditing={isEditing} shape={shape} />
 				) : (
 					<div
 						style={{
@@ -121,7 +114,6 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 						>
 							<CopyToClipboardButton shape={shape} />
 							<UrlLinkButton shape={shape} />
-							<ShowEditorButton shape={shape} editor={this.editor} />
 						</div>
 						<Hint isEditing={isEditing} />
 					</>
diff --git a/app/components/ShowEditorButton.tsx b/app/components/ShowEditorButton.tsx
deleted file mode 100644
index e5a5f8a7..00000000
--- a/app/components/ShowEditorButton.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Editor, Icon, stopEventPropagation } from '@tldraw/tldraw'
-
-export const EDITOR_WIDTH = 1000
-
-export function ShowEditorButton({ shape, editor }: { shape: PreviewShape; editor: Editor }) {
-	return (
-		<button
-			style={{
-				all: 'unset',
-				height: 40,
-				width: 40,
-				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'center',
-				cursor: 'pointer',
-				pointerEvents: 'all',
-			}}
-			onClick={() => {
-				if (shape.props.isShowingEditor) {
-					editor.updateShape({
-						id: shape.id,
-						type: shape.type,
-						props: {
-							isShowingEditor: false,
-							w: shape.props.w - EDITOR_WIDTH,
-						},
-					})
-				} else {
-					editor.updateShape({
-						id: shape.id,
-						type: shape.type,
-						props: {
-							isShowingEditor: true,
-							w: shape.props.w + EDITOR_WIDTH,
-						},
-					})
-				}
-			}}
-			onPointerDown={stopEventPropagation}
-			title="Show code"
-		>
-			<Icon icon="follow" />
-		</button>
-	)
-}
diff --git a/app/components/ShowResult.tsx b/app/components/ShowResult.tsx
index a4704c4a..fb2a44f7 100644
--- a/app/components/ShowResult.tsx
+++ b/app/components/ShowResult.tsx
@@ -1,72 +1,30 @@
-import { Editor as MonacoEditor, OnChange } from '@monaco-editor/react'
-import { Editor, toDomPrecision, useIsDarkMode } from '@tldraw/tldraw'
-import { useCallback } from 'react'
+import { toDomPrecision } from '@tldraw/tldraw'
 import { PreviewShape } from '../PreviewShape/PreviewShape'
-import { EDITOR_WIDTH } from './ShowEditorButton'
 
 export function ShowResult({
 	boxShadow,
-	editor,
-	html,
 	isEditing,
+	html,
 	shape,
 }: {
 	boxShadow: string
-	editor: Editor
-	html: string
 	isEditing: boolean
+	html: string
 	shape: PreviewShape
 }) {
-	const dark = useIsDarkMode()
-	const { isShowingEditor } = shape.props
-
-	const handleOnChange: OnChange = useCallback(
-		(value, _event) => {
-			editor.updateShape({
-				id: shape.id,
-				type: shape.type,
-				props: {
-					html: value,
-				},
-			})
-		},
-		[editor, shape.id, shape.type]
-	)
-
 	return (
-		<>
-			<iframe
-				srcDoc={html}
-				width={toDomPrecision(shape.props.w - (shape.props.isShowingEditor ? EDITOR_WIDTH : 0))}
-				height={toDomPrecision(shape.props.h)}
-				draggable={false}
-				style={{
-					flexShrink: 1,
-					pointerEvents: isEditing ? 'auto' : 'none',
-					boxShadow,
-					border: '1px solid var(--color-panel-contrast)',
-					borderRadius: 'var(--radius-2)',
-				}}
-			/>
-			{isShowingEditor && (
-				<div style={{ width: EDITOR_WIDTH, height: '100%' }}>
-					<MonacoEditor
-						defaultLanguage="html"
-						defaultValue={html}
-						onChange={handleOnChange}
-						theme={dark ? 'vs-dark' : 'vs-light'}
-						options={{
-							minimap: {
-								enabled: false,
-							},
-							lineNumbers: 'off',
-							wordWrap: 'wordWrapColumn',
-							wordWrapColumn: 80,
-							fontSize: 13,
-						}}
-					/>
-				</div>
-			)}
-		</>
+		<iframe
+			srcDoc={html}
+			width={toDomPrecision(shape.props.w)}
+			height={toDomPrecision(shape.props.h)}
+			draggable={false}
+			style={{
+				flexShrink: 1,
+				pointerEvents: isEditing ? 'auto' : 'none',
+				boxShadow,
+				border: '1px solid var(--color-panel-contrast)',
+				borderRadius: 'var(--radius-2)',
+			}}
+		/>
 	)
 }
diff --git a/app/page.tsx b/app/page.tsx
index 6b689de8..9514fc81 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,10 +6,10 @@ import dynamic from 'next/dynamic'
 import '@tldraw/tldraw/tldraw.css'
 import { PreviewShapeUtil } from './PreviewShape/PreviewShape'
 import { ExportButton } from './components/ExportButton'
-import { useBreakpoint } from '@tldraw/tldraw'
 import { APIKeyInput } from './components/APIKeyInput'
-import { track } from '@vercel/analytics/react'
 import { LockupLink } from './components/LockupLink'
+import { TLEditorComponents } from '@tldraw/tldraw'
+import { CodeEditor } from './CodeEditor/CodeEditor'
 
 const Tldraw = dynamic(async () => (await import('@tldraw/tldraw')).Tldraw, {
 	ssr: false,
@@ -17,10 +17,19 @@ const Tldraw = dynamic(async () => (await import('@tldraw/tldraw')).Tldraw, {
 
 const shapeUtils = [PreviewShapeUtil]
 
+const components: TLEditorComponents = {
+	InFrontOfTheCanvas: CodeEditor,
+}
+
 export default function Home() {
 	return (
 		<div className="tldraw__editor">
-			<Tldraw persistenceKey="tldraw" shapeUtils={shapeUtils} shareZone={<ExportButton />}>
+			<Tldraw
+				persistenceKey="tldraw"
+				components={components}
+				shapeUtils={shapeUtils}
+				shareZone={<ExportButton />}
+			>
 				<APIKeyInput />
 				<LockupLink />
 			</Tldraw>

From f8515f10c3f86f2fa4de521c691912ce84deb0ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 13:15:46 +0100
Subject: [PATCH 09/30] Fix imports.

---
 app/makereal.tldraw.com/page.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/app/makereal.tldraw.com/page.tsx b/app/makereal.tldraw.com/page.tsx
index 236ce09a..22f15633 100644
--- a/app/makereal.tldraw.com/page.tsx
+++ b/app/makereal.tldraw.com/page.tsx
@@ -4,17 +4,11 @@
 
 import dynamic from 'next/dynamic'
 import '@tldraw/tldraw/tldraw.css'
-import { PreviewShapeUtil } from './PreviewShape/PreviewShape'
-import { ExportButton } from './components/ExportButton'
-import { APIKeyInput } from './components/APIKeyInput'
-import { LockupLink } from './components/LockupLink'
 import { TLEditorComponents } from '@tldraw/tldraw'
-import { CodeEditor } from './CodeEditor/CodeEditor'
+import { CodeEditor } from '../CodeEditor/CodeEditor'
 import { PreviewShapeUtil } from '../PreviewShape/PreviewShape'
-import { ExportButton } from '../components/ExportButton'
-import { useBreakpoint } from '@tldraw/tldraw'
 import { APIKeyInput } from '../components/APIKeyInput'
-import { track } from '@vercel/analytics/react'
+import { ExportButton } from '../components/ExportButton'
 import { LockupLink } from '../components/LockupLink'
 
 const Tldraw = dynamic(async () => (await import('@tldraw/tldraw')).Tldraw, {

From d1b0dedd90d910e619bd9d10d0cf474d5b25402c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 14:23:37 +0100
Subject: [PATCH 10/30] Update preview shape.

---
 app/PreviewShape/PreviewShape.tsx | 61 ++++---------------------------
 1 file changed, 8 insertions(+), 53 deletions(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 9516fc17..923dea09 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -3,20 +3,20 @@ import {
 	BaseBoxShapeUtil,
 	DefaultSpinner,
 	HTMLContainer,
+	Icon,
 	TLBaseShape,
 	Vec2d,
+	stopEventPropagation,
+	toDomPrecision,
 	useIsEditing,
+	useToasts,
 	useValue,
 } from '@tldraw/tldraw'
-import { useState } from 'react'
-import { CopyToClipboardButton } from '../components/CopyToClipboardButton'
-import { Hint } from '../components/Hint'
-import { ShowResult } from '../components/ShowResult'
+import { useEffect } from 'react'
 import { UrlLinkButton } from '../components/UrlLinkButton'
 import { LINK_HOST, PROTOCOL } from '../lib/hosts'
-import { useEffect } from 'react'
 import { uploadLink } from '../lib/uploadLink'
-import style from 'styled-jsx/style'
+import { Hint } from '../components/Hint'
 
 export type PreviewShape = TLBaseShape<
 	'preview',
@@ -30,24 +30,6 @@ export type PreviewShape = TLBaseShape<
 	}
 >
 
-function getHtmlToUse(html: string) {
-	if (!html) return null
-
-	if (
-		html.includes(
-			"<script>document.body.addEventListener('wheel', e => { if (!e.ctrlKey) return; e.preventDefault(); return }, { passive: false })</script>"
-		)
-	) {
-		return html
-	}
-
-	return html.replace(
-		`</body>`,
-		`<script>document.body.addEventListener('wheel', e => { if (!e.ctrlKey) return; e.preventDefault(); return }, { passive: false })</script>
-</body>`
-	)
-}
-
 export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 	static override type = 'preview' as const
 
@@ -57,7 +39,6 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 			source: '',
 			w: (960 * 2) / 3,
 			h: (540 * 2) / 3,
-			isShowingEditor: false,
 		}
 	}
 
@@ -69,7 +50,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 
 	override component(shape: PreviewShape) {
 		const isEditing = useIsEditing(shape.id)
-		const [isShowingEditor, setIsShowingEditor] = useState(false)
+		const toast = useToasts()
 
 		const boxShadow = useValue(
 			'box shadow',
@@ -171,33 +152,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 							<Icon icon="code" />
 						</button>
 						<UrlLinkButton uploadUrl={uploadUrl} />
-						<div
-							style={{
-								textAlign: 'center',
-								position: 'absolute',
-								bottom: isEditing ? -40 : 0,
-								padding: 4,
-								fontFamily: 'inherit',
-								fontSize: 12,
-								left: 0,
-								width: '100%',
-								display: 'flex',
-								alignItems: 'center',
-								justifyContent: 'center',
-								pointerEvents: 'none',
-							}}
-						>
-							<span
-								style={{
-									background: 'var(--color-panel)',
-									padding: '4px 12px',
-									borderRadius: 99,
-									border: '1px solid var(--color-muted-1)',
-								}}
-							>
-								{isEditing ? 'Click the canvas to exit' : 'Double click to interact'}
-							</span>
-						</div>
+						<Hint isEditing={isEditing} />
 					</>
 				)}
 			</HTMLContainer>

From c60efa2b5f44c4b5599caf7e552e339074c4abeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 14:27:31 +0100
Subject: [PATCH 11/30] Fix buttons.

---
 app/PreviewShape/PreviewShape.tsx | 51 ++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 923dea09..6b385d12 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -17,6 +17,7 @@ import { UrlLinkButton } from '../components/UrlLinkButton'
 import { LINK_HOST, PROTOCOL } from '../lib/hosts'
 import { uploadLink } from '../lib/uploadLink'
 import { Hint } from '../components/Hint'
+import { CopyToClipboardButton } from '../components/CopyToClipboardButton'
 
 export type PreviewShape = TLBaseShape<
 	'preview',
@@ -123,35 +124,43 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 								borderRadius: 'var(--radius-2)',
 							}}
 						/>
-						<button
+						<div
 							style={{
-								all: 'unset',
 								position: 'absolute',
-								top: 0,
 								right: -40,
-								height: 40,
-								width: 40,
+								top: 0,
+							}}
+						>
+							<CopyToClipboardButton shape={shape} />
+							<UrlLinkButton uploadUrl={uploadUrl} />
+						</div>
+						<div
+							style={{
+								textAlign: 'center',
+								position: 'absolute',
+								bottom: isEditing ? -40 : 0,
+								padding: 4,
+								fontFamily: 'inherit',
+								fontSize: 12,
+								left: 0,
+								width: '100%',
 								display: 'flex',
 								alignItems: 'center',
 								justifyContent: 'center',
-								cursor: 'pointer',
-								pointerEvents: 'all',
-							}}
-							onClick={() => {
-								if (navigator && navigator.clipboard) {
-									navigator.clipboard.writeText(shape.props.html)
-									toast.addToast({
-										icon: 'code',
-										title: 'Copied html to clipboard',
-									})
-								}
+								pointerEvents: 'none',
 							}}
-							onPointerDown={stopEventPropagation}
-							title="Copy code to clipboard"
 						>
-							<Icon icon="code" />
-						</button>
-						<UrlLinkButton uploadUrl={uploadUrl} />
+							<span
+								style={{
+									background: 'var(--color-panel)',
+									padding: '4px 12px',
+									borderRadius: 99,
+									border: '1px solid var(--color-muted-1)',
+								}}
+							>
+								{isEditing ? 'Click the canvas to exit' : 'Double click to interact'}
+							</span>
+						</div>
 						<Hint isEditing={isEditing} />
 					</>
 				)}

From 340dda370eb330d418ed83007fb910fe81f9aae0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 14:35:39 +0100
Subject: [PATCH 12/30] Remove unused variable.

---
 app/PreviewShape/PreviewShape.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 6b385d12..28e1e891 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -51,7 +51,6 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 
 	override component(shape: PreviewShape) {
 		const isEditing = useIsEditing(shape.id)
-		const toast = useToasts()
 
 		const boxShadow = useValue(
 			'box shadow',

From 5bfe4af35ccdf4c4740f10ad4b9c3734fa682a1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 16:03:35 +0100
Subject: [PATCH 13/30] Remove unused imports.

---
 app/lib/makeReal.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/lib/makeReal.ts b/app/lib/makeReal.ts
index a1edda72..2c171dd8 100644
--- a/app/lib/makeReal.ts
+++ b/app/lib/makeReal.ts
@@ -1,10 +1,7 @@
-import { Editor, createShapeId, getSvgAsImage, uniqueId } from '@tldraw/tldraw'
+import { Editor, createShapeId, getSvgAsImage } from '@tldraw/tldraw'
 import { PreviewShape } from '../PreviewShape/PreviewShape'
 import { getHtmlFromOpenAI } from './getHtmlFromOpenAI'
 import { track } from '@vercel/analytics/react'
-import { kv } from '@vercel/kv'
-import { sql } from '@vercel/postgres'
-import { nanoid } from 'nanoid'
 import { uploadLink } from './uploadLink'
 
 export async function makeReal(editor: Editor, apiKey: string) {

From 762cb5be2124e230c39c8ca3156565328eaf0ea9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 16:04:20 +0100
Subject: [PATCH 14/30] Send updates to verce.

---
 app/CodeEditor/CodeEditor.tsx     | 88 ++++++++++++++++++++-----------
 app/PreviewShape/PreviewShape.tsx |  8 +--
 app/lib/uploadLink.tsx            | 15 ++++++
 3 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
index 16f34bd9..002913a9 100644
--- a/app/CodeEditor/CodeEditor.tsx
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -1,27 +1,21 @@
 import { OnChange } from '@monaco-editor/react'
-import { track, useEditor, useIsDarkMode, stopEventPropagation } from '@tldraw/tldraw'
-import { useCallback } from 'react'
+import { track, useEditor, useIsDarkMode, stopEventPropagation, debounce } from '@tldraw/tldraw'
+import { useState } from 'react'
 import { Editor as MonacoEditor } from '@monaco-editor/react'
+import { updateLink } from '../lib/uploadLink'
+import { PreviewShape } from '../PreviewShape/PreviewShape'
 
 export const CodeEditor = track(() => {
 	const editor = useEditor()
 	const dark = useIsDarkMode()
 	const bounds = editor.getViewportPageBounds()
 	const shape = editor.getOnlySelectedShape()
-	const previewShape = shape?.type === 'preview' ? shape : undefined
+	const previewShape = shape?.type === 'preview' ? (shape as PreviewShape) : undefined
+	const [value, setValue] = useState('')
+	const handleOnChange: OnChange = (value) => {
+		setValue(value)
+	}
 
-	const handleOnChange: OnChange = useCallback(
-		(value, _event) => {
-			editor.updateShape({
-				id: previewShape.id,
-				type: previewShape.type,
-				props: {
-					html: value,
-				},
-			})
-		},
-		[editor, previewShape?.id, previewShape?.type]
-	)
 	if (!bounds || !previewShape || previewShape.type !== 'preview') return null
 
 	const pageCoordinates = editor.pageToScreen(bounds.point)
@@ -37,23 +31,57 @@ export const CodeEditor = track(() => {
 			}}
 			onClick={() => console.log('click')}
 			onPointerDown={(e) => stopEventPropagation(e)}
-		>
-			<div style={{ width: 700, height: 700 }}>
-				<MonacoEditor
-					defaultLanguage="html"
-					value={previewShape.props.html}
-					onChange={handleOnChange}
-					theme={dark ? 'vs-dark' : 'vs-light'}
-					options={{
-						minimap: {
-							enabled: false,
+			// on save
+			onKeyUp={async (e) => {
+				if (e.key === 's' && e.ctrlKey) {
+					if (!value && value === '') return
+					await updateLink(shape.id, value)
+					editor.updateShape<PreviewShape>({
+						id: previewShape.id,
+						type: 'preview',
+						props: {
+							html: value,
+							linkUploadVersion: previewShape.props.linkUploadVersion + 1,
 						},
-						lineNumbers: 'on',
-						wordWrap: 'wordWrapColumn',
-						wordWrapColumn: 80,
-						fontSize: 13,
+					})
+				}
+			}}
+		>
+			<div style={{ display: 'flex', flexDirection: 'column' }}>
+				<button
+					onClick={async () => {
+						if (!value && value === '') return
+						await updateLink(shape.id, value)
+						editor.updateShape<PreviewShape>({
+							id: previewShape.id,
+							type: 'preview',
+							props: {
+								html: value,
+								linkUploadVersion: previewShape.props.linkUploadVersion + 1,
+							},
+						})
 					}}
-				/>
+				>
+					Sync changes
+				</button>
+
+				<div style={{ width: 700, height: 700 }}>
+					<MonacoEditor
+						defaultLanguage="html"
+						value={previewShape.props.html}
+						onChange={handleOnChange}
+						theme={dark ? 'vs-dark' : 'vs-light'}
+						options={{
+							minimap: {
+								enabled: false,
+							},
+							lineNumbers: 'on',
+							wordWrap: 'wordWrapColumn',
+							wordWrapColumn: 80,
+							fontSize: 13,
+						}}
+					/>
+				</div>
 			</div>
 		</div>
 	)
diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 28e1e891..83402b18 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -3,21 +3,18 @@ import {
 	BaseBoxShapeUtil,
 	DefaultSpinner,
 	HTMLContainer,
-	Icon,
 	TLBaseShape,
 	Vec2d,
-	stopEventPropagation,
 	toDomPrecision,
 	useIsEditing,
-	useToasts,
 	useValue,
 } from '@tldraw/tldraw'
 import { useEffect } from 'react'
+import { CopyToClipboardButton } from '../components/CopyToClipboardButton'
+import { Hint } from '../components/Hint'
 import { UrlLinkButton } from '../components/UrlLinkButton'
 import { LINK_HOST, PROTOCOL } from '../lib/hosts'
 import { uploadLink } from '../lib/uploadLink'
-import { Hint } from '../components/Hint'
-import { CopyToClipboardButton } from '../components/CopyToClipboardButton'
 
 export type PreviewShape = TLBaseShape<
 	'preview',
@@ -86,7 +83,6 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 			}
 		}, [shape.id, html, linkUploadVersion, uploadedShapeId])
 
-		console.log(shape, uploadedShapeId)
 		const isLoading = linkUploadVersion === undefined || uploadedShapeId !== shape.id
 
 		const uploadUrl = [PROTOCOL, LINK_HOST, '/', shape.id.replace(/^shape:/, '')].join('')
diff --git a/app/lib/uploadLink.tsx b/app/lib/uploadLink.tsx
index f905516d..c48f8fd6 100644
--- a/app/lib/uploadLink.tsx
+++ b/app/lib/uploadLink.tsx
@@ -14,3 +14,18 @@ export async function uploadLink(shapeId: string, html: string) {
 	console.log('Uploading', shapeId)
 	await sql`INSERT INTO links (shape_id, html) VALUES (${shapeId}, ${html})`
 }
+
+export async function updateLink(shapeId: string, html: string) {
+	console.log('updating', shapeId, html)
+	if (typeof shapeId !== 'string' || !shapeId.startsWith('shape:')) {
+		throw new Error('shapeId must be a string starting with shape:')
+	}
+	if (typeof html !== 'string') {
+		throw new Error('html must be a string')
+	}
+
+	shapeId = shapeId.replace(/^shape:/, '')
+	console.log('Updating', shapeId)
+	const result = await sql`UPDATE links SET html = ${html} WHERE shape_id = ${shapeId}`
+	console.log('res', result)
+}

From 3b3776549fb7d8db3f24cc682036f679d9aee9c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 16:09:55 +0100
Subject: [PATCH 15/30] Improve button, remove consoles.

---
 app/CodeEditor/CodeEditor.tsx | 5 ++---
 app/lib/uploadLink.tsx        | 5 +----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
index 002913a9..977ad108 100644
--- a/app/CodeEditor/CodeEditor.tsx
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -29,9 +29,7 @@ export const CodeEditor = track(() => {
 				border: '1px solid #eee',
 				pointerEvents: 'all',
 			}}
-			onClick={() => console.log('click')}
 			onPointerDown={(e) => stopEventPropagation(e)}
-			// on save
 			onKeyUp={async (e) => {
 				if (e.key === 's' && e.ctrlKey) {
 					if (!value && value === '') return
@@ -49,6 +47,7 @@ export const CodeEditor = track(() => {
 		>
 			<div style={{ display: 'flex', flexDirection: 'column' }}>
 				<button
+					className="z-10 absolute right-[10px] top-[10px] bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
 					onClick={async () => {
 						if (!value && value === '') return
 						await updateLink(shape.id, value)
@@ -62,7 +61,7 @@ export const CodeEditor = track(() => {
 						})
 					}}
 				>
-					Sync changes
+					Save
 				</button>
 
 				<div style={{ width: 700, height: 700 }}>
diff --git a/app/lib/uploadLink.tsx b/app/lib/uploadLink.tsx
index c48f8fd6..7d6e0bc5 100644
--- a/app/lib/uploadLink.tsx
+++ b/app/lib/uploadLink.tsx
@@ -16,7 +16,6 @@ export async function uploadLink(shapeId: string, html: string) {
 }
 
 export async function updateLink(shapeId: string, html: string) {
-	console.log('updating', shapeId, html)
 	if (typeof shapeId !== 'string' || !shapeId.startsWith('shape:')) {
 		throw new Error('shapeId must be a string starting with shape:')
 	}
@@ -25,7 +24,5 @@ export async function updateLink(shapeId: string, html: string) {
 	}
 
 	shapeId = shapeId.replace(/^shape:/, '')
-	console.log('Updating', shapeId)
-	const result = await sql`UPDATE links SET html = ${html} WHERE shape_id = ${shapeId}`
-	console.log('res', result)
+	await sql`UPDATE links SET html = ${html} WHERE shape_id = ${shapeId}`
 }

From 6dc4c154acc934fca5d15951f20ed6ce7fe2281b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 16:24:38 +0100
Subject: [PATCH 16/30] Show saving indicator. Remove scrollbar.

---
 app/CodeEditor/CodeEditor.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
index 977ad108..904c7086 100644
--- a/app/CodeEditor/CodeEditor.tsx
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -12,6 +12,7 @@ export const CodeEditor = track(() => {
 	const shape = editor.getOnlySelectedShape()
 	const previewShape = shape?.type === 'preview' ? (shape as PreviewShape) : undefined
 	const [value, setValue] = useState('')
+	const [isSaving, setIsSaving] = useState(false)
 	const handleOnChange: OnChange = (value) => {
 		setValue(value)
 	}
@@ -32,6 +33,7 @@ export const CodeEditor = track(() => {
 			onPointerDown={(e) => stopEventPropagation(e)}
 			onKeyUp={async (e) => {
 				if (e.key === 's' && e.ctrlKey) {
+					setIsSaving(true)
 					if (!value && value === '') return
 					await updateLink(shape.id, value)
 					editor.updateShape<PreviewShape>({
@@ -42,6 +44,7 @@ export const CodeEditor = track(() => {
 							linkUploadVersion: previewShape.props.linkUploadVersion + 1,
 						},
 					})
+					setIsSaving(false)
 				}
 			}}
 		>
@@ -61,7 +64,7 @@ export const CodeEditor = track(() => {
 						})
 					}}
 				>
-					Save
+					{isSaving ? 'Saving...' : 'Save'}
 				</button>
 
 				<div style={{ width: 700, height: 700 }}>
@@ -74,7 +77,10 @@ export const CodeEditor = track(() => {
 							minimap: {
 								enabled: false,
 							},
-							lineNumbers: 'on',
+							lineNumbers: 'off',
+							scrollbar: {
+								vertical: 'hidden',
+							},
 							wordWrap: 'wordWrapColumn',
 							wordWrapColumn: 80,
 							fontSize: 13,

From 5c4a53954f1effe2d187d5ab25b9736fec88d9d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 16:31:15 +0100
Subject: [PATCH 17/30] Update appearance.

---
 app/CodeEditor/CodeEditor.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
index 904c7086..decd722d 100644
--- a/app/CodeEditor/CodeEditor.tsx
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -74,6 +74,11 @@ export const CodeEditor = track(() => {
 						onChange={handleOnChange}
 						theme={dark ? 'vs-dark' : 'vs-light'}
 						options={{
+							overviewRulerBorder: false,
+							overviewRulerLanes: 0,
+							padding: {
+								top: 16,
+							},
 							minimap: {
 								enabled: false,
 							},

From 1baabce3a3acb45d4844c79dd4ae68f4639ce8c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 22 Nov 2023 16:43:53 +0100
Subject: [PATCH 18/30] Remove unused.

---
 app/CodeEditor/CodeEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
index decd722d..4f4e30a6 100644
--- a/app/CodeEditor/CodeEditor.tsx
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -1,5 +1,5 @@
 import { OnChange } from '@monaco-editor/react'
-import { track, useEditor, useIsDarkMode, stopEventPropagation, debounce } from '@tldraw/tldraw'
+import { track, useEditor, useIsDarkMode, stopEventPropagation } from '@tldraw/tldraw'
 import { useState } from 'react'
 import { Editor as MonacoEditor } from '@monaco-editor/react'
 import { updateLink } from '../lib/uploadLink'

From 1928745321e50c7712259d7e80e333518bcd401b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 23 Nov 2023 14:17:20 +0100
Subject: [PATCH 19/30] Move the camera.

---
 app/CodeEditor/CodeEditor.tsx       | 16 +++++-----
 app/PreviewShape/PreviewShape.tsx   | 25 ++++++++++++++++
 app/components/ShowEditorButton.tsx | 45 +++++++++++++++++++++++++++++
 3 files changed, 79 insertions(+), 7 deletions(-)
 create mode 100644 app/components/ShowEditorButton.tsx

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
index 4f4e30a6..490aa957 100644
--- a/app/CodeEditor/CodeEditor.tsx
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -1,9 +1,10 @@
-import { OnChange } from '@monaco-editor/react'
-import { track, useEditor, useIsDarkMode, stopEventPropagation } from '@tldraw/tldraw'
+import { Editor as MonacoEditor, OnChange } from '@monaco-editor/react'
+import { stopEventPropagation, track, useEditor, useIsDarkMode } from '@tldraw/tldraw'
 import { useState } from 'react'
-import { Editor as MonacoEditor } from '@monaco-editor/react'
+import { PreviewShape, showingEditor } from '../PreviewShape/PreviewShape'
 import { updateLink } from '../lib/uploadLink'
-import { PreviewShape } from '../PreviewShape/PreviewShape'
+
+export const EDITOR_WIDTH = 700
 
 export const CodeEditor = track(() => {
 	const editor = useEditor()
@@ -13,11 +14,12 @@ export const CodeEditor = track(() => {
 	const previewShape = shape?.type === 'preview' ? (shape as PreviewShape) : undefined
 	const [value, setValue] = useState('')
 	const [isSaving, setIsSaving] = useState(false)
+	const showEditor = showingEditor.get()
 	const handleOnChange: OnChange = (value) => {
 		setValue(value)
 	}
 
-	if (!bounds || !previewShape || previewShape.type !== 'preview') return null
+	if (!bounds || !previewShape || !showEditor) return null
 
 	const pageCoordinates = editor.pageToScreen(bounds.point)
 
@@ -50,7 +52,7 @@ export const CodeEditor = track(() => {
 		>
 			<div style={{ display: 'flex', flexDirection: 'column' }}>
 				<button
-					className="z-10 absolute right-[10px] top-[10px] bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+					className="z-10 absolute right-[10px] bottom-[10px] bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
 					onClick={async () => {
 						if (!value && value === '') return
 						await updateLink(shape.id, value)
@@ -67,7 +69,7 @@ export const CodeEditor = track(() => {
 					{isSaving ? 'Saving...' : 'Save'}
 				</button>
 
-				<div style={{ width: 700, height: 700 }}>
+				<div style={{ width: EDITOR_WIDTH, height: 700 }}>
 					<MonacoEditor
 						defaultLanguage="html"
 						value={previewShape.props.html}
diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 83402b18..34ff6a43 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -4,7 +4,9 @@ import {
 	DefaultSpinner,
 	HTMLContainer,
 	TLBaseShape,
+	TLOnClickHandler,
 	Vec2d,
+	atom,
 	toDomPrecision,
 	useIsEditing,
 	useValue,
@@ -15,6 +17,8 @@ import { Hint } from '../components/Hint'
 import { UrlLinkButton } from '../components/UrlLinkButton'
 import { LINK_HOST, PROTOCOL } from '../lib/hosts'
 import { uploadLink } from '../lib/uploadLink'
+import { ShowEditorButton } from '../components/ShowEditorButton'
+import { EDITOR_WIDTH } from '../CodeEditor/CodeEditor'
 
 export type PreviewShape = TLBaseShape<
 	'preview',
@@ -28,6 +32,8 @@ export type PreviewShape = TLBaseShape<
 	}
 >
 
+export const showingEditor = atom('showingEditor', false)
+
 export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 	static override type = 'preview' as const
 
@@ -128,6 +134,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 						>
 							<CopyToClipboardButton shape={shape} />
 							<UrlLinkButton uploadUrl={uploadUrl} />
+							<ShowEditorButton shape={shape} />
 						</div>
 						<div
 							style={{
@@ -163,6 +170,24 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 		)
 	}
 
+	override onClick = (shape: PreviewShape) => {
+		if (!showingEditor.get()) return
+		const editor = this.editor
+		editor.setSelectedShapes([])
+		const bounds = editor.getViewportPageBounds()
+
+		editor.centerOnPoint(
+			{
+				x: shape.x + bounds.width / 2 - (EDITOR_WIDTH + 69) / editor.getZoomLevel(),
+				y: shape.y + bounds.height / 2 - 64 / editor.getZoomLevel(),
+			},
+			{ duration: 400 }
+		)
+		setTimeout(() => {
+			editor.setSelectedShapes([shape.id])
+		}, 400)
+	}
+
 	indicator(shape: PreviewShape) {
 		return <rect width={shape.props.w} height={shape.props.h} />
 	}
diff --git a/app/components/ShowEditorButton.tsx b/app/components/ShowEditorButton.tsx
new file mode 100644
index 00000000..c4d376ba
--- /dev/null
+++ b/app/components/ShowEditorButton.tsx
@@ -0,0 +1,45 @@
+'use client'
+import { Icon, stopEventPropagation, useEditor } from '@tldraw/tldraw'
+import { PreviewShape, showingEditor } from '../PreviewShape/PreviewShape'
+import { EDITOR_WIDTH } from '../CodeEditor/CodeEditor'
+
+export function ShowEditorButton({ shape }: { shape: PreviewShape }) {
+	const showing = showingEditor.get()
+	const editor = useEditor()
+	const bounds = editor.getViewportPageBounds()
+	return (
+		<button
+			style={{
+				all: 'unset',
+				height: 40,
+				width: 40,
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				cursor: 'pointer',
+				pointerEvents: 'all',
+			}}
+			onClick={() => {
+				showingEditor.set(!showing)
+
+				if (!showing) {
+					editor.setSelectedShapes([])
+					editor.centerOnPoint(
+						{
+							x: shape.x + bounds.width / 2 - (EDITOR_WIDTH + 69) / editor.getZoomLevel(),
+							y: shape.y + bounds.height / 2 - 64 / editor.getZoomLevel(),
+						},
+						{ duration: 400 }
+					)
+					setTimeout(() => {
+						editor.setSelectedShapes([shape.id])
+					}, 250)
+				}
+			}}
+			onPointerDown={stopEventPropagation}
+			title={showing ? 'Hide editor' : 'Show editor'}
+		>
+			<Icon icon="follow" />
+		</button>
+	)
+}

From 9dccab605921d18e2225ff614f702ef6984dadfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 23 Nov 2023 14:24:34 +0100
Subject: [PATCH 20/30] Refactor.

---
 app/PreviewShape/PreviewShape.tsx   | 4 +---
 app/components/ShowEditorButton.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 34ff6a43..e6a50b29 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -183,9 +183,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 			},
 			{ duration: 400 }
 		)
-		setTimeout(() => {
-			editor.setSelectedShapes([shape.id])
-		}, 400)
+		editor.setSelectedShapes([shape.id])
 	}
 
 	indicator(shape: PreviewShape) {
diff --git a/app/components/ShowEditorButton.tsx b/app/components/ShowEditorButton.tsx
index c4d376ba..30cfaf0e 100644
--- a/app/components/ShowEditorButton.tsx
+++ b/app/components/ShowEditorButton.tsx
@@ -1,9 +1,9 @@
 'use client'
-import { Icon, stopEventPropagation, useEditor } from '@tldraw/tldraw'
+import { Icon, stopEventPropagation, track, useEditor } from '@tldraw/tldraw'
 import { PreviewShape, showingEditor } from '../PreviewShape/PreviewShape'
 import { EDITOR_WIDTH } from '../CodeEditor/CodeEditor'
 
-export function ShowEditorButton({ shape }: { shape: PreviewShape }) {
+export const ShowEditorButton = track(({ shape }: { shape: PreviewShape }) => {
 	const showing = showingEditor.get()
 	const editor = useEditor()
 	const bounds = editor.getViewportPageBounds()
@@ -20,7 +20,6 @@ export function ShowEditorButton({ shape }: { shape: PreviewShape }) {
 				pointerEvents: 'all',
 			}}
 			onClick={() => {
-				showingEditor.set(!showing)
 
 				if (!showing) {
 					editor.setSelectedShapes([])
@@ -35,6 +34,7 @@ export function ShowEditorButton({ shape }: { shape: PreviewShape }) {
 						editor.setSelectedShapes([shape.id])
 					}, 250)
 				}
+				showingEditor.set(!showing)
 			}}
 			onPointerDown={stopEventPropagation}
 			title={showing ? 'Hide editor' : 'Show editor'}
@@ -42,4 +42,4 @@ export function ShowEditorButton({ shape }: { shape: PreviewShape }) {
 			<Icon icon="follow" />
 		</button>
 	)
-}
+})

From 9383ddaf60b7ae27ff17a503cff8da71d759cdde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 23 Nov 2023 14:26:10 +0100
Subject: [PATCH 21/30] Fix selections.

---
 app/PreviewShape/PreviewShape.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index e6a50b29..1f9e190e 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -173,7 +173,6 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 	override onClick = (shape: PreviewShape) => {
 		if (!showingEditor.get()) return
 		const editor = this.editor
-		editor.setSelectedShapes([])
 		const bounds = editor.getViewportPageBounds()
 
 		editor.centerOnPoint(
@@ -183,7 +182,6 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 			},
 			{ duration: 400 }
 		)
-		editor.setSelectedShapes([shape.id])
 	}
 
 	indicator(shape: PreviewShape) {

From d8f0b72c9bfa6878472073a8c5c3e810e67ab807 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 23 Nov 2023 14:41:41 +0100
Subject: [PATCH 22/30] Dont show current line selection.

---
 app/CodeEditor/CodeEditor.tsx       | 1 +
 app/components/ShowEditorButton.tsx | 5 -----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
index 490aa957..61d3a8cd 100644
--- a/app/CodeEditor/CodeEditor.tsx
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -76,6 +76,7 @@ export const CodeEditor = track(() => {
 						onChange={handleOnChange}
 						theme={dark ? 'vs-dark' : 'vs-light'}
 						options={{
+							renderLineHighlight: 'none',
 							overviewRulerBorder: false,
 							overviewRulerLanes: 0,
 							padding: {
diff --git a/app/components/ShowEditorButton.tsx b/app/components/ShowEditorButton.tsx
index 30cfaf0e..41aa30cf 100644
--- a/app/components/ShowEditorButton.tsx
+++ b/app/components/ShowEditorButton.tsx
@@ -20,9 +20,7 @@ export const ShowEditorButton = track(({ shape }: { shape: PreviewShape }) => {
 				pointerEvents: 'all',
 			}}
 			onClick={() => {
-
 				if (!showing) {
-					editor.setSelectedShapes([])
 					editor.centerOnPoint(
 						{
 							x: shape.x + bounds.width / 2 - (EDITOR_WIDTH + 69) / editor.getZoomLevel(),
@@ -30,9 +28,6 @@ export const ShowEditorButton = track(({ shape }: { shape: PreviewShape }) => {
 						},
 						{ duration: 400 }
 					)
-					setTimeout(() => {
-						editor.setSelectedShapes([shape.id])
-					}, 250)
 				}
 				showingEditor.set(!showing)
 			}}

From d8763377566d9397d03617da72d24d084704214b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 23 Nov 2023 14:41:48 +0100
Subject: [PATCH 23/30] Remove unused import.

---
 app/PreviewShape/PreviewShape.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 1f9e190e..455f4481 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -4,7 +4,6 @@ import {
 	DefaultSpinner,
 	HTMLContainer,
 	TLBaseShape,
-	TLOnClickHandler,
 	Vec2d,
 	atom,
 	toDomPrecision,

From e23cbcec0f261aae125b78dbd196ab6520e83e79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 23 Nov 2023 14:41:59 +0100
Subject: [PATCH 24/30] Show different icon when showing editor.

---
 app/components/ShowEditorButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/ShowEditorButton.tsx b/app/components/ShowEditorButton.tsx
index 41aa30cf..592248b7 100644
--- a/app/components/ShowEditorButton.tsx
+++ b/app/components/ShowEditorButton.tsx
@@ -34,7 +34,7 @@ export const ShowEditorButton = track(({ shape }: { shape: PreviewShape }) => {
 			onPointerDown={stopEventPropagation}
 			title={showing ? 'Hide editor' : 'Show editor'}
 		>
-			<Icon icon="follow" />
+			<Icon icon={showing ? 'following' : 'follow'} />
 		</button>
 	)
 })

From 360ff4dc7be61ad5308e165c2c0badd8b1eaa825 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 23 Nov 2023 14:46:07 +0100
Subject: [PATCH 25/30] Refactor.

---
 app/PreviewShape/PreviewShape.tsx   | 13 ++-----------
 app/components/ShowEditorButton.tsx | 29 +++++++++++++++++++++--------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 455f4481..77e9850e 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -16,7 +16,7 @@ import { Hint } from '../components/Hint'
 import { UrlLinkButton } from '../components/UrlLinkButton'
 import { LINK_HOST, PROTOCOL } from '../lib/hosts'
 import { uploadLink } from '../lib/uploadLink'
-import { ShowEditorButton } from '../components/ShowEditorButton'
+import { ShowEditorButton, showShapeNextToEditor } from '../components/ShowEditorButton'
 import { EDITOR_WIDTH } from '../CodeEditor/CodeEditor'
 
 export type PreviewShape = TLBaseShape<
@@ -171,16 +171,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 
 	override onClick = (shape: PreviewShape) => {
 		if (!showingEditor.get()) return
-		const editor = this.editor
-		const bounds = editor.getViewportPageBounds()
-
-		editor.centerOnPoint(
-			{
-				x: shape.x + bounds.width / 2 - (EDITOR_WIDTH + 69) / editor.getZoomLevel(),
-				y: shape.y + bounds.height / 2 - 64 / editor.getZoomLevel(),
-			},
-			{ duration: 400 }
-		)
+		showShapeNextToEditor(this.editor, shape)
 	}
 
 	indicator(shape: PreviewShape) {
diff --git a/app/components/ShowEditorButton.tsx b/app/components/ShowEditorButton.tsx
index 592248b7..1f81ff31 100644
--- a/app/components/ShowEditorButton.tsx
+++ b/app/components/ShowEditorButton.tsx
@@ -1,5 +1,13 @@
 'use client'
-import { Icon, stopEventPropagation, track, useEditor } from '@tldraw/tldraw'
+import {
+	Box2d,
+	Editor,
+	Icon,
+	TLShape,
+	stopEventPropagation,
+	track,
+	useEditor,
+} from '@tldraw/tldraw'
 import { PreviewShape, showingEditor } from '../PreviewShape/PreviewShape'
 import { EDITOR_WIDTH } from '../CodeEditor/CodeEditor'
 
@@ -21,13 +29,7 @@ export const ShowEditorButton = track(({ shape }: { shape: PreviewShape }) => {
 			}}
 			onClick={() => {
 				if (!showing) {
-					editor.centerOnPoint(
-						{
-							x: shape.x + bounds.width / 2 - (EDITOR_WIDTH + 69) / editor.getZoomLevel(),
-							y: shape.y + bounds.height / 2 - 64 / editor.getZoomLevel(),
-						},
-						{ duration: 400 }
-					)
+					showShapeNextToEditor(editor, shape)
 				}
 				showingEditor.set(!showing)
 			}}
@@ -38,3 +40,14 @@ export const ShowEditorButton = track(({ shape }: { shape: PreviewShape }) => {
 		</button>
 	)
 })
+
+export function showShapeNextToEditor(editor: Editor, shape: TLShape) {
+	const bounds = editor.getViewportPageBounds()
+	editor.centerOnPoint(
+		{
+			x: shape.x + bounds.width / 2 - (EDITOR_WIDTH + 69) / editor.getZoomLevel(),
+			y: shape.y + bounds.height / 2 - 64 / editor.getZoomLevel(),
+		},
+		{ duration: 400 }
+	)
+}

From 3b48024abf33b1739c75a40e41bf644c51edd9a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 23 Nov 2023 14:46:35 +0100
Subject: [PATCH 26/30] Remove unused import.

---
 app/PreviewShape/PreviewShape.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 77e9850e..a1d47244 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -17,7 +17,6 @@ import { UrlLinkButton } from '../components/UrlLinkButton'
 import { LINK_HOST, PROTOCOL } from '../lib/hosts'
 import { uploadLink } from '../lib/uploadLink'
 import { ShowEditorButton, showShapeNextToEditor } from '../components/ShowEditorButton'
-import { EDITOR_WIDTH } from '../CodeEditor/CodeEditor'
 
 export type PreviewShape = TLBaseShape<
 	'preview',

From 81b6f65fc410a869892e5b30fbd51720c9083691 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 23 Nov 2023 14:50:00 +0100
Subject: [PATCH 27/30] Imporve ux.

---
 app/components/ShowEditorButton.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/app/components/ShowEditorButton.tsx b/app/components/ShowEditorButton.tsx
index 1f81ff31..3488bb47 100644
--- a/app/components/ShowEditorButton.tsx
+++ b/app/components/ShowEditorButton.tsx
@@ -1,20 +1,11 @@
 'use client'
-import {
-	Box2d,
-	Editor,
-	Icon,
-	TLShape,
-	stopEventPropagation,
-	track,
-	useEditor,
-} from '@tldraw/tldraw'
+import { Editor, Icon, TLShape, stopEventPropagation, track, useEditor } from '@tldraw/tldraw'
 import { PreviewShape, showingEditor } from '../PreviewShape/PreviewShape'
 import { EDITOR_WIDTH } from '../CodeEditor/CodeEditor'
 
 export const ShowEditorButton = track(({ shape }: { shape: PreviewShape }) => {
 	const showing = showingEditor.get()
 	const editor = useEditor()
-	const bounds = editor.getViewportPageBounds()
 	return (
 		<button
 			style={{
@@ -28,6 +19,7 @@ export const ShowEditorButton = track(({ shape }: { shape: PreviewShape }) => {
 				pointerEvents: 'all',
 			}}
 			onClick={() => {
+				editor.setSelectedShapes([shape.id])
 				if (!showing) {
 					showShapeNextToEditor(editor, shape)
 				}

From 7129f477f9e77d2c4be4f7b078c18a8546fa6a24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Fri, 24 Nov 2023 11:24:29 +0100
Subject: [PATCH 28/30] Add focus mode.

---
 app/CodeEditor/CodeEditor.tsx       | 139 ++++++++++++++++------------
 app/PreviewShape/PreviewShape.tsx   |   2 +-
 app/components/ShowEditorButton.tsx |   6 +-
 app/makereal.tldraw.com/page.tsx    |  25 +++--
 4 files changed, 101 insertions(+), 71 deletions(-)

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
index 61d3a8cd..33363ca6 100644
--- a/app/CodeEditor/CodeEditor.tsx
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -24,36 +24,19 @@ export const CodeEditor = track(() => {
 	const pageCoordinates = editor.pageToScreen(bounds.point)
 
 	return (
-		<div
-			style={{
-				position: 'absolute',
-				top: Math.max(64, pageCoordinates.y - 64),
-				left: 20,
-				border: '1px solid #eee',
-				pointerEvents: 'all',
-			}}
-			onPointerDown={(e) => stopEventPropagation(e)}
-			onKeyUp={async (e) => {
-				if (e.key === 's' && e.ctrlKey) {
-					setIsSaving(true)
-					if (!value && value === '') return
-					await updateLink(shape.id, value)
-					editor.updateShape<PreviewShape>({
-						id: previewShape.id,
-						type: 'preview',
-						props: {
-							html: value,
-							linkUploadVersion: previewShape.props.linkUploadVersion + 1,
-						},
-					})
-					setIsSaving(false)
-				}
-			}}
-		>
-			<div style={{ display: 'flex', flexDirection: 'column' }}>
-				<button
-					className="z-10 absolute right-[10px] bottom-[10px] bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-					onClick={async () => {
+		<>
+			<div
+				style={{
+					position: 'absolute',
+					top: 20,
+					left: 20,
+					border: '1px solid #eee',
+					pointerEvents: 'all',
+				}}
+				onPointerDown={(e) => stopEventPropagation(e)}
+				onKeyUp={async (e) => {
+					if (e.key === 's' && e.ctrlKey) {
+						setIsSaving(true)
 						if (!value && value === '') return
 						await updateLink(shape.id, value)
 						editor.updateShape<PreviewShape>({
@@ -64,38 +47,72 @@ export const CodeEditor = track(() => {
 								linkUploadVersion: previewShape.props.linkUploadVersion + 1,
 							},
 						})
-					}}
-				>
-					{isSaving ? 'Saving...' : 'Save'}
-				</button>
-
-				<div style={{ width: EDITOR_WIDTH, height: 700 }}>
-					<MonacoEditor
-						defaultLanguage="html"
-						value={previewShape.props.html}
-						onChange={handleOnChange}
-						theme={dark ? 'vs-dark' : 'vs-light'}
-						options={{
-							renderLineHighlight: 'none',
-							overviewRulerBorder: false,
-							overviewRulerLanes: 0,
-							padding: {
-								top: 16,
-							},
-							minimap: {
-								enabled: false,
-							},
-							lineNumbers: 'off',
-							scrollbar: {
-								vertical: 'hidden',
-							},
-							wordWrap: 'wordWrapColumn',
-							wordWrapColumn: 80,
-							fontSize: 13,
-						}}
-					/>
+						setIsSaving(false)
+					}
+				}}
+			>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
+					<div className="absolute bottom-2.5 right-2.5 flex gap-2.5">
+						<button
+							onPointerDown={stopEventPropagation}
+							onClick={(e) => {
+								stopEventPropagation(e)
+								console.log('clicked')
+								showingEditor.set(false)
+							}}
+							className="bg-white hover:bg-gray-100 text-black border w-[80px] py-2 px-4 rounded box-border z-10 h-9"
+							style={{
+								pointerEvents: 'all',
+							}}
+						>
+							Dismiss
+						</button>
+						<button
+							className="z-10 bg-blue-500 hover:bg-blue-700 w-[80px] h-9 box-border text-white py-2 px-4 rounded"
+							onClick={async () => {
+								if (!value && value === '') return
+								await updateLink(shape.id, value)
+								editor.updateShape<PreviewShape>({
+									id: previewShape.id,
+									type: 'preview',
+									props: {
+										html: value,
+										linkUploadVersion: previewShape.props.linkUploadVersion + 1,
+									},
+								})
+							}}
+						>
+							{isSaving ? 'Saving...' : 'Save'}
+						</button>
+					</div>
+					<div style={{ width: EDITOR_WIDTH, height: 700 }}>
+						<MonacoEditor
+							defaultLanguage="html"
+							value={previewShape.props.html}
+							onChange={handleOnChange}
+							theme={dark ? 'vs-dark' : 'vs-light'}
+							options={{
+								renderLineHighlight: 'none',
+								overviewRulerBorder: false,
+								overviewRulerLanes: 0,
+								padding: {
+									top: 16,
+								},
+								minimap: {
+									enabled: false,
+								},
+								lineNumbers: 'off',
+								scrollbar: {
+									vertical: 'hidden',
+								},
+								wordWrap: 'wordWrapColumn',
+								wordWrapColumn: 80,
+								fontSize: 13,
+							}}
+						/>
+					</div>
 				</div>
 			</div>
-		</div>
+		</>
 	)
 })
diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index a1d47244..7d910f50 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -13,10 +13,10 @@ import {
 import { useEffect } from 'react'
 import { CopyToClipboardButton } from '../components/CopyToClipboardButton'
 import { Hint } from '../components/Hint'
+import { ShowEditorButton, showShapeNextToEditor } from '../components/ShowEditorButton'
 import { UrlLinkButton } from '../components/UrlLinkButton'
 import { LINK_HOST, PROTOCOL } from '../lib/hosts'
 import { uploadLink } from '../lib/uploadLink'
-import { ShowEditorButton, showShapeNextToEditor } from '../components/ShowEditorButton'
 
 export type PreviewShape = TLBaseShape<
 	'preview',
diff --git a/app/components/ShowEditorButton.tsx b/app/components/ShowEditorButton.tsx
index 3488bb47..233ec5bb 100644
--- a/app/components/ShowEditorButton.tsx
+++ b/app/components/ShowEditorButton.tsx
@@ -37,9 +37,9 @@ export function showShapeNextToEditor(editor: Editor, shape: TLShape) {
 	const bounds = editor.getViewportPageBounds()
 	editor.centerOnPoint(
 		{
-			x: shape.x + bounds.width / 2 - (EDITOR_WIDTH + 69) / editor.getZoomLevel(),
-			y: shape.y + bounds.height / 2 - 64 / editor.getZoomLevel(),
+			x: shape.x + bounds.width / 2 - (EDITOR_WIDTH + 40) / editor.getZoomLevel(),
+			y: shape.y + bounds.height / 2 - 20 / editor.getZoomLevel(),
 		},
-		{ duration: 400 }
+		{ duration: 320 }
 	)
 }
diff --git a/app/makereal.tldraw.com/page.tsx b/app/makereal.tldraw.com/page.tsx
index 22f15633..52ef392e 100644
--- a/app/makereal.tldraw.com/page.tsx
+++ b/app/makereal.tldraw.com/page.tsx
@@ -4,12 +4,13 @@
 
 import dynamic from 'next/dynamic'
 import '@tldraw/tldraw/tldraw.css'
-import { TLEditorComponents } from '@tldraw/tldraw'
+import { Editor, TLEditorComponents, track } from '@tldraw/tldraw'
 import { CodeEditor } from '../CodeEditor/CodeEditor'
-import { PreviewShapeUtil } from '../PreviewShape/PreviewShape'
+import { PreviewShape, PreviewShapeUtil, showingEditor } from '../PreviewShape/PreviewShape'
 import { APIKeyInput } from '../components/APIKeyInput'
 import { ExportButton } from '../components/ExportButton'
 import { LockupLink } from '../components/LockupLink'
+import { useState } from 'react'
 
 const Tldraw = dynamic(async () => (await import('@tldraw/tldraw')).Tldraw, {
 	ssr: false,
@@ -21,7 +22,11 @@ const components: TLEditorComponents = {
 	InFrontOfTheCanvas: CodeEditor,
 }
 
-export default function Home() {
+const Home = track(() => {
+	const showing = showingEditor.get()
+	const [editor, setEditor] = useState<Editor | undefined>(undefined)
+	const shape = editor?.getOnlySelectedShape()
+	const previewShape = shape?.type === 'preview' ? (shape as PreviewShape) : undefined
 	return (
 		<div className="tldraw__editor">
 			<Tldraw
@@ -29,10 +34,18 @@ export default function Home() {
 				components={components}
 				shapeUtils={shapeUtils}
 				shareZone={<ExportButton />}
+				hideUi={showing && !!previewShape}
+				onMount={setEditor}
 			>
-				<APIKeyInput />
-				<LockupLink />
+				{(!showing || !previewShape) && (
+					<>
+						<APIKeyInput />
+						<LockupLink />
+					</>
+				)}
 			</Tldraw>
 		</div>
 	)
-}
+})
+
+export default Home

From 2f7a84be9b55b12cbbe7496d72074aa7fcd20f2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Fri, 24 Nov 2023 14:52:01 +0100
Subject: [PATCH 29/30] Remove unused variable.

---
 app/CodeEditor/CodeEditor.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
index 33363ca6..89ae5747 100644
--- a/app/CodeEditor/CodeEditor.tsx
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -21,8 +21,6 @@ export const CodeEditor = track(() => {
 
 	if (!bounds || !previewShape || !showEditor) return null
 
-	const pageCoordinates = editor.pageToScreen(bounds.point)
-
 	return (
 		<>
 			<div

From 2000bc74829b04fad94641ad8af8b4a056a5fff3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Mon, 27 Nov 2023 14:55:56 +0100
Subject: [PATCH 30/30] Remove console.log.

---
 app/CodeEditor/CodeEditor.tsx | 3 ++-
 app/lib/getHtmlFromOpenAI.ts  | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/CodeEditor/CodeEditor.tsx b/app/CodeEditor/CodeEditor.tsx
index 89ae5747..f91fbabd 100644
--- a/app/CodeEditor/CodeEditor.tsx
+++ b/app/CodeEditor/CodeEditor.tsx
@@ -12,9 +12,11 @@ export const CodeEditor = track(() => {
 	const bounds = editor.getViewportPageBounds()
 	const shape = editor.getOnlySelectedShape()
 	const previewShape = shape?.type === 'preview' ? (shape as PreviewShape) : undefined
+
 	const [value, setValue] = useState('')
 	const [isSaving, setIsSaving] = useState(false)
 	const showEditor = showingEditor.get()
+
 	const handleOnChange: OnChange = (value) => {
 		setValue(value)
 	}
@@ -55,7 +57,6 @@ export const CodeEditor = track(() => {
 							onPointerDown={stopEventPropagation}
 							onClick={(e) => {
 								stopEventPropagation(e)
-								console.log('clicked')
 								showingEditor.set(false)
 							}}
 							className="bg-white hover:bg-gray-100 text-black border w-[80px] py-2 px-4 rounded box-border z-10 h-9"
diff --git a/app/lib/getHtmlFromOpenAI.ts b/app/lib/getHtmlFromOpenAI.ts
index bbeca654..86d361d3 100644
--- a/app/lib/getHtmlFromOpenAI.ts
+++ b/app/lib/getHtmlFromOpenAI.ts
@@ -70,7 +70,6 @@ export async function getHtmlFromOpenAI({
 			},
 			body: JSON.stringify(body),
 		})
-		console.log(resp)
 		json = await resp.json()
 	} catch (e) {
 		console.log(e)