<h2>Overview</h2>
The Classified Group Interface for Directus is an innovative tool designed to enhance the styling capabilities of projects by allowing users to assign classes to various elements. This feature enables developers and designers to implement custom CSS styling efficiently, streamlining the design process while maintaining a clean and organized structure within the Directus environment.
With this interface, users can easily categorize their content and apply personalized styles directly within the platform. The process of integrating and using the Classified Group Interface is straightforward, making it accessible for individuals regardless of their technical expertise.
<h2>Features</h2>
<ul>
<li>
Custom Class Assignment: Easily assign specific classes to content groups, allowing for tailored styling that meets individual project requirements.
</li>
<li>
User-Friendly Installation: Comes with an official installation guide and NPM package, ensuring quick and hassle-free setup for your Directus projects.
</li>
<li>
Field Management: Add fields effortlessly to classified groups, allowing for flexible content management that adapts to various project needs.
</li>
<li>
Custom CSS Support: Empowering users to add their own CSS directly in the project settings, which provides full control over the look and feel of their application.
</li>
<li>
Organized Content Structure: Facilitates the grouping of elements, providing a clearer organizational structure that enhances both development workflow and end-user experience.
</li>
<li>
Versatile Integration: Works seamlessly within the Directus framework, making it a valuable addition for any developer looking to enhance their project's design capabilities.
</li>
</ul>

<h2>Overview:</h2>
The Drawer Notice Interface for Directus is a practical extension designed to enhance the user experience during item editing. It provides a clear notice field that appears exclusively within the drawer interface, ensuring that crucial information is readily accessible at the right moment. By implementing this feature, users can seamlessly edit related items without the fear of inadvertently altering existing content.
This extension is particularly beneficial in collaborative environments, where multiple users may access and modify shared data. The clear notifications serve as reminders, minimizing the chances of errors and maintaining data integrity. Whether you're a developer or a content manager, this tool is essential for improving efficiency and reducing the risks associated with inadvertent data manipulation.
<h2>Features:</h2>
<ul>
<li>
Drawer Visibility: The notice field is designed to be displayed only within the drawer, ensuring that it is contextually relevant and unobtrusive.
</li>
<li>
User Alert: Provides a clear message that warns users about potential overwriting of existing data when editing related items.
</li>
<li>
Installation Ease: Comes with an official guide and an NPM package for straightforward installation and integration into your Directus setup.
</li>
<li>
Use Case Specificity: Tailored specifically to address the needs when editing related items, making it a must-have for collaborative platforms.
</li>
<li>
Data Integrity: Minimizes the risk of accidental data loss by keeping users informed about the actions they are performing.
</li>
<li>
Enhanced User Experience: Simplifies the editing process by providing explicit instructions and warnings, leading to a more user-friendly interface.
</li>
</ul>

<h2>Overview</h2>
The Editable Layout for Directus brings a new level of convenience and efficiency to managing data directly within collection tables. This innovative feature allows users to directly edit item fields in-line, streamlining the data entry process and reducing the need for multiple clicks or window navigations. Whether you're updating entries or managing a data set, this layout is designed to enhance user experience and productivity.
With straightforward installation via an official guide and NPM package, users can easily set up and customize their collection pages. The layout is user-friendly, making it accessible to both new and experienced Directus users. As it integrates seamlessly with existing functionalities, it significantly simplifies the data management workflow.
<h2>Features</h2>
<ul>
<li>Inline Editing: Click a cell to make direct edits, promoting a faster editing process without navigating away from the table.</li>
<li>Auto-Save Option: Choose to enable automatic saving of changes, reducing the risk of data loss and increasing efficiency.</li>
<li>Customizable Spacing: Adjust the row spacing to your preference, ensuring that the table layout is both functional and visually appealing.</li>
<li>Keyboard Navigation: Use the keyboard shortcuts like <code>[Tab]</code> and arrow keys to move between cells smoothly, enhancing your editing speed.</li>
<li>Add Columns Easily: Expand your collection table by adding fields or columns using the intuitive interface, making data management more flexible.</li>
<li>Wide Interface Support: Compatible with various interfaces, except relational ones, which will be available soon, ensuring versatility.</li>
<li>Open for Contributions: The project encourages community involvement, allowing users to report bugs or suggest features, fostering continuous improvement.</li>
</ul>

<h2>Overview:</h2>
The Flexible Editor for Directus is a rich text editor (WYSIWYG) that allows for integration of M2A (many-to-any) relations, making it incredibly flexible. It utilizes the Tiptap editor as an extension within the Directus app. The editor provides JSON output and enables the placement and linking of related nodes. This combination of features makes the Flexible Editor a powerful tool for creating rich content.
<h2>Features:</h2>
<ul>
<li>Rich Text Editor (WYSIWYG) with JSON output</li>
<li>Integration of M2A relations for flexibility</li>
<li>Utilizes Tiptap editor as an extension within Directus app</li>
<li>Allows placement and linking of related nodes</li>
<li>Ability to customize editor settings, such as placeholder text, editor tools, format button appearance, font, spellcheck, and editor height</li>
</ul>
<h2>Summary:</h2>
The Flexible Editor for Directus is a powerful tool for creating rich content with the integration of M2A relations. It provides a WYSIWYG editor with JSON output and allows for customization of various settings. The editor offers flexibility in placing and linking related nodes, making it a versatile choice for content creation in the Directus app.

<h2>Overview</h2>
The Tab Group Interface for Directus is a versatile tool designed to streamline the management of fields within a content group. By adopting a tabbed menu format, it allows users to easily toggle the visibility of various fields, providing a more organized and user-friendly experience when handling multiple translations or complex data structures. This innovative approach is particularly beneficial for users looking to enhance their workflow and improve the overall management of their content.
This extension serves as a fresh alternative to the traditional translation interface, enabling users to control the visibility of individual fields or potentially all fields at once. It simplifies the process of switching between different language versions or data fields, making it easier for users to navigate their projects efficiently.
<h2>Features</h2>
<ul>
<li>
Tab Menu: A clean tab interface allows quick access to the different fields, making navigation intuitive and efficient.
</li>
<li>
Individual Field Toggle: Users can easily toggle the visibility of specific fields such as <code>title_de</code> and <code>title_en</code>, ensuring a customized viewing experience.
</li>
<li>
Bulk Apply Button: A powerful feature that allows users to apply changes across multiple tab groups simultaneously, saving time and enhancing consistency.
</li>
<li>
JSON Configuration: Customizable settings via a JSON field enable users to specify which buttons correspond to which fields, offering a tailored setup.
</li>
<li>
All Tab Option: An additional tab can be included to display all fields at once, simplifying the view for users who need a comprehensive overview.
</li>
<li>
CSS Customization: Users have the flexibility to customize the appearance of the tab interface by modifying CSS styles through Directus Project Settings.
</li>
<li>
Official Installation Guide: A complete and user-friendly guide is provided to ensure smooth installation and implementation of the extension.
</li>
</ul>

<h2>Overview</h2>
The Tokenized Preview Endpoint for Directus is an innovative solution that enhances the way developers and content creators can preview content that is otherwise restricted from public access. By incorporating an active authentication token with a limited Time-To-Live (TTL) into the preview URL, this feature allows users to seamlessly access private content directly through the API. This capability is particularly useful for testing and reviewing changes before they go live, ensuring a smooth workflow and improved collaboration among teams.
Integrating this endpoint into your Directus setup is straightforward. By following the official guide and utilizing the NPM package, developers can easily prefix their preview URLs, providing an intuitive experience when working with content models. The result is a flexible and secure way to manage content previews, making it an essential tool for any Directus user looking to streamline their content management process.
<h2>Features</h2>
<ul>
<li>
Active Auth Token: Integrates an authentication token that ensures secure access to preview content not available publicly.
</li>
<li>
Limited TTL: The token has a limited Time-To-Live, enhancing security by restricting how long the preview URL remains valid.
</li>
<li>
Easy Configuration: Configure the endpoint via environment variables, allowing for customizable settings according to your project needs.
</li>
<li>
Flexible URL Prefix: Users can prefix preview URLs with <code>/preview/</code> to easily format the URL or set a base URL for streamlined access.
</li>
<li>
Enhanced Security Compliance: Requires the setting of CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC for both main and preview base URLs, promoting secure handling of content.
</li>
<li>
Official Documentation: Comprehensive guide and NPM package support provided, allowing for quick installation and implementation.
</li>
<li>
User-Friendly Integration: Designed for ease of use, making it accessible for both developers and content creators without extensive technical knowledge.
</li>
</ul>

<h2>Overview</h2>
The Directus Hook Library is a collection of customizable hooks for Directus. It is not an extension, but rather a library of scripts that can be used inside a Directus hook extension. This library allows for additional functionality and customization within Directus.
<h2>Features</h2>
<ul>
<li>deleteUnusedM2OItems: Deletes related M2O items that lose their relation and should not be kept. This is not possible through Directus itself.</li>
<li>deleteUnusedM2AItems: Deletes related M2A items that lose their relation and should not be kept. This is also not possible through Directus.</li>
<li>toAnyCollectionM2A: Maps array elements to objects of type AnyCollection with a default key field of "id".</li>
<li>toJunctionCollectionM2A: Maps array elements to objects of type JunctionCollection with a default foreignKey field of "item" and a default foreignCollection field of "collection".</li>
<li>preventDeletingM2AItems: Prevents deletion of M2A items, which is not possible through Directus itself.</li>
<li>replaceDeletedUserReferences: Replaces the reference to a deleted user with a reference to the current user in the directus_files collection.</li>
<li>resetFieldsHiddenByOptionSet: Sets fields hidden by a condition to null if they have a value.</li>
<li>setProjectSettingsFromEnvVars: Sets project settings from environment variables like PROJECT_URL.</li>
</ul>
<h2>Summary</h2>
The Directus Hook Library is a collection of customizable hooks for Directus that provide additional functionality and customization options. It includes features such as deleting unused M2O and M2A items, mapping array elements to specific types, preventing deletion of M2A items, replacing deleted user references, resetting hidden fields, and setting project settings from environment variables. By following the installation guide, users can easily integrate this library into their Directus hook extensions.

Formfcw

Directus Extension Classified Group

Directus Extension Drawer Notice

Directus Extension Editable Layout

Directus Extension Flexible Editor

Directus Extension Tab Group

Directus Extension Tokenized Preview

Directus Hook Library