UX dev screening question

by nimishgoel056

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.5.4/antd.min.js"></script>
<div class="container">
  <textarea id="textarea" placeholder="Type here "></textarea>
  <div id="menu" class="menu" role="listbox"></div>
</div>

CSS

:root {
  box-sizing: border-box;
  font-family: system, sans-serif;
}

*,
::before,
::after {
  box-sizing: inherit;
}

.container {
  margin: 0 auto;
  max-width: 80ch;
  width: calc(100% - 4rem);
}

body {
  margin: 0;
  padding: 2rem 0;
}

/* textarea {
  font: inherit;
  height: 7rem;
  width: 100%;
  padding: .8rem 1rem
} */

.menu {
  background-color: lightblue;
  position: absolute;
}

.menu-item {
  cursor: default;
  padding: 1rem;
}

.menu-item.selected {
  background-color: slateGray;
  color: white;
}

.menu-item:hover:not(.selected) {
  background-color: #fafafa;
}

JavaScript

const properties = [
	'direction',
	'boxSizing',
	'width',
	'height',
	'overflowX',
	'overflowY',

	'borderTopWidth',
	'borderRightWidth',
	'borderBottomWidth',
	'borderLeftWidth',
	'borderStyle',

	'paddingTop',
	'paddingRight',
	'paddingBottom',
	'paddingLeft',

	'fontStyle',
	'fontVariant',
	'fontWeight',
	'fontStretch',
	'fontSize',
	'fontSizeAdjust',
	'lineHeight',
	'fontFamily',

	'textAlign',
	'textTransform',
	'textIndent',
	'textDecoration',

	'letterSpacing',
	'wordSpacing',

	'tabSize',
	'MozTabSize',
]

const isFirefox = typeof window !== 'undefined' && window['mozInnerScreenX'] != null

/**
 * @param {HTMLTextAreaElement} element
 * @param {number} position
 */
function getCaretCoordinates(element, position) {
	const div = document.createElement('div')
	document.body.appendChild(div)

	const style = div.style
	const computed = getComputedStyle(element)

	style.whiteSpace = 'pre-wrap'
	style.wordWrap = 'break-word'
	style.position = 'absolute'
	style.visibility = 'hidden'

	properties.forEach(prop => {
		style[prop] = computed[prop]
	})

	if (isFirefox) {
		if (element.scrollHeight > parseInt(computed.height))
			style.overflowY = 'scroll'
	} else {
		style.overflow = 'hidden'
	}

	div.textContent = element.value.substring(0, position)

	const span = document.createElement('span')
	span.textContent = element.value.substring(position) || '.'
	div.appendChild(span)

	const coordinates = {
		top: span.offsetTop + parseInt(computed['borderTopWidth']),
		left: span.offsetLeft + parseInt(computed['borderLeftWidth']),
		// height: parseInt(computed['lineHeight'])
		height: span.offsetHeight
	}

	div.remove()

	return coordinates
}

class Mentionify {
  constructor(ref, menuRef, resolveFn, replaceFn, menuItemFn) {
    this.ref = ref
    this.menuRef = menuRef
    this.resolveFn = resolveFn
    this.replaceFn = replaceFn
    this.menuItemFn = menuItemFn
    this.options = []
    
    this.makeOptions = this.makeOptions.bind(this)
    this.closeMenu =...