# @tanglemedia/directus-collection-flex-editor

Installs the Flex Content Collection and easily adds the flex content editor to a Directus collection

The package will install the following collections:

- Flex Content Collection (`tngl_flex_content`)
  - Table that contains the flex content editor and plain fields that is supposed to store the content of a directus collection
- Flex Content Nodes Collection (`tngl_flex_content_nodes`)
  - Junction table between the flex content table and node components
- The node components are separate tables. These node components are relational data types that can be added to the content editor
  - Embed
  - Image
  - Resource
  - Section

It automatically sets the following:

- Creates a new role called Website. If the Website role already exist, it will not create a new one.
- Website role will have READ permission to all collections in this package

## Requirements

- Directus >= 10.10.1
- Node >= 18.x.x

## Install

1. Before you proceed, install the following Directus extensions
   - directus-extension-inline-form-interface
   - directus-extension-flexible-editor
   - @tanglemedia/directus-extension-plainify-flex
     - to generate plainified version of the flex content
   - @tanglemedia/directus-collection-embed
     - to relate the embed node component to the `tngl_embed` table
   - @tanglemedia/directus-collection-resource
     - to relate the resource node component to the `tngl_resource` table
   - @tanglemedia/directus-collection-section-banner
     - to relate the resource node component to the `tngl_secbanner` table

2. Add the following variables to your Directus env file:
   - `FLEX_COLLECTION`
     - comma-separated names of collections that you want to add the flex content editor into
     - make sure these tables are installed (exist) first before you install this package

3. `npm i @tanglemedia/directus-collection-flex-editor`

4. `npx directus bootstrap` to update your database and restart directus