EditorJsonToHtmlConverter 1.0.0.9

Editor Json Processor

This package contains two items which are:

• EjsHtmlRenderer

  • This will convert EditorJS JSON output into a plain HTML/text string.

• EjsRenderFragment

  • This is to be used within the razor pages to create a segment of UI content from the provided EditorJS JSON.

Getting started

Add service(s) to DI container if required:

WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
builder.Services.AddScopedEditorJsonProcessorServices();

This will add both of the following into the service collection:

• Microsoft.AspNetCore.Components.Web.HtmlRenderer
• EditorJsonToHtmlConverter.EjsHtmlRenderer

Caveat

Some block items generated by EditorJS will have the field id missing from the block. For example:

{
    "blocks": [
        {
            "type" : "delimiter",
            "data" : {}
        }
    ]
}

The EditorJsonToHtmlConverter will fail to deserialise the JSON sample above, as the id field is a required field.

Usage:

After injecting the EjsHtmlRenderer instance, you can implement the code as outline in the example below:

string editor_json = "{ ... editor json emitted from editor js ... }"
string html = await EjsHtmlRenderer.ParseAsync(editor_json);
HtmlRootComponent html_root_component = await EjsHtmlRenderer.ParseAsHtmlRootComponentAsync(editor_json);

For razor pages, the usage of EjsRenderFragment to generate the HTML looks like the below code sample:

<EjsRenderFragment Value="@editor_json" />

Editor JSON Sample:

{
    "time": 1707325917682,
    "blocks": [
    {"id": "uM3Adn6C9n", "data": {"text": "!!! <i>He</i>y<b>lo, W</b>orld! <a href=\"https://google.com\">Link</a> !!!", "wrap": "title"}, "type": "text"},
    {
        "id": "KgrM3aNM-n",
        "type": "header",
        "data": {
        "text": "<mark class=\"cdx-marker\"><a href=\"http://google.com\">Heylo</a></mark>",
        "level": 1
        }
    },
    {
        "id": "NaTtEbbeRT",
        "type": "paragraph",
        "data": {
        "text": "Heylo World"
        }
    },
    {
        "id": "KgrM3aNM-n",
        "type": "header",
        "data": {
        "text": "Second header",
        "level": 3
        }
    },
    {
        "id": "QdqCFpKBAm",
        "type": "list",
        "data": {
        "style": "ordered",
        "items": [
            {
            "content": "A: One",
            "items": [
                {
                "content": "B: Two",
                "items": []
                }
            ]
            },
            {
            "content": "A: Three",
            "items": [
                {
                "content": "B: Four",
                "items": [
                    {
                    "content": "C: Five",
                    "items": []
                    }
                ]
                },
                {
                "content": "B: Six",
                "items": []
                },
                {
                "content": "B: Seven",
                "items": []
                }
            ]
            }
        ]
        }
    },
    {
        "id": "m-onbmz6BZ",
        "type": "quote",
        "data": {
        "text": "Ohhh interesting...",
        "caption": "by Me!",
        "alignment": "left"
        }
    },
    {
        "id": "ZatOSzA754",
        "type": "paragraph",
        "data": {
        "text": "dsf<i>sfa</i><b>sfasdfs</b>dffasd"
        }
    },
    {
        "id": "SWrBNzvp6A",
        "type": "list",
        "data": {
        "style": "unordered",
        "items": [
            {
            "content": "dwdw",
            "items": []
            },
            {
            "content": "wedwed",
            "items": []
            },
            {
            "content": "wedw",
            "items": []
            }
        ]
        }
    },
        
    {
        "id": "yD5ZHUxF1N",
        "type": "checklist",
        "data": {
        "items": [
            {
            "text": "Check List Item One",
            "checked": false
            },
            {
            "text": "Check List Item Two",
            "checked": true
            },
            {
            "text": "Check List Item Three",
            "checked": false
            }
        ]
        }
    },
    {
        "id": "J5I_aD9c8j",
        "type": "delimiter",
        "data": {}
    },
    {
        "id": "J-7FqxXppm",
        "type": "table",
        "data": {
        "withHeadings": true,
        "content": [
            [
            "Header 1",
            "Header 2",
            "Header 3"
            ],
            [
            "qwerty",
            "as<b>dfg</b>h",
            "zxc<mark class=\"cdx-marker\">vbn</mark>"
            ],
            [
            "AAA",
            "<a href=\"https://google.com/\">BBB</a>",
            "<code class=\"inline-code\">CCC</code>"
            ]
        ]
        }
    },
    {
        "id": "zOGIbPv7kl",
        "type": "table",
        "data": {
        "withHeadings": false,
        "content": [
            [
            "A1",
            "B1"
            ],
            [
            "A2",
            "B2"
            ]
        ]
        }
    },
    {
        "id": "zOGADPv7kl",
        "type": "image",
        "data": {
        "url": "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
        "caption": "Roadster // tesla.com",
        "withBorder": true,
        "withBackground": false,
        "stretched": true
        }
    },
    {
        "id": "zOGFDv7kl",
        "type" : "delimiter",
        "data" : {}
    },
    {
        "id": "zOUIDPv7kl",
        "type": "warning",
        "data": {
        "title": "Note:",
        "message": "Avoid using this method just for lulz. It can be very dangerous opposite your daily fun stuff."
        }
    },
    {
        "id": "zOJKDPv7kl",
        "type" : "delimiter",
        "data" : {}
    },
    {
        "id": "zUKNDPv7kl",
        "type" : "embed",
        "data" : {
        "service" : "coub",
        "source" : "https://coub.com/view/1czcdf",
        "embed" : "https://coub.com/embed/1czcdf",
        "width" : 580,
        "height" : 320,
        "caption" : "My Life"
        }
    }
    ],
    "version": "2.28.2"
}

Styling Map Sample:

[
    {
        "type": "header",
        "level": 1,
        "style": "specific-style",
        "id": "KgrM3aNM-n"
    },
    {
        "type": "header",
        "level": 3,
        "style": "general-style"
    },
    {
        "type": "paragraph",
        "style": "specific-style",
        "id": "NaTtEbbeRT"
    },
    {
        "type": "paragraph",
        "style": "general-style"
    },
    {
        "type": "list",
        "style": "list-group list-group-flush",
        "item-style": "list-group-item"
    },
    {
        "type": "checklist",
        "style": "list-group",
        "item-style": "list-group-item"
    },
    {
        "type": "quote",
        "style": "blockquote",
        "footer-style": "blockquote-footer"
    },
    {
        "type": "table",
        "style": "table table-hover"
    },
    {
        "type": "table",
        "style": "table table-striped",
        "id": "zOGIbPv7kl"
    },
    {
        "type": "image",
        "style": "img-fluid"
    }
]