app/components/admin/editor-bar.tsx

Functions

Imports

It imports app/components/admin/publish-actions.tsx, app/components/admin/use-live-preview.ts, app/lib/editor/feedback.ts. Imported by app/components/admin/post-editor.tsx.

Source

1import { Segmented } from "capsomer/react/segmented";
2import { Status } from "capsomer/react/status";
3
4import type { EditorFeedback } from "~/lib/editor/feedback";
5import type { PostState } from "capsomer/publish-transition";
6import { PublishActions } from "./publish-actions";
7import type { Layout } from "./use-live-preview";
8
9// Rendered only beside "Unsaved changes", so the local buffer never reads as a save.
10function bufferAgeLabel(savedAt: string, now: number): string {
11  const minutes = Math.floor((now - new Date(savedAt).getTime()) / 60_000);
12  if (!Number.isFinite(minutes) || minutes < 1) return "just now";
13  return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;
14}
15
16/**
17 * The editor's controls, which the page head carries: the layout choice, save state, settings and publish.
18 * They sit outside the editing form, so each submit button names it with `form`.
19 */
20export function EditorBar({
21  formId,
22  state,
23  richBody,
24  layout,
25  chooseLayout,
26  dirty,
27  headSha,
28  feedback,
29  savedAt,
30  ageNow,
31  bufferTried,
32  busy,
33  drawerOpen,
34  openDrawer,
35  everPublished,
36  publishAt,
37  onPublishAtChange,
38}: {
39  formId: string;
40  state: PostState;
41  richBody: boolean;
42  layout: Layout;
43  chooseLayout: (next: Layout) => void;
44  dirty: boolean;
45  headSha: string;
46  feedback?: EditorFeedback | null;
47  savedAt: string | null;
48  ageNow: number;
49  bufferTried: boolean;
50  busy: boolean;
51  drawerOpen: boolean;
52  openDrawer: () => void;
53  everPublished: boolean;
54  publishAt: string;
55  onPublishAtChange: (value: string) => void;
56}) {
57  const shortHead = headSha ? headSha.slice(0, 7) : "";
58
59  return (
60    <>
61      {/* Gated on CodeMirror mounting: in the preview layout the write pane is `display:none`, and a
62          required control that is not displayed blocks submission unreachably. */}
63      {richBody ? (
64        <Segmented
65          legend="Editor layout"
66          hideLegend
67          size="sm"
68          value={layout}
69          onChange={chooseLayout}
70          options={[
71            { value: "write", label: "Write" },
72            { value: "split", label: "Split" },
73            { value: "preview", label: "Preview" },
74          ]}
75        />
76      ) : null}
77
78      <span>
79        {!headSha ? (
80          <Status tone="crit">Saving unavailable</Status>
81        ) : dirty ? (
82          <Status tone="warn">Unsaved changes</Status>
83        ) : (
84          <Status tone="ok">{`Saved ${feedback && feedback.state !== "failed" ? feedback.sha : shortHead}`}</Status>
85        )}
86
87        {/* Nothing renders on the server, so the static harness render is unchanged. */}
88        {dirty && savedAt ? (
89          /* Not live: the age ticks every minute, and each tick would interrupt the author. */
90          <span className="cap-muted"> last written {bufferAgeLabel(savedAt, ageNow)}</span>
91        ) : dirty && bufferTried ? (
92          <span className="cap-muted" aria-live="polite">
93            {" "}
94            Not backed up: browser storage unavailable
95          </span>
96        ) : null}
97      </span>
98
99      {/* The zero-JS preview path. Removed rather than hidden once scripted: it carries no value
100          the save path needs. */}
101      {!richBody ? (
102        <button
103          type="submit"
104          form={formId}
105          name="intent"
106          value="preview"
107          className="cap-btn"
108          aria-disabled={busy || undefined}
109        >
110          Render
111        </button>
112      ) : null}
113
114      <button
115        type="button"
116        className="cap-btn"
117        data-icon-only=""
118        aria-expanded={drawerOpen}
119        aria-haspopup="dialog"
120        aria-label="Post settings"
121        title="Post settings"
122        onClick={openDrawer}
123      >
124        <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
125          <path
126            d="M2.5 4.5h6M11.5 4.5h2M2.5 8h2M7.5 8h6M2.5 11.5h6M11.5 11.5h2M10 3v3M5.5 6.5v3M10 10v3"
127            fill="none"
128            stroke="currentColor"
129            strokeWidth="1.5"
130            strokeLinecap="round"
131          />
132        </svg>
133      </button>
134
135      <PublishActions
136        formId={formId}
137        state={state}
138        everPublished={everPublished}
139        publishAt={publishAt}
140        onPublishAtChange={onPublishAtChange}
141        busy={busy}
142        disabled={!headSha}
143      />
144    </>
145  );
146}