Generating HTML from markdown only works with dangerouslySetInnerHTML in React App - javascript

I am trying to write a simple markdwon previewer.
the problem is when I insert the Generated HTML text inside a div in render method like this:
render() {
return (
<div>
{this.state.genHTML}
</div>
);
}
it does not rendered, and displays as it written with its tags just like as if a string.
But with dangerouslySetInnerHTML the Generated HTML is got rendered.
I want to know why this occurs?

In general, setting HTML from code is risky(because of cross-site scripting (XSS)), and this is why in React you need to use "dangerouslySetInnerHTML" to set it. This is just a rule that you need to follow if you want to use a React framework.

Related

Localizing html content in vue

So I have been using v-html tag to render the html in my vue pages.
But I encountered a string which was a proper html file and it contained text kind of like this:
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
....
<style>
</style>
</head>
<body style="....">
</body>
</html>
The problem is, I have the v-html on a div, but this code starts affecting the whole page and adds its styling to the whole page and not only to that specific div.
I tried adding "scope" to the style tags but it did not work. Maybe because there's also a style inline tag on body?
I need to find a way to make the html affect only on the div it is on, and not the whole page.
Your best bet would probably be to have a better control over the HTML added using v-html. I would suggest to parse it before and keep only the <body> tag. You could do it using a regex, but it would be easier using a dom parser lib. Example with DomParser:
const DomParser = require("dom-parser");
const parser = new DomParser();
export default {
// ...
computed: {
html() {
const rawHtml = "<html><body><div>test</div></body></html>"; // This data should come from your server
const dom = parser.parseFromString(rawHtml);
return dom.getElementsByTagName("body")[0].innerHTML;
}
}
}
Please note that it is an oversimplified solution as it does not handle the case where there is no <body> tag.
First, you should be very careful when using external HTML with v-html as it can make your site vulnerable to various sorts of attacks (see Vue docs).
Now if you trust the HTML source, other problem is how to embed it without affecting your own side. There is special element for this case, <iframe> - it is not without risk and you should definitely read a bit on how to make it safe but it should solve your problem because is "sandbox" external HMTL so it does not affect your site.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

Inserting Next.js Links into an html string

I have an html string that I retrieve from an API.
const htmlString = "<p>Hello World</p>";
I'm using react's dangerouslySetInnerHTML to display that content on my page.
Now before displaying it, I'd like to process it and put a link on "World". But not an <a> Tag. I need an actual Next.js <Link> tag. So a string replace probably won't do the job.
The result I want to achieve in jsx is:
const processed = <p>Hello <Link href="/my-route"><a>World</a></Link></p>
I've thought of using React.createElement but I'm not sure how to interpolate the content inside the string.
Any ideas how I could achieve this?
Hello<Link href="https://github.com">World</Link>
You dont need to specify another anchor tag inside a link. This should work fine.

Convert String to HTML on React , rich text editor

I am using React-Quill to add Rich text editor to my app.
have the next string store in my DB:
const text = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';
Now I want to "Render" the text const in a REACT component, but with the "Styuling" that HTML gives to it.
Hello World
Next Line
How can I do it? or other rich text editor to achieve that?
You can use dangerouslySetInnerHTML
Source: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
const text = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';
<div dangerouslySetInnerHTML={{__html:text}} />
react-quill supports HTML strings out of the box, so there's nothing to do except set the value property of the component with the string you receive from the database.
<ReactQuill value={text} ... />
Yeah react-quill is the way for working with React. I also have had a small demo to demonstrate how it works (we might have to put some css files to make it looking good): https://codesandbox.io/s/hardcore-hill-mdxji?file=/src/App.js

Angular 4, use html without Component backing

I'm using Angular 4, and as of now my application follows the following pattern with
something.component.ts
something.component.html
something.component.css
However, I would like to have a raw html ("legal.html") file and reference it in the "something.component.html" view but I'm not sure about where to even start or what question to ask.
"legal.html" will also have to be bind to the parent controller too (something.component.ts).
Any help on getting something like this to work:
legal.html
<div>Hello</div>
something.component.html
<div>
I'm something
<legal>
</div>
is greatly appreciated.
What you are looking for is component.
You can simple create a new component using following command
ng g component legal
Then in legat.component.html file write your html then in your other html file you can simply refer to your code using selector tag
This link may be helpful
Angular component

Configure js-beautify within a react component

I am using js-beautify (the html-beautify option) to format html that is being displayed on my page, it displays but it's collapsing all the html to 1 line which is obviously not ideal because it's a pain to read. It is basically trying to format HTML as Javascript because the actual html beautify is not being applied.
I'm using it in react as below inside a specific component file for that item does anyone know how to fix this?
import htmlBeautify from 'js-beautify'
const htmlString = htmlBeautify(renderToStaticMarkup(<Component />))
export default () =>
<Example staticMarkup={htmlString}>
<Component />
</Example>
Update:
<Example/> is another component that renders out a bunch of additional stuff like a markdown description.
I'm using https://github.com/alexlande/react-style-guide to create a styleguide and passing the static html markup to staticMarkup prop to display rather than just showing the react component which in this context isn't particulary useful.

Categories