ShanonJackson

Cypress.Commands.add('cid', (id) => cy.get(`[data-cy='${id}']`));  // shorthand for find by data-cy='ID' (cypress id)
Cypress.Commands.add('pclass', (cls: string) => cy.get(`[class^='${cls}']`)); // shorthand for find by partial class

// This is your priority order for finding an element.
// find by cypress id > find by text > find by partial class > nested selectors

// don't because the surface area for any change to break your "selector" is very large for each additional selector.
cy.get(':nth-child(2) > :nth-child(2) > .inputmodule_input__3wsvS').type('foo');

// do 

ShanonJackson

// https://dmitripavlutin.com/what-every-javascript-developer-should-know-about-unicode/#24-surrogate-pairs
const isSurrogate = (code) => 0xd800 <= code && code <= 0xdfff;

/* Modify our onKeyDown Backspace Handler slightly... */
if (e.keyCode === Keycodes.BACKSPACE) {
	if (start === 0) return;
	const charsToRemove = isSurrogate(value.charCodeAt(start - 1)) ? 2 : 1;
	return insertString("", { start: start - charsToRemove, end: start });
}

ShanonJackson

/**
 * Check if a code unit forms part of a surrogate pair. Surrogate pairs are rendered as one character but stored
 * as two characters in a JS string.
 * https://dmitripavlutin.com/what-every-javascript-developer-should-know-about-unicode/#24-surrogate-pairs
 */
const isSurrogate = (code: number): boolean => 0xd800 <= code && code <= 0xdfff;

/* Modify our onKeyDown Backspace Handler slightly... */
if (e.keyCode === Keycodes.BACKSPACE) {
	if (start === 0) return;

ShanonJackson

const onPaste = (e) => {
	e.preventDefault(); /* Prevent the DOM Paste */
        /* Split on line break regex */
	insertString(e.clipboardData.getData("text/plain").replace(/\r?\n|\r/g, ""));
};

ShanonJackson

const onPaste: React.ClipboardEventHandler = (e) => {
	e.preventDefault(); /* Prevent the DOM Paste */
	// replace linebreaks
	insertString(e.clipboardData.getData("text/plain").replace(/\r?\n|\r/g, ""));
};

ShanonJackson

.input {
	&:empty:before {
		content: attr(data-placeholder);
		color: lightgrey;
	}

	/* IE / Edge */
	_:-ms-lang(x),
	&:empty:focus:before {
		content: unset;

ShanonJackson

import * as React from "react";
import { useEffect, useLayoutEffect, useState } from "react";

const getCursorPos = (node, offset, text) => {
	if (node?.nodeType === Node.TEXT_NODE) return offset;
	return offset === 0 ? 0 : text.length;
};
const getSelection = (text) => {
	const domSelection = window.getSelection();
	if (!domSelection) return { start: 0, end: 0 };

ShanonJackson

import * as React from "react";
import { useEffect, useLayoutEffect, useState } from "react";

const getCursorPos = (node: Node | null, offset: number, text: string) => {
	if (node?.nodeType === Node.TEXT_NODE) return offset;
	return offset === 0 ? 0 : text.length;
};
const getSelection = (text: string) => {
	const domSelection = window.getSelection();
	if (!domSelection) return { start: 0, end: 0 };

ShanonJackson

import * as React from "react";
import { useEffect, useLayoutEffect, useState } from "react";

const getCursorPos = (node: Node | null, offset: number, text: string) => {
	if (node?.nodeType === Node.TEXT_NODE) return offset;
	return offset === 0 ? 0 : text.length;
};
const getSelection = (text: string) => {
	const domSelection = window.getSelection();
	if (!domSelection) return { start: 0, end: 0 };

ShanonJackson

import css from "rollup-plugin-css-porter";
import pkg from "../../package.json";
import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";
import path from "path";
import commonjs from "rollup-plugin-commonjs";
import { terser } from "rollup-plugin-terser";

process.env.BABEL_ENV = "production";
process.env.NODE_ENV = "production";