mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-29 18:10:09 +00:00
235 lines
6.4 KiB
HTML
Executable File
235 lines
6.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="css/default.css">
|
|
|
|
<link rel="stylesheet" href="editor.css"/>
|
|
|
|
<style>
|
|
|
|
.add-row {
|
|
height: 1.2em !important;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script src="lib/highlight.min.js"></script>
|
|
|
|
<script src="generic.js"></script>
|
|
<script src="editor.js"></script>
|
|
<script>
|
|
|
|
var editor
|
|
|
|
var setup = function(){
|
|
window.editor = {
|
|
__proto__: Outline,
|
|
}.setup(
|
|
document.querySelector('.editor'))
|
|
|
|
// XXX make this a plugin...
|
|
window.hljs
|
|
&& hljs.highlightAll() }
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="setup()">
|
|
<div class="editor">
|
|
<!-- code -->
|
|
<pre class="code">
|
|
- # Outline editor prototype
|
|
- An outline-based markdown editor experiment
|
|
- ### Infuences::
|
|
- Logseq
|
|
- Tomboy
|
|
- Bonsai
|
|
-
|
|
- ## Bugs:
|
|
- BUG: ASAP: editor: `-` at start of line is interpreted as block marker...
|
|
- need to either:
|
|
- quote the `-` in .text() -- _preferreed_
|
|
- split the lines starting with `-` into nested nodes (a-la .load())
|
|
- BUG? pressing down from a longer line will jump over a shorter line
|
|
- to reproduce\:
|
|
- here is the line to jump from, for example from here
|
|
an we'll not get here...
|
|
-
|
|
- ## ToDo:
|
|
- 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: use \\t for indent...
|
|
- ASAP: scroll into view is bad...
|
|
- on item click, place the cursor where it was clicked before the code expanded...
|
|
- ~editor: semi-live update styles~
|
|
- need to reach checkboxes via keyboard
|
|
- persistent empty first/last node (a button to create a new node)
|
|
- add completion percentage to blocks with todo's nested
|
|
- _...use `[%]`, `%%`, or something similar..._
|
|
- read-only mode
|
|
- should bulets be on the same level as nodes or offset??
|
|
- A) justified to bullet:
|
|
* list item
|
|
* list item
|
|
block text
|
|
- B) justified to text _(current)_:
|
|
* list item
|
|
* list item
|
|
block text
|
|
- NOTE: this is only a problem if making list-items manually -- disable???
|
|
- FF: figure out a way to draw expand/collapse bullets without the use of CSS' `:has(..)`
|
|
- Nerd fonts (options?)
|
|
- ~do a better expand/collapse icons~
|
|
- ~loading from DOM -- fill textarea~
|
|
- ~focus management~
|
|
- ~mouse/touch controls~
|
|
- ~navigation~
|
|
- ~expand/collapse subtree~
|
|
- ~shift subtree up/down~
|
|
- ~create node~
|
|
- ~edit node~
|
|
- multiple node selection
|
|
- copy/paste nodes/trees
|
|
- undo
|
|
collapsed:: true
|
|
- delete node
|
|
- indent/deindent
|
|
- edit node
|
|
- 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
|
|
- Lists::
|
|
- bullet:
|
|
- a:
|
|
collapsed:: true
|
|
- bullets:
|
|
- in:
|
|
- very:
|
|
- deep:
|
|
- list:
|
|
- of:
|
|
- items:
|
|
- b
|
|
- c
|
|
- numbered#
|
|
- a
|
|
- b#
|
|
- x#
|
|
collapsed:: true
|
|
- bullets#
|
|
- in#
|
|
- very#
|
|
- deep#
|
|
- list#
|
|
- of#
|
|
- items#
|
|
- y
|
|
- z
|
|
- c
|
|
- > quote
|
|
- Notes
|
|
- NOTE: a note text
|
|
- NOTE:
|
|
- a root note can also be empty
|
|
- click on the outer border to edit root
|
|
- // C-style comment
|
|
- ; ASM-style comment
|
|
- XXX Highlight
|
|
- Basic inline *bold*, _italic_ and ~striked~
|
|
- Marking ==text==
|
|
- Code
|
|
- Inline quoting `html <b>code</b>`
|
|
- code blocks
|
|
```javascript
|
|
var text = 'Hello, world!'
|
|
|
|
console.log(text)
|
|
```
|
|
- Line
|
|
- ---
|
|
- Markers: ASAP, BUG, FIX, HACK, STUB, WARNING, and CAUTION
|
|
- Basic task management
|
|
- 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
|
|
- links
|
|
- [example](about:blank)
|
|
- https://example.com
|
|
- ./path/to/file /path/to -- _not supported yet_
|
|
- Tables
|
|
- | a | b | c |
|
|
| 1 | 2 | 3 |
|
|
| 11 | 22 | 33 |
|
|
- Symbols -- _should these be ligatures?_
|
|
- (i), (c), /!\, ...
|
|
- -- and ---
|
|
-
|
|
- ---
|
|
- ### 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 </pre>
|
|
<!-- 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>
|
|
|
|
<button onclick="editor.dom.classList.toggle('show-click-zones')">show/hide click zones</button>
|
|
|
|
<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 : -->
|