textCell keydown

Author: RafaelGB

src/components/cellTypes/TextCell.tsx

@@ -5,7 +5,7 @@ import EditorCell from "components/cellTypes/EditorCell";
 import { TableColumn } from "cdm/FolderModel";
 import { c, getAlignmentClassname } from "helpers/StylesHelper";
 import { ParseService } from "services/ParseService";
-import { InputType } from "helpers/Constants";
+import { InputType, SUGGESTER_REGEX } from "helpers/Constants";
 import { MarkdownService } from "services/MarkdownRenderService";
 
 const TextCell = (props: CellComponentProps) => {
@@ -39,7 +39,7 @@ const TextCell = (props: CellComponentProps) => {
    * Render markdown content of Obsidian on load
    */
   useEffect(() => {
-    if (dirtyCell && !containerCellRef.current && !textCell) {
+    if (dirtyCell || (!containerCellRef.current && !textCell)) {
       // End useEffect
       return;
     }
@@ -52,7 +52,7 @@ const TextCell = (props: CellComponentProps) => {
     );
   }, [dirtyCell, textCell]);
 
-  const handleEditableOnclick: MouseEventHandler<HTMLSpanElement> = () => {
+  const handleEditableOnclick = () => {
     setDirtyCell(true);
   };
 
@@ -85,11 +85,21 @@ const TextCell = (props: CellComponentProps) => {
   ) : (
     <span
       ref={containerCellRef}
-      onClick={handleEditableOnclick}
+      onDoubleClick={handleEditableOnclick}
+      // On enter key press
+      onKeyDown={(e) => {
+        if (SUGGESTER_REGEX.CELL_VALID_KEYDOWN.test(e.key)) {
+          handleEditableOnclick();
+        } else if (e.key === "Enter") {
+          e.preventDefault();
+          handleEditableOnclick();
+        }
+      }}
       style={{ width: column.getSize() }}
       className={c(
         getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
       )}
+      tabIndex={0}
     />
   );
 };

src/helpers/Constants.ts

@@ -476,6 +476,8 @@ export const SUGGESTER_REGEX = Object.freeze({
 
   TEXT_ARRAY: /(^\[{1})([^\[]{1}.*)(\]{1})$/g,
   TEXT_OBJECT: /(^\{{1})(.*)(\}{1})$/g,
+
+  CELL_VALID_KEYDOWN: /([a-zA-Z0-9_\- ]{1})$/g,
 });
 
 /******************************************************************************

styles.css

@@ -92,6 +92,10 @@
 div.database-plugin__td.data-input:hover {
   box-shadow: 0 0 1px 2px var(--text-accent-hover);
 }
+div.database-plugin__td.data-input div:focus,
+div.database-plugin__td.data-input span:focus {
+  box-shadow: 0 0 1px 2px var(--text-accent);
+}
 
 /******************************************************
 *                   Table Structure
@@ -685,8 +689,8 @@ div.database-plugin__td.data-input:hover {
 }
 
 .database-plugin__scroll-horizontal {
-  overflow-y: auto;
-  overflow-x: auto;
+  overflow-y: overlay;
+  overflow-x: overlay;
 }
 
 .database-plugin__scroll-container {