session-id-editable-textarea

js/views/session_registration_view.js

@@ -126,8 +126,4 @@
     el.innerHTML = sessionID;
     fx.setText(sessionID);
   };
-
-  window.Session.emptyContentEditableDivs = () => {
-    window.$('div[contenteditable]').html('');
-  };
 })();

stylesheets/_session_left_pane.scss

@@ -302,6 +302,7 @@ $session-compose-margin: 20px;
       flex-shrink: 0;
       user-select: all;
       overflow: hidden;
+      resize: none;
     }
 
     .session-button {

ts/components/session/LeftPaneChannelSection.tsx

@@ -212,9 +212,7 @@ export class LeftPaneChannelSection extends React.Component<Props, State> {
       return;
     }
 
-    this.setState({ channelUrlPasted: '' }, () => {
-      window.Session.emptyContentEditableDivs();
-    });
+    this.setState({ channelUrlPasted: '' });
 
     if (updateSearchTerm) {
       updateSearchTerm(searchTerm);
@@ -297,11 +295,8 @@ export class LeftPaneChannelSection extends React.Component<Props, State> {
     );
   }
 
-  private handleOnPasteUrl(e: any) {
-    if (e.target.innerHTML) {
-      const cleanText = e.target.innerHTML.replace(/<\/?[^>]+(>|$)/g, '');
-      this.setState({ channelUrlPasted: cleanText });
-    }
+  private handleOnPasteUrl(value: string) {
+    this.setState({ channelUrlPasted: value });
   }
 
   private handleJoinChannelButtonClick() {

ts/components/session/LeftPaneContactSection.tsx

@@ -164,9 +164,7 @@ export class LeftPaneContactSection extends React.Component<Props, State> {
       return;
     }
 
-    this.setState({ pubKeyPasted: '' }, () => {
-      window.Session.emptyContentEditableDivs();
-    });
+    this.setState({ pubKeyPasted: '' });
 
     if (updateSearchTerm) {
       updateSearchTerm(searchTerm);
@@ -253,12 +251,8 @@ export class LeftPaneContactSection extends React.Component<Props, State> {
     }
   }
 
-  private handleRecipientSessionIDChanged(event: any) {
-    if (event.target.innerHTML) {
-      // remove br elements or div elements
-      const cleanText = event.target.innerHTML.replace(/<\/?[^>]+(>|$)/g, '');
-      this.setState({ addContactRecipientID: cleanText });
-    }
+  private handleRecipientSessionIDChanged(value: string) {
+    this.setState({ addContactRecipientID: value });
   }
 
   private renderContacts() {

ts/components/session/LeftPaneMessageSection.tsx

@@ -197,9 +197,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
       return;
     }
     // reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search
-    this.setState({ pubKeyPasted: '' }, () => {
-      window.Session.emptyContentEditableDivs();
-    });
+    this.setState({ pubKeyPasted: '' });
 
     if (updateSearchTerm) {
       updateSearchTerm(searchTerm);
@@ -259,12 +257,11 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
     this.updateSearch('');
   }
 
-  private handleOnPasteSessionID(e: any) {
+  private handleOnPasteSessionID(value: string) {
     // reset our search, we can either have a pasted sessionID or a sessionID got from a search
     this.updateSearch('');
-    const cleanText = e.target.innerHTML.replace(/<\/?[^>]+(>|$)/g, '');
 
-    this.setState({ pubKeyPasted: cleanText });
+    this.setState({ pubKeyPasted: value });
   }
 
   private handleMessageButtonClick() {

ts/components/session/RegistrationTabs.tsx

@@ -499,19 +499,16 @@ export class RegistrationTabs extends React.Component<{}, State> {
       <SessionIdEditable
         editable={contentEditable}
         placeholder={enterSessionIDHere}
-        onChange={(e: any) => {
-          this.onSecondDeviceSessionIDChanged(e);
+        onChange={(value: string) => {
+          this.onSecondDeviceSessionIDChanged(value);
         }}
       />
     );
   }
 
-  private onSecondDeviceSessionIDChanged(e: any) {
-    e.preventDefault();
-    const cleanText = e.target.innerHTML.replace(/<\/?[^>]+(>|$)/g, '');
-    const hexEncodedPubKey = cleanText;
+  private onSecondDeviceSessionIDChanged(value: string) {
     this.setState({
-      primaryDevicePubKey: hexEncodedPubKey,
+      primaryDevicePubKey: value,
     });
   }
 

ts/components/session/SessionIdEditable.tsx

@@ -5,19 +5,17 @@ interface Props {
   text?: string;
   editable?: boolean;
   onChange?: any;
+  onPressEnter?: any;
 }
 
 export class SessionIdEditable extends React.PureComponent<Props> {
-  private readonly inputRef: React.RefObject<HTMLInputElement>;
+  private readonly inputRef: any;
 
   public constructor(props: Props) {
     super(props);
     this.inputRef = React.createRef();
-  }
-
-  public componentWillUnmount() {
-    //FIXME ugly hack to empty the content editable div used on enter session ID
-    window.Session.emptyContentEditableDivs();
+    this.handleChange = this.handleChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
 
   public focus() {
@@ -27,22 +25,35 @@ export class SessionIdEditable extends React.PureComponent<Props> {
   }
 
   public render() {
-    const { placeholder, editable, onChange, text } = this.props;
+    const { placeholder, editable, text } = this.props;
 
     return (
-      <div
+      <textarea
         ref={this.inputRef}
         className="session-id-editable"
         placeholder={placeholder}
-        contentEditable={editable}
-        onInput={(e: any) => {
-          if (editable) {
-            onChange(e);
-          }
-        }}
-      >
-        {text}
-      </div>
+        disabled={!editable}
+        spellCheck={false}
+        onKeyDown={this.handleKeyDown}
+        onChange={this.handleChange}
+        value={text}
+      />
     );
   }
+
+  private handleChange(e: any) {
+    const { editable, onChange } = this.props;
+    if (editable) {
+      onChange(e.target.value);
+    }
+  }
+
+  private handleKeyDown(e: any) {
+    const { editable, onPressEnter } = this.props;
+    if (editable && e.keyCode === 13) {
+      e.preventDefault();
+      // tslint:disable-next-line: no-unused-expression
+      onPressEnter && onPressEnter();
+    }
+  }
 }