Defaults and Validation

By default, all fields are undefined until they are populated and validated. This allows you to consume the API and pass around data using defaults for your fields. null is also a valid value for all fields, but is explicitly avoided.

const MyComponent = function({ text = '' }: { text?: string }) {
  return <div>{ text }</div>;
};

Validation is performed in two steps:

1. In the admin against the schema. This allows only valid values to be saved.
2. In the API against the schema. This only allows schema-defined values to be returned as data.

Rich Text

Rich Text is editable text using a modified Yoopta editor for WYSIWYG (What You See Is What You Get) editing. It provides a simple and intuitive interface for creating and editing content.

Yoopta outputs JSON that can be used to consumed to generate HTML or other content in your application without fear of cross-site scripting (XSS) attacks.

// from @yoopta content to html string
import { html } from '@yoopta/exports';
import { createYooptaEditor } from '@yoopta/editor';

const editor = createYooptaEditor();
const data = {}; // from iridium API
const htmlString = html.serialize(editor, data);
console.log('html string', htmlString);

Layout

Each field has a layout that determines how many columns it is displayed in. The layout can be set to full, half, third, or quarter. The default layout for most fields is full or half.

import { atom, text } from '@iridiumcms/core';
import { LAYOUT } from '@iridiumcms/constants';

export const sample = atom('sample', {
  myText: text({
    layout: LAYOUT.half,
  }),
});