Is there a way to create a contextual snippet proposition for VS Code ?
I am trying to add custom snippets to the css.json file that take into account if I am in a specific tag.
Explanation, I want to get this code when I type bckgd as a div property.
div {
background: color position size repeat origin clip attachment image;
}
But I don't want it to show me this snippet if the cursor is not inside of a tag.
You cannot currently use user defined snippets for that but you can write an extension that implements VS Code's CompletionItemProvider to conditionally return snippets.
The relevant apis are:
CompletionItemProvider — This is invoked when a user requests completions. The completion item provider can check the current document to decide which completions to return
SnippetString — A snippet. Your completion item provider can return these
Related
Hi I am developing an extension for VSCode. I am decorating the text editor and hovering some items. Is it possible to make clickable items at hoverMessage and modify the range according to it.
The extension is at:
https://marketplace.visualstudio.com/items?itemName=serayuzgur.crates
You can see the hoverMessage from the GIF
Yes, using markdown you can then create a command link that will execute a command when a user clicks on it:
import * as vscode from 'vscode';
const myContent = new vscode.MarkdownString('[link](command:myCommand?arg1)');
// Command Uris are disabled by default for security reasons.
// If you set this flag, make sure your content is not constructed
// using untrusted/unsanitized text.
myContent.isTrusted = true;
const myHover = new Hover(myContent);
This command can perform whatever action you want
Is there a way to add custom HTML elements with custom attributes to VS Code so that I will get some autocomplete / intellisense on it?
For example in my framework (here Aurelia) I have added a <my-component is-telling-lies="true" aria-type="hidden" default-target="north">Do you believe?</my-component> and would like to have the element show up when starting to type a new element and inside it the attribute when typing in the attribute space of the element.
Yes, there's a way.
You can extend VS Code's HTML support through a declarative custom data format. By setting html.customData to a list of JSON files following the custom data format, you can enhance VS Code's understanding of new HTML tags, attributes and attribute values. VS Code will then offer language support such as completion & hover information for the provided tags, attributes and attribute values.
See: https://code.visualstudio.com/docs/languages/html#_html-custom-data
You can read more about using custom data in the vscode-custom-data repository.
I wish to create a VSCode extension with an entry form on it - some way of input. So far I have only seen document processing or output for an extension.
How can you display a form of input fields in a vscode extension?
How much data do they need to enter? If it's not much, you should be able to handle it with a series of InputBoxes
From https://code.visualstudio.com/docs/extensionAPI/vscode-api
showInputBox(options?: InputBoxOptions): Thenable<string>
Opens an input box to ask the user for input.
The returned value will be undefined if the input box was canceled (e.g. pressing ESC). Otherwise the returned value will be the string typed by the user or an empty string if the user did not type anything but dismissed the input box with OK.
Parameter Description
options?: InputBoxOptions
Configures the behavior of the input box.
Returns Description
Thenable<string>
A promise that resolves to a string the user provided or to undefined in case of dismissal.
The Visual Studio Code API does not have any native methods to display forms to collect input. You can however, chain together Input Boxes, Quick Picks, etc... You can find all these methods under vscode.window.(...).
If these do not satisfy your needs you can implement a webview which allows you to render integrated HTML in Visual Studio Code and trade messages with the extension.
The most simple aproach would be to simple send all collected data from the form to the extension once you hit the submit button or something similar.
You have a nice little tutorial on how to do that here.
Another approach is to see how far you can go with editing JSON objects in settings.json. I thought I would need a form for 8-10 fields, but it turns out that I can create a settings template that has a series of labels and and entry fields (with type validation).
OOTB Tag has multi select functionality, Is it possible to create single select Tag in Touch UI? If yes, can you point me which js file I need to modify?
The cq:tags property is rendered by CUI.TagList widget that can be found within /etc/clientlibs/granite/coralui2/js/coral.js script.
Reading it you can learn that the widget raises itemadded event which might be helpful for you to handle the singular tag handling. An example function that can catch the event might be placed in any clientlibs that will be attached to the admin interface such as cq.authoring.dialog clientlib.
$('*[data-fieldname="./cq:tags"]').on('itemadded', function(ev, value) {
var el = $(ev.target),
div = el.siblings('div'),
input = div.find('input'),
button = div.find('button');
input.prop('disabled', true);
button.remove();
}
To have the fully functional flow you need to handle the itemremoved event as well and make the input field enabled again as well as add the button back to the widget.
Pretty straight-forward question, but I can't find this anywhere. I'm using WicketStuff's TinyMCE to make a Rich Text Editor in my application, and can't find anywhere how to get the input from the text area. For brevity's sake, the following is a simplified version of the code I'm using.
private String input;
...
TinyMCESettings settings = new TinyMCESettings(TinyMCESettings.Theme.simple);
TextArea<String> textArea = new TextArea<String>("editor", new PropertyModel<String>(this, "input"));
textArea.add(new TinyMceBehavior(settings));
form.add(textArea);
Using this, I would expect the usual manner to simply use my String 'input' since it's set as the model. This always results in null as the model isn't being updated.
I tried using the auto-save plugin in case it was expecting the save button to be clicked (which doesn't update the model either), and neither worked. The only thing I've been able to do to get the user's input is to add a HiddenField, with a new model, and make a JavaScript call like
document.getElementById('hiddenField').value = tinyMCE.get('editor').getContent();
but this has led to other problems with trying to call the JS in the desired place and to get it to work properly. I feel this shouldn't be necessary anyways, as surely someone must have implemented a method to get the contents of the text area being used.
Any help would be greatly appreciated.
Thanks to a blog post at Nevermind Solutions, the way to get the model updated is to add the following JavaScript to the form's submitting button:
onclick="tinyMCE.triggerSave(true,true);"
My text area is inside a panel with the button outside of the panel, so it doesn't directly work for me. The trick was to add the JavaScript call to the button's onSubmit, move the logic into the onAfterSubmit, and to make the button MultiPart so that it could call the save trigger before doing the other logic associated to the model.
Hope this might help some others in the future.
You have to add a modifier to the submit button so that the model can update.
AjaxButton btnSubmit = new AjaxButton("btnSubmit", new Model()) {
#Override
public void onSubmit(AjaxRequestTarget target, Form<?> form) {
doSomething();
}
};
btnSubmit.add(new TinyMceAjaxSubmitModifier());
Have a look here for more info