Redesign idea (#343)

* Redisign idea

* Code cleanup

* Fixed to right container

* Reoredered layout

* Reordering panels

* Export dialog

* Removed redunant code

* Fixed not removing temp canvas

* Fixed preview not using only selected elements

* Returned file name on export

* Toggle export selected/all elements

* Hide copy to clipboard button if no support of clipboard

* Added border to swatches

* Fixed modal flickering

src/components/EditableText.tsx

@@ -1,73 +1,44 @@
-import React, { Fragment, Component } from "react";
+import "./EditableText.css";
 
-type InputState = {
-  value: string;
-  edit: boolean;
-};
+import React, { Component } from "react";
+import { selectNode, removeSelection } from "../utils";
 
 type Props = {
   value: string;
   onChange: (value: string) => void;
 };
 
-export class EditableText extends Component<Props, InputState> {
-  constructor(props: Props) {
-    super(props);
+export class EditableText extends Component<Props> {
+  private handleFocus = (e: React.FocusEvent<HTMLElement>) => {
+    selectNode(e.currentTarget);
+  };
 
-    this.state = {
-      value: props.value,
-      edit: false
-    };
-  }
+  private handleBlur = (e: React.FocusEvent<HTMLElement>) => {
+    const value = e.currentTarget.innerText.trim();
+    if (value !== this.props.value) this.props.onChange(value);
+    removeSelection();
+  };
 
-  UNSAFE_componentWillReceiveProps(props: Props) {
-    this.setState({ value: props.value });
-  }
-
-  private handleEdit(e: React.ChangeEvent<HTMLInputElement>) {
-    this.setState({ value: e.target.value });
-  }
-
-  private handleBlur() {
-    const { value } = this.state;
-
-    if (!value) {
-      this.setState({ value: this.props.value, edit: false });
-      return;
+  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.currentTarget.blur();
     }
-    this.props.onChange(value);
-    this.setState({ edit: false });
-  }
+  };
 
   public render() {
-    const { value, edit } = this.state;
-
     return (
-      <Fragment>
-        {edit ? (
-          <input
-            className="project-name-input"
-            name="name"
-            maxLength={25}
-            value={value}
-            onChange={e => this.handleEdit(e)}
-            onBlur={() => this.handleBlur()}
-            onKeyDown={e => {
-              if (e.key === "Enter") {
-                this.handleBlur();
-              }
-            }}
-            autoFocus
-          />
-        ) : (
-          <span
-            onClick={() => this.setState({ edit: true })}
-            className="project-name"
-          >
-            {value}
-          </span>
-        )}
-      </Fragment>
+      <span
+        suppressContentEditableWarning
+        contentEditable="true"
+        data-type="wysiwyg"
+        className="project-name"
+        onBlur={this.handleBlur}
+        onKeyDown={this.handleKeyDown}
+        onFocus={this.handleFocus}
+      >
+        {this.props.value}
+      </span>
     );
   }
 }