Widget won't open selections

[kkotwal94]

I'm having a hard time figuring out why when using Alloy Editor, the + widget won't open the selections just like in the demo.

I'm using this with ReactJS, and this is the alloy-editor-all.js file. I've used the no-react file as well. I'm assuming its just a jquery/javascript issue but can't figure it out.

[ipeychev]

It is hard to guess, could you submit some reproducible example?
If not, then check if there are some exceptions. Also, check if the widget is being rendered, but not visible in your app for some reason (like conflicting CSS).

[kkotwal94]

Here is the HTML:
https://github.com/kkotwal94/ReportProcessor/blob/master/views/addform.ejs

Here is the React JSX:
https://github.com/kkotwal94/ReportProcessor/blob/master/public/addForm.jsx

Error I get in console when referring to jquery.js
Uncaught ReferenceError: CKEDITOR is not defined.

It seems as the button was rendered, I clicked inspect element on it, and it was found. When I highlight text the other toolbar with text option does appear and function.

[ipeychev]

The code I cannot run, because it depends on your system, but here are some comments:

1. Looking here, better use the version without React - you already include React in your code. Also, can you check if all files are being transferred successfully? Use the network tab in the Developer tools of your browser.

<script src="/build/JSXTransformer.js"></script>
<script src="/build/react.js"></script>
<script src="views/js/bootstrap.min.js"></script>
<script src="views/js/scripts.js"></script>
<script type="text/jsx;harmony=true" src = "../public/addForm.jsx"></script>
<script src="../views/alloy-editor/alloy-editor-all.js"></script>

2. Are you trying to initialize the editor for an textarea?

 <textarea class = "ckedit" id = "ckedit"></textarea>

Better do it with a div, which has "contenteditable" attribute.

3. About this:

Error I get in console when referring to jquery.js
Uncaught ReferenceError: CKEDITOR is not defined.

What you mean with "referring to jquery.js"?

If CKEDITOR is not defined, it is hard for me to imagine how the other Toolbar would work. On theory that shouldn't be possible. CKEditor is the engine and it is needed for both toolbars. If you click on some of the buttons in the other Toolbar, does the selection change? Does it become bold, italic; can you create links, etc.?

[kkotwal94]

Removed the error, the text area ckeditor line was useless code that i removed sorry about that. All files do sucessfully make it, however on the other toolbar the selection does change, everything is functional but the hyper link one, the twitter one works.

[ipeychev]

Okay. Can you do one of these, please:

1. To prepare a zip with reproducible code and working code.
2. To expose a running version of your site, so we will be able to take a look.

I hope you understand - without a way for us to run or at least to see your code running, there is no way to guess what exactly is going on.

[kkotwal94]

Yea, you can download the zip here : https://github.com/kkotwal94/ReportProcessor

[kkotwal94]

I'm playing around with the css right now and trying to see if that is the case.

[ipeychev]

No, sorry, I meant a zip with the simplest possible set of files based on which we can reproduce the issue.

[kkotwal94]

https://www.dropbox.com/s/tmyvjrc2vt9rbbz/test.zip?dl=0

I reproduced it,

Files/
server.js
alloy-editor
build/
react.js
jsxtransformer.js
views/
addForm.ejs
js/
css/
public/
addform.jsx

In this smaller case, I still cannot get it to work, however in the demo I download from the site it works perfectly well.

[kkotwal94]

https://www.dropbox.com/s/4s32xqadz3769mf/test2.zip?dl=0

Here is even a simpler version without nodejs, its gotta be opened in firefox though, since chrome will fail to send a XHTMLRequest

[ipeychev]

Great, thanks!

We will debug it and get back to you.

[jbalsas]

I've been able to pin down the issue to the <input /> tags that are being rendered in the outer component in the provided demo.

With that, I've been able to reproduce it by itself in this branch https://github.com/jbalsas/alloy-editor/tree/AE-263-Exclusive_issue

See https://github.com/jbalsas/alloy-editor/commit/e029540c0edbd960ffbd563f1cdebcf7f9ae90ad#diff-bd0ecc160f0561e233116e3bb8bffc5fR9

[ipeychev]

Found the bug - basically, it is caused by a race condition.

It turns that if there is an input, select, textarea and they are part of the component's hierarchy, like in your case, React first will update the elements and then the code which checks should we hide the UI or not will be invoked. If not, the code will be invoked first and then React will change the components.
The check is: if the element on which user clicked is not a part of our UI, or it is not the editable area itself - hide the UI. And because React discards the clicked element before the check to occurs - the UI hides.

To fix that, instead to subscribe to 'click' and do the check, we will subscribe to 'mousedown'. In this case, we will do the check and then we will trigger the change of the elements of the Toolbar.

Will release a new version in a while.

[kkotwal94]

I have a couple questions, how did you guys go about debugging that? Like what did you guys check for, or print out, where did you guys start? Secondly, if I want to prefill the text area with html or text, I would just set it to {this.props.getData.body} in between the text area's, I would think. However, that did not work yesterday when I was messing around as well. I was grabbing the data from a ajax call in reactjs as well, and trying to prefill text. I'm going to try to recreate this too.

The data I am trying to prefill it with does have markdown, I just want to create a "editForm" where I can prefill the alloy editor with what I had just recently submitted via the alloy editor. Through a POST ajax I get markdown and stuff such as : http://pastebin.com/khL0xULG

How should I go about recreating it in or displaying it again in the editor?

Here is the problem reproduced: https://www.dropbox.com/s/nx9bzi7jhaf0r8u/test%20%282%29.zip?dl=0

[ipeychev]

On the first question:
It was obviously that there is something in your markup which caused the issue. It turned that this is the input element, so I spent some time trying to realize why exactly and what other elements can cause it.
After that, it was question of debugging React and to find out why does it destroy the UI. That was the hard part, once I found why, the fix was obvious. @jbalsas independently from me discovered that the input is the reason, so this confirmation and the simple reproducible example he created (based on yours zip), helped me too.

[jbalsas]

Hey @kkotwal94

About your second question, you'd need to set the defaultValue property of your textarea to the markup you wish to edit.

Additionally, you could turn the textarea into a regular contenteditable div and set its contents using dangerouslySetInnerHTML if that's really what you want.

Keep in mind that you should probably wait to initialize the editor after the content is set. Another option would be to use the editor own API for that.

[ipeychev]

Just released ver.0.3.6, please try with it.

[kkotwal94]

The css issue is fixed now, the insert image widget still does not work however.

There was no console error, im using the same demo i've been sending as well. Thanks for the great feedback also, I appreciate it. Also, I agree @jbalsas I think that is what i'm going to try.

[ipeychev]

Please open an issue, explain what you mean with "image widget" and add a reproducible code so we can take a look.

Thanks,