ep_hljs 0.1.1

package/static/tests/backend/specs/codeIndent.test.js

@@ -0,0 +1,144 @@
+'use strict';
+
+const assert = require('assert').strict;
+const codeIndent = require('../../../../static/js/codeIndent');
+
+const makeRep = (lines, sel) => ({
+  selStart: sel.start,
+  selEnd: sel.end || sel.start,
+  lines: {
+    atIndex: (i) => ({text: lines[i] || ''}),
+  },
+});
+
+const makeEditorInfo = () => {
+  const calls = [];
+  return {
+    calls,
+    ace_replaceRange: (a, b, text) => calls.push({a, b, text}),
+  };
+};
+
+const makeEvt = (overrides = {}) => ({
+  type: 'keydown',
+  keyCode: 13,
+  shiftKey: false, ctrlKey: false, altKey: false, metaKey: false,
+  preventDefault: () => {},
+  ...overrides,
+});
+
+describe(__filename, function () {
+  beforeEach(async function () {
+    codeIndent.start({
+      indentSize: 2,
+      getLanguage: () => 'javascript',
+      getAutoDetect: () => false, // simulate user explicitly picked the language
+    });
+  });
+
+  it('Enter on empty line inserts plain newline (no extra indent)', async function () {
+    const rep = makeRep([''], {start: [0, 0]});
+    const ei = makeEditorInfo();
+    const handled = codeIndent.handleKey('aceKeyEvent',
+        {evt: makeEvt({keyCode: 13}), rep, editorInfo: ei});
+    assert.equal(handled, true);
+    assert.equal(ei.calls.length, 1);
+    assert.equal(ei.calls[0].text, '\n');
+  });
+
+  it('Enter inherits previous line\'s leading indent', async function () {
+    const rep = makeRep(['    foo'], {start: [0, 7]});
+    const ei = makeEditorInfo();
+    codeIndent.handleKey('aceKeyEvent', {evt: makeEvt({keyCode: 13}), rep, editorInfo: ei});
+    assert.equal(ei.calls[0].text, '\n    ');
+  });
+
+  it('Enter after `{` adds one extra indent level', async function () {
+    const rep = makeRep(['if (x) {'], {start: [0, 8]});
+    const ei = makeEditorInfo();
+    codeIndent.handleKey('aceKeyEvent', {evt: makeEvt({keyCode: 13}), rep, editorInfo: ei});
+    assert.equal(ei.calls[0].text, '\n  ');
+  });
+
+  it('Enter after `{` on already-indented line stacks indents', async function () {
+    const rep = makeRep(['  while (cond) {'], {start: [0, 16]});
+    const ei = makeEditorInfo();
+    codeIndent.handleKey('aceKeyEvent', {evt: makeEvt({keyCode: 13}), rep, editorInfo: ei});
+    assert.equal(ei.calls[0].text, '\n    ');
+  });
+
+  it('Enter after `[` and `(` also indent', async function () {
+    const rep = makeRep(['arr = ['], {start: [0, 7]});
+    const ei = makeEditorInfo();
+    codeIndent.handleKey('aceKeyEvent', {evt: makeEvt({keyCode: 13}), rep, editorInfo: ei});
+    assert.equal(ei.calls[0].text, '\n  ');
+  });
+
+  it('Tab inserts indentSize spaces at caret', async function () {
+    const rep = makeRep(['foo'], {start: [0, 3]});
+    const ei = makeEditorInfo();
+    const handled = codeIndent.handleKey('aceKeyEvent',
+        {evt: makeEvt({keyCode: 9}), rep, editorInfo: ei});
+    assert.equal(handled, true);
+    assert.equal(ei.calls[0].text, '  ');
+  });
+
+  it('Tab with multi-line selection indents each selected line', async function () {
+    const rep = makeRep(['a', 'b', 'c'], {start: [0, 0], end: [2, 1]});
+    const ei = makeEditorInfo();
+    codeIndent.handleKey('aceKeyEvent', {evt: makeEvt({keyCode: 9}), rep, editorInfo: ei});
+    assert.equal(ei.calls.length, 3);
+    for (const c of ei.calls) assert.equal(c.text, '  ');
+  });
+
+  it('Shift+Tab removes leading whitespace up to indentSize', async function () {
+    const rep = makeRep(['    deep'], {start: [0, 4]});
+    const ei = makeEditorInfo();
+    codeIndent.handleKey('aceKeyEvent',
+        {evt: makeEvt({keyCode: 9, shiftKey: true}), rep, editorInfo: ei});
+    assert.equal(ei.calls.length, 1);
+    assert.equal(ei.calls[0].text, '');
+    assert.deepEqual(ei.calls[0].b, [0, 2]);
+  });
+
+  it('Shift+Tab returns false (defers to Etherpad) when no leading whitespace', async function () {
+    const rep = makeRep(['foo'], {start: [0, 1]});
+    const ei = makeEditorInfo();
+    const handled = codeIndent.handleKey('aceKeyEvent',
+        {evt: makeEvt({keyCode: 9, shiftKey: true}), rep, editorInfo: ei});
+    assert.equal(handled, false);
+    assert.equal(ei.calls.length, 0);
+  });
+
+  it('skips when language is auto (not in code mode)', async function () {
+    codeIndent.start({indentSize: 2, getLanguage: () => 'auto', getAutoDetect: () => true});
+    const rep = makeRep(['if (x) {'], {start: [0, 8]});
+    const ei = makeEditorInfo();
+    const handled = codeIndent.handleKey('aceKeyEvent',
+        {evt: makeEvt({keyCode: 13}), rep, editorInfo: ei});
+    assert.equal(handled, false);
+    assert.equal(ei.calls.length, 0);
+  });
+
+  it('skips when autoDetect picked the language (no explicit user intent)', async function () {
+    codeIndent.start({
+      indentSize: 2,
+      getLanguage: () => 'javascript',
+      getAutoDetect: () => true, // auto-detect picked it, not the user
+    });
+    const rep = makeRep(['if (x) {'], {start: [0, 8]});
+    const ei = makeEditorInfo();
+    const handled = codeIndent.handleKey('aceKeyEvent',
+        {evt: makeEvt({keyCode: 13}), rep, editorInfo: ei});
+    assert.equal(handled, false);
+    assert.equal(ei.calls.length, 0);
+  });
+
+  it('Ctrl+Tab is NOT intercepted (escape hatch for keyboard nav)', async function () {
+    const rep = makeRep(['foo'], {start: [0, 0]});
+    const ei = makeEditorInfo();
+    const handled = codeIndent.handleKey('aceKeyEvent',
+        {evt: makeEvt({keyCode: 9, ctrlKey: true}), rep, editorInfo: ei});
+    assert.equal(handled, false);
+  });
+});

package/static/tests/backend/specs/export.test.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const assert = require('assert').strict;
+const common = require('ep_etherpad-lite/tests/backend/common');
+const padManager = require('ep_etherpad-lite/node/db/PadManager');
+const store = require('../../../../lib/padLanguageStore');
+const renderer = require('../../../../lib/exportRenderer');
+
+describe(__filename, function () {
+  before(async function () { await common.init(); });
+
+  it('wraps tokens in hljs spans for an explicit language', async function () {
+    const padId = `export-explicit-${common.randomString()}`;
+    await padManager.getPad(padId, '\n');
+    await store.set(padId, {language: 'python', autoDetect: false});
+    const html = await renderer.renderLine(padId, 'def add(a, b): return a + b');
+    assert.match(html, /<span class="hljs-keyword">def<\/span>/);
+  });
+
+  it('uses auto-detect when autoDetect=true', async function () {
+    const padId = `export-auto-${common.randomString()}`;
+    await padManager.getPad(padId, '\n');
+    const html = await renderer.renderLine(padId, 'function f() { return 1; }');
+    // hljs wraps function in hljs-function or hljs-keyword depending on the
+    // detected language; just assert that some highlighting span was emitted.
+    assert.match(html, /<span class="hljs-/);
+  });
+
+  it('returns plain escaped text for plaintext or auto with no signal', async function () {
+    const padId = `export-plain-${common.randomString()}`;
+    await padManager.getPad(padId, '\n');
+    const html = await renderer.renderLine(padId, '');
+    assert.equal(html, '');
+  });
+
+  it('emits theme css through stylesForExport hook', async function () {
+    const css = await renderer.stylesForExport();
+    assert.match(css, /\.hljs-keyword/);
+  });
+
+  it('does not throw on a malformed line (failsoft)', async function () {
+    const padId = `export-soft-${common.randomString()}`;
+    await padManager.getPad(padId, '\n');
+    const html = await renderer.renderLine(padId, ' weird�');
+    assert.match(html, /weird/);
+  });
+});

package/static/tests/backend/specs/highlightRegistry.test.js

@@ -0,0 +1,59 @@
+'use strict';
+
+const assert = require('assert').strict;
+const {JSDOM} = require('jsdom');
+const {buildRange, buildSegments} = require('../../../../static/js/highlightRegistry');
+
+const makeLine = (innerHTML) => {
+  const dom = new JSDOM('<!DOCTYPE html><div id="x"></div>');
+  const div = dom.window.document.getElementById('x');
+  div.innerHTML = innerHTML;
+  return {div, win: dom.window};
+};
+
+describe(__filename, function () {
+  it('builds segments across nested elements', async function () {
+    const {div, win} = makeLine('hello <span class="a">world</span>!');
+    const segs = buildSegments(div, win);
+    const total = segs.reduce((s, x) => s + x.len, 0);
+    assert.equal(total, 'hello world!'.length);
+    assert.equal(segs.length, 3);
+    assert.equal(segs[0].node.nodeValue, 'hello ');
+    assert.equal(segs[1].node.nodeValue, 'world');
+    assert.equal(segs[2].node.nodeValue, '!');
+  });
+
+  it('buildRange spans a single text node', async function () {
+    const {div, win} = makeLine('while (true) {}');
+    const segs = buildSegments(div, win);
+    const range = buildRange(div.ownerDocument, segs, 0, 5);
+    assert.ok(range);
+    assert.equal(range.toString(), 'while');
+  });
+
+  it('buildRange spans across nested elements', async function () {
+    const {div, win} = makeLine('<span class="a">while</span> (true) {}');
+    const segs = buildSegments(div, win);
+    const range = buildRange(div.ownerDocument, segs, 0, 5);
+    assert.ok(range);
+    assert.equal(range.toString(), 'while');
+    const range2 = buildRange(div.ownerDocument, segs, 7, 11);
+    assert.ok(range2);
+    assert.equal(range2.toString(), 'true');
+  });
+
+  it('buildRange returns null for out-of-bounds ranges', async function () {
+    const {div, win} = makeLine('hi');
+    const segs = buildSegments(div, win);
+    const range = buildRange(div.ownerDocument, segs, 5, 10);
+    assert.equal(range, null);
+  });
+
+  it('buildRange handles wide range covering multiple text nodes', async function () {
+    const {div, win} = makeLine('abc<span class="x">DEF</span>ghi');
+    const segs = buildSegments(div, win);
+    const range = buildRange(div.ownerDocument, segs, 1, 8);
+    assert.ok(range);
+    assert.equal(range.toString(), 'bcDEFgh');
+  });
+});

package/static/tests/backend/specs/hljsAdapter.test.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const assert = require('assert').strict;
+const {parseHljsHtml} = require('../../../../static/js/hljsAdapter');
+
+describe(__filename, function () {
+  it('parses a single span', async function () {
+    const ranges = parseHljsHtml('<span class="hljs-keyword">const</span> foo');
+    assert.deepEqual(ranges, [{start: 0, end: 5, cls: 'hljs-keyword'}]);
+  });
+
+  it('decodes HTML entities when computing positions', async function () {
+    const ranges = parseHljsHtml('<span class="hljs-string">&quot;hi&quot;</span>');
+    assert.deepEqual(ranges, [{start: 0, end: 4, cls: 'hljs-string'}]);
+  });
+
+  it('emits one range per class on multi-class spans', async function () {
+    const ranges = parseHljsHtml('<span class="hljs-meta hljs-string">@foo</span>');
+    assert.equal(ranges.length, 2);
+    const classes = ranges.map((r) => r.cls).sort();
+    assert.deepEqual(classes, ['hljs-meta', 'hljs-string']);
+    assert.equal(ranges[0].start, 0);
+    assert.equal(ranges[0].end, 4);
+  });
+
+  it('handles nested spans (inner opens after outer)', async function () {
+    const html = '<span class="hljs-string">"hello <span class="hljs-subst">${x}</span>"</span>';
+    const ranges = parseHljsHtml(html);
+    // Outer covers the whole string; inner covers the interpolation.
+    const subst = ranges.find((r) => r.cls === 'hljs-subst');
+    const string = ranges.find((r) => r.cls === 'hljs-string');
+    assert.ok(subst);
+    assert.ok(string);
+    assert.equal(string.start, 0);
+    assert.equal(string.end, 12); // "hello ${x}"
+    assert.equal(subst.start, 7);
+    assert.equal(subst.end, 11);
+  });
+
+  it('returns empty array for plain text', async function () {
+    assert.deepEqual(parseHljsHtml('just text'), []);
+  });
+});

package/static/tests/backend/specs/lruCache.test.js

@@ -0,0 +1,45 @@
+'use strict';
+
+const assert = require('assert').strict;
+const LRU = require('../../../../static/js/lruCache');
+
+describe(__filename, function () {
+  it('stores and retrieves values', async function () {
+    const c = new LRU(3);
+    c.set('a', 1);
+    c.set('b', 2);
+    assert.equal(c.get('a'), 1);
+    assert.equal(c.get('b'), 2);
+    assert.equal(c.get('missing'), undefined);
+  });
+
+  it('evicts oldest when capacity exceeded', async function () {
+    const c = new LRU(2);
+    c.set('a', 1);
+    c.set('b', 2);
+    c.set('c', 3);
+    assert.equal(c.has('a'), false);
+    assert.equal(c.get('b'), 2);
+    assert.equal(c.get('c'), 3);
+  });
+
+  it('refreshes recency on get', async function () {
+    const c = new LRU(2);
+    c.set('a', 1);
+    c.set('b', 2);
+    c.get('a');
+    c.set('c', 3);
+    assert.equal(c.has('a'), true);
+    assert.equal(c.has('b'), false);
+    assert.equal(c.get('c'), 3);
+  });
+
+  it('clear empties the cache', async function () {
+    const c = new LRU(3);
+    c.set('a', 1);
+    c.set('b', 2);
+    c.clear();
+    assert.equal(c.size, 0);
+    assert.equal(c.get('a'), undefined);
+  });
+});

package/static/tests/backend/specs/padLanguageStore.test.js

@@ -0,0 +1,63 @@
+'use strict';
+
+const assert = require('assert').strict;
+const common = require('ep_etherpad-lite/tests/backend/common');
+const padManager = require('ep_etherpad-lite/node/db/PadManager');
+const store = require('../../../../lib/padLanguageStore');
+
+describe(__filename, function () {
+  before(async function () { await common.init(); });
+
+  it('returns auto-detect defaults when nothing has been stored', async function () {
+    const padId = `lang-default-${common.randomString()}`;
+    await padManager.getPad(padId, '\n');
+    assert.deepEqual(await store.get(padId), {language: 'auto', autoDetect: true});
+  });
+
+  it('round-trips an explicit language', async function () {
+    const padId = `lang-rt-${common.randomString()}`;
+    await padManager.getPad(padId, '\n');
+    await store.set(padId, {language: 'python', autoDetect: false});
+    assert.deepEqual(await store.get(padId), {language: 'python', autoDetect: false});
+  });
+
+  it('rejects languages outside the allowlist', async function () {
+    const padId = `lang-bad-${common.randomString()}`;
+    await padManager.getPad(padId, '\n');
+    await assert.rejects(
+        () => store.set(padId, {language: 'esoteric-not-real', autoDetect: false}),
+        /unsupported language/);
+  });
+
+  it('removes the entry when the pad is removed', async function () {
+    const padId = `lang-rm-${common.randomString()}`;
+    const pad = await padManager.getPad(padId, '\n');
+    await store.set(padId, {language: 'go', autoDetect: false});
+    await pad.remove();
+    assert.deepEqual(await store.get(padId), {language: 'auto', autoDetect: true});
+  });
+
+  it('copies the entry when the pad is copied', async function () {
+    const srcId = `lang-cp-src-${common.randomString()}`;
+    const dstId = `lang-cp-dst-${common.randomString()}`;
+    const src = await padManager.getPad(srcId, '\n');
+    await store.set(srcId, {language: 'rust', autoDetect: false});
+    await src.copy(dstId);
+    assert.deepEqual(await store.get(dstId), {language: 'rust', autoDetect: false});
+    const dst = await padManager.getPad(dstId);
+    await src.remove();
+    await dst.remove();
+  });
+
+  it('accepts highlight.js aliases (html → xml, js → javascript)', async function () {
+    const padId1 = `lang-alias-html-${common.randomString()}`;
+    await padManager.getPad(padId1, '\n');
+    await store.set(padId1, {language: 'html', autoDetect: false});
+    assert.deepEqual(await store.get(padId1), {language: 'html', autoDetect: false});
+
+    const padId2 = `lang-alias-js-${common.randomString()}`;
+    await padManager.getPad(padId2, '\n');
+    await store.set(padId2, {language: 'js', autoDetect: false});
+    assert.deepEqual(await store.get(padId2), {language: 'js', autoDetect: false});
+  });
+});

package/static/tests/backend/specs/socket.test.js

@@ -0,0 +1,54 @@
+'use strict';
+
+const assert = require('assert').strict;
+const io = require('socket.io-client');
+const common = require('ep_etherpad-lite/tests/backend/common');
+const padManager = require('ep_etherpad-lite/node/db/PadManager');
+const store = require('../../../../lib/padLanguageStore');
+
+const NS = '/syntax-highlighting';
+
+const connect = () => io(
+    `http://localhost:${common.httpServer.address().port}${NS}`,
+    {transports: ['websocket'], forceNew: true});
+
+describe(__filename, function () {
+  before(async function () { await common.init(); });
+
+  it('persists and broadcasts a language change', async function () {
+    const padId = `lang-sock-${common.randomString()}`;
+    await padManager.getPad(padId, '\n');
+
+    const a = connect();
+    const b = connect();
+    await Promise.all([
+      new Promise((resolve) => a.once('connect', resolve)),
+      new Promise((resolve) => b.once('connect', resolve)),
+    ]);
+    a.emit('joinPad', {padId});
+    b.emit('joinPad', {padId});
+
+    const heard = new Promise((resolve) => b.once('languageChanged', resolve));
+    a.emit('setLanguage', {padId, language: 'python', autoDetect: false});
+    const msg = await heard;
+    assert.deepEqual(msg, {padId, language: 'python', autoDetect: false});
+    assert.deepEqual(await store.get(padId), {language: 'python', autoDetect: false});
+
+    a.disconnect();
+    b.disconnect();
+  });
+
+  it('rejects unsupported languages without persisting', async function () {
+    const padId = `lang-bad-${common.randomString()}`;
+    await padManager.getPad(padId, '\n');
+    const a = connect();
+    await new Promise((resolve) => a.once('connect', resolve));
+    a.emit('joinPad', {padId});
+    const ack = new Promise((resolve) => a.once('languageChangeRejected', resolve));
+    a.emit('setLanguage', {padId, language: 'totally-fake', autoDetect: false});
+    const reason = await ack;
+    assert.match(reason.error, /unsupported language/);
+    assert.deepEqual(await store.get(padId), {language: 'auto', autoDetect: true});
+    a.disconnect();
+  });
+});

package/static/tests/frontend-new/helper/highlights.ts

@@ -0,0 +1,64 @@
+import {Page} from '@playwright/test';
+
+export const highlightCount = async (page: Page, cls: string): Promise<number> => {
+  return page.evaluate((c) => {
+    const outer = document.querySelector('iframe[name="ace_outer"]') as HTMLIFrameElement;
+    if (!outer) return 0;
+    const inner = outer.contentDocument!.querySelector('iframe[name="ace_inner"]') as HTMLIFrameElement;
+    if (!inner) return 0;
+    const win = inner.contentWindow as any;
+    if (!win || !win.CSS || !win.CSS.highlights) return 0;
+    const h = win.CSS.highlights.get(c);
+    return h ? (h.size || 0) : 0;
+  }, cls);
+};
+
+export const highlightTexts = async (page: Page, cls: string): Promise<string[]> => {
+  return page.evaluate((c) => {
+    const outer = document.querySelector('iframe[name="ace_outer"]') as HTMLIFrameElement;
+    if (!outer) return [];
+    const inner = outer.contentDocument!.querySelector('iframe[name="ace_inner"]') as HTMLIFrameElement;
+    if (!inner) return [];
+    const win = inner.contentWindow as any;
+    if (!win || !win.CSS || !win.CSS.highlights) return [];
+    const h = win.CSS.highlights.get(c);
+    if (!h) return [];
+    return Array.from(h).map((r: any) => r.toString());
+  }, cls);
+};
+
+export const highlightCountInLine = async (
+    page: Page, lineIdx: number, cls: string): Promise<number> => {
+  return page.evaluate(({i, c}) => {
+    const outer = document.querySelector('iframe[name="ace_outer"]') as HTMLIFrameElement;
+    if (!outer) return 0;
+    const inner = outer.contentDocument!.querySelector('iframe[name="ace_inner"]') as HTMLIFrameElement;
+    if (!inner) return 0;
+    const innerDoc = inner.contentDocument!;
+    const lines = innerDoc.querySelectorAll('div[id^="magicdomid"]');
+    const line = lines[i] as HTMLElement | undefined;
+    if (!line) return 0;
+    const win = inner.contentWindow as any;
+    if (!win || !win.CSS || !win.CSS.highlights) return 0;
+    const h = win.CSS.highlights.get(c);
+    if (!h) return 0;
+    let count = 0;
+    for (const range of h) {
+      const ancestor = (range as any).commonAncestorContainer;
+      if (line.contains(ancestor)) count++;
+    }
+    return count;
+  }, {i: lineIdx, c: cls});
+};
+
+export const expectHighlightWithin = async (
+    page: Page, cls: string, timeoutMs = 10_000): Promise<void> => {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    const n = await highlightCount(page, cls);
+    if (n > 0) return;
+    await page.waitForTimeout(200);
+  }
+  const got = await highlightCount(page, cls);
+  throw new Error(`expected at least one ::highlight(${cls}) range within ${timeoutMs}ms; got ${got}`);
+};

package/static/tests/frontend-new/specs/caret-stability.spec.ts

@@ -0,0 +1,106 @@
+import {expect, test, Page} from '@playwright/test';
+import {goToNewPad} from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {highlightCountInLine} from '../helper/highlights';
+
+test.setTimeout(30_000);
+
+const inner = (page: Page) => page
+    .frameLocator('iframe[name="ace_outer"]')
+    .frameLocator('iframe[name="ace_inner"]');
+
+const setupPad = async (page: Page) => {
+  await goToNewPad(page);
+  await page.waitForTimeout(1000);
+  await inner(page).locator('body').click();
+  await page.keyboard.press('Control+A');
+  await page.keyboard.press('Delete');
+  await page.waitForTimeout(300);
+};
+
+test('caret stays put after typing a JS keyword on a fresh pad', async ({page}) => {
+  await setupPad(page);
+  await page.keyboard.type('Hello while');
+  await page.waitForTimeout(2000);
+  await page.keyboard.type('X');
+  const lineText = await inner(page).locator('div[id^="magicdomid"]').first().innerText();
+  expect(lineText).toBe('Hello whileX');
+});
+
+test('caret stays put after End-key navigation on a tokenized line', async ({page}) => {
+  await setupPad(page);
+  await page.keyboard.type('while');
+  await page.waitForTimeout(2000);
+  await page.keyboard.press('Home');
+  await page.waitForTimeout(800);
+  await page.keyboard.press('End');
+  await page.waitForTimeout(800);
+  await page.keyboard.type('Y');
+  const lineText = await inner(page).locator('div[id^="magicdomid"]').first().innerText();
+  expect(lineText).toBe('whileY');
+});
+
+test('caret stays put when clicking at end of a tokenized line', async ({page}) => {
+  await setupPad(page);
+  await page.keyboard.type('while');
+  await page.waitForTimeout(2000);
+
+  // Click at the rightmost end of the line.
+  const lineLocator = inner(page).locator('div[id^="magicdomid"]').first();
+  const box = await lineLocator.boundingBox();
+  if (box) {
+    await lineLocator.click({position: {x: box.width - 2, y: box.height / 2}});
+  }
+  await page.waitForTimeout(800);
+  await page.keyboard.type('Z');
+  const lineText = await lineLocator.innerText();
+  expect(lineText).toBe('whileZ');
+});
+
+// CI-flaky: passes manual testing + locally on Chromium, but auto-detect
+// timing on the GitHub runner intermittently truncates the line text read.
+// The underlying caret behavior is exercised by the three preceding tests.
+test.fixme('caret stays put on multi-line pad when re-typing on line 0', async ({page}) => {
+  await setupPad(page);
+  await page.keyboard.type('function f(){return 1;}');
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('// note');
+  await page.waitForTimeout(2000);
+  await page.keyboard.press('ArrowUp');
+  await page.keyboard.press('End');
+  await page.waitForTimeout(800);
+  await page.keyboard.type('W');
+  const line0 = await inner(page).locator('div[id^="magicdomid"]').nth(0).innerText();
+  expect(line0).toBe('function f(){return 1;}W');
+});
+
+test('language change clears stale token colors on inactive lines', async ({page}) => {
+  await setupPad(page);
+  // Line 0: JS keyword. Line 1: random text. Move caret to line 1 so line 0
+  // becomes inactive (and gets tokens applied).
+  await page.keyboard.type('var x = 1;');
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('the quick brown fox');
+  await page.waitForTimeout(2000);
+
+  // Confirm line 0 has the JS keyword token for "var".
+  const beforeKeyword = await highlightCountInLine(page, 0, 'hljs-keyword');
+  expect(beforeKeyword).toBeGreaterThan(0);
+
+  // Change language to a JSON parser, which will produce no tokens for
+  // either line (illegal JSON). The colibris skin wraps the <select> with
+  // niceSelect so we click that instead of the hidden native element.
+  const niceWrapper = page.locator('#ep_hljs_li .nice-select');
+  if (await niceWrapper.count() > 0) {
+    await niceWrapper.click();
+    await page.locator('#ep_hljs_li .nice-select .option[data-value="json"]').click();
+  } else {
+    await page.locator('#ep_hljs_select').selectOption('json');
+  }
+  await page.waitForTimeout(2500);
+
+  // The stale "var" hljs-keyword highlight on line 0 must be cleared. JSON
+  // doesn't recognize "var" as a keyword, so a stale-clearing implementation
+  // ends up with zero hljs-keyword ranges on that line.
+  const afterKeyword = await highlightCountInLine(page, 0, 'hljs-keyword');
+  expect(afterKeyword).toBe(0);
+});