@gogitcms/editor 0.26.0 → 0.28.0

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
+import { View, Pressable, StyleProp, ViewStyle } from "react-native";
 import { useTheme } from "../ThemeProvider";
 import { Text } from "./Text";
+import { Icon } from "./Icon";
 
 /** Bordered surface card — defined by a hairline border, never a shadow. */
 export function Card({
@@ -141,3 +142,47 @@ export function SectionLabel({ children, style }: { children: React.ReactNode; s
     </View>
   );
 }
+
+/**
+ * A square check box: filled and ticked when on, an empty hairline box when
+ * off.
+ *
+ * Lives here rather than beside its first caller because two surfaces select
+ * things now — entry rows in the browser, and the fields of a past version in
+ * the history diff — and they have to look like the same control. The press
+ * stops propagating: every current caller puts this inside a larger Pressable
+ * (a list row, a field block), and a tick that also opened the row would be
+ * unusable.
+ */
+export function CheckBox({
+  value,
+  onToggle,
+  testID = "check-box",
+}: {
+  value: boolean;
+  onToggle: () => void;
+  testID?: string;
+}) {
+  const t = useTheme();
+  return (
+    <Pressable
+      onPress={(e?: { stopPropagation?: () => void }) => {
+        e?.stopPropagation?.();
+        onToggle();
+      }}
+      testID={testID}
+      style={{
+        width: 18,
+        height: 18,
+        borderRadius: t.radius.sm,
+        borderWidth: 1,
+        borderColor: value ? t.color.borderStrong : t.color.borderDefault,
+        backgroundColor: value ? t.color.surfaceInverted : t.color.surfaceRaised,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {value ? <Icon name="check" size={12} color={t.color.textInverted} /> : null}
+    </Pressable>
+  );
+}

package/app/vendor/design-system/src/forms.ts

@@ -0,0 +1,118 @@
+// Forms in the editor: the nav-key space they occupy and the data seam the host
+// fills (docs/forms.md §10).
+//
+// The scheme mirrors media's exactly, and for the same reason: a collection name
+// is restricted to [A-Za-z0-9_-] by the config schema, so it can never contain a
+// colon — not even a collection literally named "forms".
+//
+//   "forms:"          the Forms button — the list of forms
+//   "forms:contact"   one form's submissions, which is what makes it deep-linkable
+const FORMS_NAV_PREFIX = "forms:";
+
+/** FORMS_NAV_KEY is the Forms button's own key — forms with none selected. */
+export const FORMS_NAV_KEY = FORMS_NAV_PREFIX;
+
+/** formsNavKey returns the nav key for a form, or for the Forms button. */
+export function formsNavKey(form?: string): string {
+  return form ? FORMS_NAV_PREFIX + form : FORMS_NAV_PREFIX;
+}
+
+/**
+ * isFormsNavKey reports whether a nav key addresses forms at all — true for the
+ * Forms button and for any form beneath it. This is what a host checks to know
+ * the forms surface is showing.
+ */
+export function isFormsNavKey(key: string | null | undefined): boolean {
+  return !!key && key.startsWith(FORMS_NAV_PREFIX);
+}
+
+/**
+ * parseFormsNavKey returns the form a nav key selects: null for an ordinary
+ * collection, and also null for the bare Forms button (forms are showing, but no
+ * form is chosen). Pair it with isFormsNavKey to tell those two apart.
+ */
+export function parseFormsNavKey(key: string | null | undefined): string | null {
+  if (!isFormsNavKey(key)) return null;
+  const form = key!.slice(FORMS_NAV_PREFIX.length);
+  return form.length > 0 ? form : null;
+}
+
+/** One field of a form, as the editor needs to render a submission. */
+export type FormFieldInfo = {
+  name: string;
+  label?: string | null;
+  /** string | integer | float | boolean | array | object */
+  type: string;
+  component?: string | null;
+};
+
+/** One form, with the summary numbers the Forms list shows. */
+export type FormInfo = {
+  name: string;
+  label?: string | null;
+  description?: string | null;
+  fields: FormFieldInfo[];
+  fieldCount: number;
+  submissionCount: number;
+  lastSubmissionAt?: string | null;
+  /** True when the form writes its submissions to git. */
+  versioned: boolean;
+  storePath?: string | null;
+  canDelete: boolean;
+};
+
+/** One submission, read-only by construction — a record of what someone sent. */
+export type SubmissionInfo = {
+  id: string;
+  form: string;
+  /** Field name → value, missing entirely for a field whose condition was false. */
+  fields: Record<string, unknown>;
+  submittedAt: string;
+  /** "received" | "spam" */
+  status: string;
+  /** Where it lives in the repository, when the form versions its submissions. */
+  path?: string | null;
+};
+
+/**
+ * FormsApi is the data seam between the design system and its host: the DS owns
+ * the browsing UI, the host owns fetching (Apollo on web/mobile, REST on
+ * desktop). Omitting it from ContentBrowser hides the Forms surface entirely,
+ * which is what a config declaring no forms should look like.
+ */
+export interface FormsApi {
+  /** The forms on this branch, with their summary numbers. */
+  forms: FormInfo[];
+  /** One page of a form's submissions, newest first. */
+  list: (params: {
+    form: string;
+    status?: string;
+    search?: string;
+    limit?: number;
+    offset?: number;
+  }) => Promise<SubmissionInfo[]>;
+  /** How many match, ignoring paging — the total behind "12 of 340". */
+  count: (params: { form: string; status?: string; search?: string }) => Promise<number>;
+  /** Delete submissions. Omit to hide the affordance. */
+  remove?: (ids: string[]) => Promise<void>;
+}
+
+/**
+ * summaryLine builds the one-line label a submission row shows.
+ *
+ * A submission has no title — what makes one recognisable is what the person
+ * wrote — so the first field carrying readable text is used, preferring an
+ * email-ish value because that is what a reader scans an inbox for.
+ */
+export function summaryLine(sub: SubmissionInfo, form?: FormInfo): string {
+  const order = form ? form.fields.map((f) => f.name) : Object.keys(sub.fields);
+  let firstText = "";
+  for (const name of order) {
+    const v = sub.fields[name];
+    if (typeof v !== "string" || v.trim() === "") continue;
+    if (v.includes("@")) return v.trim();
+    if (!firstText) firstText = v.trim();
+  }
+  if (firstText) return firstText.length > 80 ? firstText.slice(0, 79) + "…" : firstText;
+  return "(no text)";
+}

package/app/vendor/design-system/src/history.ts

@@ -0,0 +1,82 @@
+import type { DocumentChange } from "./components/ChangeDetail";
+
+/**
+ * One commit in a document's history — a row in the version list.
+ *
+ * This is the provider's history for the document's CURRENT path. GitHub's
+ * commits API has no equivalent of `git log --follow`, so a renamed document's
+ * history stops at the rename; the list says so at its end rather than letting
+ * the absence read as "this is where the document began".
+ */
+export type DocumentVersion = {
+  sha: string;
+  /** First 7 characters — an identity without the noise. */
+  shortSha: string;
+  /** The full commit message; the list shows its first line. */
+  message: string;
+  authorName: string;
+  authorEmail?: string | null;
+  /** ISO 8601, in UTC. */
+  authoredAt: string;
+  /** The commit's page on the provider. */
+  url: string;
+  /** How many files the commit touched — this document is one of them. */
+  filesChanged: number;
+};
+
+/**
+ * HistoryApi is the data seam between the design system and its host, the same
+ * split MediaApi and FormsApi use: the DS owns the version browser's UI and its
+ * (ephemeral) open/selected state, the host owns fetching. Omitting it from
+ * ContentBrowser hides the history affordance entirely, which is what a
+ * deployment with no provider — local mode, the desktop app — should look like.
+ */
+export interface HistoryApi {
+  /**
+   * One page of a document's versions, newest first. The DS pages as the list
+   * scrolls; a short page (fewer than `limit`) ends it.
+   */
+  list: (params: { documentId: string; limit: number; offset: number }) => Promise<DocumentVersion[]>;
+  /**
+   * The document as it was at one commit, diffed against what it is now:
+   * `before` on each field is the value at that version, `after` its current
+   * value. Unchanged fields are included, which is what makes the result a
+   * readable preview of the whole document rather than a list of differences.
+   *
+   * Null when the version can't be read (a commit that has gone away under a
+   * force push, say) — the pane says so instead of showing an empty document.
+   */
+  get: (params: { documentId: string; sha: string }) => Promise<DocumentChange | null>;
+}
+
+/**
+ * firstLine is the summary a version row shows. A commit message's first line is
+ * its subject by convention, and the body below it is prose that would push
+ * every other row off the screen.
+ */
+export function firstLine(message: string): string {
+  const line = message.split("\n", 1)[0].trim();
+  return line || "(no commit message)";
+}
+
+/**
+ * relativeTime renders a commit's age the way a history reads — "3d ago" —
+ * falling back to the date once "ago" stops being informative.
+ *
+ * `now` is injectable so a test can assert a fixed string rather than race the
+ * clock.
+ */
+export function relativeTime(iso: string, now: Date = new Date()): string {
+  const then = new Date(iso);
+  const seconds = Math.round((now.getTime() - then.getTime()) / 1000);
+  if (!Number.isFinite(seconds)) return "";
+  if (seconds < 60) return "just now";
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  // Past a month, "5 weeks ago" is harder to place than the date itself.
+  return then.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+}

package/app/vendor/design-system/src/index.ts

@@ -55,6 +55,8 @@ export type {
 } from "./components/ApplyChangesModal";
 
 // Change-request summary surface (developer escalation)
+export { ProtectedBranchModal } from "./components/ProtectedBranchModal";
+export type { ProtectedBranchModalProps } from "./components/ProtectedBranchModal";
 export { ChangeRequestSummary } from "./components/ChangeRequestSummary";
 export type {
   ChangeRequestSummaryProps,
@@ -63,7 +65,11 @@ export type {
 } from "./components/ChangeRequestSummary";
 
 // Changes surface: one document's diff between a branch and its base
-export { ChangeDetail } from "./components/ChangeDetail";
+export { ChangeDetail, BODY_FIELD } from "./components/ChangeDetail";
+export { DocumentHistory } from "./components/DocumentHistory";
+export type { DocumentHistoryProps } from "./components/DocumentHistory";
+export { firstLine, relativeTime } from "./history";
+export type { DocumentVersion, HistoryApi } from "./history";
 export type {
   ChangeDetailProps,
   DocumentChange,
@@ -196,3 +202,14 @@ export type {
   CollabPeer,
   CollabParticipant,
 } from "./components/ContentBrowser";
+
+export { FormsBrowser } from "./components/FormsBrowser";
+export type { FormsBrowserProps } from "./components/FormsBrowser";
+export {
+  FORMS_NAV_KEY,
+  formsNavKey,
+  isFormsNavKey,
+  parseFormsNavKey,
+  summaryLine,
+} from "./forms";
+export type { FormsApi, FormInfo, FormFieldInfo, SubmissionInfo } from "./forms";

package/app/vendor/markdown-editor/src/MarkdownEditor.tsx

@@ -32,6 +32,7 @@ export default function MarkdownEditor({
   expandable = true,
   toolbar = true,
   collab,
+  resetNonce,
 }: MarkdownEditorProps) {
   const flavor = useMemo(() => resolveFlavor(flavorId), [flavorId]);
   const [expanded, setExpanded] = useState(false);
@@ -189,6 +190,28 @@ export default function MarkdownEditor({
     if (timer.current) clearTimeout(timer.current);
   }, []);
 
+  // A host-driven replacement of the whole document (see props.resetNonce).
+  //
+  // Done as a transaction rather than by rebuilding the state, because in a
+  // live session rebuilding would drop the collaborative plugins' view of the
+  // document: the replacement has to travel through ySyncPlugin to reach the
+  // shared fragment and the other clients, and through the undo plugin to stay
+  // undoable. Out of a session it is the same transaction against a plain doc.
+  const lastReset = useRef(resetNonce);
+  useEffect(() => {
+    if (resetNonce === undefined || resetNonce === lastReset.current) return;
+    lastReset.current = resetNonce;
+    setState((prev) => {
+      const next = flavor.parse(valueRef.current);
+      // Compared before replacing: an identical body would otherwise be deleted
+      // and reinserted, which in a CRDT is a real edit that peers see (and that
+      // steps on anyone whose cursor was inside it).
+      if (prev.doc.eq(next)) return prev;
+      return prev.apply(prev.tr.replaceWith(0, prev.doc.content.size, next.content));
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resetNonce]);
+
   const dispatchTransaction = useCallback(
     (tr: Transaction) => {
       setState((prev) => {

package/app/vendor/markdown-editor/src/field.tsx

@@ -22,6 +22,10 @@ export type MarkdownFieldArgs = {
     subscribeSynced?(cb: () => void): () => void;
   };
   path?: string;
+  // Bumped by the host to replace the editor's content with `value` — the one
+  // operation `value` alone cannot express in a live session, where the shared
+  // fragment is the source of truth. See MarkdownEditorProps.resetNonce.
+  resetNonce?: number;
 };
 
 export type MarkdownFieldOptions = {
@@ -35,7 +39,7 @@ export type MarkdownFieldOptions = {
 // the web and native apps.
 export function createMarkdownRenderField(options: MarkdownFieldOptions = {}) {
   const { theme = "light", defaultFlavor = "gfm" } = options;
-  return ({ field, value, onChange, readOnly, collab, path }: MarkdownFieldArgs): React.ReactNode => {
+  return ({ field, value, onChange, readOnly, collab, path, resetNonce }: MarkdownFieldArgs): React.ReactNode => {
     if (field.component !== "body") return undefined;
     if (field.format && field.format !== "markdown") return undefined;
     const flavor = (field.flavor as MarkdownFlavor) || defaultFlavor;
@@ -61,6 +65,7 @@ export function createMarkdownRenderField(options: MarkdownFieldOptions = {}) {
         readOnly={readOnly}
         dom={{ matchContents: true }}
         collab={collabProp}
+        resetNonce={resetNonce}
       />
     );
   };

package/app/vendor/markdown-editor/src/types.ts

@@ -30,6 +30,19 @@ export interface MarkdownEditorProps {
   expandable?: boolean;
   // Show the formatting toolbar at the top of the editor. Default true.
   toolbar?: boolean;
+  // Bumping this replaces the editor's content with `value`, discarding what is
+  // in the document — the one operation `value` alone cannot express.
+  //
+  // A controlled editor normally adopts `value` when it differs, but not in a
+  // live session: there the shared fragment is the source of truth and `value`
+  // is ignored entirely, so a host that wants to REPLACE the body (restoring it
+  // from a past version) has no way to say so. The nonce is that signal, and it
+  // is a nonce rather than a boolean because the same restore can be applied
+  // twice and must take effect both times.
+  //
+  // In a live session the replacement goes through a normal transaction, so it
+  // reaches the shared fragment and every peer, and stays undoable.
+  resetNonce?: number;
   // Expo DOM-component WebView props on native; ignored on web. Typed loosely so
   // the package need not depend on expo/react-native types.
   dom?: unknown;