Develop Reference

How can enable/disable auto complete options for ACE editor?

I'd like to enable/disable autocomplete options of the ACE editor by pressing the keys 'ctrl+spacebar'.
Below mentioned is my code which I am using
highlightEditor(editor, codeEditorElmRef) {
const element = codeEditorElmRef;
const editorOptions: Partial<ace.Ace.EditorOptions> = {
highlightActiveLine: true,
showLineNumbers: true,
highlightSelectedWord: true,
fontSize: 12,
tabSize: 2
};
const codeEditor: ace.Ace.Editor = ace.edit(element, editorOptions);
codeEditor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
console.log("153 else statement")
codeEditor.setOptions({
enableBasicAutocompletion: false,
enableSnippets: false,
enableLiveAutocompletion: false
let currentObj = this;
// key bindings to ace editor
codeEditor.commands.addCommand({
name: 'turn-on/off',
bindKey: { win: "Ctrl-space", mac: "Cmd-space" },
exec: function (editor) {
currentObj.highlightEditor(editor, codeEditorElmRef);
}
});
editor.editorID = codeEditor.id;
codeEditor.resize(true);
this.aceCodeEditors.push(codeEditor);
}
Please help me in this.

How to fire Blur event to window with javascript

I set a text in a field with javascript, then I send change event to that field.
I would like to fire blur event on the window as the website require.
to set the text in the input field I use "document.getElementsByTagName('input')[23].value = 'London'"
to send change event to the input field I use
var o = document.getElementsByTagName('input')[23];
if (document.createEvent) {
var evt = document.createEvent('Events');
evt.initEvent('change', true, true);
o.dispatchEvent(evt); }
now I would like to send blur event but to window, I don t know how to do that.
this is the source code for the field :
<span class="next-input next-error next-large address-input">
<input height="100%" autocomplete="off" value="" data-spm-anchor-id="a2g0s.8850659.0.i9.2bdb6c37UwO8uq"></span>
this is the process that the website do :
change Event {isTrusted: true, type: "change", target: input, currentTarget: Window, eventPhase: 3, …}
blur
Event {isTrusted: true, type: "blur", target: Window, currentTarget: Window, eventPhase: 2, …}
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: Window {parent: Window, opener: null, top: Window, length: 1, frames: Window, …}
defaultPrevented: false
eventPhase: 0
isTrusted: true
path: [Window]
returnValue: true
srcElement: Window {parent: Window, opener: null, top: Window, length: 1, frames: Window, …}
target: Window {parent: Window, opener: null, top: Window, length: 1, frames: Window, …}
timeStamp: 30631177.38000001
type: "blur"
__proto__: Event

changing tab space in atom-typescript

Atom-typescript changes tab space from 2 to 4 when we format the code.
I changed formatting.js file and set it to 2 but still i'm facing the same issue..
How can i change the tab space in atom-typescript?
below is the content of formatting.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Maintainance:
* When a new option is added add it to:
* - the FormatCodeOptions interface
* - the defaultFormatCodeOptions function
* - the makeFormatCodeOptions function
*/
const os_1 = require("os");
function defaultFormatCodeOptions() {
return {
baseIndentSize: 2,
indentSize: 2,
tabSize: 2,
newLineCharacter: os_1.EOL,
convertTabsToSpaces: true,
indentStyle: "Smart",
insertSpaceAfterCommaDelimiter: true,
insertSpaceAfterSemicolonInForStatements: true,
insertSpaceBeforeAndAfterBinaryOperators: true,
insertSpaceAfterKeywordsInControlFlowStatements: true,
insertSpaceAfterFunctionKeywordForAnonymousFunctions: false,
insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis: false,
insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets: false,
insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces: false,
insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces: false,
placeOpenBraceOnNewLineForFunctions: false,
placeOpenBraceOnNewLineForControlBlocks: false,
};
}
exports.defaultFormatCodeOptions = defaultFormatCodeOptions;
//# sourceMappingURL=formatting.js.map

As suggested by #baruch, here is the reference: github.com/TypeStrong/atom-typescript/issues/1236
I'm posting what worked for me.
To change indentation to 2 for atom-typescript:
Go to your project directory.
Open or create tsconfig.json.
Add the following code
"formatCodeOptions": {
"baseIndentSize": 0,
"indentSize": 2,
"tabSize": 2,
"newLineCharacter": "\n",
"convertTabsToSpaces": true,
"indentStyle": "Smart",
"insertSpaceAfterCommaDelimiter": true,
"insertSpaceAfterSemicolonInForStatements": false,
"insertSpaceBeforeAndAfterBinaryOperators": true,
"insertSpaceAfterConstructor": false,
"insertSpaceAfterKeywordsInControlFlowStatements": true,
"insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
"insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
"insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
"insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
"insertSpaceBeforeFunctionParenthesis": false,
"placeOpenBraceOnNewLineForFunctions": false,
"placeOpenBraceOnNewLineForControlBlocks": false
}
This worked for me!

React emit KeyboardEvent from input

Is there a way to emit KeyboardEvent for input in React ?
I tried with:
this.input.dispatchEvent(new KeyboardEvent('keydown', {
key: 'Backspace',
bubbles: true,
cancelable: false
}));
this.input.dispatchEvent(new KeyboardEvent('keyup', {
key: 'Backspace',
bubbles: true,
cancelable: false
}));
this.input.dispatchEvent(new KeyboardEvent('keypress', {
key: 'Backspace',
bubbles: true,
cancelable: false
}));
But none of this triggers any handler (onKeyDown, onKeyPress, onKeyUp).
Handlers are called on manually key press only ...

dispatchEvent not working

As shown in the demo, dispatchEvent is not working as expected.
http://jsfiddle.net/DerekL/V8uEN/
Key part:
btn.dispatchEvent(
document.createEvent("MouseEvent")
.initMouseEvent("click", true, true, window, 0,
0, 0, 0, 0,
false, false, false, false,
0, null)
);
An alert should pop up after 1 second upon loaded, but it is not coming up and an error appears in the console:
Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event provided is null.
I don't know where's the problem at since I found a demo almost with the exact same code, and it is working but not mine.

btn.dispatchEvent(
document.createEvent("MouseEvent")
.initMouseEvent("click", true, true, window, 0,
0, 0, 0, 0,
false, false, false, false,
0, null)
);
Your problem is that initMouseEvent doesn't return anything. You can't combine all of that into one line. You need to break it up.
var mEvent = document.createEvent("MouseEvent");
mEvent.initMouseEvent("click", true, true, window, 0,
0, 0, 0, 0,
false, false, false, false,
0, null);
btn.dispatchEvent(mEvent);
This is how it's done in the demo you linked to.

This works:
var btn = document.querySelector("button");
btn.addEventListener("click", function () {
alert("Clicked.");
});
setTimeout(function () {
var mEvent = document.createEvent("MouseEvent");
mEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
btn.dispatchEvent(mEvent);
}, 1000);