From e31a6bfd1ec6dc27b5fcb0a1466e9ddaa82a13e7 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Tue, 23 Jan 2024 16:32:36 -0800
Subject: [PATCH 1/2] Pass in ComponentContent to EditComponentPrompt instead
 of prompt. This will let us convert the input to TranslatableInput.

---
 .../edit-component-prompt.component.html                  | 2 +-
 .../edit-component-prompt.component.ts                    | 8 +++-----
 .../animation-authoring.component.html                    | 2 +-
 .../audio-oscillator-authoring.component.html             | 2 +-
 .../concept-map-authoring.component.html                  | 2 +-
 .../dialog-guidance-authoring.component.html              | 2 +-
 .../discussion-authoring.component.html                   | 2 +-
 .../draw/draw-authoring/draw-authoring.component.html     | 2 +-
 .../graph/graph-authoring/graph-authoring.component.html  | 2 +-
 .../label/label-authoring/label-authoring.component.html  | 2 +-
 .../match/match-authoring/match-authoring.component.html  | 2 +-
 .../multiple-choice-authoring.component.html              | 2 +-
 .../open-response-authoring.component.html                | 2 +-
 .../peer-chat-authoring.component.html                    | 2 +-
 .../show-group-work-authoring.component.html              | 2 +-
 .../show-my-work-authoring.component.html                 | 2 +-
 .../summary-authoring/summary-authoring.component.html    | 2 +-
 .../table/table-authoring/table-authoring.component.html  | 2 +-
 18 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html b/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html
index 8e869467ba4..199a75829d4 100644
--- a/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html
+++ b/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html
@@ -2,7 +2,7 @@
   <mat-label i18n>Prompt</mat-label>
   <textarea
     matInput
-    [(ngModel)]="prompt"
+    [(ngModel)]="componentContent.prompt"
     (ngModelChange)="promptChangedEvent.next($event)"
     placeholder="Enter Prompt Here"
     i18n-placeholder
diff --git a/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.ts b/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.ts
index 0842366cf93..610edfc3011 100644
--- a/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.ts
+++ b/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.ts
@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
 
 @Component({
   selector: 'edit-component-prompt',
@@ -6,9 +7,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   templateUrl: 'edit-component-prompt.component.html'
 })
 export class EditComponentPrompt {
-  @Input()
-  prompt: string;
-
-  @Output()
-  promptChangedEvent = new EventEmitter<string>();
+  @Input() componentContent: ComponentContent;
+  @Output() promptChangedEvent = new EventEmitter<string>();
 }
diff --git a/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.html b/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.html
index 957fe971914..6d1d548a76c 100644
--- a/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.html
+++ b/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayout="row">
diff --git a/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.html b/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.html
index 02081886c33..d9b91c8d8b9 100644
--- a/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.html
+++ b/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <span i18n>Oscillator Types</span>
diff --git a/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.html b/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.html
index 449c346bdf5..0234d59d9f4 100644
--- a/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.html
+++ b/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="column" fxLayoutGap="16px">
   <edit-component-prompt
-    [prompt]="componentContent.prompt"
+    [componentContent]="componentContent"
     (promptChangedEvent)="promptChanged($event)"
   ></edit-component-prompt>
   <div fxLayoutGap="16px">
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.html b/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.html
index 2376a8c10bd..a45f9633d15 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.html
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="column" fxLayoutGap="16px">
   <edit-component-prompt
-    [prompt]="componentContent.prompt"
+    [componentContent]="componentContent"
     (promptChangedEvent)="promptChanged($event)"
   ></edit-component-prompt>
   <mat-form-field>
diff --git a/src/assets/wise5/components/discussion/discussion-authoring/discussion-authoring.component.html b/src/assets/wise5/components/discussion/discussion-authoring/discussion-authoring.component.html
index ceef0d2fdfc..ef2e22be9c7 100644
--- a/src/assets/wise5/components/discussion/discussion-authoring/discussion-authoring.component.html
+++ b/src/assets/wise5/components/discussion/discussion-authoring/discussion-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div class="checkbox-container">
diff --git a/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.html b/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.html
index 77b8feddd09..a7390d4cf16 100644
--- a/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.html
+++ b/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayout="row" fxLayoutAlign="start center">
diff --git a/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html b/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html
index 3c5d7a83e07..1f9cabfecbf 100644
--- a/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html
+++ b/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayout="row wrap">
diff --git a/src/assets/wise5/components/label/label-authoring/label-authoring.component.html b/src/assets/wise5/components/label/label-authoring/label-authoring.component.html
index c5ba17b3469..6064e7c97c8 100644
--- a/src/assets/wise5/components/label/label-authoring/label-authoring.component.html
+++ b/src/assets/wise5/components/label/label-authoring/label-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div>
diff --git a/src/assets/wise5/components/match/match-authoring/match-authoring.component.html b/src/assets/wise5/components/match/match-authoring/match-authoring.component.html
index 4df70ea41ec..6b631ee7e0e 100644
--- a/src/assets/wise5/components/match/match-authoring/match-authoring.component.html
+++ b/src/assets/wise5/components/match/match-authoring/match-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <p>
diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html
index 9da63951aa1..7640c6b913d 100644
--- a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html
+++ b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <p>
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 8a80c3c5604..a813c28789b 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
@@ -11,7 +11,7 @@
         >announcement</mat-icon
       >
       <edit-component-prompt
-        [prompt]="componentContent.prompt"
+        [componentContent]="componentContent"
         (promptChangedEvent)="promptChanged($event)"
       ></edit-component-prompt>
     </div>
diff --git a/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.html b/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.html
index 49a40c5571e..0714d30ff76 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.html
+++ b/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.html
@@ -1,6 +1,6 @@
 <edit-component-prompt
   *ngIf="!componentContent.dynamicPrompt?.enabled"
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <edit-dynamic-prompt
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.html b/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.html
index c0d5cdd3ea9..2336682c44a 100644
--- a/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.html
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayoutGap="20px">
diff --git a/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.html b/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.html
index 2b2f7012d2d..1a38841448f 100644
--- a/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.html
+++ b/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayoutGap="20px">
diff --git a/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html b/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html
index ec1349db1f6..4fc1161e83c 100644
--- a/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html
+++ b/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <p i18n>Choose the step and component to show the summary data for:</p>
diff --git a/src/assets/wise5/components/table/table-authoring/table-authoring.component.html b/src/assets/wise5/components/table/table-authoring/table-authoring.component.html
index 9febc7bc5e6..d067d9acc9f 100644
--- a/src/assets/wise5/components/table/table-authoring/table-authoring.component.html
+++ b/src/assets/wise5/components/table/table-authoring/table-authoring.component.html
@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayout="row wrap">

From 9962f6e7ec6207ab87f9815d4a10d7147d78e06a Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Tue, 23 Jan 2024 16:36:07 -0800
Subject: [PATCH 2/2] Convert EditComponentPrompt input into TranslatableInput

---
 .../edit-component-prompt.component.html      | 26 ++++++++++---------
 .../edit-component-prompt.component.ts        |  2 +-
 src/messages.xlf                              |  4 +--
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html b/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html
index 199a75829d4..e96353ab6ad 100644
--- a/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html
+++ b/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html
@@ -1,12 +1,14 @@
-<mat-form-field class="prompt" appearance="fill">
-  <mat-label i18n>Prompt</mat-label>
-  <textarea
-    matInput
-    [(ngModel)]="componentContent.prompt"
-    (ngModelChange)="promptChangedEvent.next($event)"
-    placeholder="Enter Prompt Here"
-    i18n-placeholder
-    cdkTextareaAutosize
-  >
-  </textarea>
-</mat-form-field>
+<translatable-input [content]="componentContent" key="prompt" class="prompt" appearance="fill">
+  <mat-form-field>
+    <mat-label i18n>Prompt</mat-label>
+    <textarea
+      matInput
+      [(ngModel)]="componentContent.prompt"
+      (ngModelChange)="promptChangedEvent.next($event)"
+      placeholder="Enter Prompt Here"
+      i18n-placeholder
+      cdkTextareaAutosize
+    >
+    </textarea>
+  </mat-form-field>
+</translatable-input>
diff --git a/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.ts b/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.ts
index 610edfc3011..510240641b7 100644
--- a/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.ts
+++ b/src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.ts
@@ -3,7 +3,7 @@ import { ComponentContent } from '../../../assets/wise5/common/ComponentContent'
 
 @Component({
   selector: 'edit-component-prompt',
-  styles: ['.prompt {width: 100%; }'],
+  styles: ['.prompt {width: 100%; mat-form-field { width:100%} }'],
   templateUrl: 'edit-component-prompt.component.html'
 })
 export class EditComponentPrompt {
diff --git a/src/messages.xlf b/src/messages.xlf
index 9c51f4dd7e6..cd3cbc315e3 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -967,7 +967,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Prompt</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html</context>
-          <context context-type="linenumber">2</context>
+          <context context-type="linenumber">3</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-dynamic-prompt-rules/edit-dynamic-prompt-rules.component.html</context>
@@ -986,7 +986,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Enter Prompt Here</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html</context>
-          <context context-type="linenumber">7</context>
+          <context context-type="linenumber">8</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7affaae0e14529c0192d5a4bfabd6fcb1ea27529" datatype="html">