Preview

Introduction#

Ricos editor is able to switch between several modes of previewing content that is being created within the editor itself.

A similar concept is sometimes used in social media applications (like previewing how a website link would expand into a card, or how user-generated text would look on a background). The Preview mode creates a shortened content display, ready to be expanded and is based on rules that can be modified.

The core idea is to transform the content state and to display it within RicosViewer. This transformation is a product of content state metadata and a set of rules defined by the consumer.

It's really best to see it in action, and we suggest you check out visual examples on our storybook page.

Example#

import { createPreview } from 'wix-rich-content-preview';
//
//
render() {
  const { content } = this.props;
  return (
    <RicosViewer
      content={content}
      preview={createPreview()}
    />
  );
}

Tweaking the Preview#

There are 3 fields which can be configured (optional):

createPreview({ transformation, contentInteractionMappers, onPreviewExpand });

`transformation`#

The transformation consists of:

the predicate the content metadata is tested for
an action to perform if the predicate returns true

Example:

  _if: metadata => metadata.images.length >= 4,
  _then: (metadata, preview) => preview.gallery({
      items: metadata.images.slice(0, 4),
      config: { layout: 'grid', imageWidth: 40 }
  }).imageCounter({ counter: metadata.images.length - 4 })

The example above defines the following transformation rule: "if content contains more than 4 images, the preview should display four of them as a grid gallery with image counter above the last image".

default value: Default Transformation

`contentInteractionMappers`#

Allows passing interaction mappings, similar to typeMappers and inlineStyleMappers.

Content Interactions#

Content interactions indicate that the preview content is collapsed and provide a way to expand it. Content interactions work at a block level and every interaction comprises the following elements:

The preview builder parameter - allows adding an interaction to the preview state and configuring it.

preview.plain('some looong text').readMore({ lines: 5 }).image({ mediaInfo: {...} })

In the example above, the readMore interaction is being applied to the previous plain block.
block data interactions array - contains configuration data for all interactions applied to the block
UI component - defines the appearance of the interaction element

Predefined Interactions#

The wix-rich-content-preview introduces three predefined interactions (which include both preview builder API and UI components): Image Counter, See Full Post, and Read More.

See Full Post#

The See Full Post displays a text label over an overlay. Mouse click expands the full content.

Image Counter#

The Image Counter displays hidden image counter. By default, the counter +N label is placed above the last visible image element. The image elements are selected by the role='img' attribute.

default value: Default Interaction Map

`onPreviewExpand`#

A callback that's triggered upon preview expand click. Occurs once in a viewer session.

default value: undefined