Merge branch 'point-docs-to-dev-example' of https://github.com/tldraw/tldraw into point-docs-to-dev-example

apps/examples/src/examples/canvas-events/CanvasEventsExample.tsx

@@ -48,6 +48,7 @@ export default function CanvasEventsExample() {
 					overflow: 'auto',
 					whiteSpace: 'pre-wrap',
 				}}
+				onCopy={(event) => event.stopPropagation()}
 			>
 				<div>{JSON.stringify(events, undefined, 2)}</div>
 			</div>

apps/examples/src/examples/inline/InlineExample.tsx

@@ -23,10 +23,10 @@ export default function InlineExample() {
 					gap: 12,
 				}}
 			>
-				<InlineEditor width={900} height={600} />
-				<InlineEditor width={700} height={500} />
-				<InlineEditor width={600} height={400} />
 				<InlineEditor width={500} height={300} />
+				<InlineEditor width={600} height={400} />
+				<InlineEditor width={700} height={500} />
+				<InlineEditor width={900} height={600} />
 			</div>
 		</FocusedEditorContext.Provider>
 	)

apps/examples/src/examples/store-events/StoreEventsExample.tsx

@@ -92,6 +92,7 @@ export default function StoreEventsExample() {
 					flexDirection: 'column-reverse',
 					overflow: 'auto',
 				}}
+				onCopy={(event) => event.stopPropagation()}
 			>
 				<pre>{storeEvents}</pre>
 			</div>

apps/examples/src/examples/ui-events/UiEventsExample.tsx

@@ -11,8 +11,8 @@ export default function UiEventsExample() {
 	const handleUiEvent = useCallback<TLUiEventHandler>((name, data: any) => {
 		const codeSnippet = getCodeSnippet(name, data)
 		setUiEvents((events) => [
-			`event: ${name} ${JSON.stringify(data)}${codeSnippet && `\ncode:  ${codeSnippet}`}`,
 			...events,
+			`event: ${name} ${JSON.stringify(data)}${codeSnippet && `\ncode:  ${codeSnippet}`}`,
 		])
 	}, [])
 
@@ -31,10 +31,9 @@ export default function UiEventsExample() {
 					fontFamily: 'monospace',
 					fontSize: 12,
 					borderLeft: 'solid 2px #333',
-					display: 'flex',
-					flexDirection: 'column-reverse',
 					overflow: 'auto',
 				}}
+				onCopy={(event) => event.stopPropagation()}
 			>
 				{uiEvents.map((t, i) => (
 					<Fragment key={i}>

lerna.json

@@ -1,7 +1,5 @@
 {
 	"$schema": "node_modules/lerna/schemas/lerna-schema.json",
-	"packages": [
+	"packages": ["packages/*"],
-		"packages/*"
-	],
 	"version": "2.0.0-beta.4"
 }

packages/tldraw/api-report.md

@@ -1326,7 +1326,7 @@ export const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;
 export const TldrawUiInput: React_3.ForwardRefExoticComponent<TLUiInputProps & React_3.RefAttributes<HTMLInputElement>>;
 
 // @public (undocumented)
-export function TldrawUiKbd({ children }: TLUiKbdProps): JSX_2.Element | null;
+export function TldrawUiKbd({ children, visibleOnMobileLayout }: TLUiKbdProps): JSX_2.Element | null;
 
 // @public (undocumented)
 export function TldrawUiMenuCheckboxItem<TranslationKey extends string = string, IconType extends string = string>({ id, kbd, label, readonlyOk, onSelect, disabled, checked, }: TLUiMenuCheckboxItemProps<TranslationKey, IconType>): JSX_2.Element | null;
@@ -1809,6 +1809,8 @@ export interface TLUiInputProps {
 export interface TLUiKbdProps {
     // (undocumented)
     children: string;
+    // (undocumented)
+    visibleOnMobileLayout?: boolean;
 }
 
 // @public (undocumented)

packages/tldraw/api/api.json

@@ -15826,7 +15826,7 @@
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "export declare function TldrawUiKbd({ children }: "
+              "text": "export declare function TldrawUiKbd({ children, visibleOnMobileLayout }: "
             },
             {
               "kind": "Reference",
@@ -15864,7 +15864,7 @@
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "{ children }",
+              "parameterName": "{ children, visibleOnMobileLayout }",
               "parameterTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
@@ -20948,6 +20948,33 @@
                 "startIndex": 1,
                 "endIndex": 2
               }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@tldraw/tldraw!TLUiKbdProps#visibleOnMobileLayout:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "visibleOnMobileLayout?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "visibleOnMobileLayout",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
             }
           ],
           "extendsTokenRanges": []

packages/tldraw/src/lib/ui.css

@@ -748,8 +748,8 @@
 	font-size: 12px;
 	overflow: hidden;
 	min-width: 300px;
-	max-width: 80vw;
+	max-width: 80%;
-	max-height: 80vh;
+	max-height: 80%;
 }
 
 .tlui-dialog__header {
@@ -1488,26 +1488,18 @@
 
 .tlui-shortcuts-dialog__body {
 	position: relative;
-	columns: 1;
+	columns: 3;
 	column-gap: var(--space-9);
 	pointer-events: all;
 	touch-action: auto;
 }
 
-/* TODO: refactor shortcuts dialog to make it work in small inline components */
+.tlui-shortcuts-dialog__body__tablet {
-@media (min-width: 475px) {
+	columns: 2;
-	.tlui-shortcuts-dialog__body {
-		columns: 2;
-		column-gap: var(--space-9);
-	}
 }
 
-/* TODO: refactor shortcuts dialog to make it work in small inline components */
+.tlui-shortcuts-dialog__body__mobile {
-@media (min-width: 960px) {
+	columns: 1;
-	.tlui-shortcuts-dialog__body {
-		columns: 3;
-		column-gap: var(--space-9);
-	}
 }
 
 .tlui-shortcuts-dialog__group {

packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx

@@ -1,4 +1,7 @@
+import classNames from 'classnames'
 import { memo } from 'react'
+import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { useBreakpoint } from '../../context/breakpoints'
 import { TLUiDialogProps } from '../../context/dialogs'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import {
@@ -20,6 +23,7 @@ export const DefaultKeyboardShortcutsDialog = memo(function DefaultKeyboardShort
 	children,
 }: TLUiKeyboardShortcutsDialogProps) {
 	const msg = useTranslation()
+	const breakpoint = useBreakpoint()
 
 	const content = children ?? <DefaultKeyboardShortcutsDialogContent />
 
@@ -29,7 +33,12 @@ export const DefaultKeyboardShortcutsDialog = memo(function DefaultKeyboardShort
 				<TldrawUiDialogTitle>{msg('shortcuts-dialog.title')}</TldrawUiDialogTitle>
 				<TldrawUiDialogCloseButton />
 			</TldrawUiDialogHeader>
-			<TldrawUiDialogBody className="tlui-shortcuts-dialog__body">
+			<TldrawUiDialogBody
+				className={classNames('tlui-shortcuts-dialog__body', {
+					'tlui-shortcuts-dialog__body__mobile': breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS,
+					'tlui-shortcuts-dialog__body__tablet': breakpoint <= PORTRAIT_BREAKPOINT.TABLET,
+				})}
+			>
 				<TldrawUiMenuContextProvider type="keyboard-shortcuts" sourceId="kbd">
 					{content}
 				</TldrawUiMenuContextProvider>

packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx

@@ -5,12 +5,13 @@ import { kbd } from '../../kbd-utils'
 /** @public */
 export interface TLUiKbdProps {
 	children: string
+	visibleOnMobileLayout?: boolean
 }
 
 /** @public */
-export function TldrawUiKbd({ children }: TLUiKbdProps) {
+export function TldrawUiKbd({ children, visibleOnMobileLayout = false }: TLUiKbdProps) {
 	const breakpoint = useBreakpoint()
-	if (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) return null
+	if (!visibleOnMobileLayout && breakpoint < PORTRAIT_BREAKPOINT.MOBILE) return null
 	return (
 		<kbd className="tlui-kbd">
 			{kbd(children).map((k, i) => (

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -183,7 +183,7 @@ export function TldrawUiMenuItem<
 				<div className="tlui-shortcuts-dialog__key-pair" data-testid={`${sourceId}.${id}`}>
 					<div className="tlui-shortcuts-dialog__key-pair__key">{labelStr}</div>
 					<div className="tlui-shortcuts-dialog__key-pair__value">
-						<TldrawUiKbd>{kbd}</TldrawUiKbd>
+						<TldrawUiKbd visibleOnMobileLayout>{kbd}</TldrawUiKbd>
 					</div>
 				</div>
 			)