@atlaskit/editor-synced-block-provider 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-synced-block-provider
 
+## 0.4.0
+
+### Minor Changes
+
+- [`acb8231bc9e0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/acb8231bc9e0c) -
+  EDITOR-1779 - "rebase" the transaction to reflect the latest document state
+
+## 0.3.0
+
+### Minor Changes
+
+- [`9e7a5a0bb1869`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e7a5a0bb1869) -
+  Add content api sync block provider
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/cjs/common/rebase-transaction.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rebaseTransaction = void 0;
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+/**
+ * Rebase `currentTr` over `incomingTr` based on the provided `state`.
+ * This function adjusts the steps in `currentTr` to account for the changes made by `incomingTr`.
+ *
+ * @param currentTr - The transaction to be rebased.
+ * @param incomingTr - The transaction that has already been applied to the state.
+ * @param state - The editor state after applying `incomingTr`.
+ * @returns A new transaction that represents `currentTr` rebased over `incomingTr`.
+ */
+var rebaseTransaction = exports.rebaseTransaction = function rebaseTransaction(currentTr, incomingTr, state) {
+  if (!incomingTr.docChanged) {
+    return currentTr;
+  }
+  var currentMapping = new _transform.Mapping(incomingTr.mapping.maps);
+  var rebasedTransaction = state.tr;
+  currentTr.steps.forEach(function (step) {
+    var mappedStep = step.map(currentMapping);
+    if (mappedStep) {
+      rebasedTransaction.step(mappedStep);
+      currentMapping.appendMap(mappedStep.getMap());
+    }
+  });
+  return rebasedTransaction;
+};

package/dist/cjs/common/syncBlockProvider.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFetchDocNode = exports.SyncBlockProvider = void 0;
+exports.useMemoizedSyncedBlockProvider = exports.useFetchDocNode = exports.SyncBlockProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -55,6 +55,9 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
       });
       return Promise.all(resourceIds);
     });
+    (0, _defineProperty2.default)(_this, "getSourceId", function () {
+      return _this.sourceId;
+    });
     _this.fetchProvider = fetchProvider;
     _this.writeProvider = writeProvider;
     _this.sourceId = sourceId;
@@ -68,25 +71,34 @@ var useFetchDocNode = exports.useFetchDocNode = function useFetchDocNode(editorV
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     docNode = _useState2[0],
     setDocNode = _useState2[1];
+  var fetchNode = function fetchNode(editorView, node, provider) {
+    var nodes = [(0, _utils.convertSyncBlockPMNodeToSyncBlockData)(node, false)];
+    provider === null || provider === void 0 || provider.fetchNodesData(nodes).then(function (data) {
+      var _data$;
+      if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
+        var newNode = editorView.state.schema.nodeFromJSON(data[0].content);
+        setDocNode(_objectSpread(_objectSpread({}, newNode.toJSON()), {}, {
+          version: 1
+        }));
+      }
+    });
+  };
   (0, _react.useEffect)(function () {
     if (!provider) {
       return;
     }
+    fetchNode(editorView, node, provider);
     var interval = window.setInterval(function () {
-      var nodes = [(0, _utils.convertSyncBlockPMNodeToSyncBlockData)(node, false)];
-      provider === null || provider === void 0 || provider.fetchNodesData(nodes).then(function (data) {
-        var _data$;
-        if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
-          var newNode = editorView.state.schema.nodeFromJSON(data[0].content);
-          setDocNode(_objectSpread(_objectSpread({}, newNode.toJSON()), {}, {
-            version: 1
-          }));
-        }
-      });
-    }, 1000);
+      fetchNode(editorView, node, provider);
+    }, 3000);
     return function () {
       window.clearInterval(interval);
     };
   }, [editorView, node, provider]);
   return docNode;
+};
+var useMemoizedSyncedBlockProvider = exports.useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvider(fetchProvider, writeProvider, sourceId) {
+  return (0, _react.useMemo)(function () {
+    return new SyncBlockProvider(fetchProvider, writeProvider, sourceId);
+  }, [fetchProvider, writeProvider, sourceId]);
 };

package/dist/cjs/common/syncBlockStoreManager.js

@@ -10,6 +10,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _uuid = _interopRequireDefault(require("uuid"));
+var _rebaseTransaction2 = require("./rebase-transaction");
 // Do this typedef to make it clear that
 // this is a local identifier for a resource for local use
 // A store manager responsible for the lifecycle and state management of sync blocks in an editor instance.
@@ -18,9 +19,10 @@ var _uuid = _interopRequireDefault(require("uuid"));
 // Handles caching, debouncing updates, and publish/subscribe for local changes.
 // Ensures consistency between local and remote state, and can be used in both editor and renderer contexts.
 var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/function () {
-  function SyncBlockStoreManager(_dataProvider) {
+  function SyncBlockStoreManager(dataProvider) {
     (0, _classCallCheck2.default)(this, SyncBlockStoreManager);
     this.syncBlocks = new Map();
+    this.dataProvider = dataProvider;
   }
   return (0, _createClass2.default)(SyncBlockStoreManager, [{
     key: "setEditorView",
@@ -30,14 +32,13 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
   }, {
     key: "isSourceBlock",
     value: function isSourceBlock(node) {
-      var _this$syncBlocks$get;
       if (node.type.name !== 'syncBlock') {
         return false;
       }
       var _node$attrs = node.attrs,
         resourceId = _node$attrs.resourceId,
         localId = _node$attrs.localId;
-      return this.syncBlocks.has(resourceId) && ((_this$syncBlocks$get = this.syncBlocks.get(resourceId)) === null || _this$syncBlocks$get === void 0 ? void 0 : _this$syncBlocks$get.sourceLocalId) === localId;
+      return resourceId.includes(localId);
     }
   }, {
     key: "registerConfirmationCallback",
@@ -56,15 +57,18 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
   }, {
     key: "createSyncBlockNode",
     value: function createSyncBlockNode() {
+      var _this$dataProvider;
       // TODO: EDITOR-1644 - properly implement creation of the synced block
       // below is a temporary implementation for the creation of the synced block
       // the resource id needs to have pageId and content property key in it
+      // Note: If the data provider is not set, the resource id will be the local id
 
-      var blockInstanceId = (0, _uuid.default)();
       var localId = (0, _uuid.default)();
+      var sourceId = (_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 ? void 0 : _this$dataProvider.getSourceId();
+      var resourceId = sourceId ? "".concat(sourceId, "/").concat(localId) : localId;
       var syncBlockNode = {
         attrs: {
-          resourceId: "ari:cloud:confluence:fake_cloud_id:page/fake_page_id/".concat(blockInstanceId),
+          resourceId: resourceId,
           localId: localId
         },
         type: 'syncBlock'
@@ -85,23 +89,24 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
           while (1) switch (_context.prev = _context.next) {
             case 0:
               if (!this.confirmationCallback) {
-                _context.next = 5;
+                _context.next = 7;
                 break;
               }
-              _context.next = 3;
+              this.confirmationTransaction = tr;
+              _context.next = 4;
               return this.confirmationCallback();
-            case 3:
+            case 4:
               confirmed = _context.sent;
               if (confirmed) {
-                // TODO: EDITOR-1779 - "rebase" the transaction to reflect the latest document state
-                (_this$editorView = this.editorView) === null || _this$editorView === void 0 || _this$editorView.dispatch(tr.setMeta('isConfirmedSyncBlockDeletion', true));
+                (_this$editorView = this.editorView) === null || _this$editorView === void 0 || _this$editorView.dispatch(this.confirmationTransaction.setMeta('isConfirmedSyncBlockDeletion', true));
                 // Need to update the BE on deletion
                 syncBlockIds.forEach(function (_ref) {
                   var resourceId = _ref.resourceId;
                   return _this2.syncBlocks.delete(resourceId);
                 });
               }
-            case 5:
+              this.confirmationTransaction = undefined;
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -112,5 +117,13 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
       }
       return deleteSyncBlocksWithConfirmation;
     }()
+  }, {
+    key: "rebaseTransaction",
+    value: function rebaseTransaction(incomingTr, state) {
+      if (!this.confirmationTransaction) {
+        return;
+      }
+      this.confirmationTransaction = (0, _rebaseTransaction2.rebaseTransaction)(this.confirmationTransaction, incomingTr, state);
+    }
   }]);
 }();

package/dist/cjs/index.js

@@ -21,12 +21,24 @@ Object.defineProperty(exports, "convertSyncBlockPMNodeToSyncBlockData", {
     return _utils.convertSyncBlockPMNodeToSyncBlockData;
   }
 });
+Object.defineProperty(exports, "createContentAPIProvidersWithDefaultKey", {
+  enumerable: true,
+  get: function get() {
+    return _confluenceContentAPI.createContentAPIProvidersWithDefaultKey;
+  }
+});
 Object.defineProperty(exports, "generateSyncBlockSourceUrl", {
   enumerable: true,
   get: function get() {
     return _utils.generateSyncBlockSourceUrl;
   }
 });
+Object.defineProperty(exports, "getConfluencePageAri", {
+  enumerable: true,
+  get: function get() {
+    return _ari.getConfluencePageAri;
+  }
+});
 Object.defineProperty(exports, "getDefaultSyncBlockSchema", {
   enumerable: true,
   get: function get() {
@@ -45,14 +57,35 @@ Object.defineProperty(exports, "inMemoryWriteProvider", {
     return _inMemory.inMemoryWriteProvider;
   }
 });
+Object.defineProperty(exports, "rebaseTransaction", {
+  enumerable: true,
+  get: function get() {
+    return _rebaseTransaction.rebaseTransaction;
+  }
+});
 Object.defineProperty(exports, "useFetchDocNode", {
   enumerable: true,
   get: function get() {
     return _syncBlockProvider.useFetchDocNode;
   }
 });
+Object.defineProperty(exports, "useMemoizedContentAPIProviders", {
+  enumerable: true,
+  get: function get() {
+    return _confluenceContentAPI.useMemoizedContentAPIProviders;
+  }
+});
+Object.defineProperty(exports, "useMemoizedSyncedBlockProvider", {
+  enumerable: true,
+  get: function get() {
+    return _syncBlockProvider.useMemoizedSyncedBlockProvider;
+  }
+});
 var _syncBlockProvider = require("./common/syncBlockProvider");
 var _syncBlockStoreManager = require("./common/syncBlockStoreManager");
 var _inMemory = require("./providers/inMemory");
+var _schema = require("./common/schema");
+var _confluenceContentAPI = require("./providers/confluenceContentAPI");
+var _ari = require("./utils/ari");
 var _utils = require("./utils/utils");
-var _schema = require("./common/schema");
+var _rebaseTransaction = require("./common/rebase-transaction");

package/dist/cjs/providers/confluenceContentAPI.js

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMemoizedContentAPIProviders = exports.createContentAPIProvidersWithDefaultKey = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _react = require("react");
+var _ari = require("../utils/ari");
+var _contentProperty = require("../utils/contentProperty");
+/**
+ * Configuration for Content API providers
+ */
+
+var getContentPropertyKey = function getContentPropertyKey(contentPropertyKey, localId) {
+  return contentPropertyKey + '-' + localId;
+};
+var parseSyncedBlockContentPropertyValue = function parseSyncedBlockContentPropertyValue(value) {
+  try {
+    if (typeof value === 'string') {
+      return JSON.parse(value);
+    }
+    return value;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to parse synced block content:', error);
+    return {
+      content: undefined
+    };
+  }
+};
+
+/**
+ * ADFFetchProvider implementation that fetches synced block data from Confluence Content API
+ */
+var ConfluenceADFFetchProvider = /*#__PURE__*/function () {
+  function ConfluenceADFFetchProvider(config) {
+    (0, _classCallCheck2.default)(this, ConfluenceADFFetchProvider);
+    this.config = config;
+  }
+  return (0, _createClass2.default)(ConfluenceADFFetchProvider, [{
+    key: "fetchData",
+    value: function () {
+      var _fetchData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(resourceId) {
+        var _contentProperty$data, pageId, localId, key, options, contentProperty, value, syncedBlockData;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              pageId = (0, _ari.getPageIdFromAri)(resourceId);
+              localId = (0, _ari.getLocalIdFromAri)(resourceId);
+              key = getContentPropertyKey(this.config.contentPropertyKey, localId);
+              options = {
+                pageId: pageId,
+                key: key,
+                cloudId: this.config.cloudId
+              };
+              _context.next = 7;
+              return (0, _contentProperty.getContentProperty)(options);
+            case 7:
+              contentProperty = _context.sent;
+              value = (_contentProperty$data = contentProperty.data.confluence.page.properties) === null || _contentProperty$data === void 0 || (_contentProperty$data = _contentProperty$data[0]) === null || _contentProperty$data === void 0 ? void 0 : _contentProperty$data.value;
+              if (value) {
+                _context.next = 11;
+                break;
+              }
+              throw new Error('Content property value does not exist');
+            case 11:
+              // Parse the synced block content from the property value
+              syncedBlockData = parseSyncedBlockContentPropertyValue(value);
+              return _context.abrupt("return", {
+                content: syncedBlockData.content
+              });
+            case 15:
+              _context.prev = 15;
+              _context.t0 = _context["catch"](0);
+              // eslint-disable-next-line no-console
+              console.error('Failed to fetch synced block data:', _context.t0);
+              return _context.abrupt("return", {
+                content: undefined
+              });
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this, [[0, 15]]);
+      }));
+      function fetchData(_x) {
+        return _fetchData.apply(this, arguments);
+      }
+      return fetchData;
+    }()
+  }]);
+}();
+/**
+ * ADFWriteProvider implementation that writes synced block data to Confluence Content API
+ */
+var ConfluenceADFWriteProvider = /*#__PURE__*/function () {
+  function ConfluenceADFWriteProvider(config) {
+    var _this = this;
+    (0, _classCallCheck2.default)(this, ConfluenceADFWriteProvider);
+    (0, _defineProperty2.default)(this, "createNewContentProperty", /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(pageId, key, value) {
+        var _contentProperty$data2;
+        var contentProperty;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return (0, _contentProperty.createContentProperty)({
+                pageId: pageId,
+                key: key,
+                value: value,
+                cloudId: _this.config.cloudId
+              });
+            case 2:
+              contentProperty = _context2.sent;
+              if (!(((_contentProperty$data2 = contentProperty.data.confluence.createPageProperty.pageProperty) === null || _contentProperty$data2 === void 0 ? void 0 : _contentProperty$data2.key) === key)) {
+                _context2.next = 7;
+                break;
+              }
+              return _context2.abrupt("return", key);
+            case 7:
+              throw new Error('Failed to create content property');
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x2, _x3, _x4) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+    this.config = config;
+  }
+  return (0, _createClass2.default)(ConfluenceADFWriteProvider, [{
+    key: "writeData",
+    value: function () {
+      var _writeData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(sourceId, localId, data, resourceId) {
+        var pageId, syncedBlockValue, _contentProperty$data3, _localId, key, contentProperty, _key;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              pageId = (0, _ari.getPageIdFromAri)(sourceId);
+              syncedBlockValue = JSON.stringify({
+                content: data
+              });
+              if (!resourceId) {
+                _context3.next = 20;
+                break;
+              }
+              // Update existing content property
+              _localId = (0, _ari.getLocalIdFromAri)(resourceId);
+              key = getContentPropertyKey(this.config.contentPropertyKey, _localId);
+              _context3.next = 8;
+              return (0, _contentProperty.updateContentProperty)({
+                pageId: pageId,
+                key: key,
+                value: syncedBlockValue,
+                cloudId: this.config.cloudId
+              });
+            case 8:
+              contentProperty = _context3.sent;
+              if (!(((_contentProperty$data3 = contentProperty.data.confluence.updateValuePageProperty.pageProperty) === null || _contentProperty$data3 === void 0 ? void 0 : _contentProperty$data3.key) === key)) {
+                _context3.next = 13;
+                break;
+              }
+              return _context3.abrupt("return", key);
+            case 13:
+              if (!(contentProperty.data.confluence.updateValuePageProperty.pageProperty === null)) {
+                _context3.next = 17;
+                break;
+              }
+              return _context3.abrupt("return", this.createNewContentProperty(pageId, key, syncedBlockValue));
+            case 17:
+              throw new Error('Failed to update content property');
+            case 18:
+              _context3.next = 22;
+              break;
+            case 20:
+              // Create new content property
+              _key = getContentPropertyKey(this.config.contentPropertyKey, localId);
+              return _context3.abrupt("return", this.createNewContentProperty(pageId, _key, syncedBlockValue));
+            case 22:
+              _context3.next = 28;
+              break;
+            case 24:
+              _context3.prev = 24;
+              _context3.t0 = _context3["catch"](0);
+              // eslint-disable-next-line no-console
+              console.error('Failed to write synced block data:', _context3.t0);
+              return _context3.abrupt("return", Promise.reject(_context3.t0));
+            case 28:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this, [[0, 24]]);
+      }));
+      function writeData(_x5, _x6, _x7, _x8) {
+        return _writeData.apply(this, arguments);
+      }
+      return writeData;
+    }()
+  }]);
+}();
+/**
+ * Factory function to create both providers with shared configuration
+ */
+var createContentAPIProviders = function createContentAPIProviders(config) {
+  var fetchProvider = new ConfluenceADFFetchProvider(config);
+  var writeProvider = new ConfluenceADFWriteProvider(config);
+  return {
+    fetchProvider: fetchProvider,
+    writeProvider: writeProvider
+  };
+};
+
+/**
+ * Convenience function to create providers with default content property key
+ */
+var createContentAPIProvidersWithDefaultKey = exports.createContentAPIProvidersWithDefaultKey = function createContentAPIProvidersWithDefaultKey(cloudId) {
+  return createContentAPIProviders({
+    cloudId: cloudId,
+    contentPropertyKey: 'editor-synced-block'
+  });
+};
+var useMemoizedContentAPIProviders = exports.useMemoizedContentAPIProviders = function useMemoizedContentAPIProviders(cloudId) {
+  return (0, _react.useMemo)(function () {
+    return createContentAPIProvidersWithDefaultKey(cloudId);
+  }, [cloudId]);
+};

package/dist/cjs/utils/ari.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPageIdFromAri = exports.getLocalIdFromAri = exports.getContentPropertyIdFromAri = exports.getContentPropertyAri = exports.getConfluencePageAri = void 0;
+var getConfluencePageAri = exports.getConfluencePageAri = function getConfluencePageAri(pageId, cloudId) {
+  return "ari:cloud:confluence:".concat(cloudId, ":page/").concat(pageId);
+};
+var getPageIdFromAri = exports.getPageIdFromAri = function getPageIdFromAri(ari) {
+  // eslint-disable-next-line require-unicode-regexp
+  var match = ari.match(/ari:cloud:confluence:[^:]+:page\/(\d+)/);
+  if (match !== null && match !== void 0 && match[1]) {
+    return match[1];
+  }
+  throw new Error("Invalid page ARI: ".concat(ari));
+};
+
+/**
+ *
+ * @param ari ari:cloud:confluence:<cloudId>:page/<pageId>/<localId>
+ * @returns
+ */
+var getLocalIdFromAri = exports.getLocalIdFromAri = function getLocalIdFromAri(ari) {
+  // eslint-disable-next-line require-unicode-regexp
+  var match = ari.match(/ari:cloud:confluence:[^:]+:page\/\d+\/([a-zA-Z0-9-]+)/);
+  if (match !== null && match !== void 0 && match[1]) {
+    return match[1];
+  }
+  throw new Error("Invalid page ARI: ".concat(ari));
+};
+var getContentPropertyAri = exports.getContentPropertyAri = function getContentPropertyAri(contentPropertyId, cloudId) {
+  return "ari:cloud:confluence:".concat(cloudId, ":content/").concat(contentPropertyId);
+};
+var getContentPropertyIdFromAri = exports.getContentPropertyIdFromAri = function getContentPropertyIdFromAri(ari) {
+  // eslint-disable-next-line require-unicode-regexp
+  var match = ari.match(/ari:cloud:confluence:[^:]+:content\/([^/]+)/);
+  if (match) {
+    return match[1];
+  }
+  throw new Error("Invalid content property ARI: ".concat(ari));
+};