feat: Double-link: In-line cursor handling, e.g., up, down, left,right, backspace keys

libs/components/common/src/lib/text/EditableText.tsx

@@ -41,7 +41,12 @@ import { InlineDate, withDate } from './plugins/date';
 import { DoubleLinkComponent } from './plugins/DoubleLink';
 import { LinkComponent, LinkModal, withLinks, wrapLink } from './plugins/link';
 import { InlineRefLink } from './plugins/reflink';
-import { Contents, isSelectAll, SlateUtils } from './slate-utils';
+import {
+    Contents,
+    isSelectAll,
+    SelectionStartAndEnd,
+    SlateUtils,
+} from './slate-utils';
 import {
     getCommentsIdsOnTextNode,
     getExtraPropertiesFromEditorOutmostNode,
@@ -88,8 +93,12 @@ export interface TextProps {
     /** Backspace event */
     handleBackSpace?: ({
         isCollAndStart,
+        splitContents,
+        selection,
     }: {
         isCollAndStart: boolean;
+        splitContents: Contents;
+        selection: SelectionStartAndEnd;
     }) => boolean | undefined | Promise<boolean | undefined>;
     /** Whether markdown is supported */
     supportMarkdown?: boolean;
@@ -464,7 +473,13 @@ export const Text = forwardRef<ExtendedTextUtils, TextProps>((props, ref) => {
         if (!isCool) {
             hideInlineMenu && hideInlineMenu();
         }
-        preventBindIfNeeded(handleBackSpace)(e, { isCollAndStart });
+        const selection = utils.current.getSelectionStartAndEnd();
+        const splitContents = utils.current.getSplitContentsBySelection();
+        preventBindIfNeeded(handleBackSpace)(e, {
+            isCollAndStart,
+            selection,
+            splitContents,
+        });
     };
 
     const onTab = (e: KeyboardEvent) => {

libs/components/common/src/lib/text/slate-utils.ts

@@ -503,7 +503,7 @@ Editor.after = function (
     return target;
 };
 
-type SelectionStartAndEnd = {
+export type SelectionStartAndEnd = {
     selectionStart: Point;
     selectionEnd: Point;
 };
@@ -517,6 +517,10 @@ export type Contents = {
         content: Descendant[];
         isEmpty: boolean;
     };
+    contentSelection: {
+        content: Descendant[];
+        isEmpty: boolean;
+    };
 };
 
 class SlateUtils {
@@ -572,6 +576,7 @@ class SlateUtils {
             anchor: point1,
             focus: point2,
         });
+
         if (!fragment.length) {
             console.error('Debug information:', point1, point2, fragment);
             throw new Error('Failed to get content between!');
@@ -602,7 +607,7 @@ class SlateUtils {
         for (let i = 0; i < fragmentChildren.length; i++) {
             const child = fragmentChildren[i];
             if ('type' in child && child.type === 'link') {
-                i !== fragmentChildren.length - 1 && textChildren.push(child);
+                textChildren.push(child);
                 continue;
             }
             if (!('text' in child)) {
@@ -638,6 +643,10 @@ class SlateUtils {
                 content: this.getContentBetween(selectionEnd, end),
                 isEmpty: Point.equals(end, selectionEnd),
             },
+            contentSelection: {
+                content: this.getContentBetween(selectionStart, selectionEnd),
+                isEmpty: false,
+            },
         } as Contents;
     }