Develop Reference

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

Blazor WebAssembly load different scripts for specific Environment

I'm currently working on a .NET Standard 2.1 Blazor WebAssembly application. I try to include or exclude JavaScript files in my index.html according to an environment variable.
The Blazor WebAssembly App is NOT Asp.NET Core hosted.
In .NET Core there are usually Environment Tag Helpers like in the following example:
<environment include="Development">
<script src="js/app.js"></script>
<script src="js/helpers.js"></script>
</environment>
<environment exclude="Development">
<script src="js/site.min.js"></script>
</environment>
As already discussed in this question Blazor WebAssembly Environment Variables, the Environment Tag Helpers are server side code and thus don't work in Blazor WASm.
Now I try to find a good solution to include/exclude JavaScript files according to the Environment variable in Blazor WebAssembly.
The first idea was, similar like for CSS, to create a component called <Scripts> to load the different script files on the index.html like this:
#using Microsoft.AspNetCore.Components.WebAssembly.Hosting
#inject IWebAssemblyHostEnvironment hostEnv
#*Check the environment value*#
#if (hostEnv.IsDevelopment())
{
<script src="js/app.js"></script>
<script src="js/helpers.js"></script>
}
else
{
<script src="js/site.min.js"></script>
}
#code {}
Unfortunately this doesn't work, because the <script> Element is not allowed to be used in a Blazor component (.razor file).
The following error occurs: The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user. ... Script tags should not be placed inside components because they cannot be updated dynamically. To fix this, move the script tag to the 'index.html' file or another static location. ... https://go.microsoft.com/fwlink/?linkid=872131
How do you load different scripts according to the Environment Variable i.e. Development, Production or Staging in Blazor Webassembly?
Do you know how to solve this problem?

I wanted to add Tailwind CDN script tag just during development. I ended up using the solution below:
index.html
<script src="_framework/blazor.webassembly.js"></script>
<script>
// If localhost, add tailwind CDN (or any other script that you want)
if (window.location.hostname == 'localhost') {
var customScript = document.createElement('script');
customScript.setAttribute('src', 'https://cdn.tailwindcss.com');
document.head.appendChild(customScript);
}
</script>

Simply copy your index.html code in a .cshtml (named BlazorApp.cshtml in the following sample) in your server project and fallback to this page.
public void Configure(IApplicationBuilder app)
{
...
app.UseEndpoints(endpoints =>
{
...
endpoints.MapFallbackToPage("/BlazorApp");
}
}
And update the code with <environment> tags for your conveniance.

Please check the solution in this answer (same question as you linked above) and that seems to work.
Basically the workaround is to use this in a new component called Head.razor as per the solution:
#inject IWebAssemblyHostEnvironment hostEnv
#if (hostEnv.IsDevelopment())
{
<title>BlazorWasmApp - In Debug</title>
<link href="css/debug.css" rel="stylesheet" />
}
else
{
<title>BlazorWasmApp - Not Debug</title>
<link href="css/live.css" rel="stylesheet" />
}
New Head.razor component:
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
//Add the Head to root components
builder.RootComponents.Add<Head>("head");
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}

Icons not showing with summernote rails

I followed Summernote-rails official to add rich text editor in my Rails project.
Then in my edit.html.erb I added class place_editor to my text_area:
<%= f.text_area :text, class: "place_editor form-control col-md-7 col-xs-12", rows: "15j ,placeholder: "Text", required: "required"%>
and then JavaScript as:
<script type="text/javascript">
$(function() {
$('.place_editor').summernote();
var edit = function () {
$('.click2edit').summernote({ focus: true });
};
$("#edit").click(function () {
$('.click2edit').summernote({ focus: true });
});
$("#save").click(function () {
var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
$('.click2edit').destroy();
});
// Adding Css to give border to text editor
$(".note-editor").css("border", "solid 1px #e7eaec");
});
</script>
Everything works fine except ICONS.

It's Simple
Just Download summernote compile zip file click here.
Unzip the file. Copy font folder. Paste it you summernote.css root. Be sure your summernote.css file stay with font folder. Now Refresh your Browser using Ctrl + F5.
Folder Location demo:
Demo Output:

I searched for hours and finally solved it.
Actually, summernote doesn't save icons locally, instead it download it
I added this links in header
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
And it did the job
I 'll welcome if someone can elaborate it further

Import the font files, it will work.
I tried import through CSS #font-face rule. You can import in javascript also.
#font-face {
font-family: summernote;
src : url('/fonts/summernote.ttf');
src : url('/fonts/summernote.eot'),
url('/fonts/summernote.woff');
}

After unzipping the Summernote distribution download, you must copy the Font folder to the same place you put the summernote.css file.
In this example, Elmer is the root folder of the website, and both summernote.css and the Font folder are copied to the /assets/css folder.
Similarly, the summernote.js file is copied to the /assets/js folder. If you're not using plugins or languages, that's all you need to install.
Here's the code to put in the header to load those files as shown:
<!-- include summernote css/js-->
<link rel="stylesheet" type="text/css" charset="utf-8" href="/assets/css/summernote.css">
<script type="text/javascript" charset="utf-8" src="/assets/js/summernote.js"></script>
Note: Including the charset="utf-8" attribute is important.

Though an answer is already accepted, still I would like to post a better answer for people seeking a solution to the problem in question.
Of course this will work:
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css">
But I prefer to STORE ASSETS LOCALLY. It eliminates the need of CDN which affects the loading time of the page its embedded in.
By default "summernote" looks for font-awesome icons (and some other summernote fonts) in the directory /css/font/:
//=================== The style-sheets stacking
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/summernote.css">
//=================== The font goes here
/css/font/
So what u need to do is:
Download fontawesome,
Take out the fonts folder from the downloaded archive and rename it to font
Place the directory font inside the css directory of the project.
And this should work.
Considering your assets are available like this http://localhost:1337/css/font/summernote.ttf
//summernote.ttf is just an example
I hope this will help.
Thanks

Copy the font folder in your project css.
just like YourProject/css/font
that should work.
It's work with my project.

Do you have font-awesome included in your project? I believe that plugin uses font-awesome. If not, trying including this in your application.html.erb file as the src for a script tag: https://www.bootstrapcdn.com/fontawesome/
Also read this: https://github.com/summernote/summernote/issues/505

For anyone that may be having trouble with icons in MVC, it seems as though summernote looks at the base folder (in my case, Content) and the font folder needs to go in there. Here's a screenshot of my project's layout:
For whatever reason, summernote looks in the /summernote/font/ folder in Content rather than where summernote-lite.css is.
Hope this helps!

I found the same problem. The solution was I deleted the 'toolbar' key from the summernote config:
$(".summernote").summernote({
lang: 'hu-HU',
height: 300,
minHeight: null,
maxHeight: null,
toolbar: [
['font', ['roboto',]],
]
});
version: summernote v.0.8.12.

jquery script on html file

I'm using Bottle to make a simple web form and want to set the Selectize.js jquery plugin to a field so the user can set several values to that same field.
Inside my form tag I have the following code:
<label>
<span>Links :</span>
<input type="text" id="input-tags" name="links">
</label>
<script>
$('#input-tags').selectize({
persist: false,
createOnBlur: true,
create: true
});
</script>
And the following .js and .css inside the head tag:
<link href="/selectize.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/selectize.js"></script>
To deal with static files I have the following route in my .py script:
#get('/<filename:re:.*\.js>')
def javascripts(filename):
return static_file(filename, root='static/js')
#get('/<filename:re:.*\.css>')
def stylesheets(filename):
return static_file(filename, root='static/css')
My route to deal with static files seems to be working properly 'cause I've tested it with other jquery plugin that does not use explicit code within the html file.
On this one, the problem seems to be on the explicit script code bellow the label tag. I found some articles about dealing with JSON but couldn't make it work (I also don't know if that is the right way to go).

Well, my best option was to put that explicit javascript into a new javascript file and add its path to the html like:
<script type="text/javascript" src="/<script_path_here>"></script>
That way my functions that handles the static files on the .py would do their job.

django tinymce javascript not loading on non-admin pages

Im trying to implement TinyMCE on Django, i have successfully implement it on admin page using settings like this :
admin.py:
class TinyMCEAdmin(admin.ModelAdmin):
class Media:
js = ('/media/js/tiny_mce/tiny_mce.js', '/media/js/tiny_mce/textareas.js',)
settings.py :
TINYMCE_JS_ROOT = '/media/js/tiny_mce/'
TINYMCE_JS_URL = '/media/js/tiny_mce/tiny_mce.js'
then when i try to implement it on my form(non-admin) :
forms.py:
from tinymce.widgets import TinyMCE
class Foo(forms.Form):
title = forms.CharField(max_length = 100)
content = forms.CharField(widget = TinyMCE())
When i see the result, it just showing plain html textarea, then i hit "F12" on Chrome, then it says : 'Uncaught reference error: tinyMCE is not defined'.
How do i fix that error? thx guys

Looking at the documentation, if you are using TinyMCE in your form outside of the admin, you need to tell it to include the JS/CSS required to render TinyMCE manually. So in your base template (or somewhere similar) you need to add:
<head>
...
{{ form.media }}
</head>
or you could simply manually load the js:
<head>
<script src="{{ MEDIA_URL }}js/tiny_mce/tiny_mce.js"></script>
<script src="{{ MEDIA_URL }}js/tiny_mce/textareas.js"></script>
</head>
but the former is probably easier

Looks like the file tiny_mce.js has not been loaded in this case.