Improved usability of the inline editing

Fixed bug with using keyboard shortcuts for cut, copy, and paste

src/css/style.css

@@ -25,11 +25,17 @@ nav::-webkit-scrollbar {
   background: white;
 }
 
+td, th {
+  white-space: pre-wrap;
+  min-width: 200px!important;
+}
+
 .inline-edit {
   padding: 0!important;
 }
 
 td.inline-edit > textarea, th.inline-edit > textarea {
+  white-space: normal;
   width: 100%;
   height: 100%;
 }

src/js/editor.ts

@@ -67,15 +67,14 @@ function generateTable(table_data) {
 
 	let table_div = $("<div></div>")
 		.attr("id", table_id + "-tab")
-		.addClass("tab-pane table-responsive text-nowrap")
+		.addClass("tab-pane table-responsive")
 		.css({"margin-right": "100px"});
 
 	let table = $("<table></table>")
 		.attr("id", table_id)
 		.addClass("table table-bordered")
 		.append($("<thead></thead>")
-			.append($("<tr></tr>")
-				.addClass("text-nowrap")))
+			.append($("<tr></tr>")))
 		.append("<tbody>");
 
 	$.each(table_data["columns"], (i, col) => {
@@ -118,7 +117,9 @@ function makeCell(cell_id, cell_text) {
 			cellContextMenu(event, cell_id);
 		})
 		.on("dblclick", (event) => {
-			cellInlineEdit(event);
+			if ($("textarea:focus").length == 0) {
+				cellInlineEdit(cell_id);
+			}
 		});
 }
 
@@ -132,7 +133,9 @@ function makeHeader(header_id, header_index, col_title) {
 			headerContextMenu(event, header_id);
 		})
 		.on("dblclick", (event) => {
-			headerInlineEdit(event);
+			if ($("textarea:focus").length == 0) {
+				headerInlineEdit(header_id);
+			}
 		});
 }
 
@@ -631,11 +634,15 @@ function navContextMenu(event, table_id) {
 	menu.css({"top": y_pos, "left": x_pos});
 }
 
-function cellInlineEdit(event) {
+function cellInlineEdit(cell_id) {
 	if (is_positioning) {return;}
 	let data = getSelectionData()
-	let target = $(event.target);
+	let target: JQuery = $("#"+cell_id);
+	let width = target.outerWidth();
+	let height = target.outerHeight();
+	console.log(height);
 	let text_area = $("<textarea>")
+		// .css({"width": width, "height": height})
 		.on("focusout", () => {
 			closeCellInlineEdit(true);
 		})
@@ -648,14 +655,18 @@ function cellInlineEdit(event) {
 		})
 		.val(data["cell_text"]);
 	target.html(text_area)
-		.addClass("inline-edit");
+		.addClass("inline-edit")
+		.css({"width": width});
+	text_area.css({"height": height});
 	text_area.focus();
 }
 
 function closeCellInlineEdit(save=false) {
+	let td = $("td.inline-edit");
+	let text_area = $("td.inline-edit > textarea");
 	if (save) {
-		let val = $("td.inline-edit > textarea").val()
-		$("td.inline-edit").html(val)
+		let val = text_area.val()
+		td.text(val)
 			.removeClass("inline-edit");
 		let data = getSelectionData();
 		tables_data[data["table_index"]]["rows"][data["row_index"]][data["row_key"]] = val;
@@ -665,15 +676,18 @@ function closeCellInlineEdit(save=false) {
 		}
 	} else {
 		let data = getSelectionData();
-		$("td.inline-edit").removeClass("inline-edit")
+		td.removeClass("inline-edit")
 			.html(data["cell_text"]);
 	}
+	td.css("width", "");
 }
 
-function headerInlineEdit(event) {
+function headerInlineEdit(header_id) {
 	if (is_positioning) {return;}
 	let data = getSelectionData()
-	let target = $(event.target);
+	let target = $("#"+header_id);
+	let width = target.outerWidth();
+	let height = target.outerHeight();
 	let text_area = $("<textarea>")
 		.on("focusout", () => {
 			closeHeaderInlineEdit(true);
@@ -687,14 +701,18 @@ function headerInlineEdit(event) {
 		})
 		.val(data["col_name"]);
 	target.html(text_area)
-		.addClass("inline-edit");
+		.addClass("inline-edit")
+		.css({"width": width});
+	text_area.css({"height": height});
 	text_area.focus();
 }
 
 function closeHeaderInlineEdit(save=false) {
+	let th = $("th.inline-edit");
+	let text_area = $("th.inline-edit > textarea");
 	if (save) {
-		let val = $("th.inline-edit > textarea").val()
-		$("th.inline-edit").html(val)
+		let val = text_area.val()
+		th.html(val)
 			.removeClass("inline-edit");
 		let data = getSelectionData();
 		tables_data[data["table_index"]]["columns"][data["col_index"]]["title"] = val;
@@ -704,9 +722,10 @@ function closeHeaderInlineEdit(save=false) {
 		}
 	} else {
 		let data = getSelectionData();
-		$("th.inline-edit").removeClass("inline-edit")
+		th.removeClass("inline-edit")
 			.html(data["col_name"]);
 	}
+	th.css("width", "");
 }
 
 function moveTable(old_index, new_index) {
@@ -941,7 +960,6 @@ function copyToClipboard(cut=false) {
 	}
 	if (cut) {
 		clearCells(getSelectedCells());
-		addUndoHistory(current_table);
 	}
 	table.append(previous_row_elm);
 	clipboard.clear();
@@ -1243,14 +1261,16 @@ $(document).on("keydown", (event: JQuery.KeyDownEvent) => {
 	selectAll(event);
 	let input_focus = $("input:focus, textarea:focus");
 	if (input_focus.length === 0) {
-		event.preventDefault();
 		if (!event.ctrlKey && !event.shiftKey && !event.altKey && (event.key == "Backspace" || event.key == "Delete")) {
+			event.preventDefault();
 			backspaceDelete();
 		}
 		if (!event.shiftKey && !event.altKey && event.ctrlKey && event.key == "z") {
+			event.preventDefault();
 			undo();
 		}
 		if (!event.shiftKey && !event.altKey && event.ctrlKey && event.key == "y") {
+			event.preventDefault();
 			redo();
 		}
 	}