Cannot select any option in entityTypes
nithinkashyapn opened this issue · comments
Do you want to request a feature or report a bug?
Report A Bug
What is the current behavior?
When i click on any ENTITY_TYPE, the screen goes blank and error pops up in console.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. GIFs and screenshots are very helpful too.
What is the expected behavior?
Link should be created or horizontal rule must be inserted
Which versions of Draftail + Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draftail or Draft.js?
Draftail - 1.2.1
Draft-js - 0.10.5
Firefox - 65
Hi @nithinkashyapn! I would expect this to be an issue in your code – https://www.draftail.org/ has functional link and horizontal rules examples built with entity types that are working fine.
Here is the link config for example:
draftail/examples/constants/ui.js
Lines 64 to 73 in d90f9e6
Could you share what config you're using in your case, and perhaps code of your source component?
Hey @thibaudcolas,
I created the following component based on the docs
It is like this
Please do tell me where I went wrong. Apart from entityTypes others work.
Thanks.
- Nithin
Ah, that makes sense. You need much more than just type for entities to work – at the very least, a source and a decorator or block.
- For the
source, entities need some kind of UI for users of the editor to enter their data (e.g. a link picker for link entities, image upload for images), which isn't provided. Thesourceis a React component that will render when users press the entity's button in the toolbar, hence why you had this error if you didn't provide one. - Then the
decoratororblockis the React component that renders the entities in the editor (say with a span + tooltip for links).decoratoris for inline entities,blockis for block entities.
For images and links, you should be able to start from the Draftail examples:
draftail/examples/constants/ui.js
Lines 64 to 73 in d90f9e6
To go further, see the docs about entities over at https://www.draftail.org/docs/entities, as well as the API reference: https://www.draftail.org/docs/api#entities-docs-entities.
Finally, for horizontal rules, this is all built-in – just set the enableHorizontalRule prop to true.
Hey,
I did as you said and made my entityType like this
entityTypes={[{
type: ENTITY_TYPE.LINK,
source: LinkSource,
decorator: Link
}]}
I'm borrowing the LinkSource and Link from examples. I've copied the same file structure along with lib/ yet it does not seem to work. When i click on the link option the entire editor goes blank.
I installed react-modal@3.1.5 also as i was getting
Warning: react-modal: App element is not defined. Please use Modal.setAppElement(el) or set appElement={el}.
The editor switches to read-only mode while modals are open – is that what you're talking about? Please make sure you include the styles for the code you're reusing as well, sounds like it might be missing if you don't see a modal window.
Hey @thibaudcolas
Yes, It's the editor switching to read-only mode. The styles are included as it is. Copied the same structure with all the files.
Can you please tell me the steps as to where the SCSS settings needs to be changed as well.
As of now I just copied and pasted the examples and lib directories.
It looks like this
Thanks.
@nithinkashyapn if you literally copied everything inside examples I really don't see what could go wrong, unless your project also has styles that override the ones from examples.
Anyway if that overlay shows it means that the LinkSource renders, so it seems more like a styles issue than anything. I would assume you don't get the error in the console that was mentioned in your initial question?
Yes, The error in the console is not there anymore and also <hr /> works. Trying to solve the linkbox CSS issue.
I tried the draft-js anchor plugin as well. It works, But, when i combine it with <FormArray /> of Formik it seems to behave strangely. When i input the data only the latest array component is linkable and when i am trying to edit it after save it does not display at all.
So, trying to make this work.
Hey @thibaudcolas,
I managed to solve it,
I removed the styling completely and defaulted to React-Modal's default styles.
My Component now looks like this
<ReactModal
parentSelector={() => document.body}
{...props}
/>
Also, I changed the LinkSource button type so that it doesn't fire the form as it had type="submit"
<form className="LinkSource">
<button type="button" onClick={this.onConfirm}>
Save
</button>
</form>
Nice! I'm glad you got it working. If you can share some of your code for future reference, I'm sure there are other people who would benefit from looking at the implementation.
Hey @thibaudcolas, Already on it,
I'm putting together all needed components with required CSS so that it can be directly plugged in.
Will publish it by this weekend and ping you here, if it's okay?
Nice! I'd love to have a look at that, please do ping me.
Hey @thibaudcolas,
Here's what i did draftail-link-example,
Please check the src/helper directory, It is mostly the same code as in the examples.
I am planning to release the same as a npm module so that anyone can plug it in easily.
Please do share your feedback.
- Nithin