ep_hljs 0.1.1

package/static/js/index.js

@@ -0,0 +1,124 @@
+'use strict';
+
+const syntaxRenderer = require('ep_hljs/static/js/syntaxRenderer');
+const codeIndent = require('ep_hljs/static/js/codeIndent');
+const themeBridge = require('ep_hljs/static/js/themeBridge');
+const socketio = require('ep_etherpad-lite/static/js/socketio');
+// Sub-path import keeps the client bundle clean.
+const {padToggle} = require('ep_plugin_helpers/pad-toggle');
+const {padSelect} = require('ep_plugin_helpers/pad-select');
+
+let socket = null;
+let currentPadId = null;
+
+const highlightToggle = padToggle({
+  pluginName: 'ep_hljs',
+  settingId: 'syntax-highlighting',
+  l10nId: 'ep_hljs.user_enable',
+  defaultLabel: 'Highlight syntax in pads',
+  defaultEnabled: true,
+});
+
+const indentSelect = padSelect({
+  pluginName: 'ep_hljs',
+  settingId: 'indent-size',
+  l10nId: 'ep_hljs.indent_size',
+  defaultLabel: 'Indent size',
+  options: [
+    {value: 2, label: '2 spaces'},
+    {value: 4, label: '4 spaces'},
+  ],
+  defaultValue: 2,
+});
+
+// Both helpers re-export handleClientMessage_CLIENT_MESSAGE so each can refresh
+// its own UI on padoptions broadcasts; chain both invocations.
+exports.handleClientMessage_CLIENT_MESSAGE = (hookName, ctx) => {
+  highlightToggle.handleClientMessage_CLIENT_MESSAGE(hookName, ctx);
+  indentSelect.handleClientMessage_CLIENT_MESSAGE(hookName, ctx);
+};
+
+const loadHljs = () => {
+  if (typeof window !== 'undefined' && window.hljs) return Promise.resolve();
+  return new Promise((resolve) => {
+    const script = document.createElement('script');
+    script.src = '/static/plugins/ep_hljs/static/js/vendor/hljs.min.js';
+    script.onload = resolve;
+    script.onerror = resolve;
+    document.head.appendChild(script);
+  });
+};
+
+const onLanguageChanged = (msg) => {
+  const sel = document.getElementById('ep_hljs_select');
+  if (sel) {
+    const newVal = msg.autoDetect ? 'auto' : msg.language;
+    sel.value = newVal;
+    const $ = window.$;
+    if ($ && $.fn && $.fn.niceSelect) $(sel).niceSelect('update');
+  }
+  syntaxRenderer.setState({language: msg.language, autoDetect: !!msg.autoDetect});
+};
+
+exports.postAceInit = async (hookName, context) => {
+  await loadHljs();
+  currentPadId = context.pad.getPadId();
+  const initial = (typeof clientVars !== 'undefined' && clientVars.ep_hljs) ||
+    {language: 'auto', autoDetect: true};
+
+  const pad = require('ep_etherpad-lite/static/js/pad');
+  socket = socketio.connect(pad.baseURL || '/', '/syntax-highlighting');
+  socket.on('connect', () => socket.emit('joinPad', {padId: currentPadId}));
+  socket.on('languageChanged', onLanguageChanged);
+  socket.on('languageChangeRejected', (reason) => {
+    console.warn('[ep_hljs] language change rejected:', reason && reason.error);
+  });
+
+  // Reflect initial language in the dropdown without dispatching a change event.
+  const sel = document.getElementById('ep_hljs_select');
+  if (sel) {
+    sel.value = initial.autoDetect ? 'auto' : initial.language;
+    const $ = window.$;
+    if ($ && $.fn && $.fn.niceSelect) $(sel).niceSelect('update');
+    const handler = () => {
+      const val = sel.value;
+      const payload = val === 'auto'
+        ? {padId: currentPadId, language: 'auto', autoDetect: true}
+        : {padId: currentPadId, language: val, autoDetect: false};
+      socket.emit('setLanguage', payload);
+    };
+    if ($ && $.fn) $(sel).on('change', handler);
+    else sel.addEventListener('change', handler);
+  }
+
+  syntaxRenderer.start(context, initial);
+  codeIndent.start({
+    indentSize: 2, // padSelect.init() fires onChange synchronously below with the effective value
+    getLanguage: () => syntaxRenderer.getState().language,
+    getAutoDetect: () => syntaxRenderer.getState().autoDetect,
+  });
+  themeBridge.start();
+
+  // padToggle drives per-user / pad-wide enable. init() binds the checkboxes
+  // (without it, the checkboxes render unchecked even when defaultEnabled is
+  // true — the helper renders empty <input type="checkbox"> server-side and
+  // relies on init() to set the correct state from cookie/pad option/default).
+  highlightToggle.init({
+    onChange: (enabled) => syntaxRenderer.setUserEnabled(enabled),
+  });
+
+  // padSelect drives the indent-size dropdown. init() fires onChange once with
+  // the effective initial value (cookie / pad option / default), and again
+  // whenever the user changes the dropdown OR a remote padoptions broadcast
+  // arrives via handleClientMessage_CLIENT_MESSAGE.
+  indentSelect.init({
+    onChange: (size) => codeIndent.setIndentSize(size),
+  });
+};
+
+exports.acePostWriteDomLineHTML = syntaxRenderer.acePostWriteDomLineHTML;
+exports.aceKeyEvent = codeIndent.handleKey;
+
+exports.aceEditorCSS = () => [
+  'ep_hljs/static/css/editor.css',
+];

package/static/js/lruCache.js

@@ -0,0 +1,28 @@
+'use strict';
+
+class LRU {
+  constructor(capacity) {
+    this.capacity = capacity;
+    this.map = new Map();
+  }
+  get size() { return this.map.size; }
+  has(key) { return this.map.has(key); }
+  get(key) {
+    if (!this.map.has(key)) return undefined;
+    const value = this.map.get(key);
+    this.map.delete(key);
+    this.map.set(key, value);
+    return value;
+  }
+  set(key, value) {
+    if (this.map.has(key)) this.map.delete(key);
+    this.map.set(key, value);
+    while (this.map.size > this.capacity) {
+      const oldest = this.map.keys().next().value;
+      this.map.delete(oldest);
+    }
+  }
+  clear() { this.map.clear(); }
+}
+
+module.exports = LRU;

package/static/js/syntaxRenderer.js

@@ -0,0 +1,201 @@
+'use strict';
+
+const LRU = require('./lruCache');
+const {setLineRanges, clearAll} = require('./highlightRegistry');
+const {tokenize, detect} = require('./hljsAdapter');
+const {MAX_LINES, AUTO_REDETECT_MS, LRU_CAPACITY} = require('./constants');
+
+const cache = new LRU(LRU_CAPACITY);
+let state = {language: 'auto', autoDetect: true};
+let userEnabled = true;
+let paused = false;
+let aceContext = null;
+let autoDetectTimer = null;
+let lastDetectAt = 0;
+
+const isHighlightingEnabled = () => {
+  if (paused || !userEnabled) return false;
+  if (!state.language || state.language === 'off') return false;
+  if (state.language === 'auto' && !state.autoDetect) return false;
+  return true;
+};
+
+const getInnerDoc = () => {
+  const outer = document.getElementsByName('ace_outer')[0];
+  if (!outer) return null;
+  const outerDoc = outer.contentWindow && outer.contentWindow.document;
+  if (!outerDoc) return null;
+  const inner = outerDoc.getElementsByName('ace_inner')[0];
+  if (!inner) return null;
+  return inner.contentWindow && inner.contentWindow.document;
+};
+
+const renderLine = (node) => {
+  if (!node) return;
+  if (!isHighlightingEnabled() || state.language === 'auto') {
+    setLineRanges(node, []);
+    return;
+  }
+  const text = node.textContent;
+  if (!text) {
+    setLineRanges(node, []);
+    return;
+  }
+  const key = `${state.language}:${text}`;
+  let ranges = cache.get(key);
+  if (ranges === undefined) {
+    ranges = tokenize(text, state.language);
+    if (ranges == null) {
+      // hljs not yet loaded. Don't cache, don't strip existing highlights —
+      // a later render (or MutationObserver tick) will retry once hljs is in.
+      return;
+    }
+    cache.set(key, ranges);
+  }
+  setLineRanges(node, ranges);
+};
+
+const repaintAllLines = () => {
+  const innerDoc = getInnerDoc();
+  if (!innerDoc) return;
+  innerDoc.querySelectorAll('div[id^="magicdomid"]').forEach(renderLine);
+};
+
+const padText = () => {
+  if (!aceContext) return '';
+  let result = '';
+  try {
+    aceContext.ace.callWithAce((ace) => {
+      result = ace.ace_exportText();
+    }, 'syntax-read');
+  } catch (_e) { /* ignore */ }
+  return result;
+};
+
+const lineCount = () => {
+  const innerDoc = getInnerDoc();
+  if (!innerDoc) return 0;
+  return innerDoc.querySelectorAll('div[id^="magicdomid"]').length;
+};
+
+const tickAutoRedetect = () => {
+  if (!state.autoDetect) return;
+  if (Date.now() - lastDetectAt < AUTO_REDETECT_MS) return;
+  lastDetectAt = Date.now();
+  const text = padText();
+  if (!text) return;
+  const detected = detect(text);
+  if (!detected || detected === state.language) return;
+  state = {language: detected, autoDetect: true};
+  cache.clear();
+  clearAll();
+  repaintAllLines();
+};
+
+const checkPaused = () => {
+  const n = lineCount();
+  const wasPaused = paused;
+  paused = n > MAX_LINES;
+  return wasPaused !== paused;
+};
+
+// Toggle a marker class on the inner iframe's body when this plugin is
+// actively painting. Lets editor.css scope plugin-specific CSS rules (e.g.
+// the authorship-bg suppression) so they only apply to pads with
+// highlighting on — keeps core Etherpad tests on plain pads unaffected.
+const updateActiveClass = () => {
+  const innerDoc = getInnerDoc();
+  if (!innerDoc || !innerDoc.body) return;
+  const active = isHighlightingEnabled() && state.language && state.language !== 'auto';
+  innerDoc.body.classList.toggle('ep-syntax-highlighting-active', !!active);
+};
+
+exports.start = (ctx, initialState) => {
+  aceContext = ctx;
+  state = {...state, ...(initialState || {})};
+  setTimeout(tickAutoRedetect, 500);
+  if (autoDetectTimer) clearInterval(autoDetectTimer);
+  autoDetectTimer = setInterval(tickAutoRedetect, 1000);
+  startMutationObserver(); // eslint-disable-line no-use-before-define
+  // The initial line renders fire BEFORE postAceInit completes (i.e. before
+  // we know the language and before hljs is loaded), so the
+  // acePostWriteDomLineHTML hook short-circuits and leaves them un-tokenized.
+  // Repaint once now that state and hljs are ready. Small timeout so the inner
+  // iframe is fully populated.
+  setTimeout(() => { repaintAllLines(); updateActiveClass(); }, 100);
+};
+
+exports.setState = (next) => {
+  state = {...state, ...next};
+  cache.clear();
+  clearAll();
+  repaintAllLines();
+  updateActiveClass();
+};
+
+exports.setUserEnabled = (enabled) => {
+  if (enabled === userEnabled) return;
+  userEnabled = !!enabled;
+  clearAll();
+  repaintAllLines();
+};
+
+exports.acePostWriteDomLineHTML = (hookName, context) => {
+  if (checkPaused() && paused) clearAll();
+  if (paused) return;
+  renderLine(context.node);
+};
+
+// Etherpad does incremental DOM updates on typing — the acePostWriteDomLineHTML
+// hook only fires on FULL line re-renders (paste, language change, line split).
+// To catch every text mutation (typing, remote changesets, IME composition,
+// undo/redo) we observe the inner doc for character-level changes and
+// re-render only the affected line divs. Since CSS Custom Highlights does
+// not mutate the DOM, our setLineRanges calls don't trigger this observer.
+let mutationObserver = null;
+
+const startMutationObserver = () => {
+  const innerDoc = getInnerDoc();
+  if (!innerDoc || !innerDoc.body) {
+    setTimeout(startMutationObserver, 100);
+    return;
+  }
+  if (mutationObserver) return;
+  const win = innerDoc.defaultView;
+  if (!win || !win.MutationObserver) return;
+  const findLineAncestor = (node, dirtyLines) => {
+    let n = node;
+    while (n && n !== innerDoc.body) {
+      if (n.nodeType === 1 && n.id && n.id.startsWith('magicdomid')) {
+        dirtyLines.add(n);
+        return;
+      }
+      n = n.parentNode;
+    }
+  };
+  mutationObserver = new win.MutationObserver((mutations) => {
+    if (paused) return;
+    const dirtyLines = new Set();
+    for (const m of mutations) {
+      // characterData: m.target is the text node — walk up to its line div.
+      // childList:     m.target is the parent of changed children. If
+      //                Etherpad replaces a whole line div, m.target is
+      //                innerdocbody and the new line is in addedNodes.
+      findLineAncestor(m.target, dirtyLines);
+      if (m.addedNodes) for (const n of m.addedNodes) findLineAncestor(n, dirtyLines);
+    }
+    for (const line of dirtyLines) renderLine(line);
+  });
+  mutationObserver.observe(innerDoc.body, {
+    childList: true,
+    subtree: true,
+    characterData: true,
+  });
+};
+
+exports.getState = () => ({...state});
+
+exports.__test_internal = { // eslint-disable-line camelcase
+  cache,
+  getState: () => ({...state}),
+};

package/static/js/themeBridge.js

@@ -0,0 +1,76 @@
+'use strict';
+
+const LIGHT_FILE = 'github.css';
+const DARK_FILE = 'github-dark.css';
+const PATH_MARKER = '/static/plugins/ep_hljs/static/css/themes/';
+
+let listenersAttached = false;
+
+const resolveDark = () => {
+  // Etherpad signals dark mode via the html element's `super-dark-editor`
+  // class (or `dark-editor` for medium dark). Fall back to legacy
+  // class names and prefers-color-scheme for environments outside Etherpad.
+  const html = document.documentElement;
+  if (html.classList.contains('super-dark-editor')) return true;
+  if (html.classList.contains('dark-editor')) return true;
+  if (html.classList.contains('darkMode')) return true;
+  if (document.body && document.body.dataset && document.body.dataset.theme === 'dark') return true;
+  return !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+};
+
+const collectThemeLinks = () => {
+  const links = [];
+  document
+      .querySelectorAll(`link[href*="${PATH_MARKER}"]`)
+      .forEach((l) => links.push(l));
+  // ace_getDocument() returns the outer pad document (ace2_inner.ts runs in the outer bundle).
+  // The ace_inner iframe's document is where the theme CSS links are injected.
+  try {
+    const outerIframe = document.getElementsByName('ace_outer')[0];
+    const outerDoc = outerIframe && outerIframe.contentWindow && outerIframe.contentWindow.document;
+    const innerIframe = outerDoc && outerDoc.getElementsByName('ace_inner')[0];
+    const innerDoc = innerIframe && innerIframe.contentWindow && innerIframe.contentWindow.document;
+    if (innerDoc) {
+      innerDoc
+          .querySelectorAll(`link[href*="${PATH_MARKER}"]`)
+          .forEach((l) => links.push(l));
+    }
+  } catch (_e) { /* cross-origin or not loaded yet */ }
+  return links;
+};
+
+const swap = () => {
+  const targetFile = resolveDark() ? DARK_FILE : LIGHT_FILE;
+  const otherFile = resolveDark() ? LIGHT_FILE : DARK_FILE;
+  collectThemeLinks().forEach((link) => {
+    if (link.href.includes(PATH_MARKER + otherFile)) {
+      link.href = link.href.replace(PATH_MARKER + otherFile, PATH_MARKER + targetFile);
+    }
+  });
+};
+
+exports.start = () => {
+  swap();
+  if (!listenersAttached) {
+    if (window.matchMedia) {
+      try {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', swap);
+      } catch (_e) {
+        // older Safari fallback
+        window.matchMedia('(prefers-color-scheme: dark)').addListener(swap);
+      }
+    }
+    new MutationObserver(swap).observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme'],
+    });
+    listenersAttached = true;
+  }
+  // The inner ace iframe may finish loading the link tag AFTER start(); re-run
+  // a few times shortly after start so the swap catches a late insertion.
+  setTimeout(swap, 250);
+  setTimeout(swap, 1000);
+  setTimeout(swap, 3000);
+};
+
+exports.swap = swap; // exposed for tests / manual triggering