feat(Edit Contentlet): Make our dotAddImage custom plugins for TinyMC…

…E work in Angular (#27982)

* feat: setup custom plugin

* chore: move DotAssetSearchComponent to ui lib

* feat: let user add images from dotCMS

* chore: create WYSIWYS Plugins service

* chore: clean up

* chore: add button icon

* chore: allow user to drop images

* feat: add dot Image data attributes

* chore: fix tests

* chore: cover DotWYSIWYGField Component tests

* chore: cover DotWysiwygPlugin Service tests

* chore: cover formatDotImageNode Util tests

* chore: clean up

* chore: cover DotContentSearch Service tests

* fix: lint

* chore: fix import in DotBlockEditor Component

* chore: add context menu for images

* chore: rename component to DotEditContentWYSIWYGField

* chore: clean up

* chore: clean up

* chore: cover DotAssetSearchComponent tests

* chore: cover DotAssetSearchStore tests

* chore: cover DotAssetSearchDialog Component tests

* chore: clean up

* chore: feedback

* chore: code cleanup

---------

Co-authored-by: Freddy Montes <[email protected]>

core-web/apps/dotcms-block-editor/src/app/app.module.ts

@@ -10,7 +10,12 @@ import { ListboxModule } from 'primeng/listbox';
 import { OrderListModule } from 'primeng/orderlist';
 
 import { BlockEditorModule, DotBlockEditorComponent } from '@dotcms/block-editor';
-import { DotPropertiesService } from '@dotcms/data-access';
+import {
+    DotPropertiesService,
+    DotContentSearchService,
+    DotLanguagesService
+} from '@dotcms/data-access';
+import { DotAssetSearchComponent } from '@dotcms/ui';
 
 import { AppComponent } from './app.component';
 
@@ -24,9 +29,10 @@ import { AppComponent } from './app.component';
         BlockEditorModule,
         OrderListModule,
         ListboxModule,
-        HttpClientModule
+        HttpClientModule,
+        DotAssetSearchComponent
     ],
-    providers: [DotPropertiesService]
+    providers: [DotPropertiesService, DotContentSearchService, DotLanguagesService]
 })
 export class AppModule implements DoBootstrap {
     constructor(private injector: Injector) {}

core-web/libs/block-editor/src/lib/block-editor.module.ts

@@ -6,9 +6,15 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ConfirmationService } from 'primeng/api';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 
-import { DotMessageService } from '@dotcms/data-access';
+import {
+    DotContentSearchService,
+    DotLanguagesService,
+    DotMessageService,
+    DotPropertiesService,
+    DotUploadFileService
+} from '@dotcms/data-access';
 import { LoggerService, StringUtils } from '@dotcms/dotcms-js';
-import { DotFieldRequiredDirective, DotMessagePipe } from '@dotcms/ui';
+import { DotAssetSearchComponent, DotFieldRequiredDirective, DotMessagePipe } from '@dotcms/ui';
 
 //Editor
 import { DotBlockEditorComponent } from './components/dot-block-editor/dot-block-editor.component';
@@ -29,7 +35,7 @@ import {
 } from './extensions';
 import { AssetFormModule } from './extensions/asset-form/asset-form.module';
 import { ContentletBlockComponent } from './nodes';
-import { DotAiService, DotUploadFileService, EditorDirective } from './shared';
+import { DotAiService, EditorDirective } from './shared';
 import { PrimengModule } from './shared/primeng.module';
 import { SharedModule } from './shared/shared.module';
 
@@ -49,7 +55,8 @@ const initTranslations = (dotMessageService: DotMessageService) => {
         UploadPlaceholderComponent,
         DotMessagePipe,
         ConfirmDialogModule,
-        AIImagePromptComponent
+        AIImagePromptComponent,
+        DotAssetSearchComponent
     ],
     declarations: [
         EditorDirective,
@@ -73,6 +80,9 @@ const initTranslations = (dotMessageService: DotMessageService) => {
         StringUtils,
         DotAiService,
         ConfirmationService,
+        DotPropertiesService,
+        DotContentSearchService,
+        DotLanguagesService,
         {
             provide: APP_INITIALIZER,
             useFactory: initTranslations,

core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.stories.ts

@@ -10,7 +10,8 @@ import { OrderListModule } from 'primeng/orderlist';
 
 import { debounceTime, delay, tap } from 'rxjs/operators';
 
-import { DotMessageService, DotPropertiesService } from '@dotcms/data-access';
+import { DotMessageService, DotPropertiesService, DotUploadFileService } from '@dotcms/data-access';
+import { DotContentSearchService, DotLanguageService } from '@dotcms/ui';
 
 import { DotBlockEditorComponent } from './dot-block-editor.component';
 
@@ -26,10 +27,7 @@ import {
     ASSET_MOCK,
     CONTENTLETS_MOCK,
     DotAiService,
-    DotLanguageService,
-    DotUploadFileService,
     FileStatus,
-    SearchService,
     SuggestionsComponent,
     SuggestionsService
 } from '../../shared';
@@ -170,7 +168,7 @@ export const Primary = () => ({
                     }
                 },
                 {
-                    provide: SearchService,
+                    provide: DotContentSearchService,
                     useValue: {
                         get(params) {
                             const query = params.query.match(new RegExp(/(?<=:)(.*?)(?=\*)/))[0];

core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.scss

@@ -26,4 +26,8 @@
     .p-tabview-panel {
         height: 25rem;
     }
+
+    .p-tabview-panels {
+        padding: 0;
+    }
 }

core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.module.ts

@@ -2,33 +2,32 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { DotSpinnerModule } from '@dotcms/ui';
+import { DotUploadFileService } from '@dotcms/data-access';
+import { DotAssetSearchComponent, DotSpinnerModule } from '@dotcms/ui';
 
 import { AssetFormComponent } from './asset-form.component';
-import { DotAssetCardComponent } from './components/dot-asset-search/components/dot-asset-card/dot-asset-card.component';
-import { DotAssetCardListComponent } from './components/dot-asset-search/components/dot-asset-card-list/dot-asset-card-list.component';
-import { DotAssetCardSkeletonComponent } from './components/dot-asset-search/components/dot-asset-card-skeleton/dot-asset-card-skeleton.component';
-import { DotAssetSearchComponent } from './components/dot-asset-search/dot-asset-search.component';
 import { DotExternalAssetComponent } from './components/dot-external-asset/dot-external-asset.component';
 import { DotAssetPreviewComponent } from './components/dot-upload-asset/components/dot-asset-preview/dot-asset-preview.component';
 import { DotUploadAssetComponent } from './components/dot-upload-asset/dot-upload-asset.component';
 
-import { DotUploadFileService } from '../../shared';
 import { PrimengModule } from '../../shared/primeng.module';
 
 @NgModule({
-    imports: [CommonModule, FormsModule, ReactiveFormsModule, DotSpinnerModule, PrimengModule],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        DotSpinnerModule,
+        PrimengModule,
+        DotAssetSearchComponent
+    ],
     declarations: [
         AssetFormComponent,
-        DotAssetCardListComponent,
-        DotAssetCardComponent,
-        DotAssetCardSkeletonComponent,
         DotExternalAssetComponent,
-        DotAssetSearchComponent,
         DotUploadAssetComponent,
         DotAssetPreviewComponent
     ],
     providers: [DotUploadFileService],
-    exports: [AssetFormComponent, DotAssetSearchComponent]
+    exports: [AssetFormComponent]
 })
 export class AssetFormModule {}