From 4d4283f74669698ec3cfaf8ee2c953acad524197 Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Thu, 25 Jul 2024 11:06:35 -0400
Subject: edit labels

---
 .../nodes/formattedText/FormattedTextBox.scss      | 10 +++++++
 .../views/nodes/formattedText/FormattedTextBox.tsx | 32 ++++++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

(limited to 'src/client/views/nodes/formattedText')

diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 227cd4312..71706084f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -100,6 +100,16 @@ audiotag:hover {
         cursor: pointer;
         border-radius: 50%;
     }
+
+    .edit-icon {
+        position: absolute;
+        right: 35;
+        bottom: 10;
+        display: inline-block;
+        font-size: 20px;
+        cursor: pointer;
+        border-radius: 50%;
+    }
 }
 
 .answer-tooltip {
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>
         );
-- 
cgit v1.2.3-70-g09d2