dragble-vue-editor 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +24 -39
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -261,11 +261,10 @@ const handleConnectAI = async () => {
261
261
  // const id = "alice123-campaign-summer-2026";
262
262
  //
263
263
  // Format rules: 8-128 chars, only letters/digits/hyphens/underscores.
264
- const userIdFromAuth = "alice123"; // from your auth/session
264
+ const userIdFromAuth = "alice123"; // from your auth/session
265
265
  const docIdFromRoute = "campaign-summer"; // from your URL or DB row
266
266
  const id = `${userIdFromAuth}-${docIdFromRoute}`;
267
- const { sessionId } =
268
- await editorRef.value!.editor!.connectMCP({ id });
267
+ const { sessionId } = await editorRef.value!.editor!.connectMCP({ id });
269
268
  // Pass sessionId to your backend — it calls MCP tools with your mcp_key
270
269
  };
271
270
  </script>
@@ -309,49 +308,32 @@ This prevents two AI controllers from conflicting on the same design.
309
308
  The `id` you pass to `connectMCP()` is a **Bring Your Own ID (BYOI)** that maps to your domain entities. It is NOT a random token — it is how Dragble identifies the session across browser refreshes, server restarts, and device switches.
310
309
 
311
310
  **Rules:**
311
+
312
312
  - 8–128 characters long
313
313
  - Only letters, numbers, hyphens, and underscores (`a-z A-Z 0-9 - _`)
314
314
  - Must be deterministic — the same user editing the same document should always produce the same `id`
315
315
 
316
316
  **Why these rules?**
317
- - The `id` is used in database lookups, URL paths, and storage keys — special characters or extreme lengths would break routing
317
+
318
+ - The `id` is used in database lookups and URL paths — special characters or extreme lengths would break routing
318
319
  - Same `id` = resume the same session. Random UUIDs mean every page refresh creates a new session and loses AI context
319
320
  - Short IDs (< 8 chars) are too easy to guess, long IDs (> 128 chars) waste storage
320
321
 
321
322
  ```ts
322
323
  // Recommended: derive from your domain — concrete examples
323
- editor.connectMCP({ id: "alice123-campaign-summer-2026" }); // user + doc
324
+ editor.connectMCP({ id: "alice123-campaign-summer-2026" }); // user + doc
324
325
  editor.connectMCP({ id: "workspace_acme_template_welcome" }); // workspace + template
325
- editor.connectMCP({ id: "org-uber-eats-promo-q4-2026" }); // org + campaign
326
- editor.connectMCP({ id: "tenant_42_invoice_template_v3" }); // tenant + entity
326
+ editor.connectMCP({ id: "org-uber-eats-promo-q4-2026" }); // org + campaign
327
+ editor.connectMCP({ id: "tenant_42_invoice_template_v3" }); // tenant + entity
327
328
 
328
329
  // Valid but NOT recommended — random IDs break session continuity
329
330
  // (every page refresh creates a brand new session, AI loses context)
330
331
  editor.connectMCP({ id: crypto.randomUUID() });
331
332
  ```
332
333
 
333
- ### Storage modes (compliance)
334
-
335
- Choose how much of the session lives on Dragble's servers:
336
-
337
- | Mode | Persistence | Use case |
338
- |---|---|---|
339
- | `full` (default) | Metadata + design content | Standard SaaS; survives refresh, restart, device switch |
340
- | `metadata-only` | Metadata only | Audit logs without storing customer content |
341
- | `memory-only` | None — RAM only | HIPAA / SOC2 / strict data residency |
342
-
343
- ```ts
344
- editor.connectMCP({
345
- id: "user-42-doc-99",
346
- storage: "full", // default — best UX, refresh + cross-device resume
347
- // "metadata-only" // audit metadata only, no design content persisted
348
- // "memory-only" // nothing persisted (HIPAA / SOC2 / data residency)
349
- });
350
- ```
351
-
352
334
  ### Disconnecting
353
335
 
354
- `disconnectMCP()` permanently destroys the session — the database record is deleted and the session cannot be reopened:
336
+ `disconnectMCP()` permanently destroys the session — the session cannot be reopened:
355
337
 
356
338
  ```ts
357
339
  const { destroyed } = await editor.disconnectMCP();
@@ -360,7 +342,7 @@ const { destroyed } = await editor.disconnectMCP();
360
342
  Your backend can also force-destroy a session server-side (e.g., when a user's subscription ends):
361
343
 
362
344
  ```bash
363
- curl -X DELETE https://mcp.dragble.io/sessions/user-42-doc-99 \
345
+ curl -X DELETE https://mcp.dragble.com/sessions/user-42-doc-99 \
364
346
  -H "X-API-Key: db_mcp_your_key_here"
365
347
  ```
366
348
 
@@ -368,14 +350,14 @@ Idle sessions are reaped after 2 hours of inactivity. Active sessions never expi
368
350
 
369
351
  ### MCP method reference
370
352
 
371
- | Method | Returns |
372
- |---|---|
373
- | `editor.connectMCP({ id, storage?, editorMode? })` | `{ sessionId, storageMode?, resumed? }` |
374
- | `editor.disconnectMCP()` | `{ destroyed }` — permanently deletes session |
375
- | `editor.getPairingCode()` | `{ code, expiresAt }` — generate a pairing code for end-user AI clients |
376
- | `editor.endPairing()` | `{ revoked }` — invalidate the active pairing code |
377
- | `editor.getMCPStatus()` | `{ paired: true, sessionId } \| { paired: false, reason? }` |
378
- | `editor.onAIToolFired(cb)` | unsubscribe fn — fires when AI calls any tool |
353
+ | Method | Returns |
354
+ | -------------------------------------------------- | ----------------------------------------------------------------------- |
355
+ | `editor.connectMCP({ id, editorMode? })` | `{ sessionId, resumed? }` |
356
+ | `editor.disconnectMCP()` | `{ destroyed }` — permanently deletes session |
357
+ | `editor.getPairingCode()` | `{ code, expiresAt }` — generate a pairing code for end-user AI clients |
358
+ | `editor.endPairing()` | `{ revoked }` — invalidate the active pairing code |
359
+ | `editor.getMCPStatus()` | `{ paired: true, sessionId } \| { paired: false, reason? }` |
360
+ | `editor.onAIToolFired(cb)` | unsubscribe fn — fires when AI calls any tool |
379
361
 
380
362
  ### Full documentation
381
363
 
@@ -650,9 +632,12 @@ editorRef.value!.destroy(); // void
650
632
  Component events (`@ready`, `@load`, `@change`, `@error`, `@comment`) cover the common Vue integration points. For lower-level SDK events, subscribe with `addEventListener` after the editor is ready:
651
633
 
652
634
  ```ts
653
- const unsubscribe = editorRef.value?.addEventListener("design:updated", (data) => {
654
- console.log("Design changed:", data);
655
- });
635
+ const unsubscribe = editorRef.value?.addEventListener(
636
+ "design:updated",
637
+ (data) => {
638
+ console.log("Design changed:", data);
639
+ },
640
+ );
656
641
 
657
642
  // Or remove manually
658
643
  editorRef.value?.removeEventListener("design:updated", callback);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dragble-vue-editor",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "AI-powered Vue 3 email editor component. Drag-and-drop email builder for creating responsive email templates and newsletters. Build HTML emails visually with Dragble.",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",