@backstage/plugin-techdocs/dist/reader/transformers/copyToClipboard.esm.js

The Backstage plugin that renders technical documentation for your components

import { jsx } from 'react/jsx-runtime';
import { useState, useCallback } from 'react';
import { renderReactElement } from './renderReactElement.esm.js';
import { withStyles, ThemeProvider } from '@material-ui/core/styles';
import SvgIcon from '@material-ui/core/SvgIcon';
import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';

const CopyToClipboardTooltip = withStyles((theme) => ({
  tooltip: {
    fontSize: "inherit",
    color: theme.palette.text.primary,
    margin: 0,
    padding: theme.spacing(0.5),
    backgroundColor: "transparent",
    boxShadow: "none"
  }
}))(Tooltip);
const CopyToClipboardIcon = () => /* @__PURE__ */ jsx(SvgIcon, { children: /* @__PURE__ */ jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) });
const CopyToClipboardButton = ({ text }) => {
  const [open, setOpen] = useState(false);
  const [, copyToClipboard2] = useCopyToClipboard();
  const handleClick = useCallback(() => {
    copyToClipboard2(text);
    setOpen(true);
  }, [text, copyToClipboard2]);
  const handleClose = useCallback(() => {
    setOpen(false);
  }, [setOpen]);
  return /* @__PURE__ */ jsx(
    CopyToClipboardTooltip,
    {
      title: "Copied to clipboard",
      placement: "left",
      open,
      onClose: handleClose,
      leaveDelay: 1e3,
      children: /* @__PURE__ */ jsx(
        IconButton,
        {
          style: { position: "absolute" },
          className: "md-clipboard md-icon",
          onClick: handleClick,
          "aria-label": "Copy to clipboard",
          children: /* @__PURE__ */ jsx(CopyToClipboardIcon, {})
        }
      )
    }
  );
};
const copyToClipboard = (theme) => {
  return (dom) => {
    const codes = dom.querySelectorAll("pre > code");
    for (const code of codes) {
      const text = code.textContent || "";
      const container = document.createElement("div");
      code?.parentElement?.prepend(container);
      renderReactElement(
        /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx(CopyToClipboardButton, { text }) }),
        container
      );
    }
    return dom;
  };
};

export { copyToClipboard };
//# sourceMappingURL=copyToClipboard.esm.js.map