HTML Code Tester
Issues/Suggestions: (3)
Code:
Autorun
Bookmarkable Link:
`;
if(urlsp.get('l')) {
cursor_line_num = Number(urlsp.get('l'));
}
if(urlsp.get('c')) {
cursor_column_num = Number(urlsp.get('c'));
}
if(urlsp.get('txt')) {
txt = urlsp.get('txt');
txt = decodeURI(txt);
}
console.log('TXT:',txt);
if(urlsp.get('b64t')) {
txt = atob(urlsp.get('b64t'));
}
if (urlsp.get('zt') && false) {
compressed = true;
}
if(!compressed) {
cb(txt,cursor_line_num,cursor_column_num);
}
}
function compress(string, encoding) {
const byteArray = new TextEncoder().encode(string);
const cs = new CompressionStream(encoding);
const writer = cs.writable.getWriter();
writer.write(byteArray);
writer.close();
return new Response(cs.readable).arrayBuffer();
}
function decompress(byteArray, encoding) {
const cs = new DecompressionStream(encoding);
const writer = cs.writable.getWriter();
writer.write(byteArray);
writer.close();
return new Response(cs.readable).arrayBuffer().then(function (arrayBuffer) {
return new TextDecoder().decode(arrayBuffer);
});
}
function _arrayBufferToBase64( buffer ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
}
function tableHelperCreateRow(table,datas) {
var row = document.createElement('tr');
datas.forEach((data) => {
var cell = document.createElement('td');
cell.innerText = data;
row.appendChild(cell);
})
table.appendChild(row);
}
function refreshPage() {
// console.log('Refreshing page....');
uncompressed_text = editor.getValue();
// compressed_text = LZString.compress(editor.getValue());
compressed_text = encodeURI(uncompressed_text);
encoded_url = window.location.origin + window.location.pathname + '?txt=' + compressed_text;
var lc = editor.getPosition();
cursor_line_num = lc.lineNumber;
cursor_column_num = lc.column;
encoded_url += '&l=' + cursor_line_num.toString();
encoded_url += '&c=' + cursor_column_num.toString();
// console.log('Encoded url:', encoded_url);
bookmark_link_ele[0].setAttribute('href',encoded_url);
// bookmark_link_ele.text(encoded_url);
code_markers = window.monaco.editor.getModelMarkers({});
code_marker_max_severity = 0;
// console.log('here',code_markers);
issue_suggestions_ele[0].innerHTML = '';
num_issues_ele.text(code_markers.length);
if(code_markers.length > 0) {
var t = document.createElement('table');
tableHelperCreateRow(t,[
'',
'Comment',
'Row',
'Column',
'Severity'
]);
code_markers.forEach((marker,i) => {
tableHelperCreateRow(t,[
i+1+'.',
marker.message,
marker.startLineNumber,
marker.startColumn,
marker.severity,
]);
if(Number(marker.severity) > code_marker_max_severity) {
code_marker_max_severity = marker.severity;
}
});
issue_suggestions_ele[0].appendChild(t);
}
if(code_marker_max_severity === 0) {
issue_suggestions_title_ele[0].style='background-color:intial;';
}
if(code_marker_max_severity > 0) {
issue_suggestions_title_ele[0].style='background-color:gold;';
}
if(code_marker_max_severity>= 5) {
issue_suggestions_title_ele[0].style='background-color:maroon;';
}
if(auto_run_checkbox_ele[0].checked) {
// console.log('Running Code...');
refreshHTMLOutput();
}
}
function refreshHTMLOutput() {
output_container_ele[0].innerHTML='';
output_container_ele[0].innerHTML=`${uncompressed_text}
`;
// var script=document.createElement('script');
// script.innerHTML=this.js_code_ele.value;
// output_container_ele.appendChild(script);
}
function refreshURL() {
window.location = encoded_url;
}
ON_SCAFFOLDER_READY(function() {
num_issues_ele = $('#number_of_issues');
issue_suggestions_ele = $('#issue_suggestions');
bookmark_link_ele = $('#bookmarkable_link');
issue_suggestions_title_ele = $('#issue_suggestions_title');
run_code_btn_ele = $('#run_code');
auto_run_checkbox_ele = $('#autorun_checkbox');
output_container_ele = $('#output_container');
var code_container = document.getElementById('code_container');
var code_container_ele = $("#code_container");
getURLText(function setEditorText(txt,ln,cn) {
console.log('values...', txt, ln, cn);
uncompressed_text = txt;
// Figuring out the use of model... https://stackoverflow.com/questions/59939385/how-do-i-format-json-code-in-monaco-editor-with-api
var modelUri = monaco.Uri.parse("html://grid/settings.json");
model = monaco.editor.createModel(txt,'html');
editor = monaco.editor.create(
code_container, {
// value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
// value: txt,
language: 'html',
model:model,
theme: "vs-dark",//https://stackoverflow.com/questions/47393659/monaco-editor-settheme-is-not-a-function
automaticLayout:true, // https://stackoverflow.com/questions/47017753/monaco-editor-dynamically-resizable
ready:function() {
console.log('editor ready');
}
})
Promise.resolve().then(()=>{
editor.focus();
console.log('/??',cursor_line_num,cursor_column_num,ln,cn);
editor.setPosition({
'lineNumber':cursor_line_num,
'column':cursor_column_num
});
refreshHTMLOutput();
Promise.resolve().then(refreshPage);
})
// setTimeout(function() {
// Promise.resolve().then(refreshPage);
// }, 1000);
})
function monacoRefreshEvt(evt) {
Promise.resolve().then(refreshPage);
}
// editor.onDidLayoutChange(monacoRefreshEvt);
// editor.onDidChangeModelLanguage(monacoRefreshEvt);
// editor.onDidChangeModelLanguageConfiguration(monacoRefreshEvt);
// editor.onDidChangeCursorPosition(monacoRefreshEvt);
editor.onDidChangeModelDecorations ((evt) => {
// console.log('Model Decorations changed...');
monacoRefreshEvt(evt);
});
run_code_btn_ele.on('click', function(evt) {
monacoRefreshEvt(evt);
refreshHTMLOutput();
});
editor.getModel().onDidChangeContent((evt)=>{
console.log('Content changed...');
// console.log('val:',editor.getValue());
// https://github.com/microsoft/monaco-editor/issues/906
// code_markers = monaco.editor.getModelMarkers({});
// num_issues_ele.text(code_markers.length);
// var lc = editor.getPosition();
// cursor_line_num = lc.lineNumber;
// cursor_column_num = lc.column;
monacoRefreshEvt(evt);
// setTimeout(function() {
// Promise.resolve().then(refreshPage);
// }, 100);
// compressed_text = LZString.compress(editor.getValue());
// var encoded_url = window.location.origin + window.location.pathname + '?zt=' + compressed_text;
// console.log('Encoded url:', encoded_url);
// window.location = encoded_url;
// zt = compress(editor.getValue(),'deflate-raw').then((val) => {
// compressed_obj = val;
// compressed_text = _arrayBufferToBase64(val);
// // var td = new TextDecoder('utf8');
// compressed_text = btoa(val);
// //
// zt = btoa(val);
// console.log('compressed:',val,compressed_text,btoa(val),encodeURI(compressed_text));
// zt = val;
// var encoded_url = window.location.origin + window.location.pathname + '?zt=' + compressed_text;
// console.log('Encoded URL:', encoded_url);
// decompress(val,'deflate-raw').then((txt) => {
// console.log('Obj Decompressed:',txt);
// })
// et = atob(compressed_text);
// console.log('ET:',et);
// // decompress(new TextEncoder().encode(et),'deflate-raw')
// decompress(et,'deflate-raw')
// .then((txt) => {
// console.log('TXT Decompressed:',txt);
// })
// // window.location = encoded_url;
// })
});
// editor.on('change',function() {
// console.log('Editor value changed...', editor.getValue());
// })
});