How to use the quill.register function in quill

// Define custom inline blot for find highlighting
const Inline = Quill.import('blots/inline');
class HighlightBlot extends Inline {}
HighlightBlot.blotName = 'highlight';
HighlightBlot.className = 'highlight';
HighlightBlot.tagName = 'hl';

// Custom embedded block blot for line separator
const Block = Quill.import('blots/block');
class HrBlot extends Block {}
HrBlot.blotName = 'separator';
HrBlot.tagName = 'hr';

// Register the blots
Quill.register(HighlightBlot);
Quill.register(HrBlot);

// Initialize the editor
const quill = new Quill('.editor', {
  debug: 'error',
  theme: 'snow',
  modules: {
    history: {
      userOnly: true,
    },
  },
});

module.exports = {
  init() {
    // Automatically focus the editor

static register() {
    Quill.register(TableCol, true);
    Quill.register(TableColGroup, true);
    Quill.register(TableCellLine, true);
    Quill.register(TableCell, true);
    Quill.register(TableRow, true);
    Quill.register(TableBody, true);
    Quill.register(TableContainer, true);
    Quill.register(TableViewWrapper, true);
    Quill.register(TableViewWrapper, true);
    // register customized Header，overwriting quill built-in Header
    // Quill.register('formats/header', Header, true);
  }

} else {
        blot.setAttribute('data-notemaps-id', uuidv4());
      }
      return blot;
    }
    static formats(node) {
      return node.getAttribute('data-notemaps-id');
    }
  }
  Note.blotName = 'note';

  class Name extends Note {}
  Name.blotName = 'note-name';
  Name.tagName = 'H1';
  Name.className = 'note-name';
  Quill.register(Name);

  class Occurrence extends Note {}
  Occurrence.blotName = 'note-occurrence';
  Occurrence.tagName = 'p';
  Occurrence.className = 'note-occurrence';
  Quill.register(Occurrence);

  class NoteType extends Inline {
    static create(value) {
      let blot = super.create();
      if (typeof value == 'string') {
        blot.setAttribute('data-notemaps-type-id', value);
      } else {
        blot.setAttribute('data-notemaps-type-id', uuidv4());
      }
      return blot;

constructor() {
        Quill.register('modules/mathEditor', QuillMathEditor, true);
        Quill.register('modules/formula', Formula, true);
    }

this.domNode.setAttribute(name, value);
          } else {
            this.domNode.removeAttribute(name, value);
          }
        } else {
          super.format(name, value);
        }
    }
}



EmojiBlotTwo.blotName = 'boltTwo';
EmojiBlotTwo.tagName = 'img';

Quill.register({'formats/boltTwo': EmojiBlotTwo}, true);

export default EmojiBlotTwo;

import FormItem from '../../higherOrders/FormItem'
import { compose } from '../../utils/compose'
import Quill from 'quill'
import Editor from './Editor'
import Button from './Button'
import ImageBlot from './ImageBlot'

import 'quill/dist/quill.snow.css'


Quill.register(ImageBlot)

const Component = compose(
  FormItem.register('editor', {})
)(Editor)

Component.Button = Button

export default Component

* 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 {Component, EventEmitter, HostListener, Input, Output} from '@angular/core';
import QuillEditor, {DeltaOperation, DeltaStatic, Quill, RangeStatic} from 'quill';
import QuillDeltaToHtmlConverter from 'quill-delta-to-html';
import {AttributeModel, CollectionModel} from '../../../../core/store/collections/collection.model';
import {DocumentModel} from '../../../../core/store/documents/document.model';
import {SmartDocPartModel} from '../../../../core/store/smartdoc/smartdoc.model';
import {AttributeBlot} from './attribute.blot';

const Delta = QuillEditor.import('delta');
QuillEditor.register(AttributeBlot);

@Component({
  selector: 'smartdoc-text',
  templateUrl: './smartdoc-text.component.html',
  styleUrls: ['./smartdoc-text.component.scss']
})
export class SmartDocTextComponent {

  @Input()
  public collection: CollectionModel;

  @Input()
  public document: DocumentModel;

  @Input()
  public path: number[];

import electronMessager from '../../../utils/electron-messaging/electronMessager';
import { RESTORE_NOTE_FROM_TRASH, REMOVE_NOTE_FROM_DRIVE, GET_NOTE_FROM_TRASH } from '../../../constants/index';
import renameAttachment from '../../../utils/quill-modules/rename-attachment/renameAttachment';

export interface Props {
    noteContent?: string;
    notebook?: string;
    note?: string;
    trash?: any;
    updateTrash?: Function;
    emptyLastOpenedTrash: Function;
}

export interface State { }

Quill.register('modules/attachmentPopoverTrash', (quill: Quill, options: any) => {
    renameAttachment(quill, options);
});

export class TrashcanEditor extends React.Component {

    quill: Quill;

    constructor(props: Props) {
        super(props);
    }

    componentDidMount() {
        this.quill = new Quill('#quill-container', {
            modules: {
                toolbar: {
                    container: '#toolbar'

return node;
  }
  deleteAt(index, length) {
    super.deleteAt(index, 2);
    this.cache = {};
  }
  static value(domNode) {
    const { src, custom } = domNode.dataset;
    return { src, custom };
  }
}

LoadingImage.blotName = "imageBlot";
LoadingImage.className = "image-uploading";
LoadingImage.tagName = "span";
Quill.register({ "formats/imageBlot": LoadingImage });

import Quill from 'quill';
let AlignStyle = Quill.import('attributors/style/align')
let BackgroundStyle = Quill.import('attributors/style/background')
let ColorStyle = Quill.import('attributors/style/color')
let DirectionStyle = Quill.import('attributors/style/direction')
let FontStyle = Quill.import('attributors/style/font')

Quill.register(AlignStyle, true);
Quill.register(BackgroundStyle, true);
Quill.register(ColorStyle, true);
Quill.register(DirectionStyle, true);
Quill.register(FontStyle, true);

let SizeAttributor = Quill.import('attributors/style/size');
SizeAttributor.whitelist = ['10px', '12px', '18px', '32px'];
Quill.register(SizeAttributor, true);

export default {
  createEditor: function($el, config, clazz) {
    let quill = new Quill($el, config);
    this.hookEditor(quill, clazz);
    return quill;
  },

  hookEditor: function(quill, clazz) {
    let unprivilegedEditor = this.makeUnprivilegedEditor(quill);
    
    this.handleTextChange = function(delta, oldDelta, source) {