Draft-js: Link example is broken

[flarnie]

This is a bug where opening examples/link/link.html trying to create a 'link' throws an error.
Marking this 'high-priority' because it's blocking manual testing of other bug fixes and PRs.

In Chrome:

Uncaught TypeError: Cannot read property 'create' of undefined

In Firefox it throws a more informative error:

TypeError: Entity is undefined
_confirmLink()
browser.js%20line%203193%20%3E%20Function:93
bound _confirmLink()
self-hosted
bound bound _confirmLink()
self-hosted
[64]</ReactErrorUtils.invokeGuardedCallback()
react.js:11110
executeDispatch()
react.js:2891
executeDispatchesInOrder()
react.js:2914
[17]</executeDispatchesAndRelease()
react.js:2346
[17]</executeDispatchesAndReleaseTopLevel()
react.js:2357
forEach()
self-hosted
bound call()
self-hosted
Call()
es6-shim.js:278
forEach()
es6-shim.js:1298
forEachAccumulated()
react.js:17732
[17]</EventPluginHub.processEventQueue()
react.js:2533
runEventQueueInBatch()
react.js:11135
[65]</ReactEventEmitterMixin.handleTopLevel()
react.js:11146
handleTopLevelImpl()
react.js:11224
[114]</Mixin.perform()
react.js:16987
[59]</ReactDefaultBatchingStrategy.batchedUpdates()
react.js:10324
batchedUpdates()
react.js:14689
[66]</ReactEventListener.dispatchEvent()
react.js:11301
bound ()
self-hosted
browser.js%20line%203193%20%3E%20Function:93:11

[flarnie]

This is also affecting examples/media/media.html.

There is something wrong with the examples/tex/ example, which could be related. Will open a separate issue for that if it ends up not being related.

[optimatex]

i got a lot of other errors when i tried implement Link example

[flarnie]

So in #376 the 'Entity' module was deleted, but it looks like examples are still trying to use it in some cases. That is one part of the issue. Looking into whether we should put back part of the 'Entity' module or if there is a new syntax that should be used. cc @johanneslumpe

None of this should affect version 0.9.1, which does not include the #376.

[flarnie]

Just updating - the new syntax is:

    const contentStateWithEntity = contentState.createEntity(
      'LINK',
      'MUTABLE',
      {url: urlValue}
    );
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

I have a fix for the link example, but still working on fixing the media example.

[johanneslumpe]

@flarnie sorry for commenting late - I'm currently moving. I thought I updated the examples though. Sorry for missing that!

[ajhyndman]

The documentation seems to be lagging behind on this one too. That'd be good to keep in sync.

Edit: Nevermind, these changes aren't in the most recent release. My mistake.

[johanneslumpe]

@ajhyndman you're still kind of right - I haven't addresses the documentation when making the PR. As soon as I have some free time I will send another PR to update the docs to match this feature.

cc @flarnie

[ar7casper]

@flarnie I'm trying to implement the media.html logic in my own component, following everything exactly like in the demo.
When I use
const contentStateWithEntity = contentState.createEntity( 'LINK', 'MUTABLE', {url: urlValue} ); const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
I get an exception: createEntity is not a function.
On the media.html it works fine, on my end it doesn't.
media.html uses version 0.9.0.
I'm using 0.9.1.
I tried following your conversation over here, not 100% sure what's the outcome of your discussion.

I see that on the working example the content state inherits the createEntity from the prototype, but on the not-working example, there's no such thing.

Any chance you can help?
Thanks!

[johanneslumpe]

@ar7casper The new entity handling is only available in the master branch as of now, not in a release.

[ar7casper]

@johanneslumpe got it.
So what do you recommend me doing in that case?

[johanneslumpe]

@ar7casper either use the master branch in your application or use the "legacy" version of doing things, which can be seen in the examples bundled with version 0.9.1. I cannot vouch for the stability of master, but using it will reduce quite a few pain points around entities.

[fanmanpro]

Still getting same error as @flarnie when I'm using versions 0.9.0 (which I assume is the master) or 0.9.1.

Not sure what I'm missing. My examples work but when running it through webpack with draft-js installed via npm, the error appears.

Any suggestions?

Thanks!

[johanneslumpe]

@fanus the version on npm does _not_ include the new entity handling. 0.9.0 is not master. Master has the new entity handling merged in. What is your exact issue?

[fanmanpro]

Getting the "createEntity is not a function error".

I will try cloning again and manually include the src from master into my
app (bypassing npm). Based on your response I assume that might solve my
issue.

Will report back of the error persists.

On 03 Oct 2016 12:27 AM, "Johannes Lumpe" [email protected] wrote:

@fanus https://github.com/fanus the version on npm does _not_ include
the new entity handling. 0.9.0 is not master. Master has the new entity
handling merged in. What is your exact issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/draft-js/issues/676#issuecomment-251000494,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABL7XsBRweqz-9u6TJko8NWlH951Xrnyks5qwC_UgaJpZM4KCH6b
.

[jonaswindey]

when will it be pushed to master?

[johanneslumpe]

This is on master.

[jonaswindey]

sorry, I mean to npm

[rovansteen]

It's a bit confusing that the examples are up to date with master and not with the latest stable branch. Any idea when there will be a new release on NPM?

[davidchang]

@flarnie - any chance you have an update on this?

[svnm]

Here is the old link example. It works nicely for people using version 0.9.0