Rich Text

Rich text can contain text marks like bold, italics or underline. Content can be structured using headings. It can even contain other types as blocks that can be moved around freely.

import {Field} from 'alinea'

Field.richText('My rich text field', {
  schema: {
    CodeBlock,
    ImageBlock
  }
})

Configuration

schema

Allow Types of this Schema to be created between text fragments.

searchable

Index the content of this field so it can be found in a search query.

enableTables

Allow tables to be inserted in this field.

Rendering rich text

Rich text values are encoded in an array.

[
  {
    "_type": "heading",
    "level": 1,
    "content": [
      {
        "type": "text",
        "text": "Hello world"
      }
    ]
  },
  {
    "_type": "paragraph",
    "content": [
      {
        "type": "text",
        "text": "A paragraph follows"
      }
    ]
  }
]

Alinea provides a React component to render this array in your app. By default it will use plain tags such as h1, h2, p, ul, li, etc. to represent the text. Any of these can be customized by either passing a React component or a vnode, of which we'll copy the type and props.

import {RichText} from 'alinea/ui'

<RichText
  doc={richTextValue}

  // Everything below is optional

  // Render plain text with a custom component
  text={TextComponent}

  // Attach a custom classname to paragraphs
  p={<p className="my-p" />}

  // Use a custom component for h1 headings
  h1={MyH1Heading}
  
  // Use a custom component for links
  a={LinkComponent}

  // Attach classes to list items
  ul={<ul className="my-list" />}
  ol={<ol className="my-ordered-list" />}
  li={<li className="my-list-item" />}

  // More options
  // b={<b />}
  // i={<i />}
  // u={<u />}
  // hr={<hr />}
  // br={<br />}
  // small={<small />}
  // blockquote={<blockquote />}
/>

The same principle is applied for custom blocks.

import {RichText} from 'alinea/ui'
import {MyBlock} from './MyBlock'
import {MyBlockSchema} from './MyBlock.schema'

const MyBlockSchema = alinea.type('Custom block', {
  property: alinea.text('Property')
})

function MyBlock({property}) {
  return <span>{property}</span>
}

// Add to config
alinea.richText('My rich text field', {
  schema: alinea.schema({
    MyBlock: MyBlockSchema
  })
})

// Render in page views
<RichText
  doc={richTextValue}

  // Render instances of my custom block with the MyBlock view
  MyBlock={MyBlock}
/>

PreviousText

NextList