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);