XVmWBV

index.html

<div id="tweet-box-home-timeline" contenteditable="true">
  What's happening?
</div>

script.babel

const insertAfter = (newNode, referenceNode) => {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
}

const replaceRange = (transformer) => {
  const selected = window.getSelection()

  if (selected.rangeCount) {
    const range = selected.getRangeAt(0)
    const transformed = transformer(selected.toString())
    
    const span = document.createElement("span")
    span.innerHTML = transformed

    range.deleteContents()
    range.insertNode(span)
  }
}

const replaceArray = (text, find, replace) => {
  let replaced = text
  
  for (let i = 0; i < find.length; i++) {
    replaced = replaced.replace(find[i], replace[i])
  }
  
  return replaced
}

// http://qaz.wtf/u/convert.cgi?text=abcdefghijklmnopqrstuvwxyz
const alpha = "abcdefghijklmnopqrstuvwxyz".split("")
const italic = runes("𝘢𝘣𝘤𝘥𝘦𝘧𝘨𝘩𝘪𝘫𝘬𝘭𝘮𝘯𝘰𝘱𝘲𝘳𝘴𝘵𝘶𝘷𝘸𝘹𝘺𝘻")
const bold = runes("𝗮𝗯𝗰𝗱𝗲𝗳𝗴𝗵𝗶𝗷𝗸𝗹𝗺𝗻𝗼𝗽𝗾𝗿𝘀𝘁𝘂𝘃𝘄𝘅𝘆𝘇")

const withItalic = (text) => {
  return replaceArray(text, alpha, italic)
}

const withBold = (text) => {
  return replaceArray(text, alpha, bold)
}

const editor = document.querySelector("#tweet-box-home-timeline")

if (editor) {
  editor.addEventListener("focus", () => {
    if (editor.innerText === "What's happening?") {
      editor.innerText = ""
    }
  })
  
  editor.addEventListener("blur", () => {
    if (editor.innerText === "") {
      editor.innerText = "What's happening?"
    }
  })
  
  const italicButton = document.createElement("button")
  
  italicButton.innerText = "𝑰"
  
  italicButton.addEventListener(
    "click", () => replaceRange(withItalic)
  )
  
  const boldButton = document.createElement("button")
  
  boldButton.innerText = "𝐁"
  
  boldButton.addEventListener(
    "click", () => replaceRange(withBold)
  )
  
  insertAfter(italicButton, editor)
  insertAfter(boldButton, editor)
}

scripts

<script src="https://rawgit.com/dotcypress/runes/develop/index.js"></script>

style.scss

/* DEBUG */
#tweet-box-home-timeline {
  border: solid 2px #ccc;
  width: 200px;
  height: 40px;
  line-height: 40px;
  margin: 5px;
  border-radius: 5px;
  padding: 0 10px;
  outline: 0;
  font-family: sans-serif;
  font-size: 14px;
}

xvmwbv.markdown

XVmWBV

A Pen by Christopher Pitt on CodePen.

License.