BlockEditor

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()
}