@blocksuite/virgo - npm Package Compare versions

Comparing version 0.5.0-20230310132906-cc38585 to 0.5.0-20230311151726-8b99e2c

dist/components/virgo-element.d.ts

@@ -1,2 +0,2 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import type { DeltaInsert } from '../types.js';
@@ -3,0 +3,0 @@ import type { BaseTextAttributes } from '../utils/base-attributes.js';

dist/components/virgo-line.d.ts

@@ -8,3 +8,5 @@ import { LitElement } from 'lit';
     get textContent(): string;
-    render(): import("lit-html").TemplateResult<1>;
+    getUpdateComplete(): Promise<boolean>;
+    protected firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
     createRenderRoot(): this;
@@ -11,0 +13,0 @@ }

dist/components/virgo-line.js

@@ -20,9 +20,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     }
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await Promise.all(this.elements.map(el => el.updateComplete));
+        return result;
+    }
+    firstUpdated() {
+        this.style.display = 'block';
+    }
     render() {
-        return html `<style>
-        v-line {
-          display: block;
-        }
-      </style>
-      <div>${this.elements}</div>`;
+        return html `<div>${this.elements}</div>`;
     }
@@ -29,0 +32,0 @@ createRenderRoot() {

dist/components/virgo-text.d.ts

 import { LitElement } from 'lit';
 import type { DirectiveResult } from 'lit/directive.js';
-import { StyleMapDirective } from 'lit/directives/style-map.js';
+import { type StyleMapDirective } from 'lit/directives/style-map.js';
 export declare class VText extends LitElement {
     str: string;
     styles: DirectiveResult<typeof StyleMapDirective>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     createRenderRoot(): this;
@@ -9,0 +9,0 @@ }

dist/components/virgo-text.js

@@ -11,5 +11,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { ZERO_WIDTH_SPACE } from '../constant.js';
-const unitTextStyles = styleMap({
-    whiteSpace: 'pre-wrap',
-});
 let VText = class VText extends LitElement {
@@ -19,3 +16,3 @@ constructor() {
         this.str = ZERO_WIDTH_SPACE;
-        this.styles = unitTextStyles;
+        this.styles = styleMap({});
     }
@@ -22,0 +19,0 @@ render() {

dist/virgo.d.ts

@@ -44,3 +44,5 @@ import { Slot } from '@blocksuite/global/utils';
         unmounted: Slot;
+        updated: Slot;
         updateVRange: Slot<UpdateVRangeProp>;
+        rangeUpdated: Slot<Range>;
     };
@@ -78,2 +80,3 @@ get yText(): Y.YText;
     syncVRange(): void;
+    private _applyVRange;
     /**
@@ -80,0 +83,0 @@ * calculate the dom selection from vRange for **this Editor**

dist/virgo.js

@@ -47,6 +47,4 @@ import { assertExists, Slot } from '@blocksuite/global/utils';
                                 return null;
-                            for (let i = 0; i < texts.length; i++) {
-                                text = texts[i];
-                                textOffset = offset === 0 ? offset : text.length;
-                            }
+                            text = texts[texts.length - 1];
+                            textOffset = offset === 0 ? offset : text.length;
                             break;
@@ -70,3 +68,3 @@ }
                                 return null;
-                            text = texts[0];
+                            text = texts[texts.length - 1];
                             textOffset = calculateTextLength(text);
@@ -83,3 +81,3 @@ break;
                                 return null;
-                            text = texts[0];
+                            text = texts[texts.length - 1];
                             textOffset = calculateTextLength(text);
@@ -173,3 +171,3 @@ break;
         };
-        this._renderDeltas = () => {
+        this._renderDeltas = async () => {
             assertExists(this._rootElement);
@@ -193,2 +191,6 @@ const deltas = this.yText.toDelta();
             this._rootElement.replaceChildren(...lines);
+            await Promise.all(lines.map(async (line) => {
+                await line.updateComplete;
+            }));
+            this.slots.updated.emit();
         };
@@ -201,2 +203,14 @@ this.setAttributesSchema = (schema) => {
         };
+        this._applyVRange = (vRange) => {
+            const newRange = this.toDomRange(vRange);
+            if (newRange) {
+                const selectionRoot = findDocumentOrShadowRoot(this);
+                const selection = selectionRoot.getSelection();
+                if (selection) {
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+                    this.slots.rangeUpdated.emit(newRange);
+                }
+            }
+        };
         this._onBeforeInput = (event) => {
@@ -371,16 +385,7 @@ event.preventDefault();
             const fn = () => {
-                if (!newVRange) {
-                    return;
+                if (newVRange) {
+                    // when using input method _vRange will return to the starting point,
+                    // so we need to re-sync
+                    this._applyVRange(newVRange);
                 }
-                // when using input method _vRange will return to the starting point,
-                // so we need to resync
-                const newRange = this.toDomRange(newVRange);
-                if (newRange) {
-                    const selectionRoot = findDocumentOrShadowRoot(this);
-                    const selection = selectionRoot.getSelection();
-                    if (selection) {
-                        selection.removeAllRanges();
-                        selection.addRange(newRange);
-                    }
-                }
             };
@@ -397,3 +402,5 @@ // updates in lit are performed asynchronously
             unmounted: new Slot(),
+            updated: new Slot(),
             updateVRange: new Slot(),
+            rangeUpdated: new Slot(),
         };
@@ -641,11 +648,3 @@ this.slots.updateVRange.on(this._onUpdateVRange);
         if (this._vRange) {
-            const newRange = this.toDomRange(this._vRange);
-            if (newRange) {
-                const selectionRoot = findDocumentOrShadowRoot(this);
-                const selection = selectionRoot.getSelection();
-                if (selection) {
-                    selection.removeAllRanges();
-                    selection.addRange(newRange);
-                }
-            }
+            this._applyVRange(this._vRange);
         }
@@ -652,0 +651,0 @@ }

package.json

 {
   "name": "@blocksuite/virgo",
-  "version": "0.5.0-20230310132906-cc38585",
+  "version": "0.5.0-20230311151726-8b99e2c",
   "description": "A micro editor.",
@@ -26,3 +26,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@blocksuite/global": "0.5.0-20230310132906-cc38585",
+    "@blocksuite/global": "0.5.0-20230311151726-8b99e2c",
     "zod": "^3.20.6"
@@ -29,0 +29,0 @@ },

src/components/virgo-element.ts

@@ -1,2 +0,2 @@
-import { html, LitElement, TemplateResult } from 'lit';
+import { html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -3,0 +3,0 @@

src/components/virgo-line.ts

@@ -22,9 +22,14 @@ import { html, LitElement } from 'lit';
 
+  override async getUpdateComplete() {
+    const result = await super.getUpdateComplete();
+    await Promise.all(this.elements.map(el => el.updateComplete));
+    return result;
+  }
+
+  protected firstUpdated(): void {
+    this.style.display = 'block';
+  }
+
   render() {
-    return html`<style>
-        v-line {
-          display: block;
-        }
-      </style>
-      <div>${this.elements}</div>`;
+    return html`<div>${this.elements}</div>`;
   }
@@ -31,0 +36,0 @@

src/components/virgo-text.ts

 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { DirectiveResult } from 'lit/directive.js';
-import { styleMap, StyleMapDirective } from 'lit/directives/style-map.js';
+import { styleMap, type StyleMapDirective } from 'lit/directives/style-map.js';
 
 import { ZERO_WIDTH_SPACE } from '../constant.js';
 
-const unitTextStyles = styleMap({
-  whiteSpace: 'pre-wrap',
-});
-
 @customElement('v-text')
@@ -18,3 +14,3 @@ export class VText extends LitElement {
   @property()
-  styles: DirectiveResult<typeof StyleMapDirective> = unitTextStyles;
+  styles: DirectiveResult<typeof StyleMapDirective> = styleMap({});
 
@@ -21,0 +17,0 @@ render() {

src/virgo.ts

@@ -31,2 +31,3 @@ import { assertExists, Slot } from '@blocksuite/global/utils';
 export type TextPoint = readonly [text: Text, offset: number];
+
 export interface DomPoint {
@@ -81,6 +82,4 @@ // which text node this point is in
               if (texts.length === 0) return null;
-              for (let i = 0; i < texts.length; i++) {
-                text = texts[i];
-                textOffset = offset === 0 ? offset : text.length;
-              }
+              text = texts[texts.length - 1];
+              textOffset = offset === 0 ? offset : text.length;
               break;
@@ -106,3 +105,3 @@ }
               if (texts.length === 0) return null;
-              text = texts[0];
+              text = texts[texts.length - 1];
               textOffset = calculateTextLength(text);
@@ -121,3 +120,3 @@ break;
               if (texts.length === 0) return null;
-              text = texts[0];
+              text = texts[texts.length - 1];
               textOffset = calculateTextLength(text);
@@ -246,3 +245,3 @@ break;
 
-  private _renderDeltas = () => {
+  private _renderDeltas = async () => {
     assertExists(this._rootElement);
@@ -275,2 +274,9 @@
     this._rootElement.replaceChildren(...lines);
+    await Promise.all(
+      lines.map(async line => {
+        await line.updateComplete;
+      })
+    );
+
+    this.slots.updated.emit();
   };
@@ -281,3 +287,5 @@
     unmounted: Slot;
+    updated: Slot;
     updateVRange: Slot<UpdateVRangeProp>;
+    rangeUpdated: Slot<Range>;
   };
@@ -304,3 +312,5 @@
       unmounted: new Slot(),
+      updated: new Slot(),
       updateVRange: new Slot<UpdateVRangeProp>(),
+      rangeUpdated: new Slot<Range>(),
     };
@@ -645,14 +655,19 @@
     if (this._vRange) {
-      const newRange = this.toDomRange(this._vRange);
+      this._applyVRange(this._vRange);
+    }
+  }
 
-      if (newRange) {
-        const selectionRoot = findDocumentOrShadowRoot(this);
-        const selection = selectionRoot.getSelection();
-        if (selection) {
-          selection.removeAllRanges();
-          selection.addRange(newRange);
-        }
+  private _applyVRange = (vRange: VRange): void => {
+    const newRange = this.toDomRange(vRange);
+
+    if (newRange) {
+      const selectionRoot = findDocumentOrShadowRoot(this);
+      const selection = selectionRoot.getSelection();
+      if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+        this.slots.rangeUpdated.emit(newRange);
       }
     }
-  }
+  };
 
@@ -1058,17 +1073,7 @@ /**
     const fn = () => {
-      if (!newVRange) {
-        return;
+      if (newVRange) {
+        // when using input method _vRange will return to the starting point,
+        // so we need to re-sync
+        this._applyVRange(newVRange);
       }
-
-      // when using input method _vRange will return to the starting point,
-      // so we need to resync
-      const newRange = this.toDomRange(newVRange);
-      if (newRange) {
-        const selectionRoot = findDocumentOrShadowRoot(this);
-        const selection = selectionRoot.getSelection();
-        if (selection) {
-          selection.removeAllRanges();
-          selection.addRange(newRange);
-        }
-      }
     };
@@ -1075,0 +1080,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

366674

increased by0.63%

Lines of code

4914

increased by0.14%

Dependency changes

• + Added@blocksuite/global@0.5.0-20230311151726-8b99e2c(transitive)

• - Removed@blocksuite/global@0.5.0-20230310132906-cc38585(transitive)

• Updated@blocksuite/global@0.5.0-20230311151726-8b99e2c