How to use parchment - 10 common examples

format(format, value) {
    this.scroll.update();
    let nativeRange = this.getNativeRange();
    if (nativeRange == null || !nativeRange.native.collapsed || Parchment.query(format, Parchment.Scope.BLOCK)) return;
    if (nativeRange.start.node !== this.cursor.textNode) {
      let blot = Parchment.find(nativeRange.start.node, false);
      if (blot == null) return;
      // TODO Give blot ability to not split
      if (blot instanceof Parchment.Leaf) {
        let after = blot.split(nativeRange.start.offset);
        blot.parent.insertBefore(this.cursor, after);
      } else {
        blot.insertBefore(this.cursor, nativeRange.start.node);  // Should never happen
      }
      this.cursor.attach();
    }
    this.cursor.format(format, value);
    this.scroll.optimize();
    this.setNativeRange(this.cursor.textNode, this.cursor.textNode.data.length);
    this.update();
  }

show(img) {
        // keep track of this img element
        this.img = img;
        const rect = this.img.getBoundingClientRect();
        const rootRect = this.quill.root.getBoundingClientRect();
        this.showBox(rect, rootRect);
        // 移动游标到图片右侧
        let blot = Parchment.find(img);
        let index = blot.offset(this.quill.scroll);
        console.log('image index', index);
        this.quill.setSelection(index + 1, 0);
        //鼠标点击，删除键等操作的时候，去掉选中态
        this.quill.once('editor-change',()=>{this.hide();});
    }

format(format, value) {
    this.scroll.update();
    const nativeRange = this.getNativeRange();
    if (
      nativeRange == null ||
      !nativeRange.native.collapsed ||
      this.scroll.query(format, Scope.BLOCK)
    )
      return;
    if (nativeRange.start.node !== this.cursor.textNode) {
      const blot = this.scroll.find(nativeRange.start.node, false);
      if (blot == null) return;
      // TODO Give blot ability to not split
      if (blot instanceof LeafBlot) {
        const after = blot.split(nativeRange.start.offset);
        blot.parent.insertBefore(this.cursor, after);
      } else {
        blot.insertBefore(this.cursor, nativeRange.start.node); // Should never happen
      }
      this.cursor.attach();
    }
    this.cursor.format(format, value);
    this.scroll.optimize();

format(format, value) {
    this.scroll.update();
    let nativeRange = this.getNativeRange();
    if (nativeRange == null || !nativeRange.native.collapsed || Parchment.query(format, Parchment.Scope.BLOCK)) return;
    if (nativeRange.start.node !== this.cursor.textNode) {
      let blot = Parchment.find(nativeRange.start.node, false);
      if (blot == null) return;
      // TODO Give blot ability to not split
      if (blot instanceof Parchment.Leaf) {
        let after = blot.split(nativeRange.start.offset);
        blot.parent.insertBefore(this.cursor, after);
      } else {
        blot.insertBefore(this.cursor, nativeRange.start.node);  // Should never happen
      }
      this.cursor.attach();
    }
    this.cursor.format(format, value);
    this.scroll.optimize();
    this.setNativeRange(this.cursor.textNode, this.cursor.textNode.data.length);
    this.update();
  }

Object.keys(formats).forEach((name) => {
          // Clean functionality in existing apps only clean inline formats
          if (Parchment.query(name, Parchment.Scope.INLINE) != null) {
            this.quill.format(name, false);
          }
        });
      } else {

setFormatUsx(elem, format);
      } else {
        super.format(name, value);
      }
    }
  }

  Scroll.allowedChildren.push(ParaBlock);
  Scroll.allowedChildren.push(ChapterEmbed);

  const HighlightClass = new QuillParchment.Attributor.Class('highlight', 'highlight', {
    scope: Parchment.Scope.INLINE
  });

  const SegmentClass = new QuillParchment.Attributor.Attribute('segment', 'data-segment', {
    scope: Parchment.Scope.INLINE
  });

  // Add a suggest tooltip to Quill
  class SuggestionsTooltip implements Tooltip {
    quill: Quill;
    boundsContainer: HTMLElement;
    root: HTMLElement;

    private top: number;

    constructor(quill: Quill, boundsContainer: HTMLElement) {
      this.quill = quill;
      this.boundsContainer = boundsContainer || document.body;
      this.root = quill.addContainer('ql-suggest-tooltip');
      if (this.quill.root === this.quill.scrollingContainer) {
        this.quill.root.addEventListener('scroll', () => {

import Delta from 'rich-text/lib/delta';
import Parchment from 'parchment';
import logger from '../lib/logger';


let debug = logger('quill:code-block');


class TokenAttributor extends Parchment.Attributor.Class {
  value(domNode) {
    return undefined;
  }
}

let CodeToken = new TokenAttributor('token', 'hljs', {
  scope: Parchment.Scope.INLINE
});


class CodeBlock extends Block {
  format(name, value) {
    // TODO allow changing language
    debug.warn(`format(${name}, ${value}) called on code block`);
  }

  formatAt(index, length, name, value) {
    debug.warn(`formatAt(${index}, ${length}, ${name}, ${value}) called on code block`);
  }

  formats() {
    return {
      'code-block': this.domNode.getAttribute('data-language') || true

optimize() {
    super.optimize();

    // Add parent TR and TABLE when missing
    let parent = this.parent;
    if (parent != null && parent.statics.blotName != 'tr') {
      // we will mark td position, put in table and replace mark
      let mark = Parchment.create('block');
      this.parent.insertBefore(mark, this.next);
      let table = Parchment.create('table', this.domNode.getAttribute('table_id'));
      let tr = Parchment.create('tr', this.domNode.getAttribute('row_id'));
      table.appendChild(tr);
      tr.appendChild(this);
      table.replace(mark)
    }

    // merge same TD id
    let next = this.next;
    if (next != null && next.prev === this &&
        next.statics.blotName === this.statics.blotName &&
        next.domNode.tagName === this.domNode.tagName &&
        next.domNode.getAttribute('cell_id') === this.domNode.getAttribute('cell_id')) {
      next.moveChildren(this);
      next.remove();
    }
  }

} else {
          value = selected.value || false;
        }
      } else {
        if (input.classList.contains('ql-active')) {
          value = false;
        } else {
          value = input.value || !input.hasAttribute('value');
        }
        e.preventDefault();
      }
      this.quill.focus();
      let [range, ] = this.quill.selection.getRange();
      if (this.handlers[format] != null) {
        this.handlers[format].call(this, value);
      } else if (Parchment.query(format).prototype instanceof Parchment.Embed) {
        value = prompt(`Enter ${format}`);
        if (!value) return;
        this.quill.updateContents(new Delta()
          .retain(range.index)
          .delete(range.length)
          .insert({ [format]: value })
        , Quill.sources.USER);
      } else {
        this.quill.format(format, value, Quill.sources.USER);
      }
      this.update(range);
    });
    // TODO use weakmap

Object.keys(formats).forEach((name) => {
          // Clean functionality in existing apps only clean inline formats
          if (Parchment.query(name, Parchment.Scope.INLINE) != null) {
            this.quill.format(name, false);
          }
        });
      } else {