Content

Block editor

The BlockEditor component is the main component of the editor. It is responsible for rendering the content editor.

Component - simple

<BlockEditor
    contentField="content"
    field="blocks"
    label="Content"
    sortableBy="order"
/>

Component preview

Component - advanced

<BlockEditor
    contentField="content"
    field="blocks"
    label="Content"
    size="small"
    sortableBy="order"
    referencesField="references"
    referenceDiscriminationField="type"
    blockButtons={[
      {
        discriminateBy: "gallery",
        blueprintIcon: "heat-grid",
        title: "Gallery",
      },
      {
        discriminateBy: "quote",
        blueprintIcon: "citation",
        title: "Quote",
      }
    ]}
    inlineButtons={[
        [
            RichEditor.buttons.bold,
            RichEditor.buttons.italic,
            RichEditor.buttons.underline,
            RichEditor.buttons.strikeThrough
        ],
        [
            RichEditor.buttons.headingOne,
            RichEditor.buttons.headingTwo,
            RichEditor.buttons.headingThree,
            RichEditor.buttons.headingFour,
         ],
         [
            RichEditor.buttons.unorderedList,
            RichEditor.buttons.orderedList,
         ]
    ]}
>
  <Block discriminateBy="gallery" label="Gallery">
    <ImageFileRepeater
      field="images"
      urlField="image.url"
      label={undefined}
      sortableBy="order"
    />
  </Block>
  <Block discriminateBy="quote" label="Quote">
    <TextAreaField field="content" label="Content" />
    <TextField field="author" label="Author" />
  </Block>
</BlockEditor>

Component preview

Schema

export class BlockEditor {
  blocks = def.oneHasMany(ContentBlock, 'blockEditor')
}

export class ContentBlock {
  order = def.intColumn().notNull()
  type = def.enumColumn(ContentBlockType).notNull()

  content = def.stringColumn()
  blockEditor = def.manyHasOne(BlockEditor, 'blocks')
  references = def.oneHasMany(ContentReference, 'contentPart')
}

export class ContentReference {
  type = def.enumColumn(def.createEnum('gallery', 'quote')).notNull()
  contentPart = def.manyHasOne(ContentBlock, 'references')
  content = def.stringColumn()
  author = def.stringColumn()
  images = def.oneHasMany(ContentGallery, 'contentReference')
}

export class ContentGallery {
  order = def.intColumn().notNull()
  image = def.manyHasOne(Image).notNull()
  contentReference = def.manyHasOne(ContentReference, 'images').cascadeOnDelete()
}

Props

Prop	Description
contentField	string Field name of string field in entities referenced by field prop. Required
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required
sortableBy	undefined | string The name of the column in Contember schema that is used to sort the options. Required
referencesField	undefined | string | SugaredRelativeEntityList Field name of the references.
referenceDiscriminationField	undefined | string | SugaredRelativeSingleField Field name of the reference discrimination.
inlineButtons	undefined | ToolbarButtonSpec[] | ToolbarButtonSpec[][] Buttons to be displayed in the inline toolbar.
blockButtons	undefined | BlockHoveringToolbarConfig[] | BlockHoveringToolbarConfig[][] | Buttons to be displayed in the block toolbar.
augmentEditor	undefined | ((baseEditor: BaseEditor) => BaseEditor) Function to be called when the editor is created.

Block repeater

The BlockRepeater component is a simple way to repeat blocks of content. Use Block for wrapping fields.

Component - simple

<BlockRepeater
  field="blocks"
  label="Block repeater"
  discriminationField="type"
  sortableBy="order"
>
  <Block discriminateBy="gallery" label="Gallery">
    <ImageFileRepeater
      field="images"
      urlField="image.url"
      label="Images"
      sortableBy="order"
    />
  </Block>
</BlockRepeater>

Component preview

Component - advanced

<BlockRepeater
  field="blocks"
  label="Block repeater"
  discriminationField="type"
  sortableBy="order"
>
  <Block discriminateBy="gallery" label="Gallery">
    <ImageFileRepeater
      field="images"
      urlField="image.url"
      label="Images"
      sortableBy="order"
    />
  </Block>
  <Block discriminateBy="quote" label="Quote">
    <TextAreaField field="content" label="Content" />
    <TextField field="author" label="Author" />
  </Block>
</BlockRepeater>

Component preview

Schema

export class BlockRepeater {
  blocks = def.oneHasMany(RepeaterBlock, 'blockRepeater').orderBy('order')
}

export class RepeaterBlock {
  order = def.intColumn().notNull()
  type = def.enumColumn(ContentBlockType).notNull()
  content = def.stringColumn()
  author = def.stringColumn()
  images = def.oneHasMany(RepeaterGallery, 'repeaterReference').orderBy('order')
  blockRepeater = def.manyHasOne(BlockRepeater, 'blocks')
}

export class RepeaterGallery {
  order = def.intColumn().notNull()
  image = def.manyHasOne(Image).notNull()
  repeaterReference = def.manyHasOne(RepeaterBlock, 'images').cascadeOnDelete()
}

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required
discriminationField	string | SugaredRelativeSingleField Required
sortableBy	undefined | string The name of the column in Contember schema that is used to sort the options. Required
addButtonText	undefined | string