mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-29 10:00:08 +00:00
291 lines
9.1 KiB
HTML
Executable File
291 lines
9.1 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')) }
|
|
|
|
</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
|
|
-
|
|
- // Seems that I unintentionally implemented quite a chunk of the markdown spec ;)
|
|
-
|
|
- ## Bugs:
|
|
- BUG: last node seems to get trash tags added to it's end...
|
|
-
|
|
- ## ToDo:
|
|
- ASAP: checkbox navigation via `alt-<arrow>`
|
|
- _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
|
|
- ASAP: scroll into view is bad...
|
|
- ASAP: mobile browsers behave quite chaotically ignoring parts of the styling...
|
|
- ASAP: need to reach checkboxes via keyboard
|
|
_...not sure how to do this with tab taken..._
|
|
- FEATURE: read-only mode
|
|
- export html
|
|
- embed css
|
|
- cleanup html
|
|
- generate ideomatic html (???)
|
|
- 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(..)`
|
|
- a way to make a block monospace (???)
|
|
- codeblock as a block
|
|
_...if only whitespace before/after clear it and style whole block..._
|
|
_...might be a good idea to do this with codeblock at start/end of block..._
|
|
- Code blocks and bullets:
|
|
- ```
|
|
code
|
|
```
|
|
- _bullet should be either in the middle of the block or at the first line of code (preferred)..._
|
|
- show list bullet if node is empty but edited... (???)
|
|
- editor as a custom element...
|
|
- Nerd fonts (option???)
|
|
- multiple node selection
|
|
- copy/paste nodes/trees
|
|
- undo
|
|
collapsed:: true
|
|
- delete node
|
|
- indent/deindent
|
|
- edit node
|
|
- auto-shift done blocks to the end of siblings... (option?)
|
|
- 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...
|
|
- 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)?
|
|
- Q: should list bullets be on the same level as nodes or offset??
|
|
collapsed:: true
|
|
- 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???
|
|
- empty item height is a bit off...
|
|
- 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
|
|
- 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
|
|
-
|
|
- ## Refactoring:
|
|
- Plugin architecture
|
|
- 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
|
|
- Format parser/generator
|
|
- split out
|
|
- define api
|
|
- experiment with clean _markdown_ as format
|
|
- 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>`
|
|
- Docs
|
|
-
|
|
- ## TEST
|
|
- ### 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 |
|
|
| enter | normal mode: edit node |
|
|
| | edit mode: create node below |
|
|
| esc | exit edit mode |
|
|
- ### 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
|
|
- DONE Done
|
|
- 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
|
|
- [%] 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: [%]
|
|
- 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-->
|
|
<span class="__textarea"></span>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<button onclick="editor.dom.classList.toggle('show-click-zones')">show/hide click zones</button>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 : -->
|