## class: `WyPostEditor`, `wy-post-editor`

Posts editor component to create posts in specific post apps. This component *does not* render the feed itself, but can be used together with `<wy-posts>` to build a complete feed with post creation capabilities.

The component is a rich post editor with built in support for markdown, code formatting, images, file attachments, cloud attachments, mentions, links, embeds, and polls.

The post editor needs the app identifier (`uid`) of a single post app or a space separated string of multiple uid:s for pre-created post apps that the user can choose from. Specifying only one uid allows automatic creation of a [corresponding post app](xref:concepts#app) on the server the first time it's accessed. When using multiple uid:s, all the specified post apps must exist prior to loading the editor.

> It's often useful to base the `uid` on something that identifies the location where the component is rendered.
> Typically you would use something like a product id, page id, or path.

This component is great if you want to decouple the [`<wy-posts>`](./wy-posts) feed from the editor, for instance to place the editor in a different part of the screen or to use the feed without an editor.

**Component Layout**

The component is [block-level](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content) with pre-defined CSS styling to adapt well to flex- and grid-layouts as well as traditional flow-layouts.

The content within the components is per default aligned to the edges of it's own *box* and designed to not be placed next to a edge or border.
It's recommended to adjust the layout with your default padding. Setting the `--wy-padding-outer` to your default padding will allow the component to still fill the are where it's placed,
but with proper padding within the scrollable area of the component.
If you want to make the component go all the way to the edges without padding or any outermost roundness instead,
set `--wy-padding-outer: 0;` and `--wy-border-radius-outer: 0;` to make the component fit nicely with the edge.

You can add additional styling using *CSS Custom Properties* and *CSS Shadow Parts* and further customization using *slots*.

**Used sub components:**

*   [`<wy-post-form>`](./wy-post-form)

### Examples

<figure class="example"><figcaption>Post editor for a posts app</figcaption>

Display a post editor that posts to a specific posts app.

Specifying the app identifier (`uid`) is required, and automatically creates a [corresponding app](https://www.weavy.com/docs/concepts#app) on your Weavy environment when the component is first initialized.
It's recommended to specify a readable `name` of the posts app, to get better readable notifications from the app.

```html
<wy-post-editor uid="test-posts" name="Test feed"></wy-post-editor>
```

</figure>

<figure class="example"><figcaption>Post editor for multiple posts apps</figcaption>

Display a post editor that has a selector for choosing a predefined post app to post to.

Specifying more than one app identifier (`uid`) separated by space is required.

```html
<wy-post-editor uid="test-posts test-news"></wy-post-editor>
```

</figure>

### Fields

| Name             | Type                                    | Default            | Description                                                                                                                                             | Inherited From     |
| ---------------- | --------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `placeholder`    | `string \| undefined`                   |                    | Placeholder text for the post editor. Overrides default text.                                                                                           |                    |
| `app`            | `AppType \| undefined`                  |                    | The current app data.                                                                                                                                   | WeavyAppComponent  |
| `apps`           | `AppListType \| undefined`              |                    | A list of data for all the apps specified by the \`uid\` property.                                                                                      | WeavyAppComponent  |
| `link`           | `LinkType \| undefined`                 |                    | Any provided link that should be loaded, shown and highlighted.                                                                                         | WeavyTypeComponent |
| `generateUid`    | `string \| null \| undefined`           |                    | Sets the uid property to a single uid with automatically appended user and agent name (where applicable).                                               | WeavyAppComponent  |
| `uid`            |                                         |                    | One or multiple unique app identifiers or app id:s. When a single uid is provided, the app gets automatically created on the server upon first request. | WeavyAppComponent  |
| `uids`           |                                         |                    | An array of parsed uids from the \`uid\` property.                                                                                                      | WeavyAppComponent  |
| `currentUid`     | `string \| number \| null \| undefined` | `undefined`        | The currently selected app uid when multiple \`uid\` is provided. Defaults to the first uid from the \`uid\` property.                                  | WeavyAppComponent  |
| `name`           | `string \| undefined`                   |                    | Optional display name for the app (used in notifications etc.)                                                                                          | WeavyAppComponent  |
| `features`       | `string \| undefined`                   |                    | Config for enabling/disabling specific features in the weavy component.&#xA;Prefix a feature with minus to disable it.                                  | WeavyTypeComponent |
| `agent`          | `string \| undefined`                   |                    | The configured uid of the agent for the weavy component.                                                                                                | WeavyTypeComponent |
| `contextualData` | `string \| undefined`                   |                    | Contextual data for agents to reference. Provide descriptive data for optimal results.&#xA;&#xA;### Examples                                            | WeavyTypeComponent |
| `annotations`    | `AnnotationsAppearanceType`             | `"buttons-inline"` | Appearance of annotations.                                                                                                                              | WeavyTypeComponent |
| `enterToSend`    | `EnterToSend`                           | `"auto"`           | Enter-to-send keymap in the editor. \`"modifier"\` is \`Enter\` combined with \`Ctrl\` or \`Cmd\`.                                                      | WeavyTypeComponent |
| `reactions`      | `string`                                | `"😍 😎 😉 😜 👍"` | A space separated string of available reaction emojis in unicode.                                                                                       | WeavyTypeComponent |
| `weavy`          | `WeavyType \| undefined`                |                    | The consumed weavy context.                                                                                                                             | WeavyComponent     |
| `contextId`      | `ContextIdType`                         |                    | Contextual guid that is unique for the client context.                                                                                                  | WeavyComponent     |
| `user`           | `UserType \| undefined`                 |                    | The current user.                                                                                                                                       | WeavyComponent     |

### Methods

| Name        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Parameters           | Return                    | Inherited From    |
| ----------- |   | -------------------- | ------------------------- | ----------------- |
| `reset`     | Sets the component to it's initial state and resets the app state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                      |                           | WeavyAppComponent |
| `subscribe` | Subscribes or unsubscribes to notification updates from the app. Check \`.app.is\_subscribed\` to see current state.&#xA;&#xA;### Examples&#xA;&#xA;\<figure class="example">\<figcaption>Toggle app subscription\</figcaption>&#xA;&#xA;\`\`\`js&#xA;// Wait for app data&#xA;await myWeavyComponent.whenApp();&#xA;&#xA;// Get current app subscription state&#xA;const isSubscribed = myWeavyComponent.app.is\_subscribed;&#xA;&#xA;// Toggle the app subscription state&#xA;myWeavyComponent.subscribe(!isSubscribed);&#xA;\`\`\`&#xA;&#xA;\</figure> | `subscribe: boolean` | `Promise<void>`           | WeavyAppComponent |
| `whenApp`   | Resolves when app data is available.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                      | `Promise<AppType>`        | WeavyAppComponent |
| `whenApps`  | Resolves when multiple apps is available.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |                      | `Promise<AppType[]>`      | WeavyAppComponent |
| `whenUser`  | Resolves when current user data is available.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                      | `Promise<UserType>`       | WeavyComponent    |
| `whenWeavy` | Resolves when a weavy context is available.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |                      | `Promise<WeavyType>`      | WeavyComponent    |
| `whenReady` | Resolves when the component has rendered first time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                      | `Promise<WeavyComponent>` | WeavyComponent    |

### Events

| Name     | Type             | Description                              | Inherited From |
| -------- | ---------------- | ---------------------------------------- | -------------- |
| `wy-app` | `WyAppEventType` | Fired whenever the app property changes. |                |
| `ready`  | `CustomEvent`    | When the component has rendered.         | WeavyComponent |

### Attributes

| Name             | Field          | Inherited From     |
| ---------------- | -------------- | ------------------ |
| `placeholder`    | placeholder    |                    |
| `link`           | link           | WeavyTypeComponent |
| `generateUid`    | generateUid    | WeavyAppComponent  |
| `uid`            | uid            | WeavyAppComponent  |
| `currentUid`     | currentUid     | WeavyAppComponent  |
| `name`           | name           | WeavyAppComponent  |
| `features`       | features       | WeavyTypeComponent |
| `agent`          | agent          | WeavyTypeComponent |
| `contextualData` | contextualData | WeavyTypeComponent |
| `annotations`    | annotations    | WeavyTypeComponent |
| `enterToSend`    | enterToSend    | WeavyTypeComponent |
| `reactions`      | reactions      | WeavyTypeComponent |

### Slots

| Name      | Description    |
| --------- | -------------- |
| `actions` | Extra buttons. |

<details><summary>Private API</summary>

### Fields

| Name                         | Privacy   | Type                                                               | Default                                                                                                                   | Description                             | Inherited From     |
| ---------------------------- | --------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ------------------ |
| `appType`                    | protected | `AppTypeGuid \| UnknownAppType`                                    |                                                                                                                           | Any app type for the weavy component.   | WeavyAppComponent  |
| `#uid`                       | private   | `string \| number \| null \| undefined`                            |                                                                                                                           |                                         | WeavyAppComponent  |
| `#uids`                      | private   | `Array<string \| number>`                                          | `[]`                                                                                                                      |                                         | WeavyAppComponent  |
| `_initialAppName`            | private   | `string \| undefined`                                              |                                                                                                                           |                                         | WeavyAppComponent  |
| `_appName`                   | private   | `string \| undefined`                                              |                                                                                                                           |                                         | WeavyAppComponent  |
| `appSubscribeMutation`       | private   |                                                                    | `new MutationController< void, Error, MutateAppSubscribeProps, MutateAppSubscribeContextType >(this)`                     |                                         | WeavyAppComponent  |
| `#resolveApp`                | private   | `(app: AppType) => void \| undefined`                              |                                                                                                                           |                                         | WeavyAppComponent  |
| `#whenApp`                   | private   |                                                                    | `new Promise<AppType>((r) => { this.#resolveApp = r; })`                                                                  |                                         | WeavyAppComponent  |
| `#resolveApps`               | private   | `(apps: AppListType) => void \| undefined`                         |                                                                                                                           |                                         | WeavyAppComponent  |
| `#whenApps`                  | private   |                                                                    | `new Promise<AppListType>((r) => { this.#resolveApps = r; })`                                                             |                                         | WeavyAppComponent  |
| `#appQuery`                  | private   |                                                                    | `new QueryController<AppType>(this)`                                                                                      |                                         | WeavyAppComponent  |
| `#multipleAppsQueryMap`      | private   |                                                                    | `new Map<string \| number, QueryController<AppType>>()`                                                                   |                                         | WeavyAppComponent  |
| `#appsQuery`                 | private   |                                                                    |                                                                                                                           |                                         | WeavyAppComponent  |
| `visibilityElement`          | protected | `Element \| undefined`                                             |                                                                                                                           | Element to match visibility on.         | WeavyTypeComponent |
| `componentTypes`             | protected | `AppTypeGuid[]`                                                    |                                                                                                                           | Any app types handled by the component. | WeavyTypeComponent |
| `#data`                      | private   | `ContextDataType[] \| undefined`                                   |                                                                                                                           |                                         | WeavyTypeComponent |
| `#annotations`               | private   | `WeavyComponentSettingProps["annotations"] \| undefined`           |                                                                                                                           |                                         | WeavyTypeComponent |
| `#enterToSend`               | private   | `EnterToSend \| undefined`                                         |                                                                                                                           |                                         | WeavyTypeComponent |
| `#reactions`                 | private   | `WeavyComponentSettingProps["reactions"] \| undefined`             |                                                                                                                           |                                         | WeavyTypeComponent |
| `#resolveContextDataBlobs`   | private   | `(blobs: ContextDataBlobsType) => void \| undefined`               |                                                                                                                           |                                         | WeavyTypeComponent |
| `#whenContextDataBlobs`      | private   |                                                                    | `new Promise<ContextDataBlobsType>((r) => { this.#resolveContextDataBlobs = r; })`                                        |                                         | WeavyTypeComponent |
| `#resolveComponentFeatures`  | private   | `(componentFeatures: ComponentFeaturePolicy) => void \| undefined` |                                                                                                                           |                                         | WeavyTypeComponent |
| `#whenComponentFeatures`     | private   |                                                                    | `new Promise<ComponentFeaturePolicy>((r) => { this.#resolveComponentFeatures = r; })`                                     |                                         | WeavyTypeComponent |
| `#resolveLink`               | private   | `(link: LinkType) => void \| undefined`                            |                                                                                                                           |                                         | WeavyTypeComponent |
| `#whenLink`                  | private   |                                                                    | `new Promise<LinkType>((r) => { this.#resolveLink = r; })`                                                                |                                         | WeavyTypeComponent |
| `#resolveSettings`           | private   | `(settings: WeavyComponentSettingsType) => void \| undefined`      |                                                                                                                           |                                         | WeavyTypeComponent |
| `#whenSettings`              | private   |                                                                    | `new Promise<WeavyComponentSettingsType>((r) => { this.#resolveSettings = r; })`                                          |                                         | WeavyTypeComponent |
| `#contextDataRefs`           | private   | `Map<ContextDataType, DataRefType>`                                | `new Map()`                                                                                                               |                                         | WeavyTypeComponent |
| `#uploadContextDataMutation` | private   |                                                                    | `new MutationController<BlobType, Error, MutateFileProps, FileMutationContextType>(this)`                                 |                                         | WeavyTypeComponent |
| `#mutatingContextData`       | private   |                                                                    | `new MutationStateController< BlobType \| FileType \| EmbedType, Error, MutateFileProps, FileMutationContextType >(this)` |                                         | WeavyTypeComponent |
| `#resolveContextId`          | private   | `(contextId: ContextIdType) => void \| undefined`                  |                                                                                                                           |                                         | WeavyComponent     |
| `#whenContextId`             | private   |                                                                    | `new Promise<ContextIdType>((r) => { this.#resolveContextId = r; })`                                                      |                                         | WeavyComponent     |
| `#resolveUser`               | private   | `(user: UserType) => void \| undefined`                            |                                                                                                                           |                                         | WeavyComponent     |
| `#whenUser`                  | private   |                                                                    | `new Promise<UserType>((r) => { this.#resolveUser = r; })`                                                                |                                         | WeavyComponent     |
| `#resolveWeavy`              | private   | `(weavy: WeavyType) => void \| undefined`                          |                                                                                                                           |                                         | WeavyComponent     |
| `#whenWeavy`                 | private   |                                                                    | `new Promise<WeavyType>((r) => { this.#resolveWeavy = r; })`                                                              |                                         | WeavyComponent     |
| `#resolveReady`              | private   | `(component: WeavyComponent) => void \| undefined`                 |                                                                                                                           |                                         | WeavyComponent     |
| `#whenReady`                 | private   |                                                                    | `new Promise<WeavyComponent>((r) => { this.#resolveReady = r; })`                                                         |                                         | WeavyComponent     |
| `#userQuery`                 | private   |                                                                    | `new QueryController<UserType>(this)`                                                                                     |                                         | WeavyComponent     |

</details>

<hr/>

## Exports

| Kind                        | Name             | Declaration  | Module                | Package |
| --------------------------- | ---------------- | ------------ | --------------------- | ------- |
| `js`                        | `WyPostEditor`   | WyPostEditor | lib/wy-post-editor.ts |         |
| `custom-element-definition` | `wy-post-editor` | WyPostEditor | lib/wy-post-editor.ts |         |
