Fixed font change

inshapardaz · Mar 12, 2024 · 9a0eff1 · 9a0eff1
1 parent 8b42714
commit 9a0eff1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="icon" type="image/png" />
+    <link rel="stylesheet" href="https://urdu-fonts.netlify.app/stylesheet.css">
     <title>Urdu Web Editor</title>
   </head>
 

diff --git a/demo/src/index.js b/demo/src/index.js
@@ -29,7 +29,7 @@ const urduFonts = [
 ];
 const Demo = () => {
   const [open, setOpen] = useState(false);
-  const [value, setValue] = useState(undefined);
+  const [value, setValue] = useState(null);
   const [configuration, setConfiguration] = useState({
     richText: true,
     language: "ur",

diff --git a/src/plugins/fontDropdown.js b/src/plugins/fontDropdown.js
@@ -24,16 +24,26 @@ export const defaultFont = ({ configuration }) => {
 // --------------------------------------------------
 const FontDropDown = ({ fonts, value, onChange = () => {} }) => {
   const configuredFonts = (fonts && fonts.length > 0 ? fonts :  FONT_FAMILY_OPTIONS);
+  const selected = () => value && configuredFonts.find(x => x.value === value) || configuredFonts[0];
+  onFontSelect = (item) => {
+    onChange(item.key);
+  }
   const items = configuredFonts
   .map(i => ({
-    onClick: () => onChange(i.value),
+    key: i.value,
     label: i.label,
   }));
+
   return (
-    <Dropdown menu={{items}}>
+    <Dropdown menu={{
+      items,
+      selectedKeys : [ selected() ],
+      onClick: onFontSelect,
+    }}
+      onClick={onFontSelect}>
       <Button type="text" size="large">
         <Space>
-          { (value && configuredFonts.find(x => x.value === value)?.label) || configuredFonts[0]?.label}
+          { selected().label }
           <Icons.Down />
         </Space>
         </Button>

diff --git a/src/plugins/toolbar.js b/src/plugins/toolbar.js
@@ -251,9 +251,9 @@ const ToolbarPlugin = ({ configuration, setIsLinkEditMode, locale }) => {
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
         $patchStyleText(selection, {
-          "font-family": font.value,
+          "font-family": font,
         });
-      }
+              }
     });
   };