Fassung 1.6.2: sichtbare leere Layouts und direktes Befuellen im Editor

public/assets/canvas-overlay.js

@@ -4,9 +4,9 @@ import { blockLabel, locate, dropList, isContainer } from './editor-model.js';
 // The layer above the preview.
 //
 // The preview is a sandboxed iframe without scripts of its own, and every change replaces its
-// whole document. Anything drawn inside it would therefore be wiped on the next keystroke and
-// would also end up in the markup we are supposed to be showing faithfully. So the outline, the
-// element toolbar, the insert points and the drop marker all live in the editor document, in an
+// whole document. The selection tools therefore live outside it and get rebound after a refresh.
+// Empty-container hit areas are rebuilt separately inside the frame by preview-containers.js.
+// The outline, element toolbar, insert points and drop marker live in the editor document, in an
 // absolutely positioned layer that sits exactly on top of the frame.
 //
 // Geometry: the layer is the same box as the frame and carries the same scale transform, so a
@@ -50,10 +50,11 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
   toolbar.setAttribute('role', 'toolbar');
   toolbar.setAttribute('aria-label', 'Aktionen für das gewählte Element');
   const drop = element('div', 'ov-drop');
+  const dropLabel = element('div', 'ov-drop-label');
   const insertBefore = insertButton('before', 'Element davor einfügen');
   const insertAfter = insertButton('after', 'Element dahinter einfügen');
   toolbar.append(selectName);
-  layer.append(hover, select, toolbar, insertBefore, insertAfter, drop);
+  layer.append(hover, select, toolbar, insertBefore, insertAfter, drop, dropLabel);
   stage.append(layer);
 
   for (const tool of TOOLS) {
@@ -206,7 +207,10 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
     positionToolbar(selectedBox, Boolean(sibling));
     const hoverBox = hovered && hovered !== selectedId ? rectOf(hovered) : null;
     if (place(hover, hoverBox)) paintLabel(hoverLabel, hovered);
-    if (dragging) paintDrop();
+    if (dragging) {
+      dropPlan = dragPoint ? planDrop(dragPoint.x, dragPoint.y, dragging.block) : null;
+      paintDrop();
+    }
   }
 
   // -------------------------------------------------------------------------------------------
@@ -259,8 +263,9 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
       const parentId = item?.parent?.id ?? null;
       if (id && !ownBranch && dropList(document_, parentId, block)) {
         const box = rectOf(id);
-        const after = box ? y > box.top + box.height / 2 : false;
-        return { parentId, index: item.index + (after ? 1 : 0), line: box ? { box, edge: after ? 'bottom' : 'top' } : null };
+        const horizontal = item.parent?.type === 'row' && indexInside(parentId, x, y).sideBySide;
+        const after = box ? (horizontal ? x > box.left + box.width / 2 : y > box.top + box.height / 2) : false;
+        return { parentId, index: item.index + (after ? 1 : 0), line: box ? { box, edge: horizontal ? (after ? 'right' : 'left') : (after ? 'bottom' : 'top') } : null };
       }
       if (!node) break;
       node = item?.parent ? doc()?.getElementById(item.parent.id) : null;
@@ -276,11 +281,19 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
 
   function paintDrop() {
     const line = dropPlan?.line;
-    if (!line?.box) { drop.hidden = true; return; }
+    if (!line?.box) { drop.hidden = true; dropLabel.hidden = true; return; }
     drop.hidden = false;
     const scale = getScale();
     const thickness = 3 / scale;
     const { box, edge } = line;
+    const target = dropPlan.parentId ? doc()?.getElementById(dropPlan.parentId) : null;
+    const label = target?.dataset.editorLabel || (dropPlan.parentId ? blockLabel(locate(getDocument().blocks, dropPlan.parentId)?.block) : 'Seite');
+    dropLabel.textContent = `${edge === 'inside' ? 'Einfügen in' : 'Einfügen ·'} ${label}`;
+    dropLabel.hidden = false;
+    dropLabel.style.left = `${Math.max(0, box.left + 8)}px`;
+    dropLabel.style.top = `${Math.max(2, box.top + 8)}px`;
+    counterScale(dropLabel, 'left', 'top');
+    drop.style.marginLeft = drop.style.marginTop = '0';
     drop.classList.toggle('ov-drop-inside', edge === 'inside');
     if (edge === 'inside') {
       drop.style.left = `${box.left}px`; drop.style.top = `${box.top}px`;
@@ -317,15 +330,20 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
     document_.addEventListener('dragover', event => {
       if (!dragging) return;
       event.preventDefault();
-      event.dataTransfer.dropEffect = dragging.kind === 'move' ? 'move' : 'copy';
+      dragPoint = { x: event.clientX, y: event.clientY };
       dropPlan = planDrop(event.clientX, event.clientY, dragging.block);
+      event.dataTransfer.dropEffect = dropPlan ? (dragging.kind === 'move' ? 'move' : 'copy') : 'none';
       paintDrop();
+      if (!scrollFrame) scrollFrame = requestAnimationFrame(scrollDrag);
+    });
+    document_.addEventListener('dragleave', event => {
+      if (!event.relatedTarget) { dragPoint = null; dropPlan = null; paintDrop(); }
     });
     document_.addEventListener('drop', event => {
       if (!dragging) return;
       event.preventDefault();
       // Both are read before the clean-up clears them.
-      const payload = dragging, plan = dropPlan;
+      const payload = dragging, plan = planDrop(event.clientX, event.clientY, dragging.block);
       endDrag();
       if (plan) onDrop(payload, plan);
     });
@@ -335,17 +353,35 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
   function startDrag(payload) {
     dragging = payload;
     layer.classList.add('is-dragging');
+    doc()?.documentElement.classList.add('editor-dragging');
     hovered = null;
     sync();
   }
 
   function endDrag() {
     dragging = null;
+    dragPoint = null;
+    cancelAnimationFrame(scrollFrame); scrollFrame = null;
     dropPlan = null;
     drop.hidden = true;
+    dropLabel.hidden = true;
     layer.classList.remove('is-dragging');
+    doc()?.documentElement.classList.remove('editor-dragging');
     sync();
   }
 
+  let dragPoint = null, scrollFrame = null;
+  function scrollDrag() {
+    scrollFrame = null;
+    if (!dragging || !dragPoint) return;
+    const edge = 60 / getScale();
+    const amount = dragPoint.y < edge ? -14 : dragPoint.y > frame.clientHeight - edge ? 14 : 0;
+    if (amount) {
+      doc()?.defaultView?.scrollBy(0, amount / getScale());
+      sync();
+      scrollFrame = requestAnimationFrame(scrollDrag);
+    }
+  }
+
   return { sync, attach, startDrag, endDrag, get dragPayload() { return dragging; } };
 }

public/assets/design-panel.js

@@ -124,6 +124,7 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
   let clipboard = null;
   let showAll = false, lastBlockId = null;
   const openGroups = new Map();
+  const renderedGroups = new Map();
 
   /** Replaces the styling of a block with a copy, or removes it when nothing is given. */
   const applyStyle = (doc, id, style) => {
@@ -459,6 +460,9 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
 
   /** Renders the whole panel for one block into the given container. */
   return function render(panel) {
+    // Read the previous nodes directly; a queued toggle event can be lost during a redraw.
+    for (const [key, details] of renderedGroups) openGroups.set(key, details.open);
+    renderedGroups.clear();
     const block = getBlock();
     const deviceName = getDevice();
     if (!block) return;
@@ -511,7 +515,7 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
       const details = element('details', 'design-group');
       const groupKey = `${block.type}:${group}`;
       details.open = openGroups.get(groupKey) ?? (group === priority[0] || group === 'spacing');
-      details.addEventListener('toggle', () => { if (details.isConnected) openGroups.set(groupKey, details.open); });
+      renderedGroups.set(groupKey, details);
       details.append(element('summary', null, groupLabel));
       const body = element('div', 'design-group-body');
 

public/assets/editor.css

@@ -246,6 +246,7 @@ dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .ov-insert:hover,.ov-insert:focus-visible{opacity:1}
 .ov-drop{position:absolute;background:var(--ring,#b55b12);border-radius:2px;box-shadow:0 0 0 1px #fff8;pointer-events:none}
 .ov-drop-inside{background:color-mix(in srgb, var(--ring,#b55b12) 15%, transparent);border:2px dashed var(--ring,#b55b12);box-shadow:none}
+.ov-drop-label{position:absolute;pointer-events:none;background:#2c634a;color:#fff;border-radius:5px;padding:6px 9px;font:600 12px/1.4 system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 7px #0002}
 /* While something is being dragged the outlines would only add noise. */
 .canvas-overlay.is-dragging .ov-hover,.canvas-overlay.is-dragging .ov-toolbar,.canvas-overlay.is-dragging .ov-insert{display:none}
 

public/assets/editor.js

@@ -4,6 +4,7 @@ import { createDesignPanel } from './design-panel.js';
 import { createRichText } from './rich-text.js';
 import { createCanvasOverlay } from './canvas-overlay.js';
 import { preview, rowPreview } from './library-previews.js';
+import { decorateContainers } from './preview-containers.js';
 
 // Mirrors DocumentValidator::ICONS; the server rejects anything outside this list.
 const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check'];
@@ -24,6 +25,7 @@ let device = 'desktop', propertyPanel = 'content', designTokens, designSchema, d
 let previewScale = 1, overlay = null, pendingInsert = null;
 const collapsed = new Set();
 let renderedProperties = null;
+let revealAfterPreview = null;
 
 function notify(message = '', recover = false) {
   $('#message').textContent = message;
@@ -114,6 +116,7 @@ function renderTree() {
 
 function choose(id, scroll = true) {
   if (busy) return;
+  if (id !== selected && pendingInsert) setPendingInsert(null);
   selected = locate(history.document.blocks, id) ? id : null;
   blockPath(history.document.blocks, selected).slice(0, -1).forEach(block => collapsed.delete(block.id));
   if (!selected) propertyPanel = 'content';
@@ -595,7 +598,13 @@ async function updatePreview() {
       const doc = frame.contentDocument;
       if (!doc || doc === altesDokument || !doc.getElementById('kant-styles')) return;
       angewandt = true;
-      const style = doc.createElement('link'); style.rel = 'stylesheet'; style.href = '/assets/preview.css'; doc.head.append(style);
+      const style = doc.createElement('link'); style.rel = 'stylesheet'; style.href = `/assets/preview.css?v=${new URL(import.meta.url).searchParams.get('v') ?? 'dev'}`;
+      // Register before insertion: cached loads (or errors) can precede DOMContentLoaded.
+      const styleReady = new Promise(resolve => {
+        style.addEventListener('load', () => resolve(true), { once: true });
+        style.addEventListener('error', () => resolve(false), { once: true });
+      });
+      doc.head.append(style);
       // The preview delivers the generated stylesheet as inert template text (see page.html.twig).
       // Applying it as a constructed stylesheet is not a source in the sense of the policy, so the
       // preview shows exactly what the published page shows, without a single blocked style.
@@ -607,6 +616,22 @@ async function updatePreview() {
       }
       doc.addEventListener('click', event => {
         event.preventDefault();
+        const insert = event.target.closest('[data-editor-target]');
+        if (insert && !busy && history) {
+          stopInlineEdit();
+          const id = insert.dataset.editorTarget;
+          if (!locate(history.document.blocks, id)) return;
+          choose(id, false);
+          if (insert.hasAttribute('data-editor-row')) {
+            setPendingInsert(null);
+            selected = history.change(content => insertRowAt(content, Number(insert.dataset.editorRow), id, 0));
+            propertyPanel = 'content'; changed();
+          } else if (locate(history.document.blocks, id).block.type === 'row') {
+            selected = history.change(content => insertBlockAt(content, 'column', id, 0));
+            changed();
+          } else setPendingInsert({ parentId: id, index: 0 });
+          return;
+        }
         if (inlineEdit) return;
         const element = event.target.closest('[id]');
         if (element && locate(history.document.blocks, element.id)) choose(element.id, false);
@@ -618,12 +643,23 @@ async function updatePreview() {
         if (block && INLINE_TEXT[block.type]) { event.preventDefault(); choose(element.id, false); startInlineEdit(element.id); }
       });
       doc.addEventListener('submit', event => event.preventDefault());
-      // Every refresh is a new document, so the layer above it has to bind to it again.
-      overlay?.attach();
-      frame.contentWindow.scrollTo(0, top); highlight();
-      // Erst jetzt ansehen lassen: bis hierher zeigte das Fenster eine Seite ohne Gestaltung.
-      frame.style.visibility = '';
-      $('#preview-status').textContent = 'Entwurf · Klicken wählt aus, Doppelklick bearbeitet Text, Elemente lassen sich hierher ziehen.';
+      // The head may arrive before the blocks. Decorate only once the complete DOM exists.
+      const finish = () => {
+        if (sequence !== previewSequence || doc !== frame.contentDocument) return;
+        decorateContainers(doc, history.document);
+        overlay?.attach();
+        styleReady.then(loaded => {
+          if (sequence !== previewSequence || doc !== frame.contentDocument) return;
+          frame.contentWindow.scrollTo(0, top);
+          highlight(revealAfterPreview === selected); revealAfterPreview = null;
+          markInsertTarget();
+          frame.style.visibility = '';
+          $('#preview-status').textContent = loaded
+            ? 'Entwurf · Klicken wählt aus, Doppelklick bearbeitet Text, Elemente lassen sich hierher ziehen.'
+            : 'Editor-Hilfsflächen konnten nicht geladen werden. Bitte den Editor neu laden.';
+        });
+      };
+      if (doc.readyState === 'loading') doc.addEventListener('DOMContentLoaded', finish, { once: true }); else finish();
     };
     // Solange die Gestaltung fehlt, bleibt die Fläche leer statt falsch.
     frame.style.visibility = 'hidden';
@@ -654,6 +690,7 @@ async function updatePreview() {
 
 function changed() {
   if (!locate(history.document.blocks, selected)) selected = null;
+  if (selected && !$('#preview').contentDocument?.getElementById(selected)) revealAfterPreview = selected;
   renderTree(); renderProperties(); controls(); schedulePreview();
 }
 
@@ -727,12 +764,23 @@ function setPendingInsert(target) {
   updateLibrary();
   $('#toolbox').classList.toggle('awaiting-insert', Boolean(target));
   $('#insert-hint').hidden = !target;
+  markInsertTarget();
   if (target) {
     if ($('#toolbox').hidden) $('#toggle-library').click();
-    $('#toolbox').scrollIntoView({ block: 'nearest' });
+    $('#library-search').value = ''; filterLibrary();
+    const name = target.parentId ? $('#preview').contentDocument?.getElementById(target.parentId)?.dataset.editorLabel || blockLabel(locate(history.document.blocks, target.parentId)?.block) : 'Seite';
+    $('#insert-hint').firstChild.textContent = `Einfügen in ${name}. Wähle jetzt ein Element. `;
+    $('#library-search').focus({ preventScroll: true });
+    $('#library-search').scrollIntoView({ block: 'nearest' });
   }
 }
 
+function markInsertTarget() {
+  const doc = $('#preview').contentDocument;
+  doc?.querySelectorAll('.editor-insert-target').forEach(node => node.classList.remove('editor-insert-target'));
+  if (pendingInsert?.parentId) doc?.getElementById(pendingInsert.parentId)?.classList.add('editor-insert-target');
+}
+
 // ---------------------------------------------------------------------------------------------
 // The toolbox.
 //

public/assets/preview-containers.js

@@ -0,0 +1,45 @@
+import { blockLabel } from './editor-model.js';
+
+/** Editing aids are created only in the preview DOM, never in a saved block or public HTML. */
+export function decorateContainers(preview, content) {
+  const visit = (blocks, parent = null) => {
+    blocks.forEach((block, index) => {
+      const node = preview.getElementById(block.id);
+      if (node && ['section', 'row', 'column'].includes(block.type)) {
+        const label = block.type === 'column' && parent?.type === 'row'
+          ? `Spalte ${index + 1} von ${blocks.length}` : blockLabel(block);
+        node.classList.add('editor-container');
+        node.dataset.editorLabel = label;
+        if (!block.children?.length) {
+          node.classList.add('editor-empty-container');
+          const host = block.type === 'section' ? node.querySelector(':scope > .section-inner') : node;
+          if (!host) return;
+          const empty = preview.createElement('div');
+          empty.className = 'editor-empty';
+          const name = preview.createElement('span');
+          name.className = 'editor-empty-name'; name.textContent = label;
+          const hint = preview.createElement('span');
+          hint.className = 'editor-empty-hint';
+          hint.textContent = block.type === 'row' ? 'Spalte hierher ziehen oder hinzufügen' : 'Element hierher ziehen oder hinzufügen';
+          const actions = preview.createElement('div'); actions.className = 'editor-empty-actions';
+          const add = (text, attribute, value, accessibleName) => {
+            const button = preview.createElement('button');
+            button.type = 'button'; button.textContent = text;
+            button.dataset.editorTarget = block.id;
+            button.setAttribute(attribute, value);
+            button.setAttribute('aria-label', accessibleName);
+            actions.append(button);
+          };
+          add(block.type === 'row' ? '＋ Spalte hinzufügen' : '＋ Inhalt hinzufügen', 'data-editor-insert', '', `${label}: ${block.type === 'row' ? 'Spalte' : 'Inhalt'} hinzufügen`);
+          if (block.type === 'section') {
+            for (const count of [1, 2, 3, 4]) add(`${count} ${count === 1 ? 'Spalte' : 'Spalten'}`, 'data-editor-row', String(count), `${count} ${count === 1 ? 'Spalte' : 'Spalten'} in dieser Sektion anlegen`);
+          }
+          empty.append(name, hint, actions);
+          host.append(empty);
+        }
+      }
+      visit(block.children ?? [], block);
+    });
+  };
+  visit(content.blocks);
+}

public/assets/preview.css

@@ -7,3 +7,17 @@
 
 /* Inline editing. Only ever active in the editor preview, never on a published page. */
 [contenteditable].editor-inline{outline:3px solid #b55b12;outline-offset:4px;border-radius:3px;cursor:text;background:#fffdf7}
+
+/* Empty layout areas must have a real hit area, including when sibling columns have content. */
+.editor-empty-container{min-height:130px!important}
+.editor-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:130px;width:100%;padding:22px 14px;border:2px dashed #93aa9a;border-radius:7px;background:#f3f8f4;color:#264f3d;text-align:center;font:14px/1.5 system-ui,sans-serif;box-sizing:border-box;grid-column:1/-1}
+.editor-empty-name{font-size:12px;font-weight:700;letter-spacing:.04em}
+.editor-empty-hint{font-size:13px;color:#496351}
+.editor-empty-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
+.editor-empty button{appearance:none;font:600 13px/1.3 system-ui,sans-serif;color:#264f3d;background:white;border:1px solid #94ad9d;border-radius:6px;min-height:40px;padding:9px 13px;cursor:pointer;letter-spacing:normal;text-transform:none;box-shadow:none;margin:0}
+.editor-empty button:hover,.editor-empty button:focus-visible{background:#deeee2;border-color:#32644a;outline:2px solid #32644a;outline-offset:2px}
+.editor-empty button[data-editor-insert]{background:#2c634a;color:white;border-color:#2c634a}
+.editor-container:hover:not(.editor-selected),.editor-dragging .editor-container{outline:1px dashed #6b927a;outline-offset:-1px}
+.editor-container.editor-insert-target{outline:3px solid #b55b12!important;outline-offset:-3px}
+.editor-dragging .editor-empty{background:#e6f1e9;border-color:#467858}
+@media(max-width:650px){.editor-empty{padding:16px 10px}.editor-empty button{min-height:44px}}