Pathological page load: 5,001 synchronous DOM inserts on every pad

[JohnMcLear]

static/js/main.js appends 5,001 <li> elements to `.specialChars` synchronously inside `$(document).ready`:

```js
let i = 0;
while (i <= 5000) {
$('.specialChars').append(`

&#${i}

`);
i++;
}
```

Every pad load pays this cost, regardless of whether the user ever opens the Special Characters modal. Three problems with this:

1. Main-thread stall at load. 5,001 separate jQuery append calls are each a DOM mutation. On a cold page load with many other plugins hydrating, the total blocking time is 1.5–3 s on a typical laptop. It caused a demo-gif tool I'm using on `ether/*` plugins to race its Ctrl+A / Delete bootstrap because Playwright's `editor.click()` returned before the 5 k inserts had settled.

2. Modal is unusable. A 5,000-item grid isn't a picker, it's a wall of glyphs — codepoints 0–31 are control chars (invisible) and most of the "gap" ranges between scripts are either reserved, combining marks, or non-printable. Users end up scrolling through thousands of blank or near-identical squares.

3. Wasted allocation for everyone who never opens the modal. The modal starts hidden; for the ~95% of pad loads where the user never clicks the airplane icon, we've populated a 5,001-node off-screen DOM for no reason.

Suggested fix

Populate `.specialChars` only on first open of the modal, and pick a curated character set (or at least skip codepoints < 0x20 and the unassigned ranges). For example:

```js
let populated = false;
$('.insertSpecialCharacter').click(() => {
if (!populated) {
const chars = [];
for (let i = 0x20; i <= 0x2FF; i++) chars.push(`

&#${i}

`);
// Latin, IPA, diacritics, Greek, Cyrillic, common math + currency...
$('.specialChars').append(chars.join(''));
populated = true;
}
$('#specialCharactersModal').toggleClass('popup-show');
});
```

Single `append` with a joined string is also dramatically faster than 5,001 separate calls.

Happy to send a PR if this analysis is on the right track.

🤖 Generated with Claude Code

[JohnMcLear]

Adding a concrete finding while regenerating the demo on current master:

Clicking any character in the picker throws ReferenceError: require is not defined.

Caught in headless Chromium with just this plugin and ep_etherpad-lite 2.6.1 installed:

PAGEERROR: require is not defined
ERR-BOX-TEXTS: "ReferenceError: Uncaught ReferenceError: require is not defined
 at .../ep_special_characters/static/js/main.js at line 16"

Line 16 of static/js/main.js is inside the character click handler:

$('#specialCharactersModal').on('click', '.specialChar', function () {
    ...
    const padeditor = require('ep_etherpad-lite/static/js/pad_editor').padeditor;  // ← throws
    ...
});

Current Etherpad bundles plugin client JS with esbuild. Other plugins that use the same require('ep_etherpad-lite/...') pattern work fine — the difference here seems to be either (a) that the require is nested inside a $(document).ready(...) callback nested inside a jQuery .on('click', ...) handler, or (b) something about this particular bundle entry point isn't being transformed. Either way the effect for users is: the picker opens, but clicking any character produces the "An error occurred" dialog and inserts nothing.

Not proposing a fix yet — my first naïve attempt (ES-module import at top, hoisted) caused the iframe to never load at all, so there's something nontrivial about how this plugin is bundled that I haven't sorted out.

I also had to revert #86 (the animated demo) for now: the recording captured exactly this failure, which is worse than no image. That's merged as #89 and adds a pointer back to this issue in the README so users aren't surprised.