From 81f3a02dba009259ee1449e86124ca56bb6f9958 Mon Sep 17 00:00:00 2001 From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com> Date: Fri, 13 Dec 2024 04:55:37 -0800 Subject: [PATCH] Mobile: Plugin API: Implement the `toggleVisiblePanes` command (#11496) --- .eslintignore | 1 + .gitignore | 1 + .../components/screens/Note/Note.test.tsx | 27 ++++++++++++++++--- .../components/screens/Note/Note.tsx | 8 ++++-- .../components/screens/Note/commands/index.ts | 2 ++ .../Note/commands/toggleVisiblePanes.ts | 18 +++++++++++++ .../components/screens/Note/types.ts | 5 ++++ 7 files changed, 57 insertions(+), 5 deletions(-) create mode 100644 packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.ts diff --git a/.eslintignore b/.eslintignore index b99d01f32..c78c41902 100644 --- a/.eslintignore +++ b/.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 diff --git a/.gitignore b/.gitignore index dcd9c3f10..aac04cbea 100644 --- a/.gitignore +++ b/.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 diff --git a/packages/app-mobile/components/screens/Note/Note.test.tsx b/packages/app-mobile/components/screens/Note/Note.test.tsx index 19b93be95..cdd7f9967 100644 --- a/packages/app-mobile/components/screens/Note/Note.test.tsx +++ b/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(() => { - expect(screen.queryByLabelText('Edit')).toBeNull(); - }); + await expectToBeEditing(true); }; 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(); + + await expectToBeEditing(false); + await CommandService.instance().execute('toggleVisiblePanes'); + await expectToBeEditing(true); + await CommandService.instance().execute('toggleVisiblePanes'); + await expectToBeEditing(false); + }); }); diff --git a/packages/app-mobile/components/screens/Note/Note.tsx b/packages/app-mobile/components/screens/Note/Note.tsx index d89dc6a0e..ff82af497 100644 --- a/packages/app-mobile/components/screens/Note/Note.tsx +++ b/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 imp this.setState({ noteTagDialogShown: visible }); }, + getMode: () => this.state.mode, + setMode: (mode: 'view'|'edit') => { + this.setState({ mode }); + }, }, commands, true, diff --git a/packages/app-mobile/components/screens/Note/commands/index.ts b/packages/app-mobile/components/screens/Note/commands/index.ts index b9b0d33db..201282ce4 100644 --- a/packages/app-mobile/components/screens/Note/commands/index.ts +++ b/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; diff --git a/packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.ts b/packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.ts new file mode 100644 index 000000000..3143b94d3 --- /dev/null +++ b/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); + }, + }; +}; diff --git a/packages/app-mobile/components/screens/Note/types.ts b/packages/app-mobile/components/screens/Note/types.ts index becba7fba..6fd44e6bb 100644 --- a/packages/app-mobile/components/screens/Note/types.ts +++ b/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; hideKeyboard(): void; insertText(text: string): void; + + getMode(): EditorMode; + setMode(mode: EditorMode): void; setCameraVisible(visible: boolean): void; setTagDialogVisible(visible: boolean): void; dialogs: DialogControl;