I'm trying to create a custom Quill theme, extending the bubble one. I'm facing a strange ES6 inheritance problem, where it seems I cannot call super() in my constructor. Here is my code:
import BubbleTheme, { BubbleTooltip } from 'quill/themes/bubble'
class LoopTheme extends BubbleTheme {
constructor (quill, options) {
super(quill, options)
}
extendToolbar (toolbar) {
super.extendToolbar(toolbar)
this.tooltip = new LoopTooltip(this.quill, this.options.bounds);
this.tooltip.root.appendChild(toolbar.container);
}
}
class LoopTooltip extends BubbleTooltip {
}
LoopTooltip.TEMPLATE = [
'<span class=ql-tooltip-arrow></span>',
'<div class=ql-tooltip-editor>',
'<input type=text data-formula=e=mc^2 data-link=https://myurl.com data-video=Embed URL>',
'<a class=ql-close></a>',
'</div>'
].join('');
export { LoopTooltip, LoopTheme as default }
Bubble theme could be found here
My Babel presets:
{
presets: [
es2015,
es2016,
stage-0,
react
]
}
Webpack js file config:
module: {
rules: [
{
test: /.js$/,
include: [
resolve(__dirname, 'app')
],
loader: 'babel-loader',
exclude: /node_modules/
}, {...
Output generated code:
var LoopTheme = function (_BubbleTheme) {
_inherits(LoopTheme, _BubbleTheme);
function LoopTheme() {
_classCallCheck(this, LoopTheme);
return _possibleConstructorReturn(this, (LoopTheme.__proto__ || Object.getPrototypeOf(LoopTheme)).apply(this, arguments));
}
_createClass(LoopTheme, [{
key: 'extendToolbar',
value: function extendToolbar(toolbar) {
_get(LoopTheme.prototype.__proto__ || Object.getPrototypeOf(LoopTheme.prototype), 'extendToolbar', this).call(this, toolbar);
this.tooltip = new LoopTooltip(this.quill, this.options.bounds);
this.tooltip.root.appendChild(toolbar.container);
}
}]);
return LoopTheme;
}(_bubble2.default);
var LoopTooltip = function (_BubbleTooltip) {
_inherits(LoopTooltip, _BubbleTooltip);
function LoopTooltip() {
_classCallCheck(this, LoopTooltip);
return _possibleConstructorReturn(this, (LoopTooltip.__proto__ || Object.getPrototypeOf(LoopTooltip)).apply(this, arguments));
}
return LoopTooltip;
}(_bubble.BubbleTooltip);
LoopTooltip.TEMPLATE = ['<span class=ql-tooltip-arrow></span>', '<div class=ql-tooltip-editor>', '<input type=text data-formula=e=mc^2 data-link=myurl.com data-video=Embed URL>', '<a class=ql-close></a>', '</div>'].join('');
exports.LoopTooltip = LoopTooltip;
exports.default = LoopTheme;
I'm having the following error: events.js:59 Uncaught TypeError: Class constructor BubbleTheme cannot be invoked without 'new'. However, the LoopTheme is correctly called with new by Quill here. When I debug step by step, I correctly enter the LoopTheme constructor, and the error is raised when super is called.
Am I missing something here? I've always used inheritance, and I use it elsewhere in my code (between my classes), where here am I having trouble?
Thanks for your help
