实现一个简单的编辑器

const formatBlock = 'formatBlock'
const appendChild = (parent, child) => parent.appendChild(child)
const createElement = tag => document.createElement(tag)
const queryCommandValue = command => document.queryCommandValue(command)
export const exec = (command, value = null) => document.execCommand(command, false, value)

const tools = {
  bold: {
    icon: 'B',
    title: 'Bold',
    handler: () => exec('bold')
  },
  heading1: {
    icon: 'H1',
    title: 'Heading 1',
    handler: () => {
      if (queryCommandValue(formatBlock) === 'h1') {
        exec(formatBlock, '<p>')
      } else {
        exec(formatBlock, '<h1>')
      }
    }
  },
  paragraph: {
    icon: 'P',
    title: 'Paragraph',
    handler: () => exec(formatBlock, '<p>')
  },
  quote: {
    icon: '“',
    title: 'Quote',
    handler: () => {
      exec(formatBlock, '<blockquote>')
      const { focusNode } = window.getSelection();
      const textBlock = createElement('p');
      const blockquote = focusNode.nodeType === 3 ? focusNode.parentElement : focusNode;
      
      textBlock.appendChild(focusNode.nodeType === 3 ? focusNode : focusNode.firstChild);
      blockquote.appendChild(textBlock)
        
    }
  },
  olist: {
    icon: '<small>1<small>—',
    title: 'Ordered List',
    handler: () => exec('insertOrderedList')
  },
  link: {
    icon: '?',
    title: 'Link',
    handler: () => {
      const url = window.prompt('Enter the link URL')
      if (url) exec('createLink', url)
    }
  },
  image: {
    icon: '&#128247;',
    title: 'Image',
    handler: () => {
      const url = window.prompt('Enter the image URL')
      if (url) exec('insertImage', url)
    }
  }
}
const editor = document.querySelector('#editor');
const toolbar = document.querySelector('#toolbar')
editor.focus();
const wrapParagraph = () => {
  if (!editor.firstChild || editor.firstChild.nodeType === 3) exec(formatBlock, `<p>`)
}
wrapParagraph();
editor.onkeydown = event => {
  if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
    setTimeout(() => exec(formatBlock, `<p>`), 0)
  }
}
Object.values(tools).forEach((tool) => {
  const button = createElement('button')
  button.innerHTML = tool.icon
  button.title = tool.title
  button.setAttribute('type', 'button')
  button.onclick = () => tool.handler() && editor.focus()
  appendChild(toolbar, button)
})

exec('defaultParagraphSeparator', 'p')

class Node {
  constructor(name, data, children = []) {
    this.name = name;
    this.data = data;
    this.children = children;
  }
}
class TextNode extends Node {
  constructor(data) {
    super('text', data)
  }
}
class DOMNode extends Node {
  constructor(name, data) {
    super(name, data)
  }
}
class EDOMParser {
  constructor() {
    this.parser = new DOMParser();
    this.top = new DOMNode('body');
  }
  parse(html) {
    const dom = this.parser.parseFromString(html, 'text/html').body;
    for(let i = 0; i < dom.childNodes.length; i++) {
      const context = new ParseContext(dom.childNodes[i], '')
      if (context.content) {
        this.top.children.push(context.content);
      }
    }
    return this.top;
  }
}
class ParseContext {
  constructor(dom) {
    this.dom = dom;
    this.start();
  }
  start() {
    if (this.dom.nodeType === 1 && this.dom.nodeName === 'P') {
      this.content = new DOMNode('P');
      this.parseInner(this.dom)
    }
  }
  parseInner(dom) {
    for(let i = 0; i < dom.childNodes.length; i++) {
      this.addNode(dom.childNodes[i]);
    }
  }
  addNode(dom) {
    if (dom.nodeType === 3) {
      this.addTextNode(dom);
    }  else {
      this.parseInner(dom)
    }
  }
  addTextNode(dom) {
    this.content.children.push(new TextNode(dom.textContent))
  }
}
export { EDOMParser }