Desktop: Fix size of notebook emojis on Windows

.eslintignore

@@ -252,6 +252,9 @@ packages/app-desktop/gui/EditFolderDialog/Dialog.js.map
 packages/app-desktop/gui/EditFolderDialog/IconSelector.d.ts
 packages/app-desktop/gui/EditFolderDialog/IconSelector.js
 packages/app-desktop/gui/EditFolderDialog/IconSelector.js.map
+packages/app-desktop/gui/EmojiBox.d.ts
+packages/app-desktop/gui/EmojiBox.js
+packages/app-desktop/gui/EmojiBox.js.map
 packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.d.ts
 packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.js
 packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.js.map

.gitignore

@@ -240,6 +240,9 @@ packages/app-desktop/gui/EditFolderDialog/Dialog.js.map
 packages/app-desktop/gui/EditFolderDialog/IconSelector.d.ts
 packages/app-desktop/gui/EditFolderDialog/IconSelector.js
 packages/app-desktop/gui/EditFolderDialog/IconSelector.js.map
+packages/app-desktop/gui/EmojiBox.d.ts
+packages/app-desktop/gui/EmojiBox.js
+packages/app-desktop/gui/EmojiBox.js.map
 packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.d.ts
 packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.js
 packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.js.map

packages/app-desktop/gui/EmojiBox.tsx

@@ -0,0 +1,46 @@
+import { useMemo, useRef } from 'react';
+
+interface Props {
+	width: number;
+	height: number;
+	emoji: string;
+}
+
+const fontSizeCache_: Record<string, number> = {};
+
+export default (props: Props) => {
+	const containerRef = useRef(null);
+
+	const fontSize = useMemo(() => {
+		if (!containerRef.current) return props.height;
+
+		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`;
+		containerRef.current.appendChild(span);
+
+		let rect = span.getBoundingClientRect();
+		while (rect.height > props.height) {
+			spanFontSize -= .5;
+			span.style.fontSize = `${spanFontSize}px`;
+			rect = span.getBoundingClientRect();
+		}
+
+		span.remove();
+
+		fontSizeCache_[cacheKey] = spanFontSize;
+		return spanFontSize;
+	}, [props.width, props.height, props.emoji, containerRef]);
+
+	return <div className="emoji-box" ref={containerRef} style={{ width: props.width, height: props.height, fontSize }}>{props.emoji}</div>;
+};

packages/app-desktop/gui/FolderIconBox.tsx

@@ -1,4 +1,5 @@
 import { FolderIcon, FolderIconType } from '@joplin/lib/services/database/types';
+import EmojiBox from './EmojiBox';
 
 interface Props {
 	folderIcon: FolderIcon;
@@ -8,13 +9,15 @@ interface Props {
 export default function(props: Props) {
 	const folderIcon = props.folderIcon;
 	const opacity = 'opacity' in props ? props.opacity : 1;
+	const width = 20;
+	const height = 20;
 
 	if (folderIcon.type === FolderIconType.Emoji) {
-		return <span style={{ fontSize: 20, opacity }}>{folderIcon.emoji}</span>;
+		return <EmojiBox width={width} height={height} emoji={folderIcon.emoji}/>;
 	} else if (folderIcon.type === FolderIconType.DataUrl) {
-		return <img style={{ width: 20, height: 20, opacity }} src={folderIcon.dataUrl} />;
+		return <img style={{ width, height, opacity }} src={folderIcon.dataUrl} />;
 	} else if (folderIcon.type === FolderIconType.FontAwesome) {
-		return <i style={{ fontSize: 18, width: 20, opacity }} className={folderIcon.name}></i>;
+		return <i style={{ fontSize: 18, width, opacity }} className={folderIcon.name}></i>;
 	} else {
 		throw new Error(`Unsupported folder icon type: ${folderIcon.type}`);
 	}