@atlaskit/editor-plugin-show-diff 2.0.0 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 2.1.1
+
+### Patch Changes
+
+- [`c6b6ef91296ca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c6b6ef91296ca) -
+  [ux] Better support for block nodes for deleted diffs.
+- Updated dependencies
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5eadb7f870272`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5eadb7f870272) -
+  [ux] Adds a new plugin configuration to adjust the styling scheme for diffs. By default it will
+  use standard, but traditional (for green + red) is also available.
+
 ## 2.0.0
 
 ### Patch 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 : ['table', 'tableRow', 'tableHeader', 'tableCell', 'paragraph']);
+    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['paragraph']);
   }
 
   /**
@@ -83,20 +83,49 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
   }, {
     key: "tryCreateNodeView",
     value: function tryCreateNodeView(targetNode) {
-      var _this$nodeViews;
+      var _this$nodeViews,
+        _this = this;
       if (!this.editorView) {
         return null;
       }
       var constructor = (_this$nodeViews = this.nodeViews) === null || _this$nodeViews === void 0 ? void 0 : _this$nodeViews[targetNode.type.name];
-      if (!constructor) {
-        return null;
-      }
       if (this.nodeViewBlocklist.has(targetNode.type.name)) {
         return null;
       }
-      return constructor(targetNode, this.editorView, function () {
-        return 0;
-      }, [], {});
+      if (!constructor) {
+        var _targetNode$type$spec, _targetNode$type$spec2;
+        if (targetNode.isInline) {
+          return null;
+        }
+        var toDOMResult = (_targetNode$type$spec = (_targetNode$type$spec2 = targetNode.type.spec).toDOM) === null || _targetNode$type$spec === void 0 ? void 0 : _targetNode$type$spec.call(_targetNode$type$spec2, targetNode);
+        if (!toDOMResult) {
+          return null;
+        }
+        var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOMResult),
+          _dom = _DOMSerializer$render.dom,
+          _contentDOM = _DOMSerializer$render.contentDOM;
+        if (_dom instanceof HTMLElement) {
+          if (targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
+            return this.serializeFragment(targetNode.content);
+          }
+
+          // Iteratively populate children
+          targetNode.children.forEach(function (child) {
+            _contentDOM === null || _contentDOM === void 0 || _contentDOM.append(_this.tryCreateNodeView(child) || _this.serializeNode(child));
+          });
+        }
+        return _dom;
+      }
+      var _constructor = constructor(targetNode, this.editorView, function () {
+          return 0;
+        }, [], {}),
+        dom = _constructor.dom,
+        contentDOM = _constructor.contentDOM;
+      // Iteratively populate children
+      targetNode.children.forEach(function (child) {
+        contentDOM === null || contentDOM === void 0 || contentDOM.append(_this.tryCreateNodeView(child) || _this.serializeNode(child));
+      });
+      return dom;
     }
 
     /**

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

@@ -15,7 +15,8 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 var calculateDiffDecorations = exports.calculateDiffDecorations = function calculateDiffDecorations(_ref) {
   var state = _ref.state,
     pluginState = _ref.pluginState,
-    nodeViewSerializer = _ref.nodeViewSerializer;
+    nodeViewSerializer = _ref.nodeViewSerializer,
+    colourScheme = _ref.colourScheme;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -49,13 +50,14 @@ var calculateDiffDecorations = exports.calculateDiffDecorations = function calcu
   var decorations = [];
   changes.forEach(function (change) {
     if (change.inserted.length > 0) {
-      decorations.push((0, _decorations.createInlineChangedDecoration)(change));
+      decorations.push((0, _decorations.createInlineChangedDecoration)(change, colourScheme));
     }
     if (change.deleted.length > 0) {
       var decoration = (0, _decorations.createDeletedContentDecoration)({
         change: change,
         doc: originalDoc,
-        nodeViewSerializer: nodeViewSerializer
+        nodeViewSerializer: nodeViewSerializer,
+        colourScheme: colourScheme
       });
       if (decoration) {
         decorations.push(decoration);
@@ -63,7 +65,7 @@ var calculateDiffDecorations = exports.calculateDiffDecorations = function calcu
     }
   });
   (0, _markDecorations.getMarkChangeRanges)(steps).forEach(function (change) {
-    decorations.push((0, _decorations.createInlineChangedDecoration)(change));
+    decorations.push((0, _decorations.createInlineChangedDecoration)(change, colourScheme));
   });
   return _view.DecorationSet.empty.add(tr.doc, decorations);
 };

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

@@ -6,22 +6,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.createInlineChangedDecoration = exports.createDeletedContentDecoration = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
-var style = (0, _lazyNodeView.convertToInlineCss)({
+var editingStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
 });
+var traditionalInsertStyle = (0, _lazyNodeView.convertToInlineCss)({
+  background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'solid',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
+});
+
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(change) {
+var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(change, colourScheme) {
   return _view.Decoration.inline(change.fromB, change.toB, {
-    style: style,
+    style: colourScheme === 'traditional' ? traditionalInsertStyle : editingStyle,
     'data-testid': 'show-diff-changed-decoration'
   }, {});
 };
@@ -40,10 +48,32 @@ var deletedContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
   pointerEvents: 'none',
   zIndex: 1
 });
+var deletedTraditionalContentStyle = (0, _lazyNodeView.convertToInlineCss)({
+  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 1
+});
+var deletedTraditionalContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-border-accent-red, #E2483D)"),
+  pointerEvents: 'none',
+  zIndex: 1
+});
+var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colourScheme) {
+  return colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+};
+var getDeletedContentStyle = function getDeletedContentStyle(colourScheme) {
+  return colourScheme === 'traditional' ? deletedTraditionalContentStyle : deletedContentStyle;
+};
 var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,
     doc = _ref.doc,
-    nodeViewSerializer = _ref.nodeViewSerializer;
+    nodeViewSerializer = _ref.nodeViewSerializer,
+    colourScheme = _ref.colourScheme;
   var slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
     return;
@@ -60,7 +90,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
 
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
-  dom.setAttribute('style', deletedContentStyle);
+  dom.setAttribute('style', getDeletedContentStyle(colourScheme));
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -75,7 +105,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
       wrapper.style.position = 'relative';
       wrapper.style.width = 'fit-content';
       var strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', deletedContentStyleUnbounded);
+      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
       wrapper.append(strikethrough);
       return wrapper;
     };
@@ -90,7 +120,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
             targetNode = node;
             dom.append(lineBreak);
             var wrapper = createWrapperWithStrikethrough();
-            wrapper.append(childNodeView.dom);
+            wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
@@ -113,7 +143,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
       if (handleMultipleChildNodes(node)) {
         return;
       }
-      targetNode = node.content.content[0];
+      targetNode = node;
       fallbackSerialization = function fallbackSerialization() {
         return serializer.serializeFragment(node.content);
       };
@@ -137,7 +167,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
       if (handleMultipleChildNodes(node)) {
         return;
       }
-      targetNode = node.content.content[0] || node;
+      targetNode = node;
       fallbackSerialization = function fallbackSerialization() {
         return serializer.serializeNode(node);
       };
@@ -146,9 +176,13 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     // Try to create node view, fallback to serialization
     var nodeView = serializer.tryCreateNodeView(targetNode);
     if (nodeView) {
-      var wrapper = createWrapperWithStrikethrough();
-      wrapper.append(nodeView.dom);
-      dom.append(wrapper);
+      if (targetNode.isInline) {
+        var wrapper = createWrapperWithStrikethrough();
+        wrapper.append(nodeView);
+        dom.append(wrapper);
+      } else {
+        dom.append(nodeView);
+      }
     } 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;

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

@@ -48,7 +48,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config) {
             var decorations = (0, _calculateDiffDecorations.calculateDiffDecorations)({
               state: newState,
               pluginState: newPluginState,
-              nodeViewSerializer: nodeViewSerializer
+              nodeViewSerializer: nodeViewSerializer,
+              colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme
             });
             // Update the decorations
             newPluginState.decorations = decorations;

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 : ['table', 'tableRow', 'tableHeader', 'tableCell', 'paragraph']);
+    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['paragraph']);
   }
 
   /**
@@ -74,13 +74,43 @@ export class NodeViewSerializer {
       return null;
     }
     const constructor = (_this$nodeViews = this.nodeViews) === null || _this$nodeViews === void 0 ? void 0 : _this$nodeViews[targetNode.type.name];
-    if (!constructor) {
-      return null;
-    }
     if (this.nodeViewBlocklist.has(targetNode.type.name)) {
       return null;
     }
-    return constructor(targetNode, this.editorView, () => 0, [], {});
+    if (!constructor) {
+      var _targetNode$type$spec, _targetNode$type$spec2;
+      if (targetNode.isInline) {
+        return null;
+      }
+      const toDOMResult = (_targetNode$type$spec = (_targetNode$type$spec2 = targetNode.type.spec).toDOM) === null || _targetNode$type$spec === void 0 ? void 0 : _targetNode$type$spec.call(_targetNode$type$spec2, targetNode);
+      if (!toDOMResult) {
+        return null;
+      }
+      const {
+        dom,
+        contentDOM
+      } = DOMSerializer.renderSpec(document, toDOMResult);
+      if (dom instanceof HTMLElement) {
+        if (targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
+          return this.serializeFragment(targetNode.content);
+        }
+
+        // Iteratively populate children
+        targetNode.children.forEach(child => {
+          contentDOM === null || contentDOM === void 0 ? void 0 : contentDOM.append(this.tryCreateNodeView(child) || this.serializeNode(child));
+        });
+      }
+      return dom;
+    }
+    const {
+      dom,
+      contentDOM
+    } = constructor(targetNode, this.editorView, () => 0, [], {});
+    // Iteratively populate children
+    targetNode.children.forEach(child => {
+      contentDOM === null || contentDOM === void 0 ? void 0 : contentDOM.append(this.tryCreateNodeView(child) || this.serializeNode(child));
+    });
+    return dom;
   }
 
   /**

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

@@ -6,7 +6,8 @@ import { getMarkChangeRanges } from './markDecorations';
 export const calculateDiffDecorations = ({
   state,
   pluginState,
-  nodeViewSerializer
+  nodeViewSerializer,
+  colourScheme
 }) => {
   const {
     originalDoc,
@@ -36,13 +37,14 @@ export const calculateDiffDecorations = ({
   const decorations = [];
   changes.forEach(change => {
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration(change));
+      decorations.push(createInlineChangedDecoration(change, colourScheme));
     }
     if (change.deleted.length > 0) {
       const decoration = createDeletedContentDecoration({
         change,
         doc: originalDoc,
-        nodeViewSerializer
+        nodeViewSerializer,
+        colourScheme
       });
       if (decoration) {
         decorations.push(decoration);
@@ -50,7 +52,7 @@ export const calculateDiffDecorations = ({
     }
   });
   getMarkChangeRanges(steps).forEach(change => {
-    decorations.push(createInlineChangedDecoration(change));
+    decorations.push(createInlineChangedDecoration(change, colourScheme));
   });
   return DecorationSet.empty.add(tr.doc, decorations);
 };

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

@@ -1,20 +1,28 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-const style = convertToInlineCss({
+const editingStyle = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
 });
+const traditionalInsertStyle = convertToInlineCss({
+  background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'solid',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
+});
+
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export const createInlineChangedDecoration = change => Decoration.inline(change.fromB, change.toB, {
-  style,
+export const createInlineChangedDecoration = (change, colourScheme) => Decoration.inline(change.fromB, change.toB, {
+  style: colourScheme === 'traditional' ? traditionalInsertStyle : editingStyle,
   'data-testid': 'show-diff-changed-decoration'
 }, {});
 const deletedContentStyle = convertToInlineCss({
@@ -32,10 +40,28 @@ const deletedContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
+const deletedTraditionalContentStyle = convertToInlineCss({
+  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 1
+});
+const deletedTraditionalContentStyleUnbounded = convertToInlineCss({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: `1px solid ${"var(--ds-border-accent-red, #E2483D)"}`,
+  pointerEvents: 'none',
+  zIndex: 1
+});
+const getDeletedContentStyleUnbounded = colourScheme => colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+const getDeletedContentStyle = colourScheme => colourScheme === 'traditional' ? deletedTraditionalContentStyle : deletedContentStyle;
 export const createDeletedContentDecoration = ({
   change,
   doc,
-  nodeViewSerializer
+  nodeViewSerializer,
+  colourScheme
 }) => {
   const slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
@@ -49,7 +75,7 @@ export const createDeletedContentDecoration = ({
 
   // For non-table content, use the existing span wrapper approach
   const dom = document.createElement('span');
-  dom.setAttribute('style', deletedContentStyle);
+  dom.setAttribute('style', getDeletedContentStyle(colourScheme));
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -64,7 +90,7 @@ export const createDeletedContentDecoration = ({
       wrapper.style.position = 'relative';
       wrapper.style.width = 'fit-content';
       const strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', deletedContentStyleUnbounded);
+      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
       wrapper.append(strikethrough);
       return wrapper;
     };
@@ -79,7 +105,7 @@ export const createDeletedContentDecoration = ({
             targetNode = node;
             dom.append(lineBreak);
             const wrapper = createWrapperWithStrikethrough();
-            wrapper.append(childNodeView.dom);
+            wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
@@ -102,7 +128,7 @@ export const createDeletedContentDecoration = ({
       if (handleMultipleChildNodes(node)) {
         return;
       }
-      targetNode = node.content.content[0];
+      targetNode = node;
       fallbackSerialization = () => serializer.serializeFragment(node.content);
     } else if (isLast && slice.content.childCount === 2) {
       if (handleMultipleChildNodes(node)) {
@@ -124,16 +150,20 @@ export const createDeletedContentDecoration = ({
       if (handleMultipleChildNodes(node)) {
         return;
       }
-      targetNode = node.content.content[0] || node;
+      targetNode = node;
       fallbackSerialization = () => serializer.serializeNode(node);
     }
 
     // Try to create node view, fallback to serialization
     const nodeView = serializer.tryCreateNodeView(targetNode);
     if (nodeView) {
-      const wrapper = createWrapperWithStrikethrough();
-      wrapper.append(nodeView.dom);
-      dom.append(wrapper);
+      if (targetNode.isInline) {
+        const wrapper = createWrapperWithStrikethrough();
+        wrapper.append(nodeView);
+        dom.append(wrapper);
+      } else {
+        dom.append(nodeView);
+      }
     } 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;

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

@@ -40,7 +40,8 @@ export const createPlugin = config => {
             const decorations = calculateDiffDecorations({
               state: newState,
               pluginState: newPluginState,
-              nodeViewSerializer
+              nodeViewSerializer,
+              colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme
             });
             // Update the decorations
             newPluginState.decorations = decorations;

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 : ['table', 'tableRow', 'tableHeader', 'tableCell', 'paragraph']);
+    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['paragraph']);
   }
 
   /**
@@ -76,20 +76,49 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
   }, {
     key: "tryCreateNodeView",
     value: function tryCreateNodeView(targetNode) {
-      var _this$nodeViews;
+      var _this$nodeViews,
+        _this = this;
       if (!this.editorView) {
         return null;
       }
       var constructor = (_this$nodeViews = this.nodeViews) === null || _this$nodeViews === void 0 ? void 0 : _this$nodeViews[targetNode.type.name];
-      if (!constructor) {
-        return null;
-      }
       if (this.nodeViewBlocklist.has(targetNode.type.name)) {
         return null;
       }
-      return constructor(targetNode, this.editorView, function () {
-        return 0;
-      }, [], {});
+      if (!constructor) {
+        var _targetNode$type$spec, _targetNode$type$spec2;
+        if (targetNode.isInline) {
+          return null;
+        }
+        var toDOMResult = (_targetNode$type$spec = (_targetNode$type$spec2 = targetNode.type.spec).toDOM) === null || _targetNode$type$spec === void 0 ? void 0 : _targetNode$type$spec.call(_targetNode$type$spec2, targetNode);
+        if (!toDOMResult) {
+          return null;
+        }
+        var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOMResult),
+          _dom = _DOMSerializer$render.dom,
+          _contentDOM = _DOMSerializer$render.contentDOM;
+        if (_dom instanceof HTMLElement) {
+          if (targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
+            return this.serializeFragment(targetNode.content);
+          }
+
+          // Iteratively populate children
+          targetNode.children.forEach(function (child) {
+            _contentDOM === null || _contentDOM === void 0 || _contentDOM.append(_this.tryCreateNodeView(child) || _this.serializeNode(child));
+          });
+        }
+        return _dom;
+      }
+      var _constructor = constructor(targetNode, this.editorView, function () {
+          return 0;
+        }, [], {}),
+        dom = _constructor.dom,
+        contentDOM = _constructor.contentDOM;
+      // Iteratively populate children
+      targetNode.children.forEach(function (child) {
+        contentDOM === null || contentDOM === void 0 || contentDOM.append(_this.tryCreateNodeView(child) || _this.serializeNode(child));
+      });
+      return dom;
     }
 
     /**

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

@@ -9,7 +9,8 @@ import { getMarkChangeRanges } from './markDecorations';
 export var calculateDiffDecorations = function calculateDiffDecorations(_ref) {
   var state = _ref.state,
     pluginState = _ref.pluginState,
-    nodeViewSerializer = _ref.nodeViewSerializer;
+    nodeViewSerializer = _ref.nodeViewSerializer,
+    colourScheme = _ref.colourScheme;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -43,13 +44,14 @@ export var calculateDiffDecorations = function calculateDiffDecorations(_ref) {
   var decorations = [];
   changes.forEach(function (change) {
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration(change));
+      decorations.push(createInlineChangedDecoration(change, colourScheme));
     }
     if (change.deleted.length > 0) {
       var decoration = createDeletedContentDecoration({
         change: change,
         doc: originalDoc,
-        nodeViewSerializer: nodeViewSerializer
+        nodeViewSerializer: nodeViewSerializer,
+        colourScheme: colourScheme
       });
       if (decoration) {
         decorations.push(decoration);
@@ -57,7 +59,7 @@ export var calculateDiffDecorations = function calculateDiffDecorations(_ref) {
     }
   });
   getMarkChangeRanges(steps).forEach(function (change) {
-    decorations.push(createInlineChangedDecoration(change));
+    decorations.push(createInlineChangedDecoration(change, colourScheme));
   });
   return DecorationSet.empty.add(tr.doc, decorations);
 };

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

@@ -1,21 +1,29 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-var style = convertToInlineCss({
+var editingStyle = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
 });
+var traditionalInsertStyle = convertToInlineCss({
+  background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'solid',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
+});
+
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export var createInlineChangedDecoration = function createInlineChangedDecoration(change) {
+export var createInlineChangedDecoration = function createInlineChangedDecoration(change, colourScheme) {
   return Decoration.inline(change.fromB, change.toB, {
-    style: style,
+    style: colourScheme === 'traditional' ? traditionalInsertStyle : editingStyle,
     'data-testid': 'show-diff-changed-decoration'
   }, {});
 };
@@ -34,10 +42,32 @@ var deletedContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
+var deletedTraditionalContentStyle = convertToInlineCss({
+  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 1
+});
+var deletedTraditionalContentStyleUnbounded = convertToInlineCss({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-border-accent-red, #E2483D)"),
+  pointerEvents: 'none',
+  zIndex: 1
+});
+var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colourScheme) {
+  return colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+};
+var getDeletedContentStyle = function getDeletedContentStyle(colourScheme) {
+  return colourScheme === 'traditional' ? deletedTraditionalContentStyle : deletedContentStyle;
+};
 export var createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,
     doc = _ref.doc,
-    nodeViewSerializer = _ref.nodeViewSerializer;
+    nodeViewSerializer = _ref.nodeViewSerializer,
+    colourScheme = _ref.colourScheme;
   var slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
     return;
@@ -54,7 +84,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
 
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
-  dom.setAttribute('style', deletedContentStyle);
+  dom.setAttribute('style', getDeletedContentStyle(colourScheme));
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -69,7 +99,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
       wrapper.style.position = 'relative';
       wrapper.style.width = 'fit-content';
       var strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', deletedContentStyleUnbounded);
+      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
       wrapper.append(strikethrough);
       return wrapper;
     };
@@ -84,7 +114,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
             targetNode = node;
             dom.append(lineBreak);
             var wrapper = createWrapperWithStrikethrough();
-            wrapper.append(childNodeView.dom);
+            wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
@@ -107,7 +137,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
       if (handleMultipleChildNodes(node)) {
         return;
       }
-      targetNode = node.content.content[0];
+      targetNode = node;
       fallbackSerialization = function fallbackSerialization() {
         return serializer.serializeFragment(node.content);
       };
@@ -131,7 +161,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
       if (handleMultipleChildNodes(node)) {
         return;
       }
-      targetNode = node.content.content[0] || node;
+      targetNode = node;
       fallbackSerialization = function fallbackSerialization() {
         return serializer.serializeNode(node);
       };
@@ -140,9 +170,13 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
     // Try to create node view, fallback to serialization
     var nodeView = serializer.tryCreateNodeView(targetNode);
     if (nodeView) {
-      var wrapper = createWrapperWithStrikethrough();
-      wrapper.append(nodeView.dom);
-      dom.append(wrapper);
+      if (targetNode.isInline) {
+        var wrapper = createWrapperWithStrikethrough();
+        wrapper.append(nodeView);
+        dom.append(wrapper);
+      } else {
+        dom.append(nodeView);
+      }
     } 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;

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

@@ -41,7 +41,8 @@ export var createPlugin = function createPlugin(config) {
             var decorations = calculateDiffDecorations({
               state: newState,
               pluginState: newPluginState,
-              nodeViewSerializer: nodeViewSerializer
+              nodeViewSerializer: nodeViewSerializer,
+              colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme
             });
             // Update the decorations
             newPluginState.decorations = decorations;

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

@@ -55,7 +55,7 @@ export declare class NodeViewSerializer {
      * Returns `null` when there is no `EditorView`, no constructor for the node type,
      * or the node type is blocklisted. Otherwise returns the constructed node view instance.
      */
-    tryCreateNodeView(targetNode: PMNode): import("prosemirror-view").NodeView | null;
+    tryCreateNodeView(targetNode: PMNode): Node | null;
     /**
      * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
      */

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

@@ -3,7 +3,8 @@ import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ShowDiffPluginState } from './main';
 import type { NodeViewSerializer } from './NodeViewSerializer';
-export declare const calculateDiffDecorations: ({ state, pluginState, nodeViewSerializer, }: {
+export declare const calculateDiffDecorations: ({ state, pluginState, nodeViewSerializer, colourScheme, }: {
+    colourScheme?: "standard" | "traditional";
     nodeViewSerializer: NodeViewSerializer;
     pluginState: Omit<ShowDiffPluginState, "decorations">;
     state: EditorState;

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

@@ -11,11 +11,12 @@ import type { NodeViewSerializer } from './NodeViewSerializer';
 export declare const createInlineChangedDecoration: (change: {
     fromB: number;
     toB: number;
-}) => Decoration;
+}, colourScheme?: "standard" | "traditional") => Decoration;
 interface DeletedContentDecorationProps {
     change: Change;
+    colourScheme?: 'standard' | 'traditional';
     doc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }
-export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, }: DeletedContentDecorationProps) => Decoration | undefined;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, }: DeletedContentDecorationProps) => Decoration | undefined;
 export {};

package/dist/types/showDiffPluginType.d.ts

@@ -4,6 +4,12 @@ import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
 export type DiffParams = {
+    /**
+     * Color scheme to use for displaying diffs.
+     * 'standard' (default) uses purple for highlighting changes
+     * 'traditional' uses green for additions and red for deletions
+     */
+    colourScheme?: 'standard' | 'traditional';
     originalDoc: JSONDocNode;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor

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

@@ -55,7 +55,7 @@ export declare class NodeViewSerializer {
      * Returns `null` when there is no `EditorView`, no constructor for the node type,
      * or the node type is blocklisted. Otherwise returns the constructed node view instance.
      */
-    tryCreateNodeView(targetNode: PMNode): import("prosemirror-view").NodeView | null;
+    tryCreateNodeView(targetNode: PMNode): Node | null;
     /**
      * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
      */

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

@@ -3,7 +3,8 @@ import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ShowDiffPluginState } from './main';
 import type { NodeViewSerializer } from './NodeViewSerializer';
-export declare const calculateDiffDecorations: ({ state, pluginState, nodeViewSerializer, }: {
+export declare const calculateDiffDecorations: ({ state, pluginState, nodeViewSerializer, colourScheme, }: {
+    colourScheme?: "standard" | "traditional";
     nodeViewSerializer: NodeViewSerializer;
     pluginState: Omit<ShowDiffPluginState, "decorations">;
     state: EditorState;

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

@@ -11,11 +11,12 @@ import type { NodeViewSerializer } from './NodeViewSerializer';
 export declare const createInlineChangedDecoration: (change: {
     fromB: number;
     toB: number;
-}) => Decoration;
+}, colourScheme?: "standard" | "traditional") => Decoration;
 interface DeletedContentDecorationProps {
     change: Change;
+    colourScheme?: 'standard' | 'traditional';
     doc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }
-export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, }: DeletedContentDecorationProps) => Decoration | undefined;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, }: DeletedContentDecorationProps) => Decoration | undefined;
 export {};

package/dist/types-ts4.5/showDiffPluginType.d.ts

@@ -4,6 +4,12 @@ import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
 export type DiffParams = {
+    /**
+     * Color scheme to use for displaying diffs.
+     * 'standard' (default) uses purple for highlighting changes
+     * 'traditional' uses green for additions and red for deletions
+     */
+    colourScheme?: 'standard' | 'traditional';
     originalDoc: JSONDocNode;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "2.0.0",
+	"version": "2.1.1",
 	"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": "^109.0.0",
+		"@atlaskit/editor-common": "^109.7.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {