[[extension]] how to get link address when hovered - vscode-extensions

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);
}

Related

Getting All series on a given axis must be of the same data type, with Vue + Google Spreedsheet

I used the exact example and even created the same spreedsheet as in the vue example https://codesandbox.io/embed/yqxxkp32mj?module=%2Fsrc%2FApp.vue here, if i copy the spreedsheet from their example it works fine but when I add my own spreedsheet (which is practically a copy of what they have it gives me this error)
Getting All series on a given axis must be of the same data type
methods: {
onChartReady(chart, google) {
const query = new google.visualization.Query(
"https://docs.google.com/spreadsheets/d/1GpwJaxUPYv9MV2uAvW4qkKanFlwrzTHWS55vzK3J9VE/edit?usp=sharing"
);
query.send(response => {
const options = {
title: "Creating a Chart from a Separate Spreadsheet"
};
const data = response.getDataTable();
chart.draw(data, options);
});
}
}
};
This is my google sheet
https://docs.google.com/spreadsheets/d/1GpwJaxUPYv9MV2uAvW4qkKanFlwrzTHWS55vzK3J9VE/edit?usp=sharing
I am using vue-google-charts
Thanks

How to prevent closing of cell edit mode on validation errors with custom vue components in ag-grid

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!

Remove / clear all entities from a contentState

I'm trying to remove all entities from a contentState.
What would be the prefered way to do that?
Not sure what the canonical way is, but I've been able to do it by using Modifier.applyEntity(): https://draftjs.org/docs/api-reference-modifier#applyentity.
You basically need to loop through all the blocks, and use that method on the entire range of text in each block. So something like this:
import {Modifier, SelectionState} from 'draft-js';
function clearEntityRanges(contentState){
contentState.getBlockMap().forEach(block => {
const blockKey = block.getKey();
const blockText = block.getText();
// You need to create a selection for entire length of text in the block
const selection = SelectionState.createEmpty(blockKey);
const updatedSelection = selection.merge({
//anchorOffset is the start of the block
anchorOffset: 0,
// focustOffset is the end
focusOffset: blockText.length
})
Modifier.applyEntity(contentState, updatedSelection, null);
});
return contentState
}

testcafe how to make the selection of the conditional element

I'm having trouble making the selection of the element that conditionally appears on a page.
I've tried awaiting but it didn't work.
// Gets imported as detailedProductPage
export default class Page {
constructor () {
this.chipItem0 = Selector('[data-test-id="chipItem0"]').child('.tag-name').child('[data-test-id="tagValue"]');
}
}
test('should accept value and allow for making the selection of multiple items.', async t => {
const string0 = 'Professionelle Nassreinigung nicht erlaubt';
const string1 = 'Handwäsche';
const string2 = 'Waschen 30°C';
await t
.click(detailedProductPage.listContainerFirstChild)
.typeText(detailedProductPage.symbols, string0)
.click(detailedProductPage.symbolsResultsItem0)
.expect(string0).eql(detailedProductPage.chipItem0.innerText)
.typeText(detailedProductPage.symbols, string1)
.click(detailedProductPage.symbolsResultsItem0)
.expect(string1).eql(detailedProductPage.chipItem1.innerText)
.typeText(detailedProductPage.symbols, string2)
.click(detailedProductPage.symbolsResultsItem1)
.expect(string2).eql(detailedProductPage.chipItem2.innerText);
});
You can use the exists property to check if the element exists on the page. With this you can click on the element that conditionally appears on a page:
const el = Selector('#el');
if(await el.exists)
await t.click(el);
 
To make your test correct, you need to fix your assertions. According to the TestCafe Assertions API the eql assertion should be used in the following manner:
await t.expect( actual ).eql( expected, message, options );
 
TestCafe allows a user to pass asynchronous Selector properties as an actual argument. These properties represent a state of a related DOM-element on the tested page. In your case, the actual value is detailedProductPage.chipItem0.innerText.
The expected value can't be an asynchronous property, it should be a calculated value (like string, boolean, number or some object etc..).
 
The following code should work correctly:
await t
.click(detailedProductPage.listContainerFirstChild)
.typeText(detailedProductPage.symbols, string0)
.click(detailedProductPage.symbolsResultsItem0)
.expect(detailedProductPage.chipItem0.innerText).eql(string0);
 

Search fields In sencha touch

In my app I have to add Search field and some select fields.
when I add any character in search field corresponding content from store should be display.
Currently I am using search field on which I am handling keyup event.
Please let me know the flow and guide line to do this.
Thanks
I suppose you want a search feature for your search field..showing the results as you type. You can achieve this by using regular expressions and compare them with entries in the store.
Here's the code I used on a project:
//referencing my searchfield
Search: '#searchfield';
//attaching an event
Search: {
keyup: "OnFocus"
}
//the actual function
OnFocus: function (searchField, e) {
var query = searchField.getValue(); //get the value entered in the search field
var ContactsContainer = this.getContactsContainer(); //the container that holds my contacts
var store = Ext.getStore('Contacts'); // the store where I have the info
store.clearFilter(); //assure there aren't any filters set
if (query) { //if the current value in the search field
var thisRegEx = new RegExp(query, 'i'); //new regular expression with our value
store.filterBy(function (record) { //filter the store
if (thisRegEx.test(record.get('name')) //the fields in the store
thisRegEx.test(record.get('surname'))
thisRegEx.test(record.get('phone'))) {
return true; //must include this
};
return false;
});
}
Good Luck!