[SuperEditor] [Gboard] Gboard: New line keyboard button is not working for the order list

[IResetic]

On Android 13 new line action button on the keyboard is not working when I have the order list. So I have a normal paragraph node and I convert it to order list. The node is converter to the order list but when I press the new line button on the keyboard to add new list item/node nothing is happening.

Here is the git repository with demo where you can reproduce this bug (to convert the paragrah node to list just press the FAB).

On the device with Android 10 it's working normally.

https://github.com/IResetic/flutter_super_editor_a13_bug

[matthew-carroll]

Please post the minimal code and steps to reproduce this issue from this thread. We're unlikely to take the time to clone other repos to reproduce bugs. If you can reproduce the issue with the Example app, that's ideal.

[IResetic]

Basiclly this is the code that I'm using for converting the paragraph node to order list item:

    final selected = _composer.selection;
    final doc = _doc;

    if (selected != null) {
      final selectedNode = doc.getNodeById(selected.extent.nodeId)! as TextNode;

      _docOps.convertToListItem(ListItemType.ordered, selectedNode.text);
    }

And here is how I'm using SuperEditor widget:

SuperEditor(
              editor: _docEditor,
              composer: _composer,
              documentLayoutKey: _docLayoutKey,
              imeConfiguration: const SuperEditorImeConfiguration().copyWith(
                keyboardActionButton: TextInputAction.newline,
              ),
            ),

Also the same thing happens if I use your default Androoid toolbar and item to create list item from paragraph

[matthew-carroll]

@IResetic that code sample isn't a minimal reproduction. I have no idea where that snippet is being run, or why. Please provide a minimal, runnable bug reproduction.

Also, which version of super_editor are you using?

[IResetic]

Basically I have modifed the demo code that is produced when you create a new Flutter application using Android Studio. Here is the main widget:

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // TRY THIS: Try running your application with "flutter run". You'll see
        // the application has a blue toolbar. Then, without quitting the app,
        // try changing the seedColor in the colorScheme below to Colors.green
        // and then invoke "hot reload" (save your changes or press the "hot
        // reload" button in a Flutter-supported IDE, or press "r" if you used
        // the command line to start the app).
        //
        // Notice that the counter didn't reset back to zero; the application
        // state is not lost during the reload. To reset the state, use hot
        // restart instead.
        //
        // This works for code too, not just values: Most code changes can be
        // tested with just a hot reload.
        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});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final FocusNode _focusNode = FocusNode();
  late DocumentEditor _docEditor;
  late DocumentComposer _composer;
  late CommonEditorOperations _docOps;
  late MutableDocument _doc;
  final GlobalKey _docLayoutKey = GlobalKey();

  @override
  void initState() {
    _composer = DocumentComposer();
    _doc = MutableDocument(
      nodes: [
        ParagraphNode(
          id: DocumentEditor.createNodeId(),
          text: AttributedText(text: 'Hello world'),
        ),
      ],
    );
    _docEditor = DocumentEditor(document: _doc);
    _docOps = CommonEditorOperations(
      editor: _docEditor,
      composer: _composer,
      documentLayoutResolver: () => _docLayoutKey.currentState! as DocumentLayout,
    );
  }

  void _toListItem() {
    final selected = _composer.selection;
    final doc = _doc;

    if (selected != null) {
      final selectedNode = doc.getNodeById(selected.extent.nodeId)! as TextNode;

      _docOps.convertToListItem(ListItemType.ordered, selectedNode.text);
    }
  }

  @override
  Widget build(BuildContext context) {

    print("BUILD MY APP");
    return Scaffold(
      appBar: AppBar(
        // TRY THIS: Try changing the color here to a specific color (to
        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
        // change color while the other colors stay the same.
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: const Text("Super Editor Demo"),
      ),
      body: Column(
        children: [
          Expanded(
            child: SuperEditor(
              editor: _docEditor,
              composer: _composer,
              documentLayoutKey: _docLayoutKey,
              imeConfiguration: const SuperEditorImeConfiguration().copyWith(
                keyboardActionButton: TextInputAction.newline,
              ),
            ),
          ),
          MultiListenableBuilder(
            listenables: <Listenable>{
              _composer.selectionNotifier,
            },
            builder: (_) => _buildMountedToolbar(),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toListItem,
        tooltip: 'Increment',
        child: const Icon(Icons.list),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget _buildMountedToolbar() {
    final selection = _composer.selection;

    if (selection == null) {
      return const SizedBox();
    }

    return KeyboardEditingToolbar(
      document: _doc,
      composer: _composer,
      commonOps: CommonEditorOperations(
        editor: _docEditor,
        composer: _composer,
        documentLayoutResolver: () => _docLayoutKey.currentState as DocumentLayout,
      ),
    );
  }
}

I'm using super_editor version 0.2.6

[IResetic]

@matthew-carroll I have done some further investigation, and it appears the problem only happens on the devices that are usign Gboard keybaord (https://play.google.com/store/apps/details?id=com.google.android.inputmethod.latin&hl=en) and is not only happening on the Android 13 devices but all the devices that are using this keybaord

[matthew-carroll]

@IResetic the pub version of Super Editor (0.2.6) is very outdated at this point. Please try to migrate either to the main or stable branch on GitHub. There are instructions in the README for how to do that. We'll release another Pub version when we finish our major new features.

[IResetic]

@matthew-carroll According to the flutter pub page https://pub.dev/packages/super_editor/versions this is the latest version. Could you tell me what is the latest version for Flutter

[matthew-carroll]

Please see the instructions in the README for how to use the GitHub version.

[IResetic]

@matthew-carroll Could you provide me with the link to a README file with the instruction how to install the latest version of the super_editor in the flutter (only Android and iOS) app?

[matthew-carroll]

https://github.com/superlistapp/super_editor#mono-repo-versioning

[matthew-carroll]

@IResetic did using the GitHub version solve this issue?

[IResetic]

Yes the issue is sloved