feat: integrate divider, code block, and math equation into appflowy

This commit is contained in:
Lucas.Xu 2022-12-01 19:26:00 +08:00
parent 4fa2d6dc2e
commit c6c164d347
5 changed files with 68 additions and 18 deletions

View File

@ -1,8 +1,8 @@
import 'package:app_flowy/plugins/document/editor_styles.dart';
import 'package:app_flowy/plugins/document/presentation/plugins/horizontal_rule_node_widget.dart';
import 'package:app_flowy/startup/startup.dart';
import 'package:app_flowy/plugins/document/presentation/banner.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
import 'package:flowy_infra_ui/widget/error_page.dart';
import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart';
import 'package:flutter/material.dart';
@ -101,10 +101,28 @@ class _DocumentPageState extends State<DocumentPage> {
editorState: editorState,
autoFocus: editorState.document.isEmpty,
customBuilders: {
'horizontal_rule': HorizontalRuleWidgetBuilder(),
// Divider
kDividerType: DividerWidgetBuilder(),
// Math Equation
kMathEquationType: MathEquationNodeWidgetBuidler(),
// Code Block
kCodeBlockType: CodeBlockNodeWidgetBuilder(),
},
shortcutEvents: [
insertHorizontalRule,
// Divider
insertDividerEvent,
// Code Block
enterInCodeBlock,
ignoreKeysInCodeBlock,
pasteInCodeBlock,
],
selectionMenuItems: [
// Divider
dividerMenuItem,
// Math Equation
mathEquationMenuItem,
// Code Block
codeBlockMenuItem,
],
themeData: theme.copyWith(extensions: [
...theme.extensions.values,

View File

@ -43,6 +43,7 @@ class __CodeBlockNodeWidgeState extends State<_CodeBlockNodeWidge>
with SelectableMixin, DefaultSelectable {
final _richTextKey = GlobalKey(debugLabel: kCodeBlockType);
final _padding = const EdgeInsets.only(left: 20, top: 30, bottom: 30);
bool _isHover = false;
String? get _language =>
widget.textNode.attributes[kCodeBlockAttrLanguage] as String?;
String? _detectLanguage;
@ -59,17 +60,24 @@ class __CodeBlockNodeWidgeState extends State<_CodeBlockNodeWidge>
@override
Widget build(BuildContext context) {
return Stack(
children: [
_buildCodeBlock(context),
_buildSwitchCodeButton(context),
_buildDeleteButton(context),
],
return InkWell(
onHover: (value) {
setState(() {
_isHover = value;
});
},
onTap: () {},
child: Stack(
children: [
_buildCodeBlock(context),
_buildSwitchCodeButton(context),
if (_isHover) _buildDeleteButton(context),
],
),
);
}
Widget _buildCodeBlock(BuildContext context) {
final plainText = widget.textNode.toPlainText();
final result = highlight.highlight.parse(
widget.textNode.toPlainText(),
language: _language,

View File

@ -168,9 +168,9 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> {
if (key is! RawKeyDownEvent) return;
if (key.logicalKey == LogicalKeyboardKey.enter &&
!key.isShiftPressed) {
_updateMathEquation(controller.text);
_updateMathEquation(controller.text, context);
} else if (key.logicalKey == LogicalKeyboardKey.escape) {
_dismiss();
_dismiss(context);
}
},
child: TextField(
@ -185,11 +185,11 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> {
),
actions: [
TextButton(
onPressed: () => _dismiss(),
onPressed: () => _dismiss(context),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => _updateMathEquation(controller.text),
onPressed: () => _updateMathEquation(controller.text, context),
child: const Text('Done'),
),
],
@ -198,9 +198,9 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> {
);
}
void _updateMathEquation(String mathEquation) {
_dismiss();
void _updateMathEquation(String mathEquation, BuildContext context) {
if (mathEquation == _mathEquation) {
_dismiss(context);
return;
}
final transaction = widget.editorState.transaction;
@ -211,9 +211,10 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> {
},
);
widget.editorState.apply(transaction);
_dismiss(context);
}
void _dismiss() {
void _dismiss(BuildContext context) {
Navigator.of(context).pop();
}
}

View File

@ -36,6 +36,13 @@ packages:
relative: true
source: path
version: "0.0.7"
appflowy_editor_plugins:
dependency: "direct main"
description:
path: "packages/appflowy_editor_plugins"
relative: true
source: path
version: "0.0.1"
appflowy_popover:
dependency: "direct main"
description:
@ -471,6 +478,13 @@ packages:
description: flutter
source: sdk
version: "0.0.0"
flutter_math_fork:
dependency: transitive
description:
name: flutter_math_fork
url: "https://pub.dartlang.org"
source: hosted
version: "0.6.3+1"
flutter_plugin_android_lifecycle:
dependency: transitive
description:
@ -556,6 +570,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
highlight:
dependency: transitive
description:
name: highlight
url: "https://pub.dartlang.org"
source: hosted
version: "0.7.0"
hotkey_manager:
dependency: "direct main"
description:
@ -1402,5 +1423,5 @@ packages:
source: hosted
version: "3.1.1"
sdks:
dart: ">=2.17.0 <3.0.0"
dart: ">=2.17.6 <3.0.0"
flutter: ">=3.0.0"

View File

@ -91,6 +91,8 @@ dependencies:
google_fonts: ^3.0.1
file_picker: <=5.0.0
percent_indicator: ^4.0.1
appflowy_editor_plugins:
path: packages/appflowy_editor_plugins
dev_dependencies:
flutter_lints: ^2.0.1