JSX: Emmet auto-completion for elements that contain dots (E.g. Grid.Column)? - reactjs

Is it possible to autocomplete elements that contain dots in their name?
E.g., in WebStorm, if I type Grid [tab] I get <Grid></Grid>, as expected. However, if I type Grid.Column [tab], I get <Grid className="Column"></Grid>.
Is it possible to escape the ., or, by any other means get Emmet to recognize it as part of the element name instead of a className property?

No.
From Sergey at Emmet (after emailing info#emmet.io):
Hi, currently, there’s no special syntax that allows dots in tag name.
Although it’s possible to implement some sort of escaping, generally
it’s not a good idea since it may break abbreviation extractions from
text content in some cases.

Related

How to superscript a character in a list of ng-options

I asked a question similar to this earlier, but it turned out I was approaching it wrong, so excuse that.
I have a list of items that I'm displaying to the user using angular-chosen, some of these items have text that require part of it to be superscripted, it won't get more complicated than m^2 or cm^3. I built a filter to replace the ^ character with html <sup>. But it turned out angular-chosen only allows ng-options, and you can't use html bindings in ng-options. Some css classes look promising but I'm not sure how to apply that to only part of the text.
So without tearing out angular-chosen, is there any way to do this?
It seems there is no way to use html bindings in ng-options, as per Jongware's comment my only solution was to replace each instance with Unicode.

Protecting custom inline elements in WPF RichTextBox

I'm currently spiking with the WPF RichTextBox before I decide whether or not it can be used in a project of mine.
What I need is to have elements of text representing various objects (other texts or objects), a bit like a WIKI but not quite. Clicking on such a text will make stuff happen, like navigating to other texts or providing additional options.
Anyway, as these little text bits represent other objects I would like to protect them but I have succeeded with this only in part: The user cannot position a caret inside such a text element and edit/delete it but it is still possible to make a selection and delete/replace it, including my custom elements.
Have anyone travelled down this road with the RichTextBox? My latest experiment was to simply record all custom text elements when being part of a selection and then restoring them after the (destructive) edit. That fell apart because I can't find a way to re-insert my custom inline elements (derived from the Run class). The only way I've found to programmatically insert a Run (based) element at a specified position (TextPosition) is via its constructor.
Well, any hints would be greatly appreciated.
You are really looking for a FlowDocument, not a RichTextBox.

Prevent text wrapping with parentheses

Is it possible to prevent parentheses at the end of a word from wrapping using the TextBlock and the FlowDock. Example: The next time you decide to author text you should think about having pizza(s). The issue we are having is that the (s). is getting wrapped to the next line. The desired wrapping would be for the entire word pizza(s). to wrap to the next line.
You can surround special content with an inline container to make sure it is treated as a single element for wrapping purposes. The same trick would work if you wanted to make sure a name like "Bob Johnson" never got split apart.
<TextBlock TextWrapping="Wrap">
The next time you decide to author text you should think about having <TextBlock Text="pizza(s)" />
</TextBlock>
It sounds like in the comments you might be pulling data from an external resource. If that is the case and you want to do it all programmatically, you may want to look at indirectly creating the inlines by using an interactivity behavior or an attached property with a MultiValueConverter that passes the TextBlock. I don't think a direct converter would work because TextBlock.Inlines is not settable.
Hope it helps. :)

How to Filter more than one field using WPF AutoCompleteBox

i am trying to customize the suggestions on the AutoCompleteBox in the WPF Tool kit. Right now i have a last name field which when the user enters characters a query runs that retrieves the top 10 records based on that last name. i would also like to filter by first name, i tried splitting out the comma and searching by the last name and the characters entered in the first name.
however, as soon as a space or comma is entered into the autocompletebox, the suggest functionality stops working, which I believe is because the ValueMemberPath property is set to be last name. Is there a work around for this, or a way to modify the ValueMemberPath to handle multiple values? Thanks!
If you wont get any satisfied answer there's a nice control that I'm using from codeproject that supports searching by keywords with easy API.
WPFAutoCompleteTextbox
There's another simple way to get Autocompletebox accept more than one Property for filtering: just use ValueMemberBinding like this:
ValueMemberBinding="{Binding Converter={StaticResource myConverter}}"
and define "myConverter" so that it concatenates your filter properties (properly separated) into a single string; now your AutocompleteBox will use the whole string as it was a single property.

What is a good way to indicate a field is mandatory?

I would like to indicate to the user that a particular textbox or combobox is mandatory. What is a neat way to do this?
Currently, I have a gradient red border around the textbox when the text is null or empty, but it seems a bit much when you show a form and a number of the fields are red. I'm looking for something that is clear, but is not so overwhelming to the user. Something subtle.
I would prefer to make the textbox indicate that the field is mandatory rather than say make the label bold or have an asterisk. What are my options or any ideas you might have.
A recent usability study suggests taking the opposite approach and indicating which fields are optional rather than required. Furthermore, try to ask for only what you really need in order to reduce the number of optional fields.
The reason is that users tend to assume all fields are required anyway. They may not understand or pay attention to the asterisk, whereas they readily understand clearly labeled optional fields.
Link to the study (see Guideline 5):
https://www.cxpartners.co.uk/our-thinking/web_forms_design_guidelines_an_eyetracking_study/
Just put a * in front on the mandatory fields. It's simple, yet effective. I think most people will know what this means. Also, when they try to submit and it fails, because some mandatory field was not filled in correctly, then you let the user know which field they need to change (by using those red borders, for instance). I think this is what most people are accustomed to.
Edit: I saw that you didn't want to use an asterisk by the way. I still think this is the best option, simply because I think most people will recognize it right away and know what to do :)
I do it this way. Mark the left-border of the element with 2px Red color.
you can also change background color of textbox..
It depends on your design, of course, but I prefer something simpler like the labels of the input being bold. The red outline, while clear, does have an "error" connotation associated with it, which might be misleading to the user. Bolding the labels is subtle, but easy to understand without being an eyesore.
I like the jquery 'example' plugin for text input fields. A subtle grey inlay for instructions or sample input.
See demo page here for an, ahem, example. http://mucur.name/system/jquery_example/
Depending on how many fields you have, it might be too cluttered, but light-colored, italicized text like:
first name (required)
last name (required)
might work for your app.
HTH

Resources