no conditional rendering of modals to avoid bug in react-modal

serlo · Feb 15, 2024 · 540446e · 540446e
1 parent 480d23b
commit 540446e
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 208 deletions.
diff --git a/packages/editor/src/plugins/audio/toolbar.tsx b/packages/editor/src/plugins/audio/toolbar.tsx
@@ -57,32 +57,29 @@ export const AudioToolbar = ({
           >
             {audioStrings.audioUrl} <FaIcon icon={faPencilAlt} />
           </button>
-          {/* In the future we want a popovers per setting, but this is faster for now */}
-          {showSettingsModal ? (
-            <ModalWithCloseButton
-              isOpen={showSettingsModal}
-              onCloseClick={() => setShowSettingsModal(false)}
-              className="top-8 max-w-xl translate-y-0 sm:top-1/3"
-            >
-              <h3 className="serlo-h3 mt-4">{audioStrings.title}</h3>
+          <ModalWithCloseButton
+            isOpen={showSettingsModal}
+            onCloseClick={() => setShowSettingsModal(false)}
+            className="top-8 max-w-xl translate-y-0 sm:top-1/3"
+          >
+            <h3 className="serlo-h3 mt-4">{audioStrings.title}</h3>
 
-              <div className="mx-side mb-3">
-                <EditorInput
-                  autoFocus
-                  label={`${audioStrings.audioUrl}: `}
-                  value={state.src.value}
-                  onChange={(e) => {
-                    state.src.set(e.target.value)
-                  }}
-                  inputWidth="100%"
-                  width="100%"
-                  onKeyDown={handleInputEnter}
-                  placeholder="voca.ro/audio-id"
-                  className="block"
-                />
-              </div>
-            </ModalWithCloseButton>
-          ) : null}
+            <div className="mx-side mb-3">
+              <EditorInput
+                autoFocus
+                label={`${audioStrings.audioUrl}: `}
+                value={state.src.value}
+                onChange={(e) => {
+                  state.src.set(e.target.value)
+                }}
+                inputWidth="100%"
+                width="100%"
+                onKeyDown={handleInputEnter}
+                placeholder="voca.ro/audio-id"
+                className="block"
+              />
+            </div>
+          </ModalWithCloseButton>
         </>
       }
       pluginControls={<PluginDefaultTools pluginId={id} />}

diff --git a/packages/editor/src/plugins/geogebra/toolbar.tsx b/packages/editor/src/plugins/geogebra/toolbar.tsx
@@ -33,8 +33,6 @@ export const GeogebraToolbar = ({
           >
             {geogebraStrings.chooseApplet} <FaIcon icon={faPencilAlt} />
           </button>
-          {/* In the future we want a popovers per setting, but this is faster for now */}
-
           <ModalWithCloseButton
             isOpen={showSettingsModal}
             onCloseClick={() => setShowSettingsModal(false)}

diff --git a/packages/editor/src/plugins/image/toolbar.tsx b/packages/editor/src/plugins/image/toolbar.tsx
@@ -33,21 +33,19 @@ export const ImageToolbar = (
           >
             {editorStrings.edtrIo.settings} <FaIcon icon={faCog} />
           </button>
-          {showSettingsModal ? (
-            <ModalWithCloseButton
-              isOpen={showSettingsModal}
-              onCloseClick={() => setShowSettingsModal(false)}
-              className="top-8 max-w-xl translate-y-0 sm:top-1/3"
-            >
-              <h3 className="serlo-h3 mt-4">
-                {editorStrings.edtrIo.settings}: {imageStrings.title}
-              </h3>
+          <ModalWithCloseButton
+            isOpen={showSettingsModal}
+            onCloseClick={() => setShowSettingsModal(false)}
+            className="top-8 max-w-xl translate-y-0 sm:top-1/3"
+          >
+            <h3 className="serlo-h3 mt-4">
+              {editorStrings.edtrIo.settings}: {imageStrings.title}
+            </h3>
 
-              <div className="mx-side mb-3">
-                <SettingsModalControls state={props.state} />
-              </div>
-            </ModalWithCloseButton>
-          ) : null}
+            <div className="mx-side mb-3">
+              <SettingsModalControls state={props.state} />
+            </div>
+          </ModalWithCloseButton>
 
           <UploadButton {...props} />
         </>

diff --git a/packages/editor/src/plugins/injection/toolbar.tsx b/packages/editor/src/plugins/injection/toolbar.tsx
@@ -32,33 +32,30 @@ export const InjectionToolbar = ({
           >
             {injectionStrings.serloId} <FaIcon icon={faPencilAlt} />
           </button>
-          {/* In the future we want a popovers per setting, but this is faster for now */}
-          {showSettingsModal ? (
-            <ModalWithCloseButton
-              isOpen={showSettingsModal}
-              onCloseClick={() => setShowSettingsModal(false)}
-              className="top-8 max-w-xl translate-y-0 sm:top-1/3"
-            >
-              <h3 className="serlo-h3 mt-4">{injectionStrings.title}</h3>
+          <ModalWithCloseButton
+            isOpen={showSettingsModal}
+            onCloseClick={() => setShowSettingsModal(false)}
+            className="top-8 max-w-xl translate-y-0 sm:top-1/3"
+          >
+            <h3 className="serlo-h3 mt-4">{injectionStrings.title}</h3>
 
-              <div className="mx-side mb-3">
-                <EditorInput
-                  autoFocus
-                  label={`${injectionStrings.serloId}: `}
-                  placeholder={injectionStrings.placeholder}
-                  inputMode="numeric"
-                  pattern="\d+"
-                  value={state.value}
-                  onChange={(e) =>
-                    state.set(e.target.value.replace(/[^0-9]/g, ''))
-                  }
-                  width="100%"
-                  inputWidth="100%"
-                  className="block"
-                />
-              </div>
-            </ModalWithCloseButton>
-          ) : null}
+            <div className="mx-side mb-3">
+              <EditorInput
+                autoFocus
+                label={`${injectionStrings.serloId}: `}
+                placeholder={injectionStrings.placeholder}
+                inputMode="numeric"
+                pattern="\d+"
+                value={state.value}
+                onChange={(e) =>
+                  state.set(e.target.value.replace(/[^0-9]/g, ''))
+                }
+                width="100%"
+                inputWidth="100%"
+                className="block"
+              />
+            </div>
+          </ModalWithCloseButton>
         </>
       }
       pluginControls={<PluginDefaultTools pluginId={id} />}

diff --git a/packages/editor/src/plugins/multimedia/toolbar/toolbar.tsx b/packages/editor/src/plugins/multimedia/toolbar/toolbar.tsx
@@ -28,20 +28,18 @@ export const MultimediaToolbar = ({ id, children }: MultimediaToolbarProps) => {
           >
             {editorStrings.edtrIo.settings} <FaIcon icon={faCog} />
           </button>
-          {showSettingsModal ? (
-            <ModalWithCloseButton
-              isOpen={showSettingsModal}
-              onCloseClick={() => setShowSettingsModal(false)}
-              className="top-8 max-w-xl translate-y-0 sm:top-1/3"
-            >
-              <h3 className="serlo-h3 mt-4">
-                {editorStrings.edtrIo.settings}:{' '}
-                {editorStrings.plugins.multimedia.title}
-              </h3>
+          <ModalWithCloseButton
+            isOpen={showSettingsModal}
+            onCloseClick={() => setShowSettingsModal(false)}
+            className="top-8 max-w-xl translate-y-0 sm:top-1/3"
+          >
+            <h3 className="serlo-h3 mt-4">
+              {editorStrings.edtrIo.settings}:{' '}
+              {editorStrings.plugins.multimedia.title}
+            </h3>
 
-              <div className="mx-side mb-3">{children}</div>
-            </ModalWithCloseButton>
-          ) : null}
+            <div className="mx-side mb-3">{children}</div>
+          </ModalWithCloseButton>
         </>
       }
       pluginControls={<PluginDefaultTools pluginId={id} />}

diff --git a/packages/editor/src/plugins/page-layout/toolbar/toolbar.tsx b/packages/editor/src/plugins/page-layout/toolbar/toolbar.tsx
@@ -36,15 +36,13 @@ export const PageLayoutToolbar = ({
           >
             {pageLayoutStrings.chooseRatio} <FaIcon icon={faPencilAlt} />
           </button>
-          {showSettingsModal ? (
-            <ModalWithCloseButton
-              isOpen={showSettingsModal}
-              onCloseClick={() => setShowSettingsModal(false)}
-              className="top-8 max-w-xl translate-y-0 sm:top-1/3"
-            >
-              <LayoutChooser {...state} />
-            </ModalWithCloseButton>
-          ) : null}
+          <ModalWithCloseButton
+            isOpen={showSettingsModal}
+            onCloseClick={() => setShowSettingsModal(false)}
+            className="top-8 max-w-xl translate-y-0 sm:top-1/3"
+          >
+            <LayoutChooser {...state} />
+          </ModalWithCloseButton>
         </>
       }
     />

diff --git a/packages/editor/src/plugins/serlo-template-plugins/applet.tsx b/packages/editor/src/plugins/serlo-template-plugins/applet.tsx
@@ -86,25 +86,23 @@ function AppletTypeEditor(props: EditorPluginProps<AppletTypePluginState>) {
       {content.render()}
 
       <ToolbarMain showSubscriptionOptions {...props.state} />
-      {showSettingsModal ? (
-        <ModalWithCloseButton
-          isOpen={showSettingsModal}
-          onCloseClick={() => setShowSettingsModal(false)}
-          className="top-8 max-w-xl translate-y-0 sm:top-1/3"
-        >
-          <div className="mx-side mb-3 mt-12">
-            <SettingsTextarea
-              autoFocus
-              label={appletStrings.seoTitle}
-              state={meta_title}
-            />
-            <SettingsTextarea
-              label={appletStrings.seoDesc}
-              state={meta_description}
-            />
-          </div>
-        </ModalWithCloseButton>
-      ) : null}
+      <ModalWithCloseButton
+        isOpen={showSettingsModal}
+        onCloseClick={() => setShowSettingsModal(false)}
+        className="top-8 max-w-xl translate-y-0 sm:top-1/3"
+      >
+        <div className="mx-side mb-3 mt-12">
+          <SettingsTextarea
+            autoFocus
+            label={appletStrings.seoTitle}
+            state={meta_title}
+          />
+          <SettingsTextarea
+            label={appletStrings.seoDesc}
+            state={meta_description}
+          />
+        </div>
+      </ModalWithCloseButton>
     </>
   )
 }
diff --git a/packages/editor/src/plugins/serlo-template-plugins/article.tsx b/packages/editor/src/plugins/serlo-template-plugins/article.tsx
@@ -88,25 +88,23 @@ function ArticleTypeEditor(props: EditorPluginProps<ArticleTypePluginState>) {
       <section itemProp="articleBody">{content.render()}</section>
 
       <ToolbarMain showSubscriptionOptions {...props.state} />
-      {showSettingsModal ? (
-        <ModalWithCloseButton
-          isOpen={showSettingsModal}
-          onCloseClick={() => setShowSettingsModal(false)}
-          className="top-8 max-w-xl translate-y-0 sm:top-1/3"
-        >
-          <div className="mx-side mb-3 mt-12">
-            <SettingsTextarea
-              label={articleStrings.seoTitle}
-              state={meta_title}
-              autoFocus
-            />
-            <SettingsTextarea
-              label={articleStrings.seoDesc}
-              state={meta_description}
-            />
-          </div>
-        </ModalWithCloseButton>
-      ) : null}
+      <ModalWithCloseButton
+        isOpen={showSettingsModal}
+        onCloseClick={() => setShowSettingsModal(false)}
+        className="top-8 max-w-xl translate-y-0 sm:top-1/3"
+      >
+        <div className="mx-side mb-3 mt-12">
+          <SettingsTextarea
+            label={articleStrings.seoTitle}
+            state={meta_title}
+            autoFocus
+          />
+          <SettingsTextarea
+            label={articleStrings.seoDesc}
+            state={meta_description}
+          />
+        </div>
+      </ModalWithCloseButton>
     </>
   )
 }
diff --git a/packages/editor/src/plugins/serlo-template-plugins/course/course.tsx b/packages/editor/src/plugins/serlo-template-plugins/course/course.tsx
@@ -119,21 +119,19 @@ function CourseTypeEditor(props: EditorPluginProps<CourseTypePluginState>) {
         </div>
         <ToolbarMain showSubscriptionOptions {...props.state} />
       </article>
-      {showSettingsModal ? (
-        <ModalWithCloseButton
-          isOpen={showSettingsModal}
-          onCloseClick={() => setShowSettingsModal(false)}
-          className="max-w-xl"
-        >
-          <div className="mx-side mb-3 mt-12">
-            <SettingsTextarea
-              autoFocus
-              label={courseStrings.seoDesc}
-              state={meta_description}
-            />
-          </div>
-        </ModalWithCloseButton>
-      ) : null}
+      <ModalWithCloseButton
+        isOpen={showSettingsModal}
+        onCloseClick={() => setShowSettingsModal(false)}
+        className="max-w-xl"
+      >
+        <div className="mx-side mb-3 mt-12">
+          <SettingsTextarea
+            autoFocus
+            label={courseStrings.seoDesc}
+            state={meta_description}
+          />
+        </div>
+      </ModalWithCloseButton>
     </>
   )
 

diff --git a/packages/editor/src/plugins/solution/serlo-license-chooser.tsx b/packages/editor/src/plugins/solution/serlo-license-chooser.tsx
@@ -29,38 +29,32 @@ export function SerloLicenseChooser({ licenseId }: SerloLicenseChooserProps) {
           <FaIcon icon={faCreativeCommons} />
         </button>
       </div>
-      {showLicenseModal ? (
-        <ModalWithCloseButton
-          isOpen={showLicenseModal}
-          onCloseClick={() => setShowLicenseModal(false)}
-          className="top-8 max-w-xl translate-y-0 sm:top-1/3"
-        >
-          <h3 className="serlo-h3 mt-4">{solutionStrings.changeLicense}:</h3>
+      <ModalWithCloseButton
+        isOpen={showLicenseModal}
+        onCloseClick={() => setShowLicenseModal(false)}
+        className="top-8 max-w-xl translate-y-0 sm:top-1/3"
+      >
+        <h3 className="serlo-h3 mt-4">{solutionStrings.changeLicense}:</h3>
 
-          <div className="mx-side mb-3">
-            <select
-              className="serlo-button-light serlo-input-font-reset max-w-md"
-              onChange={(e) => {
-                if (licenseId.defined) licenseId.set(parseInt(e.target.value))
-                else licenseId.create(parseInt(e.target.value))
-              }}
-              value={licenseId.defined ? licenseId.value : undefined}
-            >
-              {licenses.map(({ id, title }) => {
-                return (
-                  <option
-                    className="bg-brand-200 text-brand"
-                    key={id}
-                    value={id}
-                  >
-                    {id} {title}
-                  </option>
-                )
-              })}
-            </select>
-          </div>
-        </ModalWithCloseButton>
-      ) : null}
+        <div className="mx-side mb-3">
+          <select
+            className="serlo-button-light serlo-input-font-reset max-w-md"
+            onChange={(e) => {
+              if (licenseId.defined) licenseId.set(parseInt(e.target.value))
+              else licenseId.create(parseInt(e.target.value))
+            }}
+            value={licenseId.defined ? licenseId.value : undefined}
+          >
+            {licenses.map(({ id, title }) => {
+              return (
+                <option className="bg-brand-200 text-brand" key={id} value={id}>
+                  {id} {title}
+                </option>
+              )
+            })}
+          </select>
+        </div>
+      </ModalWithCloseButton>
     </>
   )
 }