@atlaskit/renderer 107.2.0 → 107.3.1

package/report.api.md

@@ -69,6 +69,8 @@ type AnalyticsEventPayload<T = void> =
   | AnchorLinkAEP
   | AnnotationAEP
   | AnnotationDeleteAEP
+  | CodeBlockCopyAEP
+  | CodeBlockWrapAEP
   | ComponentCrashErrorAEP
   | ExpandAEP
   | HeadingAnchorLinkButtonAEP
@@ -152,6 +154,17 @@ type ButtonAEP<ActionSubjectID, Attributes> = UIAEP<
   Attributes
 >;
 
+// @public (undocumented)
+type CodeBlockCopyAEP = ButtonAEP<ACTION_SUBJECT_ID.CODEBLOCK_COPY, undefined>;
+
+// @public (undocumented)
+type CodeBlockWrapAEP = ButtonAEP<
+  ACTION_SUBJECT_ID.CODEBLOCK_WRAP,
+  {
+    wrapped: boolean;
+  }
+>;
+
 // @public (undocumented)
 type ComponentCrashErrorAEP = OperationalAEP<
   ACTION.CRASHED,
@@ -325,6 +338,8 @@ interface ReactSerializerInit {
   // (undocumented)
   allowWindowedCodeBlock?: boolean;
   // (undocumented)
+  allowWrapCodeBlock?: boolean;
+  // (undocumented)
   appearance?: RendererAppearance;
   // (undocumented)
   disableActions?: boolean;
@@ -416,6 +431,8 @@ export interface RendererProps {
   // (undocumented)
   allowUgcScrubber?: boolean;
   // (undocumented)
+  allowWrapCodeBlock?: boolean;
+  // (undocumented)
   analyticsEventSeverityTracking?: {
     enabled: boolean;
     severityNormalThreshold: number;
@@ -742,8 +759,8 @@ type VisitMediaLinkAEP = AEP<
 
 ```json
 {
-  "@atlaskit/link-provider": "^1.5.0",
-  "@atlaskit/media-core": "^34.0.1",
+  "@atlaskit/link-provider": "^1.5.1",
+  "@atlaskit/media-core": "^34.0.2",
   "react": "^16.8.0",
   "react-dom": "^16.8.0"
 }

package/dist/cjs/react/nodes/codeBlockCopyButton.js

@@ -1,64 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _react2 = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _button = _interopRequireDefault(require("@atlaskit/button"));
-var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
-var _colors = require("@atlaskit/theme/colors");
-var _clipboard = require("../utils/clipboard");
-var _messages = require("@atlaskit/editor-common/messages");
-var _templateObject;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", " !important;\n  }\n\n  button:hover {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button:active {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n  button.clicked:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-text, rgb(66, 82, 110))", "var(--ds-border, transparent)", "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-border, transparent)", "var(--ds-surface-overlay-pressed, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay, ".concat(_colors.N700, ")"), "var(--ds-text, #fff)", "var(--ds-surface-overlay-hovered, ".concat(_colors.N700, ")"));
-var CopyButton = function CopyButton(_ref) {
-  var content = _ref.content,
-    intl = _ref.intl;
-  var _useState = (0, _react2.useState)(intl.formatMessage(_messages.codeBlockCopyButtonMessages.copyCodeToClipboard)),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    tooltip = _useState2[0],
-    setTooltip = _useState2[1];
-  var _useState3 = (0, _react2.useState)('copy-to-clipboard'),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    className = _useState4[0],
-    setClassName = _useState4[1];
-  var onMouseLeave = function onMouseLeave() {
-    setTooltip(intl.formatMessage(_messages.codeBlockCopyButtonMessages.copyCodeToClipboard));
-    setClassName('copy-to-clipboard');
-  };
-  return (0, _react.jsx)("span", {
-    css: copyButtonWrapperStyles
-  }, (0, _react.jsx)(_tooltip.default, {
-    content: tooltip,
-    hideTooltipOnClick: false,
-    position: "top"
-  }, (0, _react.jsx)("div", {
-    onMouseLeave: onMouseLeave
-  }, (0, _react.jsx)(_button.default, {
-    className: className,
-    "aria-label": tooltip,
-    spacing: "compact",
-    appearance: "subtle",
-    "aria-haspopup": true,
-    iconBefore: (0, _react.jsx)(_copy.default, {
-      label: tooltip
-    }),
-    onClick: function onClick() {
-      (0, _clipboard.copyTextToClipboard)(content);
-      setTooltip(intl.formatMessage(_messages.codeBlockCopyButtonMessages.copiedCodeToClipboard));
-      setClassName('copy-to-clipboard clicked');
-    }
-  }))));
-};
-var _default = (0, _reactIntlNext.injectIntl)(CopyButton);
-exports.default = _default;

package/dist/es2019/react/nodes/codeBlockCopyButton.js

@@ -1,86 +0,0 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import React, { useState } from 'react';
-import { injectIntl } from 'react-intl-next';
-import Tooltip from '@atlaskit/tooltip';
-import Button from '@atlaskit/button';
-import CopyIcon from '@atlaskit/icon/glyph/copy';
-import { N20, N30, N700 } from '@atlaskit/theme/colors';
-import { copyTextToClipboard } from '../utils/clipboard';
-import { codeBlockCopyButtonMessages } from '@atlaskit/editor-common/messages';
-const copyButtonWrapperStyles = css`
-  display: flex;
-  position: sticky;
-  justify-content: flex-end;
-  top: 0;
-
-  button {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    height: 32px;
-    width: 32px;
-    right: 6px;
-    top: 4px;
-    padding: 2px;
-    opacity: 0;
-    transition: opacity 0.2s ease 0s;
-    border: 2px solid ${"var(--ds-border, #fff)"};
-    border-radius: 4px;
-    background-color: ${`var(--ds-surface-overlay, ${N20})`};
-    color: ${"var(--ds-text, rgb(66, 82, 110))"} !important;
-  }
-
-  button:hover {
-    border: 2px solid ${"var(--ds-border, transparent)"};
-    background-color: ${`var(--ds-surface-overlay-hovered, ${N30})`};
-  }
-
-  button:active {
-    border: 2px solid ${"var(--ds-border, transparent)"};
-    background-color: ${`var(--ds-surface-overlay-pressed, ${N30})`};
-  }
-
-  button.clicked {
-    background-color: ${`var(--ds-surface-overlay, ${N700})`};
-    color: ${"var(--ds-text, #fff)"} !important;
-  }
-  button.clicked:hover {
-    background-color: ${`var(--ds-surface-overlay-hovered, ${N700})`};
-  }
-`;
-const CopyButton = ({
-  content,
-  intl
-}) => {
-  const [tooltip, setTooltip] = useState(intl.formatMessage(codeBlockCopyButtonMessages.copyCodeToClipboard));
-  const [className, setClassName] = useState('copy-to-clipboard');
-  const onMouseLeave = () => {
-    setTooltip(intl.formatMessage(codeBlockCopyButtonMessages.copyCodeToClipboard));
-    setClassName('copy-to-clipboard');
-  };
-  return jsx("span", {
-    css: copyButtonWrapperStyles
-  }, jsx(Tooltip, {
-    content: tooltip,
-    hideTooltipOnClick: false,
-    position: "top"
-  }, jsx("div", {
-    onMouseLeave: onMouseLeave
-  }, jsx(Button, {
-    className: className,
-    "aria-label": tooltip,
-    spacing: "compact",
-    appearance: "subtle",
-    "aria-haspopup": true,
-    iconBefore: jsx(CopyIcon, {
-      label: tooltip
-    }),
-    onClick: () => {
-      copyTextToClipboard(content);
-      setTooltip(intl.formatMessage(codeBlockCopyButtonMessages.copiedCodeToClipboard));
-      setClassName('copy-to-clipboard clicked');
-    }
-  }))));
-};
-export default injectIntl(CopyButton);

package/dist/esm/react/nodes/codeBlockCopyButton.js

@@ -1,54 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import React, { useState } from 'react';
-import { injectIntl } from 'react-intl-next';
-import Tooltip from '@atlaskit/tooltip';
-import Button from '@atlaskit/button';
-import CopyIcon from '@atlaskit/icon/glyph/copy';
-import { N20, N30, N700 } from '@atlaskit/theme/colors';
-import { copyTextToClipboard } from '../utils/clipboard';
-import { codeBlockCopyButtonMessages } from '@atlaskit/editor-common/messages';
-var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", " !important;\n  }\n\n  button:hover {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button:active {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n  button.clicked:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-text, rgb(66, 82, 110))", "var(--ds-border, transparent)", "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-border, transparent)", "var(--ds-surface-overlay-pressed, ".concat(N30, ")"), "var(--ds-surface-overlay, ".concat(N700, ")"), "var(--ds-text, #fff)", "var(--ds-surface-overlay-hovered, ".concat(N700, ")"));
-var CopyButton = function CopyButton(_ref) {
-  var content = _ref.content,
-    intl = _ref.intl;
-  var _useState = useState(intl.formatMessage(codeBlockCopyButtonMessages.copyCodeToClipboard)),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltip = _useState2[0],
-    setTooltip = _useState2[1];
-  var _useState3 = useState('copy-to-clipboard'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    className = _useState4[0],
-    setClassName = _useState4[1];
-  var onMouseLeave = function onMouseLeave() {
-    setTooltip(intl.formatMessage(codeBlockCopyButtonMessages.copyCodeToClipboard));
-    setClassName('copy-to-clipboard');
-  };
-  return jsx("span", {
-    css: copyButtonWrapperStyles
-  }, jsx(Tooltip, {
-    content: tooltip,
-    hideTooltipOnClick: false,
-    position: "top"
-  }, jsx("div", {
-    onMouseLeave: onMouseLeave
-  }, jsx(Button, {
-    className: className,
-    "aria-label": tooltip,
-    spacing: "compact",
-    appearance: "subtle",
-    "aria-haspopup": true,
-    iconBefore: jsx(CopyIcon, {
-      label: tooltip
-    }),
-    onClick: function onClick() {
-      copyTextToClipboard(content);
-      setTooltip(intl.formatMessage(codeBlockCopyButtonMessages.copiedCodeToClipboard));
-      setClassName('copy-to-clipboard clicked');
-    }
-  }))));
-};
-export default injectIntl(CopyButton);