@atlaskit/editor-plugin-track-changes 1.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-track-changes
 
+## 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
+
+- [#185139](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185139)
+  [`710f9b65a743a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/710f9b65a743a) -
+  [EDITOR-1014] Setup basic plugin diffing functionality and documentation
+
 ## 1.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,66 @@
+{
+	"extends": "../../../../tsconfig.entry-points.jira.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../tsDist/@atlaskit__editor-plugin-toolbar-lists-indentation/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/css/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-analytics/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-block-type/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-feature-flags/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-indentation/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-list/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-primary-toolbar/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection-toolbar/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-tasks-and-decisions/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-shared-styles/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../tmp-editor-statsig/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-jira/tsconfig.json"
+		}
+	]
+}

package/afm-post-office/tsconfig.json

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

package/afm-volt/tsconfig.json

@@ -0,0 +1,27 @@
+{
+	"extends": "../../../../tsconfig.entry-points.volt.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../volt/tsDist/@atlaskit__editor-plugin-toolbar-lists-indentation/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	],
+	"references": [
+		{
+			"path": "../editor-common/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/tokens/tsconfig.app.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

@@ -1,28 +1,98 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.trackChangesPluginKey = exports.createTrackChangesPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _prosemirrorChangeset = require("prosemirror-changeset");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var trackChangesPluginKey = exports.trackChangesPluginKey = new _state.PluginKey('showDiffPlugin');
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-
+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: {
-      init: function init() {
-        return {};
+      init: function init(_, _ref) {
+        var doc = _ref.doc;
+        return {
+          changes: _prosemirrorChangeset.ChangeSet.create(doc),
+          shouldChangesBeDisplayed: false,
+          isShowDiffAvailable: false,
+          baselineDoc: doc,
+          numOfChanges: 0
+        };
       },
-      apply: function apply(tr, currentPluginState) {
-        var meta = tr.getMeta(trackChangesPluginKey);
-        if (meta) {
-          return meta;
+      apply: function apply(tr, state, oldState, newState) {
+        var metadata = tr.getMeta(trackChangesPluginKey);
+        if (metadata && metadata.action === _types.TOGGLE_TRACK_CHANGES_ACTION.TOGGLE_TRACK_CHANGES) {
+          resetBaseline = true;
+          return _objectSpread(_objectSpread({}, state), {}, {
+            shouldChangesBeDisplayed: !state.shouldChangesBeDisplayed
+          });
+        }
+        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), {}, {
+          baselineDoc: baselineDoc,
+          shouldChangesBeDisplayed: false,
+          changes: changes,
+          isShowDiffAvailable: true
+        });
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var pluginState = trackChangesPluginKey.getState(state);
+        if (!(pluginState !== null && pluginState !== void 0 && pluginState.shouldChangesBeDisplayed) || !pluginState.changes) {
+          return undefined;
         }
-        return currentPluginState;
+        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/pm-plugins/types.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOGGLE_TRACK_CHANGES_ACTION = void 0;
+var TOGGLE_TRACK_CHANGES_ACTION = exports.TOGGLE_TRACK_CHANGES_ACTION = /*#__PURE__*/function (TOGGLE_TRACK_CHANGES_ACTION) {
+  TOGGLE_TRACK_CHANGES_ACTION["TOGGLE_TRACK_CHANGES"] = "TOGGLE_TRACK_CHANGES";
+  return TOGGLE_TRACK_CHANGES_ACTION;
+}({});

package/dist/cjs/trackChangesPlugin.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.trackChangesPlugin = void 0;
 var _main = require("./pm-plugins/main");
+var _types = require("./pm-plugins/types");
 var trackChangesPlugin = exports.trackChangesPlugin = function trackChangesPlugin() {
   return {
     name: 'trackChanges',
@@ -15,10 +16,25 @@ var trackChangesPlugin = exports.trackChangesPlugin = function trackChangesPlugi
       }];
     },
     commands: {
-      setBaseline: function setBaseline(_ref) {
+      toggleChanges: function toggleChanges(_ref) {
         var tr = _ref.tr;
-        return tr.setMeta('setBaseline', true);
+        return tr.setMeta(_main.trackChangesPluginKey, {
+          action: _types.TOGGLE_TRACK_CHANGES_ACTION.TOGGLE_TRACK_CHANGES
+        });
       }
+    },
+    getSharedState: function getSharedState(editorState) {
+      var _trackChangesPluginKe, _trackChangesPluginKe2;
+      if (!editorState) {
+        return {
+          isDisplayingChanges: false,
+          isShowDiffAvailable: false
+        };
+      }
+      return {
+        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,22 +1,89 @@
+import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export const trackChangesPluginKey = new PluginKey('showDiffPlugin');
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-
+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: {
-      init() {
-        return {};
+      init(_, {
+        doc
+      }) {
+        return {
+          changes: ChangeSet.create(doc),
+          shouldChangesBeDisplayed: false,
+          isShowDiffAvailable: false,
+          baselineDoc: doc,
+          numOfChanges: 0
+        };
       },
-      apply: (tr, currentPluginState) => {
-        const meta = tr.getMeta(trackChangesPluginKey);
-        if (meta) {
-          return meta;
+      apply(tr, state, oldState, newState) {
+        const metadata = tr.getMeta(trackChangesPluginKey);
+        if (metadata && metadata.action === ACTION.TOGGLE_TRACK_CHANGES) {
+          resetBaseline = true;
+          return {
+            ...state,
+            shouldChangesBeDisplayed: !state.shouldChangesBeDisplayed
+          };
+        }
+        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,
+          baselineDoc,
+          shouldChangesBeDisplayed: false,
+          changes,
+          isShowDiffAvailable: true
+        };
+      }
+    },
+    props: {
+      decorations: state => {
+        const pluginState = trackChangesPluginKey.getState(state);
+        if (!(pluginState !== null && pluginState !== void 0 && pluginState.shouldChangesBeDisplayed) || !pluginState.changes) {
+          return undefined;
         }
-        return currentPluginState;
+        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/pm-plugins/types.js

@@ -0,0 +1,4 @@
+export let TOGGLE_TRACK_CHANGES_ACTION = /*#__PURE__*/function (TOGGLE_TRACK_CHANGES_ACTION) {
+  TOGGLE_TRACK_CHANGES_ACTION["TOGGLE_TRACK_CHANGES"] = "TOGGLE_TRACK_CHANGES";
+  return TOGGLE_TRACK_CHANGES_ACTION;
+}({});

package/dist/es2019/trackChangesPlugin.js

@@ -1,4 +1,5 @@
-import { createTrackChangesPlugin } from './pm-plugins/main';
+import { createTrackChangesPlugin, trackChangesPluginKey } from './pm-plugins/main';
+import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './pm-plugins/types';
 export const trackChangesPlugin = () => ({
   name: 'trackChanges',
   pmPlugins() {
@@ -8,10 +9,25 @@ export const trackChangesPlugin = () => ({
     }];
   },
   commands: {
-    setBaseline: ({
+    toggleChanges: ({
       tr
     }) => {
-      return tr.setMeta('setBaseline', true);
+      return tr.setMeta(trackChangesPluginKey, {
+        action: ACTION.TOGGLE_TRACK_CHANGES
+      });
     }
+  },
+  getSharedState: editorState => {
+    var _trackChangesPluginKe, _trackChangesPluginKe2;
+    if (!editorState) {
+      return {
+        isDisplayingChanges: false,
+        isShowDiffAvailable: false
+      };
+    }
+    return {
+      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

@@ -1,22 +1,91 @@
+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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export var trackChangesPluginKey = new PluginKey('showDiffPlugin');
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-
+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: {
-      init: function init() {
-        return {};
+      init: function init(_, _ref) {
+        var doc = _ref.doc;
+        return {
+          changes: ChangeSet.create(doc),
+          shouldChangesBeDisplayed: false,
+          isShowDiffAvailable: false,
+          baselineDoc: doc,
+          numOfChanges: 0
+        };
       },
-      apply: function apply(tr, currentPluginState) {
-        var meta = tr.getMeta(trackChangesPluginKey);
-        if (meta) {
-          return meta;
+      apply: function apply(tr, state, oldState, newState) {
+        var metadata = tr.getMeta(trackChangesPluginKey);
+        if (metadata && metadata.action === ACTION.TOGGLE_TRACK_CHANGES) {
+          resetBaseline = true;
+          return _objectSpread(_objectSpread({}, state), {}, {
+            shouldChangesBeDisplayed: !state.shouldChangesBeDisplayed
+          });
+        }
+        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), {}, {
+          baselineDoc: baselineDoc,
+          shouldChangesBeDisplayed: false,
+          changes: changes,
+          isShowDiffAvailable: true
+        });
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var pluginState = trackChangesPluginKey.getState(state);
+        if (!(pluginState !== null && pluginState !== void 0 && pluginState.shouldChangesBeDisplayed) || !pluginState.changes) {
+          return undefined;
         }
-        return currentPluginState;
+        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/pm-plugins/types.js

@@ -0,0 +1,4 @@
+export var TOGGLE_TRACK_CHANGES_ACTION = /*#__PURE__*/function (TOGGLE_TRACK_CHANGES_ACTION) {
+  TOGGLE_TRACK_CHANGES_ACTION["TOGGLE_TRACK_CHANGES"] = "TOGGLE_TRACK_CHANGES";
+  return TOGGLE_TRACK_CHANGES_ACTION;
+}({});

package/dist/esm/trackChangesPlugin.js

@@ -1,4 +1,5 @@
-import { createTrackChangesPlugin } from './pm-plugins/main';
+import { createTrackChangesPlugin, trackChangesPluginKey } from './pm-plugins/main';
+import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './pm-plugins/types';
 export var trackChangesPlugin = function trackChangesPlugin() {
   return {
     name: 'trackChanges',
@@ -9,10 +10,25 @@ export var trackChangesPlugin = function trackChangesPlugin() {
       }];
     },
     commands: {
-      setBaseline: function setBaseline(_ref) {
+      toggleChanges: function toggleChanges(_ref) {
         var tr = _ref.tr;
-        return tr.setMeta('setBaseline', true);
+        return tr.setMeta(trackChangesPluginKey, {
+          action: ACTION.TOGGLE_TRACK_CHANGES
+        });
       }
+    },
+    getSharedState: function getSharedState(editorState) {
+      var _trackChangesPluginKe, _trackChangesPluginKe2;
+      if (!editorState) {
+        return {
+          isDisplayingChanges: false,
+          isShowDiffAvailable: false
+        };
+      }
+      return {
+        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

@@ -1,6 +1,13 @@
+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>;
-type TrackChangesPluginState = {};
+export declare const trackChangesPluginKey: PluginKey<TrackChangesPluginState>;
+type TrackChangesPluginState = {
+    shouldChangesBeDisplayed: boolean;
+    isShowDiffAvailable: boolean;
+    baselineDoc: PMNode;
+    changes: ChangeSet;
+};
 export declare const createTrackChangesPlugin: () => SafePlugin<TrackChangesPluginState>;
 export {};

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

@@ -0,0 +1,3 @@
+export declare enum TOGGLE_TRACK_CHANGES_ACTION {
+    TOGGLE_TRACK_CHANGES = "TOGGLE_TRACK_CHANGES"
+}

package/dist/types/trackChangesPluginType.d.ts

@@ -1,2 +1,22 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-export type TrackChangesPlugin = NextEditorPlugin<'trackChanges'>;
+import type { EditorCommand, NextEditorPlugin } from '@atlaskit/editor-common/types';
+export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
+    commands: {
+        /**
+         * Toggles the displaying of changes in the editor.
+         */
+        toggleChanges: EditorCommand;
+    };
+    sharedState: {
+        /**
+         * Whether the track changes feature is currently displaying changes.
+         * 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

@@ -1,6 +1,13 @@
+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>;
-type TrackChangesPluginState = {};
+export declare const trackChangesPluginKey: PluginKey<TrackChangesPluginState>;
+type TrackChangesPluginState = {
+    shouldChangesBeDisplayed: boolean;
+    isShowDiffAvailable: boolean;
+    baselineDoc: PMNode;
+    changes: ChangeSet;
+};
 export declare const createTrackChangesPlugin: () => SafePlugin<TrackChangesPluginState>;
 export {};

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

@@ -0,0 +1,3 @@
+export declare enum TOGGLE_TRACK_CHANGES_ACTION {
+    TOGGLE_TRACK_CHANGES = "TOGGLE_TRACK_CHANGES"
+}

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

@@ -1,2 +1,22 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-export type TrackChangesPlugin = NextEditorPlugin<'trackChanges'>;
+import type { EditorCommand, NextEditorPlugin } from '@atlaskit/editor-common/types';
+export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
+    commands: {
+        /**
+         * Toggles the displaying of changes in the editor.
+         */
+        toggleChanges: EditorCommand;
+    };
+    sharedState: {
+        /**
+         * Whether the track changes feature is currently displaying changes.
+         * 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/docs/0-intro.tsx

@@ -30,7 +30,72 @@ The \`dependencies\`, \`configuration\`, \`state\`, \`actions\`, and \`commands\
 below:
 
 ${code`
-type TrackChangesPlugin = NextEditorPlugin<'trackChanges'>;
+type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
+	commands: {
+		toggleChanges: EditorCommand
+	}
+}>;
+`}
+
+  ### Example Usage
+---
+${code`
+import React from 'react';
+
+import Button from '@atlaskit/button/new';
+import { cssMap } from '@atlaskit/css';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ComposableEditor } from '@atlaskit/editor-core/composable-editor';
+import { usePreset } from '@atlaskit/editor-core/use-preset';
+import { basePlugin } from '@atlaskit/editor-plugins/base';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+import { trackChangesPlugin } from '../src/trackChangesPlugin';
+
+const styles = cssMap({
+	aboveEditor: {
+		paddingTop: token('space.100'),
+		paddingBottom: token('space.100'),
+	},
+	everythingContainer: {
+		paddingTop: token('space.200'),
+		paddingBottom: token('space.200'),
+		paddingLeft: token('space.200'),
+		paddingRight: token('space.200'),
+	},
+});
+
+function Editor() {
+	const { preset, editorApi } = usePreset(
+		(builder) =>
+			builder.add(basePlugin).add(trackChangesPlugin),
+		[],
+	);
+
+	const isSelected = useSharedPluginStateSelector(editorApi, 'trackChanges.isDisplayingChanges');
+
+	return (
+		<Box xcss={styles.everythingContainer}>
+			<Box xcss={styles.aboveEditor}>
+				<Button
+					appearance="primary"
+					onClick={() => {
+						editorApi?.core.actions.execute(
+							editorApi?.trackChanges.commands.toggleChanges,
+						);
+					}}
+					isSelected={isSelected}
+				>
+					Show Diff
+				</Button>
+			</Box>
+			<ComposableEditor preset={preset} />
+		</Box>
+	);
+}
+
+export default Editor;
 `}
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-track-changes",
-	"version": "1.0.0",
+	"version": "2.1.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,10 +32,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@babel/runtime": "^7.0.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.9.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {