fix fragment pasting, remove <b> and <i> from paste html marks

examples/index.css

@@ -10,6 +10,11 @@ p {
   margin: 0;
 }
 
+pre {
+  padding: 10px;
+  background-color: #eee;
+}
+
 img {
   max-width: 100%;
 }

examples/paste-html/index.js

@@ -31,9 +31,7 @@ const BLOCKS = {
  */
 
 const MARKS = {
-  b: 'bold',
   strong: 'bold',
-  i: 'italic',
   em: 'italic',
   u: 'underline',
   s: 'strikethrough',
@@ -48,7 +46,7 @@ const MARKS = {
 
 const RULES = [
   {
-    deserialize(el) {
+    deserialize(el, next) {
       const block = BLOCKS[el.tagName]
       if (!block) return
       return {
@@ -74,10 +72,14 @@ const RULES = [
     deserialize(el, next) {
       if (el.tagName != 'pre') return
       const code = el.children[0]
+      const children = code && code.tagName == 'code'
+        ? code.children
+        : el.children
+
       return {
         kind: 'block',
-        type: 'code-block',
-        nodes: next(code.children)
+        type: 'code',
+        nodes: next(children)
       }
     }
   },
@@ -149,14 +151,18 @@ class PasteHtml extends React.Component {
 
   renderNode(node) {
     switch (node.type) {
-      case 'code': return (props) => <pre><code>{props.chidlren}</code></pre>
-      case 'quote': return (props) => <blockquote>{props.children}</blockquote>
-      case 'bulleted-list': return (props) => <ul>{props.chidlren}</ul>
+      case 'bulleted-list': return (props) => <ul>{props.children}</ul>
+      case 'code': return (props) => <pre><code>{props.children}</code></pre>
       case 'heading-one': return (props) => <h1>{props.children}</h1>
       case 'heading-two': return (props) => <h2>{props.children}</h2>
-      case 'list-item': return (props) => <li>{props.chidlren}</li>
+      case 'heading-three': return (props) => <h3>{props.children}</h3>
+      case 'heading-four': return (props) => <h4>{props.children}</h4>
+      case 'heading-five': return (props) => <h5>{props.children}</h5>
+      case 'heading-six': return (props) => <h6>{props.children}</h6>
+      case 'list-item': return (props) => <li>{props.children}</li>
       case 'numbered-list': return (props) => <ol>{props.children}</ol>
       case 'paragraph': return (props) => <p>{props.children}</p>
+      case 'quote': return (props) => <blockquote>{props.children}</blockquote>
       case 'link': return (props) => {
         const { data } = props.node
         const href = data.get('href')

lib/components/editor.js

@@ -125,7 +125,7 @@ class Editor extends React.Component {
       if (!plugin.renderNode) continue
       const component = plugin.renderNode(node, this.props.state, this)
       if (component) return component
-      throw new Error('No renderer found for node.')
+      throw new Error(`No renderer found for node with type "${node.type}".`)
     }
   }
 
@@ -141,7 +141,7 @@ class Editor extends React.Component {
       if (!plugin.renderMark) continue
       const style = plugin.renderMark(mark, this.props.state, this)
       if (style) return style
-      throw new Error('No renderer found for mark.')
+      throw new Error(`No renderer found for mark with type "${mark.type}".`)
     }
   }
 

lib/models/transforms.js

@@ -209,11 +209,20 @@ const Transforms = {
       nextChild = block.getNextSibling(startChild)
     }
 
-    // Insert the contents of the first block into the block at the cursor.
+    // Get the first and last block of the fragment.
     const blocks = fragment.getDeepestBlocks()
     const firstBlock = blocks.first()
     let lastBlock = blocks.last()
 
+    // If the block is empty, merge in the first block's type and data.
+    if (block.length == 0) {
+      block = block.merge({
+        type: firstBlock.type,
+        data: firstBlock.data
+      })
+    }
+
+    // Insert the first blocks nodes into the starting block.
     if (startChild) {
       block = block.insertChildrenAfter(startChild, firstBlock.nodes)
     } else {