[HELP]: Font not loading when using with webpack - grapesjs is trying to load fonts with relative path

I am trying to load grapesjs editor in a simple html file and it does not load the grapesjs own icons or the fontawesome icons.

Now, I looked into these 2 issues #2320 and #1474 but they did not help me in resolving my problem, hence I am raising it.

Below is my source script (demo.js) which is then used by webpack to package it up as ``bundle.js`

import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css';
import grapesjs from 'grapesjs';
import gjspresetwebpage from 'grapesjs-preset-webpage';

document.addEventListener("DOMContentLoaded", function (event) {
	const editor = grapesjs.init({
		container: '#gjs',
		fromElement: true,
		height: '300px',
		width: 'auto',
		storageManager: false,
		panels: {defaults: []},
		plugins: ['gjs-preset-webpage'],
		pluginsOpts: {
			'gjs-preset-webpage': {
			}
		},
	});
});

My webpack configuration is as below :

const path = require('path');
module.exports = {
	entry: {
		bundle: './assets/js/demo.js',
	},
	mode: 'development',
	devtool: 'source-map',
	output: {
		path: path.join(__dirname, '../public/js'),
		filename: '[name].js',
	},
	module: {
		rules: [
			{
				test: /\.(js)$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			},
			{
				test: /\.css$/i,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
				loader: 'file-loader',
				options: {
					name: '[name].[ext]'
				},
			}
		]
	},
	resolve: {
		extensions: ['*', '.js']
	},
};

I can see that when I run webpack to bundle everything, it creates the bundle.js and also outputs the font files .woff, .svg for both main and fontawesome icons etc.

But when I try to use them in my html, it always returns an error when trying to loading icons : downloadable font: download failed......... source: http://localhost/editor/fonts/fontawesome-webfont.woff2

One interesting thing I noticed is that the fonts are loading fine if I copy paste them into the same directory where my html for editor is located

i.e. the html file is at /public/editor/demo.html and the files output by webpack are located as /public/js/ (bundle.js and font files) - so if I copy font files to /public/editor/fonts/ it works fine.

So it seems to me that grapesjs is trying to load the font files at a location relative to my demo.html file i.e. /public/editor/fonts/.

If it matters or someone needs to look at, then below is my html code for the editor:

....
<script type="text/javascript" src="/js/edoc.js"></script>
<div style="margin-top: 200px;" class="panel__top">
	<div class="panel__basic-actions"></div>
</div>
<div id="gjs">
	<strong>Sample text</strong>
</div>
<style>
	<!-- styles from the Getting Started page -->
</style>
....

P.S. Apologies and ignore if I am not following ant conventions/best practices, etc. as I am new to webpack, npm, etc. Also I may be making a very trivial mistake, but I have already spent hours to figure how to resolve this problem