@atlaskit/renderer 109.14.0 → 109.15.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 109.15.1
+
+### Patch Changes
+
+- [#87575](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87575) [`d528eb09243a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d528eb09243a) - Update renderer to force skip context media client
+
+## 109.15.0
+
+### Minor Changes
+
+- [#87820](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87820) [`120f76a32bf9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/120f76a32bf9) - [ED-22819]
+
+  - Update ApplyAnnotation to return `step` of type AddNodeMarkStep for annotation on media and correct `doc` that includes newly add annotation mark
+  - Make media node read in data attributes so that it shows data-renderer-start-pos
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.14.0
 
 ### Minor Changes

package/dist/cjs/actions/index.js

@@ -226,11 +226,24 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
         to = pos.to;
       var annotationId = annotation.annotationId,
         annotationType = annotation.annotationType;
-      var step = (0, _steps.createAnnotationStep)(from, to, {
-        annotationId: annotationId,
-        annotationType: annotationType,
-        schema: this.schema
-      });
+      var step;
+
+      // If from points to a node position,
+      // we need to 1 position before it for nodeAt to return the node itself
+      var beforeNodePos = Math.max(from - 1, 0);
+      var possibleNode = this.doc.nodeAt(beforeNodePos);
+      if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
+        step = new _transform.AddNodeMarkStep(beforeNodePos, this.schema.marks.annotation.create({
+          id: annotationId,
+          type: annotationType
+        }));
+      } else {
+        step = (0, _steps.createAnnotationStep)(from, to, {
+          annotationId: annotationId,
+          annotationType: annotationType,
+          schema: this.schema
+        });
+      }
       var _step$apply2 = step.apply(this.doc),
         doc = _step$apply2.doc,
         failed = _step$apply2.failed;

package/dist/cjs/react/index.js

@@ -411,7 +411,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       var isBorderMark = function isBorderMark(mark) {
         return isChildOfMediaSingle && mark.type === border;
       };
-      return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
+      return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         marks: node.marks.filter(function (m) {
           return !isLinkMark(m) || _this6.allowMediaLinking === true;
         }),

package/dist/cjs/react/utils/EditorMediaClientProvider.js

@@ -20,6 +20,12 @@ var EditorMediaClientProvider = exports.EditorMediaClientProvider = function Edi
     mediaClientConfig = _useState2[0],
     setMediaClientConfig = _useState2[1];
   var mediaProvider = (0, _providerFactory.useProvider)('mediaProvider');
+
+  /**
+   * If a mediaClientConfig is provided then we will force
+   * skip the mediaClient from context
+   */
+  var shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
   var contextMediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -43,6 +49,6 @@ var EditorMediaClientProvider = exports.EditorMediaClientProvider = function Edi
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/_react.default.createElement(_mediaClientReact.MediaClientContext.Provider, {
-    value: mediaClient || contextMediaClient
+    value: shouldSkipContext ? mediaClient : contextMediaClient
   }, children);
 };

package/dist/cjs/steps/index.js

@@ -10,6 +10,9 @@ var _transform = require("@atlaskit/editor-prosemirror/transform");
 function getStartPos(element) {
   return parseInt(element.dataset.rendererStartPos || '-1', 10);
 }
+var getNodeType = function getNodeType(element) {
+  return element.dataset.nodeType;
+};
 function isPositionPointer(element) {
   return getStartPos(element) > -1;
 }
@@ -114,6 +117,14 @@ function getPosFromRange(range) {
     startOffset = range.startOffset,
     endContainer = range.endContainer,
     endOffset = range.endOffset;
+  var parent = findParent(startContainer);
+  if (parent && getNodeType(parent) === 'media') {
+    var pos = getStartPos(parent);
+    return {
+      from: pos,
+      to: pos
+    };
+  }
   var from = resolvePos(startContainer, startOffset);
   var to = resolvePos(endContainer, endOffset);
   if (from === false || to === false) {

package/dist/cjs/ui/MediaCard.js

@@ -269,7 +269,8 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
         ssr = _this$props5.ssr,
         mediaClient = _this$props5.mediaClient,
-        setHoverTarget = _this$props5.setHoverTarget;
+        setHoverTarget = _this$props5.setHoverTarget,
+        dataAttributes = _this$props5.dataAttributes;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -304,7 +305,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         contextIdentifierProvider: contextIdentifierProvider,
         originalDimensions: originalDimensions,
         fileState: fileState
-      }), {
+      }), dataAttributes, {
         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.

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.14.0";
+var packageVersion = "109.15.1";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/actions/index.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 import { canApplyAnnotationOnRange, getAnnotationIdsFromRange } from '@atlaskit/editor-common/utils';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
-import { RemoveMarkStep, RemoveNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
+import { AddNodeMarkStep, RemoveMarkStep, RemoveNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
 import { createAnnotationStep, getPosFromRange } from '../steps';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { getIndexMatch } from './matches-utils';
@@ -204,11 +204,24 @@ export default class RendererActions {
       annotationId,
       annotationType
     } = annotation;
-    const step = createAnnotationStep(from, to, {
-      annotationId,
-      annotationType,
-      schema: this.schema
-    });
+    let step;
+
+    // If from points to a node position,
+    // we need to 1 position before it for nodeAt to return the node itself
+    const beforeNodePos = Math.max(from - 1, 0);
+    const possibleNode = this.doc.nodeAt(beforeNodePos);
+    if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
+      step = new AddNodeMarkStep(beforeNodePos, this.schema.marks.annotation.create({
+        id: annotationId,
+        type: annotationType
+      }));
+    } else {
+      step = createAnnotationStep(from, to, {
+        annotationId,
+        annotationType,
+        schema: this.schema
+      });
+    }
     const {
       doc,
       failed

package/dist/es2019/react/index.js

@@ -361,7 +361,7 @@ export default class ReactSerializer {
     const isLinkMark = mark => mark.type === link;
     const isBorderMark = mark => isChildOfMediaSingle && mark.type === border;
     return {
-      ...this.getProps(node),
+      ...this.getProps(node, path),
       marks: node.marks.filter(m => !isLinkMark(m) || this.allowMediaLinking === true),
       isLinkMark,
       isBorderMark,

package/dist/es2019/react/utils/EditorMediaClientProvider.js

@@ -7,6 +7,12 @@ export const EditorMediaClientProvider = ({
 }) => {
   const [mediaClientConfig, setMediaClientConfig] = useState();
   const mediaProvider = useProvider('mediaProvider');
+
+  /**
+   * If a mediaClientConfig is provided then we will force
+   * skip the mediaClient from context
+   */
+  const shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
   const contextMediaClient = useContext(MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -28,6 +34,6 @@ export const EditorMediaClientProvider = ({
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/React.createElement(MediaClientContext.Provider, {
-    value: mediaClient || contextMediaClient
+    value: shouldSkipContext ? mediaClient : contextMediaClient
   }, children);
 };

package/dist/es2019/steps/index.js

@@ -2,6 +2,7 @@ import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
 function getStartPos(element) {
   return parseInt(element.dataset.rendererStartPos || '-1', 10);
 }
+const getNodeType = element => element.dataset.nodeType;
 function isPositionPointer(element) {
   return getStartPos(element) > -1;
 }
@@ -112,6 +113,14 @@ export function getPosFromRange(range) {
     endContainer,
     endOffset
   } = range;
+  const parent = findParent(startContainer);
+  if (parent && getNodeType(parent) === 'media') {
+    const pos = getStartPos(parent);
+    return {
+      from: pos,
+      to: pos
+    };
+  }
   const from = resolvePos(startContainer, startOffset);
   const to = resolvePos(endContainer, endOffset);
   if (from === false || to === false) {

package/dist/es2019/ui/MediaCard.js

@@ -201,7 +201,8 @@ export class MediaCardView extends Component {
       shouldEnableDownloadButton,
       ssr,
       mediaClient,
-      setHoverTarget
+      setHoverTarget,
+      dataAttributes
     } = this.props;
     const isMobile = rendererAppearance === 'mobile';
     const shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -237,7 +238,7 @@ export class MediaCardView extends Component {
       contextIdentifierProvider,
       originalDimensions,
       fileState
-    }), {
+    }), dataAttributes, {
       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.

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

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.14.0";
+const packageVersion = "109.15.1";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/actions/index.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 import { canApplyAnnotationOnRange, getAnnotationIdsFromRange } from '@atlaskit/editor-common/utils';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
-import { RemoveMarkStep, RemoveNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
+import { AddNodeMarkStep, RemoveMarkStep, RemoveNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
 import { createAnnotationStep, getPosFromRange } from '../steps';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { getIndexMatch } from './matches-utils';
@@ -219,11 +219,24 @@ var RendererActions = /*#__PURE__*/function () {
         to = pos.to;
       var annotationId = annotation.annotationId,
         annotationType = annotation.annotationType;
-      var step = createAnnotationStep(from, to, {
-        annotationId: annotationId,
-        annotationType: annotationType,
-        schema: this.schema
-      });
+      var step;
+
+      // If from points to a node position,
+      // we need to 1 position before it for nodeAt to return the node itself
+      var beforeNodePos = Math.max(from - 1, 0);
+      var possibleNode = this.doc.nodeAt(beforeNodePos);
+      if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
+        step = new AddNodeMarkStep(beforeNodePos, this.schema.marks.annotation.create({
+          id: annotationId,
+          type: annotationType
+        }));
+      } else {
+        step = createAnnotationStep(from, to, {
+          annotationId: annotationId,
+          annotationType: annotationType,
+          schema: this.schema
+        });
+      }
       var _step$apply2 = step.apply(this.doc),
         doc = _step$apply2.doc,
         failed = _step$apply2.failed;

package/dist/esm/react/index.js

@@ -404,7 +404,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var isBorderMark = function isBorderMark(mark) {
         return isChildOfMediaSingle && mark.type === border;
       };
-      return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
+      return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         marks: node.marks.filter(function (m) {
           return !isLinkMark(m) || _this6.allowMediaLinking === true;
         }),

package/dist/esm/react/utils/EditorMediaClientProvider.js

@@ -10,6 +10,12 @@ export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref)
     mediaClientConfig = _useState2[0],
     setMediaClientConfig = _useState2[1];
   var mediaProvider = useProvider('mediaProvider');
+
+  /**
+   * If a mediaClientConfig is provided then we will force
+   * skip the mediaClient from context
+   */
+  var shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
   var contextMediaClient = useContext(MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -33,6 +39,6 @@ export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref)
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/React.createElement(MediaClientContext.Provider, {
-    value: mediaClient || contextMediaClient
+    value: shouldSkipContext ? mediaClient : contextMediaClient
   }, children);
 };

package/dist/esm/steps/index.js

@@ -2,6 +2,9 @@ import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
 function getStartPos(element) {
   return parseInt(element.dataset.rendererStartPos || '-1', 10);
 }
+var getNodeType = function getNodeType(element) {
+  return element.dataset.nodeType;
+};
 function isPositionPointer(element) {
   return getStartPos(element) > -1;
 }
@@ -106,6 +109,14 @@ export function getPosFromRange(range) {
     startOffset = range.startOffset,
     endContainer = range.endContainer,
     endOffset = range.endOffset;
+  var parent = findParent(startContainer);
+  if (parent && getNodeType(parent) === 'media') {
+    var pos = getStartPos(parent);
+    return {
+      from: pos,
+      to: pos
+    };
+  }
   var from = resolvePos(startContainer, startOffset);
   var to = resolvePos(endContainer, endOffset);
   if (from === false || to === false) {

package/dist/esm/ui/MediaCard.js

@@ -259,7 +259,8 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
         ssr = _this$props5.ssr,
         mediaClient = _this$props5.mediaClient,
-        setHoverTarget = _this$props5.setHoverTarget;
+        setHoverTarget = _this$props5.setHoverTarget,
+        dataAttributes = _this$props5.dataAttributes;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -294,7 +295,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         contextIdentifierProvider: contextIdentifierProvider,
         originalDimensions: originalDimensions,
         fileState: fileState
-      }), {
+      }), dataAttributes, {
         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.

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

@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.14.0";
+var packageVersion = "109.15.1";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/types/ui/MediaCard.d.ts

@@ -39,6 +39,7 @@ export interface MediaCardProps {
     featureFlags?: MediaFeatureFlags;
     shouldEnableDownloadButton?: boolean;
     ssr?: MediaSSR;
+    dataAttributes?: Record<string, any>;
 }
 export interface State {
     contextIdentifierProvider?: ContextIdentifierProvider;

package/dist/types-ts4.5/ui/MediaCard.d.ts

@@ -39,6 +39,7 @@ export interface MediaCardProps {
     featureFlags?: MediaFeatureFlags;
     shouldEnableDownloadButton?: boolean;
     ssr?: MediaSSR;
+    dataAttributes?: Record<string, any>;
 }
 export interface State {
     contextIdentifierProvider?: ContextIdentifierProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.14.0",
+  "version": "109.15.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.8.0",
+    "@atlaskit/button": "^17.10.0",
     "@atlaskit/code": "^15.1.0",
     "@atlaskit/editor-common": "^78.23.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
@@ -38,7 +38,7 @@
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/link-datasource": "^1.24.0",
+    "@atlaskit/link-datasource": "^1.25.0",
     "@atlaskit/media-card": "^77.10.0",
     "@atlaskit/media-client": "^26.2.0",
     "@atlaskit/media-client-react": "^2.0.0",
@@ -71,7 +71,7 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/analytics-gas-types": "^5.1.0",
-    "@atlaskit/css-reset": "^6.7.0",
+    "@atlaskit/css-reset": "^6.8.0",
     "@atlaskit/editor-test-helpers": "^18.20.0",
     "@atlaskit/link-provider": "^1.9.0",
     "@atlaskit/link-test-helpers": "^7.0.0",