I am really struggling to find out how to set these colorization for syntax highlighting in Visual Studio Code and was hoping someone might know. As I have come to understand this is the "standard" for react.
i.e. green return statements, red jsx/html elements etc
This is a screenshot of my current text editor "font color theme" and the theme I am looking to change to.
The image as I said contains two sections,
The top section is how my VSCode looks right now
And the bottom section is how I want it to look.
I have looked for too many hours and I cannot figure it out.. Thanks in advance
You can customize your theme. First open the token inspector by executing the Developer: Inspect Editor Tokens and Scopes command from the command palette:
It looks something like this:
You can then use the textmate scopes at the bottom of the window to change their look in your JSON configuration:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"entity.name.function.ts",
],
"settings": {
"foreground": "#FF0000",
}
},
],
}
The above code would change the color of typescript functions to red.
Use the scope inspector in your react file to find the token names for the type of word you want to change the style of. For each token add a scope/settings pair to the config.
I'm using react-native-render-html to render html and the HTML Tag is like a defines subscript text.
Au IV<sup>e</sup>
In my app :
I'm trying to have style to avoid that but I think there is better way to solve the issue.
What to you thing
The default style for <sup> element looks like this:
{
textAlignVertical: 'top',
fontSize: 'smaller'
}
Unfortunately, there is a bug on React Native whereby textAlignVertical: 'top' doesn't work for nested Text elements on Android.
I've also submitted a feature request for 'sub' and 'sup' support in their Canny.
I suggest you:
Upvote the Canny feature request;
Upvote the bug report;
That would help giving more visibility to those issues. And if you or your team has any Android SDK experience, you could also submit a fix upstream. Check the bug report thread as a contributor seems engaged in resolving the issue.
I'm developing a single page application on React using 'create-react-app'. I'd like to use Facebook Pixel for retargeting and creating custom audiences on Facebook.
Example:
Whenever a user visits /pricing I want to add ReactPixel.track('viewPricing'). Whenever a user visits /checkout I want to add ReactPixel.track('viewCheckout').
Since it's a single page application all my events are firing at once, which, I guess, makes sense.
How do you work with custom page tracking and Facebook pixel for a single page application?
Here is what I ended up doing. First, do npm install react-facebook-pixel. Wherever you want to include FB tracking do the following:
import ReactPixel from 'react-facebook-pixel';
const options = {
autoConfig: true, // set pixel's autoConfig
debug: false, // enable logs
};
ReactPixel.init('Your-Pixel-Code', options);
This will fire a 'ViewPage'. Now, if you want to include a CustomEvent, just add an onClick to the links leading into your page:
<Button onClick={() => { ReactPixel.track('clickContact') }} variant="contained" color="primary" href="/contact/" >
That was the easiest way I could find.
Is it possible to disable the mobile UI feature in tinyMCE, and just show the regular editor?
I'm asking because it only shows a blank screen for me, in mobile (when I click on the "book" icon in the editor box.
I've searched for solutions to the blank page and I only found vague references to "a parent element having overflow set to anything but visible" which didn't help me much.
EDIT November 2019: TinyMCE 5.1 switches to the Silver theme by default on mobile devices. This workaround is no longer necessary.
Our documentation doesn't explicitly explain how to do this, and it isn't something we test so you may run into unexpected issues, but it is certainly possible.
Our mobile UI is implemented as a theme, even in TinyMCE 5, similar to how modern was our desktop theme for version 4 and silver is for version 5. By default when the editor detects it is on a mobile device the theme is set to mobile - we removed this from the v5 docs, but our v4 docs describe the defaults:
tinymce.init({
selector: 'textarea',
mobile: {
theme: 'mobile'
}
});
By extension of this concept, where the mobile block overrides the config, you can specify the mobile theme to be modern in TinyMCE 4, silver in TinyMCE 5 and the desktop interface will show:
tinymce.init({
selector: 'textarea',
mobile: {
theme: 'silver'
}
});
I have created a fiddle to demonstrate this which loads the desktop theme on my phone.
http://fiddle.tinymce.com/C9gaab/1
if you want to enable plugins (image, media, fullscreen etc.):
in config:
...
mobile: {
theme: 'silver'
},
...
in tinymce.min.js:
find
"lists","autolink","autosave"
replace to
"advlist", "autolink", "lists", "link", "image", "anchor", "searchreplace", "code", "fullscreen", "media", "table", "paste", "codesample"
or any plugins you need
I know, that source files should not be edited, but only this method helped me.
config the mobile like this:
mobile: {
theme: "silver",
menubar: false,
height: 300,
max_height: 500,
max_width: 500,
min_height: 400,
statusbar: false,
toolbar: false,
plugins: ["autosave", "lists", "autolink"]
}
Well, I just lost a night of sleep over this, so here's the dirty fix while #spyder can figure it out:
First, download the dev (unminified) version of tinyMCE here
Then, edit the file tinymce.js - Modify the function isOnMobile (should be around line 11930) to always return false, like this:
var isOnMobile = function (isTouchDevice, sectionResult) {
var isInline = sectionResult.settings().inline;
return false; //isTouchDevice && !isInline;
};
Finally, Save your changes and minify again (the unminified file is 1mb!). There are several online tools that can do this for you in case you don't these tools in place already.
Note that this only works if you are self-hosting. It ain't pretty, but until there is an official fix, it WORKS.
I'm answering this from the viewpoint of TinyMCE 6 but I think the same logic would work with TinyMCE 5 if you still want to use it for some reason.
The automatic switch to mobile features is poorly documented, but the logic seems to be that TinyMCE init object can include the property mobile to set defaults for the mobile clients. However, if you don't define this property, the TinyMCE internal default will be used instead of your generic config in the init object! This obviously results mobile clients getting totally different UI from the other clients.
As a result, you should always define the mobile property of your TinyMCE init object and use settings you've tested to work with the tools you use. For example, you could use configuration like
mobile: { // undo default mobile settings applied by TinyMCE core – many of these are not officially supported but seem to work pretty well with modern Android and iOS
resize: true,
object_resizing: "img",
menubar: true,
toolbar_mode: "floating",
toolbar_sticky: true,
table_grid: true,
}
or something similar to that. To see the currently available documentation, see https://www.tiny.cloud/docs/tinymce/6/tinymce-for-mobile/#configuring-mobile
Salesforce interaction/console methods not executed after redirecting to other URL in CTI console softphone. I have mapped the CTI Adapter URL(for ex: http://domain1:port1/xyz/test.jsp) in softphone layouts of the call center, the interaction/console methods get executed on that particular page.
Method Like :
sforce.interaction.runApex(...);
On click event I redirect to some other URL (for ex: http://domain1:port2/abc/test1.jsp) on this page interaction/console methods not executed.
Methods Like :
sforce.console.setCustomConsoleComponentPopoutable(...);
sforce.interaction.runApex(...);
On console - "Service Cloud Toolkit API cannot be used with your browser" appears after page redirects.
Please help with the scenario
This error is caused by the validation of sfdcOriginIframe and nounce properties when sending out the window message to the top window.
Actually this two properties are populated from the window.location.search field once the softphone loaded.this search field goes like :
?sfdcIFrameOrigin=https%3A%2F%2Fap5.salesforce.com&nonce=3c1d1c360732e6754323247e711324b86d027c3c2809abb163754069d02365c5&isAdapterUrl=true&
I think they come from the src of the iframe tag
<iframe
id="SoftphoneIframe"
name="SoftphoneIframe"
allow="camera *; geolocation *; microphone *"
src="/loadSoftphone.html?sfdcIFrameOrigin=https%3A%2F%2Fap5.salesforce.com&nonce=3c1d1c360732e6754323247e711324b86d027c3c2809abb163754069d02365c5&isAdapterUrl=true"
style="display: block;"
width="100%"
height="650"
frameborder="0"
></iframe>
if you redirect the location of your softphone frame, the search field is gone, and you can't use any methodes in interaction.js anymore.
so maybe there are two approaches to resolve this problem:
retain your search field in a hidden field and bring it ot your next page as a searchQuery string;
refresh your top window just before you redirect your softphone
sforce.interaction.refreshPage();
Finally I used the second solution to fix my problem.
Code sample