Fixed the popup issues

inshapardaz · Mar 30, 2024 · 9f47987 · 9f47987
1 parent 24a3258
commit 9f47987
Show file tree

Hide file tree

Showing 16 changed files with 1,393 additions and 629 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ class Example extends Component {
   };
 
   render() {
-    return <Editor value={value}
+    return <Editor initialValue={value}
         onChange={onChange}
         onSave={onSave}
         configuration={uiConfiguration} />

diff --git a/demo/src/index.js b/demo/src/index.js
@@ -2,30 +2,41 @@ import React, { useState } from "react";
 import { render } from "react-dom";
 
 import Editor from "../../src";
-import styles from "../../src/styles.module.css";
-import { Button, ConfigProvider, Divider, Drawer, FloatButton, Select, Space, Switch } from "antd";
+import {
+  Button,
+  ConfigProvider,
+  Divider,
+  Drawer,
+  FloatButton,
+  Select,
+  Space,
+  Switch,
+} from "antd";
 import Icons from "../../src/icons";
 
 import i18n from "../../src/i18n";
 import punctuationCorrections from "./punctuationCorrections";
-import wordList from './wordList';
-import autoCorrection from './autoCorrection';
+import wordList from "./wordList";
+import autoCorrection from "./autoCorrection";
 
 const urduFonts = [
-  { value: 'AlviLahoriNastaleeq', label: 'Alvi Lahori Nastaleeq' },
-  { value: 'FajerNooriNastalique', label: 'Fajer Noori Nastalique' },
-  { value: 'gulzar-nastalique', label: 'Gulzar Nastalique' },
-  { value: 'EmadNastaleeq', label: 'Emad Nastaleeq' },
-  { value: 'NafeesWebNaskh', label: 'Nafees Web Naskh' },
-  { value: 'NafeesNastaleeq', label: 'Nafees Nastaleeq' },
-  { value: 'MehrNastaleeq', label: 'Mehr Nastaleeq' },
-  { value: 'AdobeArabic', label: 'Adobe Arabic' },
-  { value: 'Dubai', label: 'Dubai' },
-  { value: 'Noto Naskh Arabic', label: 'Noto Naskh Arabic' },
-  { value: 'Noto Nastaliq Urdu', label: 'Noto Nastaliq Urdu' },
-  { value: 'Jameel Noori Nastaleeq', label: 'Jameel Noori Nastaleeq' },
-  { value: 'jameel-khushkhati', label: 'Jameel Khushkhati' },
-  { value: 'JameelNooriNastaleeqKasheeda', label: 'Jameel Noori Nastaleeq Kasheeda' }
+  { value: "AlviLahoriNastaleeq", label: "Alvi Lahori Nastaleeq" },
+  { value: "FajerNooriNastalique", label: "Fajer Noori Nastalique" },
+  { value: "gulzar-nastalique", label: "Gulzar Nastalique" },
+  { value: "EmadNastaleeq", label: "Emad Nastaleeq" },
+  { value: "NafeesWebNaskh", label: "Nafees Web Naskh" },
+  { value: "NafeesNastaleeq", label: "Nafees Nastaleeq" },
+  { value: "MehrNastaleeq", label: "Mehr Nastaleeq" },
+  { value: "AdobeArabic", label: "Adobe Arabic" },
+  { value: "Dubai", label: "Dubai" },
+  { value: "Noto Naskh Arabic", label: "Noto Naskh Arabic" },
+  { value: "Noto Nastaliq Urdu", label: "Noto Nastaliq Urdu" },
+  { value: "Jameel Noori Nastaleeq", label: "Jameel Noori Nastaleeq" },
+  { value: "jameel-khushkhati", label: "Jameel Khushkhati" },
+  {
+    value: "JameelNooriNastaleeqKasheeda",
+    label: "Jameel Noori Nastaleeq Kasheeda",
+  },
 ];
 const Demo = () => {
   const [open, setOpen] = useState(false);
@@ -35,7 +46,7 @@ const Demo = () => {
     language: "ur",
     toolbar: {
       fonts: urduFonts,
-      defaultFont: 'MehrNastaleeq',
+      defaultFont: "MehrNastaleeq",
       showAlignment: true,
       showBlockFormat: true,
       showFontFormat: true,
@@ -47,14 +58,15 @@ const Demo = () => {
       showSave: true,
     },
     spellchecker: {
-      enabled : true,
+      enabled: true,
       punctuationCorrections: (lang) => punctuationCorrections[lang],
       autoCorrections: (lang) => autoCorrection[lang],
-      wordList : (lang) => wordList[lang]
+      wordList: (lang) => wordList[lang],
     },
     format: "raw",
   });
-  const locale = i18n[configuration.language];
+  const lang = configuration?.language ?? "en";
+  const locale = i18n[lang];
   const showDrawer = () => {
     setOpen(true);
   };
@@ -69,157 +81,186 @@ const Demo = () => {
 
         جہاں زاد
         `);
-      }
-      else
-      {
-        setValue('{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"حسن کوزہ گر","type":"text","version":1}],"direction":"rtl","format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"جہاں زاد","type":"text","version":1}],"direction":"rtl","format":"","indent":0,"type":"paragraph","version":1}],"direction":"rtl","format":"","indent":0,"type":"root","version":1}}');
+      } else {
+        setValue(
+          '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"حسن کوزہ گر","type":"text","version":1}],"direction":"rtl","format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"جہاں زاد","type":"text","version":1}],"direction":"rtl","format":"","indent":0,"type":"paragraph","version":1}],"direction":"rtl","format":"","indent":0,"type":"root","version":1}}'
+        );
       }
     } else {
       setValue("حسن کوزہ گر");
     }
-  }
+  };
 
   const changeLanguage = (value) => {
-    setConfiguration((e) => ({ ...e, language: value, toolbar: { ...e.toolbar, fonts: value == "ur" ? urduFonts : null }}))
-  }
+    setConfiguration((e) => ({
+      ...e,
+      language: value,
+      toolbar: { ...e.toolbar, fonts: value == "ur" ? urduFonts : null },
+    }));
+  };
+  const onSave = (contents) => {
+    console.log("OnSave: ", contents);
+  };
 
   return (
-    <ConfigProvider
-      direction={configuration.language == "ur" ? "rtl" : "ltr"}
-      locale={configuration.language}
-      componentSize="large"
-    >
-      <div className={styles.editorShell} style={{ direction: locale.direction }}>
-        <Editor
-          configuration={configuration}
-          value={value}
-          onChange={(val) => console.log('OnChange: ', val)}
-          onSave={(contents) => console.log('OnSave: ', contents)}
-        />
-      </div>
-      <FloatButton icon={<Icons.Setting />} onClick={showDrawer} />
-      <Drawer
-        title="Settings"
-        icon={<Icons.Setting />}
-        placement="right"
-        onClose={onClose}
-        open={open}
+    <React.StrictMode>
+      <ConfigProvider
+        direction={lang ? "rtl" : "ltr"}
+        locale={lang}
+        componentSize="large"
       >
-        <Space direction="vertical">
-          <Switch
-            checkedChildren="Rich Text"
-            unCheckedChildren="Plain Text"
-            defaultChecked={configuration.richText}
-            onChange={(checked) =>
-              setConfiguration((e) => ({ ...e, richText: checked }))
-            }
+        <div className="editorShell" style={{ direction: locale.direction }}>
+          <Editor
+            configuration={configuration}
+            value={value}
+            onChange={(val) => console.log("OnChange: ", val)}
+            onSave={onSave}
           />
-          <Select
-            defaultValue={configuration.language}
-            onChange={(value) =>
-              setConfiguration(changeLanguage)
-            }
-            options={[
-              {
-                value: "en",
-                label: "English",
-              },
-              {
-                value: "ur",
-                label: "Urdu",
-              },
-            ]}
-          />
-          <Divider />
-          <Select
-            defaultValue={configuration.format}
-            onChange={(value) =>
-              setConfiguration((e) => ({ ...e, format: value }))
-            }
-            options={[
-              {
-                value: "raw",
-                label: "Raw",
-              },
-              {
-                value: "markdown",
-                label: "Markdown",
-              },
-            ]}
-          />
-          <Divider />
-          <Switch
-            checkedChildren="Show Alignment"
-            unCheckedChildren="Hide Alignment"
-            defaultChecked={configuration.toolbar.showAlignment}
-            onChange={(checked) =>
-              setConfiguration((e) => ({ ...e, toolbar: {... e.toolbar, showAlignment : checked } }))
-            }
-          />
-          <Switch
+        </div>
+        <FloatButton icon={<Icons.Setting />} onClick={showDrawer} />
+        <Drawer
+          title="Settings"
+          icon={<Icons.Setting />}
+          placement="right"
+          onClose={onClose}
+          open={open}
+        >
+          <Space direction="vertical">
+            <Switch
+              checkedChildren="Rich Text"
+              unCheckedChildren="Plain Text"
+              defaultChecked={configuration.richText}
+              onChange={(checked) =>
+                setConfiguration((e) => ({ ...e, richText: checked }))
+              }
+            />
+            <Select
+              defaultValue={lang}
+              onChange={(value) => setConfiguration(changeLanguage)}
+              options={[
+                {
+                  value: "en",
+                  label: "English",
+                },
+                {
+                  value: "ur",
+                  label: "Urdu",
+                },
+              ]}
+            />
+            <Divider />
+            <Select
+              defaultValue={configuration.format}
+              onChange={(value) =>
+                setConfiguration((e) => ({ ...e, format: value }))
+              }
+              options={[
+                {
+                  value: "raw",
+                  label: "Raw",
+                },
+                {
+                  value: "markdown",
+                  label: "Markdown",
+                },
+              ]}
+            />
+            <Divider />
+            <Switch
+              checkedChildren="Show Alignment"
+              unCheckedChildren="Hide Alignment"
+              defaultChecked={configuration.toolbar.showAlignment}
+              onChange={(checked) =>
+                setConfiguration((e) => ({
+                  ...e,
+                  toolbar: { ...e.toolbar, showAlignment: checked },
+                }))
+              }
+            />
+            <Switch
               checkedChildren="Show Undo/Redo"
               unCheckedChildren="Hide Undo/Redo"
               defaultChecked={configuration.toolbar.showUndoRedo}
               onChange={(checked) =>
-                setConfiguration((e) => ({ ...e, toolbar: {... e.toolbar, showUndoRedo : checked } }))
+                setConfiguration((e) => ({
+                  ...e,
+                  toolbar: { ...e.toolbar, showUndoRedo: checked },
+                }))
               }
             />
-          <Switch
+            <Switch
               checkedChildren="Show Block Format"
               unCheckedChildren="Hide Block Format"
               defaultChecked={configuration.toolbar.showBlockFormat}
               onChange={(checked) =>
-                setConfiguration((e) => ({ ...e, toolbar: {... e.toolbar, showBlockFormat : checked } }))
+                setConfiguration((e) => ({
+                  ...e,
+                  toolbar: { ...e.toolbar, showBlockFormat: checked },
+                }))
               }
             />
-          <Switch
+            <Switch
               checkedChildren="Show Insert"
               unCheckedChildren="Hide Insert"
               defaultChecked={configuration.toolbar.showInsert}
               onChange={(checked) =>
-                setConfiguration((e) => ({ ...e, toolbar: {... e.toolbar, showInsert : checked } }))
+                setConfiguration((e) => ({
+                  ...e,
+                  toolbar: { ...e.toolbar, showInsert: checked },
+                }))
               }
             />
-          <Switch
+            <Switch
               checkedChildren="Show Font Format"
               unCheckedChildren="Hide Font Format"
               defaultChecked={configuration.toolbar.showFontFormat}
               onChange={(checked) =>
-                setConfiguration((e) => ({ ...e, toolbar: {... e.toolbar, showFontFormat : checked } }))
+                setConfiguration((e) => ({
+                  ...e,
+                  toolbar: { ...e.toolbar, showFontFormat: checked },
+                }))
               }
             />
-          <Switch
+            <Switch
               checkedChildren="Show extra formatting options"
               unCheckedChildren="Hide extra formatting options"
               defaultChecked={configuration.toolbar.showExtraFormat}
               onChange={(checked) =>
-                setConfiguration((e) => ({ ...e, toolbar: {... e.toolbar, showExtraFormat : checked } }))
+                setConfiguration((e) => ({
+                  ...e,
+                  toolbar: { ...e.toolbar, showExtraFormat: checked },
+                }))
               }
             />
-          <Switch
+            <Switch
               checkedChildren="Show link options"
               unCheckedChildren="Hide link options"
               defaultChecked={configuration.toolbar.showInsertLink}
               onChange={(checked) =>
-                setConfiguration((e) => ({ ...e, toolbar: {... e.toolbar, showInsertLink : checked } }))
+                setConfiguration((e) => ({
+                  ...e,
+                  toolbar: { ...e.toolbar, showInsertLink: checked },
+                }))
               }
             />
-          <Divider />
-          <Switch
+            <Divider />
+            <Switch
               checkedChildren="Spell Check"
               unCheckedChildren="No Spell Check"
               defaultChecked={configuration.spellchecker.enabled}
               onChange={(checked) =>
-                setConfiguration((e) => ({ ...e, spellchecker: {... e.spellchecker, enabled : checked } }))
+                setConfiguration((e) => ({
+                  ...e,
+                  spellchecker: { ...e.spellchecker, enabled: checked },
+                }))
               }
             />
-          <Divider />
-          <Button onClick={setEditorValue}>
-              Change Value
-          </Button>
-        </Space>
-      </Drawer>
-    </ConfigProvider>
+            <Divider />
+            <Button onClick={setEditorValue}>Change Value</Button>
+          </Space>
+        </Drawer>
+      </ConfigProvider>
+    </React.StrictMode>
   );
 };