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

package/dist/TextSize/TextSize.esm.js.map

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

package/dist/index.esm.js

@@ -1,549 +1,2 @@
-import { useApi, configApiRef, createPlugin } from '@backstage/core-plugin-api';
-import { useShadowRootElements, useShadowRootSelection, createTechDocsAddonExtension, TechDocsAddonLocations } from '@backstage/plugin-techdocs-react';
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { useLocalStorageValue } from '@react-hookz/web';
-import { withStyles, Button, makeStyles, Portal, Paper, Slider, useTheme, MenuItem, ListItemText, Typography, Box, IconButton } from '@material-ui/core';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import parseGitUrl from 'git-url-parse';
-import { replaceGithubUrlType, replaceGitLabUrlType } from '@backstage/integration';
-import { scmIntegrationsApiRef } from '@backstage/integration-react';
-import BugReportIcon from '@material-ui/icons/BugReport';
-import { Link, GitHubIcon } from '@backstage/core-components';
-import AddIcon from '@material-ui/icons/Add';
-import RemoveIcon from '@material-ui/icons/Remove';
-import PhotoSwipeLightbox from 'photoswipe/lightbox';
-import PhotoSwipe from 'photoswipe';
-import 'photoswipe/style.css';
-
-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);
-};
-
-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';
-
-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 };
-};
-
-const useStyles$2 = 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$2();
-  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");
-};
-
-const useStyles$1 = 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$1();
-  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
-      }
-    )
-  ));
-};
-
-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
-    }
-  ));
-};
-
-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;
-};
-
-const techdocsModuleAddonsContribPlugin = createPlugin({
-  id: "techdocsModuleAddonsContrib"
-});
-const ExpandableNavigation = techdocsModuleAddonsContribPlugin.provide(
-  createTechDocsAddonExtension({
-    name: "ExpandableNavigation",
-    location: TechDocsAddonLocations.PrimarySidebar,
-    component: ExpandableNavigationAddon
-  })
-);
-const ReportIssue = techdocsModuleAddonsContribPlugin.provide(
-  createTechDocsAddonExtension({
-    name: "ReportIssue",
-    location: TechDocsAddonLocations.Content,
-    component: ReportIssueAddon
-  })
-);
-const TextSize = techdocsModuleAddonsContribPlugin.provide(
-  createTechDocsAddonExtension({
-    name: "TextSize",
-    location: TechDocsAddonLocations.Settings,
-    component: TextSizeAddon
-  })
-);
-const LightBox = techdocsModuleAddonsContribPlugin.provide(
-  createTechDocsAddonExtension({
-    name: "LightBox",
-    location: TechDocsAddonLocations.Content,
-    component: LightBoxAddon
-  })
-);
-
-export { ExpandableNavigation, LightBox, ReportIssue, TextSize, techdocsModuleAddonsContribPlugin };
+export { ExpandableNavigation, LightBox, ReportIssue, TextSize, techdocsModuleAddonsContribPlugin } from './plugin.esm.js';
 //# sourceMappingURL=index.esm.js.map