I am trying to make a VS code extension.
In this extension I am interested in printing VS Code IntelliSense suggestions as an array to the debug console when the user types or ask for suggestions with ctrl+space.
Is this possible and if so where should I look?
This help me to a solution: Hook IntelliSense
let disposable2 = vscode.workspace.onDidChangeTextDocument((event) => {
const editor = vscode.window.activeTextEditor;
// the Position object gives you the line and character where the cursor is
const position = editor?.selection.active;
// Get document Uri
const docUri = editor?.document.uri;
let completionList = vscode.commands.executeCommand(
'vscode.executeCompletionItemProvider',
docUri,
position
);
completionList.then((value: any) => {
for (let i of value.items) {
console.log(i)
}
});
});
Related
I started to create an extension of VS Code and am facing a problem.
As you see in the title, I want to insert the certain text in the bottom of line. To realize this, I tried this:
let moveBy = {to: 'wrappedLineEnd', by: 'line'};
vscode.commands.executeCommand('cursorMove', moveBy);
editor.edit(editBuilder =>{
if (editor !== undefined){
editBuilder.insert(editor.selection.active, "test");
}
});
However, it does not work well; it resulted in this:
//Before: this is the text.
//cursor is between 'h' and 'i'(from 'this')
//After: thtestis is the text
//Omg 'test' is inserted here
It seems to me that the cursor did not move and it ended up inserting the string there.
Is there any solution to this?
While you can await the cursorMove command, I think it is better practice to simply compute the range at the end of the line yourself. You do not have to await moving a cursor to where you want to make an edit.
You just have to know where you want to make an edit (in case you didn't know you can make an edit anywhere in the document, there doesn't need to be a cursor there already).
const editor = vscode.window.activeTextEditor;
// let moveBy = {to: 'wrappedLineEnd', by: 'line'};
// await vscode.commands.executeCommand('cursorMove', moveBy);
// get range at end of line
const editRange = editor.document.lineAt(editor.selection.end.line).range.end;
editor.edit(editBuilder =>{
if (editor !== undefined){
// editBuilder.insert(editor.selection.active, "test");
editBuilder.insert(editRange, "test");
}
});
I want to get the whole link address, but with the hoverProvider, I can only get the part of hoverd range.
here is the activate code and the result
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
const disposal = vscode.languages.registerHoverProvider("javascript", {
provideHover(document, position, token) {
const range = document.getWordRangeAtPosition(position);
const word = document.getText(range);
return new vscode.Hover(
word
);
},
});
context.subscriptions.push(disposal);
}
so how to get the whole link 'https://www.youtube.com'?
According to the documentation, the getWordRangeAtPosition method allows you to define a custom word definition with a regular expression. A good regular expression to match a URL can be found in this answer.
Thus, in your case, you'd simply have to add a regular expression to the getWordRangeAtPosition method:
provideHover(document, position, token) {
const URLregex = /(https?:\/\/)*[-a-zA-Z0-9#:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()#:%_\+.~#?&//=]*)?/gi;
const range = document.getWordRangeAtPosition(position, URLregex);
const word = document.getText(range);
return new vscode.Hover(word);
}
I was creating a pdf generator following guidelines from this website "https://www.wix.com/velo/forum/coding-with-velo/pdf-generator-api-npm-demo"
code screenshot
I copy every code from the guideline, but when I click the submit button, error of [data:application/pdf;base64,undefined] occur, and no record is saved at the pdf generator.
Check the link of the website here: website link
I believe it should be something wrong with the code below
//code start
import { pdf } from 'backend/pdf.jsw';
$w.onReady(function () {
var base64;
$w('#btnSubmit').onClick(() => {
let name = $w('#inName').value;
let detail = $w('#inDetail').value;
pdf(name, detail).then( e => {
base64 = e;
base64 = 'data:application/pdf;base64,' + base64
let msg = {
"conv": true,
"dataUrl": base64
}
$w('#html1').postMessage(msg);
});
});
});
// Code end
I search through the internet and some mentioned open data URl directly function is not supported since 2020 (see website). I am new in programme or codes, it would be greatful if someone could provide me the adjusted code.
Sorry for the trouble
I have a function that runs every time your location changes and I'm trying to set a value in my array when a certain if statement is found true. All I seem to be doing is removing everything from my variable except the value that I am changing. Bad explanation so here is some code...
The data starts like this:
this.state = { selectedItem: [] }
And will change to something like this during normal app use:
selectedItem: [{address: 'Somewhere', latitude: -37.826835, longitude: 144.992030, found: false }]
Here is where I am trying to change the data (This will always run after some data is added):
const newSelectedItem = () => {
let copyB = {...this.state.selectedItem};
copyB.found = true;
return copyB;
};
this.setState({selectedItem: newSelectedItem});
When I try to run:
{this.state.selectedItem.address}
I see the initial value which would be the address "Somewhere" but when my function runs based on location change it disappears. What have I actually done to my data in my above function?
Have I just made it selectedItem: [{found:true}] or something dumb like that?
You were doing fine except for one single thing , in this function :
const newSelectedItem = () => {
let copyB = {...this.state.selectedItem};
copyB.found = true;
return copyB;
};
this.setState({selectedItem: newSelectedItem});
here copyB is now an object , but yours selected Item was an array. So the problem is now selectedItem is now an object when you do setState with newSelctedItem.
SO copyB.found = true; wouldnt evaluate anything rather, try copyB[0].found = true; so there the value will be accessed and return true accordingly.
And when you try to access the state , replace {this.state.selectedItem.address}
with {this.state.selectedItem[0].address} ,
Hope i helps. feel free to ask any doubts.
You can play around with this pen codepen
Well, this is pretty weird since you still get the initial value. There are some problems in your code:
You want to store your variables in a array: It's fine, but the problem comes from the way you retrieve and set your value. Since selectedItem, your {this.state.selectedItem.address} because this is an object destructuring. To do that, you have to destruct your array first, e.g: item = selectedItem[0] or using map, etc... After that, you can try: item.address.
Another problem is from your newSelectedItem. Since let copyB = {...this.state.selectedItem}; will destruct your selectedItem, take all its properties and set to newSelectedItem, it will make your selectedItem become an object, not an array anymore.
If your selectedItem stores only 1 object, so don't use array. This selectedItem will become:
selectedItem: {
address: 'Somewhere',
latitude: -37.826835,
longitude: 144.992030,
found: false
}
It looks like a JSON object, hence you can do: selectedItem.address
In case you still don't get it, place a little debug or a console.log("selectedItem", this.state.selectedItem) to see what happend, and you will find out.
I think in the end I was mapping a function to the data and not the data itself. This was my eventual solution...
const newMyWaypoinys = this.state.myWaypoints.map(a => {
let copyA = {...a};
if (copyA.address === wp.address) {
if (copyA.address === this.state.selectedItem.address) {
this.setState(prevState => ({
selectedItem: {
...prevState.selectedItem,
found: true
}
}))
}
copyA.found = true;
}
return copyA;
});
this.setState({
myWaypoints: newMyWaypoinys,
});
I have succesfully rendered my own component as the cellEditor and would like and on-leave I would like it to try to validate the value and prevent the closing if it fails.
If I look at this then https://www.ag-grid.com/javascript-grid-cell-editing/#editing-api there's cancelable callback functions for editing. But in this callback function is there a way to access the current instantiated component? I would think that would be the easiest way to handle this.
I'm using vee-validate so the validation function is async, just to keep in mind.
Use Full row editing.
Create a global variable like
var problemRow = -1;
Then Subscribe to this events:
onRowEditingStarted: function (event) {
if (problemRow!=-1 && event.rowIndex!=problemRow) {
gridOptions.api.stopEditing();
gridOptions.api.startEditingCell({
rowIndex: problemRow,
colKey: 'the column you want to focus',
});
}
},
onRowEditingStopped: function (event) {
if (problemRow==-1) {
if (event.data.firstName != "your validation") {
problemRow = event.rowIndex
gridOptions.api.startEditingCell({
rowIndex: problemRow,
colKey: 'the column you want to focus',
});
}
}
if (problemRow == event.rowIndex) {
if (event.data.firstName != "your validation") {
problemRow = event.rowIndex
gridOptions.api.startEditingCell({
rowIndex: problemRow,
colKey: 'the column you want to focus',
});
}
else{
problemRow=-1;
}
}
},
I had a similar issue - albeit in AngularJS and the non-Angular mode for ag-grid - I needed to prevent the navigation when the cell editor didn't pass validation.
The documentation is not very detailed, so in the end I added a custom cell editor with a form wrapped around the input field (to handle the niceties such as red highlighting etc), and then used Angular JS validation. That got me so far, but the crucial part was trying to prevent the user tabbing out or away when the value was invalid so the user could at least fix the issue.
I did this by adding a value parser when adding the cell, and then within that if the value was invalid according to various rules, throw an exception. Not ideal, I know - but it does prevent ag-grid from trying to move away from the cell.
I tried loads of approaches to solving this - using the tabToNextCell events, suppressKeyboardEvent, navigateToNextCell, onCellEditingStopped - to name a few - this was the only thing that got it working correctly.
Here's my value parser, for what it's worth:
var codeParser = function (args) {
var cellEditor = _controller.currentCellEditor.children['codeValue'];
var paycodeId = +args.colDef.field;
var paycodeInfo = _controller.paycodes.filter(function (f) { return f.id === paycodeId; })[0];
// Check against any mask
if (paycodeInfo && paycodeInfo.mask) {
var reg = new RegExp("^" + paycodeInfo.mask + '$');
var match = args.newValue.match(reg);
if (!match) {
$mdToast.show($mdToast.simple().textContent('Invalid value - does not match paycode format.').position('top right').toastClass('errorToast'))
.then(function(r) {
_controller.currentCellEditor.children['codeValue'].focus();
});
throw 'Invalid value - does not match paycode format.';
}
}
return true;
};
The _controller.currentCellEditor value is set during the init of the cell editor component. I do this so I can then refocus the control after the error has been shown in the toast:
CodeValueEditor.prototype.init = function (params) {
var form = document.createElement('form');
form.setAttribute('id', 'mainForm');
form.setAttribute('name', 'mainForm');
var input = document.createElement('input');
input.classList.add('ag-cell-edit-input');
input.classList.add('paycode-editor');
input.setAttribute('name', 'codeValue');
input.setAttribute('id', 'codeValue');
input.tabIndex = "0";
input.value = params.value;
if (params.mask) {
input.setAttribute('data-mask', params.mask);
input.setAttribute('ng-pattern','/^' + params.mask + '$/');
input.setAttribute('ng-class',"{'pattern-error': mainForm.codeValue.$error.pattern}");
input.setAttribute('ng-model', 'ctl.currentValue');
}
form.appendChild(input);
this.container = form;
$compile(this.container)($scope);
_controller.currentValue = null;
// This is crucial - we can then reference the container in
// the parser later on to refocus the control
_controller.currentCellEditor = this.container;
$scope.$digest();
};
And then cleared in the grid options onCellEditingStopped event:
onCellEditingStopped: function (event) {
$scope.$apply(function() {
_controller.currentCellEditor = null;
});
},
I realise it's not specifically for your components (Vue.js) but hopefully it'll help someone else. If anyone has done it a better way, I'm all ears as I don't like throwing the unnecessary exception!