Add Notebook
diff --git a/ide/qml/NotebookCell.qml b/ide/qml/NotebookCell.qml
index a441b73..3466d05 100644
--- a/ide/qml/NotebookCell.qml
+++ b/ide/qml/NotebookCell.qml
@@ -3,51 +3,89 @@
 import QtQuick.Controls.Material 2.0
 import QtQuick.Layouts 1.0
 
-ColumnLayout {
+Item {
     id: root
 
     required property string code
     required property string result
 
-    RowLayout {
-        Layout.fillWidth: true
+    signal insertBelowClicked()
+    signal codeEditingFinished(string code)
+    signal cellFocused()
 
-        Button {
-            Layout.alignment: Qt.AlignTop
-            icon.source: "qrc:///icons/play-circle.svg"
-            icon.color: Material.color(Material.Grey, Material.Shade600)
-            flat: true
-        }
+    height: column.height
 
-        ColumnLayout {
+    MouseArea {
+        id: selectCell
+
+        anchors.fill: column
+
+        onClicked: root.cellFocused()
+    }
+
+    ColumnLayout {
+        id: column
+
+        width: parent.width
+
+        RowLayout {
+            id: row
             Layout.fillWidth: true
-            Layout.fillHeight: true
 
-            TextArea {
+            RoundButton {
+                Layout.alignment: Qt.AlignTop
+                icon.source: "qrc:///icons/play-circle.svg"
+                icon.color: Material.color(Material.Grey, Material.Shade600)
+                flat: true
+            }
+
+            ColumnLayout {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-                id: code
-                font.family: "monospace"
-                text: root.code
-                selectByMouse: true
-                wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
 
-                Keys.onTabPressed: {
-                    var pos = cursorPosition + 4
-                    text += "    ";
-                    cursorPosition = pos
+                TextArea {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    id: code
+                    font.family: "monospace"
+                    text: root.code
+                    selectByMouse: true
+                    wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+
+                    Keys.onTabPressed: {
+                        var pos = cursorPosition + 4
+                        text = text.slice(0, cursorPosition) + "    " + text.slice(cursorPosition);
+                        cursorPosition = pos
+                    }
+
+                    Keys.onEscapePressed: {
+                        root.forceActiveFocus()
+                    }
+
+                    onEditingFinished: {
+                        root.codeEditingFinished(text)
+                    }
+
+                    onFocusChanged: if (focus) root.cellFocused()
+                }
+
+                Label {
+                    visible: root.result.length > 0
+                    Layout.fillWidth: true
+                    font.family: "monospace"
+                    text: root.result
                 }
             }
 
-            Label {
-                Layout.fillWidth: true
-                font.family: "monospace"
-                text: root.result
+            RoundButton {
+                icon.source: "qrc:///icons/trash.svg"
+                icon.color: Material.color(Material.Grey, Material.theme == Material.Dark ? Material.Shade400 : Material.Shade600)
+                flat: true
             }
         }
-    }
 
-    InsertRow {
-
+        InsertRow {
+            onInsertClicked: root.insertBelowClicked()
+        }
     }
 }