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;
}
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 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.
I can't find a way to increase the label width of EditorGUILayout.Toggle. Here's my code, it doesn't do anything and Unity clips the text and cuts it short.
GUILayoutOption[] options = new GUILayoutOption[] {
GUILayout.Width(400.0f),
GUILayout.MinWidth(250.0f),
GUILayout.ExpandWidth(true)
};
MyBoolValue = EditorGUILayout.Toggle("My Long Description Text Here", MyBoolValue, options);
I did try wrapping the Toggle button with
EditorGUILayout.BeginHorizontal();
EditorGUILayout.EndHorizontal();
But it also didn't do anything. What can I do remove clipping from the text?
Set EditorGUIUtility.labelWidth before doing your Toggle, and then restore it to its original value so you don't mess up any subsequent controls.
float originalValue = EditorGUIUtility.labelWidth;
EditorGUIUtility.labelWidth = 400;
MyBoolValue = EditorGUILayout.Toggle("My Long Description Text Here", MyBoolValue);
EditorGUIUtility.labelWidth = originalValue;
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.
tinymce's FAQ explains how to change the editor's default font style by referencing a custom content_css file.
But I'd like to change the editor's font style on the fly programmatically. Any ideas? Thanks.
This is possible, but requires some knowledge.
You will need to call something like
self.switchStyle(url, ed);
where switchStyle is
// url is the url to the stylesheet file to be added to the editor iframes head
// ed is the editor object or editor id
switchStyle: function(url, ed) {
if (typeof ed != 'object') {
ed = tinymce.get(ed);
}
//replace the custom content_css if set
var url_to_replace = ed.getParam('content_css');
var doc = ed.getDoc();
var $doc = $(doc);
var sheets_urls = [];
if (url_to_replace){
sheets_urls.push(url_to_replace);
}
// remove all stylesheets from sheets_urls
$doc.find('link').each(function() {
if (tinymce.inArray(sheets_urls, $(this).attr('href').split('?')[0]) !== -1) {
$(this).remove();
}
});
var link = doc.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
// setstylesheet
$doc.find('head:first').append(link);
},