fix: Unable to download the Dashboard as image in case there's an ima…

…ge added through Markdown (#20362)

* fix: Unable to download the Dashboard as image in case there's an image added through Markdown

* licence

(cherry picked from commit c5d3678)

superset-frontend/package.json

@@ -126,7 +126,7 @@
     "d3-array": "^1.2.4",
     "d3-color": "^1.2.0",
     "d3-scale": "^2.1.2",
-    "dom-to-image": "^2.6.0",
+    "dom-to-image-more": "^2.10.1",
     "emotion-rgba": "0.0.9",
     "fast-glob": "^3.2.7",
     "fontsource-fira-code": "^4.0.0",
@@ -237,7 +237,6 @@
     "@testing-library/react-hooks": "^5.0.3",
     "@testing-library/user-event": "^12.7.0",
     "@types/classnames": "^2.2.10",
-    "@types/dom-to-image": "^2.6.0",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/fetch-mock": "^7.3.2",

superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx

@@ -174,7 +174,6 @@ class HeaderActionsDropdown extends React.PureComponent {
         downloadAsImage(
           SCREENSHOT_NODE_SELECTOR,
           this.props.dashboardTitle,
-          {},
           true,
         )(domEvent).then(() => {
           menu.style.visibility = 'visible';

superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx

@@ -203,7 +203,6 @@ export const useExploreAdditionalActionsMenu = (
             '.panel-body .chart-container',
             // eslint-disable-next-line camelcase
             slice?.slice_name ?? t('New chart'),
-            {},
             true,
           )(domEvent);
           setIsDropdownVisible(false);

superset-frontend/src/types/dom-to-image-more.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+declare module 'dom-to-image-more' {
+  export interface Options {
+    filter?: ((node: Node) => boolean) | undefined;
+    bgcolor?: string | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    style?: {} | undefined;
+    quality?: number | undefined;
+    imagePlaceholder?: string | undefined;
+    cacheBust?: boolean | undefined;
+  }
+
+  class DomToImageMore {
+    static toJpeg(node: Node, options?: Options): Promise<string>;
+  }
+
+  export default DomToImageMore;
+}

superset-frontend/src/utils/downloadAsImage.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { SyntheticEvent } from 'react';
-import domToImage from 'dom-to-image';
+import domToImage from 'dom-to-image-more';
 import kebabCase from 'lodash/kebabCase';
 import { t } from '@superset-ui/core';
 import { addWarningToast } from 'src/components/MessageToasts/actions';
@@ -43,7 +43,6 @@ const generateFileStem = (description: string, date = new Date()) =>
  * @param selector css selector of the parent element which should be turned into image
  * @param description name or a short description of what is being printed.
  *   Value will be normalized, and a date as well as a file extension will be added.
- * @param domToImageOptions dom-to-image Options object.
  * @param isExactSelector if false, searches for the closest ancestor that matches selector.
  * @returns event handler
  */