Flutter Quill Editor Custom Embed: Select Custom Dropdown on Backspace Key

[kaushikcrypticalinfo]

Is there an existing issue for this?

• I have searched the existing issues

The question

Flutter Quill Editor Custom Embed: Select Dropdown on Backspace Key

Description

I am working on a Flutter project where I use the Quill editor and have created a custom embedded dropdown using the DropdownEmbed class. My goal is to detect when the cursor reaches this embedded dropdown and handle the backspace key in such a way that instead of deleting the dropdown immediately, it gets selected or highlighted first.

Expected Behavior

• When the user presses the backspace key and the cursor reaches the position of the embedded dropdown, the dropdown should be selected or highlighted, giving the user a visual cue before it is deleted.

Actual Behavior

• Currently, when the backspace key is pressed and the cursor reaches the embedded dropdown, the dropdown is deleted immediately without selection or highlight.

Code Example

Here is my DropdownEmbed class used for embedding a dropdown within the Quill editor:

const String dropDownType = 'dropdown';

class DropdownEmbed extends Embeddable {
  final DropDownTitleItem title;
  final String options;

  DropdownEmbed({
    required this.title,
    required this.options,
  }) : super(
          dropDownType,
          jsonEncode(
            {
              'title': title.toJson(),
              'options': options,
            },
          ),
        );

  @override
  Map<String, dynamic> toJson() {
    return {
      dropDownType: {
        'title': title.toJson(),
        'options': options,
      },
    };
  }

  static DropdownEmbed fromJson(Map<String, dynamic> json) {
    final data = Map<String, dynamic>.from(json);
    return DropdownEmbed(
      title: DropDownTitleItem.fromJson(data['title']),
      options: data['options'],
    );
  }
}

class DropdownBlockEmbed extends CustomBlockEmbed {
  DropdownBlockEmbed(DropdownEmbed embed) : super(dropDownType, embed.data);

  static DropdownBlockEmbed fromEmbed(DropdownEmbed embed) {
    return DropdownBlockEmbed(embed);
  }

  static DropdownEmbed fromCustomBlockEmbed(CustomBlockEmbed blockEmbed) {
    final data = blockEmbed.data as Map<String, dynamic>;
    return DropdownEmbed.fromJson(data);
  }
}

Code Example

Here is my Quill Editor Code

QuillEditor(
  scrollController: scrollController,
  focusNode: focusNode,
  controller: controller,
  configurations: configurations.copyWith(
    customStyles: DefaultStyles(
      h1: DefaultTextBlockStyle(
        defaultTextStyle.style.copyWith(
          fontSize: 32,
          height: 1.15,
          fontWeight: FontWeight.w300,
        ),
        HorizontalSpacing.zero,
        const VerticalSpacing(16, 0),
        VerticalSpacing.zero,
        null,
      ),
    ),
    placeholder: 'Start writing your notes...',
    padding: const EdgeInsets.all(16),
    embedBuilders: [
      DropdownEmbedBuilder(),
      // Other embed builders
    ],
  ),
)

Question

• How can I modify the behavior so that when the backspace key is pressed, and the cursor reaches the embedded dropdown, the dropdown gets selected or highlighted instead of being immediately deleted?