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 -->
2023-10-11 03:29:20 +03:00
< pre class = "code" >
2023-10-07 17:06:54 +03:00
- # Outline editor prototype
2023-10-09 18:44:56 +03:00
- An outline-based markdown editor experiment
- ### Infuences::
- Logseq
- Tomboy
- Bonsai
-
2023-10-11 12:20:00 +03:00
- ## ToDo:
2023-10-11 12:13:17 +03:00
- BUG? odd/random focus jumps on refocusing page (can't reporduce yet)
2023-10-11 07:16:18 +03:00
- 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...
2023-10-12 03:24:34 +03:00
- ASAP: fix quotes
- Example: /\n\s*\|\s+/ -> < tr> < td>
2023-10-11 01:57:21 +03:00
- 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
- ASAP: editor: shifting nodes up/down
- ASAP: editor: `-` at start of line is interpreted as block marker...
2023-10-11 07:16:18 +03:00
- ASAP: use \\t for indent...
- on item click, place the cursor where it was clicked before the code expanded...
2023-10-11 01:57:21 +03:00
- ~editor: semi-live update styles~
- need to reach checkboxes via keyboard
2023-10-07 17:06:54 +03:00
- persistent empty first/last node (a button to create a new node)
2023-10-11 07:31:06 +03:00
- add completion percentage to blocks with todo's nested
- _...use `[%]`, `%%`, or something similar..._
2023-10-10 20:34:05 +03:00
- read-only mode
2023-10-11 01:57:21 +03:00
- should bulets be on the same level as nodes or offset??
- A) justified to bulet:
* list item
* list item
block text
- B) justified to text _(current)_:
* list item
* list item
block text
2023-10-11 03:29:20 +03:00
- NOTE: this is only a problem if making list-items manually -- disable???
2023-10-10 20:34:05 +03:00
- ~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
2023-10-11 13:16:51 +03:00
collapsed:: true
2023-10-07 17:06:54 +03:00
- delete node
- indent/deindent
- edit node
2023-10-09 18:44:56 +03:00
- empty item height is a bit off...
2023-10-11 13:13:27 +03:00
- ~handle links gracefully -- open/edit
_just click in the empty space_~
- ~< a href = "about:blank" > this takes the whole element< / a > ~
- this breaks if link is exactly line width -- should we ensure empty space?
2023-10-10 23:18:50 +03:00
- ~serialize/deserialize~
2023-10-07 17:06:54 +03:00
- ~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
2023-10-12 03:24:34 +03:00
- Lists::
- bullet:
- a
- b
- c
- numbered#
- a
- b#
- x
- y
- z
- c
2023-10-11 03:29:20 +03:00
- > quoted text
2023-10-11 07:16:18 +03:00
- Notes
- NOTE: a note text
- NOTE:
- a root note can also be empty
- click on the outer border to edit root
2023-10-08 17:42:44 +03:00
- // C-style comment
- ; ASM-style comment
- XXX Highlight
2023-10-12 03:24:34 +03:00
- Basic inline *bold*, _italic_ and ~striked~
- Marking ==text==
2023-10-09 01:32:46 +03:00
- Line
2023-10-08 02:57:21 +03:00
- ---
2023-10-11 12:28:17 +03:00
- Markers: ASAP, BUG, FIX, HACK, STUB, WARNING, and CAUTION
2023-10-09 03:29:48 +03:00
- Inline [X] checkboxes [_]
2023-10-11 07:16:18 +03:00
- To do items/blocks
- [_] undone item
_(clicking the checkbox updates the item)_
- [X] done item
- [_] we can also add inline [x] checkboxes
2023-10-12 03:24:34 +03:00
- 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 |
2023-10-11 03:36:28 +03:00
- markdown:
- numbered lists
2023-10-12 03:24:34 +03:00
- ~tables~
2023-10-11 12:13:17 +03:00
- code blocks
- ~alerts~
2023-10-11 03:36:28 +03:00
- footnotes??
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
2023-10-11 03:29:20 +03:00
- 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 < / pre >
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-10 23:18:50 +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-10 23:18:50 +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 : -->
