yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-12-25 14:14:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add shortcut to create Inline Math Equation (#7401)

Browse Source 
* fix: add shortcut to create Math Equation(#7331)

* chore: update code

Co-authored-by: Lucas <lucas.xu@appflowy.io>

---------

Co-authored-by: Lucas <lucas.xu@appflowy.io>
This commit is contained in:
Morn 2025-02-26 10:06:28 +08:00 committed by GitHub
parent 7eaafc52ce
commit c5fa9039b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 142 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/appflowy_flutter/integration_test/desktop/document/document_alignment_test.dart
View File

@ -75,7 +75,7 @@ void main() {
[
LogicalKeyboardKey.control,
LogicalKeyboardKey.shift,
LogicalKeyboardKey.keyE,
LogicalKeyboardKey.keyC,
],
tester: tester,
withKeyUp: true,

51
frontend/appflowy_flutter/integration_test/desktop/document/document_with_inline_math_equation_test.dart
View File

@ -4,6 +4,7 @@ import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
@ -163,5 +164,55 @@ void main() {
lessThan(5),
);
});
testWidgets('insert inline math equation by shortcut', (tester) async {
await tester.initializeAppFlowy();
await tester.tapAnonymousSignInButton();
// create a new document
await tester.createNewPageWithNameUnderParent(
name: 'insert inline math equation by shortcut',
);
// tap the first line of the document
await tester.editor.tapLineOfEditorAt(0);
// insert a inline page
const formula = 'E = MC ^ 2';
await tester.ime.insertText(formula);
await tester.editor.updateSelection(
Selection.single(path: [0], startOffset: 0, endOffset: formula.length),
);
// mock key event
await tester.simulateKeyEvent(
LogicalKeyboardKey.keyE,
isShiftPressed: true,
isControlPressed: true,
);
// expect to see the math equation block
final inlineMathEquation = find.byType(InlineMathEquation);
expect(inlineMathEquation, findsOneWidget);
await tester.editor.tapLineOfEditorAt(0);
const text = 'Hello World';
await tester.ime.insertText(text);
final inlineText = find.textContaining(text, findRichText: true);
expect(inlineText, findsOneWidget);
// the text should be in the same line with the math equation
final inlineMathEquationPosition = tester.getRect(inlineMathEquation);
final textPosition = tester.getRect(inlineText);
// allow 5px difference
expect(
(textPosition.top - inlineMathEquationPosition.top).abs(),
lessThan(5),
);
expect(
(textPosition.bottom - inlineMathEquationPosition.bottom).abs(),
lessThan(5),
);
});
});
}

9
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/align_toolbar_item/custom_text_align_command.dart
View File

@ -1,9 +1,8 @@
import 'package:flutter/material.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
final List<CommandShortcutEvent> customTextAlignCommands = [
customTextLeftAlignCommand,
@ -26,8 +25,8 @@ final CommandShortcutEvent customTextLeftAlignCommand = CommandShortcutEvent(
handler: (editorState) => _textAlignHandler(editorState, leftAlignmentKey),
);
/// Windows / Linux : ctrl + shift + e
/// macOS : ctrl + shift + e
/// Windows / Linux : ctrl + shift + c
/// macOS : ctrl + shift + c
/// Allows the user to align text to the center
///
/// - support
@ -36,7 +35,7 @@ final CommandShortcutEvent customTextLeftAlignCommand = CommandShortcutEvent(
///
final CommandShortcutEvent customTextCenterAlignCommand = CommandShortcutEvent(
key: 'Align text to the center',
command: 'ctrl+shift+e',
command: 'ctrl+shift+c',
getDescription: LocaleKeys.settings_shortcutsPage_commands_textAlignCenter.tr,
handler: (editorState) => _textAlignHandler(editorState, centerAlignmentKey),
);

74
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/math_equation/math_equation_shortcut.dart Normal file
View File

@ -0,0 +1,74 @@
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
/// Windows / Linux : ctrl + shift + e
/// macOS : cmd + shift + e
/// Allows the user to insert math equation by shortcut
///
/// - support
/// - desktop
/// - web
///
final CommandShortcutEvent insertInlineMathEquationCommand =
CommandShortcutEvent(
key: 'Insert inline math equation',
command: 'ctrl+shift+e',
macOSCommand: 'cmd+shift+e',
getDescription: LocaleKeys.document_plugins_mathEquation_name.tr,
handler: (editorState) {
final selection = editorState.selection;
if (selection == null || selection.isCollapsed || !selection.isSingle) {
return KeyEventResult.ignored;
}
final node = editorState.getNodeAtPath(selection.start.path);
final delta = node?.delta;
if (node == null || delta == null) {
return KeyEventResult.ignored;
}
if (node.delta == null || !toolbarItemWhiteList.contains(node.type)) {
return KeyEventResult.ignored;
}
final transaction = editorState.transaction;
final nodes = editorState.getNodesInSelection(selection);
final isHighlight = nodes.allSatisfyInSelection(selection, (delta) {
return delta.everyAttributes(
(attributes) => attributes[InlineMathEquationKeys.formula] != null,
);
});
if (isHighlight) {
final formula = delta
.slice(selection.startIndex, selection.endIndex)
.whereType<TextInsert>()
.firstOrNull
?.attributes?[InlineMathEquationKeys.formula];
assert(formula != null);
if (formula == null) {
return KeyEventResult.ignored;
}
// clear the format
transaction.replaceText(
node,
selection.startIndex,
selection.length,
formula,
attributes: {},
);
} else {
final text = editorState.getTextInSelection(selection).join();
transaction.replaceText(
node,
selection.startIndex,
selection.length,
MentionBlockKeys.mentionChar,
attributes: {
InlineMathEquationKeys.formula: text,
},
);
}
editorState.apply(transaction);
return KeyEventResult.handled;
},
);

2
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/shortcuts/command_shortcuts.dart
View File

@ -1,5 +1,6 @@
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/align_toolbar_item/custom_text_align_command.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/math_equation/math_equation_shortcut.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/shortcuts/custom_delete_command.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/undo_redo/custom_undo_redo_commands.dart';
@ -39,6 +40,7 @@ List<CommandShortcutEvent> commandShortcutEvents = [
...customTextAlignCommands,
customDeleteCommand,
insertInlineMathEquationCommand,
// remove standard shortcuts for copy, cut, paste, todo
...standardCommandShortcutEvents

4
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart
View File

@ -494,6 +494,10 @@ class EditorStyleCustomizer {
'italic': (LocaleKeys.toolbar_italic.tr(), 'I'),
'strikethrough': (LocaleKeys.toolbar_strike.tr(), 'Shift+S'),
'code': (LocaleKeys.toolbar_inlineCode.tr(), 'E'),
'editor.inline_math_equation': (
LocaleKeys.document_plugins_createInlineMathEquation.tr(),
'Shift+E'
),
};
final markdownItemIds = markdownItemTooltips.keys.toSet();

5
frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_shortcuts_view.dart
View File

@ -5,6 +5,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/base/strin
import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/custom_copy_command.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/custom_cut_command.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/custom_paste_command.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/math_equation/math_equation_shortcut.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/toggle/toggle_block_shortcuts.dart';
import 'package:appflowy/workspace/application/settings/shortcuts/settings_shortcuts_cubit.dart';
import 'package:appflowy/workspace/application/settings/shortcuts/settings_shortcuts_service.dart';
@ -597,6 +598,10 @@ extension CommandLabel on CommandShortcutEvent {
label = LocaleKeys.settings_shortcutsPage_keybindings_alignCenter.tr();
} else if (key == customTextRightAlignCommand.key) {
label = LocaleKeys.settings_shortcutsPage_keybindings_alignRight.tr();
} else if (key == insertInlineMathEquationCommand.key) {
label = LocaleKeys
.settings_shortcutsPage_keybindings_insertInlineMathEquation
.tr();
} else if (key == undoCommand.key) {
label = LocaleKeys.settings_shortcutsPage_keybindings_undo.tr();
} else if (key == redoCommand.key) {

1
frontend/resources/translations/en.json
View File

@ -759,6 +759,7 @@
"alignLeft": "Align text left",
"alignCenter": "Align text center",
"alignRight": "Align text right",
"insertInlineMathEquation": "Insert inline math eqaution",
"undo": "Undo",
"redo": "Redo",
"convertToParagraph": "Convert block to paragraph",