Fix bold emoji in Chrome. Bug: https://code.google.com/p/chromium/issues/detail?id=441946

fix_bold_emoji.coffee

# https://github.com/mathiasbynens/emoji-regex
BC.EMOJI_PATTERN = /(?:0\u20E3|1\u20E3|2\u20E3|3\u20E3|4\u20E3|5\u20E3|6\u20E3|7\u20E3|8\u20E3|9\u20E3|#\u20E3|\*\u20E3|\uD83C(?:\uDDE6\uD83C(?:\uDDE8|\uDDE9|\uDDEA|\uDDEB|\uDDEC|\uDDEE|\uDDF1|\uDDF2|\uDDF4|\uDDF6|\uDDF7|\uDDF8|\uDDF9|\uDDFA|\uDDFC|\uDDFD|\uDDFF)|\uDDE7\uD83C(?:\uDDE6|\uDDE7|\uDDE9|\uDDEA|\uDDEB|\uDDEC|\uDDED|\uDDEE|\uDDEF|\uDDF1|\uDDF2|\uDDF3|\uDDF4|\uDDF6|\uDDF7|\uDDF8|\uDDF9|\uDDFB|\uDDFC|\uDDFE|\uDDFF)|\uDDE8\uD83C(?:\uDDE6|\uDDE8|\uDDE9|\uDDEB|\uDDEC|\uDDED|\uDDEE|\uDDF0|\uDDF1|\uDDF2|\uDDF3|\uDDF4|\uDDF5|\uDDF7|\uDDFA|\uDDFB|\uDDFC|\uDDFD|\uDDFE|\uDDFF)|\uDDE9\uD83C(?:\uDDEA|\uDDEC|\uDDEF|\uDDF0|\uDDF2|\uDDF4|\uDDFF)|\uDDEA\uD83C(?:\uDDE6|\uDDE8|\uDDEA|\uDDEC|\uDDED|\uDDF7|\uDDF8|\uDDF9|\uDDFA)|\uDDEB\uD83C(?:\uDDEE|\uDDEF|\uDDF0|\uDDF2|\uDDF4|\uDDF7)|\uDDEC\uD83C(?:\uDDE6|\uDDE7|\uDDE9|\uDDEA|\uDDEB|\uDDEC|\uDDED|\uDDEE|\uDDF1|\uDDF2|\uDDF3|\uDDF5|\uDDF6|\uDDF7|\uDDF8|\uDDF9|\uDDFA|\uDDFC|\uDDFE)|\uDDED\uD83C(?:\uDDF0|\uDDF2|\uDDF3|\uDDF7|\uDDF9|\uDDFA)|\uDDEE\uD83C(?:\uDDE8|\uDDE9|\uDDEA|\uDDF1|\uDDF2|\uDDF3|\uDDF4|\uDDF6|\uDDF7|\uDDF8|\uDDF9)|\uDDEF\uD83C(?:\uDDEA|\uDDF2|\uDDF4|\uDDF5)|\uDDF0\uD83C(?:\uDDEA|\uDDEC|\uDDED|\uDDEE|\uDDF2|\uDDF3|\uDDF5|\uDDF7|\uDDFC|\uDDFE|\uDDFF)|\uDDF1\uD83C(?:\uDDE6|\uDDE7|\uDDE8|\uDDEE|\uDDF0|\uDDF7|\uDDF8|\uDDF9|\uDDFA|\uDDFB|\uDDFE)|\uDDF2\uD83C(?:\uDDE6|\uDDE8|\uDDE9|\uDDEA|\uDDEB|\uDDEC|\uDDED|\uDDF0|\uDDF1|\uDDF2|\uDDF3|\uDDF4|\uDDF5|\uDDF6|\uDDF7|\uDDF8|\uDDF9|\uDDFA|\uDDFB|\uDDFC|\uDDFD|\uDDFE|\uDDFF)|\uDDF3\uD83C(?:\uDDE6|\uDDE8|\uDDEA|\uDDEB|\uDDEC|\uDDEE|\uDDF1|\uDDF4|\uDDF5|\uDDF7|\uDDFA|\uDDFF)|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C(?:\uDDE6|\uDDEA|\uDDEB|\uDDEC|\uDDED|\uDDF0|\uDDF1|\uDDF2|\uDDF3|\uDDF7|\uDDF8|\uDDF9|\uDDFC|\uDDFE)|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C(?:\uDDEA|\uDDF4|\uDDF8|\uDDFA|\uDDFC)|\uDDF8\uD83C(?:\uDDE6|\uDDE7|\uDDE8|\uDDE9|\uDDEA|\uDDEC|\uDDED|\uDDEE|\uDDEF|\uDDF0|\uDDF1|\uDDF2|\uDDF3|\uDDF4|\uDDF7|\uDDF8|\uDDF9|\uDDFB|\uDDFD|\uDDFE|\uDDFF)|\uDDF9\uD83C(?:\uDDE6|\uDDE8|\uDDE9|\uDDEB|\uDDEC|\uDDED|\uDDEF|\uDDF0|\uDDF1|\uDDF2|\uDDF3|\uDDF4|\uDDF7|\uDDF9|\uDDFB|\uDDFC|\uDDFF)|\uDDFA\uD83C(?:\uDDE6|\uDDEC|\uDDF2|\uDDF8|\uDDFE|\uDDFF)|\uDDFB\uD83C(?:\uDDE6|\uDDE8|\uDDEA|\uDDEC|\uDDEE|\uDDF3|\uDDFA)|\uDDFC\uD83C(?:\uDDEB|\uDDF8)|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C(?:\uDDEA|\uDDF9)|\uDDFF\uD83C(?:\uDDE6|\uDDF2|\uDDFC)))|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u261D\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267B\u267F\u2692-\u2694\u2696\u2697\u2699\u269B\u269C\u26A0\u26A1\u26AA\u26AB\u26B0\u26B1\u26BD\u26BE\u26C4\u26C5\u26C8\u26CE\u26CF\u26D1\u26D3\u26D4\u26E9\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763\u2764\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC04\uDCCF\uDD70\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDE01\uDE02\uDE1A\uDE2F\uDE32-\uDE3A\uDE50\uDE51\uDF00-\uDF21\uDF24-\uDF93\uDF96\uDF97\uDF99-\uDF9B\uDF9E-\uDFF0\uDFF3-\uDFF5\uDFF7-\uDFFF]|\uD83D[\uDC00-\uDCFD\uDCFF-\uDD3D\uDD49-\uDD4E\uDD50-\uDD67\uDD6F\uDD70\uDD73-\uDD79\uDD87\uDD8A-\uDD8D\uDD90\uDD95\uDD96\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDEF\uDDF3\uDDFA-\uDE4F\uDE80-\uDEC5\uDECB-\uDED0\uDEE0-\uDEE5\uDEE9\uDEEB\uDEEC\uDEF0\uDEF3]|\uD83E[\uDD10-\uDD18\uDD80-\uDD84\uDDC0]/g

# Adapted from https://github.com/Modernizr/Modernizr/blob/master/feature-detects/emoji.js
supportsBoldEmoji = do ->
  canvas = document.createElement("canvas")
  context = canvas.getContext("2d")
  context.fillStyle = "#f00"
  context.textBaseline = "top"
  context.font = "bold 32px Arial"
  context.fillText("\ud83d\udc28", 0, 0) # U+1F428 KOALA
  context.getImageData(16, 16, 1, 1).data[0] isnt 0

return if supportsBoldEmoji

selector = "h1, h2, h3, h4, h5, h6, strong"

inputTagNames = ["input", "textarea"]
inputSelector = inputTagNames.join(",")

BC.observe selector, (element) ->
  if nodeContainsEmoji(element) and elementIsBold(element)
    for node in findTextNodesContainingEmoji(element)
      fragment = document.createDocumentFragment()
      fragment.appendChild(child) for child in createNodes(node.data)
      node.parentNode.replaceChild(fragment, node)

    for inputElement in element.querySelectorAll(inputSelector)
      if inputElementContainsEmoji(inputElement)
        unboldElement(inputElement)

$(document).on "input", inputSelector, ->
  if inputElementContainsEmoji(this)
    unboldElement(this)

nodeContainsEmoji = (node) ->
  stringContainsEmoji(node.textContent)

inputElementContainsEmoji = (element) ->
  stringContainsEmoji(element.value)

stringContainsEmoji = (string) ->
  string.search(BC.EMOJI_PATTERN) isnt -1

elementIsBold = (element) ->
  {fontWeight} = getComputedStyle(element)
  fontWeight is "bold" or fontWeight >= 500

unboldElement = (element) ->
  element.classList.add("normal")

# Splits string into an array of text nodes and
# non-bold span elements with emojis
createNodes = (string) ->
  nodes = []
  offset = 0

  string.replace BC.EMOJI_PATTERN, (match, startOffset) ->
    endOffset = startOffset + match.length

    if startOffset > offset
      text = string.slice(offset, startOffset)
      nodes.push(document.createTextNode(text))

    emoji = string.slice(startOffset, endOffset)
    nodes.push(createEmojiElement(emoji))
    offset = endOffset

  if text = string.slice(offset)
    nodes.push(document.createTextNode(text))

  nodes

createEmojiElement = (string) ->
  element = document.createElement("span")
  element.textContent = string
  unboldElement(element)
  element

findTextNodesContainingEmoji = (element) ->
  nodes = []
  walker = document.createTreeWalker(element, NodeFilter.SHOW_ALL, textNodeWithEmojiFilter, false)
  nodes.push(walker.currentNode) while walker.nextNode()
  nodes

textNodeWithEmojiFilter = (node) ->
  switch
    when node.isContentEditable
      NodeFilter.FILTER_REJECT
    when node.nodeType is Node.ELEMENT_NODE and node.tagName.toLowerCase() in inputTagNames
      NodeFilter.FILTER_REJECT
    when node.nodeType is Node.TEXT_NODE and nodeContainsEmoji(node)
      NodeFilter.FILTER_ACCEPT
    else
      NodeFilter.FILTER_SKIP

@jeromelachaud, it's live in Basecamp 3 or here's a slightly modified version: http://codepen.io/javan/pen/GorrmY

Upstream issue was fixed and released in Chrome 50!