#22857 merge master done

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,32 +7,37 @@ assignees: ''
 
 ---
 
-**Describe the bug**
+### Describe the bug
 A clear and concise description of what the bug is.
 
-**To Reproduce**
+### To Reproduce
 Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
-**Expected behavior**
+### Expected behavior
 A clear and concise description of what you expected to happen.
 
-**Screenshots**
+### Screenshots
 If applicable, add screenshots to help explain your problem.
 
-**Desktop (please complete the following information):**
+### Desktop (please complete the following information):
  - OS: [e.g. iOS]
  - Browser [e.g. chrome, safari]
  - Version [e.g. 22]
 
-**Smartphone (please complete the following information):**
+### Smartphone (please complete the following information):
  - Device: [e.g. iPhone6]
  - OS: [e.g. iOS8.1]
  - Browser [e.g. stock browser, safari]
  - Version [e.g. 22]
 
-**Additional context**
+### Additional context
 Add any other context about the problem here.
+
+### Acceptance criteria
+- Use
+- Bullet
+- Points

.github/ISSUE_TEMPLATE/feature_request.md

@@ -7,14 +7,19 @@ assignees: ''
 
 ---
 
-**Is your feature request related to a problem? Please describe.**
+### Is your feature request related to a problem? Please describe.
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 
-**Describe the solution you'd like**
+### Describe the solution you'd like
 A clear and concise description of what you want to happen.
 
-**Describe alternatives you've considered**
+### Describe alternatives you've considered
 A clear and concise description of any alternative solutions or features you've considered.
 
-**Additional context**
+### Additional context
 Add any other context or screenshots about the feature request here.
+
+### Acceptance criteria
+- Use
+- Bullet
+- Points

README.md

@@ -1,35 +1,34 @@
+<img src="https://dotcms.com/dA/99fe3769-d649/256w/dotcms.png" title="dotcms java content management system">
 
-<img src="https://dotcms.com/dA/99fe3769-d649/256w/dotcms.png" title="dotcms java content management system"> 
-
-dotCMS open source hybrid content management system (CMS) that has been designed to manage and deliver personalized, permission-based content experiences across multiple channels.  dotCMS can can serve as a headless content hub and also as a platform for sites, mobile apps, mini-sites, portals, intranets.  dotCMS is used everywhere, from running small sites to powering multi-node installations for governments, Fortune 100 companies, Universities and Global Brands. Written in java dotCMS environment can scale to support hundreds of editors managing thousands of sites with millions of content objects.  
+dotCMS open source hybrid content management system (CMS) that has been designed to manage and deliver personalized, permission-based content experiences across multiple channels. dotCMS can can serve as a headless content hub and also as a platform for sites, mobile apps, mini-sites, portals, intranets. dotCMS is used everywhere, from running small sites to powering multi-node installations for governments, Fortune 100 companies, Universities and Global Brands. Written in java dotCMS environment can scale to support hundreds of editors managing thousands of sites with millions of content objects.
 
 dotCMS is available for download or as a cloud based product.
 
+-   Download dotCMS: https://dotcms.com/download
+-   dotCMS Enterprise Cloud: https://dotcms.com/cms-platform/cloud-cms/
 
-- Download dotCMS: https://dotcms.com/download
-- dotCMS Enterprise Cloud: https://dotcms.com/cms-platform/cloud-cms/
 ---
 
 ## Licensing
-dotCMS comes in multiple editions and as such is dual licensed.  The dotCMS Community Edition is licensed under the GPL 3.0 and is freely available for download, customization and deployment for use within organizations of all stripes.  dotCMS Enterprise Editions (EE) adds a number of enterprise features and is available via a supported, indemnified commercial license from dotCMS.  For the differences between the editions, see [the feature page](http://dotcms.com/cms-platform/features).
+
+dotCMS comes in multiple editions and as such is dual licensed. The dotCMS Community Edition is licensed under the GPL 3.0 and is freely available for download, customization and deployment for use within organizations of all stripes. dotCMS Enterprise Editions (EE) adds a number of enterprise features and is available via a supported, indemnified commercial license from dotCMS. For the differences between the editions, see [the feature page](http://dotcms.com/cms-platform/features).
 
 ## Contributing
 
-GitHub pull requests are the preferred method to contribute code to dotCMS.  Before any pull requests can be accepted, an automated tool will ask you to agree to the [dotCMS Contributor's Agreement](https://gist.github.com/wezell/85ef45298c48494b90d92755b583acb3).
+GitHub pull requests are the preferred method to contribute code to dotCMS. Before any pull requests can be accepted, an automated tool will ask you to agree to the [dotCMS Contributor's Agreement](https://gist.github.com/wezell/85ef45298c48494b90d92755b583acb3).
 
 ## Requirements
 
 For a complete list of requirements, see [this page](http://dotcms.com/docs/latest/dotcms-technology-requirements).
 
 ## Getting Help
 
-| Source        | Location                                               |
-| ------------- |--------------------------------------------------------|
-| Installation | [Installation](https://dotcms.com/docs/latest/installation)                  |
-| Documentation | [Documentation](https://dotcms.com/docs/latest/table-of-contents)                  |
-| Videos | [Helpful Videos](http://dotcms.com/videos/)                  |
-| Code Examples | [Codeshare](https://dotcms.com/codeshare/)                  |
-| Forums/Listserv        | [via Google Groups](https://groups.google.com/forum/#!forum/dotCMS) |
-| Twitter       | @dotCMS                         |
-| Main Site | [dotCMS.com](https://dotcms.com/)                  |
-
+| Source          | Location                                                            |
+| --------------- | ------------------------------------------------------------------- |
+| Installation    | [Installation](https://dotcms.com/docs/latest/installation)         |
+| Documentation   | [Documentation](https://dotcms.com/docs/latest/table-of-contents)   |
+| Videos          | [Helpful Videos](http://dotcms.com/videos/)                         |
+| Code Examples   | [Codeshare](https://dotcms.com/codeshare/)                          |
+| Forums/Listserv | [via Google Groups](https://groups.google.com/forum/#!forum/dotCMS) |
+| Twitter         | @dotCMS                                                             |
+| Main Site       | [dotCMS.com](https://dotcms.com/)                                   |

core-web/apps/dotcms-block-editor/project.json

@@ -57,7 +57,7 @@
                         {
                             "type": "anyComponentStyle",
                             "maximumWarning": "200kb",
-                            "maximumError": "200kb"
+                            "maximumError": "250kb"
                         }
                     ]
                 }

core-web/apps/dotcms-block-editor/src/app/app.component.html

@@ -1 +1 @@
-<dotcms-block-editor></dotcms-block-editor>
+<dot-block-editor></dot-block-editor>

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

@@ -8,15 +8,13 @@ import { CommonModule } from '@angular/common';
 import { OrderListModule } from 'primeng/orderlist';
 import { ListboxModule } from 'primeng/listbox';
 
-import { DotBlockEditorComponent } from './dot-block-editor/dot-block-editor.component';
-
 import { createCustomElement } from '@angular/elements';
 import { AppComponent } from './app.component';
-import { BlockEditorModule } from '@dotcms/block-editor';
+import { DotBlockEditorComponent, BlockEditorModule } from '@dotcms/block-editor';
 import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
-    declarations: [AppComponent, DotBlockEditorComponent],
+    declarations: [AppComponent],
     imports: [
         BrowserModule,
         BrowserAnimationsModule,

core-web/apps/dotcms-ui/src/app/api/services/dot-custom-event-handler/dot-custom-event-handler.service.ts

@@ -11,6 +11,7 @@ import { DotContentletEditorService } from '@components/dot-contentlet-editor/se
 import { DotNavLogoService } from '@services/dot-nav-logo/dot-nav-logo.service';
 import { DotGenerateSecurePasswordService } from '@services/dot-generate-secure-password/dot-generate-secure-password.service';
 import { DotEventsService } from '@services/dot-events/dot-events.service';
+import { DotContentCompareEvent } from '@components/dot-content-compare/dot-content-compare.component';
 
 export const COMPARE_CUSTOM_EVENT = 'compare-contentlet';
 
@@ -117,6 +118,9 @@ export class DotCustomEventHandlerService {
     }
 
     private openCompareDialog($event: CustomEvent): void {
-        this.dotEventsService.notify(COMPARE_CUSTOM_EVENT, $event.detail.data);
+        this.dotEventsService.notify<DotContentCompareEvent>(
+            COMPARE_CUSTOM_EVENT,
+            $event.detail.data
+        );
     }
 }

core-web/apps/dotcms-ui/src/app/api/services/dot-events/dot-events.service.spec.ts

@@ -21,7 +21,7 @@ describe('DotEventsService', () => {
             randomEvent++;
         });
 
-        dotEventsService.notify('test', [1, 2, 3]);
+        dotEventsService.notify<number[]>('test', [1, 2, 3]);
         dotEventsService.notify('randomEvent');
 
         expect(timesCalled).toEqual(1);
@@ -34,7 +34,7 @@ describe('DotEventsService', () => {
             numbersArray = value.data as number[];
         });
 
-        dotEventsService.notify('test', [1, 2, 3]);
+        dotEventsService.notify<number[]>('test', [1, 2, 3]);
 
         expect(numbersArray).toEqual([1, 2, 3]);
     });

core-web/apps/dotcms-ui/src/app/api/services/dot-events/dot-events.service.ts

@@ -2,34 +2,35 @@ import { filter } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { DotEvent } from '@models/dot-event/dot-event';
-import { DotContentCompareEvent } from '@components/dot-content-compare/dot-content-compare.component';
-import { DotGlobalMessage } from '@models/dot-global-message/dot-global-message.model';
 
 /**
  * Provide a Global service to Subscribe to custom events and notify subscribers when those events occur.
  * @DotEventsService
  */
 @Injectable()
 export class DotEventsService {
-    private subject: Subject<DotEvent> = new Subject();
+    private subject: Subject<DotEvent<unknown>> = new Subject();
 
     /**
      * Method to register a listener of a specif event.
      *
      * @param string eventName
-     * @returns Observable<DotEvent>
+     * @returns Observable<DotEvent<T>>
      */
-    listen(eventName: string): Observable<DotEvent> {
+    listen<T>(eventName: string): Observable<DotEvent<T>> {
         // TODO: need to make this method to support multiple events
-        return this.subject.asObservable().pipe(filter((res) => res.name === eventName));
+        return this.subject
+            .asObservable()
+            .pipe(filter((res: DotEvent<T>) => res.name === eventName));
     }
 
     /**
      * Method to notify subscribers of a specific event.
      *
-     * @param DotEvent dotEvent
+     * @param string name
+     * @param <T> data
      */
-    notify(name: string, data?: DotGlobalMessage | DotContentCompareEvent | number[]): void {
+    notify<T>(name: string, data?: T): void {
         this.subject.next({
             name: name,
             data: data

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-block-editor-sidebar/dot-block-editor-sidebar.component.html

@@ -0,0 +1,42 @@
+<p-sidebar
+    #sidebar
+    [blockScroll]="true"
+    [visible]="!!blockEditorInput"
+    position="right"
+    [dismissible]="false"
+    [showCloseIcon]="false"
+    [closeOnEscape]="false"
+    (onHide)="sidebar.destroyModal(); closeSidebar()"
+    data-testid="sidebar"
+>
+    <div class="container" *ngIf="blockEditorInput">
+        <dot-block-editor
+            #blockEditor
+            [lang]="blockEditorInput.language"
+            [allowedBlocks]="blockEditorInput.fieldVariables.allowedBlocks"
+            [allowedContentTypes]="blockEditorInput.fieldVariables.allowedContentTypes"
+            [value]="blockEditorInput.content"
+            [customStyles]="blockEditorInput.fieldVariables.styles"
+        >
+        </dot-block-editor>
+        <footer>
+            <button
+                pButton
+                class="p-button-secondary"
+                type="button"
+                (click)="closeSidebar()"
+                [label]="'Cancel' | dm"
+                data-testid="cancelBtn"
+            ></button>
+            <button
+                [disabled]="saving"
+                [loading]="saving"
+                pButton
+                type="button"
+                (click)="saveEditorChanges()"
+                [label]="'Update' | dm"
+                data-testid="updateBtn"
+            ></button>
+        </footer>
+    </div>
+</p-sidebar>

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-block-editor-sidebar/dot-block-editor-sidebar.component.scss

@@ -0,0 +1,38 @@
+@use "libs/dot-primeng-theme-styles/src/scss/variables" as *;
+
+:host {
+    dot-block-editor {
+        height: calc(100% - 5rem);
+    }
+}
+
+::ng-deep {
+    p-sidebar {
+        .p-sidebar-right {
+            width: 50%;
+            max-width: 1040px;
+        }
+
+        .p-sidebar-content {
+            .container {
+                height: 100%;
+            }
+        }
+        .p-sidebar .p-sidebar-header {
+            padding: 0;
+        }
+    }
+    dot-block-editor .editor-wrapper {
+        height: 100% !important;
+    }
+}
+
+footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: $spacing-5;
+
+    .p-button-secondary {
+        margin-right: $spacing-3;
+    }
+}