We Keep Coding

Monaco Editor: only show part of document

Is there a way to only show part of a document, or in monacos case of a model, while still getting intellisense for the whole document?
I only want a user to edit a part of a document, but the user should be able to get the right contextual intellisense.
It would be best for my usecase to hide the uneditable sections, but deactivating them would also be ok.
In case this is not possible, is there any embedded editor that can do this, or can this be achived by modifying the language server?

Monaco editor loads every line as a container under a section with the class name "view-lines". Once the editor content has loaded, set "display: none" to the corresponding container for each line that you want to hide.
Implementation: https://jsfiddle.net/renatodc/s6fxedo2/
let value = `function capitalizeFirstLetter(string) {
\treturn string.charAt(0).toUpperCase() + string.slice(1);
}
$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
`
let linesToDisable = [1,2,3];
let editor = monaco.editor.create(document.getElementById('container'), {
value,
language: 'javascript',
theme: 'vs-dark',
scrollbar: {
vertical: "hidden",
handleMouseWheel: false
},
scrollBeyondLastLine: false
});
// onLoad event for Monaco Editor: https://github.com/Microsoft/monaco-editor/issues/115
let didScrollChangeDisposable = editor.onDidScrollChange(function() {
didScrollChangeDisposable.dispose();
setTimeout(function() {
$(".monaco-editor .view-lines > div").each(function(i) {
if(linesToDisable.includes(i+1)) {
$(this).css("display","none");
$(this).css("pointer-events","none");
}
});
},1000);
});
Scrolling from Monaco will render the lines again and break the implementation. To prevent this, disable the scrolling feature in Monaco, set a fixed height for the editor container, and use the browser or a parent container to scroll instead.
If you use the arrow keys 'up' or 'down' to navigate to the hidden content, the cursor will still work, and typing will break the implementation. You might be able to use the editor's onKeyDown event to prevent this.
If you're looking for a break-proof implementation, I would suggest loading Monaco editor only with the portion of the document that you wish to edit. Then extend the completion provider (Intellisense) as shown in this example: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example
monaco.languages.registerCompletionItemProvider('javascript', {
provideCompletionItems: function(model, position) {
return {
suggestions: [
{
label: "capitalizeFirstLetter",
kind: monaco.languages.CompletionItemKind.Method,
documentation: "Capitalize the first letter of a word",
insertText: "capitalizeFirstLetter("
}
]
};
}
});
monaco.editor.create(document.getElementById("container"), {
value: `$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
`,
language: "javascript"
});
Use an AST parser like Esprima to get the identifiers from your source document, and plug these into the suggestions array.

bootstrap + mixitup filter on load issue

We are trying to show our portfolio in bootstrap via MixItUp v3.1.11 filtering and are trying to load a certain category (not all the projects) when the page is loaded.
Patrick Kunka has provided an example how it could be done here.
Same problem was asked here
Our issue is that the reccomended soultion is not working. My guess is that it is related to the change of selector due to bootstrap + mixitup issues:
control: '[data-mixitup-control]'
Here is the piece of code that is at the end of the page:
var containerEl = document.querySelector('#selector');
var mixer = mixitup(containerEl, {
selectors: {
target: '.mix',
control: '[data-mixitup-control]'
},
animation: {
effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation
},
load: {
filter: 'none' // Ensure all targets start from hidden (i.e. display: none;)
}
});
// Add a class to the container to remove 'visibility: hidden;' from targets. This
// prevents any flickr of content before the page's JavaScript has loaded.
containerEl.classList.add('mixitup-ready');
// Show all targets in the container
mixer.show()
.then(function() {
// Remove the stagger effect for any subsequent operations
mixer.configure({
animation: {
effects: 'fade scale'
},
load: {
filter: '.residential' // Ensure all targets start from hidden (i.e. display: none;)
}
});
});
When I change the filter to desired .residential it does not work.
I also tried to add this:
$(function(){
$('#selector').mixItUp({
load: {
filter: '.residential'
}
});
});
No luck. Any idea anyone where could the problem be?

In combination with MixItUp v3.1.9 and Bootstrap 4 try this example.
Add data-mixitup-control to avoid conflicts with other data-attributes:
<button type="button" class="control" data-mixitup-control data-`enter code here`filter=".product">PRODUCTS</button>
Initialize MixItUp:
var container = document.querySelector('.portfolio');
var mixer = mixitup(container, {
selectors: {
control: '[data-mixitup-control]'
}
});

I've tried the example, and it works with version 2.1.6.
Here is my example code:
$(function(){
$('#selector').mixItUp({
selectors: {
target: '.item'
},
layout: {
display: 'inline-block'
},
load: {
filter: '.residential'
}
});
});
This will load the DOM only with items related to .residential visible.
Hope this helps.

In combination with MixItUp Version 3.1.11 and Bootstrap 3 try this example.
Add data-mixitup-control to avoid conflicts with other data-attributes:
<button type="button" class="control" data-mixitup-control data-filter=".residential">Residential</button>
Initialize MixItUp:
var containerEl = document.querySelector('.container');
var mixer = mixitup(containerEl, {
selectors: {
control: '[data-mixitup-control]'
},
load: {
filter: '.residential'
}
});
You don't need to set the 'fade scale' animation effect separately - it's the default setting. https://www.kunkalabs.com/mixitup/docs/configuration-object/

Kendo Multiselect To have arrow icon and behavior to close on click

I am trying to add more functionality to my Kendo Multiselect, in order to behave like a normal dropdown list. I want it to have an arrow or a triangle icon, and to toggle and close on click on that icon. How can I achieve this?

This question comes up quite high on Google for "kendo multiselect arrow". Here's a more complete solution I'm using. (The CSS Manuel answered with is fine - it's actually from my post on the Telerik forums!).
CSS to add a dropdown arrow:
.k-multiselect:after {
content: "\25BC";
position: absolute;
top: 30%;
right: 25px;
font-size: 12px;
}
Trickery to make it a sideways facing arrow when opened:
CSS
.k-multiselect.opened:after {
content: "\25C0";
}
JS
var Globals = {};
$('#foo').kendoMultiSelect({
...
open: function(){
$(this.element).parent().addClass('opened'); // ▼ becomes ◀
Globals.MultiSelectIsOpening = true;
setTimeout(function(){
Globals.MultiSelectIsOpening = false;
}, 100);
},
close: function(){
$(this.element).parent().removeClass('opened');
}
...
});
$('#foo_container').on('click', '.k-multiselect', function () {
if (!Globals.MultiSelectIsOpening) {
$('#foo').data('kendoMultiSelect').toggle();
}
});
#foo_container can be worked out dynamically needs be - $('#foo').parents('.k-multiselect').parent(), for example.
Here's a fiddle demonstrating it working. The only problem I've found so far is that it'll cause the list items to be closed when you delete an item from the multiselect.
Until kendo add this as a feature, I think this is the best we can do!
Edit - sorry, not Angular - HTH nonetheless.

How to add a dropdown for line-height selection in tinyMCE for WP 3.9

I am looking for some code which would add a dropdown to my WYSIWYG fields in the WordPress backend through which I would be able to choose an inline line-height for the selected text. I find the tinyMCE documentation very confusing. Additionally it is mostly aimed at TM 3, but WP 3.9 uses the fourth version…
My tinyMCE Plugin looks something like this:
tinymce.PluginManager.add('ad_lineheight', function(editor, url) {
…
editor.addButton('ad_lineheight', {
type: 'splitbutton',
text: 'line-height',
icon: false,
menu: menuval
});
});
How would you integrate the function, which adds inline-styles to the selected input, like so <span style="line-height: 120%; display: inline-block;">selected text</span>?
EDIT: I already managed to add the dropdown to the editor, it shows the line-heights I defined programmatically like 80%, 90%, 100% and so on.
EDIT2: With this code I am able to change the line-height:
editor.addCommand('lineHeight', function(com, value) {
var selected = tinyMCE.activeEditor.selection.getContent();
var content = '<span style="line-height: '+value+';">' + (selected != '' ? selected : '') + '</span>';
editor.execCommand('mceInsertContent', false, content);
});
editor.addButton('lineheightselect', function() {
…
…
return {
type: 'listbox',
text: 'line-height',
tooltip: 'line-height',
values: items,
fixedWidth: true,
onclick: function(e) {
if (e.control.settings.value) {
editor.execCommand('lineHeight', false, e.control.settings.value);
}
}
};
});
But it is not very practical as it ignores inline-styles that are already there leading to code like this:
<span class="h3" style="font-size: 90%;"><span style="line-height: 160%;">AND</span></span>

this is an old question but I am adding the answer here just in case anyone still need it.
you can use getNode() instead of getContent()
you command code will be
editor.addCommand('lineHeight', function(com, value) {
var node = tinyMCE.activeEditor.selection.getNode();
$(node).css('line-height', value);
});

You need to add custom button to TinyMCE editor, you need also to create your style in some CSS stylesheet. Maybe some WP function may be needed. I don't think you will need adding anything in JS - there is already possibility to add custom style button in TinyMCE and you could achieve that using PHP.
http://codex.wordpress.org/TinyMCE_Custom_Buttons
http://codex.wordpress.org/TinyMCE_Custom_Styles

How to disable collapsing in a grouped grid in ExtJS?

Everything's in the subject. I have a grouped grid, like this Sencha example. I would like to remove the [+][-] signs in order to disable collapsing.
I thought there would be some config for the grouping feature, something like 'collapsible: false', but there is not any.
Any ideas please ?

Use configuration to disable collapse config property. From Sencha:
collapsible : Boolean
Set to false to disable collapsing groups from the UI.
This is set to false when the associated store is buffered.
Defaults to: true
Source: Sencha Documentation of the collapsible configuration.

You can inherit Ext.grid.feature.Grouping and redefine onGroupClick method. It's not good but the simplest way for now:
Ext.define( 'My.grid.feature.RightsGrouping', {
extend: 'Ext.grid.feature.Grouping',
onGroupClick: function(view, group, idx, foo, e) {
}
});
Also you'll have to edit CSS to remove collapse sign and change cursor pointer:
.x-grid-group-hd .x-grid-cell-inner { cursor: default; }
.x-grid-group-title { background-image: none; }

Very nice Serg, thanks.
even easier for the override is:
...
features: [
Ext.create('Ext.grid.feature.Grouping',{
onGroupClick: function() {} /* do nothing! */
})
]
...

This was not working in 4.2.1.
Figured out a solution seemed very funny to me
...
groupcollapse:
{
fn: me.onGroupingGroupcollapse,
scope: me
}
...
...
onGroupingGroupcollapse: function(view, node, group, eOpts)
{
Ext.getCmp('gridCenters').view.features[0].expand(node.name,true);
}
...