I want IntelliJ to reformat code inside of a <style> tag in a React JavaScript(jsx) file. When I reformat code now it just reformats JavaScript parts.
I simply want the code to change from this:
to this automatically:
is it possible?
Works fine for me using CSS injection with comment (https://youtrack.jetbrains.com/issue/WEB-18307#u=1490109456558):
// language=CSS
return (
<div>
<style>{`
* {
color: red
}
`}</style>
</div>
);
Related
I am writing my first app in Vue3 and I use composition-api with script setup.
Using v-for, I create components that are inputs (CrosswordTile) that make up the crossword grid.
A problem appeared during the implementation of the field containing a clue to the password.
Since the text doesn't allow text to wrap, I wanted to dynamically change the tag to after a click.
Function in parent component where I handle logic after click that change tile type works fine, but I need to change tag of "target" to and set maxLength to a different value.
If it would help here is whole code on github: https://github.com/shadowas-py/lang-cross/tree/question-tile, inside CrosswordGrid.vue.
function handleTileTypeChange(target: HTMLInputElement) {
if (target && !target.classList.contains('question-field')) {
addStyle(target, ['question-field']);
iterateCrosswordTiles(getNextTile.value(target), removeStyle, ['selected-to-word-search', 'direction-marking-tile']);
} else if (target) {
removeStyle(target, ['question-field']);
if (getPrevTile.value(target)?.classList.contains('direction-marking-tile')) {
iterateCrosswordTiles(
target,
addStyle,
['selected-to-word-search', 'direction-marking-tile'],
);
}
}
TEMPLATE of ParentComponent
<div
class="csw-grid"
#input="handleKeyboardEvent($event as any)"
#mousedown.left.stop="handleClickEvent($event)"
#click.stop="">
<div v-for="row in 10" :key="row" class="csw-row" :id="`csw-row-${row}`">
<CrosswordTile
v-for="col in 8"
:key="`${col}-${row}`"
#click.right.prevent='handleTileTypeChange($event.target)'
/>
</div>
</div>
I tried to use v-if inside CrosswordTile, but it creates a new element, but I just need to modify the original one (to add/remove HTML classes from it basing on logic inside CrosswordGrid component).
How can I get access to the current component instance properties when using the composition API in script setup or how to replace the tag dynamically?
:is and is doesn't work at all.
In web css, we can set css for sub element. Example:
<div class="test">
<p>abc</p>
</div>
And we can set the <p> css by:
.test p {
font-size:20px;
}
Now in React Native, I have this:
<View style={myStyle.test}>
<Text>abc</Text>
</View>
How we can set the <Text> style by myStyle.test?
Actually you can't use like css children, you have to set a custom style for each element that you wanna use.
CSS in react native is just a subset of web css and it doesn't allow you to do what you do in webCss. All you have is inline css. So you have to style them separately. You can avoid repeating by defining a common style object and pass that instead of repeating.
You can check out this library as well:
https://github.com/vitalets/react-native-extended-stylesheet
According to docs
All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color
Now cascading is not supported in react-native, yo =u have to provide a style prop to each element for it to be styled.
Just adding a className to a tag doesn't help
<p className="ms-font-m">
sometext
</p>
doesn't change the font
https://developer.microsoft.com/en-us/fabric#/styles/typography
If you want to use the Fabric Core CSS classes directly, rather than with CSS-in-JS, you'll need to include the CSS on your page following the instructions for getting started with Fabric Core:
Add a reference to the stylesheet in the <head> of your page. Simplest way is to use the copy on Microsoft's CDN (grab the URL directly from the docs linked above to get the latest version):
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css">
Add the ms-Fabric class to a containing element, such as <body>, to set the font-family. Then you can use the other classes to set sizes and colors:
<body class="ms-Fabric">
<span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
</body>
Not exactly what' I was looking for but here is one way to do it:
https://github.com/OfficeDev/office-ui-fabric-react/blob/86337324a5fd8b522855eb8bdcbf012a868a26ba/packages/styling/README.md#using-fabric-core-classes
import {
ColorClassNames,
FontClassNames
} from '#uifabric/styling';
function renderHtml() {
return (
`<div class="${ [
ColorClassNames.themePrimary,
FontClassNamed.medium
].join(' ') }">Hello world!</div>`
);
}
my understanding per https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#styling-best-practices is that I need to use getTheme() and styles (not style) prop function for the new way of doing styling. So I'm still looking for a getTheme() solution
==============
here is the list of available fonts
https://github.com/OfficeDev/office-ui-fabric-react/blob/1b9405b3b64839975e16ee1fad04d7868d9e3b99/packages/styling/src/styles/fonts.ts
fonts visualized: https://developer.microsoft.com/en-us/fabric#/styles/typography
colors: https://developer.microsoft.com/en-us/fabric#/styles/colors
You can do it by adding the following code when loading theme:
loadTheme({
defaultFontStyle: { fontFamily: 'Comic Sans MS', fontWeight: 'bold' },
.......
This is available since version 7.21.0 of office-ui-fabric-react
These are the urls where you can find the release and report of bug:
https://github.com/microsoft/fluentui/issues/7416
https://github.com/microsoft/fluentui/releases/tag/office-ui-fabric-react_v7.21.0
https://github.com/microsoft/fluentui/pull/9981
Is it possible to use v-if on style block, like so?
<style lang="scss" v-if="pinkTheme">
.ac-textfield
{
background: hotpink;
}
</style>
I tried this and it's not working (the v-if directive is ignored). I know that I could do this:
<div class="ac-textfield" v-style="{ background: pinkTheme ? 'hotpink' : false }"></div>
However, this will quickly become difficult to maintain if I want to modulate more than one style using the value of pinkTheme. Right now, I'm using CSS selectors to achieve the desired effect:
<template>
<div class="ac-textfield" :class="{ pinkTheme }">
</div>
</template>
<style lang="scss">
.ac-textfield
{
//...
}
.ac-textfield.pink-theme
{
background: hotpink;
}
</style>
However, I don't like this solution very much (I want to achieve greater separation between my themes, and I want the browser to only have to load one theme at a time). Is there any way to make something like the first code block work?
That cannot work as scss must be compiled to css - and this is done at build-time. v-if, though, is executed/interpreted at run-time only.
What would kind of work, is to include the style block in the template part of your single file vue component, but note that you can only use CSS, not SCSS, in there. That has the obvious downside of getting rendered alongside each of the component instances.
Your approach of using conditional CSS classes actually is the correct approach, so you should definitely stick to that.
v-if is used for conditional html rendering and v-if accept the getter function that should return either true or false. You can't use v-if with style.
Im trying to build a front-end page to allow my users to build smarty templates with ckeditor wysiwyg editor.
Im using the insertHtml function to add a button with special attributes (needed to parse it into an smarty variable in the back-end):
// initialize ckeditor
$('textarea.editor').ckeditor({
contentsCss: '/css/test.css'
});
// get ckeditor instance
ckeditorInstance = $('textarea.editor').ckeditorGet();
// Use some elements (outside the textarea) to add buttons/tokens
// to wysiwyg textarea
$("a.tinymce.tinymce-insert-var").click(function(){
ckeditorInstance.insertHtml(
'<input type="button" readonly="readonly" var="{$user->name}" '
+ 'class="placeholder" value="User Name" />'
);
});
This works fine on Firefox, IE8 and opera, but with Chrome/Chromium/Safari the button is inserted between a <p> element.
Is there a way to avoid this, or a callback that i can use to remove the paragraph?
I had this problem as well. This is how I did it...
var editor = $('textarea[name=content]').ckeditorGet();
var element = CKEDITOR.dom.element.createFromHtml( '<p>I am a new paragraph</p>' );
editor.insertElement( element );
Looks like you're using jQuery also... why don't you force the inclusion of the p tag within CKEditor's .insertHtml function, then follow it up with jQuery's .unwrap to always remove the p tags?
in the main ckeditor config-file there is an option to disable automatic <p> inserts.
try to change the value of CKConfig.EnterMode and CKConfig.ShiftEnterMode for example to 'br'.
Felix