From bdc66b4668c4ef2c7e664dd16982e82c99045e72 Mon Sep 17 00:00:00 2001
From: Asher <ashrais@berkeley.edu>
Date: Wed, 22 Jul 2026 09:52:14 -0700
Subject: [PATCH 01/17] Add Header, Context (wysiwyg), and background color to
 Open Response component

---
 package-lock.json                             | 173 ------------------
 .../openResponse/OpenResponseContent.ts       |   3 +
 .../open-response-authoring.component.html    |  38 +++-
 .../open-response-authoring.component.ts      |  16 +-
 .../open-response-student.component.html      |  14 +-
 .../open-response-student.component.scss      |  50 ++++-
 .../open-response-student.component.ts        |   9 +-
 7 files changed, 111 insertions(+), 192 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 229bb639888..433156aa4ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3873,34 +3873,6 @@
         "node": ">=22.12.0"
       }
     },
-    "node_modules/@cspotcode/source-map-support": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
-      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/trace-mapping": "0.3.9"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
-      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
-      }
-    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.6.3.tgz",
@@ -8658,42 +8630,6 @@
         }
       }
     },
-    "node_modules/@tsconfig/node10": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.12.tgz",
-      "integrity": "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@tsconfig/node12": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
-      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@tsconfig/node14": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
-      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@tsconfig/node16": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
-      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -9431,36 +9367,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/acorn-walk": {
-      "version": "8.3.5",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz",
-      "integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "acorn": "^8.11.0"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-walk/node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/adjust-sourcemap-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
@@ -12291,15 +12197,6 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
-    "node_modules/create-require": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -16167,21 +16064,6 @@
         "postcss": "^8.0.0"
       }
     },
-    "node_modules/gulp-postcss/node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/gulp-postcss/node_modules/postcss-load-config": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
@@ -16212,52 +16094,6 @@
         }
       }
     },
-    "node_modules/gulp-postcss/node_modules/ts-node": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
-      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@cspotcode/source-map-support": "^0.8.0",
-        "@tsconfig/node10": "^1.0.7",
-        "@tsconfig/node12": "^1.0.7",
-        "@tsconfig/node14": "^1.0.0",
-        "@tsconfig/node16": "^1.0.2",
-        "acorn": "^8.4.1",
-        "acorn-walk": "^8.1.1",
-        "arg": "^4.1.0",
-        "create-require": "^1.1.0",
-        "diff": "^4.0.1",
-        "make-error": "^1.1.1",
-        "v8-compile-cache-lib": "^3.0.1",
-        "yn": "3.1.1"
-      },
-      "bin": {
-        "ts-node": "dist/bin.js",
-        "ts-node-cwd": "dist/bin-cwd.js",
-        "ts-node-esm": "dist/bin-esm.js",
-        "ts-node-script": "dist/bin-script.js",
-        "ts-node-transpile-only": "dist/bin-transpile.js",
-        "ts-script": "dist/bin-script-deprecated.js"
-      },
-      "peerDependencies": {
-        "@swc/core": ">=1.2.50",
-        "@swc/wasm": ">=1.2.50",
-        "@types/node": "*",
-        "typescript": ">=2.7"
-      },
-      "peerDependenciesMeta": {
-        "@swc/core": {
-          "optional": true
-        },
-        "@swc/wasm": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/gulp-postcss/node_modules/yaml": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
@@ -30494,15 +30330,6 @@
         "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/v8-compile-cache-lib": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
-      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/v8flags": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",
diff --git a/src/assets/wise5/components/openResponse/OpenResponseContent.ts b/src/assets/wise5/components/openResponse/OpenResponseContent.ts
index 7289b913dcb..4b0d859191d 100644
--- a/src/assets/wise5/components/openResponse/OpenResponseContent.ts
+++ b/src/assets/wise5/components/openResponse/OpenResponseContent.ts
@@ -1,10 +1,13 @@
 import { ComponentContent } from '../../common/ComponentContent';
 
 export interface OpenResponseContent extends ComponentContent {
+  backgroundColor?: string;
   completionCriteria: any;
   cRater: any;
+  context?: string;
   enableCRater: boolean;
   enableNotifications: boolean;
+  header?: string;
   isStudentAudioRecordingEnabled: boolean;
   maxSubmitCount?: number;
   notificationSettings: any;
diff --git a/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html b/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html
index 4c0667e6fc7..cb5848ce2d2 100644
--- a/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html
+++ b/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html
@@ -1,16 +1,34 @@
 <div class="openResponse">
   @if (!componentContent.showPreviousWork) {
     <div>
-      <mat-icon
-        matTooltip="If you want to use rich visuals (images, videos, links, bullets, etc.) in your prompt, use an HTML activity above this"
-        matTooltipPosition="above"
-        i18n-matTooltip
-        >announcement</mat-icon
-      >
-      <edit-component-prompt
-        [componentContent]="componentContent"
-        (promptChangedEvent)="promptChanged($event)"
-      />
+      <div class="flex flex-row justify-end mb-2">
+        <mat-form-field appearance="outline" class="w-48">
+          <mat-label i18n>Background color</mat-label>
+          <input
+            matInput
+            placeholder="#RRGGBB"
+            [(ngModel)]="componentContent.backgroundColor"
+            (ngModelChange)="componentChanged()"
+          />
+        </mat-form-field>
+      </div>
+      <div class="flex flex-col gap-4 mb-4">
+        <mat-form-field class="w-full" appearance="outline">
+          <mat-label i18n>Header</mat-label>
+          <input
+            matInput
+            [(ngModel)]="componentContent.header"
+            (ngModelChange)="componentChanged()"
+          />
+        </mat-form-field>
+        <div>
+          <label class="text-sm text-gray-600 mb-1 block" i18n>Context</label>
+          <wise-authoring-tinymce-editor
+            [(model)]="componentContent.context"
+            (modelChange)="componentChanged()"
+          />
+        </div>
+      </div>
     </div>
   }
 </div>
diff --git a/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.ts b/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.ts
index 046c8e76560..363075e6442 100644
--- a/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.ts
+++ b/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.ts
@@ -1,11 +1,17 @@
 import { Component } from '@angular/core';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component';
+import { WiseAuthoringTinymceEditorComponent } from '../../../directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
-  imports: [EditComponentPrompt, MatIconModule, MatTooltipModule],
+  imports: [FormsModule, MatFormFieldModule, MatInputModule, WiseAuthoringTinymceEditorComponent],
   templateUrl: 'open-response-authoring.component.html'
 })
-export class OpenResponseAuthoringComponent extends AbstractComponentAuthoring {}
+export class OpenResponseAuthoringComponent extends AbstractComponentAuthoring {
+  componentChanged(): void {
+    this.projectService.nodeChanged();
+    this.projectService.saveProject();
+  }
+}
diff --git a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html
index 31c3b172867..eafd279a57c 100644
--- a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html
+++ b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html
@@ -1,4 +1,13 @@
-<component-header [component]="component" />
+<div
+  class="pt-4 px-6 pb-6 rounded-lg border-2 border-black"
+  [style.background-color]="componentContent.backgroundColor ? (componentContent.backgroundColor.startsWith('#') ? componentContent.backgroundColor : '#' + componentContent.backgroundColor) : 'transparent'"
+>
+@if (componentContent.header) {
+  <h2 class="or-header text-2xl font-bold mb-4">{{ componentContent.header }}</h2>
+}
+@if (componentContent.context) {
+  <div class="or-body mb-4" [innerHTML]="contextHtml"></div>
+}
 <div class="flex flex-row flex-wrap justify-start items-center gap-4">
   @if (isAddToNotebookEnabled()) {
     <button
@@ -25,7 +34,7 @@
     </button>
   }
 </div>
-<div class="my-2">
+<div class="my-4 bg-white rounded-lg overflow-hidden or-answer-card">
   <mat-form-field class="w-full form-field-no-hint">
     <textarea
       matInput
@@ -87,6 +96,7 @@
     (submitButtonClicked)="submitButtonClicked($event)"
   />
 }
+</div>
 @if (mode === 'student') {
   <component-annotations
     [annotations]="latestAnnotations"
diff --git a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.scss b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.scss
index 24cb2a06e5d..4bbdb06ce53 100644
--- a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.scss
+++ b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.scss
@@ -1,3 +1,51 @@
 .student-response {
   min-height: 80px;
-}
\ No newline at end of file
+}
+
+.or-answer-card {
+  .mat-mdc-form-field-focus-overlay,
+  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
+    background-color: transparent !important;
+  }
+  .mdc-text-field {
+    padding: 0 !important;
+  }
+
+  border: 2px solid #000000;
+  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.85);
+  transition: none;
+  &:focus-within {
+    box-shadow: none;
+  }
+}
+
+:host ::ng-deep component-save-submit-buttons button.mat-mdc-raised-button:not([disabled]) {
+  --mdc-protected-button-container-color: #ffffff;
+  --mdc-protected-button-label-text-color: #000000;
+  --mdc-protected-button-container-elevation-shadow: none;
+  background-color: #ffffff !important;
+  color: #000000 !important;
+  border: 2px solid #000000 !important;
+  border-radius: 6px;
+  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.85) !important;
+  transition: none !important;
+}
+
+:host ::ng-deep component-save-submit-buttons button.mat-mdc-raised-button:not([disabled]):active {
+  box-shadow: none !important;
+  transition: none !important;
+}
+
+.or-header {
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 700;
+}
+
+.or-body {
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 400;
+}
diff --git a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts
index a575027229e..8bf7024bf22 100644
--- a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts
+++ b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts
@@ -1,4 +1,6 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { WiseLinkService } from '../../../../../app/services/wiseLinkService';
 import { MatDialog } from '@angular/material/dialog';
 import { timeout } from 'rxjs/operators';
 import { DialogWithoutCloseComponent } from '../../../directives/dialog-without-close/dialog-without-close.component';
@@ -56,6 +58,8 @@ import { ComponentAnnotationsComponent } from '../../../directives/componentAnno
   templateUrl: 'open-response-student.component.html'
 })
 export class OpenResponseStudent extends ComponentStudent {
+  protected contextHtml: SafeHtml = '';
+  private wiseLinkService = inject(WiseLinkService);
   audioAttachments: any[] = [];
   cRaterTimeout: number = 40000;
   isPublicSpaceExist: boolean = false;
@@ -94,6 +98,9 @@ export class OpenResponseStudent extends ComponentStudent {
 
   ngOnInit(): void {
     super.ngOnInit();
+    this.contextHtml = this.wiseLinkService.generateHtmlWithWiseLink(
+      this.componentContent.context || ''
+    );
     if (hasConnectedComponent(this.componentContent, 'showWork')) {
       this.handleConnectedComponents();
     } else if (

From a1ac03c2a73851d8390b3cfa0d113bc434ff7506 Mon Sep 17 00:00:00 2001
From: Asher <ashrais@berkeley.edu>
Date: Wed, 29 Jul 2026 09:47:51 -0700
Subject: [PATCH 02/17] Add shared header to all component types including
 html, summary, outsideURL, embedded stragglers

---
 .../edit-component-dialog.component.ts        | 20 +++++++++++++++++--
 .../edit-component.component.ts               |  2 +-
 src/assets/wise5/common/ComponentContent.ts   |  1 +
 .../embedded-student.component.html           |  1 +
 .../embedded-student.component.ts             |  2 ++
 .../html-student/html-student.component.html  |  1 +
 .../html-student/html-student.component.ts    |  4 +++-
 .../openResponse/OpenResponseContent.ts       |  1 -
 .../open-response-authoring.component.html    |  8 --------
 .../open-response-student.component.html      |  4 +---
 .../outside-url-student.component.html        |  1 +
 .../outside-url-student.component.ts          |  4 +++-
 .../summary-student.component.html            |  1 +
 .../summary-student.component.ts              |  4 +++-
 .../component-header.component.html           |  1 +
 .../component-header.component.ts             |  4 +++-
 16 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
index 66487163d3b..7a0faf97988 100644
--- a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
@@ -5,6 +5,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { ComponentTypeService } from '../../../services/componentTypeService';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { Component as WISEComponent } from '../../../common/Component';
 import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
@@ -19,7 +21,9 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
     MatButtonModule,
     MatDialogModule,
     MatDividerModule,
-    MatSlideToggle
+    MatSlideToggle,
+    MatFormFieldModule,
+    MatInputModule
   ],
   template: `
     <div class="flex items-center justify-between pe-4">
@@ -27,10 +31,18 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
       <mat-slide-toggle color="primary" [(ngModel)]="advancedMode" i18n>Advanced</mat-slide-toggle>
     </div>
     <mat-divider class="!m-0" />
-    <mat-dialog-content class="!max-h-none" [class.advanced-component-authoring]="advancedMode">
+    <mat-dialog-content class="!max-h-none" style="padding-top: 28px;" [class.advanced-component-authoring]="advancedMode">
       @if (advancedMode) {
         <edit-component-advanced class="h-full" [component]="component" />
       } @else {
+        <mat-form-field class="w-full">
+          <mat-label i18n>Header</mat-label>
+          <input
+            matInput
+            [(ngModel)]="data.componentContent.header"
+            (ngModelChange)="headerChanged()"
+          />
+        </mat-form-field>
         <edit-component
           class="block h-full py-4"
           [componentContent]="data.componentContent"
@@ -72,6 +84,10 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
 })
 export class EditComponentDialogComponent {
   protected advancedMode = false;
+
+  headerChanged(): void {
+    this.projectService.saveProject();
+  }
   protected component: WISEComponent;
   protected componentIndex: number;
   protected componentTypeLabel: string;
diff --git a/src/assets/wise5/authoringTool/components/edit-component/edit-component.component.ts b/src/assets/wise5/authoringTool/components/edit-component/edit-component.component.ts
index 3ffce72642b..0bfa3193772 100644
--- a/src/assets/wise5/authoringTool/components/edit-component/edit-component.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component/edit-component.component.ts
@@ -37,7 +37,7 @@ export class EditComponentComponent {
       nodeId: this.nodeId
     });
     this.applicationRef.attachView(this.componentRef.hostView);
-    setTimeout(() => hostElement.focus());
+    setTimeout(() => hostElement.focus({ preventScroll: true }));
   }
 
   ngOnDestroy(): void {
diff --git a/src/assets/wise5/common/ComponentContent.ts b/src/assets/wise5/common/ComponentContent.ts
index ea9795e1a05..20c93469deb 100644
--- a/src/assets/wise5/common/ComponentContent.ts
+++ b/src/assets/wise5/common/ComponentContent.ts
@@ -13,6 +13,7 @@ export interface ComponentContent {
   cRaterRubric?: CRaterRubric;
   dynamicPrompt?: DynamicPrompt;
   excludeFromTotalScore?: boolean;
+  header?: string;
   maxScore?: number;
   maxSubmitCount?: number;
   prompt?: string;
diff --git a/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.html b/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.html
index 05af32fd8ac..c19a2692ed7 100644
--- a/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.html
+++ b/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.html
@@ -1,3 +1,4 @@
+<component-header [component]="component" />
 <div class="main-div">
   @if (isShowAddToNotebookButton) {
     <add-to-notebook-button [isDisabled]="isDisabled" (snipImage)="snipModel()" />
diff --git a/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.ts b/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.ts
index 5f69f465b0a..0f81ef2fb57 100644
--- a/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.ts
+++ b/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.ts
@@ -1,3 +1,4 @@
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import html2canvas from 'html2canvas';
 import { ChangeDetectorRef, Component } from '@angular/core';
 import { AnnotationService } from '../../../services/annotationService';
@@ -19,6 +20,7 @@ import { ComponentAnnotationsComponent } from '../../../directives/componentAnno
 
 @Component({
   imports: [
+    ComponentHeaderComponent,
     AddToNotebookButtonComponent,
     ComponentSaveSubmitButtonsComponent,
     ComponentAnnotationsComponent
diff --git a/src/assets/wise5/components/html/html-student/html-student.component.html b/src/assets/wise5/components/html/html-student/html-student.component.html
index a3642dee73b..e7f0694d5cf 100644
--- a/src/assets/wise5/components/html/html-student/html-student.component.html
+++ b/src/assets/wise5/components/html/html-student/html-student.component.html
@@ -1 +1,2 @@
+<component-header [component]="component" />
 <div [innerHTML]="html"></div>
diff --git a/src/assets/wise5/components/html/html-student/html-student.component.ts b/src/assets/wise5/components/html/html-student/html-student.component.ts
index f07f8fdd315..cb4b40cc82c 100644
--- a/src/assets/wise5/components/html/html-student/html-student.component.ts
+++ b/src/assets/wise5/components/html/html-student/html-student.component.ts
@@ -1,3 +1,4 @@
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { SafeHtml } from '@angular/platform-browser';
@@ -14,7 +15,8 @@ import { ComponentService } from '../../componentService';
 @Component({
   selector: 'html-student',
   styleUrl: 'html-student.component.scss',
-  templateUrl: 'html-student.component.html'
+  templateUrl: 'html-student.component.html',
+  imports: [ComponentHeaderComponent]
 })
 export class HtmlStudentComponent extends ComponentStudent {
   protected html: SafeHtml = '';
diff --git a/src/assets/wise5/components/openResponse/OpenResponseContent.ts b/src/assets/wise5/components/openResponse/OpenResponseContent.ts
index 4b0d859191d..cf9772a2899 100644
--- a/src/assets/wise5/components/openResponse/OpenResponseContent.ts
+++ b/src/assets/wise5/components/openResponse/OpenResponseContent.ts
@@ -7,7 +7,6 @@ export interface OpenResponseContent extends ComponentContent {
   context?: string;
   enableCRater: boolean;
   enableNotifications: boolean;
-  header?: string;
   isStudentAudioRecordingEnabled: boolean;
   maxSubmitCount?: number;
   notificationSettings: any;
diff --git a/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html b/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html
index cb5848ce2d2..fed77ee3944 100644
--- a/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html
+++ b/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html
@@ -13,14 +13,6 @@
         </mat-form-field>
       </div>
       <div class="flex flex-col gap-4 mb-4">
-        <mat-form-field class="w-full" appearance="outline">
-          <mat-label i18n>Header</mat-label>
-          <input
-            matInput
-            [(ngModel)]="componentContent.header"
-            (ngModelChange)="componentChanged()"
-          />
-        </mat-form-field>
         <div>
           <label class="text-sm text-gray-600 mb-1 block" i18n>Context</label>
           <wise-authoring-tinymce-editor
diff --git a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html
index eafd279a57c..051b49a15ce 100644
--- a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html
+++ b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html
@@ -2,9 +2,7 @@
   class="pt-4 px-6 pb-6 rounded-lg border-2 border-black"
   [style.background-color]="componentContent.backgroundColor ? (componentContent.backgroundColor.startsWith('#') ? componentContent.backgroundColor : '#' + componentContent.backgroundColor) : 'transparent'"
 >
-@if (componentContent.header) {
-  <h2 class="or-header text-2xl font-bold mb-4">{{ componentContent.header }}</h2>
-}
+<component-header [component]="component" />
 @if (componentContent.context) {
   <div class="or-body mb-4" [innerHTML]="contextHtml"></div>
 }
diff --git a/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.html b/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.html
index 5a36d70e629..198cdf6d5ea 100644
--- a/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.html
+++ b/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.html
@@ -1,3 +1,4 @@
+<component-header [component]="component" />
 <div class="outside-content">
   <div style="width: {{ width }}; height: {{ height }}">
     <iframe [src]="url" width="100%" height="100%" allowfullscreen> </iframe>
diff --git a/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts b/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts
index 11591ac99df..5b1629c88b5 100644
--- a/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts
+++ b/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts
@@ -1,3 +1,4 @@
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -12,7 +13,8 @@ import { ComponentService } from '../../componentService';
 
 @Component({
   selector: 'outside-url-student',
-  templateUrl: 'outside-url-student.component.html'
+  templateUrl: 'outside-url-student.component.html',
+  imports: [ComponentHeaderComponent]
 })
 export class OutsideUrlStudent extends ComponentStudent {
   url: SafeUrl;
diff --git a/src/assets/wise5/components/summary/summary-student/summary-student.component.html b/src/assets/wise5/components/summary/summary-student/summary-student.component.html
index bde6d2feb18..d8034c5ea98 100644
--- a/src/assets/wise5/components/summary/summary-student/summary-student.component.html
+++ b/src/assets/wise5/components/summary/summary-student/summary-student.component.html
@@ -1,3 +1,4 @@
+<component-header [component]="component" />
 <div class="summary">
   @if (componentContent.prompt) {
     <div [innerHTML]="prompt" class="prompt"></div>
diff --git a/src/assets/wise5/components/summary/summary-student/summary-student.component.ts b/src/assets/wise5/components/summary/summary-student/summary-student.component.ts
index f47c0877d90..c2418dc0227 100644
--- a/src/assets/wise5/components/summary/summary-student/summary-student.component.ts
+++ b/src/assets/wise5/components/summary/summary-student/summary-student.component.ts
@@ -1,3 +1,4 @@
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { AnnotationService } from '../../../services/annotationService';
@@ -13,7 +14,8 @@ import { CompletionService } from '../../../services/completionService';
 import { StudentSummaryDisplay } from '../../../directives/student-summary-display/student-summary-display.component';
 
 @Component({
-  imports: [StudentSummaryDisplay],
+  imports: [
+    ComponentHeaderComponent,StudentSummaryDisplay],
   styles: ['.prompt { font-weight: 500; padding-bottom: 8px; }'],
   templateUrl: 'summary-student.component.html'
 })
diff --git a/src/assets/wise5/directives/component-header/component-header.component.html b/src/assets/wise5/directives/component-header/component-header.component.html
index f161eccb0c9..fd180a63f22 100644
--- a/src/assets/wise5/directives/component-header/component-header.component.html
+++ b/src/assets/wise5/directives/component-header/component-header.component.html
@@ -1,3 +1,4 @@
+<div class="component-header-header" [innerHTML]="header"></div>
 <div class="component-header flex flex-wrap gap-1">
   <prompt
     [prompt]="component.content.prompt"
diff --git a/src/assets/wise5/directives/component-header/component-header.component.ts b/src/assets/wise5/directives/component-header/component-header.component.ts
index d4061f86678..d3ae3d7d4c1 100644
--- a/src/assets/wise5/directives/component-header/component-header.component.ts
+++ b/src/assets/wise5/directives/component-header/component-header.component.ts
@@ -9,18 +9,20 @@ import { PromptComponent } from '../prompt/prompt.component';
 @Component({
   imports: [PossibleScoreComponent, PromptComponent],
   selector: 'component-header',
-  styles: ['.component-header { padding-bottom: 8px; } .prompt { font-weight: 500; }'],
+  styles: ['.component-header { padding-bottom: 8px; } .prompt { font-weight: 500; } .component-header-header:not(:empty) { font-size: 24px; line-height: 32px; font-weight: 700; margin-bottom: 8px; }'],
   templateUrl: 'component-header.component.html'
 })
 export class ComponentHeaderComponent {
   @Input() component: WISEComponent;
   protected dynamicPrompt: DynamicPrompt;
   @Output() dynamicPromptChanged: EventEmitter<FeedbackRule> = new EventEmitter<FeedbackRule>();
+  protected header: SafeHtml;
   protected prompt: SafeHtml;
 
   constructor(protected sanitizer: DomSanitizer) {}
 
   ngOnInit(): void {
+    this.header = this.sanitizer.bypassSecurityTrustHtml(this.component.content.header || '');
     this.prompt = this.sanitizer.bypassSecurityTrustHtml(this.component.content.prompt);
     this.dynamicPrompt = new DynamicPrompt(this.component.content.dynamicPrompt);
   }

From 314acd435b5a5484c61d7a79f46b83da0df12de4 Mon Sep 17 00:00:00 2001
From: Asher <ashrais@berkeley.edu>
Date: Wed, 5 Aug 2026 09:41:57 -0700
Subject: [PATCH 03/17] Extract Activity Title into standalone
 EditComponentHeaderComponent

---
 .../edit-component-dialog.component.ts        | 20 +++------------
 .../edit-component-header.component.ts        | 25 +++++++++++++++++++
 src/assets/wise5/common/ComponentContent.ts   |  2 +-
 .../component-header.component.html           |  2 +-
 .../component-header.component.ts             | 14 +++++++----
 5 files changed, 40 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/wise5/authoringTool/components/edit-component-header/edit-component-header.component.ts

diff --git a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
index 7a0faf97988..5b1dd9b6230 100644
--- a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
@@ -5,25 +5,23 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { ComponentTypeService } from '../../../services/componentTypeService';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { Component as WISEComponent } from '../../../common/Component';
 import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { EditComponentHeaderComponent } from '../edit-component-header/edit-component-header.component';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   imports: [
     EditComponentComponent,
+    EditComponentHeaderComponent,
     EditComponentAdvancedComponent,
     FormsModule,
     MatButtonModule,
     MatDialogModule,
     MatDividerModule,
-    MatSlideToggle,
-    MatFormFieldModule,
-    MatInputModule
+    MatSlideToggle
   ],
   template: `
     <div class="flex items-center justify-between pe-4">
@@ -35,14 +33,7 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
       @if (advancedMode) {
         <edit-component-advanced class="h-full" [component]="component" />
       } @else {
-        <mat-form-field class="w-full">
-          <mat-label i18n>Header</mat-label>
-          <input
-            matInput
-            [(ngModel)]="data.componentContent.header"
-            (ngModelChange)="headerChanged()"
-          />
-        </mat-form-field>
+        <edit-component-header [componentContent]="data.componentContent" />
         <edit-component
           class="block h-full py-4"
           [componentContent]="data.componentContent"
@@ -85,9 +76,6 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
 export class EditComponentDialogComponent {
   protected advancedMode = false;
 
-  headerChanged(): void {
-    this.projectService.saveProject();
-  }
   protected component: WISEComponent;
   protected componentIndex: number;
   protected componentTypeLabel: string;
diff --git a/src/assets/wise5/authoringTool/components/edit-component-header/edit-component-header.component.ts b/src/assets/wise5/authoringTool/components/edit-component-header/edit-component-header.component.ts
new file mode 100644
index 00000000000..ebbe2b040f7
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/edit-component-header/edit-component-header.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+
+@Component({
+  selector: 'edit-component-header',
+  imports: [FormsModule, MatFormFieldModule, MatInputModule],
+  template: `
+    <mat-form-field class="w-full">
+      <mat-label i18n>Activity Title</mat-label>
+      <input matInput [(ngModel)]="componentContent.title" (ngModelChange)="titleChanged()" />
+    </mat-form-field>
+  `
+})
+export class EditComponentHeaderComponent {
+  @Input() componentContent: any;
+
+  constructor(private projectService: TeacherProjectService) {}
+
+  titleChanged(): void {
+    this.projectService.saveProject();
+  }
+}
diff --git a/src/assets/wise5/common/ComponentContent.ts b/src/assets/wise5/common/ComponentContent.ts
index 20c93469deb..2ea81b9c048 100644
--- a/src/assets/wise5/common/ComponentContent.ts
+++ b/src/assets/wise5/common/ComponentContent.ts
@@ -13,7 +13,7 @@ export interface ComponentContent {
   cRaterRubric?: CRaterRubric;
   dynamicPrompt?: DynamicPrompt;
   excludeFromTotalScore?: boolean;
-  header?: string;
+  title?: string;
   maxScore?: number;
   maxSubmitCount?: number;
   prompt?: string;
diff --git a/src/assets/wise5/directives/component-header/component-header.component.html b/src/assets/wise5/directives/component-header/component-header.component.html
index fd180a63f22..8a392d9c6cc 100644
--- a/src/assets/wise5/directives/component-header/component-header.component.html
+++ b/src/assets/wise5/directives/component-header/component-header.component.html
@@ -1,4 +1,4 @@
-<div class="component-header-header" [innerHTML]="header"></div>
+<div class="activity-title" [innerHTML]="title"></div>
 <div class="component-header flex flex-wrap gap-1">
   <prompt
     [prompt]="component.content.prompt"
diff --git a/src/assets/wise5/directives/component-header/component-header.component.ts b/src/assets/wise5/directives/component-header/component-header.component.ts
index d3ae3d7d4c1..fcdaf7ce275 100644
--- a/src/assets/wise5/directives/component-header/component-header.component.ts
+++ b/src/assets/wise5/directives/component-header/component-header.component.ts
@@ -9,21 +9,25 @@ import { PromptComponent } from '../prompt/prompt.component';
 @Component({
   imports: [PossibleScoreComponent, PromptComponent],
   selector: 'component-header',
-  styles: ['.component-header { padding-bottom: 8px; } .prompt { font-weight: 500; } .component-header-header:not(:empty) { font-size: 24px; line-height: 32px; font-weight: 700; margin-bottom: 8px; }'],
+  styles: ['.component-header { padding-bottom: 8px; } .prompt { font-weight: 500; } .activity-title:not(:empty) { font-size: 24px; line-height: 32px; font-weight: 700; margin-bottom: 8px; }'],
   templateUrl: 'component-header.component.html'
 })
 export class ComponentHeaderComponent {
   @Input() component: WISEComponent;
   protected dynamicPrompt: DynamicPrompt;
   @Output() dynamicPromptChanged: EventEmitter<FeedbackRule> = new EventEmitter<FeedbackRule>();
-  protected header: SafeHtml;
-  protected prompt: SafeHtml;
 
   constructor(protected sanitizer: DomSanitizer) {}
 
+  protected get title(): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(this.component.content.title || '');
+  }
+
+  protected get prompt(): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(this.component.content.prompt || '');
+  }
+
   ngOnInit(): void {
-    this.header = this.sanitizer.bypassSecurityTrustHtml(this.component.content.header || '');
-    this.prompt = this.sanitizer.bypassSecurityTrustHtml(this.component.content.prompt);
     this.dynamicPrompt = new DynamicPrompt(this.component.content.dynamicPrompt);
   }
 

From b11e2db3b71cd53bcb7377d2bad93374f3e96444 Mon Sep 17 00:00:00 2001
From: Asher <ashrais@berkeley.edu>
Date: Wed, 5 Aug 2026 09:44:32 -0700
Subject: [PATCH 04/17] Default Activity Title to component type label on
 creation

---
 src/assets/wise5/services/createComponentService.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/assets/wise5/services/createComponentService.ts b/src/assets/wise5/services/createComponentService.ts
index bd53503ba41..38d4704f83b 100644
--- a/src/assets/wise5/services/createComponentService.ts
+++ b/src/assets/wise5/services/createComponentService.ts
@@ -2,11 +2,13 @@ import { Injectable } from '@angular/core';
 import { TeacherProjectService } from './teacherProjectService';
 import { ComponentServiceLookupService } from './componentServiceLookupService';
 import { Node } from '../common/Node';
+import { ComponentTypeService } from './componentTypeService';
 
 @Injectable()
 export class CreateComponentService {
   constructor(
     private componentServiceLookupService: ComponentServiceLookupService,
+    private componentTypeService: ComponentTypeService,
     private projectService: TeacherProjectService
   ) {}
 
@@ -22,6 +24,7 @@ export class CreateComponentService {
     const node = this.projectService.getNode(nodeId);
     const service = this.componentServiceLookupService.getService(componentType);
     const component = service.createComponent();
+    component.title = this.componentTypeService.getComponentTypeLabel(componentType);
     if (service.componentHasWork(component)) {
       if (node.showSaveButton == false) {
         if (this.projectService.doesAnyComponentInNodeShowSubmitButton(node.id)) {

From de2cdc8d7a346ac861e7de108108ae91dd1c2bfa Mon Sep 17 00:00:00 2001
From: Asher <ashrais@berkeley.edu>
Date: Wed, 5 Aug 2026 09:56:52 -0700
Subject: [PATCH 05/17] Fix prompt not updating live by routing binding through
 getter

---
 .../component-header/component-header.component.html          | 2 +-
 .../directives/component-header/component-header.component.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/assets/wise5/directives/component-header/component-header.component.html b/src/assets/wise5/directives/component-header/component-header.component.html
index 8a392d9c6cc..aedb0c614c8 100644
--- a/src/assets/wise5/directives/component-header/component-header.component.html
+++ b/src/assets/wise5/directives/component-header/component-header.component.html
@@ -1,7 +1,7 @@
 <div class="activity-title" [innerHTML]="title"></div>
 <div class="component-header flex flex-wrap gap-1">
   <prompt
-    [prompt]="component.content.prompt"
+    [prompt]="prompt"
     [nodeId]="component.nodeId"
     [componentId]="component.id"
     [dynamicPrompt]="dynamicPrompt"
diff --git a/src/assets/wise5/directives/component-header/component-header.component.ts b/src/assets/wise5/directives/component-header/component-header.component.ts
index fcdaf7ce275..fea0c8eed44 100644
--- a/src/assets/wise5/directives/component-header/component-header.component.ts
+++ b/src/assets/wise5/directives/component-header/component-header.component.ts
@@ -23,8 +23,8 @@ export class ComponentHeaderComponent {
     return this.sanitizer.bypassSecurityTrustHtml(this.component.content.title || '');
   }
 
-  protected get prompt(): SafeHtml {
-    return this.sanitizer.bypassSecurityTrustHtml(this.component.content.prompt || '');
+  protected get prompt(): string {
+    return this.component.content.prompt || '';
   }
 
   ngOnInit(): void {

From bce26dcf5a7f16144d5cd9a55bc9bcce48713495 Mon Sep 17 00:00:00 2001
From: Asher <ashrais@berkeley.edu>
Date: Wed, 5 Aug 2026 12:31:26 -0700
Subject: [PATCH 06/17] Rename EditComponentHeaderComponent to
 EditComponentTitleComponent

---
 .../edit-component-title.component.ts}                            | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/assets/wise5/authoringTool/components/{edit-component-header/edit-component-header.component.ts => edit-component-title/edit-component-title.component.ts} (100%)

diff --git a/src/assets/wise5/authoringTool/components/edit-component-header/edit-component-header.component.ts b/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
similarity index 100%
rename from src/assets/wise5/authoringTool/components/edit-component-header/edit-component-header.component.ts
rename to src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts

From 4501e618d29216a79f7ec6cc71012c984a0979c4 Mon Sep 17 00:00:00 2001
From: Asher <ashrais@berkeley.edu>
Date: Wed, 5 Aug 2026 12:43:39 -0700
Subject: [PATCH 07/17] Rename EditComponentHeaderComponent to
 EditComponentTitleComponent

---
 .../edit-component-dialog.component.ts                      | 6 +++---
 .../edit-component-title/edit-component-title.component.ts  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
index 5b1dd9b6230..4339621d29d 100644
--- a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
@@ -9,13 +9,13 @@ import { FormsModule } from '@angular/forms';
 import { Component as WISEComponent } from '../../../common/Component';
 import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
-import { EditComponentHeaderComponent } from '../edit-component-header/edit-component-header.component';
+import { EditComponentTitleComponent } from '../edit-component-title/edit-component-title.component';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   imports: [
     EditComponentComponent,
-    EditComponentHeaderComponent,
+    EditComponentTitleComponent,
     EditComponentAdvancedComponent,
     FormsModule,
     MatButtonModule,
@@ -33,7 +33,7 @@ import { EditComponentHeaderComponent } from '../edit-component-header/edit-comp
       @if (advancedMode) {
         <edit-component-advanced class="h-full" [component]="component" />
       } @else {
-        <edit-component-header [componentContent]="data.componentContent" />
+        <edit-component-title [componentContent]="data.componentContent" />
         <edit-component
           class="block h-full py-4"
           [componentContent]="data.componentContent"
diff --git a/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts b/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
index ebbe2b040f7..12e2281b540 100644
--- a/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
@@ -5,7 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 
 @Component({
-  selector: 'edit-component-header',
+  selector: 'edit-component-title',
   imports: [FormsModule, MatFormFieldModule, MatInputModule],
   template: `
     <mat-form-field class="w-full">
@@ -14,7 +14,7 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
     </mat-form-field>
   `
 })
-export class EditComponentHeaderComponent {
+export class EditComponentTitleComponent {
   @Input() componentContent: any;
 
   constructor(private projectService: TeacherProjectService) {}

From 6d12d97c20984a3d3a581906dde430e518b45907 Mon Sep 17 00:00:00 2001
From: Asher <ashrais@berkeley.edu>
Date: Wed, 5 Aug 2026 12:50:43 -0700
Subject: [PATCH 08/17] Format EditComponentTitleComponent to match WISE
 conventions

---
 .../edit-component-title.component.ts                  | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts b/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
index 12e2281b540..854f14e33f6 100644
--- a/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
@@ -1,12 +1,13 @@
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { ComponentContent } from '../../../common/ComponentContent';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 
 @Component({
-  selector: 'edit-component-title',
   imports: [FormsModule, MatFormFieldModule, MatInputModule],
+  selector: 'edit-component-title',
   template: `
     <mat-form-field class="w-full">
       <mat-label i18n>Activity Title</mat-label>
@@ -15,9 +16,10 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
   `
 })
 export class EditComponentTitleComponent {
-  @Input() componentContent: any;
+  private projectService = inject(TeacherProjectService);
 
-  constructor(private projectService: TeacherProjectService) {}
+  @Input() componentContent: ComponentContent;
+  private title: string = '';
 
   titleChanged(): void {
     this.projectService.saveProject();

From f8326f40af4e00ff78da19e781da79977526271c Mon Sep 17 00:00:00 2001
From: ashrrais <ashrais@berkeley.edu>
Date: Mon, 10 Aug 2026 10:40:56 -0700
Subject: [PATCH 09/17] Update
 src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts

Co-authored-by: Hiroki Terashima <honchikun@gmail.com>
---
 .../edit-component-dialog/edit-component-dialog.component.ts     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
index 4339621d29d..1d5d782fec4 100644
--- a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
@@ -75,7 +75,6 @@ import { EditComponentTitleComponent } from '../edit-component-title/edit-compon
 })
 export class EditComponentDialogComponent {
   protected advancedMode = false;
-
   protected component: WISEComponent;
   protected componentIndex: number;
   protected componentTypeLabel: string;

From 664b8d214b6c684e696b8927554a92a57b8c2e16 Mon Sep 17 00:00:00 2001
From: Asher <ashrais@berkeley.edu>
Date: Tue, 11 Aug 2026 21:34:07 -0700
Subject: [PATCH 10/17] Remove Open Response design changes

---
 .../html-student/html-student.component.ts    |  6 +--
 .../openResponse/OpenResponseContent.ts       |  2 -
 .../openResponse/OpenResponseInfo.ts          |  1 +
 .../open-response-authoring.component.html    | 30 ++++-------
 .../open-response-authoring.component.ts      | 16 ++----
 .../open-response-student.component.html      | 10 +---
 .../open-response-student.component.scss      | 50 +------------------
 .../open-response-student.component.ts        |  9 +---
 .../openResponse/openResponseService.ts       | 11 ++--
 .../outside-url-student.component.ts          |  6 +--
 10 files changed, 31 insertions(+), 110 deletions(-)

diff --git a/src/assets/wise5/components/html/html-student/html-student.component.ts b/src/assets/wise5/components/html/html-student/html-student.component.ts
index cb4b40cc82c..1867a8d6720 100644
--- a/src/assets/wise5/components/html/html-student/html-student.component.ts
+++ b/src/assets/wise5/components/html/html-student/html-student.component.ts
@@ -1,4 +1,3 @@
-import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { SafeHtml } from '@angular/platform-browser';
@@ -10,13 +9,14 @@ import { NotebookService } from '../../../services/notebookService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { StudentDataService } from '../../../services/studentDataService';
 import { ComponentStudent } from '../../component-student.component';
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { ComponentService } from '../../componentService';
 
 @Component({
+  imports: [ComponentHeaderComponent],
   selector: 'html-student',
   styleUrl: 'html-student.component.scss',
-  templateUrl: 'html-student.component.html',
-  imports: [ComponentHeaderComponent]
+  templateUrl: 'html-student.component.html'
 })
 export class HtmlStudentComponent extends ComponentStudent {
   protected html: SafeHtml = '';
diff --git a/src/assets/wise5/components/openResponse/OpenResponseContent.ts b/src/assets/wise5/components/openResponse/OpenResponseContent.ts
index cf9772a2899..7289b913dcb 100644
--- a/src/assets/wise5/components/openResponse/OpenResponseContent.ts
+++ b/src/assets/wise5/components/openResponse/OpenResponseContent.ts
@@ -1,10 +1,8 @@
 import { ComponentContent } from '../../common/ComponentContent';
 
 export interface OpenResponseContent extends ComponentContent {
-  backgroundColor?: string;
   completionCriteria: any;
   cRater: any;
-  context?: string;
   enableCRater: boolean;
   enableNotifications: boolean;
   isStudentAudioRecordingEnabled: boolean;
diff --git a/src/assets/wise5/components/openResponse/OpenResponseInfo.ts b/src/assets/wise5/components/openResponse/OpenResponseInfo.ts
index cf66116da26..8479cf9ada0 100644
--- a/src/assets/wise5/components/openResponse/OpenResponseInfo.ts
+++ b/src/assets/wise5/components/openResponse/OpenResponseInfo.ts
@@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo';
 
 export class OpenResponseInfo extends ComponentInfo {
   protected description: string = $localize`Students type a response to a question or prompt.`;
+  protected icon: string = 'edit_note';
   protected label: string = $localize`Open Response`;
   protected previewExamples: any[] = [
     {
diff --git a/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html b/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html
index fed77ee3944..4c0667e6fc7 100644
--- a/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html
+++ b/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html
@@ -1,26 +1,16 @@
 <div class="openResponse">
   @if (!componentContent.showPreviousWork) {
     <div>
-      <div class="flex flex-row justify-end mb-2">
-        <mat-form-field appearance="outline" class="w-48">
-          <mat-label i18n>Background color</mat-label>
-          <input
-            matInput
-            placeholder="#RRGGBB"
-            [(ngModel)]="componentContent.backgroundColor"
-            (ngModelChange)="componentChanged()"
-          />
-        </mat-form-field>
-      </div>
-      <div class="flex flex-col gap-4 mb-4">
-        <div>
-          <label class="text-sm text-gray-600 mb-1 block" i18n>Context</label>
-          <wise-authoring-tinymce-editor
-            [(model)]="componentContent.context"
-            (modelChange)="componentChanged()"
-          />
-        </div>
-      </div>
+      <mat-icon
+        matTooltip="If you want to use rich visuals (images, videos, links, bullets, etc.) in your prompt, use an HTML activity above this"
+        matTooltipPosition="above"
+        i18n-matTooltip
+        >announcement</mat-icon
+      >
+      <edit-component-prompt
+        [componentContent]="componentContent"
+        (promptChangedEvent)="promptChanged($event)"
+      />
     </div>
   }
 </div>
diff --git a/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.ts b/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.ts
index 363075e6442..046c8e76560 100644
--- a/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.ts
+++ b/src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.ts
@@ -1,17 +1,11 @@
 import { Component } from '@angular/core';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
-import { WiseAuthoringTinymceEditorComponent } from '../../../directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component';
-import { FormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component';
 
 @Component({
-  imports: [FormsModule, MatFormFieldModule, MatInputModule, WiseAuthoringTinymceEditorComponent],
+  imports: [EditComponentPrompt, MatIconModule, MatTooltipModule],
   templateUrl: 'open-response-authoring.component.html'
 })
-export class OpenResponseAuthoringComponent extends AbstractComponentAuthoring {
-  componentChanged(): void {
-    this.projectService.nodeChanged();
-    this.projectService.saveProject();
-  }
-}
+export class OpenResponseAuthoringComponent extends AbstractComponentAuthoring {}
diff --git a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html
index 051b49a15ce..31c3b172867 100644
--- a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html
+++ b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html
@@ -1,11 +1,4 @@
-<div
-  class="pt-4 px-6 pb-6 rounded-lg border-2 border-black"
-  [style.background-color]="componentContent.backgroundColor ? (componentContent.backgroundColor.startsWith('#') ? componentContent.backgroundColor : '#' + componentContent.backgroundColor) : 'transparent'"
->
 <component-header [component]="component" />
-@if (componentContent.context) {
-  <div class="or-body mb-4" [innerHTML]="contextHtml"></div>
-}
 <div class="flex flex-row flex-wrap justify-start items-center gap-4">
   @if (isAddToNotebookEnabled()) {
     <button
@@ -32,7 +25,7 @@
     </button>
   }
 </div>
-<div class="my-4 bg-white rounded-lg overflow-hidden or-answer-card">
+<div class="my-2">
   <mat-form-field class="w-full form-field-no-hint">
     <textarea
       matInput
@@ -94,7 +87,6 @@
     (submitButtonClicked)="submitButtonClicked($event)"
   />
 }
-</div>
 @if (mode === 'student') {
   <component-annotations
     [annotations]="latestAnnotations"
diff --git a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.scss b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.scss
index 4bbdb06ce53..24cb2a06e5d 100644
--- a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.scss
+++ b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.scss
@@ -1,51 +1,3 @@
 .student-response {
   min-height: 80px;
-}
-
-.or-answer-card {
-  .mat-mdc-form-field-focus-overlay,
-  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
-    background-color: transparent !important;
-  }
-  .mdc-text-field {
-    padding: 0 !important;
-  }
-
-  border: 2px solid #000000;
-  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.85);
-  transition: none;
-  &:focus-within {
-    box-shadow: none;
-  }
-}
-
-:host ::ng-deep component-save-submit-buttons button.mat-mdc-raised-button:not([disabled]) {
-  --mdc-protected-button-container-color: #ffffff;
-  --mdc-protected-button-label-text-color: #000000;
-  --mdc-protected-button-container-elevation-shadow: none;
-  background-color: #ffffff !important;
-  color: #000000 !important;
-  border: 2px solid #000000 !important;
-  border-radius: 6px;
-  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.85) !important;
-  transition: none !important;
-}
-
-:host ::ng-deep component-save-submit-buttons button.mat-mdc-raised-button:not([disabled]):active {
-  box-shadow: none !important;
-  transition: none !important;
-}
-
-.or-header {
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  font-size: 24px;
-  line-height: 32px;
-  font-weight: 700;
-}
-
-.or-body {
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  font-size: 16px;
-  line-height: 22px;
-  font-weight: 400;
-}
+}
\ No newline at end of file
diff --git a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts
index 8bf7024bf22..a575027229e 100644
--- a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts
+++ b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts
@@ -1,6 +1,4 @@
-import { ChangeDetectorRef, Component, inject } from '@angular/core';
-import { SafeHtml } from '@angular/platform-browser';
-import { WiseLinkService } from '../../../../../app/services/wiseLinkService';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { timeout } from 'rxjs/operators';
 import { DialogWithoutCloseComponent } from '../../../directives/dialog-without-close/dialog-without-close.component';
@@ -58,8 +56,6 @@ import { ComponentAnnotationsComponent } from '../../../directives/componentAnno
   templateUrl: 'open-response-student.component.html'
 })
 export class OpenResponseStudent extends ComponentStudent {
-  protected contextHtml: SafeHtml = '';
-  private wiseLinkService = inject(WiseLinkService);
   audioAttachments: any[] = [];
   cRaterTimeout: number = 40000;
   isPublicSpaceExist: boolean = false;
@@ -98,9 +94,6 @@ export class OpenResponseStudent extends ComponentStudent {
 
   ngOnInit(): void {
     super.ngOnInit();
-    this.contextHtml = this.wiseLinkService.generateHtmlWithWiseLink(
-      this.componentContent.context || ''
-    );
     if (hasConnectedComponent(this.componentContent, 'showWork')) {
       this.handleConnectedComponents();
     } else if (
diff --git a/src/assets/wise5/components/openResponse/openResponseService.ts b/src/assets/wise5/components/openResponse/openResponseService.ts
index 7c576e391c6..507aa26d735 100644
--- a/src/assets/wise5/components/openResponse/openResponseService.ts
+++ b/src/assets/wise5/components/openResponse/openResponseService.ts
@@ -1,14 +1,15 @@
 'use strict';
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ComponentService } from '../componentService';
 import { OpenResponseCompletionCriteriaService } from './openResponseCompletionCriteriaService';
 
+
 @Injectable()
 export class OpenResponseService extends ComponentService {
-  constructor(private completionCriteriaService: OpenResponseCompletionCriteriaService) {
-    super();
-  }
+  protected type: string = 'OpenResponse';
+
+  private completionCriteriaService = inject(OpenResponseCompletionCriteriaService);
 
   getComponentTypeLabel(): string {
     return $localize`Open Response`;
@@ -16,7 +17,7 @@ export class OpenResponseService extends ComponentService {
 
   createComponent() {
     const component: any = super.createComponent();
-    component.type = 'OpenResponse';
+    component.type = this.type;
     component.starterSentence = null;
     component.isStudentAttachmentEnabled = false;
     component.ai = {
diff --git a/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts b/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts
index 5b1629c88b5..939585e3a82 100644
--- a/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts
+++ b/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts
@@ -1,4 +1,3 @@
-import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -9,12 +8,13 @@ import { NotebookService } from '../../../services/notebookService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { StudentDataService } from '../../../services/studentDataService';
 import { ComponentStudent } from '../../component-student.component';
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { ComponentService } from '../../componentService';
 
 @Component({
+  imports: [ComponentHeaderComponent],
   selector: 'outside-url-student',
-  templateUrl: 'outside-url-student.component.html',
-  imports: [ComponentHeaderComponent]
+  templateUrl: 'outside-url-student.component.html'
 })
 export class OutsideUrlStudent extends ComponentStudent {
   url: SafeUrl;

From 1f6f96b39260efa196b89105e531b0d91c614b78 Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Wed, 12 Aug 2026 13:59:12 -0700
Subject: [PATCH 11/17] Clean up styles and remove HTML support for activity
 titles

---
 .../edit-component-dialog.component.ts                    | 6 +++---
 .../component-header/component-header.component.html      | 6 ++++--
 .../component-header/component-header.component.ts        | 8 +++-----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
index 907ce0948b9..49213bb04db 100644
--- a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
@@ -34,13 +34,13 @@ import { EditComponentTitleComponent } from '../edit-component-title/edit-compon
       <mat-slide-toggle color="primary" [(ngModel)]="advancedMode" i18n>Advanced</mat-slide-toggle>
     </div>
     <mat-divider class="!m-0" />
-    <mat-dialog-content class="!max-h-none" style="padding-top: 28px;" [class.advanced-component-authoring]="advancedMode">
+    <mat-dialog-content class="!max-h-none" [class.advanced-component-authoring]="advancedMode">
       @if (advancedMode) {
         <edit-component-advanced class="h-full" [component]="component" />
       } @else {
-        <edit-component-title [componentContent]="data.componentContent" />
+        <edit-component-title class="block pt-4" [componentContent]="data.componentContent" />
         <edit-component
-          class="block h-full py-4"
+          class="block h-full pb-4"
           [componentContent]="data.componentContent"
           [nodeId]="data.nodeId"
         />
diff --git a/src/assets/wise5/directives/component-header/component-header.component.html b/src/assets/wise5/directives/component-header/component-header.component.html
index aedb0c614c8..a5cf91d8be1 100644
--- a/src/assets/wise5/directives/component-header/component-header.component.html
+++ b/src/assets/wise5/directives/component-header/component-header.component.html
@@ -1,5 +1,7 @@
-<div class="activity-title" [innerHTML]="title"></div>
-<div class="component-header flex flex-wrap gap-1">
+@if (title) {
+  <div class="mat-headline-6">{{ title }}</div>
+}
+<div class="flex flex-wrap gap-1 mb-4">
   <prompt
     [prompt]="prompt"
     [nodeId]="component.nodeId"
diff --git a/src/assets/wise5/directives/component-header/component-header.component.ts b/src/assets/wise5/directives/component-header/component-header.component.ts
index fea0c8eed44..10a5354177c 100644
--- a/src/assets/wise5/directives/component-header/component-header.component.ts
+++ b/src/assets/wise5/directives/component-header/component-header.component.ts
@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Component as WISEComponent } from '../../common/Component';
 import { FeedbackRule } from '../../components/common/feedbackRule/FeedbackRule';
 import { DynamicPrompt } from '../dynamic-prompt/DynamicPrompt';
@@ -9,7 +8,6 @@ import { PromptComponent } from '../prompt/prompt.component';
 @Component({
   imports: [PossibleScoreComponent, PromptComponent],
   selector: 'component-header',
-  styles: ['.component-header { padding-bottom: 8px; } .prompt { font-weight: 500; } .activity-title:not(:empty) { font-size: 24px; line-height: 32px; font-weight: 700; margin-bottom: 8px; }'],
   templateUrl: 'component-header.component.html'
 })
 export class ComponentHeaderComponent {
@@ -17,10 +15,10 @@ export class ComponentHeaderComponent {
   protected dynamicPrompt: DynamicPrompt;
   @Output() dynamicPromptChanged: EventEmitter<FeedbackRule> = new EventEmitter<FeedbackRule>();
 
-  constructor(protected sanitizer: DomSanitizer) {}
+  constructor() {}
 
-  protected get title(): SafeHtml {
-    return this.sanitizer.bypassSecurityTrustHtml(this.component.content.title || '');
+  protected get title(): string {
+    return this.component.content.title || '';
   }
 
   protected get prompt(): string {

From c285a97f83b06bbc9fe0d395bd1cacdcecfc6abd Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Wed, 12 Aug 2026 13:59:50 -0700
Subject: [PATCH 12/17] Fix tests

---
 src/app/possible-score/possible-score.component.ts | 2 +-
 src/assets/wise5/services/projectService.ts        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/possible-score/possible-score.component.ts b/src/app/possible-score/possible-score.component.ts
index 732d8457948..4055d889778 100644
--- a/src/app/possible-score/possible-score.component.ts
+++ b/src/app/possible-score/possible-score.component.ts
@@ -12,6 +12,6 @@ export class PossibleScoreComponent {
   constructor(private projectService: ProjectService) {}
 
   ngOnInit(): void {
-    this.hidePossibleScores = this.projectService.getThemeSettings().hidePossibleScores;
+    this.hidePossibleScores = this.projectService.getThemeSettings()?.hidePossibleScores;
   }
 }
diff --git a/src/assets/wise5/services/projectService.ts b/src/assets/wise5/services/projectService.ts
index 0fdf55ce8a9..cc2ba827e27 100644
--- a/src/assets/wise5/services/projectService.ts
+++ b/src/assets/wise5/services/projectService.ts
@@ -804,7 +804,7 @@ export class ProjectService {
    */
   getThemeSettings(): any {
     let themeSettings = {};
-    if (this.project.themeSettings) {
+    if (this.project?.themeSettings) {
       if (this.project.theme) {
         // TODO: check if this is a valid theme (using ConfigService) rather than just truthy
         themeSettings = this.project.themeSettings[this.project.theme];
@@ -1873,7 +1873,7 @@ export class ProjectService {
   }
 
   getSpeechToTextSettings(): any {
-    return this.project.speechToText;
+    return this.project?.speechToText;
   }
 
   getPreviousNodeId(nodeId: string): string {

From 6e6df8733d2e0617e8f1658bac876c8373cccac4 Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Wed, 12 Aug 2026 14:36:37 -0700
Subject: [PATCH 13/17] Update dependencies

---
 package-lock.json | 517 +++++++++++++++++++++++++++++++++++++++++-----
 package.json      |   3 +-
 2 files changed, 472 insertions(+), 48 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 433156aa4ca..bc3f0dce568 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,6 +52,7 @@
         "iframe-resizer": "^3.6.6",
         "jquery": "^3.6.0",
         "jwt-decode": "^3.1.2",
+        "lightningcss": "^1.33.0",
         "lz-string": "^1.4.4",
         "marked": "^18.0.3",
         "mathjax": "^3.2.2",
@@ -3873,6 +3874,34 @@
         "node": ">=22.12.0"
       }
     },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.6.3.tgz",
@@ -8368,6 +8397,255 @@
         "tailwindcss": "4.3.0"
       }
     },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@tailwindcss/oxide": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.0.tgz",
@@ -8630,6 +8908,42 @@
         }
       }
     },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.12.tgz",
+      "integrity": "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -9367,6 +9681,36 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz",
+      "integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-walk/node_modules/acorn": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
+      "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/adjust-sourcemap-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
@@ -12197,6 +12541,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -16064,6 +16417,21 @@
         "postcss": "^8.0.0"
       }
     },
+    "node_modules/gulp-postcss/node_modules/acorn": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
+      "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/gulp-postcss/node_modules/postcss-load-config": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
@@ -16094,6 +16462,52 @@
         }
       }
     },
+    "node_modules/gulp-postcss/node_modules/ts-node": {
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/gulp-postcss/node_modules/yaml": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
@@ -19071,9 +19485,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
-      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
       "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
@@ -19086,23 +19500,23 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-android-arm64": "1.32.0",
-        "lightningcss-darwin-arm64": "1.32.0",
-        "lightningcss-darwin-x64": "1.32.0",
-        "lightningcss-freebsd-x64": "1.32.0",
-        "lightningcss-linux-arm-gnueabihf": "1.32.0",
-        "lightningcss-linux-arm64-gnu": "1.32.0",
-        "lightningcss-linux-arm64-musl": "1.32.0",
-        "lightningcss-linux-x64-gnu": "1.32.0",
-        "lightningcss-linux-x64-musl": "1.32.0",
-        "lightningcss-win32-arm64-msvc": "1.32.0",
-        "lightningcss-win32-x64-msvc": "1.32.0"
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
       }
     },
     "node_modules/lightningcss-android-arm64": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
-      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
       "cpu": [
         "arm64"
       ],
@@ -19120,9 +19534,9 @@
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
-      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
       "cpu": [
         "arm64"
       ],
@@ -19140,9 +19554,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
-      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
       "cpu": [
         "x64"
       ],
@@ -19160,9 +19574,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
-      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
       "cpu": [
         "x64"
       ],
@@ -19180,9 +19594,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
-      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
       "cpu": [
         "arm"
       ],
@@ -19200,9 +19614,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
-      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
       "cpu": [
         "arm64"
       ],
@@ -19220,9 +19634,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
-      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
       "cpu": [
         "arm64"
       ],
@@ -19240,9 +19654,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
-      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
       "cpu": [
         "x64"
       ],
@@ -19260,9 +19674,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
-      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
       "cpu": [
         "x64"
       ],
@@ -19280,9 +19694,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
-      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
       "cpu": [
         "arm64"
       ],
@@ -19300,9 +19714,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
-      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
       "cpu": [
         "x64"
       ],
@@ -30330,6 +30744,15 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/v8flags": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",
diff --git a/package.json b/package.json
index b7c81b84f4f..a2843d83662 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "iframe-resizer": "^3.6.6",
     "jquery": "^3.6.0",
     "jwt-decode": "^3.1.2",
+    "lightningcss": "^1.33.0",
     "lz-string": "^1.4.4",
     "marked": "^18.0.3",
     "mathjax": "^3.2.2",
@@ -235,4 +236,4 @@
       ]
     ]
   }
-}
\ No newline at end of file
+}

From 1cb8906e2760d5b03198f189fcef4ca67fcc4092 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 12 Aug 2026 21:40:36 +0000
Subject: [PATCH 14/17] Updated messages

---
 src/messages.xlf | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/messages.xlf b/src/messages.xlf
index 2ec1ae93178..777a1d3a1c2 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -11173,14 +11173,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Edit: <x id="INTERPOLATION" equiv-text="{{ componentIndex }}"/>. <x id="INTERPOLATION_1" equiv-text="{{ componentTypeLabel }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
-          <context context-type="linenumber">29,30</context>
+          <context context-type="linenumber">31,32</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6201638315245239510" datatype="html">
         <source>Advanced</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
-          <context context-type="linenumber">32,35</context>
+          <context context-type="linenumber">34,37</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-node-advanced-button/edit-node-advanced-button.component.ts</context>
@@ -11191,7 +11191,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source> Close </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
-          <context context-type="linenumber">49,54</context>
+          <context context-type="linenumber">52,57</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html</context>
@@ -11202,6 +11202,13 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">114,119</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="6423582700668158689" datatype="html">
+        <source>Activity Title</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts</context>
+          <context context-type="linenumber">13,14</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="3021342818793175999" datatype="html">
         <source>Authoring Tool Menu</source>
         <context-group purpose="location">
@@ -22071,7 +22078,7 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>Credit: <x id="INTERPOLATION" equiv-text="{{ infoString }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.html</context>
-          <context context-type="linenumber">7,9</context>
+          <context context-type="linenumber">8,10</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5734555357630269297" datatype="html">
@@ -22508,28 +22515,28 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>You must submit work on &quot;<x id="PH" equiv-text="this.otherStepTitle"/>&quot; to view the summary.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-student/summary-student.component.ts</context>
-          <context context-type="linenumber">134</context>
+          <context context-type="linenumber">136</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3834814461916183420" datatype="html">
         <source>You must complete &quot;<x id="PH" equiv-text="this.otherStepTitle"/>&quot; to view the summary.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-student/summary-student.component.ts</context>
-          <context context-type="linenumber">136</context>
+          <context context-type="linenumber">138</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1745852243024604075" datatype="html">
         <source>You must submit work on &quot;<x id="PH" equiv-text="this.otherStepTitle"/>&quot; to view the class summary.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-student/summary-student.component.ts</context>
-          <context context-type="linenumber">142</context>
+          <context context-type="linenumber">144</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8412691431688558361" datatype="html">
         <source>You must complete &quot;<x id="PH" equiv-text="this.otherStepTitle"/>&quot; to view the class summary.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-student/summary-student.component.ts</context>
-          <context context-type="linenumber">144</context>
+          <context context-type="linenumber">146</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6594489851569621957" datatype="html">

From c0348a21fe89c4e0ba8df7ff69ee4212f4a04767 Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Mon, 17 Aug 2026 13:36:59 -0700
Subject: [PATCH 15/17] Make activity title input translatable

---
 .../edit-component-title.component.ts         | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts b/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
index 854f14e33f6..f5d2b4a230d 100644
--- a/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
@@ -1,27 +1,28 @@
 import { Component, inject, Input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
 import { ComponentContent } from '../../../common/ComponentContent';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { TranslatableInputComponent } from '../translatable-input/translatable-input.component';
 
 @Component({
-  imports: [FormsModule, MatFormFieldModule, MatInputModule],
+  imports: [FormsModule, TranslatableInputComponent],
   selector: 'edit-component-title',
   template: `
-    <mat-form-field class="w-full">
-      <mat-label i18n>Activity Title</mat-label>
-      <input matInput [(ngModel)]="componentContent.title" (ngModelChange)="titleChanged()" />
-    </mat-form-field>
+    <translatable-input
+      [content]="componentContent"
+      key="title"
+      label="Activity Title"
+      i18n-label
+      (defaultLanguageTextChanged)="titleChanged($event)"
+    />
   `
 })
 export class EditComponentTitleComponent {
-  private projectService = inject(TeacherProjectService);
-
   @Input() componentContent: ComponentContent;
-  private title: string = '';
+  private projectService = inject(TeacherProjectService);
 
-  titleChanged(): void {
+  titleChanged(title: string): void {
+    this.componentContent.title = title;
     this.projectService.saveProject();
   }
 }

From 79dadbf9986d2915b220bd821635597545537c90 Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Mon, 17 Aug 2026 13:37:53 -0700
Subject: [PATCH 16/17] Add clear button to translatable input

---
 .../edit-component-title.component.ts         |  1 +
 .../translatable-input.component.html         | 22 +++++++++++++++++++
 .../translatable-input.component.ts           | 11 ++++++----
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts b/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
index f5d2b4a230d..7fab4a680c3 100644
--- a/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts
@@ -10,6 +10,7 @@ import { TranslatableInputComponent } from '../translatable-input/translatable-i
   template: `
     <translatable-input
       [content]="componentContent"
+      [hasClearButton]="true"
       key="title"
       label="Activity Title"
       i18n-label
diff --git a/src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.html b/src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.html
index ef89f7a2f34..bfa72386a89 100644
--- a/src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.html
+++ b/src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.html
@@ -8,6 +8,17 @@
       (ngModelChange)="translationTextChanged.next($event)"
       placeholder="{{ placeholder }}"
     />
+    @if (hasClearButton && translationText) {
+      <button
+        matSuffix
+        mat-icon-button
+        (click)="translationText = ''; translationTextChanged.next('')"
+        aria-label="Clear"
+        i18n-aria-label
+      >
+        <mat-icon>clear</mat-icon>
+      </button>
+    }
     @if (hint) {
       <mat-hint>{{ hint }}</mat-hint>
     }
@@ -33,6 +44,17 @@
       (ngModelChange)="defaultLanguageTextChanged.next($event)"
       placeholder="{{ placeholder }}"
     />
+    @if (hasClearButton && content[key]) {
+      <button
+        matSuffix
+        mat-icon-button
+        (click)="content[key] = ''; defaultLanguageTextChanged.next('')"
+        aria-label="Clear"
+        i18n-aria-label
+      >
+        <mat-icon>clear</mat-icon>
+      </button>
+    }
     @if (hint) {
       <mat-hint>{{ hint }}</mat-hint>
     }
diff --git a/src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.ts b/src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.ts
index 005c4246981..c8f37d9d912 100644
--- a/src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.ts
+++ b/src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.ts
@@ -1,14 +1,17 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { FormsModule } from '@angular/forms';
 import { AbstractTranslatableFieldComponent } from '../abstract-translatable-field/abstract-translatable-field.component';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
-  imports: [FormsModule, MatIconModule, MatInputModule],
+  imports: [FormsModule, MatButtonModule, MatIconModule, MatInputModule],
   selector: 'translatable-input',
   styleUrl: '../abstract-translatable-field/abstract-translatable-field.component.scss',
   templateUrl: './translatable-input.component.html'
 })
-export class TranslatableInputComponent extends AbstractTranslatableFieldComponent {}
+export class TranslatableInputComponent extends AbstractTranslatableFieldComponent {
+  @Input() protected hasClearButton: boolean = false;
+}

From 8fb8de62af1a82f4a7d7a652d13d4c7e49976859 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 17 Aug 2026 20:42:10 +0000
Subject: [PATCH 17/17] Updated messages

---
 src/messages.xlf | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/messages.xlf b/src/messages.xlf
index 777a1d3a1c2..b4a46520f8c 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -6778,6 +6778,14 @@
           <context context-type="sourcefile">src/app/teacher/share-run-dialog/share-run-dialog.component.html</context>
           <context context-type="linenumber">54,56</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.html</context>
+          <context context-type="linenumber">17,20</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.html</context>
+          <context context-type="linenumber">53,56</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.html</context>
           <context context-type="linenumber">52,54</context>
@@ -11206,7 +11214,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Activity Title</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts</context>
-          <context context-type="linenumber">13,14</context>
+          <context context-type="linenumber">15,17</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3021342818793175999" datatype="html">
@@ -11324,7 +11332,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Translate with AI</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.html</context>
-          <context context-type="linenumber">22,27</context>
+          <context context-type="linenumber">33,38</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/translatable-rich-text-editor/translatable-rich-text-editor.component.html</context>