Added emojiClassName so that we don’t need to do <span>{children}</span> and heuristic for emoji-input events

Author: Zaydek Michels-Gualtieri

src/Editor/Elements/Elements.js

@@ -1,5 +1,6 @@
 import attrs from "./attrs"
 import dedupeSpaces from "lib/dedupeSpaces"
+import emojiClassName from "./emojiClassName"
 import escape from "lodash/escape"
 import IfWrapper from "lib/IfWrapper"
 import Markdown from "./Markdown"
@@ -14,7 +15,6 @@ import { Strikethrough } from "./InlineElements"
 // React components.
 function toReact(children) {
 	if (children === null || typeof children === "string") {
-		// return !children ? null : <span>{children}</span>
 		return children
 	}
 	const components = []
@@ -52,7 +52,7 @@ export const Header = React.memo(({ tag: Tag, id, syntax, hash, children }) => (
 ))
 
 export const Paragraph = React.memo(({ id, children }) => (
-	<p id={id}>
+	<p id={id} className={emojiClassName(children)}>
 		{toReact(children) || (
 			<br />
 		)}
@@ -223,13 +223,13 @@ export const Image = React.memo(({ id, syntax, src, alt, href, children }) => {
 			<img className="mx-auto" style={{ minHeight: "1.5em", maxHeight: "24em" }} src={src} alt={alt} />
 			{/* </IfWrapper> */}
 			{/* {(!readOnly || (readOnly && children)) && ( */}
-				<figcaption className="px-6 py-2 text-center text-sm text-gray-600">
-					<Markdown syntax={syntax} {...attrs.disableAutoCorrect}>
-						{toReact(children) || (
-							<br />
-						)}
-					</Markdown>
-				</figcaption>
+			<figcaption className="px-6 py-2 text-center text-sm text-gray-600">
+				<Markdown syntax={syntax} {...attrs.disableAutoCorrect}>
+					{toReact(children) || (
+						<br />
+					)}
+				</Markdown>
+			</figcaption>
 			{/* )} */}
 		</figure>
 	)

src/Editor/Elements/emojiClassName.js

@@ -0,0 +1,18 @@
+import typeEnum from "./typeEnum"
+
+// Returns an `emojis--${count}` class name.
+function emojiClassName(children) {
+	const count = (
+		children &&
+		children.every &&
+		children.every(each => (
+			each &&
+			each.type &&
+			each.type === typeEnum.Emoji
+		)) &&
+		children.length
+	)
+	return !count ? undefined : `emojis--${count}`
+}
+
+export default emojiClassName

src/Editor/stylesheets/core.css

@@ -17,12 +17,9 @@
 	line-height: 1;
 }
 
-/* https://stackoverflow.com/a/12198561 */
-.codex-editor p [aria-label][role="img"]:first-child:nth-last-child(1),
-.codex-editor p [aria-label][role="img"]:first-child:nth-last-child(2),
-.codex-editor p [aria-label][role="img"]:first-child:nth-last-child(2) ~ [aria-label][role="img"],
-.codex-editor p [aria-label][role="img"]:first-child:nth-last-child(3),
-.codex-editor p [aria-label][role="img"]:first-child:nth-last-child(3) ~ [aria-label][role="img"] {
+.codex-editor p.emojis--1 [aria-label][role="img"],
+.codex-editor p.emojis--2 [aria-label][role="img"],
+.codex-editor p.emojis--3 [aria-label][role="img"] {
 	font-size: 2em;
 }
 

src/Editor/useEditor.js

@@ -370,100 +370,19 @@ const methods = state => ({
 				const range = selection.getRangeAt(0)
 				rerenderNeeded = (
 					(range.startContainer.nodeType === Node.TEXT_NODE && range.startOffset <= 1) ||
-					// TODO: Add data-codex-rerender?
 					ascendToElement(range.startContainer).getAttribute("data-codex-markdown") ||
-					ascendToElement(range.startContainer).getAttribute("aria-label")
+					(range.startContainer.nodeType === Node.TEXT_NODE && emojiTrie.atEnd(range.startContainer.nodeValue))
 				)
 				const root = ascendToElement(range.startContainer).closest("[data-codex-editor] > *")
 				id = root.id || root.querySelector("[id]").id
 			}
-
-			// if (rerenderNeeded) {
+			if (rerenderNeeded) {
 				const nextElement = nextElements.find(each => each.id === id)
 				if (nextElement) {
 					nextElement.reactKey = uuidv4().slice(0, 8)
 				}
-			// }
-
-			// const elements = parseInlineElements(state.nodes[state.pos1.y].data)
-			// console.log(elements)
+			}
 
-			// // Compares whether two children are equal. Character
-			// // data is not compared in order to preserve
-			// // spellcheck highlighting.
-			// const isString = value => {
-			// 	return typeof value === "string"
-			// }
-			// const isObject = value => {
-			// 	const ok = (
-			// 		typeof value === "object" &&
-			// 		!Array.isArray(value)
-			// 	)
-			// 	return ok
-			// }
-			// const isArray = value => {
-			// 	const ok = (
-			// 		typeof value === "object" &&
-			// 		Array.isArray(value)
-			// 	)
-			// 	return ok
-			// }
-			// const areEqualChildren = (childrenA, childrenB) => {
-			// 	if (childrenA === null || childrenB === null) {
-			// 		return childrenA === childrenB
-			// 	}
-			// 	if (isString(childrenA) && isString(childrenB)) {
-			// 		return true
-			// 	} else if (isObject(childrenA) && isObject(childrenB)) {
-			// 		const ok = (
-			// 			childrenA.type === childrenB.type &&
-			// 			JSON.stringify(childrenA.syntax) === JSON.stringify(childrenB.syntax) &&
-			// 			areEqualChildren(childrenA.children, childrenB.children)
-			// 		)
-			// 		return ok
-			// 	}
-			// 	if (!isArray(childrenA) || !isArray(childrenB) || childrenA.length !== childrenB.length) {
-			// 		return false
-			// 	}
-			// 	for (let x = 0; x < childrenA.length; x++) {
-			// 		if (!areEqualChildren(childrenA[x], childrenB[x])) {
-			// 			return false
-			// 		}
-			// 	}
-			// 	return true
-			// }
-			// // Compares whether two elements are equal. Elements
-			// // are considered to be equal if their types, ID, and
-			// // children are equal.
-			// const areEqualElements = (elementA, elementB) => {
-			// 	const ok = (
-			// 		elementA.type === elementB.type &&
-			// 		elementA.id === elementB.id &&
-			// 		JSON.stringify(elementA.syntax) === JSON.stringify(elementB.syntax) &&
-			// 		areEqualChildren(elementA.children, elementB.children)
-			// 	)
-			// 	return ok
-			// }
-			// let id = ""
-			// const selection = document.getSelection()
-			// if (selection.rangeCount) {
-			// 	const range = selection.getRangeAt(0)
-			// 	const root = ascendToElement(range.startContainer).closest("[data-codex-editor] > *")
-			// 	id = root.id || root.querySelector("[id]").id
-			// }
-			// const substr = state.nodes[state.pos1.y].data.slice(state.pos1.x - 2, state.pos1.x + 1)
-			// const mustRerender = false // substr
-			// 	// .split("")
-			// 	// .some(each => ascii.isPunctuation(each))
-			// const prevElement = state.elements.find(each => each.id === id)
-			// const nextElement = nextElements.find(each => each.id === id)
-			// if (prevElement && nextElement) {
-			// 	if (areEqualElements(prevElement, nextElement)) {
-			// 		// No-op
-			// 		return
-			// 	}
-			// 	nextElement.reactKey = uuidv4().slice(0, 8)
-			// }
 		}
 
 		Object.assign(state, {