slate/examples/iframes/state.json

{
  "nodes": [
    {
      "kind": "block",
      "type": "paragraph",
      "nodes": [
        {
          "kind": "text",
          "ranges": [
            {
              "text": "This is editable "
            },
            {
              "text": "rich",
              "marks": [
                {
                  "type": "bold"
                },
                {
                  "type": "italic"
                }
              ]
            },
            {
              "text": " text that is being styled by Bootstrap's CSS rules!"
            }
          ]
        }
      ]
    },
    {
      "kind": "block",
      "type": "paragraph",
      "nodes": [
        {
          "kind": "text",
          "ranges": [
            {
              "text": "Since it's rich text, you can do things like turn a selection of text "
            },
            {
              "text": "bold",
              "marks": [
                {
                  "type": "bold"
                }
              ]
            },{
              "text": ", or add a semantically rendered block quote in the middle of the page, like this:"
            }
          ]
        }
      ]
    },
    {
      "kind": "block",
      "type": "block-quote",
      "nodes": [
        {
          "kind": "text",
          "text": "A wise quote."
        }
      ]
    },
    {
      "kind": "block",
      "type": "paragraph",
      "nodes": [
        {
          "kind": "text",
          "text": "And since it's inside an iframe which loads Bootstrap's CSS, the content will automatically take on Bootstrap's style rules. For example, code blocks will look like Bootstrap code blocks do:"
        }
      ]
    },
    {
      "kind": "block",
      "type": "block-code",
      "nodes": [
        {
          "kind": "text",
          "text": "console.log('Hello world!');"
        }
      ]
    },
    {
      "kind": "block",
      "type": "paragraph",
      "nodes": [
        {
          "kind": "text",
          "text": "Try it out for yourself!"
        }
      ]
    }
  ]
}