1 files changed, 29 insertions, 3 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 1aeb90286..2a843c83b 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -114,6 +114,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     private _rules: RichTextRules | undefined;
     private _forceUncollapse = true; // if the cursor doesn't move between clicks, then the selection will disappear for some reason.  This flags the 2nd click as happening on a selection which allows bullet points to toggle
     private _break = true;
+    @observable private _editLabel = false;
     public ProseRef?: HTMLDivElement;
     public get EditorView() {
         return this._editorView;
@@ -1405,8 +1406,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         );
         this.tryUpdateScrollHeight();
 
-        console.log('S' + this.Document.image);
-        console.log('S' + DocCast(this.Document).image);
         if (this.Document.image) {
             // const node = schema.nodes.dashDoc.create({
             //     width: 200,
@@ -2097,7 +2096,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         return (
             <Tooltip
                 title={
-                    <div className="answer-tooltip" style={{ minWidth: '200px' }}>
+                    <div className="answer-tooltip" style={{ minWidth: '150px' }}>
                         {StrCast(this.Document.quiz)}
                     </div>
                 }>
@@ -2109,6 +2108,32 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         );
     }
 
+    @computed get editAnswer() {
+        return (
+            <Tooltip
+                title={
+                    <div className="answer-tooltip" style={{ minWidth: '150px' }}>
+                        {this._editLabel ? 'save' : 'edit correct answer'}
+                    </div>
+                }>
+                <div className="answer-tool-tip" onPointerDown={e => setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, () => this.editLabelAnswer())}>
+                    <FontAwesomeIcon className="edit-icon" color={this._editLabel ? 'white' : 'black'} icon="pencil" size="sm" />
+                </div>
+            </Tooltip>
+        );
+    }
+
+    editLabelAnswer = () => {
+        // when click the pencil, set the text to the quiz content. when click off, set the quiz text to that and set textbox to nothing.
+        if (!this._editLabel) {
+            this.dataDoc.text = StrCast(this.Document.quiz);
+        } else {
+            this.Document.quiz = RTFCast(this.dataDoc.text).Text;
+            this.dataDoc.text = '';
+        }
+        this._editLabel = !this._editLabel;
+    };
+
     get fieldKey() {
         return this._fieldKey;
     }
@@ -2228,6 +2253,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                     {this.audioHandle}
                     {this.layoutDoc._layout_enableAltContentUI && !this.layoutDoc._chromeHidden ? this.overlayAlternateIcon : null}
                     {this.Document.showQuiz ? this.answerIcon : null}
+                    {this.Document.showQuiz ? this.editAnswer : null}
                 </div>
             </div>
         );