export const em = {
  parseDOM: [
    {
      tag: "i",
      getAttrs: el => {
        if ( el.className && el.matches(":empty") ) return false;
      }
    },
    {tag: "em"},
    {style: "font-style=italic"}
  ],
  toDOM: () => ["em", 0]
};

/* -------------------------------------------- */

export const strong = {
  parseDOM: [
    {tag: "strong"},
    {tag: "b"},
    {style: "font-weight", getAttrs: weight => /^(bold(er)?|[5-9]\d{2})$/.test(weight) && null}
  ],
  toDOM: () => ["strong", 0]
};

/* -------------------------------------------- */

export const cite = {
  parseDOM: [{tag: "cite"}],
  toDOM: () => ["cite", 0]
};

/* -------------------------------------------- */

export const code = {
  parseDOM: [{tag: "code"}],
  toDOM: () => ["code", 0]
};

/* -------------------------------------------- */

export const underline = {
  parseDOM: [{tag: "u"}, {style: "text-decoration=underline"}],
  toDOM: () => ["span", {style: "text-decoration: underline;"}, 0]
};

/* -------------------------------------------- */

export const strikethrough = {
  parseDOM: [{tag: "s"}, {tag: "del"}, {style: "text-decoration=line-through"}],
  toDOM: () => ["s", 0]
};

/* -------------------------------------------- */

export const superscript = {
  parseDOM: [{tag: "sup"}, {style: "vertical-align=super"}],
  toDOM: () => ["sup", 0]
};

/* -------------------------------------------- */

export const subscript = {
  parseDOM: [{tag: "sub"}, {style: "vertical-align=sub"}],
  toDOM: () => ["sub", 0]
};

/* -------------------------------------------- */

export const span = {
  parseDOM: [{
    tag: "span", getAttrs: el => {
      const { color, fontFamily, fontSize } = el.style;
      // If only one of these styles is set, we can handle this element with a specific mark. Otherwise, we handle it
      // with a generic mark that preserves the styles.
      if ( [color, fontFamily, fontSize].filter(_ => _).length === 1 ) return false;
      return {};
    }
  }],
  toDOM: () => ["span", 0]
};

/* -------------------------------------------- */

export const font = {
  attrs: {
    family: {}
  },
  managed: {
    styles: ["font-family"]
  },
  parseDOM: [{
    tag: '*[style*="font-family:"]',
    getAttrs: el => ({ family: el.style.fontFamily.replace(/["']/g, "") })
  }],
  toDOM: node => ["span", {style: `font-family: '${node.attrs.family}'`}]
};

/* -------------------------------------------- */

export const size = {
  attrs: {
    size: {}
  },
  managed: {
    styles: ["font-size"]
  },
  parseDOM: [{
    tag: '*[style*="font-size:"]',
    getAttrs: el => ({ size: el.style.fontSize })
  }],
  toDOM: node => ["span", {style: `font-size: ${node.attrs.size}`}]
};

/* -------------------------------------------- */

export const color = {
  attrs: {
    color: {}
  },
  managed: {
    styles: ["color"]
  },
  parseDOM: [{
    tag: '*[style*="color:"]',
    getAttrs: el => ({ color: el.style.color })
  }],
  toDOM: node => ["span", {style: `color: ${node.attrs.color}`}]
};
