fix: add the style dropdown to the file menu

ep.json

@@ -14,6 +14,7 @@
       },
       "hooks": {
         "eejsBlock_editbarMenuLeft": "ep_headings2/index",
+        "eejsBlock_dd_format_block": "ep_headings2/index",
         "collectContentPre": "ep_headings2/static/js/shared",
         "collectContentPost": "ep_headings2/static/js/shared",
         "ccRegisterBlockElements": "ep_headings2/static/js/shared",

index.js

@@ -18,5 +18,7 @@ const headingsExport = lineAttributeExport({
 });
 
 exports.eejsBlock_editbarMenuLeft = template('ep_headings2/templates/editbarButtons.ejs');
+// ep_file_menu_toolbar: paragraph formatting group of the Format menu.
+exports.eejsBlock_dd_format_block = template('ep_headings2/templates/fileMenu.ejs');
 exports.stylesForExport = headingsExport.stylesForExport;
 exports.getLineHTMLForExport = headingsExport.getLineHTMLForExport;

static/js/index.js

@@ -22,7 +22,9 @@ exports.aceDomLineProcessLineAttributes = headings.aceDomLineProcessLineAttribut
 // fixed #130.
 exports.postAceInit = (hookName, context) => {
   toolbarSelect({
-    selector: '#heading-selection',
+    // The editbar dropdown and, when ep_file_menu_toolbar is installed, the
+    // copy in the Format menu.
+    selector: '#heading-selection, select.heading-selection',
     context,
     invoke: (ace, value) => ace.ace_doInsertHeading(value),
     op: 'insertheading',
@@ -46,7 +48,8 @@ exports.aceEditEvent = (hookName, call) => {
     const attributeManager = call.documentAttributeManager;
     const rep = call.rep;
     const activeAttributes = {};
-    $('#heading-selection').val('dummy').niceSelect('update');
+    const headingSelect = $('#heading-selection, select.heading-selection');
+    headingSelect.val('dummy').niceSelect('update');
 
     const firstLine = rep.selStart[0];
     const lastLine = Math.max(firstLine, rep.selEnd[0] - ((rep.selEnd[1] === 0) ? 1 : 0));
@@ -66,7 +69,7 @@ exports.aceEditEvent = (hookName, call) => {
     $.each(activeAttributes, (k, attr) => {
       if (attr.count === totalNumberOfLines) {
         const ind = tags.indexOf(k);
-        $('#heading-selection').val(ind).niceSelect('update');
+        headingSelect.val(ind).niceSelect('update');
       }
     });
   }, 250);

static/tests/backend/specs/filemenu.js

@@ -0,0 +1,55 @@
+'use strict';
+
+const assert = require('assert').strict;
+const fs = require('fs');
+const path = require('path');
+const ejs = require('ep_etherpad-lite/node_modules/ejs');
+
+const root = path.resolve(__dirname, '..', '..', '..', '..');
+const render = (name) =>
+  ejs.render(fs.readFileSync(path.join(root, 'templates', name), 'utf8'), {});
+const locales = JSON.parse(fs.readFileSync(path.join(root, 'locales', 'en.json'), 'utf8'));
+const epJson = JSON.parse(fs.readFileSync(path.join(root, 'ep.json'), 'utf8'));
+
+// Every <option value=...> with the localization id of its label.
+const options = (html) => {
+  const found = {};
+  const re = /<option value="([^"]+)"[^>]*data-l10n-id="([^"]+)"/g;
+  for (let m = re.exec(html); m; m = re.exec(html)) found[m[1]] = m[2];
+  return found;
+};
+
+describe(__filename, function () {
+  let fileMenu;
+
+  before(function () {
+    fileMenu = render('fileMenu.ejs');
+  });
+
+  // https://github.com/ether/ep_headings2/issues/52
+  it('file menu offers the same styles as the editbar', function () {
+    assert.deepEqual(options(fileMenu), options(render('editbarButtons.ejs')));
+  });
+
+  it('the styles are localized', function () {
+    const ids = Object.values(options(fileMenu));
+    assert(ids.length > 1, `no localized options in the file menu:\n${fileMenu}`);
+    for (const id of ids) assert(locales[id], `${id} is missing from locales/en.json`);
+  });
+
+  it('the file menu select is found by class, not by a duplicate id', function () {
+    // postAceInit binds '#heading-selection, select.heading-selection'. Reusing
+    // the editbar's id here would give the page two elements with the same id
+    // and only the first would ever be updated.
+    assert.match(fileMenu, /<select[^>]*class="[^"]*\bheading-selection\b/);
+    assert(!fileMenu.includes('id="heading-selection"'),
+        'the file menu select must not reuse the editbar select id');
+  });
+
+  it('registers the entry in the paragraph formatting group', function () {
+    // dd_format_block is the block right below Outdent in
+    // ep_file_menu_toolbar's Format menu.
+    assert.equal(epJson.parts[0].hooks.eejsBlock_dd_format_block, 'ep_headings2/index');
+    assert.equal(typeof require(root).eejsBlock_dd_format_block, 'function');
+  });
+});

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

@@ -0,0 +1,55 @@
+import {expect, test} from '@playwright/test';
+import {clearPadContent, getPadBody, goToNewPad, writeToPad}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+
+test.beforeEach(async ({page}) => {
+  await goToNewPad(page);
+});
+
+// https://github.com/ether/ep_headings2/issues/52
+test.describe('ep_headings2 file menu', () => {
+  test('Applies a heading from the Format menu', async ({page}) => {
+    test.skip(await page.locator('.dropdown-menu').count() === 0,
+        'ep_file_menu_toolbar is not installed');
+
+    const padBody = await getPadBody(page);
+    await padBody.click();
+    await clearPadContent(page);
+    await writeToPad(page, 'First Line!');
+
+    // The select lives in the collapsed "Format" submenu, so set the value
+    // and fire change on the element itself — the same thing the existing
+    // specs do for the editbar dropdown, which niceSelect also wraps.
+    await page.evaluate(() => {
+      const sel = document.querySelector<HTMLSelectElement>(
+          '.dropdown-menu select.heading-selection')!;
+      sel.value = '0';
+      sel.dispatchEvent(new Event('change', {bubbles: true}));
+    });
+
+    await expect(padBody.locator('div').first().locator('h1')).toHaveCount(1);
+  });
+
+  test('Both heading dropdowns follow the caret', async ({page}) => {
+    test.skip(await page.locator('.dropdown-menu').count() === 0,
+        'ep_file_menu_toolbar is not installed');
+
+    const padBody = await getPadBody(page);
+    await padBody.click();
+    await clearPadContent(page);
+    await writeToPad(page, 'First Line!');
+
+    await page.evaluate(() => {
+      const sel = document.querySelector<HTMLSelectElement>('#heading-selection')!;
+      sel.value = '0';
+      sel.dispatchEvent(new Event('change', {bubbles: true}));
+    });
+    await expect(padBody.locator('div').first().locator('h1')).toHaveCount(1);
+
+    // The copy in the file menu tracks the caret just like the editbar one.
+    await expect.poll(async () => page.evaluate(() => (
+      document.querySelector<HTMLSelectElement>(
+          '.dropdown-menu select.heading-selection')!).value),
+    {timeout: 10_000}).toBe('0');
+  });
+});

templates/fileMenu.ejs

@@ -0,0 +1,16 @@
+<li><a href="#" class="ep_headings2_style" data-l10n-id="ep_headings.style">Style</a>
+  <ul class="submenu">
+    <select class="heading-selection"
+            aria-label="Text style"
+            data-l10n-id="ep_headings.style"
+            data-l10n-aria-label="true">
+        <option value="dummy" selected data-l10n-id="ep_headings.style">Style</option>
+        <option value="-1" data-l10n-id="ep_headings.normal">Normal</option>
+        <option value="0" data-l10n-id="ep_headings.h1">Heading 1</option>
+        <option value="1" data-l10n-id="ep_headings.h2">Heading 2</option>
+        <option value="2" data-l10n-id="ep_headings.h3">Heading 3</option>
+        <option value="3" data-l10n-id="ep_headings.h4">Heading 4</option>
+        <option value="4" data-l10n-id="ep_headings.code">Code</option>
+    </select>
+  </ul>
+</li>