Merge pull request #2818 from WISE-Community/issue-2817-replace-summernote-with-tinymce-in-notebook-report

Replace Summernote with TinyMCE

Author: hirokiterashima

angular.json

@@ -56,7 +56,8 @@
             "extractCss": true,
             "assets": [
               "src/main/webapp/site/src/assets",
-              "src/main/webapp/site/src/favicon.ico"
+              "src/main/webapp/site/src/favicon.ico",
+              { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
             ],
             "styles": [
               {

custom-webpack.config.js

@@ -5,7 +5,6 @@ module.exports = {
   plugins: [
     new MomentLocalesPlugin({
       localesToKeep: ['zh-cn', 'zh-tw']
-    }),
-    new webpack.IgnorePlugin(/^codemirror$/),
+    })
   ]
 };

gulpfile.js

@@ -19,6 +19,8 @@ const newer = require('gulp-newer');
 const postcss = require('gulp-postcss');
 const print = require('gulp-print').default;
 const sass = require('gulp-sass');
+const rename = require("gulp-rename");
+const replace = require('gulp-replace');
 //const rtlscss = require('rtlcss');
 
 // -----------------------------------------------------------------------------
@@ -163,6 +165,15 @@ gulp.task('update-i18n', gulp.series(function() {
   done();
 }));
 
+gulp.task('rename-styles-bundle', (done) => {
+  const statsJSON = JSON.parse(fs.readFileSync('./src/main/webapp/site/dist/stats.json'));
+  const siteStylesPath = statsJSON.assetsByChunkName.siteStyles[0];
+  gulp.src('./src/main/webapp/site/dist/*.js')
+    .pipe(replace('siteStyles.css', siteStylesPath))
+    .pipe(gulp.dest('./src/main/webapp/site/dist'));
+  done();
+});
+
 
 // -----------------------------------------------------------------------------
 // Default task

package-lock.json

@@ -17,13 +17,13 @@
     "@angular/core": "^10.1.2",
     "@angular/flex-layout": "^10.0.0-beta.32",
     "@angular/forms": "^10.1.2",
-    "@angular/localize": "~9.1.3",
     "@angular/material": "^10.2.1",
     "@angular/platform-browser": "^10.1.2",
     "@angular/platform-browser-dynamic": "^10.1.2",
     "@angular/router": "^10.1.2",
     "@angular/upgrade": "^10.1.2",
     "@stomp/stompjs": "^5.4.4",
+    "@tinymce/tinymce-angular": "^4.2.0",
     "angular": "1.7.9",
     "angular-animate": "1.7.8",
     "angular-aria": "1.7.8",
@@ -34,14 +34,12 @@
     "angular-mocks": "1.7.8",
     "angular-moment": "^1.0.0-beta.6",
     "angular-sanitize": "1.7.8",
-    "angular-summernote": "0.8.1",
     "angular-toarrayfilter": "^1.0.3",
     "angular-translate": "^2.18.2",
     "angular-translate-loader-partial": "^2.18.2",
     "angular-ui-router": "^1.0.25",
     "angular-ui-scrollpoint": "^2.1.1",
     "angularx-social-login": "^2.3.1",
-    "bootstrap": "^3.1.1",
     "canvg": "^2.0.0",
     "codemirror": "5.48.2",
     "compute-covariance": "^1.0.1",
@@ -64,9 +62,9 @@
     "oclazyload": "^1.0.9",
     "rxjs": "^6.5.5",
     "sockjs-client": "^1.4.0",
-    "summernote": "0.8.2",
     "svg.draggable.js": "2.2.0",
     "svg.js": "2.3.2",
+    "tinymce": "^5.5.1",
     "tslib": "^2.0.0",
     "webfontloader": "^1.6.20",
     "xmldom": "^0.1.31",
@@ -78,6 +76,7 @@
     "@angular/cli": "^10.1.1",
     "@angular/compiler-cli": "^10.1.2",
     "@angular/language-service": "^10.1.2",
+    "@angular/localize": "^10.1.2",
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
@@ -101,6 +100,8 @@
     "gulp-newer": "^1.3.0",
     "gulp-postcss": "^8.0.0",
     "gulp-print": "^5.0.2",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.0.0",
     "gulp-sass": "^4.1.0",
     "gulp-sourcemaps": "^2.6.5",
     "html-webpack-plugin": "^3.2.0",
@@ -133,12 +134,12 @@
   },
   "scripts": {
     "build-dev": "node node_modules/concurrently/bin/concurrently.js \"ng build wise --watch\" \"ng test --source-map=false --karma-config src/main/webapp/site/karma.conf.js --browsers ChromeHeadlessNoSandbox\"",
-    "build-prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production",
-    "build-prod-es": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production-es",
-    "build-prod-pt": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production-pt",
-    "build-prod-tr": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production-tr",
-    "build-prod-hans": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production-zh-Hans",
-    "build-prod-hant": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production-zh-Hant",
+    "build-prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production; gulp rename-styles-bundle",
+    "build-prod-es": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production-es; gulp rename-styles-bundle",
+    "build-prod-pt": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production-pt; gulp rename-styles-bundle",
+    "build-prod-tr": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production-tr; gulp rename-styles-bundle",
+    "build-prod-hans": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production-zh-Hans; gulp rename-styles-bundle",
+    "build-prod-hant": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build wise --configuration=production-zh-Hant; gulp rename-styles-bundle",
     "bundle-report": "node ./node_modules/webpack-bundle-analyzer/lib/bin/analyzer.js src/main/webapp/site/dist/stats.json",
     "watch-all-wise5": "node node_modules/concurrently/bin/concurrently.js \"node ./node_modules/gulp/bin/gulp.js\" \"npm run test-wise5-watch\"",
     "watch-sass": "npm rebuild node-sass && node ./node_modules/gulp/bin/gulp.js",

package.json

@@ -83,6 +83,7 @@ public void addResourceHandlers(final ResourceHandlerRegistry registry) {
     registry.addResourceHandler("/portal/translate/**").addResourceLocations("/portal/translate/");
     registry.addResourceHandler("/vle/**").addResourceLocations("/vle/");
     registry.addResourceHandler("/wise5/**").addResourceLocations("/wise5/");
+    registry.addResourceHandler("/tinymce/**").addResourceLocations("/site/dist/tinymce/");
     registry.addResourceHandler("/site/**").addResourceLocations("/site/");
     registry.addResourceHandler("/curriculum/**").addResourceLocations("/curriculum/");
     registry.addResourceHandler("/studentuploads/**").addResourceLocations("/studentuploads/");

src/main/java/org/wise/portal/spring/impl/WebConfig.java

@@ -50,6 +50,8 @@ import { MatSelectModule } from '@angular/material/select';
 import { HelpIconComponent } from '../../../wise5/themes/default/themeComponents/helpIcon/help-icon.component';
 import { NodeStatusIcon } from '../../../wise5/themes/default/themeComponents/nodeStatusIcon/node-status-icon.component';
 import { MomentModule } from 'ngx-moment';
+import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
+import { WiseTinymceEditorComponent } from '../../../wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component';
 
 @Component({template: ``})
 export class EmptyComponent {}
@@ -59,11 +61,13 @@ export class EmptyComponent {}
     EmptyComponent,
     HelpIconComponent,
     NodeIconComponent,
-    NodeStatusIcon
+    NodeStatusIcon,
+    WiseTinymceEditorComponent
   ],
   imports: [
     UpgradeModule,
     CommonModule,
+    EditorModule,
     FlexLayoutModule,
     FormsModule,
     MatButtonModule,
@@ -112,11 +116,13 @@ export class EmptyComponent {}
     SummaryService,
     TableService,
     TagService,
+    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' },
     UtilService,
     VLEProjectService
   ],
   exports: [
     CommonModule,
+    EditorModule,
     FlexLayoutModule,
     FormsModule,
     MatButtonModule,

src/main/webapp/site/src/app/common-hybrid-angular.module.ts

@@ -1,4 +1,4 @@
-import { TestBed, fakeAsync } from '@angular/core/testing';
+import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { ConfigService } from '../../../../wise5/services/configService';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { ProjectService } from '../../../../wise5/services/projectService';
@@ -50,6 +50,7 @@ describe('ProjectAssetService', () => {
   calculateUsedFiles();
   getFileNameFromURL();
   getTextFiles();
+  injectFileTypeValues();
 });
 
 function retrieveProjectAssets() {
@@ -100,6 +101,7 @@ function deleteAssetItem() {
       totalFileSize: 1
     };
     request.flush(response);
+    tick();
     expect(service.getProjectAssets().getValue()).toEqual(response);
   }));
 }
@@ -291,3 +293,17 @@ function getTextFiles() {
     request2.flush(result2);
   }));
 }
+
+function injectFileTypeValues() {
+  it('should inject file type values', () => {
+    const files: any = [
+      { fileName: 'spongebob.png' },
+      { fileName: 'squidward.mp4' },
+      { fileName: 'plankton.pdf' }
+    ];
+    service.injectFileTypeValues(files);
+    expect(files[0].fileType).toEqual('image');
+    expect(files[1].fileType).toEqual('video');
+    expect(files[2].fileType).toEqual('other');
+  })
+}

src/main/webapp/site/src/app/services/projectAssetService.spec.ts

@@ -65,18 +65,34 @@ export class ProjectAssetService {
 
   retrieveProjectAssets(): any {
     const url = this.ConfigService.getConfigParam('projectAssetURL');
-    return this.http.get(url).subscribe(projectAssets => {
+    return this.http.get(url).subscribe((projectAssets: any) => {
       this.totalSizeMax = this.ConfigService.getConfigParam('projectAssetTotalSizeMax');
+      this.injectFileTypeValues(projectAssets.files);
       this.setProjectAssets(projectAssets);
     });
   }
 
+  injectFileTypeValues(projectAssets: any[]) {
+    projectAssets.forEach((projectAsset) => {
+      if (this.UtilService.isImage(projectAsset.fileName)) {
+        projectAsset.fileType = 'image';
+      } else if (this.UtilService.isVideo(projectAsset.fileName)) {
+        projectAsset.fileType = 'video';
+      } else if (this.UtilService.isAudio(projectAsset.fileName)) {
+        projectAsset.fileType = 'audio';
+      } else {
+        projectAsset.fileType = 'other';
+      }
+    });
+  }
+
   uploadAssets(files: any[]) {
     const url = this.ConfigService.getConfigParam('projectAssetURL');
     const formData = new FormData();
     files.forEach((file: any) => formData.append('files', file, file.name));
     return this.http.post(url, formData).pipe(
       map((data: any) => {
+        this.injectFileTypeValues(data.assetDirectoryInfo.files);
         this.setProjectAssets(data.assetDirectoryInfo);
         return data;
       })
@@ -93,7 +109,8 @@ export class ProjectAssetService {
   deleteAssetItem(assetItem: any): any {
     const url = `${this.ConfigService.getConfigParam('projectAssetURL')}/delete`;
     const params = new HttpParams().set('assetFileName', assetItem.fileName);
-    return this.http.post(url, params).subscribe(projectAssets => {
+    return this.http.post(url, params).subscribe((projectAssets: any) => {
+      this.injectFileTypeValues(projectAssets.files);
       this.setProjectAssets(projectAssets);
     });
   }

src/main/webapp/site/src/app/services/projectAssetService.ts

@@ -27,6 +27,7 @@ import { AngularJSModule } from './common-hybrid-angular.module';
 import { NodeAdvancedJsonAuthoringComponent } from '../../../wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component';
 import { WorkgroupInfoComponent } from '../../../wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroupInfo/workgroup-info.component';
 import { NodeAdvancedGeneralAuthoringComponent } from '../../../wise5/authoringTool/node/advanced/general/node-advanced-general-authoring.component';
+import { WiseAuthoringTinymceEditorComponent } from '../../../wise5/directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +44,8 @@ import { NodeAdvancedGeneralAuthoringComponent } from '../../../wise5/authoringT
     StatusIconComponent,
     WorkgroupInfoComponent,
     WorkgroupNodeScoreComponent,
-    NavItemScoreComponent
+    NavItemScoreComponent,
+    WiseAuthoringTinymceEditorComponent
   ],
   imports: [
     AngularJSModule