@atlaskit/editor-plugin-extension 1.12.1 → 1.12.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-extension
 
+## 1.12.3
+
+### Patch Changes
+
+- [#127699](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127699)
+  [`3c14790d31686`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3c14790d31686) -
+  [ux] Wrap extension in lazy node view. Align bodied extension with fallback.
+- Updated dependencies
+
+## 1.12.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.12.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/lazyExtension.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyExtensionNodeView = lazyExtensionNodeView;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _extensibility = require("@atlaskit/editor-common/extensibility");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function lazyExtensionNodeView(nodeName) {
+  for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    params[_key - 1] = arguments[_key];
+  }
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _extensibility.ExtensionNodeView.apply(void 0, params);
+  }
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: nodeName,
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-extension-nodeview" */
+        '@atlaskit/editor-common/extensibility'));
+      }).then(function (_ref) {
+        var ExtensionNodeView = _ref.ExtensionNodeView;
+        return ExtensionNodeView.apply(void 0, params);
+      });
+      return result;
+    }
+  });
+}

package/dist/cjs/plugin.js

@@ -17,6 +17,7 @@ var _macro = require("./pm-plugins/macro");
 var _actions2 = require("./pm-plugins/macro/actions");
 var _main = require("./pm-plugins/main");
 var _uniqueId = require("./pm-plugins/unique-id");
+var _bodiedExtension = require("./toDOM-fixes/bodiedExtension");
 var _toolbar = require("./toolbar");
 var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
   var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$decorations, _api$contextPanel4, _api$analytics4;
@@ -37,14 +38,14 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
         node: _adfSchema.extension
       }, {
         name: 'bodiedExtension',
-        node: _adfSchema.bodiedExtension
+        node: (0, _bodiedExtension.bodiedExtensionSpecWithFixedToDOM)()
       }, {
         name: 'inlineExtension',
         node: _adfSchema.inlineExtension
       }];
 
       // Revert to returning all nodes without local variable, once FF is removed
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.multi-bodied-extension_0rygg')) {
+      if ((0, _platformFeatureFlags.fg)('platform.editor.multi-bodied-extension_0rygg')) {
         extensionNodes.push({
           name: 'extensionFrame',
           node: _adfSchema.extensionFrame

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

@@ -27,13 +27,13 @@ Object.defineProperty(exports, "pluginKey", {
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _extensibility = require("@atlaskit/editor-common/extensibility");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection2 = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
+var _lazyExtension = require("../nodeviews/lazyExtension");
 var _pluginFactory = require("../plugin-factory");
 var _pluginKey = require("../plugin-key");
 var _utils2 = require("../utils");
@@ -298,12 +298,12 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, provid
       },
       nodeViews: {
         // WARNING: referentiality-plugin also creates these nodeviews
-        extension: (0, _extensibility.ExtensionNodeView)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
+        extension: (0, _lazyExtension.lazyExtensionNodeView)('extension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
         // WARNING: referentiality-plugin also creates these nodeviews
-        bodiedExtension: (0, _extensibility.ExtensionNodeView)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
+        bodiedExtension: (0, _lazyExtension.lazyExtensionNodeView)('bodiedExtension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
         // WARNING: referentiality-plugin also creates these nodeviews
-        inlineExtension: (0, _extensibility.ExtensionNodeView)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
-        multiBodiedExtension: (0, _extensibility.ExtensionNodeView)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags)
+        inlineExtension: (0, _lazyExtension.lazyExtensionNodeView)('inlineExtension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
+        multiBodiedExtension: (0, _lazyExtension.lazyExtensionNodeView)('multiBodiedExtension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags)
       },
       createSelectionBetween: function createSelectionBetween(view, anchor, head) {
         if (!(0, _platformFeatureFlags.fg)('platform.editor.multi-bodied-extension_0rygg')) {

package/dist/cjs/toDOM-fixes/bodiedExtension.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bodiedExtensionSpecWithFixedToDOM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+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 capitalizeFirstLetter = function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+// @nodeSpecException:toDOM patch
+var bodiedExtensionSpecWithFixedToDOM = exports.bodiedExtensionSpecWithFixedToDOM = function bodiedExtensionSpecWithFixedToDOM() {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _adfSchema.bodiedExtension;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.bodiedExtension), {}, {
+    toDOM: function toDOM(node) {
+      var attrs = {
+        'data-node-type': 'bodied-extension',
+        'data-extension-type': node.attrs.extensionType,
+        'data-extension-key': node.attrs.extensionKey,
+        'data-text': node.attrs.text,
+        'data-parameters': JSON.stringify(node.attrs.parameters),
+        'data-layout': node.attrs.layout,
+        'data-local-id:': node.attrs.localId,
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          position: 'relative',
+          marginTop: "var(--ds-space-300, 24px)"
+        })
+      };
+      var title = node.attrs && node.attrs.extensionTitle || node.attrs && node.attrs.macroMetadata && node.attrs.macroMetadata.title || node.attrs.extensionKey;
+      return ['div', attrs, ['span', {
+        // Styles based on `packages/editor/editor-common/src/extensibility/Extension/Lozenge/ExtensionLabel.tsx`
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
+          fontSize: '14px',
+          padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
+          color: "var(--ds-text-subtle, #44546F)",
+          borderTopLeftRadius: "var(--ds-border-radius, 4px)",
+          borderTopRightRadius: "var(--ds-border-radius, 4px)",
+          lineHeight: 1,
+          position: 'absolute',
+          top: '-19px'
+        }),
+        // If we put this below inside the span then we serialise the label (which causes the label to be
+        // be copied to the clipboard causing copy-paste issues).
+        // So instead we use a pseudo-element to add the title to this class
+        'data-bodied-extension-label': capitalizeFirstLetter(title),
+        class: 'bodied-extension-to-dom-label'
+      }], ['div', {
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          padding: "var(--ds-space-200, 16px)",
+          marginLeft: "var(--ds-space-negative-150, -12px)",
+          marginRight: "var(--ds-space-negative-150, -12px)",
+          boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
+          borderRadius: "var(--ds-border-radius, 4px)"
+        })
+      }, 0]];
+    }
+  });
+};

package/dist/es2019/nodeviews/lazyExtension.js

@@ -0,0 +1,21 @@
+import { ExtensionNodeView } from '@atlaskit/editor-common/extensibility';
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+export function lazyExtensionNodeView(nodeName, ...params) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return ExtensionNodeView(...params);
+  }
+  return withLazyLoading({
+    nodeName,
+    getNodeViewOptions: () => {},
+    loader: () => {
+      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-extension-nodeview" */
+      '@atlaskit/editor-common/extensibility').then(({
+        ExtensionNodeView
+      }) => {
+        return ExtensionNodeView(...params);
+      });
+      return result;
+    }
+  });
+}

package/dist/es2019/plugin.js

@@ -1,6 +1,6 @@
-import { bodiedExtension, extension, extensionFrame, inlineExtension, multiBodiedExtension } from '@atlaskit/adf-schema';
+import { extension, extensionFrame, inlineExtension, multiBodiedExtension } from '@atlaskit/adf-schema';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createEditSelectedExtensionAction, insertOrReplaceBodiedExtension, insertOrReplaceExtension } from './actions';
 import { forceAutoSave } from './commands';
 import { getContextPanel } from './context-panel';
@@ -10,6 +10,7 @@ import { createPlugin as createMacroPlugin } from './pm-plugins/macro';
 import { insertMacroFromMacroBrowser, runMacroAutoConvert } from './pm-plugins/macro/actions';
 import { createPlugin, pluginKey } from './pm-plugins/main';
 import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
+import { bodiedExtensionSpecWithFixedToDOM } from './toDOM-fixes/bodiedExtension';
 import { getToolbarConfig } from './toolbar';
 export const extensionPlugin = ({
   config: options = {},
@@ -30,14 +31,14 @@ export const extensionPlugin = ({
         node: extension
       }, {
         name: 'bodiedExtension',
-        node: bodiedExtension
+        node: bodiedExtensionSpecWithFixedToDOM()
       }, {
         name: 'inlineExtension',
         node: inlineExtension
       }];
 
       // Revert to returning all nodes without local variable, once FF is removed
-      if (getBooleanFF('platform.editor.multi-bodied-extension_0rygg')) {
+      if (fg('platform.editor.multi-bodied-extension_0rygg')) {
         extensionNodes.push({
           name: 'extensionFrame',
           node: extensionFrame

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

@@ -1,10 +1,10 @@
-import { ExtensionNodeView } from '@atlaskit/editor-common/extensibility';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler, GapCursorSelection, isSelectionAtEndOfNode, isSelectionAtStartOfNode } from '@atlaskit/editor-common/selection';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { clearEditingContext, updateState } from '../commands';
+import { lazyExtensionNodeView } from '../nodeviews/lazyExtension';
 import { createCommand, createPluginState, getPluginState } from '../plugin-factory';
 import { pluginKey } from '../plugin-key';
 import { getSelectedDomElement, getSelectedExtension } from '../utils';
@@ -233,12 +233,12 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
       },
       nodeViews: {
         // WARNING: referentiality-plugin also creates these nodeviews
-        extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
+        extension: lazyExtensionNodeView('extension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
         // WARNING: referentiality-plugin also creates these nodeviews
-        bodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
+        bodiedExtension: lazyExtensionNodeView('bodiedExtension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
         // WARNING: referentiality-plugin also creates these nodeviews
-        inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
-        multiBodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags)
+        inlineExtension: lazyExtensionNodeView('inlineExtension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
+        multiBodiedExtension: lazyExtensionNodeView('multiBodiedExtension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags)
       },
       createSelectionBetween: function (view, anchor, head) {
         if (!fg('platform.editor.multi-bodied-extension_0rygg')) {

package/dist/es2019/toDOM-fixes/bodiedExtension.js

@@ -0,0 +1,60 @@
+import { bodiedExtension } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N30 } from '@atlaskit/theme/colors';
+const capitalizeFirstLetter = str => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+// @nodeSpecException:toDOM patch
+export const bodiedExtensionSpecWithFixedToDOM = () => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return bodiedExtension;
+  }
+  return {
+    ...bodiedExtension,
+    toDOM: node => {
+      const attrs = {
+        'data-node-type': 'bodied-extension',
+        'data-extension-type': node.attrs.extensionType,
+        'data-extension-key': node.attrs.extensionKey,
+        'data-text': node.attrs.text,
+        'data-parameters': JSON.stringify(node.attrs.parameters),
+        'data-layout': node.attrs.layout,
+        'data-local-id:': node.attrs.localId,
+        style: convertToInlineCss({
+          position: 'relative',
+          marginTop: "var(--ds-space-300, 24px)"
+        })
+      };
+      const title = node.attrs && node.attrs.extensionTitle || node.attrs && node.attrs.macroMetadata && node.attrs.macroMetadata.title || node.attrs.extensionKey;
+      return ['div', attrs, ['span', {
+        // Styles based on `packages/editor/editor-common/src/extensibility/Extension/Lozenge/ExtensionLabel.tsx`
+        style: convertToInlineCss({
+          boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`,
+          fontSize: '14px',
+          padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`,
+          color: "var(--ds-text-subtle, #44546F)",
+          borderTopLeftRadius: "var(--ds-border-radius, 4px)",
+          borderTopRightRadius: "var(--ds-border-radius, 4px)",
+          lineHeight: 1,
+          position: 'absolute',
+          top: '-19px'
+        }),
+        // If we put this below inside the span then we serialise the label (which causes the label to be
+        // be copied to the clipboard causing copy-paste issues).
+        // So instead we use a pseudo-element to add the title to this class
+        'data-bodied-extension-label': capitalizeFirstLetter(title),
+        class: 'bodied-extension-to-dom-label'
+      }], ['div', {
+        style: convertToInlineCss({
+          padding: "var(--ds-space-200, 16px)",
+          marginLeft: "var(--ds-space-negative-150, -12px)",
+          marginRight: "var(--ds-space-negative-150, -12px)",
+          boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`,
+          borderRadius: "var(--ds-border-radius, 4px)"
+        })
+      }, 0]];
+    }
+  };
+};

package/dist/esm/nodeviews/lazyExtension.js

@@ -0,0 +1,23 @@
+import { ExtensionNodeView } from '@atlaskit/editor-common/extensibility';
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+export function lazyExtensionNodeView(nodeName) {
+  for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    params[_key - 1] = arguments[_key];
+  }
+  if (!fg('platform_editor_lazy-node-views')) {
+    return ExtensionNodeView.apply(void 0, params);
+  }
+  return withLazyLoading({
+    nodeName: nodeName,
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-extension-nodeview" */
+      '@atlaskit/editor-common/extensibility').then(function (_ref) {
+        var ExtensionNodeView = _ref.ExtensionNodeView;
+        return ExtensionNodeView.apply(void 0, params);
+      });
+      return result;
+    }
+  });
+}

package/dist/esm/plugin.js

@@ -1,6 +1,6 @@
-import { bodiedExtension, extension, extensionFrame, inlineExtension, multiBodiedExtension } from '@atlaskit/adf-schema';
+import { extension, extensionFrame, inlineExtension, multiBodiedExtension } from '@atlaskit/adf-schema';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createEditSelectedExtensionAction, insertOrReplaceBodiedExtension as _insertOrReplaceBodiedExtension, insertOrReplaceExtension as _insertOrReplaceExtension } from './actions';
 import { forceAutoSave } from './commands';
 import { getContextPanel } from './context-panel';
@@ -10,6 +10,7 @@ import { createPlugin as createMacroPlugin } from './pm-plugins/macro';
 import { insertMacroFromMacroBrowser, runMacroAutoConvert } from './pm-plugins/macro/actions';
 import { createPlugin, pluginKey } from './pm-plugins/main';
 import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
+import { bodiedExtensionSpecWithFixedToDOM } from './toDOM-fixes/bodiedExtension';
 import { getToolbarConfig } from './toolbar';
 export var extensionPlugin = function extensionPlugin(_ref) {
   var _api$featureFlags, _api$analytics2, _api$analytics3, _api$contextPanel3, _api$decorations, _api$contextPanel4, _api$analytics4;
@@ -30,14 +31,14 @@ export var extensionPlugin = function extensionPlugin(_ref) {
         node: extension
       }, {
         name: 'bodiedExtension',
-        node: bodiedExtension
+        node: bodiedExtensionSpecWithFixedToDOM()
       }, {
         name: 'inlineExtension',
         node: inlineExtension
       }];
 
       // Revert to returning all nodes without local variable, once FF is removed
-      if (getBooleanFF('platform.editor.multi-bodied-extension_0rygg')) {
+      if (fg('platform.editor.multi-bodied-extension_0rygg')) {
         extensionNodes.push({
           name: 'extensionFrame',
           node: extensionFrame

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

@@ -1,13 +1,13 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { ExtensionNodeView } from '@atlaskit/editor-common/extensibility';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler, GapCursorSelection, isSelectionAtEndOfNode, isSelectionAtStartOfNode } from '@atlaskit/editor-common/selection';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { clearEditingContext, updateState } from '../commands';
+import { lazyExtensionNodeView } from '../nodeviews/lazyExtension';
 import { createCommand, createPluginState, getPluginState } from '../plugin-factory';
 import { pluginKey } from '../plugin-key';
 import { getSelectedDomElement, getSelectedExtension } from '../utils';
@@ -272,12 +272,12 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
       },
       nodeViews: {
         // WARNING: referentiality-plugin also creates these nodeviews
-        extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
+        extension: lazyExtensionNodeView('extension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
         // WARNING: referentiality-plugin also creates these nodeviews
-        bodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
+        bodiedExtension: lazyExtensionNodeView('bodiedExtension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
         // WARNING: referentiality-plugin also creates these nodeviews
-        inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
-        multiBodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags)
+        inlineExtension: lazyExtensionNodeView('inlineExtension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags),
+        multiBodiedExtension: lazyExtensionNodeView('multiBodiedExtension', portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags)
       },
       createSelectionBetween: function createSelectionBetween(view, anchor, head) {
         if (!fg('platform.editor.multi-bodied-extension_0rygg')) {

package/dist/esm/toDOM-fixes/bodiedExtension.js

@@ -0,0 +1,62 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { bodiedExtension } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N30 } from '@atlaskit/theme/colors';
+var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+// @nodeSpecException:toDOM patch
+export var bodiedExtensionSpecWithFixedToDOM = function bodiedExtensionSpecWithFixedToDOM() {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return bodiedExtension;
+  }
+  return _objectSpread(_objectSpread({}, bodiedExtension), {}, {
+    toDOM: function toDOM(node) {
+      var attrs = {
+        'data-node-type': 'bodied-extension',
+        'data-extension-type': node.attrs.extensionType,
+        'data-extension-key': node.attrs.extensionKey,
+        'data-text': node.attrs.text,
+        'data-parameters': JSON.stringify(node.attrs.parameters),
+        'data-layout': node.attrs.layout,
+        'data-local-id:': node.attrs.localId,
+        style: convertToInlineCss({
+          position: 'relative',
+          marginTop: "var(--ds-space-300, 24px)"
+        })
+      };
+      var title = node.attrs && node.attrs.extensionTitle || node.attrs && node.attrs.macroMetadata && node.attrs.macroMetadata.title || node.attrs.extensionKey;
+      return ['div', attrs, ['span', {
+        // Styles based on `packages/editor/editor-common/src/extensibility/Extension/Lozenge/ExtensionLabel.tsx`
+        style: convertToInlineCss({
+          boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(N30, ")")),
+          fontSize: '14px',
+          padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
+          color: "var(--ds-text-subtle, #44546F)",
+          borderTopLeftRadius: "var(--ds-border-radius, 4px)",
+          borderTopRightRadius: "var(--ds-border-radius, 4px)",
+          lineHeight: 1,
+          position: 'absolute',
+          top: '-19px'
+        }),
+        // If we put this below inside the span then we serialise the label (which causes the label to be
+        // be copied to the clipboard causing copy-paste issues).
+        // So instead we use a pseudo-element to add the title to this class
+        'data-bodied-extension-label': capitalizeFirstLetter(title),
+        class: 'bodied-extension-to-dom-label'
+      }], ['div', {
+        style: convertToInlineCss({
+          padding: "var(--ds-space-200, 16px)",
+          marginLeft: "var(--ds-space-negative-150, -12px)",
+          marginRight: "var(--ds-space-negative-150, -12px)",
+          boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(N30, ")")),
+          borderRadius: "var(--ds-border-radius, 4px)"
+        })
+      }, 0]];
+    }
+  });
+};

package/dist/types/nodeviews/lazyExtension.d.ts

@@ -0,0 +1,2 @@
+import { ExtensionNodeView } from '@atlaskit/editor-common/extensibility';
+export declare function lazyExtensionNodeView(nodeName: string, ...params: Parameters<typeof ExtensionNodeView>): import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;

package/dist/types/toDOM-fixes/bodiedExtension.d.ts

@@ -0,0 +1 @@
+export declare const bodiedExtensionSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types-ts4.5/nodeviews/lazyExtension.d.ts

@@ -0,0 +1,2 @@
+import { ExtensionNodeView } from '@atlaskit/editor-common/extensibility';
+export declare function lazyExtensionNodeView(nodeName: string, ...params: Parameters<typeof ExtensionNodeView>): import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;

package/dist/types-ts4.5/toDOM-fixes/bodiedExtension.d.ts

@@ -0,0 +1 @@
+export declare const bodiedExtensionSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-extension",
-	"version": "1.12.1",
+	"version": "1.12.3",
 	"description": "editor-plugin-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -26,12 +26,12 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/adf-utils": "^19.6.0",
-		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/avatar": "^21.11.0",
+		"@atlaskit/analytics-next": "^10.0.0",
+		"@atlaskit/avatar": "^21.12.0",
 		"@atlaskit/button": "^19.1.0",
-		"@atlaskit/checkbox": "^13.5.0",
-		"@atlaskit/datetime-picker": "^13.7.0",
-		"@atlaskit/editor-common": "^87.0.0",
+		"@atlaskit/checkbox": "^13.6.0",
+		"@atlaskit/datetime-picker": "^13.8.0",
+		"@atlaskit/editor-common": "^87.5.0",
 		"@atlaskit/editor-json-transformer": "^8.17.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
 		"@atlaskit/editor-plugin-context-identifier": "^1.2.0",
@@ -42,9 +42,9 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/empty-state": "^7.9.0",
+		"@atlaskit/empty-state": "^7.10.0",
 		"@atlaskit/form": "^10.4.0",
-		"@atlaskit/icon": "^22.7.0",
+		"@atlaskit/icon": "^22.10.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/radio": "^6.4.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/textfield": "^6.4.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/toggle": "^13.2.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -114,6 +114,9 @@
 	"platform-feature-flags": {
 		"platform.editor.multi-bodied-extension_0rygg": {
 			"type": "boolean"
+		},
+		"platform_editor_lazy-node-views": {
+			"type": "boolean"
 		}
 	}
 }