@atlaskit/editor-common 78.28.1 → 78.29.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 78.29.1
+
+### Patch Changes
+
+- [#92360](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92360) [`6050340d4875`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6050340d4875) - [ED-23056] Exclude comment badge component from selector in MediaWrapper so that comment badge for draft comment can be positioned to the top right corner correctly
+
+## 78.29.0
+
+### Minor Changes
+
+- [#90964](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90964) [`6e7df33eb280`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6e7df33eb280) - [ux] [ED-22992] Auto-dismiss comment button on media if mouse rolling away from media and comment popup, remove popup position transition so that popup does not appear sliding across the page when mouse moving from one media to another
+
 ## 78.28.1
 
 ### Patch Changes

package/dist/cjs/media-single/CommentBadge.js

@@ -79,6 +79,10 @@ var CommentBadge = exports.CommentBadge = function CommentBadge(_ref) {
   }, [status]);
   return (0, _react2.jsx)("div", {
     css: isEditor ? [commentBadgeWrapper, commentBadgeEditorOverrides] : commentBadgeWrapper
+    // This is needed so that mediaWrapperStyle in editor/editor-common/src/ui/MediaSingle/styled.tsx
+    // can target the correct div
+    ,
+    "data-comment-badge": "true"
   }, (0, _react2.jsx)(_tooltip.default, {
     position: "top",
     content: title

package/dist/cjs/messages/date.js

@@ -15,5 +15,10 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.editor.invalidDateError',
     defaultMessage: 'Enter a valid date',
     description: 'Error message when the date typed in is invalid, requesting they inputs a new date'
+  },
+  onKeyUpDownText: {
+    id: 'fabric.editor.upDown',
+    defaultMessage: 'On the use of up and down arrow keys into the following input field, the date will update below',
+    description: 'The text for the date input informs the user that using the arrow keys (up and down) will update the date picker below'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.28.1";
+var packageVersion = "78.29.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/ui/DropList/index.js

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 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); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.28.1";
+var packageVersion = "78.29.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/MediaSingle/styled.js

@@ -180,7 +180,7 @@ var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var mediaWrapperStyle = exports.mediaWrapperStyle = function mediaWrapperStyle(props) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & * [data-mark-annotation-type='inlineComment'] {\n    width: 100%;\n    height: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  // Comments on media project adds comment badge as child of the media wrapper,\n  // thus we need to exclude it so that style is applied to intended div\n  & > div:not([data-comment-badge='true']) {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & * [data-mark-annotation-type='inlineComment'] {\n    width: 100%;\n    height: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
 };
 var MediaWrapper = exports.MediaWrapper = function MediaWrapper(_ref3) {
   var children = _ref3.children,

package/dist/es2019/media-single/CommentBadge.js

@@ -66,6 +66,10 @@ export const CommentBadge = ({
   }, [status]);
   return jsx("div", {
     css: isEditor ? [commentBadgeWrapper, commentBadgeEditorOverrides] : commentBadgeWrapper
+    // This is needed so that mediaWrapperStyle in editor/editor-common/src/ui/MediaSingle/styled.tsx
+    // can target the correct div
+    ,
+    "data-comment-badge": "true"
   }, jsx(Tooltip, {
     position: "top",
     content: title

package/dist/es2019/messages/date.js

@@ -9,5 +9,10 @@ export const messages = defineMessages({
     id: 'fabric.editor.invalidDateError',
     defaultMessage: 'Enter a valid date',
     description: 'Error message when the date typed in is invalid, requesting they inputs a new date'
+  },
+  onKeyUpDownText: {
+    id: 'fabric.editor.upDown',
+    defaultMessage: 'On the use of up and down arrow keys into the following input field, the date will update below',
+    description: 'The text for the date input informs the user that using the arrow keys (up and down) will update the date picker below'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.28.1";
+const packageVersion = "78.29.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/ui/DropList/index.js

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.28.1";
+const packageVersion = "78.29.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/MediaSingle/styled.js

@@ -214,7 +214,9 @@ export const mediaWrapperStyle = props => css`
     width: 100%;
   }
 
-  & > div {
+  // Comments on media project adds comment badge as child of the media wrapper,
+  // thus we need to exclude it so that style is applied to intended div
+  & > div:not([data-comment-badge='true']) {
     position: ${props.hasFallbackContainer ? 'absolute' : 'relative'};
     height: 100%;
     width: 100%;

package/dist/esm/media-single/CommentBadge.js

@@ -71,6 +71,10 @@ export var CommentBadge = function CommentBadge(_ref) {
   }, [status]);
   return jsx("div", {
     css: isEditor ? [commentBadgeWrapper, commentBadgeEditorOverrides] : commentBadgeWrapper
+    // This is needed so that mediaWrapperStyle in editor/editor-common/src/ui/MediaSingle/styled.tsx
+    // can target the correct div
+    ,
+    "data-comment-badge": "true"
   }, jsx(Tooltip, {
     position: "top",
     content: title

package/dist/esm/messages/date.js

@@ -9,5 +9,10 @@ export var messages = defineMessages({
     id: 'fabric.editor.invalidDateError',
     defaultMessage: 'Enter a valid date',
     description: 'Error message when the date typed in is invalid, requesting they inputs a new date'
+  },
+  onKeyUpDownText: {
+    id: 'fabric.editor.upDown',
+    defaultMessage: 'On the use of up and down arrow keys into the following input field, the date will update below',
+    description: 'The text for the date input informs the user that using the arrow keys (up and down) will update the date picker below'
   }
 });

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.28.1";
+var packageVersion = "78.29.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/ui/DropList/index.js

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.28.1";
+var packageVersion = "78.29.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/MediaSingle/styled.js

@@ -170,7 +170,7 @@ var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export var mediaWrapperStyle = function mediaWrapperStyle(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & * [data-mark-annotation-type='inlineComment'] {\n    width: 100%;\n    height: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  // Comments on media project adds comment badge as child of the media wrapper,\n  // thus we need to exclude it so that style is applied to intended div\n  & > div:not([data-comment-badge='true']) {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & * [data-mark-annotation-type='inlineComment'] {\n    width: 100%;\n    height: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
 };
 export var MediaWrapper = function MediaWrapper(_ref3) {
   var children = _ref3.children,

package/dist/types/media-single/CommentBadge.d.ts

@@ -11,5 +11,6 @@ export type CommentBadgeProps = {
     onMouseEnter?: (e: React.MouseEvent) => void;
     onMouseLeave?: (e: React.MouseEvent) => void;
     isEditor?: boolean;
+    isDrafting?: boolean;
 };
 export declare const CommentBadge: ({ intl, width, height, status, mediaElement, onClick, onMouseEnter, onMouseLeave, isEditor, }: CommentBadgeProps) => jsx.JSX.Element;

package/dist/types/messages/date.d.ts

@@ -9,4 +9,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    onKeyUpDownText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/types/annotation/index.d.ts

@@ -79,6 +79,10 @@ export type InlineCommentHoverComponentProps = {
      * Range selected
      */
     range: Range;
+    /**
+     * Is mouse within the range container
+     */
+    isWithinRange: boolean;
     /**
      * Renderer/Editor DOM element ancestors wrapping the selection.
      */

package/dist/types-ts4.5/media-single/CommentBadge.d.ts

@@ -11,5 +11,6 @@ export type CommentBadgeProps = {
     onMouseEnter?: (e: React.MouseEvent) => void;
     onMouseLeave?: (e: React.MouseEvent) => void;
     isEditor?: boolean;
+    isDrafting?: boolean;
 };
 export declare const CommentBadge: ({ intl, width, height, status, mediaElement, onClick, onMouseEnter, onMouseLeave, isEditor, }: CommentBadgeProps) => jsx.JSX.Element;

package/dist/types-ts4.5/messages/date.d.ts

@@ -9,4 +9,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    onKeyUpDownText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types-ts4.5/types/annotation/index.d.ts

@@ -79,6 +79,10 @@ export type InlineCommentHoverComponentProps = {
      * Range selected
      */
     range: Range;
+    /**
+     * Is mouse within the range container
+     */
+    isWithinRange: boolean;
     /**
      * Renderer/Editor DOM element ancestors wrapping the selection.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.28.1",
+  "version": "78.29.1",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -113,7 +113,7 @@
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.2.0",
-    "@atlaskit/link-datasource": "^1.27.0",
+    "@atlaskit/link-datasource": "^1.28.0",
     "@atlaskit/link-picker": "^1.34.0",
     "@atlaskit/media-card": "^77.11.0",
     "@atlaskit/media-client": "^26.3.0",