astro-dev-edit 0.11.0

package/src/client/editors/notice.ts

@@ -0,0 +1,160 @@
+import type { SourceLoc } from '../../shared/protocol.ts';
+import { clearHighlight } from '../hover.ts';
+import { pageEntryInfo, pageSource, resolvePageSource } from '../page-source.ts';
+import { trapFocus } from '../focus.ts';
+import * as state from '../state.ts';
+import { basename, buildBackdrop, buildPanel, styled, toast, wirePanelButtons } from '../ui.ts';
+import * as api from '../api.ts';
+import { openEntryPanel } from './entry.ts';
+import { mount } from '../shadow.ts';
+
+/**
+ * Refusal notice for content that can't be edited in place (expressions,
+ * nested markup, components). Offers "Open source" — and, when the page
+ * declares a backing content file, a primary "Edit page content" action that
+ * opens the CMS entry drawer for it.
+ *
+ * There is a third case between those two, and it is the one worth explaining.
+ * The server can often name the entry backing a page whose collection the user
+ * has **not** switched on — it knows the file, it knows the collection, and the
+ * only thing missing is permission. Saying nothing there would be the old
+ * silence this feature exists to end: you clicked text that plainly comes from
+ * somewhere, and the tool knows where. So the notice offers the switch by name.
+ */
+
+export interface NoticeOptions {
+  /**
+   * The tag the pointer actually landed on, when that element carries no
+   * source annotation and the loc below therefore belongs to an **ancestor**.
+   *
+   * Astro annotates only elements written in the file, so a `<Button>`'s
+   * rendered `<a>` and every element slotted in from MDX have none of their
+   * own, and the router classifies the nearest annotated ancestor instead. The
+   * refusal is right either way — none of it is editable here — but the
+   * *reason* then describes a different element than the one that was clicked,
+   * which reads as a puzzle: "contains nested markup" over a button that
+   * plainly holds one word. Naming the substitution is the whole fix.
+   */
+  clickedTag?: string;
+}
+
+export function showDynamicNotice(
+  src: SourceLoc,
+  reason: string,
+  openSource: (src: SourceLoc) => void,
+  openPeek: (src: SourceLoc) => void,
+  opts: NoticeOptions = {},
+): void {
+  clearHighlight();
+  const panel = buildPanel('Can’t edit this here');
+  const body = panel.querySelector('[data-body]') as HTMLElement;
+
+  if (opts.clickedTag) {
+    const lead = styled('p', 'atx-notice-lead');
+    lead.textContent =
+      `The <${opts.clickedTag}> you clicked isn’t written in this file — a component or ` +
+      'slotted content rendered it. The nearest element that is written here is the one ' +
+      'described below.';
+    body.append(lead);
+  }
+
+  const msg = styled('p', 'atx-notice-reason');
+  msg.textContent = reason;
+
+  // The location line opens the in-browser source peek — often all that's
+  // needed to see *why* this content refused, without leaving the page.
+  const where = styled('p', 'atx-notice-loc');
+  where.textContent = `${basename(src.file)}:${src.loc}`;
+  where.title = 'Peek at the source code';
+  where.addEventListener('click', () => {
+    close();
+    openPeek(src);
+  });
+
+  body.append(msg, where);
+
+  // On a detail page whose content lives in a markdown/MDX file, that file is
+  // almost always the *right* place to edit this text — not the template line
+  // the source loc points at. Offer a direct jump to it. (spec §16.2)
+  const contentFile = pageSource();
+  if (contentFile) {
+    const hint = styled('p', 'atx-notice-hint');
+    hint.textContent = `This page's content comes from ${basename(contentFile)} — that's where its title and body text are edited.`;
+    body.append(hint);
+  }
+
+  // Found the entry, but its collection is switched off — and not by the config,
+  // which would make the offer a button that refuses.
+  const found = pageEntryInfo();
+  const offer =
+    !contentFile &&
+    found?.refusal === 'not-enabled' &&
+    found.collection &&
+    found.entryFile &&
+    !found.pageEditingLocked
+      ? { collection: found.collection, file: found.entryFile }
+      : null;
+  if (offer) {
+    const hint = styled('p', 'atx-notice-hint');
+    hint.textContent =
+      `This page's content is in ${basename(offer.file)}, from the ${offer.collection} ` +
+      'collection. Page editing is off for it — switch it on and this text is editable ' +
+      'as form fields.';
+    body.append(hint);
+  }
+
+  /** Switch the collection on, then open the drawer the user was after. The
+   *  re-resolve is what puts Edit entry in the admin bar, through the
+   *  page-source subscription. */
+  const enableAndEdit = async (collection: string, file: string): Promise<void> => {
+    try {
+      await api.setCollectionPageEditing({ collection, enabled: true });
+    } catch (err) {
+      toast(err instanceof Error ? err.message : 'Could not switch page editing on', 'err');
+      return;
+    }
+    await resolvePageSource();
+    toast(`Page editing on for ${collection}`, 'ok');
+    void openEntryPanel(file);
+  };
+
+  const close = (): void => {
+    state.releaseIf(token);
+    releaseFocus();
+    panel.remove();
+    backdrop.remove();
+  };
+  const backdrop = buildBackdrop(close);
+  const token = state.begin({ kind: 'panel', close });
+
+  // cancel = close, "Open template" = jump to the .astro loc, and (when the
+  // page declares a content file) a primary "Edit page content" that opens
+  // the entry drawer for it. The drawer claims the state slot itself, so the
+  // notice just closes first.
+  wirePanelButtons(
+    panel,
+    close,
+    () => {
+      close();
+      if (contentFile) {
+        void openEntryPanel(contentFile);
+      } else if (offer) {
+        void enableAndEdit(offer.collection, offer.file);
+      } else {
+        openSource(src);
+      }
+    },
+    contentFile || offer
+      ? {
+          confirmLabel: contentFile ? 'Edit page content' : `Turn on for ${offer!.collection}`,
+          secondaryLabel: 'Open template',
+          onSecondary: () => {
+            openSource(src);
+            close();
+          },
+        }
+      : { confirmLabel: 'Open source' },
+  );
+  mount(backdrop, panel);
+  const releaseFocus = trapFocus(panel);
+}

package/src/client/editors/peek.ts

@@ -0,0 +1,135 @@
+import type { PeekResponse, SourceLoc } from '../../shared/protocol.ts';
+import * as api from '../api.ts';
+import { tokenizeLines } from '../highlight.ts';
+import { clearHighlight } from '../hover.ts';
+import { trapFocus } from '../focus.ts';
+import * as state from '../state.ts';
+import { basename, buildBackdrop, buildPanel, footButton, isolateScroll, styled } from '../ui.ts';
+import { mount } from '../shadow.ts';
+
+/**
+ * Source-peek panel: a read-only, syntax-tinted view of the source file,
+ * scrolled to the element's line — "what does this element look like in the
+ * file?" without leaving the browser. The /peek endpoint sends the whole file
+ * (a "⋯ N more lines" marker appears only when its huge-file cap trimmed the
+ * ends), so full context is a scroll away. Opened from the hover pill's
+ * file:loc label and the refusal notice's location line; the "Open in editor"
+ * button in its footer is the jump-out.
+ */
+
+/** A muted "⋯ N more lines" marker row for content the huge-file cap cut. */
+function moreRow(count: number, where: 'above' | 'below'): HTMLElement {
+  const row = styled('div', 'atx-peek-more');
+  row.textContent = `⋯ ${count} more line${count === 1 ? '' : 's'} ${where}`;
+  return row;
+}
+
+/** Render the fetched lines as gutter-numbered, token-tinted rows. Returns
+ *  the scroll container and the focused row (for centering). */
+function renderCode(peeked: PeekResponse): { container: HTMLElement; focusRow: HTMLElement | null } {
+  const container = styled('div', 'atx-peek-code');
+  // The peek is the tallest scroller in the overlay and the one most likely to
+  // be opened on a page driving its own scroll (Lenis and friends).
+  isolateScroll(container);
+
+  const gutterWidth = `${String(peeked.startLine + peeked.lines.length - 1).length + 1}ch`;
+  const tokenized = tokenizeLines(peeked.lines);
+  let focusRow: HTMLElement | null = null;
+
+  if (peeked.startLine > 1) container.append(moreRow(peeked.startLine - 1, 'above'));
+
+  tokenized.forEach((tokens, idx) => {
+    const lineNo = peeked.startLine + idx;
+    const isFocus = lineNo === peeked.focusLine;
+    const row = styled('div', `atx-peek-line${isFocus ? ' atx-peek-focus' : ''}`);
+    // The gutter's width is the widest line number in this file, so it is the
+    // one thing about a row a stylesheet cannot know.
+    const gutter = styled('span', 'atx-peek-gutter', { width: gutterWidth });
+    gutter.textContent = String(lineNo);
+    const code = styled('span', 'atx-peek-text');
+    for (const token of tokens) {
+      const span = styled('span', 'atx-peek-token');
+      span.dataset.token = token.kind;
+      span.textContent = token.text;
+      code.append(span);
+    }
+    if (tokens.length === 0) code.textContent = ' '; // keep empty lines their height
+    row.append(gutter, code);
+    container.append(row);
+    if (isFocus) focusRow = row;
+  });
+
+  const below = peeked.totalLines - (peeked.startLine + peeked.lines.length - 1);
+  if (below > 0) container.append(moreRow(below, 'below'));
+
+  return { container, focusRow };
+}
+
+/** Open the peek panel for a source loc. `openSource` powers the footer's
+ *  "Open in editor" jump-out. */
+export function openPeekPanel(src: SourceLoc, openSource: (src: SourceLoc) => void): void {
+  clearHighlight();
+  // Code wants room: much wider than the default 420px panel, and the code
+  // area runs edge-to-edge (its own padding) instead of the body's 16px.
+  const panel = buildPanel(`${basename(src.file)}:${src.loc}`, undefined, {
+    width: 'min(780px, 94vw)',
+  });
+  const body = panel.querySelector('[data-body]') as HTMLElement;
+  body.toggleAttribute('data-flush', true);
+
+  const loading = styled('div', 'atx-peek-loading');
+  loading.textContent = 'Loading source…';
+  body.append(loading);
+
+  let closed = false;
+  const close = (): void => {
+    closed = true;
+    state.releaseIf(token);
+    releaseFocus();
+    panel.remove();
+    backdrop.remove();
+  };
+  const backdrop = buildBackdrop(close);
+  const token = state.begin({ kind: 'panel', close });
+
+  const foot = panel.querySelector('[data-foot]') as HTMLElement;
+  foot.append(
+    footButton('Close', 'outline', close),
+    footButton('Open in editor', 'default', () => {
+      close();
+      openSource(src);
+    }),
+  );
+
+  mount(backdrop, panel);
+  const releaseFocus = trapFocus(panel);
+
+  void (async () => {
+    try {
+      const peeked = await api.peek({ file: src.file, loc: src.loc });
+      if (closed) return;
+      // Not an error: the file is real but package-owned or out of the content
+      // roots, so the server explains instead of returning source. Show the
+      // sentence rather than an empty code pane. (Reached by clicking the
+      // hover pill on an `astro:assets` <Image>.)
+      if (peeked.refused) {
+        loading.textContent = peeked.refused;
+        loading.dataset.tone = 'warn';
+        return;
+      }
+      const { container, focusRow } = renderCode(peeked);
+      loading.replaceWith(container);
+      // Center the focused line in the scroll window once it has a layout.
+      if (focusRow) {
+        requestAnimationFrame(() => {
+          container.scrollTop =
+            focusRow.offsetTop - container.clientHeight / 2 + focusRow.clientHeight / 2;
+        });
+      }
+    } catch (err) {
+      if (closed) return;
+      loading.textContent = `Could not load source — ${err instanceof Error ? err.message : 'unknown error'}`;
+      loading.dataset.tone = 'err';
+    }
+  })();
+}