I am trying to get use of all monaco-eaditor features, so I will combine the monaco-diff editor with monaco-yaml plugin.
I was able to build the monaco-diff editor following this
https://microsoft.github.io/monaco-editor/playground.html#creating-the-diffeditor-hello-diff-world.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.js"></script>
<script>
require.config({ paths: {'vs': 'https://unpkg.com/monaco-editor#0.20.0/min/vs'}});
window.MonacoEnvironment = { getWorkerUrl: () => proxy }
let proxy = URL.createObjectURL(new Blob([`
self.MonacoEnvironment = {
baseUrl: 'https://unpkg.com/monaco-editor#0.20.0/min/'
};
importScripts('https://unpkg.com/monaco-editor#0.20.0/min/vs/base/worker/workerMain.js');
`], { type: 'yaml' }));
require([
'vs/editor/editor.main'
], function () {
var lhsModel = monaco.editor.createModel(value, 'yaml');
var rhsModel = monaco.editor.createModel(value, 'yaml');
diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
enableSplitViewResizing: false,
});
diffEditor.setModel({
original: lhsModel,
modified: rhsModel
});
</script>
However I am not able to find a tutorial to add the monaco-yaml, can someone provide me with a link,tutorial or any useful steps ?
Related
Inside my layout page i wanna run a script for translate the text of some enumumerators.
My layout looks like this:
<html>
<head>
...
<script src="~/js/ViewModels/Helpers/Translation.js"></script>
<script src="~/js/ViewModels/Helpers/Enumerators.js"></script>
...
</head>
<body>
...
</body>
</html>
My translation script:
'use strict';
var jsonTranstation = null;
$(function () {
getjson();
});
const getjson = () => {
$.getJSON('/lib/translation/en-EN.json', function (data) {
jsonTranstation = data;
});
}
const Translation = (value, ViewModel) => {
let a = null;
if (jsonTranstation ) {
a = jsonTranstation[ViewModel][value];
return a;
}
return '--';
}
My Enumerators script:
'use strict'
const EnumToolBar = {
NEW: { text: Translation('New', 'EnumToolBar'), prefixIcon: 'e-add', id: 'NEW' }
}
My JSON file (en-EN.json):
{
"EnumToolBar": {
"New": "New Value"
}
}
Using EnumToolBar.NEW.text in HomePage returns '--' instead of 'New Value'.
There are any way to read first script and the respective json file before any other script?
So when I press start button I get this output
Init1
and this error
Source map error: Error: Invalid URL: webpack://Packs.[name]/webpack/bootstrap
Resource URL: http://0.0.0.0:3000/packs/js/application-50e3aceac3d862ba8b6d.js
Source Map URL: application-50e3aceac3d862ba8b6d.js.map
Even according my code I have to get "Init2" and "Init3" too.
my games.html.haml view file:
%h1 Catcher game
%p Catch bloks which are failling
%canvas#main_canvas
=button_tag "Start!", class: 'start_button', onclick: 'Packs.application.start'
my start() and init() functions in chatcher.js file:
function start() {
console.log("Init3")
var eater = new BigBlock(20, "pink");
var smallBlocks = [];
setInterval(function() { game(eater, smallBlocks); }, 1000/16);
addEventListener("keydown", function(key) { eater.move(key) } );
}
window.init = function() {
console.log("init2")
var canvas = document.getElementById("main_canvas");
var ctx = canvas.getContext("2d");
}
my application.js file
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
export * from '../packs/games/chatcher'
$(document).ready(function() {
console.log("init1")
window.init;
})
and lastly my config/webpack/environment.js
const { environment } = require('#rails/webpacker')
var webpack = require('webpack');
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment
environment.config.merge({
output: {
library: ['Packs', '[name]'],
libraryTarget: 'var'
},
})
Thank you for helping. Have a nice day.
I am working on creating an extension for azure devops, which creates a custom tab and displays the result.
I uploaded the file using "##vso[task.addattachment]".
Eg: console.log('##vso[task.addattachment type=TestReport;name=MyReport;]c:/user/index.html');
I am having problem in consuming that file and displaying it on new tab, I went through the sample code provided by MS - build_release_enhancer
but still unable to display the file.
js file::
import Controls = require("VSS/Controls");
import VSS_Service = require("VSS/Service");
import TFS_Build_Contracts = require("TFS/Build/Contracts");
import TFS_Build_Extension_Contracts = require("TFS/Build/ExtensionContracts");
import DT_Client = require("TFS/DistributedTask/TaskRestClient");
import { error } from "azure-pipelines-task-lib";
export class InfoTab extends Controls.BaseControl {
constructor() {
super();
}
public initialize(): void {
super.initialize();
// Get configuration that's shared between extension and the extension host
var sharedConfig: TFS_Build_Extension_Contracts.IBuildResultsViewExtensionConfig = VSS.getConfiguration();
var vsoContext = VSS.getWebContext();
if(sharedConfig) {
// register your extension with host through callback
sharedConfig.onBuildChanged((build: TFS_Build_Contracts.Build) => {
this._initBuildInfo(build);
var taskClient = DT_Client.getClient();
taskClient.getPlanAttachments(vsoContext.project.id, "build", build.orchestrationPlan.planId,"ATTACHMENT_TYPE_HERE").then((taskAttachments) => {
$.each(taskAttachments, (index, taskAttachment) => {
if (taskAttachment._links && taskAttachment._links.self && taskAttachment._links.self.href) {
var recId = taskAttachment.recordId;
var timelineId = taskAttachment.timelineId;
taskClient.getAttachmentContent(vsoContext.project.id, "build", build.orchestrationPlan.planId,timelineId,recId,"ATTACHMENT_TYPE_HERE",taskAttachment.name).then((attachementContent)=> {
function arrayBufferToString(buffer){
var arr = new Uint8Array(buffer);
var str = String.fromCharCode.apply(String, arr);
return str;
}
var data = arrayBufferToString(attachementContent);
});
}
});
});
});
}
}
private _initBuildInfo(build: TFS_Build_Contracts.Build) {
}
}
InfoTab.enhance(InfoTab, $(".build-info"), {});
// Notify the parent frame that the host has been loaded
VSS.notifyLoadSucceeded();
Html file:
<!DOCTYPE html>
<head>
<script src="../lib/VSS.SDK.min.js"></script>
<script type="text/javascript">
VSS.init( {
usePlatformScripts: true,
// moduleLoaderConfig: {
// paths: { "sample": "sample" }
// }
});
VSS.ready(function() {
require(["sample/tab2"], function () { });
});
</script>
<style>
.build-info {
padding: 10px;
}
</style>
</head>
<body>
<div class="build-info"> </div>
</body>
</html>
The issue is resolved, actually the issue was with my vss-extension.json file. I had to declare scope:
"scopes": [
"vso.build_execute"
]
I'm trying to create a custom plugin for TinyMce.
This is my code so far:
(function() {
var redactor = (function(domGlobals) {
'use strict';
var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
var setupButtons = function(editor) {
editor.ui.registry.addToggleButton('link', {
text: 'My button',
tooltip: 'My button',
onAction: function() {
alert('My Button');
}
});
};
var Controls = {
setupButtons: setupButtons,
};
global.add('redactor', function(editor) {
Controls.setupButtons(editor);
});
function Plugin() {}
return Plugin;
}(window));
})();
This is my init:
tinymce.init({
selector: '#editor',
plugins: 'redactor',
toolbar: 'redactor',
menubar: 'redactor'
});
My editor renders without any button and no JS error on it.
What am I doing wrong? I tried to emulate some of the plugins but I cant get it to work.
Seems that I needed to search a little bit more in the documentation. I have to add each button manually to the toolbar:
tinymce.init({
selector: '#editor',
plugins: 'redactor',
toolbar: 'redactorBtn1',
menubar: 'redactor'
});
and each name should be unique for the plugin:
So, the code for my plugin:
(function () {
var redactor = (function (domGlobals) {
'use strict';
var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
var setupButtons = function (editor) {
editor.ui.registry.addToggleButton('redactorBtn1', {
text: 'My button',
tooltip: 'My button',
onAction: function () {
alert('My Button');
}
});
};
var Controls = {
setupButtons: setupButtons,
};
global.add('redactor', function (editor) {
Controls.setupButtons(editor);
});
function Plugin () {
}
return Plugin;
}(window));
})();
If you want to add more buttons to the toolbar, you have to put them one by one:
toolbar: 'redactorBtn1 redactorBtn2',
Its old code, at tinyMCE they change everything now and then. A good example is the code plugin. Copy this code plugin to a directory named: custom. Change the names code in the plugin.js file to custom and add custom to the plugins array and the toolbars string in tinymce.init function and you are ready to go.
I am trying to merge two JSON file and using it in autocompleteplugin.
But I do get an error TypeError: $(...).easyAutocomplete is not a function even I have added js library for both auto complete and jquery.
My code look like this:
<script src="jquery-3.1.0.js"></script>
<link href="easy-autocomplete.min.css" rel="stylesheet" />
<script src="jquery.easy-autocomplete.min.js"></script>
<script>
$.getJSON("file1.json", function (data1) {
$.getJSON("file2.json", function (data2) {
var final = $.extend({}, data1, data2);
var options = {
data: final,
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
</script>
I made a working example based on your code.
Please check you have the correct paths when you include the script files. And also check if jQuery is included.
Hope will help you:
$.getJSON("https://api.myjson.com/bins/42jd0", function (data1) {
$.getJSON("https://api.myjson.com/bins/5bjqc", function (data2) {
var final = [];
final.push(data1.employees1);
final.push(data2.employees2);
var new_final = final[0].concat(final[1]);
var options = {
data: new_final,
getValue: "firstName",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<div class='easy-autocomplete'>
<input id="KUNDE"/>
</div>
You can run the code here by hitting the Run code snippet button or you can also check the jsfiddle I've made here.