Converting HTML to JSON and JSON to HTML

@jlrdw Oh I'm looking to do this full SPA with React.

I'm trying to create something like Figma but HTML instead. That means you can import HTML, click an element, and in the properties panel change the color or whatever.

Then so save that, convert to JSON so it can be stored, and then to load it re-read it basically. It would have a drag-drop functionality as well at some point.

Just thinking how to go about doing this.

@aurelianspodarec use the API.

@jlrdw But that's for PHP isn't it?

@Snapey Hmmmm. Good question.

I guess could do that for starters and see how it goes.

@Sinnbeck Thanks. I've coded the converter myself now but I suppose this is better https://draftjs.org/docs/api-reference-data-conversion/#convertfromhtml so I might just switch to this - I think that's a better idea than me converting it and having that unoptimized and all right.

@aurelianspodarec yeah better to use the right tool for the job. I use it on several sites

@Sinnbeck Just trying it out and not sure I understand this correctly.

I got this

    const sampleMarkup = `<section>
    <div class="mx-auto max-w-7xl">
    <div class="py-20 px-12">

        <div class="grid grid-cols-12 gap-8">

            <div class="sm:text-center lg:col-span-6 lg:text-left lg:flex lg:items-center">
                <div>
                  
                    <div>
                        <h1 class="mt-4 text-4xl tracking-tight font-extrabold text-gray-900 sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
                            <span class="md:block">Data to enrich your</span>
                            <span class="text-pink-500 md:block">online business</span>
                        </h1>
                    </div>
     
                </div>
                </div>

        </div>

    </div>
    </div>
    </section>`;
  
  const blocksFromHTML = convertFromHTML(sampleMarkup);
  console.log(blocksFromHTML)

And I was expecting to see a JSON file like:

{
"HTML": "<header>
    <div class=\"mx-auto max-w-7xl\">

        <div class=\"flex justify-between py-8\">

            <div class=\"flex items-center\">
                <div class=\"mr-8\">
                    <a href="javascript:void(0)"\"/\" class=\"logo w-inline-block\">",
"name": "Component"
}

But can't seem to access this or understand how the docs are doing this if they are at all.

From what I understood they are just doing this with their editor?

@aurelianspodarec yeah the saved data is for use with the editor. So it uses a format that draftjs can read. I store the structure in my database which I can then later load in the editor

@Sinnbeck Oh. That won't work for me then sadly :(

I need to have this basically:

{
"HTML": "<header>
    <div class=\"mx-auto max-w-7xl\">

        <div class=\"flex justify-between py-8\">

            <div class=\"flex items-center\">
                <div class=\"mr-8\">
                    <a href="javascript:void(0)"\"/\" class=\"logo w-inline-block\">",
"name": "Component"
}

That I can convert to JSX, that I can convert to HTML, and raw HTML to JSON, and all that - I did code a basic converter like two lines of code for that.

I use a different editor ace-editor which is a code editor basically https://www.npmjs.com/package/react-ace

And the code/json gets turned into HTML and executed inside an iFrame.

So I think draft js won't do for me it seems.

@aurelianspodarec so something like this?

const foo = JSON. stringify({HTML: sampleMarkup, name: 'Component'}) 

Well, I've created soemthing like this for a test

 function jsxToHTML (jsx: string) {
        let html = jsx.replaceAll("className=", "class=").replaceAll('"', '\"').replaceAll('href=', 'href="javascript:void(0)"');
        console.log(html)
        return html;
    }

    function jsonToHTML (htmlCode: string) {
        const html = htmlCode.replaceAll('\"', '"');
        return html;
    }

    function buildJSONfromHTML(...htmlFiles: any) {
        let string = "";

        let html = htmlFiles.forEach((item: any) => string += item);
        string = jsonToHTML(jsxToHTML(string))

        return string;
    }   

But then, if you want to store raw HTML you need to escape all quotes, which I did etc... Then convert it back. Same with JSX etc...

I mean what I got works for now and this is just a "draft" code but ummm.

I don't know if this gets more complex the more stuff I do. Or edge cases, security concerns?

I mean, are there some edge cases to this or some security concerns with this? I believe if I let a user edit the HTML and put code inside, there could be some inject or something right, have I accounted for that? no xd

I should probably also create some sandbox/container around each iframe I believe, but if the json gets stored into the database, then could there be some malicious script running in json. Not sure.

Maybe this is more of a security/js issue now different thread but..

Going back to the convo, do you think what I got with some improvements is fine? I'll improve it a bit I'm just getting the concept from my head to code at this moment and get a gist how this works as its my first time doing that as well.