Renderer

Examples

Typescript ❤️

Renderer component

Install

yarn add @atlaskit/renderer

npm

Source

Bundle

Latest

113.2.2

Patch Changes

Updated dependencies

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

This component provides a renderer for ADF documents.

Usage

Use the component in your React app as follows:

import { ReactRenderer } from '@atlaskit/renderer';
ReactDOM.render(<ReactRenderer document={DOCUMENT} />, container);

Example

With Providers

Input

{
  "type": "doc",
  "version": 1,
  "content": [
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Hello, ",
          "marks": [
            {
              "type": "link",
              "attrs": {
                "href": "https://www.atlassian.com"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": "World!",
          "marks": [
            {
              "type": "strong"
            },
            {
              "type": "link",
              "attrs": {
                "href": "https://www.atlassian.com"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": " Look I can do "
        },
        {
          "type": "text",
          "text": "italic ",
          "marks": [
            {
              "type": "em"
            }
          ]
        },
        {
          "type": "text",
          "text": ", strong ",
          "marks": [
            {
              "type": "em"
            },
            {
              "type": "strong"
            }
          ]
        },
        {
          "type": "text",
          "text": "and underlined text!",
          "marks": [
            {
              "type": "em"
            },
            {
              "type": "strong"
            },
            {
              "type": "underline"
            }
          ]
        },
        {
          "type": "text",
          "text": " and action mark",
          "marks": [
            {
              "type": "action",
              "attrs": {
                "key": "test-action-key",
                "title": "test action mark",
                "target": {
                  "receiver": "some-receiver",
                  "key": "some-key"
                },
                "parameters": {
                  "test": 20
                }
              }
            }
          ]
        },
        {
          "type": "text",
          "text": " and invalid action mark",
          "marks": [
            {
              "type": "action",
              "attrs": {
                "key": "test-action-key",
                "title": "test action mark",
                "target": {
                  "receiver": "some-receiver"
                },
                "parameters": {
                  "test": 30
                }
              }
            }
          ]
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "My favourite emoji are "
        },
        {
          "type": "emoji",
          "attrs": {
            "shortName": ":grin:",
            "id": "1f601",
            "text": "😁"
          }
        },
        {
          "type": "text",
          "text": " "
        },
        {
          "type": "emoji",
          "attrs": {
            "shortName": ":evilburns:",
            "id": "atlassian-evilburns",
            "text": ":evilburns:"
          }
        },
        {
          "type": "text",
          "text": " "
        },
        {
          "type": "emoji",
          "attrs": {
            "shortName": ":not-an-emoji:"
          }
        },
        {
          "type": "text",
          "text": ". What are yours?",
          "marks": [
            {
              "type": "unkown mark"
            }
          ]
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "date",
          "attrs": {
            "timestamp": "1554163200000"
          }
        },
        {
          "type": "text",
          "text": " "
        }
      ]
    },
    {
      "type": "paragraph",
      "content": []
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Hi, my name is... My name is... My name is... My name is "
        },
        {
          "type": "mention",
          "attrs": {
            "id": "1",
            "text": "@Oscar Wallhult"
          }
        },
        {
          "type": "text",
          "text": " :D",
          "marks": [
            {
              "type": "unknown mark"
            }
          ]
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "This is a "
        },
        {
          "type": "mention",
          "attrs": {
            "text": "@mention",
            "id": "2"
          }
        },
        {
          "type": "text",
          "text": ". And this is a broken "
        },
        {
          "type": "mention",
          "attrs": {
            "textxtx": "@mention",
            "id": "mention"
          }
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Mention with restricted access"
        },
        {
          "type": "mention",
          "attrs": {
            "id": "1",
            "accessLevel": "APPLICATION"
          },
          "text": "@oscar"
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Mentions with generic ids"
        },
        {
          "type": "mention",
          "attrs": {
            "id": "here",
            "accessLevel": "CONTAINER"
          },
          "text": "@here"
        },
        {
          "type": "mention",
          "attrs": {
            "id": "all",
            "accessLevel": "CONTAINER"
          },
          "text": "@all"
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "This is  a   text    with\tmultiple\t\tspaces \t\t\tand\t\t\t\ttabs."
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "italic",
          "marks": [
            {
              "type": "em"
            }
          ]
        },
        {
          "type": "text",
          "text": "link",
          "marks": [
            {
              "type": "link",
              "attrs": {
                "href": "https://www.atlassian.com"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": "strike-through",
          "marks": [
            {
              "type": "strike"
            }
          ]
        },
        {
          "type": "text",
          "text": "strong",
          "marks": [
            {
              "type": "strong"
            }
          ]
        },
        {
          "type": "text",
          "text": "sub",
          "marks": [
            {
              "type": "subsup",
              "attrs": {
                "type": "sub"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": "sup",
          "marks": [
            {
              "type": "subsup",
              "attrs": {
                "type": "sup"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": "underline",
          "marks": [
            {
              "type": "underline"
            }
          ]
        },
        {
          "type": "text",
          "text": " red text",
          "marks": [
            {
              "type": "textColor",
              "attrs": {
                "color": "#ff0000"
              }
            }
          ]
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "some inline code: "
        },
        {
          "type": "text",
          "text": "const foo = bar();",
          "marks": [
            {
              "type": "code"
            }
          ]
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "unknown type",
          "attrs": {
            "text": "fallback text in node.attrs.text"
          }
        },
        {
          "type": "hardBreak"
        },
        {
          "type": "unknown type 2",
          "text": "fallback text in node.text"
        },
        {
          "type": "hardBreak"
        },
        {
          "type": "very unknown"
        }
      ]
    },
    {
      "type": "some block unknown type",
      "content": [
        {
          "type": "text",
          "text": "This is text content inside unknown block"
        }
      ]
    },
    {
      "type": "some block unknown type with content and text",
      "content": [
        {
          "type": "text",
          "text": "This is also a piece of text inside unknown block"
        }
      ],
      "text": "ERROR: This text should be ignored!"
    },
    {
      "type": "unknown_table",
      "content": [
        {
          "type": "unknown_row2",
          "content": [
            {
              "type": "unknown_cell",
              "content": [
                {
                  "type": "text",
                  "text": "Madness?"
                }
              ]
            }
          ]
        },
        {
          "type": "unknown_row2",
          "content": [
            {
              "type": "unknown_cell3",
              "content": [
                {
                  "type": "text",
                  "text": "This is"
                }
              ]
            },
            {
              "type": "unknown_cell4",
              "content": [
                {
                  "type": "sparta-node",
                  "attrs": {
                    "textUrl": "https://en.wikipedia.org/wiki/Sparta"
                  },
                  "text": "Sparta!"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "This is a line with "
        },
        {
          "type": "hardBreak"
        },
        {
          "type": "text",
          "text": "a hardbreak in it."
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Showing a status: "
        },
        {
          "type": "status",
          "attrs": {
            "text": "In progress",
            "color": "blue"
          }
        }
      ]
    },
    {
      "type": "paragraph",
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 1
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Paragraph with 1 level of indentation"
        }
      ]
    },
    {
      "type": "paragraph",
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 2
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Paragraph with 2 levels of indentation"
        }
      ]
    },
    {
      "type": "paragraph",
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 3
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Paragraph with 3 levels of indentation"
        }
      ]
    },
    {
      "type": "paragraph",
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 4
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Paragraph with 4 levels of indentation"
        }
      ]
    },
    {
      "type": "paragraph",
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 5
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Paragraph with 5 levels of indentation"
        }
      ]
    },
    {
      "type": "paragraph",
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 6
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Paragraph with 6 levels of indentation"
        }
      ]
    },
    {
      "type": "paragraph",
      "marks": [
        {
          "type": "alignment",
          "attrs": {
            "align": "center"
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Paragraph with center alignment"
        }
      ]
    },
    {
      "type": "paragraph",
      "marks": [
        {
          "type": "alignment",
          "attrs": {
            "align": "end"
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Paragraph with end alignment"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 1
      },
      "content": [
        {
          "type": "text",
          "text": "Heading 1"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 2
      },
      "content": [
        {
          "type": "text",
          "text": "Heading 2",
          "marks": [
            {
              "type": "link",
              "attrs": {
                "href": "www.atlassian.com"
              }
            }
          ]
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 3
      },
      "content": [
        {
          "type": "text",
          "text": "Heading 3"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 4
      },
      "content": [
        {
          "type": "text",
          "text": "Heading 4"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 5
      },
      "content": [
        {
          "type": "text",
          "text": "Heading 5"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 6
      },
      "content": [
        {
          "type": "text",
          "text": "Heading 6"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 1
      },
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 1
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Heading 1 with 1 level of indentation"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 2
      },
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 2
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Heading 2 with 2 levels of indentation",
          "marks": [
            {
              "type": "link",
              "attrs": {
                "href": "www.atlassian.com"
              }
            }
          ]
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 3
      },
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 3
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Heading 3 with 3 levels of indentation"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 4
      },
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 4
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Heading 4 with 4 levels of indentation"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 5
      },
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 5
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Heading 5 with 5 levels of indentation"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 6
      },
      "marks": [
        {
          "type": "indentation",
          "attrs": {
            "level": 6
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Heading 6 with 6 levels of indentation"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 2
      },
      "marks": [
        {
          "type": "alignment",
          "attrs": {
            "align": "center"
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Heading 2 with center alignment"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 3
      },
      "marks": [
        {
          "type": "alignment",
          "attrs": {
            "align": "end"
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "Heading 3 with end alignment"
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "This is a paragraph with a text node"
        },
        {
          "type": "text",
          "text": "\n"
        },
        {
          "type": "text",
          "text": "that contains a new line"
        }
      ]
    },
    {
      "type": "mediaSingle",
      "attrs": {
        "layout": "full-width"
      },
      "content": [
        {
          "type": "media",
          "attrs": {
            "id": "2aa22582-ca0e-4bd4-b1bc-9369d10a0719",
            "type": "file",
            "collection": "MediaServicesSample",
            "width": 5845,
            "height": 1243
          }
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Click me! ",
          "marks": [
            {
              "type": "link",
              "attrs": {
                "href": "javascript:alert(\"hello world\")"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": "www.atlassian.com",
          "marks": [
            {
              "type": "link",
              "attrs": {
                "href": "www.atlassian.com"
              }
            }
          ]
        }
      ]
    },
    {
      "type": "codeBlock",
      "content": [
        {
          "type": "text",
          "text": "// Create a map.\nfinal IntIntOpenHashMap map = new IntIntOpenHashMap();\nmap.put(1, 2);\nmap.put(2, 5);\nmap.put(3, 10);"
        },
        {
          "type": "text",
          "text": "\nint count = map.forEach(new IntIntProcedure()\n{\n   int count;\n   public void apply(int key, int value)\n   {\n       if (value >= 5) count++;\n   }\n}).count;\nSystem.out.println(\"There are \" + count + \" values >= 5\");"
        }
      ],
      "attrs": {
        "language": "javascript"
      }
    },
    {
      "type": "mediaSingle",
      "attrs": {
        "layout": "full-width"
      },
      "content": [
        {
          "type": "media",
          "attrs": {
            "type": "file",
            "id": "5556346b-b081-482b-bc4a-4faca8ecd2de",
            "collection": "MediaServicesSample",
            "height": 200,
            "width": 300
          }
        }
      ]
    },
    {
      "type": "mediaSingle",
      "attrs": {},
      "content": [
        {
          "type": "media",
          "attrs": {
            "type": "file",
            "id": "3291050e-6b66-4296-94c6-12088ef6fbad",
            "collection": "MediaServicesSample",
            "height": 200,
            "width": 400
          }
        }
      ]
    },
    {
      "type": "mediaSingle",
      "attrs": {},
      "content": [
        {
          "type": "media",
          "attrs": {
            "type": "file",
            "id": "cdff20d6-2c0a-4d0d-b2a9-22cc728a0368",
            "collection": "MediaServicesSample",
            "height": 200,
            "width": 400
          }
        }
      ]
    },
    {
      "type": "mediaGroup",
      "content": [
        {
          "type": "media",
          "attrs": {
            "type": "file",
            "id": "5556346b-b081-482b-bc4a-4faca8ecd2de",
            "collection": "MediaServicesSample"
          }
        },
        {
          "type": "media",
          "attrs": {
            "type": "file",
            "id": "2afaf845-4385-431f-9a15-3e21520cf896",
            "collection": "MediaServicesSample"
          }
        }
      ]
    },
    {
      "type": "mediaGroup",
      "content": [
        {
          "type": "media",
          "attrs": {
            "type": "file",
            "id": "5556346b-b081-482b-bc4a-4faca8ecd2de",
            "collection": "MediaServicesSample"
          }
        },
        {
          "type": "media",
          "attrs": {
            "type": "file",
            "id": "2dfcc12d-04d7-46e7-9fdf-3715ff00ba40",
            "collection": "MediaServicesSample"
          }
        }
      ]
    },
    {
      "type": "mediaGroup",
      "content": [
        {
          "type": "media",
          "attrs": {
            "type": "link",
            "id": "410f38f7-ce31-4527-a69d-740e958bf1d1",
            "collection": "MediaServicesSample"
          }
        }
      ]
    },
    {
      "type": "mediaGroup",
      "content": [
        {
          "type": "media",
          "attrs": {
            "type": "link",
            "id": "15a9fb95-2d72-4d28-b338-00fd6bea121b",
            "collection": "MediaServicesSample"
          }
        },
        {
          "type": "media",
          "attrs": {
            "type": "link",
            "id": "410f38f7-ce31-4527-a69d-740e958bf1d1",
            "collection": "MediaServicesSample"
          }
        }
      ]
    },
    {
      "type": "bulletList",
      "content": [
        {
          "type": "listItem",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "First list item"
                }
              ]
            }
          ]
        },
        {
          "type": "listItem",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "Second list item"
                }
              ]
            }
          ]
        },
        {
          "type": "listItem",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "Third list item"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "codeBlock",
      "marks": [
        {
          "type": "breakout",
          "attrs": {
            "mode": "wide"
          }
        }
      ],
      "content": [
        {
          "type": "text",
          "text": "// Create a map.\nfinal IntIntOpenHashMap map = new IntIntOpenHashMap();\nmap.put(1, 2);\nmap.put(2, 5);\nmap.put(3, 10);"
        }
      ],
      "attrs": {
        "language": "javascript"
      }
    },
    {
      "type": "orderedList",
      "content": [
        {
          "type": "listItem",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "First list item"
                }
              ]
            }
          ]
        },
        {
          "type": "listItem",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "Second list item"
                }
              ]
            }
          ]
        },
        {
          "type": "listItem",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "Third list item"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "blockquote",
      "content": [
        {
          "type": "paragraph",
          "content": [
            {
              "type": "text",
              "text": "All that is gold does not glitter, not all those who wander are lost; The old that is strong does not wither, deep roots are not reached by the frost."
            }
          ]
        },
        {
          "type": "paragraph",
          "content": [
            {
              "type": "text",
              "text": "From the ashes a fire shall be woken, a light from the shadows shall spring; Renewed shall be blade that was broken, the crownless again shall be king."
            }
          ]
        },
        {
          "type": "paragraph",
          "content": [
            {
              "type": "text",
              "text": "J.R.R. Tolkien, The Fellowship of the Ring.",
              "marks": [
                {
                  "type": "em"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "panel",
      "attrs": {
        "panelType": "info"
      },
      "content": [
        {
          "type": "paragraph",
          "content": [
            {
              "type": "text",
              "text": "This is an info panel with "
            },
            {
              "type": "text",
              "text": "bold text",
              "marks": [
                {
                  "type": "strong"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "panel",
      "attrs": {
        "panelType": "note"
      },
      "content": [
        {
          "type": "paragraph",
          "content": [
            {
              "type": "text",
              "text": "This is a note panel with "
            },
            {
              "type": "text",
              "text": "bold text",
              "marks": [
                {
                  "type": "strong"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "panel",
      "attrs": {
        "panelType": "tip"
      },
      "content": [
        {
          "type": "paragraph",
          "content": [
            {
              "type": "text",
              "text": "This is a tip panel with "
            },
            {
              "type": "text",
              "text": "bold text",
              "marks": [
                {
                  "type": "strong"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "panel",
      "attrs": {
        "panelType": "success"
      },
      "content": [
        {
          "type": "paragraph",
          "content": [
            {
              "type": "text",
              "text": "This is a success panel with "
            },
            {
              "type": "text",
              "text": "bold text",
              "marks": [
                {
                  "type": "strong"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "panel",
      "attrs": {
        "panelType": "warning"
      },
      "content": [
        {
          "type": "paragraph",
          "content": [
            {
              "type": "text",
              "text": "This is a warning panel with "
            },
            {
              "type": "text",
              "text": "bold text",
              "marks": [
                {
                  "type": "strong"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "panel",
      "attrs": {
        "panelType": "error"
      },
      "content": [
        {
          "type": "paragraph",
          "content": [
            {
              "type": "text",
              "text": "This is a error panel with "
            },
            {
              "type": "text",
              "text": "bold text",
              "marks": [
                {
                  "type": "strong"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "rule"
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Do not use this image node; it may be removed at any time without notice."
        },
        {
          "type": "image",
          "attrs": {
            "src": "https://www.google.com.au/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
            "alt": "Google Logo",
            "title": "Google!"
          }
        },
        {
          "type": "text",
          "text": "Do not use this image node; it may be removed at any time without notice."
        }
      ]
    },
    {
      "type": "decisionList",
      "attrs": {
        "localId": "empty-list-should-not-render"
      },
      "content": [
        {
          "type": "decisionItem",
          "attrs": {
            "localId": "to-be-ignored-as-no-content",
            "state": "DECIDED"
          }
        }
      ]
    },
    {
      "type": "taskList",
      "attrs": {
        "localId": "638aece7-97ac-4acd-99ee-4c76bebcd6ba"
      },
      "content": [
        {
          "type": "taskItem",
          "attrs": {
            "localId": "b5fc19b3-0742-4279-bccc-60ddd404a8e1",
            "state": "TODO"
          },
          "content": [
            {
              "type": "text",
              "text": "just text"
            }
          ]
        },
        {
          "type": "taskItem",
          "attrs": {
            "localId": "c800bf19-e4dc-4e5b-9189-cc6673a4fe4c",
            "state": "TODO"
          },
          "content": [
            {
              "type": "mention",
              "attrs": {
                "id": "0",
                "text": "@Carolyn",
                "accessLevel": ""
              }
            },
            {
              "type": "text",
              "text": "  with mention"
            }
          ]
        },
        {
          "type": "taskItem",
          "attrs": {
            "localId": "9f523424-081b-4bb8-8031-e4450acce7de",
            "state": "TODO"
          },
          "content": [
            {
              "type": "date",
              "attrs": {
                "timestamp": "1554422400000"
              }
            },
            {
              "type": "text",
              "text": " with date"
            }
          ]
        },
        {
          "type": "taskItem",
          "attrs": {
            "localId": "f70222ac-4e36-41d4-a6df-ebe687a5e97f",
            "state": "TODO"
          },
          "content": [
            {
              "type": "text",
              "text": "with emoji "
            },
            {
              "type": "emoji",
              "attrs": {
                "shortName": ":slight_smile:",
                "id": "1f642",
                "text": "🙂"
              }
            },
            {
              "type": "text",
              "text": " "
            }
          ]
        },
        {
          "type": "taskItem",
          "attrs": {
            "localId": "29295813-3065-4cae-b125-0b51ac1ba79b",
            "state": "TODO"
          },
          "content": [
            {
              "type": "text",
              "text": "multiline!"
            },
            {
              "type": "hardBreak"
            },
            {
              "type": "text",
              "text": "dfsfdad"
            }
          ]
        }
      ]
    },
    {
      "type": "taskList",
      "attrs": {
        "localId": "e10bc6bd-ad20-426a-9d65-351907af90bf"
      },
      "content": [
        {
          "type": "taskItem",
          "attrs": {
            "localId": "fd7f6239-17c3-4bf9-89a0-51291ab8474f",
            "state": "DONE"
          },
          "content": [
            {
              "type": "text",
              "text": "ticked off plain text"
            }
          ]
        },
        {
          "type": "taskItem",
          "attrs": {
            "localId": "22f227d1-6ff0-43da-8f76-9a57c5853a36",
            "state": "DONE"
          },
          "content": [
            {
              "type": "mention",
              "attrs": {
                "id": "0",
                "text": "@Carolyn",
                "accessLevel": ""
              }
            },
            {
              "type": "text",
              "text": " ticked off mention"
            }
          ]
        },
        {
          "type": "taskItem",
          "attrs": {
            "localId": "815c9ab3-2393-4041-8c82-4dcc1a31343a",
            "state": "DONE"
          },
          "content": [
            {
              "type": "date",
              "attrs": {
                "timestamp": "1554422400000"
              }
            },
            {
              "type": "text",
              "text": " ticked off date"
            }
          ]
        },
        {
          "type": "taskItem",
          "attrs": {
            "localId": "82f316ca-d334-4ea4-a377-400e687de75a",
            "state": "DONE"
          },
          "content": [
            {
              "type": "text",
              "text": "with emoji "
            },
            {
              "type": "emoji",
              "attrs": {
                "shortName": ":slight_smile:",
                "id": "1f642",
                "text": "🙂"
              }
            },
            {
              "type": "text",
              "text": " "
            }
          ]
        },
        {
          "type": "taskItem",
          "attrs": {
            "localId": "ade6f17f-566b-422a-953d-50c00c63e2f1",
            "state": "DONE"
          },
          "content": [
            {
              "type": "text",
              "text": "Multiline!"
            },
            {
              "type": "hardBreak"
            },
            {
              "type": "text",
              "text": "asd"
            }
          ]
        }
      ]
    },
    {
      "type": "decisionList",
      "attrs": {
        "localId": "68a15a03-12cd-4959-8502-67ba070a9cad"
      },
      "content": [
        {
          "type": "decisionItem",
          "attrs": {
            "localId": "6dc81c6b-dbd6-460f-b54a-c9255815bcd5",
            "state": "DECIDED"
          },
          "content": [
            {
              "type": "text",
              "text": "plain text"
            }
          ]
        },
        {
          "type": "decisionItem",
          "attrs": {
            "localId": "52439c36-138d-4aa9-bac3-711dfed600dc",
            "state": "DECIDED"
          },
          "content": [
            {
              "type": "text",
              "text": "all the stuff "
            },
            {
              "type": "emoji",
              "attrs": {
                "shortName": ":slight_smile:",
                "id": "1f642",
                "text": "🙂"
              }
            },
            {
              "type": "text",
              "text": " "
            },
            {
              "type": "status",
              "attrs": {
                "text": "todo",
                "color": "neutral",
                "localId": "d1b227fa-26ab-419a-84a0-2a580551f75e"
              }
            },
            {
              "type": "text",
              "text": " "
            },
            {
              "type": "date",
              "attrs": {
                "timestamp": "1554422400000"
              }
            },
            {
              "type": "text",
              "text": " "
            },
            {
              "type": "mention",
              "attrs": {
                "id": "0",
                "text": "@Carolyn",
                "accessLevel": ""
              }
            },
            {
              "type": "text",
              "text": " "
            }
          ]
        },
        {
          "type": "decisionItem",
          "attrs": {
            "localId": "863bd5e3-dc32-426e-a5bb-d53dd8069117",
            "state": "DECIDED"
          },
          "content": [
            {
              "type": "text",
              "text": "multiline!"
            },
            {
              "type": "hardBreak"
            },
            {
              "type": "text",
              "text": "asdf"
            }
          ]
        }
      ]
    },
    {
      "type": "table",
      "content": [
        {
          "type": "tableRow",
          "content": [
            {
              "type": "tableHeader",
              "attrs": {
                "colspan": 2,
                "colwidth": [
                  233,
                  100
                ]
              },
              "content": [
                {
                  "type": "paragraph",
                  "content": [
                    {
                      "type": "text",
                      "text": "header"
                    }
                  ]
                }
              ]
            },
            {
              "type": "tableHeader",
              "attrs": {
                "background": "#deebff"
              },
              "content": [
                {
                  "type": "paragraph",
                  "content": [
                    {
                      "type": "text",
                      "text": "header"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "tableRow",
          "content": [
            {
              "type": "tableCell",
              "attrs": {
                "colspan": 1,
                "rowspan": 1,
                "background": null
              },
              "content": [
                {
                  "type": "paragraph",
                  "content": [
                    {
                      "type": "text",
                      "text": "cell"
                    }
                  ]
                }
              ]
            },
            {
              "type": "tableCell",
              "content": [
                {
                  "type": "paragraph",
                  "content": [
                    {
                      "type": "text",
                      "text": "cell"
                    }
                  ]
                }
              ]
            },
            {
              "type": "tableCell",
              "content": [
                {
                  "type": "paragraph",
                  "content": [
                    {
                      "type": "text",
                      "text": "cell"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "tableRow",
          "content": [
            {
              "type": "tableCell",
              "content": [
                {
                  "type": "paragraph",
                  "content": [
                    {
                      "type": "text",
                      "text": "cell"
                    }
                  ]
                }
              ]
            },
            {
              "type": "tableCell",
              "content": [
                {
                  "type": "paragraph",
                  "content": [
                    {
                      "type": "text",
                      "text": "cell"
                    }
                  ]
                }
              ]
            },
            {
              "type": "tableCell",
              "content": [
                {
                  "type": "paragraph",
                  "content": [
                    {
                      "type": "text",
                      "text": "cell"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 1
      },
      "content": [
        {
          "type": "text",
          "text": "Media single without width defined"
        }
      ]
    },
    {
      "type": "mediaSingle",
      "content": [
        {
          "type": "media",
          "attrs": {
            "type": "file",
            "id": "5556346b-b081-482b-bc4a-4faca8ecd2de",
            "collection": "MediaServicesSample"
          }
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 1
      },
      "content": [
        {
          "type": "text",
          "text": "Media single with link"
        }
      ]
    },
    {
      "type": "mediaSingle",
      "content": [
        {
          "type": "media",
          "attrs": {
            "type": "file",
            "id": "5556346b-b081-482b-bc4a-4faca8ecd2de",
            "collection": "MediaServicesSample"
          }
        }
      ]
    },
    {
      "type": "bodiedExtension",
      "attrs": {
        "extensionType": "com.atlassian.fabric",
        "extensionKey": "clock"
      },
      "content": [
        {
          "type": "paragraph",
          "content": [
            {
              "type": "text",
              "text": "This is the default content of the extension"
            }
          ]
        }
      ]
    },
    {
      "type": "layoutSection",
      "content": [
        {
          "type": "layoutColumn",
          "attrs": {
            "width": 50
          },
          "content": [
            {
              "type": "table",
              "attrs": {
                "isNumberColumnEnabled": true,
                "layout": "default"
              },
              "content": [
                {
                  "type": "tableRow",
                  "content": [
                    {
                      "type": "tableHeader",
                      "attrs": {
                        "colwidth": [
                          225
                        ],
                        "defaultMarks": [
                          {
                            "type": "strong"
                          }
                        ]
                      },
                      "content": [
                        {
                          "type": "paragraph",
                          "content": [
                            {
                              "type": "text",
                              "text": "Extreme node nesting example",
                              "marks": [
                                {
                                  "type": "strong"
                                }
                              ]
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "type": "tableHeader",
                      "attrs": {
                        "colwidth": [
                          57
                        ],
                        "defaultMarks": [
                          {
                            "type": "strong"
                          }
                        ]
                      },
                      "content": [
                        {
                          "type": "paragraph",
                          "content": []
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "tableRow",
                  "content": [
                    {
                      "type": "tableCell",
                      "attrs": {
                        "colwidth": [
                          225
                        ]
                      },
                      "content": [
                        {
                          "type": "taskList",
                          "attrs": {
                            "localId": "68350926-57a5-42f6-9683-9305def1183f"
                          },
                          "content": [
                            {
                              "type": "taskItem",
                              "attrs": {
                                "localId": "02b53fa4-8c20-478e-bb6b-fe0ea8920ba0",
                                "state": "TODO"
                              },
                              "content": [
                                {
                                  "type": "mention",
                                  "attrs": {
                                    "id": "0",
                                    "text": "@Carolyn",
                                    "accessLevel": ""
                                  }
                                },
                                {
                                  "type": "text",
                                  "text": " "
                                },
                                {
                                  "type": "date",
                                  "attrs": {
                                    "timestamp": "1554249600000"
                                  }
                                },
                                {
                                  "type": "text",
                                  "text": " "
                                },
                                {
                                  "type": "emoji",
                                  "attrs": {
                                    "shortName": ":slight_smile:",
                                    "id": "1f642",
                                    "text": "🙂"
                                  }
                                },
                                {
                                  "type": "text",
                                  "text": " "
                                },
                                {
                                  "type": "text",
                                  "text": "bold ",
                                  "marks": [
                                    {
                                      "type": "em"
                                    },
                                    {
                                      "type": "strong"
                                    },
                                    {
                                      "type": "underline"
                                    }
                                  ]
                                },
                                {
                                  "type": "text",
                                  "text": "FAB-1520 UI: Poor man's search",
                                  "marks": [
                                    {
                                      "type": "link",
                                      "attrs": {
                                        "href": "https://product-fabric.atlassian.net/browse/FAB-1520"
                                      }
                                    },
                                    {
                                      "type": "em"
                                    },
                                    {
                                      "type": "strong"
                                    },
                                    {
                                      "type": "underline"
                                    }
                                  ]
                                }
                              ]
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "type": "tableCell",
                      "attrs": {
                        "colwidth": [
                          57
                        ]
                      },
                      "content": [
                        {
                          "type": "paragraph",
                          "content": []
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "tableRow",
                  "content": [
                    {
                      "type": "tableCell",
                      "attrs": {
                        "colwidth": [
                          225
                        ]
                      },
                      "content": [
                        {
                          "type": "panel",
                          "attrs": {
                            "panelType": "info"
                          },
                          "content": [
                            {
                              "type": "orderedList",
                              "content": [
                                {
                                  "type": "listItem",
                                  "content": [
                                    {
                                      "type": "paragraph",
                                      "content": [
                                        {
                                          "type": "text",
                                          "text": "a"
                                        }
                                      ]
                                    }
                                  ]
                                },
                                {
                                  "type": "listItem",
                                  "content": [
                                    {
                                      "type": "paragraph",
                                      "content": [
                                        {
                                          "type": "text",
                                          "text": "b"
                                        }
                                      ]
                                    }
                                  ]
                                },
                                {
                                  "type": "listItem",
                                  "content": [
                                    {
                                      "type": "paragraph",
                                      "content": [
                                        {
                                          "type": "text",
                                          "text": "c"
                                        }
                                      ]
                                    },
                                    {
                                      "type": "orderedList",
                                      "content": [
                                        {
                                          "type": "listItem",
                                          "content": [
                                            {
                                              "type": "paragraph",
                                              "content": [
                                                {
                                                  "type": "text",
                                                  "text": "d"
                                                }
                                              ]
                                            }
                                          ]
                                        },
                                        {
                                          "type": "listItem",
                                          "content": [
                                            {
                                              "type": "paragraph",
                                              "content": [
                                                {
                                                  "type": "text",
                                                  "text": "e"
                                                }
                                              ]
                                            }
                                          ]
                                        },
                                        {
                                          "type": "listItem",
                                          "content": [
                                            {
                                              "type": "paragraph",
                                              "content": [
                                                {
                                                  "type": "text",
                                                  "text": "g"
                                                }
                                              ]
                                            }
                                          ]
                                        },
                                        {
                                          "type": "listItem",
                                          "content": [
                                            {
                                              "type": "paragraph",
                                              "content": [
                                                {
                                                  "type": "mention",
                                                  "attrs": {
                                                    "id": "0",
                                                    "text": "@Carolyn",
                                                    "accessLevel": ""
                                                  }
                                                },
                                                {
                                                  "type": "text",
                                                  "text": " "
                                                },
                                                {
                                                  "type": "date",
                                                  "attrs": {
                                                    "timestamp": "1554422400000"
                                                  }
                                                },
                                                {
                                                  "type": "text",
                                                  "text": " "
                                                }
                                              ]
                                            }
                                          ]
                                        }
                                      ]
                                    }
                                  ]
                                }
                              ]
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "type": "tableCell",
                      "attrs": {
                        "colwidth": [
                          57
                        ]
                      },
                      "content": [
                        {
                          "type": "paragraph",
                          "content": []
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "layoutColumn",
          "attrs": {
            "width": 50
          },
          "content": [
            {
              "type": "paragraph",
              "content": []
            }
          ]
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "text": "Highlights: ",
          "type": "text"
        },
        {
          "text": "Light Gray",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#dcdfe4"
              }
            }
          ]
        },
        {
          "text": ", ",
          "type": "text"
        },
        {
          "text": "Light Teal",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#c6edfb"
              }
            }
          ]
        },
        {
          "text": ", ",
          "type": "text"
        },
        {
          "text": "Light Lime",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#d3f1a7"
              }
            }
          ]
        },
        {
          "text": ", ",
          "type": "text"
        },
        {
          "text": "Light Orange",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#fedec8"
              }
            }
          ]
        },
        {
          "text": ", ",
          "type": "text"
        },
        {
          "text": "Light Magenta",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#fdd0ec"
              }
            }
          ]
        },
        {
          "text": ", ",
          "type": "text"
        },
        {
          "text": "Light Purple",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#dfd8fd"
              }
            }
          ]
        },
        {
          "text": ", ",
          "type": "text"
        },
        {
          "text": "Custom: black",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#000000"
              }
            }
          ]
        },
        {
          "text": ", ",
          "type": "text"
        },
        {
          "text": "Custom: white",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#ffffff"
              }
            }
          ]
        },
        {
          "text": ", ",
          "type": "text"
        },
        {
          "text": "Custom: red",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#c9372c"
              }
            }
          ]
        },
        {
          "text": ", ",
          "type": "text"
        },
        {
          "text": "Custom: yellow",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#f8e6a0"
              }
            }
          ]
        },
        {
          "text": ", ",
          "type": "text"
        },
        {
          "text": "With inline comment",
          "type": "text",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#d3f1a7"
              }
            },
            {
              "type": "annotation",
              "attrs": {
                "id": "13272b41-b9a9-427a-bd58-c00766999638",
                "annotationType": "inlineComment"
              }
            }
          ]
        },
        {
          "text": ", No highlight",
          "type": "text"
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Highlight ",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#c6edfb"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": "over",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#c6edfb"
              }
            },
            {
              "type": "annotation",
              "attrs": {
                "id": "annotation-id",
                "annotationType": "inlineComment"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": " comment",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#c6edfb"
              }
            }
          ]
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Comment ",
          "marks": [
            {
              "type": "annotation",
              "attrs": {
                "id": "annotation-id",
                "annotationType": "inlineComment"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": "over",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#d3f1a7"
              }
            },
            {
              "type": "annotation",
              "attrs": {
                "id": "annotation-id",
                "annotationType": "inlineComment"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": " highlight",
          "marks": [
            {
              "type": "annotation",
              "attrs": {
                "id": "annotation-id",
                "annotationType": "inlineComment"
              }
            }
          ]
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Partially ",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#fedec8"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": "overlapping",
          "marks": [
            {
              "type": "backgroundColor",
              "attrs": {
                "color": "#fedec8"
              }
            },
            {
              "type": "annotation",
              "attrs": {
                "id": "annotation-id",
                "annotationType": "inlineComment"
              }
            }
          ]
        },
        {
          "type": "text",
          "text": " comment",
          "marks": [
            {
              "type": "annotation",
              "attrs": {
                "id": "annotation-id",
                "annotationType": "inlineComment"
              }
            }
          ]
        }
      ]
    }
  ]
}

Hello, World! Look I can do italic , strong and underlined text! and action mark and invalid action mark

My favourite emoji are . What are yours?

Hi, my name is... My name is... My name is... My name is :D

This is a . And this is a broken

Mention with restricted access

Mentions with generic ids

This is a text with multiple spaces and tabs.

italiclinkstrike-throughstrong_sub^supunderline red text

some inline code: const foo = bar();

fallback text in node.attrs.text
fallback text in node.text
[very unknown]

This is text content inside unknown block

This is also a piece of text inside unknown block

Madness?
This is
Sparta!

This is a line with
a hardbreak in it.

Showing a status:

Paragraph with 1 level of indentation

Paragraph with 2 levels of indentation

Paragraph with 3 levels of indentation

Paragraph with 4 levels of indentation

Paragraph with 5 levels of indentation

Paragraph with 6 levels of indentation

Paragraph with center alignment

Paragraph with end alignment

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1 with 1 level of indentation

Heading 2 with 2 levels of indentation

Heading 3 with 3 levels of indentation

Heading 4 with 4 levels of indentation

Heading 5 with 5 levels of indentation

Heading 6 with 6 levels of indentation

Heading 2 with center alignment

Heading 3 with end alignment

This is a paragraph with a text node that contains a new line

Click me! www.atlassian.com

First list item
Second list item
Third list item

First list item
Second list item
Third list item

All that is gold does not glitter, not all those who wander are lost; The old that is strong does not wither, deep roots are not reached by the frost.
From the ashes a fire shall be woken, a light from the shadows shall spring; Renewed shall be blade that was broken, the crownless again shall be king.
J.R.R. Tolkien, The Fellowship of the Ring.

Do not use this image node; it may be removed at any time without notice.

header		header
cell	cell	cell
cell	cell	cell

Media single without width defined

Media single with link

This is the default content of the extension

	Extreme node nesting example
1
2

Highlights: Light Gray, Light Teal, Light Lime, Light Orange, Light Magenta, Light Purple, Custom: black, Custom: white, Custom: red, Custom: yellow, With inline comment, No highlight

Highlight over comment

Comment over highlight

Partially overlapping comment

</Renderer>

Best practices to prevent performance issues

Avoid unnecessary props changes

As any React component, if props change then it will likely result in a re-render.

Unnecessary props changes will trigger component reconciliation and potential re-renders. This has caused render performance degradation for Editor and Renderer components in the past.

Some common examples of props causing re-renders:

  // ❌ function returns new object each time
  getEventHandlers = () => ({
      ...defaultHandlers,
      newHander: () => { ... }
  });

  // ❌ creates new function each time
  onRenderComplete = () => {
    // ...
  }

  return (
  <ReactRenderer
    // ❌ passes new object each time
    media={{
      allowLinking: true,
    }}
    // ❌ called function returns new object each time
    eventHandlers={this.getEventHandlers()}
    // ❌ passes new function each time
    onComplete={onRenderComplete}
    // ❌ creates a new function each time
    onError={() => { ... }}
    //...
  />);

Most of these can be generally avoided by following these best practices:

extracting static objects to module level constants
avoid passing brand new objects and anonymous functions as props upon every render
memoising props via helpers like useMemo()
use useCallback() for callbacks where applicable

Other best practices for React

Consider using windowing techniques if possible when rendering many Renderers (eg. viewing comments).

For Renderer it is important to avoid redundant reconciliation as it can involve rendering many nested React components, depending on the document structure.

Check out the React docs for more examples of optimizations.

Avoid duplicated dependencies

Ensure you have only have one version of Renderer sub-dependencies (adf-schema, editor-common, prosemirror-model, etc) in your output bundles.

This has caused bugs and crashes on production in the past.

The issue can be avoided by running de-duplication on the lock file or using resolutions for yarn/overrides for npm on the package.json.

Use correct peer dependencies

Make sure to use correct peer dependencies versions!

For example, using newer versions of React or react-dom can cause unexpected issues with Renderer.

Using transformers with the renderer

You will need to use a transformer to convert your own storage format into the ADF before you pass it to the renderer. We have provided helper utility to simplify this process:

import { BitbucketTransformer } from '@atlaskit/editor-bitbucket-transformer';
import { ReactRenderer, ADFEncoder } from '@atlaskit/renderer';

const adfEncoder = new ADFEncoder(schema => new BitbucketTransformer(schema));
const document = adfEncoder.encode(DOCUMENT);

ReactDOM.render(<ReactRenderer document={document} />, container);

Polyfills

Don't forget to add polyfills for fetch, ES6 & ES7 to your product build if you want to target older browsers. We recommend the use of babel-preset-env & babel-polyfill

Truncated renderer

The renderer can be truncated with a fade to white so that excess content is hidden. Control of expanding is left to the parent so the text and links can be customised - see the example.

The props truncated, maxHeight and fadeOutHeight are all optional. maxHeight will default to 95px and fadeOutHeight will default to 30px unless defined.

import { ReactRenderer } from '@atlaskit/renderer';
ReactDOM.render(<ReactRenderer document={DOCUMENT} truncated={true} maxHeight={70} fadeOutHeight={30} />, container);

Truncated

Input

Hello, World! Look I can do italic , strong and underlined text! and action mark and invalid action mark

My favourite emoji are . What are yours?

Hi, my name is... My name is... My name is... My name is :D

This is a . And this is a broken

Mention with restricted access

Mentions with generic ids

This is a text with multiple spaces and tabs.

italiclinkstrike-throughstrong_sub^supunderline red text

some inline code: const foo = bar();

fallback text in node.attrs.text
fallback text in node.text
[very unknown]

This is text content inside unknown block

This is also a piece of text inside unknown block

Madness?
This is
Sparta!

This is a line with
a hardbreak in it.

Showing a status:

Paragraph with 1 level of indentation

Paragraph with 2 levels of indentation

Paragraph with 3 levels of indentation

Paragraph with 4 levels of indentation

Paragraph with 5 levels of indentation

Paragraph with 6 levels of indentation

Paragraph with center alignment

Paragraph with end alignment

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1 with 1 level of indentation

Heading 2 with 2 levels of indentation

Heading 3 with 3 levels of indentation

Heading 4 with 4 levels of indentation

Heading 5 with 5 levels of indentation

Heading 6 with 6 levels of indentation

Heading 2 with center alignment

Heading 3 with end alignment

This is a paragraph with a text node that contains a new line

Click me! www.atlassian.com

First list item
Second list item
Third list item

First list item
Second list item
Third list item

All that is gold does not glitter, not all those who wander are lost; The old that is strong does not wither, deep roots are not reached by the frost.
From the ashes a fire shall be woken, a light from the shadows shall spring; Renewed shall be blade that was broken, the crownless again shall be king.
J.R.R. Tolkien, The Fellowship of the Ring.

Do not use this image node; it may be removed at any time without notice.

header		header
cell	cell	cell
cell	cell	cell

Media single without width defined

Media single with link

This is the default content of the extension

	Extreme node nesting example
1
2

Highlights: Light Gray, Light Teal, Light Lime, Light Orange, Light Magenta, Light Purple, Custom: black, Custom: white, Custom: red, Custom: yellow, With inline comment, No highlight

Highlight over comment

Comment over highlight

Partially overlapping comment

</Renderer>

Theming and dark mode support

To render certain ADF content correctly in different color themes, such as light and dark mode, this package utilise the @atlaskit/editor-palette package, which converts colors stored in ADF to Atlassian Design Tokens. Learn more about this utility in the Editor Palette docs.

Full light and dark mode support for the Editor is a work in progress. Currently, the following experiences do not yet support theming:

Custom table backgrounds

Props

`document` `import` `required`

@atlaskit/adf-schema.DocNode

`dataProviders` `import`

@atlaskit/editor-common/provider-factory.ProviderFactory

`eventHandlers` `import`

@atlaskit/editor-common/ui.EventHandlers

`extensionHandlers` `import`

@atlaskit/editor-common/extensions.ExtensionHandlers

`enableSsrInlineScripts` `boolean`

Enables inline scripts to add support for breakout nodes, before main JavaScript bundle is available.

`noOpSSRInlineScript` `boolean`

Enables inline scripts from above on client for first render for hydration to prevent mismatch.

`onComplete` `function`

stat => undefined

`onError` `function`

Ignored via go/ees005

error => undefined

`portal` `HTMLElement`

HTMLElement

`rendererContext` `export`

RendererContext

`schema` `import`

@atlaskit/editor-prosemirror/model.Schema

`appearance` `union`

One of "comment", 
"full-page", 
"full-width", 
undefined

`adfStage` `import`

@atlaskit/editor-common/validator.ADFStage

`disableHeadingIDs` `boolean`

`disableActions` `boolean`

`allowHeadingAnchorLinks` `union`

One of boolean, 
activeHeadingId string 
allowNestedHeaderLinks boolean

`allowPlaceholderText` `boolean`

`maxHeight` `number`

`fadeOutHeight` `number`

`truncated` `boolean`

`createAnalyticsEvent` `import`

@atlaskit/analytics-next.CreateUIAnalyticsEvent

`allowColumnSorting` `boolean`

`shouldOpenMediaViewer` `boolean`

`allowAltTextOnImages` `boolean`

`stickyHeaders` `union`

One of boolean, 
show boolean 
&
offsetTop number 
&
defaultScrollRootId_DO_NOT_USE string 
shouldAddDefaultScrollRootOffsetTop_DO_NOT_USE boolean

`media` `object`

allowLinking boolean 
enableDownloadButton boolean 
featureFlags  @atlaskit/media-common.MediaFeatureFlags
ssr  mode  required @atlaskit/media-common.SSR
config  required @atlaskit/media-core.MediaClientConfig
allowCaptions boolean

`emojiResourceConfig` `import`

@atlaskit/emoji/resource.EmojiResourceConfig

`smartLinks` `object`

ssr boolean 
hideHoverPreview boolean 
actionOptions  undefined.CardProps['actionOptions']
frameStyle  undefined.CardProps['frameStyle']

`extensionViewportSizes` `arrayType`

ArrayextensionId string 
viewportSize string

`allowAnnotations` `boolean`

`annotationProvider` `union`

One of @atlaskit/editor-common/types.AnnotationProviders, 
null

`innerRef` `React.RefObject<HTMLDivElement>`

React.RefObjectHTMLDivElement

`useSpecBasedValidator` `boolean` `deprecated`

{@link https://hello.atlassian.net/browse/ENGHEALTH-3649 Internal documentation for deprecation (no external access)} This prop will be removed and set as default enabled, as the same flag on the Editor is also now default enabled.

`allowCopyToClipboard` `boolean`

`allowWrapCodeBlock` `boolean`

`allowCustomPanels` `boolean`

`analyticsEventSeverityTracking` `object`

enabled boolean required 
severityNormalThreshold number required 
severityDegradedThreshold number required

`allowUgcScrubber` `boolean`

`allowSelectAllTrap` `boolean`

`unsupportedContentLevelsTracking` `import`

@atlaskit/editor-common/utils.UnsupportedContentLevelsTracking

`nodeComponents` `object`

[key: string]  required React.ComponentTypeReact.PropsWithChildrenany

`isInsideOfInlineExtension` `boolean`

`isTopLevelRenderer` `boolean`

`includeNodesCountInStats` `boolean`

`addTelepointer` `boolean`

When enabled a trailing telepointer will be added to the rendered document
following content updates.
Content is updated by passing a new value prop to the renderer.
The trailing pointer is updated by dom injection to the last text node which
is updated as a result of a content update.

`featureFlags` `union`

@default undefined
@description
Short lived feature flags for experiments and gradual rollouts
Flags are expected to follow these rules or they are filtered out
1. cased in kebab-case (match [a-z-])
1. have boolean values or object {} values
@example
(<Renderer featureFlags={{ 'my-feature': true }} />);
getFeatureFlags()?.myFeature === true;
@example
(<Renderer featureFlags={{ 'my-feature': 'thing' }} />);
getFeatureFlags()?.myFeature === undefined;
@example
(<Renderer featureFlags={{ 'product.my-feature': false }} />);
getFeatureFlags()?.myFeature === undefined;
getFeatureFlags()?.productMyFeature === undefined;

One of [featureFlag: string] boolean required 
, 
Partialrenderer-render-tracking string required

`UNSTABLE_textHighlighter` `object`

pattern  required RegExp
component  required React.ComponentTypechildren  required React.ReactNode
match string required 
marks  required Setstring
groups union required One of Arraystring, 
undefined
startPos number required

Renderer

113.2.2

Patch Changes

Note: This component is designed for internal Atlassian development.

Usage

Example

With Providers

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1 with 1 level of indentation

Heading 2 with 2 levels of indentation

Heading 3 with 3 levels of indentation

Heading 4 with 4 levels of indentation

Heading 5 with 5 levels of indentation

Heading 6 with 6 levels of indentation

Heading 2 with center alignment

Heading 3 with end alignment

Media single without width defined

Media single with link

Best practices to prevent performance issues

Avoid unnecessary props changes

Other best practices for React

Avoid duplicated dependencies

Use correct peer dependencies

Using transformers with the renderer

Polyfills

Truncated renderer

Truncated

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1 with 1 level of indentation

Heading 2 with 2 levels of indentation

Heading 3 with 3 levels of indentation

Heading 4 with 4 levels of indentation

Heading 5 with 5 levels of indentation

Heading 6 with 6 levels of indentation

Heading 2 with center alignment

Heading 3 with end alignment

Media single without width defined

Media single with link

Theming and dark mode support

Props

document import required

dataProviders import

eventHandlers import

extensionHandlers import

enableSsrInlineScripts boolean

noOpSSRInlineScript boolean

onComplete function

onError function

portal HTMLElement

rendererContext export

schema import

appearance union

adfStage import

disableHeadingIDs boolean

disableActions boolean

allowHeadingAnchorLinks union

allowPlaceholderText boolean

maxHeight number

fadeOutHeight number

truncated boolean

createAnalyticsEvent import

allowColumnSorting boolean

shouldOpenMediaViewer boolean

allowAltTextOnImages boolean

stickyHeaders union

media object

emojiResourceConfig import

smartLinks object

extensionViewportSizes arrayType

allowAnnotations boolean

`document` `import` `required`

`dataProviders` `import`

`eventHandlers` `import`

`extensionHandlers` `import`

`enableSsrInlineScripts` `boolean`

`noOpSSRInlineScript` `boolean`

`onComplete` `function`

`onError` `function`

`portal` `HTMLElement`

`rendererContext` `export`

`schema` `import`

`appearance` `union`

`adfStage` `import`

`disableHeadingIDs` `boolean`

`disableActions` `boolean`

`allowHeadingAnchorLinks` `union`

`allowPlaceholderText` `boolean`

`maxHeight` `number`

`fadeOutHeight` `number`

`truncated` `boolean`

`createAnalyticsEvent` `import`

`allowColumnSorting` `boolean`

`shouldOpenMediaViewer` `boolean`

`allowAltTextOnImages` `boolean`

`stickyHeaders` `union`

`media` `object`

`emojiResourceConfig` `import`

`smartLinks` `object`

`extensionViewportSizes` `arrayType`

`allowAnnotations` `boolean`

`annotationProvider` `union`

`innerRef` `React.RefObject<HTMLDivElement>`

`useSpecBasedValidator` `boolean` `deprecated`

`allowCopyToClipboard` `boolean`

`allowWrapCodeBlock` `boolean`

`allowCustomPanels` `boolean`

`analyticsEventSeverityTracking` `object`

`allowUgcScrubber` `boolean`

`allowSelectAllTrap` `boolean`

`unsupportedContentLevelsTracking` `import`

`nodeComponents` `object`

`isInsideOfInlineExtension` `boolean`

`isTopLevelRenderer` `boolean`

`includeNodesCountInStats` `boolean`

`addTelepointer` `boolean`

`featureFlags` `union`

`UNSTABLE_textHighlighter` `object`

`UNSTABLE_allowTableAlignment` `boolean`

`UNSTABLE_allowTableResizing` `boolean`