Class: CommentEditor

Defined in: packages/blockly/core/comments/comment_editor.ts:30

The part of a comment that can be typed into.

Implements

• IFocusableNode

Properties index

Property	Description
id	-
workspace	-

Methods index

Method	Description
getDom	Gets the dom structure for this comment editor.
getText	Gets the current text of the comment.
setText	Sets the current text of the comment and fires change listeners.
getParent	Returns the parent object that owns this comment editor, if any.
addTextChangeListener	Registers a callback that listens for text changes.
removeTextChangeListener	Removes the given listener from the list of text change listeners.
setPlaceholderText	Sets the placeholder text displayed for an empty comment.
setEditable	Sets whether the textarea is editable. If not, the textarea will be readonly.
updateSize	Update the size of the comment editor element.
getFocusableElement	Returns the DOM element that can be explicitly requested to receive focus.
getFocusableTree	Returns the closest parent tree of this node (in cases where a tree has distinct trees underneath it), which represents the tree to which this node belongs.
onNodeFocus	Called when this node receives active focus.
onNodeBlur	Called when this node loses active focus. It may still have passive focus.
canBeFocused	Indicates whether this node allows focus. If this returns false then none of the other IFocusableNode methods will be called.

Constructors

Constructor

new CommentEditor(
   workspace, 
   commentId, 
   onFinishEditing?
): CommentEditor;

Defined in: packages/blockly/core/comments/comment_editor.ts:49

Parameters

Parameter	Type
workspace	WorkspaceSvg
commentId	string
onFinishEditing?	() => void

Returns

CommentEditor

Properties

id

id: string;

Defined in: packages/blockly/core/comments/comment_editor.ts:31

---

workspace

workspace: WorkspaceSvg;

Defined in: packages/blockly/core/comments/comment_editor.ts:50

Methods

getDom()

getDom(): SVGForeignObjectElement;

Defined in: packages/blockly/core/comments/comment_editor.ts:124

Gets the dom structure for this comment editor.

Returns

SVGForeignObjectElement

---

getText()

getText(): string;

Defined in: packages/blockly/core/comments/comment_editor.ts:129

Gets the current text of the comment.

Returns

string

---

setText()

setText(text): void;

Defined in: packages/blockly/core/comments/comment_editor.ts:134

Sets the current text of the comment and fires change listeners.

Parameters

Parameter	Type
text	string

Returns

void

---

getParent()

getParent(): 
  | BlockSvg
  | RenderedWorkspaceComment
  | undefined;

Defined in: packages/blockly/core/comments/comment_editor.ts:152

Returns the parent object that owns this comment editor, if any.

Returns

| BlockSvg | RenderedWorkspaceComment | undefined

---

addTextChangeListener()

addTextChangeListener(listener): void;

Defined in: packages/blockly/core/comments/comment_editor.ts:182

Registers a callback that listens for text changes.

Parameters

Parameter	Type
listener	(oldText, newText) => void

Returns

void

---

removeTextChangeListener()

removeTextChangeListener(listener): void;

Defined in: packages/blockly/core/comments/comment_editor.ts:187

Removes the given listener from the list of text change listeners.

Parameters

Parameter	Type
listener	() => void

Returns

void

---

setPlaceholderText()

setPlaceholderText(text): void;

Defined in: packages/blockly/core/comments/comment_editor.ts:195

Sets the placeholder text displayed for an empty comment.

Parameters

Parameter	Type
text	string

Returns

void

---

setEditable()

setEditable(isEditable): void;

Defined in: packages/blockly/core/comments/comment_editor.ts:200

Sets whether the textarea is editable. If not, the textarea will be readonly.

Parameters

Parameter	Type
isEditable	boolean

Returns

void

---

updateSize()

updateSize(size, topBarSize): void;

Defined in: packages/blockly/core/comments/comment_editor.ts:209

Update the size of the comment editor element.

Parameters

Parameter	Type
size	Size
topBarSize	Size

Returns

void

---

getFocusableElement()

getFocusableElement(): HTMLElement | SVGElement;

Defined in: packages/blockly/core/comments/comment_editor.ts:221

Returns the DOM element that can be explicitly requested to receive focus.

IMPORTANT: Please note that this element is expected to have a visual presence on the page as it will both be explicitly focused and have its style changed depending on its current focus state (i.e. blurred, actively focused, and passively focused). The element will have one of two styles attached (where no style indicates blurred/not focused):

• blocklyActiveFocus
• blocklyPassiveFocus

The returned element must also have a valid ID specified, and this ID should be unique across the entire page. Failing to have a properly unique ID could result in trying to focus one node (such as via a mouse click) leading to another node with the same ID actually becoming focused by FocusManager.

The returned element must be visible if the node is ever focused via FocusManager.focusNode() or FocusManager.focusTree(). It's allowed for an element to be hidden until onNodeFocus() is called, or become hidden with a call to onNodeBlur().

It's expected the actual returned element will not change for the lifetime of the node (that is, its properties can change but a new element should never be returned). Also, the returned element will have its tabindex overwritten throughout the lifecycle of this node and FocusManager.

If a node requires the ability to be focused directly without first being focused via FocusManager then it must set its own tab index.

Returns

HTMLElement | SVGElement

The HTMLElement or SVGElement which can both receive focus and be visually represented as actively or passively focused for this node.

Implementation of

IFocusableNode.getFocusableElement

---

getFocusableTree()

getFocusableTree(): IFocusableTree;

Defined in: packages/blockly/core/comments/comment_editor.ts:224

Returns the closest parent tree of this node (in cases where a tree has distinct trees underneath it), which represents the tree to which this node belongs.

Returns

IFocusableTree

The node's IFocusableTree.

Implementation of

IFocusableNode.getFocusableTree

---

onNodeFocus()

onNodeFocus(): void;

Defined in: packages/blockly/core/comments/comment_editor.ts:227

Called when this node receives active focus.

Note that it's fine for implementations to change visibility modifiers, but they should avoid the following:

• Creating or removing DOM elements (including via the renderer or drawer).
• Affecting focus via DOM focus() calls or the FocusManager.

Implementations may consider scrolling themselves into view here; that is not handled by the focus manager.

Returns

void

Implementation of

IFocusableNode.onNodeFocus

---

onNodeBlur()

onNodeBlur(): void;

Defined in: packages/blockly/core/comments/comment_editor.ts:237

Called when this node loses active focus. It may still have passive focus.

This has the same implementation restrictions as onNodeFocus().

Returns

void

Implementation of

IFocusableNode.onNodeBlur

---

canBeFocused()

canBeFocused(): boolean;

Defined in: packages/blockly/core/comments/comment_editor.ts:238

Indicates whether this node allows focus. If this returns false then none of the other IFocusableNode methods will be called.

Note that special care must be taken if implementations of this function dynamically change their return value value over the lifetime of the node as certain environment conditions could affect the focusability of this node's DOM element (such as whether the element has a positive or zero tabindex). Also, changing from a true to a false value while the node holds focus will not immediately change the current focus of the node nor FocusManager's internal state, and thus may result in some of the node's functions being called later on when defocused (since it was previously considered focusable at the time of being focused).

Implementations should generally always return true here unless there are circumstances under which this node should be skipped for focus considerations. Examples may include being disabled, read-only, a purely visual decoration, or a node with no visual representation that must implement this interface (e.g. due to a parent interface extending it). Keep in mind accessibility best practices when determining whether a node should be focusable since even disabled and read-only elements are still often relevant to providing organizational context to users (particularly when using a screen reader).

Returns

boolean

Whether this node can be focused by FocusManager.

Implementation of

IFocusableNode.canBeFocused