@atlaskit/editor-plugin-show-diff 8.3.6 → 8.3.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 8.3.8
+
+### Patch Changes
+
+- [`932b1625cbf60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/932b1625cbf60) -
+  EDITOR-6621: Add a grey background on deleted text in standard diff theme.
+- Updated dependencies
+
+## 8.3.7
+
+### Patch Changes
+
+- [`c07f198dda226`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c07f198dda226) -
+  NO-ISSUE: Always scroll diff into view even if it's in viewport already
+- Updated dependencies
+
 ## 8.3.6
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations/colorSchemes/standard.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleCardBlockNode = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
+exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleCardBlockNode = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentBackground = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
@@ -44,6 +44,13 @@ var deletedContentStyleNew = exports.deletedContentStyleNew = (0, _lazyNodeView.
   position: 'relative',
   opacity: 0.8
 });
+
+/**
+ * Merge into existing styles when cleaning up
+ */
+var deletedInlineContentBackground = exports.deletedInlineContentBackground = (0, _lazyNodeView.convertToInlineCss)({
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)"
+});
 var deletedContentStyleUnbounded = exports.deletedContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: '50%',

package/dist/cjs/pm-plugins/decorations/createInlineChangedDecoration.js

@@ -48,6 +48,12 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
         style = (0, _traditional.getDeletedTraditionalInlineStyle)(false);
       } else {
         style = isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyle;
+        /**
+         * Merge into existing styles when cleaning up
+         */
+        if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          style += _standard.deletedInlineContentBackground;
+        }
       }
     }
   } else {

package/dist/cjs/pm-plugins/decorations/createNodeChangedDecorationWidget.js

@@ -43,6 +43,13 @@ var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   if (colorScheme === 'traditional') {
     return (0, _traditional.getDeletedTraditionalInlineStyle)(isActive);
   }
+  // Merge into existing styles when cleaning up
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isActive) {
+      return _standard.deletedContentStyleActive + _standard.deletedInlineContentBackground;
+    }
+    return _standard.deletedContentStyleNew + _standard.deletedInlineContentBackground;
+  }
   if (isActive) {
     return _standard.deletedContentStyleActive;
   }
@@ -54,7 +61,13 @@ var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
  */
 var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive) {
   var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    wrapper.setAttribute('style',
+    // Merge into existing styles when cleaning up
+    getDeletedContentStyle(colorScheme, isActive) + _standard.deletedInlineContentBackground);
+  } else {
+    wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
+  }
   return wrapper;
 };
 

package/dist/cjs/pm-plugins/scrollToDiff.js

@@ -15,16 +15,6 @@ exports.scrollToFirstDecoration = exports.scrollToActiveDecoration = void 0;
  */
 var SCROLL_TOP_MARGIN_PX = 100;
 
-/**
- * Checks if element is not visible in the viewport, accounting
- * for the scroll margin offset used during scrolling.
- */
-function shouldScrollIntoView(element) {
-  var rect = element.getBoundingClientRect();
-  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-  return !(rect.top >= SCROLL_TOP_MARGIN_PX && rect.bottom <= viewportHeight);
-}
-
 /**
  * Returns the resolved HTMLElement for a given DOM node, walking up to the
  * parent element if the node itself is not an Element (e.g. a text node).
@@ -67,14 +57,14 @@ var scrollToFirstDecoration = exports.scrollToFirstDecoration = function scrollT
     if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec = _decoration$spec.key) !== null && _decoration$spec !== void 0 && _decoration$spec.startsWith('diff-widget') && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
       // @ts-expect-error - decoration.type is not typed public API
       var widgetDom = decoration.type.toDOM;
-      if (shouldScrollIntoView(widgetDom)) {
-        scrollToSelection(widgetDom);
-      }
+      // Always scroll to the top of this decoration even if it's in view already
+      scrollToSelection(widgetDom);
     } else {
       var _view$domAtPos;
       var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
       var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
-      if (node instanceof HTMLElement && shouldScrollIntoView(node)) {
+      if (node instanceof HTMLElement) {
+        // Always scroll to the top of this decoration even if it's in view already
         scrollToSelection(node);
       }
     }

package/dist/es2019/pm-plugins/decorations/colorSchemes/standard.js

@@ -38,6 +38,13 @@ export const deletedContentStyleNew = convertToInlineCss({
   position: 'relative',
   opacity: 0.8
 });
+
+/**
+ * Merge into existing styles when cleaning up
+ */
+export const deletedInlineContentBackground = convertToInlineCss({
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)"
+});
 export const deletedContentStyleUnbounded = convertToInlineCss({
   position: 'absolute',
   top: '50%',

package/dist/es2019/pm-plugins/decorations/createInlineChangedDecoration.js

@@ -1,7 +1,7 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive } from './colorSchemes/standard';
+import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedInlineContentBackground } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle } from './colorSchemes/traditional';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -40,6 +40,12 @@ export const createInlineChangedDecoration = ({
         style = getDeletedTraditionalInlineStyle(false);
       } else {
         style = isActive ? deletedContentStyleActive : deletedContentStyle;
+        /**
+         * Merge into existing styles when cleaning up
+         */
+        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          style += deletedInlineContentBackground;
+        }
       }
     }
   } else {

package/dist/es2019/pm-plugins/decorations/createNodeChangedDecorationWidget.js

@@ -2,7 +2,7 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded } from './colorSchemes/standard';
+import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentBackground } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
@@ -29,6 +29,13 @@ const getDeletedContentStyle = (colorScheme, isActive = false) => {
   if (colorScheme === 'traditional') {
     return getDeletedTraditionalInlineStyle(isActive);
   }
+  // Merge into existing styles when cleaning up
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isActive) {
+      return deletedContentStyleActive + deletedInlineContentBackground;
+    }
+    return deletedContentStyleNew + deletedInlineContentBackground;
+  }
   if (isActive) {
     return deletedContentStyleActive;
   }
@@ -40,7 +47,13 @@ const getDeletedContentStyle = (colorScheme, isActive = false) => {
  */
 const createDeletedStyleWrapperWithoutOpacity = (colorScheme, isActive) => {
   const wrapper = document.createElement('span');
-  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    wrapper.setAttribute('style',
+    // Merge into existing styles when cleaning up
+    getDeletedContentStyle(colorScheme, isActive) + deletedInlineContentBackground);
+  } else {
+    wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
+  }
   return wrapper;
 };
 

package/dist/es2019/pm-plugins/scrollToDiff.js

@@ -9,16 +9,6 @@
  */
 const SCROLL_TOP_MARGIN_PX = 100;
 
-/**
- * Checks if element is not visible in the viewport, accounting
- * for the scroll margin offset used during scrolling.
- */
-function shouldScrollIntoView(element) {
-  const rect = element.getBoundingClientRect();
-  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-  return !(rect.top >= SCROLL_TOP_MARGIN_PX && rect.bottom <= viewportHeight);
-}
-
 /**
  * Returns the resolved HTMLElement for a given DOM node, walking up to the
  * parent element if the node itself is not an Element (e.g. a text node).
@@ -61,14 +51,14 @@ export const scrollToFirstDecoration = (view, decorations) => {
     if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec$key = _decoration$spec.key) !== null && _decoration$spec$key !== void 0 && _decoration$spec$key.startsWith('diff-widget') && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
       // @ts-expect-error - decoration.type is not typed public API
       const widgetDom = decoration.type.toDOM;
-      if (shouldScrollIntoView(widgetDom)) {
-        scrollToSelection(widgetDom);
-      }
+      // Always scroll to the top of this decoration even if it's in view already
+      scrollToSelection(widgetDom);
     } else {
       var _view$domAtPos;
       const targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
       const node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
-      if (node instanceof HTMLElement && shouldScrollIntoView(node)) {
+      if (node instanceof HTMLElement) {
+        // Always scroll to the top of this decoration even if it's in view already
         scrollToSelection(node);
       }
     }

package/dist/esm/pm-plugins/decorations/colorSchemes/standard.js

@@ -38,6 +38,13 @@ export var deletedContentStyleNew = convertToInlineCss({
   position: 'relative',
   opacity: 0.8
 });
+
+/**
+ * Merge into existing styles when cleaning up
+ */
+export var deletedInlineContentBackground = convertToInlineCss({
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)"
+});
 export var deletedContentStyleUnbounded = convertToInlineCss({
   position: 'absolute',
   top: '50%',

package/dist/esm/pm-plugins/decorations/createInlineChangedDecoration.js

@@ -1,7 +1,7 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive } from './colorSchemes/standard';
+import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedInlineContentBackground } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle } from './colorSchemes/traditional';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -42,6 +42,12 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
         style = getDeletedTraditionalInlineStyle(false);
       } else {
         style = isActive ? deletedContentStyleActive : deletedContentStyle;
+        /**
+         * Merge into existing styles when cleaning up
+         */
+        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          style += deletedInlineContentBackground;
+        }
       }
     }
   } else {

package/dist/esm/pm-plugins/decorations/createNodeChangedDecorationWidget.js

@@ -6,7 +6,7 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded } from './colorSchemes/standard';
+import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentBackground } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
@@ -36,6 +36,13 @@ var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   if (colorScheme === 'traditional') {
     return getDeletedTraditionalInlineStyle(isActive);
   }
+  // Merge into existing styles when cleaning up
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isActive) {
+      return deletedContentStyleActive + deletedInlineContentBackground;
+    }
+    return deletedContentStyleNew + deletedInlineContentBackground;
+  }
   if (isActive) {
     return deletedContentStyleActive;
   }
@@ -47,7 +54,13 @@ var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
  */
 var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive) {
   var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    wrapper.setAttribute('style',
+    // Merge into existing styles when cleaning up
+    getDeletedContentStyle(colorScheme, isActive) + deletedInlineContentBackground);
+  } else {
+    wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
+  }
   return wrapper;
 };
 

package/dist/esm/pm-plugins/scrollToDiff.js

@@ -9,16 +9,6 @@
  */
 var SCROLL_TOP_MARGIN_PX = 100;
 
-/**
- * Checks if element is not visible in the viewport, accounting
- * for the scroll margin offset used during scrolling.
- */
-function shouldScrollIntoView(element) {
-  var rect = element.getBoundingClientRect();
-  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-  return !(rect.top >= SCROLL_TOP_MARGIN_PX && rect.bottom <= viewportHeight);
-}
-
 /**
  * Returns the resolved HTMLElement for a given DOM node, walking up to the
  * parent element if the node itself is not an Element (e.g. a text node).
@@ -61,14 +51,14 @@ export var scrollToFirstDecoration = function scrollToFirstDecoration(view, deco
     if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec = _decoration$spec.key) !== null && _decoration$spec !== void 0 && _decoration$spec.startsWith('diff-widget') && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
       // @ts-expect-error - decoration.type is not typed public API
       var widgetDom = decoration.type.toDOM;
-      if (shouldScrollIntoView(widgetDom)) {
-        scrollToSelection(widgetDom);
-      }
+      // Always scroll to the top of this decoration even if it's in view already
+      scrollToSelection(widgetDom);
     } else {
       var _view$domAtPos;
       var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
       var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
-      if (node instanceof HTMLElement && shouldScrollIntoView(node)) {
+      if (node instanceof HTMLElement) {
+        // Always scroll to the top of this decoration even if it's in view already
         scrollToSelection(node);
       }
     }

package/dist/types/pm-plugins/decorations/colorSchemes/standard.d.ts

@@ -4,6 +4,10 @@ export declare const editingStyleActive: string;
 export declare const deletedContentStyle: string;
 export declare const deletedContentStyleActive: string;
 export declare const deletedContentStyleNew: string;
+/**
+ * Merge into existing styles when cleaning up
+ */
+export declare const deletedInlineContentBackground: string;
 export declare const deletedContentStyleUnbounded: string;
 export declare const deletedStyleQuoteNode: string;
 export declare const deletedStyleQuoteNodeWithLozenge: string;

package/dist/types-ts4.5/pm-plugins/decorations/colorSchemes/standard.d.ts

@@ -4,6 +4,10 @@ export declare const editingStyleActive: string;
 export declare const deletedContentStyle: string;
 export declare const deletedContentStyleActive: string;
 export declare const deletedContentStyleNew: string;
+/**
+ * Merge into existing styles when cleaning up
+ */
+export declare const deletedInlineContentBackground: string;
 export declare const deletedContentStyleUnbounded: string;
 export declare const deletedStyleQuoteNode: string;
 export declare const deletedStyleQuoteNodeWithLozenge: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "8.3.6",
+	"version": "8.3.8",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/adf-utils": "^19.29.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/editor-core": "^219.5.0",
+		"@atlaskit/editor-core": "^219.6.0",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/primitives": "^19.0.0",
@@ -58,7 +58,7 @@
 		"react-intl": "^6.6.2"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.26.0",
+		"@atlaskit/editor-common": "^114.28.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {