├── LICENSE
├── README.md
├── dist
    ├── cobalt.editor-lite.js
    ├── cobalt.editor.js
    └── cobalt.js
├── docs
    ├── api.md
    ├── cobalt-fast-render.txt
    ├── methods.txt
    └── todo.txt
├── examples
    ├── cobalt.document.html
    ├── cobalt.editor-lite.html
    ├── cobalt.editor.html
    └── styles.css
├── mjs
    ├── cobalt.annotation.js
    ├── cobalt.annotationlist.js
    ├── cobalt.document.js
    ├── cobalt.editor.js
    ├── cobalt.editor.keyboard.js
    ├── cobalt.editor.selection.js
    ├── cobalt.fragment.js
    ├── cobalt.html.js
    ├── cobalt.js
    ├── cobalt.mime.js
    ├── cobalt.range.js
    └── cobalt.singlerange.js
├── package.json
├── rollup.config.js
├── src
    ├── cobalt.annotation.js
    ├── cobalt.dom.js
    ├── cobalt.editor-lite.js
    ├── cobalt.editor.js
    ├── cobalt.editor.selection.js
    ├── cobalt.fragment.js
    ├── cobalt.html.js
    ├── cobalt.js
    ├── cobalt.keyboard.js
    ├── cobalt.mime.js
    └── cobalt.range.js
├── test
    ├── cobalt.annotation.js
    ├── cobalt.fragment.js
    ├── cobalt.html.js
    └── cobalt.range.js
└── webpack.config.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Auke
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # cobalt
 2 | A radically simpler way to markup documents.
 3 | 
 4 | Cobalt is a follow up on [Hope](https://poef.github.io/hope/). It is a very simple implementation of 
 5 | Ted Nelson's ['Edit Decision List'](https://en.wikipedia.org/wiki/Edit_decision_list) concept for markup.
 6 | 
 7 | Cobalt is a research implementation, to explore this concept better. But Hope has found its way into
 8 | production code. It is the engine of change in [SimplyEdit](https://simplyedit.io/). This is because
 9 | the browser API for contentEditable (the WYSIWYG editor built into almost all browsers) is pretty useless.
10 | If you want to implement your own replacement for the [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) 
11 | API, you'll need to apply the change to the DOM yourself. This is not trivial. With a good 1 to 1 translation 
12 | from html to Hope and back, applying changes to the DOM do become trivial.
13 | 
14 | ## Why?
15 | 
16 | There are many subtle issues with the way markup in general and HTML in particular works. But the most important 
17 | issue is about editing. HTML was designed to be written in a text editor, not in a What-You-See-Is-What-You-Get 
18 | (WYSIWYG) editor.
19 | 
20 | So to be able to see which part of a text has which markup applied to it, the natural solution is to wrap 
21 | that part in a start and end tag. To see which start tag is ended by the end tag, the end tag re-states the tag 
22 | name. So you get markup like this: `<em>italic text</em>`.
23 | 
24 | To add an extra layer of markup, you add another start and end tag. But these tags may not overlap. You cannot 
25 | do this: `<em>italic and <strong>bold</em> text</strong>`. Instead you do this: 
26 | `<em>italic and <strong>bold</strong></em><strong> text</strong>`. 
27 | 
28 | In effect you are building a tree structure. When this tree structure gets a bit more complex, it becomes 
29 | difficult to follow in a text editor, unless you indent the markup. Each level of markup is indented, so the 
30 | tree becomes visible. But this adds extra whitespace and linefeeds, that are only there to allow you to indent 
31 | the markup.
32 | 
33 | ## Results so far
34 | 
35 | I've been working on Hope and later Cobalt for quite some time, so what have I learned so far?
36 | 
37 | 


--------------------------------------------------------------------------------
/dist/cobalt.editor-lite.js:
--------------------------------------------------------------------------------
 1 | (function (factory) {
 2 |   typeof define === 'function' && define.amd ? define(factory) :
 3 |   factory();
 4 | }((function () { 'use strict';
 5 | 
 6 |   /*
 7 |   TODO:
 8 |   - add obligatory parents/children
 9 |     overwrite these with the correct tags/entries when available
10 |   - create a hook system that allows alternative parsing and rendering of elements
11 |     e.g. when parsing html turn <button><i class="fa fa-close"></i></button> into
12 |     a cobalt-html-1 element, that renders the same html again. This allows you to keep
13 |     nested html elements without text content.
14 |   - allow the same hook system to render alternative elements when html won't allow the
15 |     original.
16 |     e.g. two overlapping anchors, render the overlapping part as
17 |     <cobalt-anchor href="x">text</cobalt-anchor>. Which combined with some javascript
18 |     allows you to render and follow overlapping links.
19 |   */
20 | 
21 |       /**
22 |        * These rules define the behaviour of the rendering as well as the editor.
23 |        */
24 |       var rules = {
25 |           block: ['h1','h2','h3','p','ol','ul','li','blockquote','hr','div'],
26 |           inline: ['em','strong','a','img','br','span'],
27 |           obligatoryChild: {
28 |               'ol': ['li'],
29 |               'ul': ['li']
30 |           },
31 |           obligatoryParent: {
32 |               'li': ['ol','ul']
33 |           },
34 |           nextTag: {
35 |               'h1' : 'p',
36 |               'h2' : 'p',
37 |               'h3' : 'p',
38 |               'p'  : 'p',
39 |               'li' : 'li'
40 |           },
41 |           cannotHaveChildren: {
42 |               'br' : true,
43 |               'img': true,
44 |               'hr' : true
45 |           },
46 |           cannotHaveText: {
47 |               'ul': true,
48 |               'ol': true
49 |           },
50 |           specialRules: {
51 |               'a': function(node) {
52 |                   do {
53 |                       if (node.tagName && node.tagName=='a') {
54 |                           return false;
55 |                       }
56 |                       node = node.parentNode;
57 |                   } while(node);
58 |                   return true;
59 |               }
60 |           }
61 |       };
62 |       rules.alltags = rules.block.concat(rules.inline);
63 |       rules.nesting = {
64 |           'h1':         rules.inline,
65 |           'h2':         rules.inline,
66 |           'h3':         rules.inline,
67 |           'p':          rules.inline,
68 |           'ol':         ['li'],
69 |           'ul':         ['li'],
70 |           'li':         rules.alltags.filter(function(tag) { return tag!='li'; }),
71 |           'blockquote': rules.alltags,
72 |           'div':        rules.alltags,
73 |           'em':         rules.inline,
74 |           'strong':     rules.inline,
75 |           'span':       rules.inline,
76 |           'a':          rules.inline.filter(function(tag) { return tag!='a'; })
77 |       };
78 | 
79 | })));
80 | 


--------------------------------------------------------------------------------
/dist/cobalt.editor.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// The module cache
  3 | /******/ 	var installedModules = {};
  4 | 
  5 | /******/ 	// The require function
  6 | /******/ 	function __webpack_require__(moduleId) {
  7 | 
  8 | /******/ 		// Check if module is in cache
  9 | /******/ 		if(installedModules[moduleId])
 10 | /******/ 			return installedModules[moduleId].exports;
 11 | 
 12 | /******/ 		// Create a new module (and put it into the cache)
 13 | /******/ 		var module = installedModules[moduleId] = {
 14 | /******/ 			exports: {},
 15 | /******/ 			id: moduleId,
 16 | /******/ 			loaded: false
 17 | /******/ 		};
 18 | 
 19 | /******/ 		// Execute the module function
 20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 21 | 
 22 | /******/ 		// Flag the module as loaded
 23 | /******/ 		module.loaded = true;
 24 | 
 25 | /******/ 		// Return the exports of the module
 26 | /******/ 		return module.exports;
 27 | /******/ 	}
 28 | 
 29 | 
 30 | /******/ 	// expose the modules object (__webpack_modules__)
 31 | /******/ 	__webpack_require__.m = modules;
 32 | 
 33 | /******/ 	// expose the module cache
 34 | /******/ 	__webpack_require__.c = installedModules;
 35 | 
 36 | /******/ 	// __webpack_public_path__
 37 | /******/ 	__webpack_require__.p = "";
 38 | 
 39 | /******/ 	// Load entry module and return exports
 40 | /******/ 	return __webpack_require__(0);
 41 | /******/ })
 42 | /************************************************************************/
 43 | /******/ ([
 44 | /* 0 */
 45 | /***/ function(module, exports, __webpack_require__) {
 46 | 
 47 | 	cobalt.editor = (function(self) {
 48 | 
 49 | 
 50 | 	    function cobaltEditor(el, debug)
 51 | 	    {
 52 | 	        var editor = this;
 53 | 	        this.container = ( typeof el == 'string' ? document.querySelector(el) : el );
 54 | 	        this.container.contentEditable = true;
 55 | 	        this.fragment  = cobalt.fragment('','');
 56 | 	        this.selection = cobalt.editor.selection(this);
 57 | 	        this.container.addEventListener('keypress', function(evt) {
 58 | 	            handleKeyPressEvent.call(editor, evt);
 59 | 	        });
 60 | 	        this.container.addEventListener('keydown', function(evt) {
 61 | 	            handleKeyDownEvent.call(editor, evt);
 62 | 	        });
 63 | 	        this.mode = {
 64 | 	            strong: false,
 65 | 	            em: false,
 66 | 	            u: false
 67 | 	        };
 68 | 	        if (debug) {
 69 | 	            this.debug = (typeof debug=='string' ? document.querySelector(debug) : debug);
 70 | 	        }
 71 | 	    }
 72 | 
 73 | 	    cobaltEditor.prototype = {
 74 | 	        constructor: cobaltEditor,
 75 | 	        focus: function() {
 76 | 	            this.container.focus();
 77 | 	        },
 78 | 	        enterRange: function() {
 79 | 	            var fragment = this.fragment;
 80 | 	            var enters = [];
 81 | 	            var range = fragment.search(/^.*$/gm);
 82 | 	            for (var i=0,l=range.ranges.length;i<l;i++) {
 83 | 	                enters.push(range.ranges[i]);
 84 | 	            }
 85 | 	            enters = cobalt.range(enters).invert(fragment.text.length);
 86 | 	            return enters;
 87 | 	        },
 88 | 	        render: function(sel) {
 89 | 	            var fragment = this.fragment;
 90 | 	            var preAnnotations = '';
 91 | 	            var range = fragment.search(/^.*$/gm);
 92 | 	            for ( var i=0,l=range.ranges.length;i<l;i++) {
 93 | 	                preAnnotations += range.ranges[i]+':p\n';
 94 | 	            }
 95 | 
 96 | 	            var range = fragment.search(/^[0-9]+\. .*$/gm);
 97 | 	            if (range && range.count) {
 98 | 	                preAnnotations += range.start+'-'+range.end+':ol\n';
 99 | 	                for ( var i=0,l=range.ranges.length;i<l;i++) {
100 | 	                    preAnnotations += range.ranges[i]+':li\n';
101 | 	                }
102 | 	            }
103 | 	//            var range = fragment.search(/^[0-9]+\. /gm);
104 | 	//            preAnnotations += range+':span class="hidden"\n';
105 | 
106 | 	            fragment = cobalt.fragment(fragment.text, preAnnotations+fragment.annotations);
107 | 	            var html = cobalt.html.render(fragment);
108 | 	            this.container.innerHTML = html+'\n';// extra \n is to give the browser room for a cursor
109 | 	            if (sel) {
110 | 	                var editor = this;
111 | 	                //editor.selection.set(sel.range.collapse(), sel.range.start);
112 | 	                editor.selection.set(sel.range, sel.cursor);
113 | 	                if (editor.debug) {
114 | 	                    editor.debug.innerText = '['+sel.range.start+','+sel.range.end+"]\n"+fragment;
115 | 	                }
116 | 	            }
117 | 	        },
118 | 	        allowmap: {
119 | 	            'ArrowLeft':true,
120 | 	            'ArrowRight':true,
121 | 	            'ArrowUp':true,
122 | 	            'ArrowDown':true,
123 | 	            'PageUp':true,
124 | 	            'PageDown':true,
125 | 	            'Home':true,
126 | 	            'End':true,
127 | 	            'Shift+ArrowLeft':true,
128 | 	            'Shift+ArrowRight':true,
129 | 	            'Shift+ArrowUp':true,
130 | 	            'Shift+ArrowDown':true,
131 | 	            'Shift+PageUp':true,
132 | 	            'Shift+PageDown':true,
133 | 	            'Shift+Home':true,
134 | 	            'Shift+End':true,
135 | 	            'Ctrl+ArrowLeft':true,
136 | 	            'Ctrl+ArrowRight':true,
137 | 	            'Ctrl+ArrowUp':true,
138 | 	            'Ctrl+ArrowDown':true,
139 | 	            'Ctrl+PageUp':true,
140 | 	            'Ctrl+PageDown':true,
141 | 	            'Ctrl+Home':true,
142 | 	            'Ctrl+End':true
143 | 	        },
144 | 	        keymap: {
145 | 	            'Backspace': function(sel) {
146 | 	                if ( !sel.range.size ) {
147 | 	                    sel.range = cobalt.range(sel.range.start - 1, sel.range.end);
148 | 	                }
149 | 	                this.fragment = this.fragment.delete(sel.range);
150 | 	                sel.range = sel.range.collapse();
151 | 	                this.render(sel);
152 | 	            },
153 | 	            'Delete': function(sel) {
154 | 	                if ( !sel.range.size ) {
155 | 	                    sel.range = cobalt.range(sel.range.start, sel.range.end+1);
156 | 	                }
157 | 	                this.fragment = this.fragment.delete(sel.range);
158 | 	                sel.range = sel.range.collapse();
159 | 	                this.render(sel);
160 | 	            },
161 | 	            'Enter': function(sel) {
162 | 	                this.fragment = this.fragment.insert(sel.range, "\n");
163 | 	                sel.range = sel.range.collapse().move(1);
164 | 	                sel.cursor = sel.range.end;
165 | 	                this.render(sel);
166 | 	            },
167 | 	            'Control+b': function(sel) {
168 | 	                this.toggle(sel.range, 'strong', sel.cursor);
169 | 	                this.render(sel);
170 | 	            },
171 | 	            'Control+i': function(sel) {
172 | 	                this.toggle(sel.range, 'em', sel.cursor);
173 | 	                this.render(sel);
174 | 	            },
175 | 	            'Control+1': function(sel) {
176 | 	                this.fragment = this.fragment.apply(sel.range.exclude(this.enterRange()), 'h1');
177 | 	                this.render(sel);
178 | 	            },
179 | 	            'Control+2': function(sel) {
180 | 	                this.fragment = this.fragment.apply(sel.range, 'h2');
181 | 	                this.render(sel);
182 | 	            }
183 | 	        },
184 | 	        toggle: function(range, tag, cursor) {
185 | 	            var editor = this;
186 | 	            if (range.size===0) {
187 | 	                this.mode[tag] = !this.mode[tag];
188 | 	                return;
189 | 	            }
190 | 
191 | 	            var adjoinedRange = function(r,s) {
192 | 	                var x = r.join(s);
193 | 	                return (x.count <= r.count ? x : false);
194 | 	            };
195 | 
196 | 	            var overlaps = function(r) {
197 | 	                return editor.fragment.annotations.filter(function(a) {
198 | 	                    if (a.tag==tag && adjoinedRange(a.range,r)) {
199 | 	                        return true;
200 | 	                    }
201 | 	                });
202 | 	            };
203 | 
204 | 	            var overlap = overlaps(range);
205 | 	            if (overlap.count) {
206 | 	                if (overlap.list[0].range.intersect(range).size) {
207 | 	                    // echte overlap
208 | 	                    for (var i=0;i<overlap.list.length;i++) {
209 | 	                        this.fragment = this.fragment.remove(overlap.list[i].range, tag);
210 | 	                        this.fragment = this.fragment.apply(overlap.list[i].range.exclude(range), tag);
211 | 	                    }
212 | 	                } else {
213 | 	                    // alleen adjoined
214 | 	                    var combinedRange = range;
215 | 	                    for (var i=0;i<overlap.list.length;i++) {
216 | 	                        this.fragment = this.fragment.remove(overlap.list[i].range, tag);
217 | 	                        combinedRange = combinedRange.join(overlap.list[i].range);
218 | 	                    }
219 | 	                    this.fragment = this.fragment.apply(combinedRange, tag)
220 | 	                }
221 | 	            } else {
222 | 	                this.fragment = this.fragment.apply(range, tag);    
223 | 	            }
224 | 	        },
225 | 	        append: function(sel, string) {
226 | 	            this.fragment = this.fragment.insert(sel.range, string);
227 | 	            sel.range = sel.range.collapse().move(1);
228 | 	            sel.cursor = sel.range.end;
229 | 	            return sel;
230 | 	        }
231 | 	    }
232 | 
233 | 
234 | 	    function handleKeyPressEvent(evt)
235 | 	    {
236 | 	        if ( !evt.ctrlKey && !evt.altKey ) {
237 | 	            var sel  = this.selection.get();
238 | 	            var char = cobalt.keyboard.getCharacter(evt);
239 | 	            if (char) {
240 | 	                sel =this.append(sel, char);
241 | 	                this.render(sel);
242 | 	            }
243 | 	        }
244 | 	        var key = cobalt.keyboard.getKey(evt);
245 | 	        if (!this.allowmap[key]) {
246 | 	            evt.preventDefault();
247 | 	            evt.stopPropagation();
248 | 	            return false;
249 | 	        }
250 | 	    }
251 | 
252 | 	    function handleKeyDownEvent(evt)
253 | 	    {
254 | 	        var key = cobalt.keyboard.getKey(evt);
255 | 	        console.log(key);
256 | 	        if ( this.keymap[key] ) {
257 | 	            var sel = this.selection.get();
258 | 	            this.keymap[key].call(this, sel);
259 | 	            evt.preventDefault();
260 | 	            evt.stopPropagation();
261 | 	            return false;
262 | 	        }
263 | 	    }
264 | 
265 | 	    self.create = function(el, debug)
266 | 	    {
267 | 	        var editor = new cobaltEditor(el, debug);
268 | 	        editor.render();
269 | 	        return editor;
270 | 	    };
271 | 
272 | 	    return self;
273 | 	})(cobalt.editor||{});
274 | 
275 | 	cobalt.keyboard = __webpack_require__(1);
276 | 	cobalt.editor.selection = __webpack_require__(2);
277 | 
278 | /***/ },
279 | /* 1 */
280 | /***/ function(module, exports) {
281 | 
282 | 	module.exports = (function(self) {
283 | 
284 | 		var keyCodes = [];
285 | 		keyCodes[3]  = 'Cancel';
286 | 		keyCodes[6]  = 'Help';
287 | 		keyCodes[8]  = 'Backspace';
288 | 		keyCodes[9]  = 'Tab';
289 | 		keyCodes[12] = 'Numlock-5';
290 | 		keyCodes[13] = 'Enter';
291 | 
292 | 		keyCodes[16] = 'Shift';
293 | 		keyCodes[17] = 'Control';
294 | 		keyCodes[18] = 'Alt';
295 | 		keyCodes[19] = 'Pause';
296 | 		keyCodes[20] = 'CapsLock';
297 | 		keyCodes[21] = 'KanaMode'; //HANGUL
298 | 
299 | 		keyCodes[23] = 'JunjaMode';
300 | 		keyCodes[24] = 'FinalMode';
301 | 		keyCodes[25] = 'HanjaMode'; //KANJI
302 | 
303 | 		keyCodes[27] = 'Escape';
304 | 		keyCodes[28] = 'Convert';
305 | 		keyCodes[29] = 'NonConvert';
306 | 		keyCodes[30] = 'Accept';
307 | 		keyCodes[31] = 'ModeChange';
308 | 		keyCodes[32] = 'Spacebar';
309 | 		keyCodes[33] = 'PageUp';
310 | 		keyCodes[34] = 'PageDown';
311 | 		keyCodes[35] = 'End';
312 | 		keyCodes[36] = 'Home';
313 | 		keyCodes[37] = 'ArrowLeft';
314 | 		keyCodes[38] = 'ArrowUp';
315 | 		keyCodes[39] = 'ArrowRight'; // opera has this as a "'" as well...
316 | 		keyCodes[40] = 'ArrowDown';
317 | 		keyCodes[41] = 'Select';
318 | 		keyCodes[42] = 'Print';
319 | 		keyCodes[43] = 'Execute';
320 | 		keyCodes[44] = 'PrintScreen'; // opera ';';
321 | 		keyCodes[45] = 'Insert'; // opera has this as a '-' as well...
322 | 		keyCodes[46] = 'Delete'; // opera - ',';
323 | 		keyCodes[47] = '/'; // opera
324 | 
325 | 		keyCodes[59] = ';';
326 | 		keyCodes[60] = '<';
327 | 		keyCodes[61] = '=';
328 | 		keyCodes[62] = '>';
329 | 		keyCodes[63] = '?';
330 | 		keyCodes[64] = '@';
331 | 
332 | 		keyCodes[91] = 'OS'; // opera '[';
333 | 		keyCodes[92] = 'OS'; // opera '\\';
334 | 		keyCodes[93] = 'ContextMenu'; // opera ']';
335 | 		keyCodes[95] = 'Sleep';
336 | 		keyCodes[96] = '`';
337 | 
338 | 		keyCodes[106] = '*'; // keypad
339 | 		keyCodes[107] = '+'; // keypad
340 | 		keyCodes[109] = '-'; // keypad
341 | 		keyCodes[110] = 'Separator';
342 | 		keyCodes[111] = '/'; // keypad
343 | 
344 | 		keyCodes[144] = 'NumLock';
345 | 		keyCodes[145] = 'ScrollLock';
346 | 
347 | 		keyCodes[160] = '^';
348 | 		keyCodes[161] = '!';
349 | 		keyCodes[162] = '"';
350 | 		keyCodes[163] = '#';
351 | 		keyCodes[164] = '$';
352 | 		keyCodes[165] = '%';
353 | 		keyCodes[166] = '&';
354 | 		keyCodes[167] = '_';
355 | 		keyCodes[168] = '(';
356 | 		keyCodes[169] = ')';
357 | 		keyCodes[170] = '*';
358 | 		keyCodes[171] = '+';
359 | 		keyCodes[172] = '|';
360 | 		keyCodes[173] = '-';
361 | 		keyCodes[174] = '{';
362 | 		keyCodes[175] = '}';
363 | 		keyCodes[176] = '~';
364 | 
365 | 		keyCodes[181] = 'VolumeMute';
366 | 		keyCodes[182] = 'VolumeDown';
367 | 		keyCodes[183] = 'VolumeUp';
368 | 
369 | 		keyCodes[186] = ';';
370 | 		keyCodes[187] = '=';
371 | 		keyCodes[188] = ',';
372 | 		keyCodes[189] = '-';
373 | 		keyCodes[190] = '.';
374 | 		keyCodes[191] = '/';
375 | 		keyCodes[192] = '`';
376 | 
377 | 		keyCodes[219] = '[';
378 | 		keyCodes[220] = '\\';
379 | 		keyCodes[221] = ']';
380 | 		keyCodes[222] = "'";
381 | 		keyCodes[224] = 'Meta';
382 | 		keyCodes[225] = 'AltGraph';
383 | 
384 | 		keyCodes[246] = 'Attn';
385 | 		keyCodes[247] = 'CrSel';
386 | 		keyCodes[248] = 'ExSel';
387 | 		keyCodes[249] = 'EREOF';
388 | 		keyCodes[250] = 'Play';
389 | 		keyCodes[251] = 'Zoom';
390 | 		keyCodes[254] = 'Clear';
391 | 
392 | 		// a-z
393 | 		for ( var i=65; i<=90; i++ ) {
394 | 			keyCodes[i] = String.fromCharCode( i ).toLowerCase();
395 | 		}
396 | 
397 | 		// 0-9
398 | 		for ( var i=48; i<=57; i++ ) {
399 | 			keyCodes[i] = String.fromCharCode( i );
400 | 		}
401 | 		// 0-9 keypad
402 | 		for ( var i=96; i<=105; i++ ) {
403 | 			keyCodes[i] = ''+(i-95);
404 | 		}
405 | 
406 | 		// F1 - F24
407 | 		for ( var i=112; i<=135; i++ ) {
408 | 			keyCodes[i] = 'F'+(i-111);
409 | 		}
410 | 
411 | 		function convertKeyNames( key ) {
412 | 			switch ( key ) {
413 | 				case ' ':
414 | 					return 'Spacebar';
415 | 				case 'Esc' :
416 | 					return 'Escape';
417 | 				case 'Left' :
418 | 				case 'Up' :
419 | 				case 'Right' :
420 | 				case 'Down' :
421 | 					return 'Arrow'+key;
422 | 				case 'Del' :
423 | 					return 'Delete';
424 | 				case 'Scroll' :
425 | 					return 'ScrollLock';
426 | 				case 'MediaNextTrack' :
427 | 					return 'MediaTrackNext';
428 | 				case 'MediaPreviousTrack' :
429 | 					return 'MediaTrackPrevious';
430 | 				case 'Crsel' :
431 | 					return 'CrSel';
432 | 				case 'Exsel' :
433 | 					return 'ExSel';
434 | 				case 'Zoom' :
435 | 					return 'ZoomToggle';
436 | 				case 'Multiply' :
437 | 					return '*';
438 | 				case 'Add' :
439 | 					return '+';
440 | 				case 'Subtract' :
441 | 					return '-';
442 | 				case 'Decimal' :
443 | 					return '.';
444 | 				case 'Divide' :
445 | 					return '/';
446 | 				case 'Apps' :
447 | 					return 'Menu';
448 | 				default:
449 | 					return key;
450 | 			}
451 | 		}
452 | 
453 | 		self.getKey = function( evt ) {
454 | 			var keyInfo = '';
455 | 			if ( evt.ctrlKey && evt.keyCode != 17 ) {
456 | 				keyInfo += 'Control+';
457 | 			}
458 | 			if ( evt.metaKey && evt.keyCode != 224 ) {
459 | 				keyInfo += 'Meta+';
460 | 			}
461 | 			if ( evt.altKey && evt.keyCode != 18 ) {
462 | 				keyInfo += 'Alt+';
463 | 			}
464 | 			if ( evt.shiftKey && evt.keyCode != 16 ) {
465 | 				keyInfo += 'Shift+';
466 | 			}
467 | 			// evt.key turns shift+a into A, while keeping shiftKey, so it becomes Shift+A, instead of Shift+a.
468 | 			// so while it may be the future, i'm not using it here.
469 | 			if ( evt.charCode ) {
470 | 				keyInfo += String.fromCharCode( evt.charCode ).toLowerCase();
471 | 			} else if ( evt.keyCode ) {
472 | 				if ( typeof keyCodes[evt.keyCode] == 'undefined' ) {
473 | 					keyInfo += '('+evt.keyCode+')';
474 | 				} else {
475 | 					keyInfo += keyCodes[evt.keyCode];
476 | 				}
477 | 			} else {
478 | 				keyInfo += 'Unknown';
479 | 			}
480 | 			return keyInfo;
481 | 		}
482 | 
483 | 		self.listen = function( el, key, callback, capture ) {
484 | 			return el.addEventListener('keydown', function(evt) {
485 | 				var  pressedKey = self.getKey( evt );
486 | 				if ( key == pressedKey ) {
487 | 					callback.call( el, evt );
488 | 				}
489 | 			}, capture);
490 | 		}
491 | 
492 | 		self.getCharacter = function(evt) {
493 | 			evt = evt || window.event;
494 | 			if ( evt.which!==0 && !evt.ctrlKey && !evt.metaKey && !evt.altKey ) {
495 | 	    		return String.fromCharCode(evt.which);
496 | 	    	}
497 | 		}
498 | 
499 | 		return self;
500 | 	} )( cobalt.keyboard || {} );
501 | 
502 | /***/ },
503 | /* 2 */
504 | /***/ function(module, exports) {
505 | 
506 | 	module.exports = function(editor) {
507 | 	    var treeWalker = document.createTreeWalker(
508 | 	        editor.container,
509 | 	        NodeFilter.SHOW_TEXT,
510 | 	        function(node) {
511 | 	            return NodeFilter.FILTER_ACCEPT;
512 | 	        },
513 | 	        false
514 | 	    );
515 | 	    var getPrevNode = function(node) {
516 | 	        treeWalker.currentNode = node;
517 | 	        return treeWalker.previousNode();    
518 | 	    };
519 | 	    var getNextNode = function(node) {
520 | 	        treeWalker.currentNode = node;
521 | 	        return treeWalker.nextNode();    
522 | 	    };
523 | 	    var getOffset = function(offset, node) {
524 | 	        if (node.nodeType==Node.ELEMENT_NODE) {
525 | 	            var cobaltOffset = 0;
526 | 	            var newNode = node.childNodes.item(offset);
527 | 	            if (newNode) {
528 | 	                node = newNode;
529 | 	            }
530 | 	        } else {
531 | 	            var cobaltOffset = offset;
532 | 	        }
533 | 	        var textContent = "";
534 | 
535 | 	        while (node = getPrevNode(node) ) {
536 | 	            textContent = node.textContent;
537 | 	            cobaltOffset += textContent.length;
538 | 	        }
539 | 	        return cobaltOffset;
540 | 	    };
541 | 	    var getOffsetAndNode = function(offset) {
542 | 	        var node = getNextNode(editor.container);
543 | 	        var currOffset = 0;
544 | 	        var lastNode = editor.container;
545 | 	        while (node && currOffset<=offset) {
546 | 	            if ((node.textContent.length + currOffset) < offset ) {
547 | 	                currOffset += node.textContent.length;
548 | 	                lastNode = node;
549 | 	                node = getNextNode(node);
550 | 	            } else {
551 | 	                break;
552 | 	            }
553 | 	        }
554 | 	        if (!node) {
555 | 	            node = lastNode;
556 | 	        }
557 | 	        return {
558 | 	            node: node,
559 | 	            offset: offset - currOffset
560 | 	        }
561 | 	    };
562 | 
563 | 	    return {
564 | 	        get: function() {
565 | 	            var sel   = window.getSelection();
566 | 	            var end   = getOffset(sel.focusOffset, sel.focusNode);
567 | 	            var start = getOffset(sel.anchorOffset, sel.anchorNode);
568 | 	            if (start<=end) {
569 | 	                return {
570 | 	                    range: cobalt.range(start, end),
571 | 	                    cursor: end
572 | 	                }
573 | 	            } else {
574 | 	                return {
575 | 	                    range: cobalt.range(end, start),
576 | 	                    cursor: end
577 | 	                }
578 | 	            }
579 | 	        },
580 | 	        set: function(range, cursor) {
581 | 	            if (cursor == range.start) {
582 | 	                var end   = getOffsetAndNode(range.start);
583 | 	                var start = getOffsetAndNode(range.end);
584 | 	            } else {
585 | 	                var start = getOffsetAndNode(range.start);
586 | 	                var end   = getOffsetAndNode(range.end);
587 | 	            }
588 | 	            var range = document.createRange();
589 | 	            range.setStart(start.node, start.offset);
590 | 	            range.setEnd(end.node, end.offset);
591 | 	            var selection = window.getSelection();
592 | 	            selection.removeAllRanges();
593 | 	            selection.addRange(range);
594 | 	        }
595 | 	    }
596 | 	};
597 | 
598 | /***/ }
599 | /******/ ]);


--------------------------------------------------------------------------------
/docs/api.md:
--------------------------------------------------------------------------------
  1 | # Cobalt API
  2 | 
  3 | ## cobalt.range
  4 | A cobalt range is a collection of [start, end] pairs of character offsets.
  5 | Non of these pairs will overlap or be end-to-start or start-to-end consecutive with any other pair in the same range.
  6 | A start offset will always be equal or larger than 0. The end offset will
  7 | always be at equal or larger than the start offset.
  8 | A range has a combined start and end offset, as well as a count of the number of start/end pairs it contains.
  9 | An empty range has both start and end set to null and count set to 0.
 10 | 
 11 | ### Usage
 12 | 
 13 | Create a simple range:
 14 | ```javascript
 15 | 	var range1 = cobalt.range(10,20);
 16 | ```
 17 | Or like this:
 18 | ```javascript
 19 | 	var range2 = cobalt.range([10,20]);
 20 | ```
 21 | Create a range of ranges
 22 | ```javascript
 23 | 	var range3 = cobalt.range([[10,20],[30,40]]);
 24 | ```
 25 | Create a range from another range
 26 | ```javascript
 27 | 	var range4 = cobalt.range(range3);
 28 | ```
 29 | 
 30 | ### Properties
 31 | - `start`: The smalles start offset in all pairs, or null.
 32 | - `end`: The largest end offset in all pairs, or null.
 33 | - `size`: The difference between end and start, or null.
 34 | - `count`: The number of pairs in the range, 0 or more.
 35 | 
 36 | ### Methods
 37 | - `collapse(toEnd)`: Returns a new range with a single start/end pair, where the start and end are equal. If toEnd is set, start will be made equal to end - collapse to the end, if not, end will be made equal to start - collapse to the start.
 38 | 
 39 | - `compare(range)`: Returns -1, 0 or 1 if the given range is smaller, equal or larger than this range.
 40 | 
 41 | - `delete(range)`: Returns a new range with the given range deleted from it. This moves the start/end offsets, it cuts out the range.
 42 | 
 43 | - `exclude(range)`: Returns a new range with the parts in the given range removed from this range. Only overlapping parts are removed. The positions do not move otherwise.
 44 | 
 45 | - `foreach(f)`: Run function f on each sub range (consecutive part of this range). The argument passed to f is always a cobalt range.
 46 | 
 47 | - `get(i)`: Returns a range of the start/end pair at position `i` in this range. First pair is 0.
 48 | 
 49 | - `insert(range)`: Returns a new range, with all the space in the given range inserted into this range. This moves the start/end offsets.
 50 | 
 51 | - `intersect(range)`: Return a new range consisting of the intersection or overlap of this range and the given range.
 52 | 
 53 | - `invert(end)`: Returns a new range with all the ranges that are not in this range, in the domain range [0, end].
 54 | 
 55 | - `join(range)`: Returns a new range with the given range joined. This is similar to set inclusion. Overlapping ranges will be merged. The positions
 56 | do not move otherwise.
 57 | 
 58 | - `move(length)`: Returns a new range with all the start/end offsets moved by `length`. A negative length moves the offsets towards 0. If any end offset moves below 0, that pair is removed. Otherwise any start offsets below 0 are set to 0.
 59 | 
 60 | - `overlaps(range)`: Returns true if any part of the given range overlaps any part of this range. A collapsed range never overlaps.
 61 | 
 62 | ## cobalt.annotation
 63 | An annotation is a combination of a range and a tag. A tag is anything inside the '<' and '>' characters in xml or html, without the angle brackets.
 64 | 
 65 | ### Usage
 66 | Create a simple annotation:
 67 | ```javascript
 68 | 	var annotation1 = cobalt.annotation([10,20], 'div class="annotation"');
 69 | ```
 70 | Or written out:
 71 | ```javascript
 72 | 	var annotation2 = cobalt.annotation( cobalt.range( 10, 20 ), 'div class="annotation"');
 73 | ```
 74 | Create an annotation from another annotation
 75 | ```javascript
 76 | 	var annotation3 = cobalt.annotation(annotation1);
 77 | ```	
 78 | 
 79 | ### Properties
 80 | - `range`: A cobalt range object.
 81 | - `tag`: A tag or markup string.
 82 | - `tagName`: The tag name or first word of the tag, always in lowercase.
 83 | 
 84 | ### Methods
 85 | - `compare(annotation)`: Returns -1, 0, or 1, depending if the range in the given annotation is smaller, equal or larger than the annotation range.
 86 | 
 87 | - `copy(range)`: Returns a new annotation with the overlapping part of the given range, or null if there is no overlap.
 88 | 
 89 | - `delete(range)`: Returns a new annotation with this range deleted. Offsets can move. Returns null if the annotation range is fully deleted.
 90 | 
 91 | - `exclude(range)`: Returns a new annotation with this range excluded. Offsets won't move otherwise. Returns null if the annotation range is fully excluded.
 92 | 
 93 | - `has(tag)`: Returns true if the tagName in this tag is the same as the tagNamein the given tag.
 94 | 
 95 | - `insert(range)`: Returns a new annotation with this range inserted. Offsets can move.
 96 | 
 97 | - `join(range)`: Returns a new annotation with this range joined. Offsets won't move otherwise.
 98 | 
 99 | ## cobalt.fragment
100 | A fragment is a combination of plain text and a list of annotations. The list of annotations will always be sorted by the start and after that the end offsets of their ranges. A fragment is immutable, all operations on it return a new fragment.
101 | 
102 | ### Usage
103 | Create a fragment of two text parts
104 | ```javascript
105 | 	var fragment = cobalt.fragment("Some bold text","5-9:strong\n10-14:em");
106 | ```
107 | Create a fragment of text and a list of annotations
108 | ```javascript
109 | 	var fragment2 = cobalt.fragment("Some bold text",[
110 | 		cobalt.annotation([5,9],"strong"),
111 | 		cobalt.annotation([10,14],"em")
112 | 	]);
113 | ```
114 | ### Properties
115 | - `text`: A plain jane string.
116 | - `annotations`: A list of annotation objects.
117 | 
118 | ### Methods 
119 | - `apply(range, tag)`: Returns a new fragment, with the given range/tag or annotation or annotationlist applied.
120 | 
121 | - `copy(range)`: Returns a new fragment with only the parts that overlap the given range. The new fragment adds all text slices matching the range together as one single text. All annotations are moved/cut to match this new text.
122 | 
123 | - `delete(range)`: Returns a new fragment where the given range is deleted (cut).
124 | 
125 | - `insert(range)`: Returns a combined new fragment with the inserted fragment text and annotations inserted at the given position.
126 | 
127 | - `query(selector)`: To be implemented.
128 | 
129 | - `remove(range, tag)`: Returns a new fragment, with the given range/tag or annotation or annotationlist removed.
130 | 
131 | - `search(re)`: Searches through the text using a regular expression or string. Returns a cobalt range encompassing all matches.
132 | 
133 | ## cobalt.fragment.annotations
134 | A list of annotations in a fragment.
135 | 
136 | ### Properties
137 | - `list`: An immutable array of annotations.
138 | - `count`: The number of annotations in the list
139 | 
140 | ### Methods
141 | - `apply(range, tag)`: Returns a new list with a new annotation added.
142 | - `remove(range, tag)`:
143 | - `clear(range)`:
144 | - `delete(range)`:
145 | - `insert(range)`:
146 | - `filter(callback)`:
147 | - `map(callback)`:
148 | - `query(selector)`:
149 | 


--------------------------------------------------------------------------------
/docs/cobalt-fast-render.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poef/cobalt/56fcf1155991b68b7775d7c06d82c074fea19748/docs/cobalt-fast-render.txt


--------------------------------------------------------------------------------
/docs/methods.txt:
--------------------------------------------------------------------------------
  1 | CobaltSingleRange
  2 | - (int) size()
  3 | - (int) compare(r)
  4 | - (r) collapse(bool toEnd)
  5 | - (bool) equals(r)
  6 | - (bool) smallerThan(r)
  7 | - (bool) largerThan(r)
  8 | - (bool) leftOf(r)
  9 | - (bool) rightOf(r)
 10 | - (bool) overlaps(r)
 11 | - (bool) contains(r)
 12 | - (r) overlap(r)
 13 | - (array) exclude(r)
 14 | - (strint) toString()
 15 | 
 16 | cobaltRange
 17 | - constructor(int|array|R start?, int end?)
 18 | - (int|null) start()
 19 | - (int|null) end()
 20 | - (int|null) size()
 21 | - (int) count()
 22 | - (R) get(i)
 23 | - (R) delete(R)
 24 | - forEach(f)
 25 | - (R) insert(R)
 26 | - (R) collapse(bool toEnd)
 27 | - (R) join(R)
 28 | - (R) exclude(R)
 29 | - (R) excludeDisjointed(R)
 30 | - (R) intersect(R)
 31 | - (R) move(int by)
 32 | - (R) invert(int end)
 33 | - (R) compare(R)
 34 | - (bool) overlaps(R)
 35 | - (string) toString()
 36 | - (array) explode() // return an array of ranges for each singleRange in the range
 37 | missing
 38 | - map
 39 | - reduce
 40 | - filter
 41 | 
 42 | cobaltAnnotation
 43 | - constructor(R|A|string, string tag?) // todo: support A, string format
 44 | - (A) delete(R)
 45 | - (A) insert(R)
 46 | - (A) exclude(R)
 47 | - (A) join(R)
 48 | - (A|null) copy(R)
 49 | - (int) compare(A)
 50 | - (bool) has(string tag)
 51 | - (string) toString()
 52 | missing
 53 | - start
 54 | - end
 55 | - size
 56 | - count
 57 | - get
 58 | - forEach
 59 | - excludeDisjointed
 60 | - intersect
 61 | - move
 62 | - invert
 63 | - overlaps
 64 | - map
 65 | - reduce
 66 | - filter
 67 | 
 68 | cobaltAnnotationList
 69 | - constructor(L|array|string)
 70 | - (int) count()
 71 | - (A) item(i)
 72 | - (L) apply(R, string tag)
 73 | - (L) remove(R, string tag)
 74 | - (L) clear(R)
 75 | - (L) delete(R)
 76 | - (L) insert(R)
 77 | - (L) filter(f)
 78 | - (L) map(f)
 79 | - (L) reduce(acc, f)
 80 | - (L) get(R) //todo rename to avoid confusion with R.get -> copy?
 81 | - (R) query(string selector, int max)
 82 | - forEach(f)
 83 | - (bool) has(R, string tag)
 84 | missing
 85 | - exclude
 86 | - excludeDisjointed
 87 | - intersect
 88 | - move
 89 | - invert
 90 | - overlaps
 91 | - has
 92 | --
 93 | - copy (in plaats van get?)
 94 | 
 95 | 
 96 | cobaltFragment
 97 | - constructor(T|F, L?)
 98 | - (int) length()
 99 | - (F) delete(R) // TODO accepteer A
100 | - (F) copy(R) // TODO accepteer A
101 | - (F) insert(R, F) // TODO accepteer A, L
102 | - (F) apply(R, string tag) // accepteer Annotation
103 | - (F) remove(R, string tag) // accepteer Annotation
104 | - (R) search(string|RegExp RE) //todo check type of searchRe
105 | - (R) query(string selector)
106 | - (string) toString()
107 | 
108 | 
109 | 


--------------------------------------------------------------------------------
/docs/todo.txt:
--------------------------------------------------------------------------------
  1 | cobalt
  2 | + window.cobaltEditor -> editor voor cobaltDocument
  3 | + window.cobalt -> cobalt code
  4 | + vormgeving
  5 | 	+ designsystem inladen
  6 | 	+ ds-space rondom editor
  7 | 	+ fonts
  8 | 	+ full page gebruiken
  9 | 	+ annotaties lijst rechts, donkere achtergrond
 10 | - opslaan
 11 | 	+ localStorage
 12 | 		- opslaan met url pad als naam van het item?
 13 | 		- aangeven dat je lokale wijzigingen hebt?
 14 | 	- beaker?
 15 | 	- hosted? a la simplyedit?
 16 | 	- alternatief voor mime verzinnen. Json root met slices?
 17 | 	  tenminste nested documenten toestaan, en namen aan parts geven
 18 | - render zonder editor
 19 | 	- api beschikbaar via window.cobaltDocument
 20 | 	- UAE stijl document (<script src="..."></script><!--\n )
 21 | - window.cobaltDocument -> cobaltFragment instance
 22 | 	render maken die een cobaltDocument rendert zonder editor
 23 | 	cobalt.js moet default uae stijl document zoeken en renderen indien gevonden
 24 | 	voor nu ook altijd een button toevoegen die de editor opstart?
 25 | - undo/redo
 26 | - copy/paste
 27 | - automatisch alles wat met (~|\n)([^\n]*) matched -> annoteren als 'line'
 28 | - alles wat met (~|\n\n).*(\n\n|$) matched -> block
 29 | - css selector toevoegen: x & y -> matched met alle ranges waar zowel annotatie x als annotatie y bestaat. dit na html translate vertalen naar ' x y, y x'.
 30 | - keymap, css en javascript opslaan in document. Beginnen met dit default document.
 31 | 
 32 | editor
 33 | 1 - trap maken voor onbekende alt/ctrl/command keys
 34 | 	+ prompt voor annotatie, default toggle, rightsticky
 35 | 	- checkboxes voor toggle/apply, sticky left/right/both/none
 36 | 	- loskoppelen annotatie en html rendering
 37 | 		vb: list item - annotatie ul zonder li, li prerender toevoegen
 38 | 2 - annotaties rechts 
 39 | 	- delete button
 40 | 	- show button (selecteer range)
 41 | 3 - save routine 
 42 | 	+ localstorage 
 43 | 	- filesystem api
 44 | 	- solid pod?
 45 | 4 - inladen document met keymap/scripts/css en render 
 46 | 	(editor opstarten via button)
 47 | 
 48 | ---
 49 | 
 50 | autoformat:
 51 | - prerender automatisch elke regel en elk blok met line resp. block annotation
 52 | - maak een onchange event, met diff en selectie/cursor
 53 | - je kan op specifieke annotatie type onchange doen
 54 | - je kan ook onnewblock event doen, die als argument oude block meegeeft
 55 | - zelfde voor onnewline
 56 | - onnewblock('ol & block') -> haal de counter op van vorige block, hoog die op en voeg die counter toe aan nieuwe block, zoek volgende counters in huidige 'ol' en als nodig hoog die ook op. Counter is ook een annotatie, inhoud is bijv. '1. '.
 57 | - je begint een 'ol' automatisch door in een block aan het begin iets als '1. ' te typen. Dus 
 58 | 
 59 | cobaltDocument.addEventListener('change', 'block', evt => {
 60 | 	if (evt.block.range.contains(evt.selection.cursor)) {
 61 | 		var counterRe = /^([0-9]|[a-z])([\.\)\:\-])(\s)$/i;
 62 | 		if (evt.cobaltDocument.text
 63 | 			.copy(evt.block.range.start, evt.selection.cursor)
 64 | 			.matches(counterRe, matches)
 65 | 		)
 66 | 		{
 67 | 			evt.cobaltDocument.apply([evt.block.range.start, evt.selection.cursor], 'counter'); // non-editable
 68 | 			evt.cobaltDocument.apply([evt.block.range.start, evt.selection.cursor], 'ol'); // left*right sticky
 69 | 		} else {
 70 | 			var counter = evt.cobaltDocument.copy(evt.block.range).get('counter');
 71 | 			//FIXME: copy reset waalijk de start offsets hier, dus uitzoeken
 72 | 			// hoe je dit wel doet.
 73 | 			if (counter && !evt.cobaltDocument.copy(counter.range).matches(counterRe))
 74 | 				evt.cobaltDocument.remove(counter);
 75 | 				//FIXME: als er nog een spatie na de counter komt, dan kun je de counter annotatie uitbreiden en past het weer.
 76 | 			}
 77 | 		}
 78 | 	}
 79 | });
 80 | 
 81 | beoogd effect: als je als eerste letters iets als '1. ' intypt, dan wordt de '1. ' automatisch van annotatie 'counter' voorzien. Als je vervolgens bijv. de spatie weer weghaalt, dan verdwijnt die annotatie weer. Hiermee heb je de list counter ook netjes in de text.
 82 | TODO: automatisch verder nummeren bij de start van elk volgend block.
 83 | 
 84 | events:
 85 | alle events firen op cobaltDocument zelf, nooit op een annotatie object of annotatie lijst of text. Dus je hoeft geen bubbling e.d. te doen. Je moet altijd opgeven welke annotaties je in geinterresseerd bent, mag ook '*' zijn. Event krijgt de annotatie mee. Er is geen boom dus er is niet 1 eenduidige parent/target. Misschien moet je meer dan 1 annotatie tag op kunnen geven, of zelfs een querySelector:
 86 | 
 87 | cobaltDocument.addEventListener('change','ol & block', evt => { ... })
 88 | 
 89 | de remove van counter kun je dan op een expliciete selector hangen:
 90 | 
 91 | cobaltDocument.addEventListener('change','ol & counter', evt => { ... })
 92 | 
 93 | 
 94 | cobaltDocument:
 95 | - container voor meerdere subdocumenten, gevuld vanuit mime document.
 96 | - cobaltDocument bevat 1 main fragment, die kun je direct op cobaltDocument aanroepen:
 97 |   cobaltDocument.text / .annotations
 98 | - cobaltDocument.fragments bevat de overige subdocumenten, elk met content-type en naam. 
 99 | TODO: bij mime.encode ook een naam kunnen opgeven bij een part
100 | TODO; bij mime.encode ook extra fragments op kunnen geven
101 | TODO: nesten van cobalt fragments in mime
102 | TODO: mime-type voor dit document formaat? application/cobalt?
103 | 
104 | 


--------------------------------------------------------------------------------
/examples/cobalt.document.html:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8"><script src="../mjs/cobalt.document.js" type="module"></script><!--
 2 | MIME-Version: 1.0
 3 | Content-Type: multipart/related; boundary=cobaltBoundary1608984526348
 4 | 
 5 | 
 6 | --cobaltBoundary1608984526348
 7 | Content-type: text/plain
 8 | 
 9 | This is a test
10 | With minimal markup.
11 | --cobaltBoundary1608984526348
12 | Content-type: text/cobalt
13 | 
14 | 0-14:h1
15 | 20-27:em


--------------------------------------------------------------------------------
/examples/cobalt.editor-lite.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 |     <title>Cobalt Editor</title>
  5 |     <link rel="stylesheet" href="styles.css">
  6 |     <style type="text/css">
  7 |         html, body {
  8 |             height: 100%;
  9 |         }
 10 |         body {
 11 |             display: flex;
 12 |         }
 13 |         #editor {
 14 |             white-space: pre-wrap;
 15 |             width: 100%;
 16 |             overflow: auto;
 17 |         }
 18 |         #editor * {
 19 |             display: inline;
 20 |         }
 21 |         #annotations {
 22 |             width: 15em;
 23 |             background-color: #333;
 24 |             color: #FFF;
 25 |             user-select: none;
 26 |         }
 27 |         .cobalt-range {
 28 |             padding: 10px 1em;
 29 |         }
 30 |         .cobalt-tag {
 31 |             padding: 5px 1em;
 32 |             border-top: 1px solid #666;
 33 |             border-bottom: 1px solid #000;
 34 |             cursor: pointer;
 35 |         }
 36 |         .cobalt-button {
 37 |             cursor: pointer;
 38 |         }
 39 |         .cobalt-button-naked {
 40 |             width: auto;
 41 |             border: 0;
 42 |             outline: 0;
 43 |             background: transparent;
 44 |             color: inherit;
 45 |             cursor: pointer;
 46 |             line-height: inherit;
 47 |             font-size: inherit;
 48 |         }
 49 |         .cobalt-tag .cobalt-button {
 50 |             float: right;
 51 |         }
 52 |     </style>
 53 | </head>
 54 | <body>
 55 |     <div id="editor" class="ds-space" tabindex=1></div>
 56 |     <div id="annotations"></div>
 57 |     <script type="module">
 58 |         import cobalt from '../mjs/cobalt.js';
 59 | 
 60 |         window.cobaltEditor = cobalt.editor( '#editor' );
 61 |         window.cobaltDocument = window.cobaltEditor.fragment;
 62 |         window.cobaltEditor.focus();
 63 |         var updateSideBar =function(evt) {
 64 |             if (!evt.target || !evt.target.closest('#editor')) {
 65 |                 return;
 66 |             }
 67 |             var s = cobaltEditor.selection.get(cobaltEditor);
 68 |             renderSideBar(s);
 69 |         };
 70 |         var renderSideBar = function(s) {
 71 |             cobaltEditor.filteredAnnotations = cobaltEditor.fragment.annotations.filter(function(a) {
 72 |                 var result = a.range.intersect([s.cursor-1,s.cursor]).size!=null;
 73 |                 return result;
 74 |             });
 75 |             document.getElementById('annotations').innerHTML 
 76 |             =   '<div class="cobalt-range">'+(s.range.start!=s.range.end ? s.range : s.cursor)+'</div>'
 77 |                 +cobaltEditor.filteredAnnotations.list.map(function(a,i) {
 78 |                     return `
 79 |     <div class="cobalt-tag" data-cobalt-index="${i}">
 80 |         <a data-cobalt-command="select-annotation" data-cobalt-value="${i}">${a.tagName}</a>
 81 |         <button class="cobalt-button cobalt-button-naked cobalt-delete-range" data-cobalt-command="remove-annotation" data-cobalt-value="${a.tagName}">&times;</button>
 82 |     </div>
 83 | `;
 84 |                 }).join('');
 85 |         }
 86 |         
 87 |         var editor = document.getElementById('editor');
 88 |         editor.addEventListener('keyup', updateSideBar);
 89 |         editor.addEventListener('mousedown', updateSideBar);
 90 |         editor.addEventListener('mouseup', updateSideBar);
 91 |         editor.addEventListener('touchstart', updateSideBar);
 92 |         editor.addEventListener('touchend', updateSideBar);
 93 |     </script>
 94 |     <script>
 95 |         (function() {
 96 |             var commands = {
 97 |                 'remove-annotation': function(value) {
 98 |                     var s = cobaltEditor.selection.get(cobaltEditor);
 99 |                     cobaltEditor.toggle(s.range, value);
100 |                     cobaltEditor.render(s);
101 |                 },
102 |                 'select-annotation': function(value) {
103 |                     var ann = cobaltEditor.filteredAnnotations.item(parseInt(value));
104 |                     var s   = cobaltEditor.selection.get(cobaltEditor);
105 |                     s.range = ann.range;
106 |                     cobaltEditor.render(s);
107 |                 }
108 |             };
109 | 
110 |             var handlers = [
111 |                 {
112 |                     match: 'a,button',
113 |                     get: function(el) {
114 |                         return el.dataset.cobaltValue || el.href || el.value;
115 |                     },
116 |                     check: function(el,evt) {
117 |                         return evt.type=='click' && evt.ctrlKey==false && evt.button==0;
118 |                     }
119 |                 }
120 |             ];
121 | 
122 |             function getCommand(evt) {
123 |                 var el = evt.target.closest('[data-cobalt-command]');
124 |                 if (el) {
125 |                     var matched = false;
126 |                     for (var i=handlers.length-1; i>=0; i--) {
127 |                         if (el.matches(handlers[i].match)) {
128 |                             matched = true;
129 |                             if (handlers[i].check(el, evt)) {
130 |                                 return {
131 |                                     name:   el.dataset.cobaltCommand,
132 |                                     source: el,
133 |                                     value:  handlers[i].get(el)
134 |                                 };
135 |                             }
136 |                         }
137 |                     }
138 |                 }
139 |                 return null;
140 |             }
141 | 
142 |             function commandHandler(evt) {
143 |                 var command = getCommand(evt);
144 |                 if ( command ) {
145 |                     if (!commands[command.name]) {
146 |                         console.error('cobalt.command: undefined command '+command.name);
147 |                     } else {
148 |                         commands[command.name].call(command.source, command.value);
149 |                         evt.preventDefault();
150 |                         evt.stopPropagation();
151 |                         return false;
152 |                     }
153 |                 }
154 |             }
155 | 
156 |             document.addEventListener('click', commandHandler);
157 |         })();
158 |     </script>
159 | </body>
160 | </html>


--------------------------------------------------------------------------------
/examples/cobalt.editor.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>Cobalt Editor</title>
 5 |     <script type="text/javascript" src="../dist/cobalt.js"></script>
 6 |     <script type="text/javascript" src="../dist/cobalt.editor.js"></script>
 7 |     <style type="text/css">
 8 |         body {
 9 |             padding-top: 60px;
10 |             line-height: 1.5em;
11 |         }
12 |         #editor {
13 |             background: #EEE;
14 |             border-radius: 3px;
15 |             width: auto;
16 |             min-height: 300px;
17 |             white-space: pre;
18 |             border: 1px solid #AAA;
19 |             padding: 7px;
20 |             box-shadow: inset 2px 2px 10px #CCC;
21 |             font-family: Helvetica, sans-serif;
22 |             outline: none;
23 |             box-sizing: border-box;
24 |             padding-right: 200px;
25 |         }
26 |         #annotations {
27 |             width: 200px;
28 |             height: 100%;
29 |             position: absolute;
30 |             z-index: 10;
31 |             right: 0;
32 |             font-family: helvetica,sans-serif;
33 |             padding: 5px;
34 |             box-sizing: border-box;
35 |             background-color: #EEE;
36 |             border: 1px solid #888;
37 |             border-radius: 0 3px 3px 0;
38 |             box-shadow: -2px -2px 5px #CCC, inset 0px 0px 5px white;
39 |         }
40 |         #container {
41 |             position: relative;
42 |             overflow: hidden;
43 |         }
44 |         h1,h2,h3,p,ol,ul,li {
45 |             min-height: 1em;
46 |             display: inline-block;
47 |             margin: 0;
48 |         }
49 |         p.cobaltCursorSpace {
50 |             display: block;
51 |         }
52 |     </style>
53 | </head>
54 | <body>
55 |     <div id="container">
56 |         <div id="annotations"></div>
57 |         <div id="editor" tabindex=1></div>
58 |     </div>
59 |     <pre id="debug"></pre>
60 |     <script type="text/javascript">
61 |         var editor = cobalt.editor.create( '#editor', '#debug');
62 |         editor.focus();
63 |         document.addEventListener('keyup', function(evt) {
64 |             if (evt.target.className=='cobaltCursorSpace') {
65 |                 var selection = window.getSelection();
66 |                 var range = document.createRange();
67 |                 range.setStart(selection.anchorNode, selection.anchorOffset);
68 |                    range.setEnd(evt.target,0);
69 |                    selection.removeAllRanges();
70 |                 selection.addRange(range)
71 |             }
72 |             var s = editor.selection.get();
73 |             var l = editor.fragment.annotations.filter(function(a) {
74 |                 return a.range.intersect([s.cursor-1,s.cursor]).size!=null;
75 |             });
76 |             document.getElementById('annotations').innerHTML = l.list.map(function(a,i) {
77 |                 return '<div class="tag" data-cobalt-index="'+i+'">'+a.tagName+'</div>';
78 |             }).join('');
79 |         });
80 |     </script>
81 | </body>
82 | </html>


--------------------------------------------------------------------------------
/mjs/cobalt.annotation.js:
--------------------------------------------------------------------------------
 1 | import cobalt from './cobalt.js';
 2 | 
 3 | class CobaltAnnotation {
 4 |     constructor(range, tag) {
 5 |         if (range.constructor && range.constructor.name == 'CobaltAnnotation') {
 6 |             return range;
 7 |         }
 8 |         if (typeof tag == 'undefined') {
 9 |             tag = range.substr(range.indexOf(':')+1);
10 |             range = range.substr(0, range.indexOf(':'));
11 |         }
12 |         this.range = cobalt.range(range);
13 |         this.tag   = tag.trim();
14 |         var elements = this.tag.split(/\s/,1);
15 |         this.tagName = elements[0].toLowerCase();
16 |         Object.freeze(this);
17 |     }
18 | 
19 |     /**
20 |      * Returns a new annotation with this range deleted. Offsets can move.
21 |      * Returns null if the annotation range is fully deleted.
22 |      */
23 |     delete( range ) {
24 |         var r = this.range.delete(range);
25 |         return (r.count) ? new CobaltAnnotation( r, this.tag ) : null;
26 |     }
27 | 
28 |     /**
29 |      * Returns a new annotation with this range inserted.
30 |      * Offsets can move.
31 |      */
32 |     insert( range ) {
33 |         return new CobaltAnnotation( this.range.insert(range), this.tag);
34 |     }
35 | 
36 |     /**
37 |      * Returns a new annotation with this range excluded. Offsets won't move otherwise.
38 |      * Returns null if the annotation range is fully excluded.
39 |      */
40 |     exclude( range ) {
41 |         var r = this.range.exclude(range);
42 |         return (r.count) ? new CobaltAnnotation( r, this.tag ) : null;
43 |     }
44 | 
45 |     /**
46 |      * Returns a new annotation with this range joined. Offsets won't move otherwise.
47 |      */
48 |     join( range ) {
49 |         return new CobaltAnnotation( this.range.join( range ), this.tag );
50 |     }
51 | 
52 |     /**
53 |      * Returns a new annotation with the overlapping part of the given range,
54 |      * r null if there is no overlap.
55 |      */
56 |     copy( range ) {
57 |         var r = this.range.intersect( range );
58 |         return (r.count) ? new CobaltAnnotation( r, this.tag ) : null;
59 |     }
60 | 
61 |     /**
62 |      * Returns -1, 0, or 1, depending if the range in the given annotation is smaller,
63 |      * equal or larger than the annotation range.
64 |      */
65 |     compare( annotation ) {
66 |         return this.range.compare( annotation.range );
67 |     }
68 | 
69 |     /**
70 |      * Returns true if the first word in this tag is the same as the first word
71 |      * in the given tag.
72 |      */
73 |     has( tag ) {
74 |         //TODO: should be able to specify attributes and attribute values as well
75 |         return this.tagName === tag.split(/\s/)[0];
76 |     }
77 | 
78 |     toString() {
79 |         return this.range + ':' + this.tag;
80 |     }
81 | }
82 | 
83 | export default function(range, tag) {
84 |     if ( range instanceof CobaltAnnotation ) {
85 |         // because CobaltAnnotation is immutable, we can just return it.
86 |         return range;
87 |     } else {
88 |         return new CobaltAnnotation(range, tag);
89 |     }
90 | }
91 | 


--------------------------------------------------------------------------------
/mjs/cobalt.annotationlist.js:
--------------------------------------------------------------------------------
  1 | import cobalt from './cobalt.js';
  2 | 
  3 | function parseAnnotations(annotations) {
  4 |     var reMarkupLine = /^(?:(([0-9]+\-[0-9]+)(,[0-9]+\-[0-9]+)*)):(.*)$/m;
  5 |     var matches = [];
  6 |     var list = [];
  7 |     while ( annotations && ( matches = annotations.match(reMarkupLine) ) ) {
  8 |         list.push(
  9 |             cobalt.annotation(
 10 |                 matches[1].split(',').map(function(rs) {
 11 |                     return rs.split('-').map(function(re) {
 12 |                         return parseInt(re);
 13 |                     });
 14 |                 }),
 15 |                 matches[matches.length-1]
 16 |             )
 17 |         );
 18 |         annotations = annotations.substr( matches[0].length + 1 );
 19 |     }
 20 |     return list;
 21 | }
 22 | 
 23 | /**
 24 |  * The annotations list of a fragment, with the public api.
 25 |  */
 26 | export default class CobaltAnnotationList {
 27 |     constructor( annotations ) {
 28 |         this.list = [];
 29 |         if ( annotations instanceof CobaltAnnotationList ) {
 30 |             // FIXME: create private factory method for CobaltAnnotationList
 31 |             // that just returns the input object in this case.
 32 |             this.list = annotations.list;
 33 |         } else if ( Array.isArray( annotations) ) {
 34 |             this.list = annotations;
 35 |         } else {
 36 |             this.list = parseAnnotations( annotations + '' );
 37 |         }
 38 |         // clear unset ranges.
 39 |         this.list = this.list.filter( function(ann) {
 40 |             return ann.range.start != null;
 41 |         });
 42 |         // sort by range
 43 |         this.list.sort( function(a, b) {
 44 |             if ( a.range.start < b.range.start ) {
 45 |                 return -1;
 46 |             } else if ( a.range.start > b.range.start ) {
 47 |                 return 1;
 48 |             }
 49 |             return 0;
 50 |         });
 51 |         Object.freeze(this);
 52 |         Object.freeze(this.list);
 53 |     }
 54 | 
 55 |     /**
 56 |      * Returns the number of annotations in the list.
 57 |      */
 58 |     get count() {
 59 |         return this.list.length;
 60 |     }
 61 | 
 62 |     item(index) {
 63 |         return this.list[index];
 64 |     }
 65 | 
 66 |     /**
 67 |      * Returns a string with all annotations joined by newlines.
 68 |      */
 69 |     toString() {
 70 |         return this.list.join('\n');
 71 |     }
 72 | 
 73 |     /**
 74 |      * Returns a new list with a new annotation added.
 75 |      */
 76 |     apply(range, tag) {
 77 |         if ( range instanceof CobaltAnnotationList ) {
 78 |             return new CobaltAnnotationList(
 79 |                 this.list.concat(range.list)
 80 |             );
 81 |         } else {
 82 |             if ( typeof range.tag != 'undefined' ) {
 83 |                 tag   = range.tag;
 84 |                 range = range.range;
 85 |             }
 86 |             var list = this.list.slice();
 87 |             list.push(
 88 |                 cobalt.annotation(range,tag)
 89 |             );
 90 | 
 91 |             return new CobaltAnnotationList(list);
 92 |         }
 93 |     }
 94 | 
 95 |     /**
 96 |      * Returns a new list, with the annotations with the given
 97 |      * tag cleared on the given range.
 98 |      */
 99 |     remove(range, tag) {
100 |         if ( range instanceof CobaltAnnotationList ) {
101 |             // FIXME: fill in
102 |         } else {
103 |             if ( typeof range.tag != 'undefined' ) {
104 |                 tag   = range.tag;
105 |                 range = range.range;
106 |             }
107 |             var result = [];
108 |             this.list.forEach(function(ann) {
109 |                 if ( ann.has(tag) ) {
110 |                     var r = ann.range.exclude(range);
111 |                     if ( r && r.start != null ) {
112 |                         result.push( cobalt.annotation( r, ann.tag ) );
113 |                     }
114 |                 } else {
115 |                     result.push(ann);
116 |                 }
117 |             });
118 |             return new CobaltAnnotationList(result);
119 |         }
120 |     }
121 | 
122 |     /**
123 |      * Returns a new list with all annotations cleared on the given range.
124 |      * Clear doesn't move the annotations, it just removes parts or all of them.
125 |      */
126 |     clear(range) {
127 |         var result = [];
128 |         this.list.forEach(function(ann) {
129 |             var r = ann.range.exclude(range);
130 |             if ( r.start != null ) {
131 |                 result.push( cobalt.annotation( r, ann.tag ) );
132 |             }
133 |         });
134 |         return new CobaltAnnotationList(result);
135 |     }
136 | 
137 |     /**
138 |      * Returns a new list where all annotations have the given range deleted.
139 |      * This means that all positions in the given range are cut from all annotations.
140 |      * Annotations to the right of the given range will move left.
141 |      * Annotations that are contained by the given range are removed.
142 |      */
143 |     delete(range) {
144 |         var result = [];
145 |         this.list.forEach(function(ann) {
146 |             var r = ann.range.delete(range);
147 |             if ( r.start != null ) {
148 |                 result.push( cobalt.annotation( r, ann.tag ) );
149 |             }
150 |         });
151 |         return new CobaltAnnotationList(result);
152 |     }
153 | 
154 |     /**
155 |      * Returns a new list with the positions in the given range inserted
156 |      * into all annotations. Annotations to the right of the range will move right.
157 |      */
158 |     insert(range) {
159 |         var result = [];
160 |         this.list.forEach(function(ann) {
161 |             result.push(cobalt.annotation( ann.insert(range), ann.tag ) );
162 |         });
163 |         return new CobaltAnnotationList(result);
164 |     }
165 | 
166 |     /**
167 |      * Returns a new list with only the annotations that matched the filter.
168 |      */
169 |     filter( f ) {
170 |         return new CobaltAnnotationList( this.list.filter(f) );
171 |     }
172 | 
173 |     /**
174 |      * Returns a new list with the annotations changed by the map function.
175 |      */
176 |     map( f ) {
177 |         return new CobaltAnnotationList( this.list.map(f) );
178 |     }
179 | 
180 |     /**
181 |      *
182 |      */
183 |     reduce( previousValue, f ) {
184 |         return this.list.reduce( previousValue, f);
185 |     }
186 | 
187 |     get(range) {
188 |         range = cobalt.range.apply(cobalt.range, arguments);
189 |         return this.filter(function(annotation) {
190 |             return annotation.range.overlaps(range);
191 |         });
192 |     }
193 | 
194 |     /**
195 |      * Search through all annotations and return a new annotation list with
196 |      * only those annotations that match the selector.
197 |      */
198 |     query( selector, max ) {
199 |         function getTags(selector) {
200 |             return selector.split(' ').map(function(tag) {
201 |                 return tag.trim();
202 |             });
203 |         }
204 | 
205 |         var tags  = getTags(selector);
206 |         var range = cobalt.range([0, max]);
207 |         var self  = this;
208 |         tags.forEach(function(tag) {
209 |             if (tag[0]=='-') {
210 |                 tag = tag.substr(1);
211 |                 var invert = true;
212 |             }
213 |             var tagRange = cobalt.range();
214 |             self.list.filter(function(annotation) {
215 |                 return annotation.tagName == tag;
216 |             }).forEach(function(annotation) {
217 |                 tagRange = tagRange.join(annotation.range);
218 |             });
219 |             if (invert) {
220 |                 tagRange = tagRange.invert(max);
221 |             }
222 |             range = range.intersect(tagRange);
223 |         });
224 |         return range;
225 |     }
226 | 
227 |     forEach( f ) {
228 |         this.list.forEach(f);
229 |     }
230 | 
231 |     has( range, tag ) {
232 |         range = cobalt.range(range);
233 |         return this.filter(function(a) {
234 |             if (
235 |                 ( (range.size && a.range.overlaps(range))
236 |                    || (!range.size && range.start && a.range.overlaps(cobalt.range(range.start-1, range.start)) )
237 |                 )
238 |                 && a.tag==tag
239 |             ) {
240 |                 return true;
241 |             }
242 |         }).count>0;
243 |     }
244 | };
245 | 


--------------------------------------------------------------------------------
/mjs/cobalt.document.js:
--------------------------------------------------------------------------------
 1 | import cobalt from './cobalt.js';
 2 | 
 3 | window.cobalt = cobalt;
 4 | 
 5 | function loadData() {
 6 |     let nodes = Array.from(document.head.childNodes).concat(Array.from(document.body.childNodes));
 7 |     for (var i=0,l=nodes.length;i<l;i++) {
 8 |         if (nodes[i].nodeType==Node.COMMENT_NODE) {
 9 |             return nodes[i].textContent;
10 |         }
11 |     }
12 |     return {};
13 | }
14 | 
15 | //TODO: cobaltDocument is not a fragment, it should have a head.title, a body - which is a fragment, and parts
16 | // which may be any kind of document and aren't rendered by default
17 | // e.g. script and css
18 | window.cobaltDocument = cobalt.fragment(loadData().trim());
19 | 
20 | var docElement = document.createElement('cobalt-document');
21 | docElement.innerHTML = cobalt.html.render(window.cobaltDocument);
22 | document.body.appendChild(docElement);
23 | 


--------------------------------------------------------------------------------
/mjs/cobalt.editor.js:
--------------------------------------------------------------------------------
  1 | import cobalt from './cobalt.js';
  2 | import cobaltKeyboard from './cobalt.editor.keyboard.js';
  3 | import cobaltEditorSelection from './cobalt.editor.selection.js';
  4 | 
  5 | /**
  6 |  * This class implements a basic cobalt editor in a web browser
  7 |  * It uses a contendEditable field in the browser for cursor
  8 |  * control and selections. All transformations are done using
  9 |  * cobalt primitives.
 10 |  */
 11 | class cobaltEditor {
 12 | 
 13 |     /**
 14 |      * The root DOMElement in the browser that contains the HTML 
 15 |      * rendering of the cobaltDocument
 16 |      */
 17 |     container = null;
 18 | 
 19 |     /**
 20 |      * The cobaltDocument to edit and render
 21 |      */
 22 |     fragment = null;
 23 | 
 24 |     /**
 25 |      * Contains the get/set conversion from/to the window.selection
 26 |      * in the browser and the cobaltRange.
 27 |      */
 28 |     selection = null;
 29 | 
 30 |     /**
 31 |      * Contains a set tags/annotations to apply on the next 
 32 |      * character inserted. This is emptied after any key up.
 33 |      * TODO: also empty it on mouse/touch events.
 34 |      */
 35 |     mode = {};
 36 | 
 37 |     /**
 38 |      * The list of keydown keys that are allowed to pass through
 39 |      * to the contentEditable field
 40 |      */
 41 |     allowmap = {
 42 |         'ArrowLeft':true,
 43 |         'ArrowRight':true,
 44 |         'ArrowUp':true,
 45 |         'ArrowDown':true,
 46 |         'PageUp':true,
 47 |         'PageDown':true,
 48 |         'Home':true,
 49 |         'End':true,
 50 |         'Shift+ArrowLeft':true,
 51 |         'Shift+ArrowRight':true,
 52 |         'Shift+ArrowUp':true,
 53 |         'Shift+ArrowDown':true,
 54 |         'Shift+PageUp':true,
 55 |         'Shift+PageDown':true,
 56 |         'Shift+Home':true,
 57 |         'Shift+End':true,
 58 |         'Ctrl+ArrowLeft':true,
 59 |         'Ctrl+ArrowRight':true,
 60 |         'Ctrl+ArrowUp':true,
 61 |         'Ctrl+ArrowDown':true,
 62 |         'Ctrl+PageUp':true,
 63 |         'Ctrl+PageDown':true,
 64 |         'Ctrl+Home':true,
 65 |         'Ctrl+End':true
 66 |     };
 67 | 
 68 |     /**
 69 |      * The keys handled onKeyDown by the editor
 70 |      */
 71 |     keymap = {
 72 |         'Backspace': function(sel) {
 73 |             if ( !sel.range.size ) {
 74 |                 sel.range = cobalt.range(sel.range.start - 1, sel.range.end);
 75 |             }
 76 |             this.fragment = this.fragment.delete(sel.range);
 77 |             sel.range = sel.range.collapse();
 78 |             this.render(sel);
 79 |         },
 80 |         'Delete': function(sel) {
 81 |             if ( !sel.range.size ) {
 82 |                 sel.range = cobalt.range(sel.range.start, sel.range.end+1);
 83 |             }
 84 |             this.fragment = this.fragment.delete(sel.range);
 85 |             sel.range = sel.range.collapse();
 86 |             this.render(sel);
 87 |         },
 88 |         'Enter': function(sel) {
 89 |             this.fragment = this.fragment.insert(sel.range, "\n");
 90 |             sel.range = sel.range.collapse().move(1);
 91 |             this.render(sel);
 92 |         },
 93 |         'Control+s': function() {
 94 |             this.save();
 95 |         },
 96 |         'Control+a': function(sel) {
 97 |             sel.range = cobalt.range(0, this.fragment.text.length);
 98 |             this.render(sel);
 99 |         },
100 |         'Control+c': function(sel) {
101 |             this.clipboard = this.fragment.copy(sel.range);
102 |         },
103 |         'Control+x': function(sel) {
104 |             this.clipboard = this.fragment.copy(sel.range);
105 |             this.fragment = this.fragment.delete(sel.range);
106 |             sel.range = sel.range.collapse();
107 |             this.render(sel);
108 |         },
109 |         'Control+v': function(sel) {
110 |             if (this.clipboard) {
111 |                 this.fragment = this.fragment.insert(sel.range, this.clipboard);
112 |                 sel.range = sel.range.collapse().move(this.clipboard.text.length - sel.range.length);
113 |                 this.render(sel);
114 |             }
115 |         }
116 |     };
117 | 
118 | 
119 |     /**
120 |      * @param DOMElement|string container the root editor element or a css selector that identifies it.
121 |      * @param DOMElement|string debug optional element to show debug output or a css selector that identifies it.
122 |      */
123 |     constructor(container, debug)
124 |     {
125 |         /**
126 |          * Handles normal printable characters, inserts these in
127 |          * the cobaltDocument in place of the current selection.
128 |          * Prevents all normal contentEditable interactions.
129 |          */
130 |         function handleKeyPressEvent(evt)
131 |         {
132 |             if ( !evt.ctrlKey && !evt.altKey && !evt.commandKey) {
133 |                 var sel  = this.selection.get(this);
134 |                 var char = cobaltKeyboard.getCharacter(evt);
135 |                 if (char) {
136 |                     sel =this.append(sel, char);
137 |                     this.render(sel);
138 |                 }
139 |             }
140 |             var key = cobaltKeyboard.getKey(evt);
141 |             evt.preventDefault();
142 |             evt.stopPropagation();
143 |             return false;
144 |         }
145 | 
146 |         /**
147 |          * Handles command keys. A command key is any keypress
148 |          * with at least one of the Control, Alt, Command or Meta
149 |          * keys pressed as well.
150 |          * If the combination is in the keymap, the assigned function
151 |          * is executed. If not, it prompts for an annotation to assign
152 |          * to this key combination. This is added to the keymap as
153 |          * a toggle command on that annotation, and executed.
154 |          * TODO: allow more configuration / programming of the keymap
155 |          * TODO: store the configuration / programming in the document
156 |          */
157 |         function handleKeyDownEvent(evt)
158 |         {
159 |             var key = cobaltKeyboard.getKey(evt);
160 |             if ( this.keymap[key] ) {
161 |                 var sel = this.selection.get(this);
162 |                 this.keymap[key].call(this, sel);
163 |                 evt.preventDefault();
164 |                 evt.stopPropagation();
165 |                 return false;
166 |             } else if ( key.match(/(Control|Alt|Command|Meta)\+.+/)) {
167 |                 var ann = prompt('Annotation');
168 |                 if (ann) {
169 |                     this.keymap[key] = (function(ann) {
170 |                         return function(sel) {
171 |                             this.toggle(sel.range, ann, sel.cursor);
172 |                             this.render(sel);
173 |                         }
174 |                     })(ann);
175 |                     var sel = this.selection.get(this);
176 |                     this.keymap[key].call(this, sel);
177 |                 }
178 |                 evt.preventDefault();
179 |                 evt.stopPropagation();
180 |                 return false;
181 |             }
182 |         }
183 | 
184 |         let editor = this;
185 |         this.container = ( typeof container == 'string' ? document.querySelector(container) : container );
186 |         this.container.contentEditable = true;
187 |         this.container.spellcheck = false;
188 |         this.load();
189 |         this.selection = cobaltEditorSelection;
190 |         this.container.addEventListener('keypress', function(evt) {
191 |             handleKeyPressEvent.call(editor, evt);
192 |         });
193 |         this.container.addEventListener('keydown', function(evt) {
194 |             handleKeyDownEvent.call(editor, evt);
195 |         });
196 |         this.mode = [];
197 |         if (debug) {
198 |             this.debug = (typeof debug=='string' ? document.querySelector(debug) : debug);
199 |         }
200 |     }
201 | 
202 |     /**
203 |      * Focus the editor in the web browser and show the cursor.
204 |      */
205 |     focus() {
206 |         this.container.focus();
207 |     }
208 | 
209 |     /**
210 |      * Render the cobaltDocument as HTML in the editor container and
211 |      * restore the selection and cursor.
212 |      */
213 |     render(sel) {
214 |         var fragment = this.fragment;
215 |         var html = cobalt.html.render(fragment);
216 |         this.container.innerHTML = html+"\n";// extra \n is to give the browser room for a cursor
217 |         if (sel) {
218 |             var editor = this;
219 |             editor.selection.set(editor, sel.range, sel.cursor);
220 |             if (editor.debug) {
221 |                 editor.debug.innerText = '['+sel.range.start+','+sel.range.end+"]\n"+fragment;
222 |             }
223 |         }
224 |     }
225 | 
226 |     /**
227 |      * Toggles the given annotation (tag) on the given range.
228 |      * If the given range already has an annotation which
229 |      * matches tag, than the annotation is removed on this range.
230 |      * otherwise it is applied.
231 |      * If the range has no length, the tag is not applied, but
232 |      * added to the editor.mode object, to be applied on the next
233 |      * character added instead. Again, if the range already has
234 |      * a matching annotation, the editor.mode will be removed instead
235 |      * of applied.
236 |      * @param cobaltRange range
237 |      * @param cobaltAnnotation tag
238 |      */
239 |     toggle(range, tag) {
240 |         var editor = this;
241 |         if (range.size===0) {
242 |             if (this.fragment.annotations.has(range, tag)) {
243 |                 this.mode[tag] = false;
244 |             } else {
245 |                 this.mode[tag] = !this.mode[tag];
246 |             }
247 |             return;
248 |         }
249 | 
250 |         var adjoinedRange = function(r,s) {
251 |             var x = r.join(s);
252 |             return (x.count <= r.count ? x : false);
253 |         };
254 | 
255 |         var overlaps = function(r) {
256 |             return editor.fragment.annotations.filter(function(a) {
257 |                 if (a.tag==tag && adjoinedRange(a.range,r)) {
258 |                     return true;
259 |                 }
260 |             });
261 |         };
262 | 
263 |         var overlap = overlaps(range);
264 |         if (overlap.count) {
265 |             if (overlap.list[0].range.intersect(range).size) {
266 |                 // echte overlap
267 |                 for (var i=0;i<overlap.list.length;i++) {
268 |                     this.fragment = this.fragment.remove(overlap.list[i].range, tag);
269 |                     this.fragment = this.fragment.apply(overlap.list[i].range.exclude(range), tag);
270 |                 }
271 |             } else {
272 |                 // alleen adjoined
273 |                 var combinedRange = range;
274 |                 for (var i=0;i<overlap.list.length;i++) {
275 |                     this.fragment = this.fragment.remove(overlap.list[i].range, tag);
276 |                     combinedRange = combinedRange.join(overlap.list[i].range);
277 |                 }
278 |                 this.fragment = this.fragment.apply(combinedRange, tag)
279 |             }
280 |         } else {
281 |             this.fragment = this.fragment.apply(range, tag);    
282 |         }
283 |     }
284 | 
285 |     /**
286 |      * Appends or inserts a string in the cobaltDocument, replacing the
287 |      * range in the given selection. Collapses the selections and sets
288 |      * the cursor to the end of inserted string.
289 |      * @param cobaltEditorSelection sel
290 |      * @param string string
291 |      */
292 |     append(sel, string) {
293 |         this.fragment = this.fragment.insert(sel.range, string);
294 | 		if (Object.keys(this.mode).length) {
295 | 			var self = this;
296 | 			var range = sel.range;
297 | 			if (range.size==0) {
298 | 				range = cobalt.range(range.start-1,range.end);
299 | 			}
300 |             console.log('applying modes',this.mode);
301 | 			Object.keys(this.mode).forEach(function(mode) {
302 | 				if (self.mode[mode]==false) {
303 | 					// find annotation matching mode
304 | 					var ann = self.fragment.annotations.get(range).filter(function(ann) {
305 | 						return ann.tagName==mode;
306 | 					});
307 | 					ann = ann.item(ann.count-1);
308 | 					// cut out the inserted string
309 | 					if (ann) {
310 | 						self.fragment = self.fragment.remove(ann.range, ann.tag);
311 | 						self.fragment = self.fragment.apply(ann.range.exclude([sel.range.start,sel.range.start+string.length]),ann.tag);
312 | 					}
313 | 				} else {
314 | 					self.fragment = self.fragment.apply([sel.range.start, sel.range.start + string.length], mode);
315 | 				}
316 | 			});
317 | 			this.mode = [];
318 | 		}
319 |         sel.range = sel.range.collapse().move(string.length);
320 |         sel.cursor = sel.range.end;
321 |         return sel;
322 |     }
323 | 
324 |     save() {
325 |         localStorage.setItem('cobaltDocument', this.fragment);
326 |     }
327 | 
328 |     load() {
329 |         var mimeDoc = localStorage.getItem('cobaltDocument');
330 |         this.fragment = cobalt.fragment(mimeDoc); 
331 |     }
332 | 
333 | }
334 | 
335 | export default function(el, debug) {
336 |     var editor = new cobaltEditor(el, debug);
337 |     editor.render();
338 |     return editor;
339 | };
340 | 


--------------------------------------------------------------------------------
/mjs/cobalt.editor.keyboard.js:
--------------------------------------------------------------------------------
  1 | class cobaltEditorKeyboard {
  2 | 
  3 | 	keyCodes = [];
  4 | 
  5 | 	constructor() {
  6 | 		this.keyCodes[3]  = 'Cancel';
  7 | 		this.keyCodes[6]  = 'Help';
  8 | 		this.keyCodes[8]  = 'Backspace';
  9 | 		this.keyCodes[9]  = 'Tab';
 10 | 		this.keyCodes[12] = 'Numlock-5';
 11 | 		this.keyCodes[13] = 'Enter';
 12 | 
 13 | 		this.keyCodes[16] = 'Shift';
 14 | 		this.keyCodes[17] = 'Control';
 15 | 		this.keyCodes[18] = 'Alt';
 16 | 		this.keyCodes[19] = 'Pause';
 17 | 		this.keyCodes[20] = 'CapsLock';
 18 | 		this.keyCodes[21] = 'KanaMode'; //HANGUL
 19 | 
 20 | 		this.keyCodes[23] = 'JunjaMode';
 21 | 		this.keyCodes[24] = 'FinalMode';
 22 | 		this.keyCodes[25] = 'HanjaMode'; //KANJI
 23 | 
 24 | 		this.keyCodes[27] = 'Escape';
 25 | 		this.keyCodes[28] = 'Convert';
 26 | 		this.keyCodes[29] = 'NonConvert';
 27 | 		this.keyCodes[30] = 'Accept';
 28 | 		this.keyCodes[31] = 'ModeChange';
 29 | 		this.keyCodes[32] = 'Spacebar';
 30 | 		this.keyCodes[33] = 'PageUp';
 31 | 		this.keyCodes[34] = 'PageDown';
 32 | 		this.keyCodes[35] = 'End';
 33 | 		this.keyCodes[36] = 'Home';
 34 | 		this.keyCodes[37] = 'ArrowLeft';
 35 | 		this.keyCodes[38] = 'ArrowUp';
 36 | 		this.keyCodes[39] = 'ArrowRight'; // opera has this as a "'" as well...
 37 | 		this.keyCodes[40] = 'ArrowDown';
 38 | 		this.keyCodes[41] = 'Select';
 39 | 		this.keyCodes[42] = 'Print';
 40 | 		this.keyCodes[43] = 'Execute';
 41 | 		this.keyCodes[44] = 'PrintScreen'; // opera ';';
 42 | 		this.keyCodes[45] = 'Insert'; // opera has this as a '-' as well...
 43 | 		this.keyCodes[46] = 'Delete'; // opera - ',';
 44 | 		this.keyCodes[47] = '/'; // opera
 45 | 
 46 | 		this.keyCodes[59] = ';';
 47 | 		this.keyCodes[60] = '<';
 48 | 		this.keyCodes[61] = '=';
 49 | 		this.keyCodes[62] = '>';
 50 | 		this.keyCodes[63] = '?';
 51 | 		this.keyCodes[64] = '@';
 52 | 
 53 | 		this.keyCodes[91] = 'OS'; // opera '[';
 54 | 		this.keyCodes[92] = 'OS'; // opera '\\';
 55 | 		this.keyCodes[93] = 'ContextMenu'; // opera ']';
 56 | 		this.keyCodes[95] = 'Sleep';
 57 | 		this.keyCodes[96] = '`';
 58 | 
 59 | 		this.keyCodes[106] = '*'; // keypad
 60 | 		this.keyCodes[107] = '+'; // keypad
 61 | 		this.keyCodes[109] = '-'; // keypad
 62 | 		this.keyCodes[110] = 'Separator';
 63 | 		this.keyCodes[111] = '/'; // keypad
 64 | 
 65 | 		this.keyCodes[144] = 'NumLock';
 66 | 		this.keyCodes[145] = 'ScrollLock';
 67 | 
 68 | 		this.keyCodes[160] = '^';
 69 | 		this.keyCodes[161] = '!';
 70 | 		this.keyCodes[162] = '"';
 71 | 		this.keyCodes[163] = '#';
 72 | 		this.keyCodes[164] = '$';
 73 | 		this.keyCodes[165] = '%';
 74 | 		this.keyCodes[166] = '&';
 75 | 		this.keyCodes[167] = '_';
 76 | 		this.keyCodes[168] = '(';
 77 | 		this.keyCodes[169] = ')';
 78 | 		this.keyCodes[170] = '*';
 79 | 		this.keyCodes[171] = '+';
 80 | 		this.keyCodes[172] = '|';
 81 | 		this.keyCodes[173] = '-';
 82 | 		this.keyCodes[174] = '{';
 83 | 		this.keyCodes[175] = '}';
 84 | 		this.keyCodes[176] = '~';
 85 | 
 86 | 		this.keyCodes[181] = 'VolumeMute';
 87 | 		this.keyCodes[182] = 'VolumeDown';
 88 | 		this.keyCodes[183] = 'VolumeUp';
 89 | 
 90 | 		this.keyCodes[186] = ';';
 91 | 		this.keyCodes[187] = '=';
 92 | 		this.keyCodes[188] = ',';
 93 | 		this.keyCodes[189] = '-';
 94 | 		this.keyCodes[190] = '.';
 95 | 		this.keyCodes[191] = '/';
 96 | 		this.keyCodes[192] = '`';
 97 | 
 98 | 		this.keyCodes[219] = '[';
 99 | 		this.keyCodes[220] = '\\';
100 | 		this.keyCodes[221] = ']';
101 | 		this.keyCodes[222] = "'";
102 | 		this.keyCodes[224] = 'Meta';
103 | 		this.keyCodes[225] = 'AltGraph';
104 | 
105 | 		this.keyCodes[246] = 'Attn';
106 | 		this.keyCodes[247] = 'CrSel';
107 | 		this.keyCodes[248] = 'ExSel';
108 | 		this.keyCodes[249] = 'EREOF';
109 | 		this.keyCodes[250] = 'Play';
110 | 		this.keyCodes[251] = 'Zoom';
111 | 		this.keyCodes[254] = 'Clear';
112 | 
113 | 		// a-z
114 | 		for ( var i=65; i<=90; i++ ) {
115 | 			this.keyCodes[i] = String.fromCharCode( i ).toLowerCase();
116 | 		}
117 | 
118 | 		// 0-9
119 | 		for ( var i=48; i<=57; i++ ) {
120 | 			this.keyCodes[i] = String.fromCharCode( i );
121 | 		}
122 | 		// 0-9 keypad
123 | 		for ( var i=96; i<=105; i++ ) {
124 | 			this.keyCodes[i] = ''+(i-95);
125 | 		}
126 | 
127 | 		// F1 - F24
128 | 		for ( var i=112; i<=135; i++ ) {
129 | 			this.keyCodes[i] = 'F'+(i-111);
130 | 		}
131 | 	}
132 | 
133 | 	getKey( evt ) {
134 | 		var keyInfo = '';
135 | 		if ( evt.ctrlKey && evt.keyCode != 17 ) {
136 | 			keyInfo += 'Control+';
137 | 		}
138 | 		if ( evt.metaKey && evt.keyCode != 224 ) {
139 | 			keyInfo += 'Meta+';
140 | 		}
141 | 		if ( evt.altKey && evt.keyCode != 18 ) {
142 | 			keyInfo += 'Alt+';
143 | 		}
144 | 		if ( evt.shiftKey && evt.keyCode != 16 ) {
145 | 			keyInfo += 'Shift+';
146 | 		}
147 | 		// evt.key turns shift+a into A, while keeping shiftKey, so it becomes Shift+A, instead of Shift+a.
148 | 		// so while it may be the future, i'm not using it here.
149 | 		if ( evt.charCode ) {
150 | 			keyInfo += String.fromCharCode( evt.charCode ).toLowerCase();
151 | 		} else if ( evt.keyCode ) {
152 | 			if ( typeof this.keyCodes[evt.keyCode] == 'undefined' ) {
153 | 				keyInfo += '('+evt.keyCode+')';
154 | 			} else {
155 | 				keyInfo += this.keyCodes[evt.keyCode];
156 | 			}
157 | 		} else {
158 | 			keyInfo += 'Unknown';
159 | 		}
160 | 		return keyInfo;
161 | 	}
162 | 
163 | 	listen( el, key, callback, capture ) {
164 | 		return el.addEventListener('keydown', function(evt) {
165 | 			var  pressedKey = self.getKey( evt );
166 | 			if ( key == pressedKey ) {
167 | 				callback.call( el, evt );
168 | 			}
169 | 		}, capture);
170 | 	}
171 | 
172 | 	getCharacter(evt) {
173 | 		evt = evt || window.event;
174 | 		if ( evt.which!==0 && !evt.ctrlKey && !evt.metaKey && !evt.altKey ) {
175 |     		return String.fromCharCode(evt.which);
176 |     	}
177 | 	}
178 | 
179 | }
180 | 
181 | export default new cobaltEditorKeyboard();


--------------------------------------------------------------------------------
/mjs/cobalt.editor.selection.js:
--------------------------------------------------------------------------------
  1 | import cobalt from './cobalt.js';
  2 | 
  3 | function getSelection(editor) {
  4 |     var getOffset = function(offset, node) {
  5 |         var treeWalker = document.createTreeWalker(
  6 |             editor.container,
  7 |             NodeFilter.SHOW_TEXT,
  8 |             function(node) {
  9 |                 return NodeFilter.FILTER_ACCEPT;
 10 |             },
 11 |             false
 12 |         );
 13 |         var getPrevNode = function(node) {
 14 |             treeWalker.currentNode = node;
 15 |             return treeWalker.previousNode();    
 16 |         };
 17 |         if (node.nodeType==Node.ELEMENT_NODE) {
 18 |             var cobaltOffset = 0;
 19 |             var newNode = node.childNodes.item(offset);
 20 |             if (newNode) {
 21 |                 node = newNode;
 22 |             }
 23 |         } else {
 24 |             var cobaltOffset = offset;
 25 |         }
 26 |         var textContent = "";
 27 | 
 28 |         while (node = getPrevNode(node) ) {
 29 |             textContent = node.textContent;
 30 |             cobaltOffset += textContent.length;
 31 |         }
 32 |         return cobaltOffset;
 33 |     };
 34 |     var sel   = window.getSelection();
 35 |     if (sel && sel.focusNode) {
 36 |         var end   = getOffset(sel.focusOffset, sel.focusNode);
 37 |         var start = getOffset(sel.anchorOffset, sel.anchorNode);
 38 |         if (start<=end) {
 39 |             return {
 40 |                 range: cobalt.range(start, end),
 41 |                 cursor: end
 42 |             };
 43 |         } else {
 44 |             return {
 45 |                 range: cobalt.range(end, start),
 46 |                 cursor: end
 47 |             };
 48 |         }
 49 |     } else {
 50 |         return { range: cobalt.range(0,0), cursor: 0 };
 51 |     }
 52 | }
 53 | 
 54 | function setSelection(editor, range, cursor) {
 55 |     var treeWalker = document.createTreeWalker(
 56 |         editor.container,
 57 |         NodeFilter.SHOW_TEXT,
 58 |         function(node) {
 59 |             return NodeFilter.FILTER_ACCEPT;
 60 |         },
 61 |         false
 62 |     );
 63 |     var getOffsetAndNode = function(offset) {
 64 |         var getNextNode = function(node) {
 65 |             treeWalker.currentNode = node;
 66 |             return treeWalker.nextNode();    
 67 |         };
 68 |         var node = getNextNode(editor.container);
 69 |         var currOffset = 0;
 70 |         var lastNode = editor.container;
 71 |         while (node && currOffset<=offset) {
 72 |             if ((node.textContent.length + currOffset) < offset ) {
 73 |                 currOffset += node.textContent.length;
 74 |                 lastNode = node;
 75 |                 node = getNextNode(node);
 76 |             } else {
 77 |                 break;
 78 |             }
 79 |         }
 80 |         if (!node) {
 81 |             node = lastNode;
 82 |         }
 83 |         return {
 84 |             node: node,
 85 |             offset: offset - currOffset
 86 |         }
 87 |     };
 88 | 
 89 |     if (cursor == range.start) {
 90 |         var end   = getOffsetAndNode(range.start);
 91 |         var start = getOffsetAndNode(range.end);
 92 |     } else {
 93 |         var start = getOffsetAndNode(range.start);
 94 |         var end   = getOffsetAndNode(range.end);
 95 |     }
 96 |     var range = document.createRange();
 97 |     range.setStart(start.node, start.offset);
 98 |     range.setEnd(end.node, end.offset);
 99 |     var selection = window.getSelection();
100 |     selection.removeAllRanges();
101 |     selection.addRange(range);
102 | }
103 | 
104 | export default {
105 |     get: getSelection,
106 |     set: setSelection
107 | };


--------------------------------------------------------------------------------
/mjs/cobalt.fragment.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Cobalt Fragment type
  3 |  * A Fragment is a combination of plain text and a list of annotations.
  4 |  * The list of annotations will always be sorted by start and then end position.
  5 |  * A fragment is immutable, all operations on it return a new fragment.
  6 |  */
  7 | 
  8 | import CobaltAnnotationList from './cobalt.annotationlist.js';
  9 | import cobalt from './cobalt.js';
 10 | 
 11 | /**
 12 |  * Non public text api.
 13 |  */
 14 | var cobaltText = {
 15 |     delete: function(text, range) {
 16 |         range.ranges.reverse().forEach(function(re) {
 17 |             text = text.slice(0, re.start) + text.slice(re.end);
 18 |         });
 19 |         return text;
 20 |     },
 21 |     copy: function(text, range) {
 22 |         var result = '';
 23 |         range.ranges.forEach(function(re) {
 24 |             result += text.slice(re.start, re.end);
 25 |         });
 26 |         return result;
 27 |     },
 28 |     insert: function(text, insert, position) {
 29 |         return text.slice(0,position) + insert + text.slice(position);
 30 |     }
 31 | };
 32 | 
 33 | /**
 34 |  * Non public annotations api.
 35 |  */
 36 | var cobaltAnnotations = {
 37 |     delete: function(annotations, range) {
 38 |         var result = [];
 39 |         annotations.forEach(function(ann) {
 40 |             ann = ann.delete(range);
 41 |             if ( ann ) {
 42 |                 result.push(ann);
 43 |             }
 44 |         });
 45 |         return new CobaltAnnotationList(result);
 46 |     },
 47 |     copy: function(annotations, range) {
 48 |         var result = [];
 49 |         annotations.forEach(function(ann) {
 50 |             if ( ann.range.overlaps(range) ) {
 51 |                 var copyAnn = cobalt.annotation( ann.range.intersect(range), ann.tag );
 52 |                 result.push( copyAnn );
 53 |             }
 54 |         });
 55 |         return new CobaltAnnotationList(result);
 56 |     },
 57 |     insert: function(annotations, position, size ) {
 58 |         var result = [];
 59 |         var insertedRange = cobalt.range(position, position+size);
 60 |         annotations.forEach(function(ann) {
 61 |             var foo = ann.range.insert( insertedRange );
 62 |             result.push( cobalt.annotation( foo, ann.tag ) );
 63 |         });
 64 |         return new CobaltAnnotationList(result);
 65 |     }
 66 | };
 67 | 
 68 | function parseFragment(fragment) {
 69 |     var text = '', annotations = '';
 70 |     if (fragment) {
 71 |         var info = cobalt.mime.decode( fragment );
 72 |         info.parts.forEach( function(part) {
 73 |             switch( part.headers['content-type'] ) {
 74 |                 case 'text/plain' :
 75 |                     text = part.message;
 76 |                   break;
 77 |                 case 'text/cobalt' :
 78 |                     annotations = part.message;
 79 |                 break;
 80 |             }
 81 |         });
 82 |     }
 83 |     return { text: text, annotations: annotations };
 84 | }
 85 | 
 86 | 
 87 | /**
 88 |  * Cobalt Fragment type and public api.
 89 |  */
 90 | class CobaltFragment {
 91 |     constructor( text, annotations ) {
 92 |         if ( text instanceof CobaltFragment ) {
 93 |             return text;
 94 |         }
 95 |         if ( typeof annotations == 'undefined') {
 96 |             var result = parseFragment(text);
 97 |             if ( result.text || result.annotations) {
 98 |                 text = result.text;
 99 |                 annotations = result.annotations;
100 |             }
101 |         }
102 |         this.text = '' + text;
103 |         this.annotations = new CobaltAnnotationList( annotations );
104 |         Object.freeze(this);
105 |     }
106 | 
107 |     get length() {
108 |         return this.text.length;
109 |     }
110 | 
111 |     /**
112 |      * Returns a new fragment where the given range is deleted (cut).
113 |      */
114 |     delete( range ) {
115 |         range = cobalt.range(range);
116 |         return new CobaltFragment(
117 |             cobaltText.delete( this.text, range ),
118 |             cobaltAnnotations.delete( this.annotations, range )
119 |         );
120 |     }
121 | 
122 |     /**
123 |      * Returns a new fragment with only the parts that overlap the given range.
124 |      * The new fragment adds all text slices matching the range together as one
125 |      * single text. All annotations are moved/cut to match this new text.
126 |      */
127 |     copy( range ) {
128 |         range = cobalt.range(range);
129 |         var annCopy = cobaltAnnotations.copy(
130 |                 this.annotations,
131 |                 range
132 |             );
133 |         // now move everything to the left;
134 |         var inverseRange = range.invert(this.text.length);
135 |         annCopy = annCopy.delete(range.invert(this.text.length));
136 |         return new CobaltFragment(
137 |             cobaltText.copy( this.text, range ),
138 |             annCopy
139 |         );
140 |     }
141 | 
142 |     /**
143 |      * Returns a combined new fragment with the inserted fragment text and annotations
144 |      * inserted at the given position.
145 |      */
146 |     insert( range, fragment ) {
147 |         range = cobalt.range(range);
148 |         fragment = new CobaltFragment(fragment);
149 |         var result = this.delete(range);
150 |         if (!fragment || !fragment.text.length) {
151 |             return result;
152 |         }
153 |         return new CobaltFragment(
154 |             cobaltText.insert( result.text, fragment.text, range.start ),
155 |             cobaltAnnotations
156 |             .insert( result.annotations, range.start, fragment.text.length )
157 |             .apply( cobaltAnnotations.insert( fragment.annotations, 0, range.start ) )
158 |         );
159 |     }
160 | 
161 |     /**
162 |      * Returns a new range, with the given range/tag or annotation or annotationlist applied
163 |      */
164 |     apply( range, tag ) {
165 |         range = cobalt.range(range);
166 |         return new CobaltFragment(
167 |             this.text,
168 |             this.annotations.apply( range, tag )
169 |         );
170 |     }
171 | 
172 |     /**
173 |      * Returns a new range, with the given range/tag or annotation or annotationlist removed
174 |      */
175 |     remove( range, tag ) {
176 |         range = cobalt.range(range);
177 |         return new CobaltFragment(
178 |             this.text,
179 |             this.annotations.remove( range, tag )
180 |         );
181 |     }
182 | 
183 |     /**
184 |      * Search through the text using a regular expression or string. Returns a range object
185 |      * encompassing all matches.
186 |      */
187 |     search( searchRe ) {
188 |         function escapeRegExp(str) {
189 |             return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
190 |         }
191 |         if ( typeof(searchRe) === 'string' ) {
192 |             searchRe = new RegExp(escapeRegExp(searchRe), 'g');
193 |         }
194 |         var result = [];
195 |         if (this.text.length) {
196 |             var match, lastIndex;
197 |             while (match = searchRe.exec(this.text)) {
198 |                 result.push([match.index, searchRe.lastIndex]);
199 |                 if (lastIndex==searchRe.lastIndex) {
200 |                     searchRe.lastIndex++;
201 |                 }
202 |                 lastIndex = searchRe.lastIndex;
203 |             }
204 |         }
205 |         return cobalt.range(result);
206 |     }
207 | 
208 |     /**
209 |      * Search through the annotations using a query language approximately like css selectors.
210 |      * Returns a range object encompassing all matched ranges.
211 |      */
212 |     query( selector ) {
213 |         return this.annotations.query(selector, this.text.length);
214 |     }
215 | 
216 |     /*
217 |      * Returns a mime encoded string with the text and annotations.
218 |      */
219 |     toString() {
220 |         return cobalt.mime.encode( [
221 |             'Content-type: text/plain\n\n' + this.text,
222 |             'Content-type: text/cobalt\n\n' + this.annotations
223 |         ]);
224 |     }
225 | 
226 | };
227 | 
228 | export default function(text, annotations) {
229 |     if ( text instanceof CobaltFragment ) {
230 |         // because CobaltFragment is immutable, we can just return it.
231 |         return text;
232 |     } else {
233 |         return new CobaltFragment(text, annotations);
234 |     }
235 | };
236 | 


--------------------------------------------------------------------------------
/mjs/cobalt.js:
--------------------------------------------------------------------------------
 1 | import cobaltRange from './cobalt.range.js';
 2 | import cobaltAnnotation from './cobalt.annotation.js';
 3 | import cobaltMime from './cobalt.mime.js';
 4 | import cobaltFragment from './cobalt.fragment.js';
 5 | import cobaltHTML from './cobalt.html.js';
 6 | import cobaltEditor from './cobalt.editor.js';
 7 | 
 8 | export default {
 9 |     range:      cobaltRange,
10 |     annotation: cobaltAnnotation,
11 |     mime:       cobaltMime,
12 |     fragment:   cobaltFragment,
13 |     html:       cobaltHTML,
14 |     editor:     cobaltEditor
15 | };
16 | 


--------------------------------------------------------------------------------
/mjs/cobalt.mime.js:
--------------------------------------------------------------------------------
 1 | 	// minimal mime encoding/decoding, stolen from https://github.com/andris9/mimelib/blob/master/lib/mimelib.js
 2 | 
 3 | let mime = {};
 4 | 
 5 | mime.getHeaders = function( message ) {
 6 | 	var parseHeader = function( line ) {
 7 | 	    if (!line) {
 8 | 	        return {};
 9 | 	    }
10 | 
11 | 	    var result = {}, parts = line.split(";"),
12 | 	        pos;
13 | 
14 | 	    for (var i = 0, len = parts.length; i < len; i++) {
15 | 	        pos = parts[i].indexOf("=");
16 | 	        if (pos < 0) {
17 | 	        	pos = parts[i].indexOf(':');
18 | 	        }
19 | 	        if ( pos < 0 ) {
20 | 	            result[!i ? "defaultValue" : "i-" + i] = parts[i].trim();
21 | 	        } else {
22 | 	            result[parts[i].substr(0, pos).trim().toLowerCase()] = parts[i].substr(pos + 1).trim();
23 | 	        }
24 | 	    }
25 | 	    return result;
26 | 	};
27 | 	var line = null;
28 | 	var headers = {};
29 | 	var temp = {};
30 | 	while ( line = message.match(/^.*$/m)[0] ) {
31 | 		message = message.substring( line.length );
32 | 		temp = parseHeader( line );
33 | 		for ( var i in temp ) {
34 | 			headers[i] = temp[i];
35 | 		}
36 | 		var returns = message.match(/^\r?\n|\r/);
37 | 		if ( returns && typeof returns[0] != 'undefined') {
38 | 			message = message.substring( returns[0].length );
39 | 		}
40 | 	}
41 | 	return {
42 | 		headers: headers,
43 | 		message: message.substring(1)
44 | 	}
45 | }
46 | 
47 | mime.encode = function( parts, message, headers ) {
48 | 	var boundary = 'cobaltBoundary'+Date.now();
49 | 	var result = 'MIME-Version: 1.0\n';
50 | 	if ( headers ) {
51 | 		result += headers.join("\n");
52 | 	}
53 | 	result += 'Content-Type: multipart/related; boundary='+boundary+'\n\n';
54 | 	if ( message ) {
55 | 		result += message;
56 | 	}
57 | 	for ( var i=0, l=parts.length; i<l; i++ ) {
58 | 		result += '\n--'+boundary+'\n' + parts[i];
59 | 	}
60 | 	return result;
61 | }
62 | 
63 | mime.decode = function( message ) {
64 | 	if (!message) {
65 | 		return {
66 | 			headers: [],
67 | 			message: '',
68 | 			parts: []
69 | 		};
70 | 	}
71 | 	var part;
72 | 	var parsed = mime.getHeaders( message );
73 | 	parsed.parts = [];
74 | 	if ( parsed.headers.boundary ) {
75 | 		var parts = parsed.message.split( '\n--'+parsed.headers.boundary+"\n" );
76 | 		var message = parts.shift();
77 | 		if ( message ) {
78 | 			parsed.message = message;
79 | 		}
80 | 		while ( part = parts.shift() ) {
81 | 			parsed.parts.push( mime.decode(part) );
82 | 		}
83 | 	}
84 | 	return parsed;
85 | }
86 | 
87 | export default mime;
88 | 
89 | 


--------------------------------------------------------------------------------
/mjs/cobalt.range.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Cobalt Range type
  3 |  * A Range is a collection of [start, end] CobaltSingleRange pairs.
  4 |  * Any CobaltSingleRange will never overlap or be consecutive with any other CobaltSingleRange
  5 |  * start will always be >= 0
  6 |  * Ranges and CobaltSingleRanges are immutable. All changes will return a new object.
  7 |  * CobaltSingleRanges have a start and end, where start <= end, and a size (end - start)
  8 |  * Ranges have a start, end and size, and a count - the number of CobaltSingleRanges >= 0
  9 |  */
 10 | import CobaltSingleRange from './cobalt.singlerange.js';
 11 | import cobalt from './cobalt.js';
 12 | 
 13 | class CobaltRange {
 14 |     constructor(s,e) {
 15 |         let r = null;
 16 |         if (s.constructor && s.constructor.name == 'CobaltRange') {
 17 |             return s;
 18 |         } else if (s.constructor && s.constructor.name == 'CobaltSingleRange') {
 19 |             this.ranges = [ s ];
 20 |         } else if ( Array.isArray(s) ) {
 21 |             // first argument is a range
 22 |             for ( var i=0, l=s.length; i<l; i++ ) {
 23 |                 if ( s[i] instanceof  CobaltSingleRange ) {
 24 |                     r = s[i];
 25 |                 } else if ( Array.isArray(s[i]) && s[i].length < 3 && s[i].length > 0 ) {
 26 |                     r = new CobaltSingleRange( s[i][0], s[i][1] );
 27 |                 } else if ( Array.isArray(s) && s.length < 3 && s.length > 0 ) {
 28 |                     // first argument is an array with start and end only
 29 |                     r = new CobaltSingleRange( s[0], s[1] );
 30 |                     delete s[1];
 31 |                     s[0] = r;
 32 |                     break;
 33 |                 } else {
 34 |                     cobalt.error('Not a valid Range', 'cobalt.range.invalid-range');
 35 |                 }
 36 |                 s[i] = r;
 37 |             }
 38 |             s.sort(function(a,b) {
 39 |                 return a.compare(b);
 40 |             });
 41 |             this.ranges = s.reduce(function(acc,r) {
 42 |                 if (!acc.length) {
 43 |                     acc.push(r);
 44 |                 } else {
 45 |                     if (acc[acc.length-1].end>=r.start) {
 46 |                         acc[acc.length-1] = new CobaltSingleRange(acc[acc.length-1].start, r.end);
 47 |                     } else {
 48 |                         acc.push(r);
 49 |                     }
 50 |                 }
 51 |                 return acc;
 52 |             },[]);
 53 |         } else if ( Number.isInteger(s) && Number.isInteger(e) ) {
 54 |             this.ranges = [ new CobaltSingleRange(s,e) ];
 55 |         } else if ( Number.isInteger(s) ) {
 56 |             this.ranges = [ new CobaltSingleRange(s,s) ];
 57 |         } else if (typeof s != 'undefined' ) {
 58 |             throw new Error('illegal value');
 59 |         } else {
 60 |             this.ranges = [];
 61 |         }
 62 |         Object.freeze(this.ranges); // TODO: check if this is needed
 63 |         Object.freeze(this);
 64 |     }
 65 | 
 66 |     /**
 67 |      * Return the start position of the first subrange or null
 68 |      */
 69 |     get start() {
 70 |         return this.ranges.length ? this.ranges[0].start : null;
 71 |     }
 72 | 
 73 |     /**
 74 |      * Return the end position of the last subrange or null
 75 |      */
 76 |     get end() {
 77 |         return this.ranges.length ? this.ranges[ this.ranges.length - 1 ].end : null;
 78 |     }
 79 | 
 80 |     /**
 81 |      * Return the size in characters between the start and end position or null
 82 |      */
 83 |     get size() {
 84 |         return this.ranges.length ? this.end - this.start : null;
 85 |     }
 86 | 
 87 |     /**
 88 |      * Return the number of subranges.
 89 |      */
 90 |     get count() {
 91 |         return this.ranges.length;
 92 |     }
 93 | 
 94 |     /**
 95 |      * Return a Range of the requested subrange or null.
 96 |      */
 97 |     get(i) {
 98 |         return (i>=0 && i<this.count) ? new CobaltRange(this.ranges[i].start, this.ranges[i].end) : null;
 99 |     }
100 | 
101 |     /**
102 |      * Delete (cut) parts of this range.
103 |      */
104 |     delete(r) {
105 |         r = cobalt.range(r);
106 |         var s = this;
107 |         for (var i=r.count-1; i>=0; i--) {
108 |             s = cutLength(s, r.get(i).start, r.get(i).size);
109 |         }
110 |         return s;
111 |     }
112 | 
113 |     /**
114 |      * Run a callback on each subrange.
115 |      */
116 |     forEach(f) {
117 |         for (var i=0,l=this.count; i<l; i++) {
118 |             f(this.get(i));
119 |         }
120 |     }
121 | 
122 |     /**
123 |      * Insert character space in this range.
124 |      */
125 |     insert(r) {
126 |         r = cobalt.range(r);
127 |         var s = this;
128 |         for (var i=r.count-1; i>=0; i--) {
129 |             s = insertLength(s, r.get(i).start, r.get(i).size);
130 |         }
131 |         return s;
132 |     }
133 | 
134 |     /**
135 |      * Create a new Range with either the start or end position, with no size.
136 |      */
137 |     collapse(toEnd) {
138 |         if (toEnd) {
139 |             return new CobaltRange(this.end, this.end);
140 |         } else {
141 |             return new CobaltRange(this.start, this.start);
142 |         }
143 |     }
144 | 
145 |     toString() {
146 |         return this.ranges.join(',');
147 |     }
148 | 
149 |     /**
150 |      * Returns a new range as a union of this range and the given range.
151 |      */
152 |     join(r) {
153 |         r = cobalt.range(r);
154 |         return new CobaltRange( this.ranges.concat(r.ranges) );
155 |     }
156 | 
157 |     /*
158 |      * Returns a new range as the relative complement of r.
159 |      * All parts that overlap with r are removed ( not cut ).
160 |      */
161 |     exclude(r) {
162 |         r = cobalt.range(r); // make sure r has only nonconsecutive, nonoverlapping singlerange subranges, ordered
163 |         var ri = 0;
164 |         var si = 0;
165 |         var result = this.ranges.slice().filter(function(CobaltSingleRange) {
166 |             return CobaltSingleRange.start!=CobaltSingleRange.end;
167 |         });
168 |         while (ri<r.ranges.length && si<result.length) {
169 |             if (r.ranges[ri].leftOf(result[si]) || r.ranges[ri].end==result[si].start) {
170 |                 ri++;
171 |             } else if (r.ranges[ri].rightOf(result[si]) || r.ranges[ri].start==result[si].end) {
172 |                 si++;
173 |             } else {
174 |                 var t1 = result[si].exclude(r.ranges[ri]);
175 |                 if (t1.length) {
176 |                     result = result.slice(0,si).concat(t1).concat(result.slice(si+1));
177 |                     //if (t1.size>1) {
178 |                         si++;
179 |                     //}
180 |                 } else {
181 |                     result.splice(si,1);
182 |                 }
183 |             }
184 |         }
185 |         return new CobaltRange(result);
186 |     }
187 | 
188 |     excludeDisjointed(r) {
189 |         r = cobalt.range(r);
190 |         var ri = 0;
191 |         var si = 0;
192 |         var result = this.ranges.slice();
193 |         while (ri<r.ranges.length && si<result.length) {
194 |             if (r.ranges[ri].leftOf(result[si])) {
195 |                 ri++;
196 |             } else if (r.ranges[ri].rightOf(result[si])) {
197 |                 si++;
198 |             } else {
199 |                 var t1 = result[si].exclude(r.ranges[ri]);
200 |                 if (t1.length) {
201 |                     result = result.slice(0,si).concat(t1).concat(result.slice(si+1));
202 |                     //if (t1.size>1) {
203 |                         si++;
204 |                     //}
205 |                 } else {
206 |                     result.splice(si,1);
207 |                 }
208 |             }
209 |         }
210 |         return result.map(function(r) { return new CobaltRange(r.start, r.end); });
211 |     }
212 | 
213 |     /**
214 |      * Return a new range consisting of the intersection or overlap of this and r.
215 |      */
216 |     intersect(r) {
217 |         r = cobalt.range(r);
218 |         return this.exclude(r.invert(Math.max(this.end,r.end)));
219 |     }
220 | 
221 |     /**
222 |      * Return a new range where all positions have moved by the given number of characters
223 |      * A negative number moves the range down, a positive number up.
224 |      */
225 |     move(by) {
226 |         var s = [];
227 |         this.forEach(function(re) {
228 |             s.push( new CobaltSingleRange(re.start + by, re.end + by ));
229 |         });
230 |         return new CobaltRange(s);
231 |     }
232 | 
233 |     /**
234 |      * Return a new range that is the exact reverse of the this range,
235 |      * within a maximum size given by 'end'.
236 |      */
237 |     invert(end) {
238 |         return new CobaltRange(0,end).exclude(this);
239 |     }
240 | 
241 |     /**
242 |      * Returns -1, 0, or 1 if given range is smaller, equal or larger than this range.
243 |      */
244 |     compare(s) {
245 |         if ( s.start < this.start ) {
246 |             return 1;
247 |         } else if ( s.start > this.start ) {
248 |             return -1;
249 |         } else if ( s.end < this.end ) {
250 |             return 1;
251 |         } else if ( s.end > this.end ) {
252 |             return -1;
253 |         }
254 |         return 0;
255 |     }
256 | 
257 |     overlaps(r) {
258 |         return this.intersect(r).size > 0;
259 |     }
260 | 
261 |     explode() {
262 |         return this.ranges.map(r => new CobaltRange(r));
263 |     }
264 | };
265 | 
266 | function cutLength(range, pos, length) {
267 |     if ( length < 1 ) {
268 |         return range;
269 |     }
270 |     var s = [];
271 |     range.forEach(function(r) {
272 |         if ( r.end <= pos ) { // range before cut
273 |             s.push( new CobaltSingleRange( r.start, r.end ) );
274 |         } else if ( r.start > ( pos + length ) ) { // range after cut
275 |             s.push( new CobaltSingleRange( r.start - length, r.end - length) );
276 |         } else if ( r.end > ( pos + length ) ) { // range extends after cut
277 |             var start = r.start > pos ? pos : r.start;
278 |             if ( s.length && s[s.length-1].end >= start ) {
279 |                 s[s.length-1] = new CobaltSingleRange( s[s.length-1].start, r.end - length );
280 |             } else {
281 |                 s.push( new CobaltSingleRange( start, r.end - length ) );
282 |             }
283 | 
284 |         } else if ( r.start < pos ) { // range extends before cut
285 |             s.push( new CobaltSingleRange( r.start, pos ) );
286 |         } // else: range will be cut away
287 |     });
288 |     return new CobaltRange(s);
289 | };
290 | 
291 | function insertLength(range, pos, length) {
292 |     if ( length < 1 ) {
293 |         return range;
294 |     }
295 |     var s = [];
296 |     range.forEach(function(r) {
297 |         if ( r.end < pos ) {
298 |             s.push( new CobaltSingleRange( r.start, r.end ) );
299 |         } else if ( r.start >= pos ) {
300 |             s.push( new CobaltSingleRange( r.start + length, r.end + length) );
301 |         } else {
302 |             s.push( new CobaltSingleRange( r.start, r.end + length) );
303 |         }
304 |     });
305 |     return new CobaltRange(s);
306 | }
307 | 
308 | export default function(s,e) {
309 |     if ( s instanceof CobaltRange ) {
310 |         // because Range is immutable, we can just return s
311 |         return s;
312 |     } else {
313 |         return new CobaltRange(s,e);
314 |     }
315 | }
316 | 


--------------------------------------------------------------------------------
/mjs/cobalt.singlerange.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Internal range type that has only a start and end position.
  3 |  */
  4 | export default class CobaltSingleRange {
  5 |     constructor(s,e) {
  6 |         this.start = Math.max(0, s);
  7 |         this.end   = Math.max(this.start, e);
  8 |         Object.freeze(this);
  9 |     }
 10 | 
 11 |     /**
 12 |      * Returns the size of the range in characters.
 13 |      */
 14 |     get size() {
 15 |         return this.end - this.start;
 16 |     }
 17 | 
 18 |     /**
 19 |      * Returns -1, 0, or 1 if given range is smaller, equal or larger than this range.
 20 |      */
 21 |     compare(s) {
 22 |         if ( s.start < this.start ) {
 23 |             return 1;
 24 |         } else if ( s.start > this.start ) {
 25 |             return -1;
 26 |         } else if ( s.end < this.end ) {
 27 |             return 1;
 28 |         } else if ( s.end > this.end ) {
 29 |             return -1;
 30 |         }
 31 |         return 0;
 32 |     }
 33 | 
 34 |     /**
 35 |      * Collapse a range to size 0. If toEnd is true, the position will be the end of the range.
 36 |      */
 37 |     collapse(toEnd) {
 38 |         if ( toEnd ) {
 39 |             return new CobaltSingleRange(this.end, this.end);
 40 |         } else {
 41 |             return new CobaltSingleRange(this.start, this.start);
 42 |         }
 43 |     }
 44 | 
 45 |     /**
 46 |      * Returns true if the given range is equal to this range.
 47 |      */
 48 |     equals(s) {
 49 |         return this.compare(s)==0;
 50 |     }
 51 | 
 52 |     /**
 53 |      * Returns true if the given range is smaller than this range. Smaller being
 54 |      * start position is smaller, or the same and end is smaller.
 55 |      */
 56 |     smallerThan(s) {
 57 |         return this.compare(s)==-1;
 58 |     }
 59 | 
 60 |     /**
 61 |      * Returns true if the given range is larger than this range. Larger being
 62 |      * start position is larger, or the same and end is larger.
 63 |      */
 64 |     largerThan(s) {
 65 |         return this.compare(s)==1;
 66 |     }
 67 | 
 68 |     /**
 69 |      * Returns true if this range is entirely to the left of the given range,
 70 |      * and not connected.
 71 |      */
 72 |     leftOf(s) {
 73 |         return this.collapse(true).compare(s.collapse())==-1;
 74 |     }
 75 | 
 76 |     /**
 77 |      * Returns true if this range is entirely to the right of the given range,
 78 |      * and not connected.
 79 |      */
 80 |     rightOf(s) {
 81 |         return this.collapse().compare(s.collapse(true))==1;
 82 |     }
 83 | 
 84 |     /**
 85 |      * Returns true if there is a non-empty overlap.
 86 |      */
 87 |     overlaps(s) {
 88 |         return ( s.start < this.end && s.end > this.start );
 89 |     }
 90 | 
 91 |     /**
 92 |      * Returns true if the given range is fully contained within the current range.
 93 |      */
 94 |     contains(s) {
 95 |         return this.overlaps(s) && ( s.start >= this.start && s.end <= this.end );
 96 |     }
 97 | 
 98 |     /**
 99 |      * Returns a new range with the exact overlap between this range and the given range.
100 |      */
101 |     overlap(range) {
102 |         var start = 0;
103 |         var end = 0;
104 |         if ( this.overlaps( range ) ) {
105 |             if ( range.start < this.start ) {
106 |                 start = this.start;
107 |             } else {
108 |                 start = range.start;
109 |             }
110 |             if ( range.end < this.end ) {
111 |                 end = range.end;
112 |             } else {
113 |                 end = this.end;
114 |             }
115 |         }
116 |         return new CobaltSingleRange(start, end);
117 |     }
118 | 
119 |     /**
120 |      * return an array of subranges of this subrange that do not overlap with the given range
121 |      */
122 |     exclude( range ) {
123 |         var result = [];
124 |         if ( this.overlaps( range ) ) {
125 |             if ( this.start < range.start ) {
126 |                 result.push( new CobaltSingleRange( this.start, range.start ) );
127 |             }
128 |             if ( range.end < this.end ) {
129 |                 result.push( new CobaltSingleRange( range.end, this.end ) );
130 |             }
131 |         } else {
132 |             result.push( this );
133 |         }
134 |         return result;
135 |     }
136 | 
137 |     toString() {
138 |         return this.start + '-' + this.end;
139 |     }
140 | };
141 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Cobalt",
 3 |   "author": "auke@muze.nl",
 4 |   "version": "0.0.1",
 5 |   "description": "Character Offset Based Annotation Language & Tools",
 6 |   "scripts": {
 7 |     "test": "tap test/*.js"
 8 |   },
 9 |   "dependencies": {},
10 |   "devDependensies": {},
11 |   "devDependencies": {
12 |     "webpack": "~1.12.11",
13 |     "tap": "~5.0.1"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 | {
 3 |     input: 'mjs/cobalt.js',
 4 |     output: {
 5 |         file: 'dist/cobalt.js',
 6 |         format: 'umd',
 7 |         name: 'cobalt'
 8 |     }
 9 | }
10 | ];


--------------------------------------------------------------------------------
/src/cobalt.annotation.js:
--------------------------------------------------------------------------------
  1 | module.exports = function(range, tag) {
  2 | 
  3 |     /**
  4 |      * Fast trim algorithm (trim19) from
  5 |      * https://yesudeep.wordpress.com/2009/07/31/even-faster-string-prototype-trim-implementation-in-javascript/
  6 |      */
  7 |     function trim(str)
  8 |     {
  9 |         var str = str.replace(/^\s\s*/, ''),
 10 |             ws = /\s/,
 11 |             i = str.length;
 12 |         while (ws.test(str.charAt(--i)));
 13 |         return str.slice(0, i + 1);
 14 |     }
 15 | 
 16 | /*
 17 |     function parseClasses(className) {
 18 |         return className.split(/\s+/);
 19 |     }
 20 | 
 21 |     function removeQuotes(s) {
 22 |         if (!s) {
 23 |             return s;
 24 |         }
 25 |         s = trim(s);
 26 |         if ( s[0]=='"' || s[0]=="'") {
 27 |             return s.substr(1,-1);
 28 |         }
 29 |         return s;
 30 |     }
 31 | 
 32 |     function classList()
 33 |     {
 34 |         this.classes = {};
 35 |         this.add(arguments);
 36 |     }
 37 | 
 38 |     classList.prototype = {
 39 |         constructor: classList,
 40 |         add: function()
 41 |         {
 42 |             for ( var i=0, l=arguments.length; i<l; i++ ) {
 43 |                 var className = getClassName(arguments[i]);
 44 |                 if ( className ) {
 45 |                     this.classes[className] = true;
 46 |                 }
 47 |             }
 48 |         },
 49 |         remove: function()
 50 |         {
 51 |             for ( var i=0,l=arguments.length; i<l; i++ ) {
 52 |                 var className = getClassName(arguments[i]);
 53 |                 if ( className ) {
 54 |                     delete this.classes[className];
 55 |                 }
 56 |             }
 57 |         },
 58 |         item: function(index)
 59 |         {
 60 |             return Object.keys(this.classes)[index];
 61 |         },
 62 |         toggle: function(className, force)
 63 |         {
 64 |             className = getClassName(className);
 65 |             if (className) {
 66 |                 if ( force===false || (force!=true && typeof this.classes[className] != undefined) ) {
 67 |                     delete this.classes[className];
 68 |                 } else {
 69 |                     this.classes[className] = true;
 70 |                 }
 71 |             }
 72 |         },
 73 |         contains: function(className)
 74 |         {
 75 |             className = getClassName(className)
 76 |             return (className && typeof this.classes[className]!=undefined);
 77 |         }
 78 |     }
 79 | */
 80 |     function Annotation(range, tag)
 81 |     {
 82 |         this.type  = 'cobaltAnnotation';
 83 |         this.range = cobalt.range(range);
 84 |         this.tag   = trim(tag);
 85 |         var elements = trim(tag).split(/\s/);
 86 |         this.tagName = elements.shift().toLowerCase();
 87 | 
 88 | /*        this.attributes = {
 89 |             get id () {
 90 |                 return this.id;
 91 |             },
 92 |             get className () {
 93 |                 return this.classListe.join(' ');
 94 |             }
 95 |         };
 96 |         elements.forEach(function(el) {
 97 |             var nameValuePair = el.split('=',1);
 98 |             switch(nameValuePair[0]) {
 99 |                 case 'class':
100 |                     if ( typeof nameValuePair[1] != undefined ) {
101 |                         this.classList = parseClasses(nameValuePair[1]);
102 |                     }
103 |                 break;
104 |                 case 'id':
105 |                     if ( typeof nameValuePair[1] != undefined ) {
106 |                         this.id = nameValuePair[1];
107 |                     }
108 |                 break;
109 |                 default:
110 |                     // check if name starts with 'data-'
111 |                     this.attributes[nameValuePair[0]] = removeQuotes(nameValuePair[1]);
112 |                 break;
113 |             }
114 |         });
115 | */
116 |         Object.freeze(this);
117 |     }
118 | 
119 |     Annotation.prototype = {
120 |         constructor: Annotation,
121 |         /**
122 |          * Returns a new annotation with this range deleted. Offsets can move.
123 |          * Returns null if the annotation range is fully deleted.
124 |          */
125 |         delete: function( range ) {
126 |             var r = this.range.delete(range);
127 |             return (r.count) ? new Annotation( r, this.tag ) : null;
128 |         },
129 |         /**
130 |          * Returns a new annotation with this range inserted.
131 |          * Offsets can move.
132 |          */
133 |         insert: function( range ) {
134 |             return new Annotation( this.range.insert(range), this.tag);
135 |         },
136 |         /**
137 |          * Returns a new annotation with this range excluded. Offsets won't move otherwise.
138 |          * Returns null if the annotation range is fully excluded.
139 |          */
140 |         exclude: function( range ) {
141 |             var r = this.range.exclude(range);
142 |             return (r.count) ? new Annotation( r, this.tag ) : null;
143 |         },
144 |         /**
145 |          * Returns a new annotation with this range joined. Offsets won't move otherwise.
146 |          */
147 |         join: function( range ) {
148 |             return new Annotation( this.range.join( range ), this.tag );
149 |         },
150 |         /**
151 |          * Returns a new annotation with the overlapping part of the given range,
152 |          * r null if there is no overlap.
153 |          */
154 |         copy: function( range ) {
155 |             var r = this.range.intersect( range );
156 |             return (r.count) ? new Annotation( r, this.tag ) : null;
157 |         },
158 |         /**
159 |          * Returns -1, 0, or 1, depending if the range in the given annotation is smaller,
160 |          * equal or larger than the annotation range.
161 |          */
162 |         compare: function( annotation ) {
163 |             return this.range.compare( annotation.range );
164 |         },
165 |         /**
166 |          * Returns true if the first word in this tag is the same as the first word
167 |          * in the given tag.
168 |          */
169 |         has: function( tag ) {
170 |             //TODO: should be able to specify attributes and attribute values as well
171 |             return this.tagName === tag.split(/\s/)[0];
172 |         },
173 |         toString: function() {
174 |             return this.range + ':' + this.tag;
175 |         }
176 |     }
177 | 
178 |     if ( cobalt.implements(range, 'cobaltAnnotation') ) {
179 |         // because Annotation is immutable, we can just return it.
180 |         return range;
181 |     } else {
182 |         return new Annotation(range, tag);
183 |     }
184 | };


--------------------------------------------------------------------------------
/src/cobalt.dom.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Cobalt DOM
  3 |  */
  4 | module.exports = function(text, annotations)
  5 | {
  6 | 
  7 |     function Entry(document)
  8 |     {
  9 |         this.document   = document;
 10 |         this.next       = null;
 11 |         this.prev       = null;
 12 |     }
 13 | 
 14 |     Entry.prototype = {
 15 |         constructor: Entry,
 16 |         get index () {
 17 |             // return index of entry in the list
 18 |         },
 19 |         get position () {
 20 |             // return the position in the text for this entry
 21 |         },
 22 |         set position () {
 23 |             // move the entry to the last index in the list where it matches with the given position
 24 |         },
 25 |         delete: function() {
 26 |             var prev = this.prev;
 27 |             var next = this.next;
 28 |             if (prev) {
 29 |                 prev.next = next;
 30 |             }
 31 |             if (next) {
 32 |                 next.prev = prev;
 33 |             }
 34 |             if ( this.document.head == this ) {
 35 |                 this.document.head = next;
 36 |             }
 37 |             if ( this.document.tail == this ) {
 38 |                 this.document.tail = prev;
 39 |             }
 40 |         }
 41 |     };
 42 | 
 43 |     function InsertEntry(document, annotation)
 44 |     {
 45 |         Entry.call(this, document);
 46 |         this.annotation = annotation;
 47 |         this.annotation.addEntry(this);
 48 |     }
 49 | 
 50 |     InsertEntry.prototype = {
 51 |         __proto__: Entry.prototype,
 52 |         constructor: InsertEntry
 53 |     };
 54 | 
 55 |     function TextEntry(document, text)
 56 |     {
 57 |         Entry.call(this, document);
 58 |         this.text     = text;
 59 |     }
 60 | 
 61 |     TextEntry.prototype = {
 62 |         __proto__: Entry.prototype,
 63 |         constructor: TextEntry
 64 |     }
 65 | 
 66 |     function StartEntry(document,annotation)
 67 |     {
 68 |         Entry.call(this, document);
 69 |         this.annotation = annotation;
 70 |         this.end        = null
 71 |     }
 72 | 
 73 |     StartEntry.prototype = {
 74 |         __proto__: Entry.prototype,
 75 |         constructor: StartEntry,
 76 |         delete: function() {
 77 |             this.prototype.delete();
 78 |             if (this.end) {
 79 |                 this.end.delete();
 80 |             }
 81 |         }
 82 |     }
 83 | 
 84 |     function EndEntry(document,annotation)
 85 |     {
 86 |         Entry.call(this, document);
 87 |         this.annotation = annotation;
 88 |         this.start      = null;
 89 |     }
 90 | 
 91 |     EndEntry.prototype = {
 92 |         __proto__: Entry.prototype,
 93 |         constructor: EndEntry,
 94 |         delete: function() {
 95 |             this.prototype.delete();
 96 |             if (this.start) {
 97 |                 this.start.delete();
 98 |             }
 99 |         }
100 |     }
101 | 
102 |     function domClassList()
103 |     {
104 |         this.classes = {};
105 |         this.add(arguments);
106 |     }
107 | 
108 |     domClassList.prototype = {
109 |         constructor: classList,
110 |         add: function()
111 |         {
112 |             for ( var i=0, l=arguments.length; i<l; i++ ) {
113 |                 var className = getClassName(arguments[i]);
114 |                 if ( className ) {
115 |                     this.classes[className] = true;
116 |                 }
117 |             }
118 |         },
119 |         remove: function()
120 |         {
121 |             for ( var i=0,l=arguments.length; i<l; i++ ) {
122 |                 var className = getClassName(arguments[i]);
123 |                 if ( className ) {
124 |                     delete this.classes[className];
125 |                 }
126 |             }
127 |         },
128 |         item: function(index)
129 |         {
130 |             return Object.keys(this.classes)[index];
131 |         },
132 |         toggle: function(className, force)
133 |         {
134 |             className = getClassName(className);
135 |             if (className) {
136 |                 if ( force===false || (force!=true && typeof this.classes[className] != undefined) ) {
137 |                     delete this.classes[className];
138 |                 } else {
139 |                     this.classes[className] = true;
140 |                 }
141 |             }
142 |         },
143 |         contains: function(className)
144 |         {
145 |             className = getClassName(className)
146 |             return (className && typeof this.classes[className]!=undefined);
147 |         }
148 |     }
149 | 
150 |     function domAnnotation(annotation)
151 |     {
152 |         function trim(str)
153 |         {
154 |             var str = str.replace(/^\s\s*/, ''),
155 |                 ws = /\s/,
156 |                 i = str.length;
157 |             while (ws.test(str.charAt(--i)));
158 |             return str.slice(0, i + 1);
159 |         }
160 | 
161 |         function stripQuotes(str)
162 |         {
163 |             str = trim(str);
164 |             str = str.replace(/["']/g, '');
165 |             return str;
166 |         }
167 | 
168 |         var elements    = annotation.split(/\s/);
169 |         this.tagName    = elements.shift().toLowerCase();
170 |         this.attributes = {
171 |             get id () {
172 |                 return this.id;
173 |             },
174 |             get className () {
175 |                 return this.classList.join(' ');
176 |             }
177 |         };
178 |         elements.forEach(function(el) {
179 |             var nameValuePair = el.split('=',1);
180 |             switch(nameValuePair[0]) {
181 |                 case 'class':
182 |                     if ( typeof nameValuePair[1] != undefined ) {
183 |                         this.classList = new domClassList(stripQuotes(nameValuePair[1]));
184 |                     }
185 |                 break;
186 |                 case 'id':
187 |                     if ( typeof nameValuePair[1] != undefined ) {
188 |                         this.id = stripQuotes(nameValuePair[1]);
189 |                     }
190 |                 break;
191 |                 default:
192 |                     // check if name starts with 'data-'
193 |                     this.attributes[nameValuePair[0]] = stripQuotes(nameValuePair[1]);
194 |                 break;
195 |             }
196 |         });
197 |     }
198 | 
199 | 
200 |     /**
201 |      * A domCursor is a pointer to a spot in the domList. It consists
202 |      * of an entry and optional offset if that entry is a TextEntry.
203 |      * The domCursor may also point to the document itself.
204 |      */
205 |     function domCursor(entry, offset)
206 |     {
207 |         this.entry  = entry;
208 |         if ( typeof entry == 'TextEntry' ) {
209 |             this.offset = Math.min(entry.text.length,offset);
210 |         } else {
211 |             this.offset = 0;
212 |         }
213 |     }
214 | 
215 |     domCursor.prototype = {
216 |         constructor: domCursor,
217 |         get position () {
218 |             var current  = this.document.head;
219 |             var position = 0;
220 |             while (current && current!=this.entry) {
221 |                 if (typeof current == 'TextEntry') {
222 |                     position += current.text.length;
223 |                 }
224 |                 current = current.next;
225 |             }
226 |             if ( current && typeof current == 'TextEntry' ) {
227 |                 position += Math.min(current.text.length, this.offset);
228 |             }
229 |             return position;
230 |         }
231 |     }
232 | 
233 |     /**
234 |      * A domRange consists of a startCursor and endCursor, in the same document
235 |      *
236 |      */
237 |     function domRange(startCursor, endCursor)
238 |     {
239 |         if ( startCursor.document!=endCursor.document ) {
240 |             throw new domException('start and end cursor not in the same document');
241 |         }
242 |         this.start    = startCursor;
243 |         this.end      = endCursor;
244 |     }
245 | 
246 | 
247 |     function domList(text, annotations)
248 |     {
249 |         this.head     = null;
250 |         this.tail     = null;
251 |         this.document = this;
252 |     }
253 | 
254 | /*
255 |         insertBefore: function(entry)
256 |         {
257 |             var prev       = this.prev;
258 |             this.prev      = entry;
259 |             entry.next     = this;
260 |             entry.prev     = prev;
261 |             if (prev) {
262 |                 prev.next  = entry;
263 |             }
264 |             entry.document = this.document;
265 |             if ( this.document.head == this ) {
266 |                 this.document.head = entry;
267 |             }
268 |         },
269 |         appendEntry: function(entry)
270 |         {
271 |             var next       = this.next;
272 |             this.next      = entry;
273 |             entry.next     = next;
274 |             entry.prev     = this;
275 |             if ( next ) {
276 |                 next.prev  = entry;
277 |             }
278 |             entry.document = this.document;
279 |             if ( this.document.tail == this ) {
280 |                 this.document.tail = entry;
281 |             }
282 |         },
283 | */
284 | 
285 |     domList.prototype = {
286 |         constructor: domList,
287 |         apply: function(domRange, tag)
288 |         {
289 |             // add annotation for the tag
290 | 
291 |         },
292 |         remove: function(domRange, tag)
293 |         {
294 | 
295 |         }
296 |         insert: function(position, fragment)
297 |         {
298 | 
299 |         },
300 |         copy: function(domRange)
301 |         {
302 | 
303 |         },
304 |         delete: function(domRange)
305 |         {
306 | 
307 |         },
308 |         search: function(range, searchRe)
309 |         {
310 | 
311 |         },
312 |         query: function(domRange, selector)
313 |         {
314 | 
315 |         }
316 |     }
317 | 
318 | }(cobalt.dom||{});


--------------------------------------------------------------------------------
/src/cobalt.editor-lite.js:
--------------------------------------------------------------------------------
  1 | cobalt.editor = (function(self) {
  2 | 
  3 | 
  4 |     function cobaltEditor(el, debug)
  5 |     {
  6 |         var editor = this;
  7 |         this.container = ( typeof el == 'string' ? document.querySelector(el) : el );
  8 |         this.container.contentEditable = true;
  9 |         this.fragment  = cobalt.fragment('','');
 10 |         this.selection = cobalt.editor.selection(this);
 11 |         this.container.addEventListener('keypress', function(evt) {
 12 |             handleKeyPressEvent.call(editor, evt);
 13 |         });
 14 |         this.container.addEventListener('keydown', function(evt) {
 15 |             handleKeyDownEvent.call(editor, evt);
 16 |         });
 17 |         this.mode = ['p'];
 18 |         if (debug) {
 19 |             this.debug = (typeof debug=='string' ? document.querySelector(debug) : debug);
 20 |         }
 21 |     }
 22 | 
 23 |     cobaltEditor.prototype = {
 24 |         constructor: cobaltEditor,
 25 |         focus: function() {
 26 |             this.container.focus();
 27 |         },
 28 |         render: function(sel) {
 29 |             var fragment = this.fragment;
 30 |             var html = cobalt.html.render(fragment);
 31 |             this.container.innerHTML = html+'<span class="cursorSpace"></span>\n';// extra \n is to give the browser room for a cursor
 32 |             if (sel) {
 33 |                 var editor = this;
 34 |                 //editor.selection.set(sel.range.collapse(), sel.range.start);
 35 |                 editor.selection.set(sel.range, sel.cursor);
 36 |                 if (editor.debug) {
 37 |                     editor.debug.innerText = '['+sel.range.start+','+sel.range.end+"]\n"+fragment;
 38 |                 }
 39 |             }
 40 |         },
 41 |         allowmap: {
 42 |             'ArrowLeft':true,
 43 |             'ArrowRight':true,
 44 |             'ArrowUp':true,
 45 |             'ArrowDown':true,
 46 |             'PageUp':true,
 47 |             'PageDown':true,
 48 |             'Home':true,
 49 |             'End':true,
 50 |             'Shift+ArrowLeft':true,
 51 |             'Shift+ArrowRight':true,
 52 |             'Shift+ArrowUp':true,
 53 |             'Shift+ArrowDown':true,
 54 |             'Shift+PageUp':true,
 55 |             'Shift+PageDown':true,
 56 |             'Shift+Home':true,
 57 |             'Shift+End':true,
 58 |             'Ctrl+ArrowLeft':true,
 59 |             'Ctrl+ArrowRight':true,
 60 |             'Ctrl+ArrowUp':true,
 61 |             'Ctrl+ArrowDown':true,
 62 |             'Ctrl+PageUp':true,
 63 |             'Ctrl+PageDown':true,
 64 |             'Ctrl+Home':true,
 65 |             'Ctrl+End':true
 66 |         },
 67 |         keymap: {
 68 |             'Backspace': function(sel) {
 69 |                 if ( !sel.range.size ) {
 70 |                     sel.range = cobalt.range(sel.range.start - 1, sel.range.end);
 71 |                 }
 72 |                 this.fragment = this.fragment.delete(sel.range);
 73 |                 sel.range = sel.range.collapse();
 74 |                 this.render(sel);
 75 |             },
 76 |             'Delete': function(sel) {
 77 |                 if ( !sel.range.size ) {
 78 |                     sel.range = cobalt.range(sel.range.start, sel.range.end+1);
 79 |                 }
 80 |                 this.fragment = this.fragment.delete(sel.range);
 81 |                 sel.range = sel.range.collapse();
 82 |                 this.render(sel);
 83 |             },
 84 |             'Enter': function(sel) {
 85 |                 this.fragment = this.fragment.insert(sel.range, "\n");
 86 | 				var block = getBlock(this.fragment, sel.range);
 87 | 				if (block) {
 88 | 					this.fragment = this.fragment.remove(block.range, block.tag).apply([block.range.start, block.range.end-1],block.tag);
 89 | 				}
 90 |                 sel.range = sel.range.collapse().move(1);
 91 | 				this.mode.push(nextBlock(block));
 92 |                 sel.cursor = sel.range.end;
 93 |                 this.render(sel);
 94 |             },
 95 |             'Control+b': function(sel) {
 96 | 				if (sel.range.size) {
 97 | 	                this.toggle(sel.range, 'strong', sel.cursor);
 98 | 	                this.render(sel);
 99 | 				} else {
100 | 					if (!sel.range.start || !hasAnnotation(this.fragment, sel.range, 'strong')) {
101 | 						this.mode.push('strong');
102 | 					} else {
103 | 						this.mode.push('-strong');
104 | 					}
105 | 				}
106 |             },
107 |             'Control+i': function(sel) {
108 |                 this.toggle(sel.range, 'em', sel.cursor);
109 |                 this.render(sel);
110 |             },
111 |             'Control+1': function(sel) {
112 |                 this.fragment = this.fragment.apply(sel.range, 'h1');
113 |                 this.render(sel);
114 |             },
115 |             'Control+2': function(sel) {
116 |                 this.fragment = this.fragment.apply(sel.range, 'h2');
117 |                 this.render(sel);
118 |             }
119 |         },
120 |         toggle: function(range, tag, cursor) {
121 |             var editor = this;
122 |             if (range.size===0) {
123 |                 this.mode[tag] = !this.mode[tag];
124 |                 return;
125 |             }
126 | 
127 |             var adjoinedRange = function(r,s) {
128 |                 var x = r.join(s);
129 |                 return (x.count <= r.count ? x : false);
130 |             };
131 | 
132 |             var overlaps = function(r) {
133 |                 return editor.fragment.annotations.filter(function(a) {
134 |                     if (a.tag==tag && adjoinedRange(a.range,r)) {
135 |                         return true;
136 |                     }
137 |                 });
138 |             };
139 | 
140 |             var overlap = overlaps(range);
141 |             if (overlap.count) {
142 |                 if (overlap.list[0].range.intersect(range).size) {
143 |                     // echte overlap
144 |                     for (var i=0;i<overlap.list.length;i++) {
145 |                         this.fragment = this.fragment.remove(overlap.list[i].range, tag);
146 |                         this.fragment = this.fragment.apply(overlap.list[i].range.exclude(range), tag);
147 |                     }
148 |                 } else {
149 |                     // alleen adjoined
150 |                     var combinedRange = range;
151 |                     for (var i=0;i<overlap.list.length;i++) {
152 |                         this.fragment = this.fragment.remove(overlap.list[i].range, tag);
153 |                         combinedRange = combinedRange.join(overlap.list[i].range);
154 |                     }
155 |                     this.fragment = this.fragment.apply(combinedRange, tag)
156 |                 }
157 |             } else {
158 |                 this.fragment = this.fragment.apply(range, tag);    
159 |             }
160 |         },
161 |         append: function(sel, string) {
162 |             this.fragment = this.fragment.insert(sel.range, string);
163 | 			if (this.mode.length) {
164 | 				var self = this;
165 | 				var range = sel.range;
166 | 				if (range.size==0) {
167 | 					range = cobalt.range(range.start-1,range.end);
168 | 				}
169 | 				this.mode.forEach(function(mode) {
170 | 					if (mode[0]=='-') {
171 | 						mode = mode.substr(1);
172 | 						// find annotation matching mode
173 | 						var ann = self.fragment.annotations.get(range).filter(function(ann) {
174 | 							return ann.tagName==mode;
175 | 						});
176 | 						ann = ann.item(ann.count-1);
177 | 						// cut out the inserted string
178 | 						if (ann) {
179 | 							self.fragment = self.fragment.remove(ann.range, ann.tag);
180 | 							self.fragment = self.fragment.apply(ann.range.exclude([sel.range.start,sel.range.start+string.length]),ann.tag);
181 | 						}
182 | 					} else {
183 | 						self.fragment = self.fragment.apply([sel.range.start, sel.range.start + string.length], mode);
184 | 					}
185 | 				});
186 | 				this.mode = [];
187 | 			}
188 |             sel.range = sel.range.collapse().move(string.length);
189 |             sel.cursor = sel.range.end;
190 |             return sel;
191 |         }
192 |     }
193 | 
194 | 	function getBlock(fragment, range) {
195 | 		var annotations = fragment.annotations.get([range.start-1,range.start]);
196 | 		annotations = annotations.filter(function(ann) {
197 | 			return ['p','h1','h2','h3'].indexOf(ann.tagName)!=-1;
198 | 		});
199 | 		if (annotations.count) {
200 | 			return annotations.item(annotations.count-1);
201 | 		}
202 | 	}
203 | 
204 | 	function hasAnnotation(fragment, range, tag) {
205 | 		if (range.start==range.end) {
206 | 			range = cobalt.range(range.start-1,range.end);
207 | 		}
208 | 		var annotations = fragment.annotations.get(range);
209 | 		annotations = annotations.filter(function(ann) {
210 | 			return ann.tag==tag;
211 | 		});
212 | 		return annotations.count>0;
213 | 	}		
214 | 
215 | 	function nextBlock(block) {
216 | 		switch(block) {
217 | 			case 'li':
218 | 				return 'li';
219 | 			break;
220 | 			case 'h1':
221 | 			case 'h2':
222 | 			case 'h3':
223 | 			case 'p':
224 | 			default:
225 | 				return 'p';
226 | 			break;
227 | 		}
228 | 	}
229 | 
230 |     function handleKeyPressEvent(evt)
231 |     {
232 |         if ( !evt.ctrlKey && !evt.altKey && !evt.commandKey) {
233 |             var sel  = this.selection.get();
234 |             var char = cobalt.keyboard.getCharacter(evt);
235 |             if (char) {
236 |                 sel =this.append(sel, char);
237 |                 this.render(sel);
238 |             }
239 |         }
240 |         var key = cobalt.keyboard.getKey(evt);
241 |         if (!this.allowmap[key]) {
242 |             evt.preventDefault();
243 |             evt.stopPropagation();
244 |             return false;
245 |         }
246 |     }
247 | 
248 |     function handleKeyDownEvent(evt)
249 |     {
250 |         var key = cobalt.keyboard.getKey(evt);
251 |         console.log(key);
252 |         if ( this.keymap[key] ) {
253 |             var sel = this.selection.get();
254 |             this.keymap[key].call(this, sel);
255 |             evt.preventDefault();
256 |             evt.stopPropagation();
257 |             return false;
258 |         }
259 |     }
260 | 
261 |     self.create = function(el, debug)
262 |     {
263 |         var editor = new cobaltEditor(el, debug);
264 |         editor.render();
265 |         return editor;
266 |     };
267 | 
268 |     return self;
269 | })(cobalt.editor||{});
270 | 
271 | cobalt.keyboard = require('./cobalt.keyboard');
272 | cobalt.editor.selection = require('./cobalt.editor.selection');


--------------------------------------------------------------------------------
/src/cobalt.editor.js:
--------------------------------------------------------------------------------
  1 | cobalt.editor = (function(self) {
  2 | 
  3 | 
  4 |     function cobaltEditor(el, debug)
  5 |     {
  6 |         var editor = this;
  7 |         this.container = ( typeof el == 'string' ? document.querySelector(el) : el );
  8 |         this.container.contentEditable = true;
  9 |         this.fragment  = cobalt.fragment('','');
 10 |         this.selection = cobalt.editor.selection(this);
 11 |         this.container.addEventListener('keypress', function(evt) {
 12 |             handleKeyPressEvent.call(editor, evt);
 13 |         });
 14 |         this.container.addEventListener('keydown', function(evt) {
 15 |             handleKeyDownEvent.call(editor, evt);
 16 |         });
 17 |         this.mode = {
 18 |             strong: false,
 19 |             em: false,
 20 |             u: false
 21 |         };
 22 |         if (debug) {
 23 |             this.debug = (typeof debug=='string' ? document.querySelector(debug) : debug);
 24 |         }
 25 |     }
 26 | 
 27 |     cobaltEditor.prototype = {
 28 |         constructor: cobaltEditor,
 29 |         focus: function() {
 30 |             this.container.focus();
 31 |         },
 32 |         enterRange: function() {
 33 |             var fragment = this.fragment;
 34 |             var enters = [];
 35 |             var range = fragment.search(/^.*$/gm);
 36 |             for (var i=0,l=range.ranges.length;i<l;i++) {
 37 |                 enters.push(range.ranges[i]);
 38 |             }
 39 |             enters = cobalt.range(enters).invert(fragment.text.length);
 40 |             return enters;
 41 |         },
 42 |         render: function(sel) {
 43 |             var fragment = this.fragment;
 44 |             var preAnnotations = '';
 45 |             var range = fragment.search(/^.*$/gm);
 46 |             for ( var i=0,l=range.ranges.length;i<l;i++) {
 47 |                 preAnnotations += range.ranges[i]+':p\n';
 48 |             }
 49 | 
 50 |             var range = fragment.search(/^[0-9]+\. .*$/gm);
 51 |             if (range && range.count) {
 52 |                 preAnnotations += range.start+'-'+range.end+':ol\n';
 53 |                 for ( var i=0,l=range.ranges.length;i<l;i++) {
 54 |                     preAnnotations += range.ranges[i]+':li\n';
 55 |                 }
 56 |             }
 57 | //            var range = fragment.search(/^[0-9]+\. /gm);
 58 | //            preAnnotations += range+':span class="hidden"\n';
 59 | 
 60 |             fragment = cobalt.fragment(fragment.text, preAnnotations+fragment.annotations);
 61 |             var html = cobalt.html.render(fragment);
 62 |             this.container.innerHTML = html+'\n';// extra \n is to give the browser room for a cursor
 63 |             if (sel) {
 64 |                 var editor = this;
 65 |                 //editor.selection.set(sel.range.collapse(), sel.range.start);
 66 |                 editor.selection.set(sel.range, sel.cursor);
 67 |                 if (editor.debug) {
 68 |                     editor.debug.innerText = '['+sel.range.start+','+sel.range.end+"]\n"+fragment;
 69 |                 }
 70 |             }
 71 |         },
 72 |         allowmap: {
 73 |             'ArrowLeft':true,
 74 |             'ArrowRight':true,
 75 |             'ArrowUp':true,
 76 |             'ArrowDown':true,
 77 |             'PageUp':true,
 78 |             'PageDown':true,
 79 |             'Home':true,
 80 |             'End':true,
 81 |             'Shift+ArrowLeft':true,
 82 |             'Shift+ArrowRight':true,
 83 |             'Shift+ArrowUp':true,
 84 |             'Shift+ArrowDown':true,
 85 |             'Shift+PageUp':true,
 86 |             'Shift+PageDown':true,
 87 |             'Shift+Home':true,
 88 |             'Shift+End':true,
 89 |             'Ctrl+ArrowLeft':true,
 90 |             'Ctrl+ArrowRight':true,
 91 |             'Ctrl+ArrowUp':true,
 92 |             'Ctrl+ArrowDown':true,
 93 |             'Ctrl+PageUp':true,
 94 |             'Ctrl+PageDown':true,
 95 |             'Ctrl+Home':true,
 96 |             'Ctrl+End':true
 97 |         },
 98 |         keymap: {
 99 |             'Backspace': function(sel) {
100 |                 if ( !sel.range.size ) {
101 |                     sel.range = cobalt.range(sel.range.start - 1, sel.range.end);
102 |                 }
103 |                 this.fragment = this.fragment.delete(sel.range);
104 |                 sel.range = sel.range.collapse();
105 |                 this.render(sel);
106 |             },
107 |             'Delete': function(sel) {
108 |                 if ( !sel.range.size ) {
109 |                     sel.range = cobalt.range(sel.range.start, sel.range.end+1);
110 |                 }
111 |                 this.fragment = this.fragment.delete(sel.range);
112 |                 sel.range = sel.range.collapse();
113 |                 this.render(sel);
114 |             },
115 |             'Enter': function(sel) {
116 |                 this.fragment = this.fragment.insert(sel.range, "\n");
117 |                 sel.range = sel.range.collapse().move(1);
118 |                 sel.cursor = sel.range.end;
119 |                 this.render(sel);
120 |             },
121 |             'Control+b': function(sel) {
122 |                 this.toggle(sel.range, 'strong', sel.cursor);
123 |                 this.render(sel);
124 |             },
125 |             'Control+i': function(sel) {
126 |                 this.toggle(sel.range, 'em', sel.cursor);
127 |                 this.render(sel);
128 |             },
129 |             'Control+1': function(sel) {
130 |                 this.fragment = this.fragment.apply(sel.range.exclude(this.enterRange()), 'h1');
131 |                 this.render(sel);
132 |             },
133 |             'Control+2': function(sel) {
134 |                 this.fragment = this.fragment.apply(sel.range, 'h2');
135 |                 this.render(sel);
136 |             }
137 |         },
138 |         toggle: function(range, tag, cursor) {
139 |             var editor = this;
140 |             if (range.size===0) {
141 |                 this.mode[tag] = !this.mode[tag];
142 |                 return;
143 |             }
144 | 
145 |             var adjoinedRange = function(r,s) {
146 |                 var x = r.join(s);
147 |                 return (x.count <= r.count ? x : false);
148 |             };
149 | 
150 |             var overlaps = function(r) {
151 |                 return editor.fragment.annotations.filter(function(a) {
152 |                     if (a.tag==tag && adjoinedRange(a.range,r)) {
153 |                         return true;
154 |                     }
155 |                 });
156 |             };
157 | 
158 |             var overlap = overlaps(range);
159 |             if (overlap.count) {
160 |                 if (overlap.list[0].range.intersect(range).size) {
161 |                     // echte overlap
162 |                     for (var i=0;i<overlap.list.length;i++) {
163 |                         this.fragment = this.fragment.remove(overlap.list[i].range, tag);
164 |                         this.fragment = this.fragment.apply(overlap.list[i].range.exclude(range), tag);
165 |                     }
166 |                 } else {
167 |                     // alleen adjoined
168 |                     var combinedRange = range;
169 |                     for (var i=0;i<overlap.list.length;i++) {
170 |                         this.fragment = this.fragment.remove(overlap.list[i].range, tag);
171 |                         combinedRange = combinedRange.join(overlap.list[i].range);
172 |                     }
173 |                     this.fragment = this.fragment.apply(combinedRange, tag)
174 |                 }
175 |             } else {
176 |                 this.fragment = this.fragment.apply(range, tag);    
177 |             }
178 |         },
179 |         append: function(sel, string) {
180 |             this.fragment = this.fragment.insert(sel.range, string);
181 |             sel.range = sel.range.collapse().move(1);
182 |             sel.cursor = sel.range.end;
183 |             return sel;
184 |         }
185 |     }
186 | 
187 | 
188 |     function handleKeyPressEvent(evt)
189 |     {
190 |         if ( !evt.ctrlKey && !evt.altKey ) {
191 |             var sel  = this.selection.get();
192 |             var char = cobalt.keyboard.getCharacter(evt);
193 |             if (char) {
194 |                 sel =this.append(sel, char);
195 |                 this.render(sel);
196 |             }
197 |         }
198 |         var key = cobalt.keyboard.getKey(evt);
199 |         if (!this.allowmap[key]) {
200 |             evt.preventDefault();
201 |             evt.stopPropagation();
202 |             return false;
203 |         }
204 |     }
205 | 
206 |     function handleKeyDownEvent(evt)
207 |     {
208 |         var key = cobalt.keyboard.getKey(evt);
209 |         console.log(key);
210 |         if ( this.keymap[key] ) {
211 |             var sel = this.selection.get();
212 |             this.keymap[key].call(this, sel);
213 |             evt.preventDefault();
214 |             evt.stopPropagation();
215 |             return false;
216 |         }
217 |     }
218 | 
219 |     self.create = function(el, debug)
220 |     {
221 |         var editor = new cobaltEditor(el, debug);
222 |         editor.render();
223 |         return editor;
224 |     };
225 | 
226 |     return self;
227 | })(cobalt.editor||{});
228 | 
229 | cobalt.keyboard = require('./cobalt.keyboard');
230 | cobalt.editor.selection = require('./cobalt.editor.selection');


--------------------------------------------------------------------------------
/src/cobalt.editor.selection.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(editor) {
 2 |     var treeWalker = document.createTreeWalker(
 3 |         editor.container,
 4 |         NodeFilter.SHOW_TEXT,
 5 |         function(node) {
 6 |             return NodeFilter.FILTER_ACCEPT;
 7 |         },
 8 |         false
 9 |     );
10 |     var getPrevNode = function(node) {
11 |         treeWalker.currentNode = node;
12 |         return treeWalker.previousNode();    
13 |     };
14 |     var getNextNode = function(node) {
15 |         treeWalker.currentNode = node;
16 |         return treeWalker.nextNode();    
17 |     };
18 |     var getOffset = function(offset, node) {
19 |         if (node.nodeType==Node.ELEMENT_NODE) {
20 |             var cobaltOffset = 0;
21 |             var newNode = node.childNodes.item(offset);
22 |             if (newNode) {
23 |                 node = newNode;
24 |             }
25 |         } else {
26 |             var cobaltOffset = offset;
27 |         }
28 |         var textContent = "";
29 | 
30 |         while (node = getPrevNode(node) ) {
31 |             textContent = node.textContent;
32 |             cobaltOffset += textContent.length;
33 |         }
34 |         return cobaltOffset;
35 |     };
36 |     var getOffsetAndNode = function(offset) {
37 |         var node = getNextNode(editor.container);
38 |         var currOffset = 0;
39 |         var lastNode = editor.container;
40 |         while (node && currOffset<=offset) {
41 |             if ((node.textContent.length + currOffset) < offset ) {
42 |                 currOffset += node.textContent.length;
43 |                 lastNode = node;
44 |                 node = getNextNode(node);
45 |             } else {
46 |                 break;
47 |             }
48 |         }
49 |         if (!node) {
50 |             node = lastNode;
51 |         }
52 |         return {
53 |             node: node,
54 |             offset: offset - currOffset
55 |         }
56 |     };
57 | 
58 |     return {
59 |         get: function() {
60 |             var sel   = window.getSelection();
61 |             var end   = getOffset(sel.focusOffset, sel.focusNode);
62 |             var start = getOffset(sel.anchorOffset, sel.anchorNode);
63 |             if (start<=end) {
64 |                 return {
65 |                     range: cobalt.range(start, end),
66 |                     cursor: end
67 |                 }
68 |             } else {
69 |                 return {
70 |                     range: cobalt.range(end, start),
71 |                     cursor: end
72 |                 }
73 |             }
74 |         },
75 |         set: function(range, cursor) {
76 |             if (cursor == range.start) {
77 |                 var end   = getOffsetAndNode(range.start);
78 |                 var start = getOffsetAndNode(range.end);
79 |             } else {
80 |                 var start = getOffsetAndNode(range.start);
81 |                 var end   = getOffsetAndNode(range.end);
82 |             }
83 |             var range = document.createRange();
84 |             range.setStart(start.node, start.offset);
85 |             range.setEnd(end.node, end.offset);
86 |             var selection = window.getSelection();
87 |             selection.removeAllRanges();
88 |             selection.addRange(range);
89 |         }
90 |     }
91 | };


--------------------------------------------------------------------------------
/src/cobalt.fragment.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Cobalt Fragment type
  3 |  * A Fragment is a combination of plain text and a list of annotations.
  4 |  * The list of annotations will always be sorted by start and then end position.
  5 |  * A fragment is immutable, all operations on it return a new fragment.
  6 |  */
  7 | module.exports = function(text, annotations) {
  8 | 
  9 |     /**
 10 |      * The annotations list of a fragment, with the public api.
 11 |      */
 12 |     function cobaltAnnotationList( annotations ) {
 13 |         this.type = 'cobaltAnnotationList';
 14 |         this.list = [];
 15 |         if ( cobalt.implements(annotations,'cobaltAnnotationList') ) {
 16 |             // FIXME: create private factory method for cobaltAnnotationList
 17 |             // that just returns the input object in this case.
 18 |             this.list = annotations.list;
 19 |         } else if ( Array.isArray( annotations) ) {
 20 |             this.list = annotations;
 21 |         } else {
 22 |             this.list = parseAnnotations( annotations + '' );
 23 |         }
 24 |         // clear unset ranges.
 25 |         this.list = this.list.filter( function(ann) {
 26 |             return ann.range.start != null;
 27 |         });
 28 |         // sort by range
 29 |         this.list.sort( function(a, b) {
 30 |             if ( a.range.start < b.range.start ) {
 31 |                 return -1;
 32 |             } else if ( a.range.start > b.range.start ) {
 33 |                 return 1;
 34 |             }
 35 |             return 0;
 36 |         });
 37 |         Object.freeze(this);
 38 |         Object.freeze(this.list);
 39 |     }
 40 | 
 41 |     function parseAnnotations(annotations) {
 42 |         var reMarkupLine = /^(?:(([0-9]+\-[0-9]+)(,[0-9]+\-[0-9]+)*)):(.*)$/m;
 43 |         var matches = [];
 44 |         var list = [];
 45 |         while ( annotations && ( matches = annotations.match(reMarkupLine) ) ) {
 46 |             list.push(
 47 |                 cobalt.annotation(
 48 |                     matches[1].split(',').map(function(rs) {
 49 |                         return rs.split('-').map(function(re) {
 50 |                             return parseInt(re);
 51 |                         });
 52 |                     }),
 53 |                     matches[matches.length-1]
 54 |                 )
 55 |             );
 56 |             annotations = annotations.substr( matches[0].length + 1 );
 57 |         }
 58 |         return list;
 59 |     }
 60 | 
 61 |     cobaltAnnotationList.prototype = {
 62 |         constructor: cobaltAnnotationList,
 63 |         /**
 64 |          * Returns the number of annotations in the list.
 65 |          */
 66 |         get count () {
 67 |             return this.list.length;
 68 |         },
 69 |         item: function(index) {
 70 |             return this.list[index];
 71 |         },
 72 |         /**
 73 |          * Returns a string with all annotations joined by newlines.
 74 |          */
 75 |         toString: function() {
 76 |             return this.list.join('\n');
 77 |         },
 78 |         /**
 79 |          * Returns a new list with a new annotation added.
 80 |          */
 81 |         apply: function(range, tag) {
 82 |             if ( range instanceof cobaltAnnotationList ) {
 83 |                 return new cobaltAnnotationList(
 84 |                     this.list.concat(range.list)
 85 |                 );
 86 |             } else {
 87 |                 if ( typeof range.tag != 'undefined' ) {
 88 |                     tag   = range.tag;
 89 |                     range = range.range;
 90 |                 }
 91 |                 var list = this.list.slice();
 92 |                 list.push(
 93 |                     cobalt.annotation(range,tag)
 94 |                 );
 95 | 
 96 |                 return new cobaltAnnotationList(list);
 97 |             }
 98 |         },
 99 |         /**
100 |          * Returns a new list, with the annotations with the given
101 |          * tag cleared on the given range.
102 |          */
103 |         remove: function(range, tag) {
104 |             if ( range instanceof cobaltAnnotationList ) {
105 |                 // FIXME: fill in
106 |             } else {
107 |                 if ( typeof range.tag != 'undefined' ) {
108 |                     tag   = range.tag;
109 |                     range = range.range;
110 |                 }
111 |                 var result = [];
112 |                 this.list.forEach(function(ann) {
113 |                     if ( ann.has(tag) ) {
114 |                         var r = ann.range.exclude(range);
115 |                         if ( r && r.start != null ) {
116 |                             result.push( cobalt.annotation( r, ann.tag ) );
117 |                         }
118 |                     } else {
119 |                         result.push(ann);
120 |                     }
121 |                 });
122 |                 return new cobaltAnnotationList(result);
123 |             }
124 |         },
125 | 
126 |         /**
127 |          * Returns a new list with all annotations cleared on the given range.
128 |          * Clear doesn't move the annotations, it just removes parts or all of them.
129 |          */
130 |         clear: function(range) {
131 |             var result = [];
132 |             this.list.forEach(function(ann) {
133 |                 var r = ann.range.exclude(range);
134 |                 if ( r.start != null ) {
135 |                     result.push( cobalt.annotation( r, ann.tag ) );
136 |                 }
137 |             });
138 |             return new cobaltAnnotationList(result);
139 |         },
140 |         /**
141 |          * Returns a new list where all annotations have the given range deleted.
142 |          * This means that all positions in the given range are cut from all annotations.
143 |          * Annotations to the right of the given range will move left.
144 |          * Annotations that are contained by the given range are removed.
145 |          */
146 |         delete: function(range) {
147 |             var result = [];
148 |             this.list.forEach(function(ann) {
149 |                 var r = ann.range.delete(range);
150 |                 if ( r.start != null ) {
151 |                     result.push( cobalt.annotation( r, ann.tag ) );
152 |                 }
153 |             });
154 |             return new cobaltAnnotationList(result);
155 |         },
156 |         /**
157 |          * Returns a new list with the positions in the given range inserted
158 |          * into all annotations. Annotations to the right of the range will move right.
159 |          */
160 |         insert: function(range) {
161 |             var result = [];
162 |             this.list.forEach(function(ann) {
163 |                 result.push(cobalt.annotation( ann.insert(range), ann.tag ) );
164 |             });
165 |             return new cobaltAnnotationList(result);
166 |         },
167 |         /**
168 |          * Returns a new list with only the annotations that matched the filter.
169 |          */
170 |         filter: function( f ) {
171 |             return new cobaltAnnotationList( this.list.filter(f) );
172 |         },
173 |         /**
174 |          * Returns a new list with the annotations changed by the map function.
175 |          */
176 |         map: function( f ) {
177 |             return new cobaltAnnotationList( this.list.map(f) );
178 |         },
179 |         /**
180 |          *
181 |          */
182 |         reduce: function( previousValue, f ) {
183 |             return this.list.reduce( previousValue, f);
184 |         },
185 |         get: function(range) {
186 |             range = cobalt.range.apply(cobalt.range, arguments);
187 |             return this.filter(function(annotation) {
188 |                 return annotation.range.overlaps(range);
189 |             });
190 |         },
191 |         /**
192 |          * Search through all annotations and return a new annotation list with
193 |          * only those annotations that match the selector.
194 |          */
195 |         query: function( selector, max ) {
196 |             function getTags(selector) {
197 |                 return selector.split(' ').map(function(tag) {
198 |                     return tag.trim();
199 |                 });
200 |             }
201 | 
202 |             var tags  = getTags(selector);
203 |             var range = cobalt.range([0, max]);
204 |             var self  = this;
205 |             tags.forEach(function(tag) {
206 |                 if (tag[0]=='-') {
207 |                     tag = tag.substr(1);
208 |                     var invert = true;
209 |                 }
210 |                 var tagRange = cobalt.range();
211 |                 self.list.filter(function(annotation) {
212 |                     return annotation.tagName == tag;
213 |                 }).forEach(function(annotation) {
214 |                     tagRange = tagRange.join(annotation.range);
215 |                 });
216 |                 if (invert) {
217 |                     tagRange = tagRange.invert(max);
218 |                 }
219 |                 range = range.intersect(tagRange);
220 |             });
221 |             return range;
222 |         },
223 |         forEach: function( f ) {
224 |             this.list.forEach(f);
225 |         },
226 | /*        copy: function( range ) {
227 |             return this.filter(function(a) {
228 |                 if (a.range.overlaps(range)) {
229 |                     return a;
230 |                 }
231 |             });
232 |         },
233 | */
234 |         has: function( range, tag ) {
235 |             range = cobalt.range(range);
236 |             return this.filter(function(a) {
237 |                 if (
238 |                     ( (range.size && a.range.overlaps(range))
239 |                        || (!range.size && range.start && a.range.overlaps(cobalt.range(range.start-1, range.start)) )
240 |                     )
241 |                     && a.tag==tag
242 |                 ) {
243 |                     return true;
244 |                 }
245 |             }).count>0;
246 |         }
247 |     };
248 | 
249 |     /**
250 |      * Non public text api.
251 |      */
252 |     var cobaltText = {
253 |         delete: function(text, range) {
254 |             range.ranges.reverse().forEach(function(re) {
255 |                 text = text.slice(0, re.start) + text.slice(re.end);
256 |             });
257 |             return text;
258 |         },
259 |         copy: function(text, range) {
260 |             var result = '';
261 |             range.ranges.forEach(function(re) {
262 |                 result += text.slice(re.start, re.end);
263 |             });
264 |             return result;
265 |         },
266 |         insert: function(text, insert, position) {
267 |             return text.slice(0,position) + insert + text.slice(position);
268 |         }
269 |     };
270 | 
271 |     /**
272 |      * Non public annotations api.
273 |      */
274 |     var cobaltAnnotations = {
275 |         delete: function(annotations, range) {
276 |             result = [];
277 |             annotations.forEach(function(ann) {
278 |                 ann = ann.delete(range);
279 |                 if ( ann ) {
280 |                     result.push(ann);
281 |                 }
282 |             });
283 |             return new cobaltAnnotationList(result);
284 |         },
285 |         copy: function(annotations, range) {
286 |             result = [];
287 |             annotations.forEach(function(ann) {
288 |                 if ( ann.range.overlaps(range) ) {
289 |                     result.push( cobalt.annotation( ann.range.intersect(range), ann.tag ) );
290 |                 }
291 |             });
292 |             return new cobaltAnnotationList(result);
293 |         },
294 |         insert: function(annotations, position, size ) {
295 |             result = [];
296 |             var insertedRange = cobalt.range(position, position+size);
297 |             annotations.forEach(function(ann) {
298 |                 result.push( cobalt.annotation( ann.range.insert( insertedRange ), ann.tag ));
299 |             });
300 |             return new cobaltAnnotationList(result);
301 |         }
302 |     };
303 | 
304 |     /**
305 |      * Cobalt Fragment type and public api.
306 |      */
307 |     function cobaltFragment( text, annotations ) {
308 |         this.type = 'cobaltFragment';
309 |         if ( typeof annotations == 'undefined' ) {
310 |             var result = parseFragment(text);
311 |             if ( result.text || result.annotations) {
312 |                 text = result.text;
313 |                 annotations = result.annotations;
314 |             }
315 |         }
316 |         this.text = '' + text;
317 |         this.annotations = new cobaltAnnotationList( annotations );
318 |         Object.freeze(this);
319 |     }
320 | 
321 |     function parseFragment(fragment) {
322 |         var info = cobalt.mime.decode( fragment );
323 |         var text = '', annotations = '';
324 |         info.parts.forEach( function(part) {
325 |             switch( part.headers['content-type'] ) {
326 |                 case 'text/plain' :
327 |                     text = part.message;
328 |                 break;
329 |                 case 'text/hope' :
330 |                     annotations = part.message;
331 |                 break;
332 |             }
333 |         });
334 |         return { text: text, annotations: annotations };
335 |     }
336 | 
337 |     cobaltFragment.prototype = {
338 |         constructor: cobaltFragment,
339 |         /**
340 |          * Returns a new fragment where the given range is deleted (cut).
341 |          */
342 |         delete: function( range ) {
343 |             range = cobalt.range(range);
344 |             return new cobaltFragment(
345 |                 cobaltText.delete( this.text, range ),
346 |                 cobaltAnnotations.delete( this.annotations, range )
347 |             );
348 |         },
349 |         /**
350 |          * Returns a new fragment with only the parts that overlap the given range.
351 |          * The new fragment adds all text slices matching the range together as one
352 |          * single text. All annotations are moved/cut to match this new text.
353 |          */
354 |         copy: function( range ) {
355 |             range = cobalt.range(range);
356 |             return new cobaltFragment(
357 |                 cobaltText.copy( this.text, range ),
358 |                 cobaltAnnotations.copy(
359 |                     this.annotations,
360 |                     range.delete(
361 |                         range.invert(this.text.length)
362 |                     )
363 |                 )
364 |             );
365 |         },
366 |         /**
367 |          * Returns a combined new fragment with the inserted fragment text and annotations
368 |          * inserted at the given position.
369 |          */
370 |         insert: function( range, fragment ) {
371 |             range = cobalt.range(range);
372 |             fragment = new cobaltFragment(fragment);
373 |             result = this.delete(range);
374 |             return new cobaltFragment(
375 |                 cobaltText.insert( result.text, fragment.text, range.start ),
376 |                 cobaltAnnotations
377 |                 .insert( result.annotations, range.start, fragment.text.length )
378 |                 .apply( cobaltAnnotations.insert( fragment.annotations, 0, range.start ) )
379 |             );
380 |         },
381 |         /**
382 |          * Returns a new range, with the given range/tag or annotation or annotationlist applied
383 |          */
384 |         apply: function( range, tag ) {
385 |             range = cobalt.range(range);
386 |             return new cobaltFragment(
387 |                 this.text,
388 |                 this.annotations.apply( range, tag )
389 |             );
390 |         },
391 |         /**
392 |          * Returns a new range, with the given range/tag or annotation or annotationlist removed
393 |          */
394 |         remove: function( range, tag ) {
395 |             range = cobalt.range(range);
396 |             return new cobaltFragment(
397 |                 this.text,
398 |                 this.annotations.remove( range, tag )
399 |             );
400 |         },
401 |         /**
402 |          * Search through the text using a regular expression or string. Returns a range object
403 |          * encompassing all matches.
404 |          */
405 |         search: function( searchRe ) {
406 |             function escapeRegExp(str) {
407 |                 return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
408 |             }
409 |             if ( typeof(searchRe) === 'string' ) {
410 |                 searchRe = new RegExp(escapeRegExp(searchRe), 'g');
411 |             }
412 |             var result = [];
413 |             if (this.text.length) {
414 |                 var match, lastIndex;
415 |                 while (match = searchRe.exec(this.text)) {
416 |                     result.push([match.index, searchRe.lastIndex]);
417 |                     if (lastIndex==searchRe.lastIndex) {
418 |                         searchRe.lastIndex++;
419 |                     }
420 |                     lastIndex = searchRe.lastIndex;
421 |                 }
422 |             }
423 |             return cobalt.range(result);
424 |         },
425 |         /**
426 |          * Search through the annotations using a query language approximately like css selectors.
427 |          * Returns a range object encompassing all matched ranges.
428 |          */
429 |         query: function( selector ) {
430 |             return this.annotations.query(selector, this.text.length);
431 |         },
432 |         /*
433 |          * Returns a mime encoded string with the text and annotations.
434 |          */
435 |         toString: function() {
436 |             return cobalt.mime.encode( [
437 |                 'Content-type: text/plain\n\n' + this.text,
438 |                 'Content-type: text/cobalt\n\n' + this.annotations
439 |             ]);
440 |         }
441 |     };
442 | 
443 |     if ( cobalt.implements( text, 'cobaltFragment' ) ) {
444 |         // because cobaltFragment is immutable, we can just return it.
445 |         return text;
446 |     } else {
447 |         return new cobaltFragment(text, annotations);
448 |     }
449 | };


--------------------------------------------------------------------------------
/src/cobalt.js:
--------------------------------------------------------------------------------
 1 | 
 2 | cobalt = (function(self) {
 3 | 
 4 | 	var cobaltError = function(message, code) {
 5 | 		this.message = message;
 6 | 		this.code = code;
 7 | 		this.name = 'cobalt.Error';
 8 | 	}
 9 | 
10 | 	self.error = function(message, code) {
11 | 		throw new cobaltError(message, code);
12 | 	}
13 | 	
14 | 	self.implements = function(o, type) {
15 | 		// since most cobalt types are defined in a super-private scope
16 | 		// instanceof doesn't work to type check. This is a workaround.
17 | 		return (typeof o != 'undefined' && typeof o.type!='undefined' && o.type === type );
18 | 	}
19 | 
20 | 	return self;
21 | })(this.cobalt || {});
22 | 
23 | cobalt.range      = require('./cobalt.range');
24 | cobalt.annotation = require('./cobalt.annotation');
25 | cobalt.mime       = require('./cobalt.mime');
26 | cobalt.fragment   = require('./cobalt.fragment');
27 | cobalt.html       = require('./cobalt.html');
28 | 


--------------------------------------------------------------------------------
/src/cobalt.keyboard.js:
--------------------------------------------------------------------------------
  1 | module.exports = (function(self) {
  2 | 
  3 | 	var keyCodes = [];
  4 | 	keyCodes[3]  = 'Cancel';
  5 | 	keyCodes[6]  = 'Help';
  6 | 	keyCodes[8]  = 'Backspace';
  7 | 	keyCodes[9]  = 'Tab';
  8 | 	keyCodes[12] = 'Numlock-5';
  9 | 	keyCodes[13] = 'Enter';
 10 | 
 11 | 	keyCodes[16] = 'Shift';
 12 | 	keyCodes[17] = 'Control';
 13 | 	keyCodes[18] = 'Alt';
 14 | 	keyCodes[19] = 'Pause';
 15 | 	keyCodes[20] = 'CapsLock';
 16 | 	keyCodes[21] = 'KanaMode'; //HANGUL
 17 | 
 18 | 	keyCodes[23] = 'JunjaMode';
 19 | 	keyCodes[24] = 'FinalMode';
 20 | 	keyCodes[25] = 'HanjaMode'; //KANJI
 21 | 
 22 | 	keyCodes[27] = 'Escape';
 23 | 	keyCodes[28] = 'Convert';
 24 | 	keyCodes[29] = 'NonConvert';
 25 | 	keyCodes[30] = 'Accept';
 26 | 	keyCodes[31] = 'ModeChange';
 27 | 	keyCodes[32] = 'Spacebar';
 28 | 	keyCodes[33] = 'PageUp';
 29 | 	keyCodes[34] = 'PageDown';
 30 | 	keyCodes[35] = 'End';
 31 | 	keyCodes[36] = 'Home';
 32 | 	keyCodes[37] = 'ArrowLeft';
 33 | 	keyCodes[38] = 'ArrowUp';
 34 | 	keyCodes[39] = 'ArrowRight'; // opera has this as a "'" as well...
 35 | 	keyCodes[40] = 'ArrowDown';
 36 | 	keyCodes[41] = 'Select';
 37 | 	keyCodes[42] = 'Print';
 38 | 	keyCodes[43] = 'Execute';
 39 | 	keyCodes[44] = 'PrintScreen'; // opera ';';
 40 | 	keyCodes[45] = 'Insert'; // opera has this as a '-' as well...
 41 | 	keyCodes[46] = 'Delete'; // opera - ',';
 42 | 	keyCodes[47] = '/'; // opera
 43 | 
 44 | 	keyCodes[59] = ';';
 45 | 	keyCodes[60] = '<';
 46 | 	keyCodes[61] = '=';
 47 | 	keyCodes[62] = '>';
 48 | 	keyCodes[63] = '?';
 49 | 	keyCodes[64] = '@';
 50 | 
 51 | 	keyCodes[91] = 'OS'; // opera '[';
 52 | 	keyCodes[92] = 'OS'; // opera '\\';
 53 | 	keyCodes[93] = 'ContextMenu'; // opera ']';
 54 | 	keyCodes[95] = 'Sleep';
 55 | 	keyCodes[96] = '`';
 56 | 
 57 | 	keyCodes[106] = '*'; // keypad
 58 | 	keyCodes[107] = '+'; // keypad
 59 | 	keyCodes[109] = '-'; // keypad
 60 | 	keyCodes[110] = 'Separator';
 61 | 	keyCodes[111] = '/'; // keypad
 62 | 
 63 | 	keyCodes[144] = 'NumLock';
 64 | 	keyCodes[145] = 'ScrollLock';
 65 | 
 66 | 	keyCodes[160] = '^';
 67 | 	keyCodes[161] = '!';
 68 | 	keyCodes[162] = '"';
 69 | 	keyCodes[163] = '#';
 70 | 	keyCodes[164] = '$';
 71 | 	keyCodes[165] = '%';
 72 | 	keyCodes[166] = '&';
 73 | 	keyCodes[167] = '_';
 74 | 	keyCodes[168] = '(';
 75 | 	keyCodes[169] = ')';
 76 | 	keyCodes[170] = '*';
 77 | 	keyCodes[171] = '+';
 78 | 	keyCodes[172] = '|';
 79 | 	keyCodes[173] = '-';
 80 | 	keyCodes[174] = '{';
 81 | 	keyCodes[175] = '}';
 82 | 	keyCodes[176] = '~';
 83 | 
 84 | 	keyCodes[181] = 'VolumeMute';
 85 | 	keyCodes[182] = 'VolumeDown';
 86 | 	keyCodes[183] = 'VolumeUp';
 87 | 
 88 | 	keyCodes[186] = ';';
 89 | 	keyCodes[187] = '=';
 90 | 	keyCodes[188] = ',';
 91 | 	keyCodes[189] = '-';
 92 | 	keyCodes[190] = '.';
 93 | 	keyCodes[191] = '/';
 94 | 	keyCodes[192] = '`';
 95 | 
 96 | 	keyCodes[219] = '[';
 97 | 	keyCodes[220] = '\\';
 98 | 	keyCodes[221] = ']';
 99 | 	keyCodes[222] = "'";
100 | 	keyCodes[224] = 'Meta';
101 | 	keyCodes[225] = 'AltGraph';
102 | 
103 | 	keyCodes[246] = 'Attn';
104 | 	keyCodes[247] = 'CrSel';
105 | 	keyCodes[248] = 'ExSel';
106 | 	keyCodes[249] = 'EREOF';
107 | 	keyCodes[250] = 'Play';
108 | 	keyCodes[251] = 'Zoom';
109 | 	keyCodes[254] = 'Clear';
110 | 
111 | 	// a-z
112 | 	for ( var i=65; i<=90; i++ ) {
113 | 		keyCodes[i] = String.fromCharCode( i ).toLowerCase();
114 | 	}
115 | 
116 | 	// 0-9
117 | 	for ( var i=48; i<=57; i++ ) {
118 | 		keyCodes[i] = String.fromCharCode( i );
119 | 	}
120 | 	// 0-9 keypad
121 | 	for ( var i=96; i<=105; i++ ) {
122 | 		keyCodes[i] = ''+(i-95);
123 | 	}
124 | 
125 | 	// F1 - F24
126 | 	for ( var i=112; i<=135; i++ ) {
127 | 		keyCodes[i] = 'F'+(i-111);
128 | 	}
129 | 
130 | 	function convertKeyNames( key ) {
131 | 		switch ( key ) {
132 | 			case ' ':
133 | 				return 'Spacebar';
134 | 			case 'Esc' :
135 | 				return 'Escape';
136 | 			case 'Left' :
137 | 			case 'Up' :
138 | 			case 'Right' :
139 | 			case 'Down' :
140 | 				return 'Arrow'+key;
141 | 			case 'Del' :
142 | 				return 'Delete';
143 | 			case 'Scroll' :
144 | 				return 'ScrollLock';
145 | 			case 'MediaNextTrack' :
146 | 				return 'MediaTrackNext';
147 | 			case 'MediaPreviousTrack' :
148 | 				return 'MediaTrackPrevious';
149 | 			case 'Crsel' :
150 | 				return 'CrSel';
151 | 			case 'Exsel' :
152 | 				return 'ExSel';
153 | 			case 'Zoom' :
154 | 				return 'ZoomToggle';
155 | 			case 'Multiply' :
156 | 				return '*';
157 | 			case 'Add' :
158 | 				return '+';
159 | 			case 'Subtract' :
160 | 				return '-';
161 | 			case 'Decimal' :
162 | 				return '.';
163 | 			case 'Divide' :
164 | 				return '/';
165 | 			case 'Apps' :
166 | 				return 'Menu';
167 | 			default:
168 | 				return key;
169 | 		}
170 | 	}
171 | 
172 | 	self.getKey = function( evt ) {
173 | 		var keyInfo = '';
174 | 		if ( evt.ctrlKey && evt.keyCode != 17 ) {
175 | 			keyInfo += 'Control+';
176 | 		}
177 | 		if ( evt.metaKey && evt.keyCode != 224 ) {
178 | 			keyInfo += 'Meta+';
179 | 		}
180 | 		if ( evt.altKey && evt.keyCode != 18 ) {
181 | 			keyInfo += 'Alt+';
182 | 		}
183 | 		if ( evt.shiftKey && evt.keyCode != 16 ) {
184 | 			keyInfo += 'Shift+';
185 | 		}
186 | 		// evt.key turns shift+a into A, while keeping shiftKey, so it becomes Shift+A, instead of Shift+a.
187 | 		// so while it may be the future, i'm not using it here.
188 | 		if ( evt.charCode ) {
189 | 			keyInfo += String.fromCharCode( evt.charCode ).toLowerCase();
190 | 		} else if ( evt.keyCode ) {
191 | 			if ( typeof keyCodes[evt.keyCode] == 'undefined' ) {
192 | 				keyInfo += '('+evt.keyCode+')';
193 | 			} else {
194 | 				keyInfo += keyCodes[evt.keyCode];
195 | 			}
196 | 		} else {
197 | 			keyInfo += 'Unknown';
198 | 		}
199 | 		return keyInfo;
200 | 	}
201 | 
202 | 	self.listen = function( el, key, callback, capture ) {
203 | 		return el.addEventListener('keydown', function(evt) {
204 | 			var  pressedKey = self.getKey( evt );
205 | 			if ( key == pressedKey ) {
206 | 				callback.call( el, evt );
207 | 			}
208 | 		}, capture);
209 | 	}
210 | 
211 | 	self.getCharacter = function(evt) {
212 | 		evt = evt || window.event;
213 | 		if ( evt.which!==0 && !evt.ctrlKey && !evt.metaKey && !evt.altKey ) {
214 |     		return String.fromCharCode(evt.which);
215 |     	}
216 | 	}
217 | 
218 | 	return self;
219 | } )( cobalt.keyboard || {} );


--------------------------------------------------------------------------------
/src/cobalt.mime.js:
--------------------------------------------------------------------------------
 1 | module.exports = (function(self) {
 2 | 	// minimal mime encoding/decoding, stolen from https://github.com/andris9/mimelib/blob/master/lib/mimelib.js
 3 | 
 4 | 	self.getHeaders = function( message ) {
 5 | 		var parseHeader = function( line ) {
 6 | 		    if (!line) {
 7 | 		        return {};
 8 | 		    }
 9 | 
10 | 		    var result = {}, parts = line.split(";"),
11 | 		        pos;
12 | 
13 | 		    for (var i = 0, len = parts.length; i < len; i++) {
14 | 		        pos = parts[i].indexOf("=");
15 | 		        if (pos < 0) {
16 | 		        	pos = parts[i].indexOf(':');
17 | 		        }
18 | 		        if ( pos < 0 ) {
19 | 		            result[!i ? "defaultValue" : "i-" + i] = parts[i].trim();
20 | 		        } else {
21 | 		            result[parts[i].substr(0, pos).trim().toLowerCase()] = parts[i].substr(pos + 1).trim();
22 | 		        }
23 | 		    }
24 | 		    return result;
25 | 		};
26 | 		var line = null;
27 | 		var headers = {};
28 | 		var temp = {};
29 | 		while ( line = message.match(/^.*$/m)[0] ) {
30 | 			message = message.substring( line.length );
31 | 			temp = parseHeader( line );
32 | 			for ( var i in temp ) {
33 | 				headers[i] = temp[i];
34 | 			}
35 | 			var returns = message.match(/^\r?\n|\r/);
36 | 			if ( returns && typeof returns[0] != 'undefined') {
37 | 				message = message.substring( returns[0].length );
38 | 			}
39 | 		}
40 | 		return {
41 | 			headers: headers,
42 | 			message: message.substring(1)
43 | 		}
44 | 	}
45 | 
46 | 	self.encode = function( parts, message, headers ) {
47 | 		var boundary = 'cobaltBoundary'+Date.now();
48 | 		var result = 'MIME-Version: 1.0\n';
49 | 		if ( headers ) {
50 | 			result += headers.join("\n");
51 | 		}
52 | 		result += 'Content-Type: multipart/related; boundary='+boundary+'\n\n';
53 | 		if ( message ) {
54 | 			result += message;
55 | 		}
56 | 		for ( var i=0, l=parts.length; i<l; i++ ) {
57 | 			result += '\n--'+boundary+'\n' + parts[i];
58 | 		}
59 | 		return result;
60 | 	}
61 | 
62 | 	self.decode = function( message ) {
63 | 		var parsed = self.getHeaders( message );
64 | 		parsed.parts = [];
65 | 		if ( parsed.headers.boundary ) {
66 | 			var parts = parsed.message.split( '\n--'+parsed.headers.boundary+"\n" );
67 | 			var message = parts.shift();
68 | 			if ( message ) {
69 | 				parsed.message = message;
70 | 			}
71 | 			while ( part = parts.shift() ) {
72 | 				parsed.parts.push( self.decode(part) );
73 | 			}
74 | 		}
75 | 		return parsed;
76 | 	}
77 | 
78 | 	return self;
79 | 
80 | })(cobalt.mime || {});


--------------------------------------------------------------------------------
/src/cobalt.range.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Cobalt Range type
  3 |  * A Range is a collection of [start, end] SingleRange pairs.
  4 |  * Any SingleRange will never overlap or be consecutive with any other SingleRange
  5 |  * start will always be >= 0
  6 |  * Ranges and SingleRanges are immutable. All changes will return a new object.
  7 |  * SingleRanges have a start and end, where start <= end, and a size (end - start)
  8 |  * Ranges have a start, end and size, and a count - the number of SingleRanges >= 0
  9 |  */
 10 | module.exports = function(s,e) {
 11 | 
 12 |     /**
 13 |      * Internal range type that has only a start and end position.
 14 |      */
 15 |     function SingleRange(s,e) {
 16 |         this.type  = 'cobaltSingleRange';
 17 |         this.start = Math.max(0, s);
 18 |         this.end   = Math.max(this.start, e);
 19 |         Object.freeze(this);
 20 |     }
 21 | 
 22 |     SingleRange.prototype = {
 23 |         constructor: SingleRange,
 24 |         /**
 25 |          * Returns the size of the range in characters.
 26 |          */
 27 |         get size () {
 28 |             return this.end - this.start;
 29 |         },
 30 |         /**
 31 |          * Returns -1, 0, or 1 if given range is smaller, equal or larger than this range.
 32 |          */
 33 |         compare: function(s) {
 34 |             if ( s.start < this.start ) {
 35 |                 return 1;
 36 |             } else if ( s.start > this.start ) {
 37 |                 return -1;
 38 |             } else if ( s.end < this.end ) {
 39 |                 return 1;
 40 |             } else if ( s.end > this.end ) {
 41 |                 return -1;
 42 |             }
 43 |             return 0;
 44 |         },
 45 |         /**
 46 |          * Collapse a range to size 0. If toEnd is true, the position will be the end of the range.
 47 |          */
 48 |         collapse: function(toEnd) {
 49 |             if ( toEnd ) {
 50 |                 return new SingleRange(this.end, this.end);
 51 |             } else {
 52 |                 return new SingleRange(this.start, this.start);
 53 |             }
 54 |         },
 55 |         /**
 56 |          * Returns true if the given range is equal to this range.
 57 |          */
 58 |         equals: function(s) {
 59 |             return this.compare(s)==0;
 60 |         },
 61 |         /**
 62 |          * Returns true if the given range is smaller than this range. Smaller being
 63 |          * start position is smaller, or the same and end is smaller.
 64 |          */
 65 |         smallerThan: function(s) {
 66 |             return this.compare(s)==-1;
 67 |         },
 68 |         /**
 69 |          * Returns true if the given range is larger than this range. Larger being
 70 |          * start position is larger, or the same and end is larger.
 71 |          */
 72 |         largerThan: function(s) {
 73 |             return this.compare(s)==1;
 74 |         },
 75 |         /**
 76 |          * Returns true if this range is entirely to the left of the given range,
 77 |          * and not connected.
 78 |          */
 79 |         leftOf: function(s) {
 80 |             return this.collapse(true).compare(s.collapse())==-1;
 81 |         },
 82 |         /**
 83 |          * Returns true if this range is entirely to the right of the given range,
 84 |          * and not connected.
 85 |          */
 86 |         rightOf: function(s) {
 87 |             return this.collapse().compare(s.collapse(true))==1;
 88 |         },
 89 |         /**
 90 |          * Returns true if there is a non-empty overlap.
 91 |          */
 92 |         overlaps: function(s) {
 93 |             return ( s.start < this.end && s.end > this.start );
 94 |         },
 95 |         /**
 96 |          * Returns true if the given range is fully contained within the current range.
 97 |          */
 98 |         contains: function(s) {
 99 |             return this.overlaps(s) && ( s.start >= this.start && s.end <= this.end );
100 |         },
101 |         /**
102 |          * Returns a new range with the exact overlap between this range and the given range.
103 |          */
104 |         overlap: function(range) {
105 |             var start = 0;
106 |             var end = 0;
107 |             if ( this.overlaps( range ) ) {
108 |                 if ( range.start < this.start ) {
109 |                     start = this.start;
110 |                 } else {
111 |                     start = range.start;
112 |                 }
113 |                 if ( range.end < this.end ) {
114 |                     end = range.end;
115 |                 } else {
116 |                     end = this.end;
117 |                 }
118 |             }
119 |             return new SingleRange(start, end);
120 |         },
121 |         /**
122 |          * return an array of subranges of this subrange that do not overlap with the given range
123 |          */
124 |         exclude: function( range ) {
125 |             var result = [];
126 |             if ( this.overlaps( range ) ) {
127 |                 if ( this.start < range.start ) {
128 |                     result.push( new SingleRange( this.start, range.start ) );
129 |                 }
130 |                 if ( range.end < this.end ) {
131 |                     result.push( new SingleRange( range.end, this.end ) );
132 |                 }
133 |             } else {
134 |                 result.push( this );
135 |             }
136 |             return result;
137 |         },
138 |         toString: function() {
139 |             return this.start + '-' + this.end;
140 |         }
141 |     };
142 | 
143 |     function Range(s,e) {
144 |         // type property is needed because instanceof can't check across
145 |         // scope boundaries. Range is defined locally.
146 |         this.type = 'cobaltRange';
147 |         if ( Array.isArray(s) ) {
148 |             // first argument is a range
149 |             for ( var i=0, l=s.length; i<l; i++ ) {
150 |                 if ( cobalt.implements(s[i], 'cobaltSingleRange') ) {
151 |                     r = s[i];
152 |                 } else if ( Array.isArray(s[i]) && s[i].length < 3 && s[i].length > 0 ) {
153 |                     r = new SingleRange( s[i][0], s[i][1] );
154 |                 } else if ( Array.isArray(s) && s.length < 3 && s.length > 0 ) {
155 |                     // first argument is an array with start and end only
156 |                     r = new SingleRange( s[0], s[1] );
157 |                     delete s[1];
158 |                     s[0] = r;
159 |                     break;
160 |                 } else {
161 |                     cobalt.error('Not a valid Range', 'cobalt.range.invalid-range');
162 |                 }
163 |                 s[i] = r;
164 |             }
165 |             s.sort(function(a,b) {
166 |                 return a.compare(b);
167 |             });
168 |             this.ranges = s.reduce(function(acc,r) {
169 |                 if (!acc.length) {
170 |                     acc.push(r);
171 |                 } else {
172 |                     if (acc[acc.length-1].end>=r.start) {
173 |                         acc[acc.length-1] = new SingleRange(acc[acc.length-1].start, r.end);
174 |                     } else {
175 |                         acc.push(r);
176 |                     }
177 |                 }
178 |                 return acc;
179 |             },[]);
180 |         } else if ( Number.isInteger(s) && Number.isInteger(e) ) {
181 |             this.ranges = [ new SingleRange(s,e) ];
182 |         } else if ( Number.isInteger(s) ) {
183 |             this.ranges = [ new SingleRange(s,s) ];
184 |         } else if (typeof s != 'undefined' ) {
185 |             throw new Error('illegal value');
186 |         } else {
187 |             this.ranges = [];
188 |         }
189 |         Object.freeze(this.ranges); // TODO: check if this is needed
190 |         Object.freeze(this);
191 |     }
192 | 
193 |     Range.prototype = {
194 |         constructor: Range,
195 |         /**
196 |          * Return the start position of the first subrange or null
197 |          */
198 |         get start () {
199 |             return this.ranges.length ? this.ranges[0].start : null;
200 |         },
201 |         /**
202 |          * Return the end position of the last subrange or null
203 |          */
204 |         get end () {
205 |             return this.ranges.length ? this.ranges[ this.ranges.length - 1 ].end : null;
206 |         },
207 |         /**
208 |          * Return the size in characters between the start and end position or null
209 |          */
210 |         get size () {
211 |             return this.ranges.length ? this.end - this.start : null;
212 |         },
213 |         /**
214 |          * Return the number of subranges.
215 |          */
216 |         get count () {
217 |             return this.ranges.length;
218 |         },
219 |         /**
220 |          * Return a Range of the requested subrange or null.
221 |          */
222 |         get: function(i) {
223 |             return (i>=0 && i<this.count) ? new Range(this.ranges[i].start, this.ranges[i].end) : null;
224 |         },
225 |         /**
226 |          * Delete (cut) parts of this range.
227 |          */
228 |         delete: function(r) {
229 |             r = cobalt.range(r);
230 |             var s = this;
231 |             for (var i=r.count-1; i>=0; i--) {
232 |                 s = cutLength(s, r.get(i).start, r.get(i).size);
233 |             }
234 |             return s;
235 |         },
236 |         /**
237 |          * Run a callback on each subrange.
238 |          */
239 |         forEach: function(f) {
240 |             for (var i=0,l=this.count; i<l; i++) {
241 |                 f(this.get(i));
242 |             }
243 |         },
244 |         /**
245 |          * Insert character space in this range.
246 |          */
247 |         insert: function(r) {
248 |             r = cobalt.range(r);
249 |             var s = this;
250 |             for (var i=r.count-1; i>=0; i--) {
251 |                 s = insertLength(s, r.get(i).start, r.get(i).size);
252 |             }
253 |             return s;
254 |         },
255 |         /**
256 |          * Create a new Range with either the start or end position, with no size.
257 |          */
258 |         collapse: function(toEnd) {
259 |             if (toEnd) {
260 |                 return new Range(this.end, this.end);
261 |             } else {
262 |                 return new Range(this.start, this.start);
263 |             }
264 |         },
265 |         toString: function() {
266 |             return this.ranges.join(',');
267 |         },
268 |         /**
269 |          * Returns a new range as a union of this range and the given range.
270 |          */
271 |         join: function(r) {
272 |             r = cobalt.range(r);
273 |             return new Range( this.ranges.concat(r.ranges) );
274 |         },
275 |         /*
276 |          * Returns a new range as the relative complement of r.
277 |          * All parts that overlap with r are removed ( not cut ).
278 |          */
279 |         exclude: function(r) {
280 |             r = cobalt.range(r); // make sure r has only nonconsecutive, nonoverlapping singlerange subranges, ordered
281 |             ri = 0;
282 |             si = 0;
283 |             result = this.ranges.slice().filter(function(singleRange) {
284 | 				return singleRange.start!=singleRange.end;
285 | 			});
286 |             while (ri<r.ranges.length && si<result.length) {
287 |                 if (r.ranges[ri].leftOf(result[si]) || r.ranges[ri].end==result[si].start) {
288 |                     ri++;
289 |                 } else if (r.ranges[ri].rightOf(result[si]) || r.ranges[ri].start==result[si].end) {
290 |                     si++;
291 | 				} else {
292 | //                    console.log(si+':'+ri);
293 | //					console.log(result[si]+' : '+r.ranges[ri]);
294 |                     var t1 = result[si].exclude(r.ranges[ri]);
295 | //                    console.log(''+cobalt.range(t1));
296 |                     if (t1.length) {
297 | //                        console.log('remove: '+result[si]);
298 | //                        console.log('insert: '+t1);
299 |                         result = result.slice(0,si).concat(t1).concat(result.slice(si+1));
300 |                         if (t1.count>1) {
301 |                             si++;
302 |                         }
303 |                     } else {
304 | //                        console.log('remove: '+result[si]);
305 |                         result.splice(si,1);
306 |                     }
307 | //                    console.log(''+cobalt.range(result));
308 |                 }
309 | //                console.log(ri+':'+si+':'+result.length);
310 |             }
311 |             return new Range(result);
312 |         },
313 |         /**
314 |          * Return a new range consisting of the intersection or overlap of this and r.
315 |          */
316 |         intersect: function(r) {
317 |             r = cobalt.range(r);
318 |             return this.exclude(r.invert(Math.max(this.end,r.end)));
319 |         },
320 |         /**
321 |          * Return a new range where all positions have moved by the given number of characters
322 |          * A negative number moves the range down, a positive number up.
323 |          */
324 |         move: function(by) {
325 |             var s = [];
326 |             this.forEach(function(re) {
327 |                 s.push( new SingleRange(re.start + by, re.end + by ));
328 |             });
329 |             return new Range(s);
330 |         },
331 |         /**
332 |          * Return a new range that is the exact reverse of the this range,
333 |          * within a maximum size given by 'end'.
334 |          */
335 |         invert: function(end) {
336 |             return new Range(0,end).exclude(this);
337 |         },
338 |         /**
339 |          * Returns -1, 0, or 1 if given range is smaller, equal or larger than this range.
340 |          */
341 |         compare: function(s) {
342 |             if ( s.start < this.start ) {
343 |                 return 1;
344 |             } else if ( s.start > this.start ) {
345 |                 return -1;
346 |             } else if ( s.end < this.end ) {
347 |                 return 1;
348 |             } else if ( s.end > this.end ) {
349 |                 return -1;
350 |             }
351 |             return 0;
352 |         },
353 |         overlaps: function(r) {
354 |             return this.intersect(r).size > 0;
355 |         }
356 |     };
357 | 
358 | 
359 |     function cutLength(range, pos, length) {
360 |         if ( length < 1 ) {
361 |             return range;
362 |         }
363 |         var s = [];
364 |         range.forEach(function(r) {
365 |             if ( r.end <= pos ) { // range before cut
366 |                 s.push( new SingleRange( r.start, r.end ) );
367 |             } else if ( r.start > ( pos + length ) ) { // range after cut
368 |                 s.push( new SingleRange( r.start - length, r.end - length) );
369 |             } else if ( r.end > ( pos + length ) ) { // range extends after cut
370 |                 var start = r.start > pos ? pos : r.start;
371 |                 if ( s.length && s[s.length-1].end >= start ) {
372 |                     s[s.length-1] = new SingleRange( s[s.length-1].start, r.end - length );
373 |                 } else {
374 |                     s.push( new SingleRange( start, r.end - length ) );
375 |                 }
376 | 
377 |             } else if ( r.start < pos ) { // range extends before cut
378 |                 s.push( new SingleRange( r.start, pos ) );
379 |             } // else: range will be cut away
380 |         });
381 |         return new Range(s);
382 |     };
383 | 
384 |     function insertLength(range, pos, length) {
385 |         if ( length < 1 ) {
386 |             return this;
387 |         }
388 |         var s = [];
389 |         range.forEach(function(r) {
390 |             if ( r.end < pos ) {
391 |                 s.push( new SingleRange( r.start, r.end ) );
392 |             } else if ( r.start >= pos ) {
393 |                 s.push( new SingleRange( r.start + length, r.end + length) );
394 |             } else {
395 |                 s.push( new SingleRange( r.start, r.end + length) );
396 |             }
397 |         });
398 |         return new Range(s);
399 |     }
400 | 
401 |     if ( cobalt.implements(s, 'cobaltRange' ) ) {
402 |         // because Range is immutable, we can just return s
403 |         return s;
404 |     } else {
405 |         return new Range(s,e);
406 |     }
407 | }


--------------------------------------------------------------------------------
/test/cobalt.annotation.js:
--------------------------------------------------------------------------------
 1 | require('../src/cobalt.js');
 2 | var tap = require('tap');
 3 | 
 4 | tap.test('Create', function(t) {
 5 |     var ann1 = cobalt.annotation([0,10],'div class="test"');
 6 |     t.equal( ''+ann1, '0-10:div class="test"', 'cobalt.annotation should allow any range value');
 7 |     var ann2 = cobalt.annotation(ann1);
 8 |     t.equal( ''+ann2, '0-10:div class="test"', 'cobalt.annotation should allow existing annotation');
 9 |     var ann3 = cobalt.annotation([[0,10],[20,30]],'div class="test"');
10 |     t.equal( ''+ann3, '0-10,20-30:div class="test"', 'cobalt.annotation should allow any range value');
11 |     var ann4 = cobalt.annotation([0,10],'   div with space   ');
12 |     t.equal( ''+ann4, '0-10:div with space', 'tags should be trimmed');
13 |     t.end();
14 | });
15 | 
16 | tap.test('Delete', function(t) {
17 |     var ann1 = cobalt.annotation([0,10],'div class="test"');
18 |     var ann2 = ann1.delete( [5,10] );
19 |     t.equal(''+ann2, '0-5:div class="test"', 'Delete should cut range');
20 |     var ann1 = cobalt.annotation([[0,10],[20,30]],'div class="test"');
21 |     var ann2 = ann1.delete( [5,10] );
22 |     t.equal(''+ann2, '0-5,15-25:div class="test"', 'Delete should move subsequent ranges');
23 |     t.end();
24 | });
25 | 
26 | tap.test('Insert', function(t) {
27 |     var ann1 = cobalt.annotation([0,10],'div class="test"');
28 |     var ann2 = ann1.insert( [5,10] );
29 |     t.equal(''+ann2, '0-15:div class="test"', 'Insert should extend ranges');
30 |     var ann3 = cobalt.annotation([[0,10],[20,30]],'div class="test"');
31 |     var ann4 = ann3.insert( [5,10] );
32 |     t.equal(''+ann4, '0-15,25-35:div class="test"', 'Insert should move subsequent ranges');
33 |     t.end();
34 | });
35 | 
36 | tap.test('Join', function(t) {
37 |     var ann1 = cobalt.annotation([0,10],'div class="test"');
38 |     var ann2 = ann1.join([5,15]);
39 |     t.equal(''+ann2, '0-15:div class="test"', 'Join should extend overlapping ranges');
40 |     var ann3 = cobalt.annotation([[0,10],[20,30]],'div class="test"');
41 |     var ann4 = ann3.join( [5,15] );
42 |     t.equal(''+ann4, '0-15,20-30:div class="test"', 'Join should not move non-overlapping ranges');
43 |     t.end();
44 | });
45 | 
46 | tap.test('Copy', function(t) {
47 |     var ann1 = cobalt.annotation([0,10],'div class="test"');
48 |     var ann2 = ann1.copy( [5,10] );
49 |     t.equal(''+ann2, '5-10:div class="test"', 'Copied annotation should contain only overlapping range');
50 |     t.end();
51 | });
52 | 


--------------------------------------------------------------------------------
/test/cobalt.fragment.js:
--------------------------------------------------------------------------------
 1 | require('../src/cobalt.js');
 2 | var tap = require('tap');
 3 | 
 4 | tap.test('create', function(t) {
 5 |     var f = cobalt.fragment('This is a test', '0-14:div class="test"');
 6 |     t.equal(''+f.text, 'This is a test', 'cobalt.fragment text should be unchanged');
 7 |     t.equal(''+f.annotations, '0-14:div class="test"', 'cobalt.fragment annotations should be unchanged');
 8 | 	t.end();
 9 | });
10 | 
11 | tap.test('delete',function(t) {
12 | 	var f = cobalt.fragment('abcd','');
13 | 	f = f.delete([1,3]);
14 | 	t.equal(''+f.text, 'ad');
15 | 	t.end();
16 | });
17 | 
18 | tap.test('insert', function(t) {
19 | 	var f = cobalt.fragment('abcd','');
20 | 	f = f.insert([1,3],"x");
21 | 	t.equal(''+f.text, 'axd');
22 | 	t.end();
23 | });
24 | 
25 | tap.test('has', function(t) {
26 | 	var f = cobalt.fragment('abcd', '1-3:strong');
27 | 	t.equal(true, f.annotations.has([2,2],'strong'));
28 | 	t.end();
29 | });


--------------------------------------------------------------------------------
/test/cobalt.html.js:
--------------------------------------------------------------------------------
  1 | require('../src/cobalt.js');
  2 | var tap = require('tap');
  3 | 
  4 | tap.test('render-simple', function(t) {
  5 |     var f = cobalt.fragment('This is a test', "0-14:p\n0-4:strong");
  6 |     var h = cobalt.html.render(f);
  7 |     t.equal(h, '<p><strong>This</strong> is a test</p>', 'Renders simple html correctly');
  8 |     t.end();
  9 | });
 10 | 
 11 | tap.test('render-disjointed', function(t) {
 12 |     var f = cobalt.fragment('This is a test', "0-14:p\n0-4,8-9:strong");
 13 |     var h = cobalt.html.render(f);
 14 |     t.equal(h, '<p><strong>This</strong> is <strong>a</strong> test</p>', 'Renders simple disjointed annotations as html correctly');
 15 |     t.end();
 16 | });
 17 | 
 18 | tap.test('render-order-nesting', function(t) {
 19 |     var f = cobalt.fragment('This is a test', "0-14:p\n0-4,10-14:strong");
 20 |     var h = cobalt.html.render(f);
 21 |     t.equal(h, '<p><strong>This</strong> is a <strong>test</strong></p>', 'Renders simple html correctly nested');
 22 |     t.end();
 23 | });
 24 | 
 25 | tap.test('render-insert-order', function(t) {
 26 |     var f = cobalt.fragment('This is a test', "0-0:img id=\"i0\"\n0-14:p\n0-0:img id=\"i1\"\n0-0:img id=\"i2\"");
 27 |     var h = cobalt.html.render(f);
 28 |     t.equal(h, '<img id="i0"><p><img id="i1"><img id="i2">This is a test</p>', 'Renders insertions in correct order');
 29 |     t.end();
 30 | });
 31 | 
 32 | tap.test('render-overlapping', function(t) {
 33 |     var f = cobalt.fragment('This is a test', "0-14:p\n0-9:strong\n5-14:em");
 34 |     var h = cobalt.html.render(f);
 35 |     t.equal(h, '<p><strong>This <em>is a</em></strong><em> test</em></p>', 'Correctly nest overlapping tags');
 36 |     t.end();
 37 | });
 38 | 
 39 | tap.test('close-incompatible', function(t) {
 40 |     var f = cobalt.fragment('This is a test', "0-14:p\n5-9:h1");
 41 |     var h = cobalt.html.render(f);
 42 |     t.equal(h, '<p>This </p><h1>is a</h1><p> test</p>', 'Close tags that are less specific and incompatible');
 43 |     t.end();
 44 | });
 45 | 
 46 | tap.test('skip-incompatible', function(t) {
 47 |     var f = cobalt.fragment('This is a test', "0-14:p\n0-14:h1");
 48 |     var h = cobalt.html.render(f);
 49 |     t.equal(h, '<h1>This is a test</h1>', 'Discard tags that are less specific and incompatible');
 50 |     t.end();
 51 | });
 52 | 
 53 | tap.test('render-insert-parents', function(t) {
 54 |     var f = cobalt.fragment('This is a test', "0-14:p\n0-0:img\n0-14:h1");
 55 |     var h = cobalt.html.render(f);
 56 |     t.equal(h, '<p><img></p><h1>This is a test</h1>', 'Keep tags around inserted stuff');
 57 |     t.end();
 58 | });
 59 | 
 60 | tap.test('keep-closed', function(t) {
 61 |     var f = cobalt.fragment('This is a test', "0-9:p\n5-14:h1");
 62 |     var h = cobalt.html.render(f);
 63 |     t.equal(h, '<p>This </p><h1>is a test</h1>', 'Dont reopen passed closed tags');
 64 |     t.end();
 65 | });
 66 | 
 67 | tap.test('render-directly-nested-anchors', function(t) {
 68 |     var f = cobalt.fragment('This is a test', "0-14:a\n5-10:a");
 69 |     var h = cobalt.html.render(f);
 70 |     t.equal(h, '<a>This </a><a>is a </a><a>test</a>', 'Dont directly nest anchor tags');
 71 |     t.end();
 72 | });
 73 | 
 74 | tap.test('render-directly-nested-anchors-with-classes', function(t) {
 75 |     var f = cobalt.fragment('This is a test', '0-14:a class="foo"\n5-10:a class="bar"');
 76 |     var h = cobalt.html.render(f);
 77 |     t.equal(h, '<a class="foo">This </a><a class="bar">is a </a><a class="foo">test</a>', 'Dont directly nest anchor tags 2');
 78 |     t.end();
 79 | });
 80 | 
 81 | tap.test('render-nested-anchors', function(t) {
 82 |     var f = cobalt.fragment('This is a test', "0-14:a\n0-14:strong\n5-10:a");
 83 |     var h = cobalt.html.render(f);
 84 |     t.equal(h, '<a><strong>This </strong></a><strong><a>is a </a><a>test</a></strong>', 'Dont nest anchor tags at all');
 85 |     t.end();
 86 | });
 87 | 
 88 | tap.test('render-nested-anchors', function(t) {
 89 |     var f = cobalt.fragment('This is a test', "0-14:strong\n0-14:a\n5-10:a\n");
 90 |     var h = cobalt.html.render(f);
 91 |     t.equal(h, '<strong><a>This </a><a>is a </a><a>test</a></strong>', 'Order influences open/close tags');
 92 |     t.end();
 93 | });
 94 | 
 95 | tap.test('render-regression-1', function(t) {
 96 | 	var f = cobalt.fragment('Test',"0-4:p\n1-3:h1\n2-3:strong\n");
 97 | 	var h = cobalt.html.render(f);
 98 | 	t.equal(h, '<p>T</p><h1>e<strong>s</strong></h1><p>t</p>');
 99 | 	t.end();
100 | });
101 | 
102 | tap.test('render-regression-2', function(t) {
103 | 	var f = cobalt.fragment('Foo\nBar\nBaz','0-3:p\n4-7:p\n8-11:p\n4-7:ol\n4-7:li\n');
104 | 	var h = cobalt.html.render(f);
105 | 	t.equal(h, '<p>Foo</p>\n<ol><li><p>Bar</p></li></ol>\n<p>Baz</p>');
106 | 	t.end();
107 | });
108 | 
109 | tap.test('render-regression-3', function(t) {
110 | 	var f = cobalt.fragment('Foo\nBar\nBaz','0-11:ol\n0-3:li\n8-11:li\n');
111 | 	var h = cobalt.html.render(f);
112 | 	t.equal(h, '<ol><li>Foo</li></ol>\nBar\n<ol><li>Baz</li></ol>');
113 | 	t.end();
114 | });
115 | 
116 | tap.test('render-regression-4', function(t) {
117 |     var f = cobalt.fragment('FooBarBaz', '0-3:p\n0-9:ol\n0-3:li\n3-6:p\n3-6:li\n6-9:p\n6-9:li\n');
118 |     var h = cobalt.html.render(f);
119 |     t.equal(h, '<ol><li><p>Foo</p></li><li><p>Bar</p></li><li><p>Baz</p></li></ol>');
120 | 
121 |     var f = cobalt.fragment('Foo\nBar\nBaz', '0-3:p\n0-11:ol\n0-3:li\n4-7:p\n4-7:li\n8-11:p\n8-11:li\n');
122 |     var h = cobalt.html.render(f);
123 |     t.equal(h, '<ol><li><p>Foo</p></li>\n<li><p>Bar</p></li>\n<li><p>Baz</p></li></ol>');
124 |     t.end();
125 | })


--------------------------------------------------------------------------------
/test/cobalt.range.js:
--------------------------------------------------------------------------------
  1 | require('../src/cobalt.js');
  2 | var tap = require('tap');
  3 | 
  4 | tap.test('create', function(t) {
  5 | 	var range1 = cobalt.range( 5, 20 );
  6 | 	t.equal(range1.start, 5, 'range starts at 5');
  7 | 	t.equal(range1.end, 20, 'range ends at 20');
  8 | 	t.equal(range1.count, 1, 'range has one subrange');
  9 | 	t.equal(''+range1, '5-20', 'range converts correct to string');
 10 | 	t.end();
 11 | });
 12 | 
 13 | tap.test('Illegal', function(t) {
 14 |     var range = cobalt.range(10, 5);
 15 |     t.equal(range.start, 10);
 16 |     t.equal(range.end, 10);
 17 |     t.end();
 18 | });
 19 | 
 20 | tap.test('IllegalNegative', function(t) {
 21 |     var range = cobalt.range(-10, 5);
 22 |     t.equal(range.start, 0);
 23 |     t.equal(range.end, 5);
 24 |     t.end();
 25 | });
 26 | 
 27 | tap.test('IllegalNegative', function(t) {
 28 |     var range = cobalt.range(-10, -5);
 29 |     t.equal(range.start, 0);
 30 |     t.equal(range.end, 0);
 31 |     t.end();
 32 | });
 33 | 
 34 | tap.test('Immutable',function(t) {
 35 |     var range1 = cobalt.range(5,20);
 36 |     var exception = 0;
 37 |     range1.start = 10;
 38 |     t.equal(range1.start, 5, 'range starts at 5');
 39 |     range1.ranges[0].start = 10;
 40 |     t.equal(range1.start, 5, 'range still starts at 5');
 41 |     try {
 42 |         range1.ranges.push('frop');
 43 |     } catch(e) {
 44 |         exception++;
 45 |     }
 46 |     t.equal(range1.ranges.length, 1, 'single range');
 47 |     t.equal(exception, 1, 'exception thrown');
 48 |     t.end();
 49 | });
 50 | 
 51 | tap.test('Delete', function(t) {
 52 |     var r = cobalt.range(5, 20);
 53 |     var s = r.delete( cobalt.range(10,15) );
 54 |     t.equal(s.start, 5, 'new range starts at 5');
 55 |     t.equal(s.end, 15, 'new range ends at 15');
 56 |     t.equal(r.end, 20, 'old range ends at 20');
 57 |     t.end();
 58 | });
 59 | 
 60 | tap.test('Insert', function(t) {
 61 |     var r = cobalt.range(5, 20);
 62 |     var s = r.insert( cobalt.range(10,15) );
 63 |     t.equal(s.start, 5);
 64 |     t.equal(s.end, 25);
 65 |     t.equal(r.end, 20);
 66 |     t.end();
 67 | });
 68 | 
 69 | tap.test('InsertLeft', function(t) {
 70 |     var r = cobalt.range(5, 20);
 71 |     var s = r.insert( cobalt.range(5,6) );
 72 |     t.equal(s.start, 5);
 73 |     t.equal(s.end, 21);
 74 |     t.equal(r.end, 20);
 75 |     t.end();
 76 | });
 77 | 
 78 | tap.test('InsertRight', function(t) {
 79 |     var r = cobalt.range(5, 20);
 80 |     var s = r.insert( cobalt.range(20,21) );
 81 |     t.equal(s.start, 5);
 82 |     t.equal(s.end, 21);
 83 |     t.equal(r.end, 20);
 84 |     t.end();
 85 | });
 86 | 
 87 | tap.test('CreateDisjointed', function(t) {
 88 |     var r = cobalt.range([[5,10],[15,20]]);
 89 |     t.equal(''+r, '5-10,15-20');
 90 |     var r = cobalt.range([[15,20],[5,10]]);
 91 |     t.equal(''+r, '5-10,15-20');
 92 |     var r = cobalt.range([[10,20],[5,12]]);
 93 |     t.equal(''+r, '5-20');
 94 |     t.end();
 95 | });
 96 | 
 97 | tap.test('DeleteDisjointed', function(t) {
 98 |     var r = cobalt.range([[5,10],[15,20]]);
 99 |     s = r.delete( cobalt.range(10,14) );
100 |     t.equal(''+s, '5-10,11-16');
101 |     s = r.delete( cobalt.range(10,15) );
102 |     t.equal(''+s, '5-15');
103 |     s = r.delete( cobalt.range(9,16) );
104 |     t.equal(''+s, '5-13');
105 |     var r = cobalt.range([[0,10],[20,30]]);
106 |     s = r.delete( [5,10] );
107 |     t.equal(''+s, '0-5,15-25');
108 |     t.end();
109 | });
110 | 
111 | tap.test('EmptyRange', function(t) {
112 |     var r = cobalt.range();
113 |     t.equal(null, r.start);
114 |     t.equal(null, r.end);
115 |     t.equal(null, r.size);
116 |     t.equal(0, r.count);
117 |     t.end();
118 | });
119 | 
120 | tap.test('Move', function(t) {
121 |     var r = cobalt.range(5,10);
122 |     s = r.move(-3);
123 |     t.equal(''+s, '2-7');
124 |     t.end();
125 | });
126 | 
127 | tap.test('Exclude', function(t) {
128 |     var r = cobalt.range(5,10);
129 |     s = r.exclude( cobalt.range(7,9) );
130 |     t.equal(''+s, '5-7,9-10');
131 |     var r = cobalt.range([[5,10],[15,20]]);
132 |     s = r.exclude( cobalt.range([[3,7],[17,22]]));
133 |     t.equal(''+s, '7-10,15-17');
134 |     var r = cobalt.range([[0,1],[5,6]]);
135 |     s = r.exclude( cobalt.range(0,6) );
136 |     t.equal(''+s, '');
137 |     var r = cobalt.range([0,30]);
138 |     var s = r.exclude([[5,10],[15,20]])
139 | 	t.equal(''+s, '0-5,10-15,20-30');
140 |     t.end();
141 | });
142 | 
143 | tap.test('Invert', function(t) {
144 | 	var r = cobalt.range([5,10]);
145 | 	var s = r.invert(15);
146 | 	t.equal(''+s, '0-5,10-15');
147 |     var r = cobalt.range([[5,10],[15,20]]);
148 |     var s = r.invert(30);
149 |     t.equal(''+s, '0-5,10-15,20-30');
150 |     t.end();
151 | });
152 | 
153 | tap.test('Intersect', function(t) {
154 |     var r1 = cobalt.range([[5,10],[15,20]]);
155 |     var r2 = cobalt.range([8,18]);
156 |     var s = r1.intersect(r2);
157 |     t.equal(''+s, '8-10,15-18');
158 |     t.end();
159 | });
160 | 
161 | tap.test('Intersect regression', function(t) {
162 | 	var r1 = cobalt.range([10,10]);
163 | 	var r2 = cobalt.range([6,7]);
164 | 	var s = r1.intersect(r2);
165 | 	t.equal(''+s, '');
166 | 	t.end();
167 | });
168 | 
169 | tap.test('Join', function(t) {
170 |     var r1 = cobalt.range([[5,10],[15,20]]);
171 |     var s = r1.join([8,12]);
172 |     t.equal(''+s, '5-12,15-20');
173 |     t.end();
174 | });
175 | 
176 | tap.test('JoinAdjoined', function(t) {
177 |     var r1 = cobalt.range([5,10]);
178 |     var s = r1.join([10,15]);
179 |     t.equal(''+s, '5-15');
180 |     t.end();
181 | });
182 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = [{
 2 |   entry: './src/cobalt.js',
 3 |   output: {
 4 |     filename: './dist/cobalt.js'
 5 |   }
 6 | },
 7 | {
 8 |   entry: './src/cobalt.editor.js',
 9 |   output: {
10 |     filename: './dist/cobalt.editor.js'
11 |   }
12 | },
13 | {
14 |   entry: './src/cobalt.editor-lite.js',
15 |   output: {
16 |     filename: './dist/cobalt.editor-lite.js'
17 |   }
18 | }];


--------------------------------------------------------------------------------