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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 0.1.6
+
+### Patch Changes
+
+- [`3d9a6a0aae8c5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d9a6a0aae8c5) -
+  Fix show diff not loading inline node diffs on load
+- Updated dependencies
+
+## 0.1.5
+
+### Patch Changes
+
+- [`265c1bf0cefa4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/265c1bf0cefa4) -
+  Sorted type and interface props to improve Atlaskit docs
+
 ## 0.1.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -2,9 +2,9 @@
 	"extends": "../../../../tsconfig.entry-points.confluence.json",
 	"compilerOptions": {
 		"target": "es5",
-		"composite": true,
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-plugin-show-diff",
-		"rootDir": "../"
+		"rootDir": "../",
+		"composite": true
 	},
 	"include": [
 		"../src/**/*.ts",

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

@@ -82,56 +82,36 @@ var createPlugin = exports.createPlugin = function createPlugin(config) {
     key: showDiffPluginKey,
     state: {
       init: function init(_, state) {
-        var _config$steps, _config$steps2, _editorView;
-        var schema = state.schema;
-        var isDisplayingChanges = ((_config$steps = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps !== void 0 ? _config$steps : []).length > 0;
-        var steps = ((_config$steps2 = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps2 !== void 0 ? _config$steps2 : []).map(function (step) {
-          return _transform.Step.fromJSON(schema, step);
-        });
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var nodeViews = ((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.nodeViews) || {};
+        // We do initial setup after we setup the editor view
         return {
-          steps: steps,
-          originalDoc: config !== null && config !== void 0 && config.originalDoc ? (0, _processRawValue.processRawValue)(state.schema, config.originalDoc) : undefined,
-          decorations: calculateDecorations({
-            state: state,
-            pluginState: {
-              steps: steps,
-              originalDoc: config !== null && config !== void 0 && config.originalDoc ? (0, _processRawValue.processRawValue)(state.schema, config.originalDoc) : undefined,
-              isDisplayingChanges: isDisplayingChanges
-            },
-            editorView: editorView,
-            nodeViews: nodeViews
-          }),
-          isDisplayingChanges: isDisplayingChanges
+          steps: [],
+          originalDoc: undefined,
+          decorations: _view.DecorationSet.empty,
+          isDisplayingChanges: false
         };
       },
       apply: function apply(tr, currentPluginState, oldState, newState) {
-        var _editorView2;
+        var _editorView;
         var meta = tr.getMeta(showDiffPluginKey);
         var newPluginState = currentPluginState;
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var nodeViews = ((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.nodeViews) || {};
+        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') {
-            var _meta$steps, _meta$originalDoc;
+            // Update the plugin state with the new metadata
+            newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
+              isDisplayingChanges: true
+            });
             // Calculate and store decorations in state
             var decorations = calculateDecorations({
               state: newState,
-              pluginState: {
-                steps: (_meta$steps = meta.steps) !== null && _meta$steps !== void 0 ? _meta$steps : currentPluginState.steps,
-                originalDoc: (_meta$originalDoc = meta.originalDoc) !== null && _meta$originalDoc !== void 0 ? _meta$originalDoc : currentPluginState.originalDoc,
-                isDisplayingChanges: true
-              },
+              pluginState: newPluginState,
               editorView: editorView,
               nodeViews: nodeViews
             });
-            newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
-              decorations: decorations,
-              isDisplayingChanges: true
-            });
+            // Update the decorations
+            newPluginState.decorations = decorations;
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               decorations: _view.DecorationSet.empty,
@@ -148,7 +128,22 @@ var createPlugin = exports.createPlugin = function createPlugin(config) {
     },
     view: function view(editorView) {
       setEditorView(editorView);
-      return {};
+      var isFirst = true;
+      return {
+        update: function update(view) {
+          // If we're using configuration to show diffs we initialise here once we setup the editor view
+          if (config !== null && config !== void 0 && config.originalDoc && config !== null && config !== void 0 && config.steps && config.steps.length > 0 && isFirst) {
+            isFirst = false;
+            view.dispatch(view.state.tr.setMeta(showDiffPluginKey, {
+              action: 'SHOW_DIFF',
+              steps: config.steps.map(function (step) {
+                return _transform.Step.fromJSON(view.state.schema, step);
+              }),
+              originalDoc: (0, _processRawValue.processRawValue)(view.state.schema, config.originalDoc)
+            }));
+          }
+        }
+      };
     },
     props: {
       decorations: function decorations(state) {

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

@@ -66,56 +66,38 @@ export const createPlugin = config => {
     key: showDiffPluginKey,
     state: {
       init(_, state) {
-        var _config$steps, _config$steps2, _editorView;
-        const schema = state.schema;
-        const isDisplayingChanges = ((_config$steps = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps !== void 0 ? _config$steps : []).length > 0;
-        const steps = ((_config$steps2 = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps2 !== void 0 ? _config$steps2 : []).map(step => ProseMirrorStep.fromJSON(schema, step));
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const nodeViews = ((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.nodeViews) || {};
+        // We do initial setup after we setup the editor view
         return {
-          steps,
-          originalDoc: config !== null && config !== void 0 && config.originalDoc ? processRawValue(state.schema, config.originalDoc) : undefined,
-          decorations: calculateDecorations({
-            state,
-            pluginState: {
-              steps,
-              originalDoc: config !== null && config !== void 0 && config.originalDoc ? processRawValue(state.schema, config.originalDoc) : undefined,
-              isDisplayingChanges
-            },
-            editorView,
-            nodeViews
-          }),
-          isDisplayingChanges
+          steps: [],
+          originalDoc: undefined,
+          decorations: DecorationSet.empty,
+          isDisplayingChanges: false
         };
       },
       apply: (tr, currentPluginState, oldState, newState) => {
-        var _editorView2;
+        var _editorView;
         const meta = tr.getMeta(showDiffPluginKey);
         let newPluginState = currentPluginState;
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const nodeViews = ((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.nodeViews) || {};
+        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') {
-            var _meta$steps, _meta$originalDoc;
+            // Update the plugin state with the new metadata
+            newPluginState = {
+              ...currentPluginState,
+              ...meta,
+              isDisplayingChanges: true
+            };
             // Calculate and store decorations in state
             const decorations = calculateDecorations({
               state: newState,
-              pluginState: {
-                steps: (_meta$steps = meta.steps) !== null && _meta$steps !== void 0 ? _meta$steps : currentPluginState.steps,
-                originalDoc: (_meta$originalDoc = meta.originalDoc) !== null && _meta$originalDoc !== void 0 ? _meta$originalDoc : currentPluginState.originalDoc,
-                isDisplayingChanges: true
-              },
+              pluginState: newPluginState,
               editorView,
               nodeViews: nodeViews
             });
-            newPluginState = {
-              ...currentPluginState,
-              ...meta,
-              decorations,
-              isDisplayingChanges: true
-            };
+            // Update the decorations
+            newPluginState.decorations = decorations;
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
             newPluginState = {
               ...currentPluginState,
@@ -138,7 +120,20 @@ export const createPlugin = config => {
     },
     view(editorView) {
       setEditorView(editorView);
-      return {};
+      let isFirst = true;
+      return {
+        update(view) {
+          // If we're using configuration to show diffs we initialise here once we setup the editor view
+          if (config !== null && config !== void 0 && config.originalDoc && config !== null && config !== void 0 && config.steps && config.steps.length > 0 && isFirst) {
+            isFirst = false;
+            view.dispatch(view.state.tr.setMeta(showDiffPluginKey, {
+              action: 'SHOW_DIFF',
+              steps: config.steps.map(step => ProseMirrorStep.fromJSON(view.state.schema, step)),
+              originalDoc: processRawValue(view.state.schema, config.originalDoc)
+            }));
+          }
+        }
+      };
     },
     props: {
       decorations: state => {

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

@@ -76,56 +76,36 @@ export var createPlugin = function createPlugin(config) {
     key: showDiffPluginKey,
     state: {
       init: function init(_, state) {
-        var _config$steps, _config$steps2, _editorView;
-        var schema = state.schema;
-        var isDisplayingChanges = ((_config$steps = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps !== void 0 ? _config$steps : []).length > 0;
-        var steps = ((_config$steps2 = config === null || config === void 0 ? void 0 : config.steps) !== null && _config$steps2 !== void 0 ? _config$steps2 : []).map(function (step) {
-          return ProseMirrorStep.fromJSON(schema, step);
-        });
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var nodeViews = ((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.nodeViews) || {};
+        // We do initial setup after we setup the editor view
         return {
-          steps: steps,
-          originalDoc: config !== null && config !== void 0 && config.originalDoc ? processRawValue(state.schema, config.originalDoc) : undefined,
-          decorations: calculateDecorations({
-            state: state,
-            pluginState: {
-              steps: steps,
-              originalDoc: config !== null && config !== void 0 && config.originalDoc ? processRawValue(state.schema, config.originalDoc) : undefined,
-              isDisplayingChanges: isDisplayingChanges
-            },
-            editorView: editorView,
-            nodeViews: nodeViews
-          }),
-          isDisplayingChanges: isDisplayingChanges
+          steps: [],
+          originalDoc: undefined,
+          decorations: DecorationSet.empty,
+          isDisplayingChanges: false
         };
       },
       apply: function apply(tr, currentPluginState, oldState, newState) {
-        var _editorView2;
+        var _editorView;
         var meta = tr.getMeta(showDiffPluginKey);
         var newPluginState = currentPluginState;
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var nodeViews = ((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.nodeViews) || {};
+        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') {
-            var _meta$steps, _meta$originalDoc;
+            // Update the plugin state with the new metadata
+            newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
+              isDisplayingChanges: true
+            });
             // Calculate and store decorations in state
             var decorations = calculateDecorations({
               state: newState,
-              pluginState: {
-                steps: (_meta$steps = meta.steps) !== null && _meta$steps !== void 0 ? _meta$steps : currentPluginState.steps,
-                originalDoc: (_meta$originalDoc = meta.originalDoc) !== null && _meta$originalDoc !== void 0 ? _meta$originalDoc : currentPluginState.originalDoc,
-                isDisplayingChanges: true
-              },
+              pluginState: newPluginState,
               editorView: editorView,
               nodeViews: nodeViews
             });
-            newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
-              decorations: decorations,
-              isDisplayingChanges: true
-            });
+            // Update the decorations
+            newPluginState.decorations = decorations;
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               decorations: DecorationSet.empty,
@@ -142,7 +122,22 @@ export var createPlugin = function createPlugin(config) {
     },
     view: function view(editorView) {
       setEditorView(editorView);
-      return {};
+      var isFirst = true;
+      return {
+        update: function update(view) {
+          // If we're using configuration to show diffs we initialise here once we setup the editor view
+          if (config !== null && config !== void 0 && config.originalDoc && config !== null && config !== void 0 && config.steps && config.steps.length > 0 && isFirst) {
+            isFirst = false;
+            view.dispatch(view.state.tr.setMeta(showDiffPluginKey, {
+              action: 'SHOW_DIFF',
+              steps: config.steps.map(function (step) {
+                return ProseMirrorStep.fromJSON(view.state.schema, step);
+              }),
+              originalDoc: processRawValue(view.state.schema, config.originalDoc)
+            }));
+          }
+        }
+      };
     },
     props: {
       decorations: function decorations(state) {

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

@@ -39,10 +39,10 @@ export declare class NodeViewSerializer {
     private nodeViews;
     private nodeViewBlocklist;
     constructor(params: {
-        schema: Schema;
+        blocklist?: string[];
         editorView?: EditorView;
         nodeViews?: Record<string, NodeViewConstructor>;
-        blocklist?: string[];
+        schema: Schema;
     });
     /**
      * Attempts to create a node view for the given node.

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

@@ -17,9 +17,9 @@ export declare const createInlineChangedDecoration: (change: {
 interface DeletedContentDecorationProps {
     change: Change;
     doc: PMNode;
-    tr: Transaction;
-    nodeViews: Record<string, NodeViewConstructor>;
     editorView?: EditorView;
+    nodeViews: Record<string, NodeViewConstructor>;
+    tr: Transaction;
 }
 /**
  * Creates a widget to represent the deleted content in the editor

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

@@ -6,10 +6,10 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { type DiffParams } from '../showDiffPluginType';
 export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
 type ShowDiffPluginState = {
-    steps: ProseMirrorStep[];
-    originalDoc: PMNode | undefined;
     decorations: DecorationSet;
     isDisplayingChanges: boolean;
+    originalDoc: PMNode | undefined;
+    steps: ProseMirrorStep[];
 };
 export declare const createPlugin: (config: DiffParams | undefined) => SafePlugin<ShowDiffPluginState>;
 export {};

package/dist/types/showDiffPluginType.d.ts

@@ -4,26 +4,26 @@ import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
 export type DiffParams = {
+    originalDoc: JSONDocNode;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor
      */
     steps: StepJson[];
-    originalDoc: JSONDocNode;
 };
 export type PMDiffParams = {
+    originalDoc: Node;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor
      */
     steps: Step[];
-    originalDoc: Node;
 };
 export type ACTION = 'SHOW_DIFF' | 'HIDE_DIFF';
 export type ShowDiffPlugin = NextEditorPlugin<'showDiff', {
-    pluginConfiguration: DiffParams | undefined;
     commands: {
-        showDiff: (config: PMDiffParams) => EditorCommand;
         hideDiff: EditorCommand;
+        showDiff: (config: PMDiffParams) => EditorCommand;
     };
+    pluginConfiguration: DiffParams | undefined;
     sharedState: {
         /**
          * Whether the show diff feature is currently displaying changes.

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

@@ -39,10 +39,10 @@ export declare class NodeViewSerializer {
     private nodeViews;
     private nodeViewBlocklist;
     constructor(params: {
-        schema: Schema;
+        blocklist?: string[];
         editorView?: EditorView;
         nodeViews?: Record<string, NodeViewConstructor>;
-        blocklist?: string[];
+        schema: Schema;
     });
     /**
      * Attempts to create a node view for the given node.

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

@@ -17,9 +17,9 @@ export declare const createInlineChangedDecoration: (change: {
 interface DeletedContentDecorationProps {
     change: Change;
     doc: PMNode;
-    tr: Transaction;
-    nodeViews: Record<string, NodeViewConstructor>;
     editorView?: EditorView;
+    nodeViews: Record<string, NodeViewConstructor>;
+    tr: Transaction;
 }
 /**
  * Creates a widget to represent the deleted content in the editor

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

@@ -6,10 +6,10 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { type DiffParams } from '../showDiffPluginType';
 export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
 type ShowDiffPluginState = {
-    steps: ProseMirrorStep[];
-    originalDoc: PMNode | undefined;
     decorations: DecorationSet;
     isDisplayingChanges: boolean;
+    originalDoc: PMNode | undefined;
+    steps: ProseMirrorStep[];
 };
 export declare const createPlugin: (config: DiffParams | undefined) => SafePlugin<ShowDiffPluginState>;
 export {};

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

@@ -4,26 +4,26 @@ import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
 export type DiffParams = {
+    originalDoc: JSONDocNode;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor
      */
     steps: StepJson[];
-    originalDoc: JSONDocNode;
 };
 export type PMDiffParams = {
+    originalDoc: Node;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor
      */
     steps: Step[];
-    originalDoc: Node;
 };
 export type ACTION = 'SHOW_DIFF' | 'HIDE_DIFF';
 export type ShowDiffPlugin = NextEditorPlugin<'showDiff', {
-    pluginConfiguration: DiffParams | undefined;
     commands: {
-        showDiff: (config: PMDiffParams) => EditorCommand;
         hideDiff: EditorCommand;
+        showDiff: (config: PMDiffParams) => EditorCommand;
     };
+    pluginConfiguration: DiffParams | undefined;
     sharedState: {
         /**
          * Whether the show diff feature is currently displaying changes.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "0.1.4",
+	"version": "0.1.6",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,7 +37,7 @@
 		"prosemirror-changeset": "^2.2.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.26.0",
+		"@atlaskit/editor-common": "^107.29.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {