@atlaskit/editor-plugin-show-diff 0.2.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.2.1
+
+### Patch Changes
+
+- [`f7c9ea51bb613`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f7c9ea51bb613) -
+  [EDITOR-1395] dnd interferes with diff
+- Updated dependencies
+
 ## 0.2.0
 
 ### Minor Changes

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

@@ -53,7 +53,7 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
         editorView: params.editorView
       });
     }
-    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['tableRow', 'table', 'paragraph']);
+    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['table', 'tableRow', 'tableHeader', 'tableCell', 'paragraph']);
   }
 
   /**
@@ -122,5 +122,28 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
       }
       return this.serializer.serializeFragment(fragment);
     }
+
+    /**
+     * Returns a copy of the current node view blocklist.
+     */
+  }, {
+    key: "getNodeViewBlocklist",
+    value: function getNodeViewBlocklist() {
+      return new Set(this.nodeViewBlocklist);
+    }
+
+    /**
+     * Returns a filtered copy of the node view blocklist, excluding specified node types.
+     * @param excludeTypes - Array of node type names to exclude from the blocklist
+     */
+  }, {
+    key: "getFilteredNodeViewBlocklist",
+    value: function getFilteredNodeViewBlocklist(excludeTypes) {
+      var filtered = new Set(this.nodeViewBlocklist);
+      excludeTypes.forEach(function (type) {
+        return filtered.delete(type);
+      });
+      return filtered;
+    }
   }]);
 }();

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

@@ -40,29 +40,34 @@ var deletedContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
   pointerEvents: 'none',
   zIndex: 1
 });
-
-/**
- * Creates a widget to represent the deleted content in the editor
- *
- * @param props.change Changeset "change" containing information about the change content + range
- * @param props.doc Baseline doc to compare against
- * @param props.tr The relevant transaction this decoration is being created against
- * @returns Prosemirror widget decoration
- */
 var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,
     doc = _ref.doc,
     nodeViewSerializer = _ref.nodeViewSerializer;
+  var slice = doc.slice(change.fromA, change.toA);
+  if (slice.content.content.length === 0) {
+    return;
+  }
+  var isTableContent = slice.content.content.some(function () {
+    return slice.content.content.some(function (siblingNode) {
+      return ['tableHeader', 'tableCell', 'tableRow'].includes(siblingNode.type.name);
+    });
+  });
+  if (isTableContent) {
+    return;
+  }
+  var serializer = nodeViewSerializer;
+
+  // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
   dom.setAttribute('style', deletedContentStyle);
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
    * and if it's the first or last content, we go in however many the sliced Open
-   * or sliced End depth is and match only the content and not with the entire node.
+   * or sliced End depth is and match only the entire node.
    */
-  var slice = doc.slice(change.fromA, change.toA);
-  var serializer = nodeViewSerializer;
+
   slice.content.forEach(function (node) {
     // Create a wrapper for each node with strikethrough
     var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
@@ -144,6 +149,9 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
       var wrapper = createWrapperWithStrikethrough();
       wrapper.append(nodeView.dom);
       dom.append(wrapper);
+    } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(targetNode.type.name)) {
+      // Skip the case where the node is a paragraph or table row that way it can still be rendered and delete the entire table
+      return;
     } else {
       dom.append(fallbackSerialization());
     }

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

@@ -58,11 +58,14 @@ var calculateDecorations = function calculateDecorations(_ref) {
       decorations.push((0, _decorations.createInlineChangedDecoration)(change));
     }
     if (change.deleted.length > 0) {
-      decorations.push((0, _decorations.createDeletedContentDecoration)({
+      var decoration = (0, _decorations.createDeletedContentDecoration)({
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer
-      }));
+      });
+      if (decoration) {
+        decorations.push(decoration);
+      }
     }
   });
   (0, _markDecorations.getMarkChangeRanges)(steps).forEach(function (change) {

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

@@ -43,7 +43,7 @@ export class NodeViewSerializer {
         editorView: params.editorView
       });
     }
-    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['tableRow', 'table', 'paragraph']);
+    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['table', 'tableRow', 'tableHeader', 'tableCell', 'paragraph']);
   }
 
   /**
@@ -102,4 +102,21 @@ export class NodeViewSerializer {
     }
     return this.serializer.serializeFragment(fragment);
   }
+
+  /**
+   * Returns a copy of the current node view blocklist.
+   */
+  getNodeViewBlocklist() {
+    return new Set(this.nodeViewBlocklist);
+  }
+
+  /**
+   * Returns a filtered copy of the node view blocklist, excluding specified node types.
+   * @param excludeTypes - Array of node type names to exclude from the blocklist
+   */
+  getFilteredNodeViewBlocklist(excludeTypes) {
+    const filtered = new Set(this.nodeViewBlocklist);
+    excludeTypes.forEach(type => filtered.delete(type));
+    return filtered;
+  }
 }

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

@@ -32,30 +32,31 @@ const deletedContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
-
-/**
- * Creates a widget to represent the deleted content in the editor
- *
- * @param props.change Changeset "change" containing information about the change content + range
- * @param props.doc Baseline doc to compare against
- * @param props.tr The relevant transaction this decoration is being created against
- * @returns Prosemirror widget decoration
- */
 export const createDeletedContentDecoration = ({
   change,
   doc,
   nodeViewSerializer
 }) => {
+  const slice = doc.slice(change.fromA, change.toA);
+  if (slice.content.content.length === 0) {
+    return;
+  }
+  const isTableContent = slice.content.content.some(() => slice.content.content.some(siblingNode => ['tableHeader', 'tableCell', 'tableRow'].includes(siblingNode.type.name)));
+  if (isTableContent) {
+    return;
+  }
+  const serializer = nodeViewSerializer;
+
+  // For non-table content, use the existing span wrapper approach
   const dom = document.createElement('span');
   dom.setAttribute('style', deletedContentStyle);
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
    * and if it's the first or last content, we go in however many the sliced Open
-   * or sliced End depth is and match only the content and not with the entire node.
+   * or sliced End depth is and match only the entire node.
    */
-  const slice = doc.slice(change.fromA, change.toA);
-  const serializer = nodeViewSerializer;
+
   slice.content.forEach(node => {
     // Create a wrapper for each node with strikethrough
     const createWrapperWithStrikethrough = () => {
@@ -133,6 +134,9 @@ export const createDeletedContentDecoration = ({
       const wrapper = createWrapperWithStrikethrough();
       wrapper.append(nodeView.dom);
       dom.append(wrapper);
+    } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(targetNode.type.name)) {
+      // Skip the case where the node is a paragraph or table row that way it can still be rendered and delete the entire table
+      return;
     } else {
       dom.append(fallbackSerialization());
     }

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

@@ -42,11 +42,14 @@ const calculateDecorations = ({
       decorations.push(createInlineChangedDecoration(change));
     }
     if (change.deleted.length > 0) {
-      decorations.push(createDeletedContentDecoration({
+      const decoration = createDeletedContentDecoration({
         change,
         doc: originalDoc,
         nodeViewSerializer
-      }));
+      });
+      if (decoration) {
+        decorations.push(decoration);
+      }
     }
   });
   getMarkChangeRanges(steps).forEach(change => {

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

@@ -46,7 +46,7 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
         editorView: params.editorView
       });
     }
-    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['tableRow', 'table', 'paragraph']);
+    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['table', 'tableRow', 'tableHeader', 'tableCell', 'paragraph']);
   }
 
   /**
@@ -115,5 +115,28 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
       }
       return this.serializer.serializeFragment(fragment);
     }
+
+    /**
+     * Returns a copy of the current node view blocklist.
+     */
+  }, {
+    key: "getNodeViewBlocklist",
+    value: function getNodeViewBlocklist() {
+      return new Set(this.nodeViewBlocklist);
+    }
+
+    /**
+     * Returns a filtered copy of the node view blocklist, excluding specified node types.
+     * @param excludeTypes - Array of node type names to exclude from the blocklist
+     */
+  }, {
+    key: "getFilteredNodeViewBlocklist",
+    value: function getFilteredNodeViewBlocklist(excludeTypes) {
+      var filtered = new Set(this.nodeViewBlocklist);
+      excludeTypes.forEach(function (type) {
+        return filtered.delete(type);
+      });
+      return filtered;
+    }
   }]);
 }();

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

@@ -34,29 +34,34 @@ var deletedContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
-
-/**
- * Creates a widget to represent the deleted content in the editor
- *
- * @param props.change Changeset "change" containing information about the change content + range
- * @param props.doc Baseline doc to compare against
- * @param props.tr The relevant transaction this decoration is being created against
- * @returns Prosemirror widget decoration
- */
 export var createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,
     doc = _ref.doc,
     nodeViewSerializer = _ref.nodeViewSerializer;
+  var slice = doc.slice(change.fromA, change.toA);
+  if (slice.content.content.length === 0) {
+    return;
+  }
+  var isTableContent = slice.content.content.some(function () {
+    return slice.content.content.some(function (siblingNode) {
+      return ['tableHeader', 'tableCell', 'tableRow'].includes(siblingNode.type.name);
+    });
+  });
+  if (isTableContent) {
+    return;
+  }
+  var serializer = nodeViewSerializer;
+
+  // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
   dom.setAttribute('style', deletedContentStyle);
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
    * and if it's the first or last content, we go in however many the sliced Open
-   * or sliced End depth is and match only the content and not with the entire node.
+   * or sliced End depth is and match only the entire node.
    */
-  var slice = doc.slice(change.fromA, change.toA);
-  var serializer = nodeViewSerializer;
+
   slice.content.forEach(function (node) {
     // Create a wrapper for each node with strikethrough
     var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
@@ -138,6 +143,9 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
       var wrapper = createWrapperWithStrikethrough();
       wrapper.append(nodeView.dom);
       dom.append(wrapper);
+    } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(targetNode.type.name)) {
+      // Skip the case where the node is a paragraph or table row that way it can still be rendered and delete the entire table
+      return;
     } else {
       dom.append(fallbackSerialization());
     }

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

@@ -52,11 +52,14 @@ var calculateDecorations = function calculateDecorations(_ref) {
       decorations.push(createInlineChangedDecoration(change));
     }
     if (change.deleted.length > 0) {
-      decorations.push(createDeletedContentDecoration({
+      var decoration = createDeletedContentDecoration({
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer
-      }));
+      });
+      if (decoration) {
+        decorations.push(decoration);
+      }
     }
   });
   getMarkChangeRanges(steps).forEach(function (change) {

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

@@ -64,4 +64,13 @@ export declare class NodeViewSerializer {
      * Serializes a fragment to a `DocumentFragment` using the schema's `DOMSerializer`.
      */
     serializeFragment(fragment: Fragment): DocumentFragment | HTMLElement;
+    /**
+     * Returns a copy of the current node view blocklist.
+     */
+    getNodeViewBlocklist(): Set<string>;
+    /**
+     * Returns a filtered copy of the node view blocklist, excluding specified node types.
+     * @param excludeTypes - Array of node type names to exclude from the blocklist
+     */
+    getFilteredNodeViewBlocklist(excludeTypes: string[]): Set<string>;
 }

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

@@ -17,13 +17,5 @@ interface DeletedContentDecorationProps {
     doc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }
-/**
- * Creates a widget to represent the deleted content in the editor
- *
- * @param props.change Changeset "change" containing information about the change content + range
- * @param props.doc Baseline doc to compare against
- * @param props.tr The relevant transaction this decoration is being created against
- * @returns Prosemirror widget decoration
- */
-export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, }: DeletedContentDecorationProps) => Decoration;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, }: DeletedContentDecorationProps) => Decoration | undefined;
 export {};

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

@@ -64,4 +64,13 @@ export declare class NodeViewSerializer {
      * Serializes a fragment to a `DocumentFragment` using the schema's `DOMSerializer`.
      */
     serializeFragment(fragment: Fragment): DocumentFragment | HTMLElement;
+    /**
+     * Returns a copy of the current node view blocklist.
+     */
+    getNodeViewBlocklist(): Set<string>;
+    /**
+     * Returns a filtered copy of the node view blocklist, excluding specified node types.
+     * @param excludeTypes - Array of node type names to exclude from the blocklist
+     */
+    getFilteredNodeViewBlocklist(excludeTypes: string[]): Set<string>;
 }

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

@@ -17,13 +17,5 @@ interface DeletedContentDecorationProps {
     doc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }
-/**
- * Creates a widget to represent the deleted content in the editor
- *
- * @param props.change Changeset "change" containing information about the change content + range
- * @param props.doc Baseline doc to compare against
- * @param props.tr The relevant transaction this decoration is being created against
- * @returns Prosemirror widget decoration
- */
-export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, }: DeletedContentDecorationProps) => Decoration;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, }: DeletedContentDecorationProps) => Decoration | undefined;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "0.2.0",
+	"version": "1.0.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 		"prosemirror-changeset": "^2.2.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.33.0",
+		"@atlaskit/editor-common": "^108.0.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {