@atlaskit/renderer 109.53.2 → 109.53.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 109.53.3
+
+### Patch Changes
+
+- [#138899](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138899)
+  [`e18d6c037fd51`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e18d6c037fd51) -
+  Fix comment button disabled on triple click
+
 ## 109.53.2
 
 ### Patch Changes

package/dist/cjs/steps/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createAnnotationStep = createAnnotationStep;
 exports.getPosFromRange = getPosFromRange;
+exports.isRoot = isRoot;
 exports.resolvePos = resolvePos;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _transform = require("@atlaskit/editor-prosemirror/transform");

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

@@ -63,7 +63,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.53.2";
+var packageVersion = "109.53.3";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

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

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useUserSelectionRange = void 0;
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
 var _utils = require("./utils");
+var _steps = require("../../../steps");
 var useUserSelectionRange = exports.useUserSelectionRange = function useUserSelectionRange(props) {
   var rendererDOM = props.rendererRef.current;
   var selectionTimeoutRef = (0, _react.useRef)();
@@ -32,6 +34,27 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
         }
         var _range = sel.getRangeAt(0);
         if (rendererDOM && (0, _utils.isRangeInsideOfRendererContainer)(rendererDOM, _range)) {
+          if ((0, _platformFeatureFlags.fg)('platform_editor_allow_annotation_triple_click')) {
+            var startContainer = _range.startContainer,
+              endContainer = _range.endContainer,
+              commonAncestorContainer = _range.commonAncestorContainer;
+
+            // ED-23493
+            // On triple-click in Chrome and Safari, the native Selection API's range has endContainer as a non-text node
+            // and commonAncestorContainer as root level div.ak-renderer-document when the node is followed by div or hr.
+
+            // Triple clicks are the only case that can cause the endContainer to be a non-text node
+            // Same check for highlight range logic in confluence/next/packages/comments-util/src/domUtils.ts Line 180
+            var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
+
+            // isAnnotationAllowedOnRange range validation is checking if the parent container is root element and disable the comment if it is.
+            // platform/packages/editor/renderer/src/steps/index.ts Line 180
+
+            // This workaround ensures the endContainer is set to a text node when endContainer is non-text and the parent container is the root element
+            if (isTripleClick && (0, _steps.isRoot)(commonAncestorContainer)) {
+              _range.setEnd(startContainer, startContainer.length || 0);
+            }
+          }
           setRange(_range.cloneRange());
         }
       }, 250);

package/dist/es2019/steps/index.js

@@ -124,7 +124,7 @@ function resolveNodePos(node) {
   }
   return resolvedPos;
 }
-function isRoot(element) {
+export function isRoot(element) {
   return !!element && element.classList.contains('ak-renderer-document');
 }
 export function resolvePos(node, offset, findEnd = false) {

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

@@ -45,7 +45,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.53.2";
+const packageVersion = "109.53.3";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {

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

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
 import { isRangeInsideOfRendererContainer } from './utils';
+import { isRoot } from '../../../steps';
 export const useUserSelectionRange = props => {
   const {
     rendererRef: {
@@ -32,6 +34,29 @@ export const useUserSelectionRange = props => {
         }
         const _range = sel.getRangeAt(0);
         if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
+          if (fg('platform_editor_allow_annotation_triple_click')) {
+            const {
+              startContainer,
+              endContainer,
+              commonAncestorContainer
+            } = _range;
+
+            // ED-23493
+            // On triple-click in Chrome and Safari, the native Selection API's range has endContainer as a non-text node
+            // and commonAncestorContainer as root level div.ak-renderer-document when the node is followed by div or hr.
+
+            // Triple clicks are the only case that can cause the endContainer to be a non-text node
+            // Same check for highlight range logic in confluence/next/packages/comments-util/src/domUtils.ts Line 180
+            const isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
+
+            // isAnnotationAllowedOnRange range validation is checking if the parent container is root element and disable the comment if it is.
+            // platform/packages/editor/renderer/src/steps/index.ts Line 180
+
+            // This workaround ensures the endContainer is set to a text node when endContainer is non-text and the parent container is the root element
+            if (isTripleClick && isRoot(commonAncestorContainer)) {
+              _range.setEnd(startContainer, startContainer.length || 0);
+            }
+          }
           setRange(_range.cloneRange());
         }
       }, 250);

package/dist/esm/steps/index.js

@@ -120,7 +120,7 @@ function resolveNodePos(node) {
   }
   return resolvedPos;
 }
-function isRoot(element) {
+export function isRoot(element) {
   return !!element && element.classList.contains('ak-renderer-document');
 }
 export function resolvePos(node, offset) {

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

@@ -55,7 +55,7 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.53.2";
+var packageVersion = "109.53.3";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);

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

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
 import { isRangeInsideOfRendererContainer } from './utils';
+import { isRoot } from '../../../steps';
 export var useUserSelectionRange = function useUserSelectionRange(props) {
   var rendererDOM = props.rendererRef.current;
   var selectionTimeoutRef = useRef();
@@ -26,6 +28,27 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
         }
         var _range = sel.getRangeAt(0);
         if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
+          if (fg('platform_editor_allow_annotation_triple_click')) {
+            var startContainer = _range.startContainer,
+              endContainer = _range.endContainer,
+              commonAncestorContainer = _range.commonAncestorContainer;
+
+            // ED-23493
+            // On triple-click in Chrome and Safari, the native Selection API's range has endContainer as a non-text node
+            // and commonAncestorContainer as root level div.ak-renderer-document when the node is followed by div or hr.
+
+            // Triple clicks are the only case that can cause the endContainer to be a non-text node
+            // Same check for highlight range logic in confluence/next/packages/comments-util/src/domUtils.ts Line 180
+            var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
+
+            // isAnnotationAllowedOnRange range validation is checking if the parent container is root element and disable the comment if it is.
+            // platform/packages/editor/renderer/src/steps/index.ts Line 180
+
+            // This workaround ensures the endContainer is set to a text node when endContainer is non-text and the parent container is the root element
+            if (isTripleClick && isRoot(commonAncestorContainer)) {
+              _range.setEnd(startContainer, startContainer.length || 0);
+            }
+          }
           setRange(_range.cloneRange());
         }
       }, 250);

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

@@ -1,5 +1,6 @@
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
+export declare function isRoot(element: HTMLElement | null): boolean;
 export declare function resolvePos(node: Node | null, offset: number, findEnd?: boolean): number | false;
 interface AnnotationStepOptions {
     schema: Schema;

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

@@ -1,5 +1,6 @@
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
+export declare function isRoot(element: HTMLElement | null): boolean;
 export declare function resolvePos(node: Node | null, offset: number, findEnd?: boolean): number | false;
 interface AnnotationStepOptions {
     schema: Schema;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "109.53.2",
+	"version": "109.53.3",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -145,6 +145,9 @@
 		},
 		"platform-fix-table-ssr-resizing": {
 			"type": "boolean"
+		},
+		"platform_editor_allow_annotation_triple_click": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {