self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-27 08:21:03 +02:00
Code Issues Releases Activity

Desktop: Fix size of notebook emojis on Windows

Browse Source
This commit is contained in:
Laurent Cozic 2022-10-23 16:28:19 +01:00
parent 0c30198e8c
commit 6c647144e2
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app-desktop/gui/EmojiBox.tsx
View File

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