@translation-cms/sync 1.1.86 → 1.1.87

package/README.md

@@ -290,17 +290,58 @@ export function NavMenu() {
 }
 ```
 
-When an editor in the CMS clicks "Show in app" for a translation key like
-`nav:home`, the CMS:
+#### Setting up action_id in the CMS
 
-1. Loads your app in an iframe
-2. Sends a `CMS_TRIGGER_ACTION` message for `'nav.menu'`
-3. Your app calls the registered callback (`setOpen(true)`)
-4. The menu opens
-5. The listener highlights the matching `data-cms-key` element
+In the Translations CMS, each translation key can have an `action_id`:
 
-**Action IDs** are usually namespaced like keys: `'nav.menu'`, `'modal.signup'`,
-etc. Choose IDs that make sense in context.
+1. Click the **Edit** button (pencil icon) on a translation key
+2. Fill in **Preview action** field with your action ID (e.g., `nav.menu`,
+   `modal.signup`)
+3. Click **Update**
+
+When an editor clicks "Show in app" for that key, the CMS will:
+
+1. Load your app in an iframe
+2. Auto-open the menu/dialog/modal by sending a `CMS_TRIGGER_ACTION` message
+3. Highlight the matching `data-cms-key` element
+
+**Action IDs** are namespaced identifiers you define — they should match action
+names registered during initialization. Common patterns:
+
+```
+nav.menu              → Opens main navigation menu
+nav.mobile-menu       → Opens mobile hamburger menu
+modal.signup          → Opens signup modal
+modal.login           → Opens login modal
+dropdown.language     → Opens language selector
+sidebar.filter        → Opens filter sidebar
+accordion.faq         → Opens FAQ accordion
+tabs.pricing          → Switches to pricing tab
+```
+
+**Complete workflow example:**
+
+1. **Client app registers action:**
+
+    ```ts
+    registerPreviewAction('nav.mobile-menu', () => setMobileMenuOpen(true));
+    ```
+
+2. **CMS Editor:**
+    - Selects key `common:nav.home`
+    - Clicks Edit
+    - Sets **Preview action** to `nav.mobile-menu`
+    - Clicks Update
+
+3. **CMS Preview:**
+    - Editor clicks "Show in app"
+    - Mobile menu auto-opens
+    - `<span data-cms-key="common:nav.home">` element is highlighted in yellow
+    - Editor sees the translation in context
+
+---
+
+### How it works
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@translation-cms/sync",
-    "version": "1.1.86",
+    "version": "1.1.87",
     "description": "Scan translation keys in your codebase and sync them to the Translations CMS",
     "type": "module",
     "main": "./dist/index.js",