pWiki/experiments/outline-editor/index.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
- ## TODO
  - 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
  - ~serialize~/deserialize
  - ~add optional text styling to nodes~
  - 
- ## TEST
  - 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()">&lt;</button>
		<button onclick="editor.indent().focus()">&gt;</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()">&#709;&#708;</button>
		<button onclick="editor.remove()">&times;</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 : -->
added outline editor experiment... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-25 20:04:53 +03:00			`<html>`
			`<head>`
split out css + minor fix... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-29 02:47:07 +03:00			`<link href="editor.css" rel="stylesheet"/>`
added outline editor experiment... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-25 20:04:53 +03:00			`<style>`

tweaking.... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-10-04 21:54:34 +03:00			`.add-row {`
			`height: 1.2em !important;`
			`}`
added outline editor experiment... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-25 20:04:53 +03:00
			`</style>`
refactoring (not done yet...) Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-27 15:05:34 +03:00			`<script src="generic.js"></script>`
			`<script src="editor.js"></script>`
added outline editor experiment... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-25 20:04:53 +03:00			`<script>`
moved to textarea + added support for code/view processing (currently html <-> text, not FF compatible) Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-27 00:54:43 +03:00
added basic selection -- stub Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-30 17:27:28 +03:00			`var editor`

moved to textarea + added support for code/view processing (currently html <-> text, not FF compatible) Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-27 00:54:43 +03:00			`var setup = function(){`
refactoring (not done yet...) Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-27 15:05:34 +03:00			`window.editor = {`
			`__proto__: Outline,`
			`}.setup(`
added basic selection -- stub Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-30 17:27:28 +03:00			`document.querySelector('.editor')) }`
added outline editor experiment... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-25 20:04:53 +03:00
			`</script>`
			`</head>`
moved to textarea + added support for code/view processing (currently html <-> text, not FF compatible) Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-27 00:54:43 +03:00			`<body onload="setup()">`
added outline editor experiment... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-25 20:04:53 +03:00			`<div class="editor">`
loading works -- now loading code on start + tweaks and notes... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-10-07 17:06:54 +03:00			`<!-- code -->`
			`<div class="code">`
			`- # Outline editor prototype`
			`- ## TODO`
			`- 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`
			`- ~serialize~/deserialize`
			`- ~add optional text styling to nodes~`
			`-`
			`- ## TEST`
			`- 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>`
tweaking.... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-10-04 21:54:34 +03:00			`<!-- toolbar (optional) -->`
minor refactoring... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-10-04 15:40:29 +03:00			`<div class="toolbar">`
fixed focus handling by toolbar + playing/testing markdown handling... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-10-04 15:33:07 +03:00			`<button onclick="editor.deindent().focus()"><</button>`
			`<button onclick="editor.indent().focus()">></button>`
tweaking.... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 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>`
fixed focus handling by toolbar + playing/testing markdown handling... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-10-04 15:33:07 +03:00			`<button onclick="editor.toggleCollapse()?.focus()">˅˄</button>`
moved remove action to a method + cleanup and fixes... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-10-03 16:32:29 +03:00			`<button onclick="editor.remove()">×</button>`
added basic buttons.... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-10-03 16:12:19 +03:00			`</div>`
added outline editor experiment... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-25 20:04:53 +03:00			`</div>`

added basic serialization... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-27 14:08:30 +03:00			`<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>`

tweaking.... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-10-04 21:54:34 +03:00
added outline editor experiment... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com> 2023-09-25 20:04:53 +03:00			`</body>`
			`</html>`
			`<!-- vim:set ts=4 sw=4 : -->`