Fix arrow navigation inside multi line info table cells

REDMINE-20913

entry_types/scrolled/package/spec/frontend/inlineEditing/EditableTable/withFixedColumns-spec.js

@@ -1862,6 +1862,61 @@ describe('handleTableNavigation', () => {
     });
   });
 
+  it('allows moving the cursor up inside multi line cell', () => {
+    const editor = withFixedColumns(
+      <editor>
+        <row>
+          <label>Row 1, Col 1</label>
+          <value>Row 1, Col 2</value>
+        </row>
+        <row>
+          <label>Row 2, Col 1</label>
+          <value>
+            A{'\n'}
+            B<cursor />
+          </value>
+        </row>
+      </editor>
+    );
+
+    const event = new KeyboardEvent('keydown', {key: 'ArrowUp'});
+    handleTableNavigation(editor, event);
+
+    expect(editor.selection).toEqual({
+      anchor: {path: [1, 1, 0], offset: 3},
+      focus: {path: [1, 1, 0], offset: 3}
+    });
+  });
+
+  it('moves the cursor up to the last line of a multi line cell', () => {
+    const editor = withFixedColumns(
+      <editor>
+        <row>
+          <label>Row 1, Col 1</label>
+          <value>
+            A{'\n'}
+            B{'\n'}
+            C
+          </value>
+        </row>
+        <row>
+          <label>Row 2, Col 1</label>
+          <value>
+            Row 2, Col 2<cursor />
+          </value>
+        </row>
+      </editor>
+    );
+
+    const event = new KeyboardEvent('keydown', {key: 'ArrowUp'});
+    handleTableNavigation(editor, event);
+
+    expect(editor.selection).toEqual({
+      anchor: {path: [0, 1, 0], offset: 4},
+      focus: {path: [0, 1, 0], offset: 4}
+    });
+  });
+
   it('moves the cursor to the cell below when pressing ArrowDown', () => {
     const editor = withFixedColumns(
       <editor>
@@ -1886,4 +1941,30 @@ describe('handleTableNavigation', () => {
       focus: {path: [1, 1, 0], offset: 0}
     });
   });
+
+  it('allows moving the cursor down inside multi line cell', () => {
+    const editor = withFixedColumns(
+      <editor>
+        <row>
+          <label>Row 1, Col 1</label>
+          <value>
+            A<cursor />{'\n'}
+            B
+          </value>
+        </row>
+        <row>
+          <label>Row 2, Col 1</label>
+          <value>Row 2, Col 2</value>
+        </row>
+      </editor>
+    );
+
+    const event = new KeyboardEvent('keydown', {key: 'ArrowDown'});
+    handleTableNavigation(editor, event);
+
+    expect(editor.selection).toEqual({
+      anchor: {path: [0, 1, 0], offset: 1},
+      focus: {path: [0, 1, 0], offset: 1}
+    });
+  });
 });

entry_types/scrolled/package/src/frontend/inlineEditing/EditableTable/withFixedColumns/handleTableNavigation.js

@@ -12,16 +12,19 @@ export function handleTableNavigation(editor, event) {
       const [, cellPath] = cellMatch;
       const rowPath = cellPath.slice(0, -1);
 
-      if (event.key === 'ArrowUp') {
+      if (event.key === 'ArrowUp' && Cell.inFirstLine(editor, selection.anchor)) {
         event.preventDefault();
 
         if (rowPath[rowPath.length - 1] > 0) {
           const previousRowPath = Path.previous(rowPath);
           const targetPath = [...previousRowPath, cellPath[cellPath.length - 1]];
 
-          Transforms.select(editor, Editor.start(editor, targetPath));
+          Transforms.select(
+            editor,
+            Cell.getPointAtStartOfLastLine(editor, Editor.start(editor, targetPath).path)
+          );
         }
-      } else if (event.key === 'ArrowDown') {
+      } else if (event.key === 'ArrowDown' && Cell.inLastLine(editor, selection.anchor)) {
         event.preventDefault();
 
         const nextRowPath = Path.next(rowPath);

entry_types/scrolled/package/src/frontend/inlineEditing/EditableTable/withFixedColumns/helpers.js

@@ -1,4 +1,4 @@
-import {Editor} from 'slate';
+import {Editor, Node} from 'slate';
 
 export const Row = {
   match(editor) {
@@ -49,6 +49,34 @@ export const Cell = {
     });
 
     return cellMatch;
+  },
+
+  inFirstLine(editor, point) {
+    const [node] = Editor.node(editor, point.path);
+    const text = Node.string(node);
+
+    const firstLineBreak = text.indexOf('\n');
+
+    return firstLineBreak === -1 || point.offset <= firstLineBreak;
+  },
+
+  inLastLine(editor, point) {
+    const [node] = Editor.node(editor, point.path);
+    const text = Node.string(node);
+
+    const lastLineBreak = text.lastIndexOf('\n');
+
+    return lastLineBreak === -1 || point.offset > lastLineBreak;
+  },
+
+  getPointAtStartOfLastLine(editor, cellPath) {
+    const [node] = Editor.node(editor, cellPath);
+    const text = Node.string(node);
+
+    const lastLineBreak = text.lastIndexOf('\n');
+    const offset = lastLineBreak === -1 ? 0 : lastLineBreak + 1;
+
+    return {path: cellPath, offset};
   }
 }