Ace Editor Lib v.6.0.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VS Code - IDE Online</title>
    <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.iconscout.com/icon/free/png-256/vscode-4069952-3365471.png">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ext-beautify.js"></script>
    <style>
        body {font-family: 'Roboto', sans-serif;
            background-color:#323050;
            color: white;
        }

        #editor {
          position: relative;
          width: 93vw;
          height: 85vh;
        }

        #exportar {
        border: solid gray 2px;
        border-radius: 5px;
        position:absolute;
        width: 800px;
        height: 255px;
        top: 70px;
        left: 450px;
        background-color: #f1f0f2;
        padding: 20px;

        }

        #fecha_exportar {
        display:none}

        .nome_baixar_arq{
        display: block;
        color: #0d0d0d;
        font-size: 20px;
        cursor: pointer;
        }
        .nome_baixar_arquivo{
         display: block;
        color: #0d0d0d;
        font-size: 20px;


        }
        .head{
        display:flex;
        justify-content: space-between;
        align-items: center;
        }

        .campo_nome_u{
        display:flex;
        justify-content: start;
        align-items: center;
        }
        #nome_arquivo{
        width: 40vw;
        height: 25px;
        padding: 5px;
        margin: 10px;
        }

        #salvar_final{
        background-color:#007fff;
        font-size: 18px;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 2px;
        }

        #contener{
        display:flex;
        padding: 5px;
        }

        #menu_vscode{
        display:flex;
        flex-direction: column;
        max-height: 94vh;
        justify-content: space-between;
        align-items: center;

        }
        .logo > i {
        font-size: 30px;
        padding:5px;
        color: gray;
        trasition: 0.5;
        margin:10px 15px;
        }

        .logo > img{
        width: 25px;
        margin: 20px 15px;
        }

        .logo > i:hover{
        color: #007fff;
        cursor: pointer;
        }
        .barra_menus > ul{
        display:flex;
        list-style-type: none;
        padding: 0 0px;
        cursor: pointer;
        }

        .barra_menus > ul > li{
        padding: 0 20px;
        font-size: 25px:
        font-weight:300;
        }

        li{font-size: 20px;
        font-weight:300;
        }

        .barra_menus > ul > li:hover{
        color: #007fff;
        font-size: 20px;
        font-weight:300;
        }

        .footer{
        padding: 0 20px;
        }

        .footer > button, #homebtn2{
        background-color:#007fff;
        font-size: 18px;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 0px;
        margin: 5px;
        }

        .footer > button > a, #homebtn2{
        text-decoration: none;
        color: #fff;
        cursor: pointer;
        }
        .abrir{
        display: inline;
        }

    </style>
</head>
<body>
        <div id="contener">
            <!--MENU LATERAL VS CODE-->
            <div id="menu_vscode">
                <div>
                        <div class="logo">
                        <img src="https://cdn.iconscout.com/icon/free/png-256/vscode-4069952-3365471.png">
                        </div>
                        <div class="logo">
                        <i class="fas fa-copy"></i>
                    </div>
                        <div class="logo">
                        <i class="fas fa-magnifying-glass"></i>
                        </div>
                    <div class="logo">
                    <i class="fas fa-regular fa-code-fork"></i>
                    </div>
                    <div class="logo">
                    <i class="fas fa-regular fa-bug"></i>
                    </div>

                    <div class="logo">
                    <i class="fas fa-brands fa-github"></i>
                    </div>
                </div>
                <div>
                    <div class="logo">
                    <i class="fas fa-regular fa-user-large"></i>
                    </div>
                    <div class="logo" >
                    <i class="fas fa-regular fa-gear"></i>
                    </div>
                </div>
        </div>
        <!--header e textarea do codigo-->
        <div id="editor_full">
    <div class="barra_menus">
        <ul>
            <li id="salvar_exporte">Salvar</li>
            <li>Exportar</li>
            <li>Editar</li>
            <li>Terminal</li>
            <li>Ajuda</li>
        </ul>
        </div>
    <div id="editor">

    </div>
    <div class="footer">
      <button><a href="../">Voltar</a></button>
      <input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
      <button id="formatar">Formatar</button>
      <button id="button">salvar</button>
      <label class="abrir">Abrir:</label>
      <input type="file" id="openbtn" onchange="openCode(this.files)" value="Open">
        <label class="abrir">Tema:</label>
       <select id="menu_tema" onChange="mudaTemas()">
       <option value="dracula">Dracula</option>
        <option value="tomorrow_night">Tema Dark</option>
        <option value="github">Tema claro</option>
        <option value="vibrant_ink">Dark City</option>
        <option value="terminal">Terminal</option>
  </select>
   <label class="abrir">Linguagem:</label>
   <select id="menu_linguage" onChange="mudaLinguagem()">
       <option value="javascript">Javascrip</option>
        <option value="css">CSS</option>
        <option value="html">html</option>
        <option value="c">C</option>
        </select>
        <!--Selecionar tamanho da fonte-->
      <label class="abrir">Fonte:</label>
   <select id="menu_fonte" onChange="mudaFonte()">
       <option value="18px">18px</option>
        <option value="20px">20px</option>
        <option value="22px">22px</option>
        <option value="24px">24px</option>
        </select>
              <label class="abrir">Fundo:</label>
   <select id="menu_fundo" onChange="mudaFundo()">
        <option value="#282A36">LightViolet</option>
       <option value="#333333">Cinza</option>
        <option value="#323050">NightViolet</option>
        <option value="#1E1E1E">Black</option>
        </select>
    </div>
    </div>

    </div>

    <!-- conteudo para exportar e salva o codigo -->
      <div id="fecha_exportar">
      <div class="head">
      <div class="nome_baixar_arquivo"><i class="fas fa-floppy-disk"></i> Salvar</div>
      <div id="xxx" class="nome_baixar_arq"><i class="fas fa-square-xmark"></i>
       </div>
       </div>
       <div class="campo_nome_u">
      <p class="nome_baixar_arquivo">Nome do Arquivo:
       </p>
      <input id="nome_arquivo" value="index.html" type="text" alt="Informe o nome do arquivo e o tipo, Ex.: index.html" required></input>
      </div>
      <p class="nome_baixar_arquivo">Informe o nome do arquivo e o tipo.<b>Ex.: index.html, index.css ou index.js</b></p>
      <button id="salvar_final">Salvar</button>
      </div>

</body>
<script>
//INFORMAÇÕES:
//Link Ace Editor para emplementar no projeto:
//https://ace.c9.io/
//Temas para editor:
//https://gist.github.com/RyanNutt/cb8d60997d97905f0b2aea6c3b5c8ee0
//https://pt.stackoverflow.com/questions/418443/textarea-semelhante-a-um-editor-de-texto-ex-

//Editor de texto Ace Edito for VS Code

var editor = ace.edit("editor");
//MUDAR TAMANHO DA FONTE
    document.getElementById('editor').style.fontSize = '18px';

    function mudaFonte() {
    var menu = document.getElementById("menu_fonte");
    var fonte = menu.options[menu.selectedIndex].value;
    var linkFonte = fonte;
    return document.getElementById('editor').style.fontSize = linkFonte;
    }
    mudaFonte();

    editor.setTheme("ace/theme/dracula");

 //MUDAR TEMAS
    editor.setTheme("ace/theme/dracula");

    function mudaTemas() {
    var menu = document.getElementById("menu_tema");
    var cor = menu.options[menu.selectedIndex].value;
    var link = `ace/theme/${cor}`;
    return editor.setTheme(link);
    console.log(link)
    }
    mudaTemas();
    //MUDAR FUNDO
    function mudaFundo() {
    var menu = document.getElementById("menu_fundo");
    var fundoCor = menu.options[menu.selectedIndex].value;
    console.log(fundoCor);
    document.body.style.backgroundColor = fundoCor;

    }
     mudaFundo();
 //MUDAR LIGUAGEM
    editor.session.setMode("ace/mode/javascript");
    function mudaLinguagem() {
    var menu = document.getElementById("menu_linguage");
    var lingua = menu.options[menu.selectedIndex].value;
    var linkLing = `ace/mode/${lingua}`;
    return editor.session.setMode(linkLing);
    console.log(linkLing)
    }
    mudaLinguagem();

    editor.session.setTabSize(4);

    editor.setOptions({
      autoScrollEditorIntoView: true,
      copyWithEmptySelection: true,
    });

    setTimeout(() => {
      var beautify = ace.require("ace/ext/beautify"); // get reference to extension
      beautify.beautify(editor.session);
    }, 500);

    //beautify.beautify(editor.session);
    document.getElementById("formatar").onclick = function() {
      var beautify = ace.require("ace/ext/beautify"); // get reference to extension
      beautify.beautify(editor.session);

    }

      //Salvar arquivo
      function download(content, fileName, contentType) {
          var a = document.createElement("a");
          var file = new Blob([content], {type: contentType + encodeURIComponent(content)});
          a.href = URL.createObjectURL(file);
          a.download = fileName;
          a.click();
        }

        //Nome do arquivo na entrada
        //var nomeFile = document.getElementById("nome_arquivo").value;
        //Função para biaxar o arquivo
        var textoSave = editor.getValue();

        var button = document.getElementById("salvar_final");

    button.addEventListener("click", function() {
    var textoSave = editor.getValue();
    if(document.getElementById("nome_arquivo").value !== ""){
      if( confirm("Deseja salvar o Codigo?")){
      var content =  textoSave;
      var fileName = document.getElementById("nome_arquivo").value;
      var contentType = "text/html";
      download(content, fileName, contentType);
    }else{alert("Cancelado!")}
    }else{alert("Informe o nome do arquivo e o tipo, Ex.: index.html")}});

    // Ativar pagina oculta para salvar arquivo

    var buttonFecha = document.getElementById("xxx");


    buttonFecha.addEventListener("click", function(){
    console.log("cliclou");
    if(confirm("deseja sair sem salvar?")){var telaExporte = document.getElementById("exportar");
    telaExporte.setAttribute("id", "fecha_exportar");

    }})

    var buttonSalvaEx = document.getElementById("salvar_exporte");

    buttonSalvaEx.addEventListener("click", function(){
    console.log("cliclou");
    var telaSalvaExporte = document.getElementById("fecha_exportar");
    telaSalvaExporte.setAttribute("id", "exportar");

    })
 //Open file in Ace editor
 //https://stackoverflow.com/questions/59004560/how-can-i-open-a-file-into-ace-text-editor

  function openCode(files) {
                var file = files[0]
                if (!file) return;
                var modelist = ace.require("ace/ext/modelist")
                var modeName = modelist.getModeForPath(file.name).mode
                editor.session.setMode(modeName)
                reader = new FileReader();
                reader.onload = function() {
                    editor.session.setValue(reader.result)
                }
                reader.readAsText(file)
            }

    </script>

    <script src="https://kit.fontawesome.com/32a7e6bf5d.js" crossorigin="anonymous"></script>

    <script src="http://ajaxorg.github.io/ace-builds/src/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
        <script>
</html>
on line 221 error in word 'javascript'
I don't understand, here it opens normally, when changing the editor's language.