2023-10-09 01:32:46 +03:00
<!DOCTYPE html>
2023-09-25 20:04:53 +03:00
< html >
< head >
2023-10-10 20:34:05 +03:00
< meta charset = "UTF-8" >
2023-09-29 02:47:07 +03:00
< link href = "editor.css" rel = "stylesheet" / >
2023-09-25 20:04:53 +03:00
< style >
2023-10-04 21:54:34 +03:00
.add-row {
height: 1.2em !important;
}
2023-09-25 20:04:53 +03:00
< / style >
2023-09-27 15:05:34 +03:00
< script src = "generic.js" > < / script >
< script src = "editor.js" > < / script >
2023-09-25 20:04:53 +03:00
< script >
2023-09-27 00:54:43 +03:00
2023-09-30 17:27:28 +03:00
var editor
2023-09-27 00:54:43 +03:00
var setup = function(){
2023-09-27 15:05:34 +03:00
window.editor = {
__proto__: Outline,
}.setup(
2023-09-30 17:27:28 +03:00
document.querySelector('.editor')) }
2023-09-25 20:04:53 +03:00
< / script >
< / head >
2023-09-27 00:54:43 +03:00
< body onload = "setup()" >
2023-09-25 20:04:53 +03:00
< div class = "editor" >
2023-10-07 17:06:54 +03:00
<!-- code -->
< div class = "code" >
- # Outline editor prototype
2023-10-09 18:44:56 +03:00
- An outline-based markdown editor experiment
- ### Infuences::
- Logseq
- Tomboy
- Bonsai
-
2023-10-09 01:32:46 +03:00
- ## ToDo
2023-10-10 20:34:05 +03:00
- shifting nodes up/down
2023-10-10 21:45:24 +03:00
- need to reach checkboxes from keyboard
2023-10-07 17:06:54 +03:00
- editor: bksapce/del at start/end of a block should join it with prev/next
- editor: pressing enter in text edit mode should split text into two blocks
- editor: caret
- ~go to next/prev element's start/end when moving off last/first char~
- handle up/down on wrapped blocks
_...can't seem to get caret line in a non-hacky way_
2023-10-10 21:45:24 +03:00
- editor: semi-live update styles
2023-10-07 17:06:54 +03:00
- persistent empty first/last node (a button to create a new node)
2023-10-10 20:34:05 +03:00
- add completion percentage to blocks with todo's nested
either by default oron '%%' or '[%]' placeholder
...ratio between all nested open checkboxes to checked (???)
- read-only mode
- ~do a better expand/collapse icons~
2023-10-08 02:36:29 +03:00
- ~loading from DOM -- fill textarea~
2023-10-07 17:06:54 +03:00
- ~focus management~
- ~mouse/touch controls~
- ~navigation~
- ~expand/collapse subtree~
- ~shift subtree up/down~
- ~create node~
- ~edit node~
- multiple node selection
2023-10-10 20:34:05 +03:00
- copy/paste nodes/trees
2023-10-07 17:06:54 +03:00
- undo
- delete node
- indent/deindent
- edit node
2023-10-09 18:44:56 +03:00
- markdown: tables
- empty item height is a bit off...
2023-10-07 17:06:54 +03:00
- ~serialize~/deserialize
- ~add optional text styling to nodes~
-
- ## TEST
2023-10-09 23:58:32 +03:00
- ### Formatting:
2023-10-08 02:36:29 +03:00
- Styles
- # Heading 1
- ## Heading 2
- ### Heading 3
- #### Heading 4
- ##### Heading 5
- ###### Heading 6
- Text
- List::
- a
- b
- c
2023-10-08 17:42:44 +03:00
- // C-style comment
- ; ASM-style comment
- XXX Highlight
2023-10-09 01:32:46 +03:00
- Line
2023-10-08 02:57:21 +03:00
- ---
2023-10-09 23:58:32 +03:00
- Markers
- Basic "as soon as posible" (ASAP)
2023-10-09 01:32:46 +03:00
- Basic inline *bold*, _italic_ and ~striked~
2023-10-08 02:57:21 +03:00
- To do items
- TODO undone item
2023-10-09 01:32:46 +03:00
_(clicking the checkbox updates the item)_
2023-10-09 18:44:56 +03:00
- DONE done item
- [_] a different way to draw a checkbox
2023-10-09 03:29:48 +03:00
- Inline [X] checkboxes [_]
2023-10-09 23:58:32 +03:00
-
- ### Playground for testing
- A
collapsed:: true
- a
- b
- c
- B
- d
- e
- C
- This is a line of text
- This is a set
text lines
- Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text < / div >
2023-10-07 17:06:54 +03:00
<!-- outline -->
< div class = "outline" > < / div >
2023-10-04 21:54:34 +03:00
<!-- toolbar (optional) -->
2023-10-04 15:40:29 +03:00
< div class = "toolbar" >
2023-10-04 15:33:07 +03:00
< button onclick = "editor.deindent().focus()" > < < / button >
< button onclick = "editor.indent().focus()" > > < / button >
2023-10-04 21:54:34 +03:00
< button onclick = "editor.Block('before').focus()" class = "add-row" > +< / button >
< hr >
< button onclick = "editor.Block('after').focus()" class = "add-row" > +< / button >
2023-10-04 15:33:07 +03:00
< button onclick = "editor.toggleCollapse()?.focus()" > ˅ ˄ < / button >
2023-10-03 16:32:29 +03:00
< button onclick = "editor.remove()" > × < / button >
2023-10-03 16:12:19 +03:00
< / div >
2023-09-25 20:04:53 +03:00
< / div >
2023-09-27 14:08:30 +03:00
< hr >
2023-10-10 20:34:05 +03:00
< button onclick = "editor.dom.classList.toggle('show-click-zones')" > show/hide click zones< / button >
2023-09-27 14:08:30 +03:00
< pre >
Controls:
up - focus node above
down - focus node below
left - focus parent node
right - focus first child node
tab - indent node
s-tab - deindent node
s-left - collapse node
s-right - expand node
enter - normal mode: edit node
- edit mode: create node below
esc - exit edit mode
< / pre >
2023-10-04 21:54:34 +03:00
2023-09-25 20:04:53 +03:00
< / body >
< / html >
<!-- vim:set ts=4 sw=4 : -->
