Skip to content

Instantly share code, notes, and snippets.

Avatar

Shanon Jackson ShanonJackson

  • Spark
  • New Zealand
View GitHub Profile
View cypress.js
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
View Surrogates.tsx
// 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 });
}
View Surrogates.tsx
/**
* 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;
View onPaste.ts
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, ""));
};
View onPaste.ts
const onPaste: React.ClipboardEventHandler = (e) => {
e.preventDefault(); /* Prevent the DOM Paste */
// replace linebreaks
insertString(e.clipboardData.getData("text/plain").replace(/\r?\n|\r/g, ""));
};
View FirstAttempt.module.scss
.input {
&:empty:before {
content: attr(data-placeholder);
color: lightgrey;
}
/* IE / Edge */
_:-ms-lang(x),
&:empty:focus:before {
content: unset;
View ControlledResizing.tsx
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 };
View ControlledResizing.tsx
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 };
View ControlledEditable.tsx
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 };
View rollup-index.config.js
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";