Use html and text mobiledoc renderers for copy/paste

fixes #205

Brocfile.js

@@ -7,7 +7,9 @@ var styles = require('./broccoli/styles');
 var jquery = require('./broccoli/jquery');
 
 var vendoredModules = [
-  {name: 'content-kit-utils', options: {libDirName: 'src'}}
+  {name: 'content-kit-utils', options: {libDirName: 'src'}},
+  {name: 'mobiledoc-html-renderer'},
+  {name: 'mobiledoc-text-renderer'}
 ];
 var packageName = require('./package.json').name;
 

package.json

@@ -40,6 +40,8 @@
     "broccoli-test-builder": "^0.1.0",
     "content-kit-utils": "^0.2.0",
     "jquery": "^2.1.4",
+    "mobiledoc-html-renderer": "^0.1.8",
+    "mobiledoc-text-renderer": "^0.1.1",
     "testem": "^0.8.4"
   },
   "main": "dist/commonjs/mobiledoc-kit/index.js"

src/js/utils/element-utils.js

@@ -3,14 +3,6 @@ import {
   normalizeTagName
 } from 'mobiledoc-kit/utils/dom-utils';
 
-function createDiv(className) {
-  var div = document.createElement('div');
-  if (className) {
-    div.className = className;
-  }
-  return div;
-}
-
 function getEventTargetMatchingTag(tagName, target, container) {
   tagName = normalizeTagName(tagName);
   // Traverses up DOM from an event target to find the node matching specifed tag
@@ -76,7 +68,6 @@ function setData(element, name, value) {
 
 export {
   setData,
-  createDiv,
   getEventTargetMatchingTag,
   getElementRelativeOffset,
   getElementComputedStyleNumericProp,

src/js/utils/paste-utils.js

@@ -1,23 +1,22 @@
 /* global JSON */
 import MobiledocParser from '../parsers/mobiledoc';
 import HTMLParser from '../parsers/html';
-import { createDiv } from '../utils/element-utils';
-import { getSelectionContents } from '../utils/selection-utils';
+import HTMLRenderer from 'mobiledoc-html-renderer';
+import TextRenderer from 'mobiledoc-text-renderer';
 
 export function setClipboardCopyData(copyEvent, editor) {
   const { cursor, post } = editor;
   const { clipboardData } = copyEvent;
 
   const range = cursor.offsets;
   const mobiledoc = post.cloneRange(range);
-  const fragment = getSelectionContents();
-  const div = createDiv();
-  div.appendChild(fragment);
+
+  let cards = editor.cards;
+  let innerHTML = new HTMLRenderer().render(mobiledoc, cards);
+
   const html =
-    `<div data-mobiledoc='${JSON.stringify(mobiledoc)}'>` +
-      div.innerHTML +
-    `</div>`;
-  const plain = div.textContent;
+    `<div data-mobiledoc='${JSON.stringify(mobiledoc)}'>${innerHTML}</div>`;
+  const plain = new TextRenderer().render(mobiledoc, cards);
 
   clipboardData.setData('text/plain', plain);
   clipboardData.setData('text/html', html);

src/js/utils/selection-utils.js

@@ -5,16 +5,6 @@ function clearSelection() {
   window.getSelection().removeAllRanges();
 }
 
-// @return {DocumentFragment}
-function getSelectionContents() {
-  let selection = window.getSelection();
-  if (selection.rangeCount > 0) {
-    return selection.getRangeAt(0).cloneContents();
-  } else {
-    return document.createDocumentFragment();
-  }
-}
-
 function comparePosition(selection) {
   let { anchorNode, focusNode, anchorOffset, focusOffset } = selection;
   let headNode, tailNode, headOffset, tailOffset, direction;
@@ -42,6 +32,5 @@ function comparePosition(selection) {
 
 export {
   clearSelection,
-  comparePosition,
-  getSelectionContents
+  comparePosition
 };

tests/acceptance/editor-copy-paste-test.js

@@ -246,7 +246,7 @@ test('copy sets html & text for pasting externally', (assert) => {
     "heading",
     "h2 subheader",
     "The text"
-  ].join(''), 'gets plain text');
+  ].join('\n'), 'gets plain text');
 
   assert.ok(html.indexOf("<h1>heading") !== -1,
             'html has h1');