@atlaskit/editor-plugin-card 2.6.0 → 2.6.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-card
 
+## 2.6.2
+
+### Patch Changes
+
+- [#120605](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120605)
+  [`b2b0cfe2fb0c4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b2b0cfe2fb0c4) -
+  Removed unused code in leftIconOverlay
+- [#121395](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121395)
+  [`caceefb824256`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/caceefb824256) -
+  Removing contenteditable and CCFE workaround for smart links in live pages
+- Updated dependencies
+
+## 2.6.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.6.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/blockCard.js

@@ -132,30 +132,48 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
   (0, _inherits2.default)(BlockCard, _ReactNodeView);
   var _super2 = _createSuper(BlockCard);
   function BlockCard() {
+    var _this2;
     (0, _classCallCheck2.default)(this, BlockCard);
-    return _super2.apply(this, arguments);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "updateContentEditable", function (editorViewModeState, divElement) {
+      divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
+    });
+    return _this2;
   }
   (0, _createClass2.default)(BlockCard, [{
     key: "createDomRef",
     value: function createDomRef() {
+      var _this3 = this;
       var domRef = document.createElement('div');
       if (this.reactComponentProps.platform !== 'mobile') {
         // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
-        domRef.contentEditable = 'true';
+        if ((0, _platformFeatureFlags.fg)('linking-platform-contenteditable-false-live-view')) {
+          var _this$reactComponentP, _this$reactComponentP2;
+          this.unsubscribe = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.sharedState.onChange(function (_ref2) {
+            var nextSharedState = _ref2.nextSharedState;
+            return _this3.updateContentEditable(nextSharedState, domRef);
+          });
+          this.updateContentEditable((_this$reactComponentP2 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP2 === void 0 || (_this$reactComponentP2 = _this$reactComponentP2.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.currentState(), domRef);
+        } else {
+          domRef.contentEditable = 'true';
+        }
         domRef.setAttribute('spellcheck', 'false');
       }
       return domRef;
     }
-
+  }, {
+    key: "validUpdate",
+    value:
     // Need this function to check if the datasource attribute was added or not to a blockCard.
     // If so, we return false so we can get the node to re-render properly as a datasource node instead.
     // Otherwise, the node view will still consider the node as a blockCard and render a regular blockCard.
-  }, {
-    key: "validUpdate",
-    value: function validUpdate(currentNode, newNode) {
+    function validUpdate(currentNode, newNode) {
       var _currentNode$attrs, _newNode$attrs;
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.editor-datasource-typeguards')) {
+      if ((0, _platformFeatureFlags.fg)('platform.linking-platform.editor-datasource-typeguards')) {
         var _isCurrentNodeBlockCard = !(0, _utils2.isDatasourceNode)(currentNode);
         var _isNewNodeDatasource = (0, _utils2.isDatasourceNode)(newNode);
 
@@ -176,12 +194,12 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
-      var _this$reactComponentP = this.reactComponentProps,
-        platform = _this$reactComponentP.platform,
-        actionOptions = _this$reactComponentP.actionOptions,
-        showServerActions = _this$reactComponentP.showServerActions,
-        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
-        onClickCallback = _this$reactComponentP.onClickCallback;
+      var _this$reactComponentP3 = this.reactComponentProps,
+        platform = _this$reactComponentP3.platform,
+        actionOptions = _this$reactComponentP3.actionOptions,
+        showServerActions = _this$reactComponentP3.showServerActions,
+        pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
+        onClickCallback = _this$reactComponentP3.onClickCallback;
       return /*#__PURE__*/_react.default.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -193,6 +211,12 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         onClickCallback: onClickCallback
       });
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$unsubscribe;
+      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+    }
   }]);
   return BlockCard;
 }(_reactNodeView.default);

package/dist/cjs/nodeviews/embedCard.js

@@ -23,6 +23,7 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _actions = require("../pm-plugins/actions");
 var _ResizableEmbedCard = _interopRequireDefault(require("../ui/ResizableEmbedCard"));
@@ -350,8 +351,16 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   (0, _inherits2.default)(EmbedCard, _ReactNodeView);
   var _super2 = _createSuper(EmbedCard);
   function EmbedCard() {
+    var _this2;
     (0, _classCallCheck2.default)(this, EmbedCard);
-    return _super2.apply(this, arguments);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "updateContentEditable", function (editorViewModeState, divElement) {
+      divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
+    });
+    return _this2;
   }
   (0, _createClass2.default)(EmbedCard, [{
     key: "viewShouldUpdate",
@@ -364,10 +373,20 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "createDomRef",
     value: function createDomRef() {
+      var _this3 = this;
       var domRef = document.createElement('div');
       if (this.reactComponentProps.platform !== 'mobile') {
         // It is a tradeoff for the bug mentioned that occurs in Chrome: https://product-fabric.atlassian.net/browse/ED-5379, https://github.com/ProseMirror/prosemirror/issues/884
-        domRef.contentEditable = 'true';
+        if ((0, _platformFeatureFlags.fg)('linking-platform-contenteditable-false-live-view')) {
+          var _this$reactComponentP, _this$reactComponentP2;
+          this.unsubscribe = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.sharedState.onChange(function (_ref3) {
+            var nextSharedState = _ref3.nextSharedState;
+            return _this3.updateContentEditable(nextSharedState, domRef);
+          });
+          this.updateContentEditable((_this$reactComponentP2 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP2 === void 0 || (_this$reactComponentP2 = _this$reactComponentP2.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.currentState(), domRef);
+        } else {
+          domRef.contentEditable = 'true';
+        }
         domRef.setAttribute('spellcheck', 'false');
       }
       return domRef;
@@ -375,14 +394,14 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
-      var _this$reactComponentP = this.reactComponentProps,
-        eventDispatcher = _this$reactComponentP.eventDispatcher,
-        allowResizing = _this$reactComponentP.allowResizing,
-        platform = _this$reactComponentP.platform,
-        fullWidthMode = _this$reactComponentP.fullWidthMode,
-        dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent,
-        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
-        onClickCallback = _this$reactComponentP.onClickCallback;
+      var _this$reactComponentP3 = this.reactComponentProps,
+        eventDispatcher = _this$reactComponentP3.eventDispatcher,
+        allowResizing = _this$reactComponentP3.allowResizing,
+        platform = _this$reactComponentP3.platform,
+        fullWidthMode = _this$reactComponentP3.fullWidthMode,
+        dispatchAnalyticsEvent = _this$reactComponentP3.dispatchAnalyticsEvent,
+        pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
+        onClickCallback = _this$reactComponentP3.onClickCallback;
       return /*#__PURE__*/_react.default.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -396,6 +415,12 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         onClickCallback: onClickCallback
       });
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$unsubscribe;
+      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+    }
   }]);
   return EmbedCard;
 }(_reactNodeView.default);

package/dist/es2019/nodeviews/blockCard.js

@@ -5,7 +5,7 @@ import rafSchedule from 'raf-schd';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
 import { isDatasourceNode } from '../utils';
@@ -108,23 +108,36 @@ _defineProperty(BlockCardComponent, "contextTypes", {
 });
 const WrappedBlockCard = Card(BlockCardComponent, UnsupportedBlock);
 export class BlockCard extends ReactNodeView {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "updateContentEditable", (editorViewModeState, divElement) => {
+      divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
+    });
+  }
   createDomRef() {
     const domRef = document.createElement('div');
     if (this.reactComponentProps.platform !== 'mobile') {
       // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
       // see also: https://github.com/ProseMirror/prosemirror/issues/884
-      domRef.contentEditable = 'true';
+      if (fg('linking-platform-contenteditable-false-live-view')) {
+        var _this$reactComponentP, _this$reactComponentP2, _this$reactComponentP3, _this$reactComponentP4;
+        this.unsubscribe = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 ? void 0 : (_this$reactComponentP2 = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.onChange(({
+          nextSharedState
+        }) => this.updateContentEditable(nextSharedState, domRef));
+        this.updateContentEditable((_this$reactComponentP3 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP3 === void 0 ? void 0 : (_this$reactComponentP4 = _this$reactComponentP3.editorViewMode) === null || _this$reactComponentP4 === void 0 ? void 0 : _this$reactComponentP4.sharedState.currentState(), domRef);
+      } else {
+        domRef.contentEditable = 'true';
+      }
       domRef.setAttribute('spellcheck', 'false');
     }
     return domRef;
   }
-
   // Need this function to check if the datasource attribute was added or not to a blockCard.
   // If so, we return false so we can get the node to re-render properly as a datasource node instead.
   // Otherwise, the node view will still consider the node as a blockCard and render a regular blockCard.
   validUpdate(currentNode, newNode) {
     var _currentNode$attrs, _newNode$attrs;
-    if (getBooleanFF('platform.linking-platform.editor-datasource-typeguards')) {
+    if (fg('platform.linking-platform.editor-datasource-typeguards')) {
       const isCurrentNodeBlockCard = !isDatasourceNode(currentNode);
       const isNewNodeDatasource = isDatasourceNode(newNode);
 
@@ -159,4 +172,8 @@ export class BlockCard extends ReactNodeView {
       onClickCallback: onClickCallback
     });
   }
+  destroy() {
+    var _this$unsubscribe;
+    (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
+  }
 }

package/dist/es2019/nodeviews/embedCard.js

@@ -9,6 +9,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
@@ -334,6 +335,12 @@ _defineProperty(EmbedCardComponent, "contextTypes", {
 });
 const WrappedBlockCard = Card(EmbedCardComponent, UnsupportedBlock);
 export class EmbedCard extends ReactNodeView {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "updateContentEditable", (editorViewModeState, divElement) => {
+      divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
+    });
+  }
   viewShouldUpdate(nextNode) {
     if (this.node.attrs !== nextNode.attrs) {
       return true;
@@ -344,7 +351,15 @@ export class EmbedCard extends ReactNodeView {
     const domRef = document.createElement('div');
     if (this.reactComponentProps.platform !== 'mobile') {
       // It is a tradeoff for the bug mentioned that occurs in Chrome: https://product-fabric.atlassian.net/browse/ED-5379, https://github.com/ProseMirror/prosemirror/issues/884
-      domRef.contentEditable = 'true';
+      if (fg('linking-platform-contenteditable-false-live-view')) {
+        var _this$reactComponentP, _this$reactComponentP2, _this$reactComponentP3, _this$reactComponentP4;
+        this.unsubscribe = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 ? void 0 : (_this$reactComponentP2 = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.onChange(({
+          nextSharedState
+        }) => this.updateContentEditable(nextSharedState, domRef));
+        this.updateContentEditable((_this$reactComponentP3 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP3 === void 0 ? void 0 : (_this$reactComponentP4 = _this$reactComponentP3.editorViewMode) === null || _this$reactComponentP4 === void 0 ? void 0 : _this$reactComponentP4.sharedState.currentState(), domRef);
+      } else {
+        domRef.contentEditable = 'true';
+      }
       domRef.setAttribute('spellcheck', 'false');
     }
     return domRef;
@@ -372,4 +387,8 @@ export class EmbedCard extends ReactNodeView {
       onClickCallback: onClickCallback
     });
   }
+  destroy() {
+    var _this$unsubscribe;
+    (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
+  }
 }

package/dist/esm/nodeviews/blockCard.js

@@ -14,7 +14,7 @@ import rafSchedule from 'raf-schd';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
 import { isDatasourceNode } from '../utils';
@@ -126,30 +126,48 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(BlockCard, _ReactNodeView);
   var _super2 = _createSuper(BlockCard);
   function BlockCard() {
+    var _this2;
     _classCallCheck(this, BlockCard);
-    return _super2.apply(this, arguments);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this2), "updateContentEditable", function (editorViewModeState, divElement) {
+      divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
+    });
+    return _this2;
   }
   _createClass(BlockCard, [{
     key: "createDomRef",
     value: function createDomRef() {
+      var _this3 = this;
       var domRef = document.createElement('div');
       if (this.reactComponentProps.platform !== 'mobile') {
         // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
-        domRef.contentEditable = 'true';
+        if (fg('linking-platform-contenteditable-false-live-view')) {
+          var _this$reactComponentP, _this$reactComponentP2;
+          this.unsubscribe = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.sharedState.onChange(function (_ref2) {
+            var nextSharedState = _ref2.nextSharedState;
+            return _this3.updateContentEditable(nextSharedState, domRef);
+          });
+          this.updateContentEditable((_this$reactComponentP2 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP2 === void 0 || (_this$reactComponentP2 = _this$reactComponentP2.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.currentState(), domRef);
+        } else {
+          domRef.contentEditable = 'true';
+        }
         domRef.setAttribute('spellcheck', 'false');
       }
       return domRef;
     }
-
+  }, {
+    key: "validUpdate",
+    value:
     // Need this function to check if the datasource attribute was added or not to a blockCard.
     // If so, we return false so we can get the node to re-render properly as a datasource node instead.
     // Otherwise, the node view will still consider the node as a blockCard and render a regular blockCard.
-  }, {
-    key: "validUpdate",
-    value: function validUpdate(currentNode, newNode) {
+    function validUpdate(currentNode, newNode) {
       var _currentNode$attrs, _newNode$attrs;
-      if (getBooleanFF('platform.linking-platform.editor-datasource-typeguards')) {
+      if (fg('platform.linking-platform.editor-datasource-typeguards')) {
         var _isCurrentNodeBlockCard = !isDatasourceNode(currentNode);
         var _isNewNodeDatasource = isDatasourceNode(newNode);
 
@@ -170,12 +188,12 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
-      var _this$reactComponentP = this.reactComponentProps,
-        platform = _this$reactComponentP.platform,
-        actionOptions = _this$reactComponentP.actionOptions,
-        showServerActions = _this$reactComponentP.showServerActions,
-        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
-        onClickCallback = _this$reactComponentP.onClickCallback;
+      var _this$reactComponentP3 = this.reactComponentProps,
+        platform = _this$reactComponentP3.platform,
+        actionOptions = _this$reactComponentP3.actionOptions,
+        showServerActions = _this$reactComponentP3.showServerActions,
+        pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
+        onClickCallback = _this$reactComponentP3.onClickCallback;
       return /*#__PURE__*/React.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -187,6 +205,12 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         onClickCallback: onClickCallback
       });
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$unsubscribe;
+      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+    }
   }]);
   return BlockCard;
 }(ReactNodeView);

package/dist/esm/nodeviews/embedCard.js

@@ -20,6 +20,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
@@ -343,8 +344,16 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(EmbedCard, _ReactNodeView);
   var _super2 = _createSuper(EmbedCard);
   function EmbedCard() {
+    var _this2;
     _classCallCheck(this, EmbedCard);
-    return _super2.apply(this, arguments);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this2), "updateContentEditable", function (editorViewModeState, divElement) {
+      divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
+    });
+    return _this2;
   }
   _createClass(EmbedCard, [{
     key: "viewShouldUpdate",
@@ -357,10 +366,20 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "createDomRef",
     value: function createDomRef() {
+      var _this3 = this;
       var domRef = document.createElement('div');
       if (this.reactComponentProps.platform !== 'mobile') {
         // It is a tradeoff for the bug mentioned that occurs in Chrome: https://product-fabric.atlassian.net/browse/ED-5379, https://github.com/ProseMirror/prosemirror/issues/884
-        domRef.contentEditable = 'true';
+        if (fg('linking-platform-contenteditable-false-live-view')) {
+          var _this$reactComponentP, _this$reactComponentP2;
+          this.unsubscribe = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.sharedState.onChange(function (_ref3) {
+            var nextSharedState = _ref3.nextSharedState;
+            return _this3.updateContentEditable(nextSharedState, domRef);
+          });
+          this.updateContentEditable((_this$reactComponentP2 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP2 === void 0 || (_this$reactComponentP2 = _this$reactComponentP2.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.currentState(), domRef);
+        } else {
+          domRef.contentEditable = 'true';
+        }
         domRef.setAttribute('spellcheck', 'false');
       }
       return domRef;
@@ -368,14 +387,14 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
-      var _this$reactComponentP = this.reactComponentProps,
-        eventDispatcher = _this$reactComponentP.eventDispatcher,
-        allowResizing = _this$reactComponentP.allowResizing,
-        platform = _this$reactComponentP.platform,
-        fullWidthMode = _this$reactComponentP.fullWidthMode,
-        dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent,
-        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
-        onClickCallback = _this$reactComponentP.onClickCallback;
+      var _this$reactComponentP3 = this.reactComponentProps,
+        eventDispatcher = _this$reactComponentP3.eventDispatcher,
+        allowResizing = _this$reactComponentP3.allowResizing,
+        platform = _this$reactComponentP3.platform,
+        fullWidthMode = _this$reactComponentP3.fullWidthMode,
+        dispatchAnalyticsEvent = _this$reactComponentP3.dispatchAnalyticsEvent,
+        pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
+        onClickCallback = _this$reactComponentP3.onClickCallback;
       return /*#__PURE__*/React.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -389,6 +408,12 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         onClickCallback: onClickCallback
       });
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$unsubscribe;
+      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+    }
   }]);
   return EmbedCard;
 }(ReactNodeView);

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

@@ -22,8 +22,11 @@ export declare class BlockCardComponent extends React.PureComponent<SmartCardPro
 }
 export type BlockCardNodeViewProps = Pick<SmartCardProps, 'platform' | 'actionOptions' | 'showServerActions' | 'pluginInjectionApi' | 'onClickCallback'>;
 export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
+    unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
+    private updateContentEditable;
     validUpdate(currentNode: Node, newNode: Node): boolean;
     update(node: Node, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource): boolean;
     render(): JSX.Element;
+    destroy(): void;
 }

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

@@ -40,7 +40,10 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
 }
 export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'platform' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi' | 'actionOptions' | 'showServerActions' | 'onClickCallback'>;
 export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
+    unsubscribe: (() => void) | undefined;
     viewShouldUpdate(nextNode: PMNode): boolean;
     createDomRef(): HTMLElement;
+    private updateContentEditable;
     render(): JSX.Element;
+    destroy(): void;
 }

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

@@ -22,8 +22,11 @@ export declare class BlockCardComponent extends React.PureComponent<SmartCardPro
 }
 export type BlockCardNodeViewProps = Pick<SmartCardProps, 'platform' | 'actionOptions' | 'showServerActions' | 'pluginInjectionApi' | 'onClickCallback'>;
 export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
+    unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
+    private updateContentEditable;
     validUpdate(currentNode: Node, newNode: Node): boolean;
     update(node: Node, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource): boolean;
     render(): JSX.Element;
+    destroy(): void;
 }

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

@@ -40,7 +40,10 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
 }
 export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'platform' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi' | 'actionOptions' | 'showServerActions' | 'onClickCallback'>;
 export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
+    unsubscribe: (() => void) | undefined;
     viewShouldUpdate(nextNode: PMNode): boolean;
     createDomRef(): HTMLElement;
+    private updateContentEditable;
     render(): JSX.Element;
+    destroy(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "2.6.0",
+	"version": "2.6.2",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,10 +34,8 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^39.0.3",
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/button": "^18.4.0",
 		"@atlaskit/custom-steps": "^0.4.0",
-		"@atlaskit/dropdown-menu": "^12.14.0",
-		"@atlaskit/editor-common": "^85.0.0",
+		"@atlaskit/editor-common": "^86.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
 		"@atlaskit/editor-plugin-decorations": "^1.1.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.0",
@@ -55,13 +53,12 @@
 		"@atlaskit/link-datasource": "^2.5.0",
 		"@atlaskit/linking-common": "^5.7.0",
 		"@atlaskit/linking-types": "^8.11.0",
-		"@atlaskit/menu": "2.8.0",
+		"@atlaskit/menu": "2.8.1",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^11.0.0",
 		"@atlaskit/smart-card": "^27.9.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.54.0",
-		"@atlaskit/tooltip": "^18.5.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
@@ -136,6 +133,9 @@
 		},
 		"platform_editor_get_card_provider_from_config": {
 			"type": "boolean"
+		},
+		"linking-platform-contenteditable-false-live-view": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {

package/dist/cjs/ui/LeftIconOverlay/ConfigureLinkDropdown/index.js

@@ -1,58 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
-var _new = _interopRequireDefault(require("@atlaskit/button/new"));
-var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
-var _messages = require("@atlaskit/editor-common/messages");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
-var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
-var _excluded = ["triggerRef"];
-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" != _typeof(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; }
-var ConfigureLinkDropdown = function ConfigureLinkDropdown(props) {
-  var testId = props.testId;
-  var intl = (0, _reactIntlNext.useIntl)();
-  var configureLinkLabel = intl.formatMessage(_messages.cardMessages.inlineConfigureLink);
-  var goToLinkLabel = intl.formatMessage(_messages.cardMessages.inlineConfigureLink);
-  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
-    trigger: function trigger(_ref) {
-      var triggerRef = _ref.triggerRef,
-        props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_new.default, (0, _extends2.default)({}, props, {
-        spacing: 'none',
-        ref: triggerRef
-      }), /*#__PURE__*/_react.default.createElement("span", {
-        style: {
-          padding: "0 ".concat("var(--ds-space-025, 2px)")
-        }
-      }, /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-        label: configureLinkLabel,
-        size: 'small',
-        testId: "".concat(testId, "-icon")
-      })));
-    },
-    spacing: 'compact',
-    placement: 'bottom-start'
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    elemBefore: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
-      label: goToLinkLabel,
-      size: 'small'
-    })
-  }, goToLinkLabel), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    elemBefore: /*#__PURE__*/_react.default.createElement(_preferences.default, {
-      label: configureLinkLabel,
-      size: 'small'
-    })
-  }, configureLinkLabel)));
-};
-var _default = exports.default = ConfigureLinkDropdown;