ep_headings2 0.2.101 → 0.2.104

package/index.js

@@ -1,48 +1,22 @@
 'use strict';
 
-const eejs = require('ep_etherpad-lite/node/eejs/');
-const Changeset = require('ep_etherpad-lite/static/js/Changeset');
+const {template} = require('ep_plugin_helpers');
+const {lineAttributeExport} = require('ep_plugin_helpers/attributes-server');
 
-exports.eejsBlock_editbarMenuLeft = (hookName, args, cb) => {
-  args.content += eejs.require('ep_headings2/templates/editbarButtons.ejs');
-  return cb();
-};
+const tags = ['h1', 'h2', 'h3', 'h4', 'code'];
 
-// Include CSS for HTML export
-exports.stylesForExport = () => (
-  // These should be consistent with client CSS.
-  'h1{font-size: 2.5em;}\n' +
-  'h2{font-size: 1.8em;}\n' +
-  'h3{font-size: 1.5em;}\n' +
-  'h4{font-size: 1.2em;}\n' +
-  'code{font-family: RobotoMono;}\n');
+const headingsExport = lineAttributeExport({
+  attr: 'heading',
+  tags,
+  normalize: (value) => (value === 'h5' || value === 'h6') ? 'h4' : value,
+  exportStyles:
+    'h1{font-size: 2.5em;}\n' +
+    'h2{font-size: 1.8em;}\n' +
+    'h3{font-size: 1.5em;}\n' +
+    'h4{font-size: 1.2em;}\n' +
+    'code{font-family: RobotoMono;}\n',
+});
 
-const _analyzeLine = (alineAttrs, apool) => {
-  let header = null;
-  if (alineAttrs) {
-    const opIter = Changeset.opIterator(alineAttrs);
-    if (opIter.hasNext()) {
-      const op = opIter.next();
-      header = Changeset.opAttributeValue(op, 'heading', apool);
-    }
-  }
-  return header;
-};
-
-// line, apool,attribLine,text
-exports.getLineHTMLForExport = async (hookName, context) => {
-  const header = _analyzeLine(context.attribLine, context.apool);
-  if (header) {
-    if (context.text.indexOf('*') === 0) {
-      context.lineContent = context.lineContent.replace('*', '');
-    }
-    const paragraph = context.lineContent.match(/<p([^>]+)?>/);
-    if (paragraph) {
-      context.lineContent = context.lineContent.replace('<p', `<${header} `);
-      context.lineContent = context.lineContent.replace('</p>', `</${header}>`);
-    } else {
-      context.lineContent = `<${header}>${context.lineContent}</${header}>`;
-    }
-    return context.lineContent;
-  }
-};
+exports.eejsBlock_editbarMenuLeft = template('ep_headings2/templates/editbarButtons.ejs');
+exports.stylesForExport = headingsExport.stylesForExport;
+exports.getLineHTMLForExport = headingsExport.getLineHTMLForExport;

package/locales/qqq.json

@@ -4,5 +4,11 @@
 			"BryanDavis"
 		]
 	},
-	"ep_headings.style": "{{Identical|Style}}"
+	"ep_headings.style": "Label for the heading style dropdown and its aria-label. {{Identical|Style}}",
+	"ep_headings.normal": "Option to remove heading formatting and return to normal text",
+	"ep_headings.h1": "Option for Heading level 1 (largest)",
+	"ep_headings.h2": "Option for Heading level 2",
+	"ep_headings.h3": "Option for Heading level 3",
+	"ep_headings.h4": "Option for Heading level 4 (smallest)",
+	"ep_headings.code": "Option for monospaced code formatting"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "Adds heading support to Etherpad Lite.  Includes improved suppot for export, i18n etc.",
   "name": "ep_headings2",
-  "version": "0.2.101",
+  "version": "0.2.104",
   "author": {
     "name": "John McLear",
     "email": "john@mclear.co.uk"
@@ -33,6 +33,9 @@
   "bugs": {
     "url": "https://github.com/ether/ep_headings2/issues"
   },
+  "dependencies": {
+    "ep_plugin_helpers": "^0.2.0"
+  },
   "devDependencies": {
     "eslint": "^8.57.1",
     "eslint-config-etherpad": "^4.0.4",

package/static/js/index.js

@@ -1,10 +1,19 @@
 'use strict';
 
-const cssFiles = ['ep_headings2/static/css/editor.css'];
+const {lineAttribute} = require('ep_plugin_helpers/attributes');
 
-// All our tags are block elements, so we just return them.
+const cssFiles = ['ep_headings2/static/css/editor.css'];
 const tags = ['h1', 'h2', 'h3', 'h4', 'code'];
-exports.aceRegisterBlockElements = () => tags;
+
+const headings = lineAttribute({
+  attr: 'heading',
+  tags,
+  normalize: (value) => (value === 'h5' || value === 'h6') ? 'h4' : value,
+});
+
+exports.aceRegisterBlockElements = headings.aceRegisterBlockElements;
+exports.aceAttribsToClasses = headings.aceAttribsToClasses;
+exports.aceDomLineProcessLineAttributes = headings.aceDomLineProcessLineAttributes;
 
 // Bind the event handler to the toolbar buttons
 exports.postAceInit = (hookName, context) => {
@@ -18,6 +27,8 @@ exports.postAceInit = (hookName, context) => {
       }, 'insertheading', true);
       hs.val('dummy');
     }
+    // Return focus to the editor after heading selection (fixes #130)
+    context.ace.focus();
   });
 };
 
@@ -28,16 +39,13 @@ const range = (start, end) => Array.from(
 
 // On caret position change show the current heading
 exports.aceEditEvent = (hookName, call) => {
-  // If it's not a click or a key event and the text hasn't changed then do nothing
   const cs = call.callstack;
   if (!(cs.type === 'handleClick') && !(cs.type === 'handleKeyEvent') && !(cs.docTextChanged)) {
     return false;
   }
-  // If it's an initial setup event then do nothing..
   if (cs.type === 'setBaseText' || cs.type === 'setup') return false;
 
-  // It looks like we should check to see if this section has this attribute
-  setTimeout(() => { // avoid race condition..
+  setTimeout(() => {
     const attributeManager = call.documentAttributeManager;
     const rep = call.rep;
     const activeAttributes = {};
@@ -60,7 +68,6 @@ exports.aceEditEvent = (hookName, call) => {
 
     $.each(activeAttributes, (k, attr) => {
       if (attr.count === totalNumberOfLines) {
-        // show as active class
         const ind = tags.indexOf(k);
         $('#heading-selection').val(ind).niceSelect('update');
       }
@@ -68,39 +75,9 @@ exports.aceEditEvent = (hookName, call) => {
   }, 250);
 };
 
-// Our heading attribute will result in a heaading:h1... :h6 class
-exports.aceAttribsToClasses = (hookName, context) => {
-  if (context.key === 'heading') {
-    return [`heading:${context.value}`];
-  }
-};
-
-// Here we convert the class heading:h1 into a tag
-exports.aceDomLineProcessLineAttributes = (hookName, context) => {
-  const cls = context.cls;
-  const headingType = /(?:^| )heading:([A-Za-z0-9]*)/.exec(cls);
-  if (headingType) {
-    let tag = headingType[1];
-
-    // backward compatibility, we used propose h5 and h6, but not anymore
-    if (tag === 'h5' || tag === 'h6') tag = 'h4';
-
-    if (tags.indexOf(tag) >= 0) {
-      const modifier = {
-        preHtml: `<${tag}>`,
-        postHtml: `</${tag}>`,
-        processedMarker: true,
-      };
-      return [modifier];
-    }
-  }
-  return [];
-};
-
 // Once ace is initialized, we set ace_doInsertHeading and bind it to the context
 exports.aceInitialized = (hookName, context) => {
   const editorInfo = context.editorInfo;
-  // Passing a level >= 0 will set a heading on the selected lines, level < 0 will remove it.
   editorInfo.ace_doInsertHeading = (level) => {
     const {documentAttributeManager, rep} = context;
     if (!(rep.selStart && rep.selEnd)) return;

package/static/js/shared.js

@@ -1,29 +1,10 @@
 'use strict';
 
+const {lineAttribute} = require('ep_plugin_helpers/attributes');
+
 const tags = ['h1', 'h2', 'h3', 'h4', 'code'];
 
-exports.collectContentPre = (hookName, context, cb) => {
-  const tname = context.tname;
-  const state = context.state;
-  const lineAttributes = state.lineAttributes;
-  const tagIndex = tags.indexOf(tname);
-  if (tname === 'div' || tname === 'p') {
-    delete lineAttributes.heading;
-  }
-  if (tagIndex >= 0) {
-    lineAttributes.heading = tags[tagIndex];
-  }
-  return cb();
-};
+const headings = lineAttribute({attr: 'heading', tags});
 
-// I don't even know when this is run..
-exports.collectContentPost = (hookName, context, cb) => {
-  const tname = context.tname;
-  const state = context.state;
-  const lineAttributes = state.lineAttributes;
-  const tagIndex = tags.indexOf(tname);
-  if (tagIndex >= 0) {
-    delete lineAttributes.heading;
-  }
-  return cb();
-};
+exports.collectContentPre = headings.collectContentPre;
+exports.collectContentPost = headings.collectContentPost;

package/static/tests/frontend/specs/test.js

@@ -12,6 +12,38 @@ describe('ep_headings2 - Set Heading and ensure its removed properly', function
   // Set Line 1 heading and check it's set
   // Set Line 2 to null heading value and check it's set
 
+  it('Heading select has aria-label for accessibility', async function () {
+    this.timeout(60000);
+    const chrome$ = helper.padChrome$;
+    const $select = chrome$('#heading-selection');
+    expect($select.attr('aria-label')).to.not.be(undefined);
+    expect($select.attr('aria-label').length).to.be.greaterThan(0);
+  });
+
+  it('Focus returns to editor after selecting a heading', async function () {
+    this.timeout(60000);
+    const chrome$ = helper.padChrome$;
+    const inner$ = helper.padInner$;
+
+    // Type some text
+    const $firstTextElement = inner$('div').first();
+    $firstTextElement.sendkeys('{selectall}');
+    $firstTextElement.sendkeys('Test focus');
+
+    // Select heading 1
+    chrome$('#heading-selection').val('0');
+    chrome$('#heading-selection').change();
+
+    // Wait for heading to be applied, then check focus is back in the editor
+    await helper.waitForPromise(() => inner$('div').first().find('h1').length === 1);
+
+    // The editor iframe should have focus, not the toolbar
+    const editorHasFocus = inner$('div').first().is(':focus') ||
+        inner$.document.hasFocus() ||
+        $(helper.padOuter$.document).find('iframe[name="ace_inner"]').is(':focus');
+    expect(editorHasFocus).to.be(true);
+  });
+
   it('Option select is changed when heading is changed', async function () {
     this.timeout(60000);
     const chrome$ = helper.padChrome$;

package/templates/editbarButtons.ejs

@@ -1,6 +1,9 @@
 <li class="separator acl-write"></li>
 <li id="headings" class="acl-write">
-    <select id="heading-selection">
+    <select id="heading-selection"
+            aria-label="Text style"
+            data-l10n-id="ep_headings.style"
+            data-l10n-attr="aria-label">
         <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>