# @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