Fix: textarea auto-height

src/app/app.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { ClearBtnComponent } from './components/clear_btn/clear_btn.component';
 import { TextListComponent } from './components/text_list/text_list.component';
 import { UploadBtnComponent } from './components/upload_btn/upload_btn.component';
+import { TranslateData } from './dto/translate_data.dto';
 import { parse } from './lib/parser';
 
 @Component({
@@ -12,9 +13,16 @@ import { parse } from './lib/parser';
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'NitroPlusTranslator';
-  elements: string[] = [];
+  elements: TranslateData[] = [];
+
+  ngOnInit(): void {
+    const data = localStorage.getItem('translations');
+    if (data) {
+      this.elements = JSON.parse(data);
+    }
+  }
 
   onFileLoaded(text: string) {
     const parsed = parse(text);

src/app/components/text_list/text_list.component.ts

@@ -1,8 +1,7 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { ChangeDetectorRef, Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { TranslateData } from 'src/app/dto/translate_data.dto';
 import { TranslateBlockComponent } from '../translate_block/translate_block.component';
-import { TranslateData } from './text_list.dto';
 
 @Component({
   selector: 'app-text-list',
@@ -12,56 +11,13 @@ import { TranslateData } from './text_list.dto';
   imports: [CommonModule, TranslateBlockComponent],
 })
 export class TextListComponent {
-  constructor(private http: HttpClient, private changeDetectionRef: ChangeDetectorRef) {
-    const data = localStorage.getItem('translations');
-    if (data) {
-      this.elements_data = JSON.parse(data);
-    }
-  }
   elements_data: TranslateData[] = [];
-  @Input() set elements(el: string[]) {
-    this.elements_data = el.map((item) => ({ english_text: item, translated_text: '' }));
+  @Input() set elements(el: TranslateData[]) {
+    this.elements_data = el;
     localStorage.setItem('translations', JSON.stringify(this.elements_data));
   }
 
   get elements() {
-    return this.elements_data.map((item) => item.english_text);
-  }
-
-  sendToTranslate($text: string, $index: number) {
-    if (!$text) {
-      return;
-    }
-    if (this.elements_data[$index].translated_text && !confirm('Are you sure you want to override the translation?')) {
-      return;
-    }
-    console.log('translated');
-    $text = encodeURIComponent($text);
-
-    this.http
-      .get(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=` + $text)
-      .subscribe({
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        next: (data: any) => {
-          this.elements_data[$index].translated_text = data[0][0][0];
-          localStorage.setItem('translations', JSON.stringify(this.elements_data));
-          this.changeDetectionRef.detectChanges();
-        },
-        error: (error) => {
-          alert(error);
-          console.error(error);
-        },
-      });
-  }
-
-  typeTranslation($event: Event, $index: number) {
-    const target = $event.target as HTMLDivElement;
-    if (target) {
-      this.elements_data[$index].translated_text = target.textContent || '[]';
-      localStorage.setItem('translations', JSON.stringify(this.elements_data));
-      target.style.height = '3rem';
-      target.style.height = target.scrollHeight + 'px';
-      // this.changeDetectionRef.detectChanges();
-    }
+    return this.elements_data;
   }
 }

src/app/components/translate_block/translate_block.component.html

@@ -2,15 +2,11 @@
   <h2>{{ index + 1 }}</h2>
   <div class="fields">
     <div class="english-text">{{ item.english_text }}</div>
-    <div class="translated-text">
-      <textarea
-        type="text"
-        [value]="item.translated_text"
-        (change)="typeTranslation()"
-        rows="1"
-        #translatedText
-      ></textarea>
-    </div>
+    <div class="translated-text" #translatedText [attr.contenteditable]="isEditing" (blur)="saveTranslate()"></div>
+  </div>
+  <div class="btns">
+    <button class="send-translate-btn btn" (click)="sendToTranslate()">Translate</button>
+    <button class="change-edit-btn btn" (click)="isEditing = !isEditing" [disabled]="isEditing">Edit</button>
+    <button class="clear-btn btn" (click)="clear()" [disabled]="!item.translated_text.length">Clear</button>
   </div>
-  <button class="send-translate-btn" (click)="sendToTranslate()">Translate</button>
 </div>

src/app/components/translate_block/translate_block.component.scss

@@ -1,6 +1,6 @@
 .translated-text {
   border-radius: 8px;
-  height: fit-content;
+  height: auto;
   color: #efdee0;
   outline: none;
   padding-inline: 2rem 1rem;
@@ -8,23 +8,15 @@
   border: 2px solid #e4bdc3;
   font-size: 1rem;
   font-weight: inherit;
+  min-height: 3rem;
+  line-height: 3rem;
   &:focus {
     border: 2px solid #efdee0;
   }
-  textarea {
-    resize: none;
-    width: 100%;
-    height: fit-content;
-    background-color: transparent;
-    border: none;
-    outline: none;
-    color: #efdee0;
-    font-size: 1rem;
-    font-weight: inherit;
-    line-height: 3rem;
-
-    word-wrap: break-word;
+  &:read-only {
+    opacity: 0.5;
   }
+  word-wrap: break-word;
 }
 
 .english-text {
@@ -66,17 +58,28 @@
   }
 }
 
-.send-translate-btn {
-  outline: none;
-  border: none;
-  cursor: pointer;
-  background-color: #5b3f45;
-  padding: 1em 1.5em;
-  color: #f5f6fa;
-  border-radius: 15px;
-  transition: ease-in-out 0.2s;
-  margin: 2rem;
-  &:hover {
-    transform: scale(1.2);
+.btns {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  .btn {
+    outline: none;
+    border: none;
+    cursor: pointer;
+    background-color: #5b3f45;
+    padding: 1em 1.5em;
+    color: #f5f6fa;
+    border-radius: 15px;
+    transition: ease-in-out 0.2s;
+    &:hover {
+      transform: scale(1.2);
+    }
+    &:disabled {
+      opacity: 0.5;
+      &:hover {
+        cursor: not-allowed;
+        transform: scale(1);
+      }
+    }
   }
 }

src/app/components/translate_block/translate_block.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
-import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { TranslateData } from 'src/app/dto/translate_data.dto';
 import { TranslatePipe } from 'src/app/pipes/translate.pipe';
-import { TranslateData } from '../text_list/text_list.dto';
 
 @Component({
   selector: 'app-translate-block',
@@ -11,21 +11,52 @@ import { TranslateData } from '../text_list/text_list.dto';
   imports: [CommonModule],
   providers: [TranslatePipe],
 })
-export class TranslateBlockComponent {
-  @ViewChild('translatedText') translatedText: ElementRef<HTMLTextAreaElement> | null = null;
+export class TranslateBlockComponent implements OnInit, AfterViewInit {
+  @ViewChild('translatedText') translatedText: ElementRef<HTMLDivElement> | null = null;
   @Input() item: TranslateData = { english_text: '', translated_text: '' };
   @Input() index = 0;
+  isEditing = false;
 
-  constructor(private translatePipe: TranslatePipe) {}
+  saveChanges() {
+    const data: TranslateData[] = JSON.parse(localStorage.getItem('translations') ?? '[]');
+    if (!data.length) {
+      alert('No data');
+      return;
+    }
+    data[this.index] = this.item;
+    localStorage.setItem('translations', JSON.stringify(data));
+  }
+
+  ngOnInit(): void {
+    this.isEditing = this.item.translated_text === '';
+  }
+
+  constructor(private translatePipe: TranslatePipe, private changeDetectionRef: ChangeDetectorRef) {}
   async sendToTranslate() {
     const text = await this.translatePipe.transform(this.item.english_text);
     this.item.translated_text = text;
+    if (this.translatedText) this.translatedText.nativeElement.textContent = text;
+    this.isEditing = false;
+    this.saveChanges();
   }
-  typeTranslation() {
+
+  saveTranslate() {
+    this.isEditing = false;
     if (this.translatedText) {
-      const element = this.translatedText.nativeElement;
-      element.setAttribute('style', 'height: 3px;');
-      element.setAttribute('style', 'height:' + element.scrollHeight + 'px; overflow-y:hidden;');
+      this.item.translated_text = this.translatedText.nativeElement.textContent || '';
+      this.translatedText.nativeElement.textContent = '';
+      this.translatedText.nativeElement.textContent = this.item.translated_text;
     }
+    this.saveChanges();
+  }
+  clear() {
+    this.item.translated_text = '';
+    if (this.translatedText) this.translatedText.nativeElement.textContent = '';
+    this.isEditing = true;
+    this.saveChanges();
+  }
+
+  ngAfterViewInit(): void {
+    if (this.translatedText) this.translatedText.nativeElement.textContent = this.item.translated_text;
   }
 }

src/app/lib/parser.ts

@@ -1,10 +1,15 @@
-export function parse(text: string): string[] {
+import { TranslateData } from '../dto/translate_data.dto';
+
+export function parse(text: string): TranslateData[] {
   const replaced_text = text
     .replace('/<[kK]{1}>/gm', '\n')
     .replace(/(<[^>]*>|\/\/.*)/gm, '')
     .replace(/\s*\n\s*/gm, '\n');
-  return replaced_text
+  const result = replaced_text
     .split('\n')
     .map((line) => line.trim())
-    .filter((line) => line.length > 0);
+    .filter((line) => line.length > 0)
+    .map((line) => ({ english_text: line, translated_text: '' }));
+  console.log(result);
+  return result;
 }

src/app/lib/translater.ts

@@ -1,17 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { firstValueFrom } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-export async function translate(text: string, http: HttpClient): Promise<string> {
-  const response = await firstValueFrom(
-    http
-      .get(
-        `https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ru&dt=t&q=` + encodeURIComponent(text),
-      )
-      .pipe(
-        map((data: any) => data[0][0][0]), // Assuming the response structure from the API
-      ),
-  );
-
-  return response;
-}