AAE-20420 - Use latest editorjs and fix storybook (#9336)

* Use latest editorjs and fix storybook

* Remove unit with haveBeenCalled

* AAE-20420 Fix for broken tests

---------

Co-authored-by: wiktord2000 <wiktor.danielewski@hyland.com>

lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts

@@ -48,7 +48,7 @@ export class DisplayRichTextWidgetComponent extends WidgetComponent implements O
 
     ngOnInit(): void {
         /* cspell:disable-next-line */
-        this.parsedHTML = edjsHTML().parseStrict(this.field.value).join('\n');
+        this.parsedHTML = edjsHTML().parseStrict(this.field.value);
     }
 
 }

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts

@@ -46,11 +46,16 @@ describe('RichTextEditorComponent', () => {
         version: 1
     };
 
+    const whenEditorIsReady = async () => {
+        fixture.detectChanges();
+        await component.editorInstance.isReady;
+        await fixture.whenStable();
+    };
+
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             declarations: [RichTextEditorComponent]
-        })
+        }).compileComponents();
-            .compileComponents();
     });
 
     beforeEach(() => {
@@ -59,64 +64,61 @@ describe('RichTextEditorComponent', () => {
         debugElement = fixture.debugElement;
     });
 
-    it('should create', () => {
-        fixture.detectChanges();
-        expect(component).toBeTruthy();
-    });
-
     it('should render rich text editor', async () => {
-        fixture.detectChanges();
+        await whenEditorIsReady();
-        await fixture.whenStable();
         const editor = debugElement.query(By.css(cssSelectors.editorContent));
+
         expect(editor).toBeTruthy();
     });
 
     it('should generate dynamic id', async () => {
-        fixture.detectChanges();
+        await whenEditorIsReady();
-        await fixture.whenStable();
+
         expect(component.dynamicId).toContain('editorjs');
     });
 
     it('should get editorjs data by calling getEditorContent', async () => {
-        fixture.detectChanges();
+        await whenEditorIsReady();
-        await fixture.whenStable();
+
         spyOn(component.editorInstance, 'save').and.returnValue(Promise.resolve(mockEditorData) as any);
         const savedEditorData = await component.getEditorContent();
+
         expect(savedEditorData).toEqual(mockEditorData);
     });
 
     it('should destroy editor instance on ngOnDestroy', async () => {
-        fixture.detectChanges();
+        await whenEditorIsReady();
-        await fixture.whenStable();
+
         const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
         component.ngOnDestroy();
+
         expect(destroyEditorSpy).toHaveBeenCalledTimes(1);
         expect(destroyEditorSpy).toHaveBeenCalled();
     });
 
     it('should not destroy editor instance on ngOnDestroy if editor is not ready', async () => {
-        fixture.detectChanges();
+        await whenEditorIsReady();
-        await fixture.whenStable();
+
         const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
         component.isReady = false;
         component.ngOnDestroy();
+
         expect(destroyEditorSpy).not.toHaveBeenCalled();
     });
 
     it('should add readonly class if readOnly is set to true', async () => {
         component.readOnly = true;
-        fixture.detectChanges();
+        await whenEditorIsReady();
-        await fixture.whenStable();
+
         const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
         expect(editorEl.nativeElement.classList).toContain('readonly');
     });
 
     it('should not add readonly class if readOnly is set to false', async () => {
         component.readOnly = false;
-        fixture.detectChanges();
+        await whenEditorIsReady();
-        await fixture.whenStable();
+
         const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
         expect(editorEl.nativeElement.classList).not.toContain('readonly');
     });
-
 });

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.stories.ts

@@ -23,7 +23,7 @@ import { exampleData } from './mocks/rich-text-editor.mock';
 
 export default {
     component: RichTextEditorComponent,
-    title: 'Core/Rich Text Editor/Rich Text Editor',
+    title: 'Process Services Cloud/Rich Text Editor',
     decorators: [
         moduleMetadata({
             imports: [ProcessServicesCloudStoryModule, RichTextEditorModule]
@@ -51,11 +51,11 @@ export default {
 const template: Story<RichTextEditorComponent> = (args: RichTextEditorComponent) => ({
     props: args,
     template: `
-    <adf-rich-text-editor
+    <adf-cloud-rich-text-editor
         [data]=data
         [readOnly]=readOnly
         #editor >
-    </adf-rich-text-editor>
+    </adf-cloud-rich-text-editor>
     <hr/>
     <h3>Output data from editor:</h3>
     <pre>{{editor.outputData$ | async | json}}</pre>
@@ -65,17 +65,29 @@ const template: Story<RichTextEditorComponent> = (args: RichTextEditorComponent)
 export const defaultRichTextEditor = template.bind({});
 defaultRichTextEditor.args = {
     data: {
-        time: 1663761278752,
+        time : 1550476186479,
         blocks : [
             {
-                id: 'yOV_DfEQhC',
                 type : 'paragraph',
                 data : {
-                    text: 'text'
+                    text : 'The example of text that was written in <b>one of popular</b> text editors.'
+                }
+            },
+            {
+                type : 'header',
+                data : {
+                    text : 'With the header of course',
+                    level : 2
+                }
+            },
+            {
+                type : 'paragraph',
+                data : {
+                    text : 'So what do we have?'
                 }
             }
         ],
-        version: '2.25.0'
+        version : '2.29.0'
     }
 };
 

package-lock.json

@@ -24,9 +24,9 @@
         "@angular/router": "14.1.3",
         "@apollo/client": "^3.8.4",
         "@cspell/eslint-plugin": "^7.3.6",
-        "@editorjs/editorjs": "^2.26.5",
+        "@editorjs/editorjs": "^2.29.0",
-        "@editorjs/header": "2.7.0",
+        "@editorjs/header": "2.8.1",
-        "@editorjs/list": "1.8.0",
+        "@editorjs/list": "1.9.0",
         "@editorjs/underline": "1.1.0",
         "@mat-datetimepicker/core": "^10.1.1",
         "@ngx-translate/core": "^14.0.0",
@@ -38,7 +38,7 @@
         "cropperjs": "1.5.13",
         "date-fns": "^2.30.0",
         "dotenv-expand": "^5.1.0",
-        "editorjs-html": "3.4.2",
+        "editorjs-html": "3.4.3",
         "editorjs-paragraph-with-alignment": "3.0.0",
         "event-emitter": "^0.3.5",
         "material-icons": "^1.13.12",
@@ -64,7 +64,7 @@
         "@angular/compiler-cli": "14.1.3",
         "@editorjs/code": "2.8.0",
         "@editorjs/inline-code": "1.4.0",
-        "@editorjs/marker": "1.2.2",
+        "@editorjs/marker": "1.4.0",
         "@nrwl/angular": "14.8.9",
         "@nrwl/cli": "14.8.9",
         "@nrwl/eslint-plugin-nx": "14.5.4",
@@ -97,7 +97,7 @@
         "commander": "6.2.1",
         "css-loader": "^6.8.1",
         "dotenv": "16.1.3",
-        "editorjs-text-color-plugin": "1.13.1",
+        "editorjs-text-color-plugin": "2.0.3",
         "ejs": "^3.1.9",
         "eslint": "^8.47.0",
         "eslint-config-prettier": "^8.10.0",
@@ -109,7 +109,6 @@
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-rxjs": "^5.0.3",
         "eslint-plugin-unicorn": "^49.0.0",
-        "github-api": "^3.4.0",
         "graphql": "^16.8.1",
         "husky": "^7.0.4",
         "jasmine-ajax": "4.0.0",
@@ -4402,23 +4401,14 @@
       }
     },
     "node_modules/@editorjs/editorjs": {
-      "version": "2.26.5",
+      "version": "2.29.0",
-      "license": "Apache-2.0",
+      "resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.29.0.tgz",
-      "dependencies": {
+      "integrity": "sha512-w2BVboSHokMBd/cAOZn0UU328o3gSZ8XUvFPA2e9+ciIGKILiRSPB70kkNdmhHkuNS3q2px+vdaIFaywBl7wGA=="
-        "@codexteam/icons": "0.1.0",
-        "codex-notifier": "^1.1.2",
-        "codex-tooltip": "^1.0.5",
-        "html-janitor": "^2.0.4",
-        "nanoid": "^3.1.22"
-      }
-    },
-    "node_modules/@editorjs/editorjs/node_modules/@codexteam/icons": {
-      "version": "0.1.0",
-      "license": "MIT"
     },
     "node_modules/@editorjs/header": {
-      "version": "2.7.0",
+      "version": "2.8.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@editorjs/header/-/header-2.8.1.tgz",
+      "integrity": "sha512-y0HVXRP7m2W617CWo3fsb5HhXmSLaRpb9GzFx0Vkp/HEm9Dz5YO1s8tC7R8JD3MskwoYh7V0hRFQt39io/r6hA==",
       "dependencies": {
         "@codexteam/icons": "^0.0.5"
       }
@@ -4432,8 +4422,9 @@
       }
     },
     "node_modules/@editorjs/list": {
-      "version": "1.8.0",
+      "version": "1.9.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@editorjs/list/-/list-1.9.0.tgz",
+      "integrity": "sha512-BQEvZW4vi0O0dBvGNljiKxiE89vMSHoM2Tu2OzKUndoj7pY9AxqpgCh1qvwIVsJAlG4Lbt/vBFQilnoStMmI6A==",
       "dependencies": {
         "@codexteam/icons": "^0.0.4"
       }
@@ -4443,9 +4434,13 @@
       "license": "MIT"
     },
     "node_modules/@editorjs/marker": {
-      "version": "1.2.2",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@editorjs/marker/-/marker-1.4.0.tgz",
+      "integrity": "sha512-5ipEXfL44jTTRzgNp/p/YjMO7jT08S5z4V8qA3FFJTfdhKgQyM3mvP1zpdYKw47ZZpVWMCncvk5Nto3BxihEtg==",
       "dev": true,
-      "license": "MIT"
+      "dependencies": {
+        "@codexteam/icons": "^0.0.5"
+      }
     },
     "node_modules/@editorjs/underline": {
       "version": "1.1.0",
@@ -27673,14 +27668,6 @@
         "node": ">= 0.12.0"
       }
     },
-    "node_modules/codex-notifier": {
-      "version": "1.1.2",
-      "license": "MIT"
-    },
-    "node_modules/codex-tooltip": {
-      "version": "1.0.5",
-      "license": "MIT"
-    },
     "node_modules/collapse-white-space": {
       "version": "1.0.6",
       "dev": true,
@@ -30364,17 +30351,19 @@
       }
     },
     "node_modules/editorjs-html": {
-      "version": "3.4.2",
+      "version": "3.4.3",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/editorjs-html/-/editorjs-html-3.4.3.tgz",
+      "integrity": "sha512-HMqQ3BCE98uhSpJsbfH0c3CoMctUMCHlap2Eq/7/VjaHas+g3IJqyf+ERtMByoQCzvcW22ISYaZEeE7rGkd8Xg=="
     },
     "node_modules/editorjs-paragraph-with-alignment": {
       "version": "3.0.0",
       "license": "MIT"
     },
     "node_modules/editorjs-text-color-plugin": {
-      "version": "1.13.1",
+      "version": "2.0.3",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/editorjs-text-color-plugin/-/editorjs-text-color-plugin-2.0.3.tgz",
-      "license": "MIT"
+      "integrity": "sha512-4ASQg4s0wpHLRi8+U9IOyFLQVXrI12MiAKCgf1AUEAEngYuRrwmuElLHQgJWeM2o8TruP8VkrT7UT7G2vTrJMA==",
+      "dev": true
     },
     "node_modules/ee-first": {
       "version": "1.1.1",
@@ -33172,30 +33161,6 @@
         "assert-plus": "^1.0.0"
       }
     },
-    "node_modules/github-api": {
-      "version": "3.4.0",
-      "dev": true,
-      "license": "BSD-3-Clause-Clear",
-      "dependencies": {
-        "axios": "^0.21.1",
-        "debug": "^2.2.0",
-        "js-base64": "^2.1.9",
-        "utf8": "^2.1.1"
-      }
-    },
-    "node_modules/github-api/node_modules/debug": {
-      "version": "2.6.9",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/github-api/node_modules/ms": {
-      "version": "2.0.0",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/github-slugger": {
       "version": "1.5.0",
       "dev": true,
@@ -33976,9 +33941,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/html-janitor": {
-      "version": "2.0.4"
-    },
     "node_modules/html-minifier-terser": {
       "version": "6.1.0",
       "dev": true,
@@ -38676,11 +38638,6 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/js-base64": {
-      "version": "2.6.4",
-      "dev": true,
-      "license": "BSD-3-Clause"
-    },
     "node_modules/js-string-escape": {
       "version": "1.0.1",
       "dev": true,
@@ -41594,6 +41551,7 @@
     },
     "node_modules/nanoid": {
       "version": "3.3.6",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -51900,11 +51858,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/utf8": {
-      "version": "2.1.2",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/util": {
       "version": "0.11.1",
       "dev": true,

package.json

@@ -68,9 +68,9 @@
     "@angular/router": "14.1.3",
     "@apollo/client": "^3.8.4",
     "@cspell/eslint-plugin": "^7.3.6",
-    "@editorjs/editorjs": "^2.26.5",
+    "@editorjs/editorjs": "^2.29.0",
-    "@editorjs/header": "2.7.0",
+    "@editorjs/header": "2.8.1",
-    "@editorjs/list": "1.8.0",
+    "@editorjs/list": "1.9.0",
     "@editorjs/underline": "1.1.0",
     "@mat-datetimepicker/core": "^10.1.1",
     "@ngx-translate/core": "^14.0.0",
@@ -82,7 +82,7 @@
     "cropperjs": "1.5.13",
     "date-fns": "^2.30.0",
     "dotenv-expand": "^5.1.0",
-    "editorjs-html": "3.4.2",
+    "editorjs-html": "3.4.3",
     "editorjs-paragraph-with-alignment": "3.0.0",
     "event-emitter": "^0.3.5",
     "material-icons": "^1.13.12",
@@ -108,7 +108,7 @@
     "@angular/compiler-cli": "14.1.3",
     "@editorjs/code": "2.8.0",
     "@editorjs/inline-code": "1.4.0",
-    "@editorjs/marker": "1.2.2",
+    "@editorjs/marker": "1.4.0",
     "@nrwl/angular": "14.8.9",
     "@nrwl/cli": "14.8.9",
     "@nrwl/eslint-plugin-nx": "14.5.4",
@@ -141,7 +141,7 @@
     "commander": "6.2.1",
     "css-loader": "^6.8.1",
     "dotenv": "16.1.3",
-    "editorjs-text-color-plugin": "1.13.1",
+    "editorjs-text-color-plugin": "2.0.3",
     "ejs": "^3.1.9",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^8.10.0",