Does anyone know how i can get Range with angular ui ace?
If i am directly embedding ace in my html, i could probably do something like this:
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
var Range = ace.require('ace/range').Range;
But how can i get this with angular ui ace? I have access to the model and the Editor class, but i guess this will require the ace object?
Ace documentation
angular ui ace
Thanks.
ace global variable is available with angular ui ace too.
Try ace.require('ace/range').Range; in the console on ui-ace demo page http://angular-ui.github.io/ui-ace/
I just found solution. I don't love it, but it works!
For creating new Range object, you need to get its constructor. And because the selectionRange property of the editor is the same "object type" (I know, we are in JavaScript), you can get its constructor and create new Range object with that :)
You can get editor object in the onLoad function:
this.aceLoaded = function (editor) {
let AceRange = editor.getSelectionRange().constructor;
editor.session.addMarker(new AceRange(from,0, to, 200), "your-style", "fullLine");
}
and in the html template, you bind it with
<div ui-ace="{
onLoad: $ctrl.aceLoaded,
}">
Related
I already tried something like this from another SO answer How to type using cypress .type() inside the codemirror editor?
If it helps this is the site I am working on Cypress with https://testing-playground.com/
// CodeMirror's editor doesn't let us clear it from the
// textarea, but we can read the Window object and then
// invoke `setValue` on the editor global
cy.window().then(win => {
win.editor.setValue("")
})
The issue I am running into is when I try to implement this I am getting undefined for the editor. I tried digging into the Window object more and couldn't find anything resembling the Codemirror editor. Running .clear({force: true}) on any of the other Codemirror elements yields no results, just .type({force: true}) on the textfield adding the new content with the old.
The solution I ended up using looked something similar to code block in the question with a few changes.
I am not getting the window object from Cypress; CodeMirror editor wasn't there.
I used the idea Evan Plaice gave me related to the Editor instance being on the DOM and then searched the CodeMirror DOM hierarchy manually to find it.
The resulting code will clear a spefic editor, there are two so the [0] is necessary for that.
cy.get('.CodeMirror')
.first()
.then((editor) => {
editor[0].CodeMirror.setValue('');
});
Very unintuitive but you can update the contents by swapping in a new CodeMirror document instance
editor.swapDoc(CodeMirror.Doc([contents],[language]));
That's how I handle content updates on wc-codemirror
I want to create a system to store the Undo&Redo stack of the Monaco editor.
Why?: I have a Monaco instance where I do several changes. Then I have to dispose that instance and open a new one. Here, I want to restore the same stack state that I had in the previous instance.
Question: How can I get and restore the Undo&Redo stack?
UPDATE:
When I dispose the Monaco editor instance, the JavaScript environment can be completely destroyed. It is integrated in a C# environment that is capable to communicate with JS. My goal is to store the Monaco Editor model in the C# or serialize it.
It all has to do with the Model.
If you restore the same model you will have the Undo&Redo stacks
See Example
var model = editorInstance.getModel();
var viewState = editorInstance.saveViewState();
//Destroy your instance for whatever reason
editorInstance.dispose();
//When you create the new instance load the model that you saved
var newInstance = monaco.editor.create(elem, options);
newInstance.setModel(model);
newInstance.restoreViewState(viewState);
Something that might help would be to tie into the monaco event hook
monaco.editor.onWillDisposeModel(saveModel)
The viewState can be used to resume the cursor position of the editor.
Here's the unofficial way:
const {past, future} = editor.getModel()._commandManager;
In your case you can then run JSON.stringify on past and future. Then when you recreate the editor you just do
const cm = editor.getModel()._commandManager;
cm.past = JSON.parse(past);
cm.future = JSON.parse(future);
I am using TreePicker from ExtJS 6.0.2. I would like to know how can I perform a search or query on the Picker data similar to this example - Fiddle. It has this property which is an built-in feature from combo-box:
queryMode: 'local'
I have made the TextField editable and I want to know if there is any inbuilt way to perform a search or do I have to write code to do it manually. For the manual way I tried to capture the change event of the TextField by writing the code for it in the config property of the TreePicker but failed to get the event to be fired. What am I missing here, please guide.
it seems this component has a very simple implementation and doesn't support any search functionality.
You could start to implement your need studying the Ext.form.field.ComboBox source code in order to "copy" only the behaviours you want.
For example you will see there's a picker's method to override to handle the change event. A very very simple "search on change" extension can be added with the following override:
...
onFieldMutation: function(e) {
var me = this,
store = me.getStore(),
rawValue = me.inputEl.dom.value;
store.filter('text', rawValue);
},
...
Fiddle
I'm working on a simple note taking application and using GhostDown Markdown editor. It's pretty nice, I like it, but I am stuck trying to set it's value programatically.
I can get values out pretty easily. $('.entry-markdown-content textarea').val()
Setting it however is another story... :(
Prototype of what I'm working on can be seen at http://potusnotes.com
For the editor part, Ghost-Markdown-Editor uses CodeMirror editor.
So, to set value programmatically, we would call CodeMirror's instance and do
editor.setValue(txt);
But how to get that CM instance? It was created by the widget with which Ghost-Markdown-Editor was created. See jquery.ghostdown.js file:
$.widget( "b4m.ghostDown", {
editor: null,
// ...
_create: function() {
// ...
this.editor = CodeMirror.fromTextArea(this.element.find('textarea')[0], {
mode: 'markdown',
tabMode: 'indent',
lineWrapping: true
});
}
}
As the widget was made with jQuery Widget factory, a widget instance is kept inside .data("plugin-name") element of the object it was used on.
Thus we can access widget instance and set editor value like this:
var ghostdown = $(".editor").data("b4m-ghostDown");
ghostdown.editor.setValue("# Hello, SO");
Or simply
$(".editor").data("b4m-ghostDown").editor.setValue("# Hello, SO");
I am using the Jquery based autocomplete module .I have a small doubt in its functionality. My autocomplete data is available in a local JavaScript variable. The autocomplete works fine, but whenever I update this local javascript variable it still uses the old data. Does this module cache the data? How can we go about fixing this.
The jQuery UI autocomplete does not have caching built in however it does make an internal copy of the source for the lookup values. In order to update this internal source you need to call the setter on the source parameter like so:
var source = [
"dog",
"cat"
];
var myAutocomplete = $("#myid").autocomplete({
source: availableTags
});
//Add new items after autocomplete init
source.push("mouse");
//Update the autocomplete with the modified source
myAutocomplete.autocomplete("option", "source", source);
Here is a jsfiddle with it working:
http://jsfiddle.net/enXYS/
Your browser is probably caching the JS file. Ctrl f5 to force clean the browsers cache.
Try smth like: $('input#necessary_input').flushCache();.
Updated (according to the comments below):
Ok. What about simple recreating of autocomplete (firstly remove it, then create with autocomplete function and new data)?