Fix line break on FormulaBar

HISTORY.md

@@ -0,0 +1,21 @@
+# 1.x.x
+
+## 1.0.x
+
+### 1.0.0
+- It is now possible to refer to another sheet. #49
+- Formula bar. #49
+- Add E2E tests. #48
+
+### 1.0.1
+- Bugfix: Cells referenced by formulas do not revert to their original state with undo.
+
+### 1.0.2
+- Bugfix: AutoFill overwrites protected cells.
+
+### 1.0.3, 1.0.4
+- Bugfix: FormulaBar style.
+
+### 1.0.5
+- Bugfix: Autofill does not work when multiple cells are selected. #55, #56
+

README.md

@@ -37,20 +37,7 @@ $ npm install @gridsheet/react-core --save
 
 - [ReactGridsheet document](https://docs.walkframe.com/products/gridsheet/react/)
 - [Examples](https://docs.walkframe.com/products/gridsheet/examples/)
-
-## History
-
-
-- 1.0.0
-  - It is now possible to refer to another sheet.
-  - Formula bar.
-  - Add E2E tests.
-
-- 1.0.1
-  - Bugfix: Cells referenced by formulas do not revert to their original state with undo.
-
-- 1.0.2
-  - Bugfix: AutoFill overwrites protected cells.
+- [Histories](./HISTORY.md)
 
 ## License
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fwalkframe%2Freact-gridsheet.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fwalkframe%2Freact-gridsheet?ref=badge_large)

e2e/basic.spec.ts

@@ -64,3 +64,23 @@ test('walk', async ({ page }) => {
   expect(await address.textContent()).toBe('B2');
 });
 
+test('enter key with alt', async ({ page }) => {
+  await page.goto('http://localhost:5233/iframe.html?id=basic--small&viewMode=story');
+
+  await page.keyboard.type('HelloWorld');
+
+  await page.keyboard.press('ArrowLeft');
+  await page.keyboard.press('ArrowLeft');
+  await page.keyboard.press('ArrowLeft');
+  await page.keyboard.press('ArrowLeft');
+  await page.keyboard.press('ArrowLeft');
+
+  await page.keyboard.down('Alt');
+  await page.keyboard.press('Enter');
+  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');
+});

src/components/Editor.tsx

@@ -23,6 +23,7 @@ import { Context } from '../store';
 import { areaToZone } from '../lib/structs';
 import { DEFAULT_HEIGHT } from '../constants';
 import * as prevention from '../lib/prevention';
+import { insertNewLineAtCursor } from '../lib/input';
 
 export const Editor: React.FC = () => {
   const { store, dispatch } = React.useContext(Context);
@@ -102,11 +103,7 @@ export const Editor: React.FC = () => {
       case 'Enter': // ENTER
         if (editing) {
           if (e.altKey) {
-            const selectPoint = input.selectionEnd;
-            const before = input.value.slice(0, selectPoint);
-            const after = input.value.slice(selectPoint);
-            input.value = `${before}\n${after}`;
-            input.selectionEnd = before.length + 1;
+            insertNewLineAtCursor(input);
             input.style.height = `${input.clientHeight + DEFAULT_HEIGHT}px`;
             return false;
           } else {

src/components/FormulaBar.tsx

@@ -3,6 +3,7 @@ import { Context } from '../store';
 import { p2a } from '../lib/converters';
 import { blur, setEditingCell, walk, write } from '../store/actions';
 import * as prevention from '../lib/prevention';
+import { insertNewLineAtCursor } from '../lib/input';
 
 type Props = {
   width: number;
@@ -56,7 +57,7 @@ export const FormulaBar: React.FC<Props> = ({ width }) => {
             switch (e.key) {
               case 'Enter': {
                 if (e.altKey) {
-                  input.value = `${input.value}\n`;
+                  insertNewLineAtCursor(input);
                 } else {
                   writeCell(input.value);
                   dispatch(

src/lib/input.ts

@@ -0,0 +1,8 @@
+
+export const insertNewLineAtCursor = (input: HTMLTextAreaElement) => {
+  const selectPoint = input.selectionEnd;
+  const before = input.value.slice(0, selectPoint);
+  const after = input.value.slice(selectPoint);
+  input.value = `${before}\n${after}`;
+  input.selectionEnd = before.length + 1;
+}