Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

strange 📷 appears when paste text #104

Open
optimatex opened this issue Nov 11, 2017 · 4 comments
Open

strange 📷 appears when paste text #104

optimatex opened this issue Nov 11, 2017 · 4 comments

Comments

@optimatex
Copy link

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?
@benbriggs
Copy link
Contributor

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?

@optimatex
Copy link
Author

optimatex commented Dec 12, 2017 •
edited
Loading

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

  1. 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>
  1. 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}}

@optimatex
Copy link
Author

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

@benbriggs
Copy link
Contributor

@optimatex when looking in the draft source recently i came across facebookarchive/draft-js#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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@benbriggs @optimatex