Feature/syntax highlight

.storybook/examples/basic/size.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ComponentStory } from "@storybook/react";
-import { constructInitialCells, GridSheet } from "../../../src";
+import { CellsByAddressType, constructInitialCells, GridSheet } from "../../../src";
 
 export default {
   title: "Basic",
@@ -10,9 +10,10 @@ type Props = {
   numRows: number;
   numCols: number;
   defaultWidth: number;
+  initialCells?: CellsByAddressType,
 };
 
-const Sheet = ({ numRows, numCols, defaultWidth }: Props) => {
+const Sheet = ({ numRows, numCols, defaultWidth, initialCells }: Props) => {
   return (
     <>
       <GridSheet
@@ -39,6 +40,7 @@ const Sheet = ({ numRows, numCols, defaultWidth }: Props) => {
             C3: {
               value: 3,
             },
+            ...initialCells,
           },
           ensured: { numRows, numCols },
         })}
@@ -49,8 +51,11 @@ const Sheet = ({ numRows, numCols, defaultWidth }: Props) => {
 
 const Template: ComponentStory<typeof Sheet> = (args) => <Sheet {...args} />;
 
-export const Large = Template.bind({});
-Large.args = { numRows: 1000, numCols: 100, defaultWidth: 50 };
-
 export const Small = Template.bind({});
 Small.args = { numRows: 5, numCols: 3, defaultWidth: 100 };
+
+export const Large = Template.bind({});
+Large.args = { 
+  numRows: 1000, numCols: 100, defaultWidth: 50,
+  initialCells: {A500: {value: "aa"}, A1000: {value: "aaa"}, CV1000: {value: "aaaa"}},
+};

.storybook/examples/events/onchange.stories.tsx

@@ -26,14 +26,22 @@ export const SheetOnChange = () => {
                   [6, 7, 8, 9, 10],
                 ],
               },
-              cells: {},
+              cells: {
+                default: {
+                  width: 50,
+                },
+                E: {
+                  style: { backgroundColor: "#ddf" },
+                }
+              },
               ensured: {
                 numRows: 50,
                 numCols: 50,
               },
             })}
             options={{
-              sheetWidth: 500,
+              sheetWidth: 300,
+              sheetHeight: 300,
               onChange: (table, positions) => {
                 setDiff(
                   table.getObjectFlatten({
@@ -55,21 +63,25 @@ export const SheetOnChange = () => {
             }}
           />
           <div>Diff:</div>
-          <pre id="diff">{JSON.stringify(diff)}</pre>
+          <textarea 
+            id="diff"
+            style={{width: '300px', height: '100px'}}
+            value={JSON.stringify(diff, null, 2)}
+          ></textarea>
         </div>
         <ul className="histories">
           {histories.map((history, i) => (
-            <li key={i}>
-              [{history.operation}]
-              {(() => {
+            <li key={i} style={{display: 'flex', lineHeight: "20px", borderBottom: 'solid 1px #777', marginBottom: '10px'}}>
+              <div style={{color: '#09a'}}>[{history.operation}]</div>
+              <pre style={{margin: 0}}>{(() => {
                 if (history.operation === "UPDATE") {
                   return JSON.stringify(
                     tableRef.current?.table!.getAddressesByIds(
                       history.diffAfter
                     )
                   );
                 }
-              })()}
+              })()}</pre>
             </li>
           ))}
         </ul>

e2e/basic.spec.ts

@@ -10,7 +10,7 @@ test('cell value', async ({ page }) => {
 
   await b3.dblclick();
   const editor = page.locator('.gs-editor textarea');
-  await editor.fill('b3');
+  page.keyboard.type('b3');
   await editor.blur();
   expect(await b3.locator('.gs-cell-rendered').textContent()).toBe('b3');
 });
@@ -77,7 +77,9 @@ test('walk', async ({ page }) => {
 
 test('enter key with alt', async ({ page }) => {
   await page.goto('http://localhost:5233/iframe.html?id=basic--small&viewMode=story');
-
+  const a1 = page.locator("[data-address='A1']");
+  await a1.click();
+
   await page.keyboard.type('HelloWorld');
 
   await page.keyboard.press('ArrowLeft');
@@ -91,8 +93,6 @@ test('enter key with alt', async ({ page }) => {
   await page.keyboard.up('Alt');
 
   await page.keyboard.press('Enter');
-
-  const a1 = page.locator("[data-address='A1']");
   expect(await a1.locator('.gs-cell-rendered').textContent()).toBe('Hello\nWorld');
 });
 

e2e/event.spec.ts

@@ -1,14 +1,52 @@
 import { test, expect } from '@playwright/test';
+import { jsonMinify, jsonQuery } from './utils';
 
 test('show the diff', async ({ page }) => {
   await page.goto('http://localhost:5233/iframe.html?id=table-operations--sheet-on-change&viewMode=story');
-  const b7 = page.locator("[data-address='B7']");
-  await b7.dblclick();
+  const b2 = page.locator("[data-address='B2']");
+  await b2.dblclick();
+  await page.keyboard.type('777');
+  await page.keyboard.press('Enter');
 
-  const editor = page.locator('.gs-editor textarea');
-  await editor.fill('777');
-  await editor.press('Enter');
+  const diff = page.locator('#diff');
+  expect(jsonMinify(await diff.inputValue())).toContain('{"B2":7777}');
+});
+
+test('1 operation makes 1 diff history', async ({ page }) => {
+  await page.goto('http://localhost:5233/iframe.html?id=table-operations--sheet-on-change&viewMode=story');
+  const histories = page.locator('.histories li');
+
+  const b4 = page.locator("[data-address='B4']");
+  await b4.click();
+  await page.keyboard.type('4444');
+  await page.keyboard.press('Enter');
+
+  expect(await histories.count()).toBe(1);
+
+  const c1 = page.locator("[data-address='C1']");
+  await c1.click();
+  await page.keyboard.press('Backspace');
+
+  expect(await histories.count()).toBe(2);
+
+  const firstJSON = await histories.nth(0).locator('pre').textContent();
+  expect(jsonQuery(firstJSON!, ['B4', 'value'])).toBe(4444);
+
+  const secondJSON = await histories.nth(1).locator('pre').textContent();
+  expect(jsonQuery(secondJSON!, ['C1', 'value'])).toBe(null);
+});
+
+test('escape key should cancel the editing', async ({ page }) => {
+  await page.goto('http://localhost:5233/iframe.html?id=table-operations--sheet-on-change&viewMode=story');
+
+  const histories = page.locator('.histories li');
+
+  const b2 = page.locator("[data-address='B2']");
+  await b2.click();
+  await page.keyboard.type('7777777');
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('Enter');
 
-  const pre = page.locator('#diff');
-  expect(await pre.textContent()).toContain('{"B7":777}');
+  expect(await histories.count()).toBe(0);
+  expect(await b2.locator('.gs-cell-rendered').textContent()).toBe('7');
 });

e2e/formula.spec.ts

@@ -21,17 +21,17 @@ test('render', async ({ page }) => {
   const sheet2 = page.locator('[data-sheet-name="Sheet2"]');
   const editor2 = sheet2.locator('.gs-editor textarea');
   const a12 = sheet2.locator("[data-address='A1']");
-  await a12.dblclick();
-  await editor2.fill('500');
+  await a12.click();
+  await page.keyboard.type('500');
   await editor2.blur();
   expect(await a11.locator('.gs-cell-rendered').textContent()).toBe('600');
 
   // update sheet3
   const sheet3 = page.locator('[data-sheet-name="Sheet 3"]');
   const editor3 = sheet3.locator('.gs-editor textarea');
   const a13 = sheet3.locator("[data-address='A1']");
-  await a13.dblclick();
-  await editor3.fill('777');
+  await a13.click();
+  await page.keyboard.type('777');
   await editor3.blur();
   expect(await a31.locator('.gs-cell-rendered').textContent()).toBe('1777');
 
@@ -54,36 +54,36 @@ test('circular referencing error', async ({ page }) => {
   const b3 = page.locator("[data-address='B3']");
   const b4 = page.locator("[data-address='B4']");
 
-  await a1.dblclick();
-  await editor.fill('=A1');
+  await a1.click();
+  await page.keyboard.type('=A1');
   await editor.press('Enter');
 
-  await a2.dblclick();
-  await editor.fill('=A1');
+  await a2.click();
+  await page.keyboard.type('=A1');
   await editor.press('Enter');
 
-  await a3.dblclick();
-  await editor.fill('=A4');
+  await a3.click();
+  await page.keyboard.type('=A4');
   await editor.press('Enter');
 
-  await a4.dblclick();
-  await editor.fill('=A3');
+  await a4.click();
+  await page.keyboard.type('=A3');
   await editor.press('Enter');
 
-  await b1.dblclick();
-  await editor.fill('10001');
+  await b1.click();
+  await page.keyboard.type('10001');
   await editor.press('Enter');
 
-  await b2.dblclick();
-  await editor.fill('=B1');
+  await b2.click();
+  await page.keyboard.type('=B1');
   await editor.press('Enter');
 
-  await b3.dblclick();
-  await editor.fill('=SUM(B1:B2)');
+  await b3.click();
+  await page.keyboard.type('=SUM(B1:B2)');
   await editor.press('Enter');
 
-  await b4.dblclick();
-  await editor.fill('=SUM(B1:B4)');
+  await b4.click();
+  await page.keyboard.type('=SUM(B1:B4)');
   await editor.press('Enter');
 
   expect(await a1.locator('.gs-cell-rendered').textContent()).toBe('#REF!');
@@ -105,14 +105,15 @@ test('insert ref by selection', async ({ page }) => {
   const b2 = page.locator("[data-address='B2']");
   const c1 = page.locator("[data-address='C1']");
 
-
   await a1.dblclick();
-  await editor.fill('=A1');
+  await page.keyboard.press('ArrowLeft');
+  await page.keyboard.press('ArrowLeft');
+  await page.keyboard.press('=');
   await b2.click();
   await editor.press('Enter');
 
   await b1.click();
-  await editor.fill('=sum(');
+  await page.keyboard.type('=sum(');
   await page.locator("[data-address='B2']").hover();
   await page.mouse.down();
   await page.locator("[data-address='C3']").hover();
@@ -121,7 +122,7 @@ test('insert ref by selection', async ({ page }) => {
   await editor.press('Enter');
 
   await c1.click();
-  await editor.fill('=sum()');
+  await page.keyboard.type('=sum()');
   await page.locator("[data-address='B2']").hover();
   await page.mouse.down();
   await page.locator("[data-address='C3']").hover();
@@ -181,7 +182,7 @@ test('insert cols range and rows range by selection in multiple sheets', async (
 
   const d3 = sheet2.locator("[data-address='D3']");
   await d3.click();
-  await editor2.fill('=sum(');
+  await page.keyboard.type('=sum(');
   const y1 = sheet1.locator("th[data-y='1']");
   await y1.click();
   await editor2.press(')');
@@ -190,7 +191,7 @@ test('insert cols range and rows range by selection in multiple sheets', async (
 
   const d4 = sheet2.locator("[data-address='D4']");
   await d4.click();
-  await editor2.fill('=sum(');
+  await page.keyboard.type('=sum(');
   await sheet2.locator("th[data-x='2']").hover();
   await page.mouse.down();
   await sheet2.locator("th[data-x='3']").hover();

e2e/search.spec.ts

@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+
+test('search and next', async ({ page }) => {
+  await page.goto('http://localhost:5233/iframe.html?id=basic--large&viewMode=story');
+
+  const searchBox = page.locator('.gs-searchbox');
+  const progress = page.locator('.gs-search-progress');
+  expect(await searchBox.count()).toBe(0);
+
+  await page.keyboard.down('Control');
+  await page.keyboard.press('f');
+
+  expect(await searchBox.count()).toBe(1);
+  expect(await progress.textContent()).toBe('0 / 0');
+
+  await page.keyboard.up('Control');
+  await page.keyboard.type('aa');
+  expect(await progress.textContent()).toBe('1 / 3');
+
+  const a500 = page.locator("[data-address='A500']");
+  expect(await a500.getAttribute('class')).toContain('gs-pointed');
+
+  await page.keyboard.press('Enter');
+  expect(await progress.textContent()).toBe('2 / 3');
+  const a1000 = page.locator("[data-address='A1000']");
+  expect(await a1000.getAttribute('class')).toContain('gs-pointed');
+
+  await page.keyboard.press('Enter');
+  expect(await progress.textContent()).toBe('3 / 3');
+  const cv1000 = page.locator("[data-address='CV1000']");
+  expect(await cv1000.getAttribute('class')).toContain('gs-pointed');
+
+  // update the keyword to 'aaa'
+  await page.keyboard.type('a');
+  expect(await progress.textContent()).toBe('1 / 2');
+  expect(await a1000.getAttribute('class')).toContain('gs-pointed');
+
+  await page.keyboard.press('Enter');
+  expect(await progress.textContent()).toBe('2 / 2');
+  expect(await cv1000.getAttribute('class')).toContain('gs-pointed');
+
+  await page.keyboard.press('Enter');
+  expect(await progress.textContent()).toBe('1 / 2');
+  expect(await a1000.getAttribute('class')).toContain('gs-pointed');
+
+  await page.keyboard.press('Escape');
+  expect(await searchBox.count()).toBe(0);
+});

e2e/utils.ts

@@ -0,0 +1,10 @@
+export const jsonMinify = (json: string) => {
+  return JSON.stringify(JSON.parse(json));
+};
+
+export const jsonQuery = (json: string, keys: string[]) => {
+  const obj = JSON.parse(json);
+  return keys.reduce((acc, key) => {
+    return acc[key];
+  }, obj);
+}