@atlaskit/editor-plugin-track-changes 2.0.0 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-track-changes
 
+## 2.1.1
+
+### Patch Changes
+
+- [#190819](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190819)
+  [`20420774e83cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/20420774e83cc) -
+  Include Track chages plugin
+
+## 2.1.0
+
+### Minor Changes
+
+- [#189258](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189258)
+  [`e6411aa283a9e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e6411aa283a9e) -
+  Exposes new state to track if the diff plugin is available for use (ie. for external buttons).
+  Defaults to false and is set to true when changes are available.
+
 ## 2.0.0
 
 ### Major Changes

package/afm-cc/tsconfig.json

@@ -0,0 +1,27 @@
+{
+	"extends": "../../../../tsconfig.entry-points.confluence.json",
+	"compilerOptions": {
+		"target": "es5",
+		"composite": true,
+		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-plugin-track-changes",
+		"rootDir": "../"
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-cc/tsconfig.json"
+		}
+	]
+}

package/afm-jira/tsconfig.json

@@ -0,0 +1,27 @@
+{
+	"extends": "../../../../tsconfig.entry-points.jira.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../tsDist/@atlaskit__editor-plugin-track-changes/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-jira/tsconfig.json"
+		}
+	]
+}

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 style = (0, _lazyNodeView.convertToInlineCss)({
+  background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
+});
+
+/**
+ * Inline decoration used for insertions as the content already exists in the document
+ *
+ * @param change Changeset "change" containing information about the change content + range
+ * @returns Prosemirror inline decoration
+ */
+var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(change) {
+  return _view.Decoration.inline(change.fromB, change.toB, {
+    style: style
+  }, {});
+};
+var deletedContentStyle = (0, _lazyNodeView.convertToInlineCss)({
+  color: "var(--ds-text-accent-gray, #44546F)",
+  textDecoration: 'line-through'
+});
+
+/**
+ * Creates a widget to represent the deleted content in the editor
+ *
+ * @param props.change Changeset "change" containing information about the change content + range
+ * @param props.doc Baseline doc to compare against
+ * @param props.tr The relevant transaction this decoration is being created against
+ * @returns Prosemirror widget decoration
+ */
+var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
+  var change = _ref.change,
+    doc = _ref.doc,
+    tr = _ref.tr;
+  var dom = document.createElement('span');
+  dom.setAttribute('style', deletedContentStyle);
+  dom.appendChild(_model.DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(doc.slice(change.fromA, change.toA).content));
+
+  // Widget decoration used for deletions as the content is not in the document
+  // and we want to display the deleted content with a style.
+  return _view.Decoration.widget(change.fromB, dom, {
+    marks: []
+  });
+};

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

@@ -7,16 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.trackChangesPluginKey = exports.createTrackChangesPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _prosemirrorChangeset = require("prosemirror-changeset");
-var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _decorations = require("./decorations");
 var _types = require("./types");
 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; }
 var trackChangesPluginKey = exports.trackChangesPluginKey = new _state.PluginKey('trackChangesPlugin');
 var createTrackChangesPlugin = exports.createTrackChangesPlugin = function createTrackChangesPlugin() {
+  // Mark the state to be reset on next time the document has a meaningful change
+  var resetBaseline = false;
   return new _safePlugin.SafePlugin({
     key: trackChangesPluginKey,
     state: {
@@ -24,84 +26,73 @@ var createTrackChangesPlugin = exports.createTrackChangesPlugin = function creat
         var doc = _ref.doc;
         return {
           changes: _prosemirrorChangeset.ChangeSet.create(doc),
-          shouldChangesBeDispalyed: false,
+          shouldChangesBeDisplayed: false,
+          isShowDiffAvailable: false,
           baselineDoc: doc,
           numOfChanges: 0
         };
       },
       apply: function apply(tr, state, oldState, newState) {
         var metadata = tr.getMeta(trackChangesPluginKey);
-        if (metadata) {
-          if (metadata.action === _types.TOGGLE_TRACK_CHANGES_ACTION.TOGGLE_TRACK_CHANGES) {
-            return _objectSpread(_objectSpread({}, state), {}, {
-              baselineDoc: state.shouldChangesBeDispalyed ? tr.doc : state.baselineDoc,
-              shouldChangesBeDispalyed: !state.shouldChangesBeDispalyed,
-              changes: state.shouldChangesBeDispalyed ? _prosemirrorChangeset.ChangeSet.create(tr.doc) : state.changes
-            });
-          }
+        if (metadata && metadata.action === _types.TOGGLE_TRACK_CHANGES_ACTION.TOGGLE_TRACK_CHANGES) {
+          resetBaseline = true;
+          return _objectSpread(_objectSpread({}, state), {}, {
+            shouldChangesBeDisplayed: !state.shouldChangesBeDisplayed
+          });
         }
-        if (!tr.docChanged || tr.getMeta('isRemote')) {
+        var isDocChanged = tr.docChanged && tr.steps.some(function (step) {
+          return step instanceof _transform.ReplaceStep || step instanceof _transform.ReplaceAroundStep;
+        });
+        if (!isDocChanged || tr.getMeta('isRemote') || tr.getMeta('addToHistory') === false) {
           // If no document changes, return the old changeSet
           return state;
         }
+        var changes = resetBaseline ? _prosemirrorChangeset.ChangeSet.create(tr.docs[0]).addSteps(tr.doc,
+        // The new document
+        tr.mapping.maps,
+        // The set of changes
+        tr.docs[0].content // The old document
+        ) : state.changes.addSteps(tr.doc,
+        // The new document
+        tr.mapping.maps,
+        // The set of changes
+        tr.docs[0].content // The old document
+        );
+        var baselineDoc = resetBaseline ? tr.docs[0] : state.baselineDoc;
+        resetBaseline = false;
 
         // Create a new ChangeSet based on document changes
         return _objectSpread(_objectSpread({}, state), {}, {
-          shouldChangesBeDispalyed: false,
-          changes: state.changes.addSteps(tr.doc,
-          // The new document
-          tr.mapping.maps,
-          // The set of changes
-          tr.docs[0].content // The old document
-          )
+          baselineDoc: baselineDoc,
+          shouldChangesBeDisplayed: false,
+          changes: changes,
+          isShowDiffAvailable: true
         });
       }
     },
     props: {
       decorations: function decorations(state) {
         var pluginState = trackChangesPluginKey.getState(state);
-        if (pluginState && pluginState.shouldChangesBeDispalyed && pluginState.changes) {
-          var decoration = _view.DecorationSet.empty;
-          var decorations = [];
-          var changes = (0, _prosemirrorChangeset.simplifyChanges)(pluginState.changes.changes, state.doc);
-          var tr = state.tr;
-          changes.forEach(function (change) {
-            if (change.inserted.length > 0) {
-              var style = (0, _lazyNodeView.convertToInlineCss)({
-                background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
-                textDecoration: 'underline',
-                textDecorationStyle: 'dotted',
-                textDecorationThickness: "var(--ds-space-025, 2px)",
-                textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
-              });
-
-              // Inline decoration used for insertions as the content already exists in the document
-              // and we just want to style it.
-              var insertionInlineDecoration = _view.Decoration.inline(change.fromB, change.toB, {
-                style: style
-              }, {});
-              decorations.push(insertionInlineDecoration);
-            }
-            if (change.deleted.length > 0) {
-              var dom = document.createElement('span');
-              var _style = (0, _lazyNodeView.convertToInlineCss)({
-                color: "var(--ds-text-accent-gray, #44546F)",
-                textDecoration: 'line-through'
-              });
-              dom.setAttribute('style', _style);
-              dom.appendChild(_model.DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(pluginState === null || pluginState === void 0 ? void 0 : pluginState.baselineDoc.slice(change.fromA, change.toA).content));
-
-              // Widget decoration used for deletions as the content is not in the document
-              // and we want to display the deleted content with a style.
-              var deletionWidgetDecoration = _view.Decoration.widget(change.fromB, dom, {
-                marks: []
-              });
-              decorations.push(deletionWidgetDecoration);
-            }
-          });
-          return decoration.add(tr.doc, decorations);
+        if (!(pluginState !== null && pluginState !== void 0 && pluginState.shouldChangesBeDisplayed) || !pluginState.changes) {
+          return undefined;
         }
-        return undefined;
+        var decoration = _view.DecorationSet.empty;
+        var decorations = [];
+        var changes = (0, _prosemirrorChangeset.simplifyChanges)(pluginState.changes.changes, state.doc);
+        var tr = state.tr;
+        changes.forEach(function (change) {
+          if (change.inserted.length > 0) {
+            decorations.push((0, _decorations.createInlineChangedDecoration)(change));
+          }
+          if (change.deleted.length > 0) {
+            decorations.push((0, _decorations.createDeletedContentDecoration)({
+              change: change,
+              doc: pluginState === null || pluginState === void 0 ? void 0 : pluginState.baselineDoc,
+              tr: tr
+            }));
+          }
+        });
+        return decoration.add(tr.doc, decorations);
       }
     }
   });

package/dist/cjs/trackChangesPlugin.js

@@ -24,14 +24,16 @@ var trackChangesPlugin = exports.trackChangesPlugin = function trackChangesPlugi
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _trackChangesPluginKe;
+      var _trackChangesPluginKe, _trackChangesPluginKe2;
       if (!editorState) {
         return {
-          isDisplayingChanges: false
+          isDisplayingChanges: false,
+          isShowDiffAvailable: false
         };
       }
       return {
-        isDisplayingChanges: Boolean((_trackChangesPluginKe = _main.trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe === void 0 ? void 0 : _trackChangesPluginKe.enable)
+        isDisplayingChanges: Boolean((_trackChangesPluginKe = _main.trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe === void 0 ? void 0 : _trackChangesPluginKe.shouldChangesBeDisplayed),
+        isShowDiffAvailable: Boolean((_trackChangesPluginKe2 = _main.trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe2 === void 0 ? void 0 : _trackChangesPluginKe2.isShowDiffAvailable)
       };
     }
   };

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

@@ -0,0 +1,48 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+const style = convertToInlineCss({
+  background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
+});
+
+/**
+ * Inline decoration used for insertions as the content already exists in the document
+ *
+ * @param change Changeset "change" containing information about the change content + range
+ * @returns Prosemirror inline decoration
+ */
+export const createInlineChangedDecoration = change => Decoration.inline(change.fromB, change.toB, {
+  style
+}, {});
+const deletedContentStyle = convertToInlineCss({
+  color: "var(--ds-text-accent-gray, #44546F)",
+  textDecoration: 'line-through'
+});
+
+/**
+ * Creates a widget to represent the deleted content in the editor
+ *
+ * @param props.change Changeset "change" containing information about the change content + range
+ * @param props.doc Baseline doc to compare against
+ * @param props.tr The relevant transaction this decoration is being created against
+ * @returns Prosemirror widget decoration
+ */
+export const createDeletedContentDecoration = ({
+  change,
+  doc,
+  tr
+}) => {
+  const dom = document.createElement('span');
+  dom.setAttribute('style', deletedContentStyle);
+  dom.appendChild(DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(doc.slice(change.fromA, change.toA).content));
+
+  // Widget decoration used for deletions as the content is not in the document
+  // and we want to display the deleted content with a style.
+  return Decoration.widget(change.fromB, dom, {
+    marks: []
+  });
+};

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

@@ -1,12 +1,14 @@
 import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
-import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { createInlineChangedDecoration, createDeletedContentDecoration } from './decorations';
 import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './types';
 export const trackChangesPluginKey = new PluginKey('trackChangesPlugin');
 export const createTrackChangesPlugin = () => {
+  // Mark the state to be reset on next time the document has a meaningful change
+  let resetBaseline = false;
   return new SafePlugin({
     key: trackChangesPluginKey,
     state: {
@@ -15,86 +17,73 @@ export const createTrackChangesPlugin = () => {
       }) {
         return {
           changes: ChangeSet.create(doc),
-          shouldChangesBeDispalyed: false,
+          shouldChangesBeDisplayed: false,
+          isShowDiffAvailable: false,
           baselineDoc: doc,
           numOfChanges: 0
         };
       },
       apply(tr, state, oldState, newState) {
         const metadata = tr.getMeta(trackChangesPluginKey);
-        if (metadata) {
-          if (metadata.action === ACTION.TOGGLE_TRACK_CHANGES) {
-            return {
-              ...state,
-              baselineDoc: state.shouldChangesBeDispalyed ? tr.doc : state.baselineDoc,
-              shouldChangesBeDispalyed: !state.shouldChangesBeDispalyed,
-              changes: state.shouldChangesBeDispalyed ? ChangeSet.create(tr.doc) : state.changes
-            };
-          }
+        if (metadata && metadata.action === ACTION.TOGGLE_TRACK_CHANGES) {
+          resetBaseline = true;
+          return {
+            ...state,
+            shouldChangesBeDisplayed: !state.shouldChangesBeDisplayed
+          };
         }
-        if (!tr.docChanged || tr.getMeta('isRemote')) {
+        const isDocChanged = tr.docChanged && tr.steps.some(step => step instanceof ReplaceStep || step instanceof ReplaceAroundStep);
+        if (!isDocChanged || tr.getMeta('isRemote') || tr.getMeta('addToHistory') === false) {
           // If no document changes, return the old changeSet
           return state;
         }
+        const changes = resetBaseline ? ChangeSet.create(tr.docs[0]).addSteps(tr.doc,
+        // The new document
+        tr.mapping.maps,
+        // The set of changes
+        tr.docs[0].content // The old document
+        ) : state.changes.addSteps(tr.doc,
+        // The new document
+        tr.mapping.maps,
+        // The set of changes
+        tr.docs[0].content // The old document
+        );
+        const baselineDoc = resetBaseline ? tr.docs[0] : state.baselineDoc;
+        resetBaseline = false;
 
         // Create a new ChangeSet based on document changes
         return {
           ...state,
-          shouldChangesBeDispalyed: false,
-          changes: state.changes.addSteps(tr.doc,
-          // The new document
-          tr.mapping.maps,
-          // The set of changes
-          tr.docs[0].content // The old document
-          )
+          baselineDoc,
+          shouldChangesBeDisplayed: false,
+          changes,
+          isShowDiffAvailable: true
         };
       }
     },
     props: {
       decorations: state => {
         const pluginState = trackChangesPluginKey.getState(state);
-        if (pluginState && pluginState.shouldChangesBeDispalyed && pluginState.changes) {
-          const decoration = DecorationSet.empty;
-          const decorations = [];
-          const changes = simplifyChanges(pluginState.changes.changes, state.doc);
-          const tr = state.tr;
-          changes.forEach(change => {
-            if (change.inserted.length > 0) {
-              const style = convertToInlineCss({
-                background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
-                textDecoration: 'underline',
-                textDecorationStyle: 'dotted',
-                textDecorationThickness: "var(--ds-space-025, 2px)",
-                textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
-              });
-
-              // Inline decoration used for insertions as the content already exists in the document
-              // and we just want to style it.
-              const insertionInlineDecoration = Decoration.inline(change.fromB, change.toB, {
-                style
-              }, {});
-              decorations.push(insertionInlineDecoration);
-            }
-            if (change.deleted.length > 0) {
-              const dom = document.createElement('span');
-              const style = convertToInlineCss({
-                color: "var(--ds-text-accent-gray, #44546F)",
-                textDecoration: 'line-through'
-              });
-              dom.setAttribute('style', style);
-              dom.appendChild(DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(pluginState === null || pluginState === void 0 ? void 0 : pluginState.baselineDoc.slice(change.fromA, change.toA).content));
-
-              // Widget decoration used for deletions as the content is not in the document
-              // and we want to display the deleted content with a style.
-              const deletionWidgetDecoration = Decoration.widget(change.fromB, dom, {
-                marks: []
-              });
-              decorations.push(deletionWidgetDecoration);
-            }
-          });
-          return decoration.add(tr.doc, decorations);
+        if (!(pluginState !== null && pluginState !== void 0 && pluginState.shouldChangesBeDisplayed) || !pluginState.changes) {
+          return undefined;
         }
-        return undefined;
+        const decoration = DecorationSet.empty;
+        const decorations = [];
+        const changes = simplifyChanges(pluginState.changes.changes, state.doc);
+        const tr = state.tr;
+        changes.forEach(change => {
+          if (change.inserted.length > 0) {
+            decorations.push(createInlineChangedDecoration(change));
+          }
+          if (change.deleted.length > 0) {
+            decorations.push(createDeletedContentDecoration({
+              change,
+              doc: pluginState === null || pluginState === void 0 ? void 0 : pluginState.baselineDoc,
+              tr
+            }));
+          }
+        });
+        return decoration.add(tr.doc, decorations);
       }
     }
   });

package/dist/es2019/trackChangesPlugin.js

@@ -18,14 +18,16 @@ export const trackChangesPlugin = () => ({
     }
   },
   getSharedState: editorState => {
-    var _trackChangesPluginKe;
+    var _trackChangesPluginKe, _trackChangesPluginKe2;
     if (!editorState) {
       return {
-        isDisplayingChanges: false
+        isDisplayingChanges: false,
+        isShowDiffAvailable: false
       };
     }
     return {
-      isDisplayingChanges: Boolean((_trackChangesPluginKe = trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe === void 0 ? void 0 : _trackChangesPluginKe.enable)
+      isDisplayingChanges: Boolean((_trackChangesPluginKe = trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe === void 0 ? void 0 : _trackChangesPluginKe.shouldChangesBeDisplayed),
+      isShowDiffAvailable: Boolean((_trackChangesPluginKe2 = trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe2 === void 0 ? void 0 : _trackChangesPluginKe2.isShowDiffAvailable)
     };
   }
 });

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

@@ -0,0 +1,49 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+var style = convertToInlineCss({
+  background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
+});
+
+/**
+ * Inline decoration used for insertions as the content already exists in the document
+ *
+ * @param change Changeset "change" containing information about the change content + range
+ * @returns Prosemirror inline decoration
+ */
+export var createInlineChangedDecoration = function createInlineChangedDecoration(change) {
+  return Decoration.inline(change.fromB, change.toB, {
+    style: style
+  }, {});
+};
+var deletedContentStyle = convertToInlineCss({
+  color: "var(--ds-text-accent-gray, #44546F)",
+  textDecoration: 'line-through'
+});
+
+/**
+ * Creates a widget to represent the deleted content in the editor
+ *
+ * @param props.change Changeset "change" containing information about the change content + range
+ * @param props.doc Baseline doc to compare against
+ * @param props.tr The relevant transaction this decoration is being created against
+ * @returns Prosemirror widget decoration
+ */
+export var createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
+  var change = _ref.change,
+    doc = _ref.doc,
+    tr = _ref.tr;
+  var dom = document.createElement('span');
+  dom.setAttribute('style', deletedContentStyle);
+  dom.appendChild(DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(doc.slice(change.fromA, change.toA).content));
+
+  // Widget decoration used for deletions as the content is not in the document
+  // and we want to display the deleted content with a style.
+  return Decoration.widget(change.fromB, dom, {
+    marks: []
+  });
+};

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

@@ -2,14 +2,16 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
-import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { createInlineChangedDecoration, createDeletedContentDecoration } from './decorations';
 import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './types';
 export var trackChangesPluginKey = new PluginKey('trackChangesPlugin');
 export var createTrackChangesPlugin = function createTrackChangesPlugin() {
+  // Mark the state to be reset on next time the document has a meaningful change
+  var resetBaseline = false;
   return new SafePlugin({
     key: trackChangesPluginKey,
     state: {
@@ -17,84 +19,73 @@ export var createTrackChangesPlugin = function createTrackChangesPlugin() {
         var doc = _ref.doc;
         return {
           changes: ChangeSet.create(doc),
-          shouldChangesBeDispalyed: false,
+          shouldChangesBeDisplayed: false,
+          isShowDiffAvailable: false,
           baselineDoc: doc,
           numOfChanges: 0
         };
       },
       apply: function apply(tr, state, oldState, newState) {
         var metadata = tr.getMeta(trackChangesPluginKey);
-        if (metadata) {
-          if (metadata.action === ACTION.TOGGLE_TRACK_CHANGES) {
-            return _objectSpread(_objectSpread({}, state), {}, {
-              baselineDoc: state.shouldChangesBeDispalyed ? tr.doc : state.baselineDoc,
-              shouldChangesBeDispalyed: !state.shouldChangesBeDispalyed,
-              changes: state.shouldChangesBeDispalyed ? ChangeSet.create(tr.doc) : state.changes
-            });
-          }
+        if (metadata && metadata.action === ACTION.TOGGLE_TRACK_CHANGES) {
+          resetBaseline = true;
+          return _objectSpread(_objectSpread({}, state), {}, {
+            shouldChangesBeDisplayed: !state.shouldChangesBeDisplayed
+          });
         }
-        if (!tr.docChanged || tr.getMeta('isRemote')) {
+        var isDocChanged = tr.docChanged && tr.steps.some(function (step) {
+          return step instanceof ReplaceStep || step instanceof ReplaceAroundStep;
+        });
+        if (!isDocChanged || tr.getMeta('isRemote') || tr.getMeta('addToHistory') === false) {
           // If no document changes, return the old changeSet
           return state;
         }
+        var changes = resetBaseline ? ChangeSet.create(tr.docs[0]).addSteps(tr.doc,
+        // The new document
+        tr.mapping.maps,
+        // The set of changes
+        tr.docs[0].content // The old document
+        ) : state.changes.addSteps(tr.doc,
+        // The new document
+        tr.mapping.maps,
+        // The set of changes
+        tr.docs[0].content // The old document
+        );
+        var baselineDoc = resetBaseline ? tr.docs[0] : state.baselineDoc;
+        resetBaseline = false;
 
         // Create a new ChangeSet based on document changes
         return _objectSpread(_objectSpread({}, state), {}, {
-          shouldChangesBeDispalyed: false,
-          changes: state.changes.addSteps(tr.doc,
-          // The new document
-          tr.mapping.maps,
-          // The set of changes
-          tr.docs[0].content // The old document
-          )
+          baselineDoc: baselineDoc,
+          shouldChangesBeDisplayed: false,
+          changes: changes,
+          isShowDiffAvailable: true
         });
       }
     },
     props: {
       decorations: function decorations(state) {
         var pluginState = trackChangesPluginKey.getState(state);
-        if (pluginState && pluginState.shouldChangesBeDispalyed && pluginState.changes) {
-          var decoration = DecorationSet.empty;
-          var decorations = [];
-          var changes = simplifyChanges(pluginState.changes.changes, state.doc);
-          var tr = state.tr;
-          changes.forEach(function (change) {
-            if (change.inserted.length > 0) {
-              var style = convertToInlineCss({
-                background: "var(--ds-background-accent-purple-subtlest, #F3F0FF)",
-                textDecoration: 'underline',
-                textDecorationStyle: 'dotted',
-                textDecorationThickness: "var(--ds-space-025, 2px)",
-                textDecorationColor: "var(--ds-border-accent-purple, #8270DB)"
-              });
-
-              // Inline decoration used for insertions as the content already exists in the document
-              // and we just want to style it.
-              var insertionInlineDecoration = Decoration.inline(change.fromB, change.toB, {
-                style: style
-              }, {});
-              decorations.push(insertionInlineDecoration);
-            }
-            if (change.deleted.length > 0) {
-              var dom = document.createElement('span');
-              var _style = convertToInlineCss({
-                color: "var(--ds-text-accent-gray, #44546F)",
-                textDecoration: 'line-through'
-              });
-              dom.setAttribute('style', _style);
-              dom.appendChild(DOMSerializer.fromSchema(tr.doc.type.schema).serializeFragment(pluginState === null || pluginState === void 0 ? void 0 : pluginState.baselineDoc.slice(change.fromA, change.toA).content));
-
-              // Widget decoration used for deletions as the content is not in the document
-              // and we want to display the deleted content with a style.
-              var deletionWidgetDecoration = Decoration.widget(change.fromB, dom, {
-                marks: []
-              });
-              decorations.push(deletionWidgetDecoration);
-            }
-          });
-          return decoration.add(tr.doc, decorations);
+        if (!(pluginState !== null && pluginState !== void 0 && pluginState.shouldChangesBeDisplayed) || !pluginState.changes) {
+          return undefined;
         }
-        return undefined;
+        var decoration = DecorationSet.empty;
+        var decorations = [];
+        var changes = simplifyChanges(pluginState.changes.changes, state.doc);
+        var tr = state.tr;
+        changes.forEach(function (change) {
+          if (change.inserted.length > 0) {
+            decorations.push(createInlineChangedDecoration(change));
+          }
+          if (change.deleted.length > 0) {
+            decorations.push(createDeletedContentDecoration({
+              change: change,
+              doc: pluginState === null || pluginState === void 0 ? void 0 : pluginState.baselineDoc,
+              tr: tr
+            }));
+          }
+        });
+        return decoration.add(tr.doc, decorations);
       }
     }
   });

package/dist/esm/trackChangesPlugin.js

@@ -18,14 +18,16 @@ export var trackChangesPlugin = function trackChangesPlugin() {
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _trackChangesPluginKe;
+      var _trackChangesPluginKe, _trackChangesPluginKe2;
       if (!editorState) {
         return {
-          isDisplayingChanges: false
+          isDisplayingChanges: false,
+          isShowDiffAvailable: false
         };
       }
       return {
-        isDisplayingChanges: Boolean((_trackChangesPluginKe = trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe === void 0 ? void 0 : _trackChangesPluginKe.enable)
+        isDisplayingChanges: Boolean((_trackChangesPluginKe = trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe === void 0 ? void 0 : _trackChangesPluginKe.shouldChangesBeDisplayed),
+        isShowDiffAvailable: Boolean((_trackChangesPluginKe2 = trackChangesPluginKey.getState(editorState)) === null || _trackChangesPluginKe2 === void 0 ? void 0 : _trackChangesPluginKe2.isShowDiffAvailable)
       };
     }
   };

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

@@ -0,0 +1,26 @@
+import type { Change } from 'prosemirror-changeset';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Inline decoration used for insertions as the content already exists in the document
+ *
+ * @param change Changeset "change" containing information about the change content + range
+ * @returns Prosemirror inline decoration
+ */
+export declare const createInlineChangedDecoration: (change: Change) => Decoration;
+interface DeletedContentDecorationProps {
+    change: Change;
+    doc: PMNode;
+    tr: Transaction;
+}
+/**
+ * Creates a widget to represent the deleted content in the editor
+ *
+ * @param props.change Changeset "change" containing information about the change content + range
+ * @param props.doc Baseline doc to compare against
+ * @param props.tr The relevant transaction this decoration is being created against
+ * @returns Prosemirror widget decoration
+ */
+export declare const createDeletedContentDecoration: ({ change, doc, tr, }: DeletedContentDecorationProps) => Decoration;
+export {};

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

@@ -2,9 +2,10 @@ import { ChangeSet } from 'prosemirror-changeset';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export declare const trackChangesPluginKey: PluginKey<any>;
+export declare const trackChangesPluginKey: PluginKey<TrackChangesPluginState>;
 type TrackChangesPluginState = {
-    shouldChangesBeDispalyed: boolean;
+    shouldChangesBeDisplayed: boolean;
+    isShowDiffAvailable: boolean;
     baselineDoc: PMNode;
     changes: ChangeSet;
 };

package/dist/types/trackChangesPluginType.d.ts

@@ -12,5 +12,11 @@ export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
          * Defaults to false.
          */
         isDisplayingChanges: boolean;
+        /**
+         * If there are changes in the document that determine if track changes button
+         * should be enabled.
+         * This will only be false initially before any changes in the session.
+         */
+        isShowDiffAvailable: boolean;
     };
 }>;

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

@@ -0,0 +1,26 @@
+import type { Change } from 'prosemirror-changeset';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Inline decoration used for insertions as the content already exists in the document
+ *
+ * @param change Changeset "change" containing information about the change content + range
+ * @returns Prosemirror inline decoration
+ */
+export declare const createInlineChangedDecoration: (change: Change) => Decoration;
+interface DeletedContentDecorationProps {
+    change: Change;
+    doc: PMNode;
+    tr: Transaction;
+}
+/**
+ * Creates a widget to represent the deleted content in the editor
+ *
+ * @param props.change Changeset "change" containing information about the change content + range
+ * @param props.doc Baseline doc to compare against
+ * @param props.tr The relevant transaction this decoration is being created against
+ * @returns Prosemirror widget decoration
+ */
+export declare const createDeletedContentDecoration: ({ change, doc, tr, }: DeletedContentDecorationProps) => Decoration;
+export {};

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

@@ -2,9 +2,10 @@ import { ChangeSet } from 'prosemirror-changeset';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export declare const trackChangesPluginKey: PluginKey<any>;
+export declare const trackChangesPluginKey: PluginKey<TrackChangesPluginState>;
 type TrackChangesPluginState = {
-    shouldChangesBeDispalyed: boolean;
+    shouldChangesBeDisplayed: boolean;
+    isShowDiffAvailable: boolean;
     baselineDoc: PMNode;
     changes: ChangeSet;
 };

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

@@ -12,5 +12,11 @@ export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
          * Defaults to false.
          */
         isDisplayingChanges: boolean;
+        /**
+         * If there are changes in the document that determine if track changes button
+         * should be enabled.
+         * This will only be false initially before any changes in the session.
+         */
+        isShowDiffAvailable: boolean;
     };
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-track-changes",
-	"version": "2.0.0",
+	"version": "2.1.1",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,12 +32,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/tokens": "^5.5.0",
+		"@atlaskit/tokens": "^5.6.0",
 		"@babel/runtime": "^7.0.0",
 		"prosemirror-changeset": "^2.2.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.7.0",
+		"@atlaskit/editor-common": "^107.12.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {