I'm trying to write a custom blot for Quill so that we can add HTML5 video tags to the editor. I have a working version of this code which works fine in development mode but fails to compile when creating the Angular AOT build.
The error I'm getting is
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (31,26): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (32,22): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (33,21): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (37,22): Property 'cache' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (46,22): Property 'cache' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (67,19): Property 'blotName' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (68,19): Property 'tagName' does not exist on type 'typeof VideoBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (73,22): Property 'cache' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (82,22): Property 'cache' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (103,19): Property 'blotName' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (104,19): Property 'tagName' does not exist on type 'typeof AudioBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (121,20): Property 'blotName' does not exist on type 'typeof SourceBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (122,20): Property 'tagName' does not exist on type 'typeof SourceBlot'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (125,9): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (126,9): Cannot find name 'Quill'.
ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (127,9): Cannot find name 'Quill'.
The blot is defined in quillComponent as
let BlockEmbed = Quill.import('blots/block/embed');
let Inline = Quill.import('blots/inline');
let Block = Quill.import('blots/block');
class VideoBlot extends BlockEmbed {
static create(value) {
this.cache = {};
let node = super.create();
node.setAttribute('controls', '');
node.setAttribute('controlsList', 'nodownload');
node.setAttribute('style', 'max-width:720px');
node.setAttribute('player-source', value.src);
let src = document.createElement('source');
src.setAttribute('src', value.src);
node.appendChild(src);
this.cache.length = 1;//94 + value.src.length;
return node;
}
deleteAt(index: number, length: number) {
super.deleteAt(0, 1);
}
length() {
return 2;
}
static value(node) {
return {
controls: node.getAttribute('controls'),
controlsList: node.getAttribute('controlsList'),
style: node.getAttribute('max-width:720px'),
src: node.getAttribute('player-source')
};
}
}
VideoBlot.blotName = 'clbvideo';
VideoBlot.tagName = 'video';
Quill.register(VideoBlot);
The imports for quillComponent are
import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
import { GlobalService } from "../../service/global.service";
And adding the video to the editor is done through
this.quill.insertEmbed(this.range.index + 1, 'clbvideo', {
src: this.urlText
}, "user");
I have tried many, many different ways of importing Quill and the other dependencies into our quillModule but none of them actually work correctly. I tried almost any suggestion from these two: Reference 1 Reference 2
We use webpack and @ngtools/webpack for processing our typescript sources.
If relevant, this is the tsconfig for our AOT build
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["dom","es2015"],
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"./node_modules/@types"
],
"types": [
"core-js"
]
},
"angularCompilerOptions": {
"genDir": "aot/",
"skipMetadataEmit" : true
}
}
and this is our AOT webpack config
var webpack = require("webpack");
var helpers = require('./config/helpers');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CompressionPlugin = require("compression-webpack-plugin");
var ngtools = require('@ngtools/webpack');
const extractSass = new ExtractTextPlugin({
filename: "./scssStyles.css"
});
module.exports = {
entry: {
'polyfills': './app/polyfills.js',
'vendor': './app/vendor.ts',
'app': './app/main-aot.ts'
},
output: {
path: helpers.root('prod'),
filename: "./[name].js"
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=./assets/[name].[ext]'
},
{
test: /\.ts$/,
loaders: '@ngtools/webpack'
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
include: /\.json$/,
loaders: ["json-loader"]
}
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new ngtools.AotPlugin({
tsConfigPath: helpers.root('./tsconfig.aot.json'),
entryModule: helpers.root('./app/app.module.ts#AppModule')
}),
new ExtractTextPlugin("./styles.css"),
extractSass,
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
};
And this are the quill parts of package-lock.json
"quill": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.2.tgz",
"integrity": "sha512-Tudr3tPSPr64J+Fnr8hsNKbi5e2xueyLROmemOIsIsUIeX+WU7LtA22HWRRHr2gGasqxhah2NzFGe9N32eJkMg==",
"requires": {
"clone": "2.1.1",
"deep-equal": "1.0.1",
"eventemitter3": "2.0.3",
"extend": "3.0.1",
"parchment": "1.1.0",
"quill-delta": "3.6.1"
},
"dependencies": {
"quill-delta": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.1.tgz",
"integrity": "sha512-jSD448mqyDevX0FhdjNppMLHl67vXEzZEDjQrtkfDXI6s6e3WJkJOZpYiVhqxLl4HcYNeAhFT+fhAeX8ef7Cew==",
"requires": {
"deep-equal": "1.0.1",
"extend": "3.0.1",
"fast-diff": "1.1.1"
}
}
}
},
"@types/quill": {
"version": "0.0.31",
"resolved": "https://registry.npmjs.org/@types/quill/-/quill-0.0.31.tgz",
"integrity": "sha512-2Y0Pr5SSNf7kpD4mWMPSYYYyVTLbBNn99DtEYzZ1hlEry1fiWCJYLTYSoGTgPvYiRU4JNRi9LYW0EOV60jN9yA=="
},
FYI: I also tried using the latest version of these.
