fc8c20149f
* Comment model * Framework, model, policy, presenter, api endpoint etc * Iteration, first pass of UI * fixes, refactors * Comment commands * comment socket support * typing indicators * comment component, styling * wip * right sidebar resize * fix: CMD+Enter submit * Add usePersistedState fix: Main page scrolling on comment highlight * drafts * Typing indicator * refactor * policies * Click thread to highlight Improve comment timestamps * padding * Comment menu v1 * Change comments to use editor * Basic comment editing * fix: Hide commenting button when disabled at team level * Enable opening sidebar without mark * Move selected comment to location state * Add comment delete confirmation * Add comment count to document meta * fix: Comment sidebar togglable Add copy link to comment * stash * Restore History changes * Refactor right sidebar to allow for comment animation * Update to new router best practices * stash * Various improvements * stash * Handle click outside * Fix incorrect placeholder in input fix: Input box appearing on other sessions erroneously * stash * fix: Don't leave orphaned child comments * styling * stash * Enable comment toggling again * Edit styling, merge conflicts * fix: Cannot navigate from insights to comments * Remove draft comment mark on click outside * Fix: Empty comment sidebar, tsc * Remove public toggle * fix: All comments are recessed fix: Comments should not be printed * fix: Associated mark should be removed on comment delete * Revert unused changes * Empty state, basic RTL support * Create dont toggle comment mark * Make it feel more snappy * Highlight active comment in text * fix animation * RTL support * Add reply CTA * Translations
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import * as React from "react";
|
|
|
|
type Options = {
|
|
fontSize?: string;
|
|
lineHeight?: string;
|
|
};
|
|
|
|
/**
|
|
* Measures the width of an emoji character
|
|
*
|
|
* @param emoji The emoji to measure
|
|
* @param options Options to pass to the measurement element
|
|
* @returns The width of the emoji in pixels
|
|
*/
|
|
export default function useEmojiWidth(
|
|
emoji: string | undefined,
|
|
{ fontSize = "2.25em", lineHeight = "1.25" }: Options
|
|
) {
|
|
return React.useMemo(() => {
|
|
const element = window.document.createElement("span");
|
|
if (!emoji) {
|
|
return 0;
|
|
}
|
|
|
|
element.innerText = `${emoji}\u00A0`;
|
|
element.style.visibility = "hidden";
|
|
element.style.position = "absolute";
|
|
element.style.left = "-9999px";
|
|
element.style.lineHeight = lineHeight;
|
|
element.style.fontSize = fontSize;
|
|
element.style.width = "max-content";
|
|
window.document.body?.appendChild(element);
|
|
const width = window.getComputedStyle(element).width;
|
|
window.document.body?.removeChild(element);
|
|
return parseInt(width, 10);
|
|
}, [emoji, fontSize, lineHeight]);
|
|
}
|