fofos-admin/web/canvas.ts

/**
 * The admin's own chrome, drawn INSIDE the rendered page.
 *
 * ── What this is, and where it deliberately does not live ──
 *
 * Nothing here exists in the website's source. The site renders a page; this puts the builder's
 * controls on top of it, from the plugin, at runtime. So the site never carries a line of code that
 * only an editor would ever see, and the builder can change without the site being rebuilt.
 *
 * It is possible because the preview frame is SAME ORIGIN — it comes through the platform's dev proxy
 * on Officer's own host — so `iframe.contentDocument` is readable and writable. That single fact is
 * what the whole page builder rests on.
 *
 * ── What the SITE has to provide, and it is only this ──
 *
 *   data-page-empty    the placeholder shown when a page has no sections
 *   data-section-id    which row a band came from
 *   data-column        a column within a band
 *
 * Three attributes and no behaviour. Markers rather than classes, so they cannot be mistaken for
 * styling, cannot be purged by a build that has never heard of this file, and read as what they are:
 * handles for something else.
 *
 * ── Plain DOM, not React ──
 *
 * React could portal into another document, and it would mean running a reconciler against a document
 * that reloads under it whenever the dev server rebuilds. These are a handful of elements with click
 * handlers; building them by hand costs a few lines, and a reload becomes a document that no longer
 * exists rather than a tree React still thinks it owns.
 *
 * ── Styles are inline, on purpose ──
 *
 * The frame has the SITE's stylesheet, which is Tailwind built by scanning the site's own templates.
 * A class this file invents was never scanned and does not exist there, so it would silently do
 * nothing.
 */

/** Everything injected carries this, so a re-injection can find and remove what the last one left. */
const MARK = 'data-fofos-admin-canvas';

/** The editor's own colour. Deliberately not the site's — this is chrome, and it should not blend in. */
const ACCENT = '#3b82f6';

export type CanvasSection = { id: number; name: string; layout: 'one' | 'two' };

export type Canvas = {
  sections: CanvasSection[];
  onAddSection: () => void;
  onDeleteSection: (section: CanvasSection) => void;
};

/**
 * Where the page's content goes.
 *
 * `<main>` because it is what the site's Layout renders and what the word means — the page minus the
 * furniture around it.
 */
const contentRoot = (document: Document): HTMLElement | null => document.querySelector('main');

const style = (element: HTMLElement, rules: string[]) => {
  element.style.cssText = rules.join(';');
};

/**
 * Draw the builder's controls into a rendered page.
 *
 * Returns a cleanup. It runs before the next injection and on unmount — see `onDocument` in
 * SitePreview — so a reload never leaves two sets of controls behind.
 */
export function paintCanvas(document: Document, canvas: Canvas): () => void {
  const root = contentRoot(document);
  if (!root) return () => {};

  // Anything a previous injection left. Cheap insurance: the cleanup should have run, and if a reload
  // raced it, a second Add section button is exactly the sort of thing nobody reports as a bug.
  root.querySelectorAll(`[${MARK}]`).forEach((node) => node.remove());

  /** Everything to undo, in the order it was done. */
  const undo: (() => void)[] = [];

  /*
    The site's empty-page placeholder, hidden while the builder draws its own controls in that space.

    Found by its marker rather than by position. Hidden rather than removed, so the cleanup puts it
    back — a page whose last section is deleted shows it again without a reload.
  */
  const placeholder = root.querySelector<HTMLElement>('[data-page-empty]');
  if (placeholder) {
    placeholder.style.display = 'none';
    undo.push(() => {
      placeholder.style.display = '';
    });
  }

  /*
    Every section, outlined and named.

    This is the whole reason the decoration exists: an EMPTY section renders as nothing, which is
    correct on the public site and useless in an editor. Somebody who has just chosen "two columns"
    needs to see two columns, not a blank page they have to take on trust.
  */
  for (const section of canvas.sections) {
    const element = root.querySelector<HTMLElement>(`[data-section-id="${section.id}"]`);
    if (!element) continue;

    const previousPosition = element.style.position;
    const previousOutline = element.style.outline;
    const previousOffset = element.style.outlineOffset;
    const previousMargin = element.style.margin;

    // `relative` so the label and the controls can be placed against this band rather than the page.
    element.style.position = 'relative';
    element.style.outline = `1px solid ${ACCENT}`;
    element.style.outlineOffset = '4px';
    // Room for the outline and the label above it, so two bands in a row do not touch.
    element.style.margin = '2.5rem 0';

    undo.push(() => {
      element.style.position = previousPosition;
      element.style.outline = previousOutline;
      element.style.outlineOffset = previousOffset;
      element.style.margin = previousMargin;
    });

    const bar = document.createElement('div');
    bar.setAttribute(MARK, 'section-bar');
    style(bar, [
      'position:absolute',
      'top:-1.75rem',
      'left:0',
      'right:0',
      'display:flex',
      'align-items:center',
      'gap:0.5rem',
      'font-size:0.6875rem',
      `color:${ACCENT}`,
      // The page's own font would make this look like content. It is not content.
      'font-family:ui-sans-serif, system-ui, sans-serif',
    ]);

    const label = document.createElement('span');
    label.textContent = section.name;
    style(label, ['font-weight:600']);

    const shape = document.createElement('span');
    shape.textContent = section.layout === 'two' ? 'two columns' : 'one column';
    style(shape, ['opacity:0.7']);

    const remove = document.createElement('button');
    remove.type = 'button';
    remove.textContent = 'Delete';
    style(remove, [
      'margin-left:auto',
      'cursor:pointer',
      'background:none',
      'border:0',
      'padding:0',
      'font:inherit',
      'color:inherit',
      'opacity:0.7',
      'text-decoration:underline',
    ]);
    const onRemove = () => canvas.onDeleteSection(section);
    remove.addEventListener('click', onRemove);
    undo.push(() => remove.removeEventListener('click', onRemove));

    bar.append(label, shape, remove);
    element.append(bar);
    undo.push(() => bar.remove());

    /*
      The columns, outlined too.

      An empty column has height and nothing else, so a two-column band and a one-column band look
      identical until something is in them — which is exactly when it is too late to notice you chose
      the wrong one.
    */
    element.querySelectorAll<HTMLElement>('[data-column]').forEach((column) => {
      const was = column.style.outline;
      const wasOffset = column.style.outlineOffset;
      column.style.outline = `1px dashed color-mix(in srgb, ${ACCENT} 45%, transparent)`;
      column.style.outlineOffset = '-4px';
      undo.push(() => {
        column.style.outline = was;
        column.style.outlineOffset = wasOffset;
      });
    });
  }

  // ── Add section, always last ─────────────────────────────────────────────────────────────────
  const zone = document.createElement('div');
  zone.setAttribute(MARK, 'add-section');
  style(zone, [
    'display:flex',
    'align-items:center',
    'justify-content:center',
    // Tall when the page is empty, modest once there is something to add to — the zone should not
    // dwarf the content it sits under.
    canvas.sections.length ? 'min-height:8rem' : 'min-height:40vh',
    'margin:2.5rem 0',
    'border:2px dashed color-mix(in srgb, currentColor 25%, transparent)',
    'border-radius:0.75rem',
  ]);

  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = '+  Add section';
  style(button, [
    'cursor:pointer',
    'padding:0.75rem 1.5rem',
    'border-radius:0.5rem',
    // The page's own colours, inverted, so the control belongs to whatever theme the site is wearing.
    'background:var(--site-fg, #000)',
    'color:var(--site-bg, #fff)',
    'border:0',
    'font:inherit',
    'font-size:0.875rem',
  ]);
  button.addEventListener('click', canvas.onAddSection);

  zone.append(button);
  root.append(zone);
  undo.push(() => {
    button.removeEventListener('click', canvas.onAddSection);
    zone.remove();
  });

  return () => {
    // Reversed, so a style put back is put back over the value that replaced it rather than under.
    for (const step of undo.reverse()) step();
  };
}