@atlaskit/editor-plugin-synced-block 6.0.33 → 6.0.35

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 6.0.35
+
+### Patch Changes
+
+- [`827be3d512390`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/827be3d512390) -
+  Refactor source synced block cache update to use appendTransaction instead of nodeview update.
+  Behind fg('platform_synced_block_update_refactor'):
+  - Moves cache update from nodeview update() to PM plugin appendTransaction hook, filtering out
+    non-user changes (remote collab, table auto-scale, dirty transactions)
+  - Moves initial cache population from nodeview constructor to PM plugin state.init()
+  - Optimises updateSyncBlockData with Fragment.eq() for O(1) comparison instead of toJSON() +
+    lodash/isEqual
+- Updated dependencies
+
+## 6.0.34
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.0.33
 
 ### Patch Changes

package/dist/cjs/nodeviews/bodiedSyncedBlock.js

@@ -17,6 +17,7 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _BodiedSyncBlockWrapper = require("../ui/BodiedSyncBlockWrapper");
 var _SyncBlockLabel = require("../ui/SyncBlockLabel");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -172,8 +173,7 @@ var toDOM = function toDOM(node) {
 };
 var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
   function BodiedSyncBlock(node, view, getPos, api, nodeViewPortalProviderAPI, syncBlockStore) {
-    var _this4 = this,
-      _this$syncedBlockStor;
+    var _this4 = this;
     (0, _classCallCheck2.default)(this, BodiedSyncBlock);
     this.node = node;
     this.view = view;
@@ -206,7 +206,11 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
     this.handleViewModeChange();
 
     // update sync block data on initial creation
-    (_this$syncedBlockStor = this.syncedBlockStore) === null || _this$syncedBlockStor === void 0 || _this$syncedBlockStor.sourceManager.updateSyncBlockData(node);
+    // When fg is ON, cache is populated in state.init() and updated in appendTransaction
+    if (!(0, _platformFeatureFlags.fg)('platform_synced_block_update_refactor')) {
+      var _this$syncedBlockStor;
+      (_this$syncedBlockStor = this.syncedBlockStore) === null || _this$syncedBlockStor === void 0 || _this$syncedBlockStor.sourceManager.updateSyncBlockData(node);
+    }
   }
   return (0, _createClass2.default)(BodiedSyncBlock, [{
     key: "updateContentEditable",
@@ -262,8 +266,12 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
         return false;
       }
       if (node !== this.node) {
-        var _this$syncedBlockStor2;
-        (_this$syncedBlockStor2 = this.syncedBlockStore) === null || _this$syncedBlockStor2 === void 0 || _this$syncedBlockStor2.sourceManager.updateSyncBlockData(node);
+        // When fg is ON, cache updates are handled in appendTransaction where we can
+        // filter out non-user changes (remote collab, table auto-scale, etc.)
+        if (!(0, _platformFeatureFlags.fg)('platform_synced_block_update_refactor')) {
+          var _this$syncedBlockStor2;
+          (_this$syncedBlockStor2 = this.syncedBlockStore) === null || _this$syncedBlockStor2 === void 0 || _this$syncedBlockStor2.sourceManager.updateSyncBlockData(node);
+        }
       }
       this.node = node;
       return true;

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

@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _collab = require("@atlaskit/editor-common/collab");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
@@ -284,6 +285,16 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           return node.type.name === 'syncBlock';
         });
         syncBlockStore.referenceManager.fetchSyncBlocksData((0, _editorSyncedBlockProvider.convertPMNodesToSyncBlockNodes)(syncBlockNodes));
+
+        // Populate source sync block cache from initial document
+        // When fg is ON, this replaces the constructor call in the nodeview
+        if ((0, _platformFeatureFlags.fg)('platform_synced_block_update_refactor')) {
+          instance.doc.forEach(function (node) {
+            if (syncBlockStore.sourceManager.isSourceBlock(node)) {
+              syncBlockStore.sourceManager.updateSyncBlockData(node);
+            }
+          });
+        }
         return {
           selectionDecorationSet: (0, _selectionDecorations.calculateDecorations)(instance.doc, instance.selection, instance.schema),
           activeFlag: false,
@@ -503,6 +514,23 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       });
     },
     appendTransaction: function appendTransaction(trs, oldState, newState) {
+      // Update source sync block cache for user-initiated changes only
+      // When fg is ON, cache updates are handled here instead of in the nodeview update()
+      if ((0, _platformFeatureFlags.fg)('platform_synced_block_update_refactor')) {
+        var isUserChange = function isUserChange(tr) {
+          return tr.docChanged && !(0, _collab.isDirtyTransaction)(tr) && !tr.getMeta('isRemote');
+        };
+        var hasSourceBlockEdit = trs.some(function (tr) {
+          return isUserChange(tr) && (0, _trackSyncBlocks6.hasEditInSyncBlock)(tr, oldState);
+        });
+        if (hasSourceBlockEdit) {
+          newState.doc.forEach(function (node) {
+            if (syncBlockStore.sourceManager.isSourceBlock(node)) {
+              syncBlockStore.sourceManager.updateSyncBlockData(node);
+            }
+          });
+        }
+      }
       trs.filter(function (tr) {
         return tr.docChanged;
       }).forEach(function (tr) {

package/dist/es2019/nodeviews/bodiedSyncedBlock.js

@@ -5,6 +5,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
 import { SyncBlockLabel } from '../ui/SyncBlockLabel';
 const toDOMOld = () => ['div', {
@@ -138,7 +139,6 @@ const toDOM = node => ['div', {
 }, 0]];
 export class BodiedSyncBlock {
   constructor(node, view, getPos, api, nodeViewPortalProviderAPI, syncBlockStore) {
-    var _this$syncedBlockStor;
     this.node = node;
     this.view = view;
     this.getPos = getPos;
@@ -171,7 +171,11 @@ export class BodiedSyncBlock {
     this.handleViewModeChange();
 
     // update sync block data on initial creation
-    (_this$syncedBlockStor = this.syncedBlockStore) === null || _this$syncedBlockStor === void 0 ? void 0 : _this$syncedBlockStor.sourceManager.updateSyncBlockData(node);
+    // When fg is ON, cache is populated in state.init() and updated in appendTransaction
+    if (!fg('platform_synced_block_update_refactor')) {
+      var _this$syncedBlockStor;
+      (_this$syncedBlockStor = this.syncedBlockStore) === null || _this$syncedBlockStor === void 0 ? void 0 : _this$syncedBlockStor.sourceManager.updateSyncBlockData(node);
+    }
   }
   updateContentEditable({
     nextConnectivityMode,
@@ -218,8 +222,12 @@ export class BodiedSyncBlock {
       return false;
     }
     if (node !== this.node) {
-      var _this$syncedBlockStor2;
-      (_this$syncedBlockStor2 = this.syncedBlockStore) === null || _this$syncedBlockStor2 === void 0 ? void 0 : _this$syncedBlockStor2.sourceManager.updateSyncBlockData(node);
+      // When fg is ON, cache updates are handled in appendTransaction where we can
+      // filter out non-user changes (remote collab, table auto-scale, etc.)
+      if (!fg('platform_synced_block_update_refactor')) {
+        var _this$syncedBlockStor2;
+        (_this$syncedBlockStor2 = this.syncedBlockStore) === null || _this$syncedBlockStor2 === void 0 ? void 0 : _this$syncedBlockStor2.sourceManager.updateSyncBlockData(node);
+      }
     }
     this.node = node;
     return true;

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { isDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
@@ -245,6 +246,16 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       init(_, instance) {
         const syncBlockNodes = instance.doc.children.filter(node => node.type.name === 'syncBlock');
         syncBlockStore.referenceManager.fetchSyncBlocksData(convertPMNodesToSyncBlockNodes(syncBlockNodes));
+
+        // Populate source sync block cache from initial document
+        // When fg is ON, this replaces the constructor call in the nodeview
+        if (fg('platform_synced_block_update_refactor')) {
+          instance.doc.forEach(node => {
+            if (syncBlockStore.sourceManager.isSourceBlock(node)) {
+              syncBlockStore.sourceManager.updateSyncBlockData(node);
+            }
+          });
+        }
         return {
           selectionDecorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema),
           activeFlag: false,
@@ -467,6 +478,19 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       });
     },
     appendTransaction: (trs, oldState, newState) => {
+      // Update source sync block cache for user-initiated changes only
+      // When fg is ON, cache updates are handled here instead of in the nodeview update()
+      if (fg('platform_synced_block_update_refactor')) {
+        const isUserChange = tr => tr.docChanged && !isDirtyTransaction(tr) && !tr.getMeta('isRemote');
+        const hasSourceBlockEdit = trs.some(tr => isUserChange(tr) && hasEditInSyncBlock(tr, oldState));
+        if (hasSourceBlockEdit) {
+          newState.doc.forEach(node => {
+            if (syncBlockStore.sourceManager.isSourceBlock(node)) {
+              syncBlockStore.sourceManager.updateSyncBlockData(node);
+            }
+          });
+        }
+      }
       trs.filter(tr => tr.docChanged).forEach(tr => {
         if (confirmationTransactionRef.current) {
           confirmationTransactionRef.current = rebaseTransaction(confirmationTransactionRef.current, tr, newState);

package/dist/esm/nodeviews/bodiedSyncedBlock.js

@@ -12,6 +12,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
 import { SyncBlockLabel } from '../ui/SyncBlockLabel';
 var toDOMOld = function toDOMOld() {
@@ -165,8 +166,7 @@ var toDOM = function toDOM(node) {
 };
 export var BodiedSyncBlock = /*#__PURE__*/function () {
   function BodiedSyncBlock(node, view, getPos, api, nodeViewPortalProviderAPI, syncBlockStore) {
-    var _this4 = this,
-      _this$syncedBlockStor;
+    var _this4 = this;
     _classCallCheck(this, BodiedSyncBlock);
     this.node = node;
     this.view = view;
@@ -199,7 +199,11 @@ export var BodiedSyncBlock = /*#__PURE__*/function () {
     this.handleViewModeChange();
 
     // update sync block data on initial creation
-    (_this$syncedBlockStor = this.syncedBlockStore) === null || _this$syncedBlockStor === void 0 || _this$syncedBlockStor.sourceManager.updateSyncBlockData(node);
+    // When fg is ON, cache is populated in state.init() and updated in appendTransaction
+    if (!fg('platform_synced_block_update_refactor')) {
+      var _this$syncedBlockStor;
+      (_this$syncedBlockStor = this.syncedBlockStore) === null || _this$syncedBlockStor === void 0 || _this$syncedBlockStor.sourceManager.updateSyncBlockData(node);
+    }
   }
   return _createClass(BodiedSyncBlock, [{
     key: "updateContentEditable",
@@ -255,8 +259,12 @@ export var BodiedSyncBlock = /*#__PURE__*/function () {
         return false;
       }
       if (node !== this.node) {
-        var _this$syncedBlockStor2;
-        (_this$syncedBlockStor2 = this.syncedBlockStore) === null || _this$syncedBlockStor2 === void 0 || _this$syncedBlockStor2.sourceManager.updateSyncBlockData(node);
+        // When fg is ON, cache updates are handled in appendTransaction where we can
+        // filter out non-user changes (remote collab, table auto-scale, etc.)
+        if (!fg('platform_synced_block_update_refactor')) {
+          var _this$syncedBlockStor2;
+          (_this$syncedBlockStor2 = this.syncedBlockStore) === null || _this$syncedBlockStor2 === void 0 || _this$syncedBlockStor2.sourceManager.updateSyncBlockData(node);
+        }
       }
       this.node = node;
       return true;

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

@@ -8,6 +8,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { isDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
@@ -277,6 +278,16 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           return node.type.name === 'syncBlock';
         });
         syncBlockStore.referenceManager.fetchSyncBlocksData(convertPMNodesToSyncBlockNodes(syncBlockNodes));
+
+        // Populate source sync block cache from initial document
+        // When fg is ON, this replaces the constructor call in the nodeview
+        if (fg('platform_synced_block_update_refactor')) {
+          instance.doc.forEach(function (node) {
+            if (syncBlockStore.sourceManager.isSourceBlock(node)) {
+              syncBlockStore.sourceManager.updateSyncBlockData(node);
+            }
+          });
+        }
         return {
           selectionDecorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema),
           activeFlag: false,
@@ -496,6 +507,23 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       });
     },
     appendTransaction: function appendTransaction(trs, oldState, newState) {
+      // Update source sync block cache for user-initiated changes only
+      // When fg is ON, cache updates are handled here instead of in the nodeview update()
+      if (fg('platform_synced_block_update_refactor')) {
+        var isUserChange = function isUserChange(tr) {
+          return tr.docChanged && !isDirtyTransaction(tr) && !tr.getMeta('isRemote');
+        };
+        var hasSourceBlockEdit = trs.some(function (tr) {
+          return isUserChange(tr) && hasEditInSyncBlock(tr, oldState);
+        });
+        if (hasSourceBlockEdit) {
+          newState.doc.forEach(function (node) {
+            if (syncBlockStore.sourceManager.isSourceBlock(node)) {
+              syncBlockStore.sourceManager.updateSyncBlockData(node);
+            }
+          });
+        }
+      }
       trs.filter(function (tr) {
         return tr.docChanged;
       }).forEach(function (tr) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "6.0.33",
+	"version": "6.0.35",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/spinner": "19.0.12",
-		"@atlaskit/tmp-editor-statsig": "^50.0.0",
+		"@atlaskit/tmp-editor-statsig": "^51.1.0",
 		"@atlaskit/tokens": "11.4.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -120,6 +120,9 @@
 		"platform_editor_block_menu_divider_patch": {
 			"type": "boolean"
 		},
+		"platform_synced_block_update_refactor": {
+			"type": "boolean"
+		},
 		"platform_synced_block_patch_7": {
 			"type": "boolean"
 		},