@bygghammar/cms-platform 0.80.1 → 0.90.0-m7.10

package/src/backoffice/FormSettingsView.tsx

@@ -6,12 +6,16 @@ import type { FormDefaults } from "../forms/field-sets";
 import { InspectorSection, LocalizedField, TextField } from "./inspectors/fields";
 import { SmartTagTextField, SmartTagLocalizedField } from "./forms/SmartTags";
 import { POLICY_WORDS, normalizePolicyUrl, renderLinkedText } from "../forms/rich-text";
+import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
+import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
 
 /** Host-provided data access for the shared form settings screen. */
 export type FormSettingsDeps = {
   defaults: FormDefaults | undefined;
   isLoading: boolean;
-  saveDefaults: (input: { data: Record<string, unknown> }) => Promise<unknown>;
+  saveDefaults: (input: {
+    data: Record<string, unknown> & { editSessionId?: string };
+  }) => Promise<unknown>;
   purgeOldSubmissions: (input: {
     data: { dryRun: boolean };
   }) => Promise<{ matched: number; deleted: number; cutoff: string }>;
@@ -25,6 +29,11 @@ export type FormSettingsDeps = {
 export function FormSettingsView({ deps }: { deps: FormSettingsDeps }) {
   const [s, setS] = useState<FormDefaults | null>(null);
   const [busy, setBusy] = useState(false);
+  // One shared row for every form, so a single well-known key locks it.
+  const lock = useEditLock({
+    resourceType: EDIT_LOCK_TYPES.formDefaults,
+    resourceId: "form_settings",
+  });
   const [purgeInfo, setPurgeInfo] = useState<{
     matched: number;
     deleted: number;
@@ -48,6 +57,7 @@ export function FormSettingsView({ deps }: { deps: FormSettingsDeps }) {
     try {
       await deps.saveDefaults({
         data: {
+          editSessionId: lock.sessionId,
           notify_to: s.notify_to,
           notify_enabled: s.notify_enabled,
           notify_subject: s.notify_subject,
@@ -100,7 +110,7 @@ export function FormSettingsView({ deps }: { deps: FormSettingsDeps }) {
         </div>
         <button
           onClick={onSave}
-          disabled={busy}
+          disabled={busy || lock.blocked}
           className="inline-flex items-center gap-2 bg-ink px-5 py-2.5 text-xs uppercase tracking-[0.2em] text-paper hover:bg-sea hover:text-ink disabled:opacity-50"
         >
           <Save className="size-4" />
@@ -108,7 +118,9 @@ export function FormSettingsView({ deps }: { deps: FormSettingsDeps }) {
         </button>
       </div>
 
-      <div className="mt-8 grid gap-6 lg:grid-cols-2">
+      <EditLockBanner lock={lock} className="mt-6" />
+
+      <EditLockFence lock={lock} className="mt-8 grid gap-6 lg:grid-cols-2">
         <div className="border border-ink/10 bg-white p-6 space-y-4">
           <InspectorSection title="Incomplete submissions">
             <label className="flex items-center gap-3 text-sm text-ink/70">
@@ -430,7 +442,7 @@ export function FormSettingsView({ deps }: { deps: FormSettingsDeps }) {
             </p>
           </InspectorSection>
         </div>
-      </div>
+      </EditLockFence>
     </div>
   );
 }

package/src/backoffice/GlobalSectionBuilderView.tsx

@@ -1,4 +1,7 @@
 import { useEffect, useState, type ComponentType, type ReactNode } from "react";
+
+import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
+import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
 import { toast } from "sonner";
 import { ArrowLeft, Save, Pencil, Layers, Globe } from "lucide-react";
 
@@ -26,9 +29,22 @@ export type GlobalSectionBuilderDeps<TBlock> = {
   allGlobals: { key: string; name: string; kind?: string; blocks?: unknown }[];
   /** Places this global is used, shown as a save-impact note. */
   usage: { name: string }[];
-  save: (input: { sectionId: string; blocks: TBlock[] }) => Promise<unknown>;
-  rename: (input: { sectionId: string; name: string }) => Promise<unknown>;
-  setKind: (input: { sectionId: string; kind: GlobalSectionKind }) => Promise<unknown>;
+  save: (input: {
+    sectionId: string;
+    blocks: TBlock[];
+    /** Editing session holding the lock; the server checks it before writing. */
+    editSessionId?: string;
+  }) => Promise<unknown>;
+  rename: (input: {
+    sectionId: string;
+    name: string;
+    editSessionId?: string;
+  }) => Promise<unknown>;
+  setKind: (input: {
+    sectionId: string;
+    kind: GlobalSectionKind;
+    editSessionId?: string;
+  }) => Promise<unknown>;
   refetch: () => void;
   /** Navigates back to the blocks or global-sections library. */
   goToLibrary: (kind: GlobalSectionKind) => void;
@@ -89,6 +105,13 @@ export function GlobalSectionBuilderView<TBlock>({
   const [dirty, setDirty] = useState(false);
   const [busy, setBusy] = useState(false);
 
+  // A global block is used on every page that references it, so two people
+  // editing one at once is the case worth catching most of all.
+  const lock = useEditLock({
+    resourceType: EDIT_LOCK_TYPES.globalSection,
+    resourceId: section?.id,
+  });
+
   useEffect(() => {
     if (blocksFromServer) {
       setBlocks(blocksFromServer);
@@ -101,7 +124,7 @@ export function GlobalSectionBuilderView<TBlock>({
     if (!section) return;
     setBusy(true);
     try {
-      await save({ sectionId: section.id, blocks });
+      await save({ sectionId: section.id, blocks, editSessionId: lock.sessionId });
       toast.success("Saved");
       setDirty(false);
       refetch();
@@ -117,7 +140,7 @@ export function GlobalSectionBuilderView<TBlock>({
     const next = window.prompt("Name", section.name);
     if (!next || next.trim() === "" || next === section.name) return;
     try {
-      await rename({ sectionId: section.id, name: next.trim() });
+      await rename({ sectionId: section.id, name: next.trim(), editSessionId: lock.sessionId });
       toast.success("Renamed");
       refetch();
     } catch (e) {
@@ -132,7 +155,7 @@ export function GlobalSectionBuilderView<TBlock>({
       return;
     }
     try {
-      await setKind({ sectionId: section.id, kind });
+      await setKind({ sectionId: section.id, kind, editSessionId: lock.sessionId });
       toast.success(kind === "block" ? "Now a global block" : "Now a global section");
       refetch();
     } catch (e) {
@@ -177,7 +200,12 @@ export function GlobalSectionBuilderView<TBlock>({
           </div>
           <div className="flex items-center gap-2 mt-1">
             <h1 className="font-serif text-3xl md:text-4xl text-ink">{section.name}</h1>
-            <button onClick={onRename} title="Rename" className="text-ink/40 hover:text-ink">
+            <button
+              onClick={onRename}
+              disabled={lock.blocked}
+              title="Rename"
+              className="text-ink/40 hover:text-ink disabled:opacity-40"
+            >
               <Pencil className="size-4" />
             </button>
           </div>
@@ -194,13 +222,14 @@ export function GlobalSectionBuilderView<TBlock>({
           </div>
           <button
             onClick={() => onConvert(isBlock ? "section" : "block")}
-            className="mt-2 text-xs text-sea hover:underline"
+            disabled={lock.blocked}
+            className="mt-2 text-xs text-sea hover:underline disabled:opacity-40 disabled:no-underline"
           >
             {isBlock ? "Convert to global section" : "Convert to global block"}
           </button>
         </div>
         <button
-          disabled={busy || !dirty}
+          disabled={busy || !dirty || lock.blocked}
           onClick={onSave}
           className="inline-flex items-center gap-2 bg-ink text-white px-4 py-2 text-sm disabled:opacity-40"
         >
@@ -208,7 +237,9 @@ export function GlobalSectionBuilderView<TBlock>({
         </button>
       </div>
 
-      <div className="mt-6">
+      <EditLockBanner lock={lock} className="mt-4" />
+
+      <EditLockFence lock={lock} className="mt-6 block">
         <Editor
           pageKey={`gs:${sectionKey}`}
           initialBlocks={initialBlocks}
@@ -219,7 +250,7 @@ export function GlobalSectionBuilderView<TBlock>({
           onDirtyChange={setDirty}
           singleBlock={isBlock}
         />
-      </div>
+      </EditLockFence>
     </div>
   );
 }

package/src/backoffice/NavigationView.tsx

@@ -3,6 +3,9 @@ import type { ComponentType } from "react";
 import { RotateCcw, Save } from "lucide-react";
 import { toast } from "sonner";
 
+import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
+import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
+
 /** The two site-wide content sections this screen edits. */
 export type NavigationSectionKey = "nav" | "footer";
 
@@ -16,7 +19,14 @@ export type NavigationDeps = {
   defaults: Record<string, unknown>;
   /** The host's section editor, already wired to its locales and media. */
   SectionForm: ComponentType<{ value: unknown; onChange: (next: unknown) => void }>;
-  saveSection: (input: { data: { key: string; data: unknown } }) => Promise<unknown>;
+  saveSection: (input: {
+    data: {
+      key: string;
+      data: unknown;
+      /** Editing session holding the lock; the server checks it before writing. */
+      editSessionId?: string;
+    };
+  }) => Promise<unknown>;
   refresh: () => Promise<unknown> | void;
 };
 
@@ -42,6 +52,13 @@ function Editor({
   const [busy, setBusy] = useState(false);
   const [dirty, setDirty] = useState(false);
 
+  // Navigation and the footer are separate rows, so they lock separately: one
+  // person can rework the menu while another fixes a footer link.
+  const lock = useEditLock({
+    resourceType: EDIT_LOCK_TYPES.contentSection,
+    resourceId: sectionKey,
+  });
+
   useEffect(() => {
     setDraft(current);
     setDirty(false);
@@ -50,7 +67,9 @@ function Editor({
   const onSave = async () => {
     setBusy(true);
     try {
-      await saveSection({ data: { key: sectionKey, data: draft } });
+      await saveSection({
+        data: { key: sectionKey, data: draft, editSessionId: lock.sessionId },
+      });
       await refresh();
       toast.success(`${title} saved`);
       setDirty(false);
@@ -79,18 +98,22 @@ function Editor({
       </header>
 
       <div className="p-6">
-        <SectionForm
-          value={draft}
-          onChange={(next) => {
-            setDraft(next);
-            setDirty(true);
-          }}
-        />
+        <EditLockBanner lock={lock} className="mb-6" />
+
+        <EditLockFence lock={lock}>
+          <SectionForm
+            value={draft}
+            onChange={(next) => {
+              setDraft(next);
+              setDirty(true);
+            }}
+          />
+        </EditLockFence>
 
         <div className="mt-6 flex flex-wrap items-center gap-3">
           <button
             onClick={onSave}
-            disabled={busy || !dirty}
+            disabled={busy || !dirty || lock.blocked}
             className="inline-flex items-center gap-2 bg-ink text-paper px-6 py-3 text-xs uppercase tracking-[0.22em] hover:bg-ink/85 disabled:opacity-50"
           >
             <Save className="size-4" />
@@ -98,7 +121,8 @@ function Editor({
           </button>
           <button
             onClick={onReset}
-            className="inline-flex items-center gap-2 border border-ink/20 px-6 py-3 text-xs uppercase tracking-[0.22em] hover:border-ink"
+            disabled={lock.blocked}
+            className="inline-flex items-center gap-2 border border-ink/20 px-6 py-3 text-xs uppercase tracking-[0.22em] hover:border-ink disabled:opacity-50"
           >
             <RotateCcw className="size-4" />
             Reset to default

package/src/backoffice/PageBuilderView.tsx

@@ -8,6 +8,9 @@
  */
 
 import { useEffect, useState, type ReactNode } from "react";
+
+import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
+import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
 import {
   ArrowLeft,
   Save,
@@ -76,6 +79,8 @@ export type PageBuilderDeps<TBlock> = {
     blocks: TBlock[];
     publish: boolean;
     note?: string;
+    /** Editing session holding the lock; the server checks it before writing. */
+    editSessionId?: string;
   }) => Promise<{ versionId: string }>;
   /** Persists unsaved shared-content edits; returns the keys it saved. */
   flushSharedDrafts?: () => Promise<string[]>;
@@ -84,10 +89,12 @@ export type PageBuilderDeps<TBlock> = {
     publishAt: string;
     unpublishAt: string | null;
     note?: string;
+    /** Editing session holding the lock; the server checks it before writing. */
+    editSessionId?: string;
   }) => Promise<unknown>;
-  cancelPublication: (publicationId: string) => Promise<unknown>;
-  restoreVersion: (versionId: string) => Promise<unknown>;
-  rename: (input: { pageId: string; name: string }) => Promise<unknown>;
+  cancelPublication: (publicationId: string, editSessionId?: string) => Promise<unknown>;
+  restoreVersion: (versionId: string, editSessionId?: string) => Promise<unknown>;
+  rename: (input: { pageId: string; name: string; editSessionId?: string }) => Promise<unknown>;
   refetchPage: () => void;
   refetchVersions: () => void;
   refetchPublications: () => void;
@@ -136,6 +143,10 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
   const [locale, setLocale] = useState<string>(defaultLocale);
   const [copied, setCopied] = useState(false);
 
+  // Held for as long as this builder is open. Without a lock provider the
+  // handle reports "not enforced" and nothing below changes.
+  const lock = useEditLock({ resourceType: EDIT_LOCK_TYPES.page, resourceId: page?.id });
+
   useEffect(() => {
     if (blocksFromServer) {
       setBlocks(blocksFromServer);
@@ -172,7 +183,11 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
   const onRename = async () => {
     if (!page || !renameValue?.trim()) return;
     try {
-      await deps.rename({ pageId: page.id, name: renameValue.trim() });
+      await deps.rename({
+        pageId: page.id,
+        name: renameValue.trim(),
+        editSessionId: lock.sessionId,
+      });
       notify.success("Page renamed");
       setRenameValue(null);
       deps.refetchPage();
@@ -188,7 +203,7 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
       // Shared content-section edits made in the inspector are part of the page
       // from the editor's point of view, so Save/Publish must cover them too.
       await deps.flushSharedDrafts?.();
-      await deps.save({ pageId: page.id, blocks, publish });
+      await deps.save({ pageId: page.id, blocks, publish, editSessionId: lock.sessionId });
       notify.success(publish ? "Published" : "Draft saved");
       setDirty(false);
       deps.refetchPage();
@@ -212,12 +227,14 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
         blocks,
         publish: false,
         note: scheduleNote || "Scheduled draft",
+        editSessionId: lock.sessionId,
       });
       await deps.schedule({
         versionId: res.versionId,
         publishAt: new Date(publishAt).toISOString(),
         unpublishAt: unpublishAt ? new Date(unpublishAt).toISOString() : null,
         note: scheduleNote || undefined,
+        editSessionId: lock.sessionId,
       });
       notify.success("Scheduled");
       setDirty(false);
@@ -236,7 +253,7 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
   const onCancelPub = async (id: string) => {
     if (!confirm("Cancel this scheduled publication?")) return;
     try {
-      await deps.cancelPublication(id);
+      await deps.cancelPublication(id, lock.sessionId);
       notify.success("Cancelled");
       deps.refetchPublications();
     } catch (e) {
@@ -247,7 +264,7 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
   const onRestore = async (versionId: string) => {
     if (!confirm("Restore this version? This will publish it as the current live version.")) return;
     try {
-      await deps.restoreVersion(versionId);
+      await deps.restoreVersion(versionId, lock.sessionId);
       notify.success("Restored");
       setShowHistory(false);
       deps.refetchPage();
@@ -277,7 +294,8 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
               {page.name}
               <button
                 onClick={() => setRenameValue(page.name)}
-                className="text-xs font-sans text-ink/50 hover:text-sea underline"
+                disabled={lock.blocked}
+                className="text-xs font-sans text-ink/50 hover:text-sea underline disabled:opacity-40"
               >
                 rename
               </button>
@@ -286,6 +304,7 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
             <div className="mt-1 flex items-center gap-2">
               <input
                 autoFocus
+                disabled={lock.blocked}
                 value={renameValue}
                 onChange={(e) => setRenameValue(e.target.value)}
                 onKeyDown={(e) => {
@@ -294,7 +313,11 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
                 }}
                 className="border border-ink/20 px-3 py-2 text-lg"
               />
-              <button onClick={onRename} className="text-sm text-sea hover:underline">
+              <button
+                onClick={onRename}
+                disabled={lock.blocked}
+                className="text-sm text-sea hover:underline disabled:opacity-40 disabled:no-underline"
+              >
                 Save
               </button>
               <button
@@ -367,14 +390,14 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
             <History className="size-4" /> History
           </button>
           <button
-            disabled={busy || !dirty}
+            disabled={busy || !dirty || lock.blocked}
             onClick={() => onSave(false)}
             className="inline-flex items-center gap-2 border border-ink/30 px-4 py-2 text-sm text-ink hover:border-sea disabled:opacity-40"
           >
             <Save className="size-4" /> Save draft
           </button>
           <button
-            disabled={busy}
+            disabled={busy || lock.blocked}
             onClick={() => onSave(true)}
             className="inline-flex items-center gap-2 bg-ink text-white px-4 py-2 text-sm disabled:opacity-40"
           >
@@ -383,6 +406,8 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
         </div>
       </div>
 
+      <EditLockBanner lock={lock} className="mt-4" />
+
       {showSchedule && (
         <div className="mt-6 border border-ink/10 bg-white p-4">
           <div className="flex items-center justify-between mb-3">
@@ -400,6 +425,7 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
               </span>
               <input
                 type="datetime-local"
+                disabled={lock.blocked}
                 value={publishAt}
                 onChange={(e) => setPublishAt(e.target.value)}
                 className="w-full border border-ink/20 px-2 py-1.5 text-sm"
@@ -411,6 +437,7 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
               </span>
               <input
                 type="datetime-local"
+                disabled={lock.blocked}
                 value={unpublishAt}
                 onChange={(e) => setUnpublishAt(e.target.value)}
                 className="w-full border border-ink/20 px-2 py-1.5 text-sm"
@@ -419,6 +446,7 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
             <label className="block md:col-span-1">
               <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">Note</span>
               <input
+                disabled={lock.blocked}
                 value={scheduleNote}
                 onChange={(e) => setScheduleNote(e.target.value)}
                 className="w-full border border-ink/20 px-2 py-1.5 text-sm"
@@ -427,7 +455,7 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
             </label>
             <div className="flex items-end">
               <button
-                disabled={busy || !publishAt}
+                disabled={busy || !publishAt || lock.blocked}
                 onClick={onSchedule}
                 className="w-full inline-flex items-center justify-center gap-2 bg-sea text-ink px-4 py-2 text-sm disabled:opacity-40 border border-ink/10"
               >
@@ -488,7 +516,8 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
                     </div>
                     {p.is_active && status !== "expired" && (
                       <button
-                        className="text-red-600 hover:underline"
+                        className="text-red-600 hover:underline disabled:opacity-40 disabled:no-underline"
+                        disabled={lock.blocked}
                         onClick={() => onCancelPub(p.id)}
                       >
                         Cancel
@@ -537,7 +566,11 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
                           {open ? "Hide changes" : "View changes"}
                         </button>
                       )}
-                      <button className="text-sea hover:underline" onClick={() => onRestore(v.id)}>
+                      <button
+                        className="text-sea hover:underline disabled:opacity-40 disabled:no-underline"
+                        disabled={lock.blocked}
+                        onClick={() => onRestore(v.id)}
+                      >
                         Restore
                       </button>
                     </div>
@@ -563,9 +596,11 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
         </div>
       )}
 
-      <div className="mt-6">
+      {/* The canvas itself: fenced so a blocked editor cannot rearrange blocks
+          or retype copy that the server will refuse to save. */}
+      <EditLockFence lock={lock} className="mt-6 block">
         {deps.renderEditor({ blocks, setBlocks, locale, setLocale, setDirty })}
-      </div>
+      </EditLockFence>
 
       {deps.seoPanel && (
         <div className="mt-12 border-t border-ink/10 pt-8">

package/src/backoffice/RichTextEditor.tsx

@@ -34,6 +34,8 @@ import {
   Underline as UnderlineIcon,
   Undo2,
   Unlink,
+  Maximize2,
+  Minimize2,
   MoveHorizontal,
 } from "lucide-react";
 import { MediaPickerDialog } from "./inspectors/fields";
@@ -635,21 +637,37 @@ function Toolbar({ editor }: { editor: Editor }) {
   );
 }
 
+/** Editing height: comfortable by default, near-full-screen when expanded. */
+const HEIGHTS = {
+  normal: "max-h-[32rem]",
+  expanded: "max-h-[calc(100vh-14rem)]",
+} as const;
+
 /**
  * Advanced WYSIWYG editor (TipTap) used by the rich-text block.
  * Emits sanitized HTML; also offers a raw HTML source view for pasting
  * markup from elsewhere.
+ *
+ * There is no length limit anywhere in the path this editor feeds — not here,
+ * not in the request schema, not in the `jsonb` column — so a long document is
+ * a matter of ergonomics rather than capacity. The editing area scrolls
+ * internally and expands to nearly the full window, which is what makes a long
+ * one workable.
  */
 export function RichTextEditor({
   value,
   onChange,
   placeholder = "Write or paste your text…",
+  readOnly = false,
 }: {
   value: string;
   onChange: (html: string) => void;
   placeholder?: string;
+  /** Show the text but refuse edits — used while somebody else holds the lock. */
+  readOnly?: boolean;
 }) {
   const [source, setSource] = useState(false);
+  const [expanded, setExpanded] = useState(false);
   const [draft, setDraft] = useState(value);
   const last = useRef(value);
 
@@ -682,6 +700,7 @@ export function RichTextEditor({
       Placeholder.configure({ placeholder }),
     ],
     content: value || "",
+    editable: !readOnly,
     editorProps: {
       attributes: {
         class: "rte-content focus:outline-none",
@@ -694,6 +713,12 @@ export function RichTextEditor({
     },
   });
 
+  // A `contenteditable` is not a form control, so a disabled fieldset around
+  // this editor does not stop it. Telling ProseMirror directly does.
+  useEffect(() => {
+    editor?.setEditable(!readOnly);
+  }, [editor, readOnly]);
+
   // Adopt external changes (locale switch, version rollback) without
   // clobbering what the user is typing.
   useEffect(() => {
@@ -721,8 +746,8 @@ export function RichTextEditor({
             value={draft}
             onChange={(e) => setDraft(e.target.value)}
             spellCheck={false}
-            rows={16}
-            className="w-full border border-ink/15 p-2 font-mono text-xs text-ink focus:border-sea focus:outline-none"
+            rows={expanded ? 40 : 16}
+            className="w-full resize-y border border-ink/15 p-2 font-mono text-xs text-ink focus:border-sea focus:outline-none"
           />
           <div className="mt-2 flex gap-2">
             <button
@@ -745,7 +770,7 @@ export function RichTextEditor({
           </div>
         </div>
       ) : (
-        <div className="max-h-[32rem] overflow-auto p-4">
+        <div className={`${expanded ? HEIGHTS.expanded : HEIGHTS.normal} overflow-auto p-4`}>
           <EditorContent editor={editor} />
         </div>
       )}
@@ -755,17 +780,28 @@ export function RichTextEditor({
             ? `${editor.storage.characterCount?.characters?.() ?? editor.getText().length} chars`
             : ""}
         </span>
-        <button
-          type="button"
-          onClick={() => {
-            setDraft(value);
-            setSource((s) => !s);
-          }}
-          className="flex items-center gap-1 text-[0.65rem] uppercase tracking-widest text-ink/60 hover:text-ink"
-        >
-          <Code2 className="size-3" />
-          {source ? "Visual editor" : "HTML source"}
-        </button>
+        <div className="flex items-center gap-4">
+          <button
+            type="button"
+            onClick={() => setExpanded((e) => !e)}
+            title={expanded ? "Shrink the editor" : "Give the editor more room"}
+            className="flex items-center gap-1 text-[0.65rem] uppercase tracking-widest text-ink/60 hover:text-ink"
+          >
+            {expanded ? <Minimize2 className="size-3" /> : <Maximize2 className="size-3" />}
+            {expanded ? "Shrink" : "Expand"}
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setDraft(value);
+              setSource((s) => !s);
+            }}
+            className="flex items-center gap-1 text-[0.65rem] uppercase tracking-widest text-ink/60 hover:text-ink"
+          >
+            <Code2 className="size-3" />
+            {source ? "Visual editor" : "HTML source"}
+          </button>
+        </div>
       </div>
     </div>
   );