@atlaskit/renderer 114.7.7 → 114.7.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/renderer
 
+## 114.7.9
+
+### Patch Changes
+
+- [#139133](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139133)
+  [`a66b33f8fd694`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a66b33f8fd694) -
+  EDITOR-552 Fixes triple clicking on paragrpahs that contain inline nodes to select the entire
+  paragraph. Changes behind FG platform_renderer_triple_click_selects_paragraph
+
+## 114.7.8
+
+### Patch Changes
+
+- [#140155](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140155)
+  [`9194d276e1ed7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9194d276e1ed7) -
+  NO-ISSUE cleaned up inline-comment-shadow-update
+- Updated dependencies
+
 ## 114.7.7
 
 ### Patch Changes

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

@@ -67,7 +67,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 = "114.7.7";
+var packageVersion = "114.7.9";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -229,7 +229,7 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
     return (0, _react2.jsx)(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)({
       id: id
     }, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
-      css: [markStylesNew, (0, _platformFeatureFlags.fg)('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, (0, _platformFeatureFlags.fg)('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, (0, _platformFeatureFlags.fg)('inline_comment_shadow_update') && markStylesWithUpdatedShadow],
+      css: [markStylesNew, (0, _platformFeatureFlags.fg)('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, (0, _platformFeatureFlags.fg)('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, markStylesWithUpdatedShadow],
       style: {
         '--ak-renderer-annotation-startmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart),
         '--ak-renderer-annotation-endmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd)

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

@@ -8,6 +8,7 @@ var _react = require("react");
 var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
 var _utils = require("./utils");
 var _steps = require("../../../steps");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var useUserSelectionRange = exports.useUserSelectionRange = function useUserSelectionRange(props) {
   var rendererDOM = props.rendererRef.current;
   var selectionTimeoutRef = (0, _react.useRef)();
@@ -18,11 +19,47 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
     range = _useAnnotationRangeSt.range,
     draftRange = _useAnnotationRangeSt.draftRange,
     type = _useAnnotationRangeSt.type;
-  (0, _react.useEffect)(function () {
-    if (!document || !rendererDOM) {
-      return;
-    }
-    var onSelectionChange = function onSelectionChange(event) {
+  var lastRangeRef = (0, _react.useRef)(null);
+  var onSelectionChange = (0, _react.useCallback)(function (event) {
+    if ((0, _platformFeatureFlags.fg)('platform_renderer_triple_click_selects_paragraph')) {
+      if (selectionTimeoutRef.current) {
+        clearTimeout(selectionTimeoutRef.current);
+      }
+      selectionTimeoutRef.current = setTimeout(function () {
+        var sel = document.getSelection();
+        if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          lastRangeRef.current = null; // Clear last range if selection is invalid
+          return;
+        }
+        var _range = sel.getRangeAt(0);
+
+        // Skip if the selection hasn’t changed
+        if (lastRangeRef.current && _range.compareBoundaryPoints(Range.START_TO_START, lastRangeRef.current) === 0 && _range.compareBoundaryPoints(Range.END_TO_END, lastRangeRef.current) === 0) {
+          return;
+        }
+        if (rendererDOM && (0, _utils.isRangeInsideOfRendererContainer)(rendererDOM, _range)) {
+          var _range2 = _range,
+            startContainer = _range2.startContainer,
+            endContainer = _range2.endContainer;
+          var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
+          if (isTripleClick) {
+            var p = startContainer;
+            while (p && p.nodeName !== 'P' && p !== rendererDOM) {
+              p = p.parentNode;
+            }
+            if (p && p.nodeName === 'P' && p instanceof Element) {
+              var _range3 = document.createRange();
+              _range3.selectNodeContents(p);
+              sel.removeAllRanges();
+              sel.addRange(_range3);
+              _range = sel.getRangeAt(0);
+            }
+          }
+          setRange(_range.cloneRange());
+          lastRangeRef.current = _range;
+        }
+      }, 100);
+    } else {
       if (selectionTimeoutRef.current) {
         clearTimeout(selectionTimeoutRef.current);
       }
@@ -62,8 +99,12 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
           setRange(_range.cloneRange());
         }
       }, 250);
-    };
-
+    }
+  }, [rendererDOM, setRange]);
+  (0, _react.useEffect)(function () {
+    if (!document || !rendererDOM) {
+      return;
+    }
     // Ignored via go/ees005
     // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
     document.addEventListener('selectionchange', onSelectionChange);
@@ -73,6 +114,6 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
       document.removeEventListener('selectionchange', onSelectionChange);
       clearRange();
     };
-  }, [rendererDOM, setRange, clearRange]);
+  }, [rendererDOM, onSelectionChange, clearRange]);
   return [type === 'selection' ? range : null, draftRange, clearRange];
 };

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

@@ -48,7 +48,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "114.7.7";
+const packageVersion = "114.7.9";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -248,7 +248,7 @@ export const MarkComponent = ({
       ...accessibility,
       ...overriddenData,
       ...(!useBlockLevel && {
-        css: [markStylesNew, fg('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, fg('inline_comment_shadow_update') && markStylesWithUpdatedShadow],
+        css: [markStylesNew, fg('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, markStylesWithUpdatedShadow],
         style: {
           '--ak-renderer-annotation-startmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart),
           '--ak-renderer-annotation-endmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)

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

@@ -1,7 +1,8 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
 import { isRangeInsideOfRendererContainer } from './utils';
 import { isRoot } from '../../../steps';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const useUserSelectionRange = props => {
   const {
     rendererRef: {
@@ -18,11 +19,48 @@ export const useUserSelectionRange = props => {
     draftRange,
     type
   } = useAnnotationRangeState();
-  useEffect(() => {
-    if (!document || !rendererDOM) {
-      return;
-    }
-    const onSelectionChange = event => {
+  const lastRangeRef = useRef(null);
+  const onSelectionChange = useCallback(event => {
+    if (fg('platform_renderer_triple_click_selects_paragraph')) {
+      if (selectionTimeoutRef.current) {
+        clearTimeout(selectionTimeoutRef.current);
+      }
+      selectionTimeoutRef.current = setTimeout(() => {
+        const sel = document.getSelection();
+        if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          lastRangeRef.current = null; // Clear last range if selection is invalid
+          return;
+        }
+        let _range = sel.getRangeAt(0);
+
+        // Skip if the selection hasn’t changed
+        if (lastRangeRef.current && _range.compareBoundaryPoints(Range.START_TO_START, lastRangeRef.current) === 0 && _range.compareBoundaryPoints(Range.END_TO_END, lastRangeRef.current) === 0) {
+          return;
+        }
+        if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
+          const {
+            startContainer,
+            endContainer
+          } = _range;
+          const isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
+          if (isTripleClick) {
+            let p = startContainer;
+            while (p && p.nodeName !== 'P' && p !== rendererDOM) {
+              p = p.parentNode;
+            }
+            if (p && p.nodeName === 'P' && p instanceof Element) {
+              const range = document.createRange();
+              range.selectNodeContents(p);
+              sel.removeAllRanges();
+              sel.addRange(range);
+              _range = sel.getRangeAt(0);
+            }
+          }
+          setRange(_range.cloneRange());
+          lastRangeRef.current = _range;
+        }
+      }, 100);
+    } else {
       if (selectionTimeoutRef.current) {
         clearTimeout(selectionTimeoutRef.current);
       }
@@ -64,8 +102,12 @@ export const useUserSelectionRange = props => {
           setRange(_range.cloneRange());
         }
       }, 250);
-    };
-
+    }
+  }, [rendererDOM, setRange]);
+  useEffect(() => {
+    if (!document || !rendererDOM) {
+      return;
+    }
     // Ignored via go/ees005
     // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
     document.addEventListener('selectionchange', onSelectionChange);
@@ -75,6 +117,6 @@ export const useUserSelectionRange = props => {
       document.removeEventListener('selectionchange', onSelectionChange);
       clearRange();
     };
-  }, [rendererDOM, setRange, clearRange]);
+  }, [rendererDOM, onSelectionChange, clearRange]);
   return [type === 'selection' ? range : null, draftRange, clearRange];
 };

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

@@ -57,7 +57,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.7.7";
+var packageVersion = "114.7.9";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -223,7 +223,7 @@ export var MarkComponent = function MarkComponent(_ref) {
     return jsx(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread(_defineProperty({
       id: id
     }, fg('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
-      css: [markStylesNew, fg('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, fg('inline_comment_shadow_update') && markStylesWithUpdatedShadow],
+      css: [markStylesNew, fg('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, markStylesWithUpdatedShadow],
       style: {
         '--ak-renderer-annotation-startmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart),
         '--ak-renderer-annotation-endmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)

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

@@ -1,7 +1,8 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
 import { isRangeInsideOfRendererContainer } from './utils';
 import { isRoot } from '../../../steps';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var useUserSelectionRange = function useUserSelectionRange(props) {
   var rendererDOM = props.rendererRef.current;
   var selectionTimeoutRef = useRef();
@@ -12,11 +13,47 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
     range = _useAnnotationRangeSt.range,
     draftRange = _useAnnotationRangeSt.draftRange,
     type = _useAnnotationRangeSt.type;
-  useEffect(function () {
-    if (!document || !rendererDOM) {
-      return;
-    }
-    var onSelectionChange = function onSelectionChange(event) {
+  var lastRangeRef = useRef(null);
+  var onSelectionChange = useCallback(function (event) {
+    if (fg('platform_renderer_triple_click_selects_paragraph')) {
+      if (selectionTimeoutRef.current) {
+        clearTimeout(selectionTimeoutRef.current);
+      }
+      selectionTimeoutRef.current = setTimeout(function () {
+        var sel = document.getSelection();
+        if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          lastRangeRef.current = null; // Clear last range if selection is invalid
+          return;
+        }
+        var _range = sel.getRangeAt(0);
+
+        // Skip if the selection hasn’t changed
+        if (lastRangeRef.current && _range.compareBoundaryPoints(Range.START_TO_START, lastRangeRef.current) === 0 && _range.compareBoundaryPoints(Range.END_TO_END, lastRangeRef.current) === 0) {
+          return;
+        }
+        if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
+          var _range2 = _range,
+            startContainer = _range2.startContainer,
+            endContainer = _range2.endContainer;
+          var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
+          if (isTripleClick) {
+            var p = startContainer;
+            while (p && p.nodeName !== 'P' && p !== rendererDOM) {
+              p = p.parentNode;
+            }
+            if (p && p.nodeName === 'P' && p instanceof Element) {
+              var _range3 = document.createRange();
+              _range3.selectNodeContents(p);
+              sel.removeAllRanges();
+              sel.addRange(_range3);
+              _range = sel.getRangeAt(0);
+            }
+          }
+          setRange(_range.cloneRange());
+          lastRangeRef.current = _range;
+        }
+      }, 100);
+    } else {
       if (selectionTimeoutRef.current) {
         clearTimeout(selectionTimeoutRef.current);
       }
@@ -56,8 +93,12 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
           setRange(_range.cloneRange());
         }
       }, 250);
-    };
-
+    }
+  }, [rendererDOM, setRange]);
+  useEffect(function () {
+    if (!document || !rendererDOM) {
+      return;
+    }
     // Ignored via go/ees005
     // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
     document.addEventListener('selectionchange', onSelectionChange);
@@ -67,6 +108,6 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
       document.removeEventListener('selectionchange', onSelectionChange);
       clearRange();
     };
-  }, [rendererDOM, setRange, clearRange]);
+  }, [rendererDOM, onSelectionChange, clearRange]);
   return [type === 'selection' ? range : null, draftRange, clearRange];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "114.7.7",
+	"version": "114.7.9",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -201,14 +201,14 @@
 		"platform_editor_nested_dnd_styles_changes": {
 			"type": "boolean"
 		},
-		"inline_comment_shadow_update": {
-			"type": "boolean"
-		},
 		"platform_renderer_isPresentational": {
 			"type": "boolean"
 		},
 		"platform_renderer_nested_annotation_styling": {
 			"type": "boolean"
+		},
+		"platform_renderer_triple_click_selects_paragraph": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {