feat(toolbarSelect): DRY up the toolbar <select>-change boilerplate

[JohnMcLear]

Summary

Three core-adjacent plugins — ep_font_color, ep_font_size, ep_headings2 — all implement the same toolbar <select> change handler by hand:

hs.on('change', function () {
  const value = $(this).val();
  const intValue = parseInt(value, 10);
  if (!isNaN(intValue)) {
    context.ace.callWithAce((ace) => ace.ace_doX(intValue), 'op', true);
    hs.val('dummy');
    context.ace.focus();
  }
});

This PR adds a shared toolbarSelect({selector, context, invoke}) helper that handles the four steps — value coercion, callWithAce wrap, sentinel reset, and editor-focus restore — so each plugin can drop the boilerplate.

const {toolbarSelect} = require('ep_plugin_helpers/toolbar-select');

exports.postAceInit = (hookName, context) => {
  toolbarSelect({
    selector: '#font-size, select.size-selection',
    context,
    invoke: (ace, value) => ace.ace_doInsertsizes(value),
    op: 'insertsize',
  });
};

Why focus restoration matters

The context.ace.focus() call in each plugin is intentional and load-bearing: without it, picking from the toolbar leaves focus stuck on the <select> (or its nice-select wrapper), and the next keystroke goes there instead of the pad. The existing select_focus_restore.spec.ts test in core covers this for ep_headings2.

This helper restores focus unconditionally — even when the coerced value is unusable — so an accidental pick on a non-numeric option still leaves the user typing back in the pad. That preserves the WCAG-relevant property that the per-plugin .focus() calls already provided (context: ether/etherpad#7255).

API

Field	Required	Default	Description
selector	yes	—	jQuery selector for the toolbar <select>.
context	yes	—	The postAceInit context — must expose context.ace.callWithAce and context.ace.focus.
invoke	yes	—	(ace, coercedValue) => void. Runs inside callWithAce so the edit joins the undo stack.
op	no	'toolbarSelect'	callWithAce label.
coerce	no	'int'	'int' | 'number' | 'string' | 'identity' or a custom (raw) => coerced | null. Returning null skips the edit but still restores focus.
resetValue	no	'dummy'	Value written back to the select so the same option can be picked again.
onAfterChange	no	—	(coercedValue) => void, called after focus restoration. Errors swallowed and logged.

Client-only — imported via the sub-path ep_plugin_helpers/toolbar-select, not via the package root, so esbuild doesn't pull any server-only deps into the pad bundle (same pattern as pad-toggle / pad-select).

Tests

12 new mocha tests cover:

• Config validation (missing selector, bad context, non-function invoke, empty op, unknown coerce token, non-function onAfterChange)
• Int coercion + reset + invoke ordering
• Focus runs even when coercion returns null
• Custom function coercers
• Custom resetValue
• onAfterChange invocation + error swallowing

All 103 tests pass (12 new + 91 existing).

Version bump

0.5.3 → 0.6.0 — new public API surface, no behavior change for existing helpers.

Follow-up PRs

Once this merges and ships to npm:

• ep_font_color → migrate to toolbarSelect
• ep_font_size → migrate to toolbarSelect
• ep_headings2 → migrate to toolbarSelect

🤖 Generated with Claude Code

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →