Desktop: Fixes #12358: Selected emoji for new notebooks display too large until Joplin is restarted (#12888)

packages/app-desktop/gui/EmojiBox.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState, useCallback } from 'react';
 
 interface Props {
 	width: number;
@@ -9,40 +9,62 @@ interface Props {
 const fontSizeCache_: Record<string, number> = {};
 
 export default (props: Props) => {
-	const containerRef = useRef(null);
+	const containerRef = useRef<HTMLDivElement>(null);
 	const [containerReady, setContainerReady] = useState(false);
 
+	const refCallback = useCallback((el: HTMLDivElement | null) => {
+		if (el && !containerRef.current) {
+			containerRef.current = el;
+			requestAnimationFrame(() => {
+				setContainerReady(true);
+			});
+		}
+	}, []);
+
 	const fontSize = useMemo(() => {
-		if (!containerReady) return props.height;
+		if (!containerReady || !containerRef.current) {
+			return Math.min(props.height * 0.7, 14);
+		}
 
 		const cacheKey = [props.width, props.height, props.emoji].join('-');
 		if (fontSizeCache_[cacheKey]) {
 			return fontSizeCache_[cacheKey];
 		}
 
-		// Set the emoji font size so that it fits within the specified width
-		// and height. In fact, currently it only looks at the height.
-
 		let spanFontSize = props.height;
 
 		const span = document.createElement('span');
 		span.innerText = props.emoji;
 		span.style.fontSize = `${spanFontSize}px`;
+		span.style.visibility = 'hidden';
+		span.style.position = 'absolute';
+		span.style.whiteSpace = 'nowrap';
 		containerRef.current.appendChild(span);
 
 		let rect = span.getBoundingClientRect();
-
-		while (rect.height > props.height) {
-			spanFontSize -= .5;
+		while ((rect.height > props.height || rect.width > props.width) && spanFontSize > 1) {
+			spanFontSize -= 0.5;
 			span.style.fontSize = `${spanFontSize}px`;
 			rect = span.getBoundingClientRect();
 		}
 
 		span.remove();
-
 		fontSizeCache_[cacheKey] = spanFontSize;
 		return spanFontSize;
-	}, [props.width, props.height, props.emoji, containerReady, containerRef]);
+	}, [props.width, props.height, props.emoji, containerReady]);
 
-	return <div className="emoji-box" ref={el => { containerRef.current = el; setContainerReady(true); }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: props.width, height: props.height, fontSize }}>{props.emoji}</div>;
+	return <div
+		ref={refCallback}
+		style={{
+			width: props.width,
+			height: props.height,
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			overflow: 'hidden',
+			fontSize,
+		}}
+	>
+		{props.emoji}
+	</div>;
 };