ProseMirror JSON

ProseMirror represents documents as a tree of nodes in JSON format. This guide explains the structure of our notebook documents.

Basic Structure

{
    "doc": {
        "type": "doc",
        "content": [ ... ]
    }
}

Node Types

Each node in the document has a specific structure. Here are the common node types we use:

1. Heading Node

{
    "type": "heading",
    "attrs": {
        "level": 1,  // 1 for h1, 2 for h2, etc.
        "form": {} // for user input
    },
    "content": [
        {
            "type": "text",
            "text": "Week-1"
        }
    ]
}

2. Paragraph Node

{
    "type": "paragraph",
    "content": [
        {
            "type": "text",
            "text": "Notebook is ..."
        }
    ]
}

3. List Node

{
    "type": "list",
    "attrs": {
        "kind": "ordered",     // "ordered" or "bullet"
        "order": null,         // Starting number for ordered lists
        "checked": false,      // For checkboxes
        "collapsed": false     // For collapsible lists
    },
    "content": [
        {
            "type": "paragraph",
            "content": [
                {
                    "type": "text",
                    "text": "List item text"
                }
            ]
        }
    ]
}

4. Image Node

{
    "type": "image",
    "attrs": {
        "name": "image-name.png",        // Original filename
        "src": "https://image-url.png",  // Image URL
        "style": "display:block;",       // CSS style
        "height": 390.77,                // Image height in pixels
        "width": 750,                    // Image width in pixels
        "cropX": 0,                      // Crop start X position
        "cropY": 0,                      // Crop start Y position
        "cropWidth": 750,                // Crop width
        "cropHeight": 390.77,            // Crop height
        "scale": 1                       // Image scale factor
    }
}

The image node supports:

• Image display with specific dimensions
• Image cropping capabilities
• Scaling options
• Custom styling

Node Attributes

Common attributes you'll encounter:

Attribute	Description	Example Values
type	The type of node	"doc", "heading", "paragraph", "image", "title", "subtitle"
attrs	Node-specific attributes	level, form, kind
content	Array of child nodes	Array of text or other nodes
text	Actual text content (for text nodes)	"Week-1", "Notebook is ..."

Example Document Structure

Here's a breakdown of a simple document:

{
    "doc": {
        "type": "doc",
        "content": [
            {
                "type": "heading",
                "attrs": { "level": 1 },
                "content": [{ "type": "text", "text": "Title" }]
            },
            {
                "type": "paragraph",
                "content": [{ "type": "text", "text": "Content..." }]
            },
            {
                "type": "list",
                "attrs": { "kind": "bullet" },
                "content": [
                    {
                        "type": "paragraph",
                        "content": [{ "type": "text", "text": "List item" }]
                    }
                ]
            }
        ]
    }
}

Document sample and preview

Notebook JSON:

{
    "doc": {
        "type": "doc",
        "content": [
            {
                "type": "heading",
                "attrs": {
                    "level": 1,
                    "form": {}
                },
                "content": [
                    {
                        "type": "text",
                        "text": "Week-1"
                    }
                ]
            },
            {
                "type": "heading",
                "attrs": {
                    "level": 2,
                    "form": {}
                },
                "content": [
                    {
                        "type": "text",
                        "text": "1.1 Introduction to Notebook"
                    }
                ]
            },
            {
                "type": "paragraph",
                "content": [
                    {
                        "type": "text",
                        "text": "Notebook is ..."
                    }
                ]
            },
            {
                "type": "paragraph",
                "content": [
                    {
                        "type": "text",
                        "text": "The powerful of notebook is ..."
                    }
                ]
            },
            {
                "type": "heading",
                "attrs": {
                    "level": 2,
                    "form": {}
                },
                "content": [
                    {
                        "type": "text",
                        "text": "1.2 Notebook requirements"
                    }
                ]
            },
            {
                "type": "list",
                "attrs": {
                    "kind": "ordered",
                    "order": null,
                    "checked": false,
                    "collapsed": false
                },
                "content": [
                    {
                        "type": "paragraph",
                        "content": [
                            {
                                "type": "text",
                                "text": "Notebook needs ..."
                            }
                        ]
                    }
                ]
            },
            {
                "type": "list",
                "attrs": {
                    "kind": "ordered",
                    "order": 2,
                    "checked": false,
                    "collapsed": false
                },
                "content": [
                    {
                        "type": "paragraph",
                        "content": [
                            {
                                "type": "text",
                                "text": "Notebook must ..."
                            }
                        ]
                    }
                ]
            },
            {
                "type": "paragraph"
            },
            {
                "type": "heading",
                "attrs": {
                    "level": 1,
                    "form": {}
                },
                "content": [
                    {
                        "type": "text",
                        "text": "Week-2"
                    }
                ]
            },
            {
                "type": "heading",
                "attrs": {
                    "level": 2,
                    "form": {}
                },
                "content": [
                    {
                        "type": "text",
                        "text": "2.1 Notebook feature-1"
                    }
                ]
            },
            {
                "type": "list",
                "attrs": {
                    "kind": "bullet",
                    "order": null,
                    "checked": false,
                    "collapsed": false
                },
                "content": [
                    {
                        "type": "paragraph",
                        "content": [
                            {
                                "type": "text",
                                "text": "This feature is the highest priority"
                            }
                        ]
                    }
                ]
            },
            {
                "type": "list",
                "attrs": {
                    "kind": "bullet",
                    "order": null,
                    "checked": false,
                    "collapsed": false
                },
                "content": [
                    {
                        "type": "paragraph",
                        "content": [
                            {
                                "type": "text",
                                "text": "This feature requires"
                            }
                        ]
                    }
                ]
            },
            {
                "type": "paragraph"
            },
            {
                "type": "image",
                "attrs": {
                    "name": "Card-Sort-Mode.png",
                    "src": "https://image-url.png",
                    "style": "display:block;",
                    "height": 390.77253218884124,
                    "width": 750,
                    "cropX": 0,
                    "cropY": 0,
                    "cropWidth": 750,
                    "cropHeight": 390.77253218884124,
                    "scale": 1
                }
            }
        ]
    }
}