@blocksuite/virgo - npm Package Compare versions

Comparing version 0.0.0-20231002183259-cf2c7ed1-nightly to 0.0.0-20231003121106-9641d418-nightly

dist/services/range.d.ts

@@ -19,2 +19,14 @@ import type { VirgoLine } from '../components/virgo-line.js';
     /**
+     * There are two cases to have the second line:
+     * 1. long text auto wrap in span element
+     * 2. soft break
+     */
+    isFirstLine: (vRange: VRange | null) => boolean;
+    /**
+     * There are two cases to have the second line:
+     * 1. long text auto wrap in span element
+     * 2. soft break
+     */
+    isLastLine: (vRange: VRange | null) => boolean;
+    /**
      * the vRange is synced to the native selection asynchronically
@@ -24,2 +36,6 @@ * if sync is true, the native selection will be synced immediately
     setVRange: (vRange: VRange | null, sync?: boolean) => void;
+    focusEnd: () => void;
+    focusStart: () => void;
+    selectAll: () => void;
+    focusIndex: (index: number) => void;
     /**
@@ -26,0 +42,0 @@ * sync the dom selection from vRange for **this Editor**

dist/services/range.js

@@ -72,2 +72,82 @@ import { assertExists } from '@blocksuite/global/utils';
         /**
+         * There are two cases to have the second line:
+         * 1. long text auto wrap in span element
+         * 2. soft break
+         */
+        this.isFirstLine = (vRange) => {
+            if (!vRange)
+                return false;
+            if (vRange.length > 0) {
+                throw new Error('vRange should be collapsed');
+            }
+            const range = this.toDomRange(vRange);
+            if (!range) {
+                throw new Error('failed to convert vRange to domRange');
+            }
+            // check case 1:
+            const beforeText = this.editor.yTextString.slice(0, vRange.index);
+            if (beforeText.includes('\n')) {
+                return false;
+            }
+            // check case 2:
+            // If there is a wrapped text, there are two possible positions for
+            // cursor: (in first line and in second line)
+            // aaaaaaaa| or aaaaaaaa
+            // bb           |bb
+            // We have no way to distinguish them and we just assume that the cursor
+            // can not in the first line because if we apply the vRange manually the
+            // cursor will jump to the second line.
+            const container = range.commonAncestorContainer.parentElement;
+            assertExists(container);
+            const containerRect = container.getBoundingClientRect();
+            // There will be two rects if the cursor is at the edge of the line:
+            // aaaaaaaa| or aaaaaaaa
+            // bb           |bb
+            const rangeRects = range.getClientRects();
+            // We use last rect here to make sure we get the second rect.
+            // (Based on the assumption that the cursor can not in the first line)
+            const rangeRect = rangeRects[rangeRects.length - 1];
+            return rangeRect.top === containerRect.top;
+        };
+        /**
+         * There are two cases to have the second line:
+         * 1. long text auto wrap in span element
+         * 2. soft break
+         */
+        this.isLastLine = (vRange) => {
+            if (!vRange)
+                return false;
+            if (vRange.length > 0) {
+                throw new Error('vRange should be collapsed');
+            }
+            // check case 1:
+            const afterText = this.editor.yTextString.slice(vRange.index);
+            if (afterText.includes('\n')) {
+                return false;
+            }
+            const range = this.toDomRange(vRange);
+            if (!range) {
+                throw new Error('failed to convert vRange to domRange');
+            }
+            // check case 2:
+            // If there is a wrapped text, there are two possible positions for
+            // cursor: (in first line and in second line)
+            // aaaaaaaa| or aaaaaaaa
+            // bb           |bb
+            // We have no way to distinguish them and we just assume that the cursor
+            // can not in the first line because if we apply the vRange manually the
+            // cursor will jump to the second line.
+            const container = range.commonAncestorContainer.parentElement;
+            assertExists(container);
+            const containerRect = container.getBoundingClientRect();
+            // There will be two rects if the cursor is at the edge of the line:
+            // aaaaaaaa| or aaaaaaaa
+            // bb           |bb
+            const rangeRects = range.getClientRects();
+            // We use last rect here to make sure we get the second rect.
+            // (Based on the assumption that the cursor can not in the first line)
+            const rangeRect = rangeRects[rangeRects.length - 1];
+            return rangeRect.bottom === containerRect.bottom;
+        };
+        /**
          * the vRange is synced to the native selection asynchronically
@@ -86,2 +166,26 @@ * if sync is true, the native selection will be synced immediately
         };
+        this.focusEnd = () => {
+            this.setVRange({
+                index: this.editor.yTextLength,
+                length: 0,
+            });
+        };
+        this.focusStart = () => {
+            this.setVRange({
+                index: 0,
+                length: 0,
+            });
+        };
+        this.selectAll = () => {
+            this.setVRange({
+                index: 0,
+                length: this.editor.yTextLength,
+            });
+        };
+        this.focusIndex = (index) => {
+            this.setVRange({
+                index,
+                length: 0,
+            });
+        };
         /**
@@ -88,0 +192,0 @@ * sync the dom selection from vRange for **this Editor**

dist/virgo.d.ts

@@ -64,3 +64,9 @@ import { DisposableGroup, Slot } from '@blocksuite/global/utils';
     isVRangeValid: (vRange: VRange | null) => boolean;
+    isFirstLine: (vRange: VRange | null) => boolean;
+    isLastLine: (vRange: VRange | null) => boolean;
     setVRange: (vRange: VRange | null, sync?: boolean) => void;
+    focusStart: () => void;
+    focusEnd: () => void;
+    selectAll: () => void;
+    focusIndex: (index: number) => void;
     syncVRange: () => void;
@@ -86,8 +92,2 @@ getDeltasByVRange: (vRange: VRange) => import("./types.js").DeltaEntry<TextAttributes>[];
     get isReadonly(): boolean;
-    /**
-     * the vRange is synced to the native selection asynchronically
-     */
-    focusEnd(): void;
-    selectAll(): void;
-    focusByIndex(index: number): void;
     deleteText(vRange: VRange): void;
@@ -94,0 +94,0 @@ insertText(vRange: VRange, text: string, attributes?: TextAttributes): void;

dist/virgo.js

@@ -75,3 +75,9 @@ import { assertExists, DisposableGroup, Slot } from '@blocksuite/global/utils';
         this.isVRangeValid = this.rangeService.isVRangeValid;
+        this.isFirstLine = this.rangeService.isFirstLine;
+        this.isLastLine = this.rangeService.isLastLine;
         this.setVRange = this.rangeService.setVRange;
+        this.focusStart = this.rangeService.focusStart;
+        this.focusEnd = this.rangeService.focusEnd;
+        this.selectAll = this.rangeService.selectAll;
+        this.focusIndex = this.rangeService.focusIndex;
         this.syncVRange = this.rangeService.syncVRange;
@@ -152,23 +158,2 @@ // Expose delta service API
     }
-    /**
-     * the vRange is synced to the native selection asynchronically
-     */
-    focusEnd() {
-        this.rangeService.setVRange({
-            index: this.yText.length,
-            length: 0,
-        });
-    }
-    selectAll() {
-        this.rangeService.setVRange({
-            index: 0,
-            length: this.yText.length,
-        });
-    }
-    focusByIndex(index) {
-        this.rangeService.setVRange({
-            index: index,
-            length: 0,
-        });
-    }
     deleteText(vRange) {
@@ -175,0 +160,0 @@ this._transact(() => {

package.json

 {
   "name": "@blocksuite/virgo",
-  "version": "0.0.0-20231002183259-cf2c7ed1-nightly",
+  "version": "0.0.0-20231003121106-9641d418-nightly",
   "description": "A micro editor.",
@@ -27,3 +27,3 @@ "type": "module",
     "zod": "^3.22.2",
-    "@blocksuite/global": "0.0.0-20231002183259-cf2c7ed1-nightly"
+    "@blocksuite/global": "0.0.0-20231003121106-9641d418-nightly"
   },
@@ -30,0 +30,0 @@ "scripts": {

src/services/range.ts

@@ -158,2 +158,90 @@ import { assertExists } from '@blocksuite/global/utils';
   /**
+   * There are two cases to have the second line:
+   * 1. long text auto wrap in span element
+   * 2. soft break
+   */
+  isFirstLine = (vRange: VRange | null): boolean => {
+    if (!vRange) return false;
+
+    if (vRange.length > 0) {
+      throw new Error('vRange should be collapsed');
+    }
+
+    const range = this.toDomRange(vRange);
+    if (!range) {
+      throw new Error('failed to convert vRange to domRange');
+    }
+
+    // check case 1:
+    const beforeText = this.editor.yTextString.slice(0, vRange.index);
+    if (beforeText.includes('\n')) {
+      return false;
+    }
+
+    // check case 2:
+    // If there is a wrapped text, there are two possible positions for
+    // cursor: (in first line and in second line)
+    // aaaaaaaa| or aaaaaaaa
+    // bb           |bb
+    // We have no way to distinguish them and we just assume that the cursor
+    // can not in the first line because if we apply the vRange manually the
+    // cursor will jump to the second line.
+    const container = range.commonAncestorContainer.parentElement;
+    assertExists(container);
+    const containerRect = container.getBoundingClientRect();
+    // There will be two rects if the cursor is at the edge of the line:
+    // aaaaaaaa| or aaaaaaaa
+    // bb           |bb
+    const rangeRects = range.getClientRects();
+    // We use last rect here to make sure we get the second rect.
+    // (Based on the assumption that the cursor can not in the first line)
+    const rangeRect = rangeRects[rangeRects.length - 1];
+    return rangeRect.top === containerRect.top;
+  };
+
+  /**
+   * There are two cases to have the second line:
+   * 1. long text auto wrap in span element
+   * 2. soft break
+   */
+  isLastLine = (vRange: VRange | null): boolean => {
+    if (!vRange) return false;
+
+    if (vRange.length > 0) {
+      throw new Error('vRange should be collapsed');
+    }
+
+    // check case 1:
+    const afterText = this.editor.yTextString.slice(vRange.index);
+    if (afterText.includes('\n')) {
+      return false;
+    }
+
+    const range = this.toDomRange(vRange);
+    if (!range) {
+      throw new Error('failed to convert vRange to domRange');
+    }
+
+    // check case 2:
+    // If there is a wrapped text, there are two possible positions for
+    // cursor: (in first line and in second line)
+    // aaaaaaaa| or aaaaaaaa
+    // bb           |bb
+    // We have no way to distinguish them and we just assume that the cursor
+    // can not in the first line because if we apply the vRange manually the
+    // cursor will jump to the second line.
+    const container = range.commonAncestorContainer.parentElement;
+    assertExists(container);
+    const containerRect = container.getBoundingClientRect();
+    // There will be two rects if the cursor is at the edge of the line:
+    // aaaaaaaa| or aaaaaaaa
+    // bb           |bb
+    const rangeRects = range.getClientRects();
+    // We use last rect here to make sure we get the second rect.
+    // (Based on the assumption that the cursor can not in the first line)
+    const rangeRect = rangeRects[rangeRects.length - 1];
+    return rangeRect.bottom === containerRect.bottom;
+  };
+
+  /**
    * the vRange is synced to the native selection asynchronically
@@ -175,2 +263,30 @@ * if sync is true, the native selection will be synced immediately
 
+  focusEnd = (): void => {
+    this.setVRange({
+      index: this.editor.yTextLength,
+      length: 0,
+    });
+  };
+
+  focusStart = (): void => {
+    this.setVRange({
+      index: 0,
+      length: 0,
+    });
+  };
+
+  selectAll = (): void => {
+    this.setVRange({
+      index: 0,
+      length: this.editor.yTextLength,
+    });
+  };
+
+  focusIndex = (index: number): void => {
+    this.setVRange({
+      index,
+      length: 0,
+    });
+  };
+
   /**
@@ -177,0 +293,0 @@ * sync the dom selection from vRange for **this Editor**

src/virgo.ts

@@ -138,3 +138,9 @@ import { assertExists, DisposableGroup, Slot } from '@blocksuite/global/utils';
   isVRangeValid = this.rangeService.isVRangeValid;
+  isFirstLine = this.rangeService.isFirstLine;
+  isLastLine = this.rangeService.isLastLine;
   setVRange = this.rangeService.setVRange;
+  focusStart = this.rangeService.focusStart;
+  focusEnd = this.rangeService.focusEnd;
+  selectAll = this.rangeService.selectAll;
+  focusIndex = this.rangeService.focusIndex;
   syncVRange = this.rangeService.syncVRange;
@@ -237,26 +243,2 @@
 
-  /**
-   * the vRange is synced to the native selection asynchronically
-   */
-  focusEnd(): void {
-    this.rangeService.setVRange({
-      index: this.yText.length,
-      length: 0,
-    });
-  }
-
-  selectAll(): void {
-    this.rangeService.setVRange({
-      index: 0,
-      length: this.yText.length,
-    });
-  }
-
-  focusByIndex(index: number): void {
-    this.rangeService.setVRange({
-      index: index,
-      length: 0,
-    });
-  }
-
   deleteText(vRange: VRange): void {
@@ -263,0 +245,0 @@ this._transact(() => {

No alert changes

Improved metrics

Total package byte prevSize

522375

2.1%

Lines of code

8568

2.29%

Dependency changes

• + Added

  @blocksuite/global@0.0.0-20231003121106-9641d418-nightly
  (transitive)

• - Removed

  @blocksuite/global@0.0.0-20231002183259-cf2c7ed1-nightly
  (transitive)

• Updated

  @blocksuite/global@0.0.0-20231003121106-9641d418-nightly