@atlaskit/editor-plugin-show-diff 3.1.0 → 3.1.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 3.1.2
+
+### Patch Changes
+
+- [`63e63c69cd679`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63e63c69cd679) -
+  Add styling for bullet point markers on diff
+
+## 3.1.1
+
+### Patch Changes
+
+- [`174d939cfd1ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/174d939cfd1ba) -
+  Use valid positioning for deleted diff content to avoid invalid nesting diffs
+
 ## 3.1.0
 
 ### Minor Changes

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

@@ -140,7 +140,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer,
-        colourScheme: colourScheme
+        colourScheme: colourScheme,
+        newDoc: tr.doc
       });
       if (decoration) {
         decorations.push(decoration);

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createInlineChangedDecoration = exports.createDeletedContentDecoration = exports.createBlockChangedDecoration = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _findSafeInsertPos = require("./findSafeInsertPos");
 var editingStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
@@ -39,13 +40,16 @@ var getEditorStyleNode = function getEditorStyleNode(nodeName, colourScheme) {
       return colourScheme === 'traditional' ? traditionalStyleQuoteNode : editingStyleQuoteNode;
     case 'mediaSingle':
     case 'mediaGroup':
-    case 'embedCard':
     case 'table':
     case 'tableRow':
     case 'tableCell':
     case 'tableHeader':
       return undefined;
     // Handle table separately to avoid border issues
+    case 'embedCard':
+      return (0, _lazyNodeView.convertToInlineCss)({
+        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #8270DB)"
+      });
     case 'paragraph':
     case 'heading':
     case 'hardBreak':
@@ -56,9 +60,11 @@ var getEditorStyleNode = function getEditorStyleNode(nodeName, colourScheme) {
     case 'taskItem':
     case 'bulletList':
     case 'orderedList':
-    case 'listItem':
       return undefined;
-    // Lists do not need special styling
+    case 'listItem':
+      return (0, _lazyNodeView.convertToInlineCss)({
+        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #8270DB)"
+      });
     case 'layoutSection':
       return undefined;
     // Layout nodes do not need special styling
@@ -107,8 +113,7 @@ var traditionalStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
 var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(change, colourScheme) {
   return _view.Decoration.node(change.from, change.to, {
     style: getEditorStyleNode(change.name, colourScheme),
-    'data-testid': 'show-diff-changed-decoration-node',
-    class: "show-diff-changed-decoration-node-".concat(colourScheme || 'standard')
+    'data-testid': 'show-diff-changed-decoration-node'
   }, {});
 };
 var deletedContentStyle = (0, _lazyNodeView.convertToInlineCss)({
@@ -151,7 +156,8 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
   var change = _ref.change,
     doc = _ref.doc,
     nodeViewSerializer = _ref.nodeViewSerializer,
-    colourScheme = _ref.colourScheme;
+    colourScheme = _ref.colourScheme,
+    newDoc = _ref.newDoc;
   var slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
     return;
@@ -277,5 +283,6 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
 
   // Widget decoration used for deletions as the content is not in the document
   // and we want to display the deleted content with a style.
-  return _view.Decoration.widget(change.fromB, dom, {});
+  var safeInsertPos = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, change.fromB, slice);
+  return _view.Decoration.widget(safeInsertPos, dom, {});
 };

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findSafeInsertPos = findSafeInsertPos;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+/**
+ * Find a safe position to insert a deletion slice at the given position.
+ * @param doc
+ * @param pos
+ * @param slice
+ * @returns
+ */
+function findSafeInsertPos(doc, pos, slice) {
+  if (pos > doc.content.size) {
+    return doc.content.size;
+  }
+  var $pos = doc.resolve(pos);
+  while (!(0, _utils.canInsert)($pos, slice.content) && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) !== 'paragraph') {
+    var _slice$content$firstC;
+    if ($pos.pos + 1 > doc.content.size) {
+      break;
+    }
+    $pos = doc.resolve($pos.pos + 1);
+  }
+  return $pos.pos;
+}

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

@@ -124,7 +124,8 @@ const calculateDiffDecorationsInner = ({
         change,
         doc: originalDoc,
         nodeViewSerializer,
-        colourScheme
+        colourScheme,
+        newDoc: tr.doc
       });
       if (decoration) {
         decorations.push(decoration);

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

@@ -1,5 +1,6 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { findSafeInsertPos } from './findSafeInsertPos';
 const editingStyle = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
@@ -31,13 +32,16 @@ const getEditorStyleNode = (nodeName, colourScheme) => {
       return colourScheme === 'traditional' ? traditionalStyleQuoteNode : editingStyleQuoteNode;
     case 'mediaSingle':
     case 'mediaGroup':
-    case 'embedCard':
     case 'table':
     case 'tableRow':
     case 'tableCell':
     case 'tableHeader':
       return undefined;
     // Handle table separately to avoid border issues
+    case 'embedCard':
+      return convertToInlineCss({
+        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #8270DB)"
+      });
     case 'paragraph':
     case 'heading':
     case 'hardBreak':
@@ -48,9 +52,11 @@ const getEditorStyleNode = (nodeName, colourScheme) => {
     case 'taskItem':
     case 'bulletList':
     case 'orderedList':
-    case 'listItem':
       return undefined;
-    // Lists do not need special styling
+    case 'listItem':
+      return convertToInlineCss({
+        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #8270DB)"
+      });
     case 'layoutSection':
       return undefined;
     // Layout nodes do not need special styling
@@ -98,8 +104,7 @@ const traditionalStyleCardBlockNode = convertToInlineCss({
  */
 export const createBlockChangedDecoration = (change, colourScheme) => Decoration.node(change.from, change.to, {
   style: getEditorStyleNode(change.name, colourScheme),
-  'data-testid': 'show-diff-changed-decoration-node',
-  class: `show-diff-changed-decoration-node-${colourScheme || 'standard'}`
+  'data-testid': 'show-diff-changed-decoration-node'
 }, {});
 const deletedContentStyle = convertToInlineCss({
   color: "var(--ds-text-accent-gray, #44546F)",
@@ -137,7 +142,8 @@ export const createDeletedContentDecoration = ({
   change,
   doc,
   nodeViewSerializer,
-  colourScheme
+  colourScheme,
+  newDoc
 }) => {
   const slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
@@ -256,5 +262,6 @@ export const createDeletedContentDecoration = ({
 
   // Widget decoration used for deletions as the content is not in the document
   // and we want to display the deleted content with a style.
-  return Decoration.widget(change.fromB, dom, {});
+  const safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
+  return Decoration.widget(safeInsertPos, dom, {});
 };

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

@@ -0,0 +1,23 @@
+import { canInsert } from '@atlaskit/editor-prosemirror/utils';
+
+/**
+ * Find a safe position to insert a deletion slice at the given position.
+ * @param doc
+ * @param pos
+ * @param slice
+ * @returns
+ */
+export function findSafeInsertPos(doc, pos, slice) {
+  if (pos > doc.content.size) {
+    return doc.content.size;
+  }
+  let $pos = doc.resolve(pos);
+  while (!canInsert($pos, slice.content) && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) !== 'paragraph') {
+    var _slice$content$firstC;
+    if ($pos.pos + 1 > doc.content.size) {
+      break;
+    }
+    $pos = doc.resolve($pos.pos + 1);
+  }
+  return $pos.pos;
+}

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

@@ -134,7 +134,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer,
-        colourScheme: colourScheme
+        colourScheme: colourScheme,
+        newDoc: tr.doc
       });
       if (decoration) {
         decorations.push(decoration);

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

@@ -1,5 +1,6 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { findSafeInsertPos } from './findSafeInsertPos';
 var editingStyle = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
@@ -33,13 +34,16 @@ var getEditorStyleNode = function getEditorStyleNode(nodeName, colourScheme) {
       return colourScheme === 'traditional' ? traditionalStyleQuoteNode : editingStyleQuoteNode;
     case 'mediaSingle':
     case 'mediaGroup':
-    case 'embedCard':
     case 'table':
     case 'tableRow':
     case 'tableCell':
     case 'tableHeader':
       return undefined;
     // Handle table separately to avoid border issues
+    case 'embedCard':
+      return convertToInlineCss({
+        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #8270DB)"
+      });
     case 'paragraph':
     case 'heading':
     case 'hardBreak':
@@ -50,9 +54,11 @@ var getEditorStyleNode = function getEditorStyleNode(nodeName, colourScheme) {
     case 'taskItem':
     case 'bulletList':
     case 'orderedList':
-    case 'listItem':
       return undefined;
-    // Lists do not need special styling
+    case 'listItem':
+      return convertToInlineCss({
+        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #8270DB)"
+      });
     case 'layoutSection':
       return undefined;
     // Layout nodes do not need special styling
@@ -101,8 +107,7 @@ var traditionalStyleCardBlockNode = convertToInlineCss({
 export var createBlockChangedDecoration = function createBlockChangedDecoration(change, colourScheme) {
   return Decoration.node(change.from, change.to, {
     style: getEditorStyleNode(change.name, colourScheme),
-    'data-testid': 'show-diff-changed-decoration-node',
-    class: "show-diff-changed-decoration-node-".concat(colourScheme || 'standard')
+    'data-testid': 'show-diff-changed-decoration-node'
   }, {});
 };
 var deletedContentStyle = convertToInlineCss({
@@ -145,7 +150,8 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
   var change = _ref.change,
     doc = _ref.doc,
     nodeViewSerializer = _ref.nodeViewSerializer,
-    colourScheme = _ref.colourScheme;
+    colourScheme = _ref.colourScheme,
+    newDoc = _ref.newDoc;
   var slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
     return;
@@ -271,5 +277,6 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
 
   // Widget decoration used for deletions as the content is not in the document
   // and we want to display the deleted content with a style.
-  return Decoration.widget(change.fromB, dom, {});
+  var safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
+  return Decoration.widget(safeInsertPos, dom, {});
 };

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

@@ -0,0 +1,23 @@
+import { canInsert } from '@atlaskit/editor-prosemirror/utils';
+
+/**
+ * Find a safe position to insert a deletion slice at the given position.
+ * @param doc
+ * @param pos
+ * @param slice
+ * @returns
+ */
+export function findSafeInsertPos(doc, pos, slice) {
+  if (pos > doc.content.size) {
+    return doc.content.size;
+  }
+  var $pos = doc.resolve(pos);
+  while (!canInsert($pos, slice.content) && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) !== 'paragraph') {
+    var _slice$content$firstC;
+    if ($pos.pos + 1 > doc.content.size) {
+      break;
+    }
+    $pos = doc.resolve($pos.pos + 1);
+  }
+  return $pos.pos;
+}

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

@@ -27,7 +27,8 @@ interface DeletedContentDecorationProps {
     change: Change;
     colourScheme?: 'standard' | 'traditional';
     doc: PMNode;
+    newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }
-export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, }: DeletedContentDecorationProps) => Decoration | undefined;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, newDoc, }: DeletedContentDecorationProps) => Decoration | undefined;
 export {};

package/dist/types/pm-plugins/findSafeInsertPos.d.ts

@@ -0,0 +1,9 @@
+import type { Node as PMNode, Slice } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Find a safe position to insert a deletion slice at the given position.
+ * @param doc
+ * @param pos
+ * @param slice
+ * @returns
+ */
+export declare function findSafeInsertPos(doc: PMNode, pos: number, slice: Slice): number;

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

@@ -27,7 +27,8 @@ interface DeletedContentDecorationProps {
     change: Change;
     colourScheme?: 'standard' | 'traditional';
     doc: PMNode;
+    newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }
-export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, }: DeletedContentDecorationProps) => Decoration | undefined;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, newDoc, }: DeletedContentDecorationProps) => Decoration | undefined;
 export {};

package/dist/types-ts4.5/pm-plugins/findSafeInsertPos.d.ts

@@ -0,0 +1,9 @@
+import type { Node as PMNode, Slice } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Find a safe position to insert a deletion slice at the given position.
+ * @param doc
+ * @param pos
+ * @param slice
+ * @returns
+ */
+export declare function findSafeInsertPos(doc: PMNode, pos: number, slice: Slice): number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "3.1.0",
+	"version": "3.1.2",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,7 +37,7 @@
 		"prosemirror-changeset": "^2.2.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.14.0",
+		"@atlaskit/editor-common": "^110.17.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {