feat: enhance CSS editor with clipboard functionality and incorporated UI changes from PR review

Author: deltork

packages/studio-web/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { PrivacyDialog } from "./app.component";
 import { ErrorPageComponent } from "./error-page/error-page.component";
 import { EditorComponent } from "./editor/editor.component";
 import { SharedModule } from "./shared/shared.module";
+import { WcStylingComponent } from "./shared/wc-styling/wc-styling.component";
 
 defineCustomElements();
 
@@ -34,6 +35,7 @@ defineCustomElements();
     ErrorPageComponent,
     EditorComponent,
     // ShepherdComponent
+    WcStylingComponent,
   ],
   imports: [
     BrowserModule,

packages/studio-web/src/app/editor/editor.component.html

@@ -58,7 +58,7 @@ <h2 i18n="Title for upload box" class="title">
     <div class="col col-lg-7">
 
     </div>
-    <div class="col-12 bg-fade  col-lg-5 pt-lg-5 d-lg-flex flex-row" *ngIf="hasFile">
+    <div class="col-12 bg-fade  col-lg-5 pt-lg-5 d-lg-flex flex-row" *ngIf="rasFileIsLoaded">
 
 
     </div>
@@ -67,7 +67,11 @@ <h2 i18n="Title for upload box" class="title">
     class="d-flex justify-content-center flex-column flex-xl-row flex-xl-nowrap bg-light mt-3 full-height"
   >
     <div id="readalongContainer" #readalongContainer></div>
-    <div [class.d-none]="!hasFile" [class.d-lg-flex]="hasFile" class="flex-row">
+    <div
+      [class.d-none]="!rasFileIsLoaded"
+      [class.d-lg-flex]="rasFileIsLoaded"
+      class="flex-row"
+    >
       <div
         class="m-0 p-0 handle me-xl-2 d-none d-xl-block"
         #handle

packages/studio-web/src/app/editor/editor.component.sass

@@ -29,7 +29,7 @@
     margin-right: 1em
     margin-top: 1em
     cursor: col-resize
-    z-index: 1000
+    z-index: 10
     display: block
   #styleWindow
     margin: 0

packages/studio-web/src/app/editor/editor.component.ts

@@ -54,7 +54,7 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
   htmlUploadAccepts = ".html";
 
   unsubscribe$ = new Subject<void>();
-  hasFile = false;
+  rasFileIsLoaded = false;
   constructor(
     public b64Service: B64Service,
     private fileService: FileService,
@@ -143,7 +143,7 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
     }
     if (this.handleElement) {
       fromEvent(this.handleElement.nativeElement, "dragend")
-        .pipe(takeUntil(this.unsubscribe$), debounceTime(100))
+        .pipe(takeUntil(this.unsubscribe$))
         .subscribe((event) => {
           const ev = event as DragEvent;
           console.log("[DEBUG] dragged");
@@ -195,7 +195,7 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
           this.wcStylingService,
         );
     }
-    this.hasFile = false;
+    this.rasFileIsLoaded = false;
   }
 
   download(download_type: SupportedOutputs) {
@@ -280,7 +280,7 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
     const readalong = await this.parseReadalong(text);
     this.loadAudioIntoWavesurferElement();
     this.renderReadalong(readalong);
-    this.hasFile = true;
+    this.rasFileIsLoaded = true;
   }
 
   async renderReadalong(readalongBody: string | undefined) {
@@ -429,7 +429,8 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
     // stylesheet linked
 
     const css = element.getAttribute("css-url");
-    if (css !== null) {
+
+    if (css !== null && css.length > 0) {
       if (css.startsWith("data:text/css;base64,")) {
         this.wcStylingService.$wcStyleInput.next(
           this.b64Service.b64_to_utf8(css.substring(css.indexOf(",") + 1)),

packages/studio-web/src/app/shared/shared.module.ts

@@ -4,10 +4,10 @@ import { DownloadComponent } from "./download/download.component";
 import { BrowserModule } from "@angular/platform-browser";
 import { MaterialModule } from "../material.module";
 import { FormsModule } from "@angular/forms";
-import { WcStylingComponent } from "./wc-styling/wc-styling.component";
+
 @NgModule({
-  declarations: [DownloadComponent, WcStylingComponent],
+  declarations: [DownloadComponent],
   imports: [BrowserModule, MaterialModule, FormsModule, CommonModule],
-  exports: [DownloadComponent, WcStylingComponent],
+  exports: [DownloadComponent],
 })
 export class SharedModule {}

packages/studio-web/src/app/shared/wc-styling/wc-styling-helper.html

@@ -3,7 +3,7 @@ <h2 mat-dialog-title i18n="Advanced styling">Advanced styling</h2>
   <div class="style-helper">
     <p>
       To customize the look and feel of your read-along, you need to upload or
-      write some Cascading Style Sheets in the styling section.
+      write some Cascading Style Sheets (CSS) in the styling section.
     </p>
     <p>
       We are providing a table below to help you customize. Please note that

packages/studio-web/src/app/shared/wc-styling/wc-styling.component.html

@@ -120,7 +120,9 @@ <h1 class="title pt-2">
           </h3>
         </span>
 
-        <span class="ms-5 ms-md-0 p-0 pt-3 d-flex justify-content-end">
+        <span
+          class="ms-5 ms-md-0 p-0 pt-3 d-flex justify-content-end justify-content-xl-center"
+        >
           <button
             i18n="Style download button"
             mat-button
@@ -136,6 +138,22 @@ <h1 class="title pt-2">
           </button>
         </span>
       </div>
+      <div *ngIf="canUseClipBoard" class="row">
+        <div class="col d-flex justify-content-center">
+          <button
+            mat-button
+            (click)="copyStyle()"
+            [disabled]="!(styleText$ | async)"
+          >
+            <mat-icon class="mat-icon-lg">content_copy</mat-icon
+            ><span i18n="copy">Copy</span>
+          </button>
+          <button mat-button (click)="pasteStyle()">
+            <mat-icon class="mat-icon-lg">content_paste</mat-icon
+            ><span i18n="copy">Paste</span>
+          </button>
+        </div>
+      </div>
       <div class="row">
         <mat-form-field class="col-12 p-0 b-0 ms-5 ms-md-0">
           <textarea

packages/studio-web/src/app/shared/wc-styling/wc-styling.component.sass

@@ -44,15 +44,13 @@ code
   #style-section
     transform: rotate(0deg) translateX(0%)
     height: 70vh
-    transition: height 1s
     width: 100%
 
   #style-section.collapsed
     transform: rotate(90deg)
     transform-origin: bottom left
     width: 85em
     max-height: 4.7em
-    transition: transform 1s
     max-width: calc( 55vh + 100px)
 
     div.header > div

packages/studio-web/src/app/shared/wc-styling/wc-styling.component.ts

@@ -31,6 +31,7 @@ export class WcStylingComponent implements OnDestroy, OnInit {
   @ViewChild("styleInputElement") styleInputElement: ElementRef;
   @ViewChild("fontInputElement") fontInputElement: ElementRef;
   @ViewChild("styleSection") styleSection: ElementRef;
+  canUseClipBoard = false;
 
   constructor(
     private toastr: ToastrService,
@@ -51,6 +52,20 @@ export class WcStylingComponent implements OnDestroy, OnInit {
         //this.collapsed = false;
       }
     });
+    //check if clipboard access is allowed
+    navigator.permissions
+      .query({ name: "clipboard-write" as PermissionName })
+      .then((result) => {
+        if (result.state === "granted" || result.state === "prompt") {
+          this.canUseClipBoard = true;
+        } else {
+          this.canUseClipBoard = false;
+        }
+      })
+      .catch((err) => {
+        console.error("Failed to query clipboard permissions", err);
+        this.canUseClipBoard = false;
+      });
   }
   onFontSelected(event: any) {
     const file: File = event.target.files[0];
@@ -107,6 +122,7 @@ export class WcStylingComponent implements OnDestroy, OnInit {
       .text()
       .then((val) => {
         this.styleText$.next(val);
+
         this.wcStylingService.$wcStyleInput.next(val);
         this.inputType = "edit";
         this.toastr.success(
@@ -179,7 +195,6 @@ span.theme--dark.sentence__text {
   }
   toggleStyleInput(event: any) {
     this.inputType = event.value;
-    this.collapsed$.next(false);
   }
   async ngOnInit() {
     this.wcStylingService.$wcStyleInput
@@ -206,6 +221,60 @@ span.theme--dark.sentence__text {
   toggleCollapse() {
     this.collapsed$.next(!this.collapsed$.getValue());
   }
+  pasteStyle() {
+    if (this.canUseClipBoard) {
+      navigator.clipboard
+        .readText()
+        .then((text) => {
+          this.styleText$.next(text);
+          this.wcStylingService.$wcStyleInput.next(text);
+          this.inputType = "edit";
+          this.toastr.success(
+            $localize`Style sheet pasted from clipboard.`,
+            undefined,
+            { timeOut: 10000 },
+          );
+        })
+        .catch((err) => {
+          this.toastr.error($localize`Failed to read clipboard content.`, err, {
+            timeOut: 2000,
+          });
+        });
+    } else {
+      this.toastr.error(
+        $localize`Clipboard access is not allowed.`,
+        $localize`Error`,
+      );
+    }
+  }
+
+  copyStyle() {
+    if (this.canUseClipBoard) {
+      navigator.clipboard
+        .writeText(this.styleText$.getValue())
+        .then(() => {
+          this.toastr.success(
+            $localize`Style sheet copied to clipboard.`,
+            undefined,
+            { timeOut: 10000 },
+          );
+        })
+        .catch((err) => {
+          this.toastr.error(
+            $localize`Failed to copy style sheet to clipboard.`,
+            err,
+            {
+              timeOut: 2000,
+            },
+          );
+        });
+    } else {
+      this.toastr.error(
+        $localize`Clipboard access is not allowed.`,
+        $localize`Error`,
+      );
+    }
+  }
 }
 
 @Component({

packages/studio-web/src/i18n/messages.es.json

@@ -15,6 +15,7 @@
     "5192585697967841844": " Para obtener este documento, debería haber creado un ReadAlong utilizando el {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} Studio{$CLOSE_LINK} y luego haber seleccionado «HTML offline» como formato. O puede utilizar el archivo HTML offline incluido en el formato de descarga Archivos web comprimidos. ",
     "2136422915588832930": "Barra de herramientas de audio",
     "7149012067459406545": "El fichero \"{$fileName}\" no es un fichero HTML.",
+    "453238823906696872": "No se pudo cargar el fichero CSS \"{$PH}\".",
     "7819314041543176992": "Cerrar",
     "5701618810648052610": "Título",
     "1137319519199859335": "Subtítulo",
@@ -48,6 +49,8 @@
     "3796650812518266523": " Escriba o pegue sus hojas de estilos aquí ",
     "4934000757746180538": "{$START_TAG_MAT_ICON}save{$CLOSE_TAG_MAT_ICON} Guarde una copia",
     "7071695380382454380": "{$START_TAG_MAT_ICON}sync{$CLOSE_TAG_MAT_ICON} Aplicar",
+    "4323470180912194028": "Copiar",
+    "8890504809170904482": "Pegar",
     "7604046252874749392": "Opcional: utilice una fuente personalizada (.woff2)",
     "7719309746449095739": "Fichero ",
     "7466581557533667662": " no se pudo procesarlo.",
@@ -56,6 +59,12 @@
     "6899344040225872362": "¡Genial!",
     "5700078517045291790": " Contenido cargado en el cuadro de texto.",
     "6558433540988178003": "No hay texto para descargar.",
+    "4533795875760195674": "Hojas de estilos pegadas desde el portapapeles.",
+    "3715050097325047804": "Error al leer el contenido del portapapeles.",
+    "5048497709983421225": "Acceso al portapapeles no permitido.",
+    "1519954996184640001": "Error",
+    "1205008396748653088": "Hojas de estilos copiadas al portapapeles.",
+    "7492776625383944837": "Error al copiar las hojas de estilos al portapapeles.",
     "6731392928829867425": "Bienvenidos al Studio de ReadAlong",
     "1309246714146466494": "¡Crear un ReadAlong es fácil! Esta guía le mostrará todas las funcionalidades del Studio.",
     "3885497195825665706": "Próximo",