This is likely an issue with my inexperience using React generally, but I'd still greatly appreciate any insights.
I've added a commenting plugin to the TipTap editor.
When I create a new comment, it creates a DB record for the comment and I store that new comment in a state value (React) which is an array of all comments.
Then I return the ID which I use in a setComment (Mark) command that wraps the selection in a span with a commentId on the data-comment attribute.
When I click on that span, I can get the ID value, but the editor selectionUpdate function doesn't see the updated value. The page can access it fine, but that function can't see it until the page is reloaded.
How do I convince the editor to recognize the updated value in that function?
A minimal app demo can be found here:
Once you make a comment, and click on it, you'll see that it doesn't find the newly added comment. That's what I'm try to fix. It should be able to find it.
I understanding the the useEffect isn't being updated because the dependency array does not include chapterComments - but if I add it, then selectionUpdate runs multiple times and only the last one is accurate. I don't know how to appropriate destroy or update the editor instance - though I assume that's what I need to do.
The TipTap editor hook, const editor = useEditor, has it's own dependency array. Instead of trying to use useEffect with an editor dependency, just use the built in one for any values the editor needs to keep track of.
/facepalm
Related
I am using the Polaris library by Shopify to build an app. I am using RangeSlider with dual thumb for the filter.
However, when I add it as a shortcut inside my Filters, the slider does not work, i.e., I am not able to drag the ends of the slider
Note - If you go to More Filters -> Money Spent, the slider works fine without any issues, and I am able to drag both ends.
I tried manipulating the callback, but it didn't help and also does not throw any errors while debugging.
Reproducible Code Link to CodeSandbox => check Money spend filter
The problem seems to be that you are saving the data the user enters into rangeValue, but the code you have to add the filters (Line 198) is looking at moneySpent instead. Since moneySpent is never set, the filter is never added.
I am using React Dev Tools to inspect a React App in Chrome. Here is a screenshot of what I see:
Now I would like to identify the highlighted input object in my React code, in order to modify the event that is called when I type in some input. My problem is that there are several input elements in the DOM. I can easily type in some random number in one of the input fields and then identify which element in the DOM I have modified by my input. But I do not know how to identify that element in the code since there are several input elements of the same type in the code. That makes it hard to identify the specific line or the specific element in the code that I modified in the DOM.
Is there a way to find a specific DOM element in the code? Or to modify my code such that I find out which element in the code has called the event handler?
I have tried to log this in the console in the event handler but this in my case returns a reference to the entire component and not the specific element that called the event handler.
Use React Dev Tools
As the main image of React Dev Tools shows, you can inspect the element on the screen and see the structure of the code. This will be a helpfull tool for you.
If you want to know exactly what field to change, just add so prop to the field like id='123' and you will be able to see it in the Dev Tools.
To learn how to install and use that Chrome plugin, you can do a little search and you will find it ;)
Edit: I said to add a prop field like id='123' but you can add any prop like elementIWantToSee='here'and with the Dev Tools you would easily find the element
I'm using Java, Selenium Webdriver in Eclipse.
I wrote a helper method to wait for an element present, scroll to it, wait for the element to be visible and click it. Here's what I have:
protected void waitScrollWaitClick(By by, String scroll)
{
wait.until(ExpectedConditions.presenceOfElementLocated(by));
getJse().executeScript("$('.mCustomScrollbar#" + scroll + "').mCustomScrollbar('scrollTo',document.querySelector(\"" + by.selector + "\"), {scrollInertia:0})");
wait.until(ExpectedConditions.visibilityOfElementLocated(by));
getDriver().findElement(by).click();
Now the issue I'm having is in that second line in the method. I am passing a By object. This works for the conventional Webdriver methods on lines 1,3,4. But since we are using a custom scrollbar for our web app, I need to use that JavascriptExecutor class (the getJse()) to scroll on the proper div #id (thus passing in the 'scroll' argument). To use that JSE I just need the CSS selector, not the whole By object. If I add a breakpoint and look, the By object contains a 'selector' field that has what I want (in Eclipse there's a red square icon with an 'F' on it), but I can't seem to access it. I tried with the "by.selector" in the code above, but that is a compile error.
How can use that selector field? I'm not Java expert, so maybe I'm missing something obvious. I guess I don't understand why I can stop on a breakpoint, see the By object I created in the Variables tab, expand the By object and see the 'selector' field I want, but just can't access it.
The easy answer is that you cannot get the CSS selector from a By type, or even WebElement type. This is because the WebElements themselves are found by the By class. In case the By specified was a xpath there would be no way to populate the CSS selector.
The long answer specifically for your issue, to get the CSS Selector would be to create it using Javascript. An example would be Florent B.'s answer here. However, I didn't tried myself and I have no idea if it works for all cases.
Now, to address the general issue, instead of using document.querySelector use document.getElementById in case your element has an id.
Or by using document.evaluate to get your element by xpath. You can find an example in the answer posted here.
I've came across this issue today and I think I might need some help. We are using 1.6.1 version of Dojo, but this is cross version issue.
Steps to reproduce the following issue are pretty simple:
click the dojo doc link for Filtering Select dijit.form.FilteringSelect
On the documentation page, click the first FilteringSelect sample
In the Codeglass window sample, click the filteringselect and add "x" to "California", thus bringing it to invalid state
While focused, delete the "x" letter.
and here comes the problem. Technically the value is correct, but the dijit is still like in error state (unless it loses focus).
I'd like to get the dijit react and render correctly straightaway I delete the character causing the invalid state without losing focus.
Any ideas for the workaround?
Thank you.
ok. for eveyryone else interested the solution was 'quite' simple, just use the dijit.form.FilteringSelect._refreshState() .The underscore prefix is might not be someone's cup of tea but that was the only way to get it in correct state.
in our case it was a bit tricky as we are using the dojox.data.QueryReadStore wrapped in our own object and I needed the proper trigger which I've found in connecting to onComplete event of the inherited fetch() method.
How can you get the value of a <textarea> and store it in a MySQL database table?
I'm using TinyMCE 3.3.9.3.
Seeing as no one has answered your question I thought I'd chip in. Have you ever managed to get any form data passed into a database before (I.E is it just accessing a textarea that's the problem), or is this a general question about how to put form data into databases?
One thing I would strongly recommend is moving away from WYSIWYG style editors if your seriously considering doing web development properly. From experience no matter how good they claim to be you'll always encounter cross browser problems and at some point you'll have to dig into the code and understand it.
Sorry this isn't a direct answer, but with a bit more info as to what you need to know I'm sure we can help... I warn you though, if you've not had much experience at this some of the answers could be a bit deep. I think maybe this is why you've not had any responses because the answer require could potentially be quite epic,lol.
Dan
The tinymce editor id equals the textarea id.
Assuming that editor is your tinymce editor instance you may use the following to get the textareaa content (which is then equal to the editor content).
editor.triggerSave(); // update the textarea
var textarea_element = document.getElementById(editor.id); // get the updated textarea
var content = textarea_element.innerHTML; // this is the content
// now you need to call a script to save the content (i suggest you use ajax)
...