fix: add event listeners to focus parent comment

Author: maribethb

core/comments/comment_editor.ts

@@ -33,6 +33,7 @@ export class CommentEditor implements IFocusableNode {
   constructor(
     public workspace: WorkspaceSvg,
     commentId?: string,
+    private onFinishEditing?: () => void,
   ) {
     this.foreignObject = dom.createSvgElement(Svg.FOREIGNOBJECT, {
       'class': 'blocklyCommentForeignObject',
@@ -75,6 +76,14 @@ export class CommentEditor implements IFocusableNode {
         getFocusManager().focusNode(this);
       },
     );
+
+    // Register listener for keydown events that would finish editing.
+    browserEvents.conditionalBind(
+      this.textArea,
+      'keydown',
+      this,
+      this.handleKeyDown,
+    );
   }
 
   /** Gets the dom structure for this comment editor. */
@@ -86,6 +95,7 @@ export class CommentEditor implements IFocusableNode {
   getText(): string {
     return this.text;
   }
+
   /** Sets the current text of the comment and fires change listeners. */
   setText(text: string) {
     this.textArea.value = text;
@@ -105,6 +115,18 @@ export class CommentEditor implements IFocusableNode {
     }
   }
 
+  /**
+   * Do something when the user indicates they've finished editing.
+   *
+   * @param e Keyboard event.
+   */
+  private handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape' || (e.key === 'Enter' && (e.ctrlKey || e.metaKey))) {
+      if (this.onFinishEditing) this.onFinishEditing();
+      e.stopPropagation();
+    }
+  }
+
   /** Registers a callback that listens for text changes. */
   addTextChangeListener(listener: (oldText: string, newText: string) => void) {
     this.textChangeListeners.push(listener);

core/comments/comment_view.ts

@@ -230,7 +230,13 @@ export class CommentView implements IRenderedElement {
    * Creates the text area where users can type. Registers event listeners.
    */
   private createTextArea() {
-    const commentEditor = new CommentEditor(this.workspace, this.commentId);
+    // When the user is done editing comment, focus the entire comment.
+    const onFinishEditing = () => this.svgRoot.focus();
+    const commentEditor = new CommentEditor(
+      this.workspace,
+      this.commentId,
+      onFinishEditing,
+    );
 
     this.svgRoot.appendChild(commentEditor.getDom());