feat: truncate long text in menu items

packages/blockly/core/menuitem.ts

@@ -13,11 +13,15 @@
 
 import * as aria from './utils/aria.js';
 import * as idGenerator from './utils/idgenerator.js';
+import * as tooltip from './tooltip.js';
 
 /**
  * Class representing an item in a menu.
  */
 export class MenuItem {
+  /** Maximum characters of text to display before adding an ellipsis. */
+  maxDisplayLength = 50;
+
   /** Is the menu item clickable, as opposed to greyed-out. */
   private enabled = true;
 
@@ -76,7 +80,15 @@ export class MenuItem {
 
     let contentDom: Node = this.content as HTMLElement;
     if (typeof this.content === 'string') {
-      contentDom = document.createTextNode(this.content);
+      let displayText = this.content;
+      if (this.content.length > this.maxDisplayLength) {
+        displayText = this.content.substring(0, this.maxDisplayLength - 1) + '…';
+
+        (element as any).tooltip = this.content;
+        tooltip.bindMouseEvents(element);
+      }
+
+      contentDom = document.createTextNode(displayText);
     }
     content.appendChild(contentDom);
     element.appendChild(content);

packages/blockly/tests/mocha/menu_item_test.js

@@ -173,4 +173,25 @@ suite('Menu items', function () {
     this.menuItem.performAction(new Event('click'));
     assert.isTrue(called);
   });
+
+  test('truncates long text and binds tooltip', function () {
+    const longText = 'w'.repeat(300);
+    this.menuItem = new Blockly.MenuItem(longText);
+    this.menuItem.createDom();
+
+    const element = this.menuItem.getElement();
+    assert.equal(element.textContent.length, this.menuItem.maxDisplayLength);
+    assert.isTrue(element.textContent.endsWith('…'));
+    assert.equal(element.tooltip, longText);
+  });
+
+  test('does not truncate or bind tooltip for short text', function () {
+    const shortText = 'Hello World';
+    this.menuItem = new Blockly.MenuItem(shortText);
+    this.menuItem.createDom();
+
+    const element = this.menuItem.getElement();
+    assert.equal(element.textContent, shortText);
+    assert.isUndefined(element.tooltip);
+  });
 });