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}
    />