Displays textareas fullscreen in a lightbox.

fulltextarea.user.js

// ==UserScript==
// @name        Full Textarea
// @namespace   http://idioticdev.com
// @description Displays textareas in a lightbox.
// @include     *
// @version     1
// @grant       none
// ==/UserScript==
let areas = document.getElementsByTagName('textarea')
if (areas.length < 1)
  return

for (let el of areas)
  el.setAttribute('contextmenu', 'textareamenu')

let textarea = document.createElement('textarea')
setStyle(textarea, {
  position: 'fixed',
  top: '10px',
  left: '10px',
  backgroundColor: 'white',
  zIndex: '100000',
  borderRadius: '5px',
  padding: '20px',
  display: 'none',
  width: 'calc(100% - 20px)',
  height: 'calc(100% - 20px)'
})
document.body.appendChild(textarea)

let menu = document.createElement('menu')
document.body.appendChild(menu)
menu.setAttribute('id', 'textareamenu')
menu.setAttribute('type', 'context')

let item = document.createElement('menuitem')
menu.appendChild(item)
item.setAttribute('label', 'Fullscreen')

let target = null
document.addEventListener('contextmenu', e => target = e.target)

let openArea = null
item.addEventListener('click', () => {
  textarea.style.display = 'block'
  textarea.focus()
  textarea.value = target.value
  openArea = target
})

document.addEventListener('keydown', e => {
  if (e.key != "Escape" && e.key != "Esc")
    return
    
  textarea.style.display = 'none'
  openArea.value = textarea.value
})

function setStyle (el, style) {
  for (let prop in style)
    el.style[prop] = style[prop]
}