sn-collab-editor 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c1b5b7258216bb3b991dc25a5d7a3f2dfc21083c
-  data.tar.gz: 770e98e0315ccc430de4a63076ae79f58da3b83c
+  metadata.gz: 584e0566ecfea667d8de83f27f541eff2dff10f1
+  data.tar.gz: d3fd5591f13379168c8037db93a18c751635a96e
 SHA512:
-  metadata.gz: 9e5907f3d79847ed959591ceadbb83ab55a5fa9532155c69ecd3f9668176823259db59eed50cfc034b2bf6535126bb89aa1073e2397e84be23373a4bab07c8dc
-  data.tar.gz: d811e1bca298048531698e55447d212681bb4aab07c3f1416152144bb224c6b756d8f7d68508d95a5cec54a9117c3a228a0943a4f595526e3155ba94dc8fd49a
+  metadata.gz: 68145c660dd250530bceb127b67bcd402315c63ebf017da2ca08bb901a5e178cc62ed6c14c9bc682a775d8fa6ae1a18c9f2d59d2d322da53f8982a3fa398124d
+  data.tar.gz: 5e8e96e7a82dfb96d6d76cefdea4cf74708f4a074245e9d76f9e34d4c26a59865a54d0ae926d2ddcc6d809338d0da99a5e5e7b64be094f14dc9bd3319f1dc37d

data/app/assets/javascripts/collab/cable.js

@@ -9,35 +9,145 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
   var clientId = Math.random()*100;
 
+  var editor;
+  App.registerChainpadObserver = function(inEditor) {
+    editor = inEditor;
+  }.bind(this)
+
+  var _chainpad, patchText;
+
+  function initChainpad() {
+    _chainpad = ChainPad.create({
+      checkpointInterval: 3,
+      logLevel: 0
+    });
+
+    patchText = TextPatcher.create({
+      realtime: _chainpad,
+    })
+
+    _chainpad.onChange(function (offset, toRemove, toInsert) {
+      var currentContent = editor.getContent();
+      var newContent = currentContent.substring(0, offset) + toInsert + currentContent.substring(offset + toRemove);
+
+      var op = {offset: offset, toRemove: toRemove, toInsert: toInsert};
+      var oldCursor = {};
+      oldCursor.selectionStart = cursorToPos(App.editor.getCursor('from'), currentContent);
+      oldCursor.selectionEnd = cursorToPos(App.editor.getCursor('to'), currentContent);
+
+      editor.setContent(newContent);
+
+      var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
+        return TextPatcher.transformCursor(oldCursor[attr], op);
+      });
+
+      if(selects[0] === selects[1]) {
+        App.editor.setCursor(posToCursor(selects[0], newContent));
+      }
+      else {
+        App.editor.setSelection(posToCursor(selects[0], newContent), posToCursor(selects[1], newContent));
+      }
+    });
+
+    _chainpad.onMessage(function(message, cb){
+      var success = App.socket.channel.post(message);
+      setTimeout(function () {
+        if(!success) {
+          console.log("Message not successful");
+        }
+        cb();
+      }, 1);
+    })
+
+    _chainpad.start();
+  }
+
+  function getChainpad() {
+    return _chainpad;
+  }
+
+
+  App.textEditorDidMakeChanges = function(text) {
+    if(patchText) {
+      patchText(text);
+    }
+  }
+
+   function posToCursor(position, newText) {
+      var cursor = {
+          line: 0,
+          ch: 0
+      };
+      var textLines = newText.substr(0, position).split("\n");
+      cursor.line = textLines.length - 1;
+      cursor.ch = textLines[cursor.line].length;
+      return cursor;
+  }
+
+  function cursorToPos(cursor, oldText) {
+    var cLine = cursor.line;
+    var cCh = cursor.ch;
+    var pos = 0;
+    var textLines = oldText.split("\n");
+    for (var line = 0; line <= cLine; line++) {
+        if(line < cLine) {
+            pos += textLines[line].length+1;
+        }
+        else if(line === cLine) {
+            pos += cCh;
+        }
+    }
+    return pos;
+  };
+
   App.socket = {};
   App.socket.cable = ActionCable.createConsumer("/collab/cable");
 
+  var ignoreNextMessage = false;
+
   App.socket.subscribeToDoc = function(docId, callback) {
     App.socket.channel = App.socket.cable.subscriptions.create({channel: "EditChannel", doc_id: docId, client_id: clientId}, {
       connected: function() {
-        // Called when the subscription is ready for use on the server
-        this.retrieve();
-      },
+        App.socket.channel.retrieve();
+      }.bind(this),
 
       disconnected: function() {
-        // Called when the subscription has been terminated by the server
       },
 
       received: function(data) {
-        // Called when there's incoming data on the websocket for this channel
-        if(data.client_id != clientId || data.retrieve) {
-          var result = App.crypto.decrypt(data.message, App.encryptionKey(), data.iv, data.auth, App.authKey());
-          callback(result);
+        if(data.client_id == clientId && !data.initial_retrieve) {
+          return;
+        }
+
+        var patches = [];
+        if(data.initial_retrieve) {
+          initChainpad();
+          patches = data.patches;
+        } else if(data.patch) {
+          patches = [data.patch];
         }
+
+        patches = patches.map(function(patch){
+          return App.crypto.decrypt(patch.content, App.encryptionKey(), patch.iv, patch.auth, App.authKey());
+        })
+
+        patches.forEach(function(patch){
+          getChainpad().message(patch);
+        })
       },
 
       retrieve: function() {
         return this.perform('retrieve', {doc_id: docId, client_id: clientId});
       },
 
-      post: function(message) {
-        var result = App.crypto.encrypt(message, App.encryptionKey(), App.authKey());
-        var data = {message: result.cipher, iv: result.iv, auth: result.auth, doc_id: docId, client_id: clientId};
+      post: function(patch) {
+        if(ignoreNextMessage) {
+          ignoreNextMessage = false;
+          return;
+        }
+
+        var result = App.crypto.encrypt(patch, App.encryptionKey(), App.authKey());
+        var data = {content: result.cipher, iv: result.iv, auth: result.auth, edit_token: App.editToken, doc_id: docId, client_id: clientId};
         return this.perform('post', data);
       }
     });

data/app/assets/javascripts/collab/documents.js

@@ -3,61 +3,117 @@
 
 document.addEventListener("DOMContentLoaded", function(event) {
 
-  var editor = document.getElementById("editor");
+  var textarea, editor, isSubscribedToDoc;
+  var isInSN = window.parent != window;
+
+  function getEditorValue() {
+    return editor.getDoc().getValue() || "";
+  }
+
+  function configureEditor() {
+    textarea = document.getElementById("editor");
+
+    editor = App.editor = CodeMirror.fromTextArea(textarea, {
+      mode: "text/html",
+      lineNumbers: true,
+      lineWrapping: true,
+      mode: "markdown"
+    });
+
+    editor.on("change", function(cm, change){
+      if(isSubscribedToDoc) {
+        App.textEditorDidMakeChanges(getEditorValue());
+      }
+      sendDocToSN()
+    })
+  }
+
+  App.registerChainpadObserver({
+    getContent: function() {
+      return getEditorValue();
+    },
+
+    setContent: function(content) {
+      editor.getDoc().setValue(content);
+    }
+  })
 
   function createNewDocument() {
     window.location.href = "/collab/doc/new";
   }
 
   function subscribeToDocId(docId) {
-    App.socket.subscribeToDoc(docId, function(message){
-      editor.value = message;
-    })
+    configureEditor();
+    App.socket.subscribeToDoc(docId, function(message){})
+    isSubscribedToDoc = true;
+    refreshKey();
+
+    var incomingText = sessionStorage.getItem("sn_text");
+    if(incomingText) {
+      editor.getDoc().setValue(incomingText);
+      sessionStorage.removeItem("sn_text");
+    }
   }
 
   var location = window.location.href;
   var uuidResults = location.match(/[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/i);
   var uuid = uuidResults ? uuidResults[0] : null;
   var hasDocument = uuid != null;
-  var noteId = sessionStorage.getItem("lastNoteId");
+  var noteId = sessionStorage.getItem("sn_lastNoteId");
 
   var key, didGenerateKey;
-  if(location.indexOf("#key=") != -1) {
-    key = location.split("#key=").slice(-1)[0];
-  } else {
-    key = App.crypto.generateRandomKey(32);
-    didGenerateKey = true;
-  }
-  setKey(key);
 
-  if(window.parent != window) {
-    if(hasDocument) {
-      // inform parent of new document
-      window.parent.postMessage({text: buildParamsString({id: uuid, key: key}), id: noteId}, '*');
-      subscribeToDocId(uuid);
+  function refreshKey() {
+    if(location.indexOf("#key=") != -1) {
+      key = location.split("#key=").slice(-1)[0];
     } else {
-      window.parent.postMessage({status: "ready"}, '*');
-    }
-  } else {
-    if(!hasDocument) {
-      createNewDocument();
-    } else {
-      subscribeToDocId(uuid);
+      key = App.crypto.generateRandomKey(32);
+      didGenerateKey = true;
     }
+    setKey(key);
   }
 
   function setKey(key) {
     App.key = key;
-    var span = document.getElementById("url-key");
-    if(span) {
-      span.textContent = "#key=" + key;
-    }
 
     if(window.location.href.indexOf("#key") == -1) {
       window.history.pushState('Document', 'Document', "#key=" + key);
     }
+
+    if(textarea) {
+      var url = window.location.href;
+      var etString = "?et=";
+      var etIndex = url.indexOf(etString);
+      var editingUrl, viewingUrl, editToken;
+      if(etIndex != -1) {
+        // has edit token
+        var editToken = App.editToken = url.substring(etIndex + etString.length, url.indexOf("#"));
+        editingUrl = url;
+        viewingUrl = url.replace(etString + editToken, "");
+      } else {
+        // no edit token
+        viewingUrl = url;
+      }
+
+      var editingElement = document.getElementById("editing-url");
+      if(editingUrl) {
+        editingElement.innerHTML = editingUrl;
+        editingElement.href = editingUrl;
+        sendDocToSN();
+      } else {
+        var editingWrapper = document.getElementById("editing-url-wrapper");
+        editingWrapper.parentNode.removeChild(editingWrapper);
+      }
+
+      var viewingElement = document.getElementById("viewing-url");
+      viewingElement.innerHTML = viewingUrl;
+      viewingElement.href = viewingUrl;
+    }
   }
 
+
+  // ** Communication with Standard Notes App **
+
   function buildParamsString(doc) {
     var string = "";
     for(var key in doc) {
@@ -67,34 +123,68 @@ document.addEventListener("DOMContentLoaded", function(event) {
     return string;
   }
 
-  window.addEventListener("message", function(event){
-
-    var text = event.data.text || "";
-    sessionStorage.setItem("lastNoteId", event.data.id);
+  function sendDocToSN() {
+    if(!isInSN) {
+      return;
+    }
 
-    var paramString = text.split("%%Do not modify above this line%%")[0];
-    var lines = paramString.split("\n");
-    var params = {};
-    lines.forEach(function(line){
-      var comps = line.split(": ");
-      var key = comps[0];
-      var value = comps[1];
-      params[key] = value;
-    })
+    var noteBody = buildParamsString({url: window.location.href});
+    if(editor) {
+      var disclaimer = "// text you enter below will not transfer to the live editor.\n// the below is just a backup for your records";
+      noteBody += "\n\n" + disclaimer + "\n\n" + getEditorValue();
+    }
+    window.parent.postMessage({text: noteBody, id: noteId}, '*');
+  }
 
-    let key = params["key"];
-    let docId = params["id"]
-    if (docId && docId.length) {
-      window.location.href = "/collab/doc/" + docId + "#key=" + key;
+  if(isInSN) {
+    if(hasDocument) {
+      // inform parent of new document
+      sendDocToSN();
+      subscribeToDocId(uuid);
     } else {
-      createNewDocument();
+      window.parent.postMessage({status: "ready"}, '*');
     }
-  }, false);
+    window.addEventListener("message", function(event){
+      var text = event.data.text || "";
+      sessionStorage.setItem("sn_lastNoteId", event.data.id);
 
-  if(editor) {
-    editor.addEventListener("input", function(event){
-      var text = event.target.value;
-      App.socket.channel.post(text);
-    })
+      var splitTarget = "%%Do not modify above this line%%";
+      var comps = text.split(splitTarget);
+      var snText;
+      var hasParams = text.indexOf(splitTarget) != -1;
+      if(hasParams) {
+        snText = comps[1];
+      } else {
+        snText = text;
+        sessionStorage.setItem("sn_text", snText)
+      }
+
+
+      var paramString = comps[0];
+      var params = {};
+      var lines = paramString.split("\n");
+      lines.forEach(function(line){
+        var comps = line.split(": ");
+        var key = comps[0];
+        var value = comps[1];
+        params[key] = value;
+      })
+
+      let url = params["url"];
+      if (url) {
+        window.location.href = url;
+      } else {
+        createNewDocument();
+      }
+    }, false);
   }
+
+  if(!isInSN){
+    if(!hasDocument) {
+      createNewDocument();
+    } else {
+      subscribeToDocId(uuid);
+    }
+  }
+
 })

data/app/assets/stylesheets/collab/{application.css → application.css.scss}

@@ -29,22 +29,49 @@ html, body {
   flex-direction: column;
 }
 
-#editor {
+.CodeMirror {
   flex: 1;
   width: 100%;
   height: 100%;
   resize: none;
-  font-size: 18px;
-  border: 1px solid rgb(226, 226, 226);
+  font-size: 16px;
   border-radius: 4px;
   padding: 15px;
   margin-top: 10px;
   font-family: monospace;
+  margin-top: 10px;
+  padding: 0;
 }
 
-#url {
+.url-wrapper {
   word-wrap: break-word;
   word-break: break-all;
+  font-size: 10px;
+  margin-bottom: 3px;
+
+  opacity: 0.3;
+
+  &:hover {
+    opacity: 1.0;
+  }
+
+  .label {
+    font-weight: bold;
+  }
+
+  .url {
+    font-weight: bold;
+    color: rgba(black, 0.5);
+    font-size: 10px;
+    text-decoration: none;
+
+
+    &:visited { text-decoration: none; color:black; }
+    &:hover {
+      text-decoration: underline;
+      color: black;
+    }
+  }
 }
 
 * {