Prevent line break in ngx-editor

Question

I have added one more button in ngx-editor-menu for having emoji feature as well. But whenever I am adding emoji in text, it comes in new line. I am not able to find any way to add in the same line. In fact I want to make this editor as a input box in look wise, means no multiline.

I tried this

html


  <form [formGroup]="form">
      <div class="editor">

        <ngx-editor [editor]="editor" formControlName="editorContent" name="myEditor" ngDefaultControl>
        </ngx-editor>
        <ngx-editor-menu
        [editor]="editor"
        [toolbar]="toolbar"
        [customMenuRef]="customMenu"
      >
      </ngx-editor-menu>
      </div>
    </form>

    <emoji-mart
      (emojiClick)="addEmoji($event)"
      *ngIf="showEmojiPicker"
      emoji="point_up"
    ></emoji-mart>

    <ng-template #customMenu>
      <button (click)="toggleEmojiPicker()">emoji dropdown1</button>
    </ng-template>

ts file

editor: Editor;
  showEmojiPicker = false;
  toolbar: Toolbar = [
    ['bold', 'italic'],
    ['text_color', 'background_color'],
    ['align_left', 'align_center', 'align_right', 'align_justify'],
  ];
  emoji;
  addEmoji($event) {
    let data = this.emoji;
    console.log('editorContent', this.form);
    this.form.patchValue({editorContent: this.form.value.editorContent + $event.emoji.native});

  }

  toggleEmojiPicker() {
    this.showEmojiPicker = !this.showEmojiPicker;
  }

  form = new FormGroup({
    editorContent: new FormControl(
      { value: '', disabled: false },
      Validators.required()
    ),
  });

I tried to append it to current text using patchValue, but it creates new line. I want to add that emoji in same line.

Prevent line break in ngx-editor

0 Answers0