feat(): update rich text editor

Author: develite98

apps/mix-cms/src/app/pages/portal/database-data/database-data.component.ts

@@ -353,7 +353,9 @@ export class DatabaseDataComponent
 
       const dialogRef = this.dialog.open(RecordFormComponent, {
         data: { mixDatabase: value.db, data: undefined },
-        width: 800,
+        windowClass: RecordFormComponent.windowClass,
+        minWidth: RecordFormComponent.minWidth,
+        maxWidth: RecordFormComponent.maxWidth,
       });
 
       dialogRef.afterClosed$.subscribe((value) => {
@@ -375,7 +377,9 @@ export class DatabaseDataComponent
 
       const dialogRef = this.dialog.open(RecordFormComponent, {
         data: { mixDatabase: state.db, data: state.data[dataIndex] },
-        width: 800,
+        windowClass: RecordFormComponent.windowClass,
+        minWidth: RecordFormComponent.minWidth,
+        maxWidth: RecordFormComponent.maxWidth,
       });
 
       dialogRef.afterClosed$.subscribe((value) => {

libs/mix-share/src/components/record-form/record-form.component.html

@@ -1,25 +1,31 @@
 <div class="mix-dialog">
   <div class="mix-dialog__header">
-    {{ mode === 'create' ? 'Create' : 'Update'}} record from {{ ref.data.mixDatabase.displayName }}
+    {{ mode === 'create' ? 'Create' : 'Update' }} record from
+    {{ ref.data.mixDatabase.displayName }}
   </div>
 
   <div class="mix-dialog__content">
     <form [formGroup]="form">
-      <formly-form *ngIf="fields.length"
-                   [fields]="fields"
-                   [form]="form"
-                   [model]="modelData"></formly-form>
+      <formly-form
+        *ngIf="fields.length"
+        [fields]="fields"
+        [form]="form"
+        [model]="modelData"
+      ></formly-form>
     </form>
   </div>
 
-  <div *ngIf="loadingState$ | async as state"
-       class="mix-dialog__footer">
-    <mix-button type="outline"
-                (click)="ref.close()"
-                size="m"> Cancel </mix-button>
+  <div class="mix-dialog__footer">
+    <mix-button type="outline" (click)="ref.close()" size="m">
+      Cancel
+    </mix-button>
 
-    <mix-button [loading]="state === 'Loading'"
-                (click)="onSaveData()"
-                size="m"> Save </mix-button>
+    <mix-button
+      [loading]="loadingState() === 'Loading'"
+      (click)="onSaveData()"
+      size="m"
+    >
+      Save
+    </mix-button>
   </div>
 </div>

libs/mix-share/src/components/record-form/record-form.component.ts

@@ -29,8 +29,12 @@ import { TuiFileLike } from '@taiga-ui/kit';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RecordFormComponent extends BaseComponent implements OnInit {
-  mixApi = inject(MixApiFacadeService);
-  ref: DialogRef<
+  public static windowClass = 'mix-record-form-dialog';
+  public static minWidth = '800px';
+  public static maxWidth = '95vw';
+
+  public mixApi = inject(MixApiFacadeService);
+  public ref: DialogRef<
     {
       mixDatabase: MixDatabase;
       data: MixDynamicData | undefined;
@@ -83,7 +87,7 @@ export class RecordFormComponent extends BaseComponent implements OnInit {
         },
         db.displayName
       )
-      .pipe(this.observerLoadingState())
+      .pipe(this.observerLoadingStateSignal())
       .subscribe((result) => {
         this.ref.close(result);
       });

libs/mix-ui/src/base/formly-control-layout/formly-control-layout.component.html

@@ -1,10 +1,10 @@
-<div class="row mb-4">
-  <div class="col-md-2">
+<div class="formly-control-item">
+  <div style="min-width: 200px">
     <span class="content-label mb-1"> {{ title }}:</span>
     <div class="content-sub-label">{{ description }}</div>
   </div>
 
-  <div class="col-md-10">
+  <div class="flex-grow-1">
     <ng-content></ng-content>
   </div>
 </div>

libs/mix-ui/src/base/formly-control-layout/formly-control-layout.component.scss

@@ -0,0 +1,12 @@
+.formly-control-item {
+  display: flex;
+  gap: 8px;
+}
+
+formly-field {
+  display: block;
+
+  &:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
+}

libs/mix-ui/src/base/formly-control-layout/formly-control-layout.component.ts

@@ -1,5 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
 
 @Component({
   selector: 'mix-formly-control-layout',
@@ -8,6 +13,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   templateUrl: './formly-control-layout.component.html',
   styleUrls: ['./formly-control-layout.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class FormlyControlLayoutComponent {
   @Input() title?: string = '';

libs/mix-ui/src/rich-text-editor/rich-text-editor.component.html

@@ -1,15 +1,16 @@
-<div class="rich-text-editor"
-     [ngClass]="{ '--full-width': zoom }">
+<div class="rich-text-editor" [ngClass]="{ '--full-width': zoom }">
   <tui-editor [formControl]="control">
     {{ placeHolder }}
   </tui-editor>
 
-  <mix-button class="rich-text-editor__button"
-              type="outline"
-              [iconBtn]="true"
-              (click)="zoom = !zoom">
-    <span class="material-symbols-outlined">
-      {{ zoom ? 'pinch_zoom_in' : 'pinch_zoom_out' }}
+  <mix-button
+    class="rich-text-editor__button"
+    type="outline"
+    [iconBtn]="true"
+    (click)="zoom = !zoom"
+  >
+    <span class="mix-icon text-xl">
+      {{ zoom ? 'zoom_in' : 'zoom_out' }}
     </span>
   </mix-button>
 </div>

libs/mix-ui/src/rich-text-editor/rich-text-editor.component.scss

@@ -14,11 +14,12 @@ tui-editor {
 
   &.--full-width {
     position: fixed;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
+    width: 50vw;
+    height: calc(100vh - 8px);
+    top: 4px;
+    right: 4px;
     z-index: 50;
+    animation: fullwidth-open 0.1s cubic-bezier(0, 0, 0.2, 1);
   }
 
   &__button {
@@ -28,3 +29,14 @@ tui-editor {
     background-color: #fff;
   }
 }
+
+@keyframes fullwidth-open {
+  0% {
+    opacity: 0.2;
+    transform: translateX(50%);
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}

libs/share-styles/src/styles/dialog.scss

@@ -14,40 +14,39 @@ ngneat-dialog {
   .ngneat-dialog-backdrop {
     .ngneat-dialog-content {
       padding: 18px;
-      animation: unset !important;
+      // animation: unset !important;
       box-shadow: unset !important;
     }
 
-    animation: unset !important;
-  }
-}
-
-@keyframes dialog-open-2 {
-  0% {
-    opacity: 0.5;
-    transform: scale(0.7);
-  }
-  100% {
-    transform: none;
-    opacity: 1;
+    // animation: unset !important;
   }
 }
 
 .mix-dialog {
   &__header {
     font-size: 18px;
-    margin-bottom: 4px;
+    font-weight: 700;
   }
 
   &__content {
     margin: 24px 0px;
   }
 
   &__footer {
-    margin-top: 4px;
     display: flex;
     align-items: center;
-    gap: 4px;
     justify-content: flex-end;
+    gap: 4px;
+  }
+}
+
+@keyframes dialog-open-2 {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.7);
+  }
+  100% {
+    transform: none;
+    opacity: 1;
   }
 }