From ffd23c4355ca08b7ee7cd05a207f5e782f6a7673 Mon Sep 17 00:00:00 2001
From: Rupert Dunk <rupert@rupertdunk.com>
Date: Tue, 13 Aug 2024 23:31:58 +0100
Subject: [PATCH] feat: expose `createSanityDataAttribute` utility (#1042)

---
 docs/content/2.helpers/5.visual-editing.md | 21 +++++++++++++++++++++
 src/module.ts                              |  1 +
 2 files changed, 22 insertions(+)
 create mode 100644 docs/content/2.helpers/5.visual-editing.md

diff --git a/docs/content/2.helpers/5.visual-editing.md b/docs/content/2.helpers/5.visual-editing.md
new file mode 100644
index 00000000..dc8ed0e4
--- /dev/null
+++ b/docs/content/2.helpers/5.visual-editing.md
@@ -0,0 +1,21 @@
+# Visual Editing
+
+---
+
+When visual editing is enabled, this module exports a `createSanityDataAttribute` helper function which allows you to manually map content in a component to its source.
+
+It is globally available throughout your project (both within your server routes and your Vue app) via auto-imports.
+
+See the [Sanity documentation](https://www.sanity.io/docs/visual-editing-overlays#cb95b19a0263) for more information.
+
+## Example
+
+```vue
+<template>
+  <h1 :data-sanity="createSanityDataAttribute({
+    id: 'the-godfather',
+    type: 'movie',
+    path: 'title',
+  })">The Godfather</h1>
+</template>
+```
diff --git a/src/module.ts b/src/module.ts
index f718ce88..a153d18b 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -331,6 +331,7 @@ export default defineNuxtModule<SanityModuleOptions>({
           { name: 'useSanityLiveMode', from: composablesFile },
           { name: 'useSanityVisualEditing', from: composablesFile },
           { name: 'useSanityVisualEditingState', from: composablesFile },
+          { name: 'createDataAttribute', from: '@sanity/visual-editing', as: 'createSanityDataAttribute' },
         ])
       }