@freelygive/canvas-utils 0.2.0 → 0.3.2-dev.b3dd8a2a

package/README.md

@@ -7,11 +7,28 @@ Canvas utility components and test helpers for Drupal Canvas projects.
 Utility components are scaffolded into your project via
 [@freelygive/npm-scaffold](https://www.npmjs.com/package/@freelygive/npm-scaffold).
 
-| Component | Description |
-|---|---|
-| `utils_editor_note` | Editor note component and `isCanvasEditorMode()` detection |
-| `utils_slots` | `getSlotChildren()` for parsing Canvas slot content |
-| `utils_entity` | `useMainEntity()` hook for fetching the page's main entity |
+| Component           | Description                                                |
+| ------------------- | ---------------------------------------------------------- |
+| `utils_editor_note` | Editor note component, `isCanvasEditorMode()` detection, and `useEditorFullHeight()` hook |
+| `utils_slots`       | `getSlotChildren()` for parsing Canvas slot content        |
+| `utils_entity`      | `useMainEntity()` hook for fetching the page's main entity |
+
+### `useEditorFullHeight(enabled)`
+
+Canvas editor mode renders components inside an iframe whose height is stretched
+to fit content, which breaks `min-h-screen` / `h-screen` CSS. This hook reads
+the actual browser viewport height and returns a `{ minHeight }` style object
+set to 80% of the viewport. Returns `undefined` when not in editor mode, so CSS
+handles it normally.
+
+```jsx
+import { useEditorFullHeight, isCanvasEditorMode } from '@/components/utils_editor_note';
+
+const MyComponent = () => {
+  const editorStyle = useEditorFullHeight(isCanvasEditorMode());
+  return <div className="min-h-screen" style={editorStyle}>...</div>;
+};
+```
 
 ## Test Helpers
 
@@ -20,8 +37,8 @@ Built JS entry points for use in Storybook test stories.
 ### Simulating Canvas Slots
 
 Canvas delivers slot content as HTML containing `<canvas-island>` custom
-elements. In Storybook, use the canvas-slots helpers to replicate this format
-so components can be tested under realistic conditions.
+elements. In Storybook, use the canvas-slots helpers to replicate this format so
+components can be tested under realistic conditions.
 
 ```js
 import {
@@ -52,8 +69,8 @@ export const WithCanvasSlot: Story = {
 ### Simulating Editor Mode
 
 Canvas editor mode changes component behaviour (e.g. expanding all accordion
-items for editing). Use the `withEditorMode` decorator to enable editor mode
-for the lifetime of a story:
+items for editing). Use the `withEditorMode` decorator to enable editor mode for
+the lifetime of a story:
 
 ```js
 import { withEditorMode } from '@freelygive/canvas-utils/testing/editor-mode';
@@ -65,11 +82,11 @@ export const InEditorMode: Story = {
 ```
 
 The decorator enables editor mode before the first render and cleans up on
-unmount via `useEffect`, so state is restored even when tests are interrupted
-or Storybook navigates away.
+unmount via `useEffect`, so state is restored even when tests are interrupted or
+Storybook navigates away.
 
-`enableEditorMode()` and `disableEditorMode()` are also exported for cases
-that need direct control.
+`enableEditorMode()` and `disableEditorMode()` are also exported for cases that
+need direct control.
 
 ## Setup
 
@@ -97,16 +114,16 @@ Running `npm install` will scaffold the utility components into
 
 ### canvas-slots
 
-| Export | Description |
-|---|---|
-| `rawProp(value)` | Wraps a value in the `["raw", value]` tuple format used by Canvas island props |
-| `createCanvasIsland(props)` | Creates a `<canvas-island>` HTML string from a props object |
-| `createCanvasSlot(html)` | Creates a React element simulating a Canvas slot for `getSlotChildren()` to parse |
+| Export                      | Description                                                                       |
+| --------------------------- | --------------------------------------------------------------------------------- |
+| `rawProp(value)`            | Wraps a value in the `["raw", value]` tuple format used by Canvas island props    |
+| `createCanvasIsland(props)` | Creates a `<canvas-island>` HTML string from a props object                       |
+| `createCanvasSlot(html)`    | Creates a React element simulating a Canvas slot for `getSlotChildren()` to parse |
 
 ### editor-mode
 
-| Export | Description |
-|---|---|
-| `withEditorMode` | Storybook decorator — enables editor mode before render, cleans up on unmount |
-| `enableEditorMode()` | Sets `window.drupalSettings.canvas` to simulate Canvas editor mode |
-| `disableEditorMode()` | Removes `window.drupalSettings.canvas` |
+| Export                | Description                                                                   |
+| --------------------- | ----------------------------------------------------------------------------- |
+| `withEditorMode`      | Storybook decorator — enables editor mode before render, cleans up on unmount |
+| `enableEditorMode()`  | Sets `window.drupalSettings.canvas` to simulate Canvas editor mode            |
+| `disableEditorMode()` | Removes `window.drupalSettings.canvas`                                        |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freelygive/canvas-utils",
-  "version": "0.2.0",
+  "version": "0.3.2-dev.b3dd8a2a",
   "description": "Canvas utility components and test helpers for Drupal Canvas projects.",
   "type": "module",
   "files": [
@@ -40,5 +40,9 @@
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },
-  "license": "GPL-2.0-or-later"
+  "license": "GPL-2.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/freelygive/canvas-utils"
+  }
 }

package/src/components/utils_editor_note/index.jsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+
 /**
  * Detect if we're in Canvas page editor mode
  * Returns true when the component is being edited in the Canvas UI
@@ -24,6 +26,53 @@ export const isCanvasEditorMode = () => {
   return false;
 };
 
+/**
+ * Get the actual browser viewport height, even inside Canvas editor iframes.
+ * Tries window.top (same-origin), then visualViewport, then falls back to
+ * a capped window.innerHeight (max 1200px to guard against stretched iframes).
+ */
+const getViewportHeight = () => {
+  try {
+    if (window.top && window.top.innerHeight > 0) {
+      return window.top.innerHeight;
+    }
+  } catch {
+    // Cross-origin — fall through
+  }
+  if (window.visualViewport?.height > 0) {
+    return window.visualViewport.height;
+  }
+  return Math.min(window.innerHeight, 1200);
+};
+
+/**
+ * Hook that returns a minHeight style for full-height sections in editor mode.
+ * Canvas editor mode breaks min-h-screen / h-screen because the component
+ * renders inside an iframe whose height is stretched to fit content.
+ * We read the actual browser viewport height and apply 80% as inline style.
+ * Returns undefined when not in editor mode (let CSS handle it).
+ */
+export const useEditorFullHeight = (enabled) => {
+  const [minHeight, setMinHeight] = useState(undefined);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const update = () =>
+      setMinHeight(`${Math.round(getViewportHeight() * 0.8)}px`);
+    update();
+    // Listen on visualViewport (preferred) and window resize as fallback
+    const vv = window.visualViewport;
+    if (vv) vv.addEventListener('resize', update);
+    window.addEventListener('resize', update);
+    return () => {
+      if (vv) vv.removeEventListener('resize', update);
+      window.removeEventListener('resize', update);
+    };
+  }, [enabled]);
+
+  return enabled ? { minHeight } : undefined;
+};
+
 /**
  * Editor note component for displaying messages only visible in Canvas editor mode
  * Used to explain runtime behavior that differs from editor preview