ep_table_of_contents 0.3.134 → 0.3.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ep_table_of_contents",
-  "version": "0.3.134",
+  "version": "0.3.136",
   "description": "View a table of contents for your pad",
   "author": {
     "name": "John McLear",

package/static/js/aceEditEvent.js

@@ -1,14 +1,23 @@
-/* global tableOfContents */
 'use strict';
 
+// aceEditEvent fires inside ACE's inner iframe, which has its own `globalThis`
+// separate from the outer pad page where toc.js runs. Reach across the
+// iframe boundary via `window.top` (the topmost frame, i.e. the outer pad
+// page). If toc.js hasn't executed yet — e.g. during very early pad init —
+// silently skip; it will be called again on the next edit event.
+const getToc = () => (typeof globalThis !== 'undefined' && globalThis.tableOfContents) ||
+    (window.top && window.top.tableOfContents) || null;
+
 exports.aceEditEvent = (hookName, args) => {
   // dont do anything on idle work timer, wait for changes..
   if (args.callstack && args.callstack.type === 'idleWorkTimer') return false;
+  const toc = getToc();
+  if (!toc) return;
   if (args.rep) {
-    tableOfContents.showPosition(args.rep);
+    toc.showPosition(args.rep);
   }
 
   if ($('#toc:visible').length > 0) {
-    tableOfContents.update();
+    toc.update();
   }
 };

package/static/js/postAceInit.js

@@ -1,6 +1,14 @@
-/* global tableOfContents */
 'use strict';
 
+// postAceInit is loaded as a CommonJS plugin hook module; its scope is not
+// the same as the <script> tag that loads toc.js, so `tableOfContents` is
+// not visible via the normal scope chain. Look it up explicitly on the
+// topmost window (where toc.js runs) with a globalThis fallback for the
+// case where both happen to share a realm.
+const getToc = () => (typeof globalThis !== 'undefined' && globalThis.tableOfContents) ||
+    (window.top && window.top.tableOfContents) ||
+    window.tableOfContents || null;
+
 exports.postAceInit = () => {
   if (!$('#editorcontainerbox').hasClass('flex-layout')) {
     $.gritter.add({
@@ -11,28 +19,30 @@ exports.postAceInit = () => {
       class_name: 'error',
     });
   }
+  const toc = getToc();
+  if (!toc) return;
   const optionToc = $('#options-toc');
   /* on click */
   optionToc.on('click', () => {
     if (optionToc.is(':checked')) {
-      tableOfContents.enable(); // enables line tocping
+      toc.enable(); // enables line tocping
     } else {
       optionToc.prop('checked', false);
-      tableOfContents.disable(); // disables line tocping
+      toc.disable(); // disables line tocping
     }
   });
   if (optionToc.is(':checked')) {
-    tableOfContents.enable();
+    toc.enable();
   } else {
-    tableOfContents.disable();
+    toc.disable();
   }
 
-  const tocParam = tableOfContents.getParam('toc');
+  const tocParam = toc.getParam('toc');
   if (tocParam === true) {
     optionToc.prop('checked', true);
-    tableOfContents.enable();
+    toc.enable();
   } else if (tocParam === false) {
     optionToc.prop('checked', false);
-    tableOfContents.disable();
+    toc.disable();
   }
 };

package/static/js/toc.js

@@ -63,7 +63,14 @@ if (typeof $ !== 'undefined') {
   });
 }
 
-const tableOfContents = {
+// Expose on globalThis so other plugin scripts (postAceInit.js,
+// aceEditEvent.js) that run in their own CommonJS-style module scopes can
+// still reach it. Top-level `const` in a <script> tag is script-scoped,
+// not a global, so without this the bare `tableOfContents` identifier in
+// those modules throws `ReferenceError: tableOfContents is not defined`
+// on pad load. globalThis resolves to `window` in the browser and to
+// `global` in Node.js, so the Node unit tests keep working too.
+const tableOfContents = globalThis.tableOfContents = {
 
   enable() {
     $('#toc').show();

package/static/tests/frontend-new/specs/toc.spec.ts

@@ -0,0 +1,27 @@
+import {expect, test} from '@playwright/test';
+import {goToNewPad} from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+
+test.beforeEach(async ({page}) => {
+  await goToNewPad(page);
+});
+
+test.describe('ep_table_of_contents', () => {
+  test('plugin is loaded and exposes itself in clientVars', async ({page}) => {
+    const enabled = await page.evaluate(
+      () => (window as any).clientVars?.plugins?.plugins?.ep_table_of_contents != null);
+    expect(enabled).toBe(true);
+  });
+
+  test('TOC sidebar element is rendered into the pad', async ({page}) => {
+    // The eejsBlock_editorContainerBox hook injects templates/toc.ejs
+    // (the #toc + #tocItems container) into the pad's editor box.
+    await expect(page.locator('#toc')).toBeAttached();
+    await expect(page.locator('#tocItems')).toBeAttached();
+  });
+
+  test('toolbar TOC toggle button is present', async ({page}) => {
+    // The eejsBlock_editbarMenuRight hook injects templates/barButton.ejs
+    // — the toolbar entry that toggles the TOC sidebar visibility.
+    await expect(page.locator('#ep_table_of_contents-a')).toBeAttached();
+  });
+});