tweaking....

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

experiments/outline-editor/editor.css

@@ -14,7 +14,8 @@
 .editor .outline {
 	display: block;
 	position: relative;
-	width: calc(100% - var(--button-size));
+	/* XXX do a better calculation... */
+	width: calc(100% - (var(--button-size) + 4em));
 }
 
 .editor .outline [tabindex] {
@@ -36,7 +37,6 @@
 
 	font-family: sans-serif;
 	font-size: 5mm;
-	white-space: pre;
 
 	outline: none;
 	border: none;
@@ -92,10 +92,13 @@
 	right: 1em;
 }
 .editor .toolbar button {
+	--margin: 0.1em;
+
 	display: block;
 
-	width: var(--button-size);
+	width: calc(var(--button-size) + var(--margin) * 2);
 	height: var(--button-size);
+	margin: var(--margin);
 
 	font-size: var(--button-size);
 }

experiments/outline-editor/editor.js

@@ -289,13 +289,23 @@ var Outline = {
 	// block serialization...
 	__code2html__: function(code){
 		return code 
+			.replace(/\n\s*/g, '<br>')
 			// XXX STUB...
+			.replace(/^# (.*)\s*$/g, '<h1>$1</h1>')
+			.replace(/^## (.*)\s*$/g, '<h2>$1</h2>')
+			.replace(/^### (.*)\s*$/g, '<h3>$1</h3>')
+			.replace(/^#### (.*)\s*$/g, '<h4>$1</h4>')
 			.replace(/\*(.*)\*/g, '<b>$1</b>')
 			.replace(/~([^~]*)~/g, '<s>$1</s>')
 			.replace(/_([^_]*)_/g, '<i>$1</i>') },
 	__html2code__: function(html){
 		return html 
+			.replace(/<br>\s*/g, '\n')
 			// XXX STUB...
+			.replace(/^<h1>(.*)<\/h1>\s*$/g, '# $1')
+			.replace(/^<h2>(.*)<\/h2>\s*$/g, '## $1')
+			.replace(/^<h3>(.*)<\/h3>\s*$/g, '### $1')
+			.replace(/^<h4>(.*)<\/h4>\s*$/g, '#### $1')
 			.replace(/<b>(.*)<\/b>/g, '*$1*')
 			.replace(/<s>(.*)<\/s>/g, '~$1~')
 			.replace(/<i>(.*)<\/i>/g, '_$1_') },
@@ -347,6 +357,7 @@ var Outline = {
 	// XXX add scrollIntoView(..) to nav...
 	keyboard: {
 		// vertical navigation...
+		// XXX wrapped line navigation is broken...
 		ArrowUp: function(evt){
 			var state = 'focused'
 			var edited = this.get('edited')

experiments/outline-editor/index.html

@@ -3,6 +3,9 @@
 <link href="editor.css" rel="stylesheet"/>
 <style>
 
+.add-row {
+	height: 1.2em !important;
+}
 
 </style>
 <script src="generic.js"></script>
@@ -42,17 +45,19 @@ var setup = function(){
 			<div tabindex=0><span>C</span><textarea></textarea>
 				<div tabindex=0><span>This is a line of text</span><textarea></textarea>
 				</div>
-				<div tabindex=0><span>This is a set
+				<div tabindex=0><span>This is a set<br>
-text lines</span><textarea></textarea>
+					text lines</span><textarea></textarea>
 				</div>
 			</div>
 		</div>
 	</div>
+	<!-- toolbar (optional) -->
 	<div class="toolbar">
 		<button onclick="editor.deindent().focus()">&lt;</button>
 		<button onclick="editor.indent().focus()">&gt;</button>
-		<button onclick="editor.Block('before').focus()">-<sup>+</sup>-</button>
+		<button onclick="editor.Block('before').focus()" class="add-row">+</button>
-		<button onclick="editor.Block('after').focus()">-<sub>+</sub>-</button>
+		<hr>
+		<button onclick="editor.Block('after').focus()" class="add-row">+</button>
 		<button onclick="editor.toggleCollapse()?.focus()">&#709;&#708;</button>
 		<button onclick="editor.remove()">&times;</button>
 	</div>
@@ -70,13 +75,13 @@ TODO:
 - <s>shift subtree up/down</s>
 - <s>create node</s>
 - <s>edit node</s>
+- shifting nodes up/down
+- multiple node selection
 - undo 
   - delete node
   - indent/deindent
   - edit node
 - copy/paste nodes/trees
-- shifting nodes up/down
-- multiple node selection
 - <s>serialize</s>/deserialize
 - <s>add optional text styling to nodes</s>
 
@@ -94,6 +99,7 @@ Controls:
 	esc        - exit edit mode 
 </pre>
 
+
 </body>
 </html>
 <!-- vim:set ts=4 sw=4 : -->