CopyPatch
ENTR
GitHubGet Started

Edit Mode & Inline Mechanics

CopyPatch keeps the editing overlay completely invisible to ordinary visitors. The editor interface is only dynamically imported when an authorized editor opens the page with the ?copypatch=1 parameter.

1. Activating Edit Mode

  1. Append ?copypatch=1 to your application URL (e.g. https://yoursite.com/pricing?copypatch=1).
  2. CopyPatchProvider detects the query parameter and dynamically lazy-loads the editor bundle (~12 kB gzipped). Normal visitors never download this code.
  3. If no active session exists, the Passphrase Authentication Modal prompts for your password.
  4. Once authenticated, a floating Editing Toolbar docks at the bottom of the viewport, and all <EditableText> nodes become clickable.

2. Keyboard Shortcuts Reference

Keyboard Shortcuts
Cmd + S / Ctrl + S   -> Save pending edits to draft (or publish if authorized)
Escape               -> Cancel active edit / Deselect text field / Close modals
Enter                -> In single-line mode: confirm & blur; in multi-line: insert newline
Tab / Shift + Tab    -> Jump focus to the next / previous editable field on page

3. Editing Toolbar Controls

ControlVisual IndicatorAction
Locale BadgeEN / TR / DEDisplays the active editing language scope.
Status DotGreen / Amber pulsing dotIndicates whether all edits are synced (Ready) or pending (Unsaved).
DiscardOutlined buttonReverts unsaved client edits back to the latest published snapshot.
Save DraftBlue button (⌘S)Persists current edits into the draft revision via atomic CAS validation.
Publish LiveGreen action buttonPromotes the draft revision to live published content (requires publisher role).
Exit (Esc)Close icon buttonRemoves ?copypatch=1 from the URL and returns to normal visitor view.

4. Natural Cursor & Plain-Text Stability

Unlike generic contenteditable wrappers that cause cursor jumping on React re-renders, CopyPatch uses stable selection reconciliation:

  • Text nodes use contenteditable=“plaintext-only”. Pasted rich-text formatting, colors, and external styles are automatically stripped.
  • Keystrokes are buffered locally without triggering full React virtual DOM reconciliations on every character.
  • When blurred or saved, the underlying store syncs atomically without breaking the user’s cursor position.

5. DOM Portal Isolation

The editor toolbar and authentication modal are injected into a dedicated portal root outside your application’s markup:

HTML
<!-- Cleanly isolated portal container appended outside your application layout -->
<div id="copypatch-portal-root" aria-live="polite"></div>

This guarantees that your site’s global CSS resets, Tailwind utilities, or z-index stacking contexts will never break the CopyPatch UI.