Code-Editor/script.js at main · HaSh3003/Code-Editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
function run() {
  let htmlCode = HtmlEditor.getValue();
  let cssCode = CssEditor.getValue();
  let jsCode = JsEditor.getValue();
  let output = document.getElementById("output");

  output.contentDocument.body.innerHTML = htmlCode + "<style>" + cssCode + "</style>";
  output.contentWindow.eval(jsCode);
}

let HtmlEditor = CodeMirror.fromTextArea(document.getElementById("Html-code"), {
  name: "htmlmixed",
  theme: "ayu-dark",
  lineWrapping: true,
  lineNumbers: true,
  extraKeys: { "Ctrl-Space": "autocomplete" },
  hintOptions: { schemaInfo: CodeMirror.htmlSchema }
});

let CssEditor = CodeMirror.fromTextArea(document.getElementById("Css-code"), {
  mode: "css",
  theme: "ayu-dark",
  lineNumbers: true,
  lineWrapping: true,
  extraKeys: { "Ctrl-Space": "autocomplete" },
  hintOptions: { schemaInfo: CodeMirror.cssSchema }
});

let JsEditor = CodeMirror.fromTextArea(document.getElementById("Js-code"), {
  mode: "javascript",
  theme: "ayu-dark",
  lineWrapping: true,
  lineNumbers: true,
  hintOptions: { schemaInfo: CodeMirror.javascriptSchema }
});

HtmlEditor.on('inputRead', function(cm, event) {
  if (!cm.state.completionActive && event.text.length === 1) {
      cm.showHint({ completeSingle: false });
  }
});

CssEditor.on('inputRead', function(cm, event) {
  if (!cm.state.completionActive && event.text.length === 1) {
      cm.showHint({ completeSingle: false });
  }
});

JsEditor.on('inputRead', function(cm, event) {
  if (!cm.state.completionActive && event.text.length === 1) {
      cm.showHint({ completeSingle: false });
  }
});

HtmlEditor.on('keyup', function(cm, event) {
  run();
});

CssEditor.on('keyup', function(cm, event) {
  run();
});

JsEditor.on('keyup', function(cm, event) {
  run();
});

let width = document.getElementById("width");
let height = document.getElementById("height");
let iframe = document.getElementById("output");

function Devices_Emulator() {
  iframe.style.width = width.value + "px";
  iframe.style.height = height.value + "px";
}

width.addEventListener('keyup', function() {
  Devices_Emulator();
});

height.addEventListener('keyup', function() {
  Devices_Emulator();
});

function updateValues() {
  width.value = iframe.offsetWidth;
  height.value = iframe.offsetHeight;
}

const resizeObserver = new ResizeObserver(updateValues);
resizeObserver.observe(iframe);

updateValues();