@atlaskit/editor-plugin-synced-block 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @atlaskit/editor-plugin-synced-block
+
+## 0.1.0
+
+### Minor Changes
+
+- [`c29118e6ca79d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c29118e6ca79d) -
+  ED-28986 create initial version of synced blocks
+
+### Patch Changes
+
+- Updated dependencies

package/LICENSE.md

@@ -0,0 +1,11 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/README.md

@@ -0,0 +1 @@
+# Editor plugin synced block

package/SyncedBlock/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/editor-plugin-synced-block/SyncedBlock",
+  "main": "../dist/cjs/ui/extensions/synced-block/index.js",
+  "module": "../dist/esm/ui/extensions/synced-block/index.js",
+  "module:es2019": "../dist/es2019/ui/extensions/synced-block/index.js",
+  "sideEffects": false,
+  "types": "../dist/types/ui/extensions/synced-block/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/ui/extensions/synced-block/index.d.ts"
+      ]
+    }
+  }
+}

package/afm-cc/tsconfig.json

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

package/build/tsconfig.json

@@ -0,0 +1,22 @@
+{
+	"extends": "../tsconfig",
+	"compilerOptions": {
+		"target": "es5",
+		"paths": {}
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	]
+}

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "syncedBlockPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _syncedBlockPlugin.syncedBlockPlugin;
+  }
+});
+var _syncedBlockPlugin = require("./syncedBlockPlugin");

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

@@ -0,0 +1,167 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncClient = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
+var _ari = require("../ui/extensions/synced-block/utils/ari");
+var _contentProperty = require("../ui/extensions/synced-block/utils/content-property");
+var _syncedBlock = require("../ui/extensions/synced-block/utils/synced-block");
+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 transformer = new _editorJsonTransformer.JSONTransformer();
+var toJSON = function toJSON(node) {
+  return transformer.encodeNode(node);
+};
+var getCacheKey = function getCacheKey(_ref) {
+  var sourceDocumentAri = _ref.sourceDocumentAri,
+    contentAri = _ref.contentAri,
+    contentPropertyKey = _ref.contentPropertyKey;
+  return "".concat(sourceDocumentAri, "-").concat(contentAri, "-").concat(contentPropertyKey);
+};
+var SyncClient = exports.SyncClient = /*#__PURE__*/function () {
+  function SyncClient() {
+    (0, _classCallCheck2.default)(this, SyncClient);
+    (0, _defineProperty2.default)(this, "requestMap", new Map());
+    this.requestMap = new Map();
+  }
+  return (0, _createClass2.default)(SyncClient, [{
+    key: "getRequestState",
+    value: function getRequestState(key) {
+      return this.requestMap.get(key);
+    }
+  }, {
+    key: "setRequestState",
+    value: function setRequestState(key, state) {
+      this.requestMap.set(key, state);
+    }
+  }, {
+    key: "sendRequest",
+    value: function () {
+      var _sendRequest = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref2) {
+        var sourceDocumentAri, contentAri, contentPropertyKey, value, pageId, contentPropertyId, contentProperty, updatedValue;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              sourceDocumentAri = _ref2.sourceDocumentAri, contentAri = _ref2.contentAri, contentPropertyKey = _ref2.contentPropertyKey, value = _ref2.value;
+              pageId = (0, _ari.getPageIdFromAri)(sourceDocumentAri);
+              contentPropertyId = (0, _ari.getContentPropertyIdFromAri)(contentAri);
+              _context.prev = 3;
+              _context.next = 6;
+              return (0, _contentProperty.getContentProperty)({
+                pageId: pageId,
+                contentPropertyId: contentPropertyId
+              });
+            case 6:
+              contentProperty = _context.sent;
+              updatedValue = (0, _syncedBlock.stringifySyncedBlockContentPropertyValue)(_objectSpread(_objectSpread({}, (0, _syncedBlock.parseSyncedBlockContentPropertyValue)(contentProperty.value)), JSON.parse(value)));
+              _context.next = 10;
+              return (0, _contentProperty.updateContentProperty)({
+                pageId: pageId,
+                key: contentPropertyKey,
+                value: updatedValue,
+                signal: undefined
+              });
+            case 10:
+              _context.next = 15;
+              break;
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](3);
+              // eslint-disable-next-line no-console
+              console.error('Failed to update content property:', _context.t0);
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[3, 12]]);
+      }));
+      function sendRequest(_x) {
+        return _sendRequest.apply(this, arguments);
+      }
+      return sendRequest;
+    }()
+  }, {
+    key: "syncContent",
+    value: function syncContent(_ref3) {
+      var _this = this;
+      var sourceDocumentAri = _ref3.sourceDocumentAri,
+        contentAri = _ref3.contentAri,
+        contentPropertyKey = _ref3.contentPropertyKey,
+        node = _ref3.node;
+      var nodeAdf = toJSON(node);
+      var key = getCacheKey({
+        sourceDocumentAri: sourceDocumentAri,
+        contentAri: contentAri,
+        contentPropertyKey: contentPropertyKey
+      });
+      var value = (0, _syncedBlock.stringifySyncedBlockContentPropertyValue)({
+        adf: nodeAdf
+      });
+      var requestState = this.getRequestState(key) || {
+        timeout: null,
+        pendingValue: null,
+        isSending: false
+      };
+      requestState.pendingValue = value;
+      if (requestState.isSending) {
+        return;
+      }
+      if (requestState.timeout) {
+        clearTimeout(requestState.timeout);
+      }
+      var send = /*#__PURE__*/function () {
+        var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!requestState.isSending) {
+                  _context2.next = 2;
+                  break;
+                }
+                return _context2.abrupt("return");
+              case 2:
+                requestState.isSending = true;
+                _context2.prev = 3;
+                _context2.next = 6;
+                return _this.sendRequest({
+                  sourceDocumentAri: sourceDocumentAri,
+                  contentAri: contentAri,
+                  contentPropertyKey: contentPropertyKey,
+                  value: requestState.pendingValue || ''
+                });
+              case 6:
+                requestState.pendingValue = null;
+                _context2.next = 12;
+                break;
+              case 9:
+                _context2.prev = 9;
+                _context2.t0 = _context2["catch"](3);
+                // eslint-disable-next-line no-console
+                console.error('Failed to send synced block content:', _context2.t0);
+              case 12:
+                _context2.prev = 12;
+                requestState.isSending = false;
+                return _context2.finish(12);
+              case 15:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2, null, [[3, 9, 12, 15]]);
+        }));
+        return function send() {
+          return _ref4.apply(this, arguments);
+        };
+      }();
+      requestState.timeout = setTimeout(send, 1000);
+      this.setRequestState(key, requestState);
+    }
+  }]);
+}();

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.syncedBlockPluginKey = exports.createPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _SyncClient = require("./SyncClient");
+var _utils = require("./utils");
+var syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('syncedBlockPlugin');
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+
+var createPlugin = exports.createPlugin = function createPlugin() {
+  var syncClient = new _SyncClient.SyncClient();
+  return new _safePlugin.SafePlugin({
+    key: syncedBlockPluginKey,
+    state: {
+      init: function init() {
+        return {};
+      },
+      apply: function apply(tr, currentPluginState) {
+        if (tr.docChanged) {
+          var $pos = tr.selection.$from;
+          var syncedBlockParent = (0, _utils.findSyncedBlockParent)($pos);
+          if (syncedBlockParent) {
+            var node = syncedBlockParent.node,
+              attributes = syncedBlockParent.attributes;
+            var _attributes$parameter = attributes.parameters,
+              sourceDocumentAri = _attributes$parameter.sourceDocumentAri,
+              contentAri = _attributes$parameter.contentAri,
+              contentPropertyKey = _attributes$parameter.contentPropertyKey;
+            syncClient.syncContent({
+              sourceDocumentAri: sourceDocumentAri,
+              contentAri: contentAri,
+              contentPropertyKey: contentPropertyKey,
+              node: node
+            });
+          }
+        }
+        var meta = tr.getMeta(syncedBlockPluginKey);
+        if (meta) {
+          return meta;
+        }
+        return currentPluginState;
+      }
+    }
+  });
+};

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findSyncedBlockParent = void 0;
+var _syncedBlock = require("../ui/extensions/synced-block/utils/synced-block");
+var findSyncedBlockParent = exports.findSyncedBlockParent = function findSyncedBlockParent($pos) {
+  for (var i = 0; i <= $pos.depth; i++) {
+    var node = $pos.node(i);
+    if ((0, _syncedBlock.isSyncedBlockAttributes)(node.attrs)) {
+      return {
+        node: node,
+        attributes: node.attrs
+      };
+    }
+  }
+  return;
+};

package/dist/cjs/syncedBlockPlugin.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.syncedBlockPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _main = require("./pm-plugins/main");
+var _GlobalStyles = require("./ui/extensions/synced-block/components/GlobalStyles");
+var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin() {
+  return {
+    name: 'syncedBlock',
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'syncedBlockPlugin',
+        plugin: _main.createPlugin
+      }];
+    },
+    contentComponent: function contentComponent() {
+      return /*#__PURE__*/_react.default.createElement(_GlobalStyles.GlobalStylesWrapper, null);
+    }
+  };
+};

package/dist/cjs/syncedBlockPluginType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/ui/extensions/synced-block/components/GlobalStyles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalStylesWrapper = void 0;
+var _react = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @atlaskit/ui-styling-standard/no-global-styles
+
+var extensionStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[extensionkey="synced-block:reference"] .ak-renderer-wrapper > div:last-of-type': {
+    padding: "var(--ds-space-250, 20px)",
+    paddingRight: "var(--ds-space-250, 20px)"
+  }
+});
+var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
+  return (0, _react.jsx)(_react.Global, {
+    styles: [extensionStyles]
+  });
+};

package/dist/cjs/ui/extensions/synced-block/components/SyncedBlockLiveView.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useLiveSyncedBlockContent = require("../hooks/useLiveSyncedBlockContent");
+var _SyncedBlockRenderer = _interopRequireDefault(require("./SyncedBlockRenderer"));
+var SyncedBlockLiveView = function SyncedBlockLiveView(_ref) {
+  var sourceDocumentAri = _ref.sourceDocumentAri,
+    contentAri = _ref.contentAri;
+  var syncedBlockContent = (0, _useLiveSyncedBlockContent.useLiveSyncedBlockContent)({
+    sourceDocumentAri: sourceDocumentAri,
+    contentAri: contentAri
+  });
+  if (!syncedBlockContent) {
+    return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
+  }
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockRenderer.default, {
+    syncedBlockContent: syncedBlockContent
+  });
+};
+var _default = exports.default = SyncedBlockLiveView;

package/dist/cjs/ui/extensions/synced-block/components/SyncedBlockRenderer.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _renderer = require("@atlaskit/renderer");
+var _actions = require("@atlaskit/renderer/actions");
+var SyncedBlockRenderer = function SyncedBlockRenderer(_ref) {
+  var syncedBlockContent = _ref.syncedBlockContent;
+  return /*#__PURE__*/_react.default.createElement(_actions.RendererActionsContext, null, /*#__PURE__*/_react.default.createElement(_renderer.ReactRenderer, {
+    adfStage: "stage0"
+    // @ts-ignore
+    ,
+    document: {
+      type: 'doc',
+      version: 1,
+      content: syncedBlockContent.adf.content
+    },
+    appearance: "full-page"
+  }));
+};
+var _default = exports.default = SyncedBlockRenderer;

package/dist/cjs/ui/extensions/synced-block/constants.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPageId = exports.getCloudId = void 0;
+// hello.atlassian.net cloud id
+var HELLO_CLOUD_ID = 'a436116f-02ce-4520-8fbb-7301462a1674';
+
+// spike page https://hello.atlassian.net/wiki/spaces/~7120208ef57ce4d614485e876489301a16b906/pages/5626233808
+var TEST_PAGE_ID = '5626233808';
+var getPageId = exports.getPageId = function getPageId() {
+  var _window$location$href, _window$location$href2, _window$location$path;
+  return (
+    // eslint-disable-next-line require-unicode-regexp
+    ((_window$location$href = window.location.href.match(/pageId=(\d+)/)) === null || _window$location$href === void 0 ? void 0 : _window$location$href[1]) || ( // eslint-disable-next-line require-unicode-regexp
+    (_window$location$href2 = window.location.href.match(/pages\/edit-v2\/(\d+)/)) === null || _window$location$href2 === void 0 ? void 0 : _window$location$href2[1]) || ( // eslint-disable-next-line require-unicode-regexp
+    (_window$location$path = window.location.pathname.match(/pages\/(\d+)/)) === null || _window$location$path === void 0 ? void 0 : _window$location$path[1]) ||
+    // view page or live doc
+    TEST_PAGE_ID
+  );
+};
+/**
+ * This by no means is a stable way to get the cloud id, but it works for now.
+ * We should switch passing the cloud id from Confluence to a Editor plugin,
+ * for instance the user preferences plugin would have a seperate place for user and cloud info
+ * @returns the cloud id from the initial state
+ */
+var getCloudId = exports.getCloudId = function getCloudId() {
+  var _INITIAL_STATE__;
+  return ((_INITIAL_STATE__ = window.__INITIAL_STATE__) === null || _INITIAL_STATE__ === void 0 || (_INITIAL_STATE__ = _INITIAL_STATE__.meta) === null || _INITIAL_STATE__ === void 0 ? void 0 : _INITIAL_STATE__['cloud-id']) || HELLO_CLOUD_ID;
+};

package/dist/cjs/ui/extensions/synced-block/getSyncedBlockExtensionProvider.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSyncedBlockExtensionProvider = void 0;
+var _extensions = require("@atlaskit/editor-common/extensions");
+var _manifest = require("./manifest");
+var getSyncedBlockExtensionProvider = exports.getSyncedBlockExtensionProvider = function getSyncedBlockExtensionProvider() {
+  return new _extensions.DefaultExtensionProvider([(0, _manifest.getSyncedBlockManifest)()]);
+};

package/dist/cjs/ui/extensions/synced-block/hooks/useLiveSyncedBlockContent.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLiveSyncedBlockContent = void 0;
+var _react = require("react");
+var _usePollContentProperty = require("../hooks/usePollContentProperty");
+var _syncedBlock = require("../utils/synced-block");
+var useLiveSyncedBlockContent = exports.useLiveSyncedBlockContent = function useLiveSyncedBlockContent(_ref) {
+  var sourceDocumentAri = _ref.sourceDocumentAri,
+    contentAri = _ref.contentAri;
+  var contentProperty = (0, _usePollContentProperty.usePollContentProperty)({
+    sourceDocumentAri: sourceDocumentAri,
+    contentAri: contentAri
+  });
+  return (0, _react.useMemo)(function () {
+    if (!contentProperty) {
+      return null;
+    }
+    try {
+      return (0, _syncedBlock.parseSyncedBlockContentPropertyValue)(contentProperty.value);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Failed to extract synced block content:', error);
+      return null;
+    }
+  }, [contentProperty]);
+};