labellife-design-tool 2.2.8 → 2.2.9

package/dist/cjs/canvas/workspace.js

@@ -975,8 +975,10 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
     var scaleY = absScale.y;
     var cssFontStyle = element.fontStyle === 'italic' ? 'italic' : 'normal';
     var cssFontWeight = String(element.fontWeight || 'normal');
+    var originalText = element.text;
     var textarea = document.createElement('textarea');
-    textarea.value = element.text;
+    textarea.value = '';
+    textarea.placeholder = originalText;
     textarea.style.position = 'absolute';
     textarea.style.top = "".concat(textPosition.y, "px");
     textarea.style.left = "".concat(textPosition.x, "px");
@@ -1009,15 +1011,21 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
     textarea.style.wordBreak = 'break-word';
     textarea.style.minHeight = '0';
     textarea.style.minWidth = '0';
+
+    // Placeholder inherits the element's text color at 40% opacity
+    var placeholderStyle = document.createElement('style');
+    placeholderStyle.textContent = "\n      textarea:placeholder-shown { opacity: 1; }\n      textarea::placeholder { color: ".concat(element.fill, "; opacity: 0.4; }\n    ");
+    stageContainer.appendChild(placeholderStyle);
     stageContainer.appendChild(textarea);
     textarea.focus();
-    textarea.select();
     var removed = false;
     var removeTextarea = function removeTextarea() {
+      var cancel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       if (removed) return;
       removed = true;
+      var newText = !cancel && textarea.value.length > 0 ? textarea.value : originalText;
       element.set({
-        text: textarea.value
+        text: newText
       });
       element.toggleEditMode(false);
       if (grp) grp.show();
@@ -1025,12 +1033,15 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
       if (textarea.parentNode) {
         textarea.parentNode.removeChild(textarea);
       }
+      if (placeholderStyle.parentNode) {
+        placeholderStyle.parentNode.removeChild(placeholderStyle);
+      }
     };
-    textarea.addEventListener('blur', removeTextarea);
+    textarea.addEventListener('blur', function () {
+      return removeTextarea(false);
+    });
     textarea.addEventListener('keydown', function (e) {
-      if (e.key === 'Escape') {
-        removeTextarea();
-      }
+      if (e.key === 'Escape') removeTextarea(true);
     });
   };