diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css index c112cb5..bdb0c7b 100755 --- a/experiments/outline-editor/editor.css +++ b/experiments/outline-editor/editor.css @@ -89,11 +89,22 @@ border: none; } /* show/hide node's view/code... */ -.editor .outline [tabindex]>textarea:focus+span, +/*.editor .outline [tabindex]>textarea:focus+span,*/ .editor .outline [tabindex]>textarea:not(:focus) { position: absolute; opacity: 0; } +/* XXX not sure about this yet... */ +.editor .outline [tabindex]>textarea:focus+span { + position: absolute; + top: 0; + margin-top: 0; + visibility: hidden; +} +.editor .outline [tabindex]>textarea:focus+span:before, +.editor .outline [tabindex]>textarea:focus+span:after { + visibility: visible; +} /* click through the span text to the textarea */ .editor .outline [tabindex]>span { position: relative; @@ -297,7 +308,7 @@ editor .outline [tabindex]:focus { } -/* Lists... */ +/* List... */ /* XXX needs to be in the middle of the first span but with universal size... */ .editor .outline .list-item>span:before, .editor .outline .list>[tabindex]>span:not(:empty):before { @@ -314,6 +325,19 @@ editor .outline [tabindex]:focus { content: "▪"; } + +/* List... */ +/* XXX nested lists are broken -- seems that I need a container for the children... */ +.editor .outline .numbered-list { + counter-reset: numbered-list; +} +.editor .outline .numbered-list>[tabindex]>span:not(:empty):before { + counter-increment: numbered-list; + content: counter(numbered-list) "."; + color: gray; +} + + /* Notes... */ .editor .outline .NOTE { --margin: 1rem; @@ -373,8 +397,8 @@ editor .outline [tabindex]:focus { var(--checkbox-size) + var(--checkbox-margin)); } -.editor .outline [tabindex].check>span>input[type=checkbox], -.editor .outline [tabindex].todo>span>input[type=checkbox] { +.editor .outline [tabindex].check>span input[type=checkbox], +.editor .outline [tabindex].todo>span input[type=checkbox] { height: var(--checkbox-size); width: var(--checkbox-size); @@ -387,7 +411,7 @@ editor .outline [tabindex]:focus { /* NOTE: this appears to be needed for the em sizes above to work correctly */ font-size: 1em; } -.editor .outline [tabindex].todo>span>input[type=checkbox]:first-child { +.editor .outline [tabindex].todo>span input[type=checkbox]:first-child { margin-left: calc( -1 * var(--checkbox-size) - var(--checkbox-margin)); @@ -409,6 +433,25 @@ editor .outline [tabindex]:focus { } +/* Tables... */ +.editor .outline [tabindex]>span>table { + width: 100%; + border-collapse: collapse; +} +.editor .outline [tabindex]>span>table tr:nth-child(odd) { + background: rgba(0,0,0,0.03); +} +.editor .outline [tabindex]>span>table tr:first-child { + font-weight: bold; + border-bottom: solid 0.1rem silver; + background: transparent; +} +.editor .outline [tabindex]>span>table td { + height: calc(1em + var(--item-padding) * 2); + padding: 0 1em; + /*text-align: center;*/ +} + /********************************************************* Testing ***/ diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js index 3caa42a..6ab8f82 100755 --- a/experiments/outline-editor/editor.js +++ b/experiments/outline-editor/editor.js @@ -93,6 +93,13 @@ var Outline = { var outline = this.outline + // get parent node... + if(node instanceof HTMLElement){ + while(!node.getAttribute('tabindex')){ + node = node.parentElement + if(node === this.outline){ + return undefined } } } + // node lists... var NO_NODES = {} var nodes = @@ -304,6 +311,12 @@ var Outline = { elem.style.push(...style) return code ?? text } } + var table = function(_, body){ + return `\n
${ + body + .replace(/\s*\|\s*\n\s*\|\s*/gm, '
') + .replace(/\s*\|\s*/gm, '') + }
` } elem.text = code // hidden attributes... // XXX make this generic... @@ -329,6 +342,7 @@ var Outline = { // style: list... //.replace(/^(?\s+(.*)$/m, style('quote')) .replace(/^\s*(?')) .replace(/\s*(?')) + // tables... + .replace(/^\s*(?$1') @@ -359,6 +375,9 @@ var Outline = { .replace(/(?$1') // XXX support "\==" in mark... .replace(/(?$1') + // links... + .replace(/(?$1') + .replace(/((?:https?:|ftps?:)[^\s]*)(\s*)/g, '$1$2') // characters... // XXX use ligatures for these??? .replace(/(?example + - link + - [example](about:blank) + - https://example.com + - ./path/to/file /path/to -- not supported yet + - Tables + - | a | b | c | + | 1 | 2 | 3 | + | 11 | 22 | 33 | - markdown: - numbered lists - - tables + - ~tables~ - code blocks - ~alerts~ - footnotes??