singerdmx / flutter-quill

Rich text editor for Flutter
https://pub.dev/packages/flutter_quill
MIT License
2.53k stars 810 forks source link

When using the flutter_quill package in flutter, when using formatText to modify to a custom Attribute in QuillEditor.onTapUp in the read-only situation of QuillEditor, the keyboard will pop up. #1606

Open ddxl123 opened 9 months ago

ddxl123 commented 9 months ago

Is there an existing issue for this?

Flutter Quill version

flutter_quill: ^9.0.1

Other Flutter Quill packages versions

flutter_quill_extensions: ^9.0.1 vsc_quill_delta_to_html: ^1.0.3

flutter doctor:

[√] Flutter (Channel stable, 3.16.3, on Microsoft Windows [Version 10.0.23601.1000], locale zh-CN)
    • Flutter version 3.16.3 on channel stable at D:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b0366e0a3f (10 days ago), 2023-12-05 19:46:39 -0800
    • Engine revision 54a7145303
    • Dart version 3.2.3
    • DevTools version 2.28.4
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at C:\Users\LongPC\AppData\Local\Android\Sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: D:\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)
    • All Android licenses accepted.

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.5.3)
    • Visual Studio at D:\Microsoft Visual Studio
    • Visual Studio Community 2022 version 17.5.33516.290
    • Windows 10 SDK version 10.0.22000.0

[√] Android Studio (version 2022.1)
    • Android Studio at D:\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = D:\Android Studio
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)

[√] IntelliJ IDEA Ultimate Edition (version 2022.2)
    • IntelliJ at D:\IntelliJ IDEA 2022.2.2
    • Flutter plugin version 72.1.3
    • Dart plugin version 222.4560

[√] IntelliJ IDEA Ultimate Edition (version 2023.2)
    • IntelliJ at D:\IntelliJ IDEA 2023.1.4
    • Flutter plugin version 76.3.4
    • Dart plugin version 232.8660.129

[√] Connected device (3 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86    • Android 10 (API 29) (emulator)
    • Windows (desktop)                  • windows       • windows-x64    • Microsoft Windows [Version 10.0.23601.1000]
    • Edge (web)                         • edge          • web-javascript • Microsoft Edge 121.0.2277.4

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
Process finished with exit code 0

Steps to reproduce

  1. custom Attribute
  2. read-only mode
  3. QuillEditor.onTapUp

Expected results

The keyboard will pop up.

Actual results

The keyboard will not pop up.

Code sample

import 'package:flutter_quill/flutter_quill.dart' as q;

Custom Attribute:

class BlankAttribute extends q.Attribute {
  const BlankAttribute(v) : super(BlankAttribute.blank, q.AttributeScope.inline, v);

  static const String blank = "blank";

  static TextStyle get textStyle => TextStyle(
        background: Paint()
          ..strokeWidth = 5.0 // 画笔宽度
          ..style = PaintingStyle.fill // 画笔样式
          ..color = Colors.blue
          ..strokeCap = StrokeCap.round
          // ..strokeJoin = StrokeJoin.round
          ..maskFilter = const MaskFilter.blur(BlurStyle.outer, 2),
      );
}

class TextTransparentAttribute extends q.Attribute {
  const TextTransparentAttribute(v) : super(TextTransparentAttribute.textTransparent, q.AttributeScope.inline, v);
  static const String textTransparent = "text_transparent";

  static TextStyle get textStyle => const TextStyle(color: Colors.transparent);
}

QuillEditor onTapUp:

onTapUp: (TapUpDetails details, _) {
              final qc = t.blank.quillController;
              final textPosition = editorKey.currentState?.editableTextKey.currentState?.renderEditor.getPositionForOffset(details.globalPosition);
              if (textPosition != null) {
                final leaf = qc.queryNode(textPosition.offset);
                if (leaf != null) {
                  if (leaf.style.attributes.containsKey(TextTransparentAttribute.textTransparent)) {
                    qc.formatText(leaf.offset, leaf.length, const TextTransparentAttribute(null));
                  } else {
                    if (leaf.style.attributes.containsKey(BlankAttribute.blank)) {
                      qc.formatText(leaf.offset, leaf.length, const TextTransparentAttribute(true));
                    }
                  }
                }
              }
              return true;
            },

Custom ToolBar:

onPressed: () {
        final qc = widget.quillController;
        if (qc.getSelectionStyle().attributes.containsKey(BlankAttribute.blank)) {
          qc.formatSelection(const BlankAttribute(null));
        } else {
          qc.formatSelection(const BlankAttribute(true));
        }
      },

QuillEditor:

QuillEditor(
      key: qeKey,
      scrollController: singleQuillController.scrollController,
      focusNode: FocusNode(),
      configurations: QuillEditorConfigurations(
        controller: singleQuillController.quillController,
        readOnly: true,
        showCursor: false,
        autoFocus: false,
        expands: false,
        padding: const EdgeInsets.all(0),
        scrollable: false,
        embedBuilders: [
          ...FlutterQuillEmbeds.editorBuilders(),
        ],
        onTapUp: onTapUp,
        customStyleBuilder: (Attribute attribute) {
          if (attribute.key == BlankAttribute.blank) {
            return BlankAttribute.textStyle;
          }
          if (attribute.key == TextTransparentAttribute.textTransparent) {
            return TextTransparentAttribute.textStyle;
          }
          return TextStyle();
        },
      ),
    );

Screenshots or Video

Screenshots / Video demonstration [Upload media here]

Logs

No response

ismanong commented 6 months ago

QuillEditor.basic() to QuillEditor()

configurations.copyWith no implementation of onTapUp