Fix: Bug - 6000: Changing the font size when inputting does not take … (

#6102)
facebook · May 16, 2024 · ca0a823 · ca0a823
1 parent 5b0bb73
commit ca0a823
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 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;
     }
-
-    if (e.key === 'Enter') {
+    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

diff --git a/scripts/__tests__/integration/setup.js b/scripts/__tests__/integration/setup.js
@@ -37,7 +37,7 @@ module.exports = async function (globalConfig, projectConfig) {
     const cwd = process.cwd();
     try {
       process.chdir(pkg.resolve('npm'));
-      await exec(`npm pack --pack-destination '${packDest}'`);
+      await exec(`npm pack --pack-destination ${packDest}`);
     } finally {
       process.chdir(cwd);
     }