Skip to content

QuillEditor selection creates areas that aren't as needed as keyboard layout #2556

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task done
kasreder opened this issue May 5, 2025 · 0 comments
Open
1 task done
Labels
bug Something isn't working

Comments

@kasreder
Copy link

kasreder commented May 5, 2025

Have you checked for an existing issue?

Flutter Quill Version

11.2.0

Steps to Reproduce

Flutter v 3.29.3
flutter_quill: ^11.2.0
flutter_quill_extensions: ^11.0.0
Samsung Galaxy S25

the reproduction stage

  1. Use the platter web (symptoms on mobile, normal on PC web)
  2. Occurs in the text input stage after writing and image insertion
  3. No symptoms in Android Studio local test
  4. Android Phone Chromium Issues
  • Other Internet browsers may not have a problem (naver)

Expected results

  1. Unknown re-out occurs (no touch)
  • If you add additional lines to the writing, extension, and widget
  1. Unable to edit image when inserting image

#1961

@@@ It's the official example code in GitHub

Actual results

`

import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart' as quill;
import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
import '../widget/appbar.dart';
import '../widget/drawer.dart';

class PostWriteScreen2 extends StatefulWidget {
const PostWriteScreen2({
super.key,
});

@OverRide
State createState() => _PostWriteScreen2State();
}

class _PostWriteScreen2State extends State {
late quill.QuillController _controller;
final FocusNode _editorFocusNode = FocusNode();
final ScrollController _editorScrollController = ScrollController();
final TextEditingController _titleController = TextEditingController();

@OverRide
void initState() {
super.initState();
_controller = quill.QuillController.basic();
_controller.addListener(() {
final deltaJson = _controller.document.toDelta().toJson();
print('✍️ 실시간 에디터 입력값: $deltaJson');
});
}

@OverRide
void dispose() {
_controller.dispose();
_editorScrollController.dispose();
_editorFocusNode.dispose();
_titleController.dispose();
super.dispose();
}

@OverRide
Widget build(BuildContext context) {

return Scaffold(
  appBar: BaseAppBar(
    title: '글작성 페이지',
    appBar: AppBar(),
  ),
  drawer: const BaseDrawer(),
  body: SafeArea(
    child: Column(
      children: [
        quill.QuillSimpleToolbar(
          controller: _controller,
          config: quill.QuillSimpleToolbarConfig(
            embedButtons: FlutterQuillEmbeds.toolbarButtons(),
            showClipboardPaste: true,
            customButtons: [
              quill.QuillToolbarCustomButtonOptions(
                icon: const Icon(Icons.add_alarm_rounded),
                onPressed: () {
                  _controller.document.insert(
                    _controller.selection.extentOffset,
                    TimeStampEmbed(
                      DateTime.now().toString(),
                    ),
                  );

                  _controller.updateSelection(
                    TextSelection.collapsed(
                      offset: _controller.selection.extentOffset + 1,
                    ),
                    quill.ChangeSource.local,
                  );
                },
              ),
            ],
            buttonOptions: quill.QuillSimpleToolbarButtonOptions(
              base: quill.QuillToolbarBaseButtonOptions(
                afterButtonPressed: () {
                  final isDesktop = {
                    TargetPlatform.linux,
                    TargetPlatform.windows,
                    TargetPlatform.macOS
                  }.contains(defaultTargetPlatform);
                  if (isDesktop) {
                    _editorFocusNode.requestFocus();
                  }
                },
              ),
              linkStyle: const quill.QuillToolbarLinkStyleButtonOptions(
              ),
            ),
          ),
        ),
        Expanded(

          child: Container(
            color: Colors.red.shade200, // 원하는 배경색 설정
            child: quill.QuillEditor(
              focusNode: _editorFocusNode,
              scrollController: _editorScrollController,
              controller: _controller,
              config: quill.QuillEditorConfig(
                placeholder: 'Start writing your notes.11111111..',
                padding: const EdgeInsets.all(16),
                embedBuilders: [
                  ...FlutterQuillEmbeds.editorBuilders(
                    imageEmbedConfig: QuillEditorImageEmbedConfig(
                      imageProviderBuilder: (context, imageUrl) {
                        // https://pub.dev/packages/flutter_quill_extensions#-image-assets
                        if (imageUrl.startsWith('assets/')) {
                          return AssetImage(imageUrl);
                        }
                        return null;
                      },
                    ),
                    videoEmbedConfig: QuillEditorVideoEmbedConfig(
                      customVideoBuilder: (videoUrl, readOnly) {
                        // To load YouTube videos https://github.com/singerdmx/flutter-quill/releases/tag/v10.8.0
                        return null;
                      },
                    ),
                  ),
                  TimeStampEmbedBuilder(),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

}
}

class TimeStampEmbed extends quill.Embeddable {
const TimeStampEmbed(
String value,
) : super(timeStampType, value);

static const String timeStampType = 'timeStamp';

static TimeStampEmbed fromDocument(quill.Document document) =>
TimeStampEmbed(jsonEncode(document.toDelta().toJson()));

quill.Document get document => quill.Document.fromJson(jsonDecode(data));
}

class TimeStampEmbedBuilder extends quill.EmbedBuilder {
@OverRide
String get key => 'timeStamp';

@OverRide
String toPlainText(quill.Embed node) {
return node.value.data;
}

@OverRide
Widget build(
BuildContext context,
quill.EmbedContext embedContext,
) {
return Row(
children: [
const Icon(Icons.access_time_rounded),
Text(embedContext.node.value.data as String),
],
);
}
}
`
M Chrome (Problem)
Before creating a keyboard

After creating a keyboard

Naver (Normal)
Before creating a keyboard

After creating a keyboard

@kasreder kasreder added the bug Something isn't working label May 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant