Adding autocomplete to post, community, message, and site forms. Fixes #453

1 files changed, 20 insertions, 2 deletions

diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx
index 4dc7bfcb..33c63c89 100644
--- a/ui/src/components/community-form.tsx
+++ b/ui/src/components/community-form.tsx
@@ -11,7 +11,14 @@ import {
   WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService } from '../services';
-import { wsJsonToRes, capitalizeFirstLetter, toast } from '../utils';
+import {
+  wsJsonToRes,
+  capitalizeFirstLetter,
+  toast,
+  randomStr,
+  setupTribute,
+} from '../utils';
+import Tribute from 'tributejs/src/Tribute.js';
 import autosize from 'autosize';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -36,6 +43,8 @@ export class CommunityForm extends Component<
   CommunityFormProps,
   CommunityFormState
 > {
+  private id = `community-form-${randomStr()}`;
+  private tribute: Tribute;
   private subscription: Subscription;
 
   private emptyState: CommunityFormState = {
@@ -53,6 +62,7 @@ export class CommunityForm extends Component<
   constructor(props: any, context: any) {
     super(props, context);
 
+    this.tribute = setupTribute();
     this.state = this.emptyState;
 
     if (this.props.community) {
@@ -80,7 +90,14 @@ export class CommunityForm extends Component<
   }
 
   componentDidMount() {
-    autosize(document.querySelectorAll('textarea'));
+    var textarea: any = document.getElementById(this.id);
+    autosize(textarea);
+    this.tribute.attach(textarea);
+    textarea.addEventListener('tribute-replaced', () => {
+      this.state.communityForm.description = textarea.value;
+      this.setState(this.state);
+      autosize.update(textarea);
+    });
   }
 
   componentWillUnmount() {
@@ -130,6 +147,7 @@ export class CommunityForm extends Component<
           </label>
           <div class="col-12">
             <textarea
+              id={this.id}
               value={this.state.communityForm.description}
               onInput={linkEvent(this, this.handleCommunityDescriptionChange)}
               class="form-control"