AppFlowy-IO / AppFlowy-IO/appflowy-editor

[FR] Hover on textspan with specific attribute

オープン
#1,068 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
Dart
スター
684
フォーク
329
PR マージ指標
30日以内にマージされた PR はありません

説明

### Description

Hi I am trying to create note taking functionality in my app. The user needs to be able to select a specific text and insert a note. When the user hovers over the text that has the note attached a popover should show.

I gotten to the point where I add a custom attribute and render it using a custom textSpan decorator. This works I can even attach a click handler but I cant get it to detect hover events.

Here is my current approach. This works for the most part but the hover events are not recognized.

Is this the right direction or am I missing something. Are there other ways I can do this?

```dart

InlineSpan customDecorator(
BuildContext context, Node node, int index, TextInsert text, TextSpan before, TextSpan after) {
final attributes = text.attributes;
if (attributes == null) {
return after;
}
final noteId = attributes[TiroRichTextKeys.note] as String?;
if (noteId != null) {
return noteText(noteId, editorState, context, node, index, text, before, after);
}

return after;
}

InlineSpan noteText(String noteId, EditorState state, BuildContext context, Node node, int index, TextInsert text,
TextSpan before, TextSpan after) {
return NoteTextSpan(
text: text.text,
state: state,
node: node,
after: after,
);
}

class NoteTextSpan extends TextSpan {
NoteTextSpan({
required String text,
required EditorState state,
required Node node,
required TextSpan after,
}) : super(
text: text,
style: after.style?.copyWith(
backgroundColor: Colors.amber.withValues(alpha: 0.3), // Apply background
),
mouseCursor: SystemMouseCursors.text,
recognizer: NoteTextRecognizer(
onTap: () {
print("Note clicked");
},
onHover: (bool value) {
print("Note hover:$value");
},
), // Handle clicks
);
}
class NoteTextRecognizer extends OneSequenceGestureRecognizer {
final VoidCallback onTap;
final ValueChanged onHover;

NoteTextRecognizer({required this.onTap, required this.onHover});

bool _isHovered = false;

@override
void addPointer(PointerDownEvent event) {
GestureBinding.instance.pointerRouter.addRoute(event.pointer, _handlePointer);
super.addPointer(event);
}

void _handlePointer(PointerEvent event) {
if (event is PointerUpEvent) {
onTap();
GestureBinding.instance.pointerRouter.removeRoute(event.pointer, _handlePointer);
} else if (event is PointerHoverEvent) {
if (!_isHovered) {
_isHovered = true;
onHover(true);
}
} else if (event is PointerExitEvent) {
if (_isHovered) {
_isHovered = false;
onHover(false);
}
}
}

@override
void handleEvent(PointerEvent event) {
if (event is PointerHoverEvent) {
onHover(true);
} else if (event is PointerExitEvent) {
onHover(false);
}
}

@override
String get debugDescription => 'note_text_recognizer';

@override
void didStopTrackingLastPointer(int pointer) {}
}
```

### Impact

Users that want to customize there app

### Additional Context

_No response_

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。