I'm new to Monaco and Typescript in general. I'm trying to get JQuery code completion to work on my editor. I've tried just about every example I've been able to find on how to accomplish this. I think I'm pretty close, but probably missing something fundamental.
From the DefinitelyTyped folks, I've gotten their jquery directory and included it in my web project. In the file that is creating my Monaco editor I have the following.
const path = "/jslib/monaco/types/jquery/index.d.ts";
const typings = readTextFile(path);
monaco.languages.typescript.javascriptDefaults.addExtraLib(typings, path);
readTextFile() is just a little function I'm using to get the contents of index.d.ts (which I can confirm is working). Here is the rest of my monaco setup.
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target:
monaco.languages.typescript.ScriptTarget.ES2016,
allowNonTsExtensions: true,
module: monaco.languages.typescript.ModuleKind.System,
noEmit: true,
typeRoots: ["/jslib/monaco/types"],
noLib: true
});
window.editor = monaco.editor.create(document.getElementById('monacodiv'), {
value: $("#formula").val(),
language: 'javascript',
theme: "vs-dark",
autoIndent: true,
dragAndDrop: true,
tabCompletion: true,
fontFamily: "monospace",
scrollBeyondLastLine: false
});
If anyone could let me know what I'm doing wrong, that would be awesome!
So I just ran into this problem, after digging into the DefinitelyTyped definitions, I noticed that index.d.ts is just aggregates the content from four different files (JQueryStatic, JQuery, misc, legacy). Adding the content of all of these files by repeatedly using addExtraLib should work! Otherwise, not sure how monaco could find the contents.
Related
I could make it run using react-monaco-editor and Webpack 4.
Just adding the MonacoWebpackPlugin did the trick.
Now I'm trying to figure out how to optimise the config for Monaco Editor.
I'm going to use just JS code inside of it and I would like to use just the files for this language.
Looking into the webpack-bundle-analyser, Monaco's files have around 10MB, which is a looot! Also, it loads TS, CSS, JSON, etc.
My code so far:
// Webpack plugin config
new MonacoWebpackPlugin();
// Monaco editor options
const options = {
automaticLayout: false,
cursorStyle: 'line',
fontSize: '14px',
glyphMargin: true,
lineHeight: '16px',
readOnly: false,
renderLineHighlight: 'none',
roundedSelection: false,
selectOnLineNumbers: false,
minimap: {
enabled: false,
},
};
// My Component
<MonacoEditor
language="javascript"
options={options}
value="// type your code here"
onChange={(newValue, e) => console.log('on change monaco editor', newValue)}
editorDidMount={(editor, monaco) => console.log('monaco editor did mount')}
/>
To understand better Monaco environment, I'm trying to look into its documentation, but to be honest, it's not that simple.
Monaco Editor Documentation API
And also, react-monaco-editor GitHub project
Therefore, I would like to ask what direction do I need to go?
Thanks!
I am making an app using Quill JS and Electron. I want to use Quill's syntax highlighting module and followed the instructions on the API page (https://quilljs.com/docs/modules/syntax/). For some reason, the function does not work (no highlighting is shown in code-block). I switched the <script src=...> tag to require and declared Quill as
quill = new Quill('#editor', {
modules: {
syntax: require('highlight.js'),
toolbar: false
},
theme: 'snow'
});
The result is whenever I type something into the code-block, an error saying " " is not a valid language. I made sure that I included the css file on the main page. What am I doing wrong here?
From the link that you provide. It clearly says
var quill = new Quill('#editor', {
modules: {
syntax: true, // Include syntax module
toolbar: [['code-block']] // Include button in toolbar
},
theme: 'snow'
});
So you only need to set true on that property.
What you have to be careful is to make sure window.hljs is present if you include the script tag before Quill is imported.
Or if you use webpack. You can use ProvidePlugin and set it like this
plugins : [
.
.
new ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js',
"window.hljs": "highlight.js"
})
]
I'm having serious problems getting gulp-angular-templatecache to work nicely within my app. I'm using the HotTowel yeomen generator and I modified it a little bit, but I can't seem to get my template cache to use a different module name. Here's the relevant gulpfile code:
gulp.task('templatecache', ['clean-code'], function() {
log('Creating an AngularJS $templateCache');
return gulp
.src(config.htmltemplates)
.pipe($.if(args.verbose, $.bytediff.start()))
.pipe($.minifyHtml({empty: true}))
.pipe($.if(args.verbose, $.bytediff.stop(bytediffFormatter)))
.pipe($.angularTemplatecache(
'templates.js',
{
module: 'app.templates',
standalone: true,
root: 'app/',
moduleSystem: 'IIFE'
}
))
.pipe(gulp.dest(config.temp));
});
The original HotTowel gulpfile had {module: 'app.core', standalone: false, root: 'app/'} as the options. Every time I run the build process, my stupid templates.js file looks like this:
angular.module("app.core").run(["$templateCache"....
I've tried so many things to change it, but it never goes to app.templates. Any ideas?
I'm using the Bower programmatic API to install a list of libraries at once, and some of them have dependency version conflicts. I would like to use the 'force-latest' flag to default to the latest version, but I can't figure out how to make it work with the programmatic API.
The bower documentation shows this example:
var bower = require('bower');
bower.commands
.install(['jquery'], { save: true }, { /* custom config */ })
.on('end', function (installed) {
console.log(installed);
});
I hoped I could change {save: true} to {save: true, 'force-latest': true} but it didn't seem to have any effect. I can handle prompts by adding interactive: true to the config and listening for prompt events, but I would like to make it more automated.
Does anyone know how to do this or know where there is more documentation on the programmatic API? Bower just directs you to the source code for more information. I've looked at it a bit, but I'm not really making sense of it. I'll look further if no one else knows.
Thanks!
The bower programmatic API has very little documentation so you are forced to look at their source code to figure out how to interact with it. After some digging, I have found that the 'force-latest' flag is converted to camel case when used. So, your command will need to be something like this:
var bower = require('bower');
bower.commands
.install(['jquery'], { save: true, forceLatest: true }, { /* custom config */ })
.on('end', function (installed) {
console.log(installed);
});
I hope that in the near future, the guys behind bower will offer a little more documentation to this powerful tool.
In our Dojo system, we have something like the following specified in our dojoConfig:
packages: [{
name: "myWidgets",
location: "/js/libs/widgets"
}]
So that in our require statements, all we have to do is something like:
require(["myWidgets/myCalendarWidget"....
The problem is when I run the build, this dojoConfig is not available and I get numerous missing dependency errors because 'myWidgets' isn't defined according to the build profile.
Now, I've tried adding a package block to the build profile also, but the end result of that is to create an actual 'myWidgets' package, which I don't want.
So, is there any way to make the build see the definition of the 'myWidgets' alias, yet have the end result of the build output still mirror the regular file structure (i.e. /js/libs/widgets)? I tried to define these path aliases in the defaultConfig element in the build profile and that doesn't work either.
If you are using a profile, you can specify the packages in the profile
/util/buildscripts:./build.sh profile=../../../myProfile.js
http://dojotoolkit.org/reference-guide/1.8/build/buildSystem.html#profile-basics
You can also specify a javascript file that holds the dojoConfig
/util/buildscripts:./build.sh --dojoConfig ../build/examples/dojoConfig.js
http://dojotoolkit.org/reference-guide/1.8/build/buildSystem.html#using-a-package-configuration
Answer to your comment. The path is relative from where dojo.js is.
var dojoConfig = {
parseOnLoad: true,
isDebug: true,
locale: 'en-us',
paths: {
"evf": "../../evf"
}
};
My directory structure looks like
js/dojo-1.8.0
dijit
dojo <-- contains dojo.js
dojox
util
js/evf
myCustomWidget.js