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-10-13 05:10:17 +03:00
< link rel = "stylesheet" href = "css/default.css" >
< link rel = "stylesheet" href = "editor.css" / >
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-10-13 05:10:17 +03:00
< script src = "lib/highlight.min.js" > < / script >
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-10-13 22:14:36 +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-14 15:46:42 +03:00
- // Seems that I unintentionally implemented quite a chunk of the markdown spec ;)
-
2023-10-12 22:13:38 +03:00
- ## Bugs:
2023-10-14 22:49:02 +03:00
- BUG: last node seems to get trash tags added to it's end...
2023-10-12 23:35:14 +03:00
-
2023-10-12 22:13:38 +03:00
- ## ToDo:
2023-10-13 22:14:36 +03:00
- ASAP: editor: backsapce/del at start/end of a block should join it with prev/next
2023-10-11 01:57:21 +03:00
- ASAP: editor: pressing enter in text edit mode should split text into two blocks
- ASAP: editor: shifting nodes up/down
2023-10-12 22:13:38 +03:00
- ASAP: scroll into view is bad...
2023-10-13 22:14:36 +03:00
- ASAP: need to reach checkboxes via keyboard
- FEATURE: read-only mode
- FEATURE: `collapse-children:: true` block option -- when loading collapse all immediate children
- FF: figure out a way to draw expand/collapse bullets without the use of CSS' `:has(..)`
- Code blocks and bullets:
- ```
code
```
- _bullet should be either in the middle of the block or at the first line of code (preferred)..._
2023-10-14 02:42:29 +03:00
- editor as a custom element...
2023-10-13 22:14:36 +03:00
- Nerd fonts (option???)
- multiple node selection
- copy/paste nodes/trees
- undo
collapsed:: true
- delete node
- indent/deindent
- edit node
2023-10-14 02:42:29 +03:00
- FEATURE? block templates...
collapsed:: true
- something like: `TPL: [_] < editable / > -- < editable / > `
- `TPL:` -- template marker
- `< editable / > ` -- field marker
- each child node will copy the template and allow editing of only fields
- not clear how to handle template changes...
2023-10-13 22:14:36 +03:00
- Q: can we get the caret line in a textarea???
- _...this will fix a lot of issues with moving between blocks in edit mode..._
- Q: do we use \\t for indent? (option???)
- Q: can we place the cursor on item click where it was clicked before before the code expanded?
collapsed:: true
- for example
- #### Click in this line and see where the cursor goes
- _not sure how..._
- Q: persistent empty first/last node (a button to create a new node)?
2023-10-14 22:49:02 +03:00
- Q: should list bullets be on the same level as nodes or offset??
2023-10-13 22:14:36 +03:00
collapsed:: true
2023-10-12 23:35:14 +03:00
- A) justified to bullet:
2023-10-11 01:57:21 +03:00
* 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-13 22:14:36 +03:00
- empty item height is a bit off...
2023-10-14 15:46:42 +03:00
- DONE Q: can we edit code in a code block directly? (a-la Logseq)
- DONE "percentage complete" in parent blocks with todo's nested
- DONE `.editor .outline:empty` view and behavior...
- DONE editor: semi-live update styles
- DONE do a better expand/collapse icons
- DONE loading from DOM -- fill textarea
- DONE focus management
- DONE mouse/touch controls
- DONE navigation
- DONE expand/collapse subtree
- DONE shift subtree up/down
- DONE create node
- DONE edit node
- DONE serialize/deserialize
- DONE add optional text styling to nodes
2023-10-07 17:06:54 +03:00
-
2023-10-13 22:14:36 +03:00
- ## Refactoring:
2023-10-14 02:42:29 +03:00
- Plugin architecture
2023-10-14 22:49:02 +03:00
- DONE basic structure
- plugin handler sequencing (see: `.setup(..)`)
- plugin handler canceling
- DONE Item parser (`.__code2html__(..)`)
- DONE split out
- DONE define a way to extend/stack parsers
2023-10-13 22:14:36 +03:00
- Format parser/generator
- split out
- define api
2023-10-14 22:49:02 +03:00
- experiment with clean _markdown_ as format
2023-10-13 22:14:36 +03:00
- CSS
- separate out theming
- separate out settings
- Actions -- move user actions (code in `.keyboard`) into methods
- Move to `keyboard.js`
- Plugin architecture
- Q: do we need `features.js` and/or `actions.js`
- Q: do we need a concatenative API??
- `< block > .get() -> < block > `
2023-10-14 22:49:02 +03:00
- Docs
2023-10-13 22:14:36 +03:00
-
2023-10-07 17:06:54 +03:00
- ## 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:
2023-10-12 19:45:12 +03:00
- a:
collapsed:: true
- bullets:
- in:
- very:
- deep:
- list:
- of:
- items:
2023-10-12 03:24:34 +03:00
- b
- c
- numbered#
- a
- b#
2023-10-12 19:45:12 +03:00
- x#
collapsed:: true
- bullets#
- in#
- very#
- deep#
- list#
- of#
- items#
2023-10-12 03:24:34 +03:00
- y
- z
- c
2023-10-12 22:13:38 +03:00
- > quote
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-14 15:46:42 +03:00
- DONE Done
2023-10-12 03:24:34 +03:00
- Basic inline *bold*, _italic_ and ~striked~
- Marking ==text==
2023-10-14 15:46:42 +03:00
- Code:
2023-10-12 22:56:12 +03:00
- Inline quoting `html < b > code< / b > `
- code blocks
2023-10-13 05:10:17 +03:00
```javascript
2023-10-12 22:56:12 +03:00
var text = 'Hello, world!'
console.log(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-12 22:56:12 +03:00
- Basic task management
2023-10-14 02:42:29 +03:00
- [%] Completion status
- Inline [X] checkboxes [_]
- To do items/blocks
- [_] undone item
_(clicking the checkbox updates the item)_
- [X] done item
- [_] we can also add inline [x] checkboxes and states: [%]
2023-10-12 22:56:12 +03:00
- links
2023-10-12 03:24:34 +03:00
- [example](about:blank)
- https://example.com
2023-10-12 22:56:12 +03:00
- ./path/to/file /path/to -- _not supported yet_
2023-10-12 03:24:34 +03:00
- Tables
- | a | b | c |
| 1 | 2 | 3 |
| 11 | 22 | 33 |
2023-10-12 22:56:12 +03:00
- Symbols -- _should these be ligatures?_
2023-10-12 03:48:46 +03:00
- (i), (c), /!\, ...
- -- and ---
2023-10-12 22:56:12 +03:00
-
- ---
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-14 22:49:02 +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-10-14 22:49:02 +03:00
< span class = "__textarea" > < / span >
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 : -->
