littleeditor.html

<!doctype html>
<html>
<head>
	<title>bililiteRange Editor</title>
	<meta charset="utf-8" />
	<link rel=stylesheet href=../assets/css/littleeditor.css />
	<style>
		button.dirty {
			color: red;
		}
		button.Direction::before {
			content: 'A→';
		}
		button.Direction.rtl::before {
			content: '←א';
		}
		textarea, pre {
			display: none;
		}
		textarea.editor, pre.editor {
			display: block;
		}
	</style>
</head>
<body class=editorcontainer>
	<fieldset>
		<label><input type=radio checked name=editortype value=textarea /> TEXTAREA</label>
		<label><input type=radio  name=editortype value=pre /> PRE contenteditable</label>
	</fieldset>
	<div id=toolbar></div>
	<textarea  class=editor  spellcheck=false >
# The little editor

All commands start with `ctrl-o` (like [evim](https://vimhelp.org/starting.txt.html#evim-keys)).
There are really only three commands:
1. `ctrl-o :` allows entry of any [ex](ex.md) command.
2. `ctrl-o [fF] any-character` Finds the next (for `f`) or previous (for `F`) occurence of the character. Works for printable characters
only, not space, tab or newline.
3. `ctrl-o [verb] [object]` uses `bililiteRange` [`find`](../find.md) to select "objects". Possible values for `verb` include:
 * nothing: go to the beginning of the next object
 * `t`: go to the end of the current object
 * `b`: go to the beginning of the current object
 * `B`: go to the end of the previous object
 * `i`: select the entire current object (but not the separators)
 * `a`: select the entire current object and its separators (for some objects, only the ending separators. see the description of
[`range.bounds('whole', object, true)`](../docs/find.md#boundswhole-separator-regexp-outer)
	
	Possible values for `object` include (see the [documentation](../docs/find.md#options-for-separators) for the definitions of these objects):
	* `w`: word
	* `W`: bigword
	* `s`: sentence
	* `p`: paragraph
	* `[`: section
	* `(`: parentheses
	* `'`: single-quote delimited quote
	* `"`: double-quote delimited quote

	</textarea>
	<pre contenteditable  spellcheck=false ></pre>
	<div id=statusbar><span id=wordcount></span></div>
	<div id=output></div>

	<script src="../dist/editor.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/marked"></script>
	
	<script>
		document.querySelector('pre').textContent = document.querySelector('textarea').textContent;
		const type = (new URL(location.href)).searchParams.get('editortype');
		if (type == 'pre'){
			document.querySelector('textarea').classList.remove('editor');
			document.querySelector('pre').classList.add('editor');
			document.querySelector('[name=editortype][value=pre]').setAttribute('checked', 'checked');
		}

		const editor = document.querySelector('.editor');
		localStorage.setItem('.exrc', `
			map ^s write
			map ^b sendkeys "**{selection}{mark}**"
			map ^r reverse
			map "^o j" join
			map! Save command=write observe=data-savestatus
			map! Global global toggle
			map! Ping append Ping
			map! Spellcheck spellcheck toggle
			map! Direction command="!Toolbar.toggleAttribute (this.element, 'style.direction', ['ltr', 'rtl']);" observe=style.direction title="Toggle Text Direction"
			map! "BiDi Off" command="bidi toggle" title="Toggle the Bidirectional Text Algorithm"
			map! Close xit
			! this.data.trigger()
		`);
		const rng = bililiteRange(editor);
		rng.evim(document.getElementById('toolbar'), document.getElementById('statusbar'));
		
		bililiteRange.ex.createAttributeOption ('global');
		bililiteRange.ex.createAttributeOption ('spellcheck', ['true', 'false']);
		bililiteRange.ex.createAttributeOption ('bidi', ['bidi-override', 'normal'], 'style.unicodeBidi');


		bililiteRange.ex.commands.reverse = function (){
			this.text(this.text().split('\n').map(function(s){
				return s.split(/[ ]+/).reverse().join(' ');
			}).join('\n'));
		};
		
		document.querySelectorAll('[name=editortype]').forEach( el => el.addEventListener('change', () => {
			location.search = `editortype=${el.value}`;
		}));
		
		const output = document.querySelector('#output');
		function parse(){
			output.innerHTML = marked.parse(rng.all());
		}
		editor.addEventListener('input', parse );
		parse();
		function wordcount(){
			var wc = rng.all().split(/\s+/).length - 1;
			document.getElementById('wordcount').textContent = wc+' words';
		}
		editor.addEventListener('input', wordcount );
		wordcount();
				
		addEventListener('quit', evt => {
			document.getElementById('toolbar').remove();
			document.getElementById('statusbar').remove();
			editor.remove();
		});
		
		editor.focus();
	</script>
</body>
</html>