@okam/directus-flexible-content v1.2.6

directus-flexible-content

Exports

• FlexibleEditorContent (Component)
• TRenderingNodes (Type)
• JSONContent (Type)

FlexibleEditorContent Component

Props

Configuring the flexible editor inside directus :

• Basic usage
• With relation nodes
• With relation nodes and exisiting items

Adding blocks to the flexible editor options : the related blocks are handled in the Editor Nodes field beside the flexible editor field. You can add more collections by going in the relationship menu of the editor nodes and selecting additional collections in the associated collections section.

https://github.com/user-attachments/assets/576bdb52-f9bc-4835-ab2a-4c59995ae77f

Most of the time, if you want to insert blocks inside the flexible editor, you will need to follow the With relation nodes and exisiting items tutorial. Note that it is important to prefix related blocks for selection with related_ so that a related block would look like related_{block-collection} so if you have a block_faqs your related collection key should be related_block_faqs.

IMPORTANT: when configuring the many to many relation inside your related_{block-collection} collection. The key of the field should always be blocks.

Querying

Here is an example of what querying should look like :

flexible_editor
editor_nodes {
  id
  collection
  item {
    ... on related_block_quote {
      id
      blocks {
        id # id should always be present in the query for the blocks otherwise the block will not be displayed.
        item: block_quote_id { # You should always rename `block_[x]_id` to item
          ...BlockQuote
        }
      }
    }
    ... on related_block_button {
      id
      blocks {
        id
        item: block_button_id {
          ...BlockButton
        }
      }
    }
    ... on related_block_faqs {
      id
      blocks {
        id
        item: block_faqs_id {
          ...BlockFaqs
        }
      }
    }
  }
}