Merge branch 'main' into mitja/add-code-editor

app/PreviewShape/PreviewShape.tsx

@@ -1,20 +1,20 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { Editor as MonacoEditor, OnChange } from '@monaco-editor/react'
 import {
 	BaseBoxShapeUtil,
 	DefaultSpinner,
-	Editor,
 	HTMLContainer,
 	Icon,
 	TLBaseShape,
 	Vec2d,
 	stopEventPropagation,
-	toDomPrecision,
-	useIsDarkMode,
 	useIsEditing,
 	useToasts,
+	useValue,
 } from '@tldraw/tldraw'
-import { useCallback, useState } from 'react'
+import { useState } from 'react'
+import { ShowEditorButton } from '../components/ShowEditorButton'
+import { ShowResult } from '../components/ShowResult'
+import { UrlLinkButton } from '../components/UrlLinkButton'
 
 export type PreviewShape = TLBaseShape<
 	'preview',
@@ -26,74 +26,6 @@ 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
 
@@ -166,60 +98,42 @@ 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: 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>
-					</>
+					<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={{

app/components/ShowEditorButton.tsx

@@ -0,0 +1,34 @@
+import { Icon, stopEventPropagation } from '@tldraw/tldraw'
+
+export function ShowEditorButton({
+	isShowingEditor,
+	setIsShowingEditor,
+}: {
+	isShowingEditor: boolean
+	setIsShowingEditor: (isShowingEditor: boolean) => void
+}) {
+	return (
+		<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>
+	)
+}

app/components/ShowResult.tsx

@@ -0,0 +1,72 @@
+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'
+
+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)',
+				}}
+			/>
+			)
+		</>
+	)
+}