feat: make comment editor separately focusable from comment itself

core/comments/comment_editor.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as browserEvents from '../browser_events.js';
+import {getFocusManager} from '../focus_manager.js';
+import {IFocusableNode} from '../interfaces/i_focusable_node.js';
+import {IFocusableTree} from '../interfaces/i_focusable_tree.js';
+import * as dom from '../utils/dom.js';
+import {Svg} from '../utils/svg.js';
+import {WorkspaceSvg} from '../workspace_svg.js';
+
+export class CommentEditor implements IFocusableNode {
+  id?: string;
+  /** The foreignObject containing the HTML text area. */
+  foreignObject: SVGForeignObjectElement;
+
+  /** The text area where the user can type. */
+  textArea: HTMLTextAreaElement;
+
+  constructor(
+    public workspace: WorkspaceSvg,
+    commentSvgRoot: SVGGElement,
+    commentId?: string,
+  ) {
+    this.foreignObject = dom.createSvgElement(
+      Svg.FOREIGNOBJECT,
+      {
+        'class': 'blocklyCommentForeignObject',
+      },
+      commentSvgRoot,
+    );
+    const body = document.createElementNS(dom.HTML_NS, 'body');
+    body.setAttribute('xmlns', dom.HTML_NS);
+    body.className = 'blocklyMinimalBody';
+    this.textArea = document.createElementNS(
+      dom.HTML_NS,
+      'textarea',
+    ) as HTMLTextAreaElement;
+    dom.addClass(this.textArea, 'blocklyCommentText');
+    dom.addClass(this.textArea, 'blocklyTextarea');
+    dom.addClass(this.textArea, 'blocklyText');
+    body.appendChild(this.textArea);
+    this.foreignObject.appendChild(body);
+
+    if (commentId) {
+      this.id = commentId + '_textarea_';
+      this.textArea.setAttribute('id', this.id);
+    }
+
+    browserEvents.conditionalBind(
+      this.textArea,
+      'pointerdown',
+      this,
+      (e: PointerEvent) => {
+        // don't allow this event to bubble up
+        // and steal focus away from the editor/comment.
+        e.stopPropagation();
+        getFocusManager().focusNode(this);
+      },
+    );
+  }
+
+  getFocusableElement(): HTMLElement | SVGElement {
+    return this.textArea;
+  }
+  getFocusableTree(): IFocusableTree {
+    return this.workspace;
+  }
+  onNodeFocus(): void {}
+  onNodeBlur(): void {}
+  canBeFocused(): boolean {
+    return true;
+  }
+}

core/comments/comment_view.ts

@@ -15,6 +15,7 @@ import * as drag from '../utils/drag.js';
 import {Size} from '../utils/size.js';
 import {Svg} from '../utils/svg.js';
 import {WorkspaceSvg} from '../workspace_svg.js';
+import {CommentEditor} from './comment_editor.js';
 
 export class CommentView implements IRenderedElement {
   /** The root group element of the comment view. */
@@ -106,7 +107,12 @@ export class CommentView implements IRenderedElement {
   /** The default size of newly created comments. */
   static defaultCommentSize = new Size(120, 100);
 
-  constructor(readonly workspace: WorkspaceSvg) {
+  public commentEditor: CommentEditor | undefined;
+
+  constructor(
+    readonly workspace: WorkspaceSvg,
+    private commentId?: string,
+  ) {
     this.svgRoot = dom.createSvgElement(Svg.G, {
       'class': 'blocklyComment blocklyEditable blocklyDraggable',
     });
@@ -240,26 +246,12 @@ export class CommentView implements IRenderedElement {
     foreignObject: SVGForeignObjectElement;
     textArea: HTMLTextAreaElement;
   } {
-    const foreignObject = dom.createSvgElement(
-      Svg.FOREIGNOBJECT,
-      {
-        'class': 'blocklyCommentForeignObject',
-      },
+    this.commentEditor = new CommentEditor(
+      this.workspace,
       svgRoot,
+      this.commentId,
     );
-    const body = document.createElementNS(dom.HTML_NS, 'body');
-    body.setAttribute('xmlns', dom.HTML_NS);
-    body.className = 'blocklyMinimalBody';
-    const textArea = document.createElementNS(
-      dom.HTML_NS,
-      'textarea',
-    ) as HTMLTextAreaElement;
-    dom.addClass(textArea, 'blocklyCommentText');
-    dom.addClass(textArea, 'blocklyTextarea');
-    dom.addClass(textArea, 'blocklyText');
-    body.appendChild(textArea);
-    foreignObject.appendChild(body);
-
+    const {foreignObject, textArea} = this.commentEditor;
     browserEvents.conditionalBind(textArea, 'change', this, this.onTextChange);
 
     return {foreignObject, textArea};

core/comments/rendered_workspace_comment.ts

@@ -47,7 +47,7 @@ export class RenderedWorkspaceComment
     IFocusableNode
 {
   /** The class encompassing the svg elements making up the workspace comment. */
-  private view: CommentView;
+  view: CommentView;
 
   public readonly workspace: WorkspaceSvg;
 
@@ -59,7 +59,7 @@ export class RenderedWorkspaceComment
 
     this.workspace = workspace;
 
-    this.view = new CommentView(workspace);
+    this.view = new CommentView(workspace, this.id);
     // Set the size to the default size as defined in the superclass.
     this.view.setSize(this.getSize());
     this.view.setEditable(this.isEditable());
@@ -224,13 +224,7 @@ export class RenderedWorkspaceComment
   private startGesture(e: PointerEvent) {
     const gesture = this.workspace.getGesture(e);
     if (gesture) {
-      if (browserEvents.isTargetInput(e)) {
-        // If the text area was the focus, don't allow this event to bubble up
-        // and steal focus away from the editor/comment.
-        e.stopPropagation();
-      } else {
-        gesture.handleCommentStart(e, this);
-      }
+      gesture.handleCommentStart(e, this);
       getFocusManager().focusNode(this);
     }
   }

core/workspace_svg.ts

@@ -2715,6 +2715,7 @@ export class WorkspaceSvg
 
   /** See IFocusableTree.lookUpFocusableNode. */
   lookUpFocusableNode(id: string): IFocusableNode | null {
+    if (!id) return null;
     // Check against flyout items if this workspace is part of a flyout. Note
     // that blocks may match against this pass before reaching getBlockById()
     // below (but only for a flyout workspace).
@@ -2757,21 +2758,31 @@ export class WorkspaceSvg
       return null;
     }
 
+    // Search for a specific workspace comment editor
+    // (only if id seems like it is one).
+    const commentEditorIndicator = id.indexOf('_textarea_');
+    if (commentEditorIndicator !== -1) {
+      const commentId = id.substring(0, commentEditorIndicator);
+      const comment = this.getCommentById(commentId);
+      if (
+        comment instanceof RenderedWorkspaceComment &&
+        comment.canBeFocused() &&
+        comment.view.commentEditor
+      ) {
+        return comment.view.commentEditor;
+      }
+    }
+
     // Search for a specific block.
     const block = this.getAllBlocks(false).find(
       (block) => block.getFocusableElement().id === id,
     );
     if (block) return block;
 
-    // Search for a workspace comment (semi-expensive).
-    for (const comment of this.getTopComments()) {
-      if (
-        comment instanceof RenderedWorkspaceComment &&
-        comment.canBeFocused() &&
-        comment.getFocusableElement().id === id
-      ) {
-        return comment;
-      }
+    // Search for a workspace comment.
+    const comment = this.getCommentById(id);
+    if (comment instanceof RenderedWorkspaceComment && comment.canBeFocused()) {
+      return comment;
     }
 
     // Search for icons and bubbles (which requires an expensive getAllBlocks).