feat(block-editor) #26520 added dotMessageService to Block Editor

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

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

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

@@ -11,7 +11,7 @@ import { OrderListModule } from 'primeng/orderlist';
 
 import { debounceTime, delay, tap } from 'rxjs/operators';
 
-import { DotPropertiesService } from '@dotcms/data-access';
+import { DotMessageService, DotPropertiesService } from '@dotcms/data-access';
 
 import { DotBlockEditorComponent } from './dot-block-editor.component';
 
@@ -24,16 +24,17 @@ import {
 } from '../../extensions';
 import { ContentletBlockComponent } from '../../nodes';
 import {
-    DotAiService,
     ASSET_MOCK,
     CONTENTLETS_MOCK,
+    DotAiService,
     DotLanguageService,
     DotUploadFileService,
     FileStatus,
     SearchService,
     SuggestionsComponent,
     SuggestionsService
 } from '../../shared';
+import { DotMessageServiceMock } from '../../shared/mocks/dot-message.service.mock';
 import { DotAiServiceMock } from '../../shared/services/dot-ai/dot-ai-service.mock';
 
 export default {
@@ -194,6 +195,13 @@ export const primary = () => ({
             {
                 provide: DotAiService,
                 useClass: process.env.USE_MIDDLEWARE === 'true' ? DotAiService : DotAiServiceMock
+            },
+            {
+                provide: DotMessageService,
+                useClass:
+                    process.env.USE_MIDDLEWARE === 'true'
+                        ? DotMessageService
+                        : DotMessageServiceMock
             }
         ],
         // We need these here because they are dynamically rendered

core-web/libs/block-editor/src/lib/extensions/ai-content-actions/ai-content-actions.component.ts

@@ -1,4 +1,13 @@
-import { Component, EventEmitter, Output, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    inject,
+    OnInit,
+    Output
+} from '@angular/core';
+
+import { DotMessageService } from '@dotcms/data-access';
 
 interface ActionOption {
     label: string;
@@ -21,26 +30,26 @@ export enum ACTIONS {
 })
 export class AIContentActionsComponent implements OnInit {
     @Output() actionEmitter = new EventEmitter<ACTIONS>();
-
     actionOptions!: ActionOption[];
     tooltipContent = 'Describe the size, color palette, style, mood, etc.';
+    private dotMessageService: DotMessageService = inject(DotMessageService);
 
     ngOnInit() {
         this.actionOptions = [
             {
-                label: 'Accept',
+                label: this.dotMessageService.get('block-editor.common.accept'),
                 icon: 'pi pi-check',
                 callback: () => this.emitAction(ACTIONS.ACCEPT),
                 selectedOption: true
             },
             {
-                label: 'Regenerate',
+                label: this.dotMessageService.get('block-editor.common.regenerate'),
                 icon: 'pi pi-sync',
                 callback: () => this.emitAction(ACTIONS.REGENERATE),
                 selectedOption: false
             },
             {
-                label: 'Delete',
+                label: this.dotMessageService.get('block-editor.common.delete'),
                 icon: 'pi pi-trash',
                 callback: () => this.emitAction(ACTIONS.DELETE),
                 selectedOption: false

core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.html

@@ -7,11 +7,13 @@
                 autofocus
                 formControlName="textPrompt"
                 pInputText
-                placeholder="{{ 'Ask AI to write something' | dm }}"
+                placeholder="{{
+                    'block-editor.extension.ai-content.ask-ai-to-write-something' | dm
+                }}"
                 type="text" />
 
             <ng-container *ngIf="vm.loading; else submitButton">
-                <span class="pending-label">Pending</span>
+                <span class="pending-label">{{ 'block-editor.common.pending' | dm }}</span>
             </ng-container>
 
             <ng-template #submitButton>

core-web/libs/block-editor/src/lib/shared/mocks/dot-message.service.mock.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+
+import { formatMessage } from '@dotcms/utils';
+
+// Move all this translations to Language.properties
+export const MessageServiceMock: Record<string, string> = {
+    'block-editor.common.accept': 'Accept',
+    'block-editor.common.delete': 'Delete',
+    'block-editor.common.regenerate': 'Regenerate',
+    'block-editor.common.pending': 'Pending',
+    'block-editor.extension.ai-content.ask-ai-to-write-something': 'Ask AI to write something'
+};
+
+@Injectable()
+export class DotMessageServiceMock {
+    init() {
+        // fake init
+    }
+    get(key: string, ...args: string[]): string {
+        return MessageServiceMock[key]
+            ? args.length
+                ? formatMessage(MessageServiceMock[key], args)
+                : MessageServiceMock[key]
+            : key;
+    }
+}