Merging 23 03 to master (#24470)

* Update release version for dotcms-ui and dotcms-webcomponents * Modify dotcmsReleaseVersion to 23.03, coreWebReleaseVersion, webComponentsReleaseVersion to rc and dot-cicd branch version to release-23.03 * Update branch in git submodule to release-23.03 * Excluding from triggering test at folder: dotCMS/src/main/webapp/html * #23977 Block editor freeze scroll on tippy menus show (#24180) * dev: freeze scroll on show forms #23977 * clean up * refactor * clean up v2 * feedback * clean up * #24172 Refresh Page portlet's data when site changed (#24175) * #24031 fix block editor not saving (#24222) * Fix #24032 Bring it to 22.03 (#24229) * Fix #24032 Bring it to 22.03 * Build de lib --------- Co-authored-by: Manuel Rojas <manuel.rojas.21@gmail.com> * #24240 Fix data-access tests in 23.03 (#24244) * #24240 fix test cases * #24240 fix lint * fire release docker image generation * #24221 fix Snapshots should be displayed when the language is changed (#24234) * Fix #23449 show dotAssets in folder listing * Bock Editor: Allow user to insert videos from local files#23863 (#24248) * dev: remove fileSize limit and fit the video in the block editor #23863 * clean up * Fix 24032: Adding for Internal QA (#24255) * #24032 Adding Fix for Internal QA * #24032 Adding PR Feedback * #24032 Adding PR Feedback * #24032 Adding PR Feedback * #24032 Logging error * dotCMS/core#issue-20432 adding const * dotCMS/core#issue-20432 adding const * #24032 validation schema * Adding empty extensions * Adding empty extensions * Get all modules no actions required * Adding optional validation for actions * Adding optional validation for actions * Adding id insted of name * Adding Type for promise * Adding dot-cms-block-editor * Adding lock file --------- Co-authored-by: Freddy Montes <751424+fmontes@users.noreply.github.com> * #22151 make the message better (#24041) * #22151 make the message better * #22151 hides token button if aws * #24173 Create dialog for 'Create Page' button (#24215) * #24173 Create dialog for 'Create Page' button * #24173 Create dialog for 'Create Page' button - tests * #24173 Create dialog for 'Create Page' button - feedback * #24173 Create dialog for 'Create Page' button - more feedback * #23901 fixes the git hash resolution (#23902) * #23889 fixed content permission load issue (#24296) * #24308 Can't search for contentlets in edit page palette (#24316) * #24308 fixed contentlets search * #24308 refactor test case * #24308 refactor code * #24243 fixed squash between hint icon and label (#24298) * dev: update block editor (#24323) * [Issue-23863]: Fix #23863 Max Dimensions for Videos and Images (#24338) * #23863 adding fix for max dimensions * Adding editor * Fix label --------- Co-authored-by: Freddy Montes <751424+fmontes@users.noreply.github.com> * mockPrintWriter (#24352) * #24263 prevent empty save block editor field (#24342) * Fix #24230 Block editor markdown content with javascript code is breaking the app (#24359) * #24230 * #24230 clean up * #24230 moving logic to the JSP * [Issue 24370] block editor crashing with allowed blocks (#24375) * #24370 Fixing undefined this * #24370 Fixing undefined this * Fix #23863 block editor allow user to insert videos from local files fix size (#24374) * dev: prevent close form while uploading asset #23863 * fix: large videos preview * clean up * update block editor * feedback * dev: update dotcms-block-editor.js file * Block Editor: Allow users to insert videos from external sources#23861 (#24409) * dev: validate video url * dev: add video validation #23861 * clean up * fix merge conflicts * update dotcms-block-editor.js * dev: add support link to unknown errors * Update core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-external-asset/utils/index.ts * Update core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-external-asset/utils/index.ts * update dotcms-block-editor.js --------- Co-authored-by: Freddy Montes <751424+fmontes@users.noreply.github.com> * Fix #24361 block editor code block should not show suggestions or placeholder (#24403) * #24361 Blocking suggestions and placeholder * #24361 Blocking suggestions and placeholder * #24361 Blocking suggestions and placeholder * #24361 Blocking suggestions and placeholder * build file --------- Co-authored-by: Freddy Montes <751424+fmontes@users.noreply.github.com> * #24422 fixes render * Update LTS check * Fix #23863 let user cancel upload (#24417) * dev: let user cancel upload #23863 * update dotcms-block-editor.js * clean up * feedback * update dotcms-block-editor.js * dev: upload automatically after selecting the video * Fix #24263: get the correct input element for block editor (#24429) * Fix #23449 Filter does not work on the image selector for image fields * Moved code to a new branch * Fix for the DB query * Fixed failing ITs also addressed the PR feedback * Added javadoc * Fixed the failing test * Fixed some ITs * Fix postman tests * Fixed postman tests * Addressed PR feedback * Making sonar happy * Adding more code changes. * Removed unnecessary file * Fixed luceneQuery to fix failing ITs * Adding `showOnMenu` term to lucene query. * Updating reindex policy in Integration Test to wait for the ES reindex to be done when saving the test files. * Adding temporary logging to the Integration Test * Force indexation. * Print more info. * Removing `SYSTEM_HOST` from DB query. * Fixing Integration Test. --------- Co-authored-by: Jose Castro <jose.castro@dotcms.com> * Fix #24299 now the get dependencies do not throw an exception when the story block value is not a json (#24439) * Bock Editor: Allow user to insert videos from local files #23863 (#24451) * dev: support video file and dotAsset #23863 * update dotcms-block-editor.js file * dev: update label to Library and dotcms-block-editor.js file * Block editor value [Object, object] fix (#24474) * Updating branch references * dev: rename video node (#24477) * dev: restore data mock time (#24478) * Fix conflict * Fix lock * Point to master * Fix lock * Fixing merging conflict. --------- Co-authored-by: victoralfaro-dotcms <victor.alfaro@dotcms.com> Co-authored-by: Rafael Velazco <rjvelazco21@gmail.com> Co-authored-by: alfredo-dotcms <37185433+alfredo-dotcms@users.noreply.github.com> Co-authored-by: Freddy Montes <751424+fmontes@users.noreply.github.com> Co-authored-by: Manuel Rojas <manuel.rojas.21@gmail.com> Co-authored-by: zulqarnainvd <113915849+zulqarnainvd@users.noreply.github.com> Co-authored-by: hassan-mustafa-baig <111717530+hassan-mustafa-baig@users.noreply.github.com> Co-authored-by: Will Ezell <will@dotcms.com> Co-authored-by: erickgonzalez <erick.gonzalez@dotcms.com> Co-authored-by: Jonathan <jonathan.sanchez@dotcms.com>
dotCMS · Mar 28, 2023 · da2f8b1 · da2f8b1
1 parent 633bb94
commit da2f8b1
Show file tree

Hide file tree

Showing 48 changed files with 934 additions and 677 deletions.
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.spec.ts
@@ -343,4 +343,10 @@ describe('DotPagesComponent', () => {
         switchSiteSubject.next(mockSites[1]); // switching the site
         expect(store.getPages).toHaveBeenCalledWith({ offset: 0 });
     });
+
+    it('should reload portlet only when the site change', () => {
+        switchSiteSubject.next(mockSites[0]); // setting the site
+        switchSiteSubject.next(mockSites[1]); // switching the site
+        expect(store.getPages).toHaveBeenCalledWith({ offset: 0 });
+    });
 });
diff --git a/...web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.scss b/...web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.scss
@@ -262,6 +262,12 @@
             width: auto;
         }
 
+        .horizontal-video,
+        .node-image {
+            height: auto;
+            max-width: 50%;
+        }
+
         .node-container {
             margin-bottom: $spacing-3;
         }

diff --git a/...bs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.stories.ts b/...bs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.stories.ts
@@ -2,6 +2,7 @@ import { of } from 'rxjs';
 
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { ListboxModule } from 'primeng/listbox';
@@ -45,6 +46,7 @@ export const primary = () => ({
             BlockEditorModule,
             OrderListModule,
             ListboxModule,
+            BrowserModule,
             BrowserAnimationsModule
         ],
         providers: [

diff --git a/core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts b/core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts
@@ -14,7 +14,7 @@ import {
 
 import { debounceTime, take, takeUntil } from 'rxjs/operators';
 
-import { AnyExtension, Content, Editor } from '@tiptap/core';
+import { AnyExtension, Content, Editor, JSONContent } from '@tiptap/core';
 import CharacterCount, { CharacterCountStorage } from '@tiptap/extension-character-count';
 import { Level } from '@tiptap/extension-heading';
 import { Highlight } from '@tiptap/extension-highlight';
@@ -46,7 +46,8 @@ import {
     BubbleAssetFormExtension,
     ImageUpload,
     FreezeScroll,
-    FREEZE_SCROLL_KEY
+    FREEZE_SCROLL_KEY,
+    NodeTypes
 } from '../../extensions';
 import { ContentletBlock, ImageNode, VideoNode } from '../../nodes';
 import {
@@ -97,7 +98,7 @@ export class DotBlockEditorComponent implements OnInit, OnDestroy {
 
         this.setEditorJSONContent(content);
     }
-    @Output() valueChange = new EventEmitter<string>();
+    @Output() valueChange = new EventEmitter<JSONContent>();
 
     editor: Editor;
     subject = new Subject();
@@ -160,7 +161,11 @@ export class DotBlockEditorComponent implements OnInit, OnDestroy {
                     .subscribe(() => this.updateChartCount());
 
                 this.editor.on('update', ({ editor }) => {
-                    this.valueChange.emit(JSON.stringify(editor.getJSON()));
+                    this.valueChange.emit(editor.getJSON());
+                });
+
+                this.editor.on('transaction', ({ editor }) => {
+                    this.freezeScroll = FREEZE_SCROLL_KEY.getState(editor.view.state)?.freezeScroll;
                 });
 
                 this.editor.on('transaction', ({ editor }) => {
@@ -397,10 +402,14 @@ export class DotBlockEditorComponent implements OnInit, OnDestroy {
      * @memberof DotBlockEditorComponent
      */
     private placeholder({ node }) {
-        if (node.type.name === 'heading') {
+        if (node.type.name === NodeTypes.HEADING) {
             return `${toTitleCase(node.type.name)} ${node.attrs.level}`;
         }
 
+        if (node.type.name === NodeTypes.CODE_BLOCK) {
+            return;
+        }
+
         return 'Type "/" for commmands';
     }
 

diff --git a/core-web/libs/block-editor/src/lib/extensions/action-button/actions-menu.extension.ts b/core-web/libs/block-editor/src/lib/extensions/action-button/actions-menu.extension.ts
@@ -244,7 +244,11 @@ export const ActionsMenu = (
             findParentNode(editor.view.state.selection.$from, [NodeTypes.TABLE_CELL])?.type.name ===
             NodeTypes.TABLE_CELL;
 
-        shouldShow = !isTableCell;
+        const isCodeBlock =
+            findParentNode(editor.view.state.selection.$from, [NodeTypes.CODE_BLOCK])?.type.name ===
+            NodeTypes.CODE_BLOCK;
+
+        shouldShow = !isTableCell && !isCodeBlock;
     }
 
     function setUpSuggestionComponent(editor: Editor, range: Range) {
@@ -274,7 +278,7 @@ export const ActionsMenu = (
 
     function getItems({ allowedBlocks = [], editor, range }): DotMenuItem[] {
         const items = allowedBlocks.length
-            ? suggestionOptions.filter((item) => this.allowedBlocks.includes(item.id))
+            ? suggestionOptions.filter((item) => allowedBlocks.includes(item.id))
             : suggestionOptions;
 
         const customItems = [...items, ...getCustomActions(customBlocks)];

diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.html b/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.html
@@ -1,6 +1,11 @@
 <div class="tabview-container">
     <p-tabView>
-        <p-tabPanel [cache]="false" header="dotCMS" leftIcon="pi pi-images">
+        <p-tabPanel
+            [cache]="false"
+            [disabled]="disableTabs"
+            header="Library"
+            leftIcon="pi pi-images"
+        >
             <ng-template pTemplate="content">
                 <div class="wrapper">
                     <dot-asset-search
@@ -11,17 +16,29 @@
                 </div>
             </ng-template>
         </p-tabPanel>
-        <p-tabPanel [cache]="false" [header]="'Upload ' + type" leftIcon="pi pi-folder">
+        <p-tabPanel
+            [cache]="false"
+            [header]="'Upload ' + type"
+            [disabled]="disableTabs"
+            leftIcon="pi pi-folder"
+        >
             <ng-template pTemplate="content">
                 <div class="wrapper">
                     <dot-upload-asset
                         [type]="type"
                         (uploadedFile)="onSelectAsset($event)"
+                        (preventClose)="onPreventClose($event)"
+                        (hide)="onHide($event)"
                     ></dot-upload-asset>
                 </div>
             </ng-template>
         </p-tabPanel>
-        <p-tabPanel [cache]="false" [header]="type + ' URL'" leftIcon="pi pi-link">
+        <p-tabPanel
+            [cache]="false"
+            [header]="type + ' URL'"
+            [disabled]="disableTabs"
+            leftIcon="pi pi-link"
+        >
             <ng-template pTemplate="content">
                 <div class="wrapper">
                     <dot-external-asset

diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.scss b/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.scss
@@ -14,12 +14,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 25rem;
+    height: 100%;
     width: 100%;
 }
 
 :host::ng-deep {
     .p-tabview-nav {
         padding: 0 $spacing-5;
     }
+
+    .p-tabview-panel {
+        height: 25rem;
+    }
 }
diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.ts b/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.component.ts
@@ -14,4 +14,13 @@ export class AssetFormComponent {
     @Input() languageId = DEFAULT_LANG_ID;
     @Input() type: EditorAssetTypes;
     @Input() onSelectAsset: (payload: DotCMSContentlet | string) => void;
+    @Input() preventClose: (value: boolean) => void;
+    @Input() onHide: (value: boolean) => void;
+
+    public disableTabs = false;
+
+    public onPreventClose(value) {
+        this.preventClose(value);
+        this.disableTabs = value;
+    }
 }
diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.extension.ts b/core-web/libs/block-editor/src/lib/extensions/asset-form/asset-form.extension.ts
@@ -56,6 +56,7 @@ export const BubbleAssetFormExtension = (viewContainerRef: ViewContainerRef) =>
     let formTippy: Instance | undefined;
     let component: ComponentRef<AssetFormComponent>;
     let element: Element;
+    let preventClose = false;
 
     function onStart({ editor, type, getPosition }: StartProps) {
         setUpTippy(editor);
@@ -70,6 +71,10 @@ export const BubbleAssetFormExtension = (viewContainerRef: ViewContainerRef) =>
     }
 
     function onHide(editor): void {
+        if (preventClose) {
+            return;
+        }
+
         editor.commands.closeAssetForm();
         formTippy?.hide();
         component?.destroy();
@@ -96,13 +101,26 @@ export const BubbleAssetFormExtension = (viewContainerRef: ViewContainerRef) =>
         component.instance.languageId = editor.storage.dotConfig.lang;
         component.instance.type = type;
         component.instance.onSelectAsset = (payload) => {
+            onPreventClose(editor, false);
             editor.chain().insertAsset({ type, payload }).addNextLine().closeAssetForm().run();
         };
 
+        component.instance.preventClose = (value) => onPreventClose(editor, value);
+
+        component.instance.onHide = () => {
+            onPreventClose(editor, false);
+            onHide(editor);
+        };
+
         element = component.location.nativeElement;
         component.changeDetectorRef.detectChanges();
     }
 
+    function onPreventClose(editor, value) {
+        preventClose = value;
+        editor.setOptions({ editable: !value });
+    }
+
     return BubbleMenu.extend<unknown>({
         name: 'bubbleAssetForm',
 

diff --git a/...lib/extensions/asset-form/components/dot-external-asset/dot-external-asset.component.html b/...lib/extensions/asset-form/components/dot-external-asset/dot-external-asset.component.html
@@ -12,9 +12,11 @@
         />
     </div>
     <div class="footer">
-        <span class="error-message" [class.hide]="!form.controls['url'].invalid || form.pristine"
-            >Enter a valid url</span
-        >
-        <button [disabled]="form.invalid" type="submit" pButton>Insert</button>
+        <span
+            class="error-message"
+            [innerHTML]="error || 'Enter a valid url'"
+            [class.hide]="!isInvalid || form.pristine"
+        ></span>
+        <button [disabled]="form.invalid || disableAction" type="submit" pButton>Insert</button>
     </div>
 </form>
diff --git a/...lib/extensions/asset-form/components/dot-external-asset/dot-external-asset.component.scss b/...lib/extensions/asset-form/components/dot-external-asset/dot-external-asset.component.scss
@@ -29,6 +29,7 @@
     color: $red;
     font-size: $font-size-sm;
     text-align: left;
+    max-width: 30rem;
 }
 
 .hide {

diff --git a/...c/lib/extensions/asset-form/components/dot-external-asset/dot-external-asset.component.ts b/...c/lib/extensions/asset-form/components/dot-external-asset/dot-external-asset.component.ts
@@ -5,12 +5,15 @@ import {
     Output,
     ViewChild,
     ElementRef,
-    Input
+    Input,
+    ChangeDetectorRef
 } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { EditorAssetTypes } from '@dotcms/dotcms-models';
 
+import { handleLoadVideoError } from './utils';
+
 const regexURL =
     '^((http|https)://)[-a-zA-Z0-9@:%._\\+~#?&//=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%._\\+~#?&//=]*)$';
 
@@ -28,16 +31,33 @@ export class DotExternalAssetComponent {
     type: EditorAssetTypes;
 
     form: FormGroup;
+    disableAction = false;
 
-    get placerHolder() {
+    get placerHolder(): string {
         return `https://example.com/${this.type === 'video' ? 'video.mp4' : 'image.jpg'}`;
     }
 
-    constructor(private fb: FormBuilder) {
+    get error(): string {
+        return this.form.controls.url?.errors?.message || '';
+    }
+
+    get isInvalid(): boolean {
+        return this.form.controls.url?.invalid;
+    }
+
+    constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {
         this.form = this.fb.group({
             url: ['', [Validators.required, Validators.pattern(regexURL)]]
         });
 
+        this.form.valueChanges.subscribe(({ url }) => {
+            if (this.type === 'video' && !this.isInvalid) {
+                this.tryToPlayVideo(url);
+
+                return;
+            }
+        });
+
         requestAnimationFrame(() => this.input.nativeElement.focus());
     }
 
@@ -50,4 +70,29 @@ export class DotExternalAssetComponent {
     onSubmit({ url }: { url: string }) {
         this.addAsset.emit(url);
     }
+
+    /**
+     *
+     * Try to play a video by url but if it fails return the error
+     * @private
+     * @param {string} url
+     * @memberof DotExternalAssetComponent
+     */
+    private tryToPlayVideo(url: string): void {
+        const video = document.createElement('video') as HTMLVideoElement;
+
+        this.disableAction = true;
+
+        video.addEventListener('error', (e) => {
+            this.form.controls.url.setErrors({ message: handleLoadVideoError(e) });
+            this.cd.detectChanges();
+        });
+
+        video.addEventListener('canplay', () => {
+            this.form.controls.url.setErrors(null);
+            this.disableAction = false;
+            this.cd.detectChanges();
+        });
+        video.src = `${url}#t=0.1`;
+    }
 }
diff --git a/...s/block-editor/src/lib/extensions/asset-form/components/dot-external-asset/utils/index.ts b/...s/block-editor/src/lib/extensions/asset-form/components/dot-external-asset/utils/index.ts
@@ -0,0 +1,24 @@
+/**
+ * Handle the error of the video
+ *
+ * @param {*} e
+ * @return {*}  {string}
+ */
+export const handleLoadVideoError = (e): string => {
+    switch (e.target.error.code) {
+        case e.target.error.MEDIA_ERR_ABORTED:
+            return 'You aborted the video playback.';
+
+        case e.target.error.MEDIA_ERR_NETWORK:
+            return 'A network error caused the video download to fail part-way.';
+
+        case e.target.error.MEDIA_ERR_DECODE:
+            return 'Video playback aborted due to browser compatibility issues. Try a different browser or visit <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats#media_file_types_and_codecs">MDN Video Support</a> for more information.';
+
+        case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+            return 'Invalid URL. Please provide a URL to a .mp4, .webm, or .ogv video file. For more info, visit:  <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#common_container_formats" target="_blank">MDN Video Format Support</a>';
+
+        default:
+            return 'An unknown error occurred. <a href="https://www.dotcms.com/services/support/" target="_blank">Please contact support</a>';
+    }
+};