fix: white-space regression in changelog markdown

- switched back to `react-markdown@8.0.3`, - spinner when module is loading Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
arduino · May 4, 2023 · 45aeb7f · 45aeb7f
1 parent 21f3858
commit 45aeb7f
Show file tree

Hide file tree

Showing 4 changed files with 463 additions and 206 deletions.
diff --git a/arduino-ide-extension/package.json b/arduino-ide-extension/package.json
@@ -94,7 +94,7 @@
     "ps-tree": "^1.2.0",
     "query-string": "^7.0.1",
     "react-disable": "^0.1.1",
-    "react-markdown": "^6.0.3",
+    "react-markdown": "^8.0.0",
     "react-perfect-scrollbar": "^1.5.8",
     "react-select": "^5.6.0",
     "react-tabs": "^3.1.2",

diff --git a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx
@@ -1,9 +1,15 @@
-import { nls } from '@theia/core/lib/common';
+import { nls } from '@theia/core/lib/common/nls';
 import * as React from '@theia/core/shared/react';
-import ReactMarkdown from 'react-markdown';
+// @ts-expect-error see https://github.com/microsoft/TypeScript/issues/49721#issuecomment-1319854183
+import type { Options } from 'react-markdown';
 import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
 import ProgressBar from '../../components/ProgressBar';
 
+const ReactMarkdown = React.lazy<React.ComponentType<Options>>(
+  // @ts-expect-error see above
+  () => import('react-markdown')
+);
+
 export interface UpdateProgress {
   progressInfo?: ProgressInfo | undefined;
   downloadFinished?: boolean;
@@ -96,17 +102,26 @@ export const IDEUpdaterComponent = ({
         {changelog && (
           <div className="dialogRow changelog-container">
             <div className="changelog">
-              <ReactMarkdown
-                components={{
-                  a: ({ href, children, ...props }) => (
-                    <a onClick={() => href && openExternal(href)} {...props}>
-                      {children}
-                    </a>
-                  ),
-                }}
+              <React.Suspense
+                fallback={
+                  <div className="fallback">
+                    <div className="spinner" />
+                  </div>
+                }
               >
-                {changelog}
-              </ReactMarkdown>
+                <ReactMarkdown
+                  components={{
+                    // @ts-expect-error see imports. There is no ESM type-only import in CommonJS modules.
+                    a: ({ href, children, ...props }) => (
+                      <a onClick={() => href && openExternal(href)} {...props}>
+                        {children}
+                      </a>
+                    ),
+                  }}
+                >
+                  {changelog}
+                </ReactMarkdown>
+              </React.Suspense>
             </div>
           </div>
         )}

diff --git a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css
@@ -41,6 +41,17 @@
   overflow: auto;
   padding: 0 12px;
   cursor: text;
+  width: 100%;
+}
+
+.ide-updater-dialog .changelog .fallback {
+  min-height: 180px;
+  width: 100%;
+  display: flex;
+}
+
+.ide-updater-dialog .changelog .fallback .spinner {
+  align-self: center;
 }
 
 .dialogContent.ide-updater-dialog
@@ -104,3 +115,10 @@
   margin-left: 79px;
   margin-right: auto;
 }
+
+/* https://github.com/arduino/arduino-ide/pull/2027#issuecomment-1533174638 */
+/* https://github.com/eclipse-theia/theia/commit/1b5ff9ee459df14cedc0e8266dd02dae93fcd1bf#diff-d8d45a890507a01141c010ad4a6891edf2ae727cfa6dfe604cebbd667812cccbR68 */
+/* Use normal whitespace handling for the changelog content in the update dialog. */
+.p-Widget.dialogOverlay .dialogContent.ide-updater-dialog {
+  white-space: normal;
+}