how to validate user's html code #499

mcMoffin · 2023-06-19T15:29:19Z

mcMoffin
Jun 19, 2023

I'm trying to render errors created from the user's incorrect HTML code. According to the doc, this feature is available by default, from the "onValidate" prop. It validates Css and JavaScript just fine but for some reason it isn't catching html errors- it won't even log them. open tags, <div, will highlight and prompt suggestions but "onValidate" won't return a marker for it, neither will unclosed closed tags <li> <ul> this is an item </ul> .

My component code:
import React, { useState, useEffect, useRef } from 'react';
import Editor from '@monaco-editor/react';

import ErrorMsg from "../errorMsg/ErrorMsg";
import './sandbox.css';
import Tab from "../tab/Tab";

const files = {
    "index.html": {
        name: "index.html",
        language: 'html',
        value: `<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>This is a Heading</h1>
        <p id="replace">This is a paragraph.</p>

        <button onclick="myFunction()">
            Click
        </button>
        <!--  this causes an error *** -->
        <p>What causes errors in HTML?

        <ul>
        <li>Unclosed elements: If an element is <strong>not closed properly,
            then its effect can spread to areas you didn't intend

        <li>Badly nested elements: Nesting elements properly is also very important
            for code behaving correctly. <strong>strong <em>strong emphasized?</strong>
            what is this?</em>

        <li>Unclosed attributes: Another common source of HTML problems. Let's
            look at an example: <a href="https://www.mozilla.org/>link to Mozilla
            homepage</a>
        </ul>
        <!-- Error ends here *** -->
    </body>
</html>`
    }, 'style.css': {
        name: 'style.css',
        language: 'css',
        value: `* {
    padding: 0;
    margin: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
h1{
    display: block;
    font-size: 2em;
    font-weight: bold;
}
button{
    margin: 10px;
    padding: 10px;
    cursor: pointer;
}`
    }, 'script.js': {
        name: 'script.js',
        language: 'javascript',
        value: `function myFunction(){
    document.querySelector("#replace").innerHTML = "Hello World!";
}`,
    }
}

const Sandbox = () => {
    const [openedEditor, setOpenedEditor] = useState('html');

    const [fileName, setFileName] = useState('index.html');
    const editorRef = useRef(null);
    const file = files[fileName];

    const [html, setHtml] = useState(files['index.html'].value);
    const [css, setCss] = useState(files['style.css'].value);
    const [javascript, setJavascript] = useState(files['script.js'].value);
    const [srcDoc, setSrcDoc] = useState(``);

    const [htmlErrors, setHtmlErrors] = useState([]);
    const [cssErrors, setCssErrors] = useState([]);
    const [jsErrors, setJsErrors] = useState([]);

    const [copyMsg, setCopyMsg] = useState('');

    const options = {...}

    useEffect(() => {
        if(openedEditor == "html"){
            setFileName("index.html");
        } else if( openedEditor == "css"){
            setFileName("style.css");
        } else{
            setFileName('script.js');
        };
    }, [openedEditor]);

    function handleEditorDidMount(editor, monaco) {
        editorRef.current = editor;
    }

    function handleEditorValidation(markers) {        
        // model markers
        const timeOut = setTimeout(() => {

            openedEditor == "html" ? setHtmlErrors([...markers])
                : openedEditor == "css" ? setCssErrors([...markers])
                : setJsErrors([...markers]);
        }, 1000);
    
        return () => clearTimeout(timeOut);
    }

    const runCode = () => {
        setSrcDoc(`
            <html>
            <script>${javascript}</script>
                <body>${html}</body>
                <style>${css}</style>
            </html>
            `
        )
    }


    const copyFunc = ()=>{
        if(openedEditor === 'html'){
            setCopyMsg('Coppied HTML Code.');
            navigator.clipboard.writeText(html);
        } else if(openedEditor === 'css'){
            setCopyMsg('Coppied Css Code.');
            navigator.clipboard.writeText(css)
        } else{
            setCopyMsg('coppied JavaScript Code.');
            navigator.clipboard.writeText(javascript)
        }
    }

    const clearMsg = () => {
        setTimeout(() => {
            setCopyMsg('');
        }, [1500]);
    
        return(
            <div className={'copy-msg'}>{copyMsg}</div>
        )
    }

    const onTabClick = (editorName) => {
        setOpenedEditor(editorName);
    };

    return (
        <div className='sandbox'>
        
            <div className="tab-button-container">                
                <Tab title="html" onClick={()=>onTabClick('html')} currentState={openedEditor} />
                <Tab title="css" onClick={()=>onTabClick('css')} currentState={openedEditor} />
                <Tab title="JavaScript" onClick={() => onTabClick('JavaScript')} currentState={openedEditor} />                
            </div>
            
            <div className='editor-controls'>
                <button
                    className='run-btn'
                    onClick={runCode}
                    alt="Runs the code"
                >
                    Test
                </button>
            </div>

            {copyMsg ? clearMsg()
                : false
            }
        
            <div className="editor-container">
                <div className='editor-wrapper'>
                    
                <button
                    className='copy-btn'
                    onClick={copyFunc}
                >
                    <img width="18px" src={require('../../assets/copy.png')} />
                </button>
                    
                    <Editor
                        className='main-editor'
                        theme='vs-dark'
                        options={options}
                        path={file.name}
                        onMount={handleEditorDidMount}
                        defaultLanguage={file.language}
                        defaultValue={file.value}
                        onValidate={handleEditorValidation}
                        onChange={() => {
                            const editorValue = editorRef.current.getValue();
                            openedEditor == "html" ? setHtml(editorValue)
                                : openedEditor == "css" ? setCss(editorValue)
                                    : setJavascript(editorValue);
                        }}
                        wordWrap= {true}
                    />
                </div>
            
                <div className="renderer">
                    {
                        htmlErrors.length  > 0 || cssErrors.length  > 0 || jsErrors.length  > 0 ?
                            <ErrorMsg errors={[...cssErrors, ...htmlErrors, ...jsErrors]} />
                        : <iframe
                                srcDoc={srcDoc}
                                title="output"
                                sandbox="allow-scripts"
                                frameBorder="1"
                                width="100%"
                                height="100%"
                            />                        
                    }
                </div>
            </div>
        </div>
    )
}

export default Sandbox;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to validate user's html code #499

{{title}}

Replies: 0 comments

Select a reply

how to validate user's html code #499

mcMoffin Jun 19, 2023

Replies: 0 comments

mcMoffin
Jun 19, 2023