fix: add the style dropdown to the file menu

[JohnMcLear]

Fixes #52

Root cause

ep_headings2 renders its dropdown into eejsBlock_editbarMenuLeft only. It
hooks none of ep_file_menu_toolbar's menu blocks, so with that plugin
installed the Format menu has no way to set a heading — exactly what
@JohnMcLear said in the issue: "Missing the fileMenu file and relevant
entry in ep.json".

Fix

• templates/fileMenu.ejs — the same options as the editbar dropdown,
  reusing the existing ep_headings.* localization ids (no new keys)
• eejsBlock_dd_format_block in index.js and ep.json — the paragraph
  formatting group of the Format menu, right below Outdent, which is where
  a line level style belongs (block added in
  fix: group the Format menu so plugins land where they belong ep_file_menu_toolbar#121)
• the file menu select is found by class="heading-selection" rather than
  repeating the editbar select's id, and postAceInit / aceEditEvent now
  use #heading-selection, select.heading-selection, so both dropdowns
  apply a style and both follow the caret

That combined-selector shape is what ep_font_size ('#font-size, select.size-selection') and ep_font_color ('.color-selection, #color-selection') already do for their file menu dropdown.

This needs an ep_file_menu_toolbar that has the dd_format_block block
(ether/ep_file_menu_toolbar#121).

Evidence

Etherpad develop + ep_file_menu_toolbar#121 + this branch, Format menu:

Bold, Italic, Underline, Strikethrough, ...
──
Ordered List, Unordered list, Indent, Outdent, Left, Center, Right, Justify,
Style ▸ (Style | Normal | Heading 1 | Heading 2 | Heading 3 | Heading 4 | Code)
──
Font Family, Font Color, Font Size
──
Clear Authorship Colors

Tests

static/tests/backend/specs/filemenu.js (runs in the existing backend job)
and static/tests/frontend-new/specs/file_menu.spec.ts, which applies a
heading from the menu in a browser and skips itself when
ep_file_menu_toolbar is not installed.

With the fix:

✔ file menu offers the same styles as the editbar
✔ the styles are localized
✔ the file menu select is found by class, not by a duplicate id
✔ registers the entry in the paragraph formatting group

✓ ep_headings2 file menu › Applies a heading from the Format menu
✓ ep_headings2 file menu › Both heading dropdowns follow the caret

Reverted to master the backend suite fails on the missing template
(ENOENT: templates/fileMenu.ejs), which is the bug. The existing
headings.spec.ts suite still passes with the change.

🤖 Generated with Claude Code

https://claude.ai/code/session_012kA75NPq8nGRidAwhPXeCi

[qodo-code-review]

ⓘ Qodo reviews are paused because the subscription is no longer active. Ask your workspace admin to reactivate the subscription to resume reviews. Manage billing

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Add heading style dropdown to the file menu

🐞 Bug fix 🧪 Tests 🕐 20-40 Minutes

AI Description

• Adds the heading style dropdown to ep_file_menu_toolbar's Format menu.
• Shares heading selection and caret synchronization across editbar and file-menu controls.
• Adds backend and Playwright coverage for registration, localization, behavior, and
 synchronization.

Diagram

graph TD
  Hooks["Plugin hooks"] --> Format["Format block"] --> FileSelect["File menu select"] --> Binding["Shared binding"] --> Ace["Ace editor"]
  Editbar["Editbar select"] --> Binding

Loading

High-Level Assessment

The approach is appropriate: it uses ep_file_menu_toolbar's dedicated paragraph-formatting hook, avoids duplicate DOM IDs with a class selector, and reuses the existing heading handler for both controls. Separate handlers or duplicated IDs would add synchronization risk without providing a meaningful benefit.

Files changed (6) +135 / -3

Bug fix (3) +24 / -3

index.jsRender the heading file-menu template +2/-0

Render the heading file-menu template

• Exports the 'eejsBlock_dd_format_block' handler and connects it to the new file-menu template.

index.js

index.jsBind and synchronize both heading selectors +6/-3

Bind and synchronize both heading selectors

• Expands heading selection handling to cover the editbar ID and file-menu class selector. Caret-driven state updates now refresh both controls together.

static/js/index.js

fileMenu.ejsAdd the localized file-menu style selector +16/-0

Add the localized file-menu style selector

• Adds a Format submenu containing Normal, Heading 1–4, and Code options using existing localization IDs. The select uses a class rather than duplicating the editbar control's ID.

templates/fileMenu.ejs

Tests (2) +110 / -0

filemenu.jsVerify file-menu template and hook registration +55/-0

Verify file-menu template and hook registration

• Adds backend tests ensuring both menus expose equivalent localized styles, the new selector avoids duplicate IDs, and the paragraph-formatting hook is registered and exported.

static/tests/backend/specs/filemenu.js

file_menu.spec.tsExercise heading selection through the Format menu +55/-0

Exercise heading selection through the Format menu

• Adds Playwright coverage for applying a heading from the file menu and synchronizing both dropdowns with the caret. Tests skip when ep_file_menu_toolbar is unavailable.

static/tests/frontend-new/specs/file_menu.spec.ts

Other (1) +1 / -0

ep.jsonRegister the file-menu formatting hook +1/-0

Register the file-menu formatting hook

• Registers ep_headings2 for ep_file_menu_toolbar's paragraph-formatting block so the plugin can contribute its style selector to the Format menu.

ep.json

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can describe a rule in plain language on the Rules page and Qodo drafts it for you

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗