ignore

src/widgets/in-place-edit.jsx

@@ -1,6 +1,5 @@
 // In-place text editor. Shows text with an icon which toggles it into an input field.
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import VisiblePassword from './visible-password.jsx';
 
@@ -8,6 +7,8 @@ export default class InPlaceEdit extends React.Component {
   constructor(props) {
     super(props);
 
+    this.selfRef = React.createRef();
+
     this.state = {
       active: props.active,
       initialValue: props.value || '',
@@ -47,10 +48,13 @@ export default class InPlaceEdit extends React.Component {
     }
   }
 
-  handleStartEditing() {
+   handleStartEditing() {
     if (!this.props.readOnly) {
-      ReactDOM.findDOMNode(this).focus();
-      this.setState({active: true});
+      this.setState({active: true}, () => {
+        if (this.selfRef.current) {
+          this.selfRef.current.focus();
+        }
+      });
     }
   }
 
@@ -75,12 +79,9 @@ export default class InPlaceEdit extends React.Component {
   }
 
   render() {
-    if (this.state.active) {
-      var fieldType = this.props.type || 'text';
-    } else {
-      var spanText = this.props.type == 'password' ? '••••••••' : this.state.value;
-      var spanClass = 'in-place-edit' +
-        (this.props.readOnly ? ' disabled' : '');
+    if (!this.state.active) {
+      let spanText = this.props.type == 'password' ? '••••••••' : this.state.value;
+      let spanClass = 'in-place-edit' + (this.props.readOnly ? ' disabled' : '');
       if (!spanText) {
         spanText = this.props.placeholder;
         spanClass += ' placeholder';
@@ -89,32 +90,35 @@ export default class InPlaceEdit extends React.Component {
         // FIXME: this is wrong for RTL languages.
         spanText = spanText.substring(0, 19) + '...';
       }
+      return (<span className={spanClass} onClick={this.handleStartEditing}>
+        <span className="content">{spanText}</span>
+      </span>);
     }
-    return (
-      this.state.active ?
-        (fieldType == 'password' ?
-          <VisiblePassword
-            value={this.state.value}
-            placeholder={this.props.placeholder}
-            required={this.props.required ? 'required' : ''}
-            autoComplete={this.props.autoComplete}
-            autoFocus={true}
-            onFinished={this.handlePasswordFinished}/>
-          :
-          <input type={fieldType}
-            value={this.state.value}
-            placeholder={this.props.placeholder}
-            required={this.props.required ? 'required' : ''}
-            autoComplete={this.props.autoComplete}
-            autoFocus
-            onChange={this.handeTextChange}
-            onKeyDown={this.handleKeyDown}
-            onBlur={this.handleEditingFinished} />
-        )
-        :
-        <span className={spanClass} onClick={this.handleStartEditing}>
-          <span className="content">{spanText}</span>
-        </span>
-    );
+
+    let element;
+    let attr = {};
+    if (this.props.type == 'password') {
+      element = VisiblePassword;
+      attr.onFinished = this.handlePasswordFinished;
+    } else {
+      if (this.props.multiline > 1) {
+        element = 'textarea';
+        attr.rows = this.props.multiline;
+        attr.className = 'inplace-edit';
+      } else {
+        element = 'input';
+        attr.type = this.props.type || 'text';
+      }
+      attr.onChange = this.handeTextChange;
+      attr.onKeyDown = this.handleKeyDown;
+      attr.onBlur = this.handleEditingFinished;
+    }
+    attr.placeholder = this.props.placeholder;
+    attr.required = this.props.required ? 'required' : '';
+    attr.autoComplete = this.props.autoComplete;
+    attr.autoFocus = true;
+    attr.ref = this.selfRef;
+
+    return React.createElement(element, attr, null);
   }
 };

src/widgets/topic-desc-edit.jsx

@@ -22,7 +22,7 @@ export default class TopicDescEdit extends React.Component {
     const topic = this.props.tinode.getTopic(this.props.topic);
     const acs = topic.getAccessMode();
     this.state = {
-      isMe: this.props.tinode.isMe(this.props.topic),
+      isMe: Tinode.isMeTopicName(this.props.topic),
       owner: acs && acs.isOwner(),
       fullName: topic.public ? topic.public.fn : undefined,
       avatar: makeImageUrl(topic.public ? topic.public.photo : null),
@@ -155,7 +155,7 @@ export default class TopicDescEdit extends React.Component {
       <>
         <div className="panel-form-row">
           <div className="panel-form-column">
-          {this.state.me ? <>
+          {this.state.isMe ? <>
             <label className="small">
               <FormattedMessage id="label_your_name" defaultMessage="Your name"
               description="Label for full name editing" />
@@ -205,6 +205,24 @@ export default class TopicDescEdit extends React.Component {
             onImageUpdated={this.handleImageUpdated}
             onError={this.props.onError} />
         </div>
+        <div className="panel-form-column">
+          <div><label className="small">
+            <FormattedMessage id="label_description" defaultMessage="Description"
+              description="Label for editing topic description" />
+          </label></div>
+          <div>
+            <FormattedMessage id="description_editing_placeholder"
+              defaultMessage="Optional description"
+              description="Placeholder for editing topic description">{
+              (private_placeholder) => <InPlaceEdit
+                placeholder={private_placeholder}
+                readOnly={!editable}
+                value={this.state.description}
+                multiline={2}
+                onFinished={this.handleDescriptionUpdate} />
+            }</FormattedMessage>
+          </div>
+        </div>
         {editable ?
           <>
             <div className="hr" />