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.
- package/README.md +24 -39
- 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";
|
|
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
|
-
|
|
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" });
|
|
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" });
|
|
326
|
-
editor.connectMCP({ id: "tenant_42_invoice_template_v3" });
|
|
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
|
|
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.
|
|
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
|
|
372
|
-
|
|
373
|
-
| `editor.connectMCP({ id,
|
|
374
|
-
| `editor.disconnectMCP()`
|
|
375
|
-
| `editor.getPairingCode()`
|
|
376
|
-
| `editor.endPairing()`
|
|
377
|
-
| `editor.getMCPStatus()`
|
|
378
|
-
| `editor.onAIToolFired(cb)`
|
|
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(
|
|
654
|
-
|
|
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.
|
|
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",
|