@backstage/plugin-techdocs-module-addons-contrib 1.1.34-next.1 → 1.1.34

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @backstage/plugin-techdocs-module-addons-contrib
 
+## 1.1.34
+
+### Patch Changes
+
+- 895563a: Avoid enabling the TechDocs LightBox addon for images wrapped in links, so image links keep working.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.12.4
+  - @backstage/core-components@0.18.8
+  - @backstage/frontend-plugin-api@0.15.0
+  - @backstage/integration@2.0.0
+  - @backstage/integration-react@1.2.16
+  - @backstage/plugin-techdocs-react@1.3.9
+
+## 1.1.34-next.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.15.0-next.1
+  - @backstage/core-plugin-api@1.12.4-next.1
+  - @backstage/integration@2.0.0-next.2
+  - @backstage/core-components@0.18.8-next.1
+  - @backstage/plugin-techdocs-react@1.3.9-next.1
+
 ## 1.1.34-next.1
 
 ### Patch Changes

package/dist/LightBox/LightBox.esm.js

@@ -8,6 +8,7 @@ const LightBoxAddon = () => {
   const images = useShadowRootElements(["img"]);
   useEffect(() => {
     let dataSourceImages = null;
+    const lightboxImages = images.filter((image) => !image.closest("a"));
     let lightbox = new PhotoSwipeLightbox({
       pswpModule: PhotoSwipe,
       initialZoomLevel: 1,
@@ -29,10 +30,10 @@ const LightBoxAddon = () => {
           <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) => {
+    lightboxImages.forEach((image, index) => {
       image.onclick = () => {
         if (dataSourceImages === null) {
-          dataSourceImages = images.map((dataSourceImage) => {
+          dataSourceImages = lightboxImages.map((dataSourceImage) => {
             return {
               element: dataSourceImage,
               src: dataSourceImage.src,

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

@@ -1 +1 @@
-{"version":3,"file":"LightBox.esm.js","sources":["../../src/LightBox/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: PhotoSwipeLightbox | null = 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,MAAA,GAAS,qBAAA,CAAwC,CAAC,KAAK,CAAC,CAAA;AAE9D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAA,GAAsC,IAAA;AAE1C,IAAA,IAAI,QAAA,GAAsC,IAAI,kBAAA,CAAmB;AAAA,MAC/D,UAAA,EAAY,UAAA;AAAA,MACZ,gBAAA,EAAkB,CAAA;AAAA,MAClB,kBAAA,EAAoB,CAAC,eAAA,KAA+B;AAGlD,QAAA,MAAM,UAAA,GAAa,gBAAgB,WAAA,CAAY,CAAA;AAC/C,QAAA,MAAM,WAAA,GAAc,gBAAgB,WAAA,CAAY,CAAA;AAChD,QAAA,MAAM,aAAA,GAAgB,gBAAgB,WAAA,CAAY,CAAA;AAClD,QAAA,MAAM,cAAA,GAAiB,gBAAgB,WAAA,CAAY,CAAA;AAEnD,QAAA,MAAM,aAAa,aAAA,GAAgB,UAAA;AACnC,QAAA,MAAM,cAAc,cAAA,GAAiB,WAAA;AAErC,QAAA,MAAM,WAAA,GAAc,IAAA,CAAK,GAAA,CAAI,UAAA,EAAY,WAAW,CAAA;AACpD,QAAA,OAAO,WAAA;AAAA,MACT,CAAA;AAAA,MACA,WAAA,EAAa,IAAA;AAAA,MACb,YAAA,EACE,mQAAA;AAAA,MACF,YAAA,EACE,iQAAA;AAAA,MACF,QAAA,EACE,8SAAA;AAAA,MACF,OAAA,EAAS,CAAA;AAAA;AAAA,cAAA;AAAA,KAGV,CAAA;AAED,IAAA,MAAA,CAAO,OAAA,CAAQ,CAAC,KAAA,EAAO,KAAA,KAAU;AAC/B,MAAA,KAAA,CAAM,UAAU,MAAM;AACpB,QAAA,IAAI,qBAAqB,IAAA,EAAM;AAC7B,UAAA,gBAAA,GAAmB,MAAA,CAAO,IAAI,CAAA,eAAA,KAAmB;AAC/C,YAAA,OAAO;AAAA,cACL,OAAA,EAAS,eAAA;AAAA,cACT,KAAK,eAAA,CAAgB,GAAA;AAAA,cACrB,MAAM,eAAA,CAAgB,GAAA;AAAA,cACtB,KAAK,eAAA,CAAgB,GAAA;AAAA,cACrB,OAAO,eAAA,CAAgB,WAAA;AAAA,cACvB,QAAQ,eAAA,CAAgB;AAAA,aAC1B;AAAA,UACF,CAAC,CAAA;AAAA,QACH;AACA,QAAA,QAAA,EAAU,WAAA,CAAY,OAAO,gBAAgB,CAAA;AAC7C,QAAA,OAAO,KAAA;AAAA,MACT,CAAA;AAAA,IACF,CAAC,CAAA;AACD,IAAA,QAAA,CAAS,IAAA,EAAK;AAEd,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,EAAU,OAAA,EAAQ;AAClB,MAAA,QAAA,GAAW,IAAA;AAAA,IACb,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,OAAO,IAAA;AACT;;;;"}
+{"version":3,"file":"LightBox.esm.js","sources":["../../src/LightBox/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    const lightboxImages = images.filter(image => !image.closest('a'));\n\n    let lightbox: PhotoSwipeLightbox | null = 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    lightboxImages.forEach((image, index) => {\n      image.onclick = () => {\n        if (dataSourceImages === null) {\n          dataSourceImages = lightboxImages.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,MAAA,GAAS,qBAAA,CAAwC,CAAC,KAAK,CAAC,CAAA;AAE9D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAA,GAAsC,IAAA;AAC1C,IAAA,MAAM,cAAA,GAAiB,OAAO,MAAA,CAAO,CAAA,KAAA,KAAS,CAAC,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAC,CAAA;AAEjE,IAAA,IAAI,QAAA,GAAsC,IAAI,kBAAA,CAAmB;AAAA,MAC/D,UAAA,EAAY,UAAA;AAAA,MACZ,gBAAA,EAAkB,CAAA;AAAA,MAClB,kBAAA,EAAoB,CAAC,eAAA,KAA+B;AAGlD,QAAA,MAAM,UAAA,GAAa,gBAAgB,WAAA,CAAY,CAAA;AAC/C,QAAA,MAAM,WAAA,GAAc,gBAAgB,WAAA,CAAY,CAAA;AAChD,QAAA,MAAM,aAAA,GAAgB,gBAAgB,WAAA,CAAY,CAAA;AAClD,QAAA,MAAM,cAAA,GAAiB,gBAAgB,WAAA,CAAY,CAAA;AAEnD,QAAA,MAAM,aAAa,aAAA,GAAgB,UAAA;AACnC,QAAA,MAAM,cAAc,cAAA,GAAiB,WAAA;AAErC,QAAA,MAAM,WAAA,GAAc,IAAA,CAAK,GAAA,CAAI,UAAA,EAAY,WAAW,CAAA;AACpD,QAAA,OAAO,WAAA;AAAA,MACT,CAAA;AAAA,MACA,WAAA,EAAa,IAAA;AAAA,MACb,YAAA,EACE,mQAAA;AAAA,MACF,YAAA,EACE,iQAAA;AAAA,MACF,QAAA,EACE,8SAAA;AAAA,MACF,OAAA,EAAS,CAAA;AAAA;AAAA,cAAA;AAAA,KAGV,CAAA;AAED,IAAA,cAAA,CAAe,OAAA,CAAQ,CAAC,KAAA,EAAO,KAAA,KAAU;AACvC,MAAA,KAAA,CAAM,UAAU,MAAM;AACpB,QAAA,IAAI,qBAAqB,IAAA,EAAM;AAC7B,UAAA,gBAAA,GAAmB,cAAA,CAAe,IAAI,CAAA,eAAA,KAAmB;AACvD,YAAA,OAAO;AAAA,cACL,OAAA,EAAS,eAAA;AAAA,cACT,KAAK,eAAA,CAAgB,GAAA;AAAA,cACrB,MAAM,eAAA,CAAgB,GAAA;AAAA,cACtB,KAAK,eAAA,CAAgB,GAAA;AAAA,cACrB,OAAO,eAAA,CAAgB,WAAA;AAAA,cACvB,QAAQ,eAAA,CAAgB;AAAA,aAC1B;AAAA,UACF,CAAC,CAAA;AAAA,QACH;AACA,QAAA,QAAA,EAAU,WAAA,CAAY,OAAO,gBAAgB,CAAA;AAC7C,QAAA,OAAO,KAAA;AAAA,MACT,CAAA;AAAA,IACF,CAAC,CAAA;AACD,IAAA,QAAA,CAAS,IAAA,EAAK;AAEd,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,EAAU,OAAA,EAAQ;AAClB,MAAA,QAAA,GAAW,IAAA;AAAA,IACb,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,OAAO,IAAA;AACT;;;;"}

package/dist/index.d.ts

@@ -204,6 +204,8 @@ declare const TextSize: () => JSX.Element | null;
  * @remarks
  * The image size of the lightbox image is the same as the image size on the document page.
  *
+ * Images that are wrapped in links are ignored to avoid blocking navigation.
+ *
  * @example
  * Here's a simple example:
  * ```

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.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 { createPlugin } from '@backstage/core-plugin-api';\nimport {\n  createTechDocsAddonExtension,\n  TechDocsAddonLocations,\n} from '@backstage/plugin-techdocs-react';\nimport { ExpandableNavigationAddon } from './ExpandableNavigation';\nimport { ReportIssueAddon, ReportIssueProps } from './ReportIssue';\nimport { TextSizeAddon } from './TextSize';\nimport { LightBoxAddon } from './LightBox';\n\n/**\n * The TechDocs addons contrib plugin\n *\n * @public\n */\n\nexport const techdocsModuleAddonsContribPlugin = createPlugin({\n  id: 'techdocsModuleAddonsContrib',\n});\n\n/**\n * TechDocs addon that lets you expand/collapse the TechDocs main navigation\n * and keep the preferred state in local storage. The addon will render as\n * a button next to the site name if the documentation has nested navigation.\n *\n * @example\n * Here's a simple example:\n * ```\n * import {\n *   DefaultTechDocsHome,\n *   TechDocsIndexPage,\n *   TechDocsReaderPage,\n * } from '@backstage/plugin-techdocs';\n * import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha';\n * import { ExpandableNavigation } from '@backstage/plugin-techdocs-module-addons-contrib';\n *\n *\n * const AppRoutes = () => {\n *   <FlatRoutes>\n *     // other plugin routes\n *     <Route path=\"/docs\" element={<TechDocsIndexPage />}>\n *       <DefaultTechDocsHome />\n *     </Route>\n *     <Route\n *       path=\"/docs/:namespace/:kind/:name/*\"\n *       element={<TechDocsReaderPage />}\n *     >\n *       <TechDocsAddons>\n *         <ExpandableNavigation />\n *       </TechDocsAddons>\n *     </Route>\n *   </FlatRoutes>;\n * };\n * ```\n *\n * @public\n */\n\nexport const ExpandableNavigation = techdocsModuleAddonsContribPlugin.provide(\n  createTechDocsAddonExtension({\n    name: 'ExpandableNavigation',\n    location: TechDocsAddonLocations.PrimarySidebar,\n    component: ExpandableNavigationAddon,\n  }),\n);\n\n/**\n * TechDocs addon that lets you select text and open GitHub/Gitlab issues\n *\n * @remarks\n * Before using it, you should set up an `edit_uri` for your pages as explained {@link https://backstage.io/docs/features/techdocs/faqs#is-it-possible-for-users-to-suggest-changes-or-provide-feedback-on-a-techdocs-page | here} and remember, it only works for Github or Gitlab.\n *\n * @example\n * Here's a simple example:\n * ```\n * import {\n *   DefaultTechDocsHome,\n *   TechDocsIndexPage,\n *   TechDocsReaderPage,\n * } from '@backstage/plugin-techdocs';\n * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';\n * import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';\n *\n *\n * const AppRoutes = () => {\n *   <FlatRoutes>\n *     // other plugin routes\n *     <Route path=\"/docs\" element={<TechDocsIndexPage />}>\n *       <DefaultTechDocsHome />\n *     </Route>\n *     <Route\n *       path=\"/docs/:namespace/:kind/:name/*\"\n *       element={<TechDocsReaderPage />}\n *     >\n *       <TechDocsAddons>\n *         <ReportIssue />\n *       </TechDocsAddons>\n *     </Route>\n *   </FlatRoutes>;\n * };\n * ```\n *\n * @example\n * Here's an example with `debounceTime` and `templateBuilder` props:\n * ```\n * import {\n *   DefaultTechDocsHome,\n *   TechDocsIndexPage,\n *   TechDocsReaderPage,\n * } from '@backstage/plugin-techdocs';\n * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';\n * import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';\n *\n * const templateBuilder = ({ selection }: ReportIssueTemplateBuilder) => (({\n *  title: 'Custom issue title',\n *  body: `Custom issue body: ${selection.toString()}`\n * }))\n *\n * const AppRoutes = () => {\n *   <FlatRoutes>\n *     // other plugin routes\n *     <Route path=\"/docs\" element={<TechDocsIndexPage />}>\n *       <DefaultTechDocsHome />\n *     </Route>\n *     <Route\n *       path=\"/docs/:namespace/:kind/:name/*\"\n *       element={<TechDocsReaderPage />}\n *     >\n *       <TechDocsAddons>\n *         <ReportIssue debounceTime={300} templateBuilder={templateBuilder} />\n *       </TechDocsAddons>\n *     </Route>\n *   </FlatRoutes>;\n * ```\n * @param props - Object that can optionally contain `debounceTime` and `templateBuilder` properties.\n * @public\n */\nexport const ReportIssue = techdocsModuleAddonsContribPlugin.provide(\n  createTechDocsAddonExtension<ReportIssueProps>({\n    name: 'ReportIssue',\n    location: TechDocsAddonLocations.Content,\n    component: ReportIssueAddon,\n  }),\n);\n\n/**\n * This TechDocs addon allows users to customize text size on documentation pages, they can select how much they want to increase or decrease the font size via slider or buttons.\n *\n * @remarks\n * The default value for the font size is 100% of the HTML font size, if the theme does not have a `htmlFontSize` in its typography object, the addon will assume 16px as 100%, and remember, this setting is kept in the browser local storage.\n *\n * @example\n * Here's a simple example:\n * ```\n * import {\n *   DefaultTechDocsHome,\n *   TechDocsIndexPage,\n *   TechDocsReaderPage,\n * } from '@backstage/plugin-techdocs';\n * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';\n * import { TextSize } from '@backstage/plugin-techdocs-module-addons-contrib';\n *\n *\n * const AppRoutes = () => {\n *   <FlatRoutes>\n *     // other plugin routes\n *     <Route path=\"/docs\" element={<TechDocsIndexPage />}>\n *       <DefaultTechDocsHome />\n *     </Route>\n *     <Route\n *       path=\"/docs/:namespace/:kind/:name/*\"\n *       element={<TechDocsReaderPage />}\n *     >\n *       <TechDocsAddons>\n *         <TextSize />\n *       </TechDocsAddons>\n *     </Route>\n *   </FlatRoutes>;\n * };\n * ```\n *\n * @public\n */\nexport const TextSize = techdocsModuleAddonsContribPlugin.provide(\n  createTechDocsAddonExtension({\n    name: 'TextSize',\n    location: TechDocsAddonLocations.Settings,\n    component: TextSizeAddon,\n  }),\n);\n\n/**\n * This TechDocs addon allows users to open images in a lightbox on documentation pages, they can navigate between images if there are several on one page.\n *\n * @remarks\n * The image size of the lightbox image is the same as the image size on the document page.\n *\n * @example\n * Here's a simple example:\n * ```\n * import {\n *   DefaultTechDocsHome,\n *   TechDocsIndexPage,\n *   TechDocsReaderPage,\n * } from '@backstage/plugin-techdocs';\n * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';\n * import { LightBox } from '@backstage/plugin-techdocs-module-addons-contrib';\n *\n *\n * const AppRoutes = () => {\n *   <FlatRoutes>\n *     // other plugin routes\n *     <Route path=\"/docs\" element={<TechDocsIndexPage />}>\n *       <DefaultTechDocsHome />\n *     </Route>\n *     <Route\n *       path=\"/docs/:namespace/:kind/:name/*\"\n *       element={<TechDocsReaderPage />}\n *     >\n *       <TechDocsAddons>\n *         <LightBox />\n *       </TechDocsAddons>\n *     </Route>\n *   </FlatRoutes>;\n * };\n * ```\n *\n * @public\n */\nexport const LightBox = techdocsModuleAddonsContribPlugin.provide(\n  createTechDocsAddonExtension({\n    name: 'LightBox',\n    location: TechDocsAddonLocations.Content,\n    component: LightBoxAddon,\n  }),\n);\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,oCAAoC,YAAA,CAAa;AAAA,EAC5D,EAAA,EAAI;AACN,CAAC;AAwCM,MAAM,uBAAuB,iCAAA,CAAkC,OAAA;AAAA,EACpE,4BAAA,CAA6B;AAAA,IAC3B,IAAA,EAAM,sBAAA;AAAA,IACN,UAAU,sBAAA,CAAuB,cAAA;AAAA,IACjC,SAAA,EAAW;AAAA,GACZ;AACH;AAyEO,MAAM,cAAc,iCAAA,CAAkC,OAAA;AAAA,EAC3D,4BAAA,CAA+C;AAAA,IAC7C,IAAA,EAAM,aAAA;AAAA,IACN,UAAU,sBAAA,CAAuB,OAAA;AAAA,IACjC,SAAA,EAAW;AAAA,GACZ;AACH;AAwCO,MAAM,WAAW,iCAAA,CAAkC,OAAA;AAAA,EACxD,4BAAA,CAA6B;AAAA,IAC3B,IAAA,EAAM,UAAA;AAAA,IACN,UAAU,sBAAA,CAAuB,QAAA;AAAA,IACjC,SAAA,EAAW;AAAA,GACZ;AACH;AAwCO,MAAM,WAAW,iCAAA,CAAkC,OAAA;AAAA,EACxD,4BAAA,CAA6B;AAAA,IAC3B,IAAA,EAAM,UAAA;AAAA,IACN,UAAU,sBAAA,CAAuB,OAAA;AAAA,IACjC,SAAA,EAAW;AAAA,GACZ;AACH;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.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 { createPlugin } from '@backstage/core-plugin-api';\nimport {\n  createTechDocsAddonExtension,\n  TechDocsAddonLocations,\n} from '@backstage/plugin-techdocs-react';\nimport { ExpandableNavigationAddon } from './ExpandableNavigation';\nimport { ReportIssueAddon, ReportIssueProps } from './ReportIssue';\nimport { TextSizeAddon } from './TextSize';\nimport { LightBoxAddon } from './LightBox';\n\n/**\n * The TechDocs addons contrib plugin\n *\n * @public\n */\n\nexport const techdocsModuleAddonsContribPlugin = createPlugin({\n  id: 'techdocsModuleAddonsContrib',\n});\n\n/**\n * TechDocs addon that lets you expand/collapse the TechDocs main navigation\n * and keep the preferred state in local storage. The addon will render as\n * a button next to the site name if the documentation has nested navigation.\n *\n * @example\n * Here's a simple example:\n * ```\n * import {\n *   DefaultTechDocsHome,\n *   TechDocsIndexPage,\n *   TechDocsReaderPage,\n * } from '@backstage/plugin-techdocs';\n * import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha';\n * import { ExpandableNavigation } from '@backstage/plugin-techdocs-module-addons-contrib';\n *\n *\n * const AppRoutes = () => {\n *   <FlatRoutes>\n *     // other plugin routes\n *     <Route path=\"/docs\" element={<TechDocsIndexPage />}>\n *       <DefaultTechDocsHome />\n *     </Route>\n *     <Route\n *       path=\"/docs/:namespace/:kind/:name/*\"\n *       element={<TechDocsReaderPage />}\n *     >\n *       <TechDocsAddons>\n *         <ExpandableNavigation />\n *       </TechDocsAddons>\n *     </Route>\n *   </FlatRoutes>;\n * };\n * ```\n *\n * @public\n */\n\nexport const ExpandableNavigation = techdocsModuleAddonsContribPlugin.provide(\n  createTechDocsAddonExtension({\n    name: 'ExpandableNavigation',\n    location: TechDocsAddonLocations.PrimarySidebar,\n    component: ExpandableNavigationAddon,\n  }),\n);\n\n/**\n * TechDocs addon that lets you select text and open GitHub/Gitlab issues\n *\n * @remarks\n * Before using it, you should set up an `edit_uri` for your pages as explained {@link https://backstage.io/docs/features/techdocs/faqs#is-it-possible-for-users-to-suggest-changes-or-provide-feedback-on-a-techdocs-page | here} and remember, it only works for Github or Gitlab.\n *\n * @example\n * Here's a simple example:\n * ```\n * import {\n *   DefaultTechDocsHome,\n *   TechDocsIndexPage,\n *   TechDocsReaderPage,\n * } from '@backstage/plugin-techdocs';\n * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';\n * import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';\n *\n *\n * const AppRoutes = () => {\n *   <FlatRoutes>\n *     // other plugin routes\n *     <Route path=\"/docs\" element={<TechDocsIndexPage />}>\n *       <DefaultTechDocsHome />\n *     </Route>\n *     <Route\n *       path=\"/docs/:namespace/:kind/:name/*\"\n *       element={<TechDocsReaderPage />}\n *     >\n *       <TechDocsAddons>\n *         <ReportIssue />\n *       </TechDocsAddons>\n *     </Route>\n *   </FlatRoutes>;\n * };\n * ```\n *\n * @example\n * Here's an example with `debounceTime` and `templateBuilder` props:\n * ```\n * import {\n *   DefaultTechDocsHome,\n *   TechDocsIndexPage,\n *   TechDocsReaderPage,\n * } from '@backstage/plugin-techdocs';\n * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';\n * import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';\n *\n * const templateBuilder = ({ selection }: ReportIssueTemplateBuilder) => (({\n *  title: 'Custom issue title',\n *  body: `Custom issue body: ${selection.toString()}`\n * }))\n *\n * const AppRoutes = () => {\n *   <FlatRoutes>\n *     // other plugin routes\n *     <Route path=\"/docs\" element={<TechDocsIndexPage />}>\n *       <DefaultTechDocsHome />\n *     </Route>\n *     <Route\n *       path=\"/docs/:namespace/:kind/:name/*\"\n *       element={<TechDocsReaderPage />}\n *     >\n *       <TechDocsAddons>\n *         <ReportIssue debounceTime={300} templateBuilder={templateBuilder} />\n *       </TechDocsAddons>\n *     </Route>\n *   </FlatRoutes>;\n * ```\n * @param props - Object that can optionally contain `debounceTime` and `templateBuilder` properties.\n * @public\n */\nexport const ReportIssue = techdocsModuleAddonsContribPlugin.provide(\n  createTechDocsAddonExtension<ReportIssueProps>({\n    name: 'ReportIssue',\n    location: TechDocsAddonLocations.Content,\n    component: ReportIssueAddon,\n  }),\n);\n\n/**\n * This TechDocs addon allows users to customize text size on documentation pages, they can select how much they want to increase or decrease the font size via slider or buttons.\n *\n * @remarks\n * The default value for the font size is 100% of the HTML font size, if the theme does not have a `htmlFontSize` in its typography object, the addon will assume 16px as 100%, and remember, this setting is kept in the browser local storage.\n *\n * @example\n * Here's a simple example:\n * ```\n * import {\n *   DefaultTechDocsHome,\n *   TechDocsIndexPage,\n *   TechDocsReaderPage,\n * } from '@backstage/plugin-techdocs';\n * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';\n * import { TextSize } from '@backstage/plugin-techdocs-module-addons-contrib';\n *\n *\n * const AppRoutes = () => {\n *   <FlatRoutes>\n *     // other plugin routes\n *     <Route path=\"/docs\" element={<TechDocsIndexPage />}>\n *       <DefaultTechDocsHome />\n *     </Route>\n *     <Route\n *       path=\"/docs/:namespace/:kind/:name/*\"\n *       element={<TechDocsReaderPage />}\n *     >\n *       <TechDocsAddons>\n *         <TextSize />\n *       </TechDocsAddons>\n *     </Route>\n *   </FlatRoutes>;\n * };\n * ```\n *\n * @public\n */\nexport const TextSize = techdocsModuleAddonsContribPlugin.provide(\n  createTechDocsAddonExtension({\n    name: 'TextSize',\n    location: TechDocsAddonLocations.Settings,\n    component: TextSizeAddon,\n  }),\n);\n\n/**\n * This TechDocs addon allows users to open images in a lightbox on documentation pages, they can navigate between images if there are several on one page.\n *\n * @remarks\n * The image size of the lightbox image is the same as the image size on the document page.\n *\n * Images that are wrapped in links are ignored to avoid blocking navigation.\n *\n * @example\n * Here's a simple example:\n * ```\n * import {\n *   DefaultTechDocsHome,\n *   TechDocsIndexPage,\n *   TechDocsReaderPage,\n * } from '@backstage/plugin-techdocs';\n * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';\n * import { LightBox } from '@backstage/plugin-techdocs-module-addons-contrib';\n *\n *\n * const AppRoutes = () => {\n *   <FlatRoutes>\n *     // other plugin routes\n *     <Route path=\"/docs\" element={<TechDocsIndexPage />}>\n *       <DefaultTechDocsHome />\n *     </Route>\n *     <Route\n *       path=\"/docs/:namespace/:kind/:name/*\"\n *       element={<TechDocsReaderPage />}\n *     >\n *       <TechDocsAddons>\n *         <LightBox />\n *       </TechDocsAddons>\n *     </Route>\n *   </FlatRoutes>;\n * };\n * ```\n *\n * @public\n */\nexport const LightBox = techdocsModuleAddonsContribPlugin.provide(\n  createTechDocsAddonExtension({\n    name: 'LightBox',\n    location: TechDocsAddonLocations.Content,\n    component: LightBoxAddon,\n  }),\n);\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,oCAAoC,YAAA,CAAa;AAAA,EAC5D,EAAA,EAAI;AACN,CAAC;AAwCM,MAAM,uBAAuB,iCAAA,CAAkC,OAAA;AAAA,EACpE,4BAAA,CAA6B;AAAA,IAC3B,IAAA,EAAM,sBAAA;AAAA,IACN,UAAU,sBAAA,CAAuB,cAAA;AAAA,IACjC,SAAA,EAAW;AAAA,GACZ;AACH;AAyEO,MAAM,cAAc,iCAAA,CAAkC,OAAA;AAAA,EAC3D,4BAAA,CAA+C;AAAA,IAC7C,IAAA,EAAM,aAAA;AAAA,IACN,UAAU,sBAAA,CAAuB,OAAA;AAAA,IACjC,SAAA,EAAW;AAAA,GACZ;AACH;AAwCO,MAAM,WAAW,iCAAA,CAAkC,OAAA;AAAA,EACxD,4BAAA,CAA6B;AAAA,IAC3B,IAAA,EAAM,UAAA;AAAA,IACN,UAAU,sBAAA,CAAuB,QAAA;AAAA,IACjC,SAAA,EAAW;AAAA,GACZ;AACH;AA0CO,MAAM,WAAW,iCAAA,CAAkC,OAAA;AAAA,EACxD,4BAAA,CAA6B;AAAA,IAC3B,IAAA,EAAM,UAAA;AAAA,IACN,UAAU,sBAAA,CAAuB,OAAA;AAAA,IACjC,SAAA,EAAW;AAAA,GACZ;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-techdocs-module-addons-contrib",
-  "version": "1.1.34-next.1",
+  "version": "1.1.34",
   "description": "Plugin module for contributed TechDocs Addons",
   "backstage": {
     "role": "frontend-plugin-module",
@@ -60,12 +60,12 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "0.18.8-next.0",
-    "@backstage/core-plugin-api": "1.12.4-next.0",
-    "@backstage/frontend-plugin-api": "0.14.2-next.0",
-    "@backstage/integration": "2.0.0-next.1",
-    "@backstage/integration-react": "1.2.16-next.1",
-    "@backstage/plugin-techdocs-react": "1.3.9-next.0",
+    "@backstage/core-components": "^0.18.8",
+    "@backstage/core-plugin-api": "^1.12.4",
+    "@backstage/frontend-plugin-api": "^0.15.0",
+    "@backstage/integration": "^2.0.0",
+    "@backstage/integration-react": "^1.2.16",
+    "@backstage/plugin-techdocs-react": "^1.3.9",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@react-hookz/web": "^24.0.0",
@@ -73,10 +73,10 @@
     "photoswipe": "^5.3.7"
   },
   "devDependencies": {
-    "@backstage/cli": "0.36.0-next.1",
-    "@backstage/plugin-catalog-react": "2.1.0-next.1",
-    "@backstage/plugin-techdocs-addons-test-utils": "2.0.3-next.1",
-    "@backstage/test-utils": "1.7.16-next.0",
+    "@backstage/cli": "^0.36.0",
+    "@backstage/plugin-catalog-react": "^2.1.0",
+    "@backstage/plugin-techdocs-addons-test-utils": "^2.0.3",
+    "@backstage/test-utils": "^1.7.16",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",