tweaking....

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-10-04 21:54:34 +03:00
parent 30bbe21088
commit aaff6360a4
3 changed files with 29 additions and 9 deletions

View File

@ -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);
}

View File

@ -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')

View File

@ -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>
</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('after').focus()">-<sub>+</sub>-</button>
<button onclick="editor.Block('before').focus()" class="add-row">+</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 : -->