Add paste as text

block-core · Aug 29, 2024 · 54e6fce · 54e6fce
1 parent 2445041
commit 54e6fce
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/app/src/app/shared/components/text-editor/text-editor.component.html b/app/src/app/shared/components/text-editor/text-editor.component.html
@@ -1,5 +1,9 @@
 <mat-card class="toolbar-actions margin-bottom">
   <mat-card-content class="toolbar-actions">
+    <button mat-icon-button matTooltip="Paste as text" (click)="pasteAsPlainText()">
+      <mat-icon>content_paste</mat-icon>
+    </button>
+
     <button type="button" mat-icon-button (click)="execCommand('bold')">
       <mat-icon>format_bold</mat-icon>
     </button>

diff --git a/app/src/app/shared/components/text-editor/text-editor.component.scss b/app/src/app/shared/components/text-editor/text-editor.component.scss
@@ -4,6 +4,12 @@
   min-height: 200px;
   margin-top: 10px;
   box-sizing: border-box;
+
+  width: 100%;
+  height: 100%;
+  white-space: pre-wrap; /* Ensure text wraps */
+  word-wrap: break-word; /* Break long words */
+  overflow-wrap: break-word; /* Break long words */
 }
 
 /** TODO: This does not work. The border becomes white. */

diff --git a/app/src/app/shared/components/text-editor/text-editor.component.ts b/app/src/app/shared/components/text-editor/text-editor.component.ts
@@ -3,11 +3,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-text-editor',
   standalone: true,
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatMenuModule],
+  imports: [MatButtonModule, MatCardModule, MatIconModule, MatMenuModule, MatTooltipModule],
   templateUrl: './text-editor.component.html',
   styleUrls: ['./text-editor.component.scss'],
 })
@@ -32,6 +33,28 @@ export class TextEditorComponent implements AfterViewInit {
     }
   }
 
+  pasteAsPlainText() {
+    navigator.clipboard
+      .readText()
+      .then((text) => {
+        const selection = window.getSelection();
+
+        if (!selection) {
+          return;
+        }
+
+        if (!selection.rangeCount) {
+          return;
+        }
+
+        selection.deleteFromDocument();
+        selection.getRangeAt(0).insertNode(document.createTextNode(text));
+      })
+      .catch((err) => {
+        console.error('Failed to read clipboard contents: ', err);
+      });
+  }
+
   execCommand(command: string, value: string | null = null) {
     // @ts-ignore
     document.execCommand(command, false, value);