feat: add VisualEditing component (#167)

* feat: add VisualEditing component * docs: add Visual Editing example
sanity-io · May 23, 2024 · 54dbbb4 · 54dbbb4
1 parent 7ed55c1
commit 54dbbb4
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/sanity-astro/README.md b/packages/sanity-astro/README.md
@@ -187,6 +187,37 @@ We recommend using [@sanity/image-url](https://www.sanity.io/docs/image-url) to
 
 You can also use community-contributed integrations like [astro-sanity-picture][astro-sanity-picture] to integrate images from Sanity into your website.
 
+## Enabling Visual Editing
+
+To enable [Visual Editing][visual-editing], you should use `VisualEditing` from `@sanity/astro/visual-editing` in your ["page shell" layout](https://docs.astro.build/en/basics/layouts/):
+
+```ts
+---
+import {VisualEditing} from '@sanity/astro/visual-editing'
+
+export type props = {
+  title: string
+}
+const {title} = Astro.props
+const visualEditingEnabled = import.meta.env.SANITY_VISUAL_EDITING_ENABLED == 'true'
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+    <VisualEditing enabled={visualEditingEnabled} zIndex={1000} />
+    <!--                                          ^optional -->
+  </body>
+</html>
+```
+
 ### Resources
 
 - [The official Astro + Sanity guide][guide]
@@ -209,3 +240,4 @@ You can also use community-contributed integrations like [astro-sanity-picture][
 [sanity-client]: https://www.sanity.io/docs/js-client
 [image-urls]: https://www.sanity.io/docs/image-urls
 [vite-virtual-modules]: https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
+[visual-editing]: https://www.sanity.io/docs/introduction-to-visual-editing
diff --git a/packages/sanity-astro/package.json b/packages/sanity-astro/package.json
@@ -64,6 +64,7 @@
   "dependencies": {
     "@sanity/client": "^6.4.12",
     "@sanity/ui": "^1.8.3",
+    "@sanity/visual-editing": "^1.8.21",
     "sanity": "*"
   },
   "publishConfig": {

diff --git a/packages/sanity-astro/src/visual-editing/index.ts b/packages/sanity-astro/src/visual-editing/index.ts
@@ -0,0 +1 @@
+export { default as VisualEditing } from "./visual-editing.astro";
diff --git a/packages/sanity-astro/src/visual-editing/visual-editing.astro b/packages/sanity-astro/src/visual-editing/visual-editing.astro
@@ -0,0 +1,57 @@
+---
+import type { VisualEditingOptions } from '@sanity/visual-editing'
+
+export interface Props extends Pick<VisualEditingOptions, 'zIndex'> {
+  enabled?: boolean
+}
+
+const {enabled, zIndex} = Astro.props
+---
+
+<sanity-astro-visual-editing enabled={enabled} data-z-index={zIndex}></sanity-astro-visual-editing>
+
+<script>
+  import {enableVisualEditing} from '@sanity/visual-editing'
+
+  class SanityAstroVisualEditing extends HTMLElement {
+    static observedAttributes = ['enabled']
+    private unsubscribe: (() => void) | null = null
+
+    constructor() {
+      super()
+    }
+
+    disconnectedCallback() {
+      this.teardownVisualEditing()
+    }
+
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+      if (name === 'enabled' && oldValue !== newValue) {
+        this.updateVisualEditing(newValue === 'true')
+      }
+    }
+
+    private updateVisualEditing(enabled: boolean) {
+      if (enabled) {
+        this.unsubscribe = enableVisualEditing({
+          zIndex: this.dataset.zIndex,
+          refresh: () => {
+            return new Promise((resolve) => {
+              window.location.reload()
+              resolve()
+            })
+          },
+        })
+      } else {
+        this.teardownVisualEditing()
+      }
+    }
+
+    private teardownVisualEditing() {
+      this.unsubscribe?.()
+      this.unsubscribe = null
+    }
+  }
+
+  customElements.define('sanity-astro-visual-editing', SanityAstroVisualEditing)
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as VisualEditing } from "./visual-editing.astro";