chore(edit-content): generate images with ai #30062

dotCMS · Oct 11, 2024 · 72f10e6 · 72f10e6
1 parent a6e98d3
commit 72f10e6
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 83 deletions.
diff --git a/core-web/libs/block-editor/src/lib/block-editor.module.ts b/core-web/libs/block-editor/src/lib/block-editor.module.ts
@@ -68,7 +68,7 @@ const initTranslations = (dotMessageService: DotMessageService) => {
         DialogModule,
         InputTextareaModule,
         PaginatorModule,
-        DotSpinnerModule,
+        DotSpinnerModule
     ],
     declarations: [
         EditorDirective,

diff --git a/core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts b/core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts
@@ -82,7 +82,7 @@ import {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DotBlockEditorComponent),
             multi: true
-        },
+        }
     ]
 })
 export class DotBlockEditorComponent implements OnInit, OnDestroy, ControlValueAccessor {

diff --git a/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.plugin.ts b/core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.plugin.ts
@@ -52,7 +52,6 @@ export class AIImagePromptView {
      * @param {AIImagePromptViewProps} props - The properties for the component.
      */
     constructor(props: AIImagePromptViewProps) {
-
         const { editor, view, pluginKey, dialogService } = props;
 
         this.editor = editor;
@@ -83,16 +82,16 @@ export class AIImagePromptView {
                 style: { 'max-width': '1040px' },
                 data: { context }
             });
-
-            this.#dialogRef.onClose
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((selectedImage: DotGeneratedAIImage) => {
-                if (selectedImage) {
-                    this.editor.chain().insertImage(selectedImage.response.contentlet).run();
-                }
 
-                this.editor.commands.closeImagePrompt();
-            })
+            this.#dialogRef.onClose
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((selectedImage: DotGeneratedAIImage) => {
+                    if (selectedImage) {
+                        this.editor.chain().insertImage(selectedImage.response.contentlet).run();
+                    }
+
+                    this.editor.commands.closeImagePrompt();
+                });
         }
     }
 

diff --git a/...t/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts b/...t/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts
@@ -93,7 +93,7 @@ type SystemOptionsType = {
         DotBinaryFieldUrlModeComponent,
         DotBinaryFieldPreviewComponent,
         DotAIImagePromptComponent,
-        TooltipModule,
+        TooltipModule
     ],
     providers: [
         DialogService,
@@ -106,7 +106,7 @@ type SystemOptionsType = {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DotEditContentBinaryFieldComponent)
-        },
+        }
     ],
     templateUrl: './dot-edit-content-binary-field.component.html',
     styleUrls: ['./dot-edit-content-binary-field.component.scss'],
@@ -282,18 +282,18 @@ export class DotEditContentBinaryFieldComponent
             resizable: false,
             modal: true,
             width: '90%',
-            style: { 'max-width': '1040px' },
+            style: { 'max-width': '1040px' }
         });
-        
+
         this.#dialogRef.onClose
-        .pipe(
-            filter((selectedImage: DotGeneratedAIImage) => !!selectedImage),
-            takeUntilDestroyed(this.#destroyRef)
-        )
-        .subscribe((selectedImage: DotGeneratedAIImage) => {
-            const tempFile = this.parseToTempFile(selectedImage);
-            this.#dotBinaryFieldStore.setTempFile(tempFile);
-        });        
+            .pipe(
+                filter((selectedImage: DotGeneratedAIImage) => !!selectedImage),
+                takeUntilDestroyed(this.#destroyRef)
+            )
+            .subscribe((selectedImage: DotGeneratedAIImage) => {
+                const tempFile = this.parseToTempFile(selectedImage);
+                this.#dotBinaryFieldStore.setTempFile(tempFile);
+            });
     }
 
     /**

diff --git a/...ntent/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts b/...ntent/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts
@@ -258,25 +258,25 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O
             resizable: false,
             modal: true,
             width: '90%',
-            style: { 'max-width': '1040px' },
+            style: { 'max-width': '1040px' }
         });
-        
+
         this.#dialogRef.onClose
-        .pipe(
-            filter((selectedImage: DotGeneratedAIImage) => !!selectedImage),
-            map((selectedImage) => {
-                const previewFile: UploadedFile = {
-                    source: 'contentlet',
-                    file: selectedImage.response.contentlet,
-                };
-                
-                return previewFile;
-            }),
-            takeUntilDestroyed(this.#destroyRef)
-        )
-        .subscribe((file) => {
-            this.store.setPreviewFile(file);
-        });
+            .pipe(
+                filter((selectedImage: DotGeneratedAIImage) => !!selectedImage),
+                map((selectedImage) => {
+                    const previewFile: UploadedFile = {
+                        source: 'contentlet',
+                        file: selectedImage.response.contentlet
+                    };
+
+                    return previewFile;
+                }),
+                takeUntilDestroyed(this.#destroyRef)
+            )
+            .subscribe((file) => {
+                this.store.setPreviewFile(file);
+            });
     }
 
     /**

diff --git a/core-web/libs/ui/src/lib/components/dot-ai-image-prompt/ai-image-prompt.component.html b/core-web/libs/ui/src/lib/components/dot-ai-image-prompt/ai-image-prompt.component.html
@@ -1,47 +1,46 @@
 @if (vm$ | async; as vm) {
-
-        <div class="dialog-prompt__wrapper">
-            <dot-ai-image-prompt-form
+    <div class="dialog-prompt__wrapper">
+        <dot-ai-image-prompt-form
             (valueChange)="store.setFormValue($event)"
             (generate)="store.generateImage()"
             [value]="vm.images[vm.galleryActiveIndex]"
             [isLoading]="vm.isLoading"
             [hasEditorContent]="vm.hasEditorContent" />
 
-            <div [class.dialog-prompt_gallery]="vm.images.length || vm.isLoading">
-                <dot-ai-image-prompt-gallery
-                    (activeIndexChange)="store.setGalleryActiveIndex($event)"
-                    (regenerate)="store.generateImage()"
-                    [isLoading]="vm.isLoading"
-                    [images]="vm.images"
-                    [activeImageIndex]="vm.galleryActiveIndex"
-                    [orientation]="vm.formValue?.size" />
-                @if (vm.images.length || vm.isLoading) {
-                    <div class="dot-ai-image__buttons">
-                        <button
-                            (click)="closeDialog()"
-                            [label]="'Cancel' | dm"
-                            class="p-button-text"
-                            data-testid="close-btn"
-                            type="button"
-                            pButton></button>
-                        <button
-                            (click)="selectedImage(vm.images[vm.galleryActiveIndex])"
-                            [disabled]="vm.isLoading || vm.images[vm.galleryActiveIndex].error"
-                            [label]="'block-editor.extension.ai-image.insert' | dm"
-                            class="align-self-end"
-                            data-testid="submit-btn"
-                            pButton
-                            type="submit"
-                            icon="pi pi-check"></button>
-                    </div>
-                }
-            </div>
-            <p-confirmDialog
-                [style]="{ width: '500px' }"
-                key="ai-image-prompt"
-                rejectButtonStyleClass="p-button-outlined"
-                acceptIcon="null"
-                rejectIcon="null" />
+        <div [class.dialog-prompt_gallery]="vm.images.length || vm.isLoading">
+            <dot-ai-image-prompt-gallery
+                (activeIndexChange)="store.setGalleryActiveIndex($event)"
+                (regenerate)="store.generateImage()"
+                [isLoading]="vm.isLoading"
+                [images]="vm.images"
+                [activeImageIndex]="vm.galleryActiveIndex"
+                [orientation]="vm.formValue?.size" />
+            @if (vm.images.length || vm.isLoading) {
+                <div class="dot-ai-image__buttons">
+                    <button
+                        (click)="closeDialog()"
+                        [label]="'Cancel' | dm"
+                        class="p-button-text"
+                        data-testid="close-btn"
+                        type="button"
+                        pButton></button>
+                    <button
+                        (click)="selectedImage(vm.images[vm.galleryActiveIndex])"
+                        [disabled]="vm.isLoading || vm.images[vm.galleryActiveIndex].error"
+                        [label]="'block-editor.extension.ai-image.insert' | dm"
+                        class="align-self-end"
+                        data-testid="submit-btn"
+                        pButton
+                        type="submit"
+                        icon="pi pi-check"></button>
+                </div>
+            }
         </div>
+        <p-confirmDialog
+            [style]="{ width: '500px' }"
+            key="ai-image-prompt"
+            rejectButtonStyleClass="p-button-outlined"
+            acceptIcon="null"
+            rejectIcon="null" />
+    </div>
 }
diff --git a/core-web/libs/ui/src/lib/components/dot-ai-image-prompt/ai-image-prompt.store.ts b/core-web/libs/ui/src/lib/components/dot-ai-image-prompt/ai-image-prompt.store.ts
@@ -91,10 +91,7 @@ export class DotAiImagePromptStore extends ComponentStore<DotAiImagePromptCompon
     readonly vm$: Observable<VmAiImagePrompt> = this.select(
         this.state$,
         this.isLoading$,
-        (
-            {  status, images, galleryActiveIndex, formValue, editorContent },
-            isLoading
-        ) => ({
+        ({ status, images, galleryActiveIndex, formValue, editorContent }, isLoading) => ({
             status,
             images,
             galleryActiveIndex,