diff --git a/examples/index.css b/examples/index.css index 3fdd11297..12c9fbee5 100644 --- a/examples/index.css +++ b/examples/index.css @@ -10,6 +10,11 @@ p { margin: 0; } +pre { + padding: 10px; + background-color: #eee; +} + img { max-width: 100%; } diff --git a/examples/paste-html/index.js b/examples/paste-html/index.js index a4ccb9275..cff7be033 100644 --- a/examples/paste-html/index.js +++ b/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) =>
{props.chidlren}
- case 'quote': return (props) => {props.children}- case 'bulleted-list': return (props) =>
{props.children}
case 'heading-one': return (props) => {props.children}
+ case 'quote': return (props) =>{props.children}case 'link': return (props) => { const { data } = props.node const href = data.get('href') diff --git a/lib/components/editor.js b/lib/components/editor.js index 6dc0cd859..f9e348f6f 100644 --- a/lib/components/editor.js +++ b/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}".`) } } diff --git a/lib/models/transforms.js b/lib/models/transforms.js index bf55fe88e..b32dabd58 100644 --- a/lib/models/transforms.js +++ b/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 {