diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css index 3d3b39c..b4203ef 100755 --- a/experiments/outline-editor/editor.css +++ b/experiments/outline-editor/editor.css @@ -28,8 +28,6 @@ /*text-size-adjust: none;*/ text-size-adjust: 150%; - - } .editor { @@ -233,7 +231,9 @@ editor .outline .block:focus { /********************************************************** Styles ***/ -/* Headings... */ + +/*------------------------------------------------------ Headings ---*/ + .editor .outline .heading-1, .editor .outline .heading-2, .editor .outline .heading-3, @@ -276,7 +276,8 @@ editor .outline .block:focus { } -/* Quote... */ +/*--------------------------------------------------------- Quote ---*/ + .editor .outline .quote>.text { --indent: 1rem; --margin: 0.7rem; @@ -298,8 +299,8 @@ editor .outline .block:focus { } -/* List... */ -/* XXX needs to be in the middle of the first .view but with universal size... */ +/*---------------------------------------------------------- List ---*/ + .editor .outline .list-item>.view:before, .editor .outline .list>.children>.block>.view:not(:empty):before { content: "◼"; @@ -325,16 +326,15 @@ editor .outline .block:focus { } -/* List... */ -/* XXX nested lists are broken -- seems that I need a container for the children... */ -.editor .outline .numbered-list>.children { - counter-reset: numbered-list; -} +/*------------------------------------------------ Numbered lists ---*/ + .editor .outline .numbered-list>.children>.block>.view:not(:empty):before { counter-increment: numbered-list; content: counter(numbered-list) "."; color: gray; } + +/* numbered lists... */ .editor .outline .numbered-list>.children >.numbered-list>.children>.block>.view:not(:empty):before { @@ -361,7 +361,8 @@ editor .outline .block:focus { } -/* Notes... */ +/*--------------------------------------------------------- Notes ---*/ + .editor .outline .NOTE { --margin: 1rem; --padding-h: 2rem; @@ -393,7 +394,8 @@ editor .outline .block:focus { } -/* Highlightes... */ +/*--------------------------------------------------- Highlightes ---*/ + .editor .outline .highlight { font-weight: bold; background: yellow; @@ -403,7 +405,8 @@ editor .outline .block:focus { } -/* Comments... */ +/*------------------------------------------------------ Comments ---*/ + .editor.hide-comments .outline .comment { display: none; } @@ -412,7 +415,8 @@ editor .outline .block:focus { } -/* Checkboxes... */ +/*---------------------------------------------------- Checkboxes ---*/ + .editor .outline .block.todo>.view { width: calc( 100% @@ -449,7 +453,8 @@ editor .outline .block:focus { } -/* code... */ +/*---------------------------------------------------------- Code ---*/ + .editor .outline .block>.view pre, .editor .outline .block>.view code { padding: 0.1em 0.3em; @@ -463,7 +468,8 @@ editor .outline .block:focus { } -/* Tables... */ +/*-------------------------------------------------------- Tables ---*/ + .editor .outline .block>.view>table { width: 100%; border-collapse: collapse; diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js index 8dc2a94..82c0a39 100755 --- a/experiments/outline-editor/editor.js +++ b/experiments/outline-editor/editor.js @@ -316,6 +316,8 @@ var Outline = { if(code.trim() == ''){ elem.text = '' return elem } + + // helpers... var style = function(style, code=undefined){ style = [style].flat() that.__styles = [...new Set([ @@ -343,10 +345,10 @@ var Outline = { .replace(/\s*\|\s*\n\s*\|\s*/gm, '\n') .replace(/\s*\|\s*/gm, '') }` } + elem.text = code // hidden attributes... // XXX make this generic... - // XXX should these be hidden from code too??? // collapsed... .replace(/(\n|^)\s*collapsed::\s*(.*)\s*(\n|$)/, function(_, value){ @@ -583,7 +585,9 @@ var Outline = { && (code.innerHTML = this.text()) return this }, + // XXX move the code here into methods/actions... // XXX add scrollIntoView(..) to nav... + // XXX use keyboard.js... keyboard: { // vertical navigation... // XXX this is a bit hacky but it works -- the caret blinks at diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html index d43bd9d..ea7c722 100755 --- a/experiments/outline-editor/index.html +++ b/experiments/outline-editor/index.html @@ -37,9 +37,14 @@ var setup = function(){ - - ## Bugs: - BUG: ASAP: editor: `-` at start of line is interpreted as block marker... + - need to either: + - quote the `-` in .text() -- _preferreed_ + - split the lines starting with `-` into nested nodes (a-la .load()) - BUG? pressing down from a longer line will jump over a shorter line - - here is the line to jump from, for example from here - an we'll not get here... + - to reproduce\: + - here is the line to jump from, for example from here + an we'll not get here... + - - ## ToDo: - ASAP: editor: bksapce/del at start/end of a block should join it with prev/next - ASAP: editor: pressing enter in text edit mode should split text into two blocks @@ -54,7 +59,7 @@ var setup = function(){ - _...use `[%]`, `%%`, or something similar..._ - read-only mode - should bulets be on the same level as nodes or offset?? - - A) justified to bulet: + - A) justified to bullet: * list item * list item block text @@ -63,6 +68,8 @@ var setup = function(){ * list item block text - NOTE: this is only a problem if making list-items manually -- disable??? + - FF: figure out a way to draw expand/collapse bullets without the use of CSS' `:has(..)` + - Nerd fonts (options?) - ~do a better expand/collapse icons~ - ~loading from DOM -- fill textarea~ - ~focus management~