diff --git a/drafty.js b/drafty.js
index 75985c18..a1112754 100644
--- a/drafty.js
+++ b/drafty.js
@@ -88,9 +88,23 @@ Sample JSON representation of the text above:
     BR: { name: 'br', isVoid: true },
     LN: { name: 'a', isVoid: false },
     MN: { name: 'a', isVoid: false },
-    HT: { name: 'a', isVoid: false }
+    HT: { name: 'a', isVoid: false },
+    XT: { name: '', isVoid: true }
   };
 
+  // Convert base64-encoded string into Blob.
+  function base64toObjectUrl(b64, contentType) {
+    var bin = atob(b64);
+    var length = bin.length;
+    var buf = new ArrayBuffer(length);
+    var arr = new Uint8Array(buf);
+    for (var i = 0; i < length; i++) {
+      arr[i] = bin.charCodeAt(i);
+    }
+
+    return URL.createObjectURL(new Blob([buf], {type: contentType}));
+  }
+
   // Helpers for converting Drafty to HTML.
   var DECORATORS = {
     ST: { open: function() { return '<b>'; }, close: function() { return '</b>'; }},
@@ -112,22 +126,14 @@ Sample JSON representation of the text above:
       open: function(data) { return '<a href="#' + data.val + '">'; },
       close: function(data) { return '</a>'; },
       props: function(data) { return { name: data.val }; },
+    },
+    XT: {
+      open: function() { return ''; },
+      close: function(data) { return '<img src="' + base64toObjectUrl(data.val, data.mime) + '" />'},
+      props: function(data) { return { src: base64toObjectUrl(data.val, data.mime) }; },
     }
   };
 
-  // Convert base64-encoded string into Blob.
-  function base64toBlob (b64, contentType) {
-    var bin = atob(b64);
-    var length = bin.length;
-    var buf = new ArrayBuffer(length);
-    var arr = new Uint8Array(buf);
-    for (var i = 0; i < length; i++) {
-      arr[i] = bin.charCodeAt(i);
-    }
-
-    return new Blob([buf], {type: contentType});
-  }
-
   var Drafty = (function() {
 
     // Take a string and defined earlier style spans, re-compose them into a tree where each leaf is
@@ -456,6 +462,31 @@ Sample JSON representation of the text above:
         return result;
       },
 
+      addZeroLengthMedia: function(content, at, tag, mime, previewBits, external) {
+        content = content || {txt: ""};
+        content.ent = content.ent || [];
+        content.fmt = content.fmt || [];
+
+        var entity = {
+          tp: tag ? tag : "XT",
+          data: {
+            mime: mime,
+            val: previewBits,
+            ext: external
+          }
+        };
+        var range = {
+          at: at,
+          len: 0,
+          key: content.ent.length
+        };
+
+        content.fmt.push(range);
+        content.ent.push(entity);
+
+        return content;
+      },
+
       /**
        * Given the structured representation of rich text, convert it to HTML.
        * No attempt is made to strip pre-existing html markup.
@@ -582,7 +613,7 @@ Sample JSON representation of the text above:
        * For a given data bundle generate an object with HTML attributes,
        * for instance, given {url: "http://www.example.com/"} return
        * {href: "http://www.example.com/"}
-       * @param {stting} style - tw-letter style to generate attributes for.
+       * @param {string} style - tw-letter style to generate attributes for.
        * @param {Object} data - data bundle to convert to attributes
        * @returns object with HTML attributes.
        */
diff --git a/index.html b/index.html
index 6fcd857a..ee8ce37e 100644
--- a/index.html
+++ b/index.html
@@ -890,7 +890,7 @@
           }
  				  ctx.imageSmoothingEnabled = true;
           ctx.drawImage(this, sx, sy, size, size, 0, 0, canvas.width, canvas.height);
-          var bits = canvas.toDataURL("image/jpg");
+          var bits = canvas.toDataURL("image/jpeg");
           canvas = null;
 
           instance.setState({dataUrl: bits});
@@ -1651,8 +1651,8 @@
           this.props.onCreateTopic(sel, undefined);
         }
       },
-      handleGroupSubmit: function(name, dataUrl) {
-        this.props.onCreateTopic(undefined, vcard(name, dataUrl));
+      handleGroupSubmit: function(name, dataUrl, priv) {
+        this.props.onCreateTopic(undefined, vcard(name, dataUrl), priv);
       },
       handleGroupSubscribe: function(topicName) {
         this.props.onCreateTopic(topicName);
@@ -3120,14 +3120,13 @@
         this.setState({sidePanelSelected: 'new-topic'});
       },
       // Create of a new topic. New P2P topic requires peer's name.
-      handleNewTopicRequest: function(peerName, pub) {
+      handleNewTopicRequest: function(peerName, pub, priv) {
         var instance = this;
-
         var topic = peerName ? Tinode.newTopicWith(peerName) : Tinode.newTopic();
         var query = topic.startMetaQuery().withDesc().withSub().withData();
         var setParams;
         if (!peerName) {
-          setParams = {desc: {public: pub}};
+          setParams = {desc: {public: pub, private: priv}};
         }
 
         topic.subscribe(query.build(), setParams).then(function() {