diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css
index cfff949..368b941 100755
--- a/experiments/outline-editor/editor.css
+++ b/experiments/outline-editor/editor.css
@@ -8,6 +8,8 @@
/*text-size-adjust: none;*/
text-size-adjust: 150%;
+
+ /*scroll-behavior: smooth;*/
}
.editor {
@@ -45,6 +47,7 @@
font-family: sans-serif;
font-size: var(--font-size);
+ white-space: pre-wrap;
outline: none;
border: none;
@@ -110,6 +113,7 @@
}
+/*-------------------------------------------------------------------*/
/* Styles */
.editor .outline .heading-1>span,
@@ -152,6 +156,7 @@
}
/* XXX EXPERIMENTAL -- not sure about this... */
+.editor .outline .list-item:before,
.editor .outline .list>[tabindex]:before {
display: inline-block;
position: absolute;
@@ -163,6 +168,19 @@
background: silver;
}
+.editor .outline .XXX>span {
+ background: yellow;
+}
+.editor .outline .comment>span {
+ color: silver;
+}
+.editor .outline [tabindex]>span>input[type=checkbox] {
+ --width: 3em;
+
+ height: 1em;
+ width: var(--width);
+ margin-left: calc(-1 * var(--width));
+}
diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js
index 1d790ab..47c1d75 100755
--- a/experiments/outline-editor/editor.js
+++ b/experiments/outline-editor/editor.js
@@ -331,28 +331,44 @@ var Outline = {
elem.style = style
return text } }
elem.text = code
- // attributes...
+ // hidden attributes...
// XXX make this generic...
- .replace(/\n\s*collapsed::\s*(.*)\s*$/,
+ // XXX should these be hidden from code too???
+ // collapsed...
+ .replace(/(\n|^)\s*collapsed::\s*(.*)\s*(\n|$)/,
+ function(_, value){
+ elem.collapsed = value.trim() == 'true'
+ return '' })
+ // id...
+ .replace(/(\n|^)\s*id::\s*(.*)\s*(\n|$)/,
function(_, value){
elem.collapsed = value.trim() == 'true'
return '' })
// markdown...
+ // ToDo...
.replace(/^TODO\s*(.*)$/, ' $1')
.replace(/^DONE\s*(.*)$/, ' $1')
+ // style: headings...
.replace(/^######\s*(.*)$/, style('heading-6'))
.replace(/^#####\s*(.*)$/, style('heading-5'))
.replace(/^####\s*(.*)$/, style('heading-4'))
.replace(/^###\s*(.*)$/, style('heading-3'))
.replace(/^##\s*(.*)$/, style('heading-2'))
.replace(/^#\s*(.*)$/, style('heading-1'))
- //.replace(/^[-\*]\s*(.*)$/, style('list'))
+ // style: list...
+ .replace(/^[-\*]\s+(.*)$/, style('list-item'))
.replace(/^\s*(.*):\s*$/, style('list'))
+ // style: misc...
+ .replace(/^((\/\/|;)\s+.*)$/, style('comment'))
+ .replace(/^XXX\s+(.*)$/, style('XXX'))
+ .replace(/^(.*)\s*XXX$/, style('XXX'))
+ // basic styling...
+ // XXX these are quite naive...
.replace(/\*(.*)\*/g, '$1')
.replace(/~([^~]*)~/g, '$1')
.replace(/_([^_]*)_/g, '$1')
+ // elements...
.replace(/(\n|^)---*\h*(\n|$)/, '$1