[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"marketplace-site-banners":110,"@kraftend\u002Fdirectus-extension-flexible-editor":116},{"id":4,"node_id":5,"name":6,"full_name":7,"private":8,"owner":9,"html_url":27,"description":28,"fork":8,"url":29,"forks_url":30,"keys_url":31,"collaborators_url":32,"teams_url":33,"hooks_url":34,"issue_events_url":35,"events_url":36,"assignees_url":37,"branches_url":38,"tags_url":39,"blobs_url":40,"git_tags_url":41,"git_refs_url":42,"trees_url":43,"statuses_url":44,"languages_url":45,"stargazers_url":46,"contributors_url":47,"subscribers_url":48,"subscription_url":49,"commits_url":50,"git_commits_url":51,"comments_url":52,"issue_comment_url":53,"contents_url":54,"compare_url":55,"merges_url":56,"archive_url":57,"downloads_url":58,"issues_url":59,"pulls_url":60,"milestones_url":61,"notifications_url":62,"labels_url":63,"releases_url":64,"deployments_url":65,"created_at":66,"updated_at":67,"pushed_at":68,"git_url":69,"ssh_url":70,"clone_url":71,"svn_url":27,"homepage":72,"size":73,"stargazers_count":74,"watchers_count":74,"language":75,"has_issues":76,"has_projects":76,"has_downloads":76,"has_wiki":8,"has_pages":8,"has_discussions":76,"forks_count":77,"mirror_url":78,"archived":8,"disabled":8,"open_issues_count":79,"license":80,"allow_forking":76,"is_template":8,"web_commit_signoff_required":8,"has_pull_requests":76,"pull_request_creation_policy":85,"topics":86,"visibility":26,"forks":77,"open_issues":79,"watchers":74,"default_branch":106,"temp_clone_token":78,"custom_properties":107,"organization":108,"network_count":77,"subscribers_count":109},7122594,"MDEwOlJlcG9zaXRvcnk3MTIyNTk0","directus","directus\u002Fdirectus",false,{"login":6,"id":10,"node_id":11,"avatar_url":12,"gravatar_id":13,"url":14,"html_url":15,"followers_url":16,"following_url":17,"gists_url":18,"starred_url":19,"subscriptions_url":20,"organizations_url":21,"repos_url":22,"events_url":23,"received_events_url":24,"type":25,"user_view_type":26,"site_admin":8},15967950,"MDEyOk9yZ2FuaXphdGlvbjE1OTY3OTUw","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F15967950?v=4","","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus","https:\u002F\u002Fgithub.com\u002Fdirectus","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Ffollowers","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Ffollowing{\u002Fother_user}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fgists{\u002Fgist_id}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fstarred{\u002Fowner}{\u002Frepo}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fsubscriptions","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Forgs","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Frepos","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fevents{\u002Fprivacy}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Freceived_events","Organization","public","https:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus","The flexible backend for all your projects 🐰 Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fforks","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fkeys{\u002Fkey_id}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcollaborators{\u002Fcollaborator}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fteams","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fhooks","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fissues\u002Fevents{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fevents","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fassignees{\u002Fuser}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fbranches{\u002Fbranch}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Ftags","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Fblobs{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Ftags{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Frefs{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Ftrees{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fstatuses\u002F{sha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Flanguages","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fstargazers","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcontributors","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fsubscribers","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fsubscription","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcommits{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Fcommits{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcomments{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fissues\u002Fcomments{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcontents\u002F{+path}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcompare\u002F{base}...{head}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fmerges","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002F{archive_format}{\u002Fref}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fdownloads","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fissues{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fpulls{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fmilestones{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fnotifications{?since,all,participating}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Flabels{\u002Fname}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Freleases{\u002Fid}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fdeployments","2012-12-12T01:35:36Z","2026-06-01T20:57:39Z","2026-06-01T21:41:46Z","git:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus.git","git@github.com:directus\u002Fdirectus.git","https:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus.git","https:\u002F\u002Fdirectus.io",442985,36031,"TypeScript",true,4790,null,402,{"key":81,"name":82,"spdx_id":83,"url":78,"node_id":84},"other","Other","NOASSERTION","MDc6TGljZW5zZTA=","all",[87,88,89,90,91,92,6,93,94,95,96,97,98,99,100,101,102,103,104,105],"api","app","cms","composable","data-visualization","database","graphql","headless-cms","javascript","mariadb","mssql","mysql","no-code","node","postgresql","sql","sqlite","typescript","vue","main",{},{"login":6,"id":10,"node_id":11,"avatar_url":12,"gravatar_id":13,"url":14,"html_url":15,"followers_url":16,"following_url":17,"gists_url":18,"starred_url":19,"subscriptions_url":20,"organizations_url":21,"repos_url":22,"events_url":23,"received_events_url":24,"type":25,"user_view_type":26,"site_admin":8},327,[111],{"id":112,"icon":113,"content":114,"link":115,"include_paths":78,"exclude_paths":78},"812bf73d-ebfb-4246-9538-937a09a0c795","connected_tv","Learn more about our native MCP","https:\u002F\u002Fdirectus.io\u002Fmcp",{"name":117,"description":118,"verified":8,"id":119,"readme":120,"type":121,"last_updated":122,"host_version":123,"downloads":124,"total_downloads":125,"sandbox":76,"license":126,"publisher":127,"versions":130,"formatted_name":144,"formatted_readme":145,"formatted_description":118,"featured_image":146,"images":147,"repository_url":134,"recent_downloads_7_days":125,"recent_downloads_30_days":125},"@kraftend\u002Fdirectus-extension-flexible-editor","A rich text editor (WYSIWYG) with JSON output that allows the integration of M2A relations to make it extremely flexible.","51f8d8f4-c485-4711-96b7-3fa95678d1ec","# Flexible Editor for Directus\n\n> **⚠️ Fork Notice**: This is a fork of the original [Flexible Editor for Directus](https:\u002F\u002Fgithub.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor) by [formfcw](https:\u002F\u002Fgithub.com\u002Fformfcw). This fork contains custom modifications and may not be in sync with the original repository.\n>\n> **Original Repository**: [formfcw\u002Fdirectus-extension-flexible-editor](https:\u002F\u002Fgithub.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor)\n>\n> **Changes in this fork**: \n> - Upgraded to Tiptap v3 and other dependencies to latest versions\n> - Removed content renderer package and examples\n>\n> **License**: This fork maintains the same license as the original project.\n\n\u003C!-- NOTE: [extension-description] Sync description with GitHub, custom-messages.ts and package.json -->\n\nA rich text editor (WYSIWYG) with JSON output that allows the integration of M2A relations to make it extremely flexible.\n\n![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Fteaser.png)\n\nUnder the hood, it integrates the [Tiptap](https:\u002F\u002Fgithub.com\u002Fueberdosis\u002Ftiptap) editor as an extension to the [Directus](https:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus) app and uses an optional many-to-any (M2A) field to place and link relation nodes in the editor. This combination makes Flexible Editor a truly rich editor.\n\n## Features\n\n:rocket: **Composable Blocks**: Compose blocks as you would with the built-in builder interface and insert these referenced items directly into Flexible Editor as a “Relation Block”.\n\n\u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-relation-blocks.gif)\n\n\u003C\u002Fdetails>\n\n:rocket: **Inline Blocks**: Use relation blocks inline by inserting them directly into the text flow as “Relation Inline Blocks”.\n\n\u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-relation-inline-blocks.gif)\n\n\u003C\u002Fdetails>\n\n:rocket: **Internal Linking**: Create your own custom link collection(s) and apply it as “Relation Mark” to selected text within Flexible Editor.\n\n\u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-relation-marks.gif)\n\n\u003C\u002Fdetails>\n\n:rocket: **Single Line Mode**: Turn Flexible Editor into an inline editor that only allows marks and inline blocks. This way, you can have a simple text input field that could contain a link or any other mark (including _Relation Marks_ and _Relation Inline Blocks_).\n\n\u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-single-line-mode.png)\n\n\u003C\u002Fdetails>\n\n:rocket: **Adjustable Toolbar**: Choose between a static, sticky or floating toolbar.\n\n\u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-toolbar-options.png)\n\n\u003C\u002Fdetails>\n\n:rocket: **Render Interactive Components**: On your front-end, you can render any node (especially “Relation Nodes”) with your own custom component using Tiptap's rendering capabilities.\n\n## Installation\n\n-   [Official Guide](https:\u002F\u002Fdocs.directus.io\u002Fextensions\u002Finstalling-extensions.html)\n-   [NPM Package](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdirectus-extension-flexible-editor)\n\n## Basic Usage\n\nIn your Directus app simply click the `Create Field` button and select `Flexible Editor`.\n\n\u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Fbasic-usage.gif)\n\n\u003C\u002Fdetails>\n\n### Interface Options\n\nNavigate to the interface tab to adjust the settings.\n\n| Option                                                                                                     | Description                                                                                                                                                                                           |\n| ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| M2A Reference Field\u003Cul>\u003Cli>Relation Blocks\u003C\u002Fli>\u003Cli>Relation Inline Blocks\u003C\u002Fli>\u003Cli>Relation Marks\u003C\u002Fli>\u003C\u002Ful> | Described in detail below _(Usage with relation nodes)_                                                                                                                                               |\n| Placeholder                                                                                                | Display a placeholder text when empty                                                                                                                                                                 |\n| Tools                                                                                                      | Select the editor tools you want to use                                                                                                                                                               |\n| Toolbar                                                                                                    | _Static_ … The toolbar appears at the top of the editor\u003Cbr>_Sticky_ … The toolbar stays at the top of the viewport as you scroll\u003Cbr>_Floating_ … The toolbar floats above the current cursor position |\n| Formats Button Appearance                                                                                  | Display the active format name instead of just an icon                                                                                                                                                |\n| Input Mode                                                                                                 | _Multi-line text_ … Default behavior\u003Cbr>_Single-line text_ … Turns into an inline editor that only allows marks and inline blocks                                                                     |\n| Editor Height                                                                                              | _Grow till Overflow_ … The height grows with its content as long as it remains in the viewport\u003Cbr>_Grow_ … The height grows with its content\u003Cbr>_Fixed_ … The editor has a fixed height               |\n| Font                                                                                                       | Font that is used in the editor                                                                                                                                                                       |\n| Spellcheck                                                                                                 | Enable spell checking in the editor                                                                                                                                                                   |\n\n### Display\n\nNavigate to the `Display` tab and select `Flexible Editor` to display the editor content as plain text in the Directus app.\n\n## Usage with relation nodes\n\n\u003C!-- Sync heading with link above `#usage-with-relation-nodes` -->\n\nYou can insert items from your Directus collections into Flexible Editor. This is optional but gives you extreme flexibility when creating rich content. To do this, you need to add a many-to-any (M2A) field, that the editor field can connect to. For Flexible Editor to work in this way, you must create the junction collection before adding a M2A field.\n\n1. Create a new (junction) collection and give it a name like `xxxx_editor_nodes` and set the `Type` of the Primary Key to `Generate UUID`. Finish the setup to create the collection.\n\n    \u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n    ![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F1-relation-nodes.gif)\n\n    \u003C\u002Fdetails>\n\n2. Open the data model of the collection to which you want to add Flexible Editor, click `Create Field in Advanced Mode`, and select `Many to Any Relationship`.\n\n    \u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n    ![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F2-relation-nodes.gif)\n\n    \u003C\u002Fdetails>\n\n3. Enter a name for the field, such as `editor_nodes` and uncheck `Auto Fill` on the `Relationship` tab, so that you can manually select the junction collection you created earlier (such as `xxxx_editor_nodes`). Select the `Related Collections` you want to integrate into your Flexible Editor field. You don’t need to set a `sort` field, but you do want to set the `Relational Triggers` to `cascade` when an item is deleted or deselected.\n\n    \u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n    ![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F3-relation-nodes.gif)\n\n    \u003C\u002Fdetails>\n\n4. On the `Field` tab, set the field to `Hidden on Detail` because we are managing the M2A items through Flexible Editor. Therefore, no interface is required for the M2A field.\n\n    \u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n    ![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F4-relation-nodes.gif)\n\n    \u003C\u002Fdetails>\n\n    > **Note**: If you use Flexible Editor inside groups – especially inside nested groups –, make sure you put your `editor_nodes field` in the same group as your `Flexible Editor field`, otherwise they may lose their connection!\n\n5. Now that you have created your M2A field, open the interface settings for your Flexible Editor field and connect to the M2A field by selecting it in the `M2A Reference Field`.\n\n    \u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n    ![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F5-relation-nodes.gif)\n\n    \u003C\u002Fdetails>\n\n    Once you have selected a valid M2A field, three additional fields appear:\n\n    - **Relation Block** … A block, you can insert in Flexible Editor, that references an item of a collection you can compose yourself.\n        > Use Cases: gallery, video, related content, complex content structure, …\n    - **Relation Inline Block** … Same as “Relation Block”, but appears inside text.\n        > Use Cases: link to referenced item using item data for link text, inline image\u002Ficon, placeholders\u002Fvariables for templates (e.g. email), …\n    - **Relation Mark** … A mark, you can apply to selected text, that references an item of a collection you can compose yourself.\n        > Use Cases: classic link (compose your own), link to referenced item, button that opens a modal\u002Foverlay\u002Fvideo, …\n\n    All three fields have the same options, which correspond to the collections you selected in your M2A field. Here you can select which collection should appear as a `Relation Block`, `Relation Inline Block` or `Relation Mark` within Flexible Editor.\n\n6. Set the `Item Duplication Fields` for your junction collection (`xxxx_editor_nodes`) in the data model settings. This is required for `copy & paste` or `drag & drop` to work.\n\n    \u003Cdetails>\u003Csummary>Show example\u003C\u002Fsummary>\n\n    ![](https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F6-relation-nodes.gif)\n\n    \u003C\u002Fdetails>\n\n    > **Tip**: If you set up Flexible Editor in the same way for different collections, you can copy and paste the duplication settings via `Copy Raw Value` from the field menu — by clicking on the “Item Duplication Fields” label.\n\n### Things to keep in mind\n\nYou cannot use the same M2A junction collection for multiple collections (where you use Flexible Editor). This would only work with an any-to-any relationship, which Directus doesn't support at the time of writing.\n\nYou should not set `Item Duplication Fields` for nested Flexible Editor fields as they are managed by their own junction collections.\n\nIf you want to duplicate nested M2A items (e.g. a Related Content collection, that references several other collection items), you want to duplicate only the IDs (in the junction collection) without copying the whole item!\n\n\u003C!-- TODO: [Stage 2][docs] Duplication -->\n\nDuplication currently only works within the same editor field or between Flexible Editor fields, that use the same `M2A Reference Field`. (This will be improved in [future releases](https:\u002F\u002Fgithub.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fdiscussions\u002Fcategories\u002Ffeature-request).)\n\nThis also means that you can use the same `M2A Reference Field` for multiple Flexible Editor fields, although this is not recommended as this will change in [future releases](https:\u002F\u002Fgithub.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fdiscussions\u002Fcategories\u002Ffeature-request).\n\nThe current implementation of duplicating relation nodes (M2A items) does not cover all use cases, but will be improved in [future releases](https:\u002F\u002Fgithub.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fdiscussions\u002Fcategories\u002Ffeature-request). If the duplication fails, you should get a warning.\n\n### Tutorial: Relation node with existing items\n\n> https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F5a5fb034-ddff-4b50-ac1d-526dbee2d710\n>\n> _(Video tutorial about relation node with existing items)_\n\n## Custom Editor Styles\n\nTo override the CSS of the editor content, you can add `Custom CSS` to your `Project Settings` in Directus. You can use the `.flexible-editor` & `.flexible-editor-wrapper` classes for the editor itself as well as `.relation-block`, `.relation-inline-block` and `.relation-mark` classes for the relation nodes.\n\n## Rendering in the front-end\n\nTo render the JSON content generated by Flexible Editor, follow the [official Tiptap static rendering guide](https:\u002F\u002Ftiptap.dev\u002Fdocs\u002Feditor\u002Fapi\u002Futilities\u002Fstatic-renderer).\n\n### Recommended rendering approaches\n\nFor static rendering (recommended for most use cases), consider using [@tiptap\u002Fstatic-renderer](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tiptap\u002Fstatic-renderer) which provides a lightweight solution for rendering Tiptap content without the full editor.\n\n### Rendering with interactive components\n\nIf you want to render your JSON content with interactive components, especially when using relation nodes, you can create custom node renderers following the [Tiptap node rendering documentation](https:\u002F\u002Ftiptap.dev\u002Fdocs\u002Feditor\u002Fapi\u002Futilities\u002Fstatic-renderer#custom-mappings).\n\n### Rendering plain HTML or plain text\n\nTiptap provides official functions to `generateText()` or `generateHTML()` from the JSON output. For server-side rendering, use `import { generateHTML } from \"@tiptap\u002Fhtml\"`, and for client-side rendering, use `import { generateHTML } from \"@tiptap\u002Fcore\"`.\n\n## Contribution\n\nContributions are welcome. Be sure to open an issue for bugs or start a discussion for feature requests, before you start writing code!\n","bundle","2025-07-17T22:43:29.484Z","^10.0.0 || ^11.0.0",[],0,"GPL-3.0",{"username":128,"verified":8,"id":129,"github_username":78,"github_name":78,"github_blog":78,"github_bio":78,"github_location":78,"github_company":78,"github_avatar_url":78},"cemreinanc","d2e2a589-f2ef-4501-8111-e3a7f991dc89",[131],{"version":132,"package":119,"publisher":129,"type":121,"host_version":123,"publish_date":122,"verified":8,"id":133,"url_repository":134,"url_homepage":135,"url_bugs":136,"file_count":137,"unpacked_size":138,"sandbox":76,"sandbox_requested_scopes":78,"license":126,"bundled":139,"maintainers":142},"2.0.0-beta.1","dd4f6347-e635-4670-a720-376c9b876cc6","https:\u002F\u002Fgithub.com\u002Fkraftend\u002Fdirectus-extension-flexible-editor.git","https:\u002F\u002Fgithub.com\u002Fkraftend\u002Fdirectus-extension-flexible-editor#readme","https:\u002F\u002Fgithub.com\u002Fkraftend\u002Fdirectus-extension-flexible-editor\u002Fissues",8,844541,[140,141],"cc965985-c3b8-42f7-ac7d-a4346670ffe4","d3762fb1-7fd3-429a-868c-68941987c488",[143],12793,"Flexible Editor","\u003Ch1>Flexible Editor for Directus\u003C\u002Fh1>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>⚠️ Fork Notice\u003C\u002Fstrong>: This is a fork of the original \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\">Flexible Editor for Directus\u003C\u002Fa> by \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fformfcw\">formfcw\u003C\u002Fa>. This fork contains custom modifications and may not be in sync with the original repository.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Original Repository\u003C\u002Fstrong>: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\">formfcw\u002Fdirectus-extension-flexible-editor\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Changes in this fork\u003C\u002Fstrong>:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Upgraded to Tiptap v3 and other dependencies to latest versions\u003C\u002Fli>\n\u003Cli>Removed content renderer package and examples\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>License\u003C\u002Fstrong>: This fork maintains the same license as the original project.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\n\u003Cp>A rich text editor (WYSIWYG) with JSON output that allows the integration of M2A relations to make it extremely flexible.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Fteaser.png\" alt=\"\">\u003C\u002Fp>\n\u003Cp>Under the hood, it integrates the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fueberdosis\u002Ftiptap\">Tiptap\u003C\u002Fa> editor as an extension to the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus\">Directus\u003C\u002Fa> app and uses an optional many-to-any (M2A) field to place and link relation nodes in the editor. This combination makes Flexible Editor a truly rich editor.\u003C\u002Fp>\n\u003Ch2>Features\u003C\u002Fh2>\n\u003Cp>:rocket: \u003Cstrong>Composable Blocks\u003C\u002Fstrong>: Compose blocks as you would with the built-in builder interface and insert these referenced items directly into Flexible Editor as a “Relation Block”.\u003C\u002Fp>\nShow example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-relation-blocks.gif\" alt=\"\">\u003C\u002Fp>\n\n\u003Cp>:rocket: \u003Cstrong>Inline Blocks\u003C\u002Fstrong>: Use relation blocks inline by inserting them directly into the text flow as “Relation Inline Blocks”.\u003C\u002Fp>\nShow example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-relation-inline-blocks.gif\" alt=\"\">\u003C\u002Fp>\n\n\u003Cp>:rocket: \u003Cstrong>Internal Linking\u003C\u002Fstrong>: Create your own custom link collection(s) and apply it as “Relation Mark” to selected text within Flexible Editor.\u003C\u002Fp>\nShow example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-relation-marks.gif\" alt=\"\">\u003C\u002Fp>\n\n\u003Cp>:rocket: \u003Cstrong>Single Line Mode\u003C\u002Fstrong>: Turn Flexible Editor into an inline editor that only allows marks and inline blocks. This way, you can have a simple text input field that could contain a link or any other mark (including \u003Cem>Relation Marks\u003C\u002Fem> and \u003Cem>Relation Inline Blocks\u003C\u002Fem>).\u003C\u002Fp>\nShow example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-single-line-mode.png\" alt=\"\">\u003C\u002Fp>\n\n\u003Cp>:rocket: \u003Cstrong>Adjustable Toolbar\u003C\u002Fstrong>: Choose between a static, sticky or floating toolbar.\u003C\u002Fp>\nShow example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-toolbar-options.png\" alt=\"\">\u003C\u002Fp>\n\n\u003Cp>:rocket: \u003Cstrong>Render Interactive Components\u003C\u002Fstrong>: On your front-end, you can render any node (especially “Relation Nodes”) with your own custom component using Tiptap's rendering capabilities.\u003C\u002Fp>\n\u003Ch2>Installation\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fdocs.directus.io\u002Fextensions\u002Finstalling-extensions.html\">Official Guide\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdirectus-extension-flexible-editor\">NPM Package\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Basic Usage\u003C\u002Fh2>\n\u003Cp>In your Directus app simply click the \u003Ccode>Create Field\u003C\u002Fcode> button and select \u003Ccode>Flexible Editor\u003C\u002Fcode>.\u003C\u002Fp>\nShow example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Fbasic-usage.gif\" alt=\"\">\u003C\u002Fp>\n\n\u003Ch3>Interface Options\u003C\u002Fh3>\n\u003Cp>Navigate to the interface tab to adjust the settings.\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Option\u003C\u002Fth>\n\u003Cth>Description\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>M2A Reference Field\u003Cul>\u003Cli>Relation Blocks\u003C\u002Fli>\u003Cli>Relation Inline Blocks\u003C\u002Fli>\u003Cli>Relation Marks\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Ftd>\n\u003Ctd>Described in detail below \u003Cem>(Usage with relation nodes)\u003C\u002Fem>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Placeholder\u003C\u002Ftd>\n\u003Ctd>Display a placeholder text when empty\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Tools\u003C\u002Ftd>\n\u003Ctd>Select the editor tools you want to use\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Toolbar\u003C\u002Ftd>\n\u003Ctd>\u003Cem>Static\u003C\u002Fem> … The toolbar appears at the top of the editor\u003Cbr>\u003Cem>Sticky\u003C\u002Fem> … The toolbar stays at the top of the viewport as you scroll\u003Cbr>\u003Cem>Floating\u003C\u002Fem> … The toolbar floats above the current cursor position\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Formats Button Appearance\u003C\u002Ftd>\n\u003Ctd>Display the active format name instead of just an icon\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Input Mode\u003C\u002Ftd>\n\u003Ctd>\u003Cem>Multi-line text\u003C\u002Fem> … Default behavior\u003Cbr>\u003Cem>Single-line text\u003C\u002Fem> … Turns into an inline editor that only allows marks and inline blocks\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Editor Height\u003C\u002Ftd>\n\u003Ctd>\u003Cem>Grow till Overflow\u003C\u002Fem> … The height grows with its content as long as it remains in the viewport\u003Cbr>\u003Cem>Grow\u003C\u002Fem> … The height grows with its content\u003Cbr>\u003Cem>Fixed\u003C\u002Fem> … The editor has a fixed height\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Font\u003C\u002Ftd>\n\u003Ctd>Font that is used in the editor\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Spellcheck\u003C\u002Ftd>\n\u003Ctd>Enable spell checking in the editor\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Ch3>Display\u003C\u002Fh3>\n\u003Cp>Navigate to the \u003Ccode>Display\u003C\u002Fcode> tab and select \u003Ccode>Flexible Editor\u003C\u002Fcode> to display the editor content as plain text in the Directus app.\u003C\u002Fp>\n\u003Ch2>Usage with relation nodes\u003C\u002Fh2>\n\n\u003Cp>You can insert items from your Directus collections into Flexible Editor. This is optional but gives you extreme flexibility when creating rich content. To do this, you need to add a many-to-any (M2A) field, that the editor field can connect to. For Flexible Editor to work in this way, you must create the junction collection before adding a M2A field.\u003C\u002Fp>\n\u003Col>\n\u003Cli>\n\u003Cp>Create a new (junction) collection and give it a name like \u003Ccode>xxxx_editor_nodes\u003C\u002Fcode> and set the \u003Ccode>Type\u003C\u002Fcode> of the Primary Key to \u003Ccode>Generate UUID\u003C\u002Fcode>. Finish the setup to create the collection.\u003C\u002Fp>\n Show example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F1-relation-nodes.gif\" alt=\"\">\u003C\u002Fp>\n \n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Open the data model of the collection to which you want to add Flexible Editor, click \u003Ccode>Create Field in Advanced Mode\u003C\u002Fcode>, and select \u003Ccode>Many to Any Relationship\u003C\u002Fcode>.\u003C\u002Fp>\n Show example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F2-relation-nodes.gif\" alt=\"\">\u003C\u002Fp>\n \n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Enter a name for the field, such as \u003Ccode>editor_nodes\u003C\u002Fcode> and uncheck \u003Ccode>Auto Fill\u003C\u002Fcode> on the \u003Ccode>Relationship\u003C\u002Fcode> tab, so that you can manually select the junction collection you created earlier (such as \u003Ccode>xxxx_editor_nodes\u003C\u002Fcode>). Select the \u003Ccode>Related Collections\u003C\u002Fcode> you want to integrate into your Flexible Editor field. You don’t need to set a \u003Ccode>sort\u003C\u002Fcode> field, but you do want to set the \u003Ccode>Relational Triggers\u003C\u002Fcode> to \u003Ccode>cascade\u003C\u002Fcode> when an item is deleted or deselected.\u003C\u002Fp>\n Show example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F3-relation-nodes.gif\" alt=\"\">\u003C\u002Fp>\n \n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>On the \u003Ccode>Field\u003C\u002Fcode> tab, set the field to \u003Ccode>Hidden on Detail\u003C\u002Fcode> because we are managing the M2A items through Flexible Editor. Therefore, no interface is required for the M2A field.\u003C\u002Fp>\n Show example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F4-relation-nodes.gif\" alt=\"\">\u003C\u002Fp>\n \n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Note\u003C\u002Fstrong>: If you use Flexible Editor inside groups – especially inside nested groups –, make sure you put your \u003Ccode>editor_nodes field\u003C\u002Fcode> in the same group as your \u003Ccode>Flexible Editor field\u003C\u002Fcode>, otherwise they may lose their connection!\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Now that you have created your M2A field, open the interface settings for your Flexible Editor field and connect to the M2A field by selecting it in the \u003Ccode>M2A Reference Field\u003C\u002Fcode>.\u003C\u002Fp>\n Show example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F5-relation-nodes.gif\" alt=\"\">\u003C\u002Fp>\n \n\u003Cp>Once you have selected a valid M2A field, three additional fields appear:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Relation Block\u003C\u002Fstrong> … A block, you can insert in Flexible Editor, that references an item of a collection you can compose yourself.\n\u003Cblockquote>\n\u003Cp>Use Cases: gallery, video, related content, complex content structure, …\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Relation Inline Block\u003C\u002Fstrong> … Same as “Relation Block”, but appears inside text.\n\u003Cblockquote>\n\u003Cp>Use Cases: link to referenced item using item data for link text, inline image\u002Ficon, placeholders\u002Fvariables for templates (e.g. email), …\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Relation Mark\u003C\u002Fstrong> … A mark, you can apply to selected text, that references an item of a collection you can compose yourself.\n\u003Cblockquote>\n\u003Cp>Use Cases: classic link (compose your own), link to referenced item, button that opens a modal\u002Foverlay\u002Fvideo, …\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>All three fields have the same options, which correspond to the collections you selected in your M2A field. Here you can select which collection should appear as a \u003Ccode>Relation Block\u003C\u002Fcode>, \u003Ccode>Relation Inline Block\u003C\u002Fcode> or \u003Ccode>Relation Mark\u003C\u002Fcode> within Flexible Editor.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Set the \u003Ccode>Item Duplication Fields\u003C\u002Fcode> for your junction collection (\u003Ccode>xxxx_editor_nodes\u003C\u002Fcode>) in the data model settings. This is required for \u003Ccode>copy & paste\u003C\u002Fcode> or \u003Ccode>drag & drop\u003C\u002Fcode> to work.\u003C\u002Fp>\n Show example\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F6-relation-nodes.gif\" alt=\"\">\u003C\u002Fp>\n \n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Tip\u003C\u002Fstrong>: If you set up Flexible Editor in the same way for different collections, you can copy and paste the duplication settings via \u003Ccode>Copy Raw Value\u003C\u002Fcode> from the field menu — by clicking on the “Item Duplication Fields” label.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Things to keep in mind\u003C\u002Fh3>\n\u003Cp>You cannot use the same M2A junction collection for multiple collections (where you use Flexible Editor). This would only work with an any-to-any relationship, which Directus doesn't support at the time of writing.\u003C\u002Fp>\n\u003Cp>You should not set \u003Ccode>Item Duplication Fields\u003C\u002Fcode> for nested Flexible Editor fields as they are managed by their own junction collections.\u003C\u002Fp>\n\u003Cp>If you want to duplicate nested M2A items (e.g. a Related Content collection, that references several other collection items), you want to duplicate only the IDs (in the junction collection) without copying the whole item!\u003C\u002Fp>\n\n\u003Cp>Duplication currently only works within the same editor field or between Flexible Editor fields, that use the same \u003Ccode>M2A Reference Field\u003C\u002Fcode>. (This will be improved in \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fdiscussions\u002Fcategories\u002Ffeature-request\">future releases\u003C\u002Fa>.)\u003C\u002Fp>\n\u003Cp>This also means that you can use the same \u003Ccode>M2A Reference Field\u003C\u002Fcode> for multiple Flexible Editor fields, although this is not recommended as this will change in \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fdiscussions\u002Fcategories\u002Ffeature-request\">future releases\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>The current implementation of duplicating relation nodes (M2A items) does not cover all use cases, but will be improved in \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fdiscussions\u002Fcategories\u002Ffeature-request\">future releases\u003C\u002Fa>. If the duplication fails, you should get a warning.\u003C\u002Fp>\n\u003Ch3>Tutorial: Relation node with existing items\u003C\u002Fh3>\n\u003Cblockquote>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F5a5fb034-ddff-4b50-ac1d-526dbee2d710\">https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F5a5fb034-ddff-4b50-ac1d-526dbee2d710\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cem>(Video tutorial about relation node with existing items)\u003C\u002Fem>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>Custom Editor Styles\u003C\u002Fh2>\n\u003Cp>To override the CSS of the editor content, you can add \u003Ccode>Custom CSS\u003C\u002Fcode> to your \u003Ccode>Project Settings\u003C\u002Fcode> in Directus. You can use the \u003Ccode>.flexible-editor\u003C\u002Fcode> & \u003Ccode>.flexible-editor-wrapper\u003C\u002Fcode> classes for the editor itself as well as \u003Ccode>.relation-block\u003C\u002Fcode>, \u003Ccode>.relation-inline-block\u003C\u002Fcode> and \u003Ccode>.relation-mark\u003C\u002Fcode> classes for the relation nodes.\u003C\u002Fp>\n\u003Ch2>Rendering in the front-end\u003C\u002Fh2>\n\u003Cp>To render the JSON content generated by Flexible Editor, follow the \u003Ca href=\"https:\u002F\u002Ftiptap.dev\u002Fdocs\u002Feditor\u002Fapi\u002Futilities\u002Fstatic-renderer\">official Tiptap static rendering guide\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3>Recommended rendering approaches\u003C\u002Fh3>\n\u003Cp>For static rendering (recommended for most use cases), consider using \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tiptap\u002Fstatic-renderer\">@tiptap\u002Fstatic-renderer\u003C\u002Fa> which provides a lightweight solution for rendering Tiptap content without the full editor.\u003C\u002Fp>\n\u003Ch3>Rendering with interactive components\u003C\u002Fh3>\n\u003Cp>If you want to render your JSON content with interactive components, especially when using relation nodes, you can create custom node renderers following the \u003Ca href=\"https:\u002F\u002Ftiptap.dev\u002Fdocs\u002Feditor\u002Fapi\u002Futilities\u002Fstatic-renderer#custom-mappings\">Tiptap node rendering documentation\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3>Rendering plain HTML or plain text\u003C\u002Fh3>\n\u003Cp>Tiptap provides official functions to \u003Ccode>generateText()\u003C\u002Fcode> or \u003Ccode>generateHTML()\u003C\u002Fcode> from the JSON output. For server-side rendering, use \u003Ccode>import { generateHTML } from \"@tiptap\u002Fhtml\"\u003C\u002Fcode>, and for client-side rendering, use \u003Ccode>import { generateHTML } from \"@tiptap\u002Fcore\"\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Contribution\u003C\u002Fh2>\n\u003Cp>Contributions are welcome. Be sure to open an issue for bugs or start a discussion for feature requests, before you start writing code!\u003C\u002Fp>\n","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Fteaser.png",[146,148,149,150,151,152,153,154,155,156,157,158,159],"https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-relation-blocks.gif","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-relation-inline-blocks.gif","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-relation-marks.gif","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-single-line-mode.png","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Ffeature-toolbar-options.png","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002Fbasic-usage.gif","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F1-relation-nodes.gif","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F2-relation-nodes.gif","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F3-relation-nodes.gif","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F4-relation-nodes.gif","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F5-relation-nodes.gif","https:\u002F\u002Fraw.githubusercontent.com\u002Fformfcw\u002Fdirectus-extension-flexible-editor\u002Fmain\u002Fdocs\u002F6-relation-nodes.gif"]