Keep media rename file extensions fixed

test/media-library.test.js

@@ -408,5 +408,65 @@ test('media preview offers filename editing only with media update permission',
   const editable = renderMediaLibraryPage(data, '', { permissions: ['media-library.read', 'media-library.update'] });
   assert.match(editable, /data-media-gallery-rename-form/);
   assert.match(editable, /maxlength="255" required data-media-gallery-filename/);
+  assert.match(editable, /data-media-gallery-extension/);
   assert.match(editable, /data-media-gallery-rename-save/);
 });
+
+test('media preview rename keeps the original filename extension fixed', async () => {
+  const handlers = {};
+  const submittedNames = [];
+  const input = { value: '', disabled: false, maxLength: 255 };
+  const extension = { textContent: '' };
+  const title = { textContent: '' };
+  const body = { replaceChildren() {}, appendChild() {}, querySelector() { return null; } };
+  const renameForm = { action: '', addEventListener(name, callback) { handlers['form:' + name] = callback; } };
+  const renameSave = { disabled: false };
+  const renameStatus = { hidden: true, classList: { add() {}, remove() {} } };
+  const modal = {
+    querySelector(selector) {
+      return {
+        '[data-media-gallery-preview-body]': body,
+        '#media-gallery-preview-modal-label': title,
+        '[data-media-gallery-rename-form]': renameForm,
+        '[data-media-gallery-filename]': input,
+        '[data-media-gallery-extension]': extension,
+        '[data-media-gallery-rename-save]': renameSave,
+        '[data-media-gallery-rename-status]': renameStatus
+      }[selector] || null;
+    },
+    addEventListener(name, callback) { handlers['modal:' + name] = callback; }
+  };
+  const column = { dataset: { mediaId: '9' }, querySelector() { return null; } };
+  const preview = {
+    dataset: { mediaName: 'original.png' },
+    getAttribute(name) { return { 'data-media-path': '/media/uploads/id.png', 'data-media-type': 'image', 'data-media-name': 'original.png' }[name]; },
+    closest() { return column; },
+    setAttribute() {}
+  };
+  const context = vm.createContext({
+    URLSearchParams,
+    window: { location: { search: '' }, innerWidth: 1200, pulseModal: { show() {} } },
+    document: {
+      getElementById() { return modal; },
+      querySelector() { return null; },
+      addEventListener(name, callback) { handlers['document:' + name] = callback; },
+      createElement() { return {}; }
+    },
+    fetch: async (_url, options) => {
+      if (options && options.body) {
+        submittedNames.push(JSON.parse(options.body).name);
+        return { ok: true, async json() { return { name: 'updated.png' }; } };
+      }
+      return { ok: true, async json() { return { assets: [], nextOffset: 0, hasMore: false, total: 0 }; } };
+    }
+  });
+  vm.runInContext(fs.readFileSync(path.join(__dirname, '../src/web/public/js/settings/media-library.js'), 'utf8'), context);
+
+  handlers['document:click']({ target: { closest() { return preview; } } });
+  assert.equal(input.value, 'original');
+  assert.equal(extension.textContent, '.png');
+  assert.equal(input.maxLength, 251);
+  input.value = 'updated';
+  await handlers['form:submit']({ preventDefault() {} });
+  assert.deepEqual(submittedNames, ['updated.png']);
+});