@blocksuite/virgo - npm Package Compare versions

Comparing version 0.4.0-20230210031655-264744e to 0.4.0-20230210193543-bf10cf9

dist/tests/virgo.spec.js

@@ -113,3 +113,3 @@ import { expect, test } from '@playwright/test';
 });
-test('basic text style', async ({ page }) => {
+test('basic styles', async ({ page }) => {
     await enterVirgoPlayground(page);
@@ -124,2 +124,4 @@ await focusVirgoRichText(page);
     const editorAInlineCode = page.getByText('inline-code').nth(0);
+    const editorAUndo = page.getByText('undo').nth(0);
+    const editorARedo = page.getByText('redo').nth(0);
     expect(await editorA.innerText()).toBe(ZERO_WIDTH_SPACE);
@@ -207,3 +209,3 @@ expect(await editorB.innerText()).toBe(ZERO_WIDTH_SPACE);
     ]);
-    editorABold.click();
+    editorAInlineCode.click();
     delta = await getDeltaFromVirgoRichText(page);
@@ -217,5 +219,7 @@ expect(delta).toEqual([
             attributes: {
+                bold: true,
                 italic: true,
                 underline: true,
                 strikethrough: true,
+                inlineCode: true,
             },
@@ -227,6 +231,17 @@ },
     ]);
-    editorAItalic.click();
+    editorAUndo.click({
+        clickCount: 5,
+    });
     delta = await getDeltaFromVirgoRichText(page);
     expect(delta).toEqual([
         {
+            insert: 'abcdefg',
+        },
+    ]);
+    editorARedo.click({
+        clickCount: 5,
+    });
+    delta = await getDeltaFromVirgoRichText(page);
+    expect(delta).toEqual([
+        {
             insert: 'ab',
@@ -237,4 +252,7 @@ },
             attributes: {
+                bold: true,
+                italic: true,
                 underline: true,
                 strikethrough: true,
+                inlineCode: true,
             },
@@ -246,3 +264,3 @@ },
     ]);
-    editorAUnderline.click();
+    editorABold.click();
     delta = await getDeltaFromVirgoRichText(page);
@@ -256,3 +274,6 @@ expect(delta).toEqual([
             attributes: {
+                italic: true,
+                underline: true,
                 strikethrough: true,
+                inlineCode: true,
             },
@@ -264,10 +285,21 @@ },
     ]);
-    editorAStrikethrough.click();
+    editorAItalic.click();
     delta = await getDeltaFromVirgoRichText(page);
     expect(delta).toEqual([
         {
-            insert: 'abcdefg',
+            insert: 'ab',
         },
+        {
+            insert: 'cde',
+            attributes: {
+                underline: true,
+                strikethrough: true,
+                inlineCode: true,
+            },
+        },
+        {
+            insert: 'fg',
+        },
     ]);
-    editorAInlineCode.click();
+    editorAUnderline.click();
     delta = await getDeltaFromVirgoRichText(page);
@@ -281,2 +313,3 @@ expect(delta).toEqual([
             attributes: {
+                strikethrough: true,
                 inlineCode: true,
@@ -289,2 +322,18 @@ },
     ]);
+    editorAStrikethrough.click();
+    delta = await getDeltaFromVirgoRichText(page);
+    expect(delta).toEqual([
+        {
+            insert: 'ab',
+        },
+        {
+            insert: 'cde',
+            attributes: {
+                inlineCode: true,
+            },
+        },
+        {
+            insert: 'fg',
+        },
+    ]);
     editorAInlineCode.click();
@@ -298,2 +347,162 @@ delta = await getDeltaFromVirgoRichText(page);
 });
+test('overlapping styles', async ({ page }) => {
+    await enterVirgoPlayground(page);
+    await focusVirgoRichText(page);
+    const editorA = page.locator('[data-virgo-root="true"]').nth(0);
+    const editorB = page.locator('[data-virgo-root="true"]').nth(1);
+    const editorABold = page.getByText('bold').nth(0);
+    const editorAItalic = page.getByText('italic').nth(0);
+    const editorAUndo = page.getByText('undo').nth(0);
+    const editorARedo = page.getByText('redo').nth(0);
+    expect(await editorA.innerText()).toBe(ZERO_WIDTH_SPACE);
+    expect(await editorB.innerText()).toBe(ZERO_WIDTH_SPACE);
+    await type(page, 'abcdefghijk');
+    expect(await editorA.innerText()).toBe('abcdefghijk');
+    expect(await editorB.innerText()).toBe('abcdefghijk');
+    let delta = await getDeltaFromVirgoRichText(page);
+    expect(delta).toEqual([
+        {
+            insert: 'abcdefghijk',
+        },
+    ]);
+    await setVirgoRichTextRange(page, { index: 1, length: 3 });
+    editorABold.click();
+    delta = await getDeltaFromVirgoRichText(page);
+    expect(delta).toEqual([
+        {
+            insert: 'a',
+        },
+        {
+            insert: 'bcd',
+            attributes: {
+                bold: true,
+            },
+        },
+        {
+            insert: 'efghijk',
+        },
+    ]);
+    await setVirgoRichTextRange(page, { index: 7, length: 3 });
+    editorABold.click();
+    delta = await getDeltaFromVirgoRichText(page);
+    expect(delta).toEqual([
+        {
+            insert: 'a',
+        },
+        {
+            insert: 'bcd',
+            attributes: {
+                bold: true,
+            },
+        },
+        {
+            insert: 'efg',
+        },
+        {
+            insert: 'hij',
+            attributes: {
+                bold: true,
+            },
+        },
+        {
+            insert: 'k',
+        },
+    ]);
+    await setVirgoRichTextRange(page, { index: 3, length: 5 });
+    editorAItalic.click();
+    delta = await getDeltaFromVirgoRichText(page);
+    expect(delta).toEqual([
+        {
+            insert: 'a',
+        },
+        {
+            insert: 'bc',
+            attributes: {
+                bold: true,
+            },
+        },
+        {
+            insert: 'd',
+            attributes: {
+                bold: true,
+                italic: true,
+            },
+        },
+        {
+            insert: 'efg',
+            attributes: {
+                italic: true,
+            },
+        },
+        {
+            insert: 'h',
+            attributes: {
+                bold: true,
+                italic: true,
+            },
+        },
+        {
+            insert: 'ij',
+            attributes: {
+                bold: true,
+            },
+        },
+        {
+            insert: 'k',
+        },
+    ]);
+    editorAUndo.click({
+        clickCount: 3,
+    });
+    delta = await getDeltaFromVirgoRichText(page);
+    expect(delta).toEqual([
+        {
+            insert: 'abcdefghijk',
+        },
+    ]);
+    editorARedo.click({
+        clickCount: 3,
+    });
+    delta = await getDeltaFromVirgoRichText(page);
+    expect(delta).toEqual([
+        {
+            insert: 'a',
+        },
+        {
+            insert: 'bc',
+            attributes: {
+                bold: true,
+            },
+        },
+        {
+            insert: 'd',
+            attributes: {
+                bold: true,
+                italic: true,
+            },
+        },
+        {
+            insert: 'efg',
+            attributes: {
+                italic: true,
+            },
+        },
+        {
+            insert: 'h',
+            attributes: {
+                bold: true,
+                italic: true,
+            },
+        },
+        {
+            insert: 'ij',
+            attributes: {
+                bold: true,
+            },
+        },
+        {
+            insert: 'k',
+        },
+    ]);
+});
 //# sourceMappingURL=virgo.spec.js.map

package.json

 {
   "name": "@blocksuite/virgo",
-  "version": "0.4.0-20230210031655-264744e",
+  "version": "0.4.0-20230210193543-bf10cf9",
   "description": "A micro editor.",
@@ -26,3 +26,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@blocksuite/global": "0.4.0-20230210031655-264744e",
+    "@blocksuite/global": "0.4.0-20230210193543-bf10cf9",
     "zod": "^3.20.2"
@@ -29,0 +29,0 @@ },

src/tests/virgo.spec.ts

@@ -172,3 +172,3 @@ import { expect, test } from '@playwright/test';
 
-test('basic text style', async ({ page }) => {
+test('basic styles', async ({ page }) => {
   await enterVirgoPlayground(page);
@@ -186,2 +186,5 @@ await focusVirgoRichText(page);
 
+  const editorAUndo = page.getByText('undo').nth(0);
+  const editorARedo = page.getByText('redo').nth(0);
+
   expect(await editorA.innerText()).toBe(ZERO_WIDTH_SPACE);
@@ -278,3 +281,3 @@ expect(await editorB.innerText()).toBe(ZERO_WIDTH_SPACE);
 
-  editorABold.click();
+  editorAInlineCode.click();
   delta = await getDeltaFromVirgoRichText(page);
@@ -288,5 +291,7 @@ expect(delta).toEqual([
       attributes: {
+        bold: true,
         italic: true,
         underline: true,
         strikethrough: true,
+        inlineCode: true,
       },
@@ -299,6 +304,18 @@ },
 
-  editorAItalic.click();
+  editorAUndo.click({
+    clickCount: 5,
+  });
   delta = await getDeltaFromVirgoRichText(page);
   expect(delta).toEqual([
     {
+      insert: 'abcdefg',
+    },
+  ]);
+
+  editorARedo.click({
+    clickCount: 5,
+  });
+  delta = await getDeltaFromVirgoRichText(page);
+  expect(delta).toEqual([
+    {
       insert: 'ab',
@@ -309,4 +326,7 @@ },
       attributes: {
+        bold: true,
+        italic: true,
         underline: true,
         strikethrough: true,
+        inlineCode: true,
       },
@@ -319,3 +339,3 @@ },
 
-  editorAUnderline.click();
+  editorABold.click();
   delta = await getDeltaFromVirgoRichText(page);
@@ -329,3 +349,6 @@ expect(delta).toEqual([
       attributes: {
+        italic: true,
+        underline: true,
         strikethrough: true,
+        inlineCode: true,
       },
@@ -338,11 +361,22 @@ },
 
-  editorAStrikethrough.click();
+  editorAItalic.click();
   delta = await getDeltaFromVirgoRichText(page);
   expect(delta).toEqual([
     {
-      insert: 'abcdefg',
+      insert: 'ab',
     },
+    {
+      insert: 'cde',
+      attributes: {
+        underline: true,
+        strikethrough: true,
+        inlineCode: true,
+      },
+    },
+    {
+      insert: 'fg',
+    },
   ]);
 
-  editorAInlineCode.click();
+  editorAUnderline.click();
   delta = await getDeltaFromVirgoRichText(page);
@@ -356,2 +390,3 @@ expect(delta).toEqual([
       attributes: {
+        strikethrough: true,
         inlineCode: true,
@@ -365,2 +400,19 @@ },
 
+  editorAStrikethrough.click();
+  delta = await getDeltaFromVirgoRichText(page);
+  expect(delta).toEqual([
+    {
+      insert: 'ab',
+    },
+    {
+      insert: 'cde',
+      attributes: {
+        inlineCode: true,
+      },
+    },
+    {
+      insert: 'fg',
+    },
+  ]);
+
   editorAInlineCode.click();
@@ -374,1 +426,177 @@ delta = await getDeltaFromVirgoRichText(page);
 });
+
+test('overlapping styles', async ({ page }) => {
+  await enterVirgoPlayground(page);
+  await focusVirgoRichText(page);
+
+  const editorA = page.locator('[data-virgo-root="true"]').nth(0);
+  const editorB = page.locator('[data-virgo-root="true"]').nth(1);
+
+  const editorABold = page.getByText('bold').nth(0);
+  const editorAItalic = page.getByText('italic').nth(0);
+
+  const editorAUndo = page.getByText('undo').nth(0);
+  const editorARedo = page.getByText('redo').nth(0);
+
+  expect(await editorA.innerText()).toBe(ZERO_WIDTH_SPACE);
+  expect(await editorB.innerText()).toBe(ZERO_WIDTH_SPACE);
+
+  await type(page, 'abcdefghijk');
+
+  expect(await editorA.innerText()).toBe('abcdefghijk');
+  expect(await editorB.innerText()).toBe('abcdefghijk');
+
+  let delta = await getDeltaFromVirgoRichText(page);
+  expect(delta).toEqual([
+    {
+      insert: 'abcdefghijk',
+    },
+  ]);
+
+  await setVirgoRichTextRange(page, { index: 1, length: 3 });
+  editorABold.click();
+
+  delta = await getDeltaFromVirgoRichText(page);
+  expect(delta).toEqual([
+    {
+      insert: 'a',
+    },
+    {
+      insert: 'bcd',
+      attributes: {
+        bold: true,
+      },
+    },
+    {
+      insert: 'efghijk',
+    },
+  ]);
+
+  await setVirgoRichTextRange(page, { index: 7, length: 3 });
+  editorABold.click();
+
+  delta = await getDeltaFromVirgoRichText(page);
+  expect(delta).toEqual([
+    {
+      insert: 'a',
+    },
+    {
+      insert: 'bcd',
+      attributes: {
+        bold: true,
+      },
+    },
+    {
+      insert: 'efg',
+    },
+    {
+      insert: 'hij',
+      attributes: {
+        bold: true,
+      },
+    },
+    {
+      insert: 'k',
+    },
+  ]);
+
+  await setVirgoRichTextRange(page, { index: 3, length: 5 });
+  editorAItalic.click();
+
+  delta = await getDeltaFromVirgoRichText(page);
+  expect(delta).toEqual([
+    {
+      insert: 'a',
+    },
+    {
+      insert: 'bc',
+      attributes: {
+        bold: true,
+      },
+    },
+    {
+      insert: 'd',
+      attributes: {
+        bold: true,
+        italic: true,
+      },
+    },
+    {
+      insert: 'efg',
+      attributes: {
+        italic: true,
+      },
+    },
+    {
+      insert: 'h',
+      attributes: {
+        bold: true,
+        italic: true,
+      },
+    },
+    {
+      insert: 'ij',
+      attributes: {
+        bold: true,
+      },
+    },
+    {
+      insert: 'k',
+    },
+  ]);
+
+  editorAUndo.click({
+    clickCount: 3,
+  });
+  delta = await getDeltaFromVirgoRichText(page);
+  expect(delta).toEqual([
+    {
+      insert: 'abcdefghijk',
+    },
+  ]);
+
+  editorARedo.click({
+    clickCount: 3,
+  });
+  delta = await getDeltaFromVirgoRichText(page);
+  expect(delta).toEqual([
+    {
+      insert: 'a',
+    },
+    {
+      insert: 'bc',
+      attributes: {
+        bold: true,
+      },
+    },
+    {
+      insert: 'd',
+      attributes: {
+        bold: true,
+        italic: true,
+      },
+    },
+    {
+      insert: 'efg',
+      attributes: {
+        italic: true,
+      },
+    },
+    {
+      insert: 'h',
+      attributes: {
+        bold: true,
+        italic: true,
+      },
+    },
+    {
+      insert: 'ij',
+      attributes: {
+        bold: true,
+      },
+    },
+    {
+      insert: 'k',
+    },
+  ]);
+});

No alert changes

Improved metrics

Total package byte prevSize

233513

increased by6.16%

Lines of code

3327

increased by14.37%

Dependency changes

• + Added@blocksuite/global@0.4.0-20230210193543-bf10cf9(transitive)

• - Removed@blocksuite/global@0.4.0-20230210031655-264744e(transitive)

• Updated@blocksuite/global@0.4.0-20230210193543-bf10cf9