@atlaskit/editor-common 78.9.0 → 78.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/constants/package.json +15 -0
  3. package/dist/cjs/extensibility/Extension/Extension/index.js +2 -1
  4. package/dist/cjs/extensibility/Extension/Lozenge.js +4 -2
  5. package/dist/cjs/extensibility/Extension/LozengeComponent.js +4 -2
  6. package/dist/cjs/extensibility/Extension/styles.js +61 -9
  7. package/dist/cjs/link/constants.js +8 -0
  8. package/dist/cjs/monitoring/error.js +1 -1
  9. package/dist/cjs/ui/DropList/index.js +1 -1
  10. package/dist/es2019/extensibility/Extension/Extension/index.js +2 -1
  11. package/dist/es2019/extensibility/Extension/Lozenge.js +4 -2
  12. package/dist/es2019/extensibility/Extension/LozengeComponent.js +5 -2
  13. package/dist/es2019/extensibility/Extension/styles.js +55 -59
  14. package/dist/es2019/link/constants.js +2 -0
  15. package/dist/es2019/monitoring/error.js +1 -1
  16. package/dist/es2019/ui/DropList/index.js +1 -1
  17. package/dist/esm/extensibility/Extension/Extension/index.js +2 -1
  18. package/dist/esm/extensibility/Extension/Lozenge.js +4 -2
  19. package/dist/esm/extensibility/Extension/LozengeComponent.js +5 -2
  20. package/dist/esm/extensibility/Extension/styles.js +61 -8
  21. package/dist/esm/link/constants.js +2 -0
  22. package/dist/esm/monitoring/error.js +1 -1
  23. package/dist/esm/ui/DropList/index.js +1 -1
  24. package/dist/types/extensibility/Extension/Lozenge.d.ts +2 -0
  25. package/dist/types/extensibility/Extension/LozengeComponent.d.ts +3 -1
  26. package/dist/types/link/constants.d.ts +2 -0
  27. package/dist/types-ts4.5/extensibility/Extension/Lozenge.d.ts +2 -0
  28. package/dist/types-ts4.5/extensibility/Extension/LozengeComponent.d.ts +3 -1
  29. package/dist/types-ts4.5/link/constants.d.ts +2 -0
  30. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 78.9.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 78.9.3
10
+
11
+ ### Patch Changes
12
+
13
+ - [#77819](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77819) [`ac7c9369d377`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ac7c9369d377) - [ux] Updates lozenges to match designs more closely in the macro visual design update project
14
+
15
+ ## 78.9.2
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
21
+ ## 78.9.1
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies
26
+
3
27
  ## 78.9.0
4
28
 
5
29
  ### Minor Changes
package/constants/package.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "@atlaskit/editor-common/constants",
3
+ "main": "../dist/cjs/link/constants.js",
4
+ "module": "../dist/esm/link/constants.js",
5
+ "module:es2019": "../dist/es2019/link/constants.js",
6
+ "sideEffects": false,
7
+ "types": "../dist/types/link/constants.d.ts",
8
+ "typesVersions": {
9
+ ">=4.5 <4.9": {
10
+ "*": [
11
+ "../dist/types-ts4.5/link/constants.d.ts"
12
+ ]
13
+ }
14
+ }
15
+ }
package/dist/cjs/extensibility/Extension/Extension/index.js CHANGED
@@ -84,7 +84,8 @@ function ExtensionWithPluginState(props) {
84
84
  return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
85
85
  isNodeSelected: isNodeSelected,
86
86
  node: node,
87
- showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
87
+ showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
88
+ customContainerStyles: customContainerStyles
88
89
  }), (0, _react2.jsx)("div", {
89
90
  ref: handleRef,
90
91
  "data-layout": node.attrs.layout,
package/dist/cjs/extensibility/Extension/Lozenge.js CHANGED
@@ -46,7 +46,8 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
46
46
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFallback", function (lozengeData) {
47
47
  var _this$props = _this.props,
48
48
  showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
49
- isNodeSelected = _this$props.isNodeSelected;
49
+ isNodeSelected = _this$props.isNodeSelected,
50
+ customContainerStyles = _this$props.customContainerStyles;
50
51
  var _this$props$node$attr = _this.props.node.attrs,
51
52
  parameters = _this$props$node$attr.parameters,
52
53
  extensionKey = _this$props$node$attr.extensionKey;
@@ -61,7 +62,8 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
61
62
  lozengeData: lozengeData,
62
63
  params: params,
63
64
  title: title,
64
- renderImage: _this.renderImage
65
+ renderImage: _this.renderImage,
66
+ customContainerStyles: customContainerStyles
65
67
  });
66
68
  });
67
69
  return _this;
package/dist/cjs/extensibility/Extension/LozengeComponent.js CHANGED
@@ -23,14 +23,16 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
23
23
  params = _ref.params,
24
24
  renderImage = _ref.renderImage,
25
25
  isNodeSelected = _ref.isNodeSelected,
26
- showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
26
+ showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
27
+ customContainerStyles = _ref.customContainerStyles;
27
28
  var capitalizedTitle = capitalizeFirstLetter(title);
28
29
  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
29
30
  if (showMacroInteractionDesignUpdates) {
30
31
  return (0, _react.jsx)("div", {
31
32
  className: "extension-title",
32
33
  css: _styles.lozengeWrapper,
33
- "data-testid": "new-lozenge"
34
+ "data-testid": "new-lozenge",
35
+ style: customContainerStyles
34
36
  }, (0, _react.jsx)(_tag.SimpleTag, {
35
37
  text: capitalizedTitle,
36
38
  color: isNodeSelected ? 'blueLight' : 'greyLight'
package/dist/cjs/extensibility/Extension/styles.js CHANGED
@@ -1,6 +1,5 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
@@ -18,14 +17,67 @@ Object.defineProperty(exports, "padding", {
18
17
  }
19
18
  });
20
19
  exports.wrapperDefault = exports.styledImage = exports.placeholderFallbackParams = exports.placeholderFallback = void 0;
21
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
22
20
  var _react = require("@emotion/react");
23
21
  var _colors = require("@atlaskit/theme/colors");
24
22
  var _styles = require("../../styles");
25
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
26
- var wrapperDefault = exports.wrapperDefault = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border-radius: ", ";\n position: relative;\n vertical-align: middle;\n\n .ProseMirror-selectednode > span > & > .extension-overlay {\n box-shadow: inset 0px 0px 0px 2px ", ";\n opacity: 1;\n }\n\n &.with-overlay {\n .extension-overlay {\n background: ", ";\n color: transparent;\n }\n\n &:hover .extension-overlay {\n opacity: 1;\n }\n }\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(_colors.B200, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N20A, ")"));
27
- var overlay = exports.overlay = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: ", ";\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s;\n"])), "var(--ds-border-radius, 3px)");
28
- var placeholderFallback = exports.placeholderFallback = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: center;\n\n & > img {\n margin: 0 ", ";\n }\n\n /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n /* stylelint-disable-next-line */\n label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
29
- var placeholderFallbackParams = exports.placeholderFallbackParams = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n max-width: 200px;\n margin-left: 5px;\n color: ", ";\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N70, ")"));
30
- var styledImage = exports.styledImage = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n max-height: 16px;\n max-width: 16px;\n /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n /* stylelint-disable-next-line */\n label: lozenge-image;\n"])));
31
- var lozengeWrapper = exports.lozengeWrapper = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: left;\n width: 100%;\n margin-left: ", ";\n"])), "var(--ds-space-050, 4px)");
23
+ var wrapperDefault = exports.wrapperDefault = (0, _react.css)({
24
+ background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
25
+ borderRadius: "var(--ds-border-radius, 3px)",
26
+ position: 'relative',
27
+ verticalAlign: 'middle',
28
+ '.ProseMirror-selectednode > span > & > .extension-overlay': {
29
+ boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-selected, ".concat(_colors.B200, ")")),
30
+ opacity: 1
31
+ },
32
+ '&.with-overlay': {
33
+ '.extension-overlay': {
34
+ background: "var(--ds-background-neutral-hovered, ".concat(_colors.N20A, ")"),
35
+ color: 'transparent'
36
+ },
37
+ '&:hover .extension-overlay': {
38
+ opacity: 1
39
+ }
40
+ }
41
+ });
42
+ var overlay = exports.overlay = (0, _react.css)({
43
+ borderRadius: "var(--ds-border-radius, 3px)",
44
+ position: 'absolute',
45
+ width: '100%',
46
+ height: '100%',
47
+ opacity: 0,
48
+ pointerEvents: 'none',
49
+ transition: 'opacity 0.3s'
50
+ });
51
+ var placeholderFallback = exports.placeholderFallback = (0, _react.css)({
52
+ display: 'inline-flex',
53
+ alignItems: 'center',
54
+ '& > img': {
55
+ margin: "0 ".concat("var(--ds-space-050, 4px)")
56
+ },
57
+ /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
58
+ /* stylelint-disable-next-line */
59
+ label: 'placeholder-fallback'
60
+ });
61
+ var placeholderFallbackParams = exports.placeholderFallbackParams = (0, _react.css)({
62
+ display: 'inline-block',
63
+ maxWidth: '200px',
64
+ marginLeft: '5px',
65
+ color: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
66
+ textOverflow: 'ellipsis',
67
+ whiteSpace: 'nowrap',
68
+ overflow: 'hidden'
69
+ });
70
+ var styledImage = exports.styledImage = (0, _react.css)({
71
+ maxHeight: '16px',
72
+ maxWidth: '16px',
73
+ /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
74
+ /* stylelint-disable-next-line */
75
+ label: 'lozenge-image'
76
+ });
77
+ var lozengeWrapper = exports.lozengeWrapper = (0, _react.css)({
78
+ display: 'flex',
79
+ justifyContent: 'left',
80
+ width: '100%',
81
+ marginLeft: "var(--ds-space-050, 4px)",
82
+ marginBottom: "var(--ds-space-negative-050, -4px)"
83
+ });
package/dist/cjs/link/constants.js ADDED
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.stagingLinkPreferencesUrl = exports.productionLinkPreferencesUrl = void 0;
7
+ var stagingLinkPreferencesUrl = exports.stagingLinkPreferencesUrl = 'https://id.stg.internal.atlassian.com/manage-profile/link-preferences';
8
+ var productionLinkPreferencesUrl = exports.productionLinkPreferencesUrl = 'https://id.atlassian.com/manage-profile/link-preferences';
package/dist/cjs/monitoring/error.js CHANGED
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
16
16
  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; }
17
17
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
18
18
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
19
- var packageVersion = "78.9.0";
19
+ var packageVersion = "78.9.4";
20
20
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
21
21
  // Remove URL as it has UGC
22
22
  // TODO: Sanitise the URL instead of just removing it
package/dist/cjs/ui/DropList/index.js CHANGED
@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
22
22
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
23
23
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
24
24
  var packageName = "@atlaskit/editor-common";
25
- var packageVersion = "78.9.0";
25
+ var packageVersion = "78.9.4";
26
26
  var halfFocusRing = 1;
27
27
  var dropOffset = '0, 8';
28
28
  var DropList = /*#__PURE__*/function (_Component) {
package/dist/es2019/extensibility/Extension/Extension/index.js CHANGED
@@ -80,7 +80,8 @@ function ExtensionWithPluginState(props) {
80
80
  return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
81
81
  isNodeSelected: isNodeSelected,
82
82
  node: node,
83
- showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
83
+ showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
84
+ customContainerStyles: customContainerStyles
84
85
  }), jsx("div", {
85
86
  ref: handleRef,
86
87
  "data-layout": node.attrs.layout,
package/dist/es2019/extensibility/Extension/Lozenge.js CHANGED
@@ -27,7 +27,8 @@ export default class ExtensionLozenge extends Component {
27
27
  _defineProperty(this, "renderFallback", lozengeData => {
28
28
  const {
29
29
  showMacroInteractionDesignUpdates,
30
- isNodeSelected
30
+ isNodeSelected,
31
+ customContainerStyles
31
32
  } = this.props;
32
33
  const {
33
34
  parameters,
@@ -46,7 +47,8 @@ export default class ExtensionLozenge extends Component {
46
47
  lozengeData: lozengeData,
47
48
  params: params,
48
49
  title: title,
49
- renderImage: this.renderImage
50
+ renderImage: this.renderImage,
51
+ customContainerStyles: customContainerStyles
50
52
  });
51
53
  });
52
54
  }
package/dist/es2019/extensibility/Extension/LozengeComponent.js CHANGED
@@ -1,4 +1,5 @@
1
1
  /** @jsx jsx */
2
+
2
3
  import { jsx } from '@emotion/react';
3
4
  import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
4
5
  import { SimpleTag as Tag } from '@atlaskit/tag';
@@ -14,7 +15,8 @@ export const LozengeComponent = ({
14
15
  params,
15
16
  renderImage,
16
17
  isNodeSelected,
17
- showMacroInteractionDesignUpdates
18
+ showMacroInteractionDesignUpdates,
19
+ customContainerStyles
18
20
  }) => {
19
21
  const capitalizedTitle = capitalizeFirstLetter(title);
20
22
  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
@@ -22,7 +24,8 @@ export const LozengeComponent = ({
22
24
  return jsx("div", {
23
25
  className: "extension-title",
24
26
  css: lozengeWrapper,
25
- "data-testid": "new-lozenge"
27
+ "data-testid": "new-lozenge",
28
+ style: customContainerStyles
26
29
  }, jsx(Tag, {
27
30
  text: capitalizedTitle,
28
31
  color: isNodeSelected ? 'blueLight' : 'greyLight'
package/dist/es2019/extensibility/Extension/styles.js CHANGED
@@ -2,68 +2,64 @@ import { css } from '@emotion/react';
2
2
  import { B200, N20, N20A, N70 } from '@atlaskit/theme/colors';
3
3
  import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
4
4
  export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
5
- export const wrapperDefault = css`
6
- background: ${`var(--ds-background-neutral, ${N20})`};
7
- border-radius: ${"var(--ds-border-radius, 3px)"};
8
- position: relative;
9
- vertical-align: middle;
10
-
11
- .ProseMirror-selectednode > span > & > .extension-overlay {
12
- box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-selected, ${B200})`};
13
- opacity: 1;
14
- }
15
-
16
- &.with-overlay {
17
- .extension-overlay {
18
- background: ${`var(--ds-background-neutral-hovered, ${N20A})`};
19
- color: transparent;
20
- }
21
-
22
- &:hover .extension-overlay {
23
- opacity: 1;
5
+ export const wrapperDefault = css({
6
+ background: `var(--ds-background-neutral, ${N20})`,
7
+ borderRadius: "var(--ds-border-radius, 3px)",
8
+ position: 'relative',
9
+ verticalAlign: 'middle',
10
+ '.ProseMirror-selectednode > span > & > .extension-overlay': {
11
+ boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-selected, ${B200})`}`,
12
+ opacity: 1
13
+ },
14
+ '&.with-overlay': {
15
+ '.extension-overlay': {
16
+ background: `var(--ds-background-neutral-hovered, ${N20A})`,
17
+ color: 'transparent'
18
+ },
19
+ '&:hover .extension-overlay': {
20
+ opacity: 1
24
21
  }
25
22
  }
26
- `;
27
- export const overlay = css`
28
- border-radius: ${"var(--ds-border-radius, 3px)"};
29
- position: absolute;
30
- width: 100%;
31
- height: 100%;
32
- opacity: 0;
33
- pointer-events: none;
34
- transition: opacity 0.3s;
35
- `;
36
- export const placeholderFallback = css`
37
- display: inline-flex;
38
- align-items: center;
39
-
40
- & > img {
41
- margin: 0 ${"var(--ds-space-050, 4px)"};
42
- }
43
-
23
+ });
24
+ export const overlay = css({
25
+ borderRadius: "var(--ds-border-radius, 3px)",
26
+ position: 'absolute',
27
+ width: '100%',
28
+ height: '100%',
29
+ opacity: 0,
30
+ pointerEvents: 'none',
31
+ transition: 'opacity 0.3s'
32
+ });
33
+ export const placeholderFallback = css({
34
+ display: 'inline-flex',
35
+ alignItems: 'center',
36
+ '& > img': {
37
+ margin: `0 ${"var(--ds-space-050, 4px)"}`
38
+ },
44
39
  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
45
40
  /* stylelint-disable-next-line */
46
- label: placeholder-fallback;
47
- `;
48
- export const placeholderFallbackParams = css`
49
- display: inline-block;
50
- max-width: 200px;
51
- margin-left: 5px;
52
- color: ${`var(--ds-text-subtlest, ${N70})`};
53
- text-overflow: ellipsis;
54
- white-space: nowrap;
55
- overflow: hidden;
56
- `;
57
- export const styledImage = css`
58
- max-height: 16px;
59
- max-width: 16px;
41
+ label: 'placeholder-fallback'
42
+ });
43
+ export const placeholderFallbackParams = css({
44
+ display: 'inline-block',
45
+ maxWidth: '200px',
46
+ marginLeft: '5px',
47
+ color: `var(--ds-text-subtlest, ${N70})`,
48
+ textOverflow: 'ellipsis',
49
+ whiteSpace: 'nowrap',
50
+ overflow: 'hidden'
51
+ });
52
+ export const styledImage = css({
53
+ maxHeight: '16px',
54
+ maxWidth: '16px',
60
55
  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
61
56
  /* stylelint-disable-next-line */
62
- label: lozenge-image;
63
- `;
64
- export const lozengeWrapper = css`
65
- display: flex;
66
- justify-content: left;
67
- width: 100%;
68
- margin-left: ${"var(--ds-space-050, 4px)"};
69
- `;
57
+ label: 'lozenge-image'
58
+ });
59
+ export const lozengeWrapper = css({
60
+ display: 'flex',
61
+ justifyContent: 'left',
62
+ width: '100%',
63
+ marginLeft: "var(--ds-space-050, 4px)",
64
+ marginBottom: "var(--ds-space-negative-050, -4px)"
65
+ });
package/dist/es2019/link/constants.js ADDED
@@ -0,0 +1,2 @@
1
+ export const stagingLinkPreferencesUrl = 'https://id.stg.internal.atlassian.com/manage-profile/link-preferences';
2
+ export const productionLinkPreferencesUrl = 'https://id.atlassian.com/manage-profile/link-preferences';
package/dist/es2019/monitoring/error.js CHANGED
@@ -1,6 +1,6 @@
1
1
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
2
2
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
3
- const packageVersion = "78.9.0";
3
+ const packageVersion = "78.9.4";
4
4
  const sanitiseSentryEvents = (data, _hint) => {
5
5
  // Remove URL as it has UGC
6
6
  // TODO: Sanitise the URL instead of just removing it
package/dist/es2019/ui/DropList/index.js CHANGED
@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
7
7
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
8
8
  import Layer from '../Layer';
9
9
  const packageName = "@atlaskit/editor-common";
10
- const packageVersion = "78.9.0";
10
+ const packageVersion = "78.9.4";
11
11
  const halfFocusRing = 1;
12
12
  const dropOffset = '0, 8';
13
13
  class DropList extends Component {
package/dist/esm/extensibility/Extension/Extension/index.js CHANGED
@@ -75,7 +75,8 @@ function ExtensionWithPluginState(props) {
75
75
  return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
76
76
  isNodeSelected: isNodeSelected,
77
77
  node: node,
78
- showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
78
+ showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
79
+ customContainerStyles: customContainerStyles
79
80
  }), jsx("div", {
80
81
  ref: handleRef,
81
82
  "data-layout": node.attrs.layout,
package/dist/esm/extensibility/Extension/Lozenge.js CHANGED
@@ -40,7 +40,8 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
40
40
  _defineProperty(_assertThisInitialized(_this), "renderFallback", function (lozengeData) {
41
41
  var _this$props = _this.props,
42
42
  showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
43
- isNodeSelected = _this$props.isNodeSelected;
43
+ isNodeSelected = _this$props.isNodeSelected,
44
+ customContainerStyles = _this$props.customContainerStyles;
44
45
  var _this$props$node$attr = _this.props.node.attrs,
45
46
  parameters = _this$props$node$attr.parameters,
46
47
  extensionKey = _this$props$node$attr.extensionKey;
@@ -55,7 +56,8 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
55
56
  lozengeData: lozengeData,
56
57
  params: params,
57
58
  title: title,
58
- renderImage: _this.renderImage
59
+ renderImage: _this.renderImage,
60
+ customContainerStyles: customContainerStyles
59
61
  });
60
62
  });
61
63
  return _this;
package/dist/esm/extensibility/Extension/LozengeComponent.js CHANGED
@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  /** @jsx jsx */
5
+
5
6
  import { jsx } from '@emotion/react';
6
7
  import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
7
8
  import { SimpleTag as Tag } from '@atlaskit/tag';
@@ -17,14 +18,16 @@ export var LozengeComponent = function LozengeComponent(_ref) {
17
18
  params = _ref.params,
18
19
  renderImage = _ref.renderImage,
19
20
  isNodeSelected = _ref.isNodeSelected,
20
- showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
21
+ showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
22
+ customContainerStyles = _ref.customContainerStyles;
21
23
  var capitalizedTitle = capitalizeFirstLetter(title);
22
24
  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
23
25
  if (showMacroInteractionDesignUpdates) {
24
26
  return jsx("div", {
25
27
  className: "extension-title",
26
28
  css: lozengeWrapper,
27
- "data-testid": "new-lozenge"
29
+ "data-testid": "new-lozenge",
30
+ style: customContainerStyles
28
31
  }, jsx(Tag, {
29
32
  text: capitalizedTitle,
30
33
  color: isNodeSelected ? 'blueLight' : 'greyLight'
package/dist/esm/extensibility/Extension/styles.js CHANGED
@@ -1,12 +1,65 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
3
1
  import { css } from '@emotion/react';
4
2
  import { B200, N20, N20A, N70 } from '@atlaskit/theme/colors';
5
3
  import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
6
4
  export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
7
- export var wrapperDefault = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", ";\n position: relative;\n vertical-align: middle;\n\n .ProseMirror-selectednode > span > & > .extension-overlay {\n box-shadow: inset 0px 0px 0px 2px ", ";\n opacity: 1;\n }\n\n &.with-overlay {\n .extension-overlay {\n background: ", ";\n color: transparent;\n }\n\n &:hover .extension-overlay {\n opacity: 1;\n }\n }\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(B200, ")"), "var(--ds-background-neutral-hovered, ".concat(N20A, ")"));
8
- export var overlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: ", ";\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s;\n"])), "var(--ds-border-radius, 3px)");
9
- export var placeholderFallback = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n\n & > img {\n margin: 0 ", ";\n }\n\n /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n /* stylelint-disable-next-line */\n label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
10
- export var placeholderFallbackParams = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: inline-block;\n max-width: 200px;\n margin-left: 5px;\n color: ", ";\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(N70, ")"));
11
- export var styledImage = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n max-height: 16px;\n max-width: 16px;\n /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n /* stylelint-disable-next-line */\n label: lozenge-image;\n"])));
12
- export var lozengeWrapper = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: left;\n width: 100%;\n margin-left: ", ";\n"])), "var(--ds-space-050, 4px)");
5
+ export var wrapperDefault = css({
6
+ background: "var(--ds-background-neutral, ".concat(N20, ")"),
7
+ borderRadius: "var(--ds-border-radius, 3px)",
8
+ position: 'relative',
9
+ verticalAlign: 'middle',
10
+ '.ProseMirror-selectednode > span > & > .extension-overlay': {
11
+ boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-selected, ".concat(B200, ")")),
12
+ opacity: 1
13
+ },
14
+ '&.with-overlay': {
15
+ '.extension-overlay': {
16
+ background: "var(--ds-background-neutral-hovered, ".concat(N20A, ")"),
17
+ color: 'transparent'
18
+ },
19
+ '&:hover .extension-overlay': {
20
+ opacity: 1
21
+ }
22
+ }
23
+ });
24
+ export var overlay = css({
25
+ borderRadius: "var(--ds-border-radius, 3px)",
26
+ position: 'absolute',
27
+ width: '100%',
28
+ height: '100%',
29
+ opacity: 0,
30
+ pointerEvents: 'none',
31
+ transition: 'opacity 0.3s'
32
+ });
33
+ export var placeholderFallback = css({
34
+ display: 'inline-flex',
35
+ alignItems: 'center',
36
+ '& > img': {
37
+ margin: "0 ".concat("var(--ds-space-050, 4px)")
38
+ },
39
+ /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
40
+ /* stylelint-disable-next-line */
41
+ label: 'placeholder-fallback'
42
+ });
43
+ export var placeholderFallbackParams = css({
44
+ display: 'inline-block',
45
+ maxWidth: '200px',
46
+ marginLeft: '5px',
47
+ color: "var(--ds-text-subtlest, ".concat(N70, ")"),
48
+ textOverflow: 'ellipsis',
49
+ whiteSpace: 'nowrap',
50
+ overflow: 'hidden'
51
+ });
52
+ export var styledImage = css({
53
+ maxHeight: '16px',
54
+ maxWidth: '16px',
55
+ /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
56
+ /* stylelint-disable-next-line */
57
+ label: 'lozenge-image'
58
+ });
59
+ export var lozengeWrapper = css({
60
+ display: 'flex',
61
+ justifyContent: 'left',
62
+ width: '100%',
63
+ marginLeft: "var(--ds-space-050, 4px)",
64
+ marginBottom: "var(--ds-space-negative-050, -4px)"
65
+ });
package/dist/esm/link/constants.js ADDED
@@ -0,0 +1,2 @@
1
+ export var stagingLinkPreferencesUrl = 'https://id.stg.internal.atlassian.com/manage-profile/link-preferences';
2
+ export var productionLinkPreferencesUrl = 'https://id.atlassian.com/manage-profile/link-preferences';
package/dist/esm/monitoring/error.js CHANGED
@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
7
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
8
8
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
9
- var packageVersion = "78.9.0";
9
+ var packageVersion = "78.9.4";
10
10
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
11
11
  // Remove URL as it has UGC
12
12
  // TODO: Sanitise the URL instead of just removing it
package/dist/esm/ui/DropList/index.js CHANGED
@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
17
17
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
18
18
  import Layer from '../Layer';
19
19
  var packageName = "@atlaskit/editor-common";
20
- var packageVersion = "78.9.0";
20
+ var packageVersion = "78.9.4";
21
21
  var halfFocusRing = 1;
22
22
  var dropOffset = '0, 8';
23
23
  var DropList = /*#__PURE__*/function (_Component) {
package/dist/types/extensibility/Extension/Lozenge.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  /** @jsx jsx */
2
2
  import { Component } from 'react';
3
+ import type { CSSProperties } from 'react';
3
4
  import { jsx } from '@emotion/react';
4
5
  import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
5
6
  export interface Props {
6
7
  node: PmNode;
7
8
  showMacroInteractionDesignUpdates?: boolean;
8
9
  isNodeSelected?: boolean;
10
+ customContainerStyles?: CSSProperties;
9
11
  }
10
12
  export interface LozengeData {
11
13
  url: string;
package/dist/types/extensibility/Extension/LozengeComponent.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  /** @jsx jsx */
2
+ import type { CSSProperties } from 'react';
2
3
  import { jsx } from '@emotion/react';
3
4
  import type { LozengeData } from './Lozenge';
4
5
  export declare const ICON_SIZE = 24;
@@ -10,6 +11,7 @@ type LozengeComponentProps = {
10
11
  renderImage: (lozengeData: LozengeData) => void;
11
12
  isNodeSelected?: boolean;
12
13
  showMacroInteractionDesignUpdates?: boolean;
14
+ customContainerStyles?: CSSProperties;
13
15
  };
14
- export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, }: LozengeComponentProps) => jsx.JSX.Element;
16
+ export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, }: LozengeComponentProps) => jsx.JSX.Element;
15
17
  export {};
package/dist/types/link/constants.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const stagingLinkPreferencesUrl = "https://id.stg.internal.atlassian.com/manage-profile/link-preferences";
2
+ export declare const productionLinkPreferencesUrl = "https://id.atlassian.com/manage-profile/link-preferences";
package/dist/types-ts4.5/extensibility/Extension/Lozenge.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  /** @jsx jsx */
2
2
  import { Component } from 'react';
3
+ import type { CSSProperties } from 'react';
3
4
  import { jsx } from '@emotion/react';
4
5
  import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
5
6
  export interface Props {
6
7
  node: PmNode;
7
8
  showMacroInteractionDesignUpdates?: boolean;
8
9
  isNodeSelected?: boolean;
10
+ customContainerStyles?: CSSProperties;
9
11
  }
10
12
  export interface LozengeData {
11
13
  url: string;
package/dist/types-ts4.5/extensibility/Extension/LozengeComponent.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  /** @jsx jsx */
2
+ import type { CSSProperties } from 'react';
2
3
  import { jsx } from '@emotion/react';
3
4
  import type { LozengeData } from './Lozenge';
4
5
  export declare const ICON_SIZE = 24;
@@ -10,6 +11,7 @@ type LozengeComponentProps = {
10
11
  renderImage: (lozengeData: LozengeData) => void;
11
12
  isNodeSelected?: boolean;
12
13
  showMacroInteractionDesignUpdates?: boolean;
14
+ customContainerStyles?: CSSProperties;
13
15
  };
14
- export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, }: LozengeComponentProps) => jsx.JSX.Element;
16
+ export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, }: LozengeComponentProps) => jsx.JSX.Element;
15
17
  export {};
package/dist/types-ts4.5/link/constants.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const stagingLinkPreferencesUrl = "https://id.stg.internal.atlassian.com/manage-profile/link-preferences";
2
+ export declare const productionLinkPreferencesUrl = "https://id.atlassian.com/manage-profile/link-preferences";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "78.9.0",
3
+ "version": "78.9.4",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -88,7 +88,8 @@
88
88
  "./copy-button": "./src/copy-button/index.ts",
89
89
  "./legacy-rank-plugins": "./src/rank.ts",
90
90
  "./indentation": "./src/indentation/index.ts",
91
- "./annotation": "./src/annotation/index.ts"
91
+ "./annotation": "./src/annotation/index.ts",
92
+ "./constants": "./src/link/constants.ts"
92
93
  },
93
94
  "dependencies": {
94
95
  "@atlaskit/activity-provider": "^2.4.0",
@@ -119,8 +120,8 @@
119
120
  "@atlaskit/media-common": "^11.0.0",
120
121
  "@atlaskit/media-file-preview": "^0.5.0",
121
122
  "@atlaskit/media-picker": "^66.3.0",
122
- "@atlaskit/media-ui": "^25.2.0",
123
- "@atlaskit/media-viewer": "48.2.15",
123
+ "@atlaskit/media-ui": "^25.3.0",
124
+ "@atlaskit/media-viewer": "48.3.2",
124
125
  "@atlaskit/mention": "^23.0.0",
125
126
  "@atlaskit/menu": "^2.1.0",
126
127
  "@atlaskit/platform-feature-flags": "^0.2.0",
@@ -132,7 +133,7 @@
132
133
  "@atlaskit/task-decision": "^17.9.0",
133
134
  "@atlaskit/textfield": "^6.0.0",
134
135
  "@atlaskit/theme": "^12.6.0",
135
- "@atlaskit/tokens": "^1.38.0",
136
+ "@atlaskit/tokens": "^1.39.0",
136
137
  "@atlaskit/tooltip": "^18.1.0",
137
138
  "@atlaskit/ufo": "^0.2.0",
138
139
  "@atlaskit/width-detector": "^4.1.0",