We Keep Coding

How to create Medium's Highlighter using React?

I'm trying to implement highlighter to my blog project using React however I couldn't find any useful library to implement it. Basically I want to implement replica of Medium's Highlighter to my article pages.
After the text selection done, if the user activated the highlighter tool, should be able to highlight the text. Since it requires DOM manipulation I haven't come across the full implementation of the Highlighter the way I wanted to.
What I want to do
User should activate the highlighter.
When the user selects text on the specified area of the articles page, Popover should come up and the user be able select color.
If highlighted text mouseovered, user should see Popover to change the color remove the color.
I found some similar tools;
Link Closest one however it's not getting the which area to highlight and popover modification is not easy.
Link
Link Can't
manipulate the selected text.
I also tried similar JavaScript example however i got error on this methods.link
Currently, I'm trying to write my own component if I can finish it, I will share the source code.
This is the component I wrote, after the text selection done how can i wrap the selected text area with span and can track multiple highlighted texts to remove without breaking the React. I haven't implemented popover yet.
I call this component on article page. Ref comes from the article div.
//articleRef is the id of article area where i want to Highlighter to work.
const Highlighter = ({articleRef}) => {
const { isActive } = useSelector((state) => state.highlighter)
const [selectedText, setSelection] = useState("")
const [selectedNode, setNodeSelection] = useState("")
const [selectedNodes, setNodesSelection] = useState()
useEffect(() => {
document.onselectionchange = function() {
console.log(isActive)
console.log(articleRef.current.id)
// check if the selection done on the article area and check highlighter tool is active
if(articleRef.current.id === 'article-area' && isActive === true ){
console.log("Highlighter is active")
if(document.getSelection() !== (undefined || null ) ){
setNodeSelection(document.getSelection())
}
for(let i = 0; i < selectedNode.rangeCount; i++) {
if( selectedNode.getRangeAt(i) !== (undefined || null )){
console.log(selectedNode.getRangeAt(i))
setSelection(selectedNode.getRangeAt(i).cloneContents())
}
};
console.log(selectedNode)
console.log(selectedText)
}
}
}, [selectedText, selectedNode, isActive, articleRef])
return null;
}

You can use the getSelection API to get the highlighted text. You can make it so that when the user clicks, you get the mouse's position (1), create a element (2) there (which is the tooltip/popup in this case) and use the getSelection API to get the selected text. I recommend using some react hook instead of getSelection as its easier.
(1) - The mouse's position is reported on the event object received by a handler in onmousemove event
(2) - You could also have a hidden element which will be moved to the cursor's position using CSS and make it visible

How can I get my drop down to select a value after re-loading it via javascript

I have an application that allows users to edit the reason and next action for a selected receiving discrepancy via 2 drops downs. One of the drop downs is simply hard coded directly into the HTML the 2nd one is being loaded via a quick JavaScript based on what value is in 1st drop down.
The first drop down has 14 options for reasons, each of which has 6-12 options for action steps. If user changes first drop down reason selection, it has to go back to SQL db and retrieve the appropriate list of action step options to use for 2nd drop down.
All of that works.
The problem I'm having is when the user first selects a discrepancy to edit. At that time it loads the view and based on the value stored on SQL DB it sets the value of the 1st drop down, and then runs java to first empty, then append new list of options to 2nd drop down.
What I can NOT get to work is having it set the value of the 2nd drop down, after that java is ran to create list of options, once again trying to set it based on the value stored on SQL DB for that discrepancy.
If I hard code the 2nd list of options the same as first list, and don't have it use java to re-load it until the first drop down is changed, then I can set the value the same way I do the first one. The problem there is then the 2nd drop down would have about 30-40 options listed, until you change first drop down - only 6-12 of which would be accurate for that specific reason selected.
The way I originally set the 2 drop down values, when both lists were hard coded (still works on first drop down):
<script>
// script to set drop down values to those stored on DB after document finished loading
document.getElementById("ReasonDD").value = "#Model.DiscReason";
document.getElementById("NextActionDD").value = "#Model.NextAction";
</script>
Script used to change 2nd drop down if first one is changed (again works fine):
$(function () {
$("#ReasonDD").change(function () {
var option = $(this).val();
$("#NextActionDD").empty();
var url = "GetActionValues?selectedOption=" + option;
$.post(url, function (actValues) {
$.each(actValues, function (i, actValue) {
$("#NextActionDD").append($('<option></option>').val(actValue).html(actValue));
});
});
});
});
This script is one being ran when discrepancy is first selected, it is correctly loads 2nd drop down but I've tried all 3 shown ways both together and individually to set the value but none have worked so far. The console.log shown has a valid choice equal to one of the values loaded into 2nd drop down:
$(function () {
var reasonLoad = "#Model.DiscReason";
if (reasonLoad > "") {
var option = reasonLoad;
$("#NextActionDD").empty();
var url = "GetActionValues?selectedOption=" + option;
$.post(url, function (actValues) {
$.each(actValues, function (i, actValue) {
$("#NextActionDD").append($('<option></option>').val(actValue).html(actValue));
});
});
console.log("#Model.NextAction");
$("#NextActionDD").val = "#Model.NextAction";
$("#NextActionDD").value = "#Model.NextAction";
document.getElementById("NextActionDD").value = "#Model.NextAction";
}
});
I've now also tried Rajesh G's idea of:
$('#NextActionDD option[#Model.NextAction]').attr('selected','selected');
I added it directly after my console.log("#Model.NextAction") and instead of and commented out the other 3. Ran 2 test with both and 2 with it instead of console.log line, total of 4 tests.
On 2 tests with console.log on the console showed the "#Model.NextAction" values to be "Other" and "Wait for Vendor Response" but then gave the same error message all 4 times (both times with console.log and both times with it replaced) of:
Error: Syntax error, unrecognized expression: #NextActionDD option[Close Discrepency]
Although Close Discrepancy isn't the #Model.NextAction value, but was the last option appended to the list of options for the #NextActionDD dropdown

Located element in a dropdown list but can not click on it

There is a dropdown list I want to click, it has four options when expanded. With my code, I can click and expand this dropdown list, but unable to click on the option (value = '100').
This is the HTML code for the elements I want to click before the dropdown list is expanded:
This is the HTML code for the elements I want to click after the dropdown list is expanded:
Below is my code:
//#FunctionName : Display100ResultsPerPage
//#Description : A function that chooses to display 100 results per page instead of 10
//#Parameters : PageObj: page that displays items
//#Returns : None
//#Version : v1.0
function Display100ResultsPerPage ( PageObj )
{
var localPageObj = PageObj;
var display100ItemsPerPageOptionCssSelector = "div[class='per-page-section'] select option[value='100']";
var displayNItemsPerPageDropdownListCssSelector = "div[class='per-page-section'] select";
localPageObj.QuerySelector(displayNItemsPerPageDropdownListCssSelector).Click();
aqUtils.Delay(500);
localPageObj.QuerySelector(display100ItemsPerPageOptionCssSelector).Click();
}
My code manages to:
Clicks and expands the dropdown list, but unable to click on the (100) option.
If I add an additional line in my code:
Log.Message(localPageObj.QuerySelector(display100ItemsPerPageOptionCssSelector).getAttribute('value'));
I got a logging message saying "100", which means my code can successfully locate this (100) option but why can not I click on it?
Many thanks
I have tried the following approach:
localPageObj.contentDocument.Script.jQuery("div[class='per-page-section'] select").find("option").css("z-index","999", "position", "relative");
option elements have changed into:
By index, I tried to click on the last option (value = '100'), but still not working.

Inspect the element by right clicking on it, if the inspector takes you to a different element I think you need to give dropdown list a "z-index" and remember that z-index works only when you specify position to relative or absolute. that should solve the problem, I believe.

How to make my D3 lines Split?

I have recently created a node map which has multiple nodes with line/arrows going between each node. I have recreated my code here: https://jsfiddle.net/GarrettUK/51j2rx1t/. I was wondering if anyone could show me how I could go about creating an on-click function on the lines so that when a line is clicked... 2 more lines are shown. So when its clicked we would have the line we just clicked in the middle and the 2 new lines either side.
I've already started creating the on-click function as seen in the example. I had a theory that you would create the 2 extra lines that connect to each node but have them hidden. Then when you click on the line. The function switches these lines from hidden to show.
My on-click function looks like this in the example:
.on("click", function(){
// Determine if current line is visible
var active = redLine.active ? false : true ,
newOpacity = active ? 0 : 1;
// Hide or show the elements
d3.select("#redLine").style("opacity", newOpacity);
// Update whether or not the elements are active
redLine.active = active;
});

Dynamically add option with jquery and update html source

I have two listbox, A & B:
when I double click on an item of A , the item will be added in List B. And i have done this. List B visually show the value, but when I go to the view source of the page, I dont see new <option>.
This is my List A options.
This is my List B options (before and after addition and it remains same whatever items added. this is my problem.):
It should have one <option>. like
<option value="VSNR">VSNR</option>
what is my code is :
$('#lstXLSCol').on('dblclick', function () {
var item = $('#lstXLSCol').find(":selected").text();
var newOption = { item: item };
$('option:selected', this).remove();
$.each(newOption, function (val, text) {
if (text != "")
$('#lstXLSSelectedCol').append(new Option(text, val));
});
});
EDIT 1 :
I have found it pressing F12 in IE. but the values are like below:
but, i wanted to insert the value same as text. What should be changed in my jquery code?

you can not see them. The source is just used to build the initial DOM that represents the document. Dynamically created elements are only inserted in the DOM.
But you can analyse such elements with a DOM viewer like Safari’s WebInspector or the Firefox extionsion Firebug. Firefox can also show source code that represents such dynamically created elements by selecting that element an choosing View Selection Source in the context menu.
See this

take out the space between params and :last
$('#lstXLSSelectedCol:last').html('<option value=\''+item+'\'>'+item+'</option><option>');

$('#lstXLSSelectedCol:last').live('change', function () {
var option_selected = $('option:selected', this).val();
$('#lstXLSSelectedCol:last').append($('<option>', {
value: option_selected
}).text(option_selected));
});

You won't see dynamically added elements in the source of your page.
Use your browser's console to inspect the DOM.
Normally it's enough to right click on the element and select "inspect" from the context menu, otherwise see this link for how to access your browser's console.