Import monaco editor using require js - javascript

I have installed monaco-editor using
npm install monaco-editor
now I want to require in my js file
so I have tried to require using
var monaco = require('monaco-editor');
but it is giving me module not found error.
Is there wrong I am doing?

They just released ESM distribution which is compatible with webpack etc. Check out the docs here.
Also there are many examples for using monaco with webpack, parcel an so on. See all.

Monaco-editor uses a custom AMD style module loader. the loader.js will result in the global require being set to Monaco-editor's loader.
The samples GitHub has many examples of using the editor in different contexts.
Check out how they solve your problem in the Electorn samples index.html. After persisting the Monaco-editor custom loader you would use it like in most of the examples out there. It is an AMD style loader so the syntax differs from node var me = require('monaco') . I am not sure if it is possible to use like node loader but after loading loader.js and persisting the require to some variable such as amdRequire you will use such as:
amdRequire(['vs/editor/editor.main'], function ()
{
// your code using monaco ns here
monaco.editor.create( document.getElementById('elementId'), {} );
})

In my case, I'm trying to load Monaco Editor in nw.js app which had require.js.
Usually Monaco Editor examples recommends using its 'Loader.js'. But if you already have another amd loader (ex: require.js), then you don't need to include & use Monaco's Loader.js. By this Github comment I got to know the Monaco's Loader.js will not do anything if it detects another amd loader.
This official sample might be useful.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Monaco Editor Sample - Loading with requirejs</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
crossorigin="anonymous"
></script>
<script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript'
});
});
</script>
</body>
</html>

Related

What is the correct way to add a NPM package to a Laravel 9 project with Laravel Mix?

Laravel Mix introduces itself as
An elegant wrapper around Webpack for the 80% use case.
I believe I have a widespread use case, and I want to know if the 80% covers this and how to do it right. It could be any other package, but I have editor.md as an example. They want you to install it with npm i editor.md and use it like the following.
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
<!-- Tips: Editor.md can auto append a `<textarea>` tag -->
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("editor", {
// width: "100%",
// height: "100%",
// markdown: "xxxx", // dynamic set Markdown text
path : "editor.md/lib/" // Autoload modules mode, codemirror, marked... dependents libs path
});
});
</script>
Now I want to know how to get the following paths right.
editor.md/css/editormd.min.css
jquery.min.js (not a dependency)
editor.md/editormd.min.js
editor.md/lib/
My ideas/questions:
I could copy the CSS and JS files with Mix.
mix.copy("node_modules/editor.md/css/editormd.min.css", "public/css/editormd.min.css");
mix.copy("node_modules/editor.md/editormd.min.js", "public/js/editormd.min.js");
But then I miss all the files from the lib folder (4th path). I could copy this folder as well. I could copy the entire node_modules/editor.md folder to my assets folder, but this feels too much. And finally, where is jQuery coming from? Do I add it from a CDN? Do I install the npm package? Again, I saw solutions requiring everything in the app.js file.
How to do it the right way?
For Laravel Mix, the correct way to implement this is to run the following.
npm i editor.md jquery
Then add your require() methods in the bootstrap.js file.
resources/js/bootstrap.js
window._ = require('lodash');
try {
window.$ = window.jQuery = require('jquery');
window.editormd = require('editor.md');
} catch (exception) {
console.error(exception);
}
In your template, likely located at /resources/views/layouts/app.blade.php, you will need to add the following at the bottom of the file before the closing </body> tag.
<script src="{{ mix('js/app.js') }}"></script>
This may not be the best way to do it, but you could copy the entire directory with mix.copyDirectory(srcDir, destDir) as seen here

Can't call any Blockly methods in index.html even though it works in other .js files and a workspace is shown

I'm trying to create a tool where you can create HTML pages using Blockly blocks. I already have a page that shows my workspace and my self-created block. Now I want to write a script that gets the code from the workspace. Normally there is a workspaceToCode method in the Blockly library. Unfortunately I can't access any Blockly methods or really anything Blockly-related in my index.html.
I've looked up similar projects and can't seem to find any differences. I'm loading blockly_compressed.js, blocks_compressed.js and javascript_compressed.js. And because it shows me a workspace with "functioning" blocks I'm pretty sure that the paths are correct.
See below what I tried and thanks in advance for your help:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<style>
...
</style>
<script src="node_modules/blockly/blockly_compressed.js"></script>
<script src="node_modules/blockly/blocks_compressed.js"></script>
<script src="node_modules/blockly/msg/en.js"></script>
<script src="node_modules/blockly/javascript_compressed.js"></script>
</head>
<body>
...
<script src="html_blocks.js"></script>
<script src="html_generator.js"></script>
<script src="main.js"></script>
<script>
function update(event) {
var code = HtmlGenerator.workspaceToCode(workspace);
document.getElementById('HTMLCodeDiv').innerText = code;
}
workspace.addChangeListener(update);
</script>
</body>
</html>
The error it is giving is "unresolved function or method" for the workspaceToCode method as well as the addChangeListener method.
Since you haven't shown all of your code, I can't provide a precise answer to explain exactly what's gone wrong for you here, but I can say that Blockly in a classical (non-module) script tag adds itself to the window as follows:
// ...
} else { // Browser
var factoryExports = factory();
root.Blockly = factoryExports;
}
// ...
where root is window (by way of this) and factory() is the entire Blockly code. All Blockly functions are namespaced inside of the window.Blockly object, so there is no such window.workspace variable that would be created unless one of your other scripts (not shown) created this and attached it to the window.
If you open your browser console, you can type Blockly. and see the list of available properties that were imported by the scripts. The other Blockly scripts simply attach more properties to the global Blockly object that was created by the first script tag. Blockly.Workspace and Blockly.workspaceToCode are some of these properties, and you can call Blockly.inject to create a workspace.
For example,
const blocklyWorkspace = Blockly.inject("blockly-container", {
toolbox: document.getElementById("toolbox")
});
document.querySelector("button")
.addEventListener("click", e => {
const code = Blockly.JavaScript
.workspaceToCode(blocklyWorkspace);
console.log(code);
});
#blockly-container {
height: 100vh;
}
xml {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/blockly/8.0.0/blockly.min.js" integrity="sha512-m19pjKFpHlhFqUAWB49IQt7ip1P7UDKyV0k0f7UGnN8pXSLFjtvsrRcDlwRw+ZhaNeqQTwHwE9+CJgPAWUyA9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button>Workspace to code</button>
<div id="blockly-container"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox">
<block type="text_print"></block>
<block type="text"></block>
</xml>
It strikes me as an antipattern to use node_modules in script tags like this, even though some of the Blockly examples do this. Usually, you'd use a bundler of some sort (webpack, parcel, vite, browserify, rollup, etc) to allow you to dynamically import the code using modules (example below). Or else keep your build without any local dependencies and use a CDN and take advantage of client caching (as shown above). Using node_modules directly seems like the worst of both worlds, especially without a minification build.
For example, you can use parcel to build your app for the web. A bundler makes it easy to use node_modules without specifying the paths. You can develop using modules rather than legacy UMD script tags, which help you organize the project into chunks and avoid polluting the window with shared data.
The example below is contrived for clarity, but hopefully you can extrapolate the approach (or something similar) to your project.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#blockly-container {
height: 100vh;
}
xml {
display: none;
}
</style>
</head>
<body>
<div id="blockly-container"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox">
<block type="text_print"></block>
<block type="text"></block>
</xml>
<xml xmlns="https://developers.google.com/blockly/xml" id="start-blocks">
<block type="text_print" id="N4+B!H6xh[=wx]z^LqGk" x="38" y="38">
<value name="TEXT">
<shadow type="text" id="~uw6Vr9}hxZS-=a(Zjt{">
<field name="TEXT">hello world</field>
</shadow>
</value>
</block>
</xml>
<script src="src/index.js" type="module"></script>
</body>
</html>
src/index.js:
import Blockly from "blockly";
import generateCode from "./generate-code";
const blocklyWorkspace = Blockly.inject("blockly-container", {
toolbox: document.getElementById("toolbox")
});
Blockly.Xml.domToWorkspace(
document.getElementById("start-blocks"),
blocklyWorkspace
);
console.log(generateCode(blocklyWorkspace));
src/generate-code.js:
import Blockly from "blockly";
export default blocklyWorkspace =>
Blockly.JavaScript
.workspaceToCode(blocklyWorkspace);
package.json:
{
"scripts": {
"start": "node node_modules/parcel/lib/cli index.html"
},
"dependencies": {
"blockly": "^8.0.3"
},
"devDependencies": {
"parcel": "^2.6.2"
}
}
Building and running:
npm i
npm start
Now, navigate to (by default) http://localhost:1234 (or whatever parcel tells you on the console) and begin developing.

Require.js load CDN bootstrap and CDN popper

I wish to use require.js to load CDN hosted bootstrap and jquery.
I realise that this question has been asked before (Refer Steve Eynon's answer to Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended PopperJS Version), but the posted answers do not work for me.
What I have tried so far
The host html file has content ...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script data-main="js/market-place" src="js/lib/requirejs/require.min.js"></script>
</head>
<body>
html content etc.
</body>
</html>
File js/market-place.js has content ...
console.log( 'market-place.js');
requirejs(['./decision-market-common'], function(){
console.log( 'common requirement met.');
require(['bootstrap'], function( bootstrap){
console.log( 'bootstrap requirement met.');
});
});
File js/decision-market-common.js has content ...
console.log( 'decision-market-common.js');
requirejs.config({
paths: {
jquery : 'https://code.jquery.com/jquery-3.3.1.slim.min',
popper : 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min',
bootstrap: 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min'
},
shim: {
bootstrap: {
deps: ['jquery', 'globalPopper']
}
}
});
define( 'globalPopper', ['popper'], function( p){
window.Popper = p;
console.log( 'global Popper is set.');
return p;
});
Result
Using Chrome as my development browser, I get the following results, at first in the javascript console ...
market-place.js
decision-market-common.js
common requirement met.
global Popper is set.
But then I get javascript error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
require.js is trying to load ./popper.js, even after it has succesfully loaded the CDN popper.js ! Why?
The answer on this question / at Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended PopperJS Version didn't work for me.
My scenario was:
Using Bootstrap 4.1.3 (not possible to move to a different version)
Unable to use the bundled version, as I wanted to change the defaults within Popper (specifically, to disable GPU Acceleration to resolve some issues with blurry text in a tooltip)
Using the bundled version, I wasn't able to access the version of Popper "inside" Bootstrap to change the defaults.
Eventually, I came across the "map" option within RequireJS (https://requirejs.org/docs/api.html#config-map). I added this to my RequireJS config:
map: {
'*': {
'popper.js': 'popper'
}
}
That resulted in RequireJS resolving Popper correctly.
Not a perfect solution and I can't guarantee it will work for anyone else, but I spent a while on this, so I hope this helps someone!
And the answer is ...
use bootstrap version 4.0.0-beta. Version 4.0.0-beta works, but any version later (4.0.0 through to 4.1.3) is broken, with respect to requirejs support.
An alternative is to use the bundle version of bootstrap, and then you can use the latest version and don't need to link popper. There is no CDN of bundle bootstrap, so you would need to make a local copy. In this case, file js/decision-market-common.js looks like:
need to explicitly
console.log( 'decision-market-common.js');
requirejs.config({
paths: {
jquery : 'https://code.jquery.com/jquery-3.3.1.slim.min',
bootstrap: 'lib/bootstrap/bootstrap.bundle.min'
},
shim: {
bootstrap: {
deps: ['jquery']
}
}
});
Also, one small point: It is better to use requirejs() rather than require() (, I think?).

jquery not working well on node-webkit

I am practicing node-webkit as a nodejs beginner.
My main page is a simple html page including a main.js script
I've installed jquery using npm install jquery
index.html
<!-- index.html -->
...
<script src="js/main.js"></script>
</head>
<body>
<div id="demo">Hi! </div>
</body>
</html>
main.js
// main.js
const $ = require('jquery')
$(document).ready(function () {
$('#demo').click(function () {
$(this).text($(this).text() + 'Hi! ')
})
})
If I load jquery in my index.html like <script src="path/to/jquery.js"></script> it works well, but if I require jquery in my main.js it doesn't!
I've already tested:
main.js is properly including and working with native js methods (like document.getElementById('demo').onclick = ...)
Other node modules or libraries such as vue, lodash or natives like fs, url work well. So require function works good.
While I'm requiring jquery as above, inline <script>s doesn't work as well.
Also I realized $(document).ready(...) works! But the real problem is that $('#demo') is undefined! (I checked the console-I'm using SDK version of node-webkit)
I don't know if it's because of node-webkit or something else I'm missing?
found the solution,
I should define jquery like this:
window.$ = window.jQuery = require('jquery')
this is simply because of variable scopes in ECMAS
so if I define it like this, I can use it everywhere

how to integrate TinyMCE and CKEditor in Meteor JS?

I am trying to use CKEditor or TinyMCE editor in my project.
So I put TinyMCE folder in meteor public folder, also put
<head>
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
in template head tag.
However receiving following error.
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3000/%3Cyour%20installation%20path%3E/tinymce/tinymce.min.js". (index):97
Uncaught SyntaxError: Unexpected token < tinymce.min.js:1
Uncaught ReferenceError: tinymce is not defined
How do I fix this problem? It is same to CKEditor.
Is there any other rich editor ,which I can use in Meteor JS?
First, you need to put everything from the CKEDITOR build download in the public folder. CKEDITOR comes with all sorts of stuff and references everything based on relative directories.
Your public folder should have a directory named ckeditor it should contain contain the following files and folders:
adapters
lang
plugins
skins
ckeditor.js
config.js
contents.css
styles.js
In your primary layout file reference CKEDITOR like so:
<head>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
</head>
In your template:
<template name="yourTemplate">
<textarea id="content" name="content"></textarea>
</template>
Finally, in the rendered function of your template:
Template.yourTemplate.rendered = function() {
$('#content').ckeditor();
};
Normally, you would say this.$('#content').ckeditor() but that doesn't work because CKEDITOR is in your public folder. As a result, you need to the global reference to the #content element.
Instead of /public folder, put your files in /client/compatibility. Then initialize it in the template you want to use it.
Template.editor.rendered = function() {
tinymce.init({
selector: 'textarea'
});
};
This was the only result searching for wysiwyg:
https://github.com/mcrider/meteor-bootstrap-wysiwyg
meteor add mcrider:bootstrap-wysiwyg
Looks a bit simpler than CKEditor or TinyMCE but maybe that's ok for your project.

Categories

Resources