Annotating or fetching selected text content using React - reactjs

I'm trying to build a chrome extension using React and I could not figure out how I can get selected web content into my extension app. I am going to use it for creating annotations on the web content.
To give an example, User visits a web page, selects a text or whole paragraph and the extension will be able to get the content of selected text. I am going to highlight the text and show the user comment then. (e.g. medium.com's annotation model)
I've tried AnnotatorJS but I cannot annotate the content outside of my application context.
What can be the accurate way for implementing annotations in React?

Related

Make annotation on graph created by echart

I'm using reactJs to develop the frontend, is it possible to make annotations on graphs created by echart? For example, I can left-click anywhere on a line chart to make a quick note of that point or I can a range on a graph and make a note of that range.
If I understand you correctly, you want to build an interface that allows users to left-click somewhere on the chart and add their own annotations (rather simply coding in annotations as a developer, and having them be static)?
In broad strokes, here's how I would build this:
Register click event handlers on the chart, so you can detect where the user clicked.
Build custom UI in react that can overlay on the chart, provide text input and "add"/"cancel" buttons, using the information from the click event to figure out where to draw it and to what element the annotation should be attached to.
When the user clicks "add", make a call to the showTip API (see docs) to a tooltip in the right location (from step 1) with the text the user provided.
(It looks like there is a github issue where folks are asking for this feature to be built-in - and some discussion of how to build it yourself, and a simple example that illustrates how to do step 3 above which you might find useful)

Sending HTML content in API vulnerability risk

I have a react application that builds an Editor component dynamically.
One of the fields in this editor is a content editable div that gets from API -json response- a content to be displayed in that div with some of the text highlighted or styled with any other html tags inside.
The user can change this content and I keep sending it back to API and getting it back from API to be displayed accordingly.
But I'm concerned about security, is this a risky vulnerability? How should I act in such a case?
Yes, you have to concern about security. I recommend to use sanitize-html.

No transition on first form

I am using a CN1 project created by the CN1 plugin in IntelliJ. I have built a form by hand (not using the GUI builder). I would like the first form shown to be my form. Unfortunately, it seems to bootstrap code that loads the theme expects me to use a form created in the GUI builder. In fact, when my application loads, it briefly shows the default Hello World screen, and then transitions to my form by scrolling the form from right to left. How do I make my hand-coded form the first thing on the screen appear without any transition?
It would seem that I could just override StateMachine.getFirstFormName(), but my form is not known to the underlying code.
There are many ways to do this... Try creating a new project with Get Started template selected.
Open MyApplication.java or any other name you changed MyApplication to. Replace the hi form code and use this as your code foundation.

event handling for a word instance inside c#

I have a scenario in which I am currently displaying a word document inside a web browser control and we need a provision that while editing the document if user presses a key shortcut it will bring the focus out of that word document to some button outside the web browser control,but somehow I am not able to capture the event generated through word instance inside web browser control while editing the document.
Is there any way to achieve this?
Technology:C#4.0,MVVM architect,WPF
Note: We are creating this document by using method exposed by interop on a macro enabled template and then displaying it inside a web browser control

How to get codenameone web browser component input controls references?

Does anybody know how can we get the form controls references in a web page that loaded in the CodeNameOne Web browser component?
I want to load a web page in CodeNameOne web browser component, then read or change the value of form input controls (For example TextBoxes) in the java code after pressing the submit button.
Regards,
Kasra
Its not an ideal way to work and would reduce the portability of your application. You can look at the JSObject class that represents a bridge between the JavaScript and Java sides.

Resources