Merge pull request #2865 from WISE-Community/issue-2860-upgrade-html-authoring-to-angular

Upgrade HTMLAuthoring to Angular component

Author: hirokiterashima

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

@@ -42,6 +42,7 @@ import { NavItemProgressComponent } from './classroom-monitor/nav-item-progress/
 import { EditHTMLAdvancedComponent } from '../../../wise5/components/html/edit-html-advanced/edit-html-advanced.component';
 import { EditOutsideUrlAdvancedComponent } from '../../../wise5/components/outsideURL/edit-outside-url-advanced/edit-outside-url-advanced.component';
 import { OpenResponseAuthoring } from '../../../wise5/components/openResponse/open-response-authoring/open-response-authoring.component';
+import { HtmlAuthoring } from '../../../wise5/components/html/html-authoring/html-authoring.component';
 
 @NgModule({
   declarations: [
@@ -59,6 +60,7 @@ import { OpenResponseAuthoring } from '../../../wise5/components/openResponse/op
     EditComponentWidthComponent,
     EditHTMLAdvancedComponent,
     EditOutsideUrlAdvancedComponent,
+    HtmlAuthoring,
     ManageStudentsComponent,
     MilestonesComponent,
     MilestoneReportDataComponent,

src/main/webapp/wise5/components/html/authoring.html

@@ -0,0 +1,4 @@
+<wise-authoring-tinymce-editor
+    [(model)]='html'
+    (modelChange)='htmlChanged()'>
+</wise-authoring-tinymce-editor>

src/main/webapp/wise5/components/html/html-authoring/html-authoring.component.html

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { ComponentAuthoring } from '../../../authoringTool/components/component-authoring.component';
+import { ConfigService } from '../../../services/configService';
+import { NodeService } from '../../../services/nodeService';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { UtilService } from '../../../services/utilService';
+
+@Component({
+  selector: 'html-authoring',
+  templateUrl: 'html-authoring.component.html'
+})
+export class HtmlAuthoring extends ComponentAuthoring {
+  html: string = '';
+
+  constructor(
+    protected ConfigService: ConfigService,
+    protected NodeService: NodeService,
+    protected ProjectService: TeacherProjectService,
+    protected UtilService: UtilService
+  ) {
+    super(ConfigService, NodeService, ProjectService);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+    this.html = this.UtilService.replaceWISELinks(this.componentContent.html);
+  }
+
+  htmlChanged(): void {
+    this.authoringComponentContent.html = this.UtilService.insertWISELinks(
+      this.ConfigService.removeAbsoluteAssetPaths(this.html)
+    );
+    this.componentChanged();
+  }
+}

src/main/webapp/wise5/components/html/html-authoring/html-authoring.component.ts

@@ -3,14 +3,20 @@
 import * as angular from 'angular';
 import { downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';
 import { HTMLService } from './htmlService';
-import HTMLAuthoring from './htmlAuthoring';
 import { EditHTMLAdvancedComponent } from './edit-html-advanced/edit-html-advanced.component';
+import { HtmlAuthoring } from './html-authoring/html-authoring.component';
 
-const htmlComponentModule = angular.module('htmlAuthoringComponentModule', [])
+const htmlComponentModule = angular
+  .module('htmlAuthoringComponentModule', [])
   .service('HTMLService', downgradeInjectable(HTMLService))
-  .component('htmlAuthoring', HTMLAuthoring)
-  .directive('editHtmlAdvanced', downgradeComponent(
-      { component: EditHTMLAdvancedComponent }) as angular.IDirectiveFactory)
+  .directive(
+    'htmlAuthoring',
+    downgradeComponent({ component: HtmlAuthoring }) as angular.IDirectiveFactory
+  )
+  .directive(
+    'editHtmlAdvanced',
+    downgradeComponent({ component: EditHTMLAdvancedComponent }) as angular.IDirectiveFactory
+  )
   .config([
     '$translatePartialLoaderProvider',
     $translatePartialLoaderProvider => {