Reference
UIKit
Post Editor

Post editor

<wy-post-editor> | WyPostEditor

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 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> 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 with pre-defined CSS styling to adapt to flex- and grid-layouts as well as traditional flow-layouts.

The content within the component is per default aligned to the edges of it's own box. It's recommended to add your default padding to the container or to the component to make it fit your design. If you want the component to go all the way to the edges of your container without any outermost roundness or padding, you can set the padding to 0 and set the --wy-border-radius-outer to 0 to make the component align nicely with the edge.

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

Importing

If you installed the UIKit with npm you can use the following snippet to import the component into your project. Otherwise, if you installed the UIKit as a <script> you can ignore this section.

import { WyPostEditor } from "@weavy/uikit-web";

Examples

Post editor for a posts app

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

Specifying the app identifier (uid) is required, and automatically creates a corresponding 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.

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

Post editor for multiple posts apps

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.

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

HTML attributes

Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.

Most attributes are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*).

Learn more about attributes and properties.

Attribute	Value	Description
`uid`*	`string`	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.
`contextualData`	`string`	Contextual data for agents to reference.
`currentUid`	`string`	The currently selected app uid when multiple `uid` is provided. Defaults to the first uid from the `uid` property.
`enterToSend`	`"never", "modifier", "auto", "always"`	Sets whether to use enter to send in the editor. Modifier is enter combined with `Ctrl` or `Cmd`. Defaults to `"auto"`.
`features`	`string`	Explicit space separated list of enabled features. All default features are enabled when this property is not defined.
`generateUid`	`string`	Sets the `uid` property with automatically appended user and agent name (where applicable).
`name`	`string`	Optional display name for the app (used in notifications etc.)
`placeholder`	`string`	Placeholder text for the editor. Overrides default text.

JavaScript properties

Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable. Any required attributes are indicated with an asterisk (*).

Property	Type	Default	Description
`uid`*	`string, number`		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.
`app`	`AppType`		The app data.
`apps`	`AppType[]`		A list of data for all the apps specified by the `uid` property.
`contextualData`	`string`		Contextual data for agents to reference. Provide descriptive data for optimal results.
`currentUid`	`string, number`		The currently selected uid when multiple `uid` is provided. Defaults to the first uid from the `uid` property.
`enterToSend`	`"never", "modifier", "auto", "always"`	`"auto"`	Enter-to-send keymap in the editor. `"modifier"` is `Enter` combined with `Ctrl` or `Cmd`.
`features`	`string`		Config for only enabling specific features in the Weavy component.
`generateUid`	`string`		Sets the `uid` property with automatically appended user and agent name (where applicable).
`name`	`string`		Optional display name for the app (used in notifications etc.)
`placeholder`	`string`		Placeholder text for the message editor.

JavaScript methods

Methods for the component are available in JavaScript. Methods that are async return a promise.

Method	Returns	Description
`reset()`		Sets the component to it's initial state and resets the `app` state.
`subscribe(subscribe: boolean)`	async	Subscribes or unsubscribes to notification updates from the app. Check `.app.is_subscribed` to see current state.
`whenApp()`	async `AppType`	Waits for `app` data and returns the data when available.
`whenApps()`	async `AppType[]`	Waits for multiple `app` data and returns the data when available.
`whenReady()`	async	Resolves when the component has rendered the first time.

DOM Events

The component triggers custom events that bubbles up the DOM tree. They can be listened to using the addEventListener() method.

Learn more about events.

Event	Type	Description
`wy-app`	`WyAppEventType`	Emitted when the `app` changes.

Slots

The slots can be used to inject elements into the component. All predefined child nodes of the slot will be replaced with the injected content.

Slot	Description
`actions`	Extra buttons in the editor.

To prevent child nodes from rendering before the component has loaded you can hide them using CSS.

wy-post-editor:not(:defined) {
  display: none;
}

Available features

The following features are available for the component. Configure them with a space separated list using the features attribute. Features that are available but disabled by default are indicated by parenthesis (). You can disable any features by prefixing them with negative -.

Learn more about features.

Feature	Description
`attachments`	Possibility to upload local files.
`cloud_files`	Cloud file picker (Google Drive, Dropbox etc.).
`context_data`	Possibility to upload contextual data.
`embeds`	Creating embeds from urls in editor text.
(`google_meet`)	Google Meet video meetings.
(`meetings`)	General availability for meetings. This can be ignored if using all individual meeting feature flags, i.e. `google_meet`, `microsoft_teams` and `zoom_meetings`.
`mentions`	Possibility to mention other people from the current directory in the editor.
(`microsoft_teams`)	Microsoft Teams video meetings.
`polls`	Possibility to create polls in editor.
(`zoom_meetings`)	Zoom video meetings.