@atlaskit/renderer 109.9.0 → 109.10.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 109.10.1
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+- Updated dependencies
+
+## 109.10.0
+
+### Minor Changes
+
+- [#78436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78436) [`89ff7202e5fe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89ff7202e5fe) - The annotation comment provider will now accept a new hoverComponent which is displayed by the annotation ui when specific block nodes are rolled over by the users mouse
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.9.0
 
 ### Minor Changes

package/actions/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/actions.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/actions.d.ts"
       ]

package/consts/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/consts.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/consts.d.ts"
       ]

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

@@ -51,6 +51,8 @@ var CopyButton = function CopyButton(_ref) {
       }),
       onClick: function onClick(event) {
         fireAnalyticsEvent({
+          // @ts-expect-error - Type 'ACTION.CLICKED' is not assignable to type 'ACTION.CLICKED | ACTION.EDITOR_TTI | ACTION.RE_RENDERED | ACTION.MEDIA_LINK_TRANSFORMED | ACTION.STARTED | ACTION.TOGGLE_EXPAND | ACTION.UNSUPPORTED_CONTENT_ENCOUNTERED | ACTION.VISITED | ACTION.RENDERED | ACTION.INVALID_PROSEMIRROR_DOCUMENT | ACTION.CRASHED | ... 6 more ... | AnnotationActionType'.
+          // This error was introduced after upgrading to TypeScript 5
           action: _enums.ACTION.CLICKED,
           actionSubject: _enums.ACTION_SUBJECT.BUTTON,
           actionSubjectId: _enums.ACTION_SUBJECT_ID.CODEBLOCK_COPY,

package/dist/cjs/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -53,6 +53,8 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
       isSelected: wrapLongLines,
       onClick: function onClick(event) {
         fireAnalyticsEvent({
+          // @ts-expect-error - Type 'ACTION.CLICKED' is not assignable to type 'ACTION.CLICKED | ACTION.EDITOR_TTI | ACTION.RE_RENDERED | ACTION.MEDIA_LINK_TRANSFORMED | ACTION.STARTED | ACTION.TOGGLE_EXPAND | ACTION.UNSUPPORTED_CONTENT_ENCOUNTERED | ACTION.VISITED | ACTION.RENDERED | ACTION.INVALID_PROSEMIRROR_DOCUMENT | ACTION.CRASHED | ... 6 more ... | AnnotationActionType'
+          // This error was introduced after upgrading to TypeScript 5
           action: _enums.ACTION.CLICKED,
           actionSubject: _enums.ACTION_SUBJECT.BUTTON,
           actionSubjectId: _enums.ACTION_SUBJECT_ID.CODEBLOCK_WRAP,

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -69,7 +69,8 @@ var MediaSingle = function MediaSingle(props) {
     _props$allowCaptions = props.allowCaptions,
     allowCaptions = _props$allowCaptions === void 0 ? false : _props$allowCaptions,
     _props$isInsideOfInli = props.isInsideOfInlineExtension,
-    isInsideOfInlineExtension = _props$isInsideOfInli === void 0 ? false : _props$isInsideOfInli;
+    isInsideOfInlineExtension = _props$isInsideOfInli === void 0 ? false : _props$isInsideOfInli,
+    dataAttributes = props.dataAttributes;
   var _React$useState = _react.default.useState({
       width: 0,
       height: 0
@@ -180,7 +181,8 @@ var MediaSingle = function MediaSingle(props) {
         widthType: widthType
       },
       fullWidthMode: isFullWidth,
-      isInsideOfInlineExtension: isInsideOfInlineExtension
+      isInsideOfInlineExtension: isInsideOfInlineExtension,
+      dataAttributes: dataAttributes
     }, (0, _react2.jsx)(_react.Fragment, null, mediaComponent), allowCaptions && caption);
   };
   return (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref3) {

package/dist/cjs/ui/MediaCard.js

@@ -21,6 +21,7 @@ var _traverse = require("@atlaskit/adf-utils/traverse");
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _utils = require("@atlaskit/editor-common/utils");
+var _AnnotationRangeContext = require("./annotations/contexts/AnnotationRangeContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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; }
 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; }
@@ -267,7 +268,8 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         featureFlags = _this$props5.featureFlags,
         shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
         ssr = _this$props5.ssr,
-        mediaClient = _this$props5.mediaClient;
+        mediaClient = _this$props5.mediaClient,
+        setHoverTarget = _this$props5.setHoverTarget;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -295,13 +297,21 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         collectionName: collection,
         occurrenceKey: occurrenceKey
       };
-      return /*#__PURE__*/_react.default.createElement("div", getClipboardAttrs({
+      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, getClipboardAttrs({
         id: id,
         alt: alt,
         collection: collection,
         contextIdentifierProvider: contextIdentifierProvider,
         originalDimensions: originalDimensions,
         fileState: fileState
+      }), {
+        onMouseEnter: function onMouseEnter(event) {
+          // We will not allow a hover target to be set if any mouse button is depressed during the mouse enter state.
+          // This could be due to the user trying to select text across the document.
+          if (event.buttons === 0) {
+            setHoverTarget && setHoverTarget(event.target);
+          }
+        }
       }), /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
         identifier: identifier,
         alt: alt,
@@ -360,8 +370,11 @@ var getClipboardAttrs = exports.getClipboardAttrs = function getClipboardAttrs(_
 };
 var MediaCardInternal = exports.MediaCardInternal = function MediaCardInternal(props) {
   var mediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
+  var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
+    setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
   return /*#__PURE__*/_react.default.createElement(MediaCardView, (0, _extends2.default)({}, props, {
-    mediaClient: mediaClient
+    mediaClient: mediaClient,
+    setHoverTarget: setHoverTarget
   }));
 };
 var MediaCard = exports.MediaCard = (0, _utils.withImageLoader)(MediaCardInternal);

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

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.9.0";
+var packageVersion = "109.10.1";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -353,7 +353,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         }
       };
       try {
-        var _featureFlags$feature, _this$featureFlags2;
+        var _featureFlags$feature, _featureFlags$feature2;
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
         var _renderDocument = (0, _.renderDocument)(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
           result = _renderDocument.result,
@@ -363,7 +363,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
           onComplete(stat);
         }
         var rendererOutput = (0, _react2.jsx)(_rendererContext.RendererContextProvider, {
-          value: this.featureFlags(this.props.featureFlags)
+          value: featureFlags
         }, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
           value: (0, _links.getActiveHeadingId)(allowHeadingAnchorLinks)
         }, (0, _react2.jsx)(_analyticsContext.default.Provider, {
@@ -398,7 +398,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
           height: maxHeight,
           fadeHeight: fadeOutHeight
         }, rendererOutput) : rendererOutput;
-        var rendererRenderTracking = (_this$featureFlags2 = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags2 === void 0 || (_this$featureFlags2 = _this$featureFlags2.featureFlags) === null || _this$featureFlags2 === void 0 || (_this$featureFlags2 = _this$featureFlags2.rendererRenderTracking) === null || _this$featureFlags2 === void 0 ? void 0 : _this$featureFlags2[_analytics.ACTION_SUBJECT.RENDERER];
+        var rendererRenderTracking = featureFlags === null || featureFlags === void 0 || (_featureFlags$feature2 = featureFlags.featureFlags) === null || _featureFlags$feature2 === void 0 || (_featureFlags$feature2 = _featureFlags$feature2.rendererRenderTracking) === null || _featureFlags$feature2 === void 0 ? void 0 : _featureFlags$feature2[_analytics.ACTION_SUBJECT.RENDERER];
         var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && (0, _react2.jsx)(_RenderTracking.RenderTracking, {
           componentProps: this.props,
           action: _analytics.ACTION.RE_RENDERED,
@@ -408,7 +408,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         });
         return (0, _react2.jsx)(_react.Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
-        var _featureFlags$feature2;
+        var _featureFlags$feature3;
         if (onError) {
           onError(e);
         }
@@ -419,7 +419,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
-          useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+          useBlockRenderForCodeBlock: (_featureFlags$feature3 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature3 !== void 0 ? _featureFlags$feature3 : true,
           addTelepointer: this.props.addTelepointer,
           onClick: handleWrapperOnClick
         }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));

package/dist/cjs/ui/annotations/contexts/AnnotationRangeContext.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnnotationRangeState = exports.useAnnotationRangeDispatch = exports.AnnotationRangeStateContext = exports.AnnotationRangeProvider = exports.AnnotationRangeDispatchContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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; }
+function reducer(state, action) {
+  switch (action.type) {
+    case 'clear':
+      if (!!state.range || !!state.type) {
+        return {
+          range: null,
+          type: null
+        };
+      }
+      return state;
+    case 'clearSelection':
+      if (state.type === 'selection') {
+        return {
+          range: null,
+          type: null
+        };
+      }
+      return state;
+    case 'clearHover':
+      if (state.type === 'hover') {
+        return {
+          range: null,
+          type: null
+        };
+      }
+      return state;
+    case 'setSelection':
+      if (state.range !== action.range || state.type !== 'selection') {
+        return {
+          range: action.range,
+          type: 'selection'
+        };
+      }
+      return state;
+    case 'setHover':
+      if (state.range !== action.range || state.type !== 'hover') {
+        return {
+          range: action.range,
+          type: 'hover'
+        };
+      }
+      return state;
+  }
+  return state;
+}
+var AnnotationRangeStateContext = exports.AnnotationRangeStateContext = /*#__PURE__*/(0, _react.createContext)({
+  range: null,
+  type: null
+});
+var AnnotationRangeDispatchContext = exports.AnnotationRangeDispatchContext = /*#__PURE__*/(0, _react.createContext)({
+  clearRange: function clearRange() {},
+  clearSelectionRange: function clearSelectionRange() {},
+  clearHoverRange: function clearHoverRange() {},
+  setRange: function setRange() {}
+});
+var AnnotationRangeProvider = exports.AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
+  var children = _ref.children,
+    allowCommentsOnMedia = _ref.allowCommentsOnMedia;
+  var _useReducer = (0, _react.useReducer)(reducer, {
+      range: null,
+      type: null
+    }),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    _useReducer2$ = _useReducer2[0],
+    range = _useReducer2$.range,
+    type = _useReducer2$.type,
+    dispatch = _useReducer2[1];
+  var clearRange = (0, _react.useCallback)(function () {
+    return dispatch({
+      type: 'clear'
+    });
+  }, []);
+  var clearSelectionRange = (0, _react.useCallback)(function () {
+    return dispatch({
+      type: 'clearSelection'
+    });
+  }, []);
+  var clearHoverRange = (0, _react.useCallback)(function () {
+    return dispatch({
+      type: 'clearHover'
+    });
+  }, []);
+  var setRange = (0, _react.useCallback)(function (range) {
+    return dispatch({
+      type: 'setSelection',
+      range: range
+    });
+  }, []);
+  var setHoverTarget = (0, _react.useCallback)(function (target) {
+    var range = document.createRange();
+    range.setStartBefore(target);
+    range.setEndAfter(target);
+    dispatch({
+      type: 'setHover',
+      range: range
+    });
+  }, []);
+  var stateData = (0, _react.useMemo)(function () {
+    return {
+      range: range,
+      type: type
+    };
+  }, [range, type]);
+  var dispatchData = (0, _react.useMemo)(function () {
+    return {
+      clearRange: clearRange,
+      clearSelectionRange: clearSelectionRange,
+      clearHoverRange: clearHoverRange,
+      setRange: setRange,
+      setHoverTarget: !!allowCommentsOnMedia ? setHoverTarget : undefined
+    };
+  }, [allowCommentsOnMedia, clearRange, clearSelectionRange, clearHoverRange, setRange, setHoverTarget]);
+  return /*#__PURE__*/_react.default.createElement(AnnotationRangeStateContext.Provider, {
+    value: stateData
+  }, /*#__PURE__*/_react.default.createElement(AnnotationRangeDispatchContext.Provider, {
+    value: dispatchData
+  }, children));
+};
+var useAnnotationRangeState = exports.useAnnotationRangeState = function useAnnotationRangeState() {
+  return (0, _react.useContext)(AnnotationRangeStateContext);
+};
+var useAnnotationRangeDispatch = exports.useAnnotationRangeDispatch = function useAnnotationRangeDispatch() {
+  return (0, _react.useContext)(AnnotationRangeDispatchContext);
+};

package/dist/cjs/ui/annotations/element/mark.js

@@ -23,7 +23,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) { (0, _defineProperty2.default)(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; }
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 var markStyles = function markStyles() {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n\n    & div.rich-media-item {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus, _styles.mediaAnnotationStyles);
 };
 var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,

package/dist/cjs/ui/annotations/hooks/user-selection.js

@@ -1,20 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useUserSelectionRange = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
+var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
 var _context = require("../context");
 var _utils = require("./utils");
 var useUserSelectionRange = exports.useUserSelectionRange = function useUserSelectionRange(props) {
   var rendererDOM = props.rendererRef.current;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    range = _useState2[0],
-    setRange = _useState2[1];
+  var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
+    clearSelectionRange = _useAnnotationRangeDi.clearSelectionRange,
+    setRange = _useAnnotationRangeDi.setRange;
+  var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
+    range = _useAnnotationRangeSt.range,
+    type = _useAnnotationRangeSt.type;
   var annotationDraftPosition = (0, _react.useContext)(_context.AnnotationsDraftContext);
   var hasAnnotationDraft = !!annotationDraftPosition;
   (0, _react.useEffect)(function () {
@@ -34,11 +35,8 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
     document.addEventListener('selectionchange', onSelectionChange);
     return function () {
       document.removeEventListener('selectionchange', onSelectionChange);
-      setRange(null);
+      clearSelectionRange();
     };
-  }, [rendererDOM, hasAnnotationDraft]);
-  var clearRange = (0, _react.useCallback)(function () {
-    setRange(null);
-  }, []);
-  return [range, clearRange];
+  }, [rendererDOM, hasAnnotationDraft, setRange, clearSelectionRange]);
+  return [type === 'selection' ? range : null, clearSelectionRange];
 };

package/dist/cjs/ui/annotations/hover/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HoverRangeValidator", {
+  enumerable: true,
+  get: function get() {
+    return _rangeValidator.RangeValidator;
+  }
+});
+var _rangeValidator = require("./range-validator");

package/dist/cjs/ui/annotations/hover/mounter.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Mounter = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _draft = require("../draft");
+var _analyticsListeners = require("@atlaskit/analytics-listeners");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _RendererActionsContext = require("../../RendererActionsContext");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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 Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props) {
+  var Component = props.component,
+    range = props.range,
+    isAnnotationAllowed = props.isAnnotationAllowed,
+    wrapperDOM = props.wrapperDOM,
+    onCloseProps = props.onClose,
+    clearAnnotationDraft = props.clearAnnotationDraft,
+    applyAnnotationDraftAt = props.applyAnnotationDraftAt,
+    documentPosition = props.documentPosition,
+    applyAnnotation = props.applyAnnotation,
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    generateIndexMatch = props.generateIndexMatch;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    draftDocumentPosition = _useState2[0],
+    setDraftDocumentPosition = _useState2[1];
+  var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
+  var onCreateCallback = (0, _react.useCallback)(function (annotationId) {
+    if (!isAnnotationAllowed || !documentPosition || !applyAnnotation) {
+      return false;
+    }
+    var annotation = {
+      annotationId: annotationId,
+      annotationType: _adfSchema.AnnotationTypes.INLINE_COMMENT
+    };
+    if (createAnalyticsEvent) {
+      createAnalyticsEvent({
+        action: _analytics.ACTION.INSERTED,
+        actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
+        attributes: {},
+        eventType: _analytics.EVENT_TYPE.TRACK
+      }).fire(_analyticsListeners.FabricChannel.editor);
+    }
+    return applyAnnotation(draftDocumentPosition || documentPosition, annotation);
+  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
+  var createIndexCallback = (0, _react.useCallback)(function () {
+    if (!documentPosition || !generateIndexMatch) {
+      return false;
+    }
+    var result = generateIndexMatch(documentPosition);
+    if (!result) {
+      return false;
+    }
+    return result;
+  }, [documentPosition, generateIndexMatch]);
+  var applyDraftModeCallback = (0, _react.useCallback)(function () {
+    var keepNativeSelection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    if (!documentPosition || !isAnnotationAllowed) {
+      if (createAnalyticsEvent) {
+        createAnalyticsEvent({
+          action: _analytics.ACTION.CREATE_NOT_ALLOWED,
+          actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
+          attributes: {},
+          eventType: _analytics.EVENT_TYPE.TRACK
+        }).fire(_analyticsListeners.FabricChannel.editor);
+      }
+      return;
+    }
+    setDraftDocumentPosition(documentPosition);
+    applyAnnotationDraftAt(documentPosition);
+    if (createAnalyticsEvent) {
+      var uniqueAnnotationsInRange = actions.getAnnotationsByPosition(range);
+      createAnalyticsEvent({
+        action: _analytics.ACTION.OPENED,
+        actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          overlap: uniqueAnnotationsInRange.length
+        }
+      }).fire(_analyticsListeners.FabricChannel.editor);
+    }
+    window.requestAnimationFrame(function () {
+      if (keepNativeSelection) {
+        (0, _draft.updateWindowSelectionAroundDraft)(documentPosition);
+      } else {
+        var sel = window.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+        }
+      }
+    });
+  }, [documentPosition, isAnnotationAllowed, applyAnnotationDraftAt, createAnalyticsEvent, actions, range]);
+  var removeDraftModeCallback = (0, _react.useCallback)(function () {
+    clearAnnotationDraft();
+    setDraftDocumentPosition(null);
+    var sel = window.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+    }
+  }, [clearAnnotationDraft]);
+  var onCloseCallback = (0, _react.useCallback)(function () {
+    if (createAnalyticsEvent) {
+      createAnalyticsEvent({
+        action: _analytics.ACTION.CLOSED,
+        actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {}
+      }).fire(_analyticsListeners.FabricChannel.editor);
+    }
+    removeDraftModeCallback();
+    onCloseProps();
+  }, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
+  return /*#__PURE__*/_react.default.createElement(Component, {
+    range: range,
+    wrapperDOM: wrapperDOM.current,
+    isAnnotationAllowed: isAnnotationAllowed,
+    onClose: onCloseCallback,
+    onCreate: onCreateCallback,
+    getAnnotationIndexMatch: createIndexCallback,
+    applyDraftMode: applyDraftModeCallback,
+    removeDraftMode: removeDraftModeCallback
+  });
+});

package/dist/cjs/ui/annotations/hover/range-validator.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeValidator = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _mounter = require("./mounter");
+var _RendererActionsContext = require("../../RendererActionsContext");
+var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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 RangeValidator = exports.RangeValidator = function RangeValidator(props) {
+  var component = props.component,
+    rendererRef = props.rendererRef,
+    applyAnnotationDraftAt = props.applyAnnotationDraftAt,
+    clearAnnotationDraft = props.clearAnnotationDraft,
+    createAnalyticsEvent = props.createAnalyticsEvent;
+  var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
+  var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
+    clearHoverRange = _useAnnotationRangeDi.clearHoverRange;
+  var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
+    range = _useAnnotationRangeSt.range,
+    type = _useAnnotationRangeSt.type;
+  if (!range || type !== 'hover') {
+    return null;
+  }
+  var documentPosition = actions.getPositionFromRange(range);
+  return /*#__PURE__*/_react.default.createElement(_mounter.Mounter, {
+    range: range,
+    wrapperDOM: rendererRef,
+    component: component,
+    onClose: clearHoverRange,
+    documentPosition: documentPosition,
+    isAnnotationAllowed: true,
+    applyAnnotation: actions.applyAnnotation.bind(actions),
+    applyAnnotationDraftAt: applyAnnotationDraftAt,
+    generateIndexMatch: actions.generateAnnotationIndexMatch.bind(actions),
+    clearAnnotationDraft: clearAnnotationDraft,
+    createAnalyticsEvent: createAnalyticsEvent
+  });
+};

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

@@ -20,11 +20,12 @@ Object.defineProperty(exports, "TextWithAnnotationDraft", {
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _view = require("./view");
-var _selection = require("./selection");
+var _wrapper = require("./wrapper");
 var _context = require("./context");
 var _useLoadAnnotations = require("./hooks/use-load-annotations");
 var _useEvents = require("./hooks/use-events");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _AnnotationRangeContext = require("./contexts/AnnotationRangeContext");
 var _draft = require("./draft");
 var _element = require("./element");
 var LoadAnnotations = /*#__PURE__*/_react.default.memo(function (_ref) {
@@ -35,6 +36,7 @@ var LoadAnnotations = /*#__PURE__*/_react.default.memo(function (_ref) {
   return null;
 });
 var AnnotationsWrapper = exports.AnnotationsWrapper = function AnnotationsWrapper(props) {
+  var _annotationProvider$i, _annotationProvider$i2;
   var children = props.children,
     annotationProvider = props.annotationProvider,
     rendererRef = props.rendererRef,
@@ -50,12 +52,14 @@ var AnnotationsWrapper = exports.AnnotationsWrapper = function AnnotationsWrappe
     value: annotationProvider
   }, /*#__PURE__*/_react.default.createElement(_context.InlineCommentsStateContext.Provider, {
     value: inlineCommentAnnotationsState
-  }, /*#__PURE__*/_react.default.createElement(_selection.SelectionComponentWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(_AnnotationRangeContext.AnnotationRangeProvider, {
+    allowCommentsOnMedia: (_annotationProvider$i = annotationProvider === null || annotationProvider === void 0 || (_annotationProvider$i2 = annotationProvider.inlineComment) === null || _annotationProvider$i2 === void 0 ? void 0 : _annotationProvider$i2.allowCommentsOnMedia) !== null && _annotationProvider$i !== void 0 ? _annotationProvider$i : false
+  }, /*#__PURE__*/_react.default.createElement(_wrapper.AnnotationsContextWrapper, {
     createAnalyticsEvent: createAnalyticsEvent,
     rendererRef: rendererRef
   }, /*#__PURE__*/_react.default.createElement(LoadAnnotations, {
     adfDocument: adfDocument
   }), /*#__PURE__*/_react.default.createElement(_view.AnnotationView, {
     createAnalyticsEvent: createAnalyticsEvent
-  }), children)));
+  }), children))));
 };

package/dist/cjs/ui/annotations/selection/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SelectionComponentWrapper", {
+Object.defineProperty(exports, "SelectionRangeValidator", {
   enumerable: true,
   get: function get() {
-    return _wrapper.Wrapper;
+    return _rangeValidator.SelectionRangeValidator;
   }
 });
-var _wrapper = require("./wrapper");
+var _rangeValidator = require("./range-validator");