CDB text edit improvements

bin/cdb.css

@@ -130,8 +130,8 @@
   background-color: black;
 }
 .cdb .cdb-sheet td.edit {
-  padding: 2px;
-  padding-right: 6px;
+  /*padding : 2px;
+			padding-right : 6px;*/
 }
 .cdb .cdb-sheet td.edit > input,
 .cdb .cdb-sheet td.edit textarea,

bin/cdb.less

@@ -147,8 +147,8 @@
 		}
 
 		td.edit {
-			padding : 2px;
-			padding-right : 6px;
+			/*padding : 2px;
+			padding-right : 6px;*/
 			&> input, textarea, select {
 				width : 100%;
 				padding : 0px 2px;

bin/style.css

@@ -42,6 +42,15 @@ input,
 textarea {
   padding-left: 4px;
 }
+.custom-text-edit {
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.custom-text-edit:focus {
+  outline: 1px solid #888888;
+  outline-offset: 1px;
+}
 select:focus {
   outline: none;
 }

bin/style.less

@@ -42,6 +42,16 @@ input, textarea {
 	padding-left : 4px;
 }
 
+.custom-text-edit {
+	//padding-left: 2px;
+	max-height: 200px; overflow-y:auto; overflow-x:hidden;
+
+	&:focus {
+		outline: 1px solid #888888;
+		outline-offset: 1px;
+	}
+}
+
 select {
 	&:focus {
 		outline: none;

hide/comp/cdb/Cell.hx

@@ -188,7 +188,8 @@ class Cell {
 		if( !html.containsHtml )
 			elementHtml.textContent = html.str;
 		else
-			elementHtml.innerHTML = html.str;
+			elementHtml.innerHTML = "<div style='max-height: 200px; overflow-y:auto; overflow-x:hidden;'>" + html.str + "</div>";
+
 		switch( column.type ) {
 		case TEnum(values):
 			elementHtml.title = getEnumValueDoc(values[value]);
@@ -372,7 +373,7 @@ class Cell {
 			scope.pop();
 			if( out.length == 0 )
 				return val("");
-			return {str: out.join(", "), containsHtml: isHtml};
+			return {str: out.join(", "), containsHtml: true};
 		case TProperties:
 			var ps = sheet.getSub(c);
 			var out = [];
@@ -661,49 +662,36 @@ class Cell {
 		case TInt, TFloat, TString, TId, TCustom(_), TDynamic:
 			var str = value == null ? "" : Std.isOfType(value, String) ? value : editor.base.valToString(column.type, value);
 
-			var span = js.Browser.document.createSpanElement();
-			span.innerHTML = elementHtml.innerHTML;
-			elementHtml.innerHTML = null;
-			elementHtml.appendChild(span);
-
-			var textWidth = span.offsetWidth;
-			var textHeight = span.offsetHeight;
-			var longText = textHeight > 25 || str.indexOf("\n") >= 0 || str.length > 22;
 			elementHtml.innerHTML = null;
 			elementHtml.classList.add("edit");
-			var i = new Element(longText ? "<textarea>" : "<input>");
+
+
+
+			var i = new Element("<div contenteditable='true' tabindex='1' class='custom-text-edit'>");
+			i[0].innerText = str;
+			var textHeight = i[0].offsetHeight;
+			var longText = textHeight > 25 || str.indexOf("\n") >= 0;
+
 			elementHtml.appendChild(i[0]);
 			i.keypress(function(e) {
-				if (!longText) {
-					longText = i.val().length > 22;
-					if (longText) {
-						var old = currentValue;
-						// hack to tranform the input into textarea
-						var newVal = i.val();
-						var curPos = (cast elementHtml.querySelector("input") : js.html.InputElement).selectionStart;
-						Reflect.setField(line.obj, column.name, newVal+"x");
-						refresh();
-						Reflect.setField(line.obj, column.name,old);
-						currentValue = newVal;
-						edit();
-						(cast elementHtml.querySelector("textArea") : js.html.TextAreaElement).setSelectionRange(curPos, curPos);
-					}
-				}
 				e.stopPropagation();
 			});
 			i.dblclick(function(e) e.stopPropagation());
 			//if( str != "" && (table.displayMode == Properties || table.displayMode == AllProperties) )
 			//	i.css({ width : Math.ceil(textWidth - 3) + "px" }); -- bug if small text ?
-			if( longText ) {
+			/*if( longText ) {
 				elementHtml.classList.add("edit_long");
 				i.css({ height : Math.max(25,Math.ceil(textHeight - 1)) + "px" });
-			}
+			}*/
 			i.val(str);
 			function closeEdit() {
 				i.off();
 				this.closeEdit();
 			}
 			i.keydown(function(e) {
+				var t : js.html.HtmlElement = cast e.target;
+				var textHeight = t.offsetHeight;
+				var longText = textHeight > 25 || t.innerText.indexOf("\n") >= 0;
 				switch( e.keyCode ) {
 				case K.ESCAPE:
 					inEdit = false;
@@ -713,17 +701,6 @@ class Cell {
 				case K.ENTER if( !e.shiftKey || !column.type.match(TString|TDynamic|TCustom(_)) ):
 					closeEdit();
 					e.preventDefault();
-				case K.ENTER if( !longText ):
-					var old = currentValue;
-					// hack to insert newline and tranform the input into textarea
-					var newVal = i.val() + "\n";
-					Reflect.setField(line.obj, column.name, newVal+"x");
-					refresh();
-					Reflect.setField(line.obj, column.name,old);
-					currentValue = newVal;
-					edit();
-					(cast elementHtml.querySelector("textarea") : js.html.TextAreaElement).setSelectionRange(newVal.length,newVal.length);
-					e.preventDefault();
 				case K.UP, K.DOWN if( !longText ):
 					closeEdit();
 					return;
@@ -736,8 +713,9 @@ class Cell {
 				}
 				e.stopPropagation();
 			});
-			i.keyup(function(_) try {
-				var v = editor.base.parseValue(column.type, i.val());
+			i.keyup(function(e) try {
+				var t : js.html.HtmlElement = cast e.target;
+				var v = editor.base.parseValue(column.type, t.innerText);
 
 				if (column.type == TId && !isUniqueID((v:String), true)) {
 					throw v + " is not a unique id";
@@ -753,7 +731,17 @@ class Cell {
 					closeEdit();
 			});
 			i.focus();
-			i.select();
+
+			// Select whole content of contenteditable div
+			{
+				var range =  js.Browser.document.createRange();
+				range.selectNodeContents(i[0]);
+				var sel = js.Browser.window.getSelection();
+				sel.removeAllRanges();
+				sel.addRange(range);
+			}
+
+
 			if( longText ) i.scrollTop(0);
 		case TBool:
 			setValue( currentValue == false && column.opt && table.displayMode != Properties ? null : currentValue == null ? true : currentValue ? false : true );
@@ -1226,8 +1214,8 @@ class Cell {
 
 	public function closeEdit() {
 		inEdit = false;
-		var input : js.html.InputElement = cast elementHtml.querySelector("input, textarea");
-		if(input != null &&  input.value != null ) setRawValue(input.value);
+		var input = elementHtml.querySelector("div[contenteditable]");
+		if(input != null && input.innerText != null ) setRawValue(input.innerText);
 		refresh();
 		focus();
 	}

hide/comp/cdb/ModalColumnForm.hx

@@ -119,7 +119,7 @@ class ModalColumnForm extends Modal {
 
 				<tr class="doc hide">
 					<td>Documentation
-					<td><textarea name="doc"></textarea>
+					<td><textarea name="doc" rows=10 columns=70></textarea>
 				</tr>
 
 				<tr class="more">