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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 0.2.0
+
+### Minor Changes
+
+- [`3df4a57528050`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3df4a57528050) -
+  Update editor showDiffPlugin to take in params for preset use in Confluence version history.
+
+## 0.1.7
+
+### Patch Changes
+
+- [`06722cb00f629`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/06722cb00f629) -
+  [EDITOR-1358] Remove extra parameters parased in and refactored initialisation for show-diff
+  editorView
+
 ## 0.1.6
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -24,4 +24,4 @@
 			"path": "../../editor-common/afm-cc/tsconfig.json"
 		}
 	]
-}
+}

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

@@ -46,29 +46,48 @@ function isEditorViewWithNodeViews(view) {
  */
 var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
   function NodeViewSerializer(params) {
-    var _ref, _params$nodeViews, _this$editorView, _params$blocklist;
+    var _params$blocklist;
     (0, _classCallCheck2.default)(this, NodeViewSerializer);
-    this.serializer = _model.DOMSerializer.fromSchema(params.schema);
-    if (params.editorView && isEditorViewWithNodeViews(params.editorView)) {
-      this.editorView = params.editorView;
+    if (params !== null && params !== void 0 && params.editorView) {
+      this.init({
+        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', 'paragraph']);
   }
 
   /**
-   * 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.
+   * Initializes or reinitializes the NodeViewSerializer with a new EditorView.
+   * This allows the same serializer instance to be reused across different editor states.
    */
   return (0, _createClass2.default)(NodeViewSerializer, [{
+    key: "init",
+    value: function init(params) {
+      var _params$editorView, _ref, _this$editorView;
+      this.serializer = _model.DOMSerializer.fromSchema(params.editorView.state.schema);
+      if (isEditorViewWithNodeViews(params.editorView)) {
+        this.editorView = params.editorView;
+      }
+      var nodeViews =
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ((_params$editorView = params.editorView) === null || _params$editorView === void 0 ? void 0 : _params$editorView.nodeViews) || {};
+      this.nodeViews = (_ref = nodeViews !== null && nodeViews !== void 0 ? nodeViews : (_this$editorView = this.editorView) === null || _this$editorView === void 0 ? void 0 : _this$editorView.nodeViews) !== null && _ref !== void 0 ? _ref : {};
+    }
+
+    /**
+     * 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.
+     */
+  }, {
     key: "tryCreateNodeView",
     value: function tryCreateNodeView(targetNode) {
+      var _this$nodeViews;
       if (!this.editorView) {
         return null;
       }
-      var constructor = this.nodeViews[targetNode.type.name];
+      var constructor = (_this$nodeViews = this.nodeViews) === null || _this$nodeViews === void 0 ? void 0 : _this$nodeViews[targetNode.type.name];
       if (!constructor) {
         return null;
       }
@@ -86,6 +105,9 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
   }, {
     key: "serializeNode",
     value: function serializeNode(node) {
+      if (!this.serializer) {
+        throw new Error('NodeViewSerializer must be initialized with init() before use');
+      }
       return this.serializer.serializeNode(node);
     }
 
@@ -95,6 +117,9 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
   }, {
     key: "serializeFragment",
     value: function serializeFragment(fragment) {
+      if (!this.serializer) {
+        throw new Error('NodeViewSerializer must be initialized with init() before use');
+      }
       return this.serializer.serializeFragment(fragment);
     }
   }]);

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

@@ -6,7 +6,6 @@ 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 _NodeViewSerializer = require("./NodeViewSerializer");
 var style = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
@@ -53,9 +52,7 @@ var deletedContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
 var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,
     doc = _ref.doc,
-    tr = _ref.tr,
-    editorView = _ref.editorView,
-    nodeViews = _ref.nodeViews;
+    nodeViewSerializer = _ref.nodeViewSerializer;
   var dom = document.createElement('span');
   dom.setAttribute('style', deletedContentStyle);
 
@@ -65,11 +62,7 @@ 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
-  });
+  var serializer = nodeViewSerializer;
   slice.content.forEach(function (node) {
     // Create a wrapper for each node with strikethrough
     var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
@@ -86,7 +79,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
       if (node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(function (childNode) {
-          var childNodeView = nodeViewSerializer.tryCreateNodeView(childNode);
+          var childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
             var lineBreak = document.createElement('br');
             targetNode = node;
@@ -96,7 +89,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
-            var serializedChild = nodeViewSerializer.serializeNode(childNode);
+            var serializedChild = serializer.serializeNode(childNode);
             dom.append(serializedChild);
           }
         });
@@ -117,7 +110,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
       }
       targetNode = node.content.content[0];
       fallbackSerialization = function fallbackSerialization() {
-        return nodeViewSerializer.serializeFragment(node.content);
+        return serializer.serializeFragment(node.content);
       };
     } else if (isLast && slice.content.childCount === 2) {
       if (handleMultipleChildNodes(node)) {
@@ -131,9 +124,9 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
         if (node.type.name === 'paragraph') {
           var lineBreak = document.createElement('br');
           dom.append(lineBreak);
-          return nodeViewSerializer.serializeFragment(node.content);
+          return serializer.serializeFragment(node.content);
         }
-        return nodeViewSerializer.serializeFragment(node.content);
+        return serializer.serializeFragment(node.content);
       };
     } else {
       if (handleMultipleChildNodes(node)) {
@@ -141,12 +134,12 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
       }
       targetNode = node.content.content[0] || node;
       fallbackSerialization = function fallbackSerialization() {
-        return nodeViewSerializer.serializeNode(node);
+        return serializer.serializeNode(node);
       };
     }
 
     // Try to create node view, fallback to serialization
-    var nodeView = nodeViewSerializer.tryCreateNodeView(targetNode);
+    var nodeView = serializer.tryCreateNodeView(targetNode);
     if (nodeView) {
       var wrapper = createWrapperWithStrikethrough();
       wrapper.append(nodeView.dom);

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

@@ -14,6 +14,7 @@ var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _decorations = require("./decorations");
 var _markDecorations = require("./markDecorations");
+var _NodeViewSerializer = require("./NodeViewSerializer");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
@@ -22,8 +23,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 var calculateDecorations = function calculateDecorations(_ref) {
   var state = _ref.state,
     pluginState = _ref.pluginState,
-    editorView = _ref.editorView,
-    nodeViews = _ref.nodeViews;
+    nodeViewSerializer = _ref.nodeViewSerializer;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -61,9 +61,7 @@ var calculateDecorations = function calculateDecorations(_ref) {
       decorations.push((0, _decorations.createDeletedContentDecoration)({
         change: change,
         doc: originalDoc,
-        tr: tr,
-        editorView: editorView,
-        nodeViews: nodeViews
+        nodeViewSerializer: nodeViewSerializer
       }));
     }
   });
@@ -74,9 +72,11 @@ 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;
+  var nodeViewSerializer = new _NodeViewSerializer.NodeViewSerializer({});
+  var setNodeViewSerializer = function setNodeViewSerializer(editorView) {
+    nodeViewSerializer.init({
+      editorView: editorView
+    });
   };
   return new _safePlugin.SafePlugin({
     key: showDiffPluginKey,
@@ -91,12 +91,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config) {
         };
       },
       apply: function apply(tr, currentPluginState, oldState, newState) {
-        var _editorView;
         var meta = tr.getMeta(showDiffPluginKey);
         var newPluginState = currentPluginState;
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var nodeViews = ((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.nodeViews) || {};
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
             // Update the plugin state with the new metadata
@@ -107,8 +103,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config) {
             var decorations = calculateDecorations({
               state: newState,
               pluginState: newPluginState,
-              editorView: editorView,
-              nodeViews: nodeViews
+              nodeViewSerializer: nodeViewSerializer
             });
             // Update the decorations
             newPluginState.decorations = decorations;
@@ -127,7 +122,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config) {
       }
     },
     view: function view(editorView) {
-      setEditorView(editorView);
+      setNodeViewSerializer(editorView);
       var isFirst = true;
       return {
         update: function update(view) {

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

@@ -37,15 +37,31 @@ export function isEditorViewWithNodeViews(view) {
  */
 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;
+    var _params$blocklist;
+    if (params !== null && params !== void 0 && params.editorView) {
+      this.init({
+        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', 'paragraph']);
   }
 
+  /**
+   * Initializes or reinitializes the NodeViewSerializer with a new EditorView.
+   * This allows the same serializer instance to be reused across different editor states.
+   */
+  init(params) {
+    var _params$editorView, _ref, _this$editorView;
+    this.serializer = DOMSerializer.fromSchema(params.editorView.state.schema);
+    if (isEditorViewWithNodeViews(params.editorView)) {
+      this.editorView = params.editorView;
+    }
+    const nodeViews =
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ((_params$editorView = params.editorView) === null || _params$editorView === void 0 ? void 0 : _params$editorView.nodeViews) || {};
+    this.nodeViews = (_ref = nodeViews !== null && nodeViews !== void 0 ? nodeViews : (_this$editorView = this.editorView) === null || _this$editorView === void 0 ? void 0 : _this$editorView.nodeViews) !== null && _ref !== void 0 ? _ref : {};
+  }
+
   /**
    * Attempts to create a node view for the given node.
    *
@@ -53,10 +69,11 @@ export class NodeViewSerializer {
    * or the node type is blocklisted. Otherwise returns the constructed node view instance.
    */
   tryCreateNodeView(targetNode) {
+    var _this$nodeViews;
     if (!this.editorView) {
       return null;
     }
-    const constructor = this.nodeViews[targetNode.type.name];
+    const constructor = (_this$nodeViews = this.nodeViews) === null || _this$nodeViews === void 0 ? void 0 : _this$nodeViews[targetNode.type.name];
     if (!constructor) {
       return null;
     }
@@ -70,6 +87,9 @@ export class NodeViewSerializer {
    * Serializes a node to a DOM `Node` using the schema's `DOMSerializer`.
    */
   serializeNode(node) {
+    if (!this.serializer) {
+      throw new Error('NodeViewSerializer must be initialized with init() before use');
+    }
     return this.serializer.serializeNode(node);
   }
 
@@ -77,6 +97,9 @@ export class NodeViewSerializer {
    * Serializes a fragment to a `DocumentFragment` using the schema's `DOMSerializer`.
    */
   serializeFragment(fragment) {
+    if (!this.serializer) {
+      throw new Error('NodeViewSerializer must be initialized with init() before use');
+    }
     return this.serializer.serializeFragment(fragment);
   }
 }

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

@@ -1,6 +1,5 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { NodeViewSerializer } from './NodeViewSerializer';
 const style = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
@@ -45,9 +44,7 @@ const deletedContentStyleUnbounded = convertToInlineCss({
 export const createDeletedContentDecoration = ({
   change,
   doc,
-  tr,
-  editorView,
-  nodeViews
+  nodeViewSerializer
 }) => {
   const dom = document.createElement('span');
   dom.setAttribute('style', deletedContentStyle);
@@ -58,11 +55,7 @@ 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
-  });
+  const serializer = nodeViewSerializer;
   slice.content.forEach(node => {
     // Create a wrapper for each node with strikethrough
     const createWrapperWithStrikethrough = () => {
@@ -79,7 +72,7 @@ export const createDeletedContentDecoration = ({
     const handleMultipleChildNodes = node => {
       if (node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(childNode => {
-          const childNodeView = nodeViewSerializer.tryCreateNodeView(childNode);
+          const childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
             const lineBreak = document.createElement('br');
             targetNode = node;
@@ -89,7 +82,7 @@ export const createDeletedContentDecoration = ({
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
-            const serializedChild = nodeViewSerializer.serializeNode(childNode);
+            const serializedChild = serializer.serializeNode(childNode);
             dom.append(serializedChild);
           }
         });
@@ -109,7 +102,7 @@ export const createDeletedContentDecoration = ({
         return;
       }
       targetNode = node.content.content[0];
-      fallbackSerialization = () => nodeViewSerializer.serializeFragment(node.content);
+      fallbackSerialization = () => serializer.serializeFragment(node.content);
     } else if (isLast && slice.content.childCount === 2) {
       if (handleMultipleChildNodes(node)) {
         return;
@@ -122,20 +115,20 @@ export const createDeletedContentDecoration = ({
         if (node.type.name === 'paragraph') {
           const lineBreak = document.createElement('br');
           dom.append(lineBreak);
-          return nodeViewSerializer.serializeFragment(node.content);
+          return serializer.serializeFragment(node.content);
         }
-        return nodeViewSerializer.serializeFragment(node.content);
+        return serializer.serializeFragment(node.content);
       };
     } else {
       if (handleMultipleChildNodes(node)) {
         return;
       }
       targetNode = node.content.content[0] || node;
-      fallbackSerialization = () => nodeViewSerializer.serializeNode(node);
+      fallbackSerialization = () => serializer.serializeNode(node);
     }
 
     // Try to create node view, fallback to serialization
-    const nodeView = nodeViewSerializer.tryCreateNodeView(targetNode);
+    const nodeView = serializer.tryCreateNodeView(targetNode);
     if (nodeView) {
       const wrapper = createWrapperWithStrikethrough();
       wrapper.append(nodeView.dom);

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

@@ -7,11 +7,11 @@ import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform'
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { createInlineChangedDecoration, createDeletedContentDecoration } from './decorations';
 import { getMarkChangeRanges } from './markDecorations';
+import { NodeViewSerializer } from './NodeViewSerializer';
 const calculateDecorations = ({
   state,
   pluginState,
-  editorView,
-  nodeViews
+  nodeViewSerializer
 }) => {
   const {
     originalDoc,
@@ -45,9 +45,7 @@ const calculateDecorations = ({
       decorations.push(createDeletedContentDecoration({
         change,
         doc: originalDoc,
-        tr,
-        editorView,
-        nodeViews
+        nodeViewSerializer
       }));
     }
   });
@@ -58,9 +56,11 @@ const calculateDecorations = ({
 };
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
 export const createPlugin = config => {
-  let editorView;
-  const setEditorView = newEditorView => {
-    editorView = newEditorView;
+  const nodeViewSerializer = new NodeViewSerializer({});
+  const setNodeViewSerializer = editorView => {
+    nodeViewSerializer.init({
+      editorView
+    });
   };
   return new SafePlugin({
     key: showDiffPluginKey,
@@ -75,12 +75,8 @@ export const createPlugin = config => {
         };
       },
       apply: (tr, currentPluginState, oldState, newState) => {
-        var _editorView;
         const meta = tr.getMeta(showDiffPluginKey);
         let newPluginState = currentPluginState;
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const nodeViews = ((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.nodeViews) || {};
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
             // Update the plugin state with the new metadata
@@ -93,8 +89,7 @@ export const createPlugin = config => {
             const decorations = calculateDecorations({
               state: newState,
               pluginState: newPluginState,
-              editorView,
-              nodeViews: nodeViews
+              nodeViewSerializer
             });
             // Update the decorations
             newPluginState.decorations = decorations;
@@ -119,7 +114,7 @@ export const createPlugin = config => {
       }
     },
     view(editorView) {
-      setEditorView(editorView);
+      setNodeViewSerializer(editorView);
       let isFirst = true;
       return {
         update(view) {

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

@@ -39,29 +39,48 @@ export function isEditorViewWithNodeViews(view) {
  */
 export var NodeViewSerializer = /*#__PURE__*/function () {
   function NodeViewSerializer(params) {
-    var _ref, _params$nodeViews, _this$editorView, _params$blocklist;
+    var _params$blocklist;
     _classCallCheck(this, NodeViewSerializer);
-    this.serializer = DOMSerializer.fromSchema(params.schema);
-    if (params.editorView && isEditorViewWithNodeViews(params.editorView)) {
-      this.editorView = params.editorView;
+    if (params !== null && params !== void 0 && params.editorView) {
+      this.init({
+        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', 'paragraph']);
   }
 
   /**
-   * 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.
+   * Initializes or reinitializes the NodeViewSerializer with a new EditorView.
+   * This allows the same serializer instance to be reused across different editor states.
    */
   return _createClass(NodeViewSerializer, [{
+    key: "init",
+    value: function init(params) {
+      var _params$editorView, _ref, _this$editorView;
+      this.serializer = DOMSerializer.fromSchema(params.editorView.state.schema);
+      if (isEditorViewWithNodeViews(params.editorView)) {
+        this.editorView = params.editorView;
+      }
+      var nodeViews =
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ((_params$editorView = params.editorView) === null || _params$editorView === void 0 ? void 0 : _params$editorView.nodeViews) || {};
+      this.nodeViews = (_ref = nodeViews !== null && nodeViews !== void 0 ? nodeViews : (_this$editorView = this.editorView) === null || _this$editorView === void 0 ? void 0 : _this$editorView.nodeViews) !== null && _ref !== void 0 ? _ref : {};
+    }
+
+    /**
+     * 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.
+     */
+  }, {
     key: "tryCreateNodeView",
     value: function tryCreateNodeView(targetNode) {
+      var _this$nodeViews;
       if (!this.editorView) {
         return null;
       }
-      var constructor = this.nodeViews[targetNode.type.name];
+      var constructor = (_this$nodeViews = this.nodeViews) === null || _this$nodeViews === void 0 ? void 0 : _this$nodeViews[targetNode.type.name];
       if (!constructor) {
         return null;
       }
@@ -79,6 +98,9 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
   }, {
     key: "serializeNode",
     value: function serializeNode(node) {
+      if (!this.serializer) {
+        throw new Error('NodeViewSerializer must be initialized with init() before use');
+      }
       return this.serializer.serializeNode(node);
     }
 
@@ -88,6 +110,9 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
   }, {
     key: "serializeFragment",
     value: function serializeFragment(fragment) {
+      if (!this.serializer) {
+        throw new Error('NodeViewSerializer must be initialized with init() before use');
+      }
       return this.serializer.serializeFragment(fragment);
     }
   }]);

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

@@ -1,6 +1,5 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { NodeViewSerializer } from './NodeViewSerializer';
 var style = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
   textDecoration: 'underline',
@@ -47,9 +46,7 @@ var deletedContentStyleUnbounded = convertToInlineCss({
 export var createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,
     doc = _ref.doc,
-    tr = _ref.tr,
-    editorView = _ref.editorView,
-    nodeViews = _ref.nodeViews;
+    nodeViewSerializer = _ref.nodeViewSerializer;
   var dom = document.createElement('span');
   dom.setAttribute('style', deletedContentStyle);
 
@@ -59,11 +56,7 @@ 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
-  });
+  var serializer = nodeViewSerializer;
   slice.content.forEach(function (node) {
     // Create a wrapper for each node with strikethrough
     var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
@@ -80,7 +73,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
     var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
       if (node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(function (childNode) {
-          var childNodeView = nodeViewSerializer.tryCreateNodeView(childNode);
+          var childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
             var lineBreak = document.createElement('br');
             targetNode = node;
@@ -90,7 +83,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
-            var serializedChild = nodeViewSerializer.serializeNode(childNode);
+            var serializedChild = serializer.serializeNode(childNode);
             dom.append(serializedChild);
           }
         });
@@ -111,7 +104,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
       }
       targetNode = node.content.content[0];
       fallbackSerialization = function fallbackSerialization() {
-        return nodeViewSerializer.serializeFragment(node.content);
+        return serializer.serializeFragment(node.content);
       };
     } else if (isLast && slice.content.childCount === 2) {
       if (handleMultipleChildNodes(node)) {
@@ -125,9 +118,9 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
         if (node.type.name === 'paragraph') {
           var lineBreak = document.createElement('br');
           dom.append(lineBreak);
-          return nodeViewSerializer.serializeFragment(node.content);
+          return serializer.serializeFragment(node.content);
         }
-        return nodeViewSerializer.serializeFragment(node.content);
+        return serializer.serializeFragment(node.content);
       };
     } else {
       if (handleMultipleChildNodes(node)) {
@@ -135,12 +128,12 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
       }
       targetNode = node.content.content[0] || node;
       fallbackSerialization = function fallbackSerialization() {
-        return nodeViewSerializer.serializeNode(node);
+        return serializer.serializeNode(node);
       };
     }
 
     // Try to create node view, fallback to serialization
-    var nodeView = nodeViewSerializer.tryCreateNodeView(targetNode);
+    var nodeView = serializer.tryCreateNodeView(targetNode);
     if (nodeView) {
       var wrapper = createWrapperWithStrikethrough();
       wrapper.append(nodeView.dom);

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

@@ -13,11 +13,11 @@ import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform'
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { createInlineChangedDecoration, createDeletedContentDecoration } from './decorations';
 import { getMarkChangeRanges } from './markDecorations';
+import { NodeViewSerializer } from './NodeViewSerializer';
 var calculateDecorations = function calculateDecorations(_ref) {
   var state = _ref.state,
     pluginState = _ref.pluginState,
-    editorView = _ref.editorView,
-    nodeViews = _ref.nodeViews;
+    nodeViewSerializer = _ref.nodeViewSerializer;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -55,9 +55,7 @@ var calculateDecorations = function calculateDecorations(_ref) {
       decorations.push(createDeletedContentDecoration({
         change: change,
         doc: originalDoc,
-        tr: tr,
-        editorView: editorView,
-        nodeViews: nodeViews
+        nodeViewSerializer: nodeViewSerializer
       }));
     }
   });
@@ -68,9 +66,11 @@ 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;
+  var nodeViewSerializer = new NodeViewSerializer({});
+  var setNodeViewSerializer = function setNodeViewSerializer(editorView) {
+    nodeViewSerializer.init({
+      editorView: editorView
+    });
   };
   return new SafePlugin({
     key: showDiffPluginKey,
@@ -85,12 +85,8 @@ export var createPlugin = function createPlugin(config) {
         };
       },
       apply: function apply(tr, currentPluginState, oldState, newState) {
-        var _editorView;
         var meta = tr.getMeta(showDiffPluginKey);
         var newPluginState = currentPluginState;
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var nodeViews = ((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.nodeViews) || {};
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
             // Update the plugin state with the new metadata
@@ -101,8 +97,7 @@ export var createPlugin = function createPlugin(config) {
             var decorations = calculateDecorations({
               state: newState,
               pluginState: newPluginState,
-              editorView: editorView,
-              nodeViews: nodeViews
+              nodeViewSerializer: nodeViewSerializer
             });
             // Update the decorations
             newPluginState.decorations = decorations;
@@ -121,7 +116,7 @@ export var createPlugin = function createPlugin(config) {
       }
     },
     view: function view(editorView) {
-      setEditorView(editorView);
+      setNodeViewSerializer(editorView);
       var isFirst = true;
       return {
         update: function update(view) {

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { showDiffPlugin } from './showDiffPlugin';
-export type { ShowDiffPlugin } from './showDiffPluginType';
+export type { ShowDiffPlugin, DiffParams } from './showDiffPluginType';

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

@@ -1,5 +1,5 @@
 import { type NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
-import type { Schema, Node as PMNode, Fragment } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode, Fragment } 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
@@ -34,16 +34,21 @@ export declare function isEditorViewWithNodeViews(view: EditorView): view is Edi
  * - Preventing node view creation for blocklisted node types
  */
 export declare class NodeViewSerializer {
-    private serializer;
     private editorView?;
-    private nodeViews;
+    private serializer?;
+    private nodeViews?;
     private nodeViewBlocklist;
     constructor(params: {
         blocklist?: string[];
         editorView?: EditorView;
-        nodeViews?: Record<string, NodeViewConstructor>;
-        schema: Schema;
     });
+    /**
+     * Initializes or reinitializes the NodeViewSerializer with a new EditorView.
+     * This allows the same serializer instance to be reused across different editor states.
+     */
+    init(params: {
+        editorView: EditorView;
+    }): void;
     /**
      * Attempts to create a node view for the given node.
      *

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

@@ -1,9 +1,7 @@
 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';
+import type { NodeViewSerializer } from './NodeViewSerializer';
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -17,9 +15,7 @@ export declare const createInlineChangedDecoration: (change: {
 interface DeletedContentDecorationProps {
     change: Change;
     doc: PMNode;
-    editorView?: EditorView;
-    nodeViews: Record<string, NodeViewConstructor>;
-    tr: Transaction;
+    nodeViewSerializer: NodeViewSerializer;
 }
 /**
  * Creates a widget to represent the deleted content in the editor
@@ -29,5 +25,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, editorView, nodeViews, }: DeletedContentDecorationProps) => Decoration;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, }: DeletedContentDecorationProps) => Decoration;
 export {};

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

@@ -1,2 +1,2 @@
 export { showDiffPlugin } from './showDiffPlugin';
-export type { ShowDiffPlugin } from './showDiffPluginType';
+export type { ShowDiffPlugin, DiffParams } from './showDiffPluginType';

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

@@ -1,5 +1,5 @@
 import { type NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
-import type { Schema, Node as PMNode, Fragment } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode, Fragment } 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
@@ -34,16 +34,21 @@ export declare function isEditorViewWithNodeViews(view: EditorView): view is Edi
  * - Preventing node view creation for blocklisted node types
  */
 export declare class NodeViewSerializer {
-    private serializer;
     private editorView?;
-    private nodeViews;
+    private serializer?;
+    private nodeViews?;
     private nodeViewBlocklist;
     constructor(params: {
         blocklist?: string[];
         editorView?: EditorView;
-        nodeViews?: Record<string, NodeViewConstructor>;
-        schema: Schema;
     });
+    /**
+     * Initializes or reinitializes the NodeViewSerializer with a new EditorView.
+     * This allows the same serializer instance to be reused across different editor states.
+     */
+    init(params: {
+        editorView: EditorView;
+    }): void;
     /**
      * Attempts to create a node view for the given node.
      *

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

@@ -1,9 +1,7 @@
 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';
+import type { NodeViewSerializer } from './NodeViewSerializer';
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -17,9 +15,7 @@ export declare const createInlineChangedDecoration: (change: {
 interface DeletedContentDecorationProps {
     change: Change;
     doc: PMNode;
-    editorView?: EditorView;
-    nodeViews: Record<string, NodeViewConstructor>;
-    tr: Transaction;
+    nodeViewSerializer: NodeViewSerializer;
 }
 /**
  * Creates a widget to represent the deleted content in the editor
@@ -29,5 +25,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, editorView, nodeViews, }: DeletedContentDecorationProps) => Decoration;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, }: DeletedContentDecorationProps) => Decoration;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "0.1.6",
+	"version": "0.2.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -27,17 +27,14 @@
 	},
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
-	"af:exports": {
-		".": "./src/index.ts"
-	},
 	"dependencies": {
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/tokens": "^6.0.0",
+		"@atlaskit/tokens": "^6.1.0",
 		"@babel/runtime": "^7.0.0",
 		"prosemirror-changeset": "^2.2.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.29.0",
+		"@atlaskit/editor-common": "^107.33.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {