menu: export followup with different semantics for file menu (#2968)

Renamed Object → Shape
Different semantics for Export under file menu. Thanks @TodePond !

### Change Type

- [x] `patch` — Bug fix

apps/dotcom/src/components/LocalEditor.tsx

@@ -9,8 +9,8 @@ import {
 	EditSubmenu,
 	Editor,
 	ExtrasGroup,
-	ObjectSubmenu,
 	PreferencesGroup,
+	ShapeSubmenu,
 	TLComponents,
 	Tldraw,
 	TldrawUiMenuGroup,
@@ -49,7 +49,7 @@ const components: TLComponents = {
 		<DefaultMainMenu>
 			<LocalFileMenu />
 			<EditSubmenu />
-			<ObjectSubmenu />
+			<ShapeSubmenu />
 			<ViewSubmenu />
 			<ExtrasGroup />
 			<PreferencesGroup />

apps/dotcom/src/components/MultiplayerEditor.tsx

@@ -9,9 +9,9 @@ import {
 	EditSubmenu,
 	Editor,
 	ExtrasGroup,
-	ObjectSubmenu,
 	OfflineIndicator,
 	PreferencesGroup,
+	ShapeSubmenu,
 	TLComponents,
 	Tldraw,
 	TldrawUiMenuGroup,
@@ -69,7 +69,7 @@ const components: TLComponents = {
 		<DefaultMainMenu>
 			<MultiplayerFileMenu />
 			<EditSubmenu />
-			<ObjectSubmenu />
+			<ShapeSubmenu />
 			<ViewSubmenu />
 			<ExtrasGroup />
 			<PreferencesGroup />

assets/translations/main.json

@@ -36,6 +36,12 @@
 	"action.export-as-png": "Export as PNG",
 	"action.export-as-svg.short": "SVG",
 	"action.export-as-svg": "Export as SVG",
+	"action.export-all-as-json.short": "JSON",
+	"action.export-all-as-json": "Export all as JSON",
+	"action.export-all-as-png.short": "PNG",
+	"action.export-all-as-png": "Export all as PNG",
+	"action.export-all-as-svg.short": "SVG",
+	"action.export-all-as-svg": "Export all as SVG",
 	"action.fit-frame-to-content": "Fit to content",
 	"action.flip-horizontal": "Flip horizontally",
 	"action.flip-vertical": "Flip vertically",
@@ -215,7 +221,7 @@
 	"menu.title": "Menu",
 	"menu.copy-as": "Copy as",
 	"menu.edit": "Edit",
-	"menu.object": "Object",
+	"menu.shape": "Shape",
 	"menu.export-as": "Export as",
 	"menu.file": "File",
 	"menu.language": "Language",
@@ -224,6 +230,7 @@
 	"context-menu.arrange": "Arrange",
 	"context-menu.copy-as": "Copy as",
 	"context-menu.export-as": "Export as",
+	"context-menu.export-all-as": "Export all as",
 	"context-menu.move-to-page": "Move to page",
 	"context-menu.reorder": "Reorder",
 	"page-menu.title": "Pages",

packages/tldraw/src/index.ts

@@ -185,8 +185,8 @@ export {
 	EditSubmenu,
 	ExportFileContentSubMenu,
 	ExtrasGroup,
-	ObjectSubmenu,
 	PreferencesGroup,
+	ShapeSubmenu,
 	ViewSubmenu,
 } from './lib/ui/components/MainMenu/DefaultMainMenuContent'
 

packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx

@@ -37,7 +37,7 @@ export function DefaultMainMenuContent() {
 	return (
 		<>
 			<EditSubmenu />
-			<ObjectSubmenu />
+			<ShapeSubmenu />
 			<ViewSubmenu />
 			<ExtrasGroup />
 			<PreferencesGroup />
@@ -50,13 +50,13 @@ export function ExportFileContentSubMenu() {
 	const actions = useActions()
 
 	return (
-		<TldrawUiMenuSubmenu id="export-as" label="context-menu.export-as" size="small">
+		<TldrawUiMenuSubmenu id="export-all-as" label="context-menu.export-all-as" size="small">
-			<TldrawUiMenuGroup id="export-as-group">
+			<TldrawUiMenuGroup id="export-all-as-group">
-				<TldrawUiMenuItem {...actions['export-as-svg']} />
+				<TldrawUiMenuItem {...actions['export-all-as-svg']} />
-				<TldrawUiMenuItem {...actions['export-as-png']} />
+				<TldrawUiMenuItem {...actions['export-all-as-png']} />
-				<TldrawUiMenuItem {...actions['export-as-json']} />
+				<TldrawUiMenuItem {...actions['export-all-as-json']} />
 			</TldrawUiMenuGroup>
-			<TldrawUiMenuGroup id="export-as-bg">
+			<TldrawUiMenuGroup id="export-all-as-bg">
 				<ToggleTransparentBgMenuItem />
 			</TldrawUiMenuGroup>
 		</TldrawUiMenuSubmenu>
@@ -83,7 +83,7 @@ export function EditSubmenu() {
 }
 
 /** @public */
-export function ObjectSubmenu() {
+export function ShapeSubmenu() {
 	const editor = useEditor()
 
 	const selectToolActive = useValue(
@@ -93,7 +93,7 @@ export function ObjectSubmenu() {
 	)
 
 	return (
-		<TldrawUiMenuSubmenu id="object" label="menu.object" disabled={!selectToolActive}>
+		<TldrawUiMenuSubmenu id="shape" label="menu.shape" disabled={!selectToolActive}>
 			<ConversionsMenuGroup />
 			<MultiShapeMenuGroup />
 			<MiscMenuGroup />

packages/tldraw/src/lib/ui/components/menu-items.tsx

@@ -234,13 +234,8 @@ export function PasteMenuItem() {
 /* ------------------- Conversions ------------------ */
 
 export function ConversionsMenuGroup() {
-	const editor = useEditor()
 	const actions = useActions()
-	const atLeastOneShapeOnPage = useValue(
+	const shouldDisplay = useUnlockedSelectedShapesCount(1)
-		'atLeastOneShapeOnPage',
-		() => editor.getCurrentPageShapeIds().size > 0,
-		[]
-	)
 
 	return (
 		<TldrawUiMenuGroup id="conversions">
@@ -248,7 +243,7 @@ export function ConversionsMenuGroup() {
 				id="export-as"
 				label="context-menu.export-as"
 				size="small"
-				disabled={!atLeastOneShapeOnPage}
+				disabled={!shouldDisplay}
 			>
 				<TldrawUiMenuGroup id="export-as-group">
 					<TldrawUiMenuItem {...actions['export-as-svg']} />

packages/tldraw/src/lib/ui/context/actions.tsx

@@ -204,6 +204,57 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					exportAs(editor.getSelectedShapeIds(), 'json', getExportName(editor, defaultDocumentName))
 				},
 			},
+			{
+				id: 'export-all-as-svg',
+				label: {
+					default: 'action.export-all-as-svg',
+					menu: 'action.export-all-as-svg.short',
+					['context-menu']: 'action.export-all-as-svg.short',
+				},
+				readonlyOk: true,
+				onSelect(source) {
+					trackEvent('export-all-as', { format: 'svg', source })
+					exportAs(
+						Array.from(editor.getCurrentPageShapeIds()),
+						'svg',
+						getExportName(editor, defaultDocumentName)
+					)
+				},
+			},
+			{
+				id: 'export-all-as-png',
+				label: {
+					default: 'action.export-all-as-png',
+					menu: 'action.export-all-as-png.short',
+					['context-menu']: 'action.export-all-as-png.short',
+				},
+				readonlyOk: true,
+				onSelect(source) {
+					trackEvent('export-all-as', { format: 'png', source })
+					exportAs(
+						Array.from(editor.getCurrentPageShapeIds()),
+						'png',
+						getExportName(editor, defaultDocumentName)
+					)
+				},
+			},
+			{
+				id: 'export-all-as-json',
+				label: {
+					default: 'action.export-all-as-json',
+					menu: 'action.export-all-as-json.short',
+					['context-menu']: 'action.export-all-as-json.short',
+				},
+				readonlyOk: true,
+				onSelect(source) {
+					trackEvent('export-all-as', { format: 'json', source })
+					exportAs(
+						Array.from(editor.getCurrentPageShapeIds()),
+						'json',
+						getExportName(editor, defaultDocumentName)
+					)
+				},
+			},
 			{
 				id: 'copy-as-svg',
 				label: {

packages/tldraw/src/lib/ui/context/events.tsx

@@ -40,6 +40,7 @@ export interface TLUiEventMap {
 	'toggle-auto-size': null
 	'copy-as': { format: 'svg' | 'png' | 'json' }
 	'export-as': { format: 'svg' | 'png' | 'json' }
+	'export-all-as': { format: 'svg' | 'png' | 'json' }
 	'edit-link': null
 	'insert-embed': null
 	'insert-media': null

packages/tldraw/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -40,6 +40,12 @@ export type TLUiTranslationKey =
 	| 'action.export-as-png'
 	| 'action.export-as-svg.short'
 	| 'action.export-as-svg'
+	| 'action.export-all-as-json.short'
+	| 'action.export-all-as-json'
+	| 'action.export-all-as-png.short'
+	| 'action.export-all-as-png'
+	| 'action.export-all-as-svg.short'
+	| 'action.export-all-as-svg'
 	| 'action.fit-frame-to-content'
 	| 'action.flip-horizontal'
 	| 'action.flip-vertical'
@@ -219,7 +225,7 @@ export type TLUiTranslationKey =
 	| 'menu.title'
 	| 'menu.copy-as'
 	| 'menu.edit'
-	| 'menu.object'
+	| 'menu.shape'
 	| 'menu.export-as'
 	| 'menu.file'
 	| 'menu.language'
@@ -228,6 +234,7 @@ export type TLUiTranslationKey =
 	| 'context-menu.arrange'
 	| 'context-menu.copy-as'
 	| 'context-menu.export-as'
+	| 'context-menu.export-all-as'
 	| 'context-menu.move-to-page'
 	| 'context-menu.reorder'
 	| 'page-menu.title'

packages/tldraw/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -40,6 +40,12 @@ export const DEFAULT_TRANSLATION = {
 	'action.export-as-png': 'Export as PNG',
 	'action.export-as-svg.short': 'SVG',
 	'action.export-as-svg': 'Export as SVG',
+	'action.export-all-as-json.short': 'JSON',
+	'action.export-all-as-json': 'Export all as JSON',
+	'action.export-all-as-png.short': 'PNG',
+	'action.export-all-as-png': 'Export all as PNG',
+	'action.export-all-as-svg.short': 'SVG',
+	'action.export-all-as-svg': 'Export all as SVG',
 	'action.fit-frame-to-content': 'Fit to content',
 	'action.flip-horizontal': 'Flip horizontally',
 	'action.flip-vertical': 'Flip vertically',
@@ -219,7 +225,7 @@ export const DEFAULT_TRANSLATION = {
 	'menu.title': 'Menu',
 	'menu.copy-as': 'Copy as',
 	'menu.edit': 'Edit',
-	'menu.object': 'Object',
+	'menu.shape': 'Shape',
 	'menu.export-as': 'Export as',
 	'menu.file': 'File',
 	'menu.language': 'Language',
@@ -228,6 +234,7 @@ export const DEFAULT_TRANSLATION = {
 	'context-menu.arrange': 'Arrange',
 	'context-menu.copy-as': 'Copy as',
 	'context-menu.export-as': 'Export as',
+	'context-menu.export-all-as': 'Export all as',
 	'context-menu.move-to-page': 'Move to page',
 	'context-menu.reorder': 'Reorder',
 	'page-menu.title': 'Pages',