@atlaskit/editor-plugin-block-controls 8.6.4 → 8.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 8.7.0
+
+### Minor Changes
+
+- [`f5af4a28f2237`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f5af4a28f2237) -
+  Add node decoration registration API to block-controls plugin
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.6.4
 
 ### Patch Changes

package/block-decoration-utils/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/editor-plugin-block-controls/block-decoration-utils",
+  "main": "../dist/cjs/ui/block-decoration-utils.js",
+  "module": "../dist/esm/ui/block-decoration-utils.js",
+  "module:es2019": "../dist/es2019/ui/block-decoration-utils.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/ui/block-decoration-utils.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/ui/block-decoration-utils.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/blockControlsPlugin.js

@@ -31,15 +31,29 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPlugin(_ref) {
   var api = _ref.api;
+  var nodeDecorationRegistry = [];
   return {
     name: 'blockControls',
+    actions: {
+      registerNodeDecoration: function registerNodeDecoration(factory) {
+        nodeDecorationRegistry.push(factory);
+      },
+      unregisterNodeDecoration: function unregisterNodeDecoration(type) {
+        var idx = nodeDecorationRegistry.findIndex(function (f) {
+          return f.type === type;
+        });
+        if (idx !== -1) {
+          nodeDecorationRegistry.splice(idx, 1);
+        }
+      }
+    },
     pmPlugins: function pmPlugins() {
       var pmPlugins = [{
         name: 'blockControlsPmPlugin',
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI);
+          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry);
         }
       }];
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {

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

@@ -31,7 +31,6 @@ var _decorationsDragHandle = require("./decorations-drag-handle");
 var _decorationsDropTarget = require("./decorations-drop-target");
 var _decorationsDropTargetActive = require("./decorations-drop-target-active");
 var _decorationsQuickInsertButton = require("./decorations-quick-insert-button");
-var _decorationsRemixButton = require("./decorations-remix-button");
 var _handleMouseDown = require("./handle-mouse-down");
 var _handleMouseOver = require("./handle-mouse-over");
 var _keymap = require("./keymap");
@@ -41,6 +40,9 @@ var _anchorUtils = require("./utils/anchor-utils");
 var _getSelection = require("./utils/getSelection");
 var _selection = require("./utils/selection");
 var _transactions = require("./utils/transactions");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+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; }
 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 key = exports.key = new _state.PluginKey('blockControls');
@@ -241,7 +243,7 @@ var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to
   var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-var _apply = exports.apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache, resizeObserverWidth, pragmaticCleanup) {
+var _apply = exports.apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, anchorRectCache, resizeObserverWidth, pragmaticCleanup) {
   var _api$limitedMode, _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
@@ -440,10 +442,26 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       var _activeNode7, _activeNode8;
       var oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.rootPos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
-      if ((0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)) {
-        var _activeNode9, _activeNode0;
-        var oldRemixButton = (0, _decorationsRemixButton.findRemixButtonDecoration)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.rootPos);
-        decorations = decorations.remove(oldRemixButton);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_expose_block_controls_deco_api')) {
+        var _iterator = _createForOfIteratorHelper(nodeDecorationRegistry),
+          _step;
+        try {
+          var _loop = function _loop() {
+            var _activeNode9, _activeNode0;
+            var factory = _step.value;
+            var old = decorations.find((_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.rootPos, function (spec) {
+              return spec.type === factory.type;
+            });
+            decorations = decorations.remove(old);
+          };
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            _loop();
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
       }
     }
   } else if (api) {
@@ -484,27 +502,36 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
-      if ((0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)) {
-        var _activeNode13, _activeNode14, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
-        var _oldRemixButton = (0, _decorationsRemixButton.findRemixButtonDecoration)(decorations, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos);
-        decorations = decorations.remove(_oldRemixButton);
-        var remixButton = (0, _decorationsRemixButton.remixButtonDecoration)({
-          api: api,
-          formatMessage: formatMessage,
-          anchorName: (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.anchorName,
-          nodeType: (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.nodeType,
-          nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
-          rootPos: (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.rootPos,
-          rootAnchorName: (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.rootAnchorName,
-          rootNodeType: (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.rootNodeType,
-          editorState: newState
-        });
-        decorations = decorations.add(newState.doc, [remixButton]);
-      } else {
-        var _activeNode15, _activeNode16;
-        // Remove remix decoration when experiment is off so it disappears when flag is toggled
-        var _oldRemixButton2 = (0, _decorationsRemixButton.findRemixButtonDecoration)(decorations, (_activeNode15 = activeNode) === null || _activeNode15 === void 0 ? void 0 : _activeNode15.rootPos, (_activeNode16 = activeNode) === null || _activeNode16 === void 0 ? void 0 : _activeNode16.rootPos);
-        decorations = decorations.remove(_oldRemixButton2);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_expose_block_controls_deco_api')) {
+        var _iterator2 = _createForOfIteratorHelper(nodeDecorationRegistry),
+          _step2;
+        try {
+          var _loop2 = function _loop2() {
+            var _activeNode13, _activeNode14, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
+            var factory = _step2.value;
+            var old = decorations.find((_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos, function (spec) {
+              return spec.type === factory.type;
+            });
+            decorations = decorations.remove(old);
+            var dec = factory.create({
+              editorState: newState,
+              nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+              anchorName: (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.anchorName,
+              nodeType: (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.nodeType,
+              rootPos: (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.rootPos,
+              rootAnchorName: (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.rootAnchorName,
+              rootNodeType: (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.rootNodeType
+            });
+            decorations = decorations.add(newState.doc, [dec]);
+          };
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            _loop2();
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
       }
     }
   }
@@ -602,7 +629,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
-var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI) {
+var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = (0, _experiments.editorExperiment)('advanced_layouts', true, {
@@ -629,7 +656,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
         return initialState;
       },
       apply: function apply(tr, currentState, _, newState) {
-        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache, resizeObserverWidth, pragmaticCleanup);
+        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, anchorRectCache, resizeObserverWidth, pragmaticCleanup);
       }
     },
     props: {

package/dist/cjs/ui/block-decoration-utils.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "VisibilityContainer", {
+  enumerable: true,
+  get: function get() {
+    return _visibilityContainer.VisibilityContainer;
+  }
+});
+Object.defineProperty(exports, "getAnchorAttrName", {
+  enumerable: true,
+  get: function get() {
+    return _domAttrName.getAnchorAttrName;
+  }
+});
+Object.defineProperty(exports, "getRightPositionForRootElement", {
+  enumerable: true,
+  get: function get() {
+    return _widgetPositions.getRightPositionForRootElement;
+  }
+});
+Object.defineProperty(exports, "getTopPosition", {
+  enumerable: true,
+  get: function get() {
+    return _dragHandlePositions.getTopPosition;
+  }
+});
+Object.defineProperty(exports, "refreshAnchorName", {
+  enumerable: true,
+  get: function get() {
+    return _anchorName.refreshAnchorName;
+  }
+});
+Object.defineProperty(exports, "rootElementGap", {
+  enumerable: true,
+  get: function get() {
+    return _consts.rootElementGap;
+  }
+});
+Object.defineProperty(exports, "topPositionAdjustment", {
+  enumerable: true,
+  get: function get() {
+    return _consts.topPositionAdjustment;
+  }
+});
+var _visibilityContainer = require("./visibility-container");
+var _anchorName = require("./utils/anchor-name");
+var _domAttrName = require("./utils/dom-attr-name");
+var _consts = require("./consts");
+var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
+var _widgetPositions = require("../pm-plugins/utils/widget-positions");

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.REMIX_BUTTON_WIDTH = exports.REMIX_BUTTON_RIGHT_OFFSET = exports.REMIX_BUTTON_HEIGHT = exports.REMIX_BUTTON_DIMENSIONS = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -44,14 +44,6 @@ var QUICK_INSERT_DIMENSIONS = exports.QUICK_INSERT_DIMENSIONS = {
   height: QUICK_INSERT_HEIGHT
 };
 var QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_LEFT_OFFSET = 16;
-var REMIX_BUTTON_HEIGHT = exports.REMIX_BUTTON_HEIGHT = 24;
-var REMIX_BUTTON_WIDTH = exports.REMIX_BUTTON_WIDTH = 24;
-var REMIX_BUTTON_DIMENSIONS = exports.REMIX_BUTTON_DIMENSIONS = {
-  width: REMIX_BUTTON_WIDTH,
-  height: REMIX_BUTTON_HEIGHT
-};
-/** Extra offset to the right for the right-side Remix button (px) */
-var REMIX_BUTTON_RIGHT_OFFSET = exports.REMIX_BUTTON_RIGHT_OFFSET = 55;
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var breakoutResizableNodes = ['expand', 'layoutSection', 'codeBlock'];
 var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {