From 8fb8da5c06cd22e1b701168823ad22f74b7661e9 Mon Sep 17 00:00:00 2001
From: John McLear <john@mclear.co.uk>
Date: Fri, 15 May 2026 19:03:04 +0100
Subject: [PATCH] feat: migrate toolbar <select> handler to
 ep_plugin_helpers/toolbar-select

Replaces the hand-rolled change handler with the shared `toolbarSelect`
helper that newly ships in ep_plugin_helpers 0.6.0. Behavior is
preserved: int coercion, callWithAce wrap with the same `insertsize`
op label, `'dummy'` sentinel reset, and editor-focus restore after the
edit so the next keystroke doesn't get swallowed by the toolbar
control.

The helper restores focus unconditionally (even when the picked value
fails to coerce). For this plugin that means a slight behavioral
improvement: previously, picking the dummy/blank entry left focus
sitting on the <select>; now it always lands back in the pad. This
matches the (already unconditional) behavior in ep_headings2 and is the
WCAG-friendly default.

Depends on ep_plugin_helpers >= 0.6.0 (ether/ep_plugin_helpers#17).
Refs ether/etherpad#7255

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 package.json       |  2 +-
 static/js/index.js | 17 ++++++-----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 84ed84e..152cb8a 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "url": "https://etherpad.org/"
   },
   "dependencies": {
-    "ep_plugin_helpers": "^0.2.7"
+    "ep_plugin_helpers": "^0.6.0"
   },
   "devDependencies": {
     "eslint": "^8.57.1",
diff --git a/static/js/index.js b/static/js/index.js
index fc92416..0bc819a 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const {inlineAttribute} = require('ep_plugin_helpers/attributes');
+const {toolbarSelect} = require('ep_plugin_helpers/toolbar-select');
 const shared = require('./shared');
 
 const fontSize = inlineAttribute({attr: 'font-size'});
@@ -9,17 +10,11 @@ exports.aceAttribsToClasses = fontSize.aceAttribsToClasses;
 exports.aceCreateDomLine = fontSize.aceCreateDomLine;
 
 exports.postAceInit = (hookName, context) => {
-  const hs = $('#font-size, select.size-selection');
-  hs.on('change', function () {
-    const value = $(this).val();
-    const intValue = parseInt(value, 10);
-    if (!isNaN(intValue)) {
-      context.ace.callWithAce((ace) => {
-        ace.ace_doInsertsizes(intValue);
-      }, 'insertsize', true);
-      hs.val('dummy');
-      context.ace.focus();
-    }
+  toolbarSelect({
+    selector: '#font-size, select.size-selection',
+    context,
+    invoke: (ace, value) => ace.ace_doInsertsizes(value),
+    op: 'insertsize',
   });
   $('.font_size').hover(() => {
     $('.submenu > .size-selection').attr('size', 6);