How to use quill - 10 common examples

const testConnector = new TestConnector(prng)
  result.testConnector = testConnector
  for (let i = 0; i < opts.users; i++) {
    let y = testConnector.createY(i)
    result.users.push(y)
    result['array' + i] = y.define('array', Y.Array)
    result['map' + i] = y.define('map', Y.Map)
    const yxml = y.define('xml', Y.XmlElement)
    result['xml' + i] = yxml
    const dom = document.createElement('my-dom')
    const domBinding = new DomBinding(yxml, dom, { filter })
    result['domBinding' + i] = domBinding
    result['dom' + i] = dom
    const textType = y.define('text', Y.Text)
    result['text' + i] = textType
    const quill = new Quill(document.createElement('div'))
    result['quillBinding' + i] = new QuillBinding(textType, quill)
    result['quill' + i] = quill
    y.quill = quill // put quill on the y object (so we can use it later)
    y.dom = dom
    y.domBinding = domBinding
  }
  testConnector.syncAll()
  return result
}

function test_DeltaDiff() {
    const a = new Delta().insert('Hello');
    const b = new Delta().insert('Hello!');

    const diff = a.diff(b);  // { ops: [{ retain: 5 }, { insert: '!' }] }
                           // a.compose(diff) == b
    const diff2 = a.diff(b, 0);  // { ops: [{ retain: 5 }, { insert: '!' }] }
                               // a.compose(diff) == b
}

function test_DeltaCompose() {
    const a = new Delta().insert('abc');
    const b = new Delta().retain(1).delete(1);

    const composed = a.compose(b);  // composed == new Delta().insert('ac');
}

function test_DeltaCompose() {
    const a = new Delta().insert('abc');
    const b = new Delta().retain(1).delete(1);

    const composed = a.compose(b);  // composed == new Delta().insert('ac');
}

function test_DeltatransformPosition() {
    const delta = new Delta().retain(5).insert('a');
    const n1: number = delta.transformPosition(4); // 4
    const n2: number = delta.transformPosition(5); // 6
    const n3: number = delta.transformPosition(5, true);
    const n4: number = delta.transformPosition(5, false);
}

function test_DeltaTransform() {
    const a = new Delta().insert('a');
    const b = new Delta().insert('b').retain(5).insert('c');

    const d1: DeltaStatic = a.transform(b, true);  // new Delta().retain(1).insert('b').retain(5).insert('c');
    const d2: DeltaStatic = a.transform(b, false); // new Delta().insert('b').retain(6).insert('c');
    const n1: number = a.transform(5);
    const n2: number = a.transform(5, true);
    const n3: number = a.transform(5, false);
}

// 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

VariableField.className = 'variable';
			VariableField.tagName = 'span';

			Quill.register({
				'formats/variable': VariableField,
			});

			AutoFormat.DEFAULTS = {
				expression: {
					trigger: /\B[\w\s]/,
					find: /\{\{[^\s,;:!?}]+\}\}/i,
					format: 'variable',
				},
			};

			this.editor = new Quill(this.$refs['expression-editor'] as Element, {
				readOnly: !!this.resolvedValue,
				modules: {
					autoformat: {},
				},
			});

			this.editor.root.addEventListener('blur', (event: Event) => {
				this.$emit('blur', event);
			});

			this.initValue();

			if (!this.resolvedValue) {
				// Only call update when not resolved value gets displayed
				this.setFocus();
				this.editor.on('text-change', () => this.update());

componentDidMount() {
        // After this component gets initialized for the first time it will
        // receive props whose value will stay the same the next time the
        // component gets mounted - this means if we go to a notebook, the first
        // time content of the last opened note will get loaded, but on the 2nd
        // run it won't. Code below explicitly requests note data for this case.
        let lastOpenedNote = this.props.lastOpenedNote as string;
        if (lastOpenedNote.length) {
            let data = {
                notebook: this.state.notebookName,
                note: lastOpenedNote
            };
            ElectronMessager.sendMessageWithIpcRenderer(GET_NOTE_CONTENT, data);
        }

        this.quill = new Quill('#quill-container', {
            modules: {
                toolbar: {
                    container: '#toolbar',
                    handlers: {
                        'omega': function(value: any) {
                            console.log(value);
                        }
                    }
                },
                // toolbar: [
                // ['bold', 'italic', 'underline'],
                // ['image', 'code-block'],
                // ['trash'],
                // ],
                resizableImages: {},
                renameAttachment: {},

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);
  }