I have a StyledText widget in an SWT app with formatted text like so:
Type -> Text
MessageID -> ID:205871803-172.30.227.122(89:ab:da:58:b9:f3)-32849-1332173293715
CorrelationIDAsBytes -> [B#d1c778
Expiration -> 0
Priority -> 4
Timestamp -> 1332173293715
Redelivered -> false
However, this is what it ends up looking like:
Is there some option I can turn on to make it display the whitespace "as is"?
I tried adding some style to it to get it to look right, but it still doesn't work:
_messageDataText.addLineStyleListener( new LineStyleListener() {
public void lineGetStyle( final LineStyleEvent lineStyleEvent ) {
StyleRange styleRange = new StyleRange();
styleRange.start = 0;
styleRange.length = _messageDataText.getText().length();
styleRange.font = new Font( Display.getCurrent(), "Arial", 12, SWT.NORMAL );
lineStyleEvent.styles = new StyleRange[] {
styleRange };
}
} );
Apparently it depends on the font. If you use "Courier New" instead the whitespace lines up properly.
This is what I changed:
styleRange.font = new Font( Display.getCurrent(), "Courier New", 10, SWT.NORMAL );
Also, as a side note - it is important to reuse fonts wherever possible or you'll get nasty handle problems.
Related
I would like to make a control similar to the used by github copilot. I mean highlighting the proposed text. Live share extension uses a very similar approach. What is the name of this control?
Control in live preview extension:
Control in copilot extension:
I guess it could be TextEditorDecorationType? However, I do not know how to style it so that the author is absolutely positioned :/
You can create a similar experience using Text Editor Decorators. These decorators allow you to use custom style patterns for any text in a document (including foreground and background colors).
The text highlighting examples that you have visualized above, are simply adding a a background color to a span of text that has been selected by a user, or suggested by an extension.
As an example: if you wanted to add custom highlighting for console.log:
Then you could use the following:
import * as vscode from 'vscode'
const decorationType = vscode.window.createTextEditorDecorationType({
backgroundColor: 'green',
border: '2px solid white',
})
export function activate(context: vscode.ExtensionContext) {
vscode.workspace.onWillSaveTextDocument(event => {
const openEditor = vscode.window.visibleTextEditors.filter(
editor => editor.document.uri === event.document.uri
)[0]
decorate(openEditor)
})
}
function decorate(editor: vscode.TextEditor) {
let sourceCode = editor.document.getText()
let regex = /(console\.log)/
let decorationsArray: vscode.DecorationOptions[] = []
const sourceCodeArr = sourceCode.split('\n')
for (let line = 0; line < sourceCodeArr.length; line++) {
let match = sourceCodeArr[line].match(regex)
if (match !== null && match.index !== undefined) {
let range = new vscode.Range(
new vscode.Position(line, match.index),
new vscode.Position(line, match.index + match[1].length)
)
let decoration = { range }
decorationsArray.push(decoration)
}
}
editor.setDecorations(decorationType, decorationsArray)
}
Reference Link
I'm currently building my own custom toolbar for TinyMCE, getting & setting the formats through the JS API.
For example, I can set the selected text to bold like this:
this._editor.formatter.toggle('bold');`
Afterwards I can get the format and set the state of my bold-button accordingly like this when the selection changes:
this.isBold = this._editor.formatter.match('bold');
To support font sizes I have a dropdown which applies the correct font size on change:
this._editor.formatter.apply('fontsize', {value: this.fontSize});
But now I need to be able to read the fontsize when the selection changes and I don't know how to achieve this. How can I read the fontsize of the current selection?
As a workaround I'm trying to match the format of the selected node against a list of supported font sizes.
const supportedFontSizes = ['10px', '11px', '12px', '14px', '16px', '18px', '20px', '24px'];
const defaultFontSize = '16px';
let foundFontSize = false;
let fontSize;
supportedFontSizes.some(size => {
if (editor.formatter.match('fontsize', { value: size })) {
fontSize = size;
foundFontSize = true;
return true;
}
return false;
});
if (!foundFontSize) {
fontSize = defaultFontSize;
}
Dear Internet Community.
I am trying to build an itextsharp PdfPTable with a row of footer cells with italic text, and I wish to right-align stuff like amount values.
Either I am doing it wrong, or setting alignment AND style is mutually exclusive.
private void AddCellFooterRightAlign(PdfPTable pdfPTable, string text)
{
var phrase = new Phrase(text)
{
Font = FontFactory.GetFont("Arial", Font.DEFAULTSIZE, Font.ITALIC),
};
var pdfPCell = new PdfPCell(phrase)
{
HorizontalAlignment = Element.ALIGN_RIGHT,
};
pdfPTable.AddCell(pdfPCell);
}
This yields a cell with right-aligned, normal-style text.
private void AddCellFooterRightAlign(PdfPTable pdfPTable, string text)
{
var phrase = new Phrase(text)
{
Font = FontFactory.GetFont("Arial", Font.DEFAULTSIZE, Font.ITALIC),
};
var pdfPCell = new PdfPCell()
{
HorizontalAlignment = Element.ALIGN_RIGHT,
};
pdfPCell.AddElement(phrase);
pdfPTable.AddCell(pdfPCell);
}
This yields the opposite: normal-aligned (left), italic-style text.
Notice the subtle difference: By sending the Phrase-object into the Cell constructor, I retain the alignment, but by using AddElement I retain the font style.
Note: I'm stuck with v.5.5.3.0 for the foreseeable future.
Thanks!
-S
The problem is that you are using a Phrase. Use a Paragraph where you can set the font and the alignment.
I am using TinyMCE plugin. Currently, my font-size option comes with list dropdown but I want slider for font size.
Is this possible with the TinyMCE. Anyone know how can I achieve this with TinyMCE editor?
TinyMCE does not have a built in way to select font size via a "slider". As TinyMCE is open source you can always modify the editor's code to meet your needs.
If you look in the main tinymce.js file you will find code like this:
editor.addButton('fontsizeselect', function() {
var items = [], defaultFontsizeFormats = '8pt 10pt 12pt 14pt 18pt 24pt 36pt';
var fontsize_formats = editor.settings.fontsize_formats || defaultFontsizeFormats;
each(fontsize_formats.split(' '), function(item) {
var text = item, value = item;
// Allow text=value font sizes.
var values = item.split('=');
if (values.length > 1) {
text = values[0];
value = values[1];
}
items.push({text: text, value: value});
});
return {
type: 'listbox',
text: 'Font Sizes',
tooltip: 'Font Sizes',
values: items,
fixedWidth: true,
onPostRender: createListBoxChangeHandler(items, 'fontsize'),
onclick: function(e) {
if (e.control.settings.value) {
editor.execCommand('FontSize', false, e.control.settings.value);
}
}
};
});
This is how the current select list is implemented - you can always replace this with logic to implement font selection in a different manner.
I am trying to implement a tool tip (QuickTip) functionality on a GXT grid cell.It seems to work most of the time, but some times I get an empty tooltip box while mousing over the column header. I found some articles stating the tooltip is only applicable to the data and not on header,but thats not the case I guess. I made the toolTip/text null by default, still I see empty box on header-mouse over.Am I doing something wrong?
This is my code:
ColumnConfig columnTitle = new ColumnConfig();
columnTitle.setId("subject");
columnTitle.setHeader("<B>Title</B>")
columnTitle.setRenderer(new GridCellRenderer<ModelData>()
{
#Override
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex,
ListStore<ModelData> store, Grid<ModelData> grid)
{
SystemUserMessage msg = ((BeanModel)model).getBean();
String text = null;
text = msg.getSubject();
String content = model.get("content").toString();
String toolTip = null;
toolTip = " qtip='" + content + "'";
String style = null;
if(msg.getPriority().equals("High"))
{
style = " style='color: red;'";
}
String html = "<span" + toolTip + style + ">" + text + "</span>";
return html;
}
});
new QuickTip(messageCenterGrid); //register the tooltip
Try replacing qtip= with data-qtip= . You can also add data-qtitle=
Edit helpful link per Juan : http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tip.QuickTipManager