Added emojiClassName so that we don’t need to do <span>{children}</span>

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;
 }