diff --git a/super_editor/example/lib/demos/in_the_lab/feature_slack_tags.dart b/super_editor/example/lib/demos/in_the_lab/feature_slack_tags.dart new file mode 100644 index 0000000000..b39c6090dc --- /dev/null +++ b/super_editor/example/lib/demos/in_the_lab/feature_slack_tags.dart @@ -0,0 +1,368 @@ +import 'package:example/demos/in_the_lab/in_the_lab_scaffold.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart' hide ListenableBuilder; +import 'package:follow_the_leader/follow_the_leader.dart'; +import 'package:super_editor/super_editor.dart'; + +import 'popover_list.dart'; + +class SlackTagsFeatureDemo extends StatefulWidget { + const SlackTagsFeatureDemo({super.key}); + + @override + State createState() => _SlackTagsFeatureDemoState(); +} + +class _SlackTagsFeatureDemoState extends State { + late final MutableDocument _document; + late final MutableDocumentComposer _composer; + late final Editor _editor; + late final SlackTagPlugin _slackTagPlugin; + + late final FocusNode _editorFocusNode; + + final _users = []; + + @override + void initState() { + super.initState(); + + _document = MutableDocument.empty(); + _composer = MutableDocumentComposer(); + _editor = Editor( + editables: { + Editor.documentKey: _document, + Editor.composerKey: _composer, + }, + requestHandlers: [ + ...defaultRequestHandlers, + ], + ); + + _slackTagPlugin = SlackTagPlugin() + ..tagIndex.composingSlackTag.addListener(_onTagCompositionChange) + ..tagIndex.addListener(_updateUserTagList); + + _editorFocusNode = FocusNode(); + } + + @override + void dispose() { + _editorFocusNode.dispose(); + + _slackTagPlugin.tagIndex + ..composingSlackTag.removeListener(_onTagCompositionChange) + ..removeListener(_updateUserTagList); + + _composer.dispose(); + _editor.dispose(); + _document.dispose(); + + super.dispose(); + } + + void _onTagCompositionChange() { + print("_onTagCompositionChange() - value: ${_slackTagPlugin.tagIndex.composingSlackTag.value?.token}"); + + final paragraph = _document.nodes.first as ParagraphNode; + print("Attributions in paragraph:"); + print("${paragraph.text.getAttributionSpansByFilter((a) => true)}"); + } + + void _updateUserTagList() { + setState(() { + _users.clear(); + + for (final node in _document.nodes) { + if (node is! TextNode) { + continue; + } + + final userSpans = node.text.getAttributionSpansInRange( + attributionFilter: (a) => a is CommittedStableTagAttribution, + range: SpanRange(0, node.text.length - 1), + ); + + for (final userSpan in userSpans) { + _users.add(node.text.substring(userSpan.start, userSpan.end + 1)); + } + } + }); + } + + @override + Widget build(BuildContext context) { + return Stack( + children: [ + InTheLabScaffold( + content: _buildEditor(), + supplemental: _buildTagList(), + ), + ListenableBuilder( + listenable: _slackTagPlugin.tagIndex.composingSlackTag, + builder: (context, child) { + if (_slackTagPlugin.tagIndex.composingSlackTag.value == null) { + return const SizedBox(); + } + + return Follower.withOffset( + link: _composingLink, + offset: Offset(0, 16), + leaderAnchor: Alignment.bottomCenter, + followerAnchor: Alignment.topCenter, + showWhenUnlinked: false, + child: UserSelectionPopover( + editor: _editor, + userTagPlugin: _slackTagPlugin, + editorFocusNode: _editorFocusNode, + ), + ); + }), + ], + ); + } + + Widget _buildEditor() { + return IntrinsicHeight( + child: SuperEditor( + editor: _editor, + document: _document, + composer: _composer, + focusNode: _editorFocusNode, + stylesheet: defaultStylesheet.copyWith( + inlineTextStyler: (attributions, existingStyle) { + TextStyle style = defaultInlineTextStyler(attributions, existingStyle); + + if (attributions.contains(slackTagComposingAttribution)) { + style = style.copyWith( + color: Colors.blue, + ); + } + + if (attributions.whereType().isNotEmpty) { + style = style.copyWith( + color: Colors.orange, + ); + } + + return style; + }, + addRulesAfter: [ + ...darkModeStyles, + ], + ), + documentOverlayBuilders: [ + AttributedTextBoundsOverlay( + selector: (a) => a == slackTagComposingAttribution, + builder: (context, attribution) { + print("AttributedTextBoundsOverlay - attribution: $attribution"); + return Leader( + link: _composingLink, + child: const SizedBox(), + ); + }, + ), + DefaultCaretOverlayBuilder( + caretStyle: CaretStyle().copyWith(color: Colors.redAccent), + ), + ], + plugins: { + _slackTagPlugin, + }, + ), + ); + } + + Widget _buildTagList() { + if (_users.isEmpty) { + return const SizedBox(); + } + + return Center( + child: SingleChildScrollView( + child: Wrap( + spacing: 12, + runSpacing: 12, + alignment: WrapAlignment.center, + children: [ + for (final tag in _users) // + Chip(label: Text(tag)), + ], + ), + ), + ); + } +} + +final _composingLink = LeaderLink(); + +class UserSelectionPopover extends StatefulWidget { + const UserSelectionPopover({ + Key? key, + required this.editor, + required this.userTagPlugin, + required this.editorFocusNode, + }) : super(key: key); + + final Editor editor; + final SlackTagPlugin userTagPlugin; + final FocusNode editorFocusNode; + + @override + State createState() => _UserSelectionPopoverState(); +} + +class _UserSelectionPopoverState extends State { + final _userCandidates = [ + "Miguel Rodriguez", + "Matt Carron", + "John Smith", + "Sally Smith", + "Bob Baker", + "Jane July", + "Kelly Baker", + "Alicia Daniel", + "Alexander D.", + "Franco Albany de Alice", + ]; + final _matchingUsers = []; + + final _popoverFocusNode = FocusNode(); + bool _isLoadingMatches = false; + + @override + void initState() { + super.initState(); + + widget.userTagPlugin.tagIndex.composingSlackTag.addListener(_onComposingTokenChange); + + _onComposingTokenChange(); + } + + @override + void didUpdateWidget(UserSelectionPopover oldWidget) { + super.didUpdateWidget(oldWidget); + + if (widget.userTagPlugin != oldWidget.userTagPlugin) { + oldWidget.userTagPlugin.tagIndex.composingSlackTag.removeListener(_onComposingTokenChange); + widget.userTagPlugin.tagIndex.composingSlackTag.addListener(_onComposingTokenChange); + } + } + + @override + void dispose() { + widget.userTagPlugin.tagIndex.composingSlackTag.removeListener(_onComposingTokenChange); + + _popoverFocusNode.dispose(); + + super.dispose(); + } + + Future _onComposingTokenChange() async { + final composingTag = widget.userTagPlugin.tagIndex.composingSlackTag.value?.token; + if (composingTag == null) { + // The user isn't composing a tag. Therefore, this popover shouldn't + // have focus. + setState(() { + _matchingUsers.clear(); + }); + return; + } + + // Simulate a load time + setState(() { + _isLoadingMatches = true; + }); + + await Future.delayed(const Duration(milliseconds: 150)); + + if (!mounted) { + return; + } + if (composingTag != widget.userTagPlugin.tagIndex.composingSlackTag.value?.token) { + // The user changed the token. Our search results are invalid. Fizzle. + return; + } + + // Filter the user list based on the composing token. + setState(() { + _isLoadingMatches = false; + _selectMatchingUsers(composingTag); + _popoverFocusNode.requestFocus(); + }); + } + + void _selectMatchingUsers(String composingTag) { + final splitOnWhitespace = RegExp(r'\s+'); + final searchTokens = composingTag.split(splitOnWhitespace); + print("Search tokens: $searchTokens"); + + // Match user names by searching for prefix matches on each part of a + // user's name. Examples: + // + // Search "j s" can match "John Smith" and "Jane Smith". + // + // Search "fe d" can match "Franco Albany de Alice" + _matchingUsers + ..clear() + ..addAll(_userCandidates.where((user) { + final nameTokens = user.split(splitOnWhitespace); + int nameSearchTokenOffset = 0; + for (int i = 0; i < searchTokens.length; i += 1) { + if (i >= nameTokens.length) { + return false; + } + + int matchOffset = nameSearchTokenOffset; + for (; matchOffset < nameTokens.length; matchOffset += 1) { + if (nameTokens[matchOffset].toLowerCase().startsWith(searchTokens[i].toLowerCase())) { + break; + } + } + + if (matchOffset >= nameTokens.length) { + // We didn't find any downstream match for the search token in this user's + // name. Don't include it. + return false; + } + + nameSearchTokenOffset = matchOffset + 1; + } + + return true; + })); + } + + void _onUserSelected(Object name) { + widget.editor.execute([ + FillInComposingSlackTagRequest(name as String), + ]); + } + + void _cancelTag() { + widget.editor.execute([ + CancelComposingSlackTagRequest(), + ]); + } + + @override + Widget build(BuildContext context) { + if (_matchingUsers.isEmpty) { + return const SizedBox(); + } + + return PopoverList( + editorFocusNode: widget.editorFocusNode, + popoverFocusNode: _popoverFocusNode, + leaderLink: _composingLink, + listItems: _matchingUsers + .map( + (userName) => PopoverListItem(id: userName, label: userName), + ) + .toList(), + isLoading: _isLoadingMatches, + onListItemSelected: _onUserSelected, + onCancelRequested: _cancelTag, + ); + } +} diff --git a/super_editor/example/lib/demos/in_the_lab/popover_list.dart b/super_editor/example/lib/demos/in_the_lab/popover_list.dart index c7e8b445df..797ad2d51d 100644 --- a/super_editor/example/lib/demos/in_the_lab/popover_list.dart +++ b/super_editor/example/lib/demos/in_the_lab/popover_list.dart @@ -13,6 +13,7 @@ class PopoverList extends StatefulWidget { const PopoverList({ super.key, required this.editorFocusNode, + this.popoverFocusNode, required this.leaderLink, required this.listItems, this.isLoading = false, @@ -24,6 +25,10 @@ class PopoverList extends StatefulWidget { /// of this widget. final FocusNode editorFocusNode; + /// [FocusNode] that's attached to the popover, which routes key presses to the + /// popover list. + final FocusNode? popoverFocusNode; + /// Link to the widget that this popover follows. final LeaderLink leaderLink; @@ -59,7 +64,7 @@ class _PopoverListState extends State { void initState() { super.initState(); - _focusNode = FocusNode(); + _focusNode = widget.popoverFocusNode ?? FocusNode(); _scrollController = ScrollController(); WidgetsBinding.instance.addPostFrameCallback((timeStamp) { @@ -73,17 +78,22 @@ class _PopoverListState extends State { void didUpdateWidget(PopoverList oldWidget) { super.didUpdateWidget(oldWidget); + if (widget.popoverFocusNode != oldWidget.popoverFocusNode) { + _focusNode = widget.popoverFocusNode ?? FocusNode(); + } + if (widget.listItems.length != oldWidget.listItems.length) { + print("Popover list items: ${widget.listItems}"); // Make sure that the user's selection index remains in bound, even when // the list items are switched out. - _selectedValueIndex = min(_selectedValueIndex, widget.listItems.length - 1); + _selectedValueIndex = min(0, widget.listItems.length - 1); + print("Selected value index: $_selectedValueIndex"); } } @override void dispose() { _scrollController.dispose(); - _focusNode.dispose(); super.dispose(); } @@ -135,6 +145,7 @@ class _PopoverListState extends State { @override Widget build(BuildContext context) { + print("Selected item index: $_selectedValueIndex"); return SuperEditorPopover( popoverFocusNode: _focusNode, editorFocusNode: widget.editorFocusNode, @@ -195,10 +206,12 @@ class _PopoverListState extends State { size: 14, ), const SizedBox(width: 8), - Text( - widget.listItems[i].label, - style: TextStyle( - color: Colors.white, + Expanded( + child: Text( + widget.listItems[i].label, + style: TextStyle( + color: Colors.white, + ), ), ), ], diff --git a/super_editor/example/lib/main.dart b/super_editor/example/lib/main.dart index f8b0416934..51a266ca0a 100644 --- a/super_editor/example/lib/main.dart +++ b/super_editor/example/lib/main.dart @@ -13,6 +13,7 @@ import 'package:example/demos/editor_configs/demo_mobile_editing_ios.dart'; import 'package:example/demos/example_editor/example_editor.dart'; import 'package:example/demos/in_the_lab/feature_action_tags.dart'; import 'package:example/demos/in_the_lab/feature_pattern_tags.dart'; +import 'package:example/demos/in_the_lab/feature_slack_tags.dart'; import 'package:example/demos/in_the_lab/feature_stable_tags.dart'; import 'package:example/demos/flutter_features/demo_inline_widgets.dart'; import 'package:example/demos/flutter_features/textinputclient/basic_text_input_client.dart'; @@ -302,6 +303,13 @@ final _menu = <_MenuGroup>[ return const UserTagsFeatureDemo(); }, ), + _MenuItem( + icon: Icons.account_circle, + title: 'Slack Tags', + pageBuilder: (context) { + return const SlackTagsFeatureDemo(); + }, + ), _MenuItem( icon: Icons.task, title: 'Action Tags', diff --git a/super_editor/lib/src/clones/slack/slack_tags.dart b/super_editor/lib/src/clones/slack/slack_tags.dart new file mode 100644 index 0000000000..e3f466b545 --- /dev/null +++ b/super_editor/lib/src/clones/slack/slack_tags.dart @@ -0,0 +1,1517 @@ +import 'dart:math'; + +import 'package:attributed_text/attributed_text.dart'; +import 'package:collection/collection.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/foundation.dart'; +import 'package:flutter/services.dart'; +import 'package:super_editor/src/core/document.dart'; +import 'package:super_editor/src/core/document_composer.dart'; +import 'package:super_editor/src/core/document_selection.dart'; +import 'package:super_editor/src/core/edit_context.dart'; +import 'package:super_editor/src/core/editor.dart'; +import 'package:super_editor/src/default_editor/document_hardware_keyboard/document_input_keyboard.dart'; +import 'package:super_editor/src/default_editor/multi_node_editing.dart'; +import 'package:super_editor/src/default_editor/super_editor.dart'; +import 'package:super_editor/src/default_editor/text.dart'; +import 'package:super_editor/src/default_editor/text_tokenizing/tags.dart'; +import 'package:super_editor/src/infrastructure/_logging.dart'; +import 'package:super_editor/src/infrastructure/keyboard.dart'; +import 'package:super_editor/src/infrastructure/strings.dart'; + +/// A [SuperEditor] plugin that adds the ability to create Slack-style tags, such as +/// persistent user references, e.g., "@dash". +/// +/// Slack tagging includes three modes: +/// * Composing: a tag is being assembled, i.e., typed. +/// * Committed: a tag is done being assembled - it's now uneditable. +/// * Unbound: a tag is doing being assembled, but it references an unknown entity - it's still editable. +/// * Cancelled: a tag was being composed, but the composition was cancelled. +class SlackTagPlugin extends SuperEditorPlugin { + /// The key used to access the [SlackTagIndex] in an attached [Editor]. + static const slackTagIndexKey = "slackTagIndex"; + + static const _trigger = "@"; + + SlackTagPlugin() : tagIndex = SlackTagIndex() { + _requestHandlers = [ + (request) => + request is FillInComposingSlackTagRequest ? FillInComposingSlackTagCommand(_trigger, request.tag) : null, + (request) => request is CancelComposingSlackTagRequest // + ? const CancelComposingSlackTagCommand() + : null, + ]; + + _reactions = [ + SlackTagReaction( + trigger: _trigger, + onUpdateComposingTag: tagIndex._onComposingTagFound, + ), + const AdjustSelectionAroundSlackTagReaction(_trigger), + ]; + } + + /// Index of all slack tags in the document, which changes as the user adds and removes tags. + final SlackTagIndex tagIndex; + + @override + void attach(Editor editor) { + editor + ..context.put(SlackTagPlugin.slackTagIndexKey, tagIndex) + ..requestHandlers.insertAll(0, _requestHandlers) + ..reactionPipeline.insertAll(0, _reactions); + } + + @override + void detach(Editor editor) { + editor + ..context.remove(SlackTagPlugin.slackTagIndexKey) + ..requestHandlers.removeWhere((item) => _requestHandlers.contains(item)) + ..reactionPipeline.removeWhere((item) => _reactions.contains(item)); + } + + late final List _requestHandlers; + + late final List _reactions; + + @override + List get keyboardActions => [_cancelOnEscape]; + ExecutionInstruction _cancelOnEscape({ + required SuperEditorContext editContext, + required KeyEvent keyEvent, + }) { + if (keyEvent is KeyDownEvent || keyEvent is KeyRepeatEvent) { + return ExecutionInstruction.continueExecution; + } + + if (keyEvent.logicalKey != LogicalKeyboardKey.escape) { + return ExecutionInstruction.continueExecution; + } + + final tagIndex = editContext.editor.context.find(SlackTagPlugin.slackTagIndexKey); + if (!tagIndex.isComposing) { + return ExecutionInstruction.continueExecution; + } + + editContext.editor.execute([ + const CancelComposingSlackTagRequest(), + ]); + + return ExecutionInstruction.haltExecution; + } +} + +/// An [EditRequest] that replaces a composing slack tag with the given [tag] +/// and commits it. +/// +/// For example, the user types "@da|", and then selects "dash" from a list of +/// matching users. This request replaces "@da|" with "@dash |" and converts the tag +/// from a composing user tag to a committed user tag. +/// +/// For this request to have an effect, the user's selection must sit somewhere within +/// the composing user tag. +class FillInComposingSlackTagRequest implements EditRequest { + const FillInComposingSlackTagRequest( + this.tag, + ); + + final String tag; + + @override + bool operator ==(Object other) => + identical(this, other) || + other is FillInComposingSlackTagRequest && runtimeType == other.runtimeType && tag == other.tag; + + @override + int get hashCode => tag.hashCode; +} + +class FillInComposingSlackTagCommand implements EditCommand { + const FillInComposingSlackTagCommand( + this._trigger, + this._tag, + ); + + final String _trigger; + final String _tag; + + @override + void execute(EditContext context, CommandExecutor executor) { + final document = context.find(Editor.documentKey); + final tagIndex = context.find(SlackTagPlugin.slackTagIndexKey); + + if (!tagIndex.isComposing) { + return; + } + + // Remove the composing attribution from the text. + final removeComposingAttributionCommand = _removeSlackComposingTokenAttribution(document, tagIndex); + + // Insert the final text and apply a stable tag attribution. + final tag = tagIndex.composingSlackTag.value!; + final textNode = document.getNodeById(tag.contentBounds.start.nodeId) as TextNode; + final slackTagAttribution = CommittedSlackTagAttribution(_tag); + + // The text offset immediately after the trigger ("@"). + final startOfToken = (tag.contentBounds.start.nodePosition as TextNodePosition).offset; + + // Place the caret after the trigger so that the caret isn't temporarily beyond the + // end of the text. + executor.executeCommand( + ChangeSelectionCommand( + // +1 for trigger symbol + textNode.selectionAt(startOfToken + 1), + SelectionChangeType.placeCaret, + SelectionReason.contentChange, + ), + ); + + // Delete the composing slack tag text. + executor.executeCommand( + DeleteContentCommand( + documentRange: textNode.selectionBetween( + startOfToken, + (tag.contentBounds.end.nodePosition as TextNodePosition).offset, + ), + ), + ); + + // Insert a committed slack tag. + executor.executeCommand( + InsertAttributedTextCommand( + documentPosition: textNode.positionAt(startOfToken), + textToInsert: AttributedText( + "$_trigger$_tag ", + AttributedSpans( + attributions: [ + SpanMarker(attribution: slackTagAttribution, offset: 0, markerType: SpanMarkerType.start), + SpanMarker(attribution: slackTagAttribution, offset: _tag.length, markerType: SpanMarkerType.end), + ], + ), + ), + ), + ); + + // Place the caret at the end of the inserted text. + executor.executeCommand( + ChangeSelectionCommand( + // +1 for trigger, +1 for space after the token + textNode.selectionAt(startOfToken + _tag.length + 2), + SelectionChangeType.placeCaret, + SelectionReason.contentChange, + ), + ); + + // Remove the composing region after we apply the stable attribution to avoid a + // reaction automatically re-applying the composing tag. + // FIXME: Use a transaction to bundle these changes so order doesn't matter. + if (removeComposingAttributionCommand != null) { + executor.executeCommand(removeComposingAttributionCommand); + print("Attributions immediately after removing composing attribution:"); + print("${textNode.text.getAttributionSpansByFilter((a) => true)}"); + } + + // Reset the tag index so that we're no longer composing a tag. + tagIndex._composingSlackTag.value = null; + } +} + +/// An [EditRequest] that cancels an on-going slack tag composition near the user's selection. +/// +/// When a user is in the process of composing a slack tag, that tag is given an attribution +/// to identify it. After this request is processed, that attribution will be removed from +/// the text, which will also remove any related UI, such as a suggested-value popover. +/// +/// This request doesn't change the user's selection. +class CancelComposingSlackTagRequest implements EditRequest { + const CancelComposingSlackTagRequest(); +} + +class CancelComposingSlackTagCommand implements EditCommand { + const CancelComposingSlackTagCommand(); + + @override + void execute(EditContext context, CommandExecutor executor) { + final tagIndex = context.find(SlackTagPlugin.slackTagIndexKey); + if (!tagIndex.isComposing) { + return; + } + + final document = context.find(Editor.documentKey); + + // Remove the composing attribution from the text. + final removeComposingAttributionCommand = _removeSlackComposingTokenAttribution(document, tagIndex); + + // Reset the tag index. + final tag = tagIndex.composingSlackTag.value!; + tagIndex._composingSlackTag.value = null; + + // Mark the trigger as cancelled, so we don't immediately convert it back to a tag. + final nodeWithTag = document.getNodeById(tag.contentBounds.start.nodeId) as TextNode?; + if (nodeWithTag == null) { + // The node is gone. It may have been deleted. Nothing more for us to do. + return; + } + + // TODO: move this into a command. Don't directly mutate the document. + final triggerOffset = (tag.contentBounds.start.nodePosition as TextNodePosition).offset; + nodeWithTag.text.addAttribution( + slackTagCancelledAttribution, + SpanRange(triggerOffset, triggerOffset), + ); + + // Remove the composing region after we apply the cancelled attribution to avoid a + // reaction automatically re-applying the composing tag. + // FIXME: Use a transaction to bundle these changes so order doesn't matter. + if (removeComposingAttributionCommand != null) { + executor.executeCommand(removeComposingAttributionCommand); + } + } +} + +EditCommand? _removeSlackComposingTokenAttribution(Document document, SlackTagIndex tagIndex) { + print("REMOVING COMPOSING ATTRIBUTION"); + // Remove any composing attribution for the previous state of the tag. + // It's possible that the previous composing region disappeared, e.g., due to a deletion. + final previousTag = tagIndex._composingSlackTag.value!; + final previousTagNode = + document.getNodeById(previousTag.contentBounds.start.nodeId); // We assume tags don't cross node boundaries. + if (previousTagNode == null || previousTagNode is! TextNode) { + print("Couldn't find composing attribution. Fizzling."); + return null; + } + + return RemoveTextAttributionsCommand( + documentRange: DocumentRange( + start: DocumentPosition( + nodeId: previousTagNode.id, + nodePosition: const TextNodePosition(offset: 0), + ), + end: DocumentPosition( + nodeId: previousTagNode.id, + nodePosition: TextNodePosition(offset: previousTagNode.text.length), + ), + ), + attributions: {slackTagComposingAttribution}, + ); +} + +extension SlackTagIndexEditable on EditContext { + /// Returns the [SlackTagIndex] that the [SlackTagPlugin] added to the attached [Editor]. + /// + /// This accessor is provided as a convenience so that clients don't need to call `find()` + /// on the [EditContext]. + SlackTagIndex get slackTagIndex => find(SlackTagPlugin.slackTagIndexKey); +} + +/// An [EditReaction] that creates, updates, and removes composing slack tags, and commits those +/// composing tags, causing them to become uneditable. +class SlackTagReaction implements EditReaction { + SlackTagReaction({ + required this.trigger, + this.maxTriggerRange = 15, + this.onUpdateComposingTag, + }); + + /// The character that triggers a tag, e.g., "@". + final String trigger; + + /// The maximum distance the caret can sit from the trigger while causing a tag composition. + final int maxTriggerRange; + + /// Callback that's notified of all changes to the current composing tag, including + /// the start of composition, a change to the composing value, and the cancellation of + /// composition. + final OnUpdateComposingSlackTag? onUpdateComposingTag; + + @override + void react(EditContext editContext, RequestDispatcher requestDispatcher, List changeList) { + final document = editContext.find(Editor.documentKey); + final composer = editContext.find(Editor.composerKey); + final tagIndex = editContext.find(SlackTagPlugin.slackTagIndexKey); + + editorSlackTagsLog.info("------------------------------------------------------"); + editorSlackTagsLog.info("Reacting to possible slack tagging"); + editorSlackTagsLog.info("Incoming change list:"); + editorSlackTagsLog.info(changeList.map((event) => event.runtimeType).toList()); + editorSlackTagsLog.info( + "Caret position: ${editContext.find(Editor.composerKey).selection?.extent.nodePosition}"); + editorSlackTagsLog.info("Is already composing a tag? ${tagIndex.isComposing}"); + + if (changeList.length == 1 && changeList.first is SelectionChangeEvent) { + print("Selection change event: ${(changeList.first as SelectionChangeEvent).changeType}"); + } + + // Update the current tag composition. + final selection = composer.selection; + _updateTagComposition(requestDispatcher, document, tagIndex, selection); + + // _healCancelledTags(requestDispatcher, document, changeList); + + // _adjustTagAttributionsAroundAlteredTags(editContext, requestDispatcher, changeList); + + _deleteCommittedTagsThatWerePartiallyDeleted(editContext, requestDispatcher, changeList); + + // _createNewComposingTag(editContext, requestDispatcher, changeList); + + // Run tag commits after updating tags, above, so that we don't commit an in-progress + // tag when a new character is added to the end of the tag. + // _commitCompletedComposingTag(editContext, requestDispatcher, changeList); + + // _updateTagIndex(editContext, changeList); + + editorSlackTagsLog.info("------------------------------------------------------"); + } + + void _updateTagComposition( + RequestDispatcher requestDispatcher, Document document, SlackTagIndex tagIndex, DocumentSelection? selection) { + // If, in tbe previous frame, we were composing a tag, check if we're still in range of + // the tag. If not, cancel the composing process. + if (tagIndex.isComposing) { + if (selection == null || !selection.isCollapsed) { + _stopComposing(requestDispatcher, document, tagIndex); + } else { + final tag = _findUpstreamTagWithinRange(document, selection.extent); + + if (tagIndex.composingSlackTag.value != tag && tag != null) { + _updateComposing(requestDispatcher, document, tagIndex, tag); + } + + if (tag == null) { + _stopComposing(requestDispatcher, document, tagIndex); + } + } + } + + // Check if caret is in range of an upstream trigger. If so, start composing. + if (!tagIndex.isComposing && selection != null && selection.isCollapsed) { + final tag = _findUpstreamTagWithinRange(document, selection.extent); + if (tag != null) { + _startComposing(requestDispatcher, tagIndex, tag); + } + } + } + + void _startComposing(RequestDispatcher requestDispatcher, SlackTagIndex tagIndex, ComposingSlackTag tag) { + if (tagIndex.isComposing) { + return; + } + + editorSlackTagsLog + .info("Starting new tag composition at offset ${tag.contentBounds.start}, initial token: '${tag.token}'"); + tagIndex._composingSlackTag.value = tag; + + requestDispatcher.execute([ + AddTextAttributionsRequest( + documentRange: tag.contentBounds, + attributions: {slackTagComposingAttribution}, + ), + ]); + + onUpdateComposingTag?.call(tag); + } + + void _updateComposing( + RequestDispatcher requestDispatcher, Document document, SlackTagIndex tagIndex, ComposingSlackTag newTag) { + _removePreviousTagComposingAttribution(requestDispatcher, document, tagIndex); + + // Update the tag index for the new tag. + tagIndex._composingSlackTag.value = newTag; + onUpdateComposingTag?.call(newTag); + + // Add composing attribution for the updated tag bounds. + print("Updating composing attribution with bounds: ${newTag.contentBounds}"); + requestDispatcher.execute([ + AddTextAttributionsRequest( + documentRange: newTag.contentBounds, + attributions: {slackTagComposingAttribution}, + ), + ]); + } + + void _stopComposing(RequestDispatcher requestDispatcher, Document document, SlackTagIndex tagIndex) { + if (!tagIndex.isComposing) { + return; + } + + _removePreviousTagComposingAttribution(requestDispatcher, document, tagIndex); + + editorSlackTagsLog.info("Stopping tag composition"); + tagIndex._composingSlackTag.value = null; + + onUpdateComposingTag?.call(null); + } + + void _removePreviousTagComposingAttribution( + RequestDispatcher requestDispatcher, Document document, SlackTagIndex tagIndex) { + // Remove any composing attribution for the previous state of the tag. + // It's possible that the previous composing region disappeared, e.g., due to a deletion. + final previousTag = tagIndex._composingSlackTag.value!; + final previousTagNode = + document.getNodeById(previousTag.contentBounds.start.nodeId); // We assume tags don't cross node boundaries. + if (previousTagNode == null || previousTagNode is! TextNode || previousTagNode.text.text.isEmpty) { + return; + } + + requestDispatcher.execute([ + RemoveTextAttributionsRequest( + documentRange: DocumentRange( + start: DocumentPosition( + nodeId: previousTagNode.id, + nodePosition: const TextNodePosition(offset: 0), + ), + end: DocumentPosition( + nodeId: previousTagNode.id, + nodePosition: TextNodePosition(offset: previousTagNode.text.length), + ), + ), + attributions: {slackTagComposingAttribution}, + ), + ]); + } + + /// Searches for a trigger character upstream from the [caret] and, if one a trigger is + /// found, returns a [ComposingSlackTag] with info about the text and bounds related to + /// the tag. + /// + /// The search only looks as far upstream as the [maxTriggerRange]. + /// + /// If no trigger character is found within [maxTriggerRange], `null` is returned. + /// + /// If a trigger character is found, but the trigger is attributed with [slackTagCancelledAttribution] + /// then `null` is returned. + /// + /// If a trigger character is found, but the trigger is attributed with a [CommittedSlackTagAttribution] + /// then `null` is returned. + ComposingSlackTag? _findUpstreamTagWithinRange(Document document, DocumentPosition caret) { + final textNode = document.getNodeById(caret.nodeId); + if (textNode is! TextNode) { + return null; + } + + final caretTextPosition = caret.nodePosition; + if (caretTextPosition is! TextNodePosition) { + return null; + } + + editorSlackTagsLog.fine( + "Looking for trigger upstream from caret in node: '${textNode.id}' from caret index ${caretTextPosition.offset}"); + editorSlackTagsLog.fine("Current text is: '${textNode.text.text}'"); + int triggerOffset = caretTextPosition.offset; + final textIterator = textNode.text.text.characters.iterator; + textIterator + ..moveNext(triggerOffset) + ..collapseToEnd(); + while (!textIterator.startsWith(trigger.characters) && + triggerOffset > 0 && + (caretTextPosition.offset - triggerOffset) <= maxTriggerRange) { + textIterator.moveBack(); + triggerOffset -= 1; + } + + if (textNode.text.hasAttributionAt(triggerOffset, attribution: slackTagCancelledAttribution)) { + // We found a trigger character but the user explicitly cancelled an earlier + // tag composition at that trigger. Ignore it. + editorSlackTagsLog.fine("Found an upstream trigger, but it was previously cancelled for composing. Ignoring it."); + return null; + } + + if (textNode.text.getAllAttributionsAt(triggerOffset).whereType().isNotEmpty) { + // We found a trigger character but it belongs to a committed tag. Ignore it. + editorSlackTagsLog.fine("Found an upstream trigger, but it's already committed. Ignoring it."); + return null; + } + + if (textIterator.startsWith(trigger.characters)) { + editorSlackTagsLog + .fine("Found an upstream trigger at offset $triggerOffset, caret offset: ${caretTextPosition.offset}"); + + final tagToken = triggerOffset != caretTextPosition.offset // + ? textNode.text.text.substring(triggerOffset + 1, caretTextPosition.offset) + : ""; + if (tagToken.startsWith(" ")) { + // As a matter of policy, we don't activate tag composition if the first character + // after the trigger is a space. + return null; + } + + return ComposingSlackTag( + textNode.rangeBetween( + triggerOffset, + caretTextPosition.offset, + ), + tagToken, + ); + } + + editorSlackTagsLog.fine("Didn't find any upstream trigger."); + return null; + } + + /// Removes composing or cancelled slack tag attributions from any tag that no longer + /// matches the pattern of a slack tag. + /// + /// Example: + /// + /// - |@john| -> |john| -> john + void _deleteCommittedTagsThatWerePartiallyDeleted( + EditContext editContext, + RequestDispatcher requestDispatcher, + List changeList, + ) { + editorSlackTagsLog.info("Removing invalid tags."); + final document = editContext.find(Editor.documentKey); + final nodesToInspect = {}; + for (final edit in changeList) { + // We only care about deleted text, in case the deletion made an existing tag invalid. + if (edit is! DocumentEdit) { + continue; + } + final change = edit.change; + if (change is! TextDeletedEvent) { + continue; + } + if (document.getNodeById(change.nodeId) == null) { + // This node was deleted sometime later. No need to consider it. + continue; + } + + // We only care about deleted text when the deleted text contains at least one tag. + final tagsInDeletedText = change.deletedText.getAttributionSpansByFilter( + (attribution) => attribution == slackTagComposingAttribution || attribution is CommittedSlackTagAttribution, + ); + if (tagsInDeletedText.isEmpty) { + continue; + } + + nodesToInspect.add(change.nodeId); + } + editorSlackTagsLog.fine("Found ${nodesToInspect.length} impacted nodes with tags that might be invalid"); + + // Inspect every TextNode where a text deletion impacted a tag. + // final removeTagRequests = {}; + final deleteTagRequests = {}; + for (final nodeId in nodesToInspect) { + final textNode = document.getNodeById(nodeId) as TextNode; + + // // If a composing tag no longer contains a trigger ("@"), remove the attribution. + // final allComposingTags = textNode.text.getAttributionSpansInRange( + // attributionFilter: (attribution) => attribution == slackTagComposingAttribution, + // range: SpanRange(0, textNode.text.length - 1), + // ); + // + // for (final tag in allComposingTags) { + // final tagText = textNode.text.substring(tag.start, tag.end + 1); + // + // if (!tagText.startsWith(trigger)) { + // editorSlackTagsLog.info("Removing tag with value: '$tagText'"); + // + // onUpdateComposingTag?.call(null); + // + // removeTagRequests.add( + // RemoveTextAttributionsRequest( + // documentRange: textNode.selectionBetween(tag.start, tag.end + 1), + // attributions: {slackTagComposingAttribution}, + // ), + // ); + // } + // } + + // If a slack tag's content no longer matches its attribution value, then + // assume that the user tried to delete part of it. Delete the whole thing, + // because we don't allow partial committed user tags. + + // Collect all the slack tags in this node. The list is sorted such that + // later tags appear before earlier tags. This way, as we delete tags, each + // deleted tag won't impact the character offsets of the following tags + // that we delete. + final allSlackTags = textNode.text + .getAttributionSpansInRange( + attributionFilter: (attribution) => attribution is CommittedSlackTagAttribution, + range: SpanRange(0, textNode.text.length - 1), + ) + .sorted((tag1, tag2) => tag2.start - tag1.start); + + // Track the impact of deletions on selection bounds, then update the selection + // to reflect the deletions. + final composer = editContext.find(Editor.composerKey); + + final baseBeforeDeletions = composer.selection!.base; + int baseOffsetAfterDeletions = baseBeforeDeletions.nodePosition is TextNodePosition + ? (baseBeforeDeletions.nodePosition as TextNodePosition).offset + : -1; + + final extentBeforeDeletions = composer.selection!.extent; + int extentOffsetAfterDeletions = extentBeforeDeletions.nodePosition is TextNodePosition + ? (extentBeforeDeletions.nodePosition as TextNodePosition).offset + : -1; + + for (final tag in allSlackTags) { + final tagText = textNode.text.substring(tag.start, tag.end + 1); + final attribution = tag.attribution as CommittedSlackTagAttribution; + final containsTrigger = textNode.text.text[tag.start] == trigger; + + if (tagText != "$trigger${attribution.tagValue}" || !containsTrigger) { + // The tag was partially deleted it. Delete the whole thing. + final deleteFrom = tag.start; + final deleteTo = tag.end + 1; // +1 because SpanRange is inclusive and text position is exclusive + editorSlackTagsLog.info("Deleting partial tag '$tagText': $deleteFrom -> $deleteTo"); + + if (baseBeforeDeletions.nodeId == textNode.id) { + if (baseOffsetAfterDeletions >= deleteTo) { + // The base sits beyond the entire deletion region. Push the base up by the + // length of the deletion region. + baseOffsetAfterDeletions -= deleteTo - deleteFrom; + } else if (baseOffsetAfterDeletions > deleteFrom) { + // The base sits somewhere within the deletion region. Move it to the beginning + // of the deletion region. + baseOffsetAfterDeletions = deleteFrom; + } + } + + if (extentBeforeDeletions.nodeId == textNode.id) { + if (extentOffsetAfterDeletions >= deleteTo) { + // The extent sits beyond the entire deletion region. Push the extent up by the + // length of the deletion region. + extentOffsetAfterDeletions -= deleteTo - deleteFrom; + } else if (extentOffsetAfterDeletions > deleteFrom) { + // The extent sits somewhere within the deletion region. Move it to the beginning + // of the deletion region. + extentOffsetAfterDeletions = deleteFrom; + } + } + + deleteTagRequests.add( + DeleteContentRequest( + documentRange: textNode.selectionBetween(deleteFrom, deleteTo), + ), + ); + } + } + + if (deleteTagRequests.isNotEmpty) { + deleteTagRequests.add( + ChangeSelectionRequest( + DocumentSelection( + base: baseOffsetAfterDeletions >= 0 ? textNode.positionAt(baseOffsetAfterDeletions) : baseBeforeDeletions, + extent: extentOffsetAfterDeletions >= 0 + ? textNode.positionAt(extentOffsetAfterDeletions) + : extentBeforeDeletions, + ), + SelectionChangeType.placeCaret, + SelectionReason.contentChange, + ), + ); + } + } + + // Run all the tag attribution removal requests, and tag deletion requests, + // that we queued up. + requestDispatcher.execute([ + // ...removeTagRequests, + ...deleteTagRequests, + ]); + } + + void _commitTag(RequestDispatcher requestDispatcher, TextNode textNode, IndexedTag tag) { + onUpdateComposingTag?.call(null); + + final tagSelection = textNode.selectionBetween(tag.startOffset, tag.endOffset); + + requestDispatcher + // Remove composing tag attribution. + ..execute([ + RemoveTextAttributionsRequest( + documentRange: tagSelection, + attributions: {slackTagComposingAttribution}, + ) + ]) + // Add stable tag attribution. + ..execute([ + AddTextAttributionsRequest( + documentRange: tagSelection, + attributions: { + CommittedSlackTagAttribution(textNode.text.substring( + tag.startOffset + 1, // +1 to remove the trigger ("@") from the value + tag.endOffset, + )) + }, + ) + ]); + } + + TagAroundPosition? _findComposingTagAtCaret(EditContext editContext) { + return _findTagAtCaret(editContext, (attributions) => attributions.contains(slackTagComposingAttribution)); + } + + TagAroundPosition? _findTagAtCaret( + EditContext editContext, + bool Function(Set attributions) tagSelector, + ) { + final composer = editContext.find(Editor.composerKey); + if (composer.selection == null || !composer.selection!.isCollapsed) { + // We only tag when the selection is collapsed. Our selection is null or expanded. Return. + return null; + } + final selectionPosition = composer.selection!.extent; + final caretPosition = selectionPosition.nodePosition; + if (caretPosition is! TextNodePosition) { + // Tagging only happens in the middle of text. The selected content isn't text. Return. + return null; + } + + final document = editContext.find(Editor.documentKey); + final selectedNode = document.getNodeById(selectionPosition.nodeId); + if (selectedNode is! TextNode) { + // Tagging only happens in the middle of text. The selected content isn't text. Return. + return null; + } + + return SlackTagFinder.findTagAroundPosition( + nodeId: selectedNode.id, + text: selectedNode.text, + trigger: trigger, + expansionPosition: caretPosition, + isTokenCandidate: tagSelector, + ); + } +} + +typedef OnUpdateComposingSlackTag = void Function(ComposingSlackTag? composingSlackTag); + +/// Collects references to all slack tags in a document for easy querying. +class SlackTagIndex with ChangeNotifier implements Editable { + bool get isComposing => _composingSlackTag.value != null; + + /// Returns the active [ComposingSlackTag], if the user is currently composing a slack tag, + /// or `null` if no slack tag is currently being composed. + ValueListenable get composingSlackTag => _composingSlackTag; + final _composingSlackTag = ValueNotifier(null); + + void _onComposingTagFound(ComposingSlackTag? tag) { + _composingSlackTag.value = tag; + } + + final _committedTags = >{}; + + Set getCommittedTagsInTextNode(String nodeId) => _committedTags[nodeId] ?? {}; + + Set getAllCommittedTags() { + final tags = {}; + for (final value in _committedTags.values) { + tags.addAll(value); + } + return tags; + } + + void _setCommittedTagsInNode(String nodeId, Set tags) { + _committedTags[nodeId] ??= {}; + + if (const DeepCollectionEquality().equals(_committedTags[nodeId], tags)) { + return; + } + + _committedTags[nodeId]! + ..clear() + ..addAll(tags); + _onChange(); + } + + void _clearCommittedTagsInNode(String nodeId) { + if (_committedTags[nodeId] == null || _committedTags[nodeId]!.isEmpty) { + return; + } + + _committedTags[nodeId]?.clear(); + _onChange(); + } + + final _cancelledTags = >{}; + + Set getCancelledTagsInTextNode(String nodeId) => _cancelledTags[nodeId] ?? {}; + + Set getAllCancelledTags() { + final tags = {}; + for (final value in _cancelledTags.values) { + tags.addAll(value); + } + return tags; + } + + void _setCancelledTagsInNode(String nodeId, Set tags) { + _cancelledTags[nodeId] ??= {}; + + if (const DeepCollectionEquality().equals(_cancelledTags[nodeId], tags)) { + return; + } + + _cancelledTags[nodeId]! + ..clear() + ..addAll(tags); + _onChange(); + } + + void _clearCancelledTagsInNode(String nodeId) { + if (_cancelledTags[nodeId] == null || _cancelledTags[nodeId]!.isEmpty) { + return; + } + + _cancelledTags[nodeId]?.clear(); + _onChange(); + } + + bool _isInATransaction = false; + bool _didChange = false; + + @override + void onTransactionStart() { + _isInATransaction = true; + _didChange = false; + } + + void _onChange() { + if (!_isInATransaction) { + return; + } + + _didChange = true; + } + + @override + void onTransactionEnd(List edits) { + _isInATransaction = false; + if (_didChange) { + _didChange = false; + notifyListeners(); + } + } +} + +class ComposingSlackTag { + const ComposingSlackTag(this.contentBounds, this.token); + + final DocumentRange contentBounds; + final String token; + + @override + bool operator ==(Object other) => + identical(this, other) || + other is ComposingSlackTag && + runtimeType == other.runtimeType && + contentBounds == other.contentBounds && + token == other.token; + + @override + int get hashCode => contentBounds.hashCode ^ token.hashCode; +} + +/// An [EditReaction] that prevents partial selection of a slack user tag. +class AdjustSelectionAroundSlackTagReaction implements EditReaction { + const AdjustSelectionAroundSlackTagReaction(this.trigger); + + final String trigger; + + @override + void react(EditContext editContext, RequestDispatcher requestDispatcher, List changeList) { + editorSlackTagsLog.info("KeepCaretOutOfTagReaction - react()"); + + SelectionChangeEvent? selectionChangeEvent; + bool hasNonSelectionOrComposingRegionChange = false; + + if (changeList.length >= 2) { + // Check if we have any event that isn't a selection or composing region change. + hasNonSelectionOrComposingRegionChange = + changeList.any((e) => e is! SelectionChangeEvent && e is! ComposingRegionChangeEvent); + selectionChangeEvent = changeList.firstWhereOrNull((e) => e is SelectionChangeEvent) as SelectionChangeEvent?; + } else if (changeList.length == 1 && changeList.first is SelectionChangeEvent) { + selectionChangeEvent = changeList.first as SelectionChangeEvent; + } + + if (hasNonSelectionOrComposingRegionChange || selectionChangeEvent == null) { + // We only want to move the caret when we're confident about what changed. Therefore, + // we only react to changes that are solely a selection or composing region change, + // i.e., we ignore situations like text entry, text deletion, etc. + editorSlackTagsLog.info(" - change list isn't just a single SelectionChangeEvent: $changeList"); + return; + } + + editorSlackTagsLog.info(" - we received just one selection change event. Checking for user tag."); + + final document = editContext.find(Editor.documentKey); + + final newCaret = selectionChangeEvent.newSelection?.extent; + if (newCaret == null) { + editorSlackTagsLog.fine(" - there's no caret/extent. Fizzling."); + return; + } + + if (selectionChangeEvent.newSelection!.isCollapsed) { + final textNode = document.getNodeById(newCaret.nodeId); + if (textNode == null || textNode is! TextNode) { + // The selected content isn't text. We don't need to worry about it. + editorSlackTagsLog.fine(" - selected content isn't text. Fizzling."); + return; + } + + _adjustCaretPosition( + editContext: editContext, + requestDispatcher: requestDispatcher, + textNode: textNode, + selectionChangeEvent: selectionChangeEvent, + newCaret: newCaret, + ); + } else { + _adjustExpandedSelection( + editContext: editContext, + requestDispatcher: requestDispatcher, + selectionChangeEvent: selectionChangeEvent, + newCaret: newCaret, + ); + } + + print( + "Selection after adjusting for tag: ${editContext.find(Editor.composerKey).selection?.extent.nodePosition}"); + } + + void _adjustCaretPosition({ + required EditContext editContext, + required RequestDispatcher requestDispatcher, + required TextNode textNode, + required SelectionChangeEvent selectionChangeEvent, + required DocumentPosition newCaret, + }) { + editorSlackTagsLog.fine("Adjusting the caret position to avoid slack tags."); + + final tagAroundCaret = _findTagAroundPosition( + textNode.id, + textNode.text, + newCaret.nodePosition as TextNodePosition, + (attribution) => attribution is CommittedSlackTagAttribution, + ); + if (tagAroundCaret == null) { + // The caret isn't in a tag. We don't need to adjust anything. + editorSlackTagsLog + .fine(" - the caret isn't in a tag. Fizzling. Selection:\n${selectionChangeEvent.newSelection}"); + return; + } + editorSlackTagsLog.fine("Found tag around caret - $tagAroundCaret"); + + // The new caret position sits inside of a tag. We need to move it outside the tag. + editorSlackTagsLog.fine("Selection change type: ${selectionChangeEvent.changeType}"); + switch (selectionChangeEvent.changeType) { + case SelectionChangeType.insertContent: + // It's not obvious how this would happen when inserting content. We'll play it + // safe and do nothing in this case. + return; + case SelectionChangeType.placeCaret: + case SelectionChangeType.collapseSelection: + case SelectionChangeType.alteredContent: + case SelectionChangeType.deleteContent: + // Move the caret to the nearest edge of the tag. + _moveCaretToNearestTagEdge(requestDispatcher, selectionChangeEvent, textNode.id, tagAroundCaret); + break; + case SelectionChangeType.pushCaret: + // Move the caret to the side of the tag in the direction of push motion. + _pushCaretToOppositeTagEdge(editContext, requestDispatcher, selectionChangeEvent, textNode.id, tagAroundCaret); + break; + case SelectionChangeType.placeExtent: + case SelectionChangeType.pushExtent: + case SelectionChangeType.expandSelection: + throw AssertionError( + "A collapsed selection reported a SelectionChangeType for an expanded selection: ${selectionChangeEvent.changeType}\n${selectionChangeEvent.newSelection}"); + case SelectionChangeType.clearSelection: + throw AssertionError("Expected a collapsed selection but there was no selection."); + } + } + + void _adjustExpandedSelection({ + required EditContext editContext, + required RequestDispatcher requestDispatcher, + required SelectionChangeEvent selectionChangeEvent, + required DocumentPosition newCaret, + }) { + editorSlackTagsLog.fine("Adjusting an expanded selection to avoid a partial slack tag selection."); + + final document = editContext.find(Editor.documentKey); + final extentNode = document.getNodeById(newCaret.nodeId); + if (extentNode is! TextNode) { + // The caret isn't sitting in text. Fizzle. + return; + } + + final tagAroundCaret = _findTagAroundPosition( + extentNode.id, + extentNode.text, + newCaret.nodePosition as TextNodePosition, + (attribution) => attribution is CommittedSlackTagAttribution, + ); + + // The new caret position sits inside of a tag. We need to move it outside the tag. + editorSlackTagsLog.fine("Selection change type: ${selectionChangeEvent.changeType}"); + switch (selectionChangeEvent.changeType) { + case SelectionChangeType.insertContent: + // It's not obvious how this would happen when inserting content. We'll play it + // safe and do nothing in this case. + return; + case SelectionChangeType.placeExtent: + case SelectionChangeType.alteredContent: + case SelectionChangeType.deleteContent: + if (tagAroundCaret == null) { + return; + } + + // Move the caret to the nearest edge of the tag. + _moveCaretToNearestTagEdge(requestDispatcher, selectionChangeEvent, extentNode.id, tagAroundCaret); + break; + case SelectionChangeType.pushExtent: + if (tagAroundCaret == null) { + return; + } + + // Expand the selection by pushing the caret to the side of the tag in the direction of push motion. + _pushCaretToOppositeTagEdge( + editContext, + requestDispatcher, + selectionChangeEvent, + extentNode.id, + tagAroundCaret, + expand: true, + ); + break; + case SelectionChangeType.expandSelection: + // Move the base or extent to the side of the tag in the direction of push motion. + TextNode? baseNode; + final basePosition = selectionChangeEvent.newSelection!.base; + if (basePosition.nodePosition is TextNodePosition) { + baseNode = document.getNodeById(basePosition.nodeId) as TextNode; + } + + _pushExpandedSelectionAroundTags( + editContext, + requestDispatcher, + selectionChangeEvent, + baseNode: baseNode, + extentNode: extentNode, + ); + break; + case SelectionChangeType.placeCaret: + case SelectionChangeType.pushCaret: + case SelectionChangeType.collapseSelection: + throw AssertionError( + "An expanded selection reported a SelectionChangeType for a collapsed selection: ${selectionChangeEvent.changeType}\n${selectionChangeEvent.newSelection}"); + case SelectionChangeType.clearSelection: + throw AssertionError("Expected a collapsed selection but there was no selection."); + } + } + + TagAroundPosition? _findTagAroundPosition( + String nodeId, + AttributedText paragraphText, + TextNodePosition position, + bool Function(Attribution) attributionSelector, + ) { + final searchOffset = position.offset; + final committedTags = paragraphText.getAllAttributionsAt(searchOffset).whereType(); + if (committedTags.isEmpty) { + // The caret isn't sitting within a committed tag. Return. + return null; + } + + final tagAttributionAroundCaret = committedTags.first; + final tagAroundCaret = paragraphText.getAttributionSpans({tagAttributionAroundCaret}).first; + + if (tagAroundCaret.start == searchOffset) { + // There's a tag, but it starts immediately after the search offset. We don't want to + // report "hello |@user" as the tag sitting within "@user". + return null; + } + + return TagAroundPosition( + indexedTag: IndexedTag( + Tag(trigger, tagAttributionAroundCaret.tagValue), + nodeId, + tagAroundCaret.start, + ), + searchOffset: position.offset, + ); + + // final tagAroundCaret = SlackTagFinder.findTagAroundPosition( + // trigger: trigger, + // nodeId: nodeId, + // text: paragraphText, + // expansionPosition: position, + // isTokenCandidate: (tokenAttributions) => tokenAttributions.any(attributionSelector), + // ); + // print("tagAroundCaret: $tagAroundCaret"); + // if (tagAroundCaret == null) { + // print("1"); + // return null; + // } + // if (tagAroundCaret.searchOffsetInToken == 0 || + // tagAroundCaret.searchOffsetInToken == tagAroundCaret.indexedTag.tag.raw.length) { + // // The token is either on the starting edge, e.g., "|@tag", or at the ending edge, + // // e.g., "@tag|". We don't care about those scenarios when looking for the caret + // // inside of the token. + // print("2"); + // return null; + // } + // + // final tokenAttributions = paragraphText.getAllAttributionsThroughout( + // SpanRange( + // tagAroundCaret.indexedTag.startOffset, + // tagAroundCaret.indexedTag.endOffset - 1, + // ), + // ); + // if (tokenAttributions.any((attribution) => attribution is CommittedSlackTagAttribution)) { + // // This token is a user tag. Return it. + // print("3"); + // return tagAroundCaret; + // } + // + // print("4"); + // return null; + } + + void _moveCaretToNearestTagEdge( + RequestDispatcher requestDispatcher, + SelectionChangeEvent selectionChangeEvent, + String textNodeId, + TagAroundPosition tagAroundCaret, + ) { + DocumentSelection? newSelection; + editorSlackTagsLog.info("oldCaret is null. Pushing caret to end of tag."); + // The caret was placed directly in the token without a previous selection. This might + // be a user tap, or programmatic placement. Move the caret to the nearest edge of the + // token. + if ((tagAroundCaret.searchOffset - tagAroundCaret.indexedTag.startOffset).abs() < + (tagAroundCaret.searchOffset - tagAroundCaret.indexedTag.endOffset).abs()) { + // Move the caret to the start of the tag. + newSelection = DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: textNodeId, + nodePosition: TextNodePosition(offset: tagAroundCaret.indexedTag.startOffset), + ), + ); + } else { + // Move the caret to the end of the tag. + newSelection = DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: textNodeId, + nodePosition: TextNodePosition(offset: tagAroundCaret.indexedTag.endOffset), + ), + ); + } + + requestDispatcher.execute([ + ChangeSelectionRequest( + newSelection, + newSelection.isCollapsed ? SelectionChangeType.pushCaret : SelectionChangeType.expandSelection, + SelectionReason.contentChange, + ), + ]); + } + + void _pushCaretToOppositeTagEdge( + EditContext editContext, + RequestDispatcher requestDispatcher, + SelectionChangeEvent selectionChangeEvent, + String textNodeId, + TagAroundPosition tagAroundCaret, { + bool expand = false, + }) { + editorSlackTagsLog.info("Pushing caret to other side of token - tag around caret: $tagAroundCaret"); + final Document document = editContext.find(Editor.documentKey); + + final pushDirection = document.getAffinityBetween( + base: selectionChangeEvent.oldSelection!.extent, + extent: selectionChangeEvent.newSelection!.extent, + ); + + late int textOffset; + switch (pushDirection) { + case TextAffinity.upstream: + // Move to starting edge. + textOffset = tagAroundCaret.indexedTag.startOffset; + break; + case TextAffinity.downstream: + // Move to ending edge. + textOffset = tagAroundCaret.indexedTag.endOffset; + print("Pushing to text offset: $textOffset"); + break; + } + + final newSelection = expand + ? DocumentSelection( + base: selectionChangeEvent.newSelection!.base, + extent: DocumentPosition( + nodeId: selectionChangeEvent.newSelection!.extent.nodeId, + nodePosition: TextNodePosition( + offset: textOffset, + ), + ), + ) + : DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: selectionChangeEvent.newSelection!.extent.nodeId, + nodePosition: TextNodePosition( + offset: textOffset, + ), + ), + ); + + print("Setting selection to: $newSelection"); + + requestDispatcher.execute([ + ChangeSelectionRequest( + newSelection, + SelectionChangeType.pushCaret, + SelectionReason.contentChange, + ), + ]); + } + + void _pushExpandedSelectionAroundTags( + EditContext editContext, + RequestDispatcher requestDispatcher, + SelectionChangeEvent selectionChangeEvent, { + required TextNode? baseNode, + required TextNode? extentNode, + }) { + editorSlackTagsLog.info("Pushing expanded selection to other side(s) of token(s)"); + + final document = editContext.find(Editor.documentKey); + final selection = selectionChangeEvent.newSelection!; + final selectionAffinity = document.getAffinityForSelection(selection); + + final tagAroundBase = baseNode != null + ? _findTagAroundPosition( + baseNode.id, + baseNode.text, + selectionChangeEvent.newSelection!.base.nodePosition as TextNodePosition, + (attribution) => attribution is CommittedSlackTagAttribution, + ) + : null; + + DocumentPosition? newBasePosition; + if (tagAroundBase != null) { + newBasePosition = DocumentPosition( + nodeId: selection.base.nodeId, + nodePosition: selectionAffinity == TextAffinity.downstream // + ? TextNodePosition(offset: tagAroundBase.indexedTag.startOffset) + : TextNodePosition(offset: tagAroundBase.indexedTag.endOffset), + ); + } + + final tagAroundExtent = extentNode != null + ? _findTagAroundPosition( + extentNode.id, + extentNode.text, + selectionChangeEvent.newSelection!.extent.nodePosition as TextNodePosition, + (attribution) => attribution is CommittedSlackTagAttribution, + ) + : null; + + DocumentPosition? newExtentPosition; + if (tagAroundExtent != null) { + newExtentPosition = DocumentPosition( + nodeId: selection.extent.nodeId, + nodePosition: selectionAffinity == TextAffinity.downstream // + ? TextNodePosition(offset: tagAroundExtent.indexedTag.endOffset) + : TextNodePosition(offset: tagAroundExtent.indexedTag.startOffset), + ); + } + + if (newBasePosition == null && newExtentPosition == null) { + // No adjustment is needed. + editorSlackTagsLog.info("No selection adjustment is needed."); + return; + } + + requestDispatcher.execute([ + ChangeSelectionRequest( + DocumentSelection( + base: newBasePosition ?? selectionChangeEvent.newSelection!.base, + extent: newExtentPosition ?? selectionChangeEvent.newSelection!.extent, + ), + SelectionChangeType.expandSelection, + SelectionReason.contentChange, + ), + ]); + } +} + +class SlackTagFinder { + /// Finds a tag that touches the given [expansionPosition] and returns that tag, + /// indexed within the document, along with the [expansionPosition]. + static TagAroundPosition? findTagAroundPosition({ + required String trigger, + required String nodeId, + required AttributedText text, + required TextNodePosition expansionPosition, + required bool Function(Set tokenAttributions) isTokenCandidate, + }) { + final rawText = text.text; + if (rawText.isEmpty) { + return null; + } + + int tokenStartOffset = min(expansionPosition.offset - 1, rawText.length - 1); + tokenStartOffset = max(tokenStartOffset, 0); + + int tokenEndOffset = min(expansionPosition.offset - 1, rawText.length - 1); + tokenEndOffset = max(tokenEndOffset, 0); + + if (rawText[tokenStartOffset] != trigger) { + while (tokenStartOffset > 0) { + final upstreamCharacterIndex = rawText.moveOffsetUpstreamByCharacter(tokenStartOffset)!; + final upstreamCharacter = rawText[upstreamCharacterIndex]; + + // Move the starting character index upstream. + tokenStartOffset = upstreamCharacterIndex; + + if (upstreamCharacter == trigger) { + // The character we just added to the token bounds is the trigger. + // We don't want to move the start any further upstream. + break; + } + } + } + + while (tokenEndOffset < rawText.length - 1) { + final downstreamCharacterIndex = rawText.moveOffsetDownstreamByCharacter(tokenEndOffset)!; + final downstreamCharacter = rawText[downstreamCharacterIndex]; + if (downstreamCharacter != trigger) { + break; + } + + tokenEndOffset = downstreamCharacterIndex; + } + // Make end off exclusive. + tokenEndOffset += 1; + + final tokenRange = SpanRange(tokenStartOffset, tokenEndOffset); + if (tokenRange.end - tokenRange.start <= 0) { + return null; + } + + final tagText = text.substringInRange(tokenRange); + if (!tagText.startsWith(trigger)) { + return null; + } + + final tokenAttributions = text.getAttributionSpansInRange(attributionFilter: (a) => true, range: tokenRange); + if (!isTokenCandidate(tokenAttributions.map((span) => span.attribution).toSet())) { + return null; + } + + final tagAroundPosition = TagAroundPosition( + indexedTag: IndexedTag( + Tag(trigger, tagText.substring(1)), + nodeId, + tokenStartOffset, + ), + searchOffset: expansionPosition.offset, + ); + + return tagAroundPosition; + } + + /// Finds and returns all tags in the given [textNode], which start with [trigger]. + static Set findAllTagsInTextNode(String trigger, TextNode textNode) { + final plainText = textNode.text.text; + final tags = {}; + + int characterIndex = 0; + int? tagStartIndex; + late StringBuffer tagBuffer; + for (final character in plainText.characters) { + if (character == trigger) { + if (tagStartIndex != null) { + // We found a trigger, but we're still accumulating a tag from an earlier + // trigger. End the tag we were accumulating. + tags.add(IndexedTag( + Tag.fromRaw(tagBuffer.toString()), + textNode.id, + tagStartIndex, + )); + } + + // Start accumulating a new tag, because we hit a trigger character. + tagStartIndex = characterIndex; + tagBuffer = StringBuffer(); + } + + if (tagStartIndex != null) { + // We're accumulating a tag and we hit a character that isn't allowed to + // appear in a tag. End the tag we were accumulating. + tags.add(IndexedTag( + Tag.fromRaw(tagBuffer.toString()), + textNode.id, + tagStartIndex, + )); + + tagStartIndex = null; + } else if (tagStartIndex != null) { + // We're accumulating a tag. Add this character to the tag. + tagBuffer.write(character); + } + + characterIndex += 1; + } + + if (tagStartIndex != null) { + // We were assembling a tag and it went to the end of the text. End the tag. + tags.add(IndexedTag( + Tag.fromRaw(tagBuffer.toString()), + textNode.id, + tagStartIndex, + )); + } + + return tags; + } + + const SlackTagFinder._(); +} + +/// An attribution for a slack tag that's currently being composed. +const slackTagComposingAttribution = NamedAttribution("slack-tag-composing"); + +/// An attribution for a slack tag that was previously being composed, but was then +/// abandoned (not cancelled) without committing it. +const slackTagUnboundAttribution = NamedAttribution("slack-tag-unbound"); + +/// An attribution for a slack tag that was being composed and then was cancelled. +/// +/// This attribution is used to prevent automatically converting a cancelled composition +/// back to a composing tag. +const slackTagCancelledAttribution = NamedAttribution("slack-tag-cancelled"); + +/// An attribution for a committed tag, i.e., a slack tag that's done being composed and +/// shouldn't be partially selectable or editable. +class CommittedSlackTagAttribution implements Attribution { + const CommittedSlackTagAttribution(this.tagValue); + + @override + String get id => tagValue; + + final String tagValue; + + @override + bool canMergeWith(Attribution other) { + return this == other; + } + + @override + bool operator ==(Object other) => + identical(this, other) || + other is CommittedSlackTagAttribution && runtimeType == other.runtimeType && tagValue == other.tagValue; + + @override + int get hashCode => tagValue.hashCode; + + @override + String toString() { + return '[CommittedSlackTagAttribution]: $tagValue'; + } +} diff --git a/super_editor/lib/src/default_editor/text.dart b/super_editor/lib/src/default_editor/text.dart index 735c3d5e7e..36442676ab 100644 --- a/super_editor/lib/src/default_editor/text.dart +++ b/super_editor/lib/src/default_editor/text.dart @@ -1375,7 +1375,7 @@ class RemoveTextAttributionsCommand implements EditCommand { nodesAndSelections.putIfAbsent(textNode, () => selectionRange); } - // Add attributions. + // Remove attributions. for (final entry in nodesAndSelections.entries) { for (Attribution attribution in attributions) { final node = entry.key; diff --git a/super_editor/lib/src/infrastructure/_logging.dart b/super_editor/lib/src/infrastructure/_logging.dart index 31a82776c8..bd29c08356 100644 --- a/super_editor/lib/src/infrastructure/_logging.dart +++ b/super_editor/lib/src/infrastructure/_logging.dart @@ -21,6 +21,7 @@ class LogNames { static const editorUserTags = 'editor.tokens.tags.users'; static const editorHashTags = 'editor.tokens.tags.hash'; static const editorActionTags = 'editor.tokens.tags.action'; + static const editorSlackTags = 'editor.tokens.tags.slack'; static const reader = 'reader'; static const readerScrolling = 'reader.scrolling'; @@ -65,6 +66,7 @@ final editorTagsLog = logging.Logger(LogNames.editorTags); final editorStableTagsLog = logging.Logger(LogNames.editorUserTags); final editorPatternTagsLog = logging.Logger(LogNames.editorHashTags); final editorActionTagsLog = logging.Logger(LogNames.editorActionTags); +final editorSlackTagsLog = logging.Logger(LogNames.editorSlackTags); final readerLog = logging.Logger(LogNames.reader); final readerScrollingLog = logging.Logger(LogNames.readerScrolling); diff --git a/super_editor/lib/super_editor.dart b/super_editor/lib/super_editor.dart index ca741524eb..ec9b171e66 100644 --- a/super_editor/lib/super_editor.dart +++ b/super_editor/lib/super_editor.dart @@ -51,6 +51,9 @@ export 'src/default_editor/text_tokenizing/tags.dart'; export 'src/default_editor/text_tokenizing/stable_tags.dart'; export 'src/default_editor/unknown_component.dart'; +// Clones +export 'src/clones/slack/slack_tags.dart'; + // Document operations used by SuperEditor and/or SuperReader, // also made available for public use. export 'src/document_operations/selection_operations.dart'; diff --git a/super_editor/test/clones/slack/slack_tags_test.dart b/super_editor/test/clones/slack/slack_tags_test.dart new file mode 100644 index 0000000000..c0487a332f --- /dev/null +++ b/super_editor/test/clones/slack/slack_tags_test.dart @@ -0,0 +1,1180 @@ +import 'package:flutter_test/flutter_test.dart'; +import 'package:flutter_test_robots/flutter_test_robots.dart'; +import 'package:flutter_test_runners/flutter_test_runners.dart'; +import 'package:logging/logging.dart'; +import 'package:super_editor/super_editor.dart'; +import 'package:super_editor/super_editor_test.dart'; + +import '../../super_editor/supereditor_test_tools.dart'; +import '../../super_editor/test_documents.dart'; + +void main() { + group("Clones > Slack > tags >", () { + initLoggers(Level.ALL, {editorSlackTagsLog}); + + group("composing >", () { + testWidgetsOnAllPlatforms("can start at the beginning of a paragraph", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + singleParagraphEmptyDoc(), + ); + + await tester.placeCaretInParagraph("1", 0); + + // Compose a slack tag. + await tester.typeImeText("@john"); + + // Ensure that the tag has a composing attribution. + final text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "@john"); + + final composingTag = tagIndex.composingSlackTag.value; + expect(composingTag, isNotNull); + expect( + composingTag!.contentBounds, + const DocumentRange( + start: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 0), + ), + end: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 5), + ), + ), + ); + expect( + composingTag.token, + "john", + ); + }); + + testWidgetsOnAllPlatforms("can start immediately before a word", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("after"), + ), + ], + ), + ); + + await tester.placeCaretInParagraph("1", 0); + + // Compose a slack tag. + await tester.typeImeText("@john"); + + // Ensure that the tag has a composing attribution. + final text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "@johnafter"); + + final composingTag = tagIndex.composingSlackTag.value; + expect(composingTag, isNotNull); + expect( + composingTag!.contentBounds, + const DocumentRange( + start: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 0), + ), + end: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 5), + ), + ), + ); + expect( + composingTag.token, + "john", + ); + }); + + testWidgetsOnAllPlatforms("can start between words", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before after"), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose a slack tag. + await tester.typeImeText("@john"); + + // Ensure that the tag has a composing attribution. + final text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "before @john after"); + + final composingTag = tagIndex.composingSlackTag.value; + expect(composingTag, isNotNull); + expect( + composingTag!.contentBounds, + const DocumentRange( + start: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 7), + ), + end: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 12), + ), + ), + ); + expect( + composingTag.token, + "john", + ); + }); + + testWidgetsOnAllPlatforms("does not start with a space", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + singleParagraphEmptyDoc(), + ); + + await tester.placeCaretInParagraph("1", 0); + + // Compose a slack tag. + await tester.typeImeText("@ "); + + // Ensure we entered a trigger and a space. + final text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "@ "); + + final composingTag = tagIndex.composingSlackTag.value; + expect(composingTag, isNull); + }); + + testWidgetsOnAllPlatforms("continues after a space", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose a slack tag. + await tester.typeImeText("@john after"); + + final composingTag = tagIndex.composingSlackTag.value; + expect(composingTag, isNotNull); + expect( + composingTag!.contentBounds, + const DocumentRange( + start: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 7), + ), + end: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 18), + ), + ), + ); + expect( + composingTag.token, + "john after", + ); + }); + + testWidgetsOnAllPlatforms("stops after typing beyond max tag length", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Type max allowable characters of a tag token. + await tester.typeImeText("@abc efg ijklm o"); + + final composingTag = tagIndex.composingSlackTag.value; + expect(composingTag, isNotNull); + expect( + composingTag!.token, + "abc efg ijklm o", + ); + + // Type one more character than the max range allows + await tester.typeImeText("p"); + expect(tagIndex.composingSlackTag.value, isNull); + + // Backspace back into allowable range. + await tester.pressBackspace(); + + // Ensure that we're composing again. + expect(tagIndex.composingSlackTag.value, isNotNull); + expect( + tagIndex.composingSlackTag.value!.token, + "abc efg ijklm o", + ); + }); + + testWidgetsOnAllPlatforms("starts and stops composing when moving character in and out of max range", + (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Type max allowable characters of a tag token. + await tester.typeImeText("@abc efg ijklm o"); + + // Ensure we're composing. + final composingTag = tagIndex.composingSlackTag.value; + expect(composingTag, isNotNull); + + // Type one more character than the max range allows and ensure composing stopped. + await tester.typeImeText("p"); + expect(tagIndex.composingSlackTag.value, isNull); + + // Place the caret back at the beginning of the tag. + await tester.placeCaretInParagraph("1", 8); + + // Ensure we're composing again. + expect(tagIndex.composingSlackTag.value, isNotNull); + expect( + tagIndex.composingSlackTag.value!.token, + "", + ); + + // Place the caret in the middle of the tag. + await tester.placeCaretInParagraph("1", 12); + + // Ensure we're still composing, with an expanded token. + expect(tagIndex.composingSlackTag.value, isNotNull); + expect( + tagIndex.composingSlackTag.value!.token, + "abc ", + ); + + // Place the caret at the max allowable range. + await tester.placeCaretInParagraph("1", 23); + + // Ensure we're still composing, with an expanded token. + expect(tagIndex.composingSlackTag.value, isNotNull); + expect( + tagIndex.composingSlackTag.value!.token, + "abc efg ijklm o", + ); + + // Place the caret beyond the max allowable range. + await tester.placeCaretInParagraph("1", 24); + expect(tagIndex.composingSlackTag.value, isNull); + }); + + testWidgetsOnAllPlatforms("can delete at start of paragraph", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + singleParagraphEmptyDoc(), + ); + + await tester.placeCaretInParagraph("1", 0); + + // Compose a slack tag. + await tester.typeImeText("@"); + + // Ensure that the tag has a composing attribution. + var text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "@"); + + final composingTag = tagIndex.composingSlackTag.value; + expect(composingTag, isNotNull); + expect( + composingTag!.contentBounds, + const DocumentRange( + start: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 0), + ), + end: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 1), + ), + ), + ); + expect( + composingTag.token, + "", + ); + + // Backspace to delete the tag. + await tester.pressBackspace(); + + // Ensure the text was removed, and no attributions remain. + text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, ""); + expect(tagIndex.isComposing, isFalse); + expect(tagIndex.composingSlackTag.value, isNull); + }); + + testWidgetsOnAllPlatforms("stops when user expands the selection upstream", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ParagraphNode( + id: "2", + text: AttributedText(), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose a slack tag. + await tester.typeImeText("@john"); + + // Expand the selection upstream to "before @joh|n|" + await tester.pressShiftLeftArrow(); + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection( + base: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 12), + ), + extent: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 11), + ), + ), + ); + + // Ensure the tag composition has ended. + final composingTag = tagIndex.composingSlackTag.value; + expect(composingTag, isNull); + }); + + testWidgetsOnAllPlatforms("stops when user expands the selection downstream", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before after"), + ), + ParagraphNode( + id: "2", + text: AttributedText(), + ), + ], + ), + ); + + // Place the caret at "before | after" + await tester.placeCaretInParagraph("1", 7); + + // Compose a slack tag. + await tester.typeImeText("@john"); + + // Expand upstream to "before @john| |". + await tester.pressShiftRightArrow(); + + // Ensure the tag composition has ended. + final composingTag = tagIndex.composingSlackTag.value; + expect(composingTag, isNull); + }); + + testWidgetsOnAllPlatforms("cancels composing when the user presses ESC", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Start composing a slack tag. + await tester.typeImeText("@"); + + // Ensure that we're composing. + expect(tagIndex.composingSlackTag.value, isNotNull); + + // Cancel composing. + await tester.pressEscape(); + + // Ensure that the composing was cancelled. + expect(tagIndex.composingSlackTag.value, isNull); + + // Start typing again. + await tester.typeImeText("j"); + + // Ensure that we didn't start composing again. + expect(tagIndex.composingSlackTag.value, isNull); + }); + + testWidgetsOnAllPlatforms("notifies tag index listeners when tag changes", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + singleParagraphEmptyDoc(), + ); + await tester.placeCaretInParagraph("1", 0); + + // Listen for tag notifications. + int tagNotificationCount = 0; + tagIndex.composingSlackTag.addListener(() { + tagNotificationCount += 1; + }); + + // Type some non tag text. + await tester.typeImeText("hello "); + + // Ensure that no tag notifications were sent, because the typed text + // has no tag artifacts. + expect(tagNotificationCount, 0); + + // Start a tag. + await tester.typeImeText("@"); + + // Ensure that the first notification was sent, because a tag was started. + expect(tagNotificationCount, 1); + + // Add to the tag. + await tester.typeImeText("world "); + + // Ensure that we received a notification for each character. + expect(tagNotificationCount, 7); + + // Backspace over a character. + await tester.pressBackspace(); + + // Ensure that we received a notification for the character deletion. + expect(tagNotificationCount, 8); + }); + }); + + group("commits >", () { + testWidgetsOnAllPlatforms("when instructed to commit", (tester) async { + final (testContext, tagIndex) = await _pumpTestEditor( + tester, + singleParagraphEmptyDoc(), + ); + + // Type a search term when trying to tag "John Smith". + await tester.placeCaretInParagraph("1", 0); + await tester.typeImeText("hello @jo sm"); + + // Ensure that we're composing a tag. + expect(tagIndex.isComposing, isTrue); + + // Simulate the submission of the selected user. This would happen within + // the popover search results UI. + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + + // Ensure that the text was updated to the provided value. + final text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "hello @John Smith "); + + // Ensure that the text is attributed as a committed tag. + expect( + text.getAttributedRange({const CommittedSlackTagAttribution("John Smith")}, 6), + const SpanRange(6, 16), + ); + + // Ensure that no other attributions exist (like the composing attribution). + expect( + text.getAttributionSpansByFilter((a) => a is! CommittedSlackTagAttribution), + isEmpty, + ); + }); + }); + + group("committed >", () { + testWidgetsOnAllPlatforms("prevents user tapping to place caret in tag", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose and submit a slack tag. + await tester.typeImeText("@john"); + + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "before @John Smith "); + + // Tap near the end of the tag. + await tester.placeCaretInParagraph("1", 15); + + // Ensure that the caret was pushed beyond the end of the tag. + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 18), + ), + ), + ); + + // Tap near the beginning of the tag. + await tester.placeCaretInParagraph("1", 8); + + // Ensure that the caret was pushed beyond the beginning of the tag. + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 7), + ), + ), + ); + }); + + testWidgetsOnAllPlatforms("selects entire tag when double tapped", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose and submit a slack tag. + await tester.typeImeText("@john"); + + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "before @John Smith "); + + // Double tap on "john" + await tester.doubleTapInParagraph("1", 10); + + // Ensure that the selection surrounds the full tag, including the "@" + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection( + base: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 7), + ), + extent: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 18), + ), + ), + ); + }); + + testWidgetsOnAllPlatforms("pushes caret downstream around the tag", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose and submit a slack tag. + await tester.typeImeText("@john"); + + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "before @John Smith "); + + // Type more content after tag. + await tester.typeImeText("after"); + + // Place the caret at "befor|e @John Smith after" + await tester.placeCaretInParagraph("1", 5); + + // Push the caret downstream until we push one character into the tag. + await tester.pressRightArrow(); + await tester.pressRightArrow(); + await tester.pressRightArrow(); + + // Ensure that the caret was pushed beyond the end of the tag. + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 18), + ), + ), + ); + }); + + testWidgetsOnAllPlatforms("pushes caret upstream around the tag", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose and submit a slack tag. + await tester.typeImeText("@john"); + + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "before @John Smith "); + + // Type more content after tag. + await tester.typeImeText("after"); + + // Place the caret at "before @John Smith a|fter" + await tester.placeCaretInParagraph("1", 20); + + // Push the caret upstream until we push one character into the tag. + await tester.pressLeftArrow(); + await tester.pressLeftArrow(); + await tester.pressLeftArrow(); + + // Ensure that the caret pushed beyond the beginning of the tag. + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 7), + ), + ), + ); + }); + + testWidgetsOnAllPlatforms("pushes expanding downstream selection around the tag", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose and submit a slack tag. + await tester.typeImeText("@john"); + + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "before @John Smith "); + + // Type more content after tag. + await tester.typeImeText("after"); + + // Place the caret at "befor|e @John Smith after" + await tester.placeCaretInParagraph("1", 5); + + // Expand downstream until we push one character into the tag. + await tester.pressShiftRightArrow(); + await tester.pressShiftRightArrow(); + await tester.pressShiftRightArrow(); + + // Ensure that the extent was pushed beyond the end of the tag. + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection( + base: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 5), + ), + extent: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 18), + ), + ), + ); + }); + + testWidgetsOnAllPlatforms("pushes expanding upstream selection around the tag", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose and submit a slack tag. + await tester.typeImeText("@john"); + + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "before @John Smith "); + + // Type more content after tag. + await tester.typeImeText("after"); + + // Place the caret at "before @John Smith a|fter" + await tester.placeCaretInParagraph("1", 20); + + // Expand upstream until we push one character into the tag. + await tester.pressShiftLeftArrow(); + await tester.pressShiftLeftArrow(); + await tester.pressShiftLeftArrow(); + + // Ensure that the extent was pushed beyond the beginning of the tag. + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection( + base: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 20), + ), + extent: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 7), + ), + ), + ); + }); + + testWidgetsOnAllPlatforms("deletes entire tag when deleting a character upstream", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose and submit a slack tag. + await tester.typeImeText("@john"); + + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "before @John Smith "); + + // Type more content after tag. + await tester.typeImeText("after"); + + // Place the caret at "before @John Smith| after" + await tester.placeCaretInParagraph("1", 18); + + // Press BACKSPACE to delete a character upstream. + await tester.pressBackspace(); + + // Ensure that the entire user tag was deleted. + expect(SuperEditorInspector.findTextInComponent("1").text, "before after"); + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 7), + ), + ), + ); + }); + + testWidgetsOnAllPlatforms("deletes entire tag when deleting a character downstream", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("before "), + ), + ], + ), + ); + + // Place the caret at "before |" + await tester.placeCaretInParagraph("1", 7); + + // Compose and submit a slack tag. + await tester.typeImeText("@john"); + + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "before @John Smith "); + + // Type more content after tag. + await tester.typeImeText("after"); + + // Place the caret at "before |@John Smith after" + await tester.placeCaretInParagraph("1", 7); + + // Press DELETE to delete a character downstream. + await tester.pressDelete(); + + // Ensure that the entire user tag was deleted. + expect(SuperEditorInspector.findTextInComponent("1").text, "before after"); + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 7), + ), + ), + ); + }); + + testWidgetsOnAllPlatforms("deletes second tag and leaves first tag alone", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument.empty("1"), + ); + + await tester.placeCaretInParagraph("1", 0); + + // Compose two tags within text. + await tester.typeImeText("one @john"); + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "one @John Smith "); + + // Type and commit a second tag. + await tester.typeImeText("two @sally"); + testContext.editor.execute([const FillInComposingSlackTagRequest("Sally Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "one @John Smith two @Sally Smith "); + + // Type after the second tag. + await tester.typeImeText("three"); + expect(SuperEditorInspector.findTextInComponent("1").text, "one @John Smith two @Sally Smith three"); + + // Place the caret at "one @John Smith two @Sally Smith| three" + await tester.placeCaretInParagraph("1", 32); + + // Delete the 2nd tag. + await tester.pressBackspace(); + + // Ensure the 2nd tag was deleted, and the 1st tag remains. + expect(SuperEditorInspector.findTextInComponent("1").text, "one @John Smith two three"); + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 20), + ), + ), + ); + }); + + testWidgetsOnAllPlatforms("deletes multiple tags when partially selected in the same node", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText("one "), + ), + ], + ), + ); + + // Place the caret at "one |" + await tester.placeCaretInParagraph("1", 4); + + // Compose two tags within text. + await tester.typeImeText("@john"); + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "one @John Smith "); + + // Type and commit a second tag. + await tester.typeImeText("two @sally"); + testContext.editor.execute([const FillInComposingSlackTagRequest("Sally Smith")]); + await tester.pump(); + expect(SuperEditorInspector.findTextInComponent("1").text, "one @John Smith two @Sally Smith "); + + // Type after the second tag. + await tester.typeImeText("three"); + expect(SuperEditorInspector.findTextInComponent("1").text, "one @John Smith two @Sally Smith three"); + + // Expand the selection "one @Jo|hn Smith two @Sa|lly Smith three" + (testContext.findEditContext().composer as MutableDocumentComposer).setSelectionWithReason( + const DocumentSelection( + base: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 7), + ), + extent: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 23), + ), + ), + SelectionReason.userInteraction, + ); + + // Delete the selected content, which will leave two partial user tags. + await tester.pressBackspace(); + + // Ensure that both user tags were completely deleted. + expect(SuperEditorInspector.findTextInComponent("1").text, "one three"); + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 4), + ), + ), + ); + }); + + testWidgetsOnAllPlatforms("deletes multiple tags when partially selected across multiple nodes", (tester) async { + final (testContext, _) = await _pumpTestEditor( + tester, + MutableDocument( + nodes: [ + ParagraphNode( + id: "1", + text: AttributedText(), + ), + ParagraphNode( + id: "2", + text: AttributedText(), + ), + ], + ), + ); + + // Place the caret in the first paragraph and insert a user tag. + await tester.placeCaretInParagraph("1", 0); + await tester.typeImeText("one @john"); + testContext.editor.execute([const FillInComposingSlackTagRequest("John Smith")]); + await tester.pump(); + await tester.typeImeText("two"); + expect(SuperEditorInspector.findTextInComponent("1").text, "one @John Smith two"); + + // Move the caret to the second paragraph and insert a second user tag. + await tester.placeCaretInParagraph("2", 0); + await tester.typeImeText("three @sally"); + testContext.editor.execute([const FillInComposingSlackTagRequest("Sally Smith")]); + await tester.pump(); + await tester.typeImeText("four"); + expect(SuperEditorInspector.findTextInComponent("2").text, "three @Sally Smith four"); + + // Expand the selection to "one @Jo|hn Smith two\nthree @Sa|lly Smith three" + (testContext.findEditContext().composer as MutableDocumentComposer).setSelectionWithReason( + const DocumentSelection( + base: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 7), + ), + extent: DocumentPosition( + nodeId: "2", + nodePosition: TextNodePosition(offset: 9), + ), + ), + SelectionReason.userInteraction, + ); + + // Delete the selected content, which will leave two partial user tags. + await tester.pressBackspace(); + + // Ensure that both user tags were completely deleted. + expect(SuperEditorInspector.findTextInComponent("1").text, "one four"); + expect( + SuperEditorInspector.findDocumentSelection(), + const DocumentSelection.collapsed( + position: DocumentPosition( + nodeId: "1", + nodePosition: TextNodePosition(offset: 4), + ), + ), + ); + }); + }); + + group("unbound >", () { + // TODO: + }); + + group("cancelled >", () { + testWidgetsOnAllPlatforms("with only a trigger", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + singleParagraphEmptyDoc(), + ); + + await tester.placeCaretInParagraph("1", 0); + + // Compose a slack tag. + await tester.typeImeText("@"); + + // Ensure that we're composing a tag. + var text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "@"); + expect(tagIndex.isComposing, isTrue); + expect(tagIndex.composingSlackTag.value, isNotNull); + + // Cancel the tag. + await tester.pressEscape(); + + // Ensure that we're no longer composing. + text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "@"); + expect(tagIndex.isComposing, isFalse); + expect(tagIndex.composingSlackTag.value, isNull); + + // Type a character. + await tester.typeImeText("J"); + + // Ensure that we're still not composing. + text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "@J"); + expect(tagIndex.isComposing, isFalse); + expect(tagIndex.composingSlackTag.value, isNull); + }); + + testWidgetsOnAllPlatforms("with multiple words", (tester) async { + final (_, tagIndex) = await _pumpTestEditor( + tester, + singleParagraphEmptyDoc(), + ); + + await tester.placeCaretInParagraph("1", 0); + + // Compose a slack tag. + await tester.typeImeText("@jo sm"); + + // Ensure that we're composing a tag. + var text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "@jo sm"); + expect(tagIndex.isComposing, isTrue); + expect(tagIndex.composingSlackTag.value, isNotNull); + + // Cancel the tag. + await tester.pressEscape(); + + // Ensure that we're no longer composing. + text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "@jo sm"); + expect(tagIndex.isComposing, isFalse); + expect(tagIndex.composingSlackTag.value, isNull); + + // Type a character. + await tester.typeImeText("i"); + + // Ensure that we're still not composing. + text = SuperEditorInspector.findTextInComponent("1"); + expect(text.text, "@jo smi"); + expect(tagIndex.isComposing, isFalse); + expect(tagIndex.composingSlackTag.value, isNull); + + // Move the caret to a token closer to the trigger. + await tester.placeCaretInParagraph("1", 3); + + // Ensure that we're still not composing. + expect(tagIndex.isComposing, isFalse); + expect(tagIndex.composingSlackTag.value, isNull); + }); + }); + }); +} + +Future<(TestDocumentContext, SlackTagIndex)> _pumpTestEditor( + WidgetTester tester, + MutableDocument document, +) async { + final testContext = await tester // + .createDocument() + .withCustomContent(document) + .withPlugin(SlackTagPlugin()) + .pump(); + + return (testContext, testContext.editor.context.find(SlackTagPlugin.slackTagIndexKey)); +}