@datocms/svelte 4.2.8 → 4.2.9

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.
@@ -1,3 +1,5 @@
1
+ <script context="module"></script>
2
+
1
3
  <script>import { createController } from "@datocms/content-link";
2
4
  import { onDestroy, onMount } from "svelte";
3
5
  export let onNavigateTo = void 0;
@@ -21,8 +23,13 @@ onMount(() => {
21
23
  // Control stega encoding stripping behavior
22
24
  ...stripStega !== void 0 ? { stripStega } : {}
23
25
  });
24
- if (enableClickToEdit) {
25
- controller.enableClickToEdit(enableClickToEdit === true ? void 0 : enableClickToEdit);
26
+ if (enableClickToEdit && typeof window !== "undefined" && window.self === window.top) {
27
+ const shouldEnable = enableClickToEdit === true || !enableClickToEdit.hoverOnly || window.matchMedia("(hover: hover)").matches;
28
+ if (shouldEnable) {
29
+ controller.enableClickToEdit(
30
+ enableClickToEdit === true ? void 0 : { scrollToNearestTarget: enableClickToEdit.scrollToNearestTarget ?? false }
31
+ );
32
+ }
26
33
  }
27
34
  });
28
35
  $:
@@ -1,4 +1,30 @@
1
1
  import { SvelteComponent } from "svelte";
2
+ /**
3
+ * Options to configure click-to-edit behavior.
4
+ */
5
+ export interface ClickToEditOptions {
6
+ /**
7
+ * Whether to automatically scroll to the nearest editable element if none
8
+ * is currently visible in the viewport when click-to-edit mode is enabled.
9
+ *
10
+ * @default false
11
+ */
12
+ scrollToNearestTarget?: boolean;
13
+ /**
14
+ * Only enable click-to-edit on devices that support hover (i.e., non-touch devices).
15
+ * Uses `window.matchMedia('(hover: hover)')` to detect hover capability.
16
+ *
17
+ * This is useful to avoid showing overlays on touch devices where they may
18
+ * interfere with normal scrolling and tapping behavior.
19
+ *
20
+ * When set to `true` on a touch-only device, click-to-edit will not be
21
+ * automatically enabled, but users can still toggle it manually using
22
+ * the Alt/Option key.
23
+ *
24
+ * @default false
25
+ */
26
+ hoverOnly?: boolean;
27
+ }
2
28
  declare const __propDef: {
3
29
  props: {
4
30
  /**
@@ -40,7 +40,7 @@ $:
40
40
  };
41
41
  </script>
42
42
 
43
- <picture data-testid="picture" class={pictureClass} {pictureStyle}>
43
+ <picture data-testid="picture" class={pictureClass} style={pictureStyle}>
44
44
  {#if data.webpSrcSet}
45
45
  <source srcset={data.webpSrcSet} sizes={sizes ?? data.sizes ?? null} type="image/webp" />
46
46
  {/if}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@datocms/svelte",
3
- "version": "4.2.8",
3
+ "version": "4.2.9",
4
4
  "description": "A set of components and utilities to work faster with DatoCMS in Svelte",
5
5
  "license": "MIT",
6
6
  "repository": {