Bug: Changing the font size when inputting does not take effect faceb…

…ook#6000. This will also handle the blur event
pixelbyaj · May 14, 2024 · 57a5d25 · 57a5d25
1 parent 92f6523
commit 57a5d25
Showing 1 changed file with 24 additions and 9 deletions.
diff --git a/packages/lexical-playground/src/plugins/ToolbarPlugin/fontSize.tsx b/packages/lexical-playground/src/plugins/ToolbarPlugin/fontSize.tsx
@@ -32,6 +32,7 @@ export default function FontSize({
  editor: LexicalEditor;
 }) {
  const [inputValue, setInputValue] = React.useState<string>(selectionFontSize);
+ const [inputChangeFlag, setInputChangeFlag] = React.useState<boolean>(false);
 
  /**
  * Calculates the new font size based on the update type.
@@ -140,18 +141,18 @@ export default function FontSize({
  setInputValue('');
  return;
  }
-
+ setInputChangeFlag(true);
  if (e.key === 'Enter' || e.key === 'Tab' || e.key === 'Escape') {
  e.preventDefault();
 
- let updatedFontSize = inputValueNumber;
-  if (inputValueNumber > MAX_ALLOWED_FONT_SIZE) {
-  updatedFontSize = MAX_ALLOWED_FONT_SIZE;
- } else if (inputValueNumber < MIN_ALLOWED_FONT_SIZE) {
-  updatedFontSize = MIN_ALLOWED_FONT_SIZE;
-  }
- setInputValue(String(updatedFontSize));
- updateFontSizeInSelection(String(updatedFontSize) + 'px', null);
+ updateFontSizeByInputValue(inputValueNumber);
+ }
+ };
+
+ const handleInputBlur = () => {
+ if (inputValue !== '' && inputChangeFlag) {
+ const inputValueNumber = Number(inputValue);
+ updateFontSizeByInputValue(inputValueNumber);
  }
  };
 
@@ -167,6 +168,19 @@ export default function FontSize({
  }
  };
 
+ const updateFontSizeByInputValue = (inputValueNumber: number) => {
+ let updatedFontSize = inputValueNumber;
+ if (inputValueNumber > MAX_ALLOWED_FONT_SIZE) {
+ updatedFontSize = MAX_ALLOWED_FONT_SIZE;
+ } else if (inputValueNumber < MIN_ALLOWED_FONT_SIZE) {
+ updatedFontSize = MIN_ALLOWED_FONT_SIZE;
+ }
+
+ setInputValue(String(updatedFontSize));
+ updateFontSizeInSelection(String(updatedFontSize) + 'px', null);
+ setInputChangeFlag(false);
+ };
+
  React.useEffect(() => {
  setInputValue(selectionFontSize);
  }, [selectionFontSize]);
@@ -194,6 +208,7 @@ export default function FontSize({
  max={MAX_ALLOWED_FONT_SIZE}
  onChange={(e) => setInputValue(e.target.value)}
  onKeyDown={handleKeyPress}
+ onBlur={handleInputBlur}
  />
 
  <button