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

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

@@ -23,7 +23,6 @@ import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } fr
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { getActiveDropTargetDecorations } from './decorations-drop-target-active';
 import { findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
-import { findRemixButtonDecoration, remixButtonDecoration } from './decorations-remix-button';
 import { handleMouseDown } from './handle-mouse-down';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
@@ -235,7 +234,7 @@ const getDecorationAtPos = (state, decorations, pos, to) => {
   const nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache, resizeObserverWidth, pragmaticCleanup) => {
+export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, anchorRectCache, resizeObserverWidth, pragmaticCleanup) => {
   var _api$limitedMode, _api$limitedMode$shar, _api$limitedMode$shar2, _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;
   let {
     activeNode,
@@ -437,10 +436,12 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
       var _activeNode7, _activeNode8;
       const oldQuickInsertButton = 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 (expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
-        var _activeNode9, _activeNode0;
-        const oldRemixButton = 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 (fg('platform_editor_expose_block_controls_deco_api')) {
+        for (const factory of nodeDecorationRegistry) {
+          var _activeNode9, _activeNode0;
+          const old = decorations.find((_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.rootPos, spec => spec.type === factory.type);
+          decorations = decorations.remove(old);
+        }
       }
     }
   } else if (api) {
@@ -481,27 +482,22 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
-      if (expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
-        var _activeNode13, _activeNode14, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
-        const oldRemixButton = 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);
-        const remixButton = remixButtonDecoration({
-          api,
-          formatMessage,
-          anchorName: (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.anchorName,
-          nodeType: (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.nodeType,
-          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
-        const oldRemixButton = 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(oldRemixButton);
+      if (fg('platform_editor_expose_block_controls_deco_api')) {
+        for (const factory of nodeDecorationRegistry) {
+          var _activeNode13, _activeNode14, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
+          const old = decorations.find((_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos, spec => spec.type === factory.type);
+          decorations = decorations.remove(old);
+          const dec = factory.create({
+            editorState: newState,
+            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]);
+        }
       }
     }
   }
@@ -600,7 +596,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
-export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
+export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry) => {
   const {
     formatMessage
   } = getIntl();
@@ -627,7 +623,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
       init() {
         return initialState;
       },
-      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache, resizeObserverWidth, pragmaticCleanup)
+      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, anchorRectCache, resizeObserverWidth, pragmaticCleanup)
     },
     props: {
       decorations: state => {

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

@@ -0,0 +1,9 @@
+// Disable no-re-export rule for entry point files
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+export { VisibilityContainer } from './visibility-container';
+export { refreshAnchorName } from './utils/anchor-name';
+export { getAnchorAttrName } from './utils/dom-attr-name';
+export { rootElementGap, topPositionAdjustment } from './consts';
+export { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+export { getRightPositionForRootElement } from '../pm-plugins/utils/widget-positions';

package/dist/es2019/ui/consts.js

@@ -35,14 +35,6 @@ export const QUICK_INSERT_DIMENSIONS = {
   height: QUICK_INSERT_HEIGHT
 };
 export const QUICK_INSERT_LEFT_OFFSET = 16;
-export const REMIX_BUTTON_HEIGHT = 24;
-export const REMIX_BUTTON_WIDTH = 24;
-export const REMIX_BUTTON_DIMENSIONS = {
-  width: REMIX_BUTTON_WIDTH,
-  height: REMIX_BUTTON_HEIGHT
-};
-/** Extra offset to the right for the right-side Remix button (px) */
-export const REMIX_BUTTON_RIGHT_OFFSET = 55;
 const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 const breakoutResizableNodes = ['expand', 'layoutSection', 'codeBlock'];
 export const dragHandleGap = (nodeType, parentNodeType) => {

package/dist/esm/blockControlsPlugin.js

@@ -24,15 +24,29 @@ import { selectNode } from './pm-plugins/utils/getSelection';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export var 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 createPlugin(api, getIntl, nodeViewPortalProviderAPI);
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry);
         }
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {

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

@@ -1,4 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import rafSchedule from 'raf-schd';
@@ -26,7 +29,6 @@ import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } fr
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { getActiveDropTargetDecorations } from './decorations-drop-target-active';
 import { findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
-import { findRemixButtonDecoration, remixButtonDecoration } from './decorations-remix-button';
 import { handleMouseDown } from './handle-mouse-down';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
@@ -234,7 +236,7 @@ var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to
   var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-var _apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache, resizeObserverWidth, pragmaticCleanup) {
+var _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,
@@ -433,10 +435,26 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       var _activeNode7, _activeNode8;
       var oldQuickInsertButton = 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 (expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
-        var _activeNode9, _activeNode0;
-        var oldRemixButton = 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 (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) {
@@ -477,27 +495,36 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
-      if (expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
-        var _activeNode13, _activeNode14, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
-        var _oldRemixButton = 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 = 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 = 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 (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();
+        }
       }
     }
   }
@@ -596,7 +623,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   };
 };
 export { _apply as apply };
-export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI) {
+export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true, {
@@ -623,7 +650,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
         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/esm/ui/block-decoration-utils.js

@@ -0,0 +1,9 @@
+// Disable no-re-export rule for entry point files
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+export { VisibilityContainer } from './visibility-container';
+export { refreshAnchorName } from './utils/anchor-name';
+export { getAnchorAttrName } from './utils/dom-attr-name';
+export { rootElementGap, topPositionAdjustment } from './consts';
+export { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+export { getRightPositionForRootElement } from '../pm-plugins/utils/widget-positions';

package/dist/esm/ui/consts.js

@@ -37,14 +37,6 @@ export var QUICK_INSERT_DIMENSIONS = {
   height: QUICK_INSERT_HEIGHT
 };
 export var QUICK_INSERT_LEFT_OFFSET = 16;
-export var REMIX_BUTTON_HEIGHT = 24;
-export var REMIX_BUTTON_WIDTH = 24;
-export var REMIX_BUTTON_DIMENSIONS = {
-  width: REMIX_BUTTON_WIDTH,
-  height: REMIX_BUTTON_HEIGHT
-};
-/** Extra offset to the right for the right-side Remix button (px) */
-export var REMIX_BUTTON_RIGHT_OFFSET = 55;
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var breakoutResizableNodes = ['expand', 'layoutSection', 'codeBlock'];
 export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {

package/dist/types/blockControlsPluginType.d.ts

@@ -1,5 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { DIRECTION, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
@@ -14,9 +15,9 @@ import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 import type { Mapping } from '@atlaskit/editor-prosemirror/transform';
-import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export type ActiveNode = {
     anchorName: string;
     handleOptions?: HandleOptions;
@@ -100,6 +101,19 @@ export type BlockControlsSharedState = {
 export type HandleOptions = {
     isFocused: boolean;
 } | undefined;
+export type NodeDecorationFactoryParams = {
+    anchorName: string;
+    editorState: EditorState;
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    rootAnchorName?: string;
+    rootNodeType?: string;
+    rootPos: number;
+};
+export type NodeDecorationFactory = {
+    create: (params: NodeDecorationFactoryParams) => Decoration;
+    type: string;
+};
 export type MoveNode = (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
 export type BlockControlsPluginDependencies = [
     OptionalPlugin<LimitedModePlugin>,
@@ -117,6 +131,10 @@ export type BlockControlsPluginDependencies = [
     OptionalPlugin<ToolbarPlugin>
 ];
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
+    actions: {
+        registerNodeDecoration: (factory: NodeDecorationFactory) => void;
+        unregisterNodeDecoration: (type: string) => void;
+    };
     commands: {
         handleKeyDownWithPreservedSelection: (event: KeyboardEvent) => EditorCommand;
         mapPreservedSelection: (mapping: Mapping) => EditorCommand;

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './blockControlsPlugin';
-export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, BlockControlsPluginDependencies, PluginState, MoveNode, } from './blockControlsPluginType';
+export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, BlockControlsPluginDependencies, NodeDecorationFactory, NodeDecorationFactoryParams, PluginState, MoveNode, } from './blockControlsPluginType';

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

@@ -5,7 +5,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, MultiSelectDnD, PluginState } from '../blockControlsPluginType';
+import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, MultiSelectDnD, NodeDecorationFactory, PluginState } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const key: PluginKey<PluginState>;
 export interface FlagType {
@@ -13,7 +13,7 @@ export interface FlagType {
     toolbarFlagsEnabled: boolean;
 }
 export declare const getDecorations: (state: EditorState) => DecorationSet | undefined;
-export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape["formatMessage"], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, anchorRectCache?: AnchorRectCache, resizeObserverWidth?: ResizeObserver, pragmaticCleanup?: (() => void) | null) => PluginState | {
+export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape["formatMessage"], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], anchorRectCache?: AnchorRectCache, resizeObserverWidth?: ResizeObserver, pragmaticCleanup?: (() => void) | null) => PluginState | {
     activeDropTargetNode: ActiveDropTargetNode | undefined;
     activeNode: any;
     blockMenuOptions: {
@@ -37,7 +37,7 @@ export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | und
     menuTriggerByNode: any;
     multiSelectDnD: MultiSelectDnD | undefined;
 };
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => SafePlugin<PluginState | {
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[]) => SafePlugin<PluginState | {
     activeDropTargetNode: ActiveDropTargetNode | undefined;
     activeNode: any;
     blockMenuOptions: {

package/dist/types/ui/block-decoration-utils.d.ts

@@ -0,0 +1,6 @@
+export { VisibilityContainer } from './visibility-container';
+export { refreshAnchorName } from './utils/anchor-name';
+export { getAnchorAttrName } from './utils/dom-attr-name';
+export { rootElementGap, topPositionAdjustment } from './consts';
+export { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+export { getRightPositionForRootElement } from '../pm-plugins/utils/widget-positions';

package/dist/types/ui/consts.d.ts

@@ -30,14 +30,6 @@ export declare const QUICK_INSERT_DIMENSIONS: {
     height: number;
 };
 export declare const QUICK_INSERT_LEFT_OFFSET = 16;
-export declare const REMIX_BUTTON_HEIGHT = 24;
-export declare const REMIX_BUTTON_WIDTH = 24;
-export declare const REMIX_BUTTON_DIMENSIONS: {
-    width: number;
-    height: number;
-};
-/** Extra offset to the right for the right-side Remix button (px) */
-export declare const REMIX_BUTTON_RIGHT_OFFSET = 55;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const rootElementGap: (nodeType: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";

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

@@ -1,5 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { DIRECTION, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
@@ -14,9 +15,9 @@ import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 import type { Mapping } from '@atlaskit/editor-prosemirror/transform';
-import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export type ActiveNode = {
     anchorName: string;
     handleOptions?: HandleOptions;
@@ -100,6 +101,19 @@ export type BlockControlsSharedState = {
 export type HandleOptions = {
     isFocused: boolean;
 } | undefined;
+export type NodeDecorationFactoryParams = {
+    anchorName: string;
+    editorState: EditorState;
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    rootAnchorName?: string;
+    rootNodeType?: string;
+    rootPos: number;
+};
+export type NodeDecorationFactory = {
+    create: (params: NodeDecorationFactoryParams) => Decoration;
+    type: string;
+};
 export type MoveNode = (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
 export type BlockControlsPluginDependencies = [
     OptionalPlugin<LimitedModePlugin>,
@@ -117,6 +131,10 @@ export type BlockControlsPluginDependencies = [
     OptionalPlugin<ToolbarPlugin>
 ];
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
+    actions: {
+        registerNodeDecoration: (factory: NodeDecorationFactory) => void;
+        unregisterNodeDecoration: (type: string) => void;
+    };
     commands: {
         handleKeyDownWithPreservedSelection: (event: KeyboardEvent) => EditorCommand;
         mapPreservedSelection: (mapping: Mapping) => EditorCommand;

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

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './blockControlsPlugin';
-export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, BlockControlsPluginDependencies, PluginState, MoveNode, } from './blockControlsPluginType';
+export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, BlockControlsPluginDependencies, NodeDecorationFactory, NodeDecorationFactoryParams, PluginState, MoveNode, } from './blockControlsPluginType';

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

@@ -5,7 +5,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, MultiSelectDnD, PluginState } from '../blockControlsPluginType';
+import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, MultiSelectDnD, NodeDecorationFactory, PluginState } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const key: PluginKey<PluginState>;
 export interface FlagType {
@@ -13,7 +13,7 @@ export interface FlagType {
     toolbarFlagsEnabled: boolean;
 }
 export declare const getDecorations: (state: EditorState) => DecorationSet | undefined;
-export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape["formatMessage"], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, anchorRectCache?: AnchorRectCache, resizeObserverWidth?: ResizeObserver, pragmaticCleanup?: (() => void) | null) => PluginState | {
+export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape["formatMessage"], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], anchorRectCache?: AnchorRectCache, resizeObserverWidth?: ResizeObserver, pragmaticCleanup?: (() => void) | null) => PluginState | {
     activeDropTargetNode: ActiveDropTargetNode | undefined;
     activeNode: any;
     blockMenuOptions: {
@@ -37,7 +37,7 @@ export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | und
     menuTriggerByNode: any;
     multiSelectDnD: MultiSelectDnD | undefined;
 };
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => SafePlugin<PluginState | {
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[]) => SafePlugin<PluginState | {
     activeDropTargetNode: ActiveDropTargetNode | undefined;
     activeNode: any;
     blockMenuOptions: {

package/dist/types-ts4.5/ui/block-decoration-utils.d.ts

@@ -0,0 +1,6 @@
+export { VisibilityContainer } from './visibility-container';
+export { refreshAnchorName } from './utils/anchor-name';
+export { getAnchorAttrName } from './utils/dom-attr-name';
+export { rootElementGap, topPositionAdjustment } from './consts';
+export { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+export { getRightPositionForRootElement } from '../pm-plugins/utils/widget-positions';

package/dist/types-ts4.5/ui/consts.d.ts

@@ -30,14 +30,6 @@ export declare const QUICK_INSERT_DIMENSIONS: {
     height: number;
 };
 export declare const QUICK_INSERT_LEFT_OFFSET = 16;
-export declare const REMIX_BUTTON_HEIGHT = 24;
-export declare const REMIX_BUTTON_WIDTH = 24;
-export declare const REMIX_BUTTON_DIMENSIONS: {
-    width: number;
-    height: number;
-};
-/** Extra offset to the right for the right-side Remix button (px) */
-export declare const REMIX_BUTTON_RIGHT_OFFSET = 55;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const rootElementGap: (nodeType: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "8.6.3",
+	"version": "8.7.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.5.0",
+		"@atlaskit/adf-schema": "^52.0.0",
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^7.0.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^31.0.0",
+		"@atlaskit/tmp-editor-statsig": "^31.3.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
@@ -144,6 +144,9 @@
 		"platform_editor_table_sticky_header_patch_6": {
 			"type": "boolean"
 		},
+		"platform_editor_expose_block_controls_deco_api": {
+			"type": "boolean"
+		},
 		"platform_editor_native_anchor_patch_1": {
 			"type": "boolean"
 		},