Make the custom menu examples a bit clearer (#3106)

Use the Readme and bg color of elements to make it clearer which menu is
being customised.

- [x] `documentation` — Changes to the documentation only[^2]

### Release Notes

- Add a brief release note for your PR here.

apps/examples/src/examples/custom-actions-menu/CustomActionsMenuExample.tsx

@@ -1,10 +1,29 @@
-import { DefaultActionsMenu, TLComponents, Tldraw } from 'tldraw'
+import {
+	DefaultActionsMenu,
+	DefaultActionsMenuContent,
+	TLComponents,
+	Tldraw,
+	TldrawUiMenuItem,
+} from 'tldraw'
 import 'tldraw/tldraw.css'
 
 function CustomActionsMenu() {
 	return (
-		<div style={{ transform: 'rotate(90deg)' }}>
+		<div style={{ backgroundColor: 'thistle' }}>
-			<DefaultActionsMenu />
+			<DefaultActionsMenu>
+				<div style={{ backgroundColor: 'thistle' }}>
+					<TldrawUiMenuItem
+						id="like"
+						label="Like my posts"
+						icon="external-link"
+						readonlyOk
+						onSelect={() => {
+							window.open('https://x.com/tldraw', '_blank')
+						}}
+					/>
+				</div>
+				<DefaultActionsMenuContent />
+			</DefaultActionsMenu>
 		</div>
 	)
 }

apps/examples/src/examples/custom-actions-menu/README.md

@@ -8,4 +8,4 @@ You can customize tldraw's actions menu.
 
 ---
 
-The actions menu can be customized by providing a `ActionsMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
+The actions menu is a dropdown menu that can be found in the top-left of the tldraw component, or just above the toolbar on smaller screens. It contains actions related to editing shapes such as grouping, rotating or changing shape order. The actions menu can be customized by providing a `ActionsMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.

apps/examples/src/examples/custom-context-menu/CustomContextMenuExample.tsx

@@ -13,6 +13,7 @@ function CustomContextMenu(props: TLUiContextMenuProps) {
 	return (
 		<DefaultContextMenu {...props}>
 			<TldrawUiMenuGroup id="example">
+				<div style={{ backgroundColor: 'thistle' }}>
 					<TldrawUiMenuItem
 						id="like"
 						label="Like my posts"
@@ -22,6 +23,7 @@ function CustomContextMenu(props: TLUiContextMenuProps) {
 							window.open('https://x.com/tldraw', '_blank')
 						}}
 					/>
+				</div>
 			</TldrawUiMenuGroup>
 			<DefaultContextMenuContent />
 		</DefaultContextMenu>

apps/examples/src/examples/custom-context-menu/README.md

@@ -8,4 +8,4 @@ You can customize tldraw's context menu.
 
 ---
 
-The context menu can be customized by providing a `ContextMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
+Create some shapes, select them and right click the selection to see the custom context menu. It can be customized by providing a `ContextMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.

apps/examples/src/examples/custom-debug-menu/CustomDebugMenuExample.tsx

@@ -10,8 +10,10 @@ import 'tldraw/tldraw.css'
 
 function CustomDebugMenu() {
 	return (
+		<div style={{ backgroundColor: 'thistle' }}>
 			<DefaultDebugMenu>
 				<DefaultDebugMenuContent />
+				<div style={{ backgroundColor: 'thistle' }}>
 					<TldrawUiMenuGroup id="example">
 						<TldrawUiMenuItem
 							id="like"
@@ -23,7 +25,9 @@ function CustomDebugMenu() {
 							}}
 						/>
 					</TldrawUiMenuGroup>
+				</div>
 			</DefaultDebugMenu>
+		</div>
 	)
 }
 

apps/examples/src/examples/custom-debug-menu/README.md

@@ -8,4 +8,4 @@ You can customize tldraw's debug menu.
 
 ---
 
-The help menu can be customized by providing a `DebugMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
+The debug menu contains helpful menu items for debugging the tldraw component. To show the debug menu, turn on debug mode in the preferences. It can be customized by providing a `DebugMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.

apps/examples/src/examples/custom-help-menu/CustomHelpMenuExample.tsx

@@ -11,6 +11,7 @@ import 'tldraw/tldraw.css'
 function CustomHelpMenu() {
 	return (
 		<DefaultHelpMenu>
+			<div style={{ backgroundColor: 'thistle' }}>
 				<TldrawUiMenuGroup id="example">
 					<TldrawUiMenuItem
 						id="like"
@@ -22,6 +23,7 @@ function CustomHelpMenu() {
 						}}
 					/>
 				</TldrawUiMenuGroup>
+			</div>
 			<DefaultHelpMenuContent />
 		</DefaultHelpMenu>
 	)

apps/examples/src/examples/custom-help-menu/README.md

@@ -8,4 +8,4 @@ You can customize tldraw's help menu.
 
 ---
 
-The help menu can be customized by providing a `HelpMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
+The help menu contains options for opening the keyboard shortcuts dialog and changing the language. It can be opened by clicking on the help icon in the bottom right of the screen at larger breakpoints. The help menu can be customized by providing a `HelpMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.

apps/examples/src/examples/custom-keyboard-shortcuts-dialog/CustomKeyboardShortcutsDialogExample.tsx

@@ -11,6 +11,7 @@ import 'tldraw/tldraw.css'
 function CustomKeyboardShortcutsDialog(props: TLUiKeyboardShortcutsDialogProps) {
 	return (
 		<DefaultKeyboardShortcutsDialog {...props}>
+			<div style={{ backgroundColor: 'thistle' }}>
 				<TldrawUiMenuItem
 					id="like-my-posts"
 					label="Like my posts"
@@ -21,6 +22,7 @@ function CustomKeyboardShortcutsDialog(props: TLUiKeyboardShortcutsDialogProps)
 						window.open('https://x.com/tldraw', '_blank')
 					}}
 				/>
+			</div>
 			<DefaultKeyboardShortcutsDialogContent />
 		</DefaultKeyboardShortcutsDialog>
 	)

apps/examples/src/examples/custom-keyboard-shortcuts-dialog/README.md

@@ -8,4 +8,4 @@ You can customize tldraw's keyboard shortcuts dialog.
 
 ---
 
-The keyboard shortcuts dialog can be customized by providing a `KeyboardShortcutsDialog` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
+The keyboard shortcuts dialog can be opened via the help menu in the bottom right corner of the tldraw component. It can be customized by providing a `KeyboardShortcutsDialog` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.

apps/examples/src/examples/custom-main-menu/CustomMainMenuExample.tsx

@@ -11,6 +11,7 @@ import 'tldraw/tldraw.css'
 function CustomMainMenu() {
 	return (
 		<DefaultMainMenu>
+			<div style={{ backgroundColor: 'thistle' }}>
 				<TldrawUiMenuGroup id="example">
 					<TldrawUiMenuItem
 						id="like"
@@ -22,6 +23,7 @@ function CustomMainMenu() {
 						}}
 					/>
 				</TldrawUiMenuGroup>
+			</div>
 			<DefaultMainMenuContent />
 		</DefaultMainMenu>
 	)

apps/examples/src/examples/custom-main-menu/README.md

@@ -8,4 +8,4 @@ You can customize tldraw's main menu.
 
 ---
 
-The actions menu can be customized by providing a `MainMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
+The main menu contains important submenus: Edit, Shape, Preferences etc. To open the main menu, click the hamburger icon in the top left corner of the tldraw component. It can be customized by providing a `MainMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.

apps/examples/src/examples/custom-navigation-panel/CustomNavigationPanelExample.tsx

@@ -2,7 +2,7 @@ import { TLComponents, Tldraw } from 'tldraw'
 import 'tldraw/tldraw.css'
 
 function CustomNavigationPanel() {
-	return <div className="tlui-navigation-panel">here you are</div>
+	return <div style={{ backgroundColor: 'thistle', padding: '14px' }}>here you are</div>
 }
 
 const components: TLComponents = {

apps/examples/src/examples/custom-navigation-panel/README.md

@@ -8,4 +8,4 @@ You can customize tldraw's navigation panel or remove it entirely.
 
 ---
 
-The navigation panel can be customized by providing a `NavigationPanel` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
+The navigation panel is in the bottom left of the tldraw component at larger breakpoints. It contains zoom controls and a mini map. It can be customized by providing a `NavigationPanel` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.

apps/examples/src/examples/custom-page-menu/CustomPageMenuExample.tsx

@@ -3,7 +3,7 @@ import 'tldraw/tldraw.css'
 
 function CustomPageMenu() {
 	return (
-		<div style={{ transform: 'rotate(3.14rad)' }}>
+		<div style={{ transform: 'rotate(3.14rad)', backgroundColor: 'thistle' }}>
 			<DefaultPageMenu />
 		</div>
 	)

apps/examples/src/examples/custom-page-menu/README.md

@@ -8,4 +8,4 @@ You can customize tldraw's page menu, or remove it entirely.
 
 ---
 
-The page menu can be customized by providing a `PageMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.
+The page menu contains options for creating and editing pages. To open the page menu, click the page name in the top left of the tldraw component. It can be customized by providing a `PageMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden.

apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx

@@ -11,7 +11,9 @@ function CustomQuickActions() {
 	return (
 		<DefaultQuickActions>
 			<DefaultQuickActionsContent />
+			<div style={{ backgroundColor: 'thistle' }}>
 				<TldrawUiMenuItem id="code" icon="code" onSelect={() => window.alert('code')} />
+			</div>
 		</DefaultQuickActions>
 	)
 }

apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx

@@ -21,6 +21,7 @@ function CustomStylePanel(props: TLUiStylePanelProps) {
 
 	return (
 		<DefaultStylePanel {...props}>
+			<div style={{ backgroundColor: 'thistle' }}>
 				<TldrawUiButton
 					type="menu"
 					onClick={() => {
@@ -29,6 +30,8 @@ function CustomStylePanel(props: TLUiStylePanelProps) {
 				>
 					<TldrawUiButtonLabel>Red</TldrawUiButtonLabel>
 				</TldrawUiButton>
+			</div>
+			<div style={{ backgroundColor: 'thistle' }}>
 				<TldrawUiButton
 					type="menu"
 					onClick={() => {
@@ -37,6 +40,7 @@ function CustomStylePanel(props: TLUiStylePanelProps) {
 				>
 					<TldrawUiButtonLabel>Green</TldrawUiButtonLabel>
 				</TldrawUiButton>
+			</div>
 			<DefaultStylePanelContent styles={styles} />
 		</DefaultStylePanel>
 	)

apps/examples/src/examples/custom-zoom-menu/CustomZoomMenuExample.tsx

@@ -11,6 +11,7 @@ import 'tldraw/tldraw.css'
 function CustomZoomMenu() {
 	return (
 		<DefaultZoomMenu>
+			<div style={{ backgroundColor: 'thistle' }}>
 				<TldrawUiMenuGroup id="example">
 					<TldrawUiMenuItem
 						id="like"
@@ -22,6 +23,7 @@ function CustomZoomMenu() {
 						}}
 					/>
 				</TldrawUiMenuGroup>
+			</div>
 			<DefaultZoomMenuContent />
 		</DefaultZoomMenu>
 	)

apps/examples/src/examples/custom-zoom-menu/README.md

@@ -8,4 +8,4 @@ You can customize tldraw's zoom menu.
 
 ---
 
-The zoom menu can be customized by providing a `ZoomMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.
+The zoom menu is in the bottom left of the tldraw component, the button to open it is labeled with a percentage indicating the editor's current zoom level. It can be customized by providing a `ZoomMenu` component to the `Tldraw` component's `components` prop. If you provide `null`, then that component will be hidden instead.