flutter_html icon indicating copy to clipboard operation
flutter_html copied to clipboard

[BUG] Selection Area Does not Working on Html

Open Hasabantov1999 opened this issue 2 years ago • 0 comments

Describe the bug: --- I m using flutter_html 3.0.0-beta.2 version and i need to use Special Selections Controls This is my articeture if (widget.model.description != null) SelectionArea( selectionControls: LamotsSelectionControls(), child: HtmlWidget( fixHTMLCharacters(widget.model.description!), ), ), But it doesnt work when i select an element, i see underscore on screen

import 'package:egitimapp/core/init/selecatable_components/selectable_components.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

class LamotsSelectionControls extends MaterialTextSelectionControls {
  // Padding between the toolbar and the anchor.
  static const double _kToolbarContentDistanceBelow = 20.0;
  static const double _kToolbarContentDistance = 8.0;

  /// Builder for material-style copy/paste text selection toolbar.
  @override
  Widget buildToolbar(
    BuildContext context,
    Rect globalEditableRegion,
    double textLineHeight,
    Offset selectionMidpoint,
    List<TextSelectionPoint> endpoints,
    TextSelectionDelegate delegate,
    ClipboardStatusNotifier? clipboardStatus,
    Offset? lastSecondaryTapDownPosition,
  ) {
    final TextSelectionPoint startTextSelectionPoint = endpoints[0];
    final TextSelectionPoint endTextSelectionPoint =
        endpoints.length > 1 ? endpoints[1] : endpoints[0];
    final Offset anchorAbove = Offset(
        globalEditableRegion.left + selectionMidpoint.dx,
        globalEditableRegion.top +
            startTextSelectionPoint.point.dy -
            textLineHeight -
            _kToolbarContentDistance);
    final Offset anchorBelow = Offset(
      globalEditableRegion.left + selectionMidpoint.dx,
      globalEditableRegion.top +
          endTextSelectionPoint.point.dy +
          _kToolbarContentDistanceBelow,
    );

    return MyTextSelectionToolbar(
      anchorAbove: anchorAbove,
      anchorBelow: anchorBelow,
      clipboardStatus: clipboardStatus ?? ClipboardStatusNotifier(),
      selectedText: delegate.textEditingValue.text.substring(
        delegate.textEditingValue.selection.start,
        delegate.textEditingValue.selection.end,
      ),
      // ignore: deprecated_member_use
      handleCopy: canCopy(delegate)
          // ignore: deprecated_member_use
          ? () => handleCopy(delegate, clipboardStatus)
          : null,
      handleCustomButton: () {
        delegate.userUpdateTextEditingValue(
          delegate.textEditingValue.copyWith(
              selection: TextSelection.collapsed(
            offset: delegate.textEditingValue.selection.baseOffset,
          )),
          SelectionChangedCause.tap,
        );
        delegate.hideToolbar();
      },
      // ignore: deprecated_member_use
      handleCut: canCut(delegate) ? () => handleCut(delegate) : null,
      // ignore: deprecated_member_use
      handlePaste: canPaste(delegate) ? () => handlePaste(delegate) : null,
      handleSelectAll:
          // ignore: deprecated_member_use
          canSelectAll(delegate) ? () => handleSelectAll(delegate) : null,
    );
  }
}

class MyTextSelectionToolbar extends StatefulWidget {
  const MyTextSelectionToolbar({
    Key? key,
    required this.anchorAbove,
    required this.anchorBelow,
    required this.clipboardStatus,
    this.handleCopy,
    this.handleCustomButton,
    this.handleCut,
    this.handlePaste,
    this.handleSelectAll,
    required this.selectedText,
  }) : super(key: key);

  final Offset anchorAbove;
  final Offset anchorBelow;
  final ClipboardStatusNotifier clipboardStatus;
  final String selectedText;
  final VoidCallback? handleCopy;
  final VoidCallback? handleCustomButton;
  final VoidCallback? handleCut;
  final VoidCallback? handlePaste;
  final VoidCallback? handleSelectAll;

  @override
  MyTextSelectionToolbarState createState() => MyTextSelectionToolbarState();
}

class MyTextSelectionToolbarState extends State<MyTextSelectionToolbar> {
  void _onChangedClipboardStatus() {
    setState(() {});
  }

  @override
  void initState() {
    super.initState();

    widget.clipboardStatus.addListener(_onChangedClipboardStatus);
    widget.clipboardStatus.update();
  }

  @override
  void didUpdateWidget(MyTextSelectionToolbar oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.clipboardStatus != oldWidget.clipboardStatus) {
      widget.clipboardStatus.addListener(_onChangedClipboardStatus);
      oldWidget.clipboardStatus.removeListener(_onChangedClipboardStatus);
    }
    widget.clipboardStatus.update();
  }

  @override
  void dispose() {
    super.dispose();
    if (!widget.clipboardStatus.disposed) {
      widget.clipboardStatus.removeListener(_onChangedClipboardStatus);
    }
  }

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMaterialLocalizations(context));
    final MaterialLocalizations localizations =
        MaterialLocalizations.of(context);

    // final List<_TextSelectionToolbarItemData> itemDatas =
    //     <_TextSelectionToolbarItemData>[
    //   if (widget.handleCut != null)
    //     _TextSelectionToolbarItemData(
    //       label: localizations.cutButtonLabel,
    //       onPressed: widget.handleCut,
    //     ),
    //   if (widget.handleCopy != null)
    //     _TextSelectionToolbarItemData(
    //       label: localizations.copyButtonLabel,
    //       onPressed: widget.handleCopy,
    //     ),
    //   _TextSelectionToolbarItemData(
    //       onPressed: () {}, label: 'Kaydet', visible: false),
    //   if (widget.handlePaste != null &&
    //       widget.clipboardStatus.value == ClipboardStatus.pasteable)
    //     _TextSelectionToolbarItemData(
    //       label: localizations.pasteButtonLabel,
    //       onPressed: widget.handlePaste,
    //     ),
    //   if (widget.handleSelectAll != null)
    //     _TextSelectionToolbarItemData(
    //       label: localizations.selectAllButtonLabel,
    //       onPressed: widget.handleSelectAll,
    //     ),
    // ];

    // int childIndex = 0;

    return TextSelectionToolbar(
      anchorAbove: widget.anchorAbove,
      anchorBelow: widget.anchorBelow,
      toolbarBuilder: (BuildContext context, Widget child) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            PdfSelectedItem(
              selectedItem: widget.selectedText,
            ),
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black12.withOpacity(0.15),
                    blurRadius: 10,
                  ),
                ],
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: child,
            ),
          ],
        );
      },
      children: [
        SizedBox(
          width: 222.w,
          child: CupertinoButton(
            padding: EdgeInsets.zero,
            child: Text(localizations.copyButtonLabel),
            onPressed: widget.handleCopy,
          ),
        )
      ],
    );
  }
}

HTML to reproduce the issue:

Html widget configuration:

Expected behavior:

Screenshots: image

Device details and Flutter/Dart/flutter_html versions:

Stacktrace/Logcat

Additional info:

A picture of a cute animal (not mandatory but encouraged)

Hasabantov1999 avatar Aug 10 '23 09:08 Hasabantov1999