From 69404635d82b55de3146adcfff30ab2edc8db6c7 Mon Sep 17 00:00:00 2001 From: singerdmx Date: Wed, 10 Feb 2021 09:55:08 -0800 Subject: [PATCH] Enable 'bold' with ctrl+b on flutter web --- README.md | 66 +++++++++++++++++++++--------------- app/lib/pages/home_page.dart | 21 +++++++++++- lib/widgets/editor.dart | 16 ++++----- lib/widgets/toolbar.dart | 11 +++++- 4 files changed, 74 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index ca463e9e..64b92779 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,39 @@ - -# FlutterQuill - -Rich text editor and a [Quill] component for [Flutter]. - -https://pub.dev/packages/flutter_quill - -This library is a WYSIWYG editor built for the modern mobile platform only and web is not supported. -For web development, [ReactQuill] is recommended to use for compatibility. - ---- - -1 -1 -1 -1 - -One client and affiliated collaborator of **[FlutterQuill]** is Bullet Journal App: https://bulletjournal.us/home/index.html - -You can also join [Slack Group] for discussion. - -[Quill]: https://quilljs.com -[Flutter]: https://github.com/flutter/flutter -[FlutterQuill]: https://pub.dev/packages/flutter_quill -[ReactQuill]: https://github.com/zenoamaro/react-quill -[Slack Group]: https://join.slack.com/t/bulletjournal1024/shared_invite/zt-fys7t9hi-ITVU5PGDen1rNRyCjdcQ2g + + + +# FlutterQuill + +Rich text editor and a [Quill] component for [Flutter]. + +https://pub.dev/packages/flutter_quill + +This library is a WYSIWYG editor built for the modern mobile platform only and web is under development. + +Default branch `master` is on channel `master`. To use channel `stable`, switch to branch `stable`. +Branch `master` on channel `master` supports web. To run the app on web do the following: +1) Change flutter channel to master using `flutter channel master`, followed by `flutter upgrade`. +2) Enable web using `flutter config --enable-web` and restart the IDE. +3) Upon successful execution of step 1 and 2 you should see `Chrome` as one of the devices which you run `flutter devices`. +4) Run the app. + +For web development, [ReactQuill] is recommended to use for compatibility. + +--- + +1 +1 +1 +1 + +One client and affiliated collaborator of **[FlutterQuill]** is Bullet Journal App: https://bulletjournal.us/home/index.html + +You can also join [Slack Group] for discussion. + +[Quill]: https://quilljs.com +[Flutter]: https://github.com/flutter/flutter +[FlutterQuill]: https://pub.dev/packages/flutter_quill +[ReactQuill]: https://github.com/zenoamaro/react-quill +[Slack Group]: https://join.slack.com/t/bulletjournal1024/shared_invite/zt-fys7t9hi-ITVU5PGDen1rNRyCjdcQ2g \ No newline at end of file diff --git a/app/lib/pages/home_page.dart b/app/lib/pages/home_page.dart index f251e7b8..3663543f 100644 --- a/app/lib/pages/home_page.dart +++ b/app/lib/pages/home_page.dart @@ -4,6 +4,7 @@ import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:flutter_quill/models/documents/attribute.dart'; import 'package:flutter_quill/models/documents/document.dart'; import 'package:flutter_quill/widgets/controller.dart'; import 'package:flutter_quill/widgets/default_styles.dart'; @@ -65,7 +66,25 @@ class _HomePageState extends State { color: Colors.grey.shade800, child: _buildMenuBar(context), ), - body: _buildWelcomeEditor(context), + body: RawKeyboardListener( + focusNode: FocusNode(), + onKey: (RawKeyEvent event) { + if (event.data.isControlPressed && event.character == 'b') { + if (_controller + .getSelectionStyle() + .attributes + .keys + .contains("bold")) { + _controller + .formatSelection(Attribute.clone(Attribute.bold, null)); + } else { + _controller.formatSelection(Attribute.bold); + print("not bold"); + } + } + }, + child: _buildWelcomeEditor(context), + ), ); } diff --git a/lib/widgets/editor.dart b/lib/widgets/editor.dart index 75ee0e52..89be0b58 100644 --- a/lib/widgets/editor.dart +++ b/lib/widgets/editor.dart @@ -11,7 +11,7 @@ import 'package:flutter_quill/models/documents/document.dart'; import 'package:flutter_quill/models/documents/nodes/container.dart' as containerNode; import 'package:flutter_quill/models/documents/nodes/embed.dart'; -import 'package:flutter_quill/models/documents/nodes/leaf.dart'; +import 'package:flutter_quill/models/documents/nodes/leaf.dart' as leaf; import 'package:flutter_quill/models/documents/nodes/line.dart'; import 'package:flutter_quill/models/documents/nodes/node.dart'; import 'package:flutter_quill/widgets/image.dart'; @@ -73,16 +73,12 @@ abstract class RenderAbstractEditor { void selectPosition(SelectionChangedCause cause); } -Widget _defaultEmbedBuilder(BuildContext context, Embed node) { +Widget _defaultEmbedBuilder(BuildContext context, leaf.Embed node) { switch (node.value.type) { - case 'divider': - final style = QuillStyles.getStyles(context, true); - return Divider( - height: style.paragraph.style.fontSize * style.paragraph.style.height, - thickness: 2, - color: Colors.grey.shade200, - ); case 'image': + if (kIsWeb) { + return SizedBox.shrink(); + } String imageUrl = node.value.data; return imageUrl.startsWith('http') ? Image.network(imageUrl) @@ -348,7 +344,7 @@ class _QuillEditorSelectionGestureDetectorBuilder } return false; } - Leaf segment = segmentResult.node as Leaf; + leaf.Leaf segment = segmentResult.node as leaf.Leaf; if (segment.style.containsKey(Attribute.link.key)) { var launchUrl = getEditor().widget.onLaunchUrl; if (launchUrl == null) { diff --git a/lib/widgets/toolbar.dart b/lib/widgets/toolbar.dart index 6818803a..69de725a 100644 --- a/lib/widgets/toolbar.dart +++ b/lib/widgets/toolbar.dart @@ -1,5 +1,6 @@ import 'dart:io'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_colorpicker/flutter_colorpicker.dart'; import 'package:flutter_quill/models/documents/attribute.dart'; @@ -446,7 +447,15 @@ Widget _selectHeadingStyleButtonBuilder( height: iconSize * 1.77, fillColor: Theme.of(context).canvasColor, child: Text( - _valueToText[value], + !kIsWeb + ? _valueToText[value] + : _valueToText[value.key == "header" + ? Attribute.header + : (value.key == "h1") + ? Attribute.h1 + : (value.key == "h2") + ? Attribute.h2 + : Attribute.h3], style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600), ), initialValue: value,