self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-07-16 00:14:34 +02:00
Code Issues Releases Activity

Mobile: Editor: Switch to a scrolling toolbar, allow adding/removing toolbar items (#11472)

Browse Source
This commit is contained in:
Henry Heino
2024-12-11 04:31:05 -08:00
committed by GitHub
parent 5d84f80ad1
commit d935a491ba
65 changed files with 1326 additions and 1154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
packages/app-mobile/components/NoteEditor/NoteEditor.tsx
View File

@ -16,7 +16,6 @@ import { editorFont } from '../global-style';
import { EditorControl as EditorBodyControl, ContentScriptData } from '@joplin/editor/types';
import { EditorControl, EditorSettings, SelectionRange, WebViewToEditorApi } from './types';
import { _ } from '@joplin/lib/locale';
import MarkdownToolbar from './MarkdownToolbar/MarkdownToolbar';
import { ChangeEvent, EditorEvent, EditorEventType, SelectionRangeChangeEvent, UndoRedoDepthChangeEvent } from '@joplin/editor/events';
import { EditorCommandType, EditorKeymap, EditorLanguageType, SearchState } from '@joplin/editor/types';
import SelectionFormatting, { defaultSelectionFormatting } from '@joplin/editor/SelectionFormatting';
@ -30,6 +29,7 @@ import { OnMessageEvent } from '../ExtendedWebView/types';
import { join, dirname } from 'path';
import * as mimeUtils from '@joplin/lib/mime-utils';
import uuid from '@joplin/lib/uuid';
import EditorToolbar from '../EditorToolbar/EditorToolbar';
type ChangeEventHandler = (event: ChangeEvent)=> void;
type UndoRedoDepthChangeHandler = (event: UndoRedoDepthChangeEvent)=> void;
@ -184,7 +184,7 @@ const useEditorControl = (
setSearchState: OnSearchStateChangeCallback,
): EditorControl => {
return useMemo(() => {
const execCommand = (command: EditorCommandType) => {
const execEditorCommand = (command: EditorCommandType) => {
void bodyControl.execCommand(command);
};
@ -229,25 +229,25 @@ const useEditorControl = (
},
toggleBolded() {
execCommand(EditorCommandType.ToggleBolded);
execEditorCommand(EditorCommandType.ToggleBolded);
},
toggleItalicized() {
execCommand(EditorCommandType.ToggleItalicized);
execEditorCommand(EditorCommandType.ToggleItalicized);
},
toggleOrderedList() {
execCommand(EditorCommandType.ToggleNumberedList);
execEditorCommand(EditorCommandType.ToggleNumberedList);
},
toggleUnorderedList() {
execCommand(EditorCommandType.ToggleBulletedList);
execEditorCommand(EditorCommandType.ToggleBulletedList);
},
toggleTaskList() {
execCommand(EditorCommandType.ToggleCheckList);
execEditorCommand(EditorCommandType.ToggleCheckList);
},
toggleCode() {
execCommand(EditorCommandType.ToggleCode);
execEditorCommand(EditorCommandType.ToggleCode);
},
toggleMath() {
execCommand(EditorCommandType.ToggleMath);
execEditorCommand(EditorCommandType.ToggleMath);
},
toggleHeaderLevel(level: number) {
const levelToCommand = [
@ -264,19 +264,19 @@ const useEditorControl = (
throw new Error(`Unsupported header level ${level}`);
}
execCommand(levelToCommand[index]);
execEditorCommand(levelToCommand[index]);
},
increaseIndent() {
execCommand(EditorCommandType.IndentMore);
execEditorCommand(EditorCommandType.IndentMore);
},
decreaseIndent() {
execCommand(EditorCommandType.IndentLess);
execEditorCommand(EditorCommandType.IndentLess);
},
updateLink(label: string, url: string) {
bodyControl.updateLink(label, url);
},
scrollSelectionIntoView() {
execCommand(EditorCommandType.ScrollSelectionIntoView);
execEditorCommand(EditorCommandType.ScrollSelectionIntoView);
},
showLinkDialog() {
setLinkDialogVisible(true);
@ -296,23 +296,23 @@ const useEditorControl = (
searchControl: {
findNext() {
execCommand(EditorCommandType.FindNext);
execEditorCommand(EditorCommandType.FindNext);
},
findPrevious() {
execCommand(EditorCommandType.FindPrevious);
execEditorCommand(EditorCommandType.FindPrevious);
},
replaceNext() {
execCommand(EditorCommandType.ReplaceNext);
execEditorCommand(EditorCommandType.ReplaceNext);
},
replaceAll() {
execCommand(EditorCommandType.ReplaceAll);
execEditorCommand(EditorCommandType.ReplaceAll);
},
showSearch() {
execCommand(EditorCommandType.ShowSearch);
execEditorCommand(EditorCommandType.ShowSearch);
},
hideSearch() {
execCommand(EditorCommandType.HideSearch);
execEditorCommand(EditorCommandType.HideSearch);
},
setSearchState: setSearchStateCallback,
@ -535,20 +535,12 @@ function NoteEditor(props: Props, ref: any) {
}
}, []);
const toolbar = <MarkdownToolbar
style={{
// Don't show the markdown toolbar if there isn't enough space
// for it:
flexShrink: 1,
}}
editorSettings={editorSettings}
editorControl={editorControl}
selectionState={selectionState}
searchState={searchState}
pluginStates={props.plugins}
onAttach={props.onAttach}
readOnly={props.readOnly}
/>;
const toolbarEditorState = useMemo(() => ({
selectionState,
searchVisible: searchState.dialogVisible,
}), [selectionState, searchState.dialogVisible]);
const toolbar = <EditorToolbar editorState={toolbarEditorState} />;
return (
<View