How to use the quill.import function in quill

import { QuillEditorComponent } from 'ngx-quill';

import Quill from 'quill';
import 'quill-emoji/dist/quill-emoji.js';
import 'quill-emoji/dist/quill-emoji.css';

// add image resize module
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

// add mention module
import 'quill-mention';

// override p with div tag
const Parchment = Quill.import('parchment');
let Block = Parchment.query('block');

Block.tagName = 'DIV';
// or class NewBlock extends Block {}; NewBlock.tagName = 'DIV';
Quill.register(Block /* or NewBlock */, true);

import Counter from './counter';
Quill.register('modules/counter', Counter)

// Add fonts to whitelist
var Font = Quill.import('formats/font');
// We do not add Aref Ruqaa since it is the default
Font.whitelist = ['mirza', 'aref', 'sans-serif', 'monospace', 'serif'];
Quill.register(Font, true);

@Component({

return node;
	}
}

Quill.register(MyLink, true);

// image uploader
const Uploader = Quill.import('modules/uploader');
Uploader.DEFAULTS.mimetypes.push('image/gif');

// inline style
const BackgroundStyle = Quill.import('attributors/style/background');
const ColorStyle = Quill.import('attributors/style/color');
const FontStyle = Quill.import('attributors/style/font');
const AlignStyle = Quill.import('attributors/style/align');
const DirectionStyle = Quill.import('attributors/style/direction');
Quill.register(BackgroundStyle, true);
Quill.register(ColorStyle, true);
Quill.register(FontStyle, true);
Quill.register(AlignStyle, true);
Quill.register(DirectionStyle, true);

frappe.ui.form.ControlTextEditor = frappe.ui.form.ControlCode.extend({
	make_wrapper() {
		this._super();
		this.$wrapper.find(".like-disabled-input").addClass('text-editor-print');
	},

	make_input() {
		this.has_input = true;
		this.make_quill_editor();
	},

import Quill from 'quill';
let BlockEmbed = Quill.import('blots/block/embed');

class Attachment extends BlockEmbed {
    static create(value: any) {
        let node = super.create();
        node.setAttribute('href', value.href);
        node.setAttribute('class', 'attachment');
        node.setAttribute('target', '_blank');
        node.setAttribute('data-toggle', 'popover');
        node.setAttribute('tabindex', '0');
        node.setAttribute('attachment-name', value.attachmentName);
        node.innerHTML = `<span class="oi oi-paperclip"></span> ${value.attachmentName}`;

        return node;
    }
  
    static value(node: any) {

import Quill from 'quill'
import HorizontalRule from './formats/hr'

Quill.register('formats/horizontal', HorizontalRule);
const Module = Quill.import('core/module');

class MarkdownToolbar extends Module {
  constructor(quill, options) {
    super(quill, options);

    this.quill = quill;

    const toolbar = quill.getModule('toolbar');
    toolbar.addHandler('markdown', this.markdownHandler.bind(this));

    this.matches = [{
      name: 'header',
      pattern: /^(#){1,6}\s/g,
      action: (text, pattern, lineStartIndex) => {
        const match = pattern.exec(text);
        if (!match) return;

import Quill from 'quill'

let BlockEmbed = Quill.import('blots/block/embed')

/**
 * Supported embeddable link types:
 *      YouTube
 *      Vimeo
 */
class EmbedVideoBlot extends BlockEmbed {
    static create(url) {
        let node = super.create();
        let videoObj = parseVideo(url);

        if (videoObj.type === 'youtube') {
            let iframe = document.createElement('iframe');

            node.setAttribute('class', 'ql-video');

import Quill from "quill"
import { getRelativeRect } from '../utils'
import Header from './header'

const Break = Quill.import("blots/break")
const Block = Quill.import("blots/block")
const Container = Quill.import("blots/container")

const COL_ATTRIBUTES = ["width"]
const COL_DEFAULT = {
  width: 100
}
const CELL_IDENTITY_KEYS = ["row", "cell"]
const CELL_ATTRIBUTES = ["rowspan", "colspan"]
const CELL_DEFAULT = {
  rowspan: 1,
  colspan: 1
}
const ERROR_LIMIT = 5

class TableCellLine extends Block {
  static create(value) {
    const node = super.create(value)

this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {
            var plaintext = node.innerText;
            var Delta = Quill.import('delta');
            return new Delta().insert(plaintext);
        });

* the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see .
 */

import QuillEditor from 'quill';
import EmbedType from 'quill/blots/embed';

const Embed: EmbedType = QuillEditor.import('blots/embed');

export class AttributeBlot extends Embed {

  public static blotName = 'attribute';
  public static className = 'attribute';
  public static tagName = 'span';

  public static create(value: any): Node {
    const attribute: { id: string, value: any } = value;
    const node: Node = super.create(attribute.value);

    node.textContent = attribute.value;

    node['dataset'].attributeId = attribute.id;
    node['dataset'].attributeValue = attribute.value;

import Quill, { DeltaStatic } from 'quill';
import { RealtimeData } from 'xforge-common/models/realtime-data';
import { RealtimeDoc } from 'xforge-common/realtime-doc';
import { RealtimeOfflineStore } from 'xforge-common/realtime-offline-store';
import { Text } from './text';

export const Delta: new () => DeltaStatic = Quill.import('delta');

export type TextType = 'source' | 'target';

export function getTextDataIdStr(textId: string, chapter: number, textType: TextType): string {
  return `${textId}:${chapter}:${textType}`;
}

export class TextDataId {
  constructor(
    public readonly textId: string,
    public readonly chapter: number,
    public readonly textType: TextType = 'target'
  ) {}

  toString(): string {
    return getTextDataIdStr(this.textId, this.chapter, this.textType);

import Quill from 'quill'
import Url from 'url-parse'

let BlockEmbed = Quill.import('blots/block/embed');

/**
 * Supported embeddable link types:
 *      Twitter
 *      Transistor
 */
class EmbedLinkBlot extends BlockEmbed {
    static create(value) {
        let node = super.create();

        let url = new Url(value);
        let id = url.pathname.substr(url.pathname.lastIndexOf('/') + 1);

        node.dataset.url = url;
        node.dataset.id = id;