outline for a custom document format - visual-studio-code

The same way HTML and JSON (but not YAML?) already have their navigable Outline, I would like to add the same ability for my custom format, to help me navigate thru lengthy text.
Where I can find documentation for doing so?
I have found "how to add a grammar for highlighting" which is partially useful, (https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide), but not sure following this guide will provide me an Outline, again, YAML for ex. is highlighted, but doesn't appear in Outline.
Admittedly, I haven't read the entirety of the above link, but the word "Outline" doesn't appear, and I have trouble to filter search engine results.
Example below:
{
"doc1": {
"key": 12,
"a": [
1,
2,
3
]
}
}

Related

How to make VSCode snippets that trigger only in double quote

I want to create a small VSCode plugin that has autocomplete function for the Bootstrap classes.
I would like this autocomplete to work only when the cursor is between double quotation marks.
Is it possible to restrict the display of the auto-complete list only for this range?
I tried something like this:
"BTN": {
"scope": "string.quoted.double.html",
"prefix": "work-btn",
"body": [
"test-class;",
],
"description": "BS4"
}
but not working
It isn't possible to use syntax scopes in a snippet, see the discussion at
https://github.com/microsoft/vscode/issues/71187
I was going to suggest upvoting that issue but it has been locked. The functionality seems like it would be useful for various reasons, but might be cpu-intensive.

Extending vscode intellisense

I have a custom js-doc attribute which contains the path to the dependency file.
eg: #dependency {import('loadash/somefile')}
Since this is simple string and error prone, I am looking for a way to extend vs-code import intellisense to this custom js-doc attribute. Vscode supports intellisense for standard js-doc attributes #type, #param and #typedef, would be great if there is a way to extend this behavior to my custom attribute.
example of the intellisense for #type attribute
I looked at few extensions related to this, but none offer the rich experience vscode offers. Any pointers in this regard would be really helpful.
Thank you for your time.
You could write a snippet for a quick and dirty solution. A snippet will show the intellisense menu and insert a piece of code based on a prefix you enter. They are saved in a JSON file in your settings directory ~/.vscode and would look something like this:
{
"deprecated": {
"scope": "javascript",
"prefix": "#D",
"body": "#Deprecated {import('${1:path}')}"
}
}

TinyMCE: How can I change the formats ("Paragraph", "Heading 1", etc.)

By default TinyMCE (4) has a "Paragraph ▼" dropdown, and if you click on it you get a list of formatting options ("Paragraph", "Heading 1", etc.).
I'd like to be able to do two things. First, I want to change the options and their names (eg. to "Normal" and "Heading"), and I found the block_formats option which does exactly that:
block_formats: 'Normal=p;Heading=h1'
However, I'm stuck on thing #2: adding classes to the generated elements. Instead of plain <h1> elements, when someone picks "Heading" I want to generate a <h1 class="heading">.
I thought maybe this would work:
block_formats: 'Normal=p;Heading=h1.heading'
... but it doesn't, and I haven't been able to find any other option that would let me do this. Then again, the TinyMCE documentation isn't always the easiest place to find answers, which is why I came here.
Does anyone know how I configure TinyMCE to have a "Paragraph ▼" dropdown with customized names AND custom classes on the generated elements?
I never did find a way to do this, so what I wound up doing instead was remove the block format drop-down entirely and replace it with the (custom) format dropdown. In other words I:
removed the formatselect from the toolbar1 config (removing the un-configurable normal formatting dropdown)
added the custom format dropdown (styleselect) to the toolbar1 config
defined a style_formats config entry with my custom styles
The style_formats config looked like this:
style_formats: [
{
title: 'Header',
inline: 'span',
classes: 'someClass',
styles: {someStyle: '5px'}
},
], // next style would go here
There were only two downsides of this approach. First, the dropdown now says "Formats", and I don't seem to be able to configure that anywhere. However I do have a single formatting dropdown, with only the options I want, and those options add the desired classes to the formatted text, so the dropdown's name isn't a big deal.
The second issue was that TinyMCE uses an <iframe>, which prevents it from using our stylesheet. I could have written a stylesheet for TinyMCE and then appended it to the <iframe> (or used some TinyMCE mechanism, if there is one) ... but I'm lazy so I just used style: entries for each custom format to define the style.

How to make drop-down values to be easily authorable content in CQ

I was trying to understand how can we make drop-down values in dialog box easily authorable?
Select lists in dialogs can load their options dynamically from anywhere, so long as they are provided as an array of values in JSON format (from the docs):
[
{
value: "pink",
text: "Pink",
qtip: "Real Pink"
}
]
So one solution would be to:
Create a new template that would allow an editor to add/remove values from a list — make this editable for content authors as per any other content (e.g. using the page properties, or components that you can drag onto that template).
Create a Servlet that will parse those values & output them in the expected JSON.
Register that servlet, e.g. via a path (/bin/selectvalues).
Using the cqinclude xtype to load in your values:
i.e.
<select
type="select"
xtype="selection"
options="/bin/selectvalues"/>
If you are looking for a drop-in solution for this, take a look at http://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists.html. This supports easily authorable lists of name/value pairs which can be used (without writing additional code) in:
Classic UI Dialogs
Touch UI Dialogs
Touch UI Asset Metadata Editor

I search a tutorial on how play and customize with collection form

I need to create some forms non-linked to entities.
I pretty understood how create my builders, but when I try to use them, I am pretty confuse, and I don't really find examples in the online doc of Symfony 2.0
To go into the details: I create a "Multiple choice question" form. So I created:
a "class ResponseType extends AbstractType"
a "class MCQType extends AbstractType", which uses my class ResponseType
a file "forms.html.twig", which includes templates for my "responsetype_widget" and for my "mcqtype_widget"
My aim is to be able to customize the labels and play with them in this template (like add div with uniqueID, etc), specially the itemization when I add a new item: I would know how to change the "0", "1", "2", etc in "Bad answer 1", "Bad answer 2", etc.
Currently, I do it with JQuery, in the client-side. But when I submit my form, and an error appears, my created items appear with the "0", "1" ; generated by the server-side.
Here are screenshot to have a better view of the situation:
Modified by JQuery (sorry not enought reputation to post images)
Generated by Symfony 2
I really would customize these labels on the server-side, or in my "class MCQType extends AbstractType", or from the mcqtype_widget in forms.html.twig
I tried a lot of stuff that I found in the doc, but nothing works and I feel desesperate to mofify that from the JS instead of the server-side.
Is somebody have a good example?
Thank you by advance. And if any good tutorial is realeased about manipulate collections, I would really help me!
What you need to do for customizing those labels is to redefine the template block to include your modification.
To do so, you'll need this part of the documentation :
http://symfony.com/doc/2.0/cookbook/form/form_customization.html
I would also advise you to play with that in order to get familiar with the form collection :
http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/forms/collections
Don't hesitate to go deep inside to see how they are doing.
PS: if you need to hide those labels, you need to pass 'show_legend' => false, inside the field options