Cannot re-add styles when quill is initialized with existing already formatted text

[alessandroderomawep]

Is there an existing issue for this?

• [X] I have searched the existing issues

Flutter Quill version

9.3.1

Steps to reproduce

Flutter version

Flutter 3.19.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision abb292a07e (6 weeks ago) • 2024-02-20 14:35:05 -0800
Engine • revision 04817c99c9
Tools • Dart 3.3.0 • DevTools 2.31.1

1. Run the provided sample code
2. select already formatted text (i.e. "orum harum maxim" which is displayed as underlined, striked and italic)
3. click on the icons to remove underline, strike and italic styles
   • here you will already notice the buttons toggle doesn't work: the style gets correctly removed but somehow the toolbar diesn't seem to reflect this change
4. once removed, try to add a new style again by pressing on the bold, underline, italic or strike buttons: nothing will happen.

A complete demo can be found in the attached video

Expected results

Style gets removed and can be readded / the toolbar actually reflects changes

Actual results

Style gets removed but cannot be re-added / the toolbar doesn't reflect changes

Code sample

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late QuillController _controller;

  @override
  void initState() {
    final List<Map<String, dynamic>> delta = [{"insert":"sint commodo ","attributes":{"bold":"true","italic":"true"}},{"insert":"nam ","attributes":{"bold":"true","italic":"true","strike":"true"}},{"insert":"tempore ","attributes":{"italic":"true","underline":"true","strike":"true"}},{"insert":"ad ","attributes":{"italic":"true","strike":"true"}},{"insert":"eos libero ","attributes":{"bold":"true","underline":"true","strike":"true"}},{"insert":"est quo ","attributes":{"italic":"true"}},{"insert":"laborum harum maxime ","attributes":{"italic":"true","underline":"true","strike":"true"}},{"insert":"qui sint sunt ","attributes":{"italic":"true","underline":"true","strike":"true"}},{"insert":"minim et ","attributes":{"bold":"true"}},{"insert":"voluptas minim ","attributes":{"bold":"true","italic":"true","strike":"true"}},{"insert":"assumenda ","attributes":{"bold":"true","italic":"true","underline":"true","strike":"true"}},{"insert":"veniam sed sit ","attributes":{"bold":"true","italic":"true","strike":"true"}},{"insert":"facere ","attributes":{"strike":"true"}},{"insert":"tempore maxime \n","attributes":{"strike":"true"}}];
    _controller = QuillController(
      document: Document.fromJson(delta),
      selection: const TextSelection.collapsed(offset: 0),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Flex(
        direction: Axis.vertical,
        children: [
          QuillToolbar.simple(
            configurations: QuillSimpleToolbarConfigurations(
              controller: _controller,
              sharedConfigurations: const QuillSharedConfigurations(
                locale: Locale('en'),
              ),
            ),
          ),
          Expanded(
            child: QuillEditor.basic(
              configurations: QuillEditorConfigurations(
                controller: _controller,
                readOnly: false,
                sharedConfigurations: const QuillSharedConfigurations(
                  locale: Locale('en'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

pubspec.yaml

name: test_app
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: '>=3.0.5 <4.0.0'

dependencies:
  flutter:
    sdk: flutter


  cupertino_icons: ^1.0.2
  flutter_quill: ^9.3.1

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

Screenshots or Video

Screenshots / Video demonstration

https://github.com/singerdmx/flutter-quill/assets/126804521/4a61c3c4-23e8-49c5-a512-9f08655110f4

Logs

Flutter Logs (nothing helpful here)

Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
This app is linked to the debug service: ws://127.0.0.1:9713/zE88W6k3dJs=/ws
Debug service listening on ws://127.0.0.1:9713/zE88W6k3dJs=/ws
Debug service listening on ws://127.0.0.1:9713/zE88W6k3dJs=/ws

Chrome Logs (maybe helpful)

I don't know if this can be helpful, but every time I click on one of those style icons that number ("35" in the following screenshot) increases.

[CatHood0]

This error was solved at the current version of Flutter Quill (V-9.3.6)

[alessandroderomawep]

This error was solved at the current version of Flutter Quill (V-9.3.6)

Unfortunately I can reproduce this in v9.3.6 too. Use my example code, just change the version to 9.3.6 and launch the application. Of course if you have a previous pubspec.lock make sure to delete it so the new version will be picked, and also do a full flutter clean/pub get. I'm experiencing the exact same behaviour: buttons don't toggle and text can't be re-formatted.

[CatHood0]

I try your same actions (not exactly, but almost the same), and i get this (my project doesn't use strike style):

https://github.com/singerdmx/flutter-quill/assets/114286961/53ea6658-800f-4637-822c-b72d491a0541

I will try your code when i can, and edit this comment with the result

[alessandroderomawep]

I try your same actions (not exactly, but almost the same), and i get this (my project doesn't use strike style):

screen-20240408-092849.mp4 I will try your code when i can, and edit this comment with the result

Thank you. The two main causes in my opinion could be either the striked text (if you place the cursor on a italic text it shows as striked in the toolbar, which is weird) or the fact that is being run on web (just my guess)... or maybe a combination of the two

[OHeroJ]

+1

[AtlasAutocode]

The current version 10 has a number of fixes relating to this issue. If this is still a problem, can you reopen this issue with details of what is still not working?