draft-convert strange 📷 appears when paste text

Hello. I was trying to use draft-convert to transform HTML to content when user paste text. Here is my current code:

class Draft extends Component {
   pasteText(text, html) {
      const editorState = this.getter();
      const blockMap = convertFromHTML(config)(html).blockMap;
      const newState = Modifier.replaceWithFragment(
         editorState.getCurrentContent(),
         editorState.getSelection(),
         blockMap
      );
      this.setter(EditorState.push(editorState, newState, 'insert-fragment'));
      return false;
   }
   render() {
      return (
         <div className="">
            <Editor
               handlePastedText={(text, html) => this.pasteText(text, html)}
            />
         </div>
      );
   }
}

const config = {
   htmlToBlock: (nodeName, node) => {},
   htmlToStyle: (nodeName, node, currentStyle) => currentStyle,
   htmlToEntity: (nodeName, node, createEntity) => {
      if (nodeName === 'img' && node.getAttribute('data-image-id')) {
         return createEntity('image', 'IMMUTABLE', { src: node.src );
      }
      // In the case this is pasted image (it has not attribute 'data-image-id') I just return null
      else if (nodeName === 'img') {
         return null
      }
   },
   textToEntity: (text, createEntity) => {}
}

As you can see, I try to return null if this is pasted image. But it doesn't works. As the result I got 📷 symbol instead of images. How can I handle this? Maybe there is some way to escape this symbol?

Nov 11 '17 17:11 optimatex

could you intercept your paste function to check what the incoming HTML string is in your case, then send that and the resulting (raw) content state that convertFromHTML returns?

Dec 10 '17 20:12 benbriggs

Hi. Sorry for late answer. Here are both logs:

pasted HTML string (a copied 3 words + image from wikipedia):

<html>
<body>
<!--StartFragment--><div id="mp-tfa-img" style="color: rgb(0, 0, 0); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(245, 255, 250); text-decoration-style: initial; text-decoration-color: initial; float: left; margin: 0.5em 0.9em 0.4em 0em;"><a href="https://en.wikipedia.org/wiki/File:William_Beach_Thomas_1917.jpg" class="image" style="text-decoration: none; color: rgb(11, 0, 128); background: none;"><img alt="William Beach Thomas 1917.jpg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/William_Beach_Thomas_1917.jpg/100px-William_Beach_Thomas_1917.jpg" width="100" height="143" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/88/William_Beach_Thomas_1917.jpg/150px-William_Beach_Thomas_1917.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/88/William_Beach_Thomas_1917.jpg/200px-William_Beach_Thomas_1917.jpg 2x" data-file-width="1027" data-file-height="1468" style="border: 0px; vertical-align: middle;"></a></div><p style="margin: 0.5em 0px; line-height: inherit; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(245, 255, 250); text-decoration-style: initial; text-decoration-color: initial;"><b><a href="https://en.wikipedia.org/wiki/William_Beach_Thomas" title="William Beach Thomas" style="text-decoration: none; color: rgb(11, 0, 128); background: none;">William Beach Thomas</a></b><span> </span></p><!--EndFragment-->
</body>
</html>

Raw content from convertFromHTML: {"entityMap":{},"blockMap":{"58i9r":{"key":"58i9r","type":"unstyled","text":"","characterList":[],"depth":0,"data":{}},"etffn":{"key":"etffn","type":"unstyled","text":"William Beach Thomas ","characterList":[{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":["BOLD"],"entity":"3"},{"style":[],"entity":null}],"depth":0,"data":{}}},"selectionBefore":{"anchorKey":"elqvg","anchorOffset":0,"focusKey":"elqvg","focusOffset":0,"isBackward":false,"hasFocus":false},"selectionAfter":{"anchorKey":"elqvg","anchorOffset":0,"focusKey":"elqvg","focusOffset":0,"isBackward":false,"hasFocus":false}}

Dec 12 '17 13:12 optimatex

By the way, the 📷 symbol doesn't appear in draft editor instantly. It appears only after convertToHTML

Dec 12 '17 13:12 optimatex

@optimatex when looking in the draft source recently i came across https://github.com/facebook/draft-js/pull/1378 - i think this is the culprit (and is a relief because a specific emoji appearing sounded mystifying). my guess is that your paste handler isn't properly preventing the default draft-js paste behavior and it gets added by the built-in convertHTMLToContentBlocks

May 08 '18 19:05 benbriggs

draft-convert draft-convert copied to clipboard

strange 📷 appears when paste text

draft-convert
draft-convert copied to clipboard