Choose menu anchors, link targets in plugin settings and existing post terms

A menu entry picks its anchor from the linked page, link settings of plugins and own menu
links get page and PDF choice next to the address, and the post settings offer existing
categories and tags to click.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

public/assets/admin.css

@@ -990,3 +990,11 @@ details.card > summary:hover { background: #fafbf8 }
 .media-field-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #eef1eb }
 .media-field-name { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; min-width: 0 }
 .media-field-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px }
+/* Ein Linkfeld: die Adresse zum Tippen, darunter Seite oder PDF zum Wählen. */
+.link-field-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px }
+.link-field-actions .text-button { padding: 4px 0; font-size: 13px }
+/* Vorhandene Kategorien und Schlagwörter zum Anklicken. */
+.term-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
+.term-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer }
+.term-chip[aria-pressed="true"] { background: #edf4dc; border-color: var(--accent); font-weight: 650 }
+.term-chip[aria-pressed="true"]::before { content: '✓ '; }

public/assets/link-field.js

@@ -0,0 +1,26 @@
+import { openPageDialog } from './page-picker.js';
+import { openDocuments } from './media.js';
+
+/*
+ * Ein Linkfeld in der Verwaltung: die Adresse bleibt ein Textfeld - eine fremde Seite tippt man
+ * ein -, daneben „Seite wählen“ und „PDF wählen“. Ohne Skript bleibt das Textfeld allein.
+ *
+ * Markup: <div data-link-field> mit einem <input data-link-input> darin. Felder, die später
+ * erscheinen (neue Menüeinträge), bekommen ihre Knöpfe beim ersten Fokus.
+ */
+const enhance = field => {
+  if (field.dataset.linkReady) return;
+  const input = field.querySelector('[data-link-input]');
+  if (!input) return;
+  field.dataset.linkReady = '1';
+  const row = document.createElement('div'); row.className = 'link-field-actions';
+  const choose = value => { input.value = value; input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); input.focus(); };
+  const page = document.createElement('button'); page.type = 'button'; page.className = 'text-button'; page.textContent = 'Seite wählen';
+  page.addEventListener('click', () => openPageDialog({ onChoose: item => choose(item.path === 'home' ? '/' : `/${item.path}`) }));
+  const pdf = document.createElement('button'); pdf.type = 'button'; pdf.className = 'text-button'; pdf.textContent = 'PDF wählen';
+  pdf.addEventListener('click', () => openDocuments({ onChoose: item => choose(item.src) }));
+  row.append(page, pdf); input.after(row);
+};
+const all = () => document.querySelectorAll('[data-link-field]').forEach(enhance);
+all();
+new MutationObserver(all).observe(document.body, { childList: true, subtree: true });

public/assets/menu-editor.js

@@ -1,4 +1,5 @@
 import { setupPicker } from './page-picker.js';
+import './link-field.js';
 
 const form = document.querySelector('#menu-editor');
 const list = form.querySelector('#menu-items');
@@ -86,7 +87,8 @@ function createRow(data) {
     picker.querySelector('.picker-value').value = data.pageId || ''; picker.querySelector('.picker-status').textContent = '';
     body.append(picker); setupPicker(picker);
     field('anchor', data.anchor, 'Sprungziel (optional)').maxLength = 65;
-  } else { const url = field('url', data.url, 'Adresse'); url.required = true; url.maxLength = 2048; }
+    anchorChoice(row);
+  } else { const url = field('url', data.url, 'Adresse'); url.required = true; url.maxLength = 2048; linkButtons(url); }
   const newTab = field('newTab', '1', 'In neuem Tab öffnen', 'checkbox'); newTab.checked = data.newTab === true || data.newTab === '1';
   for (const [key, label, choices] of [['icon', 'Icon', { '': 'Kein Icon', ...Object.fromEntries(menuIcons.map(icon => [icon, iconNames[icon] || icon])) }], ['iconPosition', 'Icon-Position', { before: 'Vor dem Text', after: 'Nach dem Text' }]]) {
     const select = el('select'); select.dataset.key = key; select.id = `menu-${key}-${id}`;
@@ -101,6 +103,58 @@ function createRow(data) {
   row.append(actions); return row;
 }
 
+/*
+ * Das Sprungziel wird aus den Ankern der verknüpften Seite gewählt. Das Textfeld bleibt, was
+ * gespeichert wird - versteckt, und ohne Skript sichtbar zum Eintippen.
+ */
+const adminBase = document.querySelector('meta[name="admin-base"]').content;
+function anchorChoice(row) {
+  const input = row.querySelector('input[data-key="anchor"]');
+  const pageValue = row.querySelector('.picker-value');
+  if (!input || !pageValue || input.dataset.enhanced) return;
+  input.dataset.enhanced = '1';
+  const label = row.querySelector(`label[for="${input.id}"]`);
+  const select = el('select'); select.id = input.id; input.id += '-value'; input.type = 'hidden';
+  if (label) { label.htmlFor = select.id; label.textContent = 'Sprungziel'; }
+  input.after(select);
+  const help = el('p', 'field-help', ''); select.after(help);
+  let request = 0;
+  const load = async () => {
+    const mine = ++request, current = input.value;
+    select.replaceChildren(new Option('Seitenanfang', ''));
+    if (current) select.append(new Option(`#${current}`, current));
+    select.value = current;
+    help.textContent = '';
+    if (!pageValue.value) { select.disabled = true; return; }
+    select.disabled = false;
+    try {
+      const response = await fetch(`${adminBase}/api/sprungziele/${encodeURIComponent(pageValue.value)}`, { credentials: 'same-origin' });
+      if (!response.ok || response.redirected) throw new Error();
+      const { items } = await response.json();
+      if (mine !== request) return;
+      select.replaceChildren(new Option('Seitenanfang', ''));
+      for (const item of items) select.append(new Option(item.label, item.anchor));
+      if (current && !items.some(item => item.anchor === current)) select.append(new Option(`#${current} (auf der Seite nicht gefunden)`, current));
+      select.value = current;
+      help.textContent = items.length ? '' : 'Diese Seite hat keine Sprungziele. Im Editor bekommt eine Sektion unter „Erweitert“ einen Anker.';
+    } catch {
+      if (mine === request) help.textContent = 'Sprungziele konnten nicht geladen werden.';
+    }
+  };
+  select.addEventListener('change', () => { input.value = select.value; input.dispatchEvent(new Event('change', { bubbles: true })); });
+  pageValue.addEventListener('change', () => { input.value = ''; load(); });
+  load();
+}
+list.querySelectorAll('.menu-entry').forEach(anchorChoice);
+function linkButtons(input) {
+  // Die Adresse eines eigenen Links: Seite oder PDF wählen, eine fremde Adresse tippen.
+  if (input.closest('[data-link-field]')) return;
+  input.dataset.linkInput = '';
+  const box = el('div', 'link-field'); box.dataset.linkField = '';
+  input.before(box); box.append(input);
+}
+list.querySelectorAll('input[data-key="url"]').forEach(linkButtons);
+
 function restore(value) {
   form.elements.name.value = value.name; list.replaceChildren(...value.rows.map(createRow)); refresh(); last = state();
 }

public/assets/term-chips.js

@@ -0,0 +1,42 @@
+/*
+ * Kategorien und Schlagwörter eines Beitrags: das Textfeld mit der Liste durch Komma bleibt, was
+ * gespeichert wird. Darunter stehen die vorhandenen Namen zum Anklicken - ein Klick nimmt einen
+ * Namen auf oder heraus. Neue Namen tippt man weiter ein.
+ *
+ * Über den Dokumentknoten, weil die Suche in der Inhaltsliste die Ergebnisse austauscht.
+ */
+const split = value => value.split(',').map(name => name.trim()).filter(Boolean);
+const same = (a, b) => a.localeCompare(b, 'de', { sensitivity: 'base' }) === 0;
+
+const enhance = input => {
+  if (input.dataset.termReady) return;
+  let names = [];
+  try { names = JSON.parse(input.dataset.termInput || '[]'); } catch { names = []; }
+  input.dataset.termReady = '1';
+  if (!names.length) return;
+  const box = document.createElement('div'); box.className = 'term-chips'; box.setAttribute('role', 'group');
+  const label = document.querySelector(`label[for="${input.id}"]`)?.textContent || 'Vorhandene Namen';
+  box.setAttribute('aria-label', `${label}: vorhandene zum Übernehmen`);
+  const sync = () => {
+    const chosen = split(input.value);
+    for (const chip of box.children) chip.setAttribute('aria-pressed', String(chosen.some(name => same(name, chip.dataset.name))));
+  };
+  for (const name of names) {
+    const chip = document.createElement('button'); chip.type = 'button'; chip.className = 'term-chip'; chip.dataset.name = name; chip.textContent = name;
+    chip.addEventListener('click', () => {
+      const chosen = split(input.value);
+      const next = chosen.some(entry => same(entry, name)) ? chosen.filter(entry => !same(entry, name)) : [...chosen, name];
+      input.value = next.join(', ');
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      sync();
+    });
+    box.append(chip);
+  }
+  input.addEventListener('input', sync);
+  const help = input.parentElement.querySelector('.field-help');
+  (help ?? input).after(box);
+  sync();
+};
+const all = () => document.querySelectorAll('[data-term-input]').forEach(enhance);
+all();
+new MutationObserver(all).observe(document.body, { childList: true, subtree: true });