mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-31 19:10:08 +00:00
142 lines
3.6 KiB
HTML
Executable File
142 lines
3.6 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link href="editor.css" rel="stylesheet"/>
|
|
<style>
|
|
|
|
.add-row {
|
|
height: 1.2em !important;
|
|
}
|
|
|
|
</style>
|
|
<script src="generic.js"></script>
|
|
<script src="editor.js"></script>
|
|
<script>
|
|
|
|
var editor
|
|
|
|
var setup = function(){
|
|
window.editor = {
|
|
__proto__: Outline,
|
|
}.setup(
|
|
document.querySelector('.editor')) }
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="setup()">
|
|
<div class="editor">
|
|
<!-- code -->
|
|
<div class="code">
|
|
- # Outline editor prototype
|
|
- An outline-based markdown editor experiment
|
|
- ### Infuences::
|
|
- Logseq
|
|
- Tomboy
|
|
- Bonsai
|
|
-
|
|
- ## ToDo
|
|
- do a better expand/collapse icon on hover
|
|
- read-only mode
|
|
- 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_
|
|
- persistent empty first/last node (a button to create a new node)
|
|
- ~loading from DOM -- fill textarea~
|
|
- ~focus management~
|
|
- ~mouse/touch controls~
|
|
- ~navigation~
|
|
- ~expand/collapse subtree~
|
|
- ~shift subtree up/down~
|
|
- ~create node~
|
|
- ~edit node~
|
|
- shifting nodes up/down
|
|
- multiple node selection
|
|
- undo
|
|
- delete node
|
|
- indent/deindent
|
|
- edit node
|
|
- copy/paste nodes/trees
|
|
- markdown: tables
|
|
- empty item height is a bit off...
|
|
- ~serialize~/deserialize
|
|
- ~add optional text styling to nodes~
|
|
-
|
|
- ## TEST
|
|
- Formatting:
|
|
- Styles
|
|
- # Heading 1
|
|
- ## Heading 2
|
|
- ### Heading 3
|
|
- #### Heading 4
|
|
- ##### Heading 5
|
|
- ###### Heading 6
|
|
- Text
|
|
- List::
|
|
- a
|
|
- b
|
|
- c
|
|
- // C-style comment
|
|
- ; ASM-style comment
|
|
- XXX Highlight
|
|
- Line
|
|
- ---
|
|
- Basic inline *bold*, _italic_ and ~striked~
|
|
- To do items
|
|
- TODO undone item
|
|
_(clicking the checkbox updates the item)_
|
|
- DONE done item
|
|
- [_] a different way to draw a checkbox
|
|
- Inline [X] checkboxes [_]
|
|
- 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>
|
|
<!-- outline -->
|
|
<div class="outline"></div>
|
|
<!-- toolbar (optional) -->
|
|
<div class="toolbar">
|
|
<button onclick="editor.deindent().focus()"><</button>
|
|
<button onclick="editor.indent().focus()">></button>
|
|
<button onclick="editor.Block('before').focus()" class="add-row">+</button>
|
|
<hr>
|
|
<button onclick="editor.Block('after').focus()" class="add-row">+</button>
|
|
<button onclick="editor.toggleCollapse()?.focus()">˅˄</button>
|
|
<button onclick="editor.remove()">×</button>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<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>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 : -->
|