Content Converters

Draft.js

Ricos is in the preparation phase of migrating from a draft-js based content to our new Ricos schema. To support this we provide conversion functions to & from draft.

fromDraft: (draftJSON: DraftContent, opts: FromDraftOptions = {}) => RichContent;

toDraft: (content: RichContent) => DraftContent;

ensureRicosContent: (content: RichContent | DraftContent) => RichContent;

ensureDraftContent: (content: RichContent | DraftContent) => DraftContent;

FromDraftOptions

By default, the fromDraft API throws error when it encounters invalid DraftContent. Sometimes, this behavior is not desired.

The opts: FromDraftOptions parameter allows to alter it, by setting { ignoreUnsupportedValues: true }. In this case, any invalid values are gracefully ignored.

Example

import { fromDraft } from 'ricos-content/libs/fromDraft';

import { toDraft } from 'ricos-content/libs/toDraft';

import { RichContent } from 'ricos-schema';

import { RicosEditor, DraftContent } from 'ricos-editor';

import ricosContent from './ricosContent.json';

const draftContent: DraftContent = toDraft(ricosContent);

const onChange = (content: DraftContent) => publishContent(fromDraft(content));

<RicosEditor content={draftContent} onChange={onChange} />;

Plain Text

Ricos is a rich text & rich content editor. The following functions allow converting between plain text and rich content.

Plain text to rich content

fromPlainText: (text: string) => RichContent;

Example

import { toDraft } from 'ricos-content/libs/toDraft';

import { fromPlainText } from 'ricos-content/libs/fromPlainText';

import { RichContent } from 'ricos-schema';

import { RicosEditor, DraftContent } from 'ricos-editor';

const TEXT = 'Hello there!';

const content: RichContent = fromPlainText(TEXT);

const draftContent: DraftContent = toDraft(content);

<RicosEditor content={draftContent} />;

Rich content to plain text

toPlainText: (content: RichContent, options?: {

urlShortener?: (url: string) => Promise<string>;

getVideoUrl?: (fileId: string) => Promise<string>;

}) => Promise<string>;

urlShortener

This function will be called on image source URLs and can be used with URL shortener services.

getVideoUrl

Used to resolve a VideoSource object into an absolute URL.
Defaults to src => https://video.wixstatic.com/${src.pathname}

Example

import { toPlainText } from 'ricos-content/libs/toPlainText';

import ricosContent from './ricosContent.json';

const text: string = await toPlainText(ricosContent);

console.log(text);

HTML

The following functions allow converting rich content to and from HTML.

Supporting:

• Headings
• Bold
• Italic
• Links
• Lists
• Line break
• Emojis

HTML to rich content

fromHtml: (html: string) => RichContent;

Example

import { fromRichTextHtml } from 'ricos-content/libs/server-side-converters';

import { RichContent } from 'ricos-schema';

import { RicosEditor, DraftContent } from 'ricos-editor';

const HTML = '<p><strong>Bold</strong> <em>italic</em> <u>underline</u></p>';

const content: RichContent = fromRichTextHtml(HTML);

const draftContent: DraftContent = toDraft(content);

<RicosEditor content={draftContent} />;

Rich content to plain text

toHtml: (content: RichContent) => string;

Example

import { toHtml } from 'ricos-content/libs/htmlConverters';

import ricosContent from './ricosContent.json';

const html: string = toHtml(ricosContent);

document.body.innerHTML = html;