src/redakcja/static/js/wiki/caret.js

   1 class Caret {
   2     constructor(view) {
   3         let self = this;
   4         self.view = view;
   5         self.singleClick = false;
   6
   7         let caret = this.element = $('<nobr><span id="caret"><textarea></textarea></span></nobr>');
   8
   9         // When user writes into caret, add it to the document.
  10         $('textarea', caret).on('input', function() {
  11             let v = $(this).val();
  12             $(this).val('');
  13             self.insertChar(v);
  14
  15         });
  16
  17         // On click on x-node element, set caret position.
  18         self.view.on('click', '*[x-node]', function(e) {
  19             if (e.redakcja_caret_ignore) return;
  20             e.redakcja_caret_ignore = true;
  21
  22             if (self.singleClick) {
  23                 self.singleClick = false;
  24                 return;
  25             }
  26
  27             self.detach();
  28
  29             var selection = window.getSelection();
  30             if (!selection.isCollapsed) return;
  31             var anchorNode = selection.anchorNode;
  32             if (anchorNode.nodeType != Node.TEXT_NODE) return;
  33             // Is selection still inside a node?
  34             if (!$(anchorNode).closest('[x-node]').length) return;
  35             if ($(anchorNode).parents('[x-annotation-box]').not('.editing').length) return;
  36
  37             self.singleClick = true;
  38             setTimeout(function() {
  39                 if (self.singleClick) {
  40                     self.element.insertBefore(
  41                         anchorNode.splitText(
  42                             selection.anchorOffset
  43                         )
  44                     )
  45                     self.focus();
  46                 }
  47                 self.singleClick = false;
  48             }, 250);
  49
  50         });
  51
  52         self.element.on('keydown', function(e) {
  53             // TODO:
  54             // delete selection?
  55
  56             // cases:
  57             // we are in <akap> (no going up)
  58             // we are in <wyroznienie> (can go up)
  59             // we are next to <wyroznienie> (can go inside)
  60
  61             switch (e.key) {
  62             case "ArrowRight":
  63                 if (e.shiftKey) {
  64                     self.detach();
  65                     return;
  66                 }
  67
  68                 self.moveRight();
  69                 break;
  70             case "ArrowLeft":
  71                 if (e.shiftKey) {
  72                     self.detach();
  73                     return;
  74                 }
  75
  76                 self.moveLeft();
  77                 break;
  78             case "ArrowUp":
  79                 if (e.shiftKey) {
  80                     self.detach();
  81                     return;
  82                 }
  83                 break;
  84             case "ArrowDown":
  85                 if (e.shiftKey) {
  86                     self.detach();
  87                     return;
  88                 }
  89                 break;
  90             case "Backspace":
  91                 self.deleteBefore();
  92                 break;
  93             case "Delete":
  94                 self.deleteAfter();
  95                 break;
  96             case "Enter":
  97                 self.splitBlock();
  98                 break;
  99                 //                default:
 100                 //                    console.log('key', e.key, e.code);
 101             }
 102         })
 103     }
 104
 105     get attached() {
 106         return this.element.parent().length;
 107     }
 108
 109     detach() {
 110         let p;
 111         if (this.attached) {
 112             p = this.element.parent()[0]
 113             this.element.detach();
 114             p.normalize()
 115         }
 116     }
 117
 118     focus() {
 119         $("textarea", self.element).focus();
 120     }
 121
 122     normalize() {
 123         this.element.parent()[0].normalize();
 124     }
 125
 126     insert(elem) {
 127         elem.insertBefore(this.element);
 128     }
 129
 130     insertChar(ch) {
 131         this.insert(
 132             $(document.createTextNode(ch))
 133         );
 134         this.normalize();
 135     }
 136
 137     deleteBefore() {
 138         let contents = this.element.parent().contents();
 139         // Find the text before caret.
 140         let textBefore = contents[contents.index(this.element) - 1];
 141
 142         // Should be text, but what if not?
 143         textBefore.textContent = textBefore.textContent.substr(0, textBefore.textContent.length - 1);
 144         this.normalize();
 145
 146     }
 147
 148     deleteAfter() {
 149         let contents = this.element.parent().contents();
 150         // Find the text after caret.
 151         let textAfter = contents[contents.index(this.element) + 1];
 152         textAfter.textContent = textAfter.textContent.substr(1);
 153     }
 154
 155     splitBlock() {
 156         let splitter = this.element;
 157         let parent, newParent, splitIndex, index;
 158
 159         while (!splitter.is('div[x-node]')) {
 160             parent = splitter.parent();
 161             splitIndex = parent.contents().index(splitter);
 162
 163             if (parent.is('[x-annotation-box]')) {
 164                 // We're splitting inside an inline-style annotation.
 165                 // Convert into a block-style annotation now.
 166                 let p = $('<div x-editable="true" x-node="akap">');
 167                 parent.contents().appendTo(p);
 168                 parent.empty();
 169                 parent.append(p);
 170                 parent = p;
 171             }
 172
 173             newParent = parent.clone();
 174             index = parent.contents().length - 1;
 175             while (index >= splitIndex) {
 176                 newParent.contents()[index].remove();
 177                 --index;
 178             }
 179             while (index >= 0) {
 180                 parent.contents()[index].remove();
 181                 -- index;
 182             }
 183             newParent.insertBefore(parent);
 184
 185             splitter = parent;
 186         }
 187     }
 188
 189     moveLeft() {
 190         this.move({
 191             move: -1,
 192             edge: (i, l) => {return !i;},
 193             enter: (l) => {return l - 1;},
 194             splitTarget: (t) => {return t.splitText(t.length - 1);},
 195             noSplitTarget: (t) => {return t.splitText(t.length);},
 196         })
 197     }
 198
 199     moveRight() {
 200         this.move({
 201             move: 1,
 202             edge: (i, l) => {return i == l - 1;},
 203             enter: (l) => {return 0;},
 204             splitTarget: (t) => {return t.splitText(1);},
 205             noSplitTarget: (t) => {return t;},
 206         })
 207     }
 208
 209     move(opts) {
 210         if (!this.attached) return;
 211
 212         this.normalize();
 213
 214         let contents = this.element.parent().contents();
 215         let index = contents.index(this.element);
 216         let target, moved, oldparent;
 217
 218         let parent = this.element.parent()[0];
 219
 220         if (opts.edge(index, contents.length)) {
 221             // We're at the end -- what to do?
 222             // can we go up?
 223
 224             if (parent.nodeName == 'EM') {
 225                 oldparent = parent;
 226                 parent = parent.parentNode;
 227                 contents = $(parent).contents();
 228                 index = contents.index(oldparent);
 229             }
 230         }
 231
 232         index += opts.move;
 233         target = contents[index];
 234         moved = false;
 235
 236         while (target !== undefined && target.nodeType == Node.ELEMENT_NODE) {
 237             // we've encountered a node.
 238             // can we go inside?
 239
 240             if (target.nodeName == 'EM') {
 241                 // enter
 242                 parent = $(target);
 243                 contents = parent.contents();
 244                 index = opts.enter(contents.length);
 245                 target = contents[index];
 246
 247                 // what if it has no elements?
 248             } else {
 249                 // skip
 250                 index += opts.move; // again, what if end?
 251                 target = contents[index];
 252                 moved = true;
 253             }
 254
 255             // if editable?
 256             // what if editable but empty?
 257
 258         }
 259
 260         if (target !== undefined && target.nodeType == Node.TEXT_NODE ) {
 261             if (!moved) {
 262                 target = opts.splitTarget(target);
 263             } else {
 264                 target = opts.noSplitTarget(target);
 265             }
 266
 267             this.element.insertBefore(target);
 268         }
 269         this.normalize();
 270         this.focus();
 271     }
 272 }