diff --git a/VirtualRenderer.js b/VirtualRenderer.js
index cfcdf631..74311db3 100644
--- a/VirtualRenderer.js
+++ b/VirtualRenderer.js
@@ -1,8 +1,9 @@
function VirtualRenderer(containerId)
{
this.container = document.getElementById(containerId);
- this.canvas = document.createElement("div");
+ this.container.className += "editor";
+ this.canvas = document.createElement("div");
this.canvas.className = "canvas";
this.container.appendChild(this.canvas);
@@ -331,11 +332,11 @@ VirtualRenderer.prototype.screenToTextCoordinates = function(pageX, pageY)
};
VirtualRenderer.prototype.visualizeFocus = function() {
- this.container.className = "focus";
+ this.container.className = "editor focus";
};
VirtualRenderer.prototype.visualizeBlur = function() {
- this.container.className = "";
+ this.container.className = "editor";
};
VirtualRenderer.prototype.showComposition = function(position)
diff --git a/editor.css b/editor.css
new file mode 100644
index 00000000..ceebf793
--- /dev/null
+++ b/editor.css
@@ -0,0 +1,64 @@
+.editor {
+ position: absolute;
+ border: 1px solid black;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.editor.focus {
+ border: 1px solid #327fbd;;
+}
+
+.editor .canvas {
+ z-index: 2;
+ position: absolute;
+ overflow: hidden;
+ font-family: Monaco, "Courier New";
+ font-size: 12px;
+ white-space: nowrap;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ cursor: text;
+}
+
+.composition {
+ position: absolute;
+ text-decoration: underline;
+}
+
+.cursor {
+ position: absolute;
+ width: 1px;
+ background: black;
+}
+
+.line {
+ white-space: nowrap;
+}
+
+.line.odd {
+ /*background: #FAFAFA;*/
+}
+
+.keyword {
+ color: blue;
+}
+
+.string {
+ color: rgb(3, 106, 7);
+}
+
+.comment {
+ font-style: italic;
+ color: rgb(0, 102, 255);
+}
+
+.editor .markers {
+ position: absolute;
+ z-index: 1;
+}
+
+.selection {
+ position: absolute;
+ background: rgba(77, 151, 255, 0.33);
+}
\ No newline at end of file
diff --git a/editor.html b/editor.html
index 99110776..dd7e4eed 100644
--- a/editor.html
+++ b/editor.html
@@ -9,76 +9,15 @@
+