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-10-23 04:26:00 +03:00
< div class = "editor" autofocus >
2023-10-23 22:55:23 +03:00
<!-- header -->
< div class = "header" > < / div >
2023-10-07 17:06:54 +03:00
<!-- code -->
2023-10-19 16:59:06 +03:00
< textarea 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
2023-10-23 02:28:46 +03:00
- Conboy (Nokia N900's Tomboy clone)
2023-10-23 04:44:30 +03:00
- Bonsai (on PalmOS)
2023-10-30 23:15:11 +03:00
- Google Keep (editor)
2023-10-09 18:44:56 +03:00
-
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-23 04:26:00 +03:00
focused:: true
2023-10-31 17:38:55 +03:00
- BUG: html decode/encode broken...
- `HTMLElement.decode(HTMLElement.encode('a\nb\nc')) -> 'abc'` and not `'a\nb\nc'`!!!
2023-10-22 23:57:19 +03:00
- BUG: mobile browsers behave quite chaotically ignoring parts of the styling...
2023-10-27 16:08:27 +03:00
- FF:
- zooming on edited field
- normal textarea is not sized correctly
- General:
- side margins are a bit too large (account for toolbat to the right)
2023-10-12 23:35:14 +03:00
-
2023-10-12 22:13:38 +03:00
- ## ToDo:
2023-10-29 16:22:38 +03:00
- trailing whitespace is ignored in `.view`... (BUG?)
- this node has a second empty line
- there are several ways to deal with this:#
2023-10-29 16:27:45 +03:00
- remove trailing whitespace completely on refocus (a-la logseq)
2023-10-29 16:22:38 +03:00
- show whitespace in both modes
- keep current behavior
2023-10-29 16:27:45 +03:00
-
_BTW: leading whitespace is shown..._
2023-10-30 23:15:11 +03:00
- add options to save to `.sessionStorage` / `.localStorage`
2023-10-29 16:22:38 +03:00
- Q: should we select text without first focusing??
- _...logseq does not do this either_
2023-10-30 23:15:11 +03:00
- custom element / web component
2023-10-29 15:31:23 +03:00
- DONE data interface:
collapsed:: true
- the "natural" way to pass data is to use the same mechanism as `< textarea > ` the problem is that we can't extend `HTMLTextAreaElement` as it can not have shadow dom (reject?)
- adding an explicit textarea element is an odd requirement (reject?)
- seems that the least bad way to go is to use the `value` attribute
- DONE API: directly mixin Outline?
2023-10-29 16:27:45 +03:00
- `.value` / `.code` should be both updated internally and also load new content when updated externally -- not yet sure how...
2023-10-29 15:31:23 +03:00
- events
- test nesting...
-
2023-10-29 16:22:38 +03:00
- selection
- multiple node selection (via shift+motion)
- touch/mouse (???)
2023-10-26 01:02:27 +03:00
- copy/paste nodes/trees
2023-10-26 23:37:59 +03:00
- numbered lists: add counters to a depth of 6-7...
- _or find a way to make them repeat..._
2023-10-26 01:02:27 +03:00
- FEATURE: read-only mode
2023-10-20 14:53:42 +03:00
- auto-shift done blocks to the end of siblings... (option?)
- ...or should this be `sort:: done` -- i.e. sort children by done status??
- codeblock as a block
_...if only whitespace before/after clear it and style whole block..._
2023-10-23 17:37:53 +03:00
_...might be a good idea to do this with codeblock at start/end of block..._
2023-10-20 14:53:42 +03:00
- 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-16 19:31:28 +03:00
- export html
- embed css
2023-10-23 17:37:53 +03:00
- cleanup html
- generate ideomatic html (???)
2023-10-22 23:39:18 +03:00
- style attrs (see: [attrs](#attributes))
2023-10-13 22:14:36 +03:00
- 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(..)`
2023-10-18 23:30:15 +03:00
- table inline editing a-la code editing -- click cell and edit directly...
2023-10-15 00:50:39 +03:00
- a way to make a block monospace (???)
2023-10-13 22:14:36 +03:00
- Nerd fonts (option???)
2023-10-23 14:41:09 +03:00
- smooth scrolling
2023-10-23 19:38:06 +03:00
- _...this is more complicated than adding `behavior: "smooth"` to `.scrollIntoView(..)` as scrolling animation will get interrupted by next user input..._
- need to cancel animation if things are moving too fast...
- make this generic (???)
2023-10-14 02:42:29 +03:00
- FEATURE? block templates...
collapsed:: true
2023-10-23 17:37:53 +03:00
- something like: `TPL: [_] < editable / > -- < editable / > `
2023-10-14 02:42:29 +03:00
- `TPL:` -- template marker
2023-10-23 17:37:53 +03:00
- `< editable / > ` -- field marker
2023-10-14 02:42:29 +03:00
- each child node will copy the template and allow editing of only fields
- not clear how to handle template changes...
2023-10-23 04:26:00 +03:00
- JSON API
2023-10-20 19:35:52 +03:00
- cli
2023-10-13 22:14:36 +03:00
- Q: do we use \\t for indent? (option???)
- 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-23 22:11:10 +03:00
- search?
2023-10-24 17:35:28 +03:00
- _...not sure if search should be internal or external yet..._
2023-10-29 16:16:21 +03:00
- DONE might be a good idea to focus the prev (empty) node if pressing `Enter` at 0 position
collapsed:: true
- < - place cursor here and press enter
2023-10-26 21:49:10 +03:00
- DONE make `---` block not show list bullets...
2023-10-26 18:11:12 +03:00
- DONE: undo: checkboxes and DONE??
collapsed:: true
_...this should be triggered by text change -- move current implementation to .__editedcode__()??..._
2023-10-26 01:02:27 +03:00
- DONE undo
2023-10-25 15:18:30 +03:00
- DONE crop: make path clickable
2023-10-25 15:04:41 +03:00
- DONE Q: crop: should we control crop via "crop-in"/"crop-out" instead of crop/uncrop??
- _crop-in/crop-out seems more natural..._
2023-10-24 17:35:28 +03:00
- DONE crop: show crop path (and depth)
2023-10-23 19:38:06 +03:00
- DONE over-travel pause -- when going fast over start/end stop...
- DONE focus:
collapsed:: true
- DONE `< editor > .autofocus`
- DONE `focused:: true` attr (`.text(..)`/`.json(..)`/`.load(..)`)
- DONE focusing editor -> focus focused block
- DONE identify a block:
collapsed:: true
- DONE index (flat)
- DONE path (index)
- DONE id
- _the id attr is done, but we still need to get the node via id_
2023-10-23 14:51:27 +03:00
- DONE pgup/pgdown/home/end buttons
2023-10-23 04:26:00 +03:00
- DONE FEATURE: "crop" -- view block tree separately...
2023-10-22 23:39:18 +03:00
- DONE unify attr parsing
collapsed:: true
- _now duplicated in `.parse(..)` and `.__code2html__(..)`_
2023-10-23 17:37:53 +03:00
- might be a good idea to add a special text parse stage and use in on both branches...
2023-10-22 23:39:18 +03:00
- DONE attrs in editor are not parsed correctly (see: [attrs](#attributes))
- DONE multiple attrs are not handled correctly (see: [attrs](#attributes))
2023-10-21 16:01:30 +03:00
- DONE call `.sync()` on all changes...
2023-10-19 03:09:14 +03:00
- DONE show list bullet if node is empty but edited...
collapsed:: true
- _...not sure which is best, so both options are available, see: `editor.css`_
2023-10-19 00:24:36 +03:00
- DONE Q: can we get the caret line in a textarea???
collapsed:: true
- _...this will fix a lot of issues with moving between blocks in edit mode..._
- DONE 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..._
- DONE click to select/edit node must retain click position in text...
2023-10-18 18:40:04 +03:00
- DONE checkbox navigation via `alt-< arrow > `
2023-10-23 17:37:53 +03:00
collapsed:: true
2023-10-18 18:40:04 +03:00
- _might be a good idea to include also TODO/DONE navigation -- not yet sure how to mark undone blocks (i.e. the ones marked with TODO in Logseg)..._
- toggle with `space`
- navigation auto-selects first checkbox
2023-10-15 00:03:22 +03:00
- DONE editor: backsapce/del at start/end of a block should join it with prev/next
- DONE editor: pressing enter in text edit mode should split text into two blocks
- DONE editor: shifting nodes up/down
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-25 15:21:12 +03:00
- Q: Implementation: JSON-based, DOM-based (current) or both?
- implement JSON-based
- compare and decide...
2023-10-14 02:42:29 +03:00
- Plugin architecture
2023-10-14 22:49:02 +03:00
- DONE basic structure
2023-10-23 17:37:53 +03:00
- plugin handler sequencing (see: `< editor > .setup(..)`)
- DONE plugin handler canceling (see: `< editor > .runPlugins(..)`)
2023-10-14 22:49:02 +03:00
- DONE Item parser (`.__code2html__(..)`)
2023-10-19 02:43:35 +03:00
collapsed:: true
2023-10-14 22:49:02 +03:00
- DONE split out
- DONE define a way to extend/stack parsers
2023-10-19 02:43:35 +03:00
- DONE Format parser/generator
collapsed:: true
- DONE split out
2023-10-23 17:37:53 +03:00
- DONE define api (see: `< editor > .__code2text__(..) / < editor > .__text2code__(..)`)
2023-10-13 22:14:36 +03:00
- CSS
- separate out settings
2023-10-19 02:43:35 +03:00
- separate out theming
2023-10-13 22:14:36 +03:00
- Actions -- move user actions (code in `.keyboard`) into methods
- Move to `keyboard.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-18 23:30:15 +03:00
- ## Docs
2023-10-15 00:50:39 +03:00
- ### Controls
- ASAP: these need updating...
- | Key | Action |
| 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-pgup | shift node up |
| s-pgdown | shift node down |
| s-left | collapse node |
| s-right | expand node |
2023-10-18 18:40:04 +03:00
| c-left | prev checkbox |
| c-right | next checkbox |
2023-10-30 18:06:13 +03:00
| space | toggle checkbox |
| a-s | toggle status |
| a-x | toggle status DONE |
| a-r | toggle status REJECT |
2023-10-26 01:29:06 +03:00
| c-z | normal: undo |
| c-s-z | normal: redo |
| c | normal: crop current node |
| enter | normal: edit node |
| | edit: create node below |
| esc | crop: exit crop |
| | edit: exit edit mode |
2023-10-19 00:24:36 +03:00
- ### Formatting
- The formatting mostly adheres to the markdown spec with a few minor differences
-
- Styles:
2023-10-08 02:36:29 +03:00
- # 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-23 17:37:53 +03:00
- > quote
2023-10-11 07:16:18 +03:00
- Notes
2023-10-23 17:37:53 +03:00
- NOTE: a note text
2023-10-11 07:16:18 +03:00
- NOTE:
- a root note can also be empty
- click on the outer border to edit root
2023-10-23 17:37:53 +03:00
- // C-style comment
- ; ASM-style comment
- XXX Highlight
2023-10-30 23:15:11 +03:00
- Status (toggle all via: `alt-s`)
- DONE Done (toggled via: `alt-x`)
- REJECT Reject (toggled via: `alt-r`)
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-23 17:37:53 +03:00
- Inline quoting `html < b > code< / b > `
2023-10-12 22:56:12 +03:00
- 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-19 03:09:14 +03:00
- navigating checkboxes in view mode can be done via `ctrl-left` / `ctrl-right` and toggling is done via `space`
2023-10-12 22:56:12 +03:00
- links
2023-10-22 23:40:33 +03:00
- [link](about:blank)
- [local links](#attributes)
2023-10-12 03:24:34 +03:00
- 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), /!\, ...
2023-10-20 19:00:35 +03:00
- -- and ---
2023-10-22 13:55:41 +03:00
- Attributes:
id:: attributes
- collapsed
collapsed:: true
- a
- b
- c
- id
id:: node-with-id
- combined
id:: combined-several-ids
collapsed:: true
- a
- b
- c
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
2023-10-19 16:59:06 +03:00
- < / textarea >
2023-10-07 17:06:54 +03:00
<!-- outline -->
2023-10-23 14:37:14 +03:00
< div class = "outline" tabindex = "0" > < / 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-10-23 20:46:44 +03:00
< button onclick = "editor.dom.classList.toggle('block-offsets')" > show/hide block offsets< / button >
2023-10-10 20:34:05 +03:00
2023-10-29 15:31:23 +03:00
2023-10-28 22:52:46 +03:00
< hr >
< h1 > Outline editor as web component< / h1 >
< outline-editor value = "
- ## code as part of an attribute
- as long as " quotes" are sanitized in the html, this is the safest">
< / outline-editor >
< hr >
< outline-editor >
< textarea > - ## code enclosed in `< textarea > ` element
- code is treated as-is
2023-10-29 15:53:05 +03:00
- the only exception is the closing textarea tag< / textarea > < / outline-editor >
2023-10-28 22:52:46 +03:00
< hr >
< outline-editor >
2023-10-29 15:53:05 +03:00
- ## raw outline editor `< element> `
2023-10-28 22:52:46 +03:00
- the children are not protected
2023-10-29 15:53:05 +03:00
- any html < elements > are going to be parsed by the browser< / outline-editor >
2023-10-28 22:52:46 +03:00
2023-10-31 17:38:55 +03:00
< hr >
2023-10-28 22:52:46 +03:00
2023-10-31 17:38:55 +03:00
< outline-editor session-storage = "outline-editor-test" > < / outline-editor >
2023-10-04 21:54:34 +03:00
2023-10-29 15:31:23 +03:00
2023-09-25 20:04:53 +03:00
< / body >
< / html >
<!-- vim:set ts=4 sw=4 : -->
