superlistapp / super_editor

A Flutter toolkit for building document editors and readers
https://superlist.com/SuperEditor/
MIT License
1.69k stars 247 forks source link

[BUG] - Caret is positioned and sized incorrectly when there is a FontSizeAttribution #2092

Open KevinBrendel opened 5 months ago

KevinBrendel commented 5 months ago

Package Version super_editor, GitHub, stable branch

User Info coneno GmbH, QuikFlow

To Reproduce Steps to reproduce the behavior:

  1. Place the caret in the large text

Minimal Reproduction Code

Minimal, Runnable Code Sample ```dart import 'package:flutter/material.dart'; import 'package:super_editor/super_editor.dart'; void main() { runApp(const MainApp()); } class MainApp extends StatefulWidget { const MainApp({super.key}); @override State createState() => _MainAppState(); } class _MainAppState extends State { static const _sizeAttribution = FontSizeAttribution(60); final _document = MutableDocument(nodes: [ ParagraphNode( id: Editor.createNodeId(), text: AttributedText( 'Hello, world!', AttributedSpans(attributions: const [ SpanMarker(attribution: _sizeAttribution, offset: 0, markerType: SpanMarkerType.start), SpanMarker(attribution: _sizeAttribution, offset: 4, markerType: SpanMarkerType.end), ])), ), ]); final _composer = MutableDocumentComposer(); late final Editor _editor; @override void initState() { super.initState(); _editor = createDefaultDocumentEditor(document: _document, composer: _composer); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: SuperEditor( editor: _editor, document: _document, composer: _composer, ), ), ), ); } } ```

Actual behavior The caret is the same height as it would be for the text without the attribution, and is positioned on the top of the line.

Expected behavior The caret is sized based on the actual visible font-size of the characters surrounding it. E.g. in Google Docs it seems to use the font-size of the preceding character.

Platform macOS

Flutter version Flutter 3.22.2 • channel stable • https://github.com/flutter/flutter.git Framework • revision 761747bfc5 (7 days ago) • 2024-06-05 22:15:13 +0200 Engine • revision edd8546116 Tools • Dart 3.4.3 • DevTools 2.34.3.

Screenshots

Screenshot 2024-06-12 at 14 42 47
angelosilvestre commented 4 months ago

This looks to be a Flutter bug. The TextPainter.getFullHeightForCaret is reporting incorrect results spans with multiple styles

There is an open issue tracking that: https://github.com/flutter/flutter/issues/150638

angelosilvestre commented 2 months ago

This seems to be fixed in Flutter master channel. Could you please confirm it @KevinBrendel ?

KevinBrendel commented 2 months ago

@angelosilvestre Can confirm it is mostly fixed in my example app using the Flutter master channel. The caret is now correctly sized when placed between small or large letters.

Some weird situations in edge cases:

  1. When the cursor is at the end of the text, it can have the maximum height and be offset towards the bottom. This seems to happen frequently when placing the cursor there by pressing right-arrow multiple times. Using the mouse, it appears to happen when clicking horizontally to the right of the text, but vertically slightly below the text baseline. If clicking above the baseline, the cursor is correctly sized. image



  1. When the cursor is between the small and the large text, it is small. So it seemingly uses the size of the next character, instead of the size of the previous character, which seems to be more common in other writing apps (e.g. Word, Google Docs): image
angelosilvestre commented 2 months ago

When the cursor is between the small and the large text, it is small. So it seemingly uses the size of the next character, instead of the size of the previous character, which seems to be more common in other writing apps (e.g. Word, Google Docs):

@KevinBrendel could you please test this again on the latest main? We merged some changes related to the font size when placing the caret at the end of a word.

KevinBrendel commented 2 months ago

@angelosilvestre On the latest SuperEditor main with the latest Flutter master channel, the behavior seems inconsistent. Depending on how the cursor is positioned there, it can either have the correct height or the wrong height. Positioning it via the keyboard seems to more often result in the wrong height, whereas with the mouse it seems dependent on the exact click location.

https://github.com/user-attachments/assets/7fb77da3-24e8-4833-a042-1092c21c36fe

angelosilvestre commented 2 months ago

@KevinBrendel This might be related to https://github.com/flutter/flutter/issues/155330