@atlaskit/editor-plugin-show-diff 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 0.1.3
+
+### Patch Changes
+
+- [`8700ce859da07`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8700ce859da07) -
+  [EDITOR-1249] Added inline node support for show diff
+
+## 0.1.2
+
+### Patch Changes
+
+- [`7fe4c9e51271d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7fe4c9e51271d) -
+  Fix initial show diff after performance fix.
+- [`b2d53a70dbaa5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b2d53a70dbaa5) -
+  Improve show diff performance by storing decorations in state.
+- Updated dependencies
+
 ## 0.1.1
 
 ### Patch Changes

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

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NodeViewSerializer = void 0;
+exports.isEditorViewWithNodeViews = isEditorViewWithNodeViews;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _model = require("@atlaskit/editor-prosemirror/model");
+/**
+ * Utilities for working with ProseMirror node views and DOM serialization within the
+ * Show Diff editor plugin.
+ *
+ * This module centralizes:
+ * - Access to the editor's `nodeViews` registry (when available on `EditorView`)
+ * - Safe attempts to instantiate a node view for a given node, with a blocklist to
+ *   avoid node types that are known to be problematic in this context (e.g. tables)
+ * - Schema-driven serialization of nodes and fragments to DOM via `DOMSerializer`
+ *
+ * The Show Diff decorations leverage this to either render nodes using their
+ * corresponding node view implementation, or fall back to DOM serialization.
+ */
+
+/**
+ * Narrowed `EditorView` that exposes the internal `nodeViews` registry.
+ * Many editor instances provide this, but it's not part of the base type.
+ */
+
+/**
+ * Type guard to detect whether an `EditorView` exposes a `nodeViews` map.
+ */
+function isEditorViewWithNodeViews(view) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return view.nodeViews !== undefined;
+}
+
+/**
+ * Encapsulates DOM serialization and node view access/creation.
+ *
+ * Responsible for:
+ * - Creating a `DOMSerializer` from the provided schema
+ * - Reading `nodeViews` from an `EditorView` (if present) or using an explicit mapping
+ * - Preventing node view creation for blocklisted node types
+ */
+var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
+  function NodeViewSerializer(params) {
+    var _ref, _params$nodeViews, _this$editorView, _params$blocklist;
+    (0, _classCallCheck2.default)(this, NodeViewSerializer);
+    this.serializer = _model.DOMSerializer.fromSchema(params.schema);
+    if (params.editorView && isEditorViewWithNodeViews(params.editorView)) {
+      this.editorView = params.editorView;
+    }
+    this.nodeViews = (_ref = (_params$nodeViews = params.nodeViews) !== null && _params$nodeViews !== void 0 ? _params$nodeViews : (_this$editorView = this.editorView) === null || _this$editorView === void 0 ? void 0 : _this$editorView.nodeViews) !== null && _ref !== void 0 ? _ref : {};
+    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['tableRow', 'table']);
+  }
+
+  /**
+   * Attempts to create a node view for the given node.
+   *
+   * 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.
+   */
+  return (0, _createClass2.default)(NodeViewSerializer, [{
+    key: "tryCreateNodeView",
+    value: function tryCreateNodeView(targetNode) {
+      if (!this.editorView) {
+        return null;
+      }
+      var constructor = 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;
+      }, [], {});
+    }
+
+    /**
+     * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
+     */
+  }, {
+    key: "serializeNode",
+    value: function serializeNode(node) {
+      return this.serializer.serializeNode(node);
+    }
+
+    /**
+     * Serializes a fragment to a `DocumentFragment` using the schema's `DOMSerializer`.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }, {
+    key: "serializeFragment",
+    value: function serializeFragment(fragment) {
+      return this.serializer.serializeFragment(fragment);
+    }
+  }]);
+}();

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createInlineChangedDecoration = exports.createDeletedContentDecoration = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
-var _model = require("@atlaskit/editor-prosemirror/model");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _NodeViewSerializer = require("./NodeViewSerializer");
 var style = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
@@ -14,7 +14,6 @@ var style = (0, _lazyNodeView.convertToInlineCss)({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
 });
-
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -29,7 +28,18 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
 };
 var deletedContentStyle = (0, _lazyNodeView.convertToInlineCss)({
   color: "var(--ds-text-accent-gray, #44546F)",
-  textDecoration: 'line-through'
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 0.6
+});
+var deletedContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-text-accent-gray, #44546F)"),
+  pointerEvents: 'none',
+  zIndex: 1
 });
 
 /**
@@ -43,7 +53,9 @@ var deletedContentStyle = (0, _lazyNodeView.convertToInlineCss)({
 var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,
     doc = _ref.doc,
-    tr = _ref.tr;
+    tr = _ref.tr,
+    editorView = _ref.editorView,
+    nodeViews = _ref.nodeViews;
   var dom = document.createElement('span');
   dom.setAttribute('style', deletedContentStyle);
 
@@ -53,22 +65,94 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
    * or sliced End depth is and match only the content and not with the entire node.
    */
   var slice = doc.slice(change.fromA, change.toA);
+  var nodeViewSerializer = new _NodeViewSerializer.NodeViewSerializer({
+    schema: tr.doc.type.schema,
+    editorView: editorView,
+    nodeViews: nodeViews
+  });
   slice.content.forEach(function (node) {
-    var serializer = _model.DOMSerializer.fromSchema(tr.doc.type.schema);
+    // Create a wrapper for each node with strikethrough
+    var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
+      var wrapper = document.createElement('span');
+      wrapper.style.position = 'relative';
+      wrapper.style.width = 'fit-content';
+      var strikethrough = document.createElement('span');
+      strikethrough.setAttribute('style', deletedContentStyleUnbounded);
+      wrapper.append(strikethrough);
+      return wrapper;
+    };
+
+    // Helper function to handle multiple child nodes
+    var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
+      if (node.content.childCount > 1 && node.type.inlineContent) {
+        node.content.forEach(function (childNode) {
+          var childNodeView = nodeViewSerializer.tryCreateNodeView(childNode);
+          if (childNodeView) {
+            var lineBreak = document.createElement('br');
+            targetNode = node;
+            dom.append(lineBreak);
+            var wrapper = createWrapperWithStrikethrough();
+            wrapper.append(childNodeView.dom);
+            dom.append(wrapper);
+          } else {
+            // Fallback to serializing the individual child node
+            var serializedChild = nodeViewSerializer.serializeNode(childNode);
+            dom.append(serializedChild);
+          }
+        });
+        return true; // Indicates we handled multiple children
+      }
+      return false; // Indicates single child, continue with normal logic
+    };
+
+    // Determine which node to use and how to serialize
     var isFirst = slice.content.firstChild === node;
     var isLast = slice.content.lastChild === node;
-    if (isFirst || isLast && slice.content.childCount > 2) {
-      if (node.content.childCount > 0 && node.type.inlineContent === true) {
-        dom.append(serializer.serializeFragment(node.content));
-      } else {
-        dom.append(serializer.serializeNode(node));
+    var hasInlineContent = node.content.childCount > 0 && node.type.inlineContent === true;
+    var targetNode;
+    var fallbackSerialization;
+    if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
+      if (handleMultipleChildNodes(node)) {
+        return;
       }
+      targetNode = node.content.content[0];
+      fallbackSerialization = function fallbackSerialization() {
+        return nodeViewSerializer.serializeFragment(node.content);
+      };
     } else if (isLast && slice.content.childCount === 2) {
-      var lineBreak = document.createElement('br');
-      dom.append(lineBreak);
-      dom.append(serializer.serializeFragment(node.content));
+      if (handleMultipleChildNodes(node)) {
+        return;
+      }
+      targetNode = node;
+      fallbackSerialization = function fallbackSerialization() {
+        if (node.type.name === 'text') {
+          return document.createTextNode(node.text || '');
+        }
+        if (node.type.name === 'paragraph') {
+          var lineBreak = document.createElement('br');
+          dom.append(lineBreak);
+          return nodeViewSerializer.serializeFragment(node.content);
+        }
+        return nodeViewSerializer.serializeFragment(node.content);
+      };
+    } else {
+      if (handleMultipleChildNodes(node)) {
+        return;
+      }
+      targetNode = node.content.content[0] || node;
+      fallbackSerialization = function fallbackSerialization() {
+        return nodeViewSerializer.serializeNode(node);
+      };
+    }
+
+    // Try to create node view, fallback to serialization
+    var nodeView = nodeViewSerializer.tryCreateNodeView(targetNode);
+    if (nodeView) {
+      var wrapper = createWrapperWithStrikethrough();
+      wrapper.append(nodeView.dom);
+      dom.append(wrapper);
     } else {
-      dom.append(serializer.serializeNode(node));
+      dom.append(fallbackSerialization());
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');

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

@@ -21,7 +21,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 var calculateDecorations = function calculateDecorations(_ref) {
   var state = _ref.state,
-    pluginState = _ref.pluginState;
+    pluginState = _ref.pluginState,
+    editorView = _ref.editorView,
+    nodeViews = _ref.nodeViews;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -59,7 +61,9 @@ var calculateDecorations = function calculateDecorations(_ref) {
       decorations.push((0, _decorations.createDeletedContentDecoration)({
         change: change,
         doc: originalDoc,
-        tr: tr
+        tr: tr,
+        editorView: editorView,
+        nodeViews: nodeViews
       }));
     }
   });
@@ -70,60 +74,82 @@ var calculateDecorations = function calculateDecorations(_ref) {
 };
 var showDiffPluginKey = exports.showDiffPluginKey = new _state.PluginKey('showDiffPlugin');
 var createPlugin = exports.createPlugin = function createPlugin(config) {
+  var editorView;
+  var setEditorView = function setEditorView(newEditorView) {
+    editorView = newEditorView;
+  };
   return new _safePlugin.SafePlugin({
     key: showDiffPluginKey,
     state: {
       init: function init(_, state) {
-        var _config$steps, _config$steps2;
+        var _config$steps, _config$steps2, _editorView;
         var schema = state.schema;
         var isDisplayingChanges = ((_config$steps = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps !== void 0 ? _config$steps : []).length > 0;
+        var steps = ((_config$steps2 = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps2 !== void 0 ? _config$steps2 : []).map(function (step) {
+          return _transform.Step.fromJSON(schema, step);
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var nodeViews = ((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.nodeViews) || {};
         return {
-          steps: ((_config$steps2 = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps2 !== void 0 ? _config$steps2 : []).map(function (step) {
-            return _transform.Step.fromJSON(schema, step);
-          }),
+          steps: steps,
           originalDoc: config !== null && config !== void 0 && config.originalDoc ? (0, _processRawValue.processRawValue)(state.schema, config.originalDoc) : undefined,
           decorations: calculateDecorations({
             state: state,
             pluginState: {
-              steps: [],
+              steps: steps,
               originalDoc: config !== null && config !== void 0 && config.originalDoc ? (0, _processRawValue.processRawValue)(state.schema, config.originalDoc) : undefined,
               isDisplayingChanges: isDisplayingChanges
-            }
+            },
+            editorView: editorView,
+            nodeViews: nodeViews
           }),
           isDisplayingChanges: isDisplayingChanges
         };
       },
       apply: function apply(tr, currentPluginState, oldState, newState) {
+        var _editorView2;
         var meta = tr.getMeta(showDiffPluginKey);
         var newPluginState = currentPluginState;
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var nodeViews = ((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.nodeViews) || {};
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
+            var _meta$steps, _meta$originalDoc;
+            // Calculate and store decorations in state
+            var decorations = calculateDecorations({
+              state: newState,
+              pluginState: {
+                steps: (_meta$steps = meta.steps) !== null && _meta$steps !== void 0 ? _meta$steps : currentPluginState.steps,
+                originalDoc: (_meta$originalDoc = meta.originalDoc) !== null && _meta$originalDoc !== void 0 ? _meta$originalDoc : currentPluginState.originalDoc,
+                isDisplayingChanges: true
+              },
+              editorView: editorView,
+              nodeViews: nodeViews
+            });
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
+              decorations: decorations,
               isDisplayingChanges: true
             });
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
+              decorations: _view.DecorationSet.empty,
               isDisplayingChanges: false
             });
           } else {
             newPluginState = _objectSpread(_objectSpread({}, currentPluginState), meta);
           }
         }
-
-        // Calculate and store decorations in state
-        var decorations = calculateDecorations({
-          state: newState,
-          pluginState: {
-            steps: newPluginState.steps,
-            originalDoc: newPluginState.originalDoc,
-            isDisplayingChanges: newPluginState.isDisplayingChanges
-          }
-        });
         return _objectSpread(_objectSpread({}, newPluginState), {}, {
-          decorations: decorations
+          decorations: newPluginState.decorations.map(tr.mapping, tr.doc)
         });
       }
     },
+    view: function view(editorView) {
+      setEditorView(editorView);
+      return {};
+    },
     props: {
       decorations: function decorations(state) {
         var pluginState = showDiffPluginKey.getState(state);

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

@@ -0,0 +1,83 @@
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+
+/**
+ * Utilities for working with ProseMirror node views and DOM serialization within the
+ * Show Diff editor plugin.
+ *
+ * This module centralizes:
+ * - Access to the editor's `nodeViews` registry (when available on `EditorView`)
+ * - Safe attempts to instantiate a node view for a given node, with a blocklist to
+ *   avoid node types that are known to be problematic in this context (e.g. tables)
+ * - Schema-driven serialization of nodes and fragments to DOM via `DOMSerializer`
+ *
+ * The Show Diff decorations leverage this to either render nodes using their
+ * corresponding node view implementation, or fall back to DOM serialization.
+ */
+
+/**
+ * Narrowed `EditorView` that exposes the internal `nodeViews` registry.
+ * Many editor instances provide this, but it's not part of the base type.
+ */
+
+/**
+ * Type guard to detect whether an `EditorView` exposes a `nodeViews` map.
+ */
+export function isEditorViewWithNodeViews(view) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return view.nodeViews !== undefined;
+}
+
+/**
+ * Encapsulates DOM serialization and node view access/creation.
+ *
+ * Responsible for:
+ * - Creating a `DOMSerializer` from the provided schema
+ * - Reading `nodeViews` from an `EditorView` (if present) or using an explicit mapping
+ * - Preventing node view creation for blocklisted node types
+ */
+export class NodeViewSerializer {
+  constructor(params) {
+    var _ref, _params$nodeViews, _this$editorView, _params$blocklist;
+    this.serializer = DOMSerializer.fromSchema(params.schema);
+    if (params.editorView && isEditorViewWithNodeViews(params.editorView)) {
+      this.editorView = params.editorView;
+    }
+    this.nodeViews = (_ref = (_params$nodeViews = params.nodeViews) !== null && _params$nodeViews !== void 0 ? _params$nodeViews : (_this$editorView = this.editorView) === null || _this$editorView === void 0 ? void 0 : _this$editorView.nodeViews) !== null && _ref !== void 0 ? _ref : {};
+    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['tableRow', 'table']);
+  }
+
+  /**
+   * Attempts to create a node view for the given node.
+   *
+   * 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) {
+    if (!this.editorView) {
+      return null;
+    }
+    const constructor = this.nodeViews[targetNode.type.name];
+    if (!constructor) {
+      return null;
+    }
+    if (this.nodeViewBlocklist.has(targetNode.type.name)) {
+      return null;
+    }
+    return constructor(targetNode, this.editorView, () => 0, [], {});
+  }
+
+  /**
+   * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
+   */
+  serializeNode(node) {
+    return this.serializer.serializeNode(node);
+  }
+
+  /**
+   * Serializes a fragment to a `DocumentFragment` using the schema's `DOMSerializer`.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  serializeFragment(fragment) {
+    return this.serializer.serializeFragment(fragment);
+  }
+}

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

@@ -1,6 +1,6 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { NodeViewSerializer } from './NodeViewSerializer';
 const style = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
@@ -8,7 +8,6 @@ const style = convertToInlineCss({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
 });
-
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -21,7 +20,18 @@ export const createInlineChangedDecoration = change => Decoration.inline(change.
 }, {});
 const deletedContentStyle = convertToInlineCss({
   color: "var(--ds-text-accent-gray, #44546F)",
-  textDecoration: 'line-through'
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 0.6
+});
+const deletedContentStyleUnbounded = convertToInlineCss({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: `1px solid ${"var(--ds-text-accent-gray, #44546F)"}`,
+  pointerEvents: 'none',
+  zIndex: 1
 });
 
 /**
@@ -35,7 +45,9 @@ const deletedContentStyle = convertToInlineCss({
 export const createDeletedContentDecoration = ({
   change,
   doc,
-  tr
+  tr,
+  editorView,
+  nodeViews
 }) => {
   const dom = document.createElement('span');
   dom.setAttribute('style', deletedContentStyle);
@@ -46,22 +58,90 @@ export const createDeletedContentDecoration = ({
    * or sliced End depth is and match only the content and not with the entire node.
    */
   const slice = doc.slice(change.fromA, change.toA);
+  const nodeViewSerializer = new NodeViewSerializer({
+    schema: tr.doc.type.schema,
+    editorView,
+    nodeViews
+  });
   slice.content.forEach(node => {
-    const serializer = DOMSerializer.fromSchema(tr.doc.type.schema);
+    // Create a wrapper for each node with strikethrough
+    const createWrapperWithStrikethrough = () => {
+      const wrapper = document.createElement('span');
+      wrapper.style.position = 'relative';
+      wrapper.style.width = 'fit-content';
+      const strikethrough = document.createElement('span');
+      strikethrough.setAttribute('style', deletedContentStyleUnbounded);
+      wrapper.append(strikethrough);
+      return wrapper;
+    };
+
+    // Helper function to handle multiple child nodes
+    const handleMultipleChildNodes = node => {
+      if (node.content.childCount > 1 && node.type.inlineContent) {
+        node.content.forEach(childNode => {
+          const childNodeView = nodeViewSerializer.tryCreateNodeView(childNode);
+          if (childNodeView) {
+            const lineBreak = document.createElement('br');
+            targetNode = node;
+            dom.append(lineBreak);
+            const wrapper = createWrapperWithStrikethrough();
+            wrapper.append(childNodeView.dom);
+            dom.append(wrapper);
+          } else {
+            // Fallback to serializing the individual child node
+            const serializedChild = nodeViewSerializer.serializeNode(childNode);
+            dom.append(serializedChild);
+          }
+        });
+        return true; // Indicates we handled multiple children
+      }
+      return false; // Indicates single child, continue with normal logic
+    };
+
+    // Determine which node to use and how to serialize
     const isFirst = slice.content.firstChild === node;
     const isLast = slice.content.lastChild === node;
-    if (isFirst || isLast && slice.content.childCount > 2) {
-      if (node.content.childCount > 0 && node.type.inlineContent === true) {
-        dom.append(serializer.serializeFragment(node.content));
-      } else {
-        dom.append(serializer.serializeNode(node));
+    const hasInlineContent = node.content.childCount > 0 && node.type.inlineContent === true;
+    let targetNode;
+    let fallbackSerialization;
+    if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
+      if (handleMultipleChildNodes(node)) {
+        return;
       }
+      targetNode = node.content.content[0];
+      fallbackSerialization = () => nodeViewSerializer.serializeFragment(node.content);
     } else if (isLast && slice.content.childCount === 2) {
-      const lineBreak = document.createElement('br');
-      dom.append(lineBreak);
-      dom.append(serializer.serializeFragment(node.content));
+      if (handleMultipleChildNodes(node)) {
+        return;
+      }
+      targetNode = node;
+      fallbackSerialization = () => {
+        if (node.type.name === 'text') {
+          return document.createTextNode(node.text || '');
+        }
+        if (node.type.name === 'paragraph') {
+          const lineBreak = document.createElement('br');
+          dom.append(lineBreak);
+          return nodeViewSerializer.serializeFragment(node.content);
+        }
+        return nodeViewSerializer.serializeFragment(node.content);
+      };
+    } else {
+      if (handleMultipleChildNodes(node)) {
+        return;
+      }
+      targetNode = node.content.content[0] || node;
+      fallbackSerialization = () => nodeViewSerializer.serializeNode(node);
+    }
+
+    // Try to create node view, fallback to serialization
+    const nodeView = nodeViewSerializer.tryCreateNodeView(targetNode);
+    if (nodeView) {
+      const wrapper = createWrapperWithStrikethrough();
+      wrapper.append(nodeView.dom);
+      dom.append(wrapper);
     } else {
-      dom.append(serializer.serializeNode(node));
+      dom.append(fallbackSerialization());
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');

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

@@ -9,7 +9,9 @@ import { createInlineChangedDecoration, createDeletedContentDecoration } from '.
 import { getMarkChangeRanges } from './markDecorations';
 const calculateDecorations = ({
   state,
-  pluginState
+  pluginState,
+  editorView,
+  nodeViews
 }) => {
   const {
     originalDoc,
@@ -43,7 +45,9 @@ const calculateDecorations = ({
       decorations.push(createDeletedContentDecoration({
         change,
         doc: originalDoc,
-        tr
+        tr,
+        editorView,
+        nodeViews
       }));
     }
   });
@@ -54,41 +58,69 @@ const calculateDecorations = ({
 };
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
 export const createPlugin = config => {
+  let editorView;
+  const setEditorView = newEditorView => {
+    editorView = newEditorView;
+  };
   return new SafePlugin({
     key: showDiffPluginKey,
     state: {
       init(_, state) {
-        var _config$steps, _config$steps2;
+        var _config$steps, _config$steps2, _editorView;
         const schema = state.schema;
         const isDisplayingChanges = ((_config$steps = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps !== void 0 ? _config$steps : []).length > 0;
+        const steps = ((_config$steps2 = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps2 !== void 0 ? _config$steps2 : []).map(step => ProseMirrorStep.fromJSON(schema, step));
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const nodeViews = ((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.nodeViews) || {};
         return {
-          steps: ((_config$steps2 = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps2 !== void 0 ? _config$steps2 : []).map(step => ProseMirrorStep.fromJSON(schema, step)),
+          steps,
           originalDoc: config !== null && config !== void 0 && config.originalDoc ? processRawValue(state.schema, config.originalDoc) : undefined,
           decorations: calculateDecorations({
             state,
             pluginState: {
-              steps: [],
+              steps,
               originalDoc: config !== null && config !== void 0 && config.originalDoc ? processRawValue(state.schema, config.originalDoc) : undefined,
               isDisplayingChanges
-            }
+            },
+            editorView,
+            nodeViews
           }),
           isDisplayingChanges
         };
       },
       apply: (tr, currentPluginState, oldState, newState) => {
+        var _editorView2;
         const meta = tr.getMeta(showDiffPluginKey);
         let newPluginState = currentPluginState;
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const nodeViews = ((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.nodeViews) || {};
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
+            var _meta$steps, _meta$originalDoc;
+            // Calculate and store decorations in state
+            const decorations = calculateDecorations({
+              state: newState,
+              pluginState: {
+                steps: (_meta$steps = meta.steps) !== null && _meta$steps !== void 0 ? _meta$steps : currentPluginState.steps,
+                originalDoc: (_meta$originalDoc = meta.originalDoc) !== null && _meta$originalDoc !== void 0 ? _meta$originalDoc : currentPluginState.originalDoc,
+                isDisplayingChanges: true
+              },
+              editorView,
+              nodeViews: nodeViews
+            });
             newPluginState = {
               ...currentPluginState,
               ...meta,
+              decorations,
               isDisplayingChanges: true
             };
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
             newPluginState = {
               ...currentPluginState,
               ...meta,
+              decorations: DecorationSet.empty,
               isDisplayingChanges: false
             };
           } else {
@@ -98,22 +130,16 @@ export const createPlugin = config => {
             };
           }
         }
-
-        // Calculate and store decorations in state
-        const decorations = calculateDecorations({
-          state: newState,
-          pluginState: {
-            steps: newPluginState.steps,
-            originalDoc: newPluginState.originalDoc,
-            isDisplayingChanges: newPluginState.isDisplayingChanges
-          }
-        });
         return {
           ...newPluginState,
-          decorations
+          decorations: newPluginState.decorations.map(tr.mapping, tr.doc)
         };
       }
     },
+    view(editorView) {
+      setEditorView(editorView);
+      return {};
+    },
     props: {
       decorations: state => {
         const pluginState = showDiffPluginKey.getState(state);

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

@@ -0,0 +1,95 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+
+/**
+ * Utilities for working with ProseMirror node views and DOM serialization within the
+ * Show Diff editor plugin.
+ *
+ * This module centralizes:
+ * - Access to the editor's `nodeViews` registry (when available on `EditorView`)
+ * - Safe attempts to instantiate a node view for a given node, with a blocklist to
+ *   avoid node types that are known to be problematic in this context (e.g. tables)
+ * - Schema-driven serialization of nodes and fragments to DOM via `DOMSerializer`
+ *
+ * The Show Diff decorations leverage this to either render nodes using their
+ * corresponding node view implementation, or fall back to DOM serialization.
+ */
+
+/**
+ * Narrowed `EditorView` that exposes the internal `nodeViews` registry.
+ * Many editor instances provide this, but it's not part of the base type.
+ */
+
+/**
+ * Type guard to detect whether an `EditorView` exposes a `nodeViews` map.
+ */
+export function isEditorViewWithNodeViews(view) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return view.nodeViews !== undefined;
+}
+
+/**
+ * Encapsulates DOM serialization and node view access/creation.
+ *
+ * Responsible for:
+ * - Creating a `DOMSerializer` from the provided schema
+ * - Reading `nodeViews` from an `EditorView` (if present) or using an explicit mapping
+ * - Preventing node view creation for blocklisted node types
+ */
+export var NodeViewSerializer = /*#__PURE__*/function () {
+  function NodeViewSerializer(params) {
+    var _ref, _params$nodeViews, _this$editorView, _params$blocklist;
+    _classCallCheck(this, NodeViewSerializer);
+    this.serializer = DOMSerializer.fromSchema(params.schema);
+    if (params.editorView && isEditorViewWithNodeViews(params.editorView)) {
+      this.editorView = params.editorView;
+    }
+    this.nodeViews = (_ref = (_params$nodeViews = params.nodeViews) !== null && _params$nodeViews !== void 0 ? _params$nodeViews : (_this$editorView = this.editorView) === null || _this$editorView === void 0 ? void 0 : _this$editorView.nodeViews) !== null && _ref !== void 0 ? _ref : {};
+    this.nodeViewBlocklist = new Set((_params$blocklist = params.blocklist) !== null && _params$blocklist !== void 0 ? _params$blocklist : ['tableRow', 'table']);
+  }
+
+  /**
+   * Attempts to create a node view for the given node.
+   *
+   * 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.
+   */
+  return _createClass(NodeViewSerializer, [{
+    key: "tryCreateNodeView",
+    value: function tryCreateNodeView(targetNode) {
+      if (!this.editorView) {
+        return null;
+      }
+      var constructor = 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;
+      }, [], {});
+    }
+
+    /**
+     * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
+     */
+  }, {
+    key: "serializeNode",
+    value: function serializeNode(node) {
+      return this.serializer.serializeNode(node);
+    }
+
+    /**
+     * Serializes a fragment to a `DocumentFragment` using the schema's `DOMSerializer`.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }, {
+    key: "serializeFragment",
+    value: function serializeFragment(fragment) {
+      return this.serializer.serializeFragment(fragment);
+    }
+  }]);
+}();

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

@@ -1,6 +1,6 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { NodeViewSerializer } from './NodeViewSerializer';
 var style = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
@@ -8,7 +8,6 @@ var style = convertToInlineCss({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
 });
-
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -23,7 +22,18 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
 };
 var deletedContentStyle = convertToInlineCss({
   color: "var(--ds-text-accent-gray, #44546F)",
-  textDecoration: 'line-through'
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 0.6
+});
+var deletedContentStyleUnbounded = convertToInlineCss({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-text-accent-gray, #44546F)"),
+  pointerEvents: 'none',
+  zIndex: 1
 });
 
 /**
@@ -37,7 +47,9 @@ var deletedContentStyle = convertToInlineCss({
 export var createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,
     doc = _ref.doc,
-    tr = _ref.tr;
+    tr = _ref.tr,
+    editorView = _ref.editorView,
+    nodeViews = _ref.nodeViews;
   var dom = document.createElement('span');
   dom.setAttribute('style', deletedContentStyle);
 
@@ -47,22 +59,94 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
    * or sliced End depth is and match only the content and not with the entire node.
    */
   var slice = doc.slice(change.fromA, change.toA);
+  var nodeViewSerializer = new NodeViewSerializer({
+    schema: tr.doc.type.schema,
+    editorView: editorView,
+    nodeViews: nodeViews
+  });
   slice.content.forEach(function (node) {
-    var serializer = DOMSerializer.fromSchema(tr.doc.type.schema);
+    // Create a wrapper for each node with strikethrough
+    var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
+      var wrapper = document.createElement('span');
+      wrapper.style.position = 'relative';
+      wrapper.style.width = 'fit-content';
+      var strikethrough = document.createElement('span');
+      strikethrough.setAttribute('style', deletedContentStyleUnbounded);
+      wrapper.append(strikethrough);
+      return wrapper;
+    };
+
+    // Helper function to handle multiple child nodes
+    var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
+      if (node.content.childCount > 1 && node.type.inlineContent) {
+        node.content.forEach(function (childNode) {
+          var childNodeView = nodeViewSerializer.tryCreateNodeView(childNode);
+          if (childNodeView) {
+            var lineBreak = document.createElement('br');
+            targetNode = node;
+            dom.append(lineBreak);
+            var wrapper = createWrapperWithStrikethrough();
+            wrapper.append(childNodeView.dom);
+            dom.append(wrapper);
+          } else {
+            // Fallback to serializing the individual child node
+            var serializedChild = nodeViewSerializer.serializeNode(childNode);
+            dom.append(serializedChild);
+          }
+        });
+        return true; // Indicates we handled multiple children
+      }
+      return false; // Indicates single child, continue with normal logic
+    };
+
+    // Determine which node to use and how to serialize
     var isFirst = slice.content.firstChild === node;
     var isLast = slice.content.lastChild === node;
-    if (isFirst || isLast && slice.content.childCount > 2) {
-      if (node.content.childCount > 0 && node.type.inlineContent === true) {
-        dom.append(serializer.serializeFragment(node.content));
-      } else {
-        dom.append(serializer.serializeNode(node));
+    var hasInlineContent = node.content.childCount > 0 && node.type.inlineContent === true;
+    var targetNode;
+    var fallbackSerialization;
+    if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
+      if (handleMultipleChildNodes(node)) {
+        return;
       }
+      targetNode = node.content.content[0];
+      fallbackSerialization = function fallbackSerialization() {
+        return nodeViewSerializer.serializeFragment(node.content);
+      };
     } else if (isLast && slice.content.childCount === 2) {
-      var lineBreak = document.createElement('br');
-      dom.append(lineBreak);
-      dom.append(serializer.serializeFragment(node.content));
+      if (handleMultipleChildNodes(node)) {
+        return;
+      }
+      targetNode = node;
+      fallbackSerialization = function fallbackSerialization() {
+        if (node.type.name === 'text') {
+          return document.createTextNode(node.text || '');
+        }
+        if (node.type.name === 'paragraph') {
+          var lineBreak = document.createElement('br');
+          dom.append(lineBreak);
+          return nodeViewSerializer.serializeFragment(node.content);
+        }
+        return nodeViewSerializer.serializeFragment(node.content);
+      };
+    } else {
+      if (handleMultipleChildNodes(node)) {
+        return;
+      }
+      targetNode = node.content.content[0] || node;
+      fallbackSerialization = function fallbackSerialization() {
+        return nodeViewSerializer.serializeNode(node);
+      };
+    }
+
+    // Try to create node view, fallback to serialization
+    var nodeView = nodeViewSerializer.tryCreateNodeView(targetNode);
+    if (nodeView) {
+      var wrapper = createWrapperWithStrikethrough();
+      wrapper.append(nodeView.dom);
+      dom.append(wrapper);
     } else {
-      dom.append(serializer.serializeNode(node));
+      dom.append(fallbackSerialization());
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');

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

@@ -15,7 +15,9 @@ import { createInlineChangedDecoration, createDeletedContentDecoration } from '.
 import { getMarkChangeRanges } from './markDecorations';
 var calculateDecorations = function calculateDecorations(_ref) {
   var state = _ref.state,
-    pluginState = _ref.pluginState;
+    pluginState = _ref.pluginState,
+    editorView = _ref.editorView,
+    nodeViews = _ref.nodeViews;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -53,7 +55,9 @@ var calculateDecorations = function calculateDecorations(_ref) {
       decorations.push(createDeletedContentDecoration({
         change: change,
         doc: originalDoc,
-        tr: tr
+        tr: tr,
+        editorView: editorView,
+        nodeViews: nodeViews
       }));
     }
   });
@@ -64,60 +68,82 @@ var calculateDecorations = function calculateDecorations(_ref) {
 };
 export var showDiffPluginKey = new PluginKey('showDiffPlugin');
 export var createPlugin = function createPlugin(config) {
+  var editorView;
+  var setEditorView = function setEditorView(newEditorView) {
+    editorView = newEditorView;
+  };
   return new SafePlugin({
     key: showDiffPluginKey,
     state: {
       init: function init(_, state) {
-        var _config$steps, _config$steps2;
+        var _config$steps, _config$steps2, _editorView;
         var schema = state.schema;
         var isDisplayingChanges = ((_config$steps = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps !== void 0 ? _config$steps : []).length > 0;
+        var steps = ((_config$steps2 = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps2 !== void 0 ? _config$steps2 : []).map(function (step) {
+          return ProseMirrorStep.fromJSON(schema, step);
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var nodeViews = ((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.nodeViews) || {};
         return {
-          steps: ((_config$steps2 = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps2 !== void 0 ? _config$steps2 : []).map(function (step) {
-            return ProseMirrorStep.fromJSON(schema, step);
-          }),
+          steps: steps,
           originalDoc: config !== null && config !== void 0 && config.originalDoc ? processRawValue(state.schema, config.originalDoc) : undefined,
           decorations: calculateDecorations({
             state: state,
             pluginState: {
-              steps: [],
+              steps: steps,
               originalDoc: config !== null && config !== void 0 && config.originalDoc ? processRawValue(state.schema, config.originalDoc) : undefined,
               isDisplayingChanges: isDisplayingChanges
-            }
+            },
+            editorView: editorView,
+            nodeViews: nodeViews
           }),
           isDisplayingChanges: isDisplayingChanges
         };
       },
       apply: function apply(tr, currentPluginState, oldState, newState) {
+        var _editorView2;
         var meta = tr.getMeta(showDiffPluginKey);
         var newPluginState = currentPluginState;
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var nodeViews = ((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.nodeViews) || {};
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
+            var _meta$steps, _meta$originalDoc;
+            // Calculate and store decorations in state
+            var decorations = calculateDecorations({
+              state: newState,
+              pluginState: {
+                steps: (_meta$steps = meta.steps) !== null && _meta$steps !== void 0 ? _meta$steps : currentPluginState.steps,
+                originalDoc: (_meta$originalDoc = meta.originalDoc) !== null && _meta$originalDoc !== void 0 ? _meta$originalDoc : currentPluginState.originalDoc,
+                isDisplayingChanges: true
+              },
+              editorView: editorView,
+              nodeViews: nodeViews
+            });
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
+              decorations: decorations,
               isDisplayingChanges: true
             });
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
+              decorations: DecorationSet.empty,
               isDisplayingChanges: false
             });
           } else {
             newPluginState = _objectSpread(_objectSpread({}, currentPluginState), meta);
           }
         }
-
-        // Calculate and store decorations in state
-        var decorations = calculateDecorations({
-          state: newState,
-          pluginState: {
-            steps: newPluginState.steps,
-            originalDoc: newPluginState.originalDoc,
-            isDisplayingChanges: newPluginState.isDisplayingChanges
-          }
-        });
         return _objectSpread(_objectSpread({}, newPluginState), {}, {
-          decorations: decorations
+          decorations: newPluginState.decorations.map(tr.mapping, tr.doc)
         });
       }
     },
+    view: function view(editorView) {
+      setEditorView(editorView);
+      return {};
+    },
     props: {
       decorations: function decorations(state) {
         var pluginState = showDiffPluginKey.getState(state);

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

@@ -0,0 +1,62 @@
+import { type NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
+import type { Schema, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Utilities for working with ProseMirror node views and DOM serialization within the
+ * Show Diff editor plugin.
+ *
+ * This module centralizes:
+ * - Access to the editor's `nodeViews` registry (when available on `EditorView`)
+ * - Safe attempts to instantiate a node view for a given node, with a blocklist to
+ *   avoid node types that are known to be problematic in this context (e.g. tables)
+ * - Schema-driven serialization of nodes and fragments to DOM via `DOMSerializer`
+ *
+ * The Show Diff decorations leverage this to either render nodes using their
+ * corresponding node view implementation, or fall back to DOM serialization.
+ */
+/**
+ * Narrowed `EditorView` that exposes the internal `nodeViews` registry.
+ * Many editor instances provide this, but it's not part of the base type.
+ */
+export interface EditorViewWithNodeViews extends EditorView {
+    nodeViews: Record<string, NodeViewConstructor>;
+}
+/**
+ * Type guard to detect whether an `EditorView` exposes a `nodeViews` map.
+ */
+export declare function isEditorViewWithNodeViews(view: EditorView): view is EditorViewWithNodeViews;
+/**
+ * Encapsulates DOM serialization and node view access/creation.
+ *
+ * Responsible for:
+ * - Creating a `DOMSerializer` from the provided schema
+ * - Reading `nodeViews` from an `EditorView` (if present) or using an explicit mapping
+ * - Preventing node view creation for blocklisted node types
+ */
+export declare class NodeViewSerializer {
+    private serializer;
+    private editorView?;
+    private nodeViews;
+    private nodeViewBlocklist;
+    constructor(params: {
+        schema: Schema;
+        editorView?: EditorView;
+        nodeViews?: Record<string, NodeViewConstructor>;
+        blocklist?: string[];
+    });
+    /**
+     * Attempts to create a node view for the given node.
+     *
+     * 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;
+    /**
+     * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
+     */
+    serializeNode(node: PMNode): Node;
+    /**
+     * Serializes a fragment to a `DocumentFragment` using the schema's `DOMSerializer`.
+     */
+    serializeFragment(fragment: any): DocumentFragment | HTMLElement;
+}

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

@@ -1,6 +1,8 @@
 import type { Change } from 'prosemirror-changeset';
+import { type NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 /**
  * Inline decoration used for insertions as the content already exists in the document
@@ -16,6 +18,8 @@ interface DeletedContentDecorationProps {
     change: Change;
     doc: PMNode;
     tr: Transaction;
+    nodeViews: Record<string, NodeViewConstructor>;
+    editorView?: EditorView;
 }
 /**
  * Creates a widget to represent the deleted content in the editor
@@ -25,5 +29,5 @@ interface DeletedContentDecorationProps {
  * @param props.tr The relevant transaction this decoration is being created against
  * @returns Prosemirror widget decoration
  */
-export declare const createDeletedContentDecoration: ({ change, doc, tr, }: DeletedContentDecorationProps) => Decoration;
+export declare const createDeletedContentDecoration: ({ change, doc, tr, editorView, nodeViews, }: DeletedContentDecorationProps) => Decoration;
 export {};

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

@@ -0,0 +1,62 @@
+import { type NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
+import type { Schema, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Utilities for working with ProseMirror node views and DOM serialization within the
+ * Show Diff editor plugin.
+ *
+ * This module centralizes:
+ * - Access to the editor's `nodeViews` registry (when available on `EditorView`)
+ * - Safe attempts to instantiate a node view for a given node, with a blocklist to
+ *   avoid node types that are known to be problematic in this context (e.g. tables)
+ * - Schema-driven serialization of nodes and fragments to DOM via `DOMSerializer`
+ *
+ * The Show Diff decorations leverage this to either render nodes using their
+ * corresponding node view implementation, or fall back to DOM serialization.
+ */
+/**
+ * Narrowed `EditorView` that exposes the internal `nodeViews` registry.
+ * Many editor instances provide this, but it's not part of the base type.
+ */
+export interface EditorViewWithNodeViews extends EditorView {
+    nodeViews: Record<string, NodeViewConstructor>;
+}
+/**
+ * Type guard to detect whether an `EditorView` exposes a `nodeViews` map.
+ */
+export declare function isEditorViewWithNodeViews(view: EditorView): view is EditorViewWithNodeViews;
+/**
+ * Encapsulates DOM serialization and node view access/creation.
+ *
+ * Responsible for:
+ * - Creating a `DOMSerializer` from the provided schema
+ * - Reading `nodeViews` from an `EditorView` (if present) or using an explicit mapping
+ * - Preventing node view creation for blocklisted node types
+ */
+export declare class NodeViewSerializer {
+    private serializer;
+    private editorView?;
+    private nodeViews;
+    private nodeViewBlocklist;
+    constructor(params: {
+        schema: Schema;
+        editorView?: EditorView;
+        nodeViews?: Record<string, NodeViewConstructor>;
+        blocklist?: string[];
+    });
+    /**
+     * Attempts to create a node view for the given node.
+     *
+     * 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;
+    /**
+     * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
+     */
+    serializeNode(node: PMNode): Node;
+    /**
+     * Serializes a fragment to a `DocumentFragment` using the schema's `DOMSerializer`.
+     */
+    serializeFragment(fragment: any): DocumentFragment | HTMLElement;
+}

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

@@ -1,6 +1,8 @@
 import type { Change } from 'prosemirror-changeset';
+import { type NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 /**
  * Inline decoration used for insertions as the content already exists in the document
@@ -16,6 +18,8 @@ interface DeletedContentDecorationProps {
     change: Change;
     doc: PMNode;
     tr: Transaction;
+    nodeViews: Record<string, NodeViewConstructor>;
+    editorView?: EditorView;
 }
 /**
  * Creates a widget to represent the deleted content in the editor
@@ -25,5 +29,5 @@ interface DeletedContentDecorationProps {
  * @param props.tr The relevant transaction this decoration is being created against
  * @returns Prosemirror widget decoration
  */
-export declare const createDeletedContentDecoration: ({ change, doc, tr, }: DeletedContentDecorationProps) => Decoration;
+export declare const createDeletedContentDecoration: ({ change, doc, tr, editorView, nodeViews, }: DeletedContentDecorationProps) => Decoration;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"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": "^107.23.0",
+		"@atlaskit/editor-common": "^107.25.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {