From ba78f0073dd4e6e6d8991a52b4425bc67e525d32 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 10:25:18 +0800 Subject: [PATCH 01/11] feat: implement bold text in toolbar service --- .../flowy_editor/lib/document/node.dart | 2 +- .../lib/render/selection/toolbar_widget.dart | 70 +++++++++---------- .../format_rich_text_style.dart | 55 +++++++++------ .../lib/service/toolbar_service.dart | 2 +- 4 files changed, 68 insertions(+), 61 deletions(-) diff --git a/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart b/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart index bdd6da444d..69852856b0 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart @@ -178,7 +178,7 @@ class TextNode extends Node { }) : _delta = delta; TextNode.empty() - : _delta = Delta([TextInsert('')]), + : _delta = Delta([TextInsert(' ')]), super( type: 'text', children: LinkedList(), diff --git a/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart b/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart index 7266929962..486bd97671 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart @@ -1,43 +1,35 @@ import 'package:flowy_editor/editor_state.dart'; import 'package:flowy_editor/infra/flowy_svg.dart'; +import 'package:flowy_editor/render/rich_text/rich_text_style.dart'; +import 'package:flowy_editor/service/default_text_operations/format_rich_text_style.dart'; import 'package:flutter/material.dart'; -typedef ToolbarEventHandler = void Function( - EditorState editorState, String eventName); +typedef ToolbarEventHandler = void Function(EditorState editorState); -typedef ToolbarEventHandlers = List>; -ToolbarEventHandlers defaultToolbarEventHandlers = [ - { - 'bold': ((editorState, eventName) {}), - 'italic': ((editorState, eventName) {}), - 'strikethrough': ((editorState, eventName) {}), - 'underline': ((editorState, eventName) {}), - 'quote': ((editorState, eventName) {}), - 'number_list': ((editorState, eventName) {}), - 'bulleted_list': ((editorState, eventName) {}), - } -]; +typedef ToolbarEventHandlers = Map; -ToolbarEventHandlers defaultListToolbarEventHandlers = [ - { - 'h1': ((editorState, eventName) {}), - }, - { - 'h2': ((editorState, eventName) {}), - }, - { - 'h3': ((editorState, eventName) {}), - }, - { - 'bulleted_list': ((editorState, eventName) {}), - }, - { - 'quote': ((editorState, eventName) {}), - } +ToolbarEventHandlers defaultToolbarEventHandlers = { + 'bold': ((editorState) { + formatRichTextStyle(editorState, {StyleKey.bold: true}); + }), + 'italic': ((editorState) {}), + 'strikethrough': ((editorState) {}), + 'underline': ((editorState) {}), + 'quote': ((editorState) {}), + 'number_list': ((editorState) {}), + 'bulleted_list': ((editorState) {}), +}; + +List defaultListToolbarEventNames = [ + 'H1', + 'H2', + 'H3', + 'B-List', + 'N-List', ]; class ToolbarWidget extends StatefulWidget { - ToolbarWidget({ + const ToolbarWidget({ Key? key, required this.editorState, required this.layerLink, @@ -137,7 +129,7 @@ class _ToolbarWidgetState extends State { preferBelow: false, message: name, child: GestureDetector( - onTap: onTap ?? () => debugPrint('toolbar tap $name'), + onTap: onTap ?? () => _onTap(name), child: SizedBox.fromSize( size: width != null ? Size(width, toolbarHeight) @@ -154,9 +146,7 @@ class _ToolbarWidgetState extends State { void _onTapListToolbar(BuildContext context) { // TODO: implement more detailed UI. - final items = defaultListToolbarEventHandlers - .map((handler) => handler.keys.first) - .toList(growable: false); + final items = defaultListToolbarEventNames; final renderBox = _listToolbarKey.currentContext?.findRenderObject() as RenderBox; final offset = renderBox @@ -198,7 +188,7 @@ class _ToolbarWidgetState extends State { ), ), onTap: () { - debugPrint('tap on $index'); + _onTap(items[index]); }, ); }), @@ -210,6 +200,14 @@ class _ToolbarWidgetState extends State { Overlay.of(context)?.insert(_listToolbarOverlay!); } + void _onTap(String eventName) { + if (defaultToolbarEventHandlers.containsKey(eventName)) { + defaultToolbarEventHandlers[eventName]!(widget.editorState); + return; + } + assert(false, 'Could not find the event handler for $eventName'); + } + void _onSelectionChange() { _listToolbarOverlay?.remove(); _listToolbarOverlay = null; diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart index 5622785d45..162818ae1d 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart @@ -17,29 +17,38 @@ bool formatRichTextStyle( // 1. All nodes are text nodes. // 2. The first node is not TextNode. // 3. The last node is not TextNode. - for (var i = 0; i < textNodes.length; i++) { - final textNode = textNodes[i]; - if (i == 0 && textNode == nodes.first) { - builder.formatText( - textNode, - selection.start.offset, - textNode.toRawString().length - selection.start.offset, - attributes, - ); - } else if (i == textNodes.length - 1 && textNode == nodes.last) { - builder.formatText( - textNode, - 0, - selection.end.offset, - attributes, - ); - } else { - builder.formatText( - textNode, - 0, - textNode.toRawString().length, - attributes, - ); + if (nodes.length == textNodes.length && textNodes.length == 1) { + builder.formatText( + textNodes.first, + selection.start.offset, + selection.end.offset - selection.start.offset, + attributes, + ); + } else { + for (var i = 0; i < textNodes.length; i++) { + final textNode = textNodes[i]; + if (i == 0 && textNode == nodes.first) { + builder.formatText( + textNode, + selection.start.offset, + textNode.toRawString().length - selection.start.offset, + attributes, + ); + } else if (i == textNodes.length - 1 && textNode == nodes.last) { + builder.formatText( + textNode, + 0, + selection.end.offset, + attributes, + ); + } else { + builder.formatText( + textNode, + 0, + textNode.toRawString().length, + attributes, + ); + } } } diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/toolbar_service.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/toolbar_service.dart index b8b8f95e46..feb293aad4 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/toolbar_service.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/toolbar_service.dart @@ -35,7 +35,7 @@ class _FlowyToolbarState extends State with ToolbarService { editorState: widget.editorState, layerLink: layerLink, offset: offset.translate(0, -37.0), - handlers: const [], + handlers: const {}, ), ); Overlay.of(context)?.insert(_toolbarOverlay!); From b11a127432cb67a3708c2d194557efd4d557d8e5 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 11:01:58 +0800 Subject: [PATCH 02/11] feat: implement italic, strikethrough and underline in toolbar service --- .../flowy_editor/lib/document/attributes.dart | 2 +- .../flowy_editor/lib/document/node.dart | 6 ++- .../lib/render/selection/toolbar_widget.dart | 10 ++--- .../format_rich_text_style.dart | 44 ++++++++++++++++++- ...pdate_text_style_by_command_x_handler.dart | 4 +- 5 files changed, 53 insertions(+), 13 deletions(-) diff --git a/frontend/app_flowy/packages/flowy_editor/lib/document/attributes.dart b/frontend/app_flowy/packages/flowy_editor/lib/document/attributes.dart index 6e845420ef..4e1f39775f 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/document/attributes.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/document/attributes.dart @@ -26,7 +26,7 @@ Attributes? composeAttributes(Attributes? a, Attributes? b) { a ??= {}; b ??= {}; final Attributes attributes = {}; - attributes.addAll(b); + attributes.addAll(Map.from(b)..removeWhere((_, value) => value == null)); for (final entry in a.entries) { if (!b.containsKey(entry.key)) { diff --git a/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart b/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart index 69852856b0..0404be2a26 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart @@ -89,7 +89,11 @@ class Node extends ChangeNotifier with LinkedListEntry { this.attributes['subtype'] != attributes['subtype']; for (final attribute in attributes.entries) { - this.attributes[attribute.key] = attribute.value; + if (attribute.value == null) { + this.attributes.remove(attribute.key); + } else { + this.attributes[attribute.key] = attribute.value; + } } // Notify the new attributes // if attributes contains 'subtype', should notify parent to rebuild node diff --git a/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart b/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart index 486bd97671..1a05b6ef10 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart @@ -9,12 +9,10 @@ typedef ToolbarEventHandler = void Function(EditorState editorState); typedef ToolbarEventHandlers = Map; ToolbarEventHandlers defaultToolbarEventHandlers = { - 'bold': ((editorState) { - formatRichTextStyle(editorState, {StyleKey.bold: true}); - }), - 'italic': ((editorState) {}), - 'strikethrough': ((editorState) {}), - 'underline': ((editorState) {}), + 'bold': (editorState) => formatBold(editorState), + 'italic': (editorState) => formatItalic(editorState), + 'strikethrough': (editorState) => formatStrikethrough(editorState), + 'underline': (editorState) => formatUnderline(editorState), 'quote': ((editorState) {}), 'number_list': ((editorState) {}), 'bulleted_list': ((editorState) {}), diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart index 162818ae1d..514a9d706b 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart @@ -1,9 +1,49 @@ +import 'package:flowy_editor/document/attributes.dart'; import 'package:flowy_editor/document/node.dart'; import 'package:flowy_editor/editor_state.dart'; import 'package:flowy_editor/operation/transaction_builder.dart'; +import 'package:flowy_editor/render/rich_text/rich_text_style.dart'; +import 'package:flowy_editor/extensions/text_node_extensions.dart'; -bool formatRichTextStyle( - EditorState editorState, Map attributes) { +bool formatBold(EditorState editorState) { + return formatRichText(editorState, StyleKey.bold); +} + +bool formatItalic(EditorState editorState) { + return formatRichText(editorState, StyleKey.italic); +} + +bool formatUnderline(EditorState editorState) { + return formatRichText(editorState, StyleKey.underline); +} + +bool formatStrikethrough(EditorState editorState) { + return formatRichText(editorState, StyleKey.strikethrough); +} + +bool formatRichText(EditorState editorState, String styleKey) { + final selection = editorState.service.selectionService.currentSelection; + final nodes = editorState.service.selectionService.currentSelectedNodes.value; + final textNodes = nodes.whereType().toList(growable: false); + + if (selection == null || textNodes.isEmpty) { + return false; + } + + bool value = !textNodes.allSatisfyInSelection(styleKey, selection); + Attributes attributes = { + styleKey: value, + }; + if (styleKey == StyleKey.underline && value) { + attributes[StyleKey.strikethrough] = null; + } else if (styleKey == StyleKey.strikethrough && value) { + attributes[StyleKey.underline] = null; + } + + return formatRichTextStyle(editorState, attributes); +} + +bool formatRichTextStyle(EditorState editorState, Attributes attributes) { final selection = editorState.service.selectionService.currentSelection; final nodes = editorState.service.selectionService.currentSelectedNodes.value; final textNodes = nodes.whereType().toList(); diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart index 6e4b742785..6b1fbcd9ca 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart @@ -23,9 +23,7 @@ FlowyKeyEventHandler updateTextStyleByCommandXHandler = (editorState, event) { // bold case 'B': case 'b': - formatRichTextStyle(editorState, { - StyleKey.bold: !textNodes.allSatisfyBoldInSelection(selection), - }); + formatBold(editorState); return KeyEventResult.handled; default: break; From 9b6afcc5c91770b4fd7e790adbc42882fbdd8d28 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 11:42:16 +0800 Subject: [PATCH 03/11] feat: implement heading, quote, bulleted_list in toolbar service --- .../lib/render/rich_text/checkbox_text.dart | 2 +- .../lib/render/rich_text/rich_text_style.dart | 66 +++++++++++-------- .../lib/render/selection/toolbar_widget.dart | 18 +++-- .../format_rich_text_style.dart | 62 +++++++++++++++-- 4 files changed, 105 insertions(+), 43 deletions(-) diff --git a/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/checkbox_text.dart b/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/checkbox_text.dart index 4d52e41867..ba2c5b8712 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/checkbox_text.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/checkbox_text.dart @@ -21,7 +21,7 @@ class CheckboxNodeWidgetBuilder extends NodeWidgetBuilder { @override NodeValidator get nodeValidator => ((node) { - return node.attributes.containsKey(StyleKey.check); + return node.attributes.containsKey(StyleKey.checkbox); }); } diff --git a/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart b/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart index 26d4275774..19aa109faf 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart @@ -25,26 +25,48 @@ class StyleKey { static String font = 'font'; static String href = 'href'; - static String quote = 'quote'; - static String list = 'list'; - static String number = 'number'; - static String todo = 'todo'; - static String code = 'code'; - static String subtype = 'subtype'; - static String check = 'checkbox'; static String heading = 'heading'; + static String h1 = 'h1'; + static String h2 = 'h2'; + static String h3 = 'h3'; + static String h4 = 'h4'; + static String h5 = 'h5'; + static String h6 = 'h6'; + + static String bulletedList = 'bulleted-list'; + static String numberList = 'number-list'; + + static String quote = 'quote'; + static String checkbox = 'checkbox'; + static String code = 'code'; + static String number = 'number'; + + static List partialStyleKeys = [ + StyleKey.bold, + StyleKey.italic, + StyleKey.underline, + StyleKey.strikethrough, + ]; + + static List globalStyleKeys = [ + StyleKey.heading, + StyleKey.bulletedList, + StyleKey.numberList, + StyleKey.quote, + StyleKey.code, + ]; } double baseFontSize = 16.0; // TODO: customize. Map headingToFontSize = { - 'h1': baseFontSize + 15, - 'h2': baseFontSize + 12, - 'h3': baseFontSize + 9, - 'h4': baseFontSize + 6, - 'h5': baseFontSize + 3, - 'h6': baseFontSize, + StyleKey.h1: baseFontSize + 15, + StyleKey.h2: baseFontSize + 12, + StyleKey.h3: baseFontSize + 9, + StyleKey.h4: baseFontSize + 6, + StyleKey.h5: baseFontSize + 3, + StyleKey.h6: baseFontSize, }; extension NodeAttributesExtensions on Attributes { @@ -73,13 +95,6 @@ extension NodeAttributesExtensions on Attributes { return null; } - String? get list { - if (containsKey(StyleKey.list) && this[StyleKey.list] is String) { - return this[StyleKey.list]; - } - return null; - } - int? get number { if (containsKey(StyleKey.number) && this[StyleKey.number] is int) { return this[StyleKey.number]; @@ -87,13 +102,6 @@ extension NodeAttributesExtensions on Attributes { return null; } - bool get todo { - if (containsKey(StyleKey.todo) && this[StyleKey.todo] is bool) { - return this[StyleKey.todo]; - } - return false; - } - bool get code { if (containsKey(StyleKey.code) && this[StyleKey.code] == true) { return this[StyleKey.code]; @@ -102,8 +110,8 @@ extension NodeAttributesExtensions on Attributes { } bool get check { - if (containsKey(StyleKey.check) && this[StyleKey.check] is bool) { - return this[StyleKey.check]; + if (containsKey(StyleKey.checkbox) && this[StyleKey.checkbox] is bool) { + return this[StyleKey.checkbox]; } return false; } diff --git a/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart b/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart index 1a05b6ef10..c06776a0a3 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart @@ -1,8 +1,9 @@ +import 'package:flowy_editor/render/rich_text/rich_text_style.dart'; +import 'package:flutter/material.dart'; + import 'package:flowy_editor/editor_state.dart'; import 'package:flowy_editor/infra/flowy_svg.dart'; -import 'package:flowy_editor/render/rich_text/rich_text_style.dart'; import 'package:flowy_editor/service/default_text_operations/format_rich_text_style.dart'; -import 'package:flutter/material.dart'; typedef ToolbarEventHandler = void Function(EditorState editorState); @@ -13,17 +14,20 @@ ToolbarEventHandlers defaultToolbarEventHandlers = { 'italic': (editorState) => formatItalic(editorState), 'strikethrough': (editorState) => formatStrikethrough(editorState), 'underline': (editorState) => formatUnderline(editorState), - 'quote': ((editorState) {}), - 'number_list': ((editorState) {}), - 'bulleted_list': ((editorState) {}), + 'quote': (editorState) => formatQuote(editorState), + 'number_list': (editorState) {}, + 'bulleted_list': (editorState) => formatBulletedList(editorState), + 'H1': (editorState) => formatHeading(editorState, StyleKey.h1), + 'H2': (editorState) => formatHeading(editorState, StyleKey.h2), + 'H3': (editorState) => formatHeading(editorState, StyleKey.h3), }; List defaultListToolbarEventNames = [ 'H1', 'H2', 'H3', - 'B-List', - 'N-List', + // 'B-List', + // 'N-List', ]; class ToolbarWidget extends StatefulWidget { diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart index 514a9d706b..73945e5d88 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart @@ -1,27 +1,77 @@ import 'package:flowy_editor/document/attributes.dart'; import 'package:flowy_editor/document/node.dart'; import 'package:flowy_editor/editor_state.dart'; +import 'package:flowy_editor/extensions/text_node_extensions.dart'; import 'package:flowy_editor/operation/transaction_builder.dart'; import 'package:flowy_editor/render/rich_text/rich_text_style.dart'; -import 'package:flowy_editor/extensions/text_node_extensions.dart'; + +void formatHeading(EditorState editorState, String heading) { + formatTextNodes(editorState, { + StyleKey.subtype: StyleKey.heading, + StyleKey.heading: heading, + }); +} + +void formatQuote(EditorState editorState) { + formatTextNodes(editorState, { + StyleKey.subtype: StyleKey.quote, + }); +} + +void formatCheckbox(EditorState editorState) { + formatTextNodes(editorState, { + StyleKey.subtype: StyleKey.checkbox, + StyleKey.checkbox: false, + }); +} + +void formatBulletedList(EditorState editorState) { + formatTextNodes(editorState, { + StyleKey.subtype: StyleKey.bulletedList, + }); +} + +bool formatTextNodes(EditorState editorState, Attributes attributes) { + final nodes = editorState.service.selectionService.currentSelectedNodes.value; + final textNodes = nodes.whereType().toList(); + + if (textNodes.isEmpty) { + return false; + } + + final builder = TransactionBuilder(editorState); + + for (final textNode in textNodes) { + builder.updateNode( + textNode, + Attributes.fromIterable( + StyleKey.globalStyleKeys, + value: (_) => null, + )..addAll(attributes), + ); + } + + builder.commit(); + return true; +} bool formatBold(EditorState editorState) { - return formatRichText(editorState, StyleKey.bold); + return formatRichTextPartialStyle(editorState, StyleKey.bold); } bool formatItalic(EditorState editorState) { - return formatRichText(editorState, StyleKey.italic); + return formatRichTextPartialStyle(editorState, StyleKey.italic); } bool formatUnderline(EditorState editorState) { - return formatRichText(editorState, StyleKey.underline); + return formatRichTextPartialStyle(editorState, StyleKey.underline); } bool formatStrikethrough(EditorState editorState) { - return formatRichText(editorState, StyleKey.strikethrough); + return formatRichTextPartialStyle(editorState, StyleKey.strikethrough); } -bool formatRichText(EditorState editorState, String styleKey) { +bool formatRichTextPartialStyle(EditorState editorState, String styleKey) { final selection = editorState.service.selectionService.currentSelection; final nodes = editorState.service.selectionService.currentSelectedNodes.value; final textNodes = nodes.whereType().toList(growable: false); From 1ba15b321b0cf1454ab8e8771e04d9b9c37c0b7b Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 11:47:48 +0800 Subject: [PATCH 04/11] feat: implement revert text in toolbar service --- .../flowy_editor/lib/render/selection/toolbar_widget.dart | 2 ++ .../default_text_operations/format_rich_text_style.dart | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart b/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart index c06776a0a3..91659e1d1f 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/render/selection/toolbar_widget.dart @@ -17,12 +17,14 @@ ToolbarEventHandlers defaultToolbarEventHandlers = { 'quote': (editorState) => formatQuote(editorState), 'number_list': (editorState) {}, 'bulleted_list': (editorState) => formatBulletedList(editorState), + 'Text': (editorState) => formatText(editorState), 'H1': (editorState) => formatHeading(editorState, StyleKey.h1), 'H2': (editorState) => formatHeading(editorState, StyleKey.h2), 'H3': (editorState) => formatHeading(editorState, StyleKey.h3), }; List defaultListToolbarEventNames = [ + 'Text', 'H1', 'H2', 'H3', diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart index 73945e5d88..79e7bfe077 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/default_text_operations/format_rich_text_style.dart @@ -5,6 +5,10 @@ import 'package:flowy_editor/extensions/text_node_extensions.dart'; import 'package:flowy_editor/operation/transaction_builder.dart'; import 'package:flowy_editor/render/rich_text/rich_text_style.dart'; +void formatText(EditorState editorState) { + formatTextNodes(editorState, {}); +} + void formatHeading(EditorState editorState, String heading) { formatTextNodes(editorState, { StyleKey.subtype: StyleKey.heading, From 14bd18e21c5d9fbd78bdb96c97c1db16d5e4d793 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 14:27:16 +0800 Subject: [PATCH 05/11] feat: implement enter key event handler and keep attributes after insert --- .../flowy_editor/lib/document/node.dart | 13 +++++++ .../lib/operation/transaction_builder.dart | 21 +++++++----- .../enter_in_edge_of_text_node_handler.dart | 34 +++++++++++++------ ...pdate_text_style_by_command_x_handler.dart | 2 -- 4 files changed, 49 insertions(+), 21 deletions(-) diff --git a/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart b/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart index 0404be2a26..3a7ad36456 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/document/node.dart @@ -205,6 +205,19 @@ class TextNode extends Node { return map; } + TextNode copyWith({ + String? type, + LinkedList? children, + Attributes? attributes, + Delta? delta, + }) => + TextNode( + type: type ?? this.type, + children: children ?? this.children, + attributes: attributes ?? this.attributes, + delta: delta ?? this.delta, + ); + // TODO: It's unneccesry to compute everytime. String toRawString() => _delta.operations.whereType().map((op) => op.content).join(); diff --git a/frontend/app_flowy/packages/flowy_editor/lib/operation/transaction_builder.dart b/frontend/app_flowy/packages/flowy_editor/lib/operation/transaction_builder.dart index 94b829519e..9233a1b08a 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/operation/transaction_builder.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/operation/transaction_builder.dart @@ -1,19 +1,18 @@ import 'dart:collection'; -import 'dart:math'; -import 'package:flowy_editor/editor_state.dart'; + +import 'package:flowy_editor/document/attributes.dart'; import 'package:flowy_editor/document/node.dart'; import 'package:flowy_editor/document/path.dart'; import 'package:flowy_editor/document/position.dart'; -import 'package:flowy_editor/document/text_delta.dart'; -import 'package:flowy_editor/document/attributes.dart'; import 'package:flowy_editor/document/selection.dart'; - -import './operation.dart'; -import './transaction.dart'; +import 'package:flowy_editor/document/text_delta.dart'; +import 'package:flowy_editor/editor_state.dart'; +import 'package:flowy_editor/operation/operation.dart'; +import 'package:flowy_editor/operation/transaction.dart'; /// A [TransactionBuilder] is used to build the transaction from the state. /// It will save make a snapshot of the cursor selection state automatically. -/// The cursor can be resoted if the transaction is undo. +/// The cursor can be resorted if the transaction is undo. class TransactionBuilder { final List operations = []; @@ -30,8 +29,12 @@ class TransactionBuilder { } insertNode(Path path, Node node) { - beforeSelection = state.cursorSelection; + beforeSelection = state.service.selectionService.currentSelection; add(InsertOperation(path: path, value: node)); + // FIXME: Not exactly correct, needs to be customized. + afterSelection = Selection.collapsed( + Position(path: path, offset: 0), + ); } updateNode(Node node, Attributes attributes) { diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart index d1e89d393e..8b0c7c5423 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart @@ -1,13 +1,16 @@ -import 'package:flowy_editor/document/node.dart'; -import 'package:flowy_editor/document/position.dart'; -import 'package:flowy_editor/document/selection.dart'; -import 'package:flowy_editor/operation/transaction_builder.dart'; -import 'package:flowy_editor/service/keyboard_service.dart'; -import 'package:flowy_editor/extensions/path_extensions.dart'; -import 'package:flowy_editor/extensions/node_extensions.dart'; +import 'dart:collection'; + import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:flowy_editor/document/node.dart'; +import 'package:flowy_editor/document/text_delta.dart'; +import 'package:flowy_editor/extensions/node_extensions.dart'; +import 'package:flowy_editor/extensions/path_extensions.dart'; +import 'package:flowy_editor/operation/transaction_builder.dart'; +import 'package:flowy_editor/render/rich_text/rich_text_style.dart'; +import 'package:flowy_editor/service/keyboard_service.dart'; + FlowyKeyEventHandler enterInEdgeOfTextNodeHandler = (editorState, event) { if (event.logicalKey != LogicalKeyboardKey.enter) { return KeyEventResult.ignored; @@ -23,12 +26,19 @@ FlowyKeyEventHandler enterInEdgeOfTextNodeHandler = (editorState, event) { } final textNode = nodes.first as TextNode; - if (textNode.selectable!.end() == selection.end) { + final needCopyAttributes = StyleKey.globalStyleKeys + .where((key) => key != StyleKey.heading) + .contains(textNode.subtype); TransactionBuilder(editorState) ..insertNode( textNode.path.next, - TextNode.empty(), + textNode.copyWith( + children: LinkedList(), + delta: Delta([TextInsert(' ')]), + attributes: + needCopyAttributes ? {StyleKey.subtype: textNode.subtype} : null, + ), ) ..commit(); return KeyEventResult.handled; @@ -36,7 +46,11 @@ FlowyKeyEventHandler enterInEdgeOfTextNodeHandler = (editorState, event) { TransactionBuilder(editorState) ..insertNode( textNode.path, - TextNode.empty(), + textNode.copyWith( + children: LinkedList(), + delta: Delta([TextInsert(' ')]), + attributes: {}, + ), ) ..commit(); return KeyEventResult.handled; diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart index 6b1fbcd9ca..b062480cf2 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart @@ -1,8 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flowy_editor/document/node.dart'; -import 'package:flowy_editor/extensions/text_node_extensions.dart'; -import 'package:flowy_editor/render/rich_text/rich_text_style.dart'; import 'package:flowy_editor/service/default_text_operations/format_rich_text_style.dart'; import 'package:flowy_editor/service/keyboard_service.dart'; From 56ac86fb5192bca49438be3df580a03e28d726ae Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 15:32:43 +0800 Subject: [PATCH 06/11] chore: add some comments in image plugins. --- .../example/lib/plugin/image_node_widget.dart | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/image_node_widget.dart b/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/image_node_widget.dart index 25d432b759..6a01fb6430 100644 --- a/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/image_node_widget.dart +++ b/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/image_node_widget.dart @@ -1,6 +1,23 @@ import 'package:flowy_editor/flowy_editor.dart'; import 'package:flutter/material.dart'; +/// 1. define your custom type in example.json +/// For example I need to define an image plugin, then I define type equals +/// "image", and add "image_src" into "attributes". +/// { +/// "type": "image", +/// "attributes", { "image_src": "https://s1.ax1x.com/2022/07/28/vCgz1x.png" } +/// } +/// 2. create a class extends [NodeWidgetBuilder] +/// 3. override the function `Widget build(NodeWidgetContext context)` +/// and return a widget to render. The returned widget should be +/// a StatefulWidget and mixin with [Selectable]. +/// +/// 4. override the getter `nodeValidator` +/// to verify the data structure in [Node]. +/// 5. register the plugin with `type` to `flowy_editor` in `main.dart`. +/// 6. Congratulations! + class ImageNodeBuilder extends NodeWidgetBuilder { @override Widget build(NodeWidgetContext context) { From fa05170c86029e28f74398a122df31314d44375a Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 16:25:35 +0800 Subject: [PATCH 07/11] chore: fix test error --- .../lib/operation/transaction_builder.dart | 8 ++------ .../enter_in_edge_of_text_node_handler.dart | 14 ++++++++++++++ .../packages/flowy_editor/test/operation_test.dart | 3 ++- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/frontend/app_flowy/packages/flowy_editor/lib/operation/transaction_builder.dart b/frontend/app_flowy/packages/flowy_editor/lib/operation/transaction_builder.dart index dd531d5d5e..88e0c00890 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/operation/transaction_builder.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/operation/transaction_builder.dart @@ -30,14 +30,10 @@ class TransactionBuilder { insertNode(Path path, Node node) { insertNodes(path, [node]); - // FIXME: Not exactly correct, needs to be customized. - afterSelection = Selection.collapsed( - Position(path: path, offset: 0), - ); } insertNodes(Path path, List nodes) { - beforeSelection = state.service.selectionService.currentSelection; + beforeSelection = state.cursorSelection; add(InsertOperation(path, nodes)); } @@ -74,7 +70,7 @@ class TransactionBuilder { } textEdit(TextNode node, Delta Function() f) { - beforeSelection = state.service.selectionService.currentSelection; + beforeSelection = state.cursorSelection; final path = node.path; final delta = f(); diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart index b08dcb1f80..525afd9021 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart @@ -4,6 +4,8 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flowy_editor/document/node.dart'; +import 'package:flowy_editor/document/position.dart'; +import 'package:flowy_editor/document/selection.dart'; import 'package:flowy_editor/document/text_delta.dart'; import 'package:flowy_editor/extensions/node_extensions.dart'; import 'package:flowy_editor/extensions/path_extensions.dart'; @@ -40,6 +42,12 @@ FlowyKeyEventHandler enterInEdgeOfTextNodeHandler = (editorState, event) { needCopyAttributes ? {StyleKey.subtype: textNode.subtype} : {}, ), ) + ..afterSelection = Selection.collapsed( + Position( + path: textNode.path.next, + offset: 0, + ), + ) ..commit(); return KeyEventResult.handled; } else if (textNode.selectable!.start() == selection.start) { @@ -52,6 +60,12 @@ FlowyKeyEventHandler enterInEdgeOfTextNodeHandler = (editorState, event) { attributes: {}, ), ) + ..afterSelection = Selection.collapsed( + Position( + path: textNode.path.next, + offset: 0, + ), + ) ..commit(); return KeyEventResult.handled; } diff --git a/frontend/app_flowy/packages/flowy_editor/test/operation_test.dart b/frontend/app_flowy/packages/flowy_editor/test/operation_test.dart index 7507cb65bf..339807cea4 100644 --- a/frontend/app_flowy/packages/flowy_editor/test/operation_test.dart +++ b/frontend/app_flowy/packages/flowy_editor/test/operation_test.dart @@ -8,6 +8,7 @@ import 'package:flowy_editor/editor_state.dart'; import 'package:flowy_editor/document/state_tree.dart'; void main() { + TestWidgetsFlutterBinding.ensureInitialized(); group('transform path', () { test('transform path changed', () { expect(transformPath([0, 1], [0, 1]), [0, 2]); @@ -87,7 +88,7 @@ void main() { "path": [0], "nodes": [item1.toJson()], } - ], + ] }); }); test("delete", () { From 5fdcdbd357bc61cc06355e629d1fe36306668554 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 17:15:07 +0800 Subject: [PATCH 08/11] fix: bulleted-list typo --- .../packages/flowy_editor/example/assets/example.json | 6 +++--- .../packages/flowy_editor/lib/service/editor_service.dart | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/app_flowy/packages/flowy_editor/example/assets/example.json b/frontend/app_flowy/packages/flowy_editor/example/assets/example.json index 9f1d278e16..c69237f24f 100644 --- a/frontend/app_flowy/packages/flowy_editor/example/assets/example.json +++ b/frontend/app_flowy/packages/flowy_editor/example/assets/example.json @@ -144,7 +144,7 @@ } ], "attributes": { - "subtype": "bullet-list" + "subtype": "bulleted-list" } }, { @@ -155,7 +155,7 @@ } ], "attributes": { - "subtype": "bullet-list" + "subtype": "bulleted-list" } }, { @@ -170,7 +170,7 @@ } ], "attributes": { - "subtype": "bullet-list" + "subtype": "bulleted-list" } }, { diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/editor_service.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/editor_service.dart index 6d21699625..b62fe1bb15 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/editor_service.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/editor_service.dart @@ -25,7 +25,7 @@ NodeWidgetBuilders defaultBuilders = { 'text': RichTextNodeWidgetBuilder(), 'text/checkbox': CheckboxNodeWidgetBuilder(), 'text/heading': HeadingTextNodeWidgetBuilder(), - 'text/bullet-list': BulletedListTextNodeWidgetBuilder(), + 'text/bulleted-list': BulletedListTextNodeWidgetBuilder(), 'text/number-list': NumberListTextNodeWidgetBuilder(), 'text/quote': QuotedTextNodeWidgetBuilder(), }; From a1be60721e9ad5655c0420ce4822a1c39f6a7e48 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 17:16:02 +0800 Subject: [PATCH 09/11] fix: pressing enter key in the edge of node doesn't work good. --- .../packages/flowy_editor/example/lib/main.dart | 17 ++++++++++------- .../lib/render/rich_text/flowy_rich_text.dart | 2 +- .../lib/render/rich_text/rich_text_style.dart | 1 + .../enter_in_edge_of_text_node_handler.dart | 7 +++---- .../lib/service/selection_service.dart | 7 +++++-- .../flowy_editor/lib/service/service.dart | 10 ++++++---- 6 files changed, 26 insertions(+), 18 deletions(-) diff --git a/frontend/app_flowy/packages/flowy_editor/example/lib/main.dart b/frontend/app_flowy/packages/flowy_editor/example/lib/main.dart index 158e33bbb1..1a68f38ead 100644 --- a/frontend/app_flowy/packages/flowy_editor/example/lib/main.dart +++ b/frontend/app_flowy/packages/flowy_editor/example/lib/main.dart @@ -116,13 +116,16 @@ class _MyHomePageState extends State { _editorState = EditorState( document: document, ); - return FlowyEditor( - key: editorKey, - editorState: _editorState, - keyEventHandlers: const [], - customBuilders: { - 'image': ImageNodeBuilder(), - }, + return Container( + padding: const EdgeInsets.only(left: 20, right: 20), + child: FlowyEditor( + key: editorKey, + editorState: _editorState, + keyEventHandlers: const [], + customBuilders: { + 'image': ImageNodeBuilder(), + }, + ), // shortcuts: [ // // TODO: this won't work, just a example for now. // { diff --git a/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/flowy_rich_text.dart b/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/flowy_rich_text.dart index 70834184cc..f302fcaba8 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/flowy_rich_text.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/flowy_rich_text.dart @@ -74,7 +74,7 @@ class _FlowyRichTextState extends State with Selectable { _renderParagraph.getOffsetForCaret(textPosition, Rect.zero); final cursorHeight = widget.cursorHeight ?? _renderParagraph.getFullHeightForCaret(textPosition) ?? - 5.0; // default height + 18.0; // default height return Rect.fromLTWH( cursorOffset.dx - (widget.cursorWidth / 2), cursorOffset.dy, diff --git a/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart b/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart index 19aa109faf..cc4f6038ac 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart @@ -51,6 +51,7 @@ class StyleKey { static List globalStyleKeys = [ StyleKey.heading, + StyleKey.checkbox, StyleKey.bulletedList, StyleKey.numberList, StyleKey.quote, diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart index 525afd9021..5b49907138 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart @@ -37,9 +37,8 @@ FlowyKeyEventHandler enterInEdgeOfTextNodeHandler = (editorState, event) { textNode.path.next, textNode.copyWith( children: LinkedList(), - delta: Delta([TextInsert(' ')]), - attributes: - needCopyAttributes ? {StyleKey.subtype: textNode.subtype} : {}, + delta: Delta([TextInsert('')]), + attributes: needCopyAttributes ? textNode.attributes : {}, ), ) ..afterSelection = Selection.collapsed( @@ -56,7 +55,7 @@ FlowyKeyEventHandler enterInEdgeOfTextNodeHandler = (editorState, event) { textNode.path, textNode.copyWith( children: LinkedList(), - delta: Delta([TextInsert(' ')]), + delta: Delta([TextInsert('')]), attributes: {}, ), ) diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/selection_service.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/selection_service.dart index 0695dd5e90..59632773e5 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/selection_service.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/selection_service.dart @@ -233,6 +233,9 @@ class _FlowySelectionState extends State @override void dispose() { + clearSelection(); + WidgetsBinding.instance.removeObserver(this); + super.dispose(); } @@ -455,7 +458,7 @@ class _FlowySelectionState extends State ..forEach((overlay) => overlay.remove()) ..clear(); // clear toolbar - editorState.service.toolbarService.hide(); + editorState.service.toolbarService?.hide(); } void _updateSelection(Selection selection) { @@ -526,7 +529,7 @@ class _FlowySelectionState extends State if (topmostRect != null && layerLink != null) { editorState.service.toolbarService - .showInOffset(topmostRect.topLeft, layerLink); + ?.showInOffset(topmostRect.topLeft, layerLink); } } diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/service.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/service.dart index 829ad2bde1..937a16044a 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/service.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/service.dart @@ -23,9 +23,11 @@ class FlowyService { // toolbar service final toolbarServiceKey = GlobalKey(debugLabel: 'flowy_toolbar_service'); - ToolbarService get toolbarService { - assert(toolbarServiceKey.currentState != null && - toolbarServiceKey.currentState is ToolbarService); - return toolbarServiceKey.currentState! as ToolbarService; + ToolbarService? get toolbarService { + if (toolbarServiceKey.currentState != null && + toolbarServiceKey.currentState is ToolbarService) { + return toolbarServiceKey.currentState! as ToolbarService; + } + return null; } } From 397f43cbe132819af18ce9f0acfc7aa7576f9623 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 20:08:32 +0800 Subject: [PATCH 10/11] feat: implement remove subtype if text node is empty when pressing enter key --- .../enter_in_edge_of_text_node_handler.dart | 59 +++++++++++++------ 1 file changed, 40 insertions(+), 19 deletions(-) diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart index 5b49907138..ccdfcad5dc 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart @@ -29,25 +29,46 @@ FlowyKeyEventHandler enterInEdgeOfTextNodeHandler = (editorState, event) { final textNode = nodes.first as TextNode; if (textNode.selectable!.end() == selection.end) { - final needCopyAttributes = StyleKey.globalStyleKeys - .where((key) => key != StyleKey.heading) - .contains(textNode.subtype); - TransactionBuilder(editorState) - ..insertNode( - textNode.path.next, - textNode.copyWith( - children: LinkedList(), - delta: Delta([TextInsert('')]), - attributes: needCopyAttributes ? textNode.attributes : {}, - ), - ) - ..afterSelection = Selection.collapsed( - Position( - path: textNode.path.next, - offset: 0, - ), - ) - ..commit(); + if (textNode.subtype != null && textNode.delta.length == 0) { + TransactionBuilder(editorState) + ..deleteNode(textNode) + ..insertNode( + textNode.path, + textNode.copyWith( + children: LinkedList(), + delta: Delta([TextInsert('')]), + attributes: {}, + ), + ) + ..afterSelection = Selection.collapsed( + Position( + path: textNode.path, + offset: 0, + ), + ) + ..commit(); + } else { + final needCopyAttributes = StyleKey.globalStyleKeys + .where((key) => key != StyleKey.heading) + .contains(textNode.subtype); + TransactionBuilder(editorState) + ..insertNode( + textNode.path.next, + textNode.copyWith( + children: LinkedList(), + delta: Delta([TextInsert('')]), + attributes: needCopyAttributes ? textNode.attributes : {}, + ), + ) + ..afterSelection = Selection.collapsed( + Position( + path: textNode.path.next, + offset: 0, + ), + ) + ..commit(); + } + return KeyEventResult.handled; } else if (textNode.selectable!.start() == selection.start) { TransactionBuilder(editorState) From c7432e640be8dcb56e5d0a9124e9a4f417223278 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Tue, 2 Aug 2022 20:22:39 +0800 Subject: [PATCH 11/11] feat: delay rendering selection(need to be refactored). --- .../app_flowy/packages/flowy_editor/lib/editor_state.dart | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/app_flowy/packages/flowy_editor/lib/editor_state.dart b/frontend/app_flowy/packages/flowy_editor/lib/editor_state.dart index 277b742604..92a05fc880 100644 --- a/frontend/app_flowy/packages/flowy_editor/lib/editor_state.dart +++ b/frontend/app_flowy/packages/flowy_editor/lib/editor_state.dart @@ -60,7 +60,12 @@ class EditorState { for (final op in transaction.operations) { _applyOperation(op); } - updateCursorSelection(transaction.afterSelection); + // updateCursorSelection(transaction.afterSelection); + + // FIXME: don't use delay + Future.delayed(const Duration(milliseconds: 16), () { + updateCursorSelection(transaction.afterSelection); + }); if (options.recordUndo) { final undoItem = undoManager.getUndoHistoryItem();