feat: enable drag-and-drop functionality for text in the editor

lib/src/editor/block_component/base_component/selection/block_selection_area.dart

@@ -13,6 +13,7 @@
   cursor,
   selection,
   block,
+  dragAndDrop,
 }
 
 /// [BlockSelectionArea] is a widget that renders the selection area or the cursor of a block.
@@ -22,12 +23,14 @@
     required this.node,
     required this.delegate,
     required this.listenable,
+    this.dragAndDropListenable,
     required this.cursorColor,
     required this.selectionColor,
     required this.blockColor,
     this.supportTypes = const [
       BlockSelectionType.cursor,
       BlockSelectionType.selection,
+      BlockSelectionType.dragAndDrop,
     ],
   });
 
@@ -37,6 +40,10 @@
   // get the selection from the listenable
   final ValueListenable<Selection?> listenable;
 
+  // obtain the selection from dragAndDropListenable
+  // if it's `null`, construct the cursor for the drag-and-drop pointer
+  final ValueListenable<Selection?>? dragAndDropListenable;
+
   // the color of the cursor
   final Color cursorColor;
 
@@ -60,6 +67,9 @@
     debugLabel: 'cursor_${widget.node.path}',
   );
 
+  // keep the previous drag and drop selection rects
+  // to avoid unnecessary rebuild
+  List<Rect>? prevDragAndDropSelectionRects;
   // keep the previous cursor rect to avoid unnecessary rebuild
   Rect? prevCursorRect;
   // keep the previous selection rects to avoid unnecessary rebuild
@@ -91,6 +101,24 @@
       valueListenable: widget.listenable,
       builder: ((context, value, child) {
         final sizedBox = child ?? const SizedBox.shrink();
+
+        final dragAndDropSelection =
+            context.read<EditorState>().dragAndDropSelection;
+        if (dragAndDropSelection != null &&
+            widget.dragAndDropListenable != null) {
+          if (!widget.supportTypes.contains(BlockSelectionType.dragAndDrop) ||
+              prevDragAndDropSelectionRects == null ||
+              prevDragAndDropSelectionRects!.isEmpty ||
+              (prevDragAndDropSelectionRects!.length == 1 &&
+                  prevDragAndDropSelectionRects!.first.width == 0)) {
+            return sizedBox;
+          }
+          return SelectionAreaPaint(
+            rects: prevDragAndDropSelectionRects!,
+            selectionColor: widget.selectionColor,
+          );
+        }
+
         final selection = value?.normalized;
 
         if (selection == null) {
@@ -162,12 +190,29 @@
     if (!mounted) {
       return;
     }
-
     final selection = widget.listenable.value?.normalized;
     final path = widget.node.path;
 
+    Selection? dragAndDropSelection;
+    if (widget.dragAndDropListenable != null) {
+      dragAndDropSelection = widget.dragAndDropListenable!.value?.normalized;
+    }
+
+    if (dragAndDropSelection != null) {
+      if (widget.supportTypes.contains(BlockSelectionType.dragAndDrop)) {
+        final rects = widget.delegate.getRectsInSelection(dragAndDropSelection);
+        if (!_deepEqual(rects, prevSelectionRects)) {
+          setState(() {
+            prevDragAndDropSelectionRects = rects;
+            prevSelectionRects = null;
+            prevCursorRect = null;
+            prevBlockRect = null;
+          });
+        }
+      }
+    }
     // the current path is in the selection
-    if (selection != null && path.inSelection(selection)) {
+    else if (selection != null && path.inSelection(selection)) {
       if (widget.supportTypes.contains(BlockSelectionType.block) &&
           context.read<EditorState>().selectionType == SelectionType.block) {
         if (!path.equals(selection.start.path)) {

lib/src/editor/block_component/base_component/selection/block_selection_container.dart

@@ -8,12 +8,14 @@ class BlockSelectionContainer extends StatelessWidget {
     required this.node,
     required this.delegate,
     required this.listenable,
+    required this.dragAndDropListenable,
     this.cursorColor = Colors.black,
     this.selectionColor = Colors.blue,
     this.blockColor = Colors.blue,
     this.supportTypes = const [
       BlockSelectionType.cursor,
       BlockSelectionType.selection,
+      BlockSelectionType.dragAndDrop,
     ],
     required this.child,
   });
@@ -24,6 +26,8 @@ class BlockSelectionContainer extends StatelessWidget {
   // get the selection from the listenable
   final ValueListenable<Selection?> listenable;
 
+  final ValueListenable<Selection?> dragAndDropListenable;
+
   // the color of the cursor
   final Color cursorColor;
 
@@ -55,6 +59,7 @@ class BlockSelectionContainer extends StatelessWidget {
           node: node,
           delegate: delegate,
           listenable: listenable,
+          dragAndDropListenable: dragAndDropListenable,
           cursorColor: cursorColor,
           selectionColor: selectionColor,
           blockColor: blockColor,

lib/src/editor/block_component/bulleted_list_block_component/bulleted_list_block_component.dart

@@ -106,6 +106,42 @@
   @override
   Node get node => widget.node;
 
+  CursorStyle _cursorStyle = CursorStyle.verticalLine;
+
+  @override
+  CursorStyle get cursorStyle => _cursorStyle;
+
+  set cursorStyle(CursorStyle cursorStyle) {
+    _cursorStyle = cursorStyle;
+  }
+
+  bool _shouldCursorBlink = true;
+
+  @override
+  bool get shouldCursorBlink => _shouldCursorBlink;
+
+  set shouldCursorBlink(bool value) {
+    _shouldCursorBlink = value;
+  }
+
+  void _onCursorStyleChange() {
+    cursorStyle = editorState.cursorStyle;
+
+    shouldCursorBlink = cursorStyle != CursorStyle.dottedVerticalLine;
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    editorState.cursorStyleNotifier.addListener(_onCursorStyleChange);
+  }
+
+  @override
+  void dispose() {
+    editorState.cursorStyleNotifier.removeListener(_onCursorStyleChange);
+    super.dispose();
+  }
+
   @override
   Widget buildComponent(
     BuildContext context, {
@@ -168,6 +204,7 @@
       node: node,
       delegate: this,
       listenable: editorState.selectionNotifier,
+      dragAndDropListenable: editorState.dragAndDropSelectionNotifier,
       blockColor: editorState.editorStyle.selectionColor,
       supportTypes: const [
         BlockSelectionType.block,

lib/src/editor/block_component/divider_block_component/divider_block_component.dart

@@ -111,6 +111,7 @@ class _DividerBlockComponentWidgetState
       node: node,
       delegate: this,
       listenable: editorState.selectionNotifier,
+      dragAndDropListenable: editorState.dragAndDropSelectionNotifier,
       blockColor: editorState.editorStyle.selectionColor,
       cursorColor: editorState.editorStyle.cursorColor,
       selectionColor: editorState.editorStyle.selectionColor,

lib/src/editor/block_component/heading_block_component/heading_block_component.dart

@@ -119,6 +119,42 @@
 
   int get level => widget.node.attributes[HeadingBlockKeys.level] as int? ?? 1;
 
+  CursorStyle _cursorStyle = CursorStyle.verticalLine;
+
+  @override
+  CursorStyle get cursorStyle => _cursorStyle;
+
+  set cursorStyle(CursorStyle cursorStyle) {
+    _cursorStyle = cursorStyle;
+  }
+
+  bool _shouldCursorBlink = true;
+
+  @override
+  bool get shouldCursorBlink => _shouldCursorBlink;
+
+  set shouldCursorBlink(bool value) {
+    _shouldCursorBlink = value;
+  }
+
+  void _onCursorStyleChange() {
+    cursorStyle = editorState.cursorStyle;
+
+    shouldCursorBlink = cursorStyle != CursorStyle.dottedVerticalLine;
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    editorState.cursorStyleNotifier.addListener(_onCursorStyleChange);
+  }
+
+  @override
+  void dispose() {
+    editorState.cursorStyleNotifier.removeListener(_onCursorStyleChange);
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final textDirection = calculateTextDirection(
@@ -183,6 +219,7 @@
       node: node,
       delegate: this,
       listenable: editorState.selectionNotifier,
+      dragAndDropListenable: editorState.dragAndDropSelectionNotifier,
       blockColor: editorState.editorStyle.selectionColor,
       supportTypes: const [
         BlockSelectionType.block,

lib/src/editor/block_component/image_block_component/image_block_component.dart

@@ -162,6 +162,7 @@ class ImageBlockComponentWidgetState extends State<ImageBlockComponentWidget>
       node: node,
       delegate: this,
       listenable: editorState.selectionNotifier,
+      dragAndDropListenable: editorState.dragAndDropSelectionNotifier,
       blockColor: editorState.editorStyle.selectionColor,
       supportTypes: const [
         BlockSelectionType.block,
@@ -196,6 +197,8 @@ class ImageBlockComponentWidgetState extends State<ImageBlockComponentWidget>
                   node: node,
                   delegate: this,
                   listenable: editorState.selectionNotifier,
+                  dragAndDropListenable:
+                      editorState.dragAndDropSelectionNotifier,
                   cursorColor: editorState.editorStyle.cursorColor,
                   selectionColor: editorState.editorStyle.selectionColor,
                   child: child!,

lib/src/editor/block_component/numbered_list_block_component/numbered_list_block_component.dart

@@ -112,6 +112,42 @@
   @override
   Node get node => widget.node;
 
+  CursorStyle _cursorStyle = CursorStyle.verticalLine;
+
+  @override
+  CursorStyle get cursorStyle => _cursorStyle;
+
+  set cursorStyle(CursorStyle cursorStyle) {
+    _cursorStyle = cursorStyle;
+  }
+
+  bool _shouldCursorBlink = true;
+
+  @override
+  bool get shouldCursorBlink => _shouldCursorBlink;
+
+  set shouldCursorBlink(bool value) {
+    _shouldCursorBlink = value;
+  }
+
+  void _onCursorStyleChange() {
+    cursorStyle = editorState.cursorStyle;
+
+    shouldCursorBlink = cursorStyle != CursorStyle.dottedVerticalLine;
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    editorState.cursorStyleNotifier.addListener(_onCursorStyleChange);
+  }
+
+  @override
+  void dispose() {
+    editorState.cursorStyleNotifier.removeListener(_onCursorStyleChange);
+    super.dispose();
+  }
+
   @override
   Widget buildComponent(
     BuildContext context, {
@@ -175,6 +211,7 @@
       node: node,
       delegate: this,
       listenable: editorState.selectionNotifier,
+      dragAndDropListenable: editorState.dragAndDropSelectionNotifier,
       blockColor: editorState.editorStyle.selectionColor,
       supportTypes: const [
         BlockSelectionType.block,

lib/src/editor/block_component/paragraph_block_component/paragraph_block_component.dart

@@ -111,16 +111,36 @@
 
   bool _showPlaceholder = false;
 
+  CursorStyle _cursorStyle = CursorStyle.verticalLine;
+
+  @override
+  CursorStyle get cursorStyle => _cursorStyle;
+
+  set cursorStyle(CursorStyle cursorStyle) {
+    _cursorStyle = cursorStyle;
+  }
+
+  bool _shouldCursorBlink = true;
+
+  @override
+  bool get shouldCursorBlink => _shouldCursorBlink;
+
+  set shouldCursorBlink(bool value) {
+    _shouldCursorBlink = value;
+  }
+
   @override
   void initState() {
     super.initState();
     editorState.selectionNotifier.addListener(_onSelectionChange);
+    editorState.cursorStyleNotifier.addListener(_onCursorStyleChange);
     _onSelectionChange();
   }
 
   @override
   void dispose() {
     editorState.selectionNotifier.removeListener(_onSelectionChange);
+    editorState.cursorStyleNotifier.removeListener(_onCursorStyleChange);
     super.dispose();
   }
 
@@ -140,6 +160,12 @@
     }
   }
 
+  void _onCursorStyleChange() {
+    cursorStyle = editorState.cursorStyle;
+
+    shouldCursorBlink = cursorStyle != CursorStyle.dottedVerticalLine;
+  }
+
   @override
   Widget buildComponent(
     BuildContext context, {
@@ -191,6 +217,7 @@
       node: node,
       delegate: this,
       listenable: editorState.selectionNotifier,
+      dragAndDropListenable: editorState.dragAndDropSelectionNotifier,
       blockColor: editorState.editorStyle.selectionColor,
       supportTypes: const [
         BlockSelectionType.block,