CopyPatch
EN TR
GitHub Get 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

Control Visual Indicator Action
Locale Badge EN / TR / DE Displays the active editing language scope.
Status Dot Green / Amber pulsing dot Indicates whether all edits are synced (Ready) or pending (Unsaved).
Discard Outlined button Reverts unsaved client edits back to the latest published snapshot.
Save Draft Blue button (⌘S) Persists current edits into the draft revision via atomic CAS validation.
Publish Live Green action button Promotes the draft revision to live published content (requires publisher role).
Exit (Esc) Close icon button Removes ?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.