@backstage/plugin-techdocs-module-addons-contrib 1.1.9 → 1.1.10-next.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @backstage/plugin-techdocs-module-addons-contrib
 
+## 1.1.10-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.14.5-next.0
+  - @backstage/plugin-techdocs-react@1.2.4-next.0
+  - @backstage/core-plugin-api@1.9.2
+  - @backstage/integration@1.10.0
+  - @backstage/integration-react@1.1.26
+
 ## 1.1.9
 
 ### Patch Changes

package/dist/ExpandableNavigation/ExpandableNavigation.esm.js

@@ -0,0 +1,81 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { useLocalStorageValue } from '@react-hookz/web';
+import { withStyles, Button } from '@material-ui/core';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { useShadowRootElements } from '@backstage/plugin-techdocs-react';
+
+const NESTED_LIST_TOGGLE = ".md-nav__item--nested .md-toggle";
+const EXPANDABLE_NAVIGATION_LOCAL_STORAGE = "@backstage/techdocs-addons/nav-expanded";
+const StyledButton = withStyles({
+  root: {
+    position: "absolute",
+    left: "220px",
+    top: "19px",
+    padding: 0,
+    minWidth: 0
+  }
+})(Button);
+const CollapsedIcon = withStyles({
+  root: {
+    height: "20px",
+    width: "20px"
+  }
+})(ChevronRightIcon);
+const ExpandedIcon = withStyles({
+  root: {
+    height: "20px",
+    width: "20px"
+  }
+})(ExpandMoreIcon);
+const ExpandableNavigationAddon = () => {
+  const defaultValue = { expandAllNestedNavs: false };
+  const { value: expanded, set: setExpanded } = useLocalStorageValue(
+    EXPANDABLE_NAVIGATION_LOCAL_STORAGE,
+    { defaultValue }
+  );
+  const [hasNavSubLevels, setHasNavSubLevels] = useState(false);
+  const [...checkboxToggles] = useShadowRootElements([
+    NESTED_LIST_TOGGLE
+  ]);
+  const shouldToggle = useCallback(
+    (item) => {
+      const isExpanded = item.checked;
+      const shouldExpand = expanded == null ? void 0 : expanded.expandAllNestedNavs;
+      if (shouldExpand && !isExpanded) {
+        return true;
+      }
+      if (!shouldExpand && isExpanded) {
+        return true;
+      }
+      return false;
+    },
+    [expanded]
+  );
+  useEffect(() => {
+    if (!(checkboxToggles == null ? void 0 : checkboxToggles.length))
+      return;
+    setHasNavSubLevels(true);
+    checkboxToggles.forEach((item) => {
+      if (shouldToggle(item))
+        item.click();
+    });
+  }, [expanded, shouldToggle, checkboxToggles]);
+  const handleState = () => {
+    setExpanded((prevState) => ({
+      expandAllNestedNavs: !(prevState == null ? void 0 : prevState.expandAllNestedNavs)
+    }));
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, hasNavSubLevels ? /* @__PURE__ */ React.createElement(
+    StyledButton,
+    {
+      size: "small",
+      onClick: handleState,
+      "aria-label": (expanded == null ? void 0 : expanded.expandAllNestedNavs) ? "collapse-nav" : "expand-nav"
+    },
+    (expanded == null ? void 0 : expanded.expandAllNestedNavs) ? /* @__PURE__ */ React.createElement(ExpandedIcon, null) : /* @__PURE__ */ React.createElement(CollapsedIcon, null)
+  ) : null);
+};
+
+export { ExpandableNavigationAddon };
+//# sourceMappingURL=ExpandableNavigation.esm.js.map

package/dist/ExpandableNavigation/ExpandableNavigation.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableNavigation.esm.js","sources":["../../src/ExpandableNavigation/ExpandableNavigation.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useEffect, useCallback, useState } from 'react';\nimport { useLocalStorageValue } from '@react-hookz/web';\nimport { Button, withStyles } from '@material-ui/core';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nimport { useShadowRootElements } from '@backstage/plugin-techdocs-react';\n\nconst NESTED_LIST_TOGGLE = '.md-nav__item--nested .md-toggle';\n\nconst EXPANDABLE_NAVIGATION_LOCAL_STORAGE =\n  '@backstage/techdocs-addons/nav-expanded';\n\nconst StyledButton = withStyles({\n  root: {\n    position: 'absolute',\n    left: '220px',\n    top: '19px',\n    padding: 0,\n    minWidth: 0,\n  },\n})(Button);\n\nconst CollapsedIcon = withStyles({\n  root: {\n    height: '20px',\n    width: '20px',\n  },\n})(ChevronRightIcon);\n\nconst ExpandedIcon = withStyles({\n  root: {\n    height: '20px',\n    width: '20px',\n  },\n})(ExpandMoreIcon);\n\ntype expandableNavigationLocalStorage = {\n  expandAllNestedNavs: boolean;\n};\n\n/**\n * Show expand/collapse navigation button next to site name in main\n * navigation menu if documentation site has nested navigation.\n */\nexport const ExpandableNavigationAddon = () => {\n  const defaultValue = { expandAllNestedNavs: false };\n  const { value: expanded, set: setExpanded } =\n    useLocalStorageValue<expandableNavigationLocalStorage>(\n      EXPANDABLE_NAVIGATION_LOCAL_STORAGE,\n      { defaultValue },\n    );\n  const [hasNavSubLevels, setHasNavSubLevels] = useState<boolean>(false);\n\n  const [...checkboxToggles] = useShadowRootElements<HTMLInputElement>([\n    NESTED_LIST_TOGGLE,\n  ]);\n\n  const shouldToggle = useCallback(\n    (item: HTMLInputElement) => {\n      const isExpanded = item.checked;\n      const shouldExpand = expanded?.expandAllNestedNavs;\n\n      // Is collapsed but should expand\n      if (shouldExpand && !isExpanded) {\n        return true;\n      }\n\n      // Is expanded but should collapse\n      if (!shouldExpand && isExpanded) {\n        return true;\n      }\n\n      return false;\n    },\n    [expanded],\n  );\n\n  useEffect(() => {\n    // There is no nested navs\n    if (!checkboxToggles?.length) return;\n\n    setHasNavSubLevels(true);\n    checkboxToggles.forEach(item => {\n      if (shouldToggle(item)) item.click();\n    });\n  }, [expanded, shouldToggle, checkboxToggles]);\n\n  const handleState = () => {\n    setExpanded(prevState => ({\n      expandAllNestedNavs: !prevState?.expandAllNestedNavs,\n    }));\n  };\n\n  return (\n    <>\n      {hasNavSubLevels ? (\n        <StyledButton\n          size=\"small\"\n          onClick={handleState}\n          aria-label={\n            expanded?.expandAllNestedNavs ? 'collapse-nav' : 'expand-nav'\n          }\n        >\n          {expanded?.expandAllNestedNavs ? <ExpandedIcon /> : <CollapsedIcon />}\n        </StyledButton>\n      ) : null}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/LigthBox/LightBox.esm.js

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import { useShadowRootElements } from '@backstage/plugin-techdocs-react';
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+import PhotoSwipe from 'photoswipe';
+import 'photoswipe/style.css';
+
+const LightBoxAddon = () => {
+  const images = useShadowRootElements(["img"]);
+  useEffect(() => {
+    let dataSourceImages = null;
+    let lightbox = new PhotoSwipeLightbox({
+      pswpModule: PhotoSwipe,
+      initialZoomLevel: 1,
+      secondaryZoomLevel: (zoomLevelObject) => {
+        const imageWidth = zoomLevelObject.elementSize.x;
+        const imageHeight = zoomLevelObject.elementSize.y;
+        const viewportWidth = zoomLevelObject.panAreaSize.x;
+        const viewportHeight = zoomLevelObject.panAreaSize.y;
+        const widthScale = viewportWidth / imageWidth;
+        const heightScale = viewportHeight / imageHeight;
+        const scaleFactor = Math.min(widthScale, heightScale);
+        return scaleFactor;
+      },
+      wheelToZoom: true,
+      arrowPrevSVG: '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge  css-c1sh5i" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowBackIosIcon" aria-label="fontSize large"><path d="M11.67 3.87 9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"></path></svg>',
+      arrowNextSVG: '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge  css-c1sh5i" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowForwardIosIcon" aria-label="fontSize large"><path d="M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z"></path></svg>',
+      closeSVG: '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge  css-c1sh5i" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CloseIcon" aria-label="fontSize large"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>',
+      zoomSVG: `<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge  css-c1sh5i" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ZoomIcon" aria-label="fontSize large">
+          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" id="photoswipe-zoom-icon-zoomin-path"></path><path d="M12 10H 7 V 9 H 12 Z" id="photoswipe-zoom-icon-zoomout-path">
+        </svg>`
+    });
+    images.forEach((image, index) => {
+      image.onclick = () => {
+        if (dataSourceImages === null) {
+          dataSourceImages = images.map((dataSourceImage) => {
+            return {
+              element: dataSourceImage,
+              src: dataSourceImage.src,
+              msrc: dataSourceImage.src,
+              alt: dataSourceImage.alt,
+              width: dataSourceImage.clientWidth,
+              height: dataSourceImage.clientHeight
+            };
+          });
+        }
+        lightbox.loadAndOpen(index, dataSourceImages);
+        return false;
+      };
+    });
+    lightbox.init();
+    return () => {
+      lightbox.destroy();
+      lightbox = null;
+    };
+  }, [images]);
+  return null;
+};
+
+export { LightBoxAddon };
+//# sourceMappingURL=LightBox.esm.js.map

package/dist/LigthBox/LightBox.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightBox.esm.js","sources":["../../src/LigthBox/LightBox.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect } from 'react';\nimport { useShadowRootElements } from '@backstage/plugin-techdocs-react';\n// @ts-ignore\nimport PhotoSwipeLightbox, { DataSource, ZoomLevel } from 'photoswipe/lightbox';\nimport PhotoSwipe from 'photoswipe';\nimport 'photoswipe/style.css';\nimport './lightbox.css';\n\nexport const LightBoxAddon = () => {\n  const images = useShadowRootElements<HTMLImageElement>(['img']);\n\n  useEffect(() => {\n    let dataSourceImages: DataSource | null = null;\n\n    let lightbox = new PhotoSwipeLightbox({\n      pswpModule: PhotoSwipe,\n      initialZoomLevel: 1,\n      secondaryZoomLevel: (zoomLevelObject: ZoomLevel) => {\n        // photoswipe/lightbox won't zoom the image further then the given width and height.\n        // therefore we need to calculate the zoom factor needed to fit the complete image in the viewport manually.\n        const imageWidth = zoomLevelObject.elementSize.x;\n        const imageHeight = zoomLevelObject.elementSize.y;\n        const viewportWidth = zoomLevelObject.panAreaSize.x;\n        const viewportHeight = zoomLevelObject.panAreaSize.y;\n\n        const widthScale = viewportWidth / imageWidth;\n        const heightScale = viewportHeight / imageHeight;\n\n        const scaleFactor = Math.min(widthScale, heightScale);\n        return scaleFactor;\n      },\n      wheelToZoom: true,\n      arrowPrevSVG:\n        '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeLarge  css-c1sh5i\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"ArrowBackIosIcon\" aria-label=\"fontSize large\"><path d=\"M11.67 3.87 9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z\"></path></svg>',\n      arrowNextSVG:\n        '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeLarge  css-c1sh5i\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"ArrowForwardIosIcon\" aria-label=\"fontSize large\"><path d=\"M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z\"></path></svg>',\n      closeSVG:\n        '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeLarge  css-c1sh5i\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"CloseIcon\" aria-label=\"fontSize large\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path></svg>',\n      zoomSVG: `<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeLarge  css-c1sh5i\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"ZoomIcon\" aria-label=\"fontSize large\">\n          <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"></path><path d=\"M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z\" id=\"photoswipe-zoom-icon-zoomin-path\"></path><path d=\"M12 10H 7 V 9 H 12 Z\" id=\"photoswipe-zoom-icon-zoomout-path\">\n        </svg>`,\n    });\n\n    images.forEach((image, index) => {\n      image.onclick = () => {\n        if (dataSourceImages === null) {\n          dataSourceImages = images.map(dataSourceImage => {\n            return {\n              element: dataSourceImage,\n              src: dataSourceImage.src,\n              msrc: dataSourceImage.src,\n              alt: dataSourceImage.alt,\n              width: dataSourceImage.clientWidth,\n              height: dataSourceImage.clientHeight,\n            };\n          });\n        }\n        lightbox.loadAndOpen(index, dataSourceImages);\n        return false;\n      };\n    });\n    lightbox.init();\n\n    return () => {\n      lightbox.destroy();\n      lightbox = null;\n    };\n  }, [images]);\n\n  return null;\n};\n"],"names":[],"mappings":";;;;;;AAwBO,MAAM,gBAAgB,MAAM;AACjC,EAAA,MAAM,MAAS,GAAA,qBAAA,CAAwC,CAAC,KAAK,CAAC,CAAA,CAAA;AAE9D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAsC,GAAA,IAAA,CAAA;AAE1C,IAAI,IAAA,QAAA,GAAW,IAAI,kBAAmB,CAAA;AAAA,MACpC,UAAY,EAAA,UAAA;AAAA,MACZ,gBAAkB,EAAA,CAAA;AAAA,MAClB,kBAAA,EAAoB,CAAC,eAA+B,KAAA;AAGlD,QAAM,MAAA,UAAA,GAAa,gBAAgB,WAAY,CAAA,CAAA,CAAA;AAC/C,QAAM,MAAA,WAAA,GAAc,gBAAgB,WAAY,CAAA,CAAA,CAAA;AAChD,QAAM,MAAA,aAAA,GAAgB,gBAAgB,WAAY,CAAA,CAAA,CAAA;AAClD,QAAM,MAAA,cAAA,GAAiB,gBAAgB,WAAY,CAAA,CAAA,CAAA;AAEnD,QAAA,MAAM,aAAa,aAAgB,GAAA,UAAA,CAAA;AACnC,QAAA,MAAM,cAAc,cAAiB,GAAA,WAAA,CAAA;AAErC,QAAA,MAAM,WAAc,GAAA,IAAA,CAAK,GAAI,CAAA,UAAA,EAAY,WAAW,CAAA,CAAA;AACpD,QAAO,OAAA,WAAA,CAAA;AAAA,OACT;AAAA,MACA,WAAa,EAAA,IAAA;AAAA,MACb,YACE,EAAA,mQAAA;AAAA,MACF,YACE,EAAA,iQAAA;AAAA,MACF,QACE,EAAA,8SAAA;AAAA,MACF,OAAS,EAAA,CAAA;AAAA;AAAA,cAAA,CAAA;AAAA,KAGV,CAAA,CAAA;AAED,IAAO,MAAA,CAAA,OAAA,CAAQ,CAAC,KAAA,EAAO,KAAU,KAAA;AAC/B,MAAA,KAAA,CAAM,UAAU,MAAM;AACpB,QAAA,IAAI,qBAAqB,IAAM,EAAA;AAC7B,UAAmB,gBAAA,GAAA,MAAA,CAAO,IAAI,CAAmB,eAAA,KAAA;AAC/C,YAAO,OAAA;AAAA,cACL,OAAS,EAAA,eAAA;AAAA,cACT,KAAK,eAAgB,CAAA,GAAA;AAAA,cACrB,MAAM,eAAgB,CAAA,GAAA;AAAA,cACtB,KAAK,eAAgB,CAAA,GAAA;AAAA,cACrB,OAAO,eAAgB,CAAA,WAAA;AAAA,cACvB,QAAQ,eAAgB,CAAA,YAAA;AAAA,aAC1B,CAAA;AAAA,WACD,CAAA,CAAA;AAAA,SACH;AACA,QAAS,QAAA,CAAA,WAAA,CAAY,OAAO,gBAAgB,CAAA,CAAA;AAC5C,QAAO,OAAA,KAAA,CAAA;AAAA,OACT,CAAA;AAAA,KACD,CAAA,CAAA;AACD,IAAA,QAAA,CAAS,IAAK,EAAA,CAAA;AAEd,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,OAAQ,EAAA,CAAA;AACjB,MAAW,QAAA,GAAA,IAAA,CAAA;AAAA,KACb,CAAA;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist/ReportIssue/IssueLink.esm.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+import BugReportIcon from '@material-ui/icons/BugReport';
+import { Link, GitHubIcon } from '@backstage/core-components';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "grid",
+    gridGap: theme.spacing(1),
+    gridAutoFlow: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    color: theme.palette.common.black,
+    fontSize: theme.typography.button.fontSize
+  }
+}));
+const getIcon = ({ type }) => {
+  if (type === "github") {
+    return GitHubIcon;
+  }
+  return BugReportIcon;
+};
+const getName = ({ type }) => {
+  if (type === "github") {
+    return "Github";
+  }
+  return "Gitlab";
+};
+const getUrl = (repository, template) => {
+  const { title, body } = template;
+  const encodedTitle = encodeURIComponent(title);
+  const encodedBody = encodeURIComponent(body);
+  const { protocol, resource, owner, name, type } = repository;
+  const url = `${protocol}://${resource}/${owner}/${name}`;
+  const encodedUrl = encodeURI(url);
+  if (type === "github") {
+    return `${encodedUrl}/issues/new?title=${encodedTitle}&body=${encodedBody}`;
+  }
+  return `${encodedUrl}/issues/new?issue[title]=${encodedTitle}&issue[description]=${encodedBody}`;
+};
+const IssueLink = ({ template, repository }) => {
+  const classes = useStyles();
+  const Icon = getIcon(repository);
+  const url = getUrl(repository, template);
+  return /* @__PURE__ */ React.createElement(Link, { className: classes.root, to: url, target: "_blank" }, /* @__PURE__ */ React.createElement(Icon, null), " Open new ", getName(repository), " issue");
+};
+
+export { IssueLink };
+//# sourceMappingURL=IssueLink.esm.js.map

package/dist/ReportIssue/IssueLink.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IssueLink.esm.js","sources":["../../src/ReportIssue/IssueLink.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { makeStyles } from '@material-ui/core';\nimport BugReportIcon from '@material-ui/icons/BugReport';\n\nimport { Link, GitHubIcon } from '@backstage/core-components';\n\nimport { ReportIssueTemplate, Repository } from './types';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'grid',\n    gridGap: theme.spacing(1),\n    gridAutoFlow: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    color: theme.palette.common.black,\n    fontSize: theme.typography.button.fontSize,\n  },\n}));\n\ntype IssueLinkProps = {\n  template: ReportIssueTemplate;\n  repository: Repository;\n};\n\nconst getIcon = ({ type }: Repository) => {\n  if (type === 'github') {\n    return GitHubIcon;\n  }\n  return BugReportIcon;\n};\n\nconst getName = ({ type }: Repository) => {\n  if (type === 'github') {\n    return 'Github';\n  }\n  return 'Gitlab';\n};\n\nconst getUrl = (repository: Repository, template: ReportIssueTemplate) => {\n  const { title, body } = template;\n  const encodedTitle = encodeURIComponent(title);\n  const encodedBody = encodeURIComponent(body);\n  const { protocol, resource, owner, name, type } = repository;\n\n  const url = `${protocol}://${resource}/${owner}/${name}`;\n  const encodedUrl = encodeURI(url);\n  if (type === 'github') {\n    return `${encodedUrl}/issues/new?title=${encodedTitle}&body=${encodedBody}`;\n  }\n  return `${encodedUrl}/issues/new?issue[title]=${encodedTitle}&issue[description]=${encodedBody}`;\n};\n\nexport const IssueLink = ({ template, repository }: IssueLinkProps) => {\n  const classes = useStyles();\n\n  const Icon = getIcon(repository);\n  const url = getUrl(repository, template);\n\n  return (\n    <Link className={classes.root} to={url} target=\"_blank\">\n      <Icon /> Open new {getName(repository)} issue\n    </Link>\n  );\n};\n"],"names":[],"mappings":";;;;;AAyBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,OAAS,EAAA,MAAA;AAAA,IACT,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,YAAc,EAAA,QAAA;AAAA,IACd,cAAgB,EAAA,QAAA;AAAA,IAChB,UAAY,EAAA,QAAA;AAAA,IACZ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,KAAA;AAAA,IAC5B,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,MAAO,CAAA,QAAA;AAAA,GACpC;AACF,CAAE,CAAA,CAAA,CAAA;AAOF,MAAM,OAAU,GAAA,CAAC,EAAE,IAAA,EAAuB,KAAA;AACxC,EAAA,IAAI,SAAS,QAAU,EAAA;AACrB,IAAO,OAAA,UAAA,CAAA;AAAA,GACT;AACA,EAAO,OAAA,aAAA,CAAA;AACT,CAAA,CAAA;AAEA,MAAM,OAAU,GAAA,CAAC,EAAE,IAAA,EAAuB,KAAA;AACxC,EAAA,IAAI,SAAS,QAAU,EAAA;AACrB,IAAO,OAAA,QAAA,CAAA;AAAA,GACT;AACA,EAAO,OAAA,QAAA,CAAA;AACT,CAAA,CAAA;AAEA,MAAM,MAAA,GAAS,CAAC,UAAA,EAAwB,QAAkC,KAAA;AACxE,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,QAAA,CAAA;AACxB,EAAM,MAAA,YAAA,GAAe,mBAAmB,KAAK,CAAA,CAAA;AAC7C,EAAM,MAAA,WAAA,GAAc,mBAAmB,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,EAAE,QAAU,EAAA,QAAA,EAAU,KAAO,EAAA,IAAA,EAAM,MAAS,GAAA,UAAA,CAAA;AAElD,EAAM,MAAA,GAAA,GAAM,GAAG,QAAQ,CAAA,GAAA,EAAM,QAAQ,CAAI,CAAA,EAAA,KAAK,IAAI,IAAI,CAAA,CAAA,CAAA;AACtD,EAAM,MAAA,UAAA,GAAa,UAAU,GAAG,CAAA,CAAA;AAChC,EAAA,IAAI,SAAS,QAAU,EAAA;AACrB,IAAA,OAAO,CAAG,EAAA,UAAU,CAAqB,kBAAA,EAAA,YAAY,SAAS,WAAW,CAAA,CAAA,CAAA;AAAA,GAC3E;AACA,EAAA,OAAO,CAAG,EAAA,UAAU,CAA4B,yBAAA,EAAA,YAAY,uBAAuB,WAAW,CAAA,CAAA,CAAA;AAChG,CAAA,CAAA;AAEO,MAAM,SAAY,GAAA,CAAC,EAAE,QAAA,EAAU,YAAiC,KAAA;AACrE,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAE1B,EAAM,MAAA,IAAA,GAAO,QAAQ,UAAU,CAAA,CAAA;AAC/B,EAAM,MAAA,GAAA,GAAM,MAAO,CAAA,UAAA,EAAY,QAAQ,CAAA,CAAA;AAEvC,EAAA,2CACG,IAAK,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,IAAA,EAAM,IAAI,GAAK,EAAA,MAAA,EAAO,QAC7C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAK,CAAE,EAAA,YAAA,EAAW,OAAQ,CAAA,UAAU,GAAE,QACzC,CAAA,CAAA;AAEJ;;;;"}

package/dist/ReportIssue/ReportIssue.esm.js

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import { makeStyles, Portal, Paper } from '@material-ui/core';
+import { useGitRepository, useGitTemplate } from './hooks.esm.js';
+import { PAGE_MAIN_CONTENT_SELECTOR, PAGE_FEEDBACK_LINK_SELECTOR, ADDON_FEEDBACK_CONTAINER_SELECTOR, ADDON_FEEDBACK_CONTAINER_ID } from './constants.esm.js';
+import { IssueLink } from './IssueLink.esm.js';
+import { useShadowRootSelection, useShadowRootElements } from '@backstage/plugin-techdocs-react';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    transform: "translate(-100%, -100%)",
+    position: "absolute",
+    padding: theme.spacing(1),
+    zIndex: theme.zIndex.tooltip,
+    background: theme.palette.common.white
+  }
+}));
+const ReportIssueAddon = ({
+  debounceTime = 500,
+  templateBuilder: buildTemplate
+}) => {
+  const classes = useStyles();
+  const [style, setStyle] = useState();
+  const repository = useGitRepository();
+  const defaultTemplate = useGitTemplate(debounceTime);
+  const selection = useShadowRootSelection(debounceTime);
+  const [mainContent, feedbackLink] = useShadowRootElements([
+    PAGE_MAIN_CONTENT_SELECTOR,
+    PAGE_FEEDBACK_LINK_SELECTOR
+  ]);
+  let [feedbackContainer] = useShadowRootElements([
+    ADDON_FEEDBACK_CONTAINER_SELECTOR
+  ]);
+  if (feedbackLink) {
+    feedbackLink.style.display = "none";
+  }
+  useEffect(() => {
+    if (
+      // todo(backstage/techdocs-core) handle non-repo rendering
+      !repository || !selection || !selection.containsNode(mainContent, true) || (selection == null ? void 0 : selection.containsNode(feedbackContainer, true))
+    ) {
+      return;
+    }
+    const mainContentPosition = mainContent.getBoundingClientRect();
+    const selectionPosition = selection.getRangeAt(0).getBoundingClientRect();
+    const distanceFromTop = selectionPosition.top - mainContentPosition.top;
+    const minDistanceFromTop = 50;
+    let top = distanceFromTop < minDistanceFromTop ? 101 : distanceFromTop - 16;
+    if (mainContentPosition.top < 0) {
+      const absMainContentTop = Math.abs(mainContentPosition.top);
+      if (distanceFromTop - absMainContentTop < minDistanceFromTop) {
+        top += 89;
+      }
+    }
+    setStyle({
+      top: `${top}px`,
+      left: `${selectionPosition.left + selectionPosition.width / 2}px`
+    });
+  }, [selection, mainContent, feedbackContainer]);
+  if (!selection || !repository || !["github", "gitlab"].includes(repository.type))
+    return null;
+  if (!feedbackContainer) {
+    feedbackContainer = document.createElement("div");
+    feedbackContainer.setAttribute("id", ADDON_FEEDBACK_CONTAINER_ID);
+    mainContent.prepend(feedbackContainer);
+  }
+  return /* @__PURE__ */ React.createElement(Portal, { container: feedbackContainer }, /* @__PURE__ */ React.createElement(
+    Paper,
+    {
+      "data-testid": "report-issue-addon",
+      className: classes.root,
+      style
+    },
+    /* @__PURE__ */ React.createElement(
+      IssueLink,
+      {
+        repository,
+        template: buildTemplate ? buildTemplate({ selection }) : defaultTemplate
+      }
+    )
+  ));
+};
+
+export { ReportIssueAddon };
+//# sourceMappingURL=ReportIssue.esm.js.map

package/dist/ReportIssue/ReportIssue.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReportIssue.esm.js","sources":["../../src/ReportIssue/ReportIssue.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState, useEffect } from 'react';\n\nimport { makeStyles, Portal, Paper } from '@material-ui/core';\n\nimport { useGitTemplate, useGitRepository } from './hooks';\nimport { ReportIssueTemplateBuilder } from './types';\nimport {\n  PAGE_MAIN_CONTENT_SELECTOR,\n  PAGE_FEEDBACK_LINK_SELECTOR,\n  ADDON_FEEDBACK_CONTAINER_ID,\n  ADDON_FEEDBACK_CONTAINER_SELECTOR,\n} from './constants';\nimport { IssueLink } from './IssueLink';\n\nimport {\n  useShadowRootElements,\n  useShadowRootSelection,\n} from '@backstage/plugin-techdocs-react';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    transform: 'translate(-100%, -100%)',\n    position: 'absolute',\n    padding: theme.spacing(1),\n    zIndex: theme.zIndex.tooltip,\n    background: theme.palette.common.white,\n  },\n}));\n\ntype Style = {\n  top: string;\n  left: string;\n};\n\n/**\n * Props customizing the <ReportIssue /> Addon.\n *\n * @public\n */\nexport type ReportIssueProps = {\n  /**\n   * Number of milliseconds after a user highlights some text before the report\n   * issue link appears above the highlighted text. Defaults to 500ms.\n   */\n  debounceTime?: number;\n\n  /**\n   * An optional function defining how a custom issue title and body should be\n   * constructed, given some selected text.\n   */\n  templateBuilder?: ReportIssueTemplateBuilder;\n};\n\n/**\n * Show report issue button when text is highlighted\n */\nexport const ReportIssueAddon = ({\n  debounceTime = 500,\n  templateBuilder: buildTemplate,\n}: ReportIssueProps) => {\n  const classes = useStyles();\n  const [style, setStyle] = useState<Style>();\n\n  const repository = useGitRepository();\n\n  const defaultTemplate = useGitTemplate(debounceTime);\n\n  const selection = useShadowRootSelection(debounceTime);\n\n  const [mainContent, feedbackLink] = useShadowRootElements([\n    PAGE_MAIN_CONTENT_SELECTOR,\n    PAGE_FEEDBACK_LINK_SELECTOR,\n  ]);\n\n  let [feedbackContainer] = useShadowRootElements([\n    ADDON_FEEDBACK_CONTAINER_SELECTOR,\n  ]);\n\n  if (feedbackLink) {\n    feedbackLink.style.display = 'none';\n  }\n\n  // calculates the position of the selected text to be able to set the position of the addon\n  useEffect(() => {\n    if (\n      // todo(backstage/techdocs-core) handle non-repo rendering\n      !repository ||\n      !selection ||\n      !selection.containsNode(mainContent!, true) ||\n      selection?.containsNode(feedbackContainer!, true)\n    ) {\n      return;\n    }\n\n    const mainContentPosition = mainContent!.getBoundingClientRect();\n    const selectionPosition = selection.getRangeAt(0).getBoundingClientRect();\n\n    // Calculating the distance between the selection's top and the main content's top\n    const distanceFromTop = selectionPosition.top - mainContentPosition.top;\n    const minDistanceFromTop = 50;\n\n    // Defining a base value for 'top'\n    let top = distanceFromTop < minDistanceFromTop ? 101 : distanceFromTop - 16;\n\n    // Checking if the main content is off-screen towards the top\n    if (mainContentPosition.top < 0) {\n      const absMainContentTop = Math.abs(mainContentPosition.top);\n\n      // Adjusting 'top' if the selection is close to the top edge and the main content is off-screen\n      if (distanceFromTop - absMainContentTop < minDistanceFromTop) {\n        top += 89;\n      }\n    }\n\n    setStyle({\n      top: `${top}px`,\n      left: `${selectionPosition.left + selectionPosition.width / 2}px`,\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selection, mainContent, feedbackContainer]);\n\n  if (\n    !selection ||\n    !repository ||\n    !['github', 'gitlab'].includes(repository.type)\n  )\n    return null;\n\n  if (!feedbackContainer) {\n    feedbackContainer = document.createElement('div');\n    feedbackContainer.setAttribute('id', ADDON_FEEDBACK_CONTAINER_ID);\n    mainContent!.prepend(feedbackContainer);\n  }\n\n  return (\n    <Portal container={feedbackContainer}>\n      <Paper\n        data-testid=\"report-issue-addon\"\n        className={classes.root}\n        style={style}\n      >\n        <IssueLink\n          repository={repository}\n          template={\n            buildTemplate ? buildTemplate({ selection }) : defaultTemplate\n          }\n        />\n      </Paper>\n    </Portal>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/ReportIssue/constants.esm.js

@@ -0,0 +1,8 @@
+const ADDON_FEEDBACK_CONTAINER_ID = "techdocs-report-issue";
+const ADDON_FEEDBACK_CONTAINER_SELECTOR = `#${ADDON_FEEDBACK_CONTAINER_ID}`;
+const PAGE_EDIT_LINK_SELECTOR = '[title^="Edit this page"]';
+const PAGE_FEEDBACK_LINK_SELECTOR = '[title^="Leave feedback for"]';
+const PAGE_MAIN_CONTENT_SELECTOR = '[data-md-component="main"] .md-content';
+
+export { ADDON_FEEDBACK_CONTAINER_ID, ADDON_FEEDBACK_CONTAINER_SELECTOR, PAGE_EDIT_LINK_SELECTOR, PAGE_FEEDBACK_LINK_SELECTOR, PAGE_MAIN_CONTENT_SELECTOR };
+//# sourceMappingURL=constants.esm.js.map

package/dist/ReportIssue/constants.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.esm.js","sources":["../../src/ReportIssue/constants.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport const ADDON_FEEDBACK_CONTAINER_ID = 'techdocs-report-issue';\nexport const ADDON_FEEDBACK_CONTAINER_SELECTOR = `#${ADDON_FEEDBACK_CONTAINER_ID}`;\nexport const PAGE_EDIT_LINK_SELECTOR = '[title^=\"Edit this page\"]';\nexport const PAGE_FEEDBACK_LINK_SELECTOR = '[title^=\"Leave feedback for\"]';\nexport const PAGE_MAIN_CONTENT_SELECTOR =\n  '[data-md-component=\"main\"] .md-content';\n"],"names":[],"mappings":"AAgBO,MAAM,2BAA8B,GAAA,wBAAA;AAC9B,MAAA,iCAAA,GAAoC,IAAI,2BAA2B,CAAA,EAAA;AACzE,MAAM,uBAA0B,GAAA,4BAAA;AAChC,MAAM,2BAA8B,GAAA,gCAAA;AACpC,MAAM,0BACX,GAAA;;;;"}

package/dist/ReportIssue/hooks.esm.js

@@ -0,0 +1,79 @@
+import parseGitUrl from 'git-url-parse';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { replaceGithubUrlType, replaceGitLabUrlType } from '@backstage/integration';
+import { scmIntegrationsApiRef } from '@backstage/integration-react';
+import { useShadowRootSelection, useShadowRootElements } from '@backstage/plugin-techdocs-react';
+import { PAGE_EDIT_LINK_SELECTOR } from './constants.esm.js';
+
+const resolveBlobUrl = (url, type) => {
+  if (type === "github") {
+    return replaceGithubUrlType(url, "blob");
+  } else if (type === "gitlab") {
+    return replaceGitLabUrlType(url, "blob");
+  }
+  console.error(
+    `Invalid SCM type ${type} found in ReportIssue addon for URL ${url}!`
+  );
+  return url;
+};
+const getTitle = (selection) => {
+  const text = selection.toString().substring(0, 70);
+  const ellipsis = text.length === 70 ? "..." : "";
+  return `Documentation feedback: ${text}${ellipsis}`;
+};
+const getBody = (selection, markdownUrl, appTitle) => {
+  const title = "## Documentation Feedback \u{1F4DD}";
+  const subheading = "#### The highlighted text:";
+  const commentHeading = "#### The comment on the text:";
+  const commentPlaceholder = "_>replace this line with your comment<_";
+  const highlightedTextAsQuote = selection.toString().trim().split("\n").map((line) => `> ${line.trim()}`).join("\n");
+  const facts = [
+    `${appTitle} URL: <${window.location.href}> 
+Markdown URL: <${markdownUrl}>`
+  ];
+  return `${title}
+
+ ${subheading} 
+
+ ${highlightedTextAsQuote}
+
+ ${commentHeading} 
+ ${commentPlaceholder}
+
+ ___
+${facts}`;
+};
+const useGitTemplate = (debounceTime) => {
+  var _a, _b;
+  const initialTemplate = { title: "", body: "" };
+  const selection = useShadowRootSelection(debounceTime);
+  const [editLink] = useShadowRootElements([PAGE_EDIT_LINK_SELECTOR]);
+  const url = (_a = editLink == null ? void 0 : editLink.href) != null ? _a : "";
+  const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
+  const configApi = useApi(configApiRef);
+  const appTitle = configApi.getOptionalString("app.title") || "Backstage";
+  if (!selection || !url)
+    return initialTemplate;
+  const type = (_b = scmIntegrationsApi.byUrl(url)) == null ? void 0 : _b.type;
+  if (!type)
+    return initialTemplate;
+  return {
+    title: getTitle(selection),
+    body: getBody(selection, resolveBlobUrl(url, type), appTitle)
+  };
+};
+const useGitRepository = () => {
+  var _a, _b;
+  const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
+  const [editLink] = useShadowRootElements([PAGE_EDIT_LINK_SELECTOR]);
+  const url = (_a = editLink == null ? void 0 : editLink.href) != null ? _a : "";
+  if (!url)
+    return null;
+  const type = (_b = scmIntegrationsApi.byUrl(url)) == null ? void 0 : _b.type;
+  if (!type)
+    return null;
+  return { ...parseGitUrl(resolveBlobUrl(url, type)), type };
+};
+
+export { getBody, getTitle, useGitRepository, useGitTemplate };
+//# sourceMappingURL=hooks.esm.js.map

package/dist/ReportIssue/hooks.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.esm.js","sources":["../../src/ReportIssue/hooks.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport parseGitUrl from 'git-url-parse';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport {\n  replaceGithubUrlType,\n  replaceGitLabUrlType,\n} from '@backstage/integration';\nimport { scmIntegrationsApiRef } from '@backstage/integration-react';\nimport {\n  useShadowRootElements,\n  useShadowRootSelection,\n} from '@backstage/plugin-techdocs-react';\n\nimport { PAGE_EDIT_LINK_SELECTOR } from './constants';\n\nconst resolveBlobUrl = (url: string, type: string) => {\n  if (type === 'github') {\n    return replaceGithubUrlType(url, 'blob');\n  } else if (type === 'gitlab') {\n    return replaceGitLabUrlType(url, 'blob');\n  }\n  // eslint-disable-next-line no-console\n  console.error(\n    `Invalid SCM type ${type} found in ReportIssue addon for URL ${url}!`,\n  );\n  return url;\n};\n\nexport const getTitle = (selection: Selection) => {\n  const text = selection.toString().substring(0, 70);\n  const ellipsis = text.length === 70 ? '...' : '';\n  return `Documentation feedback: ${text}${ellipsis}`;\n};\n\nexport const getBody = (\n  selection: Selection,\n  markdownUrl: string,\n  appTitle: string,\n) => {\n  const title = '## Documentation Feedback 📝';\n  const subheading = '#### The highlighted text:';\n  const commentHeading = '#### The comment on the text:';\n  const commentPlaceholder = '_>replace this line with your comment<_';\n  const highlightedTextAsQuote = selection\n    .toString()\n    .trim()\n    .split('\\n')\n    .map(line => `> ${line.trim()}`)\n    .join('\\n');\n\n  const facts = [\n    `${appTitle} URL: <${window.location.href}> \\nMarkdown URL: <${markdownUrl}>`,\n  ];\n\n  return `${title}\\n\\n ${subheading} \\n\\n ${highlightedTextAsQuote}\\n\\n ${commentHeading} \\n ${commentPlaceholder}\\n\\n ___\\n${facts}`;\n};\n\nexport const useGitTemplate = (debounceTime?: number) => {\n  const initialTemplate = { title: '', body: '' };\n  const selection = useShadowRootSelection(debounceTime);\n  const [editLink] = useShadowRootElements([PAGE_EDIT_LINK_SELECTOR]);\n  const url = (editLink as HTMLAnchorElement)?.href ?? '';\n  const scmIntegrationsApi = useApi(scmIntegrationsApiRef);\n  const configApi = useApi(configApiRef);\n  const appTitle = configApi.getOptionalString('app.title') || 'Backstage';\n  if (!selection || !url) return initialTemplate;\n\n  const type = scmIntegrationsApi.byUrl(url)?.type;\n\n  if (!type) return initialTemplate;\n\n  return {\n    title: getTitle(selection),\n    body: getBody(selection, resolveBlobUrl(url, type), appTitle),\n  };\n};\n\nexport const useGitRepository = () => {\n  const scmIntegrationsApi = useApi(scmIntegrationsApiRef);\n\n  const [editLink] = useShadowRootElements([PAGE_EDIT_LINK_SELECTOR]);\n  const url = (editLink as HTMLAnchorElement)?.href ?? '';\n\n  if (!url) return null;\n\n  const type = scmIntegrationsApi.byUrl(url)?.type;\n\n  if (!type) return null;\n\n  return { ...parseGitUrl(resolveBlobUrl(url, type)), type };\n};\n"],"names":[],"mappings":"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"}

package/dist/TextSize/TextSize.esm.js

@@ -0,0 +1,188 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { withStyles, Slider, makeStyles, useTheme, MenuItem, ListItemText, Typography, Box, IconButton } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import RemoveIcon from '@material-ui/icons/Remove';
+import { useShadowRootElements } from '@backstage/plugin-techdocs-react';
+
+const boxShadow = "0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)";
+const StyledSlider = withStyles((theme) => ({
+  root: {
+    height: 2,
+    padding: "15px 0"
+  },
+  thumb: {
+    height: 18,
+    width: 18,
+    backgroundColor: theme.palette.common.white,
+    boxShadow,
+    marginTop: -9,
+    marginLeft: -9,
+    "&:focus, &:hover, &$active": {
+      boxShadow: "0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)",
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        boxShadow
+      }
+    }
+  },
+  active: {},
+  valueLabel: {
+    top: "100%",
+    left: "50%",
+    transform: "scale(1) translate(-50%, -5px) !important",
+    "& *": {
+      color: theme.palette.textSubtle,
+      fontSize: theme.typography.caption.fontSize,
+      background: "transparent"
+    }
+  },
+  track: {
+    height: 2
+  },
+  rail: {
+    height: 2,
+    opacity: 0.5
+  },
+  mark: {
+    height: 10,
+    width: 1,
+    marginTop: -4
+  },
+  markActive: {
+    opacity: 1,
+    backgroundColor: "currentColor"
+  }
+}))(Slider);
+const settings = {
+  key: "techdocs.addons.settings.textsize",
+  defaultValue: 100
+};
+const marks = [
+  {
+    value: 90
+  },
+  {
+    value: 100
+  },
+  {
+    value: 115
+  },
+  {
+    value: 130
+  },
+  {
+    value: 150
+  }
+];
+const useStyles = makeStyles((theme) => ({
+  container: {
+    color: theme.palette.textSubtle,
+    display: "flex",
+    alignItems: "center",
+    margin: 0,
+    minWidth: 200
+  },
+  menuItem: {
+    "&:hover": {
+      background: "transparent"
+    }
+  },
+  decreaseButton: {
+    marginRight: theme.spacing(1)
+  },
+  increaseButton: {
+    marginLeft: theme.spacing(1)
+  }
+}));
+const TextSizeAddon = () => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const [body] = useShadowRootElements(["body"]);
+  const [value, setValue] = useState(() => {
+    const initialValue = localStorage == null ? void 0 : localStorage.getItem(settings.key);
+    return initialValue ? parseInt(initialValue, 10) : settings.defaultValue;
+  });
+  const values = useMemo(() => marks.map((mark) => mark.value), []);
+  const index = useMemo(() => values.indexOf(value), [values, value]);
+  const min = useMemo(() => values[0], [values]);
+  const max = useMemo(() => values[values.length - 1], [values]);
+  const getValueText = useCallback(() => `${value}%`, [value]);
+  const handleChangeCommitted = useCallback(
+    (_event, newValue) => {
+      if (!Array.isArray(newValue)) {
+        setValue(newValue);
+        localStorage == null ? void 0 : localStorage.setItem(settings.key, String(newValue));
+      }
+    },
+    [setValue]
+  );
+  const handleDecreaseClick = useCallback(
+    (event) => {
+      handleChangeCommitted(event, values[index - 1]);
+    },
+    [index, values, handleChangeCommitted]
+  );
+  const handleIncreaseClick = useCallback(
+    (event) => {
+      handleChangeCommitted(event, values[index + 1]);
+    },
+    [index, values, handleChangeCommitted]
+  );
+  useEffect(() => {
+    var _a, _b;
+    if (!body)
+      return;
+    const htmlFontSize = (_b = (_a = theme.typography) == null ? void 0 : _a.htmlFontSize) != null ? _b : 16;
+    body.style.setProperty(
+      "--md-typeset-font-size",
+      `${htmlFontSize * (value / 100)}px`
+    );
+  }, [body, value, theme]);
+  return /* @__PURE__ */ React.createElement(MenuItem, { className: classes.menuItem, button: true, disableRipple: true }, /* @__PURE__ */ React.createElement(
+    ListItemText,
+    {
+      primary: /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", color: "textPrimary" }, "Text size"),
+      secondary: /* @__PURE__ */ React.createElement(Box, { className: classes.container }, /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          className: classes.decreaseButton,
+          size: "small",
+          edge: "start",
+          disabled: value === min,
+          onClick: handleDecreaseClick,
+          "aria-label": "Decrease text size"
+        },
+        /* @__PURE__ */ React.createElement(RemoveIcon, null)
+      ), /* @__PURE__ */ React.createElement(
+        StyledSlider,
+        {
+          value,
+          "aria-labelledby": "text-size-slider",
+          getAriaValueText: getValueText,
+          valueLabelDisplay: "on",
+          valueLabelFormat: getValueText,
+          marks,
+          step: null,
+          min,
+          max,
+          onChangeCommitted: handleChangeCommitted
+        }
+      ), /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          className: classes.increaseButton,
+          size: "small",
+          edge: "end",
+          disabled: value === max,
+          onClick: handleIncreaseClick,
+          "aria-label": "Increase text size"
+        },
+        /* @__PURE__ */ React.createElement(AddIcon, null)
+      )),
+      disableTypography: true
+    }
+  ));
+};
+
+export { TextSizeAddon };
+//# sourceMappingURL=TextSize.esm.js.map