@gogitcms/editor 0.26.0 → 0.28.0

package/app/vendor/design-system/src/__tests__/ProtectedBranchModal.test.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ProtectedBranchModal } from "../components/ProtectedBranchModal";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const base = { branch: "main", onCreate: () => {}, onCancel: () => {} };
+
+test("it names the branch, the document, and offers the one remedy", () => {
+  render(wrap(<ProtectedBranchModal {...base} documentLabel="Hello world" />));
+
+  const modal = screen.getByTestId("protected-branch-modal");
+  expect(modal).toHaveTextContent("This branch is protected");
+  expect(modal).toHaveTextContent("main");
+  expect(modal).toHaveTextContent("Hello world");
+  expect(modal).toHaveTextContent("Branched from main");
+  expect(screen.getByTestId("protected-branch-submit")).toHaveTextContent("Create branch and save");
+});
+
+test("the suggested name prefills the field and submits", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" onCreate={onCreate} />));
+
+  expect(screen.getByTestId("protected-branch-name")).toHaveValue("edit/hello");
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).toHaveBeenCalledWith("edit/hello");
+});
+
+// The author's own name wins: a suggestion arriving late (the host resolves the
+// document a render after the modal opens) must not overwrite what they typed.
+test("a late suggestion does not overwrite a typed name", () => {
+  const { rerender } = render(wrap(<ProtectedBranchModal {...base} />));
+  fireEvent.change(screen.getByTestId("protected-branch-name"), { target: { value: "mine" } });
+  rerender(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" />));
+  expect(screen.getByTestId("protected-branch-name")).toHaveValue("mine");
+});
+
+test("an empty name cannot be submitted", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} onCreate={onCreate} />));
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).not.toHaveBeenCalled();
+});
+
+// While the branch is being created there is no way out but forward: cancelling
+// mid-flight would abandon a save whose branch may already exist.
+test("busy disables both actions and hides the close control", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" busy onCreate={onCreate} />));
+
+  expect(screen.getByTestId("protected-branch-submit")).toHaveTextContent("Creating…");
+  expect(screen.queryByTestId("protected-branch-close")).not.toBeInTheDocument();
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).not.toHaveBeenCalled();
+});
+
+test("the server's message is shown so a rejected name can be corrected", () => {
+  render(wrap(<ProtectedBranchModal {...base} error={`branch "edit/hello" already exists`} />));
+  expect(screen.getByTestId("protected-branch-error")).toHaveTextContent("already exists");
+});
+
+test("cancel dismisses", () => {
+  const onCancel = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} onCancel={onCancel} />));
+  fireEvent.click(screen.getByTestId("protected-branch-cancel"));
+  expect(onCancel).toHaveBeenCalledTimes(1);
+});

package/app/vendor/design-system/src/components/ChangeDetail.tsx

@@ -5,7 +5,7 @@ import { Text } from "./Text";
 import { Icon } from "./Icon";
 import { Input } from "./Input";
 import { Button } from "./Button";
-import { Badge, DiffStat } from "./primitives";
+import { Badge, CheckBox, DiffStat } from "./primitives";
 
 /** How one field differs between the branch and its base. */
 export type FieldChangeKind = "added" | "removed" | "changed" | "unchanged";
@@ -38,7 +38,15 @@ export type DocumentChange = {
   path: string;
   /** The base branch's path, for a rename. */
   previousPath?: string;
-  status: "A" | "M" | "D" | "R";
+  /**
+   * A/M/D/R are git's letters, so a branch comparison renders them untranslated.
+   * "U" (unchanged) has no place in a diff of two branches — an unchanged
+   * document is not a change — but it is a real answer for a document version:
+   * the newest commit in a document's history is usually still what the document
+   * is, and saying "Unchanged" is more useful than an empty diff with no
+   * explanation.
+   */
+  status: "A" | "M" | "D" | "R" | "U";
   label: string;
   /** Ordered to match the content model's schema, so it reads like the editor. */
   fields: FieldChange[];
@@ -79,13 +87,35 @@ export type ChangeDetailProps = {
    */
   conflicts?: FieldConflict[];
   onResolveConflict?: (conflict: FieldConflict, choice: ConflictChoice, override?: unknown) => void;
+
+  /**
+   * Per-field selection, for a caller that does something with a subset of the
+   * diff — restoring fields from a past version, in the history pane.
+   *
+   * Only CHANGED fields get a box: an unchanged field's two sides are the same
+   * value, so selecting it could only ever be a no-op dressed up as a choice.
+   * The body is selectable under the name BODY_FIELD.
+   *
+   * Omitting onToggleField leaves the diff exactly as it was — a read-only
+   * comparison, which is what the changes surface wants.
+   */
+  selectedFields?: readonly string[];
+  onToggleField?: (name: string) => void;
 };
 
+/**
+ * The name the body answers to in `selectedFields` — the document body is a
+ * selectable "field" here but has no entry in `fields`, and a real frontmatter
+ * key could otherwise collide with whatever plain string we picked.
+ */
+export const BODY_FIELD = "\u0000body";
+
 const STATUS_LABEL: Record<DocumentChange["status"], string> = {
   A: "Added",
   M: "Modified",
   D: "Deleted",
   R: "Renamed",
+  U: "Unchanged",
 };
 
 /** Renders a field value the way the editor would show it, not as raw JSON. */
@@ -142,14 +172,29 @@ function ContextValue({ value }: { value: unknown }) {
   );
 }
 
-function FieldRow({ field }: { field: FieldChange }) {
+function FieldRow({
+  field,
+  selected,
+  onToggle,
+}: {
+  field: FieldChange;
+  // Both present or both absent: selection is offered only for a changed field
+  // whose caller wants it (see ChangeDetailProps.onToggleField).
+  selected?: boolean;
+  onToggle?: () => void;
+}) {
   const t = useTheme();
   const changed = field.kind !== "unchanged";
   return (
     <View testID={`change-field-${field.name}`} style={{ gap: t.space(2) }}>
-      <Text variant="label" color="tertiary">
-        {(field.label || field.name).toUpperCase()}
-      </Text>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+        {onToggle ? (
+          <CheckBox value={!!selected} onToggle={onToggle} testID={`restore-field-${field.name}`} />
+        ) : null}
+        <Text variant="label" color="tertiary">
+          {(field.label || field.name).toUpperCase()}
+        </Text>
+      </View>
       {changed ? (
         <View
           style={{
@@ -285,7 +330,17 @@ function ConflictSide({ label, value, chosen }: { label: string; value: unknown;
  * stacked blocks rather than a single line — the whole before and the whole
  * after, each tinted, so a reviewer can read them.
  */
-function BodyDiff({ before, after }: { before?: string | null; after?: string | null }) {
+function BodyDiff({
+  before,
+  after,
+  selected,
+  onToggle,
+}: {
+  before?: string | null;
+  after?: string | null;
+  selected?: boolean;
+  onToggle?: () => void;
+}) {
   const t = useTheme();
   if ((before ?? "") === (after ?? "")) {
     if (!after) return null;
@@ -298,7 +353,12 @@ function BodyDiff({ before, after }: { before?: string | null; after?: string |
   }
   return (
     <View testID="change-body" style={{ gap: t.space(2) }}>
-      <Text variant="label" color="tertiary">BODY</Text>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+        {onToggle ? (
+          <CheckBox value={!!selected} onToggle={onToggle} testID="restore-field-body" />
+        ) : null}
+        <Text variant="label" color="tertiary">BODY</Text>
+      </View>
       <View
         style={{
           borderRadius: t.radius.md,
@@ -374,8 +434,21 @@ function AssetPreview({ preview }: { preview: ChangePreview }) {
  * context. Strictly read-only — editing happens on the Edit surface, and this
  * view describes a comparison rather than a document you can save.
  */
-export function ChangeDetail({ change, loading, emptyMessage = "Select a change", conflicts, onResolveConflict }: ChangeDetailProps) {
+export function ChangeDetail({
+  change,
+  loading,
+  emptyMessage = "Select a change",
+  conflicts,
+  onResolveConflict,
+  selectedFields,
+  onToggleField,
+}: ChangeDetailProps) {
   const t = useTheme();
+  const chosen = new Set(selectedFields ?? []);
+  // A field offers a box only when the caller wants selection AND there is
+  // something to select — an unchanged field's two sides are the same value.
+  const toggleFor = (name: string, changed: boolean) =>
+    onToggleField && changed ? () => onToggleField(name) : undefined;
 
   // Conflicts keyed by field name (and a body flag), so each field can check for
   // one as it renders. The body conflict is looked up separately.
@@ -445,7 +518,12 @@ export function ChangeDetail({ change, loading, emptyMessage = "Select a change"
               onResolve={onResolveConflict ? (choice, override) => onResolveConflict(conflict, choice, override) : undefined}
             />
           ) : (
-            <FieldRow key={f.name} field={f} />
+            <FieldRow
+              key={f.name}
+              field={f}
+              selected={chosen.has(f.name)}
+              onToggle={toggleFor(f.name, f.kind !== "unchanged")}
+            />
           );
         })}
         {/* Conflicts on fields the schema-ordered diff didn't surface (rare). */}
@@ -464,7 +542,12 @@ export function ChangeDetail({ change, loading, emptyMessage = "Select a change"
             onResolve={onResolveConflict ? (choice, override) => onResolveConflict(bodyConflict!, choice, override) : undefined}
           />
         ) : (
-          <BodyDiff before={change.bodyBefore} after={change.bodyAfter} />
+          <BodyDiff
+            before={change.bodyBefore}
+            after={change.bodyAfter}
+            selected={chosen.has(BODY_FIELD)}
+            onToggle={toggleFor(BODY_FIELD, (change.bodyBefore ?? "") !== (change.bodyAfter ?? ""))}
+          />
         )}
       </ScrollView>
     </View>

package/app/vendor/design-system/src/components/CollabField.tsx

@@ -386,3 +386,74 @@ export function CollabTextarea({
     </PresenceField>
   );
 }
+
+// ---- writing a whole value into the shared document ------------------------
+
+/**
+ * Where one leaf of a document value lives in the shared doc.
+ *
+ * The split mirrors what the server seeds (collab.go's collectLeaves), because
+ * that is what decides which binding a control actually reads: a string is a
+ * Y.Text, and everything else — numbers, booleans, null, and whole lists — is a
+ * key in the "reg" map. Writing to the other one is not an error anyone sees;
+ * it is a value that silently lands where nothing is looking.
+ */
+type CollabLeaf = { kind: "text"; value: string } | { kind: "reg"; value: unknown };
+
+/**
+ * Flattens a value into the leaves the shared document holds it as, keyed by
+ * dotted path — `seo.title` for a group's child, exactly as the server does.
+ *
+ * `undefined` yields no leaves at all: it means the field is absent, which is
+ * expressed by clearing whatever was there rather than by writing something.
+ */
+function collabLeaves(path: string, value: unknown, into = new Map<string, CollabLeaf>()): Map<string, CollabLeaf> {
+  if (value === undefined) return into;
+  if (typeof value === "string") {
+    into.set(path, { kind: "text", value });
+    return into;
+  }
+  // A list is a whole-value register, matching CollabArrayField — its items are
+  // not addressable leaves, so it is written and cleared in one piece.
+  if (Array.isArray(value) || value === null || typeof value !== "object") {
+    into.set(path, { kind: "reg", value });
+    return into;
+  }
+  for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+    collabLeaves(path ? `${path}.${k}` : k, v, into);
+  }
+  return into;
+}
+
+/**
+ * Replaces a field's value in the shared document, so a value written by
+ * something other than typing — restoring a field from a past version — reaches
+ * the room instead of only the local form.
+ *
+ * In a live session the shared document is the source of truth: every collab
+ * control reads its binding in preference to the host's value, so a write that
+ * only touches local state is displayed for an instant and then overwritten by
+ * the CRDT's unchanged value. It has to be written here to be written at all.
+ *
+ * `previous` is what the field held, and is needed rather than inferable: the
+ * new value's leaves say what to write, but only the old value's leaves say
+ * what to CLEAR — a group that loses a child, or a field being cleared outright,
+ * would otherwise keep the shared value nobody can see any more.
+ */
+export function writeCollabValue(collab: CollabApi, path: string, previous: unknown, next: unknown): void {
+  const before = collabLeaves(path, previous);
+  const after = collabLeaves(path, next);
+
+  for (const [leafPath, leaf] of before) {
+    if (after.has(leafPath)) continue;
+    // Clearing is per shared type: a Y.Text empties, a register goes back to
+    // unset (which is what an absent key reads as, and what makes the control
+    // fall back to the document's own value).
+    if (leaf.kind === "text") collab.text(leafPath).set("");
+    else collab.register(leafPath).set(undefined);
+  }
+  for (const [leafPath, leaf] of after) {
+    if (leaf.kind === "text") collab.text(leafPath).set(leaf.value);
+    else collab.register(leafPath).set(leaf.value);
+  }
+}