<i class="icon solr-icon icon-ic-city"></i>"Solapur"
So I want to get the text with the help of i tag, but the problem is
text "Pune" is out side the i tag. I can make use of li tag but I do not to do that. Can anyone tell me how to get text if the text is
outside the tag?
I dont believe that there is a specific option to do this is selenium and you would have to select the enclosing element and then retrieve the innerHTML to get the source including the text you are interesed and then parse the source by most likely just removing the tag.
element.get_attribute('innerHTML')
I'm using react-quill as a rich-text editor. I need to insert an already existing HTML code so it will be displayed as a text inside of the editor. Is there any ability to do something like this?
let htmlSample = "<p>It's a test html <b>to be inserted!</b></p>
<ReactQuill htmlValue="{htmlSample}" />
And the results would look like:
Okay, I got this. If anyone else wonders how to insert plain html - simply put your custom editor area like this:
<ReactQuill value={this.state.value}>
<div class="your-custom-container">
<p>your custom html</p>
</div>
</ReactQuill>
I've the following snippet in my index.js
class App extends Component {
render() {
return ( <div style = { styles.app } >
Welcome to React!
</div>
)
}
}
The code works, but every time I save (ctrl+s) visual studio format the jsx like that:
class App extends Component {
render() {
return ( < div style = { styles.app } >
Welcome to React!
<
/div>
)
}
}
How can I solve this? thanks
In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar.
I'm publishing it here for future reference since I didn't find any documentation on this topic.
In addition to the above. If you click 'Configure File Association for .js' you can set all .js files to Javascript React
change vscode preferences settings > user settings below:
"files.associations": {
"*.js":"javascriptreact"
}
You can prevent VSC from incorrectly formatting your JSX by adding an association in your settings.json
Code > Preferences > Settings
In the settings window search for associations, click edit in settings.json and then add:
"files.associations": {
"*.js": "javascriptreact"
}
Alternatively, saving the file with a .jsx extension resolves this in vscode.
I had the same challenge and I am hoping to discover a better way of handling this issue in vscode.
I noticed your suggested work-around has to be done each time you open the react file with an extension of .js
Open the Visual Studio Code Settings. Refer the image below to see how to navigate to the settings.
Once the settings tab is open. If you want to make the settings changes for all the projects then select the User sub tab, if only for current project then select the Workspace sub tab.
type "file associations" in the search text box and press Enter.
Click on add item.
set Item : *.js
set Value : javascriptreact
Above changes will start associating all *js files in the project as javascript React files.
Next open any .js file in your project and right click and select Format Document. If you have multiple formatters then associate your favorite formatter. I have used Prettier to handle my formatting.
Install Prettier (if not installed by default) and try to add this to your user or workplace settings:
"prettier.jsxBracketSameLine": true
Do not put linebreak between return and the returned JSX expression.
Trigger autoformat (Alt+Shift+F) and check if works.
I struggled with this but finally found a solution. This is my settings.json
{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"workbench.startupEditor": "welcomePage",
"window.zoomLevel": 1,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html"
},
"editor.formatOnSave": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.minimap.enabled": false,
"workbench.iconTheme": "vscode-icons",
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
],
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true
}
I added
"beautify.ignore": ["**/*.js","**/*.jsx"]
Make sure you dont have multiple javascript formatters enabled in your current workspace. (You have to disable the rest of them for your current workspace).
react-beautify mostly does the magic but fails if you have some other JS formatter/beautifier already installed.
In my case, I had react-beautify and JS-CSS-HTML Formatter extension installed. I had to disable the JS-CSS-HTML Formatter for my current workspace.
Here is what worked for me-
I clicked on the Language mode (Javascript React) at the bottom of the screen
Then chose the Configure React Javascript Language based setting option
Then changed the javascript react default formatter to prettier as shown in the pic.
That pretty much did it for me after I saved the React file.
I just added all the combinations mentioned above.
added this
"files.associations": {
"*.js": "javascriptreact"
}
added this also
"beautify.ignore": ["**/*.js","**/*.jsx"]
Deleted additional js formatting
installed prettier
turn ON prettier and formatting
You can install an extension like react-beautify that helps you format your jsx code.
It is found here
This extension wraps prettydiff/esformatter to format your javascript, JSX, typescript, TSX file.
I had to disable the JS-CSS-HTML Formatter extension in VSC. only solution to this problem
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
include :
JavaScript
TypeScript
Flow
JSX
JSON
CSS
SCSS
Less
HTML
Vue
Angular
GraphQL
Markdown
YAML
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
I had similar problem, then I found out it was caused by 'beautify' extension. After I uninstalled the extension, everything is working fine.
After reading many great suggestions and workarounds, I discovered that I could simply place my mouse arrow down over the bright blue horizontal bar at the bottom of VSCode editor window - right click - which opens a popup list window - and deselected = "Editor Indentation".
You can double click JavaScript in the Status Bar at the bottom of VSCode, and then change the format from JavaScript to React (Choose React in the Select language mode to associate with '.jsx')
add this in your .js code,
/* prettier-ignore */
Is there an easy way to keep empty <p> visible in wysiwyg when using TextAngular?
If the string is <h1>test</h1><p></p><p></p><h2>subtitle</h2>, when the page render and the content is passed to TextAngular, the HTML source code has all tags, but the wysiwyg doesn't show them.
Did I miss something?
Thanks
Edit: here is a fiddle to demonstrate
It's not an elegant solution, but you can parse your html string and add to your empty tags.
this.html = "<h1>Test</h1><p> </p><p> </p><h2>Test</h2>";
I am trying to use Angular Bootstrap Confirm by Matt.
In his demo (click here), it is mentioned that html can be used in the message. His code:
Are you really <b>sure</b> you want to do this?
I changed that to
Are you really <b>sure</b><br> you want to do this?
and it still worked. But if I try to add any complex element like input or button, it does not work.
Enter <b>Yes</b><br> <input type='text'> <br>and click 'Yes'
Is there a way to add input or textarea to the message?
You would have to fork their code, based on the source, it is using a class, so you could not do this through the interface.
https://github.com/mattlewis92/angular-bootstrap-confirm/blob/master/src/angular-bootstrap-confirm.html