tneotia / html-editor-enhanced

A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.
https://pub.dev/packages/html_editor_enhanced
MIT License
274 stars 331 forks source link

controller.getText() Fails When HTML Editor is Not Visible on Screen #512

Closed nilesh-darji closed 4 months ago

nilesh-darji commented 4 months ago

Describe the bug When the HTML editor is not visible on the screen, the controller.getText() method does not work as expected.

To Reproduce Steps to reproduce the behavior:

  1. Go to the screen with the HTML editor(version 2.5.1).
  2. Ensure the HTML editor is not currently visible (e.g., it is scrolled off-screen or hidden within a tab).
  3. Attempt to retrieve the text from the HTML editor using controller.getText().
  4. Notice that the method does not return the expected text.

Expected behavior The controller.getText() method should return the current text content of the HTML editor, regardless of its visibility on the screen.

Device: Tested only on web(chrome)

Additional context

import 'package:flutter/material.dart';
import 'package:html_editor_enhanced/html_editor.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HTML Editor Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HtmlEditorScreen(),
    );
  }
}

class HtmlEditorScreen extends StatefulWidget {
  @override
  _HtmlEditorScreenState createState() => _HtmlEditorScreenState();
}

class _HtmlEditorScreenState extends State<HtmlEditorScreen> {
  HtmlEditorController _controller = HtmlEditorController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTML Editor with ListView'),
      ),
      body: ListView(
        shrinkWrap: true,
        children: [
          ElevatedButton(
            onPressed: () async {
              print(await _controller.getText());
            },
            child: Text("this button works"),
          ),
          SizedBox(height: 20),
          // HTML Editor
          Container(
            height: 300,
            child: HtmlEditor(
              controller: _controller,
              htmlEditorOptions: HtmlEditorOptions(
                hint: "Your text here...",
              ),
              htmlToolbarOptions: HtmlToolbarOptions(
                toolbarPosition: ToolbarPosition.aboveEditor, // by default
                toolbarType: ToolbarType.nativeGrid, // by default
              ),
              otherOptions: OtherOptions(
                height: 300,
              ),
            ),
          ),
          // Empty container to force scroll
          Container(
            height: 1000,
            child: Text("This is an empty Container"),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () async {
              print(await _controller.getText());
            },
            child: Text("this button will not work"),
          ),
        ],
      ),
    );
  }
}
nilesh-darji commented 4 months ago

Issue Resolved

The problem was due to using a ListView. After changing the implementation, the controller.getText() method now works as expected.