feat(UVE): Enable Inline editing in text fields for Angular SDK (#29124)

### Proposed Changes * Allow Users to inline editing in Angular example ### Checklist - [x] Tests - [x] Security Implications Contemplated (add notes if applicable) ### Cases #### 1. Plain Mode https://github.com/user-attachments/assets/c4f17cb9-9b35-46ad-b815-005c13446a6a ### 2. Minimal Mode https://github.com/user-attachments/assets/6d1ad636-2bcc-4de1-9d78-5222ad48b6d0 ### 3. Full Mode https://github.com/user-attachments/assets/57d12a74-ba09-40cb-bc98-993abc6b4e93 ### 4. Same Content On Multiple Pages https://github.com/user-attachments/assets/ddf1308d-7044-4f25-bd34-208e4b9eaac0 ### 5. Live Mode https://github.com/user-attachments/assets/0a1e43d5-1838-4cc6-b6b8-35034ee9791e --------- Co-authored-by: Jalinson Diaz <zjaaaldev@gmail.com>
dotCMS · Jul 17, 2024 · 3870c53 · 3870c53
1 parent 3c24f30
commit 3870c53
Show file tree

Hide file tree

Showing 240 changed files with 131,239 additions and 142 deletions.
diff --git a/...s/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/ema-page-dropzone/types.ts b/...s/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/ema-page-dropzone/types.ts
@@ -65,7 +65,7 @@ export interface InlineEditingContentletDataset {
 
 export interface UpdatedContentlet {
     dataset: InlineEditingContentletDataset;
-    innerHTML: string;
+    content: string;
     eventType: string;
     isNotDirty: boolean;
 }
diff --git a/.../libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts b/.../libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts
@@ -3041,7 +3041,7 @@ describe('EditEmaEditorComponent', () => {
                                         mode: 'full',
                                         language: '1'
                                     },
-                                    innerHTML: 'Hello World',
+                                    content: 'Hello World',
                                     element: {},
                                     eventType: '',
                                     isNotDirty: false

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts
@@ -213,6 +213,10 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
         return this.activatedRouter.snapshot.queryParams as DotPageApiParams;
     }
 
+    get contentWindow(): Window {
+        return this.iframe.nativeElement.contentWindow;
+    }
+
     isVTLPage = toSignal(this.store.clientHost$.pipe(map((clientHost) => !clientHost)));
     $isInlineEditing = toSignal(
         this.store.editorMode$.pipe(map((mode) => mode === EDITOR_MODE.INLINE_EDITING))
@@ -236,7 +240,7 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
             )
             .subscribe(() => {
                 requestAnimationFrame(() => {
-                    const win = this.iframe.nativeElement.contentWindow;
+                    const win = this.contentWindow;
 
                     fromEvent(win, 'click').subscribe((e: MouseEvent) => {
                         this.handleInternalNav(e);
@@ -251,7 +255,7 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
             )
             .subscribe(({ mode }) => {
                 requestAnimationFrame(() => {
-                    const win = this.iframe.nativeElement.contentWindow;
+                    const win = this.contentWindow;
 
                     if (
                         mode === EDITOR_MODE.EDIT ||
@@ -317,10 +321,7 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
 
     handleDragEvents() {
         this.store.isUserDragging$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.iframe.nativeElement.contentWindow?.postMessage(
-                NOTIFY_CUSTOMER.EMA_REQUEST_BOUNDS,
-                this.host
-            );
+            this.contentWindow?.postMessage(NOTIFY_CUSTOMER.EMA_REQUEST_BOUNDS, this.host);
         });
 
         fromEvent(this.window, 'dragstart')
@@ -401,10 +402,7 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
                         this.store.updateEditorState(EDITOR_STATE.DRAGGING);
                     }
 
-                    this.iframe.nativeElement.contentWindow?.postMessage(
-                        NOTIFY_CUSTOMER.EMA_REQUEST_BOUNDS,
-                        this.host
-                    );
+                    this.contentWindow?.postMessage(NOTIFY_CUSTOMER.EMA_REQUEST_BOUNDS, this.host);
                 }
             );
 
@@ -455,7 +453,7 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
 
                 this.store.setScrollingState();
 
-                this.iframe.nativeElement.contentWindow?.postMessage(
+                this.contentWindow?.postMessage(
                     { name: NOTIFY_CUSTOMER.EMA_SCROLL_INSIDE_IFRAME, direction },
                     this.host
                 );
@@ -1036,27 +1034,39 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
                             }
 
                             return this.handleCopyContent();
+                        }),
+                        tap((res) => {
+                            if (res) {
+                                this.store.reload({ params: this.queryParams });
+                            }
                         })
                     )
                     .subscribe((res: DotCMSContentlet | null) => {
-                        const updatedDataset = {
+                        const data = {
+                            oldInode: payload.dataset.inode,
                             inode: res?.inode || payload.dataset.inode,
                             fieldName: payload.dataset.fieldName,
                             mode: payload.dataset.mode,
                             language: payload.dataset.language
                         };
 
-                        this.inlineEditingService.setTargetInlineMCEDataset(updatedDataset);
-                        this.store.setEditorMode(EDITOR_MODE.INLINE_EDITING);
-                        if (res) {
-                            this.store.reload({
-                                params: this.queryParams
-                            });
+                        if (!this.isVTLPage()) {
+                            const message = {
+                                name: NOTIFY_CUSTOMER.COPY_CONTENTLET_INLINE_EDITING_SUCCESS,
+                                payload: data
+                            };
+
+                            this.contentWindow?.postMessage(message, this.host);
 
                             return;
                         }
 
-                        this.inlineEditingService.initEditor();
+                        this.inlineEditingService.setTargetInlineMCEDataset(data);
+                        this.store.setEditorMode(EDITOR_MODE.INLINE_EDITING);
+
+                        if (!res) {
+                            this.inlineEditingService.initEditor();
+                        }
                     });
             },
             [CUSTOMER_ACTIONS.UPDATE_CONTENTLET_INLINE_EDITING]: () => {
@@ -1077,7 +1087,7 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
                 this.store.saveFromInlineEditedContentlet({
                     contentlet: {
                         inode: payload.dataset['inode'],
-                        [payload.dataset.fieldName]: payload.innerHTML
+                        [payload.dataset.fieldName]: payload.content
                     },
                     params: this.queryParams
                 });

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/services/inline-edit/inline-edit.service.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/services/inline-edit/inline-edit.service.ts
@@ -178,13 +178,13 @@ export class InlineEditService {
                 ed.bodyElement.classList.remove('active');
             }
 
-            const content = ed.getContent();
+            const content = ed.getContent(); // TODO: We should set the format here based on the field type. Wysiwyg should be html and text should be text
             const element = ed.target;
             const data = {
-                dataset: { ...dataset },
-                innerHTML: content,
+                content,
                 element,
                 eventType,
+                dataset: { ...dataset },
                 isNotDirty: ed.isNotDirty
             };
 

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/enums.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/enums.ts
@@ -3,7 +3,8 @@ export enum NOTIFY_CUSTOMER {
     EMA_REQUEST_BOUNDS = 'ema-request-bounds',
     EMA_EDITOR_PONG = 'ema-editor-pong',
     EMA_SCROLL_INSIDE_IFRAME = 'scroll-inside-iframe',
-    SET_PAGE_DATA = 'SET_PAGE_DATA'
+    SET_PAGE_DATA = 'SET_PAGE_DATA',
+    COPY_CONTENTLET_INLINE_EDITING_SUCCESS = 'COPY_CONTENTLET_INLINE_EDITING_SUCCESS'
 }
 
 // All the custom events that come from the JSP Iframe

diff --git a/core-web/libs/sdk/angular/package.json b/core-web/libs/sdk/angular/package.json
@@ -6,6 +6,7 @@
         "@angular/core": "^17.1.0",
         "@angular/router": "^17.1.0",
         "@dotcms/client": "0.0.1-alpha.25",
+        "@tinymce/tinymce-angular": "^8.0.0",
         "rxjs": "^7.8.0"
     },
     "description": "Official Angular Components library to render a dotCMS page.",

diff --git a/core-web/libs/sdk/angular/src/index.ts b/core-web/libs/sdk/angular/src/index.ts
@@ -1,3 +1,4 @@
+export * from './lib/components/dot-editable-text/dot-editable-text.component';
 export * from './lib/layout/dotcms-layout/dotcms-layout.component';
 export * from './lib/services/dotcms-context/page-context.service';
 export * from './lib/models';
diff --git a/...web/libs/sdk/angular/src/lib/components/dot-editable-text/dot-editable-text.component.css b/...web/libs/sdk/angular/src/lib/components/dot-editable-text/dot-editable-text.component.css
@@ -0,0 +1,4 @@
+:host ::ng-deep .mce-content-body:not(.mce-edit-focus):hover {
+    outline: 2px solid #006ce7;
+    border-radius: 4px;
+}
diff --git a/...eb/libs/sdk/angular/src/lib/components/dot-editable-text/dot-editable-text.component.html b/...eb/libs/sdk/angular/src/lib/components/dot-editable-text/dot-editable-text.component.html
@@ -0,0 +1,8 @@
+@if (isInsideEditor) {
+<editor
+    #tinyEditor
+    [init]="init"
+    [initialValue]="content"
+    (onMouseDown)="onMouseDown($event)"
+    (onFocusOut)="onFocusOut()" />
+}