I inserted text and added a hyperlink to it. After doing this by default the text appears in blue color and underlined. I don't want the underline, but when I try to set the underline property to false, it has no effect on the text. You can find the sample code below.
Word.run(function (context) {
var selection = context.document.getSelection();
var para = selection.insertText("lorem", Word.InsertLocation.end);
para.hyperlink = "https://www.stackoverflow.com";
para.set({
font: {
underline: false
}
});
return context.sync();
}).catch(function (e) {
console.log(e.message);
})
The values for Word's JS API font.underline property do not include false. Try with the string value 'None'.
The accepted Enum values for Font.Underline are listed here.
Note that the blue, underline formatting is Word's default style definition for the Hyperlink style. In the "COM" world the better approach would be to change the style definition to not include an underline. This option is not (yet?) available for JS Add-ins, which provide no functionality for changing or creating styles.
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;
}
Simply need to use withStyles some how to edit the default color from the primary/error color to simply just use black. But since the update from 0.19.0 to beta 1 this doesn't seem possible now.
The error message (the one under the text input) is using the object under theme.palette.error (see source) to choose which color to use.
That same palette color is used for the text field label too.
If you want to change both at the same time the right approach would be to use a custom theme that rewrites the theme.palette.error to something else.
import { createMuiTheme, createPalette } from 'material-ui/styles';
import grey from 'material-ui/colors/grey';
const theme = createMuiTheme({
palette: createPalette({
error: grey
})
});
If you want to change just the FormHelperText color then you could customize it in theme by using the overrides parameter.
const theme = createMuiTheme({
overrides: {
MuiFormHelperText: {
error: {
color: 'black'
}
}
}
});
To change the Label of the TextField in the current version (v1.2.1)
You have to set the the color like this:
const theme = createMuiTheme({
palette: {
text: {
secundary: 'black'
}
}
}
});
for error the path is palette.error.main
the easiest way to find the right variables is to look directly into the code
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 have a div
<div class="blue>;
The class blue is:
.blue {
background-color: blue;
}
Now I know I can set the background color of the div in the console using:
$0.style.backgroundColor = "#ffcc00"
But what if I want to get the value of the background color for that element using the console?
It's possible you may want computed style:
var style = getComputedStyle(document.body, null); // Gets the style for a passed element and optional pseudo selecter (eg. :hover)
console.log(style.backgroundColor);
It's important to note that computed style is the rendered result. If you have multiple rules for the same element, this will only display the ones that have been applied.
You can do :
var blue = document.getElementsByClassName('blue')[0];
blue.style.getPropertyCSSValue('background-color');
or you do:
blue.style.getPropertyValue('background-color');