## class: `WyContext`, `wy-context`

The Weavy context component provides a declarative way of [initializing the Weavy UIKit](https://www.weavy.com/docs/reference/uikit) that does not require creating an instance of the `Weavy` class.
This can be useful in some scenarios, for instance in low-code and no-code platforms with limited javascript functionality.

When used with child nodes, the Weavy context acts a regular [context provider](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md), which makes the configuration available to it's child nodes only.
If no child nodes are present, the configuration is instead available globally in the DOM.

To use the context component in the UIKit you need initialize it with the `url` to your [environment](https://www.weavy.com/docs/learn/environment) and `tokenFactory`/`tokenUrl` for [authentication](https://www.weavy.com/docs/learn/authentication).

> For use with React, you can instead use the standard React context provider or the `useWeavy` configuration hook, available in the `@weavy/uikit-react` package. See [Getting started with Weavy using React](https://www.weavy.com/docs/get-started/react) on how to configure Weavy in React.

**Component layout**

This component does not render or occupy any visual space in the rendering.

You can add additional styling for *other* child Weavy components using [CSS Custom Properties](https://www.weavy.com/docs/learn/styling).

### Examples

<figure class="example"><figcaption>Globally available Weavy context</figcaption>

The context component is place by itself without any children and becomes available to the entire DOM.

It's configured with a `tokenUrl` endpoint that needs to be implemented and provided at your server.

```html
<wy-context
url="{WEAVY-URL}"
tokenUrl="https://example.com/myapp/token"
></wy-context>
...
<h1>Messenger with standard weavy configuration</h1>
<wy-messenger></wy-messenger>
```

</figure>

<figure class="example"><figcaption>Scoped Weavy context provider</figcaption>

Placing components as children to the context makes the configuration only available to it's children.

It's configured with a `tokenUrl` endpoint that needs to be implemented and provided at your server.

```html
<wy-context url="{WEAVY-URL}" tokenUrl="https://example.com/myapp/token">
<h1>Messenger inside a weavy context provider</h1>
<wy-messenger></wy-messenger>
</wy-context>
```

</figure>

### Fields

| Name                        | Type                                          | Default                                                 | Description                                                                                                                                                                                                                 | Inherited From |
| --------------------------- | --------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `provider`                  | `boolean`                                     | `false`                                                 | Enables scoped context mode so only child elements consume the provided context.                                                                                                                                            |                |
| `annotations`               | `"none" \| "buttons-inline"`                  |                                                         | Annotation appearance configuration shared with child components.                                                                                                                                                           |                |
| `cloudFilePickerUrl`        | `string \| URL`                               |                                                         | URL to the hosted cloud file picker. This usually does not need to be provided unless you intend to host your own Weavy cloud file picker.                                                                                  |                |
| `configurationTimeout`      |                                               |                                                         | Timeout (ms) before configuration is considered to have failed. \`Infinity\` disables the timeout.                                                                                                                          |                |
| `disableEnvironmentImports` |                                               |                                                         | Disables dynamic import of modules from the environment.                                                                                                                                                                    |                |
| `enterToSend`               | `"never" \| "modifier" \| "auto" \| "always"` |                                                         | Enter-to-send keymap in the editor. \`"modifier"\` is \`Enter\` combined with \`Ctrl\` or \`Cmd\`.                                                                                                                          |                |
| `locale`                    |                                               |                                                         | Active locale identifier for localization.                                                                                                                                                                                  |                |
| `locales`                   |                                               |                                                         | List of available locales.                                                                                                                                                                                                  |                |
| `gcTime`                    |                                               |                                                         | Garbage-collection interval (ms) applied to caches.                                                                                                                                                                         |                |
| `scrollBehavior`            | `"smooth" \| "instant" \| "auto"`             |                                                         | Which \[scroll behavior]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/scroll#behavior) to use (where applicable). Note that not all browsers (Chrome) have similar scroll transitions, they may be very slow. |                |
| `staleTime`                 |                                               |                                                         | Default stale time (ms) for TanStack Query caches.                                                                                                                                                                          |                |
| `tokenFactory`              |                                               |                                                         | Token factory used for acquiring user access tokens.                                                                                                                                                                        |                |
| `tokenFactoryRetryDelay`    |                                               |                                                         | Delay (ms) before retrying the token factory.                                                                                                                                                                               |                |
| `tokenFactoryTimeout`       |                                               |                                                         | Timeout (ms) applied to the token factory promise.                                                                                                                                                                          |                |
| `tokenUrl`                  | `string \| URL \| undefined`                  |                                                         | Token endpoint used when no token factory is supplied.                                                                                                                                                                      |                |
| `url`                       | `string \| URL \| undefined`                  |                                                         | Base URL of the Weavy environment.                                                                                                                                                                                          |                |
| `reactions`                 |                                               |                                                         | Space separated reaction emoji list.                                                                                                                                                                                        |                |
| `version`                   |                                               |                                                         | The semver version of the package.                                                                                                                                                                                          |                |
| `sourceName`                |                                               |                                                         | The Weavy source name; package name.                                                                                                                                                                                        |                |
| `sourceFormat`              |                                               |                                                         | The Weavy source format; file format.                                                                                                                                                                                       |                |
| `weavy`                     |                                               | `new Weavy({ host: this.provider ? this : undefined })` |                                                                                                                                                                                                                             |                |

### Attributes

| Name                        | Field                     | Inherited From |
| --------------------------- | ------------------------- | -------------- |
| `provider`                  | provider                  |                |
| `annotations`               | annotations               |                |
| `cloudFilePickerUrl`        | cloudFilePickerUrl        |                |
| `configurationTimeout`      | configurationTimeout      |                |
| `disableEnvironmentImports` | disableEnvironmentImports |                |
| `enterToSend`               | enterToSend               |                |
| `locale`                    | locale                    |                |
| `locales`                   | locales                   |                |
| `gcTime`                    | gcTime                    |                |
| `scrollBehavior`            | scrollBehavior            |                |
| `staleTime`                 | staleTime                 |                |
| `tokenFactory`              | tokenFactory              |                |
| `tokenFactoryRetryDelay`    | tokenFactoryRetryDelay    |                |
| `tokenFactoryTimeout`       | tokenFactoryTimeout       |                |
| `tokenUrl`                  | tokenUrl                  |                |
| `url`                       | url                       |                |
| `reactions`                 | reactions                 |                |

### Slots

| Name | Description                                                                        |
| ---- | ---------------------------------------------------------------------------------- |
|      | Default slot for any elements that will have access to the Weavy context provider. |

<hr/>

## Exports

| Kind                        | Name         | Declaration | Module            | Package |
| --------------------------- | ------------ | ----------- | ----------------- | ------- |
| `js`                        | `WyContext`  | WyContext   | lib/wy-context.ts |         |
| `custom-element-definition` | `wy-context` | WyContext   | lib/wy-context.ts |         |
