Docs/Fields

Rich Text field

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.

abc

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

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', {
  blocks: alinea.schema({
    MyBlock: MyBlockSchema
  })
})

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

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

PreviousText

NextSelect