create-nevela 0.7.1 → 0.9.1

package/template/web/components/dashboard/bulk-create-grid.tsx

@@ -12,6 +12,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
+import { isRich } from "@/lib/rich";
 import { cn } from "@/lib/utils";
 import { FieldWidget, type RelationMeta } from "./fields/field-widget";
 
@@ -41,6 +42,8 @@ const MOST_ROWS = 500;
 
 /** Kinds that fit in a cell: one control, one value. A file needs its own upload, so it is left to the form. */
 const IN_A_CELL = new Set(["string", "text", "int", "float", "boolean", "date", "datetime", "enum", "belongsTo"]);
+/** A file needs an upload and rich text needs an editor: neither is something to type into a cell. */
+const fitsACell = (def: { kind: string }) => IN_A_CELL.has(def.kind) && !isRich(def);
 
 /**
  * Add several records at once, in a grid.
@@ -82,10 +85,10 @@ function Grid({ resource, relations, onDone }: { resource: ClientResource; relat
   const [pending, startTransition] = useTransition();
   const validators = useMemo(() => createValidators(resource), [resource]);
   const all = useMemo(() => storedFields(resource) as [string, FieldDef][], [resource]);
-  const fields = useMemo(() => all.filter(([, def]) => IN_A_CELL.has(def.kind)), [all]);
+  const fields = useMemo(() => all.filter(([, def]) => fitsACell(def)), [all]);
   // A field this grid can't show and Laravel requires would fail every row, with nothing
   // on screen to fix. Say so, and leave those records to the form.
-  const missing = useMemo(() => all.filter(([, def]) => !IN_A_CELL.has(def.kind) && def.required !== false), [all]);
+  const missing = useMemo(() => all.filter(([, def]) => !fitsACell(def) && def.required !== false), [all]);
 
   const blank = useMemo(() => initialFormValues(resource, null) as Values, [resource]);
   const nextKey = useRef(STARTING_ROWS);

package/template/web/components/dashboard/fields/field-widget.tsx

@@ -10,12 +10,14 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { groupDigits, ungroup } from "@/lib/number";
+import { isRich } from "@/lib/rich";
 import { DateField, DateTimeField } from "./date-field";
 import { CountryField } from "./country-field";
 import { FileField } from "./file-field";
 import { MultiSelectField } from "./multi-select-field";
 import { PhoneField } from "./phone-field";
 import { RelationField } from "./relation-field";
+import { RichTextField } from "./rich-text-field";
 
 export interface RelationMeta {
   name: string;
@@ -56,6 +58,9 @@ export function FieldWidget(props: WidgetProps) {
 
   switch (field.kind) {
     case "text":
+      if (isRich(field)) {
+        return <RichTextField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} placeholder={field.placeholder} />;
+      }
       return <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />;
 
     case "int":

package/template/web/components/dashboard/fields/file-cell.tsx

@@ -1,5 +1,5 @@
-import { FileIcon } from "lucide-react";
-import { fileName, fileUrl, isImageKey } from "@/lib/files";
+import { DownloadIcon, FileIcon, LockIcon } from "lucide-react";
+import { fileName, fileUrl, isImageKey, isPrivateKey } from "@/lib/files";
 
 /**
  * A stored file in a table cell or a record's detail.
@@ -8,8 +8,29 @@ import { fileName, fileUrl, isImageKey } from "@/lib/files";
  * uploaded, so a table of fifty products downloads fifty small pictures, not fifty
  * full-size ones. Anything else is its filename, which is the useful part of a key
  * nobody wants to read in full.
+ *
+ * A private file is its name and a lock, picture or not: it has no thumbnail and no
+ * address of its own. With `download`, where it is fetched through its record, the name
+ * is the link that saves it.
  */
-export function FileCell({ value, size = 36 }: { resourceName?: string; fieldKey?: string; value: string; size?: number }) {
+export function FileCell({ value, size = 36, download }: { resourceName?: string; fieldKey?: string; value: string; size?: number; download?: string }) {
+  if (isPrivateKey(value)) {
+    const name = <span className="max-w-[24ch] truncate">{fileName(value)}</span>;
+    return (
+      <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+        <LockIcon aria-label="Private" className="size-3.5" />
+        {download ? (
+          <a href={download} download className="inline-flex items-center gap-1.5 text-primary hover:underline">
+            {name}
+            <DownloadIcon aria-hidden="true" className="size-3.5" />
+          </a>
+        ) : (
+          name
+        )}
+      </span>
+    );
+  }
+
   if (!isImageKey(value)) {
     return (
       <span className="inline-flex items-center gap-1.5 text-muted-foreground">

package/template/web/components/dashboard/fields/file-field.tsx

@@ -14,7 +14,7 @@ import {
 import { createUploadUrlAction } from "@/app/dashboard/actions";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
-import { fileName, fileUrl, isImageKey } from "@/lib/files";
+import { fileName, fileUrl, isImageKey, isPrivateKey } from "@/lib/files";
 import { cn } from "@/lib/utils";
 
 interface Props {
@@ -107,7 +107,8 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
 
   // Thumbnail for a stored image (a local preview replaces it while uploading).
   useEffect(() => {
-    setPreview(value && isImageKey(value) ? fileUrl(value, "thumb") : null);
+    // A private file has no thumbnail, and nothing to fetch one from.
+    setPreview(value && isImageKey(value) && !isPrivateKey(value) ? fileUrl(value, "thumb") : null);
   }, [value]);
 
   async function check(file: File): Promise<string | null> {
@@ -236,9 +237,12 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
           {thumbnail}
           <span className="min-w-0 flex-1 truncate text-sm font-medium">{fileName(value)}</span>
           <div className="flex shrink-0 gap-1">
-            <Button type="button" variant="ghost" size="sm" onClick={open}>
-              Open<span className="sr-only"> {fileName(value)}</span>
-            </Button>
+            {/* A private file is fetched through its record, from the record's page, not from here. */}
+            {!isPrivateKey(value) && (
+              <Button type="button" variant="ghost" size="sm" onClick={open}>
+                Open<span className="sr-only"> {fileName(value)}</span>
+              </Button>
+            )}
             {/* The field label points here; aria-label keeps the button named for what it does. */}
             <Button
               id={id}

package/template/web/components/dashboard/fields/rich-text-field.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { BoldIcon, Heading2Icon, Heading3Icon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, Redo2Icon, StrikethroughIcon, TextQuoteIcon, Undo2Icon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { isBlankHtml, linkAddress, tidyHtml } from "@/lib/rich";
+import { cn } from "@/lib/utils";
+
+type Mark = "bold" | "italic" | "strike" | "link" | "h2" | "h3" | "bullets" | "numbers" | "quote";
+
+/**
+ * The editor for a rich text field: a page to type on, and a toolbar of the eleven
+ * things that can be done to it.
+ *
+ * It is the browser's own editing (`contentEditable` and `document.execCommand`), with
+ * no editor library behind it, so it adds nothing to install or to keep up to date.
+ * Browsers disagree on the HTML they write (`<b>` or `<strong>`, `<div>` or `<p>`);
+ * Laravel settles that when it cleans what is saved, and sends back the one spelling.
+ */
+export function RichTextField({
+  id,
+  value,
+  onChange,
+  invalid,
+  disabled,
+  placeholder,
+}: {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  invalid?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+}) {
+  const page = useRef<HTMLDivElement>(null);
+  /** What the page last said it holds. A value that differs came from outside: a record loading, a form resetting. */
+  const said = useRef<string | null>(null);
+  /** Where the cursor was when the link box opened, since typing an address moves it away. */
+  const place = useRef<Range | null>(null);
+  const [marks, setMarks] = useState<Partial<Record<Mark, boolean>>>({});
+  const [linking, setLinking] = useState(false);
+  const [address, setAddress] = useState("");
+
+  useEffect(() => {
+    const element = page.current;
+    if (element && value !== said.current) {
+      element.innerHTML = value;
+      said.current = value;
+    }
+  }, [value]);
+
+  /** The nearest tag of this name around the cursor, inside the page. */
+  const around = useCallback((tag: string): Element | null => {
+    const selection = window.getSelection();
+    const node = selection && selection.rangeCount > 0 ? selection.anchorNode : null;
+    const element = node instanceof Element ? node : (node?.parentElement ?? null);
+    const found = element?.closest(tag) ?? null;
+    return found && page.current?.contains(found) ? found : null;
+  }, []);
+
+  const look = useCallback(() => {
+    if (!page.current || !page.current.contains(window.getSelection()?.anchorNode ?? null)) return;
+    setMarks({
+      bold: document.queryCommandState("bold"),
+      italic: document.queryCommandState("italic"),
+      strike: document.queryCommandState("strikeThrough"),
+      bullets: document.queryCommandState("insertUnorderedList"),
+      numbers: document.queryCommandState("insertOrderedList"),
+      link: around("a") !== null,
+      h2: around("h2") !== null,
+      h3: around("h3") !== null,
+      quote: around("blockquote") !== null,
+    });
+  }, [around]);
+
+  useEffect(() => {
+    document.addEventListener("selectionchange", look);
+    return () => document.removeEventListener("selectionchange", look);
+  }, [look]);
+
+  const say = useCallback(() => {
+    const element = page.current;
+    if (!element) return;
+    // Emptied, a page still holds the paragraph the cursor sits in.
+    const html = isBlankHtml(element.innerHTML) ? "" : element.innerHTML;
+    said.current = html;
+    onChange(html);
+  }, [onChange]);
+
+  const run = useCallback(
+    (command: string, argument?: string) => {
+      page.current?.focus();
+      document.execCommand(command, false, argument);
+      say();
+      look();
+    },
+    [say, look],
+  );
+
+  /** A heading is a kind of line: pressed again, the line goes back to being a paragraph. */
+  const heading = (tag: "h2" | "h3") => run("formatBlock", around(tag) ? "p" : tag);
+  const quote = () => (around("blockquote") ? run("outdent") : run("formatBlock", "blockquote"));
+
+  function openLink(open: boolean) {
+    if (open) {
+      const selection = window.getSelection();
+      place.current = selection && selection.rangeCount > 0 && page.current?.contains(selection.anchorNode) ? selection.getRangeAt(0).cloneRange() : null;
+      setAddress(around("a")?.getAttribute("href") ?? "");
+    }
+    setLinking(open);
+  }
+
+  function applyLink(typed: string) {
+    setLinking(false);
+    const href = linkAddress(typed);
+    // After the box has closed and handed the cursor back.
+    window.setTimeout(() => {
+      const element = page.current;
+      if (!element) return;
+      element.focus();
+      const selection = window.getSelection();
+      if (place.current && selection) {
+        selection.removeAllRanges();
+        selection.addRange(place.current);
+      }
+      if (href === "") {
+        run("unlink");
+      } else if (selection?.isCollapsed && !around("a")) {
+        // Nothing selected to make a link of: the address is its own words.
+        const text = href.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
+        run("insertHTML", `<a href="${text}">${text}</a>`);
+      } else {
+        run("createLink", href);
+      }
+    }, 0);
+  }
+
+  const tools: { mark?: Mark; label: string; icon: React.ReactNode; press: () => void }[][] = [
+    [
+      { mark: "bold", label: "Bold", icon: <BoldIcon />, press: () => run("bold") },
+      { mark: "italic", label: "Italic", icon: <ItalicIcon />, press: () => run("italic") },
+      { mark: "strike", label: "Strikethrough", icon: <StrikethroughIcon />, press: () => run("strikeThrough") },
+    ],
+    [
+      { mark: "h2", label: "Heading", icon: <Heading2Icon />, press: () => heading("h2") },
+      { mark: "h3", label: "Smaller heading", icon: <Heading3Icon />, press: () => heading("h3") },
+      { mark: "bullets", label: "Bullet list", icon: <ListIcon />, press: () => run("insertUnorderedList") },
+      { mark: "numbers", label: "Numbered list", icon: <ListOrderedIcon />, press: () => run("insertOrderedList") },
+      { mark: "quote", label: "Quote", icon: <TextQuoteIcon />, press: quote },
+    ],
+  ];
+  const history = [
+    { label: "Undo", icon: <Undo2Icon />, press: () => run("undo") },
+    { label: "Redo", icon: <Redo2Icon />, press: () => run("redo") },
+  ];
+
+  const tool = (item: { mark?: Mark; label: string; icon: React.ReactNode; press: () => void }) => (
+    <Button
+      key={item.label}
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      title={item.label}
+      aria-label={item.label}
+      aria-pressed={item.mark ? Boolean(marks[item.mark]) : undefined}
+      disabled={disabled}
+      className={cn("size-7", item.mark && marks[item.mark] && "bg-accent text-accent-foreground")}
+      // Pressing a tool must not take the cursor out of the page.
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={item.press}
+    >
+      {item.icon}
+    </Button>
+  );
+
+  return (
+    <div
+      className={cn(
+        "rounded-md border border-input shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 dark:bg-input/30",
+        invalid && "border-destructive ring-destructive/20 dark:ring-destructive/40",
+        disabled && "cursor-not-allowed opacity-50",
+      )}
+    >
+      <div role="toolbar" aria-label="Formatting" className="flex flex-wrap items-center gap-0.5 border-b border-input px-1.5 py-1">
+        {tools[0].map(tool)}
+        <Popover open={linking} onOpenChange={openLink}>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              title="Link"
+              aria-label="Link"
+              aria-pressed={Boolean(marks.link)}
+              disabled={disabled}
+              className={cn("size-7", marks.link && "bg-accent text-accent-foreground")}
+              onMouseDown={(event) => event.preventDefault()}
+            >
+              <LinkIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="start" className="w-80">
+            {/* Not a form: this sits inside the record's own form, and a form can't hold another. */}
+            <div className="flex flex-col gap-2">
+              <Input
+                autoFocus
+                value={address}
+                placeholder="https://example.com"
+                aria-label="Link address"
+                onChange={(event) => setAddress(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    applyLink(address);
+                  }
+                }}
+              />
+              <div className="flex justify-end gap-2">
+                {marks.link && (
+                  <Button type="button" variant="ghost" size="sm" onClick={() => applyLink("")}>
+                    Remove link
+                  </Button>
+                )}
+                <Button type="button" size="sm" onClick={() => applyLink(address)}>
+                  Apply
+                </Button>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+        <span aria-hidden className="mx-1 h-5 w-px bg-border" />
+        {tools[1].map(tool)}
+        <span aria-hidden className="mx-1 h-5 w-px bg-border" />
+        {history.map(tool)}
+      </div>
+      <div
+        ref={page}
+        id={id}
+        role="textbox"
+        aria-multiline="true"
+        aria-invalid={invalid || undefined}
+        aria-placeholder={placeholder}
+        data-placeholder={placeholder}
+        contentEditable={!disabled}
+        suppressContentEditableWarning
+        className="rich-text max-h-[32rem] min-h-40 overflow-y-auto px-3 py-2 text-base outline-none empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)] md:text-sm"
+        onFocus={() => document.execCommand("defaultParagraphSeparator", false, "p")}
+        onInput={say}
+        onBlur={say}
+        onPaste={(event) => {
+          event.preventDefault();
+          const html = event.clipboardData.getData("text/html");
+          if (html) run("insertHTML", tidyHtml(html));
+          else run("insertText", event.clipboardData.getData("text/plain"));
+        }}
+      />
+    </div>
+  );
+}

package/template/web/components/dashboard/form-activity.tsx

@@ -0,0 +1,53 @@
+import type { Resource } from "@flaredev/core";
+import { ShieldCheckIcon } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { formOf } from "@/lib/extras";
+import { laravel } from "@/lib/laravel";
+
+/** GET _nevela/forms/<slug>: what a resource's public form checks and has turned away. */
+interface FormReport {
+  robotCheck: "on" | "off" | "skipped" | "refusing";
+  blocked: { total: number; days: number; reasons: { reason: string; label: string; count: number }[] };
+}
+
+/**
+ * What a resource's public form turned away this week, above its table: "Blocked this
+ * week: 132 (118 robot check, 14 throwaway address)". Without it a form that is well
+ * protected and a form nobody uses look the same from in here.
+ *
+ * Shown for a resource whose descriptor has "protect", and says so plainly when the
+ * robot check it asks for isn't being made.
+ */
+export async function FormActivity({ resource }: { resource: Resource }) {
+  if (!formOf(resource.name)?.protect) return null;
+  const response = await laravel(`_nevela/forms/${resource.slug}`);
+  if (!response.ok) return null;
+  const { robotCheck, blocked } = response.body as FormReport;
+
+  return (
+    <div className="flex flex-col gap-2">
+      {robotCheck === "refusing" && (
+        <Alert variant="destructive">
+          <AlertDescription>
+            The public form is refusing everyone: it asks for the robot check, and TURNSTILE_SECRET_KEY isn&apos;t set in the API. Set it, or take
+            &quot;turnstile&quot; out of the descriptor.
+          </AlertDescription>
+        </Alert>
+      )}
+      {robotCheck === "skipped" && (
+        <Alert>
+          <AlertDescription>
+            The robot check is skipped while TURNSTILE_SECRET_KEY isn&apos;t set. That is fine in development. Set it before the site goes live.
+          </AlertDescription>
+        </Alert>
+      )}
+      <p className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ShieldCheckIcon className="size-4 shrink-0" aria-hidden="true" />
+        <span>
+          Blocked this week: <span className="font-medium text-foreground tabular-nums">{blocked.total === 0 ? "none" : blocked.total.toLocaleString()}</span>
+          {blocked.total > 0 && ` (${blocked.reasons.map((row) => `${row.count.toLocaleString()} ${row.label}`).join(", ")})`}
+        </span>
+      </p>
+    </div>
+  );
+}

package/template/web/components/dashboard/record-actions.tsx

@@ -3,10 +3,10 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
-import { PencilIcon, Trash2Icon } from "lucide-react";
+import { EyeOffIcon, PencilIcon, SendIcon, Trash2Icon } from "lucide-react";
 import { toast } from "sonner";
 import type { ClientResource } from "@flaredev/core";
-import { deleteRecordAction } from "@/app/dashboard/actions";
+import { deleteRecordAction, publishRecordAction } from "@/app/dashboard/actions";
 import { restoreRecordAction } from "@/app/dashboard/trash/actions";
 import {
   AlertDialog,
@@ -19,7 +19,9 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import type { PublishState, ResourceAction } from "@/lib/extras";
 import { keptFor, type TrashInfo } from "@/lib/trash-info";
+import { ActionButtons } from "./resource-action";
 import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
 import { toastMovedToTrash } from "./trash-actions";
 
@@ -36,11 +38,25 @@ interface Props {
   overlayForms: boolean;
   /** This resource's trash, when a deleted record goes there instead of going for good. */
   trash?: TrashInfo;
+  /** The resource's own actions that this person may run and that apply to this record as it is. */
+  actions?: ResourceAction[];
+  /** For a resource with a publish date: what this record is now, so the right one of Publish and Unpublish is offered. */
+  published?: PublishState;
 }
 
-/** Edit and delete, at the top of a record's own page. Deleting goes back to the list. */
-export function RecordActions({ resource, id, record, relations, listHref, editHref, canUpdate, canDelete, overlayForms, trash }: Props) {
+/** Publishing, the resource's own actions, then edit and delete, at the top of a record's own page. Deleting goes back to the list. */
+export function RecordActions({ resource, id, record, relations, listHref, editHref, canUpdate, canDelete, overlayForms, trash, actions = [], published }: Props) {
   const router = useRouter();
+  const [publishing, startPublishing] = useTransition();
+
+  const publish = (now: boolean) => {
+    startPublishing(async () => {
+      const result = await publishRecordAction(resource.name, id, now);
+      if (result.ok) toast.success(now ? `${resource.label} published.` : `${resource.label} is a draft again.`);
+      else toast.error(result.error);
+      router.refresh();
+    });
+  };
   const [editing, setEditing] = useState(false);
   const [confirming, setConfirming] = useState(false);
   const [pending, startTransition] = useTransition();
@@ -63,6 +79,19 @@ export function RecordActions({ resource, id, record, relations, listHref, editH
 
   return (
     <>
+      {canUpdate && published && published !== "published" && (
+        <Button disabled={publishing} onClick={() => publish(true)}>
+          {publishing ? <Spinner data-icon="inline-start" /> : <SendIcon data-icon="inline-start" />}
+          {published === "scheduled" ? "Publish now" : "Publish"}
+        </Button>
+      )}
+      {canUpdate && published === "published" && (
+        <Button variant="outline" disabled={publishing} onClick={() => publish(false)}>
+          {publishing ? <Spinner data-icon="inline-start" /> : <EyeOffIcon data-icon="inline-start" />}
+          Unpublish
+        </Button>
+      )}
+      <ActionButtons resourceName={resource.name} actions={actions} id={id} />
       {canUpdate &&
         (overlayForms ? (
           <Button variant="outline" onClick={() => setEditing(true)}>

package/template/web/components/dashboard/record-detail.tsx

@@ -5,7 +5,10 @@ import { Badge } from "@/components/ui/badge";
 import { FileCell } from "@/components/dashboard/fields/file-cell";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { adminPermissions, allResources, dashboardStore, requireAccess, resourcePath } from "@/lib/dashboard";
+import { adminPermissions, allowedActions, allResources, dashboardStore, requireAccess, resourcePath } from "@/lib/dashboard";
+import { actionApplies, publishFieldOf, publishState } from "@/lib/extras";
+import { privateFileUrl } from "@/lib/files";
+import { isRich } from "@/lib/rich";
 import { site } from "@/lib/site";
 import { trashFor } from "@/lib/trash";
 import { LocalTime } from "./local-time";
@@ -93,6 +96,8 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
             canDelete={permissions.delete}
             overlayForms={site.dashboard.forms === "sheet"}
             trash={trash}
+            actions={(await allowedActions(resource.name)).filter((action) => action.on === "record" && actionApplies(action, record))}
+            published={publishFieldOf(resource.name) ? publishState(record[publishFieldOf(resource.name)!]) : undefined}
           />
         }
       />
@@ -111,9 +116,12 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
               } else if (def.kind === "enum" && value != null) {
                 const tone = statusTone(value);
                 content = <Badge variant={tone === "neutral" ? "secondary" : tone}>{content}</Badge>;
+              } else if (isRich(def) && typeof value === "string" && value) {
+                // Shown as it was written. Laravel cleaned it when it was saved and again when it was read.
+                content = <div className="rich-text" dangerouslySetInnerHTML={{ __html: value }} />;
               } else if (def.kind === "file" && typeof value === "string" && value) {
                 // Bigger here than in the table: this is the page for looking at one record.
-                content = <FileCell resourceName={resource.name} fieldKey={key} value={value} size={96} />;
+                content = <FileCell resourceName={resource.name} fieldKey={key} value={value} size={96} download={privateFileUrl(resource.slug, id, key)} />;
               } else if (def.kind === "multiselect" && Array.isArray(value) && value.length > 0) {
                 content = (
                   <span className="flex flex-wrap gap-1">