feat: configurable heading font sizes via settings.json

README.md

@@ -32,6 +32,24 @@ pnpm run plugins install ep_headings2
 
 After installing, restart Etherpad.
 
+## Configuration
+
+Font sizes can be customized in `settings.json` under the `ep_headings2` key:
+
+```json
+"ep_headings2": {
+  "fontSizes": {
+    "h1": "2.5em",
+    "h2": "1.8em",
+    "h3": "1.5em",
+    "h4": "1.2em"
+  }
+}
+```
+
+Any omitted heading level falls back to its default value.  The same font
+sizes are applied both in the editor and in exported documents.
+
 ## Copyright and License
 
 Copyright the ep_headings2 authors and contributors.

ep.json

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

index.js

@@ -2,21 +2,65 @@
 
 const {template} = require('ep_plugin_helpers');
 const {lineAttributeExport} = require('ep_plugin_helpers/attributes-server');
+const {settings: createSettings} = require('ep_plugin_helpers/settings');
 
 const tags = ['h1', 'h2', 'h3', 'h4', 'code'];
 
+const defaultFontSizes = {h1: '2.5em', h2: '1.8em', h3: '1.5em', h4: '1.2em'};
+
+const pluginSettings = createSettings('ep_headings2', {fontSizes: defaultFontSizes});
+
+const getFontSizes = () => {
+  const fontSizes = pluginSettings.get('fontSizes') || defaultFontSizes;
+  return {
+    h1: fontSizes.h1 || defaultFontSizes.h1,
+    h2: fontSizes.h2 || defaultFontSizes.h2,
+    h3: fontSizes.h3 || defaultFontSizes.h3,
+    h4: fontSizes.h4 || defaultFontSizes.h4,
+  };
+};
+
+// Only used for getLineHTMLForExport; font sizes are handled dynamically below.
 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',
+  exportStyles: '',
 });
 
+exports.loadSettings = pluginSettings.loadSettings;
+
+exports.expressCreateServer = (hookName, {app}) => {
+  app.get('/ep_headings2/editor.css', (req, res) => {
+    const {h1, h2, h3, h4} = getFontSizes();
+    res.setHeader('Content-Type', 'text/css');
+    res.send(
+        `#innerdocbody h1{font-size: ${h1};}\n` +
+        `#innerdocbody h2{font-size: ${h2};}\n` +
+        `#innerdocbody h3{font-size: ${h3};}\n` +
+        `#innerdocbody h4{font-size: ${h4};}\n` +
+        '#innerdocbody code{font-family: RobotoMono;}\n' +
+        '#innerdocbody h1,\n' +
+        '#innerdocbody h2,\n' +
+        '#innerdocbody h3,\n' +
+        '#innerdocbody h4 {\n' +
+        '  display: inline-block;\n' +
+        '}\n',
+    );
+  });
+};
+
 exports.eejsBlock_editbarMenuLeft = template('ep_headings2/templates/editbarButtons.ejs');
-exports.stylesForExport = headingsExport.stylesForExport;
+
+exports.stylesForExport = () => {
+  const {h1, h2, h3, h4} = getFontSizes();
+  return (
+    `h1{font-size: ${h1};}\n` +
+    `h2{font-size: ${h2};}\n` +
+    `h3{font-size: ${h3};}\n` +
+    `h4{font-size: ${h4};}\n` +
+    'code{font-family: RobotoMono;}\n'
+  );
+};
+
 exports.getLineHTMLForExport = headingsExport.getLineHTMLForExport;