Revert "Emoji picker #563"

This reverts commit 222b7fb.

Author: markharding

angular.json

@@ -81,7 +81,6 @@
               "node_modules/material-design-lite/dist/material.blue_grey-amber.min.css",
               "node_modules/plyr/dist/plyr.css",
               "node_modules/highlight.js/styles/github.css",
-              "node_modules/@ctrl/ngx-emoji-mart/picker.css",
               "src/main.css"
             ],
             "scripts": [

build/ng-bundles.sh

@@ -4,8 +4,8 @@ BROWSER_PATH=${1:-dist/browser}
 EMBED_PATH=${1:-dist/embed}
 SERVER_PATH=${3:-dist/server}
 
-# Allow Node.js to use up to 6G
-export NODE_OPTIONS="--max_old_space_size=6144"
+# Allow Node.js to use up to 4G
+export NODE_OPTIONS="--max_old_space_size=4096"
 
 # Build global CSS
 npx gulp build.sass --deploy-url="/static/en/"

package-lock.json

@@ -40,7 +40,6 @@
     "@angular/router": "~12.1.2",
     "@bhayward93/ckeditor5-build-minds": "^1.1.8",
     "@ckeditor/ckeditor5-angular": "^2.0.2",
-    "@ctrl/ngx-emoji-mart": "^6.1.1",
     "@danielmoncada/angular-datetime-picker": "^12.0.0",
     "@growthbook/growthbook": "^0.16.1",
     "@mindsorg/ngx-universal": "^2.3.0",

package.json

@@ -197,8 +197,6 @@ import { AutofocusDirective } from './directives/autofocus.directive';
 import { SidebarMoreComponent } from './layout/sidebar-more/sidebar-more.component';
 import { SidebarMoreTriggerComponent } from './layout/sidebar-more/sidebar-more-trigger/sidebar-more-trigger.component';
 import { TagSelectorComponent } from './components/tag-selector/tag-selector.component';
-import { EmojiPickerComponent } from './components/emoji-picker/emoji-picker.component';
-import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { ModalCloseButtonComponent } from './components/modal-close-button/modal-close-button.component';
 import { BlurhashDirective } from './directives/blurhash/blurhash.directive';
 
@@ -216,7 +214,6 @@ const routes: Routes = [
     RouterModule,
     FormsModule,
     ReactiveFormsModule,
-    PickerModule,
     OwlDateTimeModule,
     OwlNativeDateTimeModule,
     NgxPopperjsModule,
@@ -370,7 +367,6 @@ const routes: Routes = [
     SidebarMoreComponent,
     SidebarMoreTriggerComponent,
     TagSelectorComponent,
-    EmojiPickerComponent,
     ModalCloseButtonComponent,
     BlurhashDirective,
   ],
@@ -517,7 +513,6 @@ const routes: Routes = [
     SidebarMoreComponent,
     SidebarMoreTriggerComponent,
     TagSelectorComponent,
-    EmojiPickerComponent,
     ModalCloseButtonComponent,
     BlurhashDirective,
   ],

src/app/common/common.module.ts

@@ -49,7 +49,7 @@
 
   .m-commentPoster__form {
     flex-grow: 2;
-    max-width: calc(100% - 160px);
+    max-width: calc(100% - 130px);
     margin-block-end: 0;
     minds-textarea {
       padding: 0;
@@ -86,8 +86,7 @@
       margin: 3px 10px 0;
     }
     .m-dropdown--v2 {
-      margin: 0 $minds-margin;
-
+      margin: 0;
       .m-commentPoster__menuButton {
         i {
           font-size: 23px;

src/app/common/components/emoji-picker/emoji-picker.component.html

@@ -29,8 +29,7 @@
             (ascendingInProgress || descendingInProgress) &&
             attachment.hasFile()
           "
-          (keyup)="keyup($event)"
-          (click)="updateCaretPosition()"
+          (keyup)="getPostPreview(content)"
           (keypress)="keypress($event)"
           (keydown)="keydown($event)"
           [placeholder]="
@@ -61,11 +60,6 @@
     <!-- --------------------- -->
     <div class="mdl-card__actions m-commentPoster__actions">
       <div>
-        <m-emojiPicker
-          *ngIf="!isMobile()"
-          (emojiSelect)="onEmoji($event)"
-        ></m-emojiPicker>
-
         <!-- Dropdown meatball -->
         <div class="m-dropdown--v2">
           <div

src/app/common/components/emoji-picker/emoji-picker.component.scss

@@ -27,7 +27,6 @@ import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { AuthModalService } from '../../auth/modal/auth-modal.service';
 import { IsCommentingService } from './is-commenting.service';
 import { Router } from '@angular/router';
-import isMobile from '../../../helpers/is-mobile';
 
 @Component({
   selector: 'm-comment__poster',
@@ -48,9 +47,6 @@ export class CommentPosterComponent implements OnInit, OnDestroy {
   > = new EventEmitter();
   @Output('posted') posted$: EventEmitter<any> = new EventEmitter();
 
-  @ViewChild('message')
-  messageTextarea: Textarea;
-
   menuOpened$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   content: string = '';
@@ -61,7 +57,6 @@ export class CommentPosterComponent implements OnInit, OnDestroy {
   maxLength: number = 1500;
   loggedInSubscription: Subscription;
   editing: boolean = false;
-  caretOffset: number = 0;
 
   constructor(
     public session: Session,
@@ -93,11 +88,6 @@ export class CommentPosterComponent implements OnInit, OnDestroy {
     }
   }
 
-  keyup(e: KeyboardEvent) {
-    this.getPostPreview(this.content);
-    this.updateCaretPosition();
-  }
-
   /**
    * Fires before keypress function, includes backspace event.
    * @param { KeyboardEvent } e - keyboard event.
@@ -254,24 +244,6 @@ export class CommentPosterComponent implements OnInit, OnDestroy {
     this.attachment.preview(message, this.detectChanges.bind(this));
   }
 
-  /**
-   * sets caret position
-   */
-  updateCaretPosition() {
-    const element = this.messageTextarea?.editorControl?.nativeElement;
-    var caretOffset = 0;
-
-    if (element && window.getSelection) {
-      var range = window.getSelection().getRangeAt(0);
-      var preCaretRange = range.cloneRange();
-      preCaretRange.selectNodeContents(element);
-      preCaretRange.setEnd(range.endContainer, range.endOffset);
-      caretOffset = preCaretRange.toString().length;
-    }
-
-    this.caretOffset = caretOffset;
-  }
-
   getAvatar(): Observable<string> {
     return this.userAvatar.src$;
   }
@@ -307,18 +279,6 @@ export class CommentPosterComponent implements OnInit, OnDestroy {
     this.detectChanges();
   }
 
-  onEmoji(emoji) {
-    const preText = this.content.substring(0, this.caretOffset);
-    const postText = this.content.substring(this.caretOffset);
-    this.content = preText + emoji.native + postText;
-    // move caret after emoji
-    this.caretOffset += emoji.native.length;
-  }
-
-  isMobile() {
-    return isMobile();
-  }
-
   detectChanges() {
     this.cd.markForCheck();
     this.cd.detectChanges();

src/app/common/components/emoji-picker/emoji-picker.component.ts

@@ -41,8 +41,6 @@
       [disabled]="isPosting$ | async"
       (ngModelChange)="onMessageChange($event)"
       (filePaste)="filePaste.emit($event)"
-      (click)="setSelection(messageInput)"
-      (keyup)="setSelection(messageInput)"
       m-attachment-paste
       tabindex="0"
       data-cy="composer-textarea"

src/app/modules/comments/comments.component.scss

@@ -156,17 +156,4 @@ export class TextAreaComponent implements AfterViewInit {
     textareaEl.style.height = 'auto';
     textareaEl.style.height = `${textareaEl.scrollHeight}px`;
   }
-
-  /**
-   * sets message input text selection
-   * @param input textarea reference
-   */
-  setSelection(input) {
-    if (input.selectionStart || input.selectionStart == '0') {
-      this.service.selection$.next({
-        start: input.selectionStart,
-        end: input.selectionEnd,
-      });
-    }
-  }
 }

src/app/modules/comments/poster/poster.component.html

@@ -4,11 +4,6 @@
   [class.m-composer__toolbar--small]="isCompactMode$ | async"
   #toolbarWrapper
 >
-  <m-emojiPicker
-    *ngIf="!isMobile()"
-    (emojiSelect)="onEmoji($event)"
-  ></m-emojiPicker>
-
   <m-file-upload
     [wrapperClass]="[
       'm-composerToolbar__item',

src/app/modules/comments/poster/poster.component.ts

@@ -79,10 +79,6 @@
     }
   }
 
-  m-emojiPicker {
-    margin-right: $minds-margin * 2;
-  }
-
   &.m-composer__toolbar--narrow
     .m-composerToolbarItem__icon
     + .m-composerToolbarItem__label {