Docs/Fields

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 {alinea} from 'alinea'
alinea.richText('My rich text field', {
  blocks: alinea.schema({
    CodeBlock: CodeBlockSchema,
    ImageBlock: ImageBlockSchema
  })
})

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"
      }
    ]
  }
]

In order to render this array in your app alinea provides a React component. 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}

  // All of the properties below are 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 .js'./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', {
  blocks: alinea.schema({
    MyBlock: MyBlockSchema
  })
})

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

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

Text

Select