directus-extension-flexible-editor-test/content/vue/example-app/src/content.json

A rich text editor (WYSIWYG) with JSON output that allows the integration of M2A relations to make it extremely flexible.

{
  "description": {
    "type": "doc",
    "content": [
      { "type": "heading", "attrs": { "level": 1 }, "content": [{ "text": "One morning", "type": "text" }] },
      {
        "type": "paragraph",
        "content": [
          { "text": "… when ", "type": "text" },
          { "text": "Gregor Samsa ", "type": "text", "marks": [{ "type": "italic" }] },
          { "text": "woke from ", "type": "text" },
          { "text": "troubled", "type": "text", "marks": [{ "type": "bold" }] },
          {
            "text": " dreams, he found himself transformed in his bed into a horrible vermin.",
            "type": "text"
          }
        ]
      },
      {
        "type": "paragraph",
        "content": [
          {
            "type": "text",
            "text": "He lay on his "
          },
          {
            "type": "text",
            "marks": [
              {
                "type": "relation-mark",
                "attrs": {
                  "id": "cd1c5b30-46fe-427b-8d37-9d049b3f9535",
                  "junction": "post_editor_nodes",
                  "collection": "related_post"
                }
              }
            ],
            "text": "armour-like"
          },
          {
            "type": "text",
            "text": " back, and if he lifted his "
          },
          {
            "type": "relation-inline-block",
            "attrs": {
              "id": "e65a28fe-1916-432b-83e4-1ce7022a2783",
              "junction": "post_editor_nodes",
              "collection": "color"
            }
          },
          {
            "type": "text",
            "text": " a little he could see his brown belly, slightly domed and divided by arches into stiff sections."
          }
        ]
      },
      {
        "type": "relation-block",
        "attrs": {
          "id": "a84ef404-b0e7-4931-b2e7-26dc072805a2",
          "junction": "post_editor_nodes",
          "collection": "definition_list"
        }
      },
      {
        "type": "paragraph",
        "content": [
          {
            "text": "The bedding was hardly able to cover it and seemed ready to slide off any moment.",
            "type": "text"
          }
        ]
      },
      {
        "type": "relation-block",
        "attrs": {
          "id": "5a4eef60-9d7e-4e06-bd29-74d33d147e0c",
          "junction": "post_editor_nodes",
          "collection": "video"
        }
      }
    ]
  },
  "editor_nodes": [
    {
      "id": "e65a28fe-1916-432b-83e4-1ce7022a2783",
      "posts_id": 6,
      "collection": "color",
      "item": {
        "name": "red"
      }
    },
    {
      "id": "cd1c5b30-46fe-427b-8d37-9d049b3f9535",
      "posts_id": 6,
      "collection": "related_post",
      "item": {
        "post": {
          "id": "1",
          "slug": "/posts/my-first-post"
        }
      }
    },
    {
      "id": "5a4eef60-9d7e-4e06-bd29-74d33d147e0c",
      "posts_id": 8,
      "collection": "video",
      "item": { "video_url": "https://video-provider.com/20359720" }
    },
    {
      "id": "a84ef404-b0e7-4931-b2e7-26dc072805a2",
      "posts_id": 10,
      "collection": "definition_list",
      "item": {
        "items": [
          { "term": "Coffee", "definition": "black hot drink" },
          { "term": "Water", "definition": "transparent cold drink" }
        ]
      }
    }
  ]
}