@freelygive/canvas-utils 0.3.3-dev.770641bc → 0.3.4-dev.3b4d338c
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 +15 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,11 +7,11 @@ Canvas utility components and test helpers for Drupal Canvas projects.
|
|
|
7
7
|
Utility components are scaffolded into your project via
|
|
8
8
|
[@freelygive/npm-scaffold](https://www.npmjs.com/package/@freelygive/npm-scaffold).
|
|
9
9
|
|
|
10
|
-
| Component | Description
|
|
11
|
-
|
|
10
|
+
| Component | Description |
|
|
11
|
+
|---------------------|-------------------------------------------------------------------------------------------|
|
|
12
12
|
| `utils_editor_note` | Editor note component, `isCanvasEditorMode()` detection, and `useEditorFullHeight()` hook |
|
|
13
|
-
| `utils_slots` | `getSlotChildren()` for parsing Canvas slot content
|
|
14
|
-
| `utils_entity` | `useMainEntity()` hook for fetching the page's main entity
|
|
13
|
+
| `utils_slots` | `getSlotChildren()` for parsing Canvas slot content |
|
|
14
|
+
| `utils_entity` | `useMainEntity()` hook for fetching the page's main entity |
|
|
15
15
|
|
|
16
16
|
### `useEditorFullHeight(enabled)`
|
|
17
17
|
|
|
@@ -22,11 +22,18 @@ set to 80% of the viewport. Returns `undefined` when not in editor mode, so CSS
|
|
|
22
22
|
handles it normally.
|
|
23
23
|
|
|
24
24
|
```jsx
|
|
25
|
-
import {
|
|
25
|
+
import {
|
|
26
|
+
isCanvasEditorMode,
|
|
27
|
+
useEditorFullHeight,
|
|
28
|
+
} from '@/components/utils_editor_note';
|
|
26
29
|
|
|
27
30
|
const MyComponent = () => {
|
|
28
31
|
const editorStyle = useEditorFullHeight(isCanvasEditorMode());
|
|
29
|
-
return
|
|
32
|
+
return (
|
|
33
|
+
<div className="min-h-screen" style={editorStyle}>
|
|
34
|
+
...
|
|
35
|
+
</div>
|
|
36
|
+
);
|
|
30
37
|
};
|
|
31
38
|
```
|
|
32
39
|
|
|
@@ -115,7 +122,7 @@ Running `npm install` will scaffold the utility components into
|
|
|
115
122
|
### canvas-slots
|
|
116
123
|
|
|
117
124
|
| Export | Description |
|
|
118
|
-
|
|
125
|
+
|-----------------------------|-----------------------------------------------------------------------------------|
|
|
119
126
|
| `rawProp(value)` | Wraps a value in the `["raw", value]` tuple format used by Canvas island props |
|
|
120
127
|
| `createCanvasIsland(props)` | Creates a `<canvas-island>` HTML string from a props object |
|
|
121
128
|
| `createCanvasSlot(html)` | Creates a React element simulating a Canvas slot for `getSlotChildren()` to parse |
|
|
@@ -123,7 +130,7 @@ Running `npm install` will scaffold the utility components into
|
|
|
123
130
|
### editor-mode
|
|
124
131
|
|
|
125
132
|
| Export | Description |
|
|
126
|
-
|
|
133
|
+
|-----------------------|-------------------------------------------------------------------------------|
|
|
127
134
|
| `withEditorMode` | Storybook decorator — enables editor mode before render, cleans up on unmount |
|
|
128
135
|
| `enableEditorMode()` | Sets `window.drupalSettings.canvas` to simulate Canvas editor mode |
|
|
129
136
|
| `disableEditorMode()` | Removes `window.drupalSettings.canvas` |
|