Develop Reference

How can I make NextJS save my changes in VSCode?

I have tried changing all .js extensions to .jsx, enabled Prettier to format on save, set it as a default formatter, reloaded, restarted the editor, but saving is still not working. I would appreciate any ideas how to make this work.

Hit Control + Shift + P (On Mac you would want to hit the Command key instead of Control) and search for >Format Document With.... Check if that work.
If it works, then maybe your setting is overridden. Open your settings.json file (Use Control + ,, then on the top right corner you would see the open settings.json). Check the javascriptreact section.
Here is the example: this setting turns on formatOnSave for all the document type, but with .jsx extension, the formatOnSave is disabled, instead the files are formatted using eslint
{
// Other settings, don't mind it
// ...
"editor.formatOnSave": true,
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false
},
// Other settings, don't mind it
// ...
}
You may want to update the settings based on your need.

Insert text into an existing / external draftjs textfield

I'm working on an application which needs to insert text into a contenteditable="true" div (a Draftjs based textfield to be precise).
Now I am aware that Draft.js uses react and that it should be used that way, but in this case, the application already exists and this is a third party electron app that works with it.
I'm working on in-line notification replying on macOS, so I need that reply text to be pasted inside the draftJS field, however, when I do so using:
document.querySelector('div[contenteditable="true"]').focus();
document.execCommand('insertText', false, 'message');
It throws an error:
I was able to make it work using:
const event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'message', 0, locale);
but this API is deprecated and doesn't work properly if the message contains an emoji.
Is there any way to do this that doesn't cause an error?
I found out that the new API that is supposed to replace initTextEvent is just new Event() (see docs), but I can't find out if it supports textInput events.
To play around with it you can just go to https://draftjs.org/ and play with it in chrome dev tools.
I would really appreciate some help here as I don't know what to do to make it work anymore. Also, I know people are a fan of jquery, but I'd prefer a native js solution (although any solution is welcome).
edit:
Please note:
I'm not using react, the input field I want to modify (draftjs) is using react and I want to input text into it using native js.
edit 2:
For anyone else coming across this issue, I wanted to insert text into the Facebook messenger text field (which uses Draftjs).
I managed to find a working workaround.
It does use the deprecated API (event.initTextEvent), but it's the only way that I've found that works, even with emoji. Please do post an answer if you have a better solution to this.
It works like this:
async function sendReply(message: string): Promise<void> {
const inputField = document.querySelector('[contenteditable="true"]') as HTMLElement;
if (inputField) {
const previousMessage = inputField.textContent;
// Send message
inputField.focus();
await insertMessageText(message, inputField);
(await elementReady('._30yy._38lh._39bl')).click();
// Restore (possible) previous message
if (previousMessage) {
insertMessageText(previousMessage, inputField);
}
}
}
function insertMessageText(text: string, inputField: HTMLElement): void {
// Workaround: insert placeholder value to get execCommand working
if (!inputField.textContent) {
const event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, '_', 0, '');
inputField.dispatchEvent(event);
}
document.execCommand('selectAll', false, undefined);
document.execCommand('insertText', false, text);
}
This is typescript code, so you might want to change it up to use js.
It works by inserting a placeholder value inside the textField using event.initTextEvent, and then replacing that text with:
document.execCommand('selectAll', false, undefined);
document.execCommand('insertText', false, 'text');
tested in Chrome: Version 71.0.3578.98

Although the question was asked a long ago and #JoniVR found a workaround, this may help someone else.
I was also having a similar problem while working on an extension. I also tried the method document.execCommand('insertText', false, text). It worked on LinkedIn but not on Facebook. It was inserting text in the wrong node. Although document.execCommand API works in some places, it's obsolete now.
For Facebook and any other sites using drafjs editor, We need to dispatch a paste event using dataTransfer and clipBoardEvent APIs to make draftjs think that the text is pasted and process accordingly.
const dataTransfer = new DataTransfer();
function dispatchPaste(target, text) {
// this may be 'text/html' if it's required
dataTransfer.setData('text/plain', text);
target.dispatchEvent(
new ClipboardEvent('paste', {
clipboardData: dataTransfer,
// need these for the event to reach Draft paste handler
bubbles: true,
cancelable: true
})
);
// clear DataTransfer Data
dataTransfer.clearData();
}
Check this link in case more info needed.

Get Cognos Report Studio Locale variable with Javascript

I would like to know if there is one way of getting Cognos locale variable in a report studio javascript. I have next code for getting navigator language:
Control.prototype.getLang = function(){
if (navigator.languages != undefined)
return navigator.languages[0].substring(0, 2);
else
return navigator.language.substring(0, 2);
}
but I need to get the default language that user select in preferences.
Thanks

I was able to extract the locale set in the My Preferences for the "Product Language" setting. However, I was unable to find where Cognos stores the "Content Language" setting in JavaScript. Most of the time these will be the same.
Here's a screenshot of the settings page indicating which setting I was able to access.
If you want to find out the user's Product Language, use this JavaScript:
var report = cognos.Report.getReport('_THIS_');
var lang = report._iv.sProductLocale;
The content of the lang variable will be the locale (e.g. "en" for English).

Autocompletion for Ace Editor

OK, so here's the deal:
I'm using Ace Editor
The app the editor is integrated in, is written Objective-C/Cocoa
I need AutoCompletion (for a given set of keywords)
Now, here's the catch :
I know AutoCompletion is not yet natively supported
I know of some attempts by others (e.g. Codiad IDE, Gherkin, Alloy-UI), some making use of Jquery UI Autocomplete - but I still cannot figure out how this could be adapted to an existing Ace setup
I'm still not sure if I should go for a JS-oriented solution or just use Objective-C/Cocoa for that
Any help would be more than appreciated.

AutoCompletion can be achieved in ace editor..
Code :
var editor = ace.edit('editor');
editor.setTheme("ace/theme/eclipse");
editor.getSession().setMode("ace/mode/java");
editor.setShowInvisibles(true);
editor.setDisplayIndentGuides(true);
editor.getSession().setUseWrapMode(true);
var jsonUrl = "JSON/Components/proce.json";
//the url where the json file with the suggestions is present
var langTools = ace.require("ace/ext/language_tools");
editor.setOptions({enableBasicAutocompletion: true});
var rhymeCompleter = {
getCompletions: function(editor, session, pos, prefix, callback) {
if (prefix.length === 0) { callback(null, []); return }
$.getJSON(jsonUrl, function(wordList) {
callback(null, wordList.map(function(ea) {
return {name: ea.word, value: ea.word, meta: "optional text"}
}));
})
}
}
langTools.addCompleter(rhymeCompleter);
Json file format :
[ {"word":"hello"},
{"word":"good morning"},
{"word":"suggestions"},
{"word":"auto suggest"},
{"word":"try this"}]
Reference/Demo :
http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview

To add Live Auto Completion in Ace nowadays:
In your HTML include the ace/ext-language_tools.js.
The . call does not work well yet, so you may have to enter ctrl-space or alt-space for that, but standard syntax stuff such as writting function, will now show.
Then:
var editor = ace.edit("editor");
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});

The hard part of autocompletion is figuring out the keywords the rest is easy to do.
you need a popup, and listView to display completions, it might
be better to use Cocoa based popup.
some filtering function, simple startsWith check will do, but you can use nicer flex match
like sublime
trivial call to editor.session.replace to insert
selected completion
For 2-3 you should comment at https://github.com/ajaxorg/ace/issues/110 about your specific usecase since there is a work to get native support for AutoCompletion.

Tiny mce stopped working after upgrade (modified url)

I was using tiny mce (version 3.2.6) for quite a long time (w/o any problems), but wanted to upgrade it to newer version (3.4.2). The reason of upgrade was some problems with third-party plugin (spellchecker) - after trying with newer version those problems were fixed and on developers env. everything was working ok.
The problem occured on live env (after delivering new version of app to client), on client side, you can connect to app (using tiny mce) in two ways:
(1) type address (so normal way, everything works ok)
(2) using some kind of portal - client app, that modifies urls for some reasons I don't know - using this way Tiny mce stopped working after upgrade to (3.4.2). (I've double checked and this is related only with tiny mce version update, not with plugins or other issues).
The way that clients portal converts urls looks like this:
non-converted url:
http://server.address/blabla/js/jsFileName.js?v=123
converted url (grabbed from fiddler):
https://client.portal.com/http://server.address/blabla/js/jsFileName.js?v=123&psScriptReferrer=http://server.address/blabla/
As I told before, the 'old' version (3.2.6) was working ok (even with those magically converted urls), problem occured after update tiny mce (no changes to configuration or anything else). The error I'm getting is:
q is not a constructor
https://client.portal.com/http://server.address/blabla/js/tiny_mce/tiny_mce.js?v=123&psScriptReferrer=http://server.address/blabla/
Line 1
(function(d){var a=/^\s*|\s*$/g,e,c="B...{a.selection.onSetContent.add(f)})}});
I get this eror on all browsers (checked on: IE6/IE8/FF3.6). This also results in tiny mce not loaded (only 'plain-html' text input is displayed).
My assumption is that new version included some regexps, and magically converted link contains more than one 'http' string.
I've tried some changes for the following parameters (setting them to 0) - no luck:
convert_urls : 1,
relative_urls : 1,
remove_script_host : 1
it is also one more 'promissing' parameter:
document_base_url : tinymce.documentBaseURL
but since this app should be working using two ways described above (1) and (2), I cannot just hardcode the link there (also this sounds like a very fragile solution).
I cannot 100% sure say that this is a bug in tinymce, because using 'normal' address everything works ok. On the other hand, I cannot do anything with those url conversion.
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "content, contentFr",
theme : "advanced",
plugins : "spellchecker",
spellchecker_languages : "+English=en_CA,French=fr",
spellchecker_rpc_url : "jmyspell-spellchecker",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,fontselect,fontsizeselect,|,forecolor,backcolor,sub,sup",
theme_advanced_buttons2 : "link,unlink,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,justifyfull,|,code,|,spellchecker",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : 0,
theme_advanced_path: false,
content_css : "css/tinyMCE_custom.css",
oninit: function(){
tinyMCE.get('content').setContent('some text here');
tinyMCE.get('contentFr').setContent('some different text here');
}
});
</script>
Thanks for any help/hints.
Regards,
Peter

I would try upgrading to the current version of TinyMCE, which is 3.4.3.
In the changelog.txt file of that verion there is, among many other bugfixes,
"Fixed bug where exception was thrown in tinymce.util.URI when parsing a relative URI and no base_uri setting was provided."
I am not sure it will solve your problem, but it should be easier with an up-to-date version, because different issues are then less likely to interfere with each other.