Mobile: Plugin API: Implement the toggleVisiblePanes command (#11496)

.eslintignore

@@ -757,6 +757,7 @@ packages/app-mobile/components/screens/Note/commands/attachFile.js
 packages/app-mobile/components/screens/Note/commands/hideKeyboard.js
 packages/app-mobile/components/screens/Note/commands/index.js
 packages/app-mobile/components/screens/Note/commands/setTags.js
+packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.js
 packages/app-mobile/components/screens/Note/types.js
 packages/app-mobile/components/screens/NoteTagsDialog.js
 packages/app-mobile/components/screens/Notes.js

.gitignore

@@ -733,6 +733,7 @@ packages/app-mobile/components/screens/Note/commands/attachFile.js
 packages/app-mobile/components/screens/Note/commands/hideKeyboard.js
 packages/app-mobile/components/screens/Note/commands/index.js
 packages/app-mobile/components/screens/Note/commands/setTags.js
+packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.js
 packages/app-mobile/components/screens/Note/types.js
 packages/app-mobile/components/screens/NoteTagsDialog.js
 packages/app-mobile/components/screens/Notes.js

packages/app-mobile/components/screens/Note/Note.test.tsx

@@ -27,6 +27,7 @@ import Setting from '@joplin/lib/models/Setting';
 import Resource from '@joplin/lib/models/Resource';
 import TestProviderStack from '../../testing/TestProviderStack';
 import setupGlobalStore from '../../../utils/testing/setupGlobalStore';
+import CommandService from '@joplin/lib/services/CommandService';
 
 interface WrapperProps {
 }
@@ -122,13 +123,22 @@ const openNoteActionsMenu = async () => {
 	});
 };
 
+const expectToBeEditing = async (editing: boolean) => {
+	await waitFor(() => {
+		const editButton = screen.queryByLabelText('Edit');
+		if (editing) {
+			expect(editButton).toBeNull();
+		} else {
+			expect(editButton).not.toBeNull();
+		}
+	});
+};
+
 const openEditor = async () => {
 	const editButton = await screen.findByLabelText('Edit');
 
 	fireEvent.press(editButton);
-	await waitFor(() => {
+	await expectToBeEditing(true);
-		expect(screen.queryByLabelText('Edit')).toBeNull();
-	});
 };
 
 describe('screens/Note', () => {
@@ -325,4 +335,15 @@ describe('screens/Note', () => {
 			}
 		});
 	});
+
+	it('the toggleVisiblePanes command should start and stop editing', async () => {
+		await openNewNote({ title: 'To be edited', body: '...' });
+		render(<WrappedNoteScreen />);
+
+		await expectToBeEditing(false);
+		await CommandService.instance().execute('toggleVisiblePanes');
+		await expectToBeEditing(true);
+		await CommandService.instance().execute('toggleVisiblePanes');
+		await expectToBeEditing(false);
+	});
 });

packages/app-mobile/components/screens/Note/Note.tsx

@@ -60,7 +60,7 @@ import getImageDimensions from '../../../utils/image/getImageDimensions';
 import resizeImage from '../../../utils/image/resizeImage';
 import { CameraResult } from '../../CameraView/types';
 import { DialogContext, DialogControl } from '../../DialogManager';
-import { CommandRuntimeProps, PickerResponse } from './types';
+import { CommandRuntimeProps, EditorMode, PickerResponse } from './types';
 import commands from './commands';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
@@ -91,7 +91,7 @@ interface ComponentProps extends Props {
 
 interface State {
 	note: NoteEntity;
-	mode: 'view'|'edit';
+	mode: EditorMode;
 	readOnly: boolean;
 	folder: FolderEntity|null;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
@@ -340,6 +340,10 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 
 					this.setState({ noteTagDialogShown: visible });
 				},
+				getMode: () => this.state.mode,
+				setMode: (mode: 'view'|'edit') => {
+					this.setState({ mode });
+				},
 			},
 			commands,
 			true,

packages/app-mobile/components/screens/Note/commands/index.ts

@@ -2,11 +2,13 @@
 import * as attachFile from './attachFile';
 import * as hideKeyboard from './hideKeyboard';
 import * as setTags from './setTags';
+import * as toggleVisiblePanes from './toggleVisiblePanes';
 
 const index: any[] = [
 	attachFile,
 	hideKeyboard,
 	setTags,
+	toggleVisiblePanes,
 ];
 
 export default index;

packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.ts

@@ -0,0 +1,18 @@
+import { CommandContext, CommandDeclaration, CommandRuntime } from '@joplin/lib/services/CommandService';
+import { CommandRuntimeProps } from '../types';
+
+export const declaration: CommandDeclaration = {
+	// For compatibility with the desktop app, this command is called "toggleVisiblePanes".
+	name: 'toggleVisiblePanes',
+	label: () => 'Start/stop editing',
+};
+
+export const runtime = (props: CommandRuntimeProps): CommandRuntime => {
+	return {
+		execute: async (_context: CommandContext) => {
+			// For now, the only two "panes" on mobile are view and edit.
+			const newMode = props.getMode() === 'edit' ? 'view' : 'edit';
+			props.setMode(newMode);
+		},
+	};
+};

packages/app-mobile/components/screens/Note/types.ts

@@ -7,10 +7,15 @@ export interface PickerResponse {
 	fileName?: string;
 }
 
+export type EditorMode = 'view'|'edit';
+
 export interface CommandRuntimeProps {
 	attachFile(pickerResponse: PickerResponse, fileType: string): Promise<ResourceEntity|null>;
 	hideKeyboard(): void;
 	insertText(text: string): void;
+
+	getMode(): EditorMode;
+	setMode(mode: EditorMode): void;
 	setCameraVisible(visible: boolean): void;
 	setTagDialogVisible(visible: boolean): void;
 	dialogs: DialogControl;