@dotcms/angular 0.0.1-beta.25 → 0.0.1-beta.27

package/fesm2022/dotcms-angular-next.mjs

@@ -1,12 +1,15 @@
 import * as i0 from '@angular/core';
 import { inject, ViewContainerRef, TemplateRef, Directive, Input, Renderer2, ElementRef, SecurityContext, Component, ViewChild, HostListener, ChangeDetectionStrategy, computed, signal, Injectable, HostBinding } from '@angular/core';
-import { UVE_MODE, DotCMSUVEAction } from '@dotcms/types';
-import { getUVEState, sendMessageToUVE } from '@dotcms/uve';
+import { UVE_MODE, DotCMSUVEAction, UVEEventType } from '@dotcms/types';
+import { getUVEState, sendMessageToUVE, initUVE, createUVESubscription } from '@dotcms/uve';
 import { IMAGE_LOADER, NgComponentOutlet, AsyncPipe, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { TINYMCE_SCRIPT_SRC, EditorComponent } from '@tinymce/tinymce-angular';
 import { DomSanitizer } from '@angular/platform-browser';
 import { __DOTCMS_UVE_EVENT__, BlockEditorDefaultBlocks } from '@dotcms/types/internal';
-import { isValidBlocks, PRODUCTION_MODE, DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_ANGULAR, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getDotContainerAttributes, getContainersData, getContentletsInContainer, getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
+import { __DEFAULT_TINYMCE_CONFIG__, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__, __TINYMCE_PATH_ON_DOTCMS__, isValidBlocks, PRODUCTION_MODE, DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_ANGULAR, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getDotContainerAttributes, getContainersData, getContentletsInContainer, getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
+import { Subject, of } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+import { updateNavigation } from '@dotcms/client';
 
 /**
  * Directive to show a template when the UVE is in a specific mode.
@@ -127,45 +130,21 @@ function createDotCMSURL(config, path) {
 }
 
 const DEFAULT_TINYMCE_CONFIG = {
-    menubar: false,
-    inline: true,
-    valid_styles: {
-        '*': 'font-size,font-family,color,text-decoration,text-align'
-    },
-    powerpaste_word_import: 'clean',
-    powerpaste_html_import: 'clean',
-    suffix: '.min', // Suffix to use when loading resources
-    license_key: 'gpl'
+    ...__DEFAULT_TINYMCE_CONFIG__,
+    license_key: 'gpl' // Using self-hosted license key
 };
 const TINYMCE_CONFIG = {
     minimal: {
         ...DEFAULT_TINYMCE_CONFIG,
-        plugins: 'link autolink',
-        toolbar: 'bold italic underline | link',
-        valid_elements: 'strong,em,span[style],a[href]'
+        ...__BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.minimal
     },
     full: {
         ...DEFAULT_TINYMCE_CONFIG,
-        plugins: 'link lists autolink charmap',
-        style_formats: [
-            { title: 'Paragraph', format: 'p' },
-            { title: 'Header 1', format: 'h1' },
-            { title: 'Header 2', format: 'h2' },
-            { title: 'Header 3', format: 'h3' },
-            { title: 'Header 4', format: 'h4' },
-            { title: 'Header 5', format: 'h5' },
-            { title: 'Header 6', format: 'h6' },
-            { title: 'Pre', format: 'pre' },
-            { title: 'Code', format: 'code' }
-        ],
-        toolbar: [
-            'styleselect undo redo | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent | hr charmap removeformat | link'
-        ]
+        ...__BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.full
     },
     plain: {
         ...DEFAULT_TINYMCE_CONFIG,
-        plugins: '',
-        toolbar: ''
+        ...__BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.plain
     }
 };
 
@@ -374,7 +353,7 @@ class DotCMSEditableTextComponent {
                 provide: TINYMCE_SCRIPT_SRC,
                 useFactory: () => {
                     const { dotCMSHost } = getUVEState() || {};
-                    return `${dotCMSHost || ''}/ext/tinymcev7/tinymce.min.js`;
+                    return `${dotCMSHost || ''}${__TINYMCE_PATH_ON_DOTCMS__}`;
                 }
             }
         ], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isEditMode) {\n    <editor\n        #tinyEditor\n        [init]=\"init\"\n        [initialValue]=\"content\"\n        (onMouseDown)=\"onMouseDown($event)\"\n        (onFocusOut)=\"onFocusOut()\" />\n}\n", styles: [":host ::ng-deep .mce-content-body:not(.mce-edit-focus):hover{outline:2px solid #006ce7;border-radius:4px}\n"], dependencies: [{ kind: "component", type: EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }] }); }
@@ -386,7 +365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                             provide: TINYMCE_SCRIPT_SRC,
                             useFactory: () => {
                                 const { dotCMSHost } = getUVEState() || {};
-                                return `${dotCMSHost || ''}/ext/tinymcev7/tinymce.min.js`;
+                                return `${dotCMSHost || ''}${__TINYMCE_PATH_ON_DOTCMS__}`;
                             }
                         }
                     ], template: "@if (isEditMode) {\n    <editor\n        #tinyEditor\n        [init]=\"init\"\n        [initialValue]=\"content\"\n        (onMouseDown)=\"onMouseDown($event)\"\n        (onFocusOut)=\"onFocusOut()\" />\n}\n", styles: [":host ::ng-deep .mce-content-body:not(.mce-edit-focus):hover{outline:2px solid #006ce7;border-radius:4px}\n"] }]
@@ -1296,7 +1275,7 @@ class ContentletComponent {
             const contentlet = this.$contentlet();
             if (!contentlet || !this.$isDevMode())
                 return {};
-            return getDotContentletAttributes(contentlet, this.container);
+            return getDotContentletAttributes(contentlet, this.containerData.identifier);
         });
         this.identifier = null;
         this.basetype = null;
@@ -1316,7 +1295,7 @@ class ContentletComponent {
         this.title = this.$dotAttributes()['data-dot-title'];
         this.inode = this.$dotAttributes()['data-dot-inode'];
         this.type = this.$dotAttributes()['data-dot-type'];
-        this.containerAttribute = this.$dotAttributes()['data-dot-container'];
+        this.containerAttribute = JSON.stringify(this.containerData);
         this.onNumberOfPages = this.$dotAttributes()['data-dot-on-number-of-pages'];
         this.styleAttribute = this.$style();
     }
@@ -1340,7 +1319,7 @@ class ContentletComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContentletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ContentletComponent, isStandalone: true, selector: "dotcms-contentlet", inputs: { contentlet: "contentlet", container: "container" }, host: { properties: { "attr.data-dot-object": "this.dotObject", "attr.data-dot-identifier": "this.identifier", "attr.data-dot-basetype": "this.basetype", "attr.data-dot-title": "this.title", "attr.data-dot-inode": "this.inode", "attr.data-dot-type": "this.type", "attr.data-dot-container": "this.containerAttribute", "attr.data-dot-on-number-of-pages": "this.onNumberOfPages", "style": "this.styleAttribute" } }, viewQueries: [{ propertyName: "contentletRef", first: true, predicate: ["contentletRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ContentletComponent, isStandalone: true, selector: "dotcms-contentlet", inputs: { contentlet: "contentlet", containerData: "containerData" }, host: { properties: { "attr.data-dot-object": "this.dotObject", "attr.data-dot-identifier": "this.identifier", "attr.data-dot-basetype": "this.basetype", "attr.data-dot-title": "this.title", "attr.data-dot-inode": "this.inode", "attr.data-dot-type": "this.type", "attr.data-dot-container": "this.containerAttribute", "attr.data-dot-on-number-of-pages": "this.onNumberOfPages", "style": "this.styleAttribute" } }, viewQueries: [{ propertyName: "contentletRef", first: true, predicate: ["contentletRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         @if ($UserComponent()) {
             <ng-container
                 *ngComponentOutlet="
@@ -1378,7 +1357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }], propDecorators: { contentlet: [{
                 type: Input,
                 args: [{ required: true }]
-            }], container: [{
+            }], containerData: [{
                 type: Input,
                 args: [{ required: true }]
             }], contentletRef: [{
@@ -1461,10 +1440,10 @@ class ContainerComponent {
             <dotcms-empty-container />
         } @else {
             @for (contentlet of $contentlets(); track contentlet.identifier) {
-                <dotcms-contentlet [contentlet]="contentlet" [container]="container.identifier" />
+                <dotcms-contentlet [contentlet]="contentlet" [containerData]="$containerData()!" />
             }
         }
-    `, isInline: true, dependencies: [{ kind: "component", type: ContainerNotFoundComponent, selector: "dotcms-container-not-found", inputs: ["identifier"] }, { kind: "component", type: EmptyContainerComponent, selector: "dotcms-empty-container" }, { kind: "component", type: ContentletComponent, selector: "dotcms-contentlet", inputs: ["contentlet", "container"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: ContainerNotFoundComponent, selector: "dotcms-container-not-found", inputs: ["identifier"] }, { kind: "component", type: EmptyContainerComponent, selector: "dotcms-empty-container" }, { kind: "component", type: ContentletComponent, selector: "dotcms-contentlet", inputs: ["contentlet", "containerData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContainerComponent, decorators: [{
             type: Component,
@@ -1479,7 +1458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             <dotcms-empty-container />
         } @else {
             @for (contentlet of $contentlets(); track contentlet.identifier) {
-                <dotcms-contentlet [contentlet]="contentlet" [container]="container.identifier" />
+                <dotcms-contentlet [contentlet]="contentlet" [containerData]="$containerData()!" />
             }
         }
     `,
@@ -1652,9 +1631,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 type: Input
             }] } });
 
+class DotCMSEditablePageService {
+    /**
+     * Subject that emits the current editable page asset or null.
+     * Used internally to track changes to the page data.
+     *
+     * @private
+     * @type {Subject<DotCMSEditablePage | null>}
+     */
+    #pageAssetSubject = new Subject();
+    /**
+     * Observable stream of the page asset changes.
+     * Exposes the pageAssetSubject as an Observable for subscribers.
+     *
+     * @private
+     * @type {Observable<DotCMSEditablePage | null>}
+     */
+    #pageAsset$ = this.#pageAssetSubject.asObservable();
+    /**
+     * Listens for changes to an editable page and returns an Observable that emits the updated page data.
+     * This method initializes the UVE (Universal Visual Editor) and sets up subscriptions to track content changes.
+     *
+     * @example
+     * ```ts
+     * // Import the service
+     * import { DotCMSEditablePageService } from '@dotcms/angular';
+     *
+     * // Inject the service
+     * constructor(private editablePageService: DotCMSEditablePageService) {}
+     *
+     * // Get the page data from your API call
+     * const page = await client.page.get('/');
+     *
+     * // Listen for changes
+     * const subscription = this.editablePageService.listen(page).subscribe(updatedPage => {
+     *   if (updatedPage) {
+     *     // Handle updated page data
+     *     console.log('Page updated:', updatedPage);
+     *   }
+     * });
+     *
+     * // When done listening, unsubscribe
+     * subscription.unsubscribe();
+     * ```
+     *
+     * @param pageAsset Optional initial page data
+     * @returns Observable that emits the updated page data or null
+     */
+    listen(pageAsset) {
+        if (!getUVEState()) {
+            return of(pageAsset || null);
+        }
+        const pageURI = pageAsset?.page?.pageURI ?? '/';
+        initUVE(pageAsset);
+        updateNavigation(pageURI);
+        const unsubscribeUVEChanges = this.#listenUVEChanges();
+        return this.#pageAsset$.pipe(finalize(() => {
+            unsubscribeUVEChanges();
+        }));
+    }
+    /**
+     * Sets up a subscription to listen for UVE content changes and updates the page asset subject.
+     * This is an internal method used by listenEditablePage() to handle UVE events.
+     *
+     * @returns {UVEUnsubscribeFunction} Function to unsubscribe from the UVE content changes
+     * @private
+     */
+    #listenUVEChanges() {
+        const { unsubscribe } = createUVESubscription(UVEEventType.CONTENT_CHANGES, (payload) => {
+            this.#pageAssetSubject.next(payload);
+        });
+        return unsubscribe;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSEditablePageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSEditablePageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSEditablePageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DotCMSBlockEditorRendererComponent, DotCMSEditableTextComponent, DotCMSLayoutBodyComponent, DotCMSShowWhenDirective, provideDotCMSImageLoader };
+export { DotCMSBlockEditorRendererComponent, DotCMSEditablePageService, DotCMSEditableTextComponent, DotCMSLayoutBodyComponent, DotCMSShowWhenDirective, provideDotCMSImageLoader };
 //# sourceMappingURL=dotcms-angular-next.mjs.map