Tree focus

static/css/markdown.css

@@ -1,11 +1,12 @@
 .el-node-markdown {
 	h1 {
 		border-bottom: 1px solid #ccc;
-		margin-top: 48px;
+		margin-top: 32px;
 		margin-bottom: 8px;
 
 		display: inline-block;
 		font-size: 1.25em;
+
 		border-radius: 8px;
 		color: #fff;
 		background-color: var(--color1);
@@ -27,4 +28,44 @@
 		content: "> ";
 		color: var(--color1);
 	}
+
+	img {
+		max-width: var(--thumbnail-width);
+		max-height: var(--thumbnail-height);
+	}
+
+	table {
+		border: 1px solid #ccc;
+		border-collapse: collapse;
+
+		th {
+			text-align: left;
+			padding: 8px;
+		}
+
+		th,
+		td {
+			border: 1px solid #ccc;
+			padding: 8px;
+		}
+	}
+
+	code {
+		background-color: #f8f8f8;
+		border: 1px solid #ccc;
+		padding: 2px 4px;
+		border-radius: 4px;
+	}
+
+	pre {
+		background-color: #f8f8f8;
+		border: 1px solid #ccc;
+		padding: 8px;
+		border-radius: 4px;
+
+		code {
+			border: unset;
+			padding: unset;
+		}
+	}
 }

static/css/notes2.css

@@ -2,6 +2,8 @@
 
 :root {
 	--content-width: 900px;
+	--thumbnail-width: 300px;
+	--thumbnail-height: 100px;
 }
 
 html {
@@ -55,10 +57,18 @@ html {
 	z-index: 100;
 	border-left: 2px solid #333;
 
-	&:focus {
+	n2-tree {
-		border-left: 2px solid #fe5f55;
+		border: 2px solid #333;
 	}
 
+	&:focus-within {
+		n2-tree {
+			border: 2px solid #fe5f55;
+		}
+
+	}
+
+
 	#logo {
 		display: grid;
 		position: relative;
@@ -315,6 +325,7 @@ n2-nodeui {
 		.el-node-content {
 			display: none;
 		}
+
 		.el-node-markdown {
 			display: block;
 		}

static/js/app.mjs

@@ -55,10 +55,12 @@ export class App {
 
 		switch (event.key.toUpperCase()) {
 			case 'T':
-				if (document.activeElement.id === 'tree-nodes')
+				if (document.activeElement.id === 'tree-nodes') {
-					this.nodeUI.takeFocus()
+					console.log('take focus')
-				else
 					this.nodeUI.takeFocus()
+				} else {
+					this.tree.focus()
+				}
 				break
 
 			case 'F':

static/js/node.mjs

@@ -22,7 +22,7 @@ export class N2NodeUI extends CustomHTMLElement {
 			<div data-el="name"></div>
 
 			<textarea data-el="node-content" required rows=1></textarea>
-			<div data-el="node-markdown"></div>
+			<div data-el="node-markdown" tabindex=1></div>
 
 			<div data-el="functions">
 				<img data-el="icon-markdown">
@@ -55,7 +55,7 @@ export class N2NodeUI extends CustomHTMLElement {
 		})
 
 		_mbus.subscribe('MARKDOWN_TOGGLE', () => this.showMarkdown(!this.showMarkdown()))
-		_mbus.subscribe('MARKDOWN_EDIT', ({detail}) => this.editMarkdown(detail.data))
+		_mbus.subscribe('MARKDOWN_EDIT', ({ detail }) => this.editMarkdown(detail.data))
 
 		this.elNodeContent.addEventListener('input', event => this.contentChanged(event))
 		this.elIconMarkdown.addEventListener('click', () => this.showMarkdown(!this.showMarkdown()))
@@ -68,7 +68,12 @@ export class N2NodeUI extends CustomHTMLElement {
 		this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value)
 	}// }}}
 	takeFocus() {// {{{
-		this.elNodeContent.focus()
+		console.log('taking focus', this.showMarkdown())
+		if (this.showMarkdown()) {
+			this.elNodeMarkdown.focus()
+			console.log(this.elNodeMarkdown)
+		} else
+			this.elNodeContent.focus()
 	}// }}}
 
 	contentChanged(event) {//{{{