@getrefino/react 0.1.0-rc.6 → 0.2.0

package/dist/EditableText.js

@@ -80,12 +80,36 @@ function EditableField({ id, as, htmlId, rest, value, store }) {
         rest.onInput?.(event);
         store.setValue(id, readText(event.currentTarget));
     }, [id, rest, store]);
+    /**
+     * Where this element points, when it points anywhere. Only an anchor has
+     * one, and it is the site's own markup, never anything Refino composed.
+     */
+    const href = typeof rest.href === "string" && rest.href.length > 0 ? rest.href : null;
+    /**
+     * Follow the link, in **this** tab.
+     *
+     * The editor session lives in `sessionStorage`, so a new tab is a tab
+     * without edit mode. Ctrl/Cmd-click normally opens one; here it is taken
+     * over and turned into an ordinary same-tab navigation, which keeps edit
+     * mode and still runs the unsaved-changes guard on the way out.
+     */
+    const follow = useCallback(() => {
+        if (!href || typeof window === "undefined")
+            return;
+        window.location.assign(href);
+    }, [href]);
     const onKeyDown = useCallback((event) => {
         rest.onKeyDown?.(event);
         if (event.defaultPrevented)
             return;
         const element = event.currentTarget;
-        if (event.key === "Enter") {
+        if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && href) {
+            // The keyboard's half of the same gesture. Without it a link's text
+            // is editable but the link itself is unreachable without a mouse.
+            event.preventDefault();
+            follow();
+        }
+        else if (event.key === "Enter") {
             event.preventDefault();
             element.blur();
         }
@@ -95,7 +119,7 @@ function EditableField({ id, as, htmlId, rest, value, store }) {
             store.setValue(id, startValueRef.current);
             element.blur();
         }
-    }, [id, rest, store]);
+    }, [id, rest, store, href, follow]);
     const onPaste = useCallback((event) => {
         rest.onPaste?.(event);
         if (event.defaultPrevented)
@@ -112,10 +136,27 @@ function EditableField({ id, as, htmlId, rest, value, store }) {
         rest.onClick?.(event);
         // Links and buttons must not navigate or submit while editing words.
         event.preventDefault();
-    }, [rest]);
+        /**
+         * Except when the owner asks for it. A site's own navigation is
+         * usually `EditableText` too, so swallowing every click left an owner
+         * in edit mode stranded on whichever page they opened: the words were
+         * editable and the site was not walkable, which is fatal for an
+         * article, because an article is by definition on another page.
+         *
+         * Ctrl/Cmd-click is the browser's own "follow it anyway" gesture and
+         * it is kept meaning exactly that. A plain click still edits.
+         */
+        if (event.metaKey || event.ctrlKey)
+            follow();
+    }, [rest, follow]);
     const describedBy = [rest["aria-describedby"], INSTRUCTIONS_ID].filter(Boolean).join(" ");
     return createElement(as, {
         ...rest,
+        // The site's own title wins; this is only the hint an editable link
+        // needs, shown exactly when the owner is about to click it.
+        ...(href && rest.title === undefined
+            ? { title: "Ctrl-click (\u2318-click on a Mac) to follow this link" }
+            : {}),
         ref,
         id: htmlId,
         contentEditable: plaintextOnly ? "plaintext-only" : true,

package/dist/Toolbar.js

@@ -24,6 +24,14 @@ export function CopyEditorToolbar() {
     const busy = state.status === "saving" || state.status === "loading";
     const update = useIntegrationUpdate(editor.updates, state.loaded);
     const updateButtonRef = useRef(null);
+    /**
+     * Whether the refused save was about an article rather than the copy file.
+     * The service layer names the document it refused and the store carries
+     * that answer here; an article-only save never reads or writes
+     * `copy.json`, so saying "the copy file changed" would name a file nothing
+     * had touched.
+     */
+    const conflictArticle = state.status === "conflict" ? (state.error?.documentId ?? null) : null;
     const onRevertSelected = useCallback(() => {
         if (state.activeId)
             editor.revertValue(state.activeId);
@@ -45,7 +53,7 @@ export function CopyEditorToolbar() {
             dotClass = "saved";
             break;
         case "conflict":
-            statusText = "Repository changed";
+            statusText = conflictArticle ? "Article changed" : "Repository changed";
             dotClass = "conflict";
             break;
         case "error":
@@ -56,7 +64,7 @@ export function CopyEditorToolbar() {
             statusText = dirtyCount > 0 ? `${plural(dirtyCount, "unsaved change")}` : "No changes";
             dotClass = dirtyCount > 0 ? "dirty" : "";
     }
-    return (_jsxs("div", { className: "refino-toolbar", role: "region", "aria-label": "Copy editor", children: [_jsx("p", { id: INSTRUCTIONS_ID, className: "refino-sr-only", children: "Editable text. Type to change it. Press Enter to finish or Escape to cancel this edit." }), _jsx(UpdatePanel, { control: update, saving: state.status === "saving", buttonRef: updateButtonRef }), state.status === "conflict" && (_jsxs("div", { className: "refino-toolbar__notice refino-toolbar__notice--conflict", role: "alert", children: [_jsx("p", { children: "The copy file changed in the repository while you were editing (an AI agent or developer probably pushed). Your edits were not saved and nothing was overwritten." }), _jsxs("p", { children: ["Reload the latest copy and your ", plural(dirtyCount, "unsaved edit"), " will be reapplied on top of it for you to review and save again."] })] })), state.status === "error" && state.error && (_jsxs("div", { className: "refino-toolbar__notice refino-toolbar__notice--error", role: "alert", children: [_jsx("p", { children: state.error.message }), _jsxs("p", { children: [_jsx("code", { children: state.error.code }), state.error.code === "UNAUTHORIZED" && (_jsxs(_Fragment, { children: [" ", _jsx("a", { className: "refino-toolbar__link", href: editor.signInHref, children: "Sign in again" })] }))] })] })), state.rebase && (_jsxs("div", { className: "refino-toolbar__notice", role: "status", children: [state.rebase.overlapping.length > 0 && (_jsxs("p", { children: ["Both you and the repository changed:", " ", state.rebase.overlapping.map((id, index) => (_jsxs("span", { children: [index > 0 ? ", " : "", _jsx("code", { children: id })] }, id))), ". Your wording is shown; review before saving."] })), state.rebase.dropped.length > 0 && (_jsxs("p", { children: ["Dropped edits for fields that no longer exist:", " ", state.rebase.dropped.map((id, index) => (_jsxs("span", { children: [index > 0 ? ", " : "", _jsx("code", { children: id })] }, id))), "."] }))] })), _jsxs("div", { className: "refino-toolbar__bar", role: "toolbar", "aria-label": "Copy editor controls", children: [_jsxs("span", { className: "refino-toolbar__status", "aria-live": "polite", children: [_jsx("span", { className: `refino-toolbar__dot${dotClass ? ` refino-toolbar__dot--${dotClass}` : ""}` }), statusText, state.status === "saved" && state.lastSave?.commitUrl && (_jsxs(_Fragment, { children: [" ", _jsx("a", { className: "refino-toolbar__link", href: state.lastSave.commitUrl, target: "_blank", rel: "noreferrer", children: "view commit" })] }))] }), article && state.status !== "conflict" && (_jsx("button", { type: "button", className: "refino-toolbar__button", onClick: () => state.panel?.kind === "metadata"
+    return (_jsxs("div", { className: "refino-toolbar", role: "region", "aria-label": "Copy editor", children: [_jsx("p", { id: INSTRUCTIONS_ID, className: "refino-sr-only", children: "Editable text. Type to change it. Press Enter to finish or Escape to cancel this edit. On a link, Ctrl-Enter or Ctrl-click (Command on a Mac) follows the link instead, so you can walk the site to the page you want without leaving edit mode." }), _jsx(UpdatePanel, { control: update, saving: state.status === "saving", buttonRef: updateButtonRef }), state.status === "conflict" && (_jsxs("div", { className: "refino-toolbar__notice refino-toolbar__notice--conflict", role: "alert", children: [_jsxs("p", { children: [conflictArticle ? "This article" : "The copy file", " changed in the repository while you were editing (an AI agent or developer probably pushed). Your edits were not saved and nothing was overwritten."] }), _jsxs("p", { children: ["Reload the latest ", conflictArticle ? "version of the article" : "copy", " and your", " ", plural(dirtyCount, "unsaved edit"), " will be reapplied on top of it for you to review and save again."] })] })), state.status === "error" && state.error && (_jsxs("div", { className: "refino-toolbar__notice refino-toolbar__notice--error", role: "alert", children: [_jsx("p", { children: state.error.message }), _jsxs("p", { children: [_jsx("code", { children: state.error.code }), state.error.code === "UNAUTHORIZED" && (_jsxs(_Fragment, { children: [" ", _jsx("a", { className: "refino-toolbar__link", href: editor.signInHref, children: "Sign in again" })] }))] })] })), state.rebase && (_jsxs("div", { className: "refino-toolbar__notice", role: "status", children: [state.rebase.overlapping.length > 0 && (_jsxs("p", { children: ["Both you and the repository changed:", " ", state.rebase.overlapping.map((id, index) => (_jsxs("span", { children: [index > 0 ? ", " : "", _jsx("code", { children: id })] }, id))), ". Your wording is shown; review before saving."] })), state.rebase.dropped.length > 0 && (_jsxs("p", { children: ["Dropped edits for fields that no longer exist:", " ", state.rebase.dropped.map((id, index) => (_jsxs("span", { children: [index > 0 ? ", " : "", _jsx("code", { children: id })] }, id))), "."] }))] })), _jsxs("div", { className: "refino-toolbar__bar", role: "toolbar", "aria-label": "Copy editor controls", children: [_jsxs("span", { className: "refino-toolbar__status", "aria-live": "polite", children: [_jsx("span", { className: `refino-toolbar__dot${dotClass ? ` refino-toolbar__dot--${dotClass}` : ""}` }), statusText, state.status === "saved" && state.lastSave?.commitUrl && (_jsxs(_Fragment, { children: [" ", _jsx("a", { className: "refino-toolbar__link", href: state.lastSave.commitUrl, target: "_blank", rel: "noreferrer", children: "view commit" })] }))] }), article && state.status !== "conflict" && (_jsx("button", { type: "button", className: "refino-toolbar__button", onClick: () => state.panel?.kind === "metadata"
                             ? editor.closePanel()
                             : editor.openPanel({ kind: "metadata", documentId: article.documentId }), "aria-pressed": state.panel?.kind === "metadata", title: "Edit this article's title, excerpt, SEO fields and dates", children: "Article metadata" })), state.activeId && (_jsx("span", { className: "refino-toolbar__key", title: state.activeId, children: state.activeId })), state.status === "conflict" ? (_jsx("button", { type: "button", className: "refino-toolbar__button refino-toolbar__button--primary", onClick: () => void editor.reloadLatest(), children: "Reload latest" })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "refino-toolbar__button", onMouseDown: (event) => event.preventDefault(), onClick: onRevertSelected, disabled: !activeDirty || busy, title: "Revert the selected text to its saved value", children: "Revert" }), _jsx("button", { type: "button", className: "refino-toolbar__button", onClick: editor.revertAll, disabled: dirtyCount === 0 || busy, title: "Discard all unsaved changes", children: "Revert all" }), _jsx("button", { type: "button", className: "refino-toolbar__button refino-toolbar__button--primary", onClick: () => void editor.save(), disabled: dirtyCount === 0 || busy || !state.loaded, title: "Save all changes (Ctrl/Cmd+S)", children: state.status === "saving" ? "Saving…" : "Save" })] })), _jsx(UpdateButton, { control: update, buttonRef: updateButtonRef }), _jsx("button", { type: "button", className: "refino-toolbar__button", onClick: () => void editor.exit(), disabled: busy, children: "Exit" })] })] }));
 }

package/dist/store.d.ts

@@ -4,6 +4,15 @@ export type EditorStatus = "idle" | "loading" | "saving" | "saved" | "error" | "
 export interface EditorError {
     readonly code: string;
     readonly message: string;
+    /**
+     * The article this failure is about, when it is about one.
+     *
+     * The service layer already knows which document it refused and says so;
+     * this is that answer carried through, so the toolbar can tell the owner
+     * that their *article* moved rather than reporting every conflict as a
+     * copy-file conflict. An id, never a path.
+     */
+    readonly documentId?: DocumentId;
 }
 export interface LastSave {
     readonly at: number;

package/dist/store.js

@@ -360,7 +360,17 @@ export function createCopyStore(options) {
                 return;
             }
             if (!body.ok && body.error.code === "CONFLICT") {
-                update({ status: "conflict", conflict: body.error.current ?? null, error: body.error });
+                // Which thing moved. The server says so when it knows; a server that
+                // predates the field still leaves the answer unambiguous whenever the
+                // refused save named articles and no copy at all, which is every
+                // article-only save.
+                const onlyArticle = documents.length === 1 ? documents[0].documentId : null;
+                const documentId = body.error.documentId ?? (copyCount === 0 ? onlyArticle : null);
+                update({
+                    status: "conflict",
+                    conflict: body.error.current ?? null,
+                    error: documentId ? { ...body.error, documentId } : body.error,
+                });
                 return;
             }
             if (!body.ok) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getrefino/react",
-  "version": "0.1.0-rc.6",
+  "version": "0.2.0",
   "description": "React components for Refino: edit a website's existing copy in place on the rendered page and commit it to the repository. Click text. Edit text. Save.",
   "keywords": [
     "refino",
@@ -37,7 +37,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@getrefino/core": "0.1.0-rc.6"
+    "@getrefino/core": "0.2.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",